修改

2025-12-22 14:31:23 +08:00
parent 9d1ebfd817
commit 005535a26d
14 changed files with 548 additions and 401 deletions
--- a/src/components/tree/index.css
+++ b/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;
 }

 /* 节点行容器 */
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -30,5 +30,10 @@ export const enUS: TranslationDictionary = {
  },
    constructTree: {
        title: 'Construct Tree',
-    }
+    },
+  tab: {
+    component: 'Component',
+    system: 'System',
+    space: 'Space',
+  }
 };
--- a/src/locales/types.ts
+++ b/src/locales/types.ts
@@ -33,6 +33,11 @@ export interface TranslationDictionary {
    constructTree: {
        title: string;
    }
+    tab: {
+        component: string;
+        system: string;
+        space: string;
+    }
 }

 /**
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -30,5 +30,10 @@ export const zhCN: TranslationDictionary = {
    },
    constructTree: {
        title: '目录树',
+    },
+    tab: {
+        component: '构件',
+        system: '系统',
+        space: '空间',
    }
 };
--- a/src/managers/construct-tree-manager-btn.ts
+++ b/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() {
--- a/src/themes/presets.ts
+++ b/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',