82 lines
7.7 KiB
Markdown
82 lines
7.7 KiB
Markdown
# 模块管理重构进度交接报告（截至当前工作区状态）
|
||
|
||
## 一、整体进度
|
||
|
||
| 阶段 | 状态 | 提交 |
|
||
| -------------------------------------- | ---------------------- | ---------- |
|
||
| 阶段一：useGroupTree 抽取 | ✅ 完成 | `158eb3c0` |
|
||
| 阶段二：字段查询与共享纯函数 | ✅ 完成 | `27752351` |
|
||
| 阶段三：index.vue 拆分 composables | ✅ 完成 | `91237c4a` |
|
||
| R1 清场（删遗留文件、useConfirm 合回） | ✅ 完成 | `2dba8578` |
|
||
| R2a 小文件 UI 归一 | ✅ 完成 | `ce3a9d87` |
|
||
| R2b 表格面板 UI 归一 | ✅ 完成 | `8c506ae5` |
|
||
| R2c 表单面板 UI 归一 | ✅ 完成 | `76b12cc5` |
|
||
| **R3 阶段四：目录化拆分** | 🔄 **进行中（未提交）** | — |
|
||
|
||
R3 是当前唯一未提交的工作，工作区全部改动都属于它。
|
||
|
||
## 二、R3 当前进度（核心）
|
||
|
||
### ✅ 已完成：table-edit/ 完整拆分（测试全绿）
|
||
|
||
旧 `ModuleTableEditPanel.vue`（2614 行）**已删除**，拆为 6 个文件（均在 `components/table-edit/`）：
|
||
|
||
| 新文件 | 行数 | 内容 |
|
||
| ------------------------------ | ---- | ------------------------------------------------------------ |
|
||
| `TableEditPanel.vue` | 860 | 壳：状态、分组树推导、commitColDrag/commitBandDrag、结构树编排、快捷键 |
|
||
| `TablePreview.vue` | 482 | 多级表头预览表 + mock 行 + 拖拽落点指示 |
|
||
| `TableInspector.vue` | 416 | 列/分组带/空态三态属性面板 |
|
||
| `useTablePreviewDrag.js` | 113 | 预览表拖拽（onPreviewDragStart/Over/Drop 等） |
|
||
| `useColumnResize.js` | 66 | 列宽拖拽（pointer capture 三件套） |
|
||
| `edit-panels/FieldLibrary.vue` | 212 | 共享字段库（native/sortable 双模式，两编辑器共用） |
|
||
| `edit-panels/EditDataView.vue` | 75 | 共享数据视图（工具栏 + FmsTable） |
|
||
|
||
- `index.vue` 已改为 `import ModuleTableEditPanel from './components/table-edit/TableEditPanel.vue'`
|
||
- 测试 `tests/unit/module-table-edit-panel-dnd.spec.js` 的 import 已改为新路径（断言未动）
|
||
- **验证结果：30/30 测试全绿**（dnd 14 例 + tree-external-drag 3 例 + utils 13 例）；lint 总数 57 < 基线 58（**零新增告警**，还消掉 1 个）
|
||
|
||
### 🔄 进行中：form-edit/ 部分拆分（半成品，未验证编译、未接 index.vue）
|
||
|
||
旧 `ModuleFormEditPanel.vue`（3168 行）**仍在原位、未被引用改动**，index.vue 仍指向它。已新建 3 个文件：
|
||
|
||
| 新文件 | 行数 | 状态 |
|
||
| ----------------------------- | ---- | ------------------------------------------------------------ |
|
||
| `form-edit/useFormGrid.js` | 95 | ✅ 完成：collectLineIndexes / rebalanceInsert / distributeLine / rebalanceRowByIds / sectionEndIndex / spanOf（纯逻辑） |
|
||
| `form-edit/FormInspector.vue` | 350 | ✅ 完成：属性面板（占位符/栅格宽度/textarea 高度/4 开关），全部变更经 emits 转发 |
|
||
| `form-edit/FormEditPanel.vue` | 2902 | 🔄 **半成品**：从 ModuleFormEditPanel.vue 复制改造的壳组件 |
|
||
|
||
`form-edit/FormEditPanel.vue` 已完成的改造（lint 零告警）：
|
||
- ✅ imports：相对路径改为 `../../`，移除 PanelLeft/Right\* 图标、Switch、FmsTable；新增 `./useFormGrid`、`./FormInspector`、`../edit-panels/FieldLibrary`、`../edit-panels/EditDataView`
|
||
- ✅ 删除本地重复定义：collectLineIndexes / rebalanceInsert / sectionEndIndex / distributeLine / rebalanceRowByIds / spanOf / TEXTAREA_HEIGHT_OPTIONS / isRowSelectedByField / libSearch / libraryFields / isFieldAdded（改为从 useFormGrid 导入或由 FieldLibrary 内部处理）
|
||
- ✅ 模板替换：字段库 → `<FieldLibrary drag-mode="sortable" :sortable="{group: libGroup, clone: libClone, filter: LIB_ADDED_FILTER, onStart: onLibDragStart, onEnd: onLibDragEnd}">`；属性面板 → `<FormInspector>`；数据视图 → `<EditDataView>`
|
||
- ✅ **注意**：toggleInspector / onColspanChange / onColspanInput / onHeightChange / onPlaceholderChange 已**重新加回壳组件**（FormInspector 只转发事件，写 localEdit 的处理器必须留在壳里）——接手的 AI 不要再删
|
||
|
||
## 三、剩余工作（明确 todo）
|
||
|
||
1. **验证 form-edit/FormEditPanel.vue 能编译**（无测试覆盖表单面板，最稳妥是 `pnpm build` 或 vite 编译该组件；也可以先接 index.vue 后手工冒烟）
|
||
2. **接 index.vue**：`ModuleFormEditPanel` 的 import 改为 `./components/form-edit/FormEditPanel.vue`
|
||
3. **删除旧文件** `components/ModuleFormEditPanel.vue`
|
||
4. **清理壳组件死样式**（无害但冗余，仍在 FormEditPanel.vue 的 `<style>` 里）：`.mm-fdesign__lib*`、`.mm-fdesign__inspector*`、`.mm-fdesign__subhead*`、`.mm-fdesign__prop*`、`.mm-fdesign__span-control`、`.mm-fdesign__span-input`、`.mm-fdesign__toggles`、`.mm-fdesign__toggle-line`、`.mm-fdesign__delete`、`.mm-edit__data`、`.mm-panel__*`（这些已迁到 FieldLibrary/FormInspector/EditDataView，删的时候**只删这些，别碰 `.mm-fdesign__canvas*`、`.mm-fdesign__section*`、`.mm-fdesign__field*`、`.mm-fdesign__drag-*`、`.mm-fdesign__sortable-*`**）
|
||
5. **pnpm test + pnpm lint 回归**（验收口径：dnd spec 14 例全绿、lint 警告不新增）
|
||
6. **提交 R3**（建议 message 注明：table-edit 重组完成 + form-edit 按停损条款部分交付——FormCanvas/useFormDrag 未拆，留待下轮）
|
||
|
||
## 四、注意事项（易踩坑）
|
||
|
||
- **计划停损条款**：`docs/module-management-code-refactor-plan.md` 阶段四明确允许「完成 table-edit/ 重组 + form-edit 仅抽 useFormGrid.js」即达标。form-edit 的 FormCanvas（画布模板）与 useFormDrag（拖拽状态机 createDragBadge/updateDragIntent/rowRectAt）**交织最深且无测试保护**，建议保持现状、在交付说明记录，不要贸然继续拆。
|
||
- **FieldLibrary 双模式**：表格面板用 `drag-mode="native"`（原生 HTML5 DnD），表单面板用 `drag-mode="sortable"`（vuedraggable + sortable 配置注入）；两面板原字段库样式一致，已合并进 FieldLibrary。
|
||
- **测试基线**：`module-table-edit-panel-dnd.spec.js` 只 stub 了 `draggable`，依赖壳组件真实渲染 `ModuleStructureTree`（`.mst-node` 类），壳组件 import 路径别改错（`../structure-tree/ModuleStructureTree.vue`）。
|
||
- **无关改动别动**：工作区还有 fms-api/*（Java 后端多文件）、`DefaultLayout.vue`、`dashboard/index.vue` 的未提交改动，与本重构无关，提交时只 stage module-management 相关文件。
|
||
- **R2c 遗留约定**：ui 组件覆写样式用 `.button` / `.input-wrapper` 后缀（保证 specificity 覆盖 ui 默认尺寸），新文件里已沿用。
|
||
|
||
## 五、当前未提交改动清单
|
||
|
||
```
|
||
D components/ModuleTableEditPanel.vue （已删，table-edit 顶替）
|
||
M index.vue （表格 import 已改新路径）
|
||
M tests/unit/module-table-edit-panel-dnd.spec.js（仅 import 路径，断言未动）
|
||
?? components/table-edit/ （6 个新文件，完成）
|
||
?? components/form-edit/ （useFormGrid/FormInspector 完成，FormEditPanel 半成品）
|
||
?? components/edit-panels/ （FieldLibrary/EditDataView，完成）
|
||
```
|
||
|
||
（另有 fms-api/、DefaultLayout.vue、dashboard/index.vue 的无关改动，勿碰。） |