# 测试方案 — 低代码表单设计器顺滑拖拽改造

> created: 2026-06-15
> status: active

## 1. 本轮增量范围

本轮进入实现阶段，范围限定在 PC 端表单设计器骨架：

- 新增 Forge 原生表单设计器三栏布局。
- 新增字段/布局面板、画布节点、属性面板。
- 新增 `formDesignerSchema` 组件树操作工具。
- 将 `BusinessFormDesigner` 默认主画布切到新版设计器，同时保留 FormCreate 回退按钮。

## 2. P0 验证

| 项 | 命令 | 目标 |
|----|------|------|
| Diff 检查 | `git diff --check -- <本轮相关路径>` | 确认无尾随空格和补丁格式问题 |
| 前端静态检查 | `source ~/.nvm/nvm.sh && nvm use 20.19.0 && pnpm exec eslint <本轮相关 Vue/JS 文件>` | 捕获 Vue 模板、import、格式问题 |
| 前端构建 | `source ~/.nvm/nvm.sh && nvm use 20.19.0 && pnpm build` | 确认 Vite/Vue 生产构建通过 |

## 3. P1 验证

后续继续实现拖拽镜像、FLIP、模板和更完整交互时补充：

- 浏览器打开 `/app-center/object/crm_follow_record?suiteCode=IN_OUT`。
- 进入“设计对象 → 表单设计”。
- 验证新版三栏设计器默认显示。
- 验证字段 hover 有拖拽手柄和反馈。
- 验证字段点击添加、拖入画布、选中属性修改、保存、预览、发布。

## 4. 本轮跳过项

- 未启动 Vite 进行浏览器截图验证：本轮先完成骨架接入和构建验证，后续视觉/拖拽细节增强后再做浏览器验证。
- 未跑后端 Maven：本轮不涉及后端 Java、Mapper XML、SQL 或接口协议变更。

## 5. 2026-06-15 增量验证

本轮新增验证范围：

- 表单列数扩展到 1-4 列后，设计器、Schema 编译和运行态前端布局均需通过静态检查。
- 栅格 row/col 结构新增 `row.props.columns`，需确认前端构建通过。
- 拖拽落点、ghost、属性面板增强为纯前端改动，本轮先覆盖 `git diff --check`、目标文件 eslint 和 `pnpm build`。

后续 P1 浏览器验证重点：

- 在 `/app-center/object/crm_follow_record?suiteCode=IN_OUT` 进入表单设计，切换表单列数 1/2/3/4，确认画布根 grid 立即变化。
- 从左侧拖入“栅格布局”，选中 row 后调整 1/2/3/4 列，确认列容器数量和空投放区变化。
- 拖字段到具体列，确认不会落在 row 与 col 的错误层级。
- 拖动画布节点上下重排，确认同父级向下移动不偏位。

## 6. 2026-06-16 拖拽修复与面板增强验证

本轮新增验证范围：

- 节点重新支持拖拽排序：节点本体恢复 `draggable`，但只有从 6 点手柄开始拖动才允许启动。
- 落点激活改为 `dataTransfer.types` 判断，避免 dragenter 阶段读取 payload 导致灰色落点不出现。
- 根落点和节点前后落点新增不可见命中区，拖入后展开为灰色同尺寸占位块和偏移阴影。
- 操作按钮固定在节点右上角内部，避免复制/删除按钮被顶出画布。
- 左侧组件库补充分组、表格布局和 CRUD 区块模板入口；右侧属性面板样式压紧。

本轮 P0 验证：

- `git diff --check` 覆盖本轮相关设计器文件。
- 目标 Vue/JS 文件 `pnpm exec eslint`。
- `pnpm build` 生产构建。

后续 P1 浏览器验证重点：

- 从左侧字段、基础组件、表格布局、CRUD 区块分别拖入画布，确认灰色落点块能快速出现。
- 在画布内拖动已有节点上下重排，确认只按住 6 点图标时启动拖拽。
- 选中节点后复制/删除按钮不溢出画布边界。