修改

src/managers/construct-tree-manager-btn.ts

@@ -6,6 +6,7 @@ import {BimButtonGroup} from "../components/button-group";
 import {BimTree} from "../components/tree";
 import {TreeNodeConfig} from "../components/tree/types.ts";
 import {BimDialog} from "../components/dialog";
+import {BimTab} from "../components/tab";
 
 const MOCK_STRUCT_DATA: TreeNodeConfig[] =[
     {
@@ -118,7 +119,9 @@ export class ConstructTreeManagerBtn extends BimComponent {
     }
 
     public openConstructTreeDialog() {
-        this.setVisible(false)
+        this.setVisible(false);
+
+        // 构件树实例（放在“构件”标签内）
         const tree = new BimTree({
             data: MOCK_STRUCT_DATA,
             checkable: true,
@@ -126,8 +129,8 @@ export class ConstructTreeManagerBtn extends BimComponent {
             enableSearch: true,
             checkStrictly: true,
             defaultExpandAll: true,
-            renderActions:(_node)=>{
-                return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m14.828 6.343l2.829 2.829m1.414-1.415L8.464 18.364l-3.535.707l.707-3.536L16.243 4.93a2 2 0 0 1 2.828 2.828Z"/></svg>'
+            renderActions: (_node) => {
+                return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m14.828 6.343l2.829 2.829m1.414-1.415L8.464 18.364l-3.535.707l.707-3.536L16.243 4.93a2 2 0 0 1 2.828 2.828Z"/></svg>';
             },
             onNodeCheck: (node) => {
                 console.log('onNodeCheck', node);
@@ -137,23 +140,56 @@ export class ConstructTreeManagerBtn extends BimComponent {
             },
             onNodeExpand: (node) => {
                 console.log('onNodeExpand', node);
-                this.dialog?.fitWidth()
+                this.dialog?.fitWidth();
             },
         });
         tree.init();
-        this.dialog = this.engine.dialog!.create({
-            title: 'constructTree.title',
-            minWidth: 300,
-            height: 400,
-            content: tree.element,
-            position: {x: 20, y: 20},
-            resizable: false,
-            // 关键：绑定生命周期
-            onClose: () => {
-                this.setVisible(true)
+
+        // 系统/空间暂留空占位，可后续填充业务内容
+        const systemPlaceholder = document.createElement('div');
+        systemPlaceholder.className = 'construct-tab__panel-content';
+        const spacePlaceholder = document.createElement('div');
+        spacePlaceholder.className = 'construct-tab__panel-content';
+
+        // 构件面板容器，确保内部树区域可滚动
+        const componentPanel = document.createElement('div');
+        componentPanel.className = 'construct-tab__panel-content';
+        componentPanel.appendChild(tree.element);
+
+        // 创建 Tab 容器（仅在本弹窗内使用，不额外挂 Manager）
+        const tabMount = document.createElement('div');
+        tabMount.className = 'construct-tab__container';
+        tabMount.style.height = '100%';
+        tabMount.style.overflow = 'hidden';
+        const tab = new BimTab({
+            container: tabMount,
+            tabs: [
+                {id: 'component', title: 'tab.component', content: componentPanel},
+                {id: 'system', title: 'tab.system', content: systemPlaceholder},
+                {id: 'space', title: 'tab.space', content: spacePlaceholder},
+            ],
+            activeId: 'component',
+            onChange: () => {
+                // 切换后根据内容宽度刷新弹窗
+                this.dialog?.fitWidth();
             }
         });
-        this.dialog?.fitWidth()
+        tab.init();
+
+        this.dialog = this.engine.dialog!.create({
+            title: 'constructTree.title',
+            minWidth: 320,
+            height: 420,
+            content: tabMount,
+            position: {x: 20, y: 20},
+            resizable: false,
+            onClose: () => {
+                tab.destroy();
+                tree.destroy();
+                this.setVisible(true);
+            }
+        });
+        this.dialog?.fitWidth();
     }
 
     public refresh() {