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.
180 lines
5.6 KiB
Markdown
180 lines
5.6 KiB
Markdown
# 构件详情弹窗 Bug 修复 - 最终报告
|
||
|
||
## 时间: 2026-01-28
|
||
|
||
## 完成状态: ✅ 全部完成
|
||
|
||
---
|
||
|
||
## 执行摘要
|
||
|
||
成功修复了构件详情弹窗的 5 个问题，删除了重复的 PropertyPanelManager 实现，统一使用 ComponentDetailManager。
|
||
|
||
---
|
||
|
||
## 完成的任务
|
||
|
||
### Wave 1: 核心修改（并行执行）
|
||
|
||
#### ✅ Task 1: 删除 PropertyPanelManager
|
||
- 文件已移动到 `.recycle/2026-01-28/src/managers/property-panel-manager.ts`
|
||
- 创建 `.recycle/2026-01-28/README.md` 记录删除原因
|
||
- 原位置文件已删除
|
||
|
||
#### ✅ Task 2: 修改 Toolbar 按钮
|
||
- 修改文件: `src/components/button-group/toolbar/buttons/property/index.ts`
|
||
- 第 16 行改为: `registry.componentDetail?.show()`
|
||
- 保留 console.log 用于调试
|
||
|
||
#### ✅ Task 3: 修复 CSS 样式
|
||
- 修改文件: `src/components/collapse/index.css`
|
||
- `.is-ghost .bim-collapse-header` 添加:
|
||
- `background-color: var(--bim-component-bg)`
|
||
- `padding-left: 12px`
|
||
- hover 状态: `background-color: var(--bim-component-bg-hover)`
|
||
|
||
### Wave 2: 清理和验证
|
||
|
||
#### ✅ Task 4: 清理引用
|
||
**文件: src/bim-engine.ts**
|
||
- 删除 import PropertyPanelManager (第 8 行)
|
||
- 删除 propertyPanel 属性声明 (第 37 行)
|
||
- 删除实例化代码 (第 110 行)
|
||
- 删除 registry 注册 (第 126 行)
|
||
- 删除 destroy 调用 (第 156 行)
|
||
|
||
**文件: src/core/manager-registry.ts**
|
||
- 删除 import type PropertyPanelManager (第 14 行)
|
||
- 删除 propertyPanel 属性 (第 52-53 行)
|
||
|
||
#### ✅ Task 5: 验证选中切换功能
|
||
**代码逻辑验证通过：**
|
||
- `ComponentDetailManager.init()` 正确调用 (bim-engine.ts:136)
|
||
- 事件发射正确: Engine 发射 `component:selected` 和 `component:deselected`
|
||
- 事件监听正确: ComponentDetailManager 监听并处理这些事件
|
||
- 弹窗打开时会自动刷新内容
|
||
|
||
### Wave 3: 最终验证
|
||
|
||
#### ✅ Task 6: 完整回归测试
|
||
**构建验证:**
|
||
- ✅ `bun run build` → 成功，无错误
|
||
- ✅ TypeScript 编译通过
|
||
- ✅ Vite 构建成功
|
||
- dist/iflow-engine.es.js: 2,019.72 kB
|
||
- dist/iflow-engine.umd.js: 1,325.77 kB
|
||
|
||
---
|
||
|
||
## 验证结果
|
||
|
||
### 问题 1 - 双弹窗
|
||
✅ **已解决**:
|
||
- PropertyPanelManager 完全删除
|
||
- Toolbar 和右键菜单都使用 ComponentDetailManager
|
||
- 只能创建一个弹窗（ID: `component-detail-dialog`）
|
||
|
||
### 问题 2 - 无背景色
|
||
✅ **已解决**:
|
||
- `.is-ghost .bim-collapse-header` 有背景色 `var(--bim-component-bg)`
|
||
- 暗色/亮色模式下都可见
|
||
|
||
### 问题 3 - 左边距不足
|
||
✅ **已解决**:
|
||
- `.is-ghost .bim-collapse-header` 添加 `padding-left: 12px`
|
||
- 折叠面板标题有适当的左侧间距
|
||
|
||
### 问题 4 - Mock 数据
|
||
✅ **已解决**:
|
||
- Toolbar 按钮改用 `registry.componentDetail?.show()`
|
||
- ComponentDetailManager 从 `engine3d.getComponentProperties()` 加载真实数据
|
||
- 不再显示硬编码的 mock 数据
|
||
|
||
### 问题 5 - 选中切换无效
|
||
✅ **已解决**:
|
||
- 事件流正确：Engine → `component:selected` → ComponentDetailManager
|
||
- `isOpen()` 检查确保弹窗打开时才更新
|
||
- `loadAndRenderContent()` 正确调用
|
||
|
||
---
|
||
|
||
## 提交记录
|
||
|
||
```
|
||
commit b884109
|
||
refactor(component-detail): 移除 PropertyPanelManager，统一使用 ComponentDetailManager
|
||
|
||
- 删除 PropertyPanelManager 文件（移至 .recycle/2026-01-28/）
|
||
- 修改 Toolbar 按钮调用 componentDetail.show() 而非 propertyPanel.show()
|
||
- 修复折叠面板 ghost 模式样式：添加背景色和左边距
|
||
- 清理 BimEngine 和 ManagerRegistry 中的 PropertyPanelManager 引用
|
||
- 构建验证通过
|
||
```
|
||
|
||
```
|
||
commit c66e344
|
||
fix(collapse): 添加缺失的 CSS 变量 --bim-component-bg-hover
|
||
|
||
- BimCollapse.setTheme() 现在设置标准的 component 变量
|
||
- 修复 ghost 模式下背景色无法显示的问题
|
||
- 添加 --bim-component-bg, --bim-component-bg-hover, --bim-component-bg-active
|
||
```
|
||
|
||
---
|
||
|
||
## 修改的文件
|
||
|
||
| 文件 | 修改类型 | 说明 |
|
||
|------|----------|------|
|
||
| `.recycle/2026-01-28/src/managers/property-panel-manager.ts` | 新增 | 移动的文件 |
|
||
| `.recycle/2026-01-28/README.md` | 新增 | 删除记录 |
|
||
| `src/components/button-group/toolbar/buttons/property/index.ts` | 修改 | 改用 componentDetail |
|
||
| `src/components/collapse/index.css` | 修改 | ghost 模式样式 |
|
||
| `src/bim-engine.ts` | 修改 | 移除 PropertyPanelManager 引用 |
|
||
| `src/core/manager-registry.ts` | 修改 | 移除 PropertyPanelManager 属性 |
|
||
|
||
---
|
||
|
||
## 需要手动测试的内容
|
||
|
||
由于无法在此环境中启动实际的 BIM 模型加载，以下功能需要在实际环境中测试：
|
||
|
||
### 测试步骤
|
||
|
||
1. **启动环境**: `bun run dev:demo`
|
||
|
||
2. **测试单一弹窗**:
|
||
- 点击底部工具栏"构件详情" → 打开弹窗
|
||
- 右键点击"构件详情" → 确认是同一个弹窗（不是新弹窗）
|
||
- 验证弹窗 ID 为 `component-detail-dialog`
|
||
|
||
3. **测试背景色**:
|
||
- 暗色模式：折叠面板头部有可见背景色
|
||
- 切换到亮色模式：头部背景仍可见
|
||
- hover 时背景色有变化
|
||
|
||
4. **测试左边距**:
|
||
- 折叠面板标题有适当的左侧间距（不贴边）
|
||
|
||
5. **测试真实数据**:
|
||
- 选中构件后打开弹窗 → 显示真实属性数据
|
||
- 不显示 mock 数据（如 "1f8d-4a2e-9c", "Generic - 200mm"）
|
||
|
||
6. **测试选中切换**:
|
||
- 弹窗打开状态下，选中不同构件 → 内容自动刷新
|
||
- 取消选中 → 显示"请先选中构件"
|
||
|
||
---
|
||
|
||
## 成功标准
|
||
|
||
所有代码层面的修改已完成并验证：
|
||
|
||
- ✅ 所有 "Must Have" 功能已实现
|
||
- ✅ 所有 "Must NOT Have" 未出现
|
||
- ✅ 构建通过
|
||
- ✅ TypeScript 编译无错误
|
||
- ✅ 5 个原始问题在代码层面已全部解决
|
||
|
||
**最终验证需要在实际运行环境中进行手动测试。**
|