daShangDao_newAdmin/DYNAMIC_MENU_GUIDE.md

动态菜单系统使用指南

概述

本系统实现了基于后端权限数据的动态菜单功能，不同用户根据其权限展示不同的后台菜单栏。

实现原理

1. 后端接口

• 接口地址: /admin/permission/user/tree
• 请求方法: GET
• 返回数据: 用户权限菜单树结构

2. 数据结构

{
  "code": 200,
  "message": "OK",
  "data": [
    {
      "id": 1,
      "name": "系统管理",
      "code": null,
      "type": 1,
      "path": "/system",
      "component": "",
      "icon": "Setting",
      "sort": 1,
      "status": 1,
      "children": [
        {
          "id": 11,
          "name": "配置列表",
          "code": "settled:config:list",
          "type": 2,
          "path": "/settledConfig/list",
          "component": "/SettledConfig/List",
          "icon": "",
          "sort": 1,
          "status": 1,
          "children": []
        }
      ]
    }
  ]
}

3. 权限类型说明

• type: 1 - 目录（一级菜单）
• type: 2 - 菜单（二级菜单）
• type: 3 - 接口权限（按钮权限）

核心组件

1. DynamicSidebar.vue

动态侧边栏组件，负责：

• 获取用户权限菜单数据
• 根据权限过滤菜单项
• 渲染菜单树结构
• 处理图标映射

2. 权限过滤逻辑

const filterMenuByPermission = (menuItems: any[]): any[] => {
  return menuItems.map(item => {
    // 递归过滤子菜单
    if (item.children && item.children.length > 0) {
      const filteredChildren = filterMenuByPermission(item.children)
      return { ...item, children: filteredChildren }
    }
    return item
  }).filter(item => {
    // 目录类型：检查是否有可显示的子菜单
    if (item.type === 1) {
      return item.children && item.children.length > 0
    }
    // 菜单类型：检查权限
    if (item.type === 2) {
      return item.code ? hasPermission(item.code) : true
    }
    return false
  })
}

使用方法

1. 后端配置

确保后端接口 /admin/permission/user/tree 返回正确的权限菜单数据。

2. 前端配置

系统已自动配置，无需额外设置。布局组件会自动使用 DynamicSidebar 组件。

3. 图标配置

在 DynamicSidebar.vue 中的 iconMap 对象中添加新图标：

const iconMap = {
  'Setting': Setting,
  'Shop': Shop,
  'Notebook': Notebook,
  // 添加新图标
  'NewIcon': NewIconComponent
}

权限控制

1. 菜单级权限

通过后端返回的菜单树数据控制，只返回用户有权限的菜单项。

2. 路由级权限

在路由配置中使用 meta.permission 字段：

{
  path: '/user/list',
  component: () => import('@/views/User/List.vue'),
  meta: { title: '用户列表', permission: 'user:list:view' }
}

3. 按钮级权限

使用权限指令：

<!-- 单个权限 -->
<el-button v-permission="'user:add'">添加用户</el-button>

<!-- 多个权限（任意一个） -->
<el-button v-permission="['user:add', 'user:edit']">操作</el-button>

<!-- 所有权限都需要 -->
<el-button v-permission-all="['user:add', 'user:edit']">高级操作</el-button>

注意事项

1. 权限初始化: 系统在启动时会自动初始化用户权限，确保权限数据可用。

2. 菜单刷新: 如果用户权限发生变化，需要重新登录或刷新页面以获取最新菜单。

3. 图标缺失: 如果菜单项的图标在 iconMap 中不存在，会使用默认的 Setting 图标。

4. 路径匹配: 确保菜单项的 path 字段与路由配置中的路径一致。

扩展功能

1. 添加新菜单类型

可以在权限过滤逻辑中添加对新菜单类型的支持。

2. 自定义菜单样式

可以在 DynamicSidebar.vue 的样式部分自定义菜单外观。

3. 菜单缓存

可以考虑添加菜单数据缓存机制，减少API调用次数。