diff --git a/.recycle/2026-01-28/README.md b/.recycle/2026-01-28/README.md
new file mode 100644
index 0000000..7bd87de
--- /dev/null
+++ b/.recycle/2026-01-28/README.md
@@ -0,0 +1,13 @@
+# 2026-01-28 删除的文件
+
+## src/managers/property-panel-manager.ts
+
+- **删除原因**: 被 ComponentDetailManager 替代，统一构件详情功能
+- **删除日期**: 2026-01-28
+- **背景**:
+ - PropertyPanelManager 是重复实现，显示硬编码的 mock 数据
+ - ComponentDetailManager 显示真实的构件数据
+ - 为避免双弹窗问题，移除此 Manager
+- **影响**:
+ - Toolbar 按钮需改用 ComponentDetailManager
+ - BimEngine 和 ManagerRegistry 需移除相关引用
diff --git a/.recycle/2026-01-28/src/managers/property-panel-manager.ts b/.recycle/2026-01-28/src/managers/property-panel-manager.ts
new file mode 100644
index 0000000..2b19d0f
--- /dev/null
+++ b/.recycle/2026-01-28/src/managers/property-panel-manager.ts
@@ -0,0 +1,222 @@
+/**
+ * 属性面板管理器
+ * 负责管理构件属性面板的显示和内容
+ */
+import { BaseManager } from '../core/base-manager';
+import { BimCollapse } from '../components/collapse/index';
+import { BimDescription } from '../components/description/index';
+import { BimTab } from '../components/tab/index';
+
+/**
+ * 属性面板管理器
+ * 显示选中构件的属性信息和材质信息
+ */
+export class PropertyPanelManager extends BaseManager {
+ /** 对话框 ID */
+ private dialogId = 'property-panel-dialog';
+ /** 对话框实例 */
+ private dialog: any = null;
+
+ constructor() {
+ super();
+ }
+
+ /** 初始化，监听打开事件 */
+ public init(): void {
+ document.addEventListener('bim-demo:open-property-panel', () => {
+ this.show();
+ });
+ }
+
+ /** 显示属性面板 */
+ public show() {
+ if (!this.registry.dialog) {
+ console.warn('Dialog manager is not initialized');
+ return;
+ }
+
+ if (this.isOpen()) {
+ return;
+ }
+
+ const width = 360;
+ const x = document.body.clientWidth - width - 40;
+
+ this.dialog = this.registry.dialog.create({
+ id: this.dialogId,
+ title: 'panel.property.title',
+ content: '',
+ width: `${width}px`,
+ height: '500px',
+ position: { x, y: 20 },
+ showMask: false,
+ resizable: true,
+ onClose: () => {
+ this.hide();
+ }
+ } as any);
+
+ const contentContainer = document.createElement('div');
+ contentContainer.style.height = '100%';
+ contentContainer.style.display = 'flex';
+ contentContainer.style.flexDirection = 'column';
+
+ this.dialog.setContent(contentContainer);
+
+ const tab = new BimTab({
+ container: contentContainer,
+ tabs: [
+ {
+ id: 'props',
+ title: 'panel.property.tab.props',
+ content: this.createPropsTabContent()
+ },
+ {
+ id: 'material',
+ title: 'panel.property.tab.material',
+ content: this.createMaterialTabContent()
+ }
+ ]
+ });
+ tab.init();
+ }
+
+ /** 创建属性标签页内容 */
+ private createPropsTabContent(): HTMLElement {
+ const container = document.createElement('div');
+ container.style.height = '100%';
+ container.style.overflowY = 'auto';
+
+ new BimCollapse({
+ container: container,
+ accordion: true,
+ activeIds: ['base', 'location'],
+ items: [
+ {
+ id: 'base',
+ title: 'panel.property.base',
+ content: this.createBaseInfoContent(),
+ },
+ {
+ id: 'advanced',
+ title: 'panel.property.advanced',
+ content: this.createAdvancedInfoContent(),
+ disabled: false
+ }
+ ]
+ });
+
+ return container;
+ }
+
+ /** 创建材质标签页内容 */
+ private createMaterialTabContent(): HTMLElement {
+ const container = document.createElement('div');
+ container.style.height = '100%';
+ container.style.overflowY = 'auto';
+
+ new BimCollapse({
+ container: container,
+ accordion: true,
+ activeIds: ['material'],
+ items: [
+ {
+ id: 'material',
+ title: 'panel.property.material',
+ content: this.createMaterialContent(),
+ }
+ ]
+ });
+
+ return container;
+ }
+
+ /** 创建基本信息内容 */
+ private createBaseInfoContent(): HTMLElement {
+ const container = document.createElement('div');
+
+ new BimDescription({
+ container: container,
+ labelWidth: '80px',
+ bordered: true,
+ items: [
+ { label: 'Guid', value: '1f8d-4a2e-9c' },
+ { label: 'Name', value: 'Basic Wall: Generic - 200mm' },
+ { label: 'Type', value: 'Basic Wall' },
+ { label: 'Level', value: 'Trane - Centrifugal Water Chiller - CVHF 2 Stage direct drive TAG(BP-RHS-1100RT) 0202104531 1' }
+ ]
+ });
+
+ return container;
+ }
+
+ /** 创建高级信息内容 */
+ private createAdvancedInfoContent(): HTMLElement {
+ const container = document.createElement('div');
+
+ new BimDescription({
+ container: container,
+ labelWidth: '100px',
+ bordered: true,
+ items: [
+ { label: 'Area', value: '32.5 m²' },
+ { label: 'Volume', value: '6.5 m³' },
+ { label: 'Length', value: '5000 mm' },
+ { label: 'Phase', value: 'New Construction' }
+ ]
+ });
+
+ return container;
+ }
+
+ /** 创建材质内容 */
+ private createMaterialContent(): HTMLElement {
+ const container = document.createElement('div');
+
+ const preview = document.createElement('div');
+ preview.style.display = 'flex';
+ preview.style.alignItems = 'center';
+ preview.style.marginBottom = '4px';
+ preview.innerHTML = `
+
+ Concrete - Cast-in-Place Gray
+ `;
+
+ const descContainer = document.createElement('div');
+
+ new BimDescription({
+ container: descContainer,
+ items: [
+ { label: 'Preview', value: preview },
+ { label: 'Class', value: 'Concrete' },
+ { label: 'Density', value: '2400 kg/m³' },
+ { label: 'Thermal', value: '0.6 W/(m·K)' }
+ ]
+ });
+
+ container.appendChild(descContainer);
+ return container;
+ }
+
+ /**
+ * 检查面板是否打开
+ * @returns 是否打开
+ */
+ public isOpen(): boolean {
+ return this.dialog !== null;
+ }
+
+ /** 隐藏面板 */
+ public hide(): void {
+ if (this.dialog) {
+ this.dialog.destroy();
+ this.dialog = null;
+ }
+ }
+
+ /** 销毁管理器 */
+ public destroy(): void {
+ this.hide();
+ super.destroy();
+ }
+}
diff --git a/src/bim-engine.ts b/src/bim-engine.ts
index 83b1211..8d9d63d 100644
--- a/src/bim-engine.ts
+++ b/src/bim-engine.ts
@@ -5,7 +5,7 @@ import { DialogManager } from './managers/dialog-manager';
import { EngineManager } from './managers/engine-manager';
import { RightKeyManager } from './managers/right-key-manager';
import { ConstructTreeManagerBtn } from './managers/construct-tree-manager-btn';
-import { PropertyPanelManager } from './managers/property-panel-manager';
+
import { MeasureDialogManager } from './managers/measure-dialog-manager';
import { SectionPlaneDialogManager } from './managers/section-plane-dialog-manager';
import { SectionAxisDialogManager } from './managers/section-axis-dialog-manager';
@@ -34,7 +34,7 @@ export class BimEngine {
public dialog: DialogManager | null = null;
public engine: EngineManager | null = null;
public rightKey: RightKeyManager | null = null;
- public propertyPanel: PropertyPanelManager | null = null;
+
public measure: MeasureDialogManager | null = null;
public sectionPlane: SectionPlaneDialogManager | null = null;
public sectionAxis: SectionAxisDialogManager | null = null;
@@ -107,7 +107,7 @@ export class BimEngine {
this.buttonGroup = new ButtonGroupManager(this.wrapper);
this.rightKey = new RightKeyManager(this.wrapper);
this.constructTreeBtn = new ConstructTreeManagerBtn(this.wrapper);
- this.propertyPanel = new PropertyPanelManager();
+
this.measure = new MeasureDialogManager();
this.sectionPlane = new SectionPlaneDialogManager();
this.sectionAxis = new SectionAxisDialogManager();
@@ -123,7 +123,7 @@ export class BimEngine {
this.registry.buttonGroup = this.buttonGroup;
this.registry.rightKey = this.rightKey;
this.registry.constructTree = this.constructTreeBtn;
- this.registry.propertyPanel = this.propertyPanel;
+
this.registry.measure = this.measure;
this.registry.sectionPlane = this.sectionPlane;
this.registry.sectionAxis = this.sectionAxis;
@@ -133,6 +133,7 @@ export class BimEngine {
this.componentDetail = new ComponentDetailManager();
this.registry.componentDetail = this.componentDetail;
+ this.componentDetail.init();
this.updateTheme(themeManager.getTheme());
themeManager.subscribe((theme) => {
@@ -152,7 +153,7 @@ export class BimEngine {
this.engine?.destroy();
this.dialog?.destroy();
this.rightKey?.destroy();
- this.propertyPanel?.destroy();
+
this.measure?.destroy();
this.sectionPlane?.destroy();
this.sectionAxis?.destroy();
diff --git a/src/components/button-group/toolbar/buttons/property/index.ts b/src/components/button-group/toolbar/buttons/property/index.ts
index 242148e..d946124 100644
--- a/src/components/button-group/toolbar/buttons/property/index.ts
+++ b/src/components/button-group/toolbar/buttons/property/index.ts
@@ -13,7 +13,7 @@ export const createPropertyButton = (): ButtonConfig => {
onClick: () => {
console.log('构件详情按钮被点击');
const registry = ManagerRegistry.getInstance();
- registry.propertyPanel?.show();
+ registry.componentDetail?.show();
}
};
};
diff --git a/src/components/collapse/index.css b/src/components/collapse/index.css
index 669766b..aa9aa8f 100644
--- a/src/components/collapse/index.css
+++ b/src/components/collapse/index.css
@@ -16,11 +16,15 @@
}
.bim-collapse.is-ghost .bim-collapse-header {
- background-color: transparent;
- padding-left: 0;
+ background-color: var(--bim-component-bg);
+ padding-left: 12px;
padding-right: 0;
}
+.bim-collapse.is-ghost .bim-collapse-header:hover {
+ background-color: var(--bim-component-bg-hover);
+}
+
.bim-collapse.is-ghost .bim-collapse-content {
background-color: transparent;
border-top: none;
diff --git a/src/core/manager-registry.ts b/src/core/manager-registry.ts
index ce151eb..95a71ab 100644
--- a/src/core/manager-registry.ts
+++ b/src/core/manager-registry.ts
@@ -11,7 +11,7 @@ import type { EngineManager } from '../managers/engine-manager';
import type { ButtonGroupManager } from '../managers/button-group-manager';
import type { RightKeyManager } from '../managers/right-key-manager';
import type { ConstructTreeManagerBtn } from '../managers/construct-tree-manager-btn';
-import type { PropertyPanelManager } from '../managers/property-panel-manager';
+
import type { MeasureDialogManager } from '../managers/measure-dialog-manager';
import type { WalkControlManager } from '../managers/walk-control-manager';
import type { MapDialogManager } from '../managers/map-dialog-manager';
@@ -49,8 +49,7 @@ export class ManagerRegistry {
public rightKey: RightKeyManager | null = null;
/** 构件树管理器 */
public constructTree: ConstructTreeManagerBtn | null = null;
- /** 属性面板管理器 */
- public propertyPanel: PropertyPanelManager | null = null;
+
/** 测量对话框管理器 */
public measure: MeasureDialogManager | null = null;
/** 漫游控制管理器 */