修改

AI_COLLABORATION.md

@@ -315,6 +315,13 @@ interface IBimComponent {
   - 管理引擎生命周期
 - **`types.ts`**: 引擎类型定义 (`EngineOptions`、`ModelLoadOptions`)
 
+#### `tab/`
+- **`index.ts`**: `BimTab` 类 - 固定标签页组件（不支持运行时增删）
+  - 管理标签头与内容切换，可托管 `content` 或通过 `onChange` 外部切换
+  - 实现 `IBimComponent` 接口
+- **`index.type.ts`**: 标签页类型定义
+- **`index.css`**: 标签页样式
+
 ### 3.4 管理器目录 (`src/managers/`)
 
 #### `dialog-manager.ts`
@@ -420,6 +427,7 @@ interface IBimComponent {
 - `dialog.md` - Dialog 组件详细文档
 - `button-group.md` - ButtonGroup 组件详细文档
 - `engine.md` - Engine 组件详细文档
+- `tab.md` - Tab 组件详细文档
 
 #### 文档内容结构
 每个组件文档包含以下部分：
@@ -551,6 +559,7 @@ engine.toolbar.setButtonVisibility('my-button', false);
 | `BimRightKey` | `src/components/right-key/index.ts` | 右键浮层容器 | `IBimComponent` |
 | `BimMenu` | `src/components/menu/index.ts` | 通用菜单列表 | `IBimComponent` |
 | `BimTree` | `src/components/tree/index.ts` | 通用树形组件 | `IBimComponent` |
+| `BimTab` | `src/components/tab/index.ts` | 固定标签页组件（无运行时增删，当前在 ConstructTreeManagerBtn 内直接使用） | `IBimComponent` |
 
 ### 4.3 服务类清单
 

docs/components/button-group.md

@@ -1183,3 +1183,11 @@ type ExpandDirection = 'up' | 'down' | 'left' | 'right';
 
 
 
+
+
+
+
+
+
+
+

docs/components/dialog.md

@@ -882,3 +882,11 @@ interface DialogColors {
 
 
 
+
+
+
+
+
+
+
+

docs/components/engine.md

@@ -601,3 +601,11 @@ interface ModelLoadOptions {
 
 
 
+
+
+
+
+
+
+
+

src/components/tree/index.css

@@ -9,11 +9,12 @@
     color: var(--bim-ui_text_primary, #333);
     user-select: none; /* 防止双击选中文字 */
     position: relative; /* 为下拉框定位 */
+    background: transparent; /* 保持透明背景 */
 }
 
 /* 搜索区域 */
 .bim-tree-search {
-    padding: 8px;
+    padding: 6px;
     /* border-bottom: 1px solid var(--bim-ui_border_color, #d9d9d9); */
     /* 背景透明，使用父布局背景 */
     background-color: transparent; 
@@ -47,7 +48,7 @@
 
 .bim-tree-search-input {
     width: 100%;
-    height: 32px;
+    height: 30px;
     /* 左侧留出图标位置: 8px left + 16px icon + 4px gap = 28px */
     padding: 4px 8px 4px 30px; 
     border: 1px solid var(--bim-ui_border_color, #d9d9d9);
@@ -116,7 +117,8 @@
 .bim-tree-content {
     flex: 1;
     overflow-y: auto;
-    padding: 4px 0;
+    padding: 2px 0;
+    min-height: 0; /* 允许在父容器中正确滚动 */
 }
 
 /* 节点行容器 */
@@ -137,7 +139,7 @@
 }
 
 .bim-tree-node-content:hover {
-    background-color: var(--bim-ui_bg_hover, rgba(0, 0, 0, 0.05));
+    background-color: var(--bim-ui_bg_hover, rgba(0, 0, 0, 0.05)); /* 由主题提供，深色模式一致 */
 }
 
 /* 展开/折叠箭头 */
@@ -295,7 +297,8 @@
 .bim-tree-content {
     flex: 1;
     overflow: auto; /* 支持横向和纵向滚动 */
-    padding: 4px 0;
+    padding: 2px 0;
+    min-height: 0;
 }
 
 /* 节点行容器 */

src/locales/en-US.ts

@@ -30,5 +30,10 @@ export const enUS: TranslationDictionary = {
   },
     constructTree: {
         title: 'Construct Tree',
-    }
+    },
+  tab: {
+    component: 'Component',
+    system: 'System',
+    space: 'Space',
+  }
 };

src/locales/types.ts

@@ -33,6 +33,11 @@ export interface TranslationDictionary {
     constructTree: {
         title: string;
     }
+    tab: {
+        component: string;
+        system: string;
+        space: string;
+    }
 }
 
 /**

src/locales/zh-CN.ts

@@ -30,5 +30,10 @@ export const zhCN: TranslationDictionary = {
     },
     constructTree: {
         title: '目录树',
+    },
+    tab: {
+        component: '构件',
+        system: '系统',
+        space: '空间',
     }
 };

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() {

src/themes/presets.ts

@@ -12,50 +12,6 @@ export const darkTheme: ThemeConfig = {
     background: '#f5f5f5',
     panelBackground: 'rgba(30, 30, 30, 0.9)',
 
-    // 注意：如果背景是浅色，主文字颜色通常需要是深色才能看清
-    // 但这里的 textPrimary 主要是用于 UI 组件内部的。
-    // 如果 BimEngine wrapper 上的文字直接显示在 background 上，
-    // 我们可能需要区分 "UI文字" 和 "页面文字"。
-    // 目前架构中：
-    // theme.textPrimary 会应用到 wrapper.style.color (BimEngine.ts)
-    // 以及 Toolbar/Dialog 的文字颜色。
-
-    // 如果背景是浅灰，而 wrapper 文字设置为白色 (#ffffff)，那就看不清了。
-    // 这是一个语义冲突：
-    // 1. Panel (Toolbar/Dialog) 是黑底，需要白字。
-    // 2. Background (Wrapper) 是白底，需要黑字。
-
-    // 既然您要求背景统一浅灰，那么 Wrapper 上的“直接子文本”应该是深色。
-    // 但 Toolbar/Dialog 仍然是深色模式（黑底），它们需要白字。
-
-    // 妥协方案：
-    // 保持 textPrimary 为白色（为了适配黑<E9858D><E9BB91><EFBFBD>的 Toolbar/Dialog）。
-    // 但是在 BimEngine 中，如果背景强制改为浅色，Wrapper 的默认文字颜色可能需要单独处理，
-    // 或者我们可以认为 "Wrapper" 主要是承载 UI 组件的，直接写在 Wrapper 上的文字（标题/描述）
-    // 应该有自己的样式，而不是直接继承 theme.textPrimary。
-
-    // 在之前的 BimEngine.ts 中：
-    // this.wrapper.style.color = theme.textPrimary;
-
-    // 如果背景变浅灰，这里 textPrimary 还是白色的话，标题就看不见了。
-    // 所以，深色模式下：
-    // 背景：浅灰
-    // 组件：深黑
-    // 组件文字：白
-    // 页面文字：黑 (问题点)
-
-    // 让我们先按您的要求改背景。通常这种情况下，ThemeConfig 可能需要区分 
-    // contentText (页面内容文字) 和 uiText (组件文字)。
-    // 但为了不破坏现有结构，我将假定 textPrimary 主要服务于 UI 组件。
-    // 为了让 Wrapper 上的标题可见，我们可能需要在 BimEngine 中移除对 wrapper.style.color 的强制设置，
-    // 或者在 presets 里把 textPrimary 改回来？不对，改回来 Toolbar 就看不清了。
-
-    // 方案：我将仅修改 background。
-    // 至于 Wrapper 上的标题（BimEngine 标题），由于在最新的 BimEngine.ts 中
-    // <20><><EFBFBD>们已经移除了 titleEl 和 descEl（在之前的重构中），
-    // 所以现在 Wrapper 里主要是 Toolbar 和 Dialog，它们有自己的 panelBackground。
-    // 只要 Toolbar/Dialog 内部正常即可。
-
     textPrimary: '#ffffff',
     textSecondary: '#cccccc',