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
179
.sisyphus/notepads/component-detail-bugfix/final-report.md
Normal file
179
.sisyphus/notepads/component-detail-bugfix/final-report.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 构件详情弹窗 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 个原始问题在代码层面已全部解决
|
||||
|
||||
**最终验证需要在实际运行环境中进行手动测试。**
|
||||
Reference in New Issue
Block a user