WuYongJie/furniture-3d-system-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
furniture-3d-system-Wu/furniture-3d-system/docs/solutions/workflow-issues/assembly-install-order-editor-sync-20260226.md
WuYongJie 5821d73291 初始提交：3D家具安装展示系统 
包含：
- furniture-3d-system：Next.js 16 全栈应用（资产中心、产品管理、3D装配动画）
- autocad-plugin：AutoCAD 家具导出插件源码
- 资产中心改造：编辑弹窗化、删除功能、Toast反馈、自定义Select组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-02 14:00:19 +08:00

2.0 KiB
Raw Blame History

安装顺序编辑器同步与规范收口（2026-02-26）

问题现象

  • 装配编辑器切换“安装顺序模式/普通模式”后，步骤编辑器显示状态偶发不同步。
  • 右侧安装顺序操作区使用原生按钮，且有硬编码颜色，不符合项目 UI 元组件与设计 token 规范。

根因分析

  1. AssemblyStepEditor 内部维护本地 steps 与 selectedStepId，但仅在初次挂载时初始化。
  2. 之前依赖父组件传 key 强制重挂载做同步，导致每次步骤变化都触发整体重建，性能与交互稳定性差。
  3. 安装顺序操作区未统一使用 @/components/ui/Button。

修复方案

  1. 去除强制重挂载：移除 AssemblyEditorWorkspace 中 stepEditorSyncKey 与 key 方案。
  2. 改为受控同步：在 AssemblyStepEditor 内新增 useEffect 监听 initialSteps，同步本地步骤、选中项与高亮状态。
  3. 组件规范收口：安装顺序操作按钮统一改为 Button 元组件。
  4. 视觉规范收口：本轮改动范围内的安装顺序提示色改为语义类（text-apple-blue/text-apple-red），步骤编辑器局部颜色改为 apple-* token。
  5. 复用元组件：步骤详情中的部件勾选改为 Checkbox 元组件。

影响范围

  • src/app/products/[id]/assembly/AssemblyEditorWorkspace.tsx
  • src/components/assembly/AssemblyStepEditor.tsx

验证记录

  • npm run lint -- src/components/assembly/AssemblyStepEditor.tsx src/app/products/[id]/assembly/AssemblyEditorWorkspace.tsx 通过
  • npm run type-check -- --pretty false 通过
  • npm test -- tests/lib/install-order-rules.test.ts --runInBand 通过（41/41）

复用建议

  • 当组件需要“外部数据刷新 + 内部编辑态并存”时，优先使用 受控同步 + 保留选中状态，不要用 key 重挂载兜底。
  • UI 收口优先检查：原生控件、硬编码颜色、交互状态（disabled/loading）是否已落在元组件能力内。