tonytech/library-picturebook-activity

Fork 0

王伟志 7800b7786d feat: init

2025-11-23 14:04:20 +08:00

5.1 KiB

Raw Blame History

菜单初始化指南

📋 概述

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

🚀 使用方法

1. 执行初始化脚本

在 backend 目录下执行：

pnpm init:menus

或者使用 npm：

npm run init:menus

2. 脚本功能

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

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

📝 菜单数据结构

顶级菜单

仪表盘
- 路径: /dashboard
- 图标: DashboardOutlined
- 组件: dashboard/Index
- 排序: 1
系统管理
- 路径: /system
- 图标: SettingOutlined
- 组件: null (父菜单)
- 排序: 10

系统管理子菜单

用户管理
- 路径: /system/users
- 图标: UserOutlined
- 组件: system/users/Index
- 排序: 1
角色管理
- 路径: /system/roles
- 图标: TeamOutlined
- 组件: system/roles/Index
- 排序: 2
菜单管理
- 路径: /system/menus
- 图标: MenuOutlined
- 组件: system/menus/Index
- 排序: 3
数据字典
- 路径: /system/dict
- 图标: BookOutlined
- 组件: system/dict/Index
- 排序: 4
系统配置
- 路径: /system/config
- 图标: ToolOutlined
- 组件: system/config/Index
- 排序: 5
日志记录
- 路径: /system/logs
- 图标: FileTextOutlined
- 组件: system/logs/Index
- 排序: 6

🔄 脚本特性

1. 幂等性

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

2. 树形结构

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

3. 数据更新

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

⚙️ 自定义菜单数据

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

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

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

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

// 清空现有菜单
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

pnpm prisma:studio

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

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

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

⚠️ 注意事项

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

5.1 KiB Raw Blame History Unescape Escape