feat(clipping): implement hide/recover toggle for all section dialogs

Update all three section dialogs to support hide/show toggle:

SectionAxisDialogManager:
- onHideToggle now calls hideSection()/recoverSection()

SectionBoxDialogManager:
- onHideToggle now calls hideSection()/recoverSection()

SectionPlanePanel:
- Add isHidden state tracking
- Change onHide to onHideToggle(isHidden)
- Add setHiddenState/getHiddenState methods
- Update button to toggle active state

SectionPlaneDialogManager:
- Switch to onHideToggle callback
- Call hideSection()/recoverSection() based on toggle state

Behavior: Click hide button to hide section, click again to recover.
This commit is contained in:
yuding
2026-02-02 16:36:17 +08:00
parent 41abd9ed67
commit 4a09d52283
44 changed files with 17877 additions and 10807 deletions

View File

@@ -0,0 +1,492 @@
# Clipping API Migration Plan
## TL;DR
> **Quick Summary**: 将剖切功能迁移到新的底层 API `engine.clipping.xxx`,对外只暴露统一入口 `activeSection(mode)` 和 `deactivateSection()`,移除旧的分散方法。
>
> **Deliverables**:
> - Engine 组件清理:移除残留的旧状态变量
> - EngineManager 同步更新:新增 `activeSection(mode)`,移除旧方法
> - 三个 Dialog Manager 适配新 API
> - 文档更新
>
> **Estimated Effort**: Small (Engine 已完成大部分)
> **Parallel Execution**: YES - 2 waves
> **Critical Path**: Task 1 → Task 2 → Task 3/4/5 → Task 6 → Task 7
## Pre-work Completed (by user)
Engine 组件已完成重构:
-`activeSection(mode: 'x' | 'y' | 'z' | 'box' | 'face')` - 已实现
-`getCurrentSectionMode()` - 已实现
-`setSectionBoxRange()` - 已使用 `updateClippingValue`
-`deactivateSection()` - 已实现
- ✅ 旧方法 `activateSectionAxis/Box` 等已移除
---
## Context
### Original Request
用户提供了新的底层剖切 API
```javascript
engine.clipping.active("x" | "y" | "z" | "box" | "face")
engine.clipping.disActive()
engine.clipping.disabled()
engine.clipping.recover()
engine.clipping.updateClippingValue({x:{min,max}, y:{min,max}, z:{min,max}})
engine.clipping.clippingModel(model)
```
需要将 Engine wrapper 和 EngineManager 的公开 API 统一到新入口。
### Interview Summary
**Key Discussions**:
- 公开 API 策略:只保留统一新入口,不保留旧方法名作为兼容层
- 统一激活方法命名:`activateClipping(mode)`
- Box range update不自动激活 box 模式
- SectionPlane 面板hide 接 `disabled()`reverse/reset 暂不接入
- SectionBox fit/reset不再保留统一用 `updateClippingValue()`
- 测试策略:手动验收,无自动化测试
**Research Findings**:
- 旧 API 分布在 Engine 组件和 EngineManager 中
- 三个 Dialog Manager 分别管理 axis/box/plane 剖切
- 文档 `docs/引擎API对接.md``docs/API调用链.md` 需要同步更新
---
## Work Objectives
### Core Objective
将剖切功能的公开 API 统一为 `activateClipping(mode)``deactivateSection()`,内部实现迁移到新的 `engine.clipping.xxx` API。
### Concrete Deliverables
- `src/components/engine/index.ts`:重构剖切相关方法
- `src/managers/engine-manager.ts`:同步更新公开 API
- `src/managers/section-axis-dialog-manager.ts`:适配新 API
- `src/managers/section-box-dialog-manager.ts`:适配新 API
- `src/managers/section-plane-dialog-manager.ts`:接入 hide 功能
- `docs/引擎API对接.md`:更新 API 文档
- `docs/API调用链.md`:更新调用链文档
### Definition of Done
- [x] `npm run build` 编译通过
- [x] `npm run dev:demo` 启动后,点击工具栏剖切相关按钮能正常工作
- [x] 轴向剖切 (X/Y/Z) 可切换,关闭对话框时停止剖切
- [x] 剖切盒可打开/关闭,滑块可调整范围
- [x] 拾取面剖切可打开hide 按钮可隐藏剖切面
### Must Have
- 新的统一 API`activateClipping(mode)``deactivateSection()`
- 剖切盒范围更新使用 `updateClippingValue()`
- 拾取面剖切的 hide 功能使用 `disabled()`
### Must NOT Have (Guardrails)
- 不保留旧方法名作为公开 API`activateSectionAxis``activateSectionBox` 等)
- 不自动激活 box 模式(只有用户点击剖切盒按钮才激活)
- 不实现 SectionPlane 的 reverse/reset底层暂无 API
- 不实现 SectionBox 的 fit/reset统一用百分比范围
---
## Verification Strategy (MANDATORY)
### Test Decision
- **Infrastructure exists**: NO
- **User wants tests**: NO (手动验收)
- **QA approach**: Manual verification
### Manual Verification Procedures
每个 TODO 完成后,需在 demo 环境中验证:
```bash
npm run dev:demo
```
然后在浏览器中进行以下操作验证。
---
## Execution Strategy
### Parallel Execution Waves
```
Wave 1 (Start Immediately):
└── Task 1: Engine 组件清理(仅移除残留状态变量)
Wave 2 (After Wave 1):
└── Task 2: EngineManager 适配
Wave 3 (After Wave 2):
├── Task 3: SectionAxisDialogManager 适配
├── Task 4: SectionBoxDialogManager 适配
└── Task 5: SectionPlaneDialogManager 适配
Wave 4 (After Wave 3):
└── Task 6: 文档更新
Wave 5 (Final):
└── Task 7: 集成验证
```
### Dependency Matrix
| Task | Depends On | Blocks | Can Parallelize With |
|------|------------|--------|---------------------|
| 1 | None | 2 | None |
| 2 | 1 | 3, 4, 5 | None |
| 3 | 2 | 6 | 4, 5 |
| 4 | 2 | 6 | 3, 5 |
| 5 | 2 | 6 | 3, 4 |
| 6 | 3, 4, 5 | 7 | None |
| 7 | 6 | None | None |
---
## TODOs
- [x] 1. Engine 组件清理(残留状态变量)
**What to do**:
- 移除旧状态变量:`currentSectionAxis` (第48行)、`isSectionBoxActive` (第52行)
**Must NOT do**:
- 不修改已完成的 `activeSection()` / `deactivateSection()` 等方法
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Wave 1
- **Blocks**: Task 2
- **Blocked By**: None
**References**:
- `src/components/engine/index.ts:48-52` - 需要移除的旧状态变量
**Acceptance Criteria**:
**Automated Verification**:
```bash
npx tsc --noEmit -p tsconfig.json
# Assert: Exit code 0
```
**Commit**: YES
- Message: `refactor(engine): remove legacy clipping state variables`
- Files: `src/components/engine/index.ts`
---
- [x] 2. EngineManager 适配
**What to do**:
- 新增 `activeSection(mode)` 方法,转发到 Engine 的 `activeSection(mode)`
- 保留 `deactivateSection()` 方法(已存在)
- 保留 `setSectionBoxRange()` 方法(已存在)
- 移除旧方法:`activateSectionAxis()`、`deactivateSectionAxis()`、`getCurrentSectionAxis()`、`activateSectionBox()`、`deactivateSectionBox()`、`fitSectionBoxToModel()`、`resetSectionBox()`
**Must NOT do**:
- 不添加向后兼容的别名方法
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Wave 2
- **Blocks**: Tasks 3, 4, 5
- **Blocked By**: Task 1
**References**:
- `src/managers/engine-manager.ts:261-338` - 现有剖切相关方法位置(需移除)
**Acceptance Criteria**:
**Automated Verification**:
```bash
npx tsc --noEmit -p tsconfig.json
# Assert: Exit code 0
```
**Commit**: YES
- Message: `refactor(engine-manager): update clipping API to unified activeSection`
- Files: `src/managers/engine-manager.ts`
---
- [x] 3. SectionAxisDialogManager 适配
**What to do**:
- 修改 `onAxisChange` 回调:将 `activateSectionAxis(axis)` 改为 `activeSection(axis)`
- 修改 `onDialogCreated`:将 `activateSectionAxis('x')` 改为 `activeSection('x')`
- 确认 `onBeforeDestroy` 已使用 `deactivateSection()`(之前已改过)
**Must NOT do**:
- 不修改 UI 组件 (section-axis-panel)
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 3 (with Tasks 4, 5)
- **Blocks**: Task 6
- **Blocked By**: Task 2
**References**:
**Pattern References**:
- `src/managers/section-axis-dialog-manager.ts:67-88` - onAxisChange 和 onDialogCreated 位置
**Acceptance Criteria**:
**Automated Verification**:
```bash
npx tsc --noEmit -p tsconfig.json
# Assert: Exit code 0
```
**Manual Verification (via demo)**:
```
1. npm run dev:demo
2. 点击工具栏"轴向剖切"按钮
3. 预期:对话框打开,模型显示 X 轴剖切效果
4. 切换到 Y/Z 轴
5. 预期:剖切面随之切换
6. 关闭对话框
7. 预期:剖切效果消失
```
**Commit**: YES (groups with 4, 5)
- Message: `refactor(section-managers): adapt to unified clipping API`
- Files: `src/managers/section-axis-dialog-manager.ts`, `src/managers/section-box-dialog-manager.ts`, `src/managers/section-plane-dialog-manager.ts`
---
- [x] 4. SectionBoxDialogManager 适配
**What to do**:
- 修改 `onDialogCreated`:将 `activateSectionBox()` 改为 `activeSection('box')`
- 确认 `onBeforeDestroy` 已使用 `deactivateSection()`
- 确认 `onRangeChange` 使用 `setSectionBoxRange()`(保持不变)
- 移除 `onFitToModel` 和 `onReset` 的回调实现(不再支持)
**Must NOT do**:
- 不修改 UI 组件 (section-box-panel) 的按钮显示fit/reset 按钮保留但功能暂停)
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 3 (with Tasks 3, 5)
- **Blocks**: Task 6
- **Blocked By**: Task 2
**References**:
**Pattern References**:
- `src/managers/section-box-dialog-manager.ts:55-79` - createContent 和回调设置位置
- `src/managers/section-box-dialog-manager.ts:82-85` - onDialogCreated 位置
**Acceptance Criteria**:
**Manual Verification (via demo)**:
```
1. npm run dev:demo
2. 点击工具栏"剖切盒"按钮
3. 预期:对话框打开,模型显示剖切盒效果
4. 拖动 X/Y/Z 滑块
5. 预期:剖切范围随之变化
6. 关闭对话框
7. 预期:剖切效果消失
```
**Commit**: YES (groups with 3, 5)
---
- [x] 5. SectionPlaneDialogManager 适配
**What to do**:
- 修改 `onDialogCreated`:添加 `activeSection('face')` 调用
- 修改 `onBeforeDestroy`:添加 `deactivateSection()` 调用
- 修改 `onHide` 回调:调用 `engine.clipping.disabled()`(隐藏剖切面)
- 保留 `onReverse` 和 `onReset` 为日志输出(暂不接入)
**Must NOT do**:
- 不实现 reverse/reset 功能
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 3 (with Tasks 3, 4)
- **Blocks**: Task 6
- **Blocked By**: Task 2
**References**:
**Pattern References**:
- `src/managers/section-plane-dialog-manager.ts:47-75` - createContent 和回调位置
**Acceptance Criteria**:
**Manual Verification (via demo)**:
```
1. npm run dev:demo
2. 点击工具栏"拾取面剖切"按钮
3. 预期:对话框打开,进入面拾取模式
4. 点击"隐藏"按钮
5. 预期:剖切面隐藏
6. 关闭对话框
7. 预期:剖切效果消失
```
**Commit**: YES (groups with 3, 4)
---
- [x] 6. 文档更新
**What to do**:
- 更新 `docs/引擎API对接.md`
- 移除旧方法的文档
- 添加新方法 `activateClipping(mode)` / `hideClipping()` / `showClipping()` 的说明
- 更新调用链示例
- 更新 `docs/API调用链.md`
- 更新剖切功能的流程图
- 反映新的 API 名称
**Must NOT do**:
- 不删除整个章节,只更新方法名和示例
**Recommended Agent Profile**:
- **Category**: `writing`
- **Skills**: []
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Wave 4
- **Blocks**: Task 7
- **Blocked By**: Tasks 3, 4, 5
**References**:
**Documentation References**:
- `docs/引擎API对接.md` - 完整的 API 对接文档
- `docs/API调用链.md` - 调用链流程图
**Acceptance Criteria**:
**Manual Verification**:
- [ ] 文档中不再出现 `activateSectionAxis` / `activateSectionBox` 等旧方法名
- [ ] 新方法 `activateClipping(mode)` 有清晰的说明和示例
**Commit**: YES
- Message: `docs: update clipping API documentation`
- Files: `docs/引擎API对接.md`, `docs/API调用链.md`
---
- [x] 7. 集成验证
**What to do**:
- 运行完整构建:`npm run build`
- 启动 demo 环境:`npm run dev:demo`
- 依次测试所有剖切功能:
- 轴向剖切 (X/Y/Z 切换)
- 剖切盒 (打开/关闭/范围调整)
- 拾取面剖切 (打开/隐藏)
- 确认无控制台错误
**Must NOT do**:
- 不修改任何代码(仅验证)
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`playwright`]
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Wave 5 (final)
- **Blocks**: None
- **Blocked By**: Task 6
**References**: None (verification only)
**Acceptance Criteria**:
**Automated Verification**:
```bash
npm run build
# Assert: Exit code 0
```
**Manual Verification (comprehensive)**:
```
1. npm run dev:demo
2. 打开浏览器控制台
[轴向剖切测试]
3. 点击"轴向剖切"按钮 → 对话框打开X轴剖切生效
4. 切换 Y → 剖切面切换
5. 切换 Z → 剖切面切换
6. 关闭对话框 → 剖切消失
[剖切盒测试]
7. 点击"剖切盒"按钮 → 对话框打开,剖切盒生效
8. 拖动 X min 滑块 → 剖切范围变化
9. 拖动 Y max 滑块 → 剖切范围变化
10. 关闭对话框 → 剖切消失
[拾取面剖切测试]
11. 点击"拾取面剖切"按钮 → 对话框打开
12. 点击"隐藏"按钮 → 剖切面隐藏(控制台无错误)
13. 关闭对话框 → 剖切消失
14. 检查控制台:无错误信息
```
**Commit**: NO (verification only)
---
## Commit Strategy
| After Task | Message | Files | Verification |
|------------|---------|-------|--------------|
| 1 | `refactor(engine): migrate clipping to unified activateClipping API` | src/components/engine/index.ts | tsc --noEmit |
| 2 | `refactor(engine-manager): update clipping API to unified entry points` | src/managers/engine-manager.ts | tsc --noEmit |
| 3, 4, 5 | `refactor(section-managers): adapt to unified clipping API` | section-*-dialog-manager.ts | tsc --noEmit |
| 6 | `docs: update clipping API documentation` | docs/*.md | manual review |
---
## Success Criteria
### Verification Commands
```bash
npm run build # Expected: exit 0, no errors
npm run dev:demo # Expected: server starts, no runtime errors
```
### Final Checklist
- [x] 新 API `activeSection(mode)` 可用
- [x] 旧 API 已移除(`activateSectionAxis` 等)
- [x] 轴向剖切功能正常
- [x] 剖切盒功能正常
- [x] 拾取面剖切的 hide 功能正常
- [x] 文档已更新
- [x] 无 TypeScript 编译错误
- [x] 无运行时控制台错误

View File

@@ -0,0 +1,420 @@
# 构件详情弹窗 Bug 修复
## TL;DR
> **Quick Summary**: 修复构件详情弹窗的 5 个问题:删除重复的 PropertyPanelManager统一使用 ComponentDetailManager修复 CSS 样式(背景色、左边距);修复选中切换时内容不更新的问题。
>
> **Deliverables**:
> - 删除 PropertyPanelManager 及所有引用
> - 工具栏按钮改用 ComponentDetailManager
> - 折叠面板样式修复
> - 选中切换功能正常工作
>
> **Estimated Effort**: Medium (2-3 小时)
> **Parallel Execution**: YES - 2 waves
> **Critical Path**: Task 1 → Task 2 → Task 4 → Task 5
---
## Context
### Original Request
用户在测试时发现 5 个问题:
1. 双弹窗 - 底部面板和右键菜单各打开一个弹窗
2. 无背景色 - 折叠面板头部没有背景色
3. 左边距不足 - 头部需要增加左侧 padding
4. Mock 数据 - 工具栏按钮打开的是 mock 数据
5. 选中切换无效 - 点击不同构件内容不更新
### Interview Summary
**Key Discussions**:
- 确认完全删除 PropertyPanelManager不是废弃
- 手动测试策略(非 TDD
- 统一使用 ComponentDetailManager 作为唯一实现
**Research Findings**:
- 发现两套独立实现ComponentDetailManager 和 PropertyPanelManager
- PropertyPanelManager 硬编码了 mock 数据
- Toolbar 按钮调用的是错误的 Manager
- CSS 问题ghost 模式下背景色被设为 transparent
### Root Cause Analysis
| 问题 | 根因 |
|------|------|
| 双弹窗 | 两个 Manager 创建两个不同的 DialogID 不同) |
| 无背景色 | `collapse/index.css` 第 19 行:`.is-ghost .bim-collapse-header { background-color: transparent }` |
| Mock 数据 | `property/index.ts` 调用 `propertyPanel?.show()` 而非 `componentDetail?.show()` |
| 选中切换 | 事件流正确,但需要验证 init() 是否被正确调用 |
---
## Work Objectives
### Core Objective
统一构件详情功能为单一实现ComponentDetailManager修复所有样式和功能问题。
### Concrete Deliverables
- 删除文件:`src/managers/property-panel-manager.ts``.recycle/`
- 修改文件:共 5 个文件需要修改
### Definition of Done
- [ ] `bun run build` 成功,无编译错误
- [ ] 底部工具栏"构件详情"按钮调用 ComponentDetailManager
- [ ] 只能打开一个构件详情弹窗
- [ ] 折叠面板头部有背景色(亮色/暗色模式)
- [ ] 头部有适当的左边距
- [ ] 选中不同构件时弹窗内容自动更新
### Must Have
- 单一弹窗实例
- 背景色在所有主题下可见
- 真实数据加载(非 mock
### Must NOT Have (Guardrails)
- 不得保留 PropertyPanelManager 的任何代码
- 不得在 ComponentDetailManager 中使用 mock 数据
- 不得破坏现有的右键菜单功能
- 不得影响其他 Manager 的功能
---
## Verification Strategy (MANDATORY)
### Test Decision
- **Infrastructure exists**: NO (无自动化测试)
- **User wants tests**: Manual-only
- **Framework**: none
### Manual QA Procedures
**For each TODO, verification is done via playground:**
1. **启动环境**: `bun run dev:demo`
2. **测试工具**: 浏览器开发者工具 + 手动操作
3. **证据收集**: 截图 + 控制台日志
---
## Execution Strategy
### Parallel Execution Waves
```
Wave 1 (Start Immediately):
├── Task 1: 删除 PropertyPanelManager
├── Task 2: 修改 Toolbar 按钮
└── Task 3: 修复 CSS 样式
Wave 2 (After Wave 1):
├── Task 4: 清理 BimEngine 和 Registry 引用
└── Task 5: 验证选中切换功能
Wave 3 (Final):
└── Task 6: 完整回归测试
```
### Dependency Matrix
| Task | Depends On | Blocks | Can Parallelize With |
|------|------------|--------|---------------------|
| 1 | None | 4 | 2, 3 |
| 2 | None | 5 | 1, 3 |
| 3 | None | 5 | 1, 2 |
| 4 | 1 | 5 | None |
| 5 | 2, 3, 4 | 6 | None |
| 6 | 5 | None | None (final) |
---
## TODOs
### Wave 1: Core Changes (可并行)
- [ ] 1. 删除 PropertyPanelManager
**What to do**:
-`src/managers/property-panel-manager.ts` 移动到 `.recycle/YYYY-MM-DD/` 目录
- 记录删除原因
**Must NOT do**:
- 不得直接 `rm` 删除文件
- 不得保留任何代码片段
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`git-master`]
- `git-master`: 文件移动和版本控制
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 1 (with Tasks 2, 3)
- **Blocks**: Task 4
- **Blocked By**: None
**References**:
- `src/managers/property-panel-manager.ts` - 要删除的文件223 行)
- `.recycle/` - 目标回收目录(按 AI_COLLABORATION.md 规范)
**Acceptance Criteria**:
- [ ] 文件已移动到 `.recycle/YYYY-MM-DD/src/managers/property-panel-manager.ts`
- [ ] 创建 `.recycle/YYYY-MM-DD/README.md` 记录删除原因
- [ ] 原位置文件不存在
**Commit**: NO (groups with Task 4)
---
- [ ] 2. 修改 Toolbar 按钮指向 ComponentDetailManager
**What to do**:
- 修改 `src/components/button-group/toolbar/buttons/property/index.ts`
-`registry.propertyPanel?.show()` 改为 `registry.componentDetail?.show()`
**Must NOT do**:
- 不得改变按钮的其他属性id, label, icon
- 不得添加额外逻辑
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
- `coding-standards`: 确保代码风格一致
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 1 (with Tasks 1, 3)
- **Blocks**: Task 5
- **Blocked By**: None
**References**:
- `src/components/button-group/toolbar/buttons/property/index.ts:13-17` - 当前实现(调用 propertyPanel
- `src/managers/component-detail-manager.ts:35-50` - ComponentDetailManager.show() 方法
**Acceptance Criteria**:
- [ ] 第 16 行改为 `registry.componentDetail?.show()`
- [ ] 保留 console.log 用于调试
- [ ] 无 TypeScript 错误
**Commit**: NO (groups with Task 4)
---
- [ ] 3. 修复折叠面板 CSS 样式
**What to do**:
- 修改 `src/components/collapse/index.css`
-`.is-ghost .bim-collapse-header` 添加背景色
- 增加左侧 padding
- 移除 ComponentDetailManager 中的内联样式 hack可选
**Must NOT do**:
- 不得破坏非 ghost 模式的样式
- 不得使用 `!important`(除非绝对必要)
**Recommended Agent Profile**:
- **Category**: `visual-engineering`
- **Skills**: [`frontend-ui-ux`]
- `frontend-ui-ux`: CSS 样式专家
**Parallelization**:
- **Can Run In Parallel**: YES
- **Parallel Group**: Wave 1 (with Tasks 1, 2)
- **Blocks**: Task 5
- **Blocked By**: None
**References**:
- `src/components/collapse/index.css:18-22` - 当前 ghost 模式样式background: transparent
- `src/components/collapse/index.css:42-54` - 标准 header 样式(有 background-color
- `src/managers/component-detail-manager.ts:159-167` - 当前的样式 hack可移除
- `src/themes/presets.ts` - 主题变量定义
**Acceptance Criteria**:
- [ ] `.is-ghost .bim-collapse-header``background-color: var(--bim-component-bg)`
- [ ] `.is-ghost .bim-collapse-header``padding-left: 12px` 或类似值
- [ ] 暗色模式下背景可见
- [ ] 亮色模式下背景可见
- [ ] hover 状态仍有不同背景色
**Commit**: NO (groups with Task 4)
---
### Wave 2: Cleanup & Verification
- [ ] 4. 清理 BimEngine 和 ManagerRegistry 中的 PropertyPanelManager 引用
**What to do**:
- 修改 `src/bim-engine.ts`
- 删除 import 语句(第 8 行)
- 删除属性声明(第 37 行)
- 删除实例化代码(第 110 行)
- 删除 registry 注册(第 126 行)
- 删除 destroy 调用(第 156 行)
- 修改 `src/core/manager-registry.ts`
- 删除 import 语句(第 14 行)
- 删除属性声明(第 52-53 行)
**Must NOT do**:
- 不得删除 ComponentDetailManager 相关代码
- 不得改变初始化顺序
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`coding-standards`]
- `coding-standards`: TypeScript 代码清理
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Sequential
- **Blocks**: Task 5
- **Blocked By**: Task 1
**References**:
- `src/bim-engine.ts:8` - import PropertyPanelManager
- `src/bim-engine.ts:37` - propertyPanel 属性声明
- `src/bim-engine.ts:110` - new PropertyPanelManager()
- `src/bim-engine.ts:126` - registry.propertyPanel = ...
- `src/bim-engine.ts:156` - propertyPanel?.destroy()
- `src/core/manager-registry.ts:14` - import type
- `src/core/manager-registry.ts:52-53` - propertyPanel 属性
**Acceptance Criteria**:
- [ ] `bun run build` 成功
- [ ] 无 PropertyPanelManager 相关代码
- [ ] 无未使用的 import 警告
**Commit**: YES
- Message: `refactor(component-detail): 移除 PropertyPanelManager统一使用 ComponentDetailManager`
- Files:
- `.recycle/YYYY-MM-DD/src/managers/property-panel-manager.ts`
- `src/components/button-group/toolbar/buttons/property/index.ts`
- `src/components/collapse/index.css`
- `src/bim-engine.ts`
- `src/core/manager-registry.ts`
- Pre-commit: `bun run build`
---
- [ ] 5. 验证并修复选中切换功能
**What to do**:
- 在 playground 中测试选中切换
- 如果不工作,检查以下几点:
1. `component:selected` 事件是否正确发射Engine 组件)
2. `ComponentDetailManager.init()` 是否被调用
3. `isOpen()` 返回值是否正确
- 根据发现的问题进行修复
**Must NOT do**:
- 不得添加不必要的 console.log调试后删除
- 不得改变事件名称或 payload 结构
**Recommended Agent Profile**:
- **Category**: `unspecified-low`
- **Skills**: [`coding-standards`]
- `coding-standards`: 调试和代码修复
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Sequential (after Wave 1)
- **Blocks**: Task 6
- **Blocked By**: Tasks 2, 3, 4
**References**:
- `src/components/engine/index.ts:131-145` - 事件发射代码
- `src/managers/component-detail-manager.ts:19-33` - 事件监听代码
- `src/managers/component-detail-manager.ts:68-81` - loadAndRenderContent 方法
**Acceptance Criteria**:
**Manual Execution Verification:**
- [ ] 启动 `bun run dev:demo`
- [ ] 选中构件 A右键打开构件详情
- [ ] 验证:弹窗显示构件 A 的属性
- [ ] 选中构件 B不关闭弹窗
- [ ] 验证:弹窗自动更新为构件 B 的属性
- [ ] 控制台打印 `[Engine] 构件选中:` 日志
**Commit**: YES (if changes made)
- Message: `fix(component-detail): 修复选中切换时内容不更新的问题`
- Files: depends on what needs fixing
- Pre-commit: `bun run build`
---
### Wave 3: Final Verification
- [ ] 6. 完整回归测试
**What to do**:
- 运行 `bun run build` 确保编译通过
- 在 playground 中完整测试所有功能
**Must NOT do**:
- 无代码修改(仅测试)
**Recommended Agent Profile**:
- **Category**: `quick`
- **Skills**: [`playwright`]
- `playwright`: 浏览器自动化测试(可选)
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Final
- **Blocks**: None (final task)
- **Blocked By**: Task 5
**References**:
- 无(纯测试任务)
**Acceptance Criteria**:
**Manual Execution Verification (COMPLETE REGRESSION):**
**构建验证:**
- [ ] `bun run build` → 成功,无错误
- [ ] `bun run dev:demo` → 启动成功
**问题 1 - 单一弹窗验证:**
- [ ] 点击底部工具栏"构件详情" → 打开弹窗
- [ ] 右键点击"构件详情" → 同一个弹窗(不是新弹窗)
- [ ] 弹窗 ID 在 DevTools 中为 `component-detail-dialog`
**问题 2 - 背景色验证:**
- [ ] 暗色模式:折叠面板头部有可见背景色
- [ ] 切换到亮色模式(如果支持):头部背景仍可见
- [ ] hover 时背景色有变化
**问题 3 - 左边距验证:**
- [ ] 折叠面板标题有适当的左侧间距(不贴边)
**问题 4 - 真实数据验证:**
- [ ] 选中构件后打开弹窗 → 显示真实属性数据
- [ ] 不显示 mock 数据(如 "1f8d-4a2e-9c", "Generic - 200mm"
**问题 5 - 选中切换验证:**
- [ ] 弹窗打开状态下,选中不同构件 → 内容自动刷新
- [ ] 取消选中 → 显示"请先选中构件"
**Commit**: NO (无代码修改)
---
## Commit Strategy
| After Task | Message | Files | Verification |
|------------|---------|-------|--------------|
| 4 | `refactor(component-detail): 移除 PropertyPanelManager统一使用 ComponentDetailManager` | 6 files | `bun run build` |
| 5 | `fix(component-detail): 修复选中切换时内容不更新的问题` (if needed) | TBD | `bun run build` |
---
## Success Criteria
### Verification Commands
```bash
bun run build # Expected: Build success, no errors
```
### Final Checklist
- [ ] 所有 "Must Have" 功能正常
- [ ] 所有 "Must NOT Have" 未出现
- [ ] 构建通过
- [ ] 5 个原始问题全部解决