oneao
2ab502b4a5
使用者试用后决定不要：清单信息与 tab 徽标（脏点/缺 N）重复，且占据概览篇幅。 revert 29f98494（组件、spec、index.vue 接线全部移除），计划文档记录该决策。 阶段一（脏点）与阶段二（表单设计缺 N 徽标）保留。
100 lines
7.0 KiB
Markdown
100 lines
7.0 KiB
Markdown
# `/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<sectionKey>）：
|
||
|
||
```js
|
||
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. 手工冒烟清单（每阶段结束过一遍）
|
||
|
||
```text
|
||
脏点：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` 的等价性验证方式、「假脏」问题的实际结论、测试与冒烟结果。
|