# 菜单初始化指南

## 📋 概述

菜单初始化脚本会根据项目的前端路由配置，自动创建菜单数据到数据库中。脚本会创建树形结构的菜单，包括顶级菜单和子菜单。

## 🚀 使用方法

### 1. 执行初始化脚本

在 `backend` 目录下执行：

```bash
pnpm init:menus
```

或者使用 npm：

```bash
npm run init:menus
```

### 2. 脚本功能

脚本会根据 `frontend/src/router/index.ts` 中的路由配置，自动创建以下菜单结构：

```
仪表盘 (/dashboard)
系统管理 (/system)
├── 用户管理 (/system/users)
├── 角色管理 (/system/roles)
├── 菜单管理 (/system/menus)
├── 数据字典 (/system/dict)
├── 系统配置 (/system/config)
└── 日志记录 (/system/logs)
```

## 📝 菜单数据结构

### 顶级菜单

1. **仪表盘**
   - 路径: `/dashboard`
   - 图标: `DashboardOutlined`
   - 组件: `dashboard/Index`
   - 排序: 1

2. **系统管理**
   - 路径: `/system`
   - 图标: `SettingOutlined`
   - 组件: `null` (父菜单)
   - 排序: 10

### 系统管理子菜单

1. **用户管理**
   - 路径: `/system/users`
   - 图标: `UserOutlined`
   - 组件: `system/users/Index`
   - 排序: 1

2. **角色管理**
   - 路径: `/system/roles`
   - 图标: `TeamOutlined`
   - 组件: `system/roles/Index`
   - 排序: 2

3. **菜单管理**
   - 路径: `/system/menus`
   - 图标: `MenuOutlined`
   - 组件: `system/menus/Index`
   - 排序: 3

4. **数据字典**
   - 路径: `/system/dict`
   - 图标: `BookOutlined`
   - 组件: `system/dict/Index`
   - 排序: 4

5. **系统配置**
   - 路径: `/system/config`
   - 图标: `ToolOutlined`
   - 组件: `system/config/Index`
   - 排序: 5

6. **日志记录**
   - 路径: `/system/logs`
   - 图标: `FileTextOutlined`
   - 组件: `system/logs/Index`
   - 排序: 6

## 🔄 脚本特性

### 1. 幂等性

- 脚本支持重复执行
- 如果菜单已存在（相同名称和父菜单），会更新现有菜单
- 如果菜单不存在，会创建新菜单

### 2. 树形结构

- 自动处理父子菜单关系
- 递归创建子菜单
- 保持菜单层级结构

### 3. 数据更新

- 如果菜单已存在，会更新以下字段：
  - 路径 (path)
  - 图标 (icon)
  - 组件路径 (component)
  - 排序 (sort)
  - 有效状态 (validState)

## ⚙️ 自定义菜单数据

如果需要修改菜单数据，可以编辑 `backend/scripts/init-menus.ts` 文件中的 `menus` 数组：

```typescript
const menus = [
  {
    name: '菜单名称',
    path: '/路由路径',
    icon: 'IconOutlined', // Ant Design Icons 图标名称
    component: '组件路径', // 相对于 views 目录的路径
    parentId: null, // null 表示顶级菜单
    sort: 1, // 排序值，越小越靠前
    children: [
      // 子菜单数组（可选）
      // ...
    ],
  },
];
```

## 🗑️ 清空现有菜单（可选）

如果需要清空所有现有菜单后重新创建，可以取消注释脚本中的以下代码：

```typescript
// 清空现有菜单
console.log('🗑️  清空现有菜单...');
await prisma.menu.deleteMany({});
console.log('✅ 已清空现有菜单\n');
```

**注意**: 清空菜单会删除所有现有菜单数据，请谨慎操作！

## 📊 执行结果示例

脚本执行成功后会显示：

```
🚀 开始初始化菜单数据...

📝 创建菜单...

  ✓ 仪表盘 (/dashboard)
  ✓ 系统管理 (/system)
  ✓ 用户管理 (/system/users)
  ✓ 角色管理 (/system/roles)
  ✓ 菜单管理 (/system/menus)
  ✓ 数据字典 (/system/dict)
  ✓ 系统配置 (/system/config)
  ✓ 日志记录 (/system/logs)

🔍 验证结果...

📊 初始化结果:
  顶级菜单数量: 2
  总菜单数量: 8

📋 菜单结构:
├─ 仪表盘 (/dashboard)
├─ 系统管理 (/system)
│  ├─ 用户管理 (/system/users)
│  ├─ 角色管理 (/system/roles)
│  ├─ 菜单管理 (/system/menus)
│  ├─ 数据字典 (/system/dict)
│  ├─ 系统配置 (/system/config)
│  └─ 日志记录 (/system/logs)

✅ 菜单初始化完成！

🎉 菜单初始化脚本执行完成！
```

## 🔍 验证菜单数据

初始化完成后，可以通过以下方式验证：

### 方式一：使用 Prisma Studio

```bash
pnpm prisma:studio
```

在浏览器中打开 Prisma Studio，查看 `menus` 表的数据。

### 方式二：通过菜单管理页面

1. 登录系统
2. 访问"系统管理" -> "菜单管理"
3. 查看菜单列表，确认菜单已正确创建

## ⚠️ 注意事项

1. **数据库连接**: 确保 `.env` 文件中的 `DATABASE_URL` 配置正确
2. **Prisma Client**: 确保已运行 `pnpm prisma:generate` 生成 Prisma Client
3. **数据库迁移**: 确保已运行 `pnpm prisma:migrate` 创建数据库表结构
4. **图标名称**: 图标名称必须是有效的 Ant Design Icons 组件名称
5. **路径格式**: 路由路径必须以 `/` 开头
6. **组件路径**: 组件路径是相对于 `frontend/src/views/` 目录的路径

## 🔗 相关文档

- [数据库配置指南](./DATABASE_SETUP.md)
- [管理员账户初始化](./ADMIN_ACCOUNT.md)
- [路由配置说明](../frontend/src/router/index.ts)