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

refactor: 重命名SDK为iflow-engine，使用npm包引入第三方引擎

Browse Source 
- 将包名从 @fishdingding/bim-engine-sdk 改为 iflow-engine
- 将构建输出文件从 bim-engine-sdk.*.js 改为 iflow-engine.*.js
- 将全局变量从 LyzBimEngineSDK 改为 IflowEngine
- 将第三方引擎SDK从本地引入改为npm包引入 (iflow-engine-base)
- 移除本地 src/engine_base 目录，移至回收站
- 更新所有文档和demo中的引用
This commit is contained in:
yuding
2026-01-22 11:29:51 +08:00
parent 70523e54e5
commit f2460fb981
103 changed files with 32120 additions and 31434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/collapse/index.css
View File

@@ -1,10 +1,9 @@
/* Root Container */
.bim-collapse {
background-color: var(--bim-bg-color, #ffffff);
border: 1px solid var(--bim-border-color, #d9d9d9);
border-radius: 4px;
background-color: var(--bim-bg-elevated);
border: 1px solid var(--bim-border-default);
border-radius: 8px;
font-size: 14px;
color: var(--bim-text-color, rgba(0, 0, 0, 0.88));
color: var(--bim-text-primary);
}
.bim-collapse.is-ghost {
@@ -27,9 +26,8 @@
border-top: none;
}
/* Item */
.bim-collapse-item {
border-bottom: 1px solid var(--bim-border-color, #d9d9d9);
border-bottom: 1px solid var(--bim-border-subtle);
}
.bim-collapse-item:last-child {
@@ -37,23 +35,22 @@
}
.bim-collapse-item.is-disabled .bim-collapse-header {
color: var(--bim-disabled-color, rgba(0, 0, 0, 0.25));
color: var(--bim-text-disabled);
cursor: not-allowed;
}
/* Header */
.bim-collapse-header {
display: flex;
align-items: center;
padding: 12px 16px;
background-color: var(--bim-header-bg-color, rgba(0, 0, 0, 0.02));
background-color: var(--bim-component-bg);
cursor: pointer;
transition: all 0.3s;
transition: all 0.2s ease;
position: relative;
}
.bim-collapse-header:hover {
background-color: var(--bim-header-hover-bg-color, rgba(0, 0, 0, 0.05));
background-color: var(--bim-component-bg-hover);
}
/* Arrow Icon */
@@ -104,11 +101,10 @@
margin-left: auto;
}
/* Content */
.bim-collapse-content {
overflow: hidden;
background-color: var(--bim-content-bg-color, #ffffff);
border-top: 1px solid var(--bim-border-color, #d9d9d9);
background-color: var(--bim-bg-elevated);
border-top: 1px solid var(--bim-border-subtle);
transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

43
src/components/description/index.css
View File

@@ -2,10 +2,8 @@
display: flex;
flex-direction: column;
width: 100%;
/* 默认字体大小和颜色 */
font-size: var(--bim-desc-font-size, 14px);
color: var(--bim-text-color, #333);
/* 严格移除容器本身的 padding */
font-size: 14px;
color: var(--bim-text-primary);
padding: 0;
}
@@ -23,31 +21,26 @@
}
.bim-description.is-bordered .bim-description-item {
border-bottom: 1px solid var(--bim-border-color, #eee);
border-bottom: 1px solid var(--bim-border-subtle);
}
/* 标签样式 */
.bim-description-label {
color: var(--bim-desc-label-color, var(--bim-label-color, #666));
color: var(--bim-text-secondary);
flex-shrink: 0;
/* 默认 padding: 0 4px */
padding: var(--bim-desc-label-padding, 4px 4px);
display: flex;
align-items: center; /* 垂直居中 */
}
/* 边框模式下的标签样式 */
.bim-description.is-bordered .bim-description-label {
border-right: 1px solid var(--bim-border-color, #eee);
}
/* 内容样式 */
.bim-description-value {
color: var(--bim-desc-value-color, var(--bim-value-color, #333));
flex: 1;
word-break: break-all;
/* 默认 padding: 0 4px */
padding: var(--bim-desc-value-padding, 4px 4px);
padding: 4px;
display: flex;
align-items: center;
}
.bim-description.is-bordered .bim-description-label {
border-right: 1px solid var(--bim-border-subtle);
}
.bim-description-value {
color: var(--bim-text-primary);
flex: 1;
word-break: break-all;
padding: 4px;
display: flex;
align-items: center;
}

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

@@ -1,8 +1,8 @@
.bim-dialog {
position: absolute;
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;
background-color: var(--bim-bg-elevated);
border: 1px solid var(--bim-border-default);
border-radius: var(--bim-panel-radius, 12px);
box-shadow: var(--bim-shadow-lg);
display: flex;
flex-direction: column;
@@ -15,15 +15,15 @@
}
.bim-dialog-header {
height: 32px;
background-color: var(--bim-dialog-header-bg, var(--bim-bg-inset));
height: 40px;
background-color: var(--bim-bg-inset);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
padding: 0 12px;
cursor: default;
user-select: none;
border-bottom: 1px solid var(--bim-dialog-border-color, var(--bim-border-default));
border-bottom: 1px solid var(--bim-border-default);
flex-shrink: 0;
}

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

@@ -3,8 +3,8 @@ import { IBimComponent } from '../../types/component';
import { themeManager } from '../../services/theme';
import type { EngineOptions, ModelLoadOptions } from './types';
import type { MeasureMode } from '../../types/measure';
// 导入第三方 SDK 的 createEngine 函数
import { createEngine as createEngineSDK } from '../../engine_base/bim-engine-sdk.es.js';
// 导入第三方 SDK 的 createEngine 函数（从 npm 包引入）
import { createEngine as createEngineSDK } from 'iflow-engine-base';
// 重新导出类型，方便外部引用
export type { EngineOptions, ModelLoadOptions };

101
src/components/measure-panel/index.css
View File

@@ -11,15 +11,13 @@
display: flex;
flex-direction: column;
box-sizing: border-box;
/* 面板内部颜色尽量复用 Dialog 的变量，保证整体一致 */
color: var(--bim-dialog-text-color, #ccc);
color: var(--bim-text-secondary);
}
.bim-measure-settings {
display: none;
box-sizing: border-box;
color: var(--bim-dialog-text-color, #ccc);
color: var(--bim-text-secondary);
}
.bim-measure-settings-title {
@@ -37,7 +35,7 @@
}
.bim-measure-settings-row .label {
color: var(--bim-measure-label-color, rgba(255, 255, 255, 0.70));
color: var(--bim-text-secondary);
font-size: 13px;
flex: 0 0 auto;
}
@@ -46,10 +44,10 @@
flex: 0 0 auto;
width: 120px;
height: 28px;
border-radius: 4px;
border: 1px solid var(--bim-measure-border, rgba(255, 255, 255, 0.12));
background: rgba(0, 0, 0, 0.12);
color: var(--bim-dialog-text-color, #ccc);
border-radius: 6px;
border: 1px solid var(--bim-border-default);
background: var(--bim-bg-inset);
color: var(--bim-text-primary);
padding: 0 8px;
box-sizing: border-box;
outline: none;
@@ -58,7 +56,7 @@
.bim-measure-settings-hint {
font-size: 12px;
line-height: 1.4;
color: var(--bim-measure-label-color, rgba(255, 255, 255, 0.70));
color: var(--bim-text-tertiary);
margin-top: -4px;
margin-bottom: 8px;
}
@@ -85,14 +83,14 @@
.bim-measure-settings-save {
border: none;
background: var(--bim-measure-primary, #0078d4);
color: #fff;
background: var(--bim-primary);
color: var(--bim-text-inverse);
}
.bim-measure-settings-cancel {
border: 1px solid var(--bim-measure-border, rgba(255, 255, 255, 0.12));
border: 1px solid var(--bim-border-default);
background: transparent;
color: var(--bim-dialog-text-color, #ccc);
color: var(--bim-text-secondary);
}
.bim-measure-settings-save:hover,
@@ -105,9 +103,8 @@
outline: none;
}
/* 保存按钮 hover 用主题 hover 色（轻微反馈，不改变布局） */
.bim-measure-settings-save:hover {
background: var(--bim-measure-primary-hover, #0063b1);
background: var(--bim-primary-hover);
}
/* 顶部：测量方式按钮区 */
@@ -127,24 +124,29 @@
width: 100%;
height: 42px;
border-radius: 6px;
border: 1px solid var(--bim-measure-border, rgba(255, 255, 255, 0.12));
background: var(--bim-measure-btn-bg, rgba(255, 255, 255, 0.06));
border: 1px solid var(--bim-border-default);
background: var(--bim-bg-inset);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, border-color 0.15s ease;
transition: all 0.2s ease;
padding: 0;
box-sizing: border-box;
}
.bim-measure-tool-btn:hover {
background: var(--bim-measure-btn-hover-bg, rgba(255, 255, 255, 0.10));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.bim-measure-tool-btn.is-active {
border-color: var(--bim-measure-active-border, rgba(255, 255, 255, 0.30));
background: var(--bim-measure-btn-active-bg, rgba(255, 255, 255, 0.14));
border-color: var(--bim-primary);
background: var(--bim-primary-subtle);
}
.bim-measure-tool-btn.is-active .bim-measure-tool-icon {
color: var(--bim-primary);
}
.bim-measure-tool-icon {
@@ -153,7 +155,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bim-measure-icon-color, #ddd);
color: var(--bim-icon-default);
}
.bim-measure-tool-icon svg {
@@ -170,16 +172,15 @@
}
.bim-measure-toggle-btn {
/* 你要求：更小，并带文字提示 */
height: 22px;
border-radius: 4px;
border: 1px solid var(--bim-measure-border, rgba(255, 255, 255, 0.12));
background: var(--bim-measure-btn-bg, rgba(255, 255, 255, 0.06));
border: 1px solid var(--bim-border-default);
background: var(--bim-bg-inset);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
transition: all 0.2s ease;
padding: 0 6px;
gap: 4px;
font-size: 12px;
@@ -187,18 +188,19 @@
}
.bim-measure-toggle-btn:hover {
background: var(--bim-measure-btn-hover-bg, rgba(255, 255, 255, 0.10));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.bim-measure-toggle-text {
color: var(--bim-measure-label-color, rgba(255, 255, 255, 0.70));
color: var(--bim-text-secondary);
}
.bim-measure-toggle-icon svg {
width: 14px;
height: 14px;
fill: currentColor;
color: var(--bim-measure-icon-color, #ddd);
color: var(--bim-icon-default);
transition: transform 0.15s ease;
}
@@ -206,11 +208,10 @@
transform: rotate(180deg);
}
/* 中部：结果展示区 */
.bim-measure-result {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--bim-measure-divider, rgba(255, 255, 255, 0.10));
border-top: 1px solid var(--bim-divider);
display: flex;
flex-direction: column;
gap: 10px;
@@ -225,12 +226,12 @@
}
.bim-measure-row .label {
color: var(--bim-measure-label-color, rgba(255, 255, 255, 0.70));
color: var(--bim-text-secondary);
min-width: 84px;
}
.bim-measure-row .value {
color: var(--bim-measure-value-color, rgba(255, 255, 255, 0.90));
color: var(--bim-text-primary);
flex: 1;
word-break: break-word;
}
@@ -241,12 +242,11 @@
}
.bim-measure-main-number.is-laser-text {
/* 激光测距：不使用黄色，回到默认文字颜色 */
color: var(--bim-measure-value-color, rgba(255, 255, 255, 0.90));
color: var(--bim-text-primary);
}
.bim-measure-main-unit {
color: var(--bim-measure-value-color, rgba(255, 255, 255, 0.90));
color: var(--bim-text-primary);
}
.bim-measure-xyz {
@@ -272,18 +272,37 @@
color: #1677ff !important;
}
/* 底部：操作区（删除全部 / 设置） */
.bim-measure-footer {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--bim-measure-divider, rgba(255, 255, 255, 0.10));
border-top: 1px solid var(--bim-divider);
display: flex;
align-items: center;
/* 你要求：底部不要“占满”交互区域，按钮按自身尺寸布局 */
justify-content: flex-start;
gap: 10px;
}
.bim-measure-clear-btn {
background: transparent;
border: none;
color: var(--bim-danger);
cursor: pointer;
padding: 0;
font-size: 13px;
flex: 0 0 auto !important;
width: auto;
min-width: 0;
}
.bim-measure-clear-btn:hover,
.bim-measure-clear-btn:active,
.bim-measure-clear-btn:focus {
background: transparent;
border: none;
outline: none;
text-decoration: none;
}
.bim-measure-clear-btn {
background: transparent;
border: none;
@@ -339,7 +358,7 @@
width: 18px;
height: 18px;
fill: currentColor;
color: var(--bim-measure-icon-color, #ddd);
color: var(--bim-icon-default);
}

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

@@ -146,24 +146,27 @@ export class MeasurePanel implements IBimComponent {
* @param theme 主题配置
*/
public setTheme(theme: ThemeConfig): void {
// 为了可读性：这里显式写出映射，不做过度抽象
const style = this.element.style;
// 这些变量不会强制覆盖外部（Dialog）已有变量，只做兜底
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)');
// “删除全部”颜色：截图中偏绿色，这里用 primary 做一个合理映射
style.setProperty('--bim-measure-danger', theme.primary ?? '#46d369');
// 设置面板“保存设置”按钮用主题色
style.setProperty('--bim-measure-primary', theme.primary ?? '#0078d4');
style.setProperty('--bim-measure-primary-hover', theme.primaryHover ?? '#0063b1');
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)');
style.setProperty('--bim-bg-inset', theme.bgInset ?? '#152232');
style.setProperty('--bim-bg-elevated', theme.bgElevated ?? '#1f2d3e');
style.setProperty('--bim-border-default', theme.borderDefault ?? '#334155');
style.setProperty('--bim-border-strong', theme.borderStrong ?? '#475569');
style.setProperty('--bim-divider', theme.divider ?? '#334155');
style.setProperty('--bim-primary', theme.primary ?? '#3b82f6');
style.setProperty('--bim-primary-hover', theme.primaryHover ?? '#60a5fa');
style.setProperty('--bim-primary-subtle', theme.primarySubtle ?? 'rgba(59, 130, 246, 0.15)');
style.setProperty('--bim-danger', theme.danger ?? '#ef4444');
style.setProperty('--bim-text-primary', theme.textPrimary ?? '#ffffff');
style.setProperty('--bim-text-secondary', theme.textSecondary ?? '#94a3b8');
style.setProperty('--bim-text-tertiary', theme.textTertiary ?? '#64748b');
style.setProperty('--bim-text-inverse', theme.textInverse ?? '#152232');
style.setProperty('--bim-icon-default', theme.iconDefault ?? '#ffffff');
style.setProperty('--bim-component-bg-hover', theme.componentBgHover ?? 'rgba(248, 250, 252, 0.06)');
}
/**

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

@@ -2,8 +2,9 @@
display: flex;
flex-direction: column;
background: var(--bim-bg-elevated);
border-radius: 4px;
padding: 4px 0;
border: 1px solid var(--bim-border-default);
border-radius: 8px;
padding: 6px;
margin: 0;
list-style: none;
min-width: 160px;
@@ -27,16 +28,18 @@
.bim-menu-item {
display: flex;
align-items: center;
padding: 6px 12px;
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
transition: all 0.2s ease;
font-size: 13px;
position: relative;
color: var(--bim-text-primary);
border-radius: 6px;
}
.bim-menu-item:hover {
background-color: var(--bim-component-bg-hover);
background-color: var(--bim-floating-btn-bg);
transform: translateX(2px);
}
.bim-menu-item.disabled {

31
src/components/section-axis-panel/index.css
View File

@@ -10,12 +10,11 @@
box-sizing: border-box;
}
/* 第一行：隐藏、反向 */
.section-axis-row-1 {
display: flex;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--bim-divider);
}
/* 第二行：X、Y、Z */
@@ -25,7 +24,6 @@
padding-top: 8px;
}
/* 按钮基础样式 */
.section-axis-btn {
flex: 1;
display: flex;
@@ -34,35 +32,38 @@
justify-content: center;
gap: 4px;
padding: 8px;
background: var(--bim-section-axis-btn-bg, rgba(255, 255, 255, 0.06));
border: 1px solid transparent;
border-radius: 4px;
background: var(--bim-bg-inset);
border: 1px solid var(--bim-border-default);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
transition: all 0.2s ease;
outline: none;
color: var(--bim-text-color, rgba(255, 255, 255, 0.90));
color: var(--bim-text-primary);
min-height: 48px;
}
.section-axis-btn:hover {
background: var(--bim-section-axis-btn-hover, rgba(255, 255, 255, 0.10));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
/* 激活状态 */
.section-axis-btn.active {
background: var(--bim-section-axis-btn-active, rgba(255, 255, 255, 0.14));
border-color: var(--bim-text-active-color, #fff);
color: var(--bim-text-active-color, #fff);
background: var(--bim-primary-subtle);
border-color: var(--bim-primary);
color: var(--bim-primary);
}
.section-axis-btn.active .section-axis-btn-icon {
color: var(--bim-primary);
}
/* 图标样式 */
.section-axis-btn-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bim-icon-color, #ccc);
color: var(--bim-icon-default);
}
.section-axis-btn-icon svg {

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

@@ -69,13 +69,15 @@ export class SectionAxisPanel implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
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.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
style.setProperty('--bim-bg-inset', theme.bgInset ?? '#152232');
style.setProperty('--bim-border-default', theme.borderDefault ?? '#334155');
style.setProperty('--bim-border-strong', theme.borderStrong ?? '#475569');
style.setProperty('--bim-divider', theme.divider ?? '#334155');
style.setProperty('--bim-primary', theme.primary ?? '#3b82f6');
style.setProperty('--bim-primary-subtle', theme.primarySubtle ?? 'rgba(59, 130, 246, 0.15)');
style.setProperty('--bim-icon-default', theme.iconDefault ?? '#ffffff');
style.setProperty('--bim-text-primary', theme.textPrimary ?? '#ffffff');
style.setProperty('--bim-component-bg-hover', theme.componentBgHover ?? 'rgba(248, 250, 252, 0.06)');
}
/**

44
src/components/section-box-panel/index.css
View File

@@ -10,7 +10,7 @@
display: flex;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--bim-divider);
}
.section-box-btn {
@@ -21,29 +21,34 @@
justify-content: center;
gap: 4px;
padding: 6px;
background: var(--bim-section-box-btn-bg);
border: 1px solid transparent;
border-radius: 4px;
background: var(--bim-bg-inset);
border: 1px solid var(--bim-border-default);
border-radius: 8px;
cursor: pointer;
color: var(--bim-text-color);
color: var(--bim-text-primary);
min-height: 44px;
transition: all 0.2s;
transition: all 0.2s ease;
}
.section-box-btn:hover {
background: var(--bim-section-box-btn-hover);
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.section-box-btn.active {
background: var(--bim-section-box-btn-active);
border-color: var(--bim-text-active-color);
color: var(--bim-text-active-color);
background: var(--bim-primary-subtle);
border-color: var(--bim-primary);
color: var(--bim-primary);
}
.section-box-btn.active .section-box-btn-icon {
color: var(--bim-primary);
}
.section-box-btn-icon {
width: 24px;
height: 24px;
color: var(--bim-icon-color);
color: var(--bim-icon-default);
}
.section-box-btn-icon svg {
@@ -81,7 +86,7 @@
.section-box-slider-label {
font-size: 13px;
font-weight: bold;
color: var(--bim-text-color);
color: var(--bim-text-primary);
min-width: 14px;
}
@@ -89,8 +94,7 @@
position: relative;
flex: 1;
height: 4px;
/* 轨道变细 */
background: rgba(255, 255, 255, 0.1);
background: var(--bim-border-default);
border-radius: 2px;
}
@@ -98,20 +102,18 @@
position: absolute;
top: 0;
height: 100%;
background: var(--bim-primary-color);
background: var(--bim-primary);
border-radius: 2px;
pointer-events: none;
/* 防止遮挡手柄点击 */
}
.section-box-slider-handle {
position: absolute;
top: 50%;
width: 14px;
/* 手柄变小 */
height: 14px;
background: #fff;
border: 2px solid var(--bim-primary-color);
background: var(--bim-bg-elevated);
border: 2px solid var(--bim-primary);
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: grab;
@@ -122,12 +124,12 @@
.section-box-slider-handle:hover {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2);
box-shadow: 0 0 0 4px var(--bim-primary-subtle);
}
.section-box-slider-handle.dragging {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.2);
background: var(--bim-primary-color);
background: var(--bim-primary);
}

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

@@ -339,13 +339,16 @@ 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.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.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
style.setProperty('--bim-bg-inset', theme.bgInset ?? '#152232');
style.setProperty('--bim-bg-elevated', theme.bgElevated ?? '#1f2d3e');
style.setProperty('--bim-border-default', theme.borderDefault ?? '#334155');
style.setProperty('--bim-border-strong', theme.borderStrong ?? '#475569');
style.setProperty('--bim-divider', theme.divider ?? '#334155');
style.setProperty('--bim-primary', theme.primary ?? '#3b82f6');
style.setProperty('--bim-primary-subtle', theme.primarySubtle ?? 'rgba(59, 130, 246, 0.15)');
style.setProperty('--bim-icon-default', theme.iconDefault ?? '#ffffff');
style.setProperty('--bim-text-primary', theme.textPrimary ?? '#ffffff');
style.setProperty('--bim-component-bg-hover', theme.componentBgHover ?? 'rgba(248, 250, 252, 0.06)');
}
public destroy(): void {

32
src/components/section-plane-panel/index.css
View File

@@ -16,25 +16,35 @@
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px;
border: 1px solid transparent;
background: var(--bim-section-btn-bg, rgba(255, 255, 255, 0.06));
border-radius: 4px;
padding: 10px;
border: 1px solid var(--bim-border-default);
background: var(--bim-bg-inset);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
transition: all 0.2s ease;
min-width: 60px;
outline: none;
color: var(--bim-text-color, rgba(255, 255, 255, 0.90));
color: var(--bim-text-primary);
}
.section-plane-btn:hover {
background: var(--bim-section-btn-hover, rgba(255, 255, 255, 0.10));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.section-plane-btn:active {
background: var(--bim-section-btn-active, rgba(255, 255, 255, 0.14));
border-color: var(--bim-text-active-color, #fff);
color: var(--bim-text-active-color, #fff);
background: var(--bim-primary-subtle);
border-color: var(--bim-primary);
}
.section-plane-btn.is-active {
background: var(--bim-primary-subtle);
border-color: var(--bim-primary);
color: var(--bim-primary);
}
.section-plane-btn.is-active .section-plane-btn-icon {
color: var(--bim-primary);
}
.section-plane-btn-icon {
@@ -43,7 +53,7 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--bim-icon-color, #ccc);
color: var(--bim-icon-default);
}
.section-plane-btn-icon svg {

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

@@ -55,13 +55,14 @@ export class SectionPlanePanel implements IBimComponent {
*/
public setTheme(theme: ThemeConfig): void {
const style = this.element.style;
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.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textSecondary ?? 'rgba(255, 255, 255, 0.90)');
style.setProperty('--bim-text-active-color', theme.textPrimary ?? '#fff');
style.setProperty('--bim-bg-inset', theme.bgInset ?? '#152232');
style.setProperty('--bim-border-default', theme.borderDefault ?? '#334155');
style.setProperty('--bim-border-strong', theme.borderStrong ?? '#475569');
style.setProperty('--bim-primary', theme.primary ?? '#3b82f6');
style.setProperty('--bim-primary-subtle', theme.primarySubtle ?? 'rgba(59, 130, 246, 0.15)');
style.setProperty('--bim-icon-default', theme.iconDefault ?? '#ffffff');
style.setProperty('--bim-text-primary', theme.textPrimary ?? '#ffffff');
style.setProperty('--bim-component-bg-hover', theme.componentBgHover ?? 'rgba(248, 250, 252, 0.06)');
}
/**

34
src/components/tab/index.css
View File

@@ -4,44 +4,46 @@
width: 100%;
height: 100%;
background: transparent;
color: var(--bim-tab-text, #e6e6e6);
color: var(--bim-text-secondary);
}
.bim-tab__nav {
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
gap: 4px;
padding: 4px;
margin: 8px 12px;
background: var(--bim-bg-inset);
border-radius: 8px;
border: 1px solid var(--bim-border-subtle);
}
.bim-tab__item {
flex:1;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
/* 恢复原样式：上下4px，左右0 */
padding: 4px 0;
padding: 8px 12px;
border: none;
border-radius: 0; /* 恢复直角 */
border-radius: 6px;
background: transparent;
color: var(--bim-tab-text, #e6e6e6);
color: var(--bim-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
border-bottom: 4px solid transparent;
font-size: 13px;
font-weight: 500;
}
.bim-tab__item:hover {
color: var(--bim-tab-text, #e6e6e6);
background-color: var(--bim-tab-hover-bg, rgba(255, 255, 255, 0.05));
border-bottom-color: var(--bim-tab-hover-bg, rgba(255, 255, 255, 0.15));
color: var(--bim-text-primary);
background-color: var(--bim-component-bg-hover);
}
/* Active 状态 */
.bim-tab__item.is-active {
color: var(--bim-tab-text-active, #4da3ff);
border-bottom-color: var(--bim-tab-text-active, #4da3ff);
color: var(--bim-primary);
background-color: var(--bim-bg-elevated);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.bim-tab__item.is-disabled {

81
src/components/walk-control-panel/index.css
View File

@@ -1,19 +1,19 @@
/* 漫游控制面板 */
.walk-control-panel {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 16px;
background: var(--bim-walk-control-bg, rgba(0, 0, 0, 0.8));
border-radius: 8px;
padding: 12px 20px;
background-color: var(--bim-bg-base, #152232);
border: 1px solid var(--bim-border-strong, #475569);
border-radius: 12px;
box-shadow: var(--bim-shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.3));
user-select: none;
}
/* 分割线 */
.walk-divider {
width: 1px;
height: 40px;
background: var(--bim-divider-color, rgba(255, 255, 255, 0.2));
background: var(--bim-divider);
flex-shrink: 0;
}
@@ -29,21 +29,28 @@
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid transparent;
border-radius: 6px;
background: var(--bim-bg-inset);
border: 1px solid var(--bim-border-default);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
color: var(--bim-icon-color, #ccc);
transition: all 0.2s ease;
color: var(--bim-icon-default);
padding: 8px;
}
.walk-icon-btn:hover {
background: var(--bim-walk-btn-hover, rgba(255, 255, 255, 0.15));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.walk-icon-btn.active {
background: var(--bim-walk-btn-active, rgba(255, 255, 255, 0.3));
background: var(--bim-primary-subtle);
border-color: var(--bim-primary);
color: var(--bim-primary);
}
.walk-icon-btn.active svg {
fill: var(--bim-primary);
}
.walk-icon-btn svg {
@@ -67,7 +74,7 @@
}
.walk-speed-label {
color: var(--bim-text-color, #fff);
color: var(--bim-text-primary);
font-size: 14px;
white-space: nowrap;
}
@@ -76,25 +83,27 @@
display: flex;
align-items: center;
gap: 8px;
background: var(--bim-speed-group-bg, rgba(255, 255, 255, 0.1));
border-radius: 4px;
background: var(--bim-bg-inset);
border: 1px solid var(--bim-border-subtle);
border-radius: 6px;
padding: 4px;
}
.walk-speed-btn {
width: 32px;
height: 32px;
background: var(--bim-speed-btn-bg, rgba(255, 255, 255, 0.1));
border: none;
background: var(--bim-bg-elevated);
border: 1px solid var(--bim-border-subtle);
border-radius: 4px;
color: var(--bim-text-color, #fff);
color: var(--bim-text-primary);
font-size: 18px;
cursor: pointer;
transition: background 0.2s;
transition: all 0.2s ease;
}
.walk-speed-btn:hover {
background: var(--bim-speed-btn-hover, rgba(255, 255, 255, 0.2));
background: var(--bim-component-bg-hover);
border-color: var(--bim-border-strong);
}
.walk-speed-btn:disabled {
@@ -105,7 +114,7 @@
.walk-speed-display {
min-width: 40px;
text-align: center;
color: var(--bim-text-color, #fff);
color: var(--bim-text-primary);
font-size: 14px;
font-weight: bold;
}
@@ -130,7 +139,7 @@
}
.walk-checkbox-label {
color: var(--bim-text-color, #fff);
color: var(--bim-text-primary);
font-size: 14px;
white-space: nowrap;
}
@@ -147,41 +156,41 @@
}
.walk-select-label {
color: var(--bim-text-color, #fff);
color: var(--bim-text-primary);
font-size: 14px;
white-space: nowrap;
}
.walk-select {
padding: 6px 12px;
background: var(--bim-select-bg, rgba(255, 255, 255, 0.1));
border: 1px solid var(--bim-select-border, rgba(255, 255, 255, 0.2));
border-radius: 4px;
color: var(--bim-text-color, #fff);
background: var(--bim-bg-inset);
border: 1px solid var(--bim-border-default);
border-radius: 6px;
color: var(--bim-text-primary);
font-size: 14px;
cursor: pointer;
min-width: 120px;
}
.walk-select option {
background: var(--bim-select-option-bg, #333);
color: var(--bim-text-color, #fff);
background: var(--bim-bg-elevated);
color: var(--bim-text-primary);
}
/* 退出按钮 */
.walk-exit-btn {
padding: 10px 24px;
background: var(--bim-primary-color, #1890ff);
background: var(--bim-primary);
border: none;
border-radius: 6px;
color: #fff;
border-radius: 8px;
color: var(--bim-text-inverse);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
transition: all 0.2s ease;
white-space: nowrap;
}
.walk-exit-btn:hover {
background: var(--bim-primary-hover, #40a9ff);
background: var(--bim-primary-hover);
transform: scale(1.02);
}

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

@@ -434,20 +434,27 @@ 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.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.iconDefault ?? '#ccc');
style.setProperty('--bim-text-color', theme.textPrimary ?? '#fff');
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');
style.setProperty('--bim-bg-base', theme.bgBase ?? '#152232');
style.setProperty('--bim-bg-elevated', theme.bgElevated ?? '#1f2d3e');
style.setProperty('--bim-bg-inset', theme.bgInset ?? '#152232');
style.setProperty('--bim-border-default', theme.borderDefault ?? '#334155');
style.setProperty('--bim-border-strong', theme.borderStrong ?? '#475569');
style.setProperty('--bim-border-subtle', theme.borderSubtle ?? '#1e293b');
style.setProperty('--bim-divider', theme.divider ?? '#334155');
style.setProperty('--bim-shadow-xl', theme.shadowXl ?? '0 20px 40px rgba(0, 0, 0, 0.3)');
style.setProperty('--bim-primary', theme.primary ?? '#3b82f6');
style.setProperty('--bim-primary-hover', theme.primaryHover ?? '#60a5fa');
style.setProperty('--bim-primary-subtle', theme.primarySubtle ?? 'rgba(59, 130, 246, 0.15)');
style.setProperty('--bim-text-primary', theme.textPrimary ?? '#ffffff');
style.setProperty('--bim-text-inverse', theme.textInverse ?? '#152232');
style.setProperty('--bim-icon-default', theme.iconDefault ?? '#ffffff');
style.setProperty('--bim-component-bg-hover', theme.componentBgHover ?? 'rgba(248, 250, 252, 0.06)');
style.setProperty('--bim-component-bg-active', theme.componentBgActive ?? 'rgba(248, 250, 252, 0.1)');
}
public destroy(): void {