feat(tree,menu,docs): 对接目录树三类数据并中文化文档
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user