progress.md 16.5 KB

Raw Blame History Permalink



进度记录


会话：2026-03-31


阶段 1：需求与旧项目调研


状态： 已完成

开始时间： 2026-03-31
已执行动作：


阅读了 brainstorming、doc-coauthoring、planning-with-files 的工作流说明
确认新项目目录当前为空
检查旧项目仓库结构
阅读旧项目的 package.json、README.md 和入口文件
阅读旧项目命令系统、工具栏、画布初始化、行为注册和示例接入页
明确本次迁移应采用“行为优先 + 自动化保护”的重构路线


已创建/修改文件：


task_plan.md（新建）

findings.md（新建）

progress.md（新建）

docs/plans/2026-03-31-flow-editor-rebuild-design.md（新建）


阶段 2：迁移策略与安全方案设计


状态： 已完成
已执行动作：


对比了“直接重写”和“先建基线再迁移”两种路线
明确了推荐的分阶段迁移策略
明确了测试优先的推进方式和每阶段的退出条件


已创建/修改文件：


docs/plans/2026-03-31-flow-editor-rebuild-design.md


阶段 3：文档编写


状态： 已完成
已执行动作：


将需求范围、兼容契约、迁移阶段、测试策略和风险控制写入设计文档


已创建/修改文件：


docs/plans/2026-03-31-flow-editor-rebuild-design.md


阶段 4：实施计划细化


状态： 已完成
已执行动作：


将迁移方案拆解成可以直接执行的任务清单
补充了旧仓库和新仓库的建议目录结构
明确了先旧项目基线、后新项目实现的执行顺序


已创建/修改文件：


docs/plans/2026-03-31-flow-editor-migration-implementation-plan.md
task_plan.md
findings.md
progress.md


阶段 5：旧项目基线测试启动


状态： 已完成
已执行动作：


在旧项目新增基线回归页说明文档
新增 Playwright 配置、冒烟测试和页面对象辅助文件
确认旧项目需要使用 .nvmrc 中的 Node v16.17.0 启动
通过 Playwright 拦截初始化接口，绕过真实后端登录态依赖
为旧项目基线页补充测试探针，覆盖实例契约、节点面板、选中状态、删除撤销链路
继续补齐多选、全选、新增节点、新增连线回归
跑通旧项目 13 条基线回归测试


已创建/修改文件：


/Users/huyirui/program/itomix/git/vue-flow-editor/doc/README-基线回归页.md
/Users/huyirui/program/itomix/git/vue-flow-editor/playwright.config.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/smoke.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/toolbar.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/preview.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/version.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/save.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/panel.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/multi-select.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/select-all.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/selection.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/delete-undo-redo.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/contract.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/add-node.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/e2e/add-edge.spec.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/helpers/editor-page.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/tests/helpers/mock-flow-api.ts
/Users/huyirui/program/itomix/git/vue-flow-editor/package.json
/Users/huyirui/program/itomix/git/vue-flow-editor/doc/index.vue
findings.md
progress.md


阶段 6：新项目工程骨架与测试底座初始化


状态： 已完成
已执行动作：


初始化了新项目 package.json、pnpm-workspace.yaml、tsconfig.json、vite.config.ts、vitest.config.ts

建立了 apps/demo、packages/flow-editor、tests 的目录结构
接入了 Vue 3、Element Plus、LogicFlow 2.x、Vitest、Playwright
按 LogicFlow 2.x 规则接入了样式路径 lib/style/index.css

在 packages/flow-editor 中实现了最小兼容壳组件，恢复旧项目 DOM 结构、工具栏语义和 onRef 基础契约
在 demo 页接入旧项目初始化接口语义与统一 mock 方式，方便继续复用旧项目测试思路
确认 LogicFlow 2.x 的 pluginsOptions 需要按插件名拆分，并按 miniMap 配置 MiniMap 插件
新增了新项目首批 3 条 Playwright 基线用例：冒烟、工具栏、实例契约
补充了 1 条单元测试，验证兼容层 onRef 最小契约
将 E2E 启动方式改为仓库脚本 scripts/run-e2e.mjs 自管 Vite 生命周期，避免当前环境下 webServer 误判端口


