@kordar-lib/menus

菜单与树结构工具库：提供通用侧边栏节点类型、菜单生成服务、二叉树索引、选择树等能力，便于在不同 UI 框架中复用菜单与 Tab 数据结构。

导出

• BinaryNode, NODE_TYPE：用于路径搜索的二叉树工具
• MenuService：通用菜单服务（生成侧边栏、路径索引、节点缓存）
• TabMenuService：基于根节点拆分 Tab 的菜单服务
• MenuTree：将原始数组转换为树
• SelectionTree/SelectionTreeItem：选择树结构
• SideBarItem：侧边栏节点类型

快速使用

import {MenuService, type SideBarItem} from '@kordar-lib/menus'

// 原始菜单数据（示例）
const raw = [
  { id: 1, pid: 0, title: '系统', router_name: 'system' },
  { id: 2, pid: 1, title: '用户管理', router_name: 'user' },
  { id: 3, pid: 1, title: '角色管理', router_name: 'role' }
]

// 映射成通用节点结构（支持 UI 框架无关的字段）
const mapper = (ele: any): SideBarItem<number> => ({
  id: ele.id,
  pid: ele.pid,
  text: ele.title,
  label: ele.title,
  key: ele.id,
  path: ele.router_name
})

const menusvc = new MenuService<number>(0, mapper)
menusvc.init(raw)

// 侧边栏数据
const menus = menusvc.menus()

// 通过 id 反查节点
const item = menusvc.getItemById(2)

// 计算路径展开链（父链/自身）
const openKeys = menusvc.searchPathIndex(3) // [1,3]

Tab 导航场景：

import {TabMenuService} from '@kordar-lib/menus'

const tabsSvc = new TabMenuService<number>(0, mapper)
tabsSvc.init(raw)
const tabs = tabsSvc.getTabs() // 顶层 pid===root 的条目

类型说明

SideBarItem（核心字段）

• id：唯一标识（string | number）
• text/label：展示文本
• pid：父节点 id
• path/routerName/url：路由或地址字段
• children：子节点数组

构建与类型（Monorepo：npm）

在仓库根目录执行：

npm install
npm run -w @kordar-lib/menus build

类型检查：

npm exec -w @kordar-lib/menus -- tsc -p tsconfig.json --noEmit

许可证

MIT