前端技术栈概览（TduckX）
TduckX 前端基于现代化技术栈构建，使用 Vue 3 + Vite 为核心开发框架，搭配 TypeScript、Element Plus、Pinia 等主流生态组件，实现高效、可维护的表单系统界面。
核心技术
功能类依赖（分类说明）
表单与可视化编辑
| 依赖包 |
功能说明 |
@codemirror/* |
表单公式编辑器（CodeMirror 6） |
@formulajs/formulajs |
Excel 公式支持 |
signature_pad |
手写签名功能 |
sortablejs,vuedraggable |
拖拽排序组件 |
vue-drag-resize |
表单元素大小/位置拖拽 |
数据处理与工具库
| 依赖包 |
功能说明 |
lodash-es |
工具函数库 |
qs |
参数序列化解析 |
dayjs |
日期处理库 |
js-cookie |
Cookie 操作工具 |
axios |
HTTP 请求库 |
nanoid |
唯一 ID 生成 |
mitt |
全局事件总线 |
可视化组件
| 依赖包 |
功能说明 |
echarts |
图表 |
echarts-wordcloud |
词云图插件 |
vxe-table,xe-utils |
高性能表格组件 |
highlight.js |
代码高亮显示 |
jsbarcode |
条形码生成 |
vue-qr |
二维码生成 |
screenfull |
全屏切换支持 |
vue3-print-nb |
页面打印 |
样式与交互
| 依赖包 |
功能说明 |
element-plus/icons-vue |
Element Plus 图标集 |
@icon-park/vue-next |
图标库（IconPark） |
@ctrl/tinycolor |
颜色处理工具（用于 hover 等交互效果） |
resize-detector |
元素大小监听 |
nprogress |
顶部进度条（页面切换） |
vue-clipboard3 |
剪贴板操作（复制粘贴） |
vue-cropper |
图片裁剪组件（头像上传） |
Vue 基础生态
| 依赖包 |
说明 |
vue |
Vue 3 主库 |
vue-router |
路由系统 |
pinia |
状态管理 |
vue-i18n |
国际化 |
vue-demi |
支持 Vue2/3 兼容 |
@vueuse/core |
Vue Composition API 工具集 |
@vue/shared |
Vue 内部共享库 |
UI 拓展与移动端适配
| 依赖包 |
功能说明 |
vant |
移动端 UI 库（部分组件使用） |
ua-parser-js |
浏览器信息识别 |
补充说明
- 所有依赖版本以
2023-11-11 项目状态为基准。
- 大部分包基于 ESM 模式加载，构建速度更快，建议配合 Vite 的依赖预构建优化。
- 若需构建低配兼容版本，可替换部分 ECharts、Table 组件为轻量化版本。