# 安装顺序编辑器同步与规范收口（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）是否已落在元组件能力内。