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

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 点图标时启动拖拽。
选中节点后复制/删除按钮不溢出画布边界。