已创建/修改文件：


package.json
pnpm-workspace.yaml
tsconfig.json
env.d.ts
vite.config.ts
vitest.config.ts
playwright.config.ts
scripts/run-e2e.mjs
apps/demo/index.html
apps/demo/src/main.ts
apps/demo/src/App.vue
packages/flow-editor/src/index.ts
packages/flow-editor/src/types.ts
packages/flow-editor/src/components/FlowEditor.vue
tests/helpers/editor-page.ts
tests/helpers/mock-flow-api.ts
tests/e2e/smoke.spec.ts
tests/e2e/toolbar.spec.ts
tests/e2e/contract.spec.ts
tests/unit/compat-contract.spec.ts
tests/fixtures/graphs/linear-approval-flow.json
tests/fixtures/operations/README.md
findings.md
progress.md
task_plan.md


阶段 7：新项目数据适配层


状态： 已完成
已执行动作：


梳理了旧项目节点与边的真实数据口径，确认旧结构中常见 text/shape/activity/control、source/target

新增 core/schema/types.ts 与 core/adapter/g6-to-logicflow.ts

实现了 normalizeGraphData、cloneNormalizedGraphData、toLogicFlowGraphData

让 FlowEditor 内部统一改为走适配器，再映射到 LogicFlow 2.x
让 demo 页面与 E2E mock 直接喂旧口径数据，以验证双读能力
新增单节点、线性流、分支流三类图数据夹具
新增适配层单元测试，验证旧结构归一化和 LogicFlow 映射结果


已创建/修改文件：


packages/flow-editor/src/core/schema/types.ts
packages/flow-editor/src/core/adapter/g6-to-logicflow.ts
packages/flow-editor/src/components/FlowEditor.vue
packages/flow-editor/src/index.ts
apps/demo/src/App.vue
tests/helpers/mock-flow-api.ts
tests/fixtures/graphs/base-single-node.json
tests/fixtures/graphs/branching-flow.json
tests/unit/g6-to-logicflow.spec.ts
task_plan.md
findings.md
progress.md


阶段 8：新项目基础编辑闭环


状态： 已完成
已执行动作：


接通了 FlowEditor 工具栏按钮点击逻辑，支持 fitView、actualView、zoomIn、zoomOut、preview

通过 LogicFlow 事件同步节点选中态，支持画布节点点击选中与空白区取消选中
在侧边区域补充了基础节点操作面板，支持新增审批节点、新增抄送节点、全选、删除当前节点
补充了节点列表与当前选中展示，便于页面直接演示和调试
补充了预览面板，并在 demo 页把“居中”“保存”“预览测试”三个额外按钮接上真实动作
新增交互 E2E 用例，验证新增节点、删除节点、缩放操作和打开预览
调整 scripts/run-e2e.mjs，支持向 Playwright 透传单文件参数


已创建/修改文件：


packages/flow-editor/src/components/FlowEditor.vue
apps/demo/src/App.vue
tests/e2e/interaction.spec.ts
scripts/run-e2e.mjs
task_plan.md
findings.md
progress.md


阶段 9：新项目命令闭环增强


状态： 已完成
已执行动作：


移除了覆盖在画布上的迁移提示层，恢复更直接的可视化编辑视图
为组件新增图数据历史快照，支持撤销与重做
支持更新当前选中节点名称，并在侧边面板实时展示
支持基于当前多选节点创建新连线，并对已有同路径连线做去重保护
为节点列表补充稳定测试标识，方便交互回归稳定定位
扩展交互 E2E 用例，覆盖节点名更新、创建连线、撤销/重做
将测试环境账号信息写入 findings.md


