# 插件侧边栏三级菜单重构 ## Context 当前插件菜单是扁平结构,所有插件的页面(客户管理、联系人、沟通记录等)都平铺在"插件"分组下。随着更多插件接入,菜单会变得杂乱无章。需要改为三级结构: ``` 插件(分组标题) └ CRM(插件名称,可折叠) ├ 客户管理 ├ 联系人 ├ 沟通记录 ├ 标签管理 └ 客户关系 └ 未来插件名称(可折叠) ├ 页面1 └ 页面2 ``` ## 改动范围 仅涉及前端两个文件,无需后端改动(`PluginMenuItem.pluginId` 字段已存在)。 ### 1. `apps/web/src/stores/plugin.ts` **改动:** 新增 `PluginMenuGroup` 类型和 `pluginMenuGroups` getter。 ```ts 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: ``` ## 验证 1. 启动前端 `pnpm dev`,访问侧边栏 2. 确认 CRM 插件下所有 5 个菜单项嵌套在 "CRM" 子标题下 3. 点击 "CRM" 子标题可展开/收起 4. 折叠侧边栏后,CRM 子项通过 tooltip 或悬浮展示 5. 点击各子项,路由正确跳转 6. 页面标题(面包屑)正确显示