220 lines
5.1 KiB
Markdown
220 lines
5.1 KiB
Markdown
# 菜单初始化指南
|
||
|
||
## 📋 概述
|
||
|
||
菜单初始化脚本会根据项目的前端路由配置，自动创建菜单数据到数据库中。脚本会创建树形结构的菜单，包括顶级菜单和子菜单。
|
||
|
||
## 🚀 使用方法
|
||
|
||
### 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)
|