已创建/修改文件：


packages/flow-editor/src/components/FlowEditor.vue
tests/e2e/interaction.spec.ts
findings.md
task_plan.md
progress.md


检查结果


检查项
输入
预期
实际
状态


新仓库检查
在新仓库执行 ls -la

确认起始状态
仓库为空
通过


旧项目依赖检查
读取旧项目关键文件
确认技术栈与功能范围
确认存在混合技术栈与编辑器完整能力
通过


旧项目命令层检查
读取 src/editor/editor.ts 和 src/plugins/Command.ts

找到稳定行为核心
确认命令式架构适合作为迁移契约
通过


旧项目接入页检查
读取 doc/index.vue

找到真实回归样板
确认该页面适合作为自动化基线页
通过


实施计划检查
阅读设计文档并拆分任务
形成可执行迁移顺序
已输出逐任务迁移实施计划
通过


旧项目冒烟测试
npx playwright test tests/e2e/smoke.spec.ts
基线页可在自动化环境中打开并渲染编辑器骨架
1 条用例通过
通过


旧项目工具栏测试
npx playwright test tests/e2e/toolbar.spec.ts
基线页显示的核心工具栏按钮符合当前业务配置
1 条用例通过
通过


旧项目预览测试
npx playwright test tests/e2e/preview.spec.ts
点击“预览测试”后可打开预览抽屉
1 条用例通过
通过


旧项目版本区测试
npx playwright test tests/e2e/version.spec.ts
页面正确展示当前版本和启用状态
1 条用例通过
通过


旧项目保存确认测试
npx playwright test tests/e2e/save.spec.ts
点击保存后弹出确认框
1 条用例通过
通过


旧项目节点面板测试
npx playwright test tests/e2e/panel.spec.ts
通过测试探针打开流程节点右侧面板
1 条用例通过
通过


旧项目选中状态测试
npx playwright test tests/e2e/selection.spec.ts
通过测试探针选中流程节点
1 条用例通过
通过


旧项目删除撤销测试
npx playwright test tests/e2e/delete-undo-redo.spec.ts
删除抄送节点后可撤销、可重做
1 条用例通过
通过


旧项目实例契约测试
npx playwright test tests/e2e/contract.spec.ts

onRef 核心实例能力存在
1 条用例通过
通过


旧项目多选测试
npx playwright test tests/e2e/multi-select.spec.ts
通过测试探针多选节点
1 条用例通过
通过


旧项目全选测试
npx playwright test tests/e2e/select-all.spec.ts
通过命令链全选流程图元素
1 条用例通过
通过


旧项目新增节点测试
npx playwright test tests/e2e/add-node.spec.ts
通过测试探针新增流程节点
1 条用例通过
通过


旧项目新增连线测试
npx playwright test tests/e2e/add-edge.spec.ts
通过测试探针新增连线
1 条用例通过
通过


