feat(tree,menu,docs): 对接目录树三类数据并中文化文档

This commit is contained in:
yuding
2026-01-28 17:19:36 +08:00
parent 3ab9d4b0ea
commit 0b8dcd36fa
32 changed files with 4060 additions and 3302 deletions

View File

@@ -7,7 +7,6 @@
padding: 6px;
margin: 0;
list-style: none;
min-width: 160px;
box-shadow: var(--bim-shadow-lg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
user-select: none;
@@ -38,8 +37,7 @@
}
.bim-menu-item:hover {
background-color: var(--bim-floating-btn-bg);
transform: translateX(2px);
background-color: var(--bim-component-bg-hover);
}
.bim-menu-item.disabled {
@@ -49,6 +47,10 @@
}
.bim-menu-item-icon {
display: none;
}
.bim-menu.has-icons .bim-menu-item-icon {
width: 16px;
height: 16px;
margin-right: 8px;

View File

@@ -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);
}
}
});
});

View File

@@ -1,6 +1,3 @@
/**
* 菜单项配置接口 (用于简化的对象配置)
*/
export interface MenuItemConfig {
id: string;
label: string;
@@ -11,4 +8,5 @@ export interface MenuItemConfig {
children?: MenuItemConfig[];
disabled?: boolean;
visible?: boolean;
divider?: boolean;
}