添加折叠面板

2025-12-22 15:39:58 +08:00
parent 005535a26d
commit ed0414c75b
29 changed files with 2759 additions and 1416 deletions
--- a/src/managers/property-panel-manager.ts
+++ b/src/managers/property-panel-manager.ts
@@ -0,0 +1,92 @@
+import { BimComponent } from '../core/component';
+import { BimEngine } from '../bim-engine';
+import { BimCollapse } from '../components/collapse/index';
+
+export class PropertyPanelManager extends BimComponent {
+
+    constructor(engine: BimEngine) {
+        super(engine);
+    }
+
+    public init(): void {
+        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
+        const contentContainer = document.createElement('div');
+        contentContainer.style.height = '100%';
+        contentContainer.style.overflowY = 'auto';
+
+        // Use public API to set content
+        dialog.setContent(contentContainer);
+
+        // 3. Create Collapse inside the Dialog
+        new BimCollapse({
+            container: contentContainer,
+            accordion: true,
+            activeIds: ['base'],
+            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
+                }
+            ]
+        });
+    }
+
+    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;
+    }
+
+    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>
+        `;
+        return div;
+    }
+
+    public destroy(): void {
+        // Cleanup if needed
+    }
+}