2.0 KiB
2.0 KiB
插件侧边栏三级菜单重构
Context
当前插件菜单是扁平结构,所有插件的页面(客户管理、联系人、沟通记录等)都平铺在"插件"分组下。随着更多插件接入,菜单会变得杂乱无章。需要改为三级结构:
插件(分组标题)
└ CRM(插件名称,可折叠)
├ 客户管理
├ 联系人
├ 沟通记录
├ 标签管理
└ 客户关系
└ 未来插件名称(可折叠)
├ 页面1
└ 页面2
改动范围
仅涉及前端两个文件,无需后端改动(PluginMenuItem.pluginId 字段已存在)。
1. apps/web/src/stores/plugin.ts
改动: 新增 PluginMenuGroup 类型和 pluginMenuGroups getter。
export interface PluginMenuGroup {
pluginId: string;
pluginName: string; // 从 cachedPlugins 取 metadata.name
items: PluginMenuItem[];
}
在 store 中添加一个 pluginMenuGroups 计算属性(Zustand getter),按 pluginId 分组,取插件名称从 plugins 数组中查找。
2. apps/web/src/layouts/MainLayout.tsx
改动:
- 新增
SidebarSubMenu组件:显示插件名称作为可折叠子标题,渲染其下级SidebarMenuItem - 子标题使用
expand-icon(右箭头) 指示可折叠,点击切换展开/收起 - 子标题样式:略深背景 + 左侧有缩进指示线
- 子菜单项有额外左缩进(12px)表示层级
- 折叠侧边栏时,子菜单标题只显示插件图标,悬浮弹出子项
渲染逻辑:
"插件" 标签
for each group in pluginMenuGroups:
<SidebarSubMenu title=group.pluginName items=group.items />
验证
- 启动前端
pnpm dev,访问侧边栏 - 确认 CRM 插件下所有 5 个菜单项嵌套在 "CRM" 子标题下
- 点击 "CRM" 子标题可展开/收起
- 折叠侧边栏后,CRM 子项通过 tooltip 或悬浮展示
- 点击各子项,路由正确跳转
- 页面标题(面包屑)正确显示