/* 树容器 */ .bim-tree { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; /* 内部滚动 */ font-size: 14px; color: var(--bim-ui_text_primary, #333); user-select: none; /* 防止双击选中文字 */ position: relative; /* 为下拉框定位 */ background: transparent; /* 保持透明背景 */ } /* 搜索区域 */ .bim-tree-search { padding: 6px; /* border-bottom: 1px solid var(--bim-ui_border_color, #d9d9d9); */ /* 背景透明,使用父布局背景 */ background-color: transparent; flex-shrink: 0; position: relative; } .bim-tree-search-wrapper { position: relative; width: 100%; display: flex; align-items: center; } .bim-tree-search-icon { position: absolute; left: 8px; width: 16px; height: 16px; color: var(--bim-ui_text_secondary, #999); pointer-events: none; /* 让点击穿透到 input */ display: flex; align-items: center; justify-content: center; } .bim-tree-search-icon svg { width: 100%; height: 100%; } .bim-tree-search-input { width: 100%; height: 30px; /* 左侧留出图标位置: 8px left + 16px icon + 4px gap = 28px */ padding: 4px 8px 4px 30px; border: 1px solid var(--bim-ui_border_color, #d9d9d9); border-radius: 4px; outline: none; font-size: 13px; color: inherit; /* 输入框背景半透明或白色,看设计,通常输入框本身还是需要背景的,否则文字看不清 */ background-color: var(--bim-ui_bg_color, #fff); transition: all 0.2s; box-sizing: border-box; } .bim-tree-search-input:focus { border-color: var(--bim-primary_color, #1890ff); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } /* 搜索结果下拉框 */ .bim-tree-search-results { position: absolute; top: 100%; left: 8px; right: 8px; background-color: var(--bim-ui_bg_color, #fff); border: 1px solid var(--bim-ui_border_color, #eee); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 4px; max-height: 200px; overflow-y: auto; z-index: 10; display: none; } .bim-tree-search-results.is-visible { display: block; } .bim-tree-search-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.03); } .bim-tree-search-item:last-child { border-bottom: none; } .bim-tree-search-item:hover { background-color: var(--bim-ui_bg_hover, #f5f5f5); } .bim-tree-search-item-title { font-weight: 500; display: block; } .bim-tree-search-item-path { font-size: 12px; color: var(--bim-ui_text_secondary, #999); margin-top: 2px; display: block; } /* 树内容区域 */ .bim-tree-content { flex: 1; overflow-y: auto; padding: 2px 0; min-height: 0; /* 允许在父容器中正确滚动 */ } /* 节点行容器 */ .bim-tree-node { display: flex; flex-direction: column; } /* 节点内容行 (Flex 布局) */ .bim-tree-node-content { display: flex; align-items: center; height: 32px; /* 标准行高 */ cursor: pointer; transition: background-color 0.2s; border-radius: 4px; padding-right: 8px; } .bim-tree-node-content:hover { background-color: var(--bim-ui_bg_hover, rgba(0, 0, 0, 0.05)); /* 由主题提供,深色模式一致 */ } /* 展开/折叠箭头 */ .bim-tree-switcher { width: 24px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bim-ui_text_secondary, #999); transition: transform 0.2s; flex-shrink: 0; } .bim-tree-switcher svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.2s; } .bim-tree-switcher.is-expanded svg { transform: rotate(90deg); } .bim-tree-switcher.is-hidden { visibility: hidden; /*叶子节点占位但不显示*/ } /* 复选框 */ .bim-tree-checkbox { width: 16px; height: 16px; border: 1px solid var(--bim-ui_border_color, #d9d9d9); border-radius: 2px; margin-right: 8px; background-color: var(--bim-ui_bg_color, #fff); position: relative; cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .bim-tree-checkbox:hover { border-color: var(--bim-primary_color, #1890ff); } /* 选中状态 */ .bim-tree-checkbox.is-checked { background-color: var(--bim-primary_color, #1890ff); border-color: var(--bim-primary_color, #1890ff); } .bim-tree-checkbox.is-checked::after { content: ''; position: absolute; top: 1px; left: 4px; width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); } /* 半选状态 */ .bim-tree-checkbox.is-indeterminate { background-color: var(--bim-ui_bg_color, #fff); border-color: var(--bim-primary_color, #1890ff); } .bim-tree-checkbox.is-indeterminate::after { content: ''; position: absolute; top: 6px; left: 3px; width: 8px; height: 2px; background-color: var(--bim-primary_color, #1890ff); } /* 禁用状态 */ .bim-tree-node.is-disabled .bim-tree-checkbox { background-color: #f5f5f5; border-color: #d9d9d9; cursor: not-allowed; } .bim-tree-node.is-disabled .bim-tree-checkbox.is-checked { background-color: #d9d9d9; } .bim-tree-node.is-disabled .bim-tree-node-content { color: var(--bim-ui_text_disabled, #ccc); cursor: not-allowed; } /* 图标 */ .bim-tree-icon { width: 16px; height: 16px; margin-right: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bim-tree-icon img, .bim-tree-icon svg { width: 100%; height: 100%; } /* 文本 */ .bim-tree-title { flex: 1; white-space: nowrap; /* 移除省略号样式,许文本撑开 */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ } /* 子节点容器 */ .bim-tree-children { display: none; overflow: visible; /* 允许子节点撑开宽度 */ } .bim-tree-children.is-visible { display: block; } /* 选中高亮状态 */ .bim-tree-node-content.is-selected { background-color: var(--bim-ui_bg_selected, rgba(24, 144, 255, 0.2)); color: var(--bim-primary_color, #1890ff); } /* 节点操作栏 */ .bim-tree-node-actions { display: none; /* 默认隐藏 */ align-items: center; margin-left: 8px; /* 与文字的间距 */ flex-shrink: 0; } .bim-tree-node-content.is-selected .bim-tree-node-actions { display: flex; /* 选中时显示 */ } /* 树内容区域 */ .bim-tree-content { flex: 1; overflow: auto; /* 支持横向和纵向滚动 */ padding: 2px 0; min-height: 0; } /* 节点行容器 */ .bim-tree-node { display: flex; flex-direction: column; width: fit-content; /* 关键:让节点容器跟随内容宽度 */ min-width: 100%; } /* 节点内容行 (Flex 布局) */ .bim-tree-node-content { display: flex; align-items: center; height: 32px; /* 标准行高 */ cursor: pointer; transition: background-color 0.2s; border-radius: 4px; padding-right: 8px; /* 关键:允许宽度根据内容撑开,且至少占满容器 */ width: fit-content; min-width: 100%; box-sizing: border-box; }