4a09d52283
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.
421 lines
13 KiB
Markdown
421 lines
13 KiB
Markdown
# 构件详情弹窗 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 个原始问题全部解决
|