旧项目基线回归套件
npx playwright test tests/e2e/*.spec.ts
所有基线用例可一起通过
13 条用例全部通过
通过


新项目单元测试
npm run test:unit
兼容层最小实例契约可验证
1 条用例通过
通过


新项目构建
npm run build
新项目骨架可正常构建
构建通过
通过


新项目 E2E 基线套件
npm run test:e2e
新项目冒烟、工具栏、实例契约用例可通过
3 条用例全部通过
通过


新项目适配层单元测试
npm run test:unit
旧结构、新结构与 LogicFlow 映射可验证
4 条用例全部通过
通过


新项目适配层浏览器回归
npm run test:e2e
demo 可消费旧口径 mock 并保持首批基线语义
3 条用例全部通过
通过


新项目基础交互单测
npm run test:unit
兼容层与适配层未被交互改动破坏
4 条用例全部通过
通过


新项目基础交互构建
npm run build
页面交互增强后仍可正常构建
构建通过
通过


新项目基础交互 E2E
npm run test:e2e
冒烟、工具栏、实例契约、基础交互全量通过
5 条用例全部通过
通过


新项目命令闭环单测
npm run test:unit
适配层与兼容层未被命令增强破坏
4 条用例全部通过
通过


新项目命令闭环构建
npm run build
命令增强后页面仍可正常构建
构建通过
通过


新项目命令闭环 E2E
npm run test:e2e
冒烟、契约、基础交互、命令闭环全量通过
7 条用例全部通过
通过


错误记录


时间
错误
次数
处理方式


2026-03-31

rg --files 在新仓库没有返回文件
1
改为确认目录状态，验证新仓库确实为空


2026-03-31
旧项目 npm install 出现 peer 依赖冲突
1
改用更小范围的测试基础设施接入，并避免将基线测试绑定到本地 @playwright/test 安装


2026-03-31
旧项目默认 Node 18 启动 Vue CLI 失败
1
改为使用 .nvmrc 指定的 Node v16.17.0 启动基线页


2026-03-31
冒烟测试首页被“登录失效”弹框拦截
1
在测试中拦截 flow_version 和 flow_nodes 初始化接口，提供稳定假数据


2026-03-31
工具栏测试错误假设了组件默认按钮都可见
1
改为按 toolbarButtonHandler 过滤后的真实展示结果做断言


2026-03-31
预览测试再次被“登录失效”弹框拦截
1
将接口 mock 升级为统一的 /admin/** 兜底拦截，避免遗漏后台接口


2026-03-31
版本区测试因文本定位过宽导致严格模式冲突
1
改为用角色按钮定位版本选择入口


2026-03-31
保存链路依赖节点完整性检查接口
1
在统一 mock 中补 check_all_node_property 空数组返回，先稳定验证确认框链路


2026-03-31
节点面板测试因节点属性接口返回结构不稳定失败
1
将 /admin/** 兜底 mock 补充为页面可消费的最小业务结构


2026-03-31
删除流程节点触发了开始/结束边保护逻辑
1
改为删除 cc 节点，保留一条完整流程路径并验证删除/撤销/重做闭环


2026-03-31
旧项目 canvas 交互不适合长期依赖坐标点击
1
通过测试探针补齐多选、全选、新增节点、新增连线等稳定验证入口


2026-03-31

corepack pnpm install 出现签名 keyid 校验失败
1
改为 npx pnpm@10.9.0 install 完成依赖安装


2026-03-31
新项目初次渲染时对 Vue props 使用 structuredClone 导致浏览器报错
1
改为显式 cloneGraphData 数据拷贝函数


2026-03-31
Playwright webServer 在当前环境中会误用旧服务或误判端口占用
1
改为 scripts/run-e2e.mjs 手动启动 Vite 后执行测试


2026-03-31
旧项目与新项目图数据字段名不一致
1
新增 g6-to-logicflow 适配层，统一归一化后再渲染


2026-03-31

test:e2e 脚本最初不能透传单文件参数
1
在 scripts/run-e2e.mjs 中补充 process.argv.slice(2) 转发


2026-03-31
创建连线的交互用例一开始选中了已存在连线路径
1
调整为“新增节点后再创建新连线”的真实新增路径


五问自检


问题
回答


我现在在哪个阶段？
新项目已经完成第二个可演示里程碑，页面具备基础命令闭环


下一步要去哪里？
继续迁移更完整的边交互、属性面板和业务事件兼容层


当前总目标是什么？
在新仓中逐步重建流程编辑器，同时让旧项目与新项目都处于可验证状态


目前学到了什么？
通过兼容层状态驱动加上 LogicFlow 2.x 渲染，可以较快搭出稳定的用户可见命令闭环，再逐步下沉到更深层能力


已经完成了什么？
已建立计划文件，完成旧项目基线测试，也完成了新项目工程骨架、LogicFlow 2.x 最小接入、数据适配层、基础编辑闭环与命令闭环增强