菜单定义

本文档描述了后台管理系统的侧边栏菜单结构、数据结构以及权限控制逻辑。

数据结构

菜单项通过 MenuItem 接口定义，位于 src/components/layout/Sidebar.tsx。

interface MenuItem {
  title: string;           // 菜单名称
  path?: string;          // 跳转路径（如果有子菜单则可选）
  icon: any;              // 图标
  adminOnly?: boolean;    // 是否仅超级管理员可见
  children?: {            // 子菜单列表
    title: string;
    path: string;
    adminOnly?: boolean;
  }[];
}

示例菜单配置

系统目前定义的菜单项如下：

菜单名称	路径	图标	权限控制	说明
仪表盘	/	Home01Icon	全员可见	系统概览页面
用户管理	/users	UserIcon	仅限超级管理员	PocketBase 用户增删改查
数据中心	-	ChartLineData01Icon	全员可见	包含子菜单
└ 数据分析	/analytics	-	全员可见	-
└ 文档中心	/documents	-	全员可见	-
订单管理	/orders	ShoppingCart01Icon	全员可见	-
系统设置	-	Settings01Icon	全员可见	包含子菜单
└ 基本设置	/settings	-	全员可见	-
└ 个人信息	/profile	-	全员可见	-

权限控制逻辑

1. 侧边栏过滤：在 Sidebar 组件渲染前，会根据 useAuth 中的 isSuperAdmin 状态对 menuItems 进行过滤。如果菜单项设置了 adminOnly: true 且当前用户非超级管理员，该菜单及其子项将不会被渲染。
2. 路由保护：除了 UI 层的隐藏，配套的路由在 App.tsx 中也使用了 AdminOnlyRoute 进行包裹，确保普通用户无法通过手动输入 URL 越权访问。

如何修改菜单

1. 编辑配置：在 src/components/layout/Sidebar.tsx 的 menuItems 常量中添加或修改对象。
2. 添加图标：从 @heroicons/react/24/outline 引入新的图标。
3. 设置权限：如需限制访问，请务必在 menuItems 中设置 adminOnly: true，并在 App.tsx 中使用 AdminOnlyRoute 包裹对应路由。