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:
492
.sisyphus/plans/clipping-api-migration.md
Normal file
492
.sisyphus/plans/clipping-api-migration.md
Normal 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] 无运行时控制台错误
|
||||
420
.sisyphus/plans/component-detail-bugfix.md
Normal file
420
.sisyphus/plans/component-detail-bugfix.md
Normal 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 创建两个不同的 Dialog(ID 不同) |
|
||||
| 无背景色 | `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 个原始问题全部解决
|
||||
Reference in New Issue
Block a user