使用者试用后决定不要:清单信息与 tab 徽标(脏点/缺 N)重复,且占据概览篇幅。 revert 29f98494(组件、spec、index.vue 接线全部移除),计划文档记录该决策。 阶段一(脏点)与阶段二(表单设计缺 N 徽标)保留。
7.0 KiB
/system/module-management 导航状态化改造计划
本轮只做导航与状态呈现层:让 8 个 tab 从「哑的入口」变成「会说话的入口」,并让概览页承担配置引导。 不改数据层、不改保存协议与 API。横排导航保留,不做分组(已决策:竖排浪费横向空间,8 个平铺 tab 可接受)。
1. 背景与问题
现状(index.vue):右侧横排胶囊 Tabs(navOnly + 面板 v-show 保活),由 configGroups/configNavItems 驱动;仅查询配置有「缺 N」徽标。
使用侧问题(面向开发与售后两类用户):
- tab 不反映状态:改过哪些 tab、哪些 tab 缺配置,界面上看不出来,全靠用户记忆;
- 一个任务跨多个 tab(加字段 → 表单设计/列表/查询都要看一眼),界面不引导用户走完;
- 概览 tab 只有基本信息,没有承担「新模块配到哪了、还差什么」的引导职责。
2. 总体约束
- 不改子面板对 index.vue 的 props/emits 契约、不改保存请求结构、不改 API 调用。
- 不改
ui/Tabs组件:脏点与徽标全部经现有#label插槽渲染(index.vue 已在用该插槽画图标+文字+徽标)。 - 保留
activeSection机制与v-show保活,不改键盘左右切换行为。 - 每阶段独立 commit;每阶段结束
pnpm test && pnpm lint全绿。涉及导航的测试仅允许更新选择器/文案,不改行为断言。 - 徽标/圆点不得只靠颜色表达:一律配
title/aria-label。
3. 阶段任务
阶段一:分 section 脏检查 + tab 脏点
useModuleConfig 新增 dirtySections(Set):
const SECTION_KEYS = ['module', 'fields', 'groups', 'listConfig', 'editConfig', 'queryConfig', 'autoCode', 'powers']
// 仅对比已加载的 section;逐 section JSON.stringify(drafts[key]) === JSON.stringify(originals[key])
- 现有
hasModuleChanges改为dirtySections.size > 0的派生值,行为必须等价(切换保护、重载确认依赖它)。 - 注意「假脏」陷阱:
loadModuleConfig加载时会自动补全列表/查询默认行(useModuleConfig.js:79–85 附近)。若补全只写drafts不写originals,分 section 对比会立即「脏」。实现时先确认现有整树对比对这些默认行的处理方式,以「现有hasModuleChanges的判定结果」为基准写等价断言,再动手。 - index.vue
#label插槽给脏 tab 追加圆点(约 6px,标签右上角,title="有未保存修改")。
验收:任一 tab 内容修改 → 对应 tab 出现圆点;保存成功或放弃修改 → 全部消失;切换未保存保护、重载确认行为与改造前一致。
阶段二:表单设计「缺 N」徽标
数据模块下统计「启用字段中未被 editConfig 任何行的 b_field_id 引用的数量」,作为表单设计 tab 的徽标,样式与语义沿用查询配置的「缺 N」。
- 口径以
b_field_id引用集合为准,不涉及布局细节(colspan/分组不影响计数)。 editConfig同时承载主表表单/子表表格两种编辑方式,此口径对两者通用。- 查询配置现有徽标不动。
验收:字段定义新增启用字段 → 表单设计 tab 显示「缺 1」;拖入画布后徽标消失;子表表格编辑方式下口径同样成立。
阶段三:概览 tab 升级为完成度 checklist(已实现后撤回)
实现于 commit 29f98494,使用者试用后决定不要(信息与 tab 徽标重复、占概览篇幅), 已 revert 撤回。条目跳转与一键补充的能力需求仍由阶段一/二的 tab 徽标 + 查询面板内既有「一键补充」覆盖。以下原始设计保留作记录,勿再实现。
在概览 tab(basic)内增加「配置完成度」区块,新组件 components/ModuleOverviewChecklist.vue,数据全部由 drafts 派生:
| 条目 | 内容 | 状态 |
|---|---|---|
| 字段定义 | 已启用 X 个字段 | 0 → 提示「先定义字段」 |
| 表单设计 | 缺 N 个未布局(复用阶段二统计) | N>0 → 警示色 |
| 列表配置 | X 列可见(加载自动补全,仅展示数量) | 中性 |
| 查询配置 | 缺 N(复用 missingQueryCount) |
N>0 → 警示色 + 「一键补充」 |
| 权限 | 已配置 X 项 | 0 → 中性提示 |
- 每条目整行可点击 →
activeSection跳转对应 tab;「一键补充」直接调用现有fillMissingConfigs(['queryConfig'])。 - 仅数据/查询模块渲染对应条目(与
configGroups的显隐条件一致);分类模块不渲染 checklist。 - 条目按依赖顺序排列(字段 → 表单 → 列表 → 查询 → 权限),隐式表达配置路径,不做向导式交互。
验收:各计数与对应 tab 实际状态一致;点击跳转正确;新建数据模块的空配置显示引导文案;分类模块无 checklist。
阶段四(可选,单独决策后另开任务):字段中心旁路
字段定义面板表格追加三列状态点(表单/列表/查询:已配置/未配置),hover 显示说明,点击跳转对应 tab。
- 第一版只做「跳 tab」,不做「定位到该字段行」(跨面板选中态联动成本高,留待验证需求后再做)。
- 与阶段二/三共用同一套「字段引用状态」统计函数,单一定义点。
4. 明确不做的事
- 不做 tab 分组、不做竖排导航、不改
ui/Tabs组件。 - 不动多语言 tab 的位置(是否移出主序列属独立决策,本轮不处理)。
- 不做向导式(wizard)配置流。
- 不动保存粒度、不做撤销/重做、不加离开守卫(属「安全网」另一条改造线,见对话记录,另行立项)。
5. 手工冒烟清单(每阶段结束过一遍)
脏点:8 个 tab 各改一处 → 仅对应 tab 出点;保存/放弃后清除;
切换模块三选一弹窗、重载确认、Ctrl/Cmd+S 行为不变
徽标:新增字段未布局 → 表单设计「缺 1」;拖入后消失;查询「缺 N」回归
checklist:各计数正确;条目点击跳 tab;一键补充后查询条目转绿
通用:窄窗口下 tab 行横向滚动可用;键盘 ←/→ 切换不变;分类模块的 tab 集合不变
6. 可直接交给其他 AI 的执行指令
在 fms-vue 项目中按照 docs/module-management-tab-status-plan.md 改造 /system/module-management 的导航状态层。先阅读 index.vue(configGroups/configNavItems/#label 插槽)、composables/useModuleConfig.js(hasModuleChanges 与加载时默认行补全)及相关测试,再按阶段一至三逐步执行(阶段四默认不做):每阶段一个 commit,阶段一必须先为 hasModuleChanges 写等价断言再改实现。全程不改子面板契约、不改保存协议、不改 ui/Tabs 组件。每阶段结束运行 pnpm test && pnpm lint 并按第 5 节清单手工冒烟。交付时说明:修改文件、dirtySections 的等价性验证方式、「假脏」问题的实际结论、测试与冒烟结果。