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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user