菜单定义

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

数据结构

菜单项通过 MenuItem 接口定义，位于 src/components/menu.ts。

interface MenuItem {
  title: string;           // 菜单名称
  path?: string;          // 跳转路径（如果有子菜单则可选）
  icon: any;              // 图标
  adminOnly?: boolean;    // 是否仅超级管理员可见
  userOnly?: boolean;     // 是否仅普通用户可见
  show?: boolean;         // 是否在侧边栏显示（默认为 true）
  activePath?: string;    // 手动指定激活路径匹配模式（正则或前缀）
  external?: boolean;     // 是否为外部链接
  children?: {            // 子菜单列表
    title: string;
    path: string;
    adminOnly?: boolean;
    userOnly?: boolean;
    show?: boolean;       // 子菜单是否显示
    external?: boolean;
  }[];
}

示例菜单配置

系统支持自动扫描模块目录下的 menu.ts 并注册。目前的菜单配置属性如下：

属性名	类型	说明	默认值
title	string	菜单显示的名称	必填
path	string	链接路径（顶级菜单有 children 时可选）	-
icon	Component	Heroicons 图标组件	必填
adminOnly	boolean	是否仅超级管理员可见	false
userOnly	boolean	是否仅普通用户可见	false
show	boolean	是否在侧边栏渲染	true
activePath	string	手动指定激活路径匹配模式（正则或前缀）	-
external	boolean	是否在新标签页打开外部链接	false

权限控制

1. 角色过滤 (adminOnly/userOnly)：在侧边栏渲染前，会根据用户的角色状态进行过滤：
   • adminOnly: true：仅当用户为超级管理员时可见。
   • userOnly: true：仅当用户为普通用户时可见。
2. 路由保护：除了 UI 层的隐藏，配套的路由也应在模块的 routes.tsx 中使用 AdminOnlyRoute 或 UserOnlyRoute 进行包裹。

显示控制

1. 显示过滤 (show)：如果菜单项或子菜单项设置了 show: false，则该项在侧边栏中会被直接过滤掉，不进行渲染。这适用于某些功能尚未上线或仅用于路由跳转而不需在菜单显示的场景。
2. 路径匹配激活 (activePath)：如果设置了 activePath，则会根据当前路径与 activePath 进行匹配。如果匹配成功，菜单项会被激活。

如何修改菜单

1. 全局菜单：编辑 src/components/menu.ts 中的 adminMenu 常量。
2. 模块菜单：在 src/modules/{module}/menu.ts 中定义并导出 menu 变量。系统会自动扫描并组合这些菜单。
3. 属性设置：根据需要设置 adminOnly 或 show 等属性来控制可见性。