bim_xg/bim_engine
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 重构主题系统，新增 glass-pill 按钮样式

Browse Source 
- ThemeConfig 接口扩展至 60+ 语义化属性
- 新增深浅主题预设 (glassPill overrides)
- button-group 支持 glass-pill 样式变体
- 默认主题改为浅色
- 移除 toolbar 容器硬编码定位
- 统一组件 CSS 变量命名规范
- 暂时隐藏下拉箭头
This commit is contained in:
yuding
2026-01-21 15:50:07 +08:00
parent 8d027419e4
commit 19f7e3ffbc
34 changed files with 6840 additions and 4706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/button-group/index.css
View File

@@ -306,4 +306,202 @@
.bim-btn-group-root.is-bottom-toolbar .opt-btn {
padding: 8px;
}
/* ========== type-glass-pill: 胶囊容器 + 毛玻璃 + 圆形按钮 ========== */
/* 使用主题系统 CSS 变量，支持深色/浅色主题切换 */
.bim-btn-group-root.type-glass-pill .bim-btn-group-section {
background: var(--bim-glass-pill-section-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--bim-glass-pill-section-border);
border-radius: 9999px;
box-shadow: var(--bim-glass-pill-section-shadow);
padding: 8px;
gap: 10px;
}
.bim-btn-group-root.type-glass-pill .opt-btn {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 9999px;
background: var(--bim-glass-pill-btn-bg);
border: 1px solid var(--bim-glass-pill-btn-border);
box-shadow: var(--bim-glass-pill-btn-shadow);
color: var(--bim-text-primary);
padding: 0;
transition: all 200ms ease-out;
}
.bim-btn-group-root.type-glass-pill .opt-btn:hover {
background: var(--bim-glass-pill-btn-bg-hover);
transform: scale(1.05);
box-shadow: var(--bim-glass-pill-btn-shadow-hover);
}
.bim-btn-group-root.type-glass-pill .opt-btn:active {
transform: scale(0.98);
}
.bim-btn-group-root.type-glass-pill .opt-btn.active {
background: var(--bim-primary);
border: 1px solid var(--bim-primary-active);
color: var(--bim-text-inverse);
box-shadow: var(--bim-shadow-glow);
}
.bim-btn-group-root.type-glass-pill .opt-btn.active:hover {
background: var(--bim-primary-hover);
transform: scale(1.05);
}
.bim-btn-group-root.type-glass-pill .opt-btn.active:active {
transform: scale(0.98);
}
.bim-btn-group-root.type-glass-pill .opt-btn.active .opt-btn-icon {
color: var(--bim-icon-inverse);
}
.bim-btn-group-root.type-glass-pill .opt-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.bim-btn-group-root.type-glass-pill .opt-btn-icon {
width: 18px;
height: 18px;
color: var(--bim-glass-pill-icon-color);
transition: color 200ms ease-out;
}
.bim-btn-group-root.type-glass-pill .opt-btn-icon svg {
width: 18px;
height: 18px;
}
.bim-btn-group-root.type-glass-pill .opt-btn:hover .opt-btn-icon {
color: var(--bim-glass-pill-icon-color-hover);
}
.bim-btn-group-root.type-glass-pill .opt-btn-label {
display: none !important;
}
.bim-btn-group-root.type-glass-pill .opt-btn-text-wrapper {
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
.bim-btn-group-root.type-glass-pill .opt-btn-arrow {
font-size: 8px;
position: absolute;
top: 0;
right: 0;
color: var(--bim-text-tertiary);
}
/* glass-pill 二级菜单 - 浅色主题 */
.opt-btn-dropdown.type-glass-pill {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 6px;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
border-radius: 8px;
color: rgb(51, 65, 85);
padding: 8px 12px;
font-size: 13px;
font-weight: 400;
transition: all 100ms ease-out;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item:hover {
background: rgb(241, 245, 249);
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item:active {
background: rgb(226, 232, 240);
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item.active {
background: rgb(59, 130, 246);
color: white;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item.active .opt-btn-icon {
color: white;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item.active .opt-btn-dropdown-label {
color: white;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item .opt-btn-icon {
width: 18px;
height: 18px;
color: rgb(51, 65, 85);
flex-shrink: 0;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item .opt-btn-icon svg {
width: 18px;
height: 18px;
}
.opt-btn-dropdown.type-glass-pill .opt-btn-dropdown-item .opt-btn-dropdown-label {
white-space: nowrap;
color: rgb(51, 65, 85);
}
/* glass-pill 二级菜单 - 深色主题 */
.opt-btn-dropdown.type-glass-pill.theme-dark {
background: rgba(21, 34, 50, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(51, 65, 85, 0.5);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item {
color: #ffffff;
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item:hover {
background: #1f2d3e;
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item:active {
background: #2a3f54;
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item.active {
background: rgb(59, 130, 246);
color: white;
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-icon {
color: #ffffff;
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-dropdown-label {
color: #ffffff;
}

117
src/components/button-group/index.ts
View File

@@ -93,6 +93,10 @@ export class BimButtonGroup implements IBimComponent {
this.container.classList.add(this.options.className);
}
if (this.options.type && this.options.type !== 'default') {
this.container.classList.add(`type-${this.options.type}`);
}
this.updatePosition();
// 添加事件拦截，防止点击穿透到 3D 引擎
@@ -217,17 +221,16 @@ export class BimButtonGroup implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const themeColors: ButtonGroupColors = {
backgroundColor: theme.panelBackground,
btnBackgroundColor: theme.componentBackground,
btnHoverColor: theme.componentHover,
btnActiveColor: theme.componentActive,
iconColor: theme.icon,
backgroundColor: theme.bgElevated,
btnBackgroundColor: theme.componentBg,
btnHoverColor: theme.componentBgHover,
btnActiveColor: theme.componentBgActive,
iconColor: theme.iconDefault,
iconActiveColor: theme.iconActive,
textColor: theme.textSecondary,
textActiveColor: theme.textPrimary
};
// 只应用没有被自定义的颜色
Object.entries(themeColors).forEach(([key, value]) => {
const colorKey = key as keyof ButtonGroupColors;
if (!this.customColors.has(colorKey)) {
@@ -235,8 +238,90 @@ export class BimButtonGroup implements IBimComponent {
}
});
this.container.classList.remove('theme-dark', 'theme-light');
this.container.classList.add(`theme-${theme.name}`);
this.applyStyles();
this.setPrimaryColor(theme.primary);
this.applyThemeCssVars(theme);
}
/**
* 应用主题系统的 CSS 变量到容器
* 供 glass-pill 等样式变体使用
*/
private applyThemeCssVars(theme: ThemeConfig): void {
const style = this.container.style;
style.setProperty('--bim-primary', theme.primary);
style.setProperty('--bim-primary-hover', theme.primaryHover);
style.setProperty('--bim-primary-active', theme.primaryActive);
style.setProperty('--bim-bg-glass', theme.bgGlass);
style.setProperty('--bim-bg-glass-blur', theme.bgGlassBlur);
style.setProperty('--bim-bg-elevated', theme.bgElevated);
style.setProperty('--bim-bg-overlay', theme.bgOverlay);
style.setProperty('--bim-bg-inset', theme.bgInset);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-secondary', theme.textSecondary);
style.setProperty('--bim-text-tertiary', theme.textTertiary);
style.setProperty('--bim-text-inverse', theme.textInverse);
style.setProperty('--bim-icon-default', theme.iconDefault);
style.setProperty('--bim-icon-hover', theme.iconHover);
style.setProperty('--bim-icon-active', theme.iconActive);
style.setProperty('--bim-icon-inverse', theme.iconInverse);
style.setProperty('--bim-border-default', theme.borderDefault);
style.setProperty('--bim-border-subtle', theme.borderSubtle);
style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
style.setProperty('--bim-component-bg-active', theme.componentBgActive);
style.setProperty('--bim-shadow-sm', theme.shadowSm);
style.setProperty('--bim-shadow-md', theme.shadowMd);
style.setProperty('--bim-shadow-lg', theme.shadowLg);
style.setProperty('--bim-shadow-glow', theme.shadowGlow);
const gp = theme.overrides?.glassPill;
if (gp) {
if (gp.sectionBg) style.setProperty('--bim-glass-pill-section-bg', gp.sectionBg);
if (gp.sectionBorder) style.setProperty('--bim-glass-pill-section-border', gp.sectionBorder);
if (gp.sectionShadow) style.setProperty('--bim-glass-pill-section-shadow', gp.sectionShadow);
if (gp.btnBg) style.setProperty('--bim-glass-pill-btn-bg', gp.btnBg);
if (gp.btnBorder) style.setProperty('--bim-glass-pill-btn-border', gp.btnBorder);
if (gp.btnShadow) style.setProperty('--bim-glass-pill-btn-shadow', gp.btnShadow);
if (gp.btnBgHover) style.setProperty('--bim-glass-pill-btn-bg-hover', gp.btnBgHover);
if (gp.btnShadowHover) style.setProperty('--bim-glass-pill-btn-shadow-hover', gp.btnShadowHover);
if (gp.iconColor) style.setProperty('--bim-glass-pill-icon-color', gp.iconColor);
if (gp.iconColorHover) style.setProperty('--bim-glass-pill-icon-color-hover', gp.iconColorHover);
}
this.syncDropdownCssVars(theme);
}
/**
* 同步 CSS 变量到所有 dropdown 元素
* dropdown 被添加到 body，无法继承容器的 CSS 变量
*/
private syncDropdownCssVars(theme: ThemeConfig): void {
const dropdowns = document.querySelectorAll('.opt-btn-dropdown');
dropdowns.forEach(dropdown => {
const style = (dropdown as HTMLElement).style;
style.setProperty('--bim-primary', theme.primary);
style.setProperty('--bim-bg-overlay', theme.bgOverlay);
style.setProperty('--bim-bg-glass-blur', theme.bgGlassBlur);
style.setProperty('--bim-border-subtle', theme.borderSubtle);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-inverse', theme.textInverse);
style.setProperty('--bim-icon-default', theme.iconDefault);
style.setProperty('--bim-icon-inverse', theme.iconInverse);
style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
style.setProperty('--bim-component-bg-active', theme.componentBgActive);
style.setProperty('--bim-shadow-lg', theme.shadowLg);
});
}
/**
@@ -395,12 +480,13 @@ export class BimButtonGroup implements IBimComponent {
textWrapper.appendChild(label);
}
if (button.children && button.children.length > 0) {
const arrow = document.createElement('span');
arrow.className = 'opt-btn-arrow';
arrow.textContent = '▼';
textWrapper.appendChild(arrow);
}
// TODO: 暂时隐藏下拉箭头
// if (button.children && button.children.length > 0) {
// const arrow = document.createElement('span');
// arrow.className = 'opt-btn-arrow';
// arrow.textContent = '▼';
// textWrapper.appendChild(arrow);
// }
// 只有当有内容时才添加 wrapper
if (textWrapper.hasChildNodes()) {
@@ -543,6 +629,13 @@ export class BimButtonGroup implements IBimComponent {
dropdown.style.flexDirection = 'row'; // 纵向按钮组，菜单横向排列
}
if (this.options.type && this.options.type !== 'default') {
dropdown.classList.add(`type-${this.options.type}`);
}
const currentTheme = themeManager.getTheme();
dropdown.classList.add(`theme-${currentTheme.name}`);
// 先添加到 DOM 以便计算尺寸
document.body.appendChild(dropdown);

6
src/components/button-group/index.type.ts
View File

@@ -1,5 +1,8 @@
export type ButtonType = 'button' | 'menu';
/** 按钮组样式类型 */
export type ButtonGroupType = 'default' | 'glass-pill';
/** 按钮配置 */
export interface ButtonConfig {
id: string;
@@ -76,6 +79,9 @@ export type ExpandDirection = 'up' | 'down' | 'left' | 'right';
export interface ButtonGroupOptions extends ButtonGroupColors {
container: HTMLElement | string;
/** 样式类型 (默认 'default') */
type?: ButtonGroupType;
/** 屏幕位置 (如 top-left) */
position?: GroupPosition;

15
src/components/collapse/index.ts
View File

@@ -213,16 +213,13 @@ export class BimCollapse implements IBimComponent {
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
style.setProperty('--bim-bg-color', theme.panelBackground);
style.setProperty('--bim-border-color', theme.border);
style.setProperty('--bim-bg-color', theme.bgElevated);
style.setProperty('--bim-border-color', theme.borderDefault);
style.setProperty('--bim-text-color', theme.textPrimary);
// 头部默认背景色使用 componentBackground
style.setProperty('--bim-header-bg-color', theme.componentHover);
style.setProperty('--bim-header-hover-bg-color', theme.componentHover);
style.setProperty('--bim-content-bg-color', theme.panelBackground);
style.setProperty('--bim-disabled-color', theme.textSecondary);
style.setProperty('--bim-header-bg-color', theme.componentBgHover);
style.setProperty('--bim-header-hover-bg-color', theme.componentBgActive);
style.setProperty('--bim-content-bg-color', theme.bgElevated);
style.setProperty('--bim-disabled-color', theme.textDisabled);
}
public setLocales(): void {

2
src/components/description/index.ts
View File

@@ -143,7 +143,7 @@ export class BimDescription implements IBimComponent {
style.setProperty('--bim-text-color', theme.textPrimary);
style.setProperty('--bim-label-color', theme.textSecondary);
style.setProperty('--bim-value-color', theme.textPrimary);
style.setProperty('--bim-border-color', theme.border);
style.setProperty('--bim-border-color', theme.borderDefault);
}
public setLocales(): void {

37
src/components/dialog/index.css
View File

@@ -1,37 +1,29 @@
:root {
--bim-dialog-bg: rgba(17, 17, 17, 0.95);
--bim-dialog-header-bg: #2a2a2a;
--bim-dialog-title-color: #fff;
--bim-dialog-text-color: #ccc;
--bim-dialog-border-color: #444;
}
.bim-dialog {
position: absolute;
background-color: var(--bim-dialog-bg);
border: 1px solid var(--bim-dialog-border-color);
background-color: var(--bim-dialog-bg, var(--bim-bg-elevated));
border: 1px solid var(--bim-dialog-border-color, var(--bim-border-default));
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
box-shadow: var(--bim-shadow-lg);
display: flex;
flex-direction: column;
z-index: 10001; /* 提高 z-index，确保在第三方 SDK (10000) 之上 */
color: var(--bim-dialog-title-color);
z-index: 10001;
color: var(--bim-dialog-title-color, var(--bim-text-primary));
overflow: hidden;
min-width: 200px;
min-height: 100px;
pointer-events: auto; /* 确保弹窗可以接收事件 */
pointer-events: auto;
}
.bim-dialog-header {
height: 32px;
background-color: var(--bim-dialog-header-bg);
background-color: var(--bim-dialog-header-bg, var(--bim-bg-inset));
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
cursor: default;
user-select: none;
border-bottom: 1px solid var(--bim-dialog-border-color);
border-bottom: 1px solid var(--bim-dialog-border-color, var(--bim-border-default));
flex-shrink: 0;
}
@@ -51,20 +43,20 @@
.bim-dialog-close {
cursor: pointer;
font-size: 18px;
color: #999;
color: var(--bim-text-tertiary);
line-height: 1;
margin-left: 8px;
}
.bim-dialog-close:hover {
color: #fff;
color: var(--bim-text-primary);
}
.bim-dialog-content {
flex: 1;
overflow: auto;
font-size: 14px;
color: var(--bim-dialog-text-color);
color: var(--bim-dialog-text-color, var(--bim-text-secondary));
}
/* 缩放句柄 */
@@ -78,7 +70,6 @@
z-index: 10;
}
/* 右下角装饰，类似斜线 */
.bim-dialog-resize-handle::after {
content: '';
position: absolute;
@@ -86,10 +77,10 @@
right: 3px;
width: 6px;
height: 6px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-right: 2px solid var(--bim-text-tertiary);
border-bottom: 2px solid var(--bim-text-tertiary);
}
.bim-dialog-resize-handle:hover::after {
border-color: #fff;
border-color: var(--bim-text-primary);
}

16
src/components/dialog/index.ts
View File

@@ -57,11 +57,19 @@ export class BimDialog implements IBimComponent {
*/
public setTheme(theme: ThemeConfig) {
const style = this.element.style;
if (!this.options.backgroundColor) style.setProperty('--bim-dialog-bg', theme.panelBackground);
if (!this.options.headerBackgroundColor) style.setProperty('--bim-dialog-header-bg', theme.componentHover);
if (!this.options.backgroundColor) style.setProperty('--bim-dialog-bg', theme.bgElevated);
if (!this.options.headerBackgroundColor) style.setProperty('--bim-dialog-header-bg', theme.bgInset);
if (!this.options.titleColor) style.setProperty('--bim-dialog-title-color', theme.textPrimary);
if (!this.options.textColor) style.setProperty('--bim-dialog-text-color', theme.textPrimary);
if (!this.options.borderColor) style.setProperty('--bim-dialog-border-color', theme.border);
if (!this.options.textColor) style.setProperty('--bim-dialog-text-color', theme.textSecondary);
if (!this.options.borderColor) style.setProperty('--bim-dialog-border-color', theme.borderDefault);
style.setProperty('--bim-bg-elevated', theme.bgElevated);
style.setProperty('--bim-bg-inset', theme.bgInset);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-secondary', theme.textSecondary);
style.setProperty('--bim-text-tertiary', theme.textTertiary);
style.setProperty('--bim-border-default', theme.borderDefault);
style.setProperty('--bim-shadow-lg', theme.shadowLg);
}
/**

2
src/components/engine/index.ts
View File

@@ -58,7 +58,7 @@ export class Engine implements IBimComponent {
// 保存配置选项（设置默认值）
this.options = {
backgroundColor: options.backgroundColor ?? 'linear-gradient(to bottom, rgb(214, 224, 235), rgb(246, 250, 255))', // 固定背景渐变色
backgroundColor: 'linear-gradient(to bottom, rgb(214, 224, 235), rgb(246, 250, 255))', // 固定背景渐变色
version: options.version ?? 'v1', // 默认使用 v1 版本
showStats: options.showStats ?? false, // 默认不显示统计
showViewCube: options.showViewCube ?? true, // 默认显示视图立方体

12
src/components/measure-panel/index.ts
View File

@@ -150,9 +150,9 @@ export class MeasurePanel implements IBimComponent {
const style = this.element.style;
// 这些变量不会强制覆盖外部（Dialog）已有变量，只做兜底
style.setProperty('--bim-measure-border', theme.border ?? 'rgba(255, 255, 255, 0.12)');
style.setProperty('--bim-measure-divider', theme.border ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-measure-icon-color', theme.icon ?? '#ddd');
style.setProperty('--bim-measure-border', theme.borderDefault ?? 'rgba(255, 255, 255, 0.12)');
style.setProperty('--bim-measure-divider', theme.borderDefault ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-measure-icon-color', theme.iconDefault ?? '#ddd');
style.setProperty('--bim-measure-label-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.70)');
style.setProperty('--bim-measure-value-color', theme.textPrimary ?? 'rgba(255, 255, 255, 0.90)');
@@ -161,9 +161,9 @@ export class MeasurePanel implements IBimComponent {
// 设置面板“保存设置”按钮用主题色
style.setProperty('--bim-measure-primary', theme.primary ?? '#0078d4');
style.setProperty('--bim-measure-primary-hover', theme.primaryHover ?? '#0063b1');
style.setProperty('--bim-measure-btn-bg', theme.componentBackground ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-measure-btn-hover-bg', theme.componentHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-measure-btn-active-bg', theme.componentActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-measure-btn-bg', theme.componentBg ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-measure-btn-hover-bg', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-measure-btn-active-bg', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.14)');
}
/**

16
src/components/menu/index.css
View File

@@ -1,16 +1,16 @@
.bim-menu {
display: flex;
flex-direction: column;
background: var(--bim-ui_bg_color, #2b2d30);
background: var(--bim-bg-elevated);
border-radius: 4px;
padding: 4px 0;
margin: 0; /* 移除默认外边距 */
list-style: none; /* 移除列表小圆点 */
margin: 0;
list-style: none;
min-width: 160px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
box-shadow: var(--bim-shadow-lg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
user-select: none;
color: var(--bim-ui_text_primary, #ffffff);
color: var(--bim-text-primary);
}
.bim-menu-group {
@@ -20,7 +20,7 @@
.bim-menu-divider {
height: 1px;
background-color: var(--bim-ui_border_color, #3e4145);
background-color: var(--bim-divider);
margin: 4px 0;
}
@@ -32,11 +32,11 @@
transition: background-color 0.2s;
font-size: 13px;
position: relative;
color: var(--bim-ui_text_primary, #ffffff);
color: var(--bim-text-primary);
}
.bim-menu-item:hover {
background-color: var(--bim-ui_bg_hover, #3e4145);
background-color: var(--bim-component-bg-hover);
}
.bim-menu-item.disabled {

9
src/components/menu/index.ts
View File

@@ -49,10 +49,11 @@ export class BimMenu implements IBimComponent {
*/
public setTheme(theme: ThemeConfig) {
const style = this.element.style;
style.setProperty('--bim-ui_bg_color', theme.panelBackground);
style.setProperty('--bim-ui_text_primary', theme.textPrimary);
style.setProperty('--bim-ui_border_color', theme.border);
style.setProperty('--bim-ui_bg_hover', theme.componentHover);
style.setProperty('--bim-bg-elevated', theme.bgElevated);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-divider', theme.divider);
style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
style.setProperty('--bim-shadow-lg', theme.shadowLg);
}
/**

8
src/components/section-axis-panel/index.ts
View File

@@ -69,11 +69,11 @@ export class SectionAxisPanel implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
style.setProperty('--bim-section-axis-btn-bg', theme.componentBackground ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-axis-btn-hover', theme.componentHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-axis-btn-active', theme.componentActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-section-axis-btn-bg', theme.componentBg ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-axis-btn-hover', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-axis-btn-active', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-primary-color', theme.primary ?? '#1890ff');
style.setProperty('--bim-icon-color', theme.icon ?? '#ccc');
style.setProperty('--bim-icon-color', theme.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
}

8
src/components/section-box-panel/index.ts
View File

@@ -339,11 +339,11 @@ export class SectionBoxPanel implements IBimComponent {
public setTheme(theme: ThemeConfig): void {
if (!this.element) return;
const style = this.element.style;
style.setProperty('--bim-section-box-btn-bg', theme.componentBackground ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-box-btn-hover', theme.componentHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-box-btn-active', theme.componentActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-section-box-btn-bg', theme.componentBg ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-box-btn-hover', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-box-btn-active', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-primary-color', theme.primary ?? '#1890ff');
style.setProperty('--bim-icon-color', theme.icon ?? '#ccc');
style.setProperty('--bim-icon-color', theme.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
}

8
src/components/section-plane-panel/index.ts
View File

@@ -55,11 +55,11 @@ export class SectionPlanePanel implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
style.setProperty('--bim-section-btn-bg', theme.componentBackground ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-btn-hover', theme.componentHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-btn-active', theme.componentActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-section-btn-bg', theme.componentBg ?? 'rgba(255, 255, 255, 0.06)');
style.setProperty('--bim-section-btn-hover', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.10)');
style.setProperty('--bim-section-btn-active', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.14)');
style.setProperty('--bim-primary-color', theme.primary ?? '#1890ff');
style.setProperty('--bim-icon-color', theme.icon ?? '#ccc');
style.setProperty('--bim-icon-color', theme.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
}

12
src/components/tab/index.ts
View File

@@ -189,15 +189,15 @@ export class BimTab implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
style.setProperty('--bim-tab-bg', theme.panelBackground);
style.setProperty('--bim-tab-nav-bg', theme.panelBackground);
style.setProperty('--bim-tab-bg', theme.bgElevated);
style.setProperty('--bim-tab-nav-bg', theme.bgElevated);
style.setProperty('--bim-tab-text', theme.textPrimary);
style.setProperty('--bim-tab-text-secondary', theme.textSecondary);
style.setProperty('--bim-tab-text-active', theme.primary);
style.setProperty('--bim-tab-border', theme.border);
style.setProperty('--bim-tab-hover-bg', theme.componentHover);
style.setProperty('--bim-tab-active-bg', theme.componentActive);
style.setProperty('--bim-tab-icon', theme.icon);
style.setProperty('--bim-tab-border', theme.borderDefault);
style.setProperty('--bim-tab-hover-bg', theme.componentBgHover);
style.setProperty('--bim-tab-active-bg', theme.componentBgActive);
style.setProperty('--bim-tab-icon', theme.iconDefault);
}
/**

76
src/components/tree/index.css
View File

@@ -1,15 +1,14 @@
/* 树容器 */
.bim-tree {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden; /* 内部滚动 */
overflow: hidden;
font-size: 14px;
color: var(--bim-ui_text_primary, #333);
user-select: none; /* 防止双击选中文字 */
position: relative; /* 为下拉框定位 */
background: transparent; /* 保持透明背景 */
color: var(--bim-text-primary);
user-select: none;
position: relative;
background: transparent;
}
/* 搜索区域 */
@@ -34,8 +33,8 @@
left: 8px;
width: 16px;
height: 16px;
color: var(--bim-ui_text_secondary, #999);
pointer-events: none; /* 让点击穿透到 input */
color: var(--bim-text-secondary);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
@@ -49,33 +48,30 @@
.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: 1px solid var(--bim-border-default);
border-radius: 4px;
outline: none;
font-size: 13px;
color: inherit;
/* 输入框背景半透明或白色，看设计，通常输入框本身还是需要背景的，否则文字看不清 */
background-color: var(--bim-ui_bg_color, #fff);
background-color: var(--bim-bg-elevated);
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);
border-color: var(--bim-primary);
box-shadow: var(--bim-focus-ring);
}
/* 搜索结果下拉框 */
.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);
background-color: var(--bim-bg-elevated);
border: 1px solid var(--bim-border-default);
box-shadow: var(--bim-shadow-md);
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
@@ -98,7 +94,7 @@
}
.bim-tree-search-item:hover {
background-color: var(--bim-ui_bg_hover, #f5f5f5);
background-color: var(--bim-component-bg-hover);
}
.bim-tree-search-item-title {
@@ -108,7 +104,7 @@
.bim-tree-search-item-path {
font-size: 12px;
color: var(--bim-ui_text_secondary, #999);
color: var(--bim-text-secondary);
margin-top: 2px;
display: block;
}
@@ -139,10 +135,9 @@
}
.bim-tree-node-content:hover {
background-color: var(--bim-ui_bg_hover, rgba(0, 0, 0, 0.05)); /* 由主题提供，深色模式一致 */
background-color: var(--bim-component-bg-hover);
}
/* 展开/折叠箭头 */
.bim-tree-switcher {
width: 24px;
height: 32px;
@@ -150,7 +145,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--bim-ui_text_secondary, #999);
color: var(--bim-text-secondary);
transition: transform 0.2s;
flex-shrink: 0;
}
@@ -170,14 +165,13 @@
visibility: hidden; /*叶子节点占位但不显示*/
}
/* 复选框 */
.bim-tree-checkbox {
width: 16px;
height: 16px;
border: 1px solid var(--bim-ui_border_color, #d9d9d9);
border: 1px solid var(--bim-border-default);
border-radius: 2px;
margin-right: 8px;
background-color: var(--bim-ui_bg_color, #fff);
background-color: var(--bim-bg-elevated);
position: relative;
cursor: pointer;
flex-shrink: 0;
@@ -185,13 +179,12 @@
}
.bim-tree-checkbox:hover {
border-color: var(--bim-primary_color, #1890ff);
border-color: var(--bim-primary);
}
/* 选中状态 */
.bim-tree-checkbox.is-checked {
background-color: var(--bim-primary_color, #1890ff);
border-color: var(--bim-primary_color, #1890ff);
background-color: var(--bim-primary);
border-color: var(--bim-primary);
}
.bim-tree-checkbox.is-checked::after {
@@ -201,16 +194,15 @@
left: 4px;
width: 5px;
height: 9px;
border: 2px solid #fff;
border: 2px solid var(--bim-text-inverse);
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);
background-color: var(--bim-bg-elevated);
border-color: var(--bim-primary);
}
.bim-tree-checkbox.is-indeterminate::after {
@@ -220,22 +212,21 @@
left: 3px;
width: 8px;
height: 2px;
background-color: var(--bim-primary_color, #1890ff);
background-color: var(--bim-primary);
}
/* 禁用状态 */
.bim-tree-node.is-disabled .bim-tree-checkbox {
background-color: #f5f5f5;
border-color: #d9d9d9;
background-color: var(--bim-component-bg-disabled);
border-color: var(--bim-border-disabled);
cursor: not-allowed;
}
.bim-tree-node.is-disabled .bim-tree-checkbox.is-checked {
background-color: #d9d9d9;
background-color: var(--bim-text-disabled);
}
.bim-tree-node.is-disabled .bim-tree-node-content {
color: var(--bim-ui_text_disabled, #ccc);
color: var(--bim-text-disabled);
cursor: not-allowed;
}
@@ -275,10 +266,9 @@
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);
background-color: var(--bim-component-bg-selected);
color: var(--bim-primary);
}
/* 节点操作栏 */

21
src/components/tree/index.ts
View File

@@ -235,13 +235,20 @@ export class BimTree implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
style.setProperty('--bim-ui_bg_color', theme.panelBackground);
style.setProperty('--bim-ui_text_primary', theme.textPrimary);
style.setProperty('--bim-ui_text_secondary', theme.textSecondary || '#999');
style.setProperty('--bim-ui_border_color', theme.border);
style.setProperty('--bim-ui_bg_hover', theme.componentHover);
style.setProperty('--bim-primary_color', theme.primary);
// style.setProperty('--bim-ui_text_disabled', theme.textDisabled); // 如果 ThemeConfig 有这个字段
style.setProperty('--bim-primary', theme.primary);
style.setProperty('--bim-bg-elevated', theme.bgElevated);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-secondary', theme.textSecondary);
style.setProperty('--bim-text-tertiary', theme.textTertiary);
style.setProperty('--bim-text-disabled', theme.textDisabled);
style.setProperty('--bim-text-inverse', theme.textInverse);
style.setProperty('--bim-border-default', theme.borderDefault);
style.setProperty('--bim-border-disabled', theme.borderDisabled);
style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
style.setProperty('--bim-component-bg-selected', theme.componentBgSelected);
style.setProperty('--bim-component-bg-disabled', theme.componentBgDisabled);
style.setProperty('--bim-shadow-md', theme.shadowMd);
style.setProperty('--bim-focus-ring', theme.focusRing);
}
/**

22
src/components/walk-control-panel/index.ts
View File

@@ -434,20 +434,20 @@ export class WalkControlPanel implements IBimComponent {
public setTheme(theme: ThemeConfig): void {
if (!this.element) return;
const style = this.element.style;
style.setProperty('--bim-walk-control-bg', theme.panelBackground ?? 'rgba(0, 0, 0, 0.8)');
style.setProperty('--bim-walk-btn-hover', theme.componentHover ?? 'rgba(255, 255, 255, 0.15)');
style.setProperty('--bim-walk-btn-active', theme.componentActive ?? 'rgba(255, 255, 255, 0.3)');
style.setProperty('--bim-walk-control-bg', theme.bgElevated ?? 'rgba(0, 0, 0, 0.8)');
style.setProperty('--bim-walk-btn-hover', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.15)');
style.setProperty('--bim-walk-btn-active', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.3)');
style.setProperty('--bim-primary-color', theme.primary ?? '#1890ff');
style.setProperty('--bim-primary-hover', theme.primaryHover ?? '#40a9ff');
style.setProperty('--bim-icon-color', theme.icon ?? '#ccc');
style.setProperty('--bim-icon-color', theme.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textPrimary ?? '#fff');
style.setProperty('--bim-divider-color', theme.border ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-speed-group-bg', theme.componentHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-speed-btn-bg', theme.componentHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-speed-btn-hover', theme.componentActive ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-select-bg', theme.componentHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-select-border', theme.border ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-select-option-bg', theme.panelBackground ?? '#333');
style.setProperty('--bim-divider-color', theme.borderDefault ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-speed-group-bg', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-speed-btn-bg', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-speed-btn-hover', theme.componentBgActive ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-select-bg', theme.componentBgHover ?? 'rgba(255, 255, 255, 0.1)');
style.setProperty('--bim-select-border', theme.borderDefault ?? 'rgba(255, 255, 255, 0.2)');
style.setProperty('--bim-select-option-bg', theme.bgElevated ?? '#333');
}
public destroy(): void {