# 动态菜单系统使用指南

## 概述

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

## 实现原理

### 1. 后端接口
- **接口地址**: `/admin/permission/user/tree`
- **请求方法**: GET
- **返回数据**: 用户权限菜单树结构

### 2. 数据结构
```json
{
  "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. 权限过滤逻辑
```javascript
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` 对象中添加新图标：
```javascript
const iconMap = {
  'Setting': Setting,
  'Shop': Shop,
  'Notebook': Notebook,
  // 添加新图标
  'NewIcon': NewIconComponent
}
```

## 权限控制

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

### 2. 路由级权限
在路由配置中使用 `meta.permission` 字段：
```javascript
{
  path: '/user/list',
  component: () => import('@/views/User/List.vue'),
  meta: { title: '用户列表', permission: 'user:list:view' }
}
```

### 3. 按钮级权限
使用权限指令：
```html
<!-- 单个权限 -->
<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调用次数。