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

@@ -20,6 +20,8 @@
<button @click="openTestDialog">测试弹窗</button>
<button @click="openInfoDialog">信息弹窗</button>
<button @click="openRedDialog">警告弹窗</button>
<button @click="openTreeDialog">树组件测试</button>
<button @click="openSimpleTreeDialog">纯树测试</button>
</div>
</div>
@@ -181,6 +183,67 @@ const openRedDialog = () => {
});
};
const openTreeDialog = () => {
if (!engine.value || !engine.value.modelTree) return;
// 1. 构造树数据
const treeData = [
{
id: 'root',
label: 'tree.modelStruct', // 翻译键
expanded: true,
children: [
{
id: 'level-1',
label: 'tree.floor1',
expanded: true,
children: [
{ id: 'l1-wall', label: 'tree.wall', checked: true },
{ id: 'l1-col', label: 'tree.column' },
{ id: 'l1-win', label: 'tree.window' },
{ id: 'l1-door', label: 'tree.door' }
]
},
{
id: 'level-2',
label: 'tree.floor2',
children: [
{ id: 'l2-wall', label: 'tree.wall' },
{ id: 'l2-col', label: 'tree.column' }
]
}
]
}
];
// 2. 使用高级 API
engine.value.modelTree.showStructTree(treeData);
};
const openSimpleTreeDialog = () => {
if (!engine.value || !engine.value.modelTree) return;
const treeData = [
{
id: 'menu-root',
label: 'menu.home',
expanded: true,
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>',
children: [
{ id: 'm-info', label: 'menu.info' },
{
id: 'm-struct', label: 'tree.modelStruct', children: [
{ id: 'm-w', label: 'tree.wall' },
{ id: 'm-c', label: 'tree.column' }
]
}
]
}
];
engine.value.modelTree.showSimpleTree(treeData, 'Simple Tree');
};
// --- 工具栏操作 ---
const toggleToolbar = () => {
if (!engine.value || !engine.value.toolbar) return;