bim_engine/.sisyphus/plans/component-detail-bugfix.md

构件详情弹窗 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

bun run build  # Expected: Build success, no errors

Final Checklist

• 所有 "Must Have" 功能正常
• 所有 "Must NOT Have" 未出现
• 构建通过
• 5 个原始问题全部解决