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