refactor: 重构 Manager 架构，引入 ManagerRegistry 和 BaseManager 基类

- 新增 ManagerRegistry 单例注册表，统一管理所有 Manager 实例 - 新增 BaseManager 基类，自动管理事件订阅清理 - 新增 BaseDialogManager 基类，统一对话框生命周期管理 - 重构 15 个 Manager 使用新基类 - 重构 Toolbar 按钮和 Menu 按钮移除 engine 参数依赖 - 删除 BimComponent 基类（已不再使用） - 为所有 Manager 和核心模块添加中文 JSDoc 注释
2026-01-22 15:23:57 +08:00
parent f2460fb981
commit 31b60e84ce
47 changed files with 5580 additions and 5341 deletions
--- a/src/components/button-group/index.ts
+++ b/src/components/button-group/index.ts
@@ -10,12 +10,9 @@ import { t, localeManager } from '../../services/locale';
 import { themeManager } from '../../services/theme';
 import type { ThemeConfig } from '../../themes/types';
 import { IBimComponent } from '../../types/component';
-import type { BimEngine } from '../../bim-engine';
+import { ManagerRegistry } from '../../core/manager-registry';
 import { EngineEvents } from '../../types/events';

-/**
- * 通用按钮组组件 (BimButtonGroup)
- */
 export class BimButtonGroup implements IBimComponent {
    private container: HTMLElement;
    private options: ButtonGroupOptions;
@@ -24,12 +21,10 @@ export class BimButtonGroup implements IBimComponent {
    private btnRefs: Map<string, HTMLElement> = new Map();
    private dropdownElement: HTMLElement | null = null;
    private hoverTimeout: number | null = null;
-    private customColors: Set<keyof ButtonGroupColors> = new Set(); // 记录用户自定义的颜色属性
+    private customColors: Set<keyof ButtonGroupColors> = new Set();
    private unsubscribeLocale: (() => void) | null = null;
    private unsubscribeTheme: (() => void) | null = null;

-    protected engine: BimEngine | null = null;
-
    private readonly DEFAULT_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';

    constructor(options: ButtonGroupOptions) {
@@ -67,16 +62,9 @@ export class BimButtonGroup implements IBimComponent {
        this.applyStyles();
    }

-    public setEngine(engine: BimEngine) {
-        this.engine = engine;
-    }
-
    protected emit<K extends keyof EngineEvents>(event: K, payload: EngineEvents[K]) {
-        if (this.engine) {
-            this.engine.emit(event, payload);
-        } else {
-            console.warn('[BimButtonGroup] Engine not set, cannot emit event:', event);
-        }
+        const registry = ManagerRegistry.getInstance();
+        registry.emit(event, payload);
    }

    private initContainer(): void {
--- a/src/components/button-group/toolbar/buttons/fullscreen/index.ts
+++ b/src/components/button-group/toolbar/buttons/fullscreen/index.ts
@@ -1,11 +1,7 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';

-/**
- * 全屏按钮配置
- */
-export const createFullscreenButton = (_engine: BimEngine): ButtonConfig => {
+export const createFullscreenButton = (): ButtonConfig => {
    return {
        id: 'fullscreen',
        groupId: 'group-2',
@@ -16,14 +12,12 @@ export const createFullscreenButton = (_engine: BimEngine): ButtonConfig => {
        onClick: async () => {
            console.log('全屏按钮被点击');

-            // 0. 环境检查 (帮助调试 Iframe 问题)
            const isIframe = window.self !== window.top;
            if (isIframe) {
                console.warn('检测到在 Iframe 中运行，请确保父级 iframe 标签拥有 allow="fullscreen" 属性');
            }

            try {
-                // 1. 获取当前全屏状态 (使用 any 绕过 TS 检查)
                const doc = document as any;
                const fullscreenElement = doc.fullscreenElement ||
                    doc.webkitFullscreenElement ||
@@ -33,43 +27,32 @@ export const createFullscreenButton = (_engine: BimEngine): ButtonConfig => {
                const isFullscreen = !!fullscreenElement;
                console.log('当前是否全屏:', isFullscreen);

-                // 2. 确定要全屏的目标元素
-                // 优先查找 BIM 容器，如果找不到则使用 document.body
                const bimContainer = document.querySelector('.bim-engine-container') as HTMLElement;
                const targetElem = bimContainer || document.body;
-
-                // 将 targetElem 断言为 any，解决 "Property 'webkitRequestFullscreen' does not exist" 报错
                const el = targetElem as any;

                if (!isFullscreen) {
-                    // === 进入全屏 ===
                    console.log('准备进入全屏...');

-                    // 关键：防止全屏后背景变黑
                    if (targetElem.style.backgroundColor === '' || targetElem.style.backgroundColor === 'transparent') {
-                        targetElem.style.backgroundColor = '#ffffff'; // 根据你的主题颜色调整
+                        targetElem.style.backgroundColor = '#ffffff';
                    }

-                    // 兼容不同浏览器的 API
                    const requestMethod = el.requestFullscreen ||
                        el.webkitRequestFullscreen ||
                        el.mozRequestFullScreen ||
                        el.msRequestFullscreen;

                    if (requestMethod) {
-                        // 使用 call 绑定正确的上下文
                        await requestMethod.call(el, { navigationUI: 'hide' });
                        console.log('全屏请求已发送');
                    } else {
                        console.warn('当前浏览器不支持全屏 API');
                        alert('当前浏览器不支持全屏功能');
                    }
-
                } else {
-                    // === 退出全屏 ===
                    console.log('准备退出全屏...');

-                    // 兼容不同浏览器的退出 API
                    const exitMethod = doc.exitFullscreen ||
                        doc.webkitExitFullscreen ||
                        doc.mozCancelFullScreen ||
@@ -82,11 +65,10 @@ export const createFullscreenButton = (_engine: BimEngine): ButtonConfig => {
                }
            } catch (error: any) {
                console.error('全屏操作失败:', error);
-                // 专门提示权限问题
                if (error && error.message && error.message.includes('denied')) {
                    console.error('全屏请求被拒绝。如果是 Iframe，请检查 allow="fullscreen"。如果是自动触发，请确保由用户点击触发。');
                }
            }
        }
    };
-};
+};
--- a/src/components/button-group/toolbar/buttons/home/index.ts
+++ b/src/components/button-group/toolbar/buttons/home/index.ts
@@ -1,12 +1,8 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 首页按钮配置
- * 使用工厂函数模式，注入 engine 实例
- */
-export const createHomeButton = (engine: BimEngine): ButtonConfig => {
+export const createHomeButton = (): ButtonConfig => {
    return {
        id: 'home',
        groupId: 'group-1',
@@ -16,7 +12,8 @@ export const createHomeButton = (engine: BimEngine): ButtonConfig => {
        keepActive: false,
        onClick: (button) => {
            console.log('首页按钮被点击:', button.id);
-            engine.engine?.CameraGoHome()
+            const registry = ManagerRegistry.getInstance();
+            registry.engine3d?.CameraGoHome();
        }
    };
 };
--- a/src/components/button-group/toolbar/buttons/info/index.ts
+++ b/src/components/button-group/toolbar/buttons/info/index.ts
@@ -1,21 +1,18 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
-import { infoIcon } from './icon';
+import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 信息按钮配置
- * 说明：当前仍保留 demo 的事件触发方式；engine 已注入，便于未来替换为 SDK 内部逻辑。
- */
-export const createInfoButton = (_engine: BimEngine): ButtonConfig => {
+export const createInfoButton = (): ButtonConfig => {
    return {
-        id: 'toolbar-info',
+        id: 'info',
        groupId: 'group-2',
        type: 'button',
        label: 'toolbar.info',
-        icon: infoIcon,
+        icon: getIcon('信息'),
+        keepActive: false,
        onClick: () => {
-            // WORKAROUND: Dispatch a standard custom event on document
-            document.dispatchEvent(new CustomEvent('bim-demo:open-property-panel'));
+            const registry = ManagerRegistry.getInstance();
+            registry.emit('ui:open-dialog', { id: 'info' });
        }
    };
 };
--- a/src/components/button-group/toolbar/buttons/map/index.ts
+++ b/src/components/button-group/toolbar/buttons/map/index.ts
@@ -1,18 +1,16 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 地图按钮配置（开关按钮）
- */
-export const createMapButton = (engine: BimEngine): ButtonConfig => {
-    // 监听地图打开/关闭事件，同步按钮状态
-    engine.on('map:opened', () => {
-        engine.toolbar?.setBtnActive('map', true);
+export const createMapButton = (): ButtonConfig => {
+    const registry = ManagerRegistry.getInstance();
+
+    registry.on('map:opened', () => {
+        registry.toolbar?.setBtnActive('map', true);
    });

-    engine.on('map:closed', () => {
-        engine.toolbar?.setBtnActive('map', false);
+    registry.on('map:closed', () => {
+        registry.toolbar?.setBtnActive('map', false);
    });

    return {
@@ -24,11 +22,10 @@ export const createMapButton = (engine: BimEngine): ButtonConfig => {
        keepActive: true,
        icon: getIcon('地图'),
        onClick: () => {
-            // 切换地图显示状态
-            if (engine.map?.isOpen()) {
-                engine.map?.hide();
+            if (registry.map?.isOpen()) {
+                registry.map?.hide();
            } else {
-                engine.map?.show();
+                registry.map?.show();
            }
        }
    };
--- a/src/components/button-group/toolbar/buttons/measure/index.ts
+++ b/src/components/button-group/toolbar/buttons/measure/index.ts
@@ -1,12 +1,8 @@
-import type {ButtonConfig} from '../../../index.type';
-import type {BimEngine} from '../../../../../bim-engine';
+import type { ButtonConfig } from '../../../index.type';
 import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 测量按钮配置
- * 使用工厂函数模式，注入 engine 实例
- */
-export const createMeasureButton = (engine: BimEngine): ButtonConfig => {
+export const createMeasureButton = (): ButtonConfig => {
    return {
        id: 'measure',
        groupId: 'group-1',
@@ -15,10 +11,11 @@ export const createMeasureButton = (engine: BimEngine): ButtonConfig => {
        icon: getIcon('测量'),
        keepActive: true,
        onClick: (button) => {
+            const registry = ManagerRegistry.getInstance();
            if (button.isActive) {
-                engine.measure?.show()
+                registry.measure?.show();
            } else {
-                engine.measure?.destroy()
+                registry.measure?.destroy();
            }
        }
    };
--- a/src/components/button-group/toolbar/buttons/property/index.ts
+++ b/src/components/button-group/toolbar/buttons/property/index.ts
@@ -1,11 +1,8 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 构件详情按钮配置
- */
-export const createPropertyButton = (engine: BimEngine): ButtonConfig => {
+export const createPropertyButton = (): ButtonConfig => {
    return {
        id: 'property',
        groupId: 'group-1',
@@ -15,7 +12,8 @@ export const createPropertyButton = (engine: BimEngine): ButtonConfig => {
        icon: getIcon('文档'),
        onClick: () => {
            console.log('构件详情按钮被点击');
-            engine.propertyPanel?.show();
+            const registry = ManagerRegistry.getInstance();
+            registry.propertyPanel?.show();
        }
    };
 };
--- a/src/components/button-group/toolbar/buttons/section/section-axis/index.ts
+++ b/src/components/button-group/toolbar/buttons/section/section-axis/index.ts
@@ -1,11 +1,8 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../../core/manager-registry';

-/**
- * 轴向剖切按钮配置
- */
-export const createSectionAxisButton = (engine: BimEngine): ButtonConfig => {
+export const createSectionAxisButton = (): ButtonConfig => {
    return {
        id: 'section-axis',
        groupId: 'group-1',
@@ -17,10 +14,11 @@ export const createSectionAxisButton = (engine: BimEngine): ButtonConfig => {
        label: 'toolbar.sectionAxis',
        icon: getIcon('轴向剖切'),
        onClick: (button) => {
+            const registry = ManagerRegistry.getInstance();
            if (button.isActive) {
-                engine.sectionAxis?.show();
+                registry.sectionAxis?.show();
            } else {
-                engine.sectionAxis?.destroy();
+                registry.sectionAxis?.destroy();
            }
        }
    };
--- a/src/components/button-group/toolbar/buttons/section/section-box/index.ts
+++ b/src/components/button-group/toolbar/buttons/section/section-box/index.ts
@@ -1,11 +1,8 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../../core/manager-registry';

-/**
- * 剖切盒按钮配置
- */
-export const createSectionBoxButton = (engine: BimEngine): ButtonConfig => {
+export const createSectionBoxButton = (): ButtonConfig => {
    return {
        id: 'section-box',
        groupId: 'group-1',
@@ -18,12 +15,11 @@ export const createSectionBoxButton = (engine: BimEngine): ButtonConfig => {
        icon: getIcon('剖切盒'),
        onClick: (button) => {
            console.log('剖切盒被点击:', button.id, '激活状态:', button.isActive);
+            const registry = ManagerRegistry.getInstance();
            if (button.isActive) {
-                // 激活时显示弹窗
-                engine.sectionBox?.show();
+                registry.sectionBox?.show();
            } else {
-                // 关闭时隐藏弹窗
-                engine.sectionBox?.hide();
+                registry.sectionBox?.hide();
            }
        }
    };
--- a/src/components/button-group/toolbar/buttons/section/section-menu/index.ts
+++ b/src/components/button-group/toolbar/buttons/section/section-menu/index.ts
@@ -1,11 +1,7 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';

-/**
- * 剖切菜单按钮配置
- */
-export const createSectionMenuButton = (_engine: BimEngine): ButtonConfig => {
+export const createSectionMenuButton = (): ButtonConfig => {
    return {
        id: 'section',
        groupId: 'group-1',
--- a/src/components/button-group/toolbar/buttons/section/section-plane/index.ts
+++ b/src/components/button-group/toolbar/buttons/section/section-plane/index.ts
@@ -1,11 +1,8 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../../core/manager-registry';

-/**
- * 拾取面剖切按钮配置
- */
-export const createSectionPlaneButton = (engine: BimEngine): ButtonConfig => {
+export const createSectionPlaneButton = (): ButtonConfig => {
    return {
        id: 'section-plane',
        groupId: 'group-1',
@@ -18,12 +15,11 @@ export const createSectionPlaneButton = (engine: BimEngine): ButtonConfig => {
        icon: getIcon('拾曲面剖切'),
        onClick: (button) => {
            console.log('拾取面剖切被点击:', button.id, '激活状态:', button.isActive);
+            const registry = ManagerRegistry.getInstance();
            if (button.isActive) {
-                // 激活时显示弹窗
-                engine.sectionPlane?.show();
+                registry.sectionPlane?.show();
            } else {
-                // 关闭时隐藏弹窗
-                engine.sectionPlane?.hide();
+                registry.sectionPlane?.hide();
            }
        }
    };
--- a/src/components/button-group/toolbar/buttons/setting/index.ts
+++ b/src/components/button-group/toolbar/buttons/setting/index.ts
@@ -1,11 +1,7 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';

-/**
- * 设置按钮配置
- */
-export const createSettingButton = (_engine: BimEngine): ButtonConfig => {
+export const createSettingButton = (): ButtonConfig => {
    return {
        id: 'setting',
        groupId: 'group-2',
@@ -14,7 +10,6 @@ export const createSettingButton = (_engine: BimEngine): ButtonConfig => {
        icon: getIcon('设置'),
        keepActive: false,
        onClick: (button) => {
-            // 预留：未来接入设置逻辑（此处已注入 engine）
            console.log('设置按钮被点击:', button.id);
        }
    };
--- a/src/components/button-group/toolbar/buttons/walk/walk-bird/index.ts
+++ b/src/components/button-group/toolbar/buttons/walk/walk-bird/index.ts
@@ -1,11 +1,7 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';

-/**
- * 第三人称（鸟瞰）漫游按钮配置
- */
-export const createWalkBirdButton = (_engine: BimEngine): ButtonConfig => {
+export const createWalkBirdButton = (): ButtonConfig => {
    return {
        id: 'walk-bird',
        groupId: 'group-1',
--- a/src/components/button-group/toolbar/buttons/walk/walk-menu/index.ts
+++ b/src/components/button-group/toolbar/buttons/walk/walk-menu/index.ts
@@ -1,11 +1,8 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../../core/manager-registry';

-/**
- * 漫游按钮配置（普通按钮，不带子菜单）
- */
-export const createWalkMenuButton = (engine: BimEngine): ButtonConfig => {
+export const createWalkMenuButton = (): ButtonConfig => {
    return {
        id: 'walk',
        groupId: 'group-1',
@@ -15,7 +12,8 @@ export const createWalkMenuButton = (engine: BimEngine): ButtonConfig => {
        icon: getIcon('漫游'),
        onClick: () => {
            console.log('漫游按钮被点击');
-            engine.walkControl?.show();
+            const registry = ManagerRegistry.getInstance();
+            registry.walkControl?.show();
        }
    };
 };
--- a/src/components/button-group/toolbar/buttons/walk/walk-person/index.ts
+++ b/src/components/button-group/toolbar/buttons/walk/walk-person/index.ts
@@ -1,11 +1,7 @@
 import type { ButtonConfig } from '../../../../index.type';
-import type { BimEngine } from '../../../../../../bim-engine';
 import { getIcon } from '../../../../../../utils/icon-manager';

-/**
- * 第一人称漫游按钮配置
- */
-export const createWalkPersonButton = (_engine: BimEngine): ButtonConfig => {
+export const createWalkPersonButton = (): ButtonConfig => {
    return {
        id: 'walk-person',
        groupId: 'group-1',
--- a/src/components/button-group/toolbar/buttons/zoom-box/index.ts
+++ b/src/components/button-group/toolbar/buttons/zoom-box/index.ts
@@ -1,28 +1,18 @@
 import type { ButtonConfig } from '../../../index.type';
-import type { BimEngine } from '../../../../../bim-engine';
 import { getIcon } from '../../../../../utils/icon-manager';
+import { ManagerRegistry } from '../../../../../core/manager-registry';

-/**
- * 选框放大按钮配置
- *
- * 说明：
- * - 当前仅添加 UI 按钮，点击事件先留空（后续接入引擎能力再实现）
- * - 使用工厂函数模式注入 engine，便于未来调用 engine API
- */
-export const createZoomBoxButton = (engine: BimEngine): ButtonConfig => {
-  return {
-    id: 'zoom-box',
-    groupId: 'group-1',
-    keepActive: false,
-    type: 'button',
-    label: 'toolbar.zoomBox',
-    icon: getIcon('框选放大'),
-    onClick: () => {
-      engine.engine?.getEngine().rangeScale.active();
-      // 事件先留空：后续实现“框选放大/框选缩放”能力时再接入
-      // 这里不做任何动作，避免误触影响用户操作
-    }
-  };
+export const createZoomBoxButton = (): ButtonConfig => {
+    return {
+        id: 'zoom-box',
+        groupId: 'group-1',
+        keepActive: false,
+        type: 'button',
+        label: 'toolbar.zoomBox',
+        icon: getIcon('框选放大'),
+        onClick: () => {
+            const registry = ManagerRegistry.getInstance();
+            registry.engine3d?.getEngine().rangeScale.active();
+        }
+    };
 };
-
-
--- a/src/components/button-group/toolbar/index.ts
+++ b/src/components/button-group/toolbar/index.ts
@@ -1,17 +1,9 @@
 import { BimButtonGroup } from '../index';

-/**
- * 底部工具栏 (Toolbar)
- * BimButtonGroup 的子类，专门用于加载工具栏默认按钮。
- */
 export class Toolbar extends BimButtonGroup {
-    /**
-     * 重写初始化，加载默认按钮
-     */
    public async init(): Promise<void> {
        await super.init();

-        // 动态加载默认按钮配置
        const { createHomeButton } = await import('./buttons/home');
        const { createZoomBoxButton } = await import('./buttons/zoom-box');
        const { createWalkMenuButton } = await import('./buttons/walk/walk-menu');
@@ -28,26 +20,20 @@ export class Toolbar extends BimButtonGroup {

        this.addGroup('group-1');

-        // 使用工厂函数创建按钮，并注入 engine
-        if (this.engine) {
-            this.addButton(createHomeButton(this.engine));
-            // 你要求：在"首页"后面添加"选框放大"
-            this.addButton(createZoomBoxButton(this.engine));
-            this.addButton(createMeasureButton(this.engine));
-            this.addButton(createSectionMenuButton(this.engine));
-            this.addButton(createSectionPlaneButton(this.engine));
-            this.addButton(createSectionAxisButton(this.engine));
-            this.addButton(createSectionBoxButton(this.engine));
-            this.addButton(createWalkMenuButton(this.engine));
-            this.addButton(createMapButton(this.engine));
-            this.addButton(createPropertyButton(this.engine));
-            this.addGroup('group-2');
-            this.addButton(createSettingButton(this.engine));
-            this.addButton(createInfoButton(this.engine));
-            this.addButton(createFullscreenButton(this.engine));
-        } else {
-            console.warn('[Toolbar] Engine not available when creating buttons.');
-        }
+        this.addButton(createHomeButton());
+        this.addButton(createZoomBoxButton());
+        this.addButton(createMeasureButton());
+        this.addButton(createSectionMenuButton());
+        this.addButton(createSectionPlaneButton());
+        this.addButton(createSectionAxisButton());
+        this.addButton(createSectionBoxButton());
+        this.addButton(createWalkMenuButton());
+        this.addButton(createMapButton());
+        this.addButton(createPropertyButton());
+        this.addGroup('group-2');
+        this.addButton(createSettingButton());
+        this.addButton(createInfoButton());
+        this.addButton(createFullscreenButton());

        this.render();
    }
--- a/src/components/menu/buttons/four.ts
+++ b/src/components/menu/buttons/four.ts
@@ -1,15 +1,16 @@
-import { BimEngine } from "../../../bim-engine";
-import { MenuItemConfig } from "../item";
+import { MenuItemConfig } from '../item';
+import { ManagerRegistry } from '../../../core/manager-registry';

-export const fourMenuButton = (engine: BimEngine): MenuItemConfig => {
+export const fourMenuButton = (): MenuItemConfig => {
    return {
-        id: "fourMenu",
-        label: "menu.info",
+        id: 'fourMenu',
+        label: 'menu.info',
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7q.425 0 .713-.288T13 6t-.288-.712T12 5t-.712.288T11 6t.288.713T12 7m0 8q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9t-.712.288T11 10v4q0 .425.288.713T12 15m-6 3l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z"/></svg>',
        onClick: () => {
-            console.log('dianjile')
-            engine.dialog?.showInfoDialog()
-            engine.engine?.rightKey?.hide()
+            console.log('dianjile');
+            const registry = ManagerRegistry.getInstance();
+            registry.dialog?.showInfoDialog();
+            registry.engine3d?.rightKey?.hide();
        }
-    }
-}
+    };
+};
--- a/src/components/menu/buttons/home.ts
+++ b/src/components/menu/buttons/home.ts
@@ -1,18 +1,19 @@
-import { BimEngine } from "../../../bim-engine";
-import { MenuItemConfig } from "../item";
-import { fourMenuButton } from "./four";
-import { secondMenuButton } from "./second";
+import { MenuItemConfig } from '../item';
+import { ManagerRegistry } from '../../../core/manager-registry';
+import { secondMenuButton } from './second';
+import { fourMenuButton } from './four';

-export const homeMenuButton = (engine: BimEngine): MenuItemConfig => {
+export const homeMenuButton = (): MenuItemConfig => {
    return {
-        id: "homeMenu",
-        label: "menu.home",
+        id: 'homeMenu',
+        label: 'menu.home',
        group: 'home',
-        children: [secondMenuButton(engine), fourMenuButton(engine)],
+        children: [secondMenuButton(), fourMenuButton()],
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7q.425 0 .713-.288T13 6t-.288-.712T12 5t-.712.288T11 6t.288.713T12 7m0 8q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9t-.712.288T11 10v4q0 .425.288.713T12 15m-6 3l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z"/></svg>',
        onClick: () => {
-            engine.dialog?.showInfoDialog()
-            engine.engine?.rightKey?.hide()
+            const registry = ManagerRegistry.getInstance();
+            registry.dialog?.showInfoDialog();
+            registry.engine3d?.rightKey?.hide();
        }
-    }
-}
+    };
+};
--- a/src/components/menu/buttons/info.ts
+++ b/src/components/menu/buttons/info.ts
@@ -1,16 +1,17 @@
-import { BimEngine } from "../../../bim-engine";
-import { MenuItemConfig } from "../item";
+import { MenuItemConfig } from '../item';
+import { ManagerRegistry } from '../../../core/manager-registry';

-export const infoMenuButton = (engine: BimEngine): MenuItemConfig => {
+export const infoMenuButton = (): MenuItemConfig => {
    return {
-        id: "infoMenu",
-        label: "menu.info",
+        id: 'infoMenu',
+        label: 'menu.info',
        group: 'info',
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7q.425 0 .713-.288T13 6t-.288-.712T12 5t-.712.288T11 6t.288.713T12 7m0 8q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9t-.712.288T11 10v4q0 .425.288.713T12 15m-6 3l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z"/></svg>',
        onClick: () => {
-            console.log('dianjile')
-            engine.dialog?.showInfoDialog()
-            engine.engine?.rightKey?.hide()
+            console.log('dianjile');
+            const registry = ManagerRegistry.getInstance();
+            registry.dialog?.showInfoDialog();
+            registry.engine3d?.rightKey?.hide();
        }
-    }
-}
+    };
+};
--- a/src/components/menu/buttons/second.ts
+++ b/src/components/menu/buttons/second.ts
@@ -1,15 +1,16 @@
-import { BimEngine } from "../../../bim-engine";
-import { MenuItemConfig } from "../item";
+import { MenuItemConfig } from '../item';
+import { ManagerRegistry } from '../../../core/manager-registry';

-export const secondMenuButton = (engine: BimEngine): MenuItemConfig => {
+export const secondMenuButton = (): MenuItemConfig => {
    return {
-        id: "infoMenu",
-        label: "menu.info",
+        id: 'infoMenu',
+        label: 'menu.info',
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7q.425 0 .713-.288T13 6t-.288-.712T12 5t-.712.288T11 6t.288.713T12 7m0 8q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9t-.712.288T11 10v4q0 .425.288.713T12 15m-6 3l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z"/></svg>',
        onClick: () => {
-            console.log('dianjile')
-            engine.dialog?.showInfoDialog()
-            engine.engine?.rightKey?.hide()
+            console.log('dianjile');
+            const registry = ManagerRegistry.getInstance();
+            registry.dialog?.showInfoDialog();
+            registry.engine3d?.rightKey?.hide();
        }
-    }
-}
+    };
+};