feat(tree,menu,docs): 对接目录树三类数据并中文化文档
This commit is contained in:
@@ -93,14 +93,23 @@ export class BimMenu implements IBimComponent {
|
||||
return this.element;
|
||||
}
|
||||
|
||||
/**
|
||||
* 核心渲染逻辑
|
||||
* 处理分组、排序和 DOM 生成
|
||||
*/
|
||||
private hasAnyIcon(items: MenuItemConfig[]): boolean {
|
||||
return items.some(item => {
|
||||
if (item.icon) return true;
|
||||
if (item.children) return this.hasAnyIcon(item.children);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
private render(): void {
|
||||
const { items, groupOrder } = this.options;
|
||||
|
||||
// 1. 数据分桶:按 group 字段将菜单项分组
|
||||
if (this.hasAnyIcon(items)) {
|
||||
this.element.classList.add('has-icons');
|
||||
} else {
|
||||
this.element.classList.remove('has-icons');
|
||||
}
|
||||
|
||||
const groups = new Map<string, MenuItemConfig[]>();
|
||||
const defaultGroup = 'default';
|
||||
|
||||
@@ -112,25 +121,19 @@ export class BimMenu implements IBimComponent {
|
||||
groups.get(groupName)!.push(item);
|
||||
});
|
||||
|
||||
// 2. 确定分组顺序
|
||||
let sortedGroupKeys: string[] = [];
|
||||
if (groupOrder) {
|
||||
// 优先按照 groupOrder 指定的顺序排序
|
||||
sortedGroupKeys = groupOrder.filter(g => groups.has(g));
|
||||
// 将未在 groupOrder 中定义的组追加到最后
|
||||
for (const key of groups.keys()) {
|
||||
if (!sortedGroupKeys.includes(key)) {
|
||||
sortedGroupKeys.push(key);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 如果未指定顺序,则按默认遍历顺序
|
||||
sortedGroupKeys = Array.from(groups.keys());
|
||||
}
|
||||
|
||||
// 3. 渲染分组和组内项
|
||||
sortedGroupKeys.forEach((groupName, index) => {
|
||||
// 除了第一组外,每组之前插入分割线
|
||||
if (index > 0) {
|
||||
const divider = document.createElement('li');
|
||||
divider.className = 'bim-menu-divider';
|
||||
@@ -138,13 +141,16 @@ export class BimMenu implements IBimComponent {
|
||||
}
|
||||
|
||||
const groupItems = groups.get(groupName)!;
|
||||
// 组内排序:根据 item.order 升序排列
|
||||
groupItems.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
groupItems.forEach(item => {
|
||||
// 仅渲染可见的项
|
||||
if (item.visible !== false) {
|
||||
this.element.appendChild(this.createItemElement(item));
|
||||
if (item.divider) {
|
||||
const divider = document.createElement('li');
|
||||
divider.className = 'bim-menu-divider';
|
||||
this.element.appendChild(divider);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user