后台管理系统开发规范

下面整理出后台管理系统开发中的常用的一些规范，仅作参考。

1. Table页面

• 表格列为状态字段时，用不同颜色的点标识，颜色通过常量配置。
• 表格列为纯数字时需要添加排序功能，比如id, time, num等。
• 表格列内容尽量不换行，超出部分省略号显示。
• 表格列内容较多时需要配置showOverflow: true, 值支持tooltip，title。
• 表格尽量加序号字段，弹窗表格可以不显示序号字段。
• 表格筛选项少于4个时，filterForm设置hasSpread: false, 手动去掉展开收起功能。
• 表格操作项”新增””导入””导出””详情”可支持简写配置。
• 表格操作项”新增””编辑””详情”考虑是否公用同一套配置项。
• 表格操作项”新增””编辑””详情”的字段超过一屏时，跳转新页面；否则可以弹窗操作。
• 表格列展示图片，链接时，可以使用showConfig实现。
• 表格操作项默认显示3个，可以通过设置列宽或者个数来控制操作项显示。

2. form页

• 表单页面编辑态时默认一行三列字段。labelPosition: top；column: 3
• 表单页面预览态时默认一行两列字段。labelPosition: left；column: 2
• 弹窗表单弹窗编辑和预览态默认一行两列字段。labelPosition: top/left；column: 2
• 表单编辑态和预览态可以自由切换。
• 表单页面提交需要二次确认，弹窗表单提交可以不需要。
• 表单配置request.formInitial设置表单初始数据或是下拉项。
• 表单配置request.formSubmit设置表单提交逻辑。

3. dialog弹窗

• 弹窗使用分为两类：二次确认弹窗中间弹出；非二次确认弹窗右侧弹出（弹窗宽度仅支持500/800px）。
• 右滑弹窗：内容较多时，宽度为800px；内容较少时，宽度为500px。
• 表格弹窗：如果表格有选中项，则打开弹窗时需要保留选中项。
• 表单的校验按照顺序从上至下，逐步校验。
• 如果后端对接口字段做了必填或格式校验，前端也需要同步做校验。
• 表单数据获取时建议使用指令v-loading实现加载态（加载范围为当前模块），提交时使用$loading加载（加载范围为整个页面）。

4. 其他

• 建议项目中可以多用原子样式的组合来写，减少样式编写量。（类同tailwind.css: www.tailwindcss.cn/）。
• src/components下的组件是全局注册的，直接xx-name使用，无需单独注册。
• 如果有公共的业务组件，代码不放项目里，发包到仓库管理。
• 开发文件里不写假数据，接口mock数据统一放在mock目录里。
• 正常模块开发目录：index.vue列表页，detail.vue详情页，edit.vue编辑页，components公共组件目录，methods/index.ts放公共方法。
• 常量文件的命名，接口文件的命名，pages文件命名保持一致。一个模块的常量文件和接口文件不需要使用文件夹。
• 常量文件的变量定义：仅定义对象，其数组格式由对象衍生而来。
• 接口命名建议on+Method+功能名+xhr，与普通方法做区分。
• 方法命名建议on+动词。
• console.log调试信息尽量不要写在代码里。（虽然可以打包时不打进去，为了代码优雅性，建议还是不要写调试代码）
• 页面路由，文件命名能简写就简写，能用一个单词就用一个单词。
• 完整功能分支命名：feature_20230117_task；短期或快速修复使用hotfix分支：hotfix_20230112_task。
• master分支不直接提交代码。
• 分支合并走git合并请求，尽量不要直接命令行操作，分支合并前自己做好分支反合，解决好冲突。
• 同个任务的不同项目，用同一个分支名。