62 lines
2.0 KiB
Markdown
62 lines
2.0 KiB
Markdown
# 插件侧边栏三级菜单重构
|
||
|
||
## 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:
|
||
<SidebarSubMenu title=group.pluginName items=group.items />
|
||
```
|
||
|
||
## 验证
|
||
|
||
1. 启动前端 `pnpm dev`，访问侧边栏
|
||
2. 确认 CRM 插件下所有 5 个菜单项嵌套在 "CRM" 子标题下
|
||
3. 点击 "CRM" 子标题可展开/收起
|
||
4. 折叠侧边栏后，CRM 子项通过 tooltip 或悬浮展示
|
||
5. 点击各子项，路由正确跳转
|
||
6. 页面标题（面包屑）正确显示
|