refactor(component-detail): 移除 PropertyPanelManager，统一使用 ComponentDetailManager
- 删除 PropertyPanelManager 文件（移至 .recycle/2026-01-28/） - 修改 Toolbar 按钮调用 componentDetail.show() 而非 propertyPanel.show() - 修复折叠面板 ghost 模式样式：添加背景色和左边距 - 清理 BimEngine 和 ManagerRegistry 中的 PropertyPanelManager 引用 - 构建验证通过
This commit is contained in:
yuding
13
.recycle/2026-01-28/README.md
Normal file
13
.recycle/2026-01-28/README.md
Normal file
@@ -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 需移除相关引用
|
||||
222
.recycle/2026-01-28/src/managers/property-panel-manager.ts
Normal file
222
.recycle/2026-01-28/src/managers/property-panel-manager.ts
Normal file
@@ -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: '<span style="color:#666">1f8d-4a2e-9c</span>' },
|
||||
{ label: 'Name', value: '<b>Basic Wall: Generic - 200mm</b>' },
|
||||
{ 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 = `
|
||||
<div style="width:24px;height:24px;background:#9ca3af;margin-right:8px;border:1px solid #6b7280;border-radius:2px;"></div>
|
||||
<span>Concrete - Cast-in-Place Gray</span>
|
||||
`;
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
@@ -13,7 +13,7 @@ export const createPropertyButton = (): ButtonConfig => {
|
||||
onClick: () => {
|
||||
console.log('构件详情按钮被点击');
|
||||
const registry = ManagerRegistry.getInstance();
|
||||
registry.propertyPanel?.show();
|
||||
registry.componentDetail?.show();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
/** 漫游控制管理器 */
|
||||
|
||||
Reference in New Issue
Block a user