# 动态菜单功能实现指南

## 概述

本文档描述了保险PC端管理系统中动态菜单功能的实现方案，包括后端API设计、数据库设计、前端集成和数据初始化方法。

## 功能特点

1. **全动态菜单**: 所有菜单数据从MySQL数据库动态获取
2. **菜单层次结构**: 支持多级菜单结构
3. **权限控制**: 支持基于用户角色的菜单权限控制
4. **自动排序**: 菜单按预定义顺序显示
5. **备用菜单**: 当API请求失败时提供默认菜单

## 技术实现

### 1. 数据库设计

菜单数据存储在`menus`表中，使用自关联实现父子菜单关系：

```sql
CREATE TABLE menus (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(50) NOT NULL,
  key VARCHAR(50) NOT NULL UNIQUE,
  path VARCHAR(100) NOT NULL,
  icon VARCHAR(50) NULL,
  parent_id INT NULL,
  component VARCHAR(100) NULL,
  `order` INT NOT NULL DEFAULT 0,
  status ENUM('active', 'inactive') DEFAULT 'active',
  show BOOLEAN DEFAULT TRUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  FOREIGN KEY (parent_id) REFERENCES menus(id)
);
```

### 2. 后端实现

#### 2.1 菜单模型

`models/Menu.js`定义了菜单的数据结构和关联关系：
- 支持自关联的父子菜单关系
- 包含菜单的名称、唯一标识、路径、图标等属性
- 支持菜单排序和状态控制

#### 2.2 菜单控制器

`controllers/menuController.js`实现了菜单相关的业务逻辑：
- `getMenus`: 获取当前用户的菜单列表（考虑权限）
- `getAllMenus`: 获取所有菜单（仅管理员可用）

#### 2.3 菜单路由

`routes/menus.js`定义了菜单相关的API接口：
- `GET /api/menus`: 获取当前用户的菜单列表
- `GET /api/menus/all`: 获取所有菜单（管理员专用）

#### 2.4 API文档集成

菜单API已集成到Swagger文档中，可通过`http://localhost:3000/api-docs/#/`访问查看。

### 3. 前端实现

#### 3.1 API调用

`utils/api.js`中添加了菜单相关的API调用方法：
- `getMenus()`: 获取当前用户的菜单列表
- `getAllMenus()`: 获取所有菜单（管理员专用）

#### 3.2 动态菜单渲染

`components/Layout.vue`组件实现了动态菜单的加载和渲染：
- 使用`onMounted`生命周期钩子加载菜单数据
- 支持菜单点击事件处理和路由跳转
- 实现了图标映射和菜单格式化功能
- 提供了默认菜单作为API请求失败时的备用方案

## 菜单数据初始化

### 方法一：直接执行SQL脚本

1. 登录MySQL数据库
2. 选择`insurance_data`数据库
3. 执行`scripts/init_menus.sql`脚本

```bash
mysql -u root -p insurance_data < scripts/init_menus.sql
```

### 方法二：使用Node.js脚本

1. 确保已安装依赖：`npm install mysql2 dotenv`
2. 执行`seed_menus.js`脚本：

```bash
node scripts/seed_menus.js
```

## 菜单列表

系统包含以下菜单：

1. **仪表板**
2. **数据揽仓**
3. **监管任务**
4. **待安装任务**
5. **监管任务已结项**
6. **投保客户单**
   - 参保申请
7. **生资保单**
   - 生资保单列表
8. **险种管理**
   - 险种管理
9. **客户理赔**
   - 客户理赔
10. **消息通知**
11. **子账号管理**
12. **系统设置**
13. **个人中心**

## 使用说明

1. 确保后端服务正常运行
2. 确保菜单数据已正确初始化到数据库
3. 登录系统后，系统会自动从后端API获取并渲染菜单
4. 点击菜单项会根据配置的路径进行路由跳转

## 扩展建议

1. 可以扩展菜单模型，添加更多的权限控制字段
2. 实现菜单管理界面，支持动态增删改查菜单
3. 优化菜单缓存机制，减少重复的API请求
4. 完善菜单的国际化支持