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

/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. 目标布局

顶部：模块配置 / 菜单配置
主体：模块树 | 配置导航 | 配置工作区
工作区：对象标题栏 + 设计/数据视图 + 具体内容

左侧模块树

• 保留模块树、搜索、新建、刷新和右键菜单。
• 默认宽度约 238~260px，继续支持 Splitter 调整。
• 节点保留名称、类型标签、停用状态和未保存状态。
• 不在本次改造中实现树节点拖拽排序或调整父子关系。

中间配置导航

将现有导航归并为以下分组：

概览
  基本信息
数据结构
  字段定义
  分组管理
界面配置
  表单设计
  列表配置
  查询配置
业务能力
  自动编码
  权限
高级设置
  多语言

要求：

• 每个配置项只有一个激活态。
• 保留当前 activeSection 机制，避免重写数据加载逻辑。
• 数据模块和查询模块按现有条件显示可用配置项。
• 分类模块只显示适用的基本信息配置。

右侧配置工作区

• 顶部显示图标、模块名称、类型、上级路径和未保存状态。
• 保留“重载”和“保存”操作。
• 内容区域继续复用现有子面板。
• 右侧区域内部滚动，避免页面出现多层无意义滚动条。
• 表单设计页面需要比普通表格配置获得更大的可用空间。

4. 表单设计页面

在 ModuleEditConfigPanel.vue 的基础上增加“设计视图 / 数据视图”概念。

设计视图

目标只做静态布局和现有数据的展示，不实现真正拖拽：

字段库 / 布局组件 | 表单画布 | 属性面板

要求：

• 左侧显示字段库和布局组件入口，使用拖拽手柄视觉提示。
• 中间显示表单分组、字段卡片、栅格宽度和插入位置占位。
• 右侧显示选中字段的标题、控件类型、栅格宽度、排序号、必填、只读、禁用等属性。
• 字段卡片支持点击选中并显示明显焦点状态。
• 设计视图只操作当前页面已有的草稿数据，不发起独立保存请求。
• 桌面端 / 移动端按钮可以只做视觉切换，移动端预览可通过限制画布宽度展示。

数据视图

• 保留当前 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 改变高度后，同一行另一字段高度与之对齐。
• 分组可切换上下/左右方向，窄屏不产生横向溢出。
• 删除字段后画布、属性面板和字段库状态同步更新。
• 现有保存、重载、切换未保存保护、数据视图行拖拽和同步按钮仍可用。