项目编码规范

适用范围

本项目是 pnpm monorepo，包含多个子项目。本规范仅适用于使用以下技术栈的子项目：

• vue3 + TypeScript + vite + arco design + unocss

判断方式：查看目标目录下是否有 vite.config.ts 且 package.json 中包含上述依赖。

如果用户操作的是 Vue2、React、Node.js 等其他技术栈的子项目，不适用本规范中的 Vue3 专属规则（如表格页规范、组件规范、样式规范、响应式规范、自动导入等），但通用规则（如文件命名规范、注释规范）仍然建议遵循。

技术栈

vue3 + TypeScript + vite + arco design + unocss

表格页规范【Vue3 专属】

常规列表页必须遵循以下模式，参考 web/src/views/components-document/query-table/index.vue：

1. 必须使用 kb-pro-table 作为表格组件
2. 表格逻辑尽量使用 useTable hooks，从 @/hooks 导入
3. 弹窗式编辑优先：新增、编辑操作建议使用弹窗式实现（save.modalComponent 配置）
4. 表单尽量使用 useForm，从 @/hooks 导入
5. 多表格页面必须拆分为多个独立组件

useTable 配置要点

• query.fn：请求函数，严禁在组件内做复杂数据处理，建议放到 request.ts 中
• remove.beforeFn：删除前确认逻辑
• save.modalComponent：弹窗编辑组件

表格列定义

• 使用 IProTableColumn 类型
• 字段名使用枚举 EUserFieldName.xxx 而非字符串
• 通过 setColumnAlign(columns, 'center') 设置默认居中

组件规范【Vue3 专属】

• 使用 arco design 组件库，文档参考 https://arco.design/vue/component
• 自定义组件需类型完备，props 必须声明类型和必要的注释

样式规范【Vue3 专属】

• 优先使用 unocss，避免在