workspace/code/fms/fms-vue/docs/module-management-tab-status-plan.md

/system/module-management 导航状态化改造计划

本轮只做导航与状态呈现层：让 8 个 tab 从「哑的入口」变成「会说话的入口」，并让概览页承担配置引导。 不改数据层、不改保存协议与 API。横排导航保留，不做分组（已决策：竖排浪费横向空间，8 个平铺 tab 可接受）。

1. 背景与问题

现状（index.vue）：右侧横排胶囊 Tabs（navOnly + 面板 v-show 保活），由 configGroups/configNavItems 驱动；仅查询配置有「缺 N」徽标。

使用侧问题（面向开发与售后两类用户）：

1. tab 不反映状态：改过哪些 tab、哪些 tab 缺配置，界面上看不出来，全靠用户记忆；
2. 一个任务跨多个 tab（加字段 → 表单设计/列表/查询都要看一眼），界面不引导用户走完；
3. 概览 tab 只有基本信息，没有承担「新模块配到哪了、还差什么」的引导职责。

2. 总体约束

1. 不改子面板对 index.vue 的 props/emits 契约、不改保存请求结构、不改 API 调用。
2. 不改 ui/Tabs 组件：脏点与徽标全部经现有 #label 插槽渲染（index.vue 已在用该插槽画图标+文字+徽标）。
3. 保留 activeSection 机制与 v-show 保活，不改键盘左右切换行为。
4. 每阶段独立 commit；每阶段结束 pnpm test && pnpm lint 全绿。涉及导航的测试仅允许更新选择器/文案，不改行为断言。
5. 徽标/圆点不得只靠颜色表达：一律配 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

在概览 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 的等价性验证方式、「假脏」问题的实际结论、测试与冒烟结果。