feat(tree): implement tree component with checkbox support and manager pattern

- Added core Tree component (BimTree, BimTreeNode)
- Added TreeManager for lifecycle management
- Added ModelTreeManager for business logic encapsulation (Tree + Dialog)
- Integrated into BimEngine and updated demos
- Added internationalization support
This commit is contained in:
yuding
2025-12-10 18:34:14 +08:00
parent ef79b5b370
commit 2a2258cb9c
15 changed files with 1088 additions and 8 deletions

View File

@@ -0,0 +1,76 @@
import { BimComponent } from '../core/component';
import { BimTree } from '../components/tree/index';
import { BimDialog } from '../components/dialog/index';
import { TreeNodeConfig } from '../components/tree/types';
/**
* 模型树业务管理器
* 负责组装 Tree 和 Dialog 组件,提供开箱即用的业务弹窗
*/
export class ModelTreeManager extends BimComponent {
/**
* 显示带复选框的模型结构树弹窗
* @param data 树节点数据
* @param title 弹窗标题 (翻译键)
*/
public showStructTree(data: TreeNodeConfig[], title: string = 'tree.modelStruct'): { tree: BimTree, dialog: BimDialog } {
// 1. 创建 Tree 实例
const tree = this.engine.tree!.create({
data: data,
checkable: true,
checkStrictly: true,
defaultExpandAll: true
});
// 2. 创建 Dialog 实例
const dialog = this.engine.dialog!.create({
title: title,
width: 300,
height: 400,
content: tree.element,
position: 'left-center',
resizable: true,
// 关键:绑定生命周期
onClose: () => {
tree.destroy();
}
});
return { tree, dialog };
}
/**
* 显示简单的树形弹窗 (无复选框)
* @param data 树节点数据
* @param title 弹窗标题 (翻译键)
*/
public showSimpleTree(data: TreeNodeConfig[], title: string = 'menu.home'): { tree: BimTree, dialog: BimDialog } {
// 1. 创建 Tree 实例
const tree = this.engine.tree!.create({
data: data,
checkable: false,
defaultExpandAll: true
});
// 2. 创建 Dialog 实例
const dialog = this.engine.dialog!.create({
title: title,
width: 250,
height: 300,
content: tree.element,
position: 'center',
resizable: true,
onClose: () => {
tree.destroy();
}
});
return { tree, dialog };
}
public destroy(): void {
// 具体的 Tree 和 Dialog 实例由它们各自的生命周期管理
// 这里不需要销毁它们,除非我们持有了全局引用
}
}

View File

@@ -0,0 +1,57 @@
import { BimComponent } from '../core/component';
import { BimTree } from '../components/tree/index';
import { TreeOptions } from '../components/tree/types';
import type { BimEngine } from '../bim-engine';
/**
* 树组件管理器
* 负责创建和管理 BimTree 实例
*/
export class TreeManager extends BimComponent {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
constructor(engine: BimEngine, _container: HTMLElement) {
super(engine);
}
/**
* 创建一个新的树组件实例
* @param options 配置选项
*/
public create(options: TreeOptions): BimTree {
const tree = new BimTree(options);
// 绑定事件桥接
tree.onNodeCheck = (node) => {
this.emit('ui:tree-node-check', {
id: node.config.id,
checked: node.config.checked || false,
node: node.config
});
};
tree.onNodeSelect = (node) => {
this.emit('ui:tree-node-select', {
id: node.config.id,
selected: true,
node: node.config
});
};
tree.onNodeExpand = (node) => {
this.emit('ui:tree-node-expand', {
id: node.config.id,
expanded: node.config.expanded || false
});
};
tree.init();
return tree;
}
public destroy(): void {
// TreeManager 本身不持有 Tree 实例的强引用列表
// 实例通常由调用者(如 Dialog持有并销毁
// 这里可以做一些全局清理工作
}
}