feat: enhance description component, update property panel with tabs, and refine docs
This commit is contained in:
yuding
@@ -1,92 +1,200 @@
|
||||
import { BimComponent } from '../core/component';
|
||||
import { BimEngine } from '../bim-engine';
|
||||
import { BimCollapse } from '../components/collapse/index';
|
||||
import { BimDescription } from '../components/description/index';
|
||||
import { BimTab } from '../components/tab/index';
|
||||
|
||||
/**
|
||||
* 属性面板管理器
|
||||
* 负责展示和管理属性面板弹窗 (演示 Tab + Collapse + Description 组件)
|
||||
*/
|
||||
export class PropertyPanelManager extends BimComponent {
|
||||
private dialogId = 'property-panel-dialog';
|
||||
|
||||
constructor(engine: BimEngine) {
|
||||
super(engine);
|
||||
}
|
||||
|
||||
public init(): void {
|
||||
// 监听来自 Demo 的打开属性面板事件
|
||||
document.addEventListener('bim-demo:open-property-panel', () => {
|
||||
this.show();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示属性面板
|
||||
*/
|
||||
public show() {
|
||||
if (!this.engine.dialog) {
|
||||
console.warn('Dialog manager is not initialized');
|
||||
return;
|
||||
}
|
||||
const dialog = this.engine.dialog.create({
|
||||
title: 'panel.property.title', // '属性面板'
|
||||
minWidth: 320,
|
||||
height: 420,
|
||||
position: 'top-right',
|
||||
resizable: false
|
||||
});
|
||||
|
||||
// 2. Create Content Container
|
||||
// 1. 创建弹窗
|
||||
const width = 360; // 稍微加宽一点以容纳 Tab
|
||||
const x = document.body.clientWidth - width - 40;
|
||||
console.log('x', x)
|
||||
|
||||
const dialog = this.engine.dialog.create({
|
||||
id: this.dialogId,
|
||||
title: 'panel.property.title', // '构件详情'
|
||||
content: '',
|
||||
width: `${width}px`,
|
||||
height: '500px',
|
||||
position: { x, y: 20 },
|
||||
showMask: false,
|
||||
resizable: true
|
||||
} as any);
|
||||
|
||||
// 2. 创建内容容器
|
||||
const contentContainer = document.createElement('div');
|
||||
contentContainer.style.height = '100%';
|
||||
contentContainer.style.overflowY = 'auto';
|
||||
contentContainer.style.display = 'flex';
|
||||
contentContainer.style.flexDirection = 'column';
|
||||
|
||||
// Use public API to set content
|
||||
dialog.setContent(contentContainer);
|
||||
|
||||
// 3. Create Collapse inside the Dialog
|
||||
new BimCollapse({
|
||||
// 3. 创建标签页组件
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建"属性"标签页的内容 (包含 Collapse)
|
||||
*/
|
||||
private createPropsTabContent(): HTMLElement {
|
||||
const container = document.createElement('div');
|
||||
container.style.height = '100%';
|
||||
container.style.overflowY = 'auto'; // 内容区域滚动
|
||||
|
||||
new BimCollapse({
|
||||
container: container,
|
||||
accordion: true,
|
||||
activeIds: ['base'],
|
||||
activeIds: ['base', 'location'],
|
||||
items: [
|
||||
{
|
||||
id: 'base',
|
||||
title: 'panel.property.base', // '基本属性'
|
||||
content: this.createBaseInfoContent(),
|
||||
icon: '<svg viewBox="0 0 1024 1024"><path d="M512 64q190.4 0 326.4 136T974.4 526.4 838.4 852.8 512 988.8 185.6 852.8 49.6 526.4 185.6 200 512 64m0-64C229.6 0 0 229.6 0 512s229.6 512 512 512 512-229.6 512-512S794.4 0 512 0z" fill="currentColor"/></svg>'
|
||||
},
|
||||
{
|
||||
id: 'material',
|
||||
title: 'panel.property.material', // '材质信息'
|
||||
content: this.createMaterialContent(),
|
||||
icon: '<svg viewBox="0 0 1024 1024"><path d="M128 128h768v768H128z" fill="none" stroke="currentColor" stroke-width="64"/></svg>'
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
title: 'panel.property.advanced', // '高级设置'
|
||||
content: '<div>Loading...</div>', // Placeholder
|
||||
disabled: true
|
||||
content: this.createAdvancedInfoContent(), // 新增一个内容
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建"材质"标签页的内容 (包含 Collapse)
|
||||
*/
|
||||
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 div = document.createElement('div');
|
||||
div.style.padding = '8px 0';
|
||||
div.innerHTML = `
|
||||
<div style="margin-bottom:8px"><b>ID:</b> <span style="color:#666">E-2023001</span></div>
|
||||
<div style="margin-bottom:8px"><b>Name:</b> <span style="color:#666">Wall-01</span></div>
|
||||
<div style="margin-bottom:8px"><b>Level:</b> <span style="color:#666">F1</span></div>
|
||||
`;
|
||||
return div;
|
||||
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 div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<div style="display:flex;align-items:center;margin-bottom:8px">
|
||||
<div style="width:20px;height:20px;background:#ccc;margin-right:8px;border:1px solid #999"></div>
|
||||
<span>Concrete</span>
|
||||
</div>
|
||||
<div>Density: 2400 kg/m³</div>
|
||||
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>
|
||||
`;
|
||||
return div;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
public destroy(): void {
|
||||
// Cleanup if needed
|
||||
// 如果有需要清理的资源
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user