206 lines
14 KiB
Markdown
206 lines
14 KiB
Markdown
---
|
||
name: module-management-page
|
||
overview: 基于新数据库结构与开发规范，从零重建 module-management 页面（替换当前占位页），并把路由 /system/metadata 改为 /system/module-management。页面以「左侧模块树 + 右侧多 Tab 配置」组织，覆盖 b_module 及其字段/分组/列表/编辑/查询/权限/多语言配置，复用现有通用接口与工具函数，不新增后端端点与服务文件。
|
||
design:
|
||
styleKeywords:
|
||
- Enterprise Admin
|
||
- Clean Professional
|
||
- Ant Design Vue
|
||
- Two-column Tree + Tabs
|
||
- Subtle Blue Accent
|
||
- Desktop-first
|
||
fontSystem:
|
||
fontFamily: PingFang SC, Microsoft YaHei
|
||
heading:
|
||
size: 16px
|
||
weight: 600
|
||
subheading:
|
||
size: 14px
|
||
weight: 500
|
||
body:
|
||
size: 13px
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#1677ff"
|
||
- "#4096ff"
|
||
- "#0958d9"
|
||
background:
|
||
- "#ffffff"
|
||
- "#f7f8fa"
|
||
- "#f0f5ff"
|
||
text:
|
||
- "#1f2329"
|
||
- "#8a8f99"
|
||
- "#ffffff"
|
||
functional:
|
||
- "#52c41a"
|
||
- "#ff4d4f"
|
||
- "#faad14"
|
||
- "#e5e7eb"
|
||
todos:
|
||
- id: update-route-menu
|
||
content: 修改 routes.js 与 AppSidebar.vue，将路由 /system/metadata 改为 /system/module-management（moduleCode 保留 m_metadata）
|
||
status: completed
|
||
- id: build-view-shell
|
||
content: 新建 index.vue 与 composables/useModuleManagement.js：左树右 Tabs 布局、草稿加载/保存编排、权限受控工具条
|
||
status: completed
|
||
dependencies:
|
||
- update-route-menu
|
||
- id: build-basic-tree
|
||
content: 实现 ModuleTreePanel 与 ModuleBasicInfoPanel：模块树增删改、基本信息表单与类型联动校验
|
||
status: completed
|
||
dependencies:
|
||
- build-view-shell
|
||
- id: build-field-group
|
||
content: 实现 ModuleFieldDefinitionPanel（describe 同步合并）与 ModuleGroupPanel（多级分组树）
|
||
status: completed
|
||
dependencies:
|
||
- build-view-shell
|
||
- id: build-list-edit-query
|
||
content: 实现 ModuleListPanel/ModuleEditPanel/ModuleQueryPanel，用 FmsTable 配置列表/编辑/查询场景
|
||
status: completed
|
||
dependencies:
|
||
- build-view-shell
|
||
- id: build-power-i18n
|
||
content: 实现 ModulePowerPanel 与 ModuleTranslationsPanel，维护操作权限与多语言文案
|
||
status: completed
|
||
dependencies:
|
||
- build-view-shell
|
||
- id: polish-verify
|
||
content: 用 [skill:antdv-next] 核对组件用法，补全 scoped scss 与空态，说明未执行构建/测试
|
||
status: completed
|
||
dependencies:
|
||
- build-basic-tree
|
||
- build-field-group
|
||
- build-list-edit-query
|
||
- build-power-i18n
|
||
---
|
||
|
||
## 用户需求
|
||
|
||
- 依据 `新数据库结构.md` 的 schema 从零重建「模块管理」页面（替换当前占位页 `index.vue`），覆盖 `b_module` 及其字段定义、字段分组、列表/编辑/查询配置、操作权限、多语言等完整配置能力。
|
||
- 路由由 `/system/metadata` 改为 `/system/module-management`（仅改路径与 `menuKey`，`moduleCode` 仍保留 `m_metadata` 以匹配数据库种子与权限）。
|
||
- 严格遵循既有设计决策：字段定义来自模块查询视图（经 `POST /data/describe` 同步，不可手工增删）；子表新增行用前端本地临时负数 ID（`createTempId`），主表 `b_module` 保留 `nextIdApi` 取号；保存后重建草稿使临时 ID 被真实 ID 覆盖。
|
||
- 复用项目现有通用接口（`loadDataApi`/`saveObjectApi`/`nextIdApi`/`describeApi`）、`FmsTable`、antdv-next 组件，以及 `utils/dataChanges.js`、`utils/tempId.js`、`utils/i18n.js`，不新增后端端点与服务文件。
|
||
- 遵守开发规范：表格尽量用 `fms-table`，桌面端实现，scoped scss 复用现有 `--fms-*` token，不执行构建/测试。
|
||
|
||
## 核心功能
|
||
|
||
- 左侧模块树（目录/页面/数据三类，支持增删改与选中）。
|
||
- 右侧多 Tab：基本信息、字段定义（含视图同步）、字段分组、列表配置、编辑配置、查询配置、操作权限、多语言。
|
||
- 顶部工具条（保存/刷新）与权限受控按钮（create/update/delete 来自 `b_module_power`，sync 为同步字段）。
|
||
- 基于通用接口与工具函数的「按模块加载草稿 → 本地编辑 → 差异保存（整事务）」工作流。
|
||
|
||
## 技术栈
|
||
|
||
- 前端：Vue 3 `<script setup>` + Vite + Pinia；UI 组件库 **antdv-next**（项目已通过 `vite.config.js` 自动按需引入，禁止手动 import 已由 resolver 处理的组件）；表格统一使用项目封装的 `FmsTable`。
|
||
- 后端：完全复用现有通用端点，不新增任何接口或服务文件。
|
||
- 状态/工具：`stores/permissions.js`（权限门控）、`utils/dataChanges.js`、`utils/tempId.js`、`utils/i18n.js`。
|
||
|
||
## 实施方法
|
||
|
||
整体采用「单一编排视图 + 子面板」架构：`ModuleManagementView`（`index.vue`）负责选中模块、加载全量草稿、保存编排；各 `components/*.vue` 面板只负责自身区块的展示与编辑，所有可变数据集中在视图层响应式 `draft` 中，保存时由编排层统一 `diffRows` + `saveObjectApi`。
|
||
|
||
### 数据编排（核心）
|
||
|
||
1. **加载草稿 `loadDraft(moduleId)`**：并发 `loadDataApi` 拉取该模块相关的 8 张表：`b_module`(按 id)、`b_module_field`、`b_module_field_group`、`b_module_field_list`、`b_module_field_edit`、`b_module_field_query`、`b_module_power`，以及 `b_i18n`(按 `module.`/字段键前缀过滤)。结果存入响应式 `draft`，并深拷贝一份 `snapshot` 供保存时差异比对。
|
||
2. **本地编辑**：面板直接 `push`/`splice`/`Object.assign` 修改 `draft` 中的数组与对象；子表新增行 `b_id = createTempId()`（负数字符串）。
|
||
3. **保存 `saveDraft()`**：
|
||
|
||
- 主表 `b_module` 新增：先 `nextIdApi()` 取真实 ID 写入 `draft.b_module.b_id`。
|
||
- 对每张表 `diffRows(draft[table], snapshot[table])` → `tableChange(table, diff)`，汇聚为 `requests[]`。
|
||
- 子表 insert 含临时负数 ID 时，调用 `allocateTemporaryIds([...所有子表 insert 行])` 由后端生成真实 ID 并就地替换；随后 `remapForeignKeys` 把 `b_field_id`/`b_group_id` 指向的临时 ID 同步映射到真实 ID。
|
||
- 单事务 `saveObjectApi(requests)`；成功后 `snapshot = cloneData(draft)`，临时 ID 已被真实 ID 覆盖。
|
||
|
||
4. **视图同步 `syncFields(module)`**：`describeApi(module.b_viewtable)` 返回列 `[{name,type,nullable,size}]`；按 `(b_module_id,b_field)` 合并——视图已有列保留原 `b_name/b_type/b_options/b_default_value` 不覆盖；视图新增列追加默认行（`createTempId`，`b_type` 由 SQL 类型映射：字符串→input、长文本→textarea、数值→number、金额→money、date→date、datetime→datetime、bit→switch）；视图已删列保留配置但 `b_canuse=0`。该按钮受 `canPower('m_metadata','sync')` 门控，仅 `data` 且配置了 `b_viewtable` 时可用。
|
||
|
||
### 关键设计决策与权衡
|
||
|
||
- **集中草稿 + 差异保存**：复用现有 `dataChanges.js`，避免各面板各自拼请求，降低出错面；保存走 `saveobjt` 整事务，任一表失败全回滚，符合设计决策。
|
||
- **临时 ID 策略**：严格遵循记忆决策——子表用 `createTempId`，主表用 `nextIdApi`；FK 映射在保存前完成，杜绝脏引用。
|
||
- **FmsTable 复用**：列表/编辑/查询/权限/多语言等表格统一用 `FmsTable`，单元格编辑沿用 `TableDemo.vue` 的 `makeCellEditor` 模式（编辑行渲染控件、其余行纯文本），不重复实现表格能力，契合新规范。
|
||
- **约束校验前置**：`b_module_type` 与字段联动校验在表单层做（directory 不可配 route/viewtable/savetable；page 必配 route；data 不可菜单/不可 route 且必配 viewtable），保存前校验 `b_code` 正则 `^[a-z][a-z0-9_]{1,49}，减少后端往返报错。
|
||
- **性能**：每模块仅加载自身数据，树节点选中才加载草稿；`describe` 仅在点击同步时调用；表格虚拟滚动（`FmsTable` 默认开启）支撑大数据量。
|
||
|
||
### 架构关系
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
View[ModuleManagementView index.vue] -->|load/save 编排| Draft[(响应式 draft + snapshot)]
|
||
View --> Tree[ModuleTreePanel]
|
||
View --> Tabs[Tab 区]
|
||
Tabs --> Basic[ModuleBasicInfoPanel]
|
||
Tabs --> Field[ModuleFieldDefinitionPanel 含 sync]
|
||
Tabs --> Group[ModuleGroupPanel]
|
||
Tabs --> List[ModuleListPanel]
|
||
Tabs --> Edit[ModuleEditPanel]
|
||
Tabs --> Query[ModuleQueryPanel]
|
||
Tabs --> Power[ModulePowerPanel]
|
||
Tabs --> I18n[ModuleTranslationsPanel]
|
||
Draft -.diffRows/tableChange.-> Save[saveObjectApi 单事务]
|
||
Field -.describeApi.-> Sync[视图列合并]
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
仅修改 2 个文件、新建 1 个视图与 8 个面板组件（含 1 个编排 composable）：
|
||
|
||
```
|
||
fms-vue/src/
|
||
├── router/routes.js # [MODIFY] path "/system/metadata"→"/system/module-management"，
|
||
│ # name→system-module-management，meta.menuKey 同步，moduleCode 保留 "m_metadata"
|
||
├── layouts/components/AppSidebar.vue # [MODIFY] systemPages 的 key 改为 "/system/module-management"
|
||
└── views/module-management/
|
||
├── index.vue # [NEW] ModuleManagementView：左树+右 Tabs 布局、工具条、
|
||
│ # 草稿加载/保存编排、权限受控按钮（create/update/delete/sync）
|
||
├── composables/useModuleManagement.js # [NEW] 编排逻辑：loadDraft/saveDraft/syncFields、
|
||
│ # diffRows+tableChange+allocateTemporaryIds+remapForeignKeys、SQL 类型→b_type 映射
|
||
└── components/
|
||
├── ModuleTreePanel.vue # [NEW] 模块树（目录/页面/数据），选中/新增/删除，b_xh 排序
|
||
├── ModuleBasicInfoPanel.vue # [NEW] 基本信息表单：b_code/b_name/b_module_type/b_route/
|
||
│ # b_viewtable/b_savetable/b_keyfield/b_orderfield/b_canmenu/b_canuse/b_xh
|
||
│ # + 类型联动校验
|
||
├── ModuleFieldDefinitionPanel.vue # [NEW] 字段定义 FmsTable + 「同步字段」按钮(describe 合并)
|
||
├── ModuleGroupPanel.vue # [NEW] 字段分组树(b_module_field_group 自引用)，列表/编辑共用
|
||
├── ModuleListPanel.vue # [NEW] 列表配置 FmsTable(b_module_field_list，引用 group)
|
||
├── ModuleEditPanel.vue # [NEW] 编辑配置 FmsTable(b_module_field_edit，required/readonly/disabled/group)
|
||
├── ModuleQueryPanel.vue # [NEW] 查询配置 FmsTable(b_module_field_query，component/operator)
|
||
├── ModulePowerPanel.vue # [NEW] 操作权限 FmsTable(b_module_power)
|
||
└── ModuleTranslationsPanel.vue # [NEW] 多语言 FmsTable(b_i18n，按 locale 分列编辑)
|
||
```
|
||
|
||
## 关键代码结构
|
||
|
||
- 编排 composable 暴露：`loadDraft(moduleId)`、`saveDraft()`、`syncFields()`、`draft`（响应式）、`currentModuleId`、`permissions`（canPower 结果）；各面板通过 `props` 接收对应数组、`emits` 回传变更，避免跨面板直接耦合。
|
||
- `b_type` SQL 类型映射函数（放置于 composable）：`mapSqlTypeToFieldType(typeName) → 'input'|'textarea'|'number'|'money'|'date'|'datetime'|'switch'`。
|
||
|
||
## 设计风格
|
||
|
||
企业级元数据管理后台，采用「左侧模块树 + 右侧多 Tab 配置」的经典后台布局，桌面端优先。视觉以 Ant Design Vue 设计语言为基底，主色沿用项目侧栏蓝 `#1677ff`，辅以 `--fms-*` 设计变量（边框 `#e5e7eb`、正文 `#1f2329`、次要文字 `#8a8f99`、表面 `#ffffff`/`#f7f8fa`）。整体克制、清晰、信息密度适中，重点突出当前选中模块与可编辑表格，hover/选中态用浅蓝底与蓝色描边强化。
|
||
|
||
## 页面结构（自上而下分区）
|
||
|
||
1. **顶栏工具条**：左侧显示当前模块名与 `b_code` 面包屑；右侧权限受控按钮——新增模块(create)、保存(update)、同步字段(sync)、删除(delete)，按钮按 `m_metadata` 的 `b_module_power` 与 `canPower` 显隐禁用。
|
||
2. **主体双栏**：
|
||
|
||
- 左栏 `ModuleTreePanel`：模块树（目录可展开，页面/数据为叶子），顶部「新建目录/页面/数据」入口，节点 hover 显示删除。选中节点高亮蓝底。
|
||
- 右栏 Tab 区：基本信息 / 字段定义 / 字段分组 / 列表配置 / 编辑配置 / 查询配置 / 操作权限 / 多语言，共 8 个标签页，内容区统一白底卡片 + `FmsTable`。
|
||
|
||
3. **表单与表格**：基本信息用 antdv-next `Form`（标签右对齐、栅格两列）；各配置 Tab 用 `FmsTable`，编辑行内联控件（Input/InputNumber/Select/Switch），非编辑行纯文本；分组树用 `FmsTree` 或 `Tree` 组件展示多级 `b_module_field_group`。
|
||
4. **空态**：未选中模块时主区展示引导空态（图标 + 「请选择或新建模块」），不显示报错。
|
||
|
||
## 交互与动效
|
||
|
||
- 树节点选中平滑高亮；Tab 切换保留各面板本地编辑（草稿集中在视图层，不随 Tab 卸载丢失）。
|
||
- 表格编辑行浅蓝底（`rgba(22,119,255,0.08)`），hover 行浅灰底；按钮、输入框 focus 蓝色描边过渡 0.2s。
|
||
- 保存成功 `message.success` 轻提示；删除/同步等有副作用操作使用 `Popconfirm` 二次确认。
|
||
- 响应式：固定双栏，左栏 260px 可随侧栏收起；右栏内容随容器宽度自适应，表格横向虚拟滚动。
|
||
|
||
## 可复用的智能体扩展
|
||
|
||
### Skill
|
||
|
||
- **antdv-next**
|
||
- 目的：在编写 `ModuleBasicInfoPanel` 表单、`FmsTable` 单元格编辑器、树与弹窗等 UI 时，查询 antdv-next 组件的 API、props/events/slots 与用法示例，确保组件用法正确。
|
||
- 预期结果：各面板正确使用 antdv-next 组件（Form/Select/Switch/Tree/Popconfirm/Tabs 等），避免属性误用；保证 UI 实现符合组件库规范且与项目自动引入配置兼容。 |