# `/system/module-management` 页面改造计划 ## 1. 改造目标 将当前“模块树 + 配置导航 + 配置面板”升级为可持续扩展的模块配置工作台，为后续表单拖拽设计预留明确空间。 本次重点是布局、信息层级和交互呈现，不实现真实拖拽业务，不修改后端 API、数据表结构和保存协议。 参考原型：`/module-management-layout-demo.html`。 ## 2. 当前代码范围 主要入口：`src/views/system/module-management/index.vue` 主要子组件： - `components/ModuleBasicPanel.vue` - `components/ModuleFieldsPanel.vue` - `components/ModuleListConfigPanel.vue` - `components/ModuleEditConfigPanel.vue` - `components/ModuleQueryConfigPanel.vue` - `components/ModuleAutoCodePanel.vue` - `components/ModulePowersPanel.vue` - `components/ModuleI18nPanel.vue` - `components/MenuDetailPanel.vue` 现有数据草稿、未保存保护、快捷保存、树选择和配置面板逻辑应尽量复用。 ## 3. 目标布局 ```text 顶部：模块配置 / 菜单配置 主体：模块树 | 配置导航 | 配置工作区 工作区：对象标题栏 + 设计/数据视图 + 具体内容 ``` ### 左侧模块树 - 保留模块树、搜索、新建、刷新和右键菜单。 - 默认宽度约 `238~260px`，继续支持 Splitter 调整。 - 节点保留名称、类型标签、停用状态和未保存状态。 - 不在本次改造中实现树节点拖拽排序或调整父子关系。 ### 中间配置导航 将现有导航归并为以下分组： ```text 概览 基本信息 数据结构 字段定义 分组管理 界面配置 表单设计 列表配置 查询配置 业务能力 自动编码 权限 高级设置 多语言 ``` 要求： - 每个配置项只有一个激活态。 - 保留当前 `activeSection` 机制，避免重写数据加载逻辑。 - 数据模块和查询模块按现有条件显示可用配置项。 - 分类模块只显示适用的基本信息配置。 ### 右侧配置工作区 - 顶部显示图标、模块名称、类型、上级路径和未保存状态。 - 保留“重载”和“保存”操作。 - 内容区域继续复用现有子面板。 - 右侧区域内部滚动，避免页面出现多层无意义滚动条。 - 表单设计页面需要比普通表格配置获得更大的可用空间。 ## 4. 表单设计页面 在 `ModuleEditConfigPanel.vue` 的基础上增加“设计视图 / 数据视图”概念。 ### 设计视图 目标只做静态布局和现有数据的展示，不实现真正拖拽： ```text 字段库 / 布局组件 | 表单画布 | 属性面板 ``` 要求： - 左侧显示字段库和布局组件入口，使用拖拽手柄视觉提示。 - 中间显示表单分组、字段卡片、栅格宽度和插入位置占位。 - 右侧显示选中字段的标题、控件类型、栅格宽度、排序号、必填、只读、禁用等属性。 - 字段卡片支持点击选中并显示明显焦点状态。 - 设计视图只操作当前页面已有的草稿数据，不发起独立保存请求。 - 桌面端 / 移动端按钮可以只做视觉切换，移动端预览可通过限制画布宽度展示。 ### 数据视图 - 保留当前 `FmsTable` 高密度编辑表格。 - 继续支持现有行排序事件和同步到列表/查询配置按钮。 - 表格视图与设计视图共享同一组 `editConfig` 草稿数据。 - 不新增第二套字段保存逻辑。 ## 5. 建议的实现顺序 ### 阶段一：重排现有工作台 1. 调整 `index.vue` 的三栏布局和头部层级。 2. 归并 `configGroups` 的分组标签。 3. 保留现有树、加载、保存、未保存确认和快捷键逻辑。 4. 统一模块配置和菜单配置的外层视觉结构。 5. 确保普通配置面板行为不变。 ### 阶段二：增加表单设计静态视图 1. 在 `ModuleEditConfigPanel.vue` 增加设计视图/数据视图切换。 2. 抽取字段卡片、画布分组、属性面板为局部组件或清晰的模板区块。 3. 使用当前 `editConfig`、`fields`、`groups` 生成画布内容。 4. 暂不引入新的拖拽库。 5. 暂不新增后端字段。 ### 阶段三：验证和收尾 1. 更新页面测试中与导航标签相关的断言。 2. 补充设计视图/数据视图切换测试。 3. 补充字段卡片选择和移动端预览状态测试。 4. 执行 `pnpm test`、`pnpm lint`、`pnpm build`。 5. 在桌面宽度和较窄窗口下检查三栏是否溢出、遮挡或出现横向滚动。 ## 6. 明确不要做的事情 - 不修改 API 调用参数和保存请求结构。 - 不修改数据库表结构。 - 不替换现有 Tree、Splitter、Tabs、FmsTable 等基础组件。 - 不删除现有保存校验、未保存切换保护和 Ctrl/Cmd + S。 - 不在本次任务实现真实跨区域拖拽、撤销重做、版本发布或权限模型。 - 不新增大型 UI 框架或拖拽依赖。 - 不把所有配置面板重写成一个巨型组件。 ## 7. 视觉与交互验收标准 - 页面第一眼能区分模块树、配置导航和当前编辑工作区。 - 三栏边界清晰，配置工作区是视觉重点。 - 右侧标题栏与左侧树标题栏垂直对齐。 - 激活态、未保存态、停用态具有足够对比度，并且不只依赖颜色表达。 - 图标按钮有 `title` 或 `aria-label`。 - 可点击区域至少约 `32px`，主要操作按钮保持稳定尺寸。 - 设计视图不会挤压成不可用的窄画布。 - 普通表格配置仍适合批量扫描和编辑。 - 页面没有新增无意义的卡片嵌套或营销式大面积装饰。 ## 8. 交付要求 交付时请说明： - 修改了哪些文件。 - 哪些逻辑保持不变。 - 设计视图目前哪些是展示态，哪些是真实可编辑态。 - 测试、Lint、构建是否通过。 - 是否存在需要下一阶段实现的拖拽或数据模型工作。 ## 9. 可直接交给其他 AI 的执行指令 请在 `fms-vue` 项目中按照 `docs/module-management-refactor-plan.md` 改造 `/system/module-management` 页面。先阅读现有 `index.vue`、相关子面板和测试，再分阶段修改。保持 API、保存协议、草稿机制和未保存保护不变；优先复用现有组件。完成后运行页面测试、Lint 和构建，并报告修改文件、验证结果和未实现的后续能力。不要引入新的 UI 框架或拖拽依赖，也不要实现真实拖拽业务。 ## 10. 第二轮表单设计器功能计划 本轮针对实际使用中暴露的问题，允许修改表单设计器前端交互和草稿布局字段；仍然不引入第三方拖拽库，不改变现有保存 API 的整体调用方式。 ### 10.1 任意位置拖拽 - 字段库字段可拖入任意分组、任意已有字段卡片前后。 - 已存在字段可通过拖拽手柄在同一分组内排序，也可拖到其他分组。 - 画布显示清晰的插入线和目标行高亮。 - 仅拖拽手柄启动排序，点击卡片仍只负责选中。 - 拖拽结束后统一重排 `b_xh`，并保留当前选中字段。 ### 10.2 动态行布局 - 画布使用 12 栅格。 - 新字段插入已有行时，若当前行只有一个字段且其宽度为 12，则自动将原字段和新字段调整为 `6/12 + 6/12`。 - 同一行继续添加字段时，按剩余空间自动分配；无法平均分配时保留原布局并创建新行。 - 修改某个字段宽度后，重新计算同一行的占用，禁止超过 12 栅格。 - 不把“行”硬编码成单独后端表；前端根据顺序和 `b_colspan` 推导行，后续可再升级为显式布局模型。 ### 10.3 自定义栅格宽度 - 属性面板提供 `1~12` 的数字输入或步进控件，同时保留常用快捷选项 `12/12、8/12、6/12、4/12、3/12`。 - 输入值自动限制在 `1~12`。 - 宽度改变立即反映到画布，并同步到 `b_colspan` 草稿字段。 - 数据视图继续显示并编辑 `b_colspan`。 ### 10.4 Textarea 高度和同一行对齐 - 字段定义为 `textarea` 时，属性面板提供高度档位：小、中、大，或直接输入高度。 - 高度属于前端布局扩展属性；如果现有后端没有对应字段，先保存在前端草稿的 `b_height`/布局扩展对象中，并明确标注后续需要后端持久化。 - 同一行采用 CSS Grid 的 `align-items: stretch`，字段卡片和控件容器使用 `height: 100%`。 - 同一行存在 textarea 时，行高取该行最高字段高度，左右字段跟随拉伸，避免一边高、一边低。 - 不能通过强制所有字段固定高度解决；普通输入框保持最小高度，textarea 决定需要扩展的行高。 ### 10.5 分组方向 - 每个分组提供“上下布局 / 左右布局”切换。 - 上下布局：分组标题在上，字段按 12 栅格从上到下排列。 - 左右布局：分组标题作为左侧区域，字段画布位于右侧；窄屏自动回退为上下布局。 - 方向先作为前端草稿布局属性处理；如果后端暂无字段，不得伪装成已持久化。 ### 10.6 删除和恢复 - 选中字段后，属性面板提供删除按钮；同时支持键盘 `Delete/Backspace`（焦点在输入框时不触发）。 - 删除前保留轻量确认或撤销提示，避免误删。 - 删除只从 `localEdit` 草稿移除，并立即 `emit('update')`；最终由模块保存流程统一提交。 - 字段库中被删除的字段恢复为可拖入状态。 - 分组删除仍由 `FieldGroupManager` 管理，不能通过字段删除按钮删除分组。 ### 10.7 本轮验收 - 可以把字段拖到任意已有字段前后，并看到插入位置反馈。 - 单字段 12 栅格行拖入第二个字段后自动变成 6/6。 - 栅格输入 1、4、6、8、12 均能正确渲染，超出范围会被限制。 - textarea 改变高度后，同一行另一字段高度与之对齐。 - 分组可切换上下/左右方向，窄屏不产生横向溢出。 - 删除字段后画布、属性面板和字段库状态同步更新。 - 现有保存、重载、切换未保存保护、数据视图行拖拽和同步按钮仍可用。