docs: 添加RuoYi系统菜单恢复指南
## 文档内容 ### 问题描述 用户重新登录后缺少RuoYi系统管理菜单（系统管理、系统监控、系统工具） ### 根本原因 1. 前端菜单硬编码，只包含盘古业务菜单 2. pangu项目缺少RuoYi菜单管理服务 3. 数据库权限正常（admin有118个菜单权限） ### 解决方案 在前端直接添加RuoYi系统菜单配置（Commit 885f578） ### 文档包含 - ✅ 详细问题分析 - ✅ 完整修改步骤 - ✅ 验证方法（重启服务、清缓存） - ✅ 常见问题排查（4个Q&A） - ✅ 后续规划（短中长期） - ✅ 技术架构对比（硬编码 vs 动态菜单） - ✅ 相关文件清单 ### 关键操作指引 1. 重启前后端服务（必须！） 2. 清除浏览器缓存 3. 验证27个菜单显示 4. 测试占位页面 --- 作者：pangu
This commit is contained in:
parent
885f578082
commit
9a9be3247d
|
|
@ -0,0 +1,521 @@
|
|||
# RuoYi系统菜单恢复指南
|
||||
|
||||
> 文档版本：v1.0
|
||||
> 创建日期：2026-02-01
|
||||
> 作者：pangu
|
||||
|
||||
---
|
||||
|
||||
## 问题描述
|
||||
|
||||
用户重新登录后，管理后台左侧菜单**只显示盘古业务菜单**，缺少RuoYi系统管理菜单（系统管理、系统监控、系统工具）。
|
||||
|
||||
### 缺失的菜单模块
|
||||
|
||||
| 模块 | 子菜单数量 | 状态 |
|
||||
|------|-----------|------|
|
||||
| 系统管理 | 9个 | ❌ 缺失 |
|
||||
| 系统监控 | 6个 | ❌ 缺失 |
|
||||
| 系统工具 | 3个 | ❌ 缺失 |
|
||||
|
||||
---
|
||||
|
||||
## 根本原因分析
|
||||
|
||||
### 1. 前端菜单硬编码
|
||||
|
||||
**问题**：`pangu-ui/src/layout/components/Sidebar.vue`中菜单是硬编码的，只包含盘古业务菜单，没有RuoYi系统菜单。
|
||||
|
||||
**代码位置**：
|
||||
```vue
|
||||
<!-- 原菜单只有这些 -->
|
||||
<el-menu-item index="/dashboard">首页</el-menu-item>
|
||||
<el-menu-item index="/school">学校管理</el-menu-item>
|
||||
<el-menu-item index="/member">会员管理</el-menu-item>
|
||||
<el-menu-item index="/student">学生管理</el-menu-item>
|
||||
<el-menu-item index="/application">应用管理</el-menu-item>
|
||||
<el-sub-menu index="base">基础数据（4个子菜单）</el-sub-menu>
|
||||
```
|
||||
|
||||
### 2. 缺少后端菜单管理服务
|
||||
|
||||
**现状**：pangu项目没有包含RuoYi的菜单管理功能（Controller/Service/Mapper）。
|
||||
|
||||
**对比**：
|
||||
- ❌ pangu项目：无`SysMenuController`、`ISysMenuService`、`SysMenuMapper`
|
||||
- ✅ RuoYi原项目：有完整的菜单管理模块（在`ruoyi-backend`目录）
|
||||
|
||||
### 3. 数据库权限状态
|
||||
|
||||
**验证结果**：✅ 数据库权限**正常**
|
||||
|
||||
```sql
|
||||
-- admin角色菜单权限：118个 ✅
|
||||
SELECT COUNT(*) FROM sys_role_menu WHERE role_id = 1;
|
||||
-- 结果：118
|
||||
|
||||
-- 菜单总数：118个 ✅
|
||||
SELECT COUNT(*) FROM sys_menu;
|
||||
-- 结果：118（72个RuoYi + 46个Pangu）
|
||||
|
||||
-- admin用户角色：超级管理员 ✅
|
||||
SELECT role_name FROM sys_role
|
||||
JOIN sys_user_role ON sys_role.role_id = sys_user_role.role_id
|
||||
WHERE sys_user_role.user_id = 1;
|
||||
-- 结果：超级管理员
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 解决方案
|
||||
|
||||
### 方案一：前端直接添加菜单（已实施）✅
|
||||
|
||||
**优点**：快速恢复菜单显示，无需后端开发
|
||||
**缺点**：所有用户看到相同菜单，无法根据角色动态控制
|
||||
|
||||
#### 修改文件
|
||||
|
||||
##### 1. Sidebar.vue - 添加菜单项
|
||||
|
||||
**文件位置**：`pangu-ui/src/layout/components/Sidebar.vue`
|
||||
|
||||
**修改内容**：
|
||||
```vue
|
||||
<!-- 系统管理子菜单 -->
|
||||
<el-sub-menu index="system">
|
||||
<template #title>
|
||||
<el-icon><Tools /></el-icon>
|
||||
<span>系统管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/system/user">用户管理</el-menu-item>
|
||||
<el-menu-item index="/system/role">角色管理</el-menu-item>
|
||||
<el-menu-item index="/system/menu">菜单管理</el-menu-item>
|
||||
<el-menu-item index="/system/dept">部门管理</el-menu-item>
|
||||
<el-menu-item index="/system/post">岗位管理</el-menu-item>
|
||||
<el-menu-item index="/system/dict">字典管理</el-menu-item>
|
||||
<el-menu-item index="/system/config">参数设置</el-menu-item>
|
||||
<el-menu-item index="/system/notice">通知公告</el-menu-item>
|
||||
<el-menu-item index="/system/log">日志管理</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 系统监控子菜单 -->
|
||||
<el-sub-menu index="monitor">
|
||||
<template #title>
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>系统监控</span>
|
||||
</template>
|
||||
<el-menu-item index="/monitor/online">在线用户</el-menu-item>
|
||||
<el-menu-item index="/monitor/job">定时任务</el-menu-item>
|
||||
<el-menu-item index="/monitor/druid">数据监控</el-menu-item>
|
||||
<el-menu-item index="/monitor/server">服务监控</el-menu-item>
|
||||
<el-menu-item index="/monitor/cache">缓存监控</el-menu-item>
|
||||
<el-menu-item index="/monitor/cacheList">缓存列表</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 系统工具子菜单 -->
|
||||
<el-sub-menu index="tool">
|
||||
<template #title>
|
||||
<el-icon><Operation /></el-icon>
|
||||
<span>系统工具</span>
|
||||
</template>
|
||||
<el-menu-item index="/tool/build">表单构建</el-menu-item>
|
||||
<el-menu-item index="/tool/gen">代码生成</el-menu-item>
|
||||
<el-menu-item index="/tool/swagger">系统接口</el-menu-item>
|
||||
</el-sub-menu>
|
||||
```
|
||||
|
||||
**图标导入**：
|
||||
```javascript
|
||||
import { Grid, HomeFilled, Monitor, Operation, School, Setting, Tools, User, UserFilled } from '@element-plus/icons-vue'
|
||||
```
|
||||
|
||||
##### 2. router/index.js - 添加路由
|
||||
|
||||
**文件位置**：`pangu-ui/src/router/index.js`
|
||||
|
||||
**新增18个路由**：
|
||||
```javascript
|
||||
// 系统管理路由（9个）
|
||||
{ path: 'system/user', component: () => import('@/views/system/user/index.vue') },
|
||||
{ path: 'system/role', component: () => import('@/views/system/role/index.vue') },
|
||||
{ path: 'system/menu', component: () => import('@/views/system/menu/index.vue') },
|
||||
// ... 其他6个
|
||||
|
||||
// 系统监控路由（6个）
|
||||
{ path: 'monitor/online', component: () => import('@/views/monitor/online/index.vue') },
|
||||
// ... 其他5个
|
||||
|
||||
// 系统工具路由（3个）
|
||||
{ path: 'tool/build', component: () => import('@/views/tool/build/index.vue') },
|
||||
// ... 其他2个
|
||||
```
|
||||
|
||||
##### 3. 创建占位页面
|
||||
|
||||
**批量生成工具**：`scripts/create_placeholder_pages.sh`
|
||||
|
||||
**生成的页面**：
|
||||
```
|
||||
pangu-ui/src/views/
|
||||
├── system/ # 系统管理（9个页面）
|
||||
│ ├── user/index.vue
|
||||
│ ├── role/index.vue
|
||||
│ ├── menu/index.vue
|
||||
│ ├── dept/index.vue
|
||||
│ ├── post/index.vue
|
||||
│ ├── dict/index.vue
|
||||
│ ├── config/index.vue
|
||||
│ ├── notice/index.vue
|
||||
│ └── log/index.vue
|
||||
├── monitor/ # 系统监控（6个页面）
|
||||
│ ├── online/index.vue
|
||||
│ ├── job/index.vue
|
||||
│ ├── druid/index.vue
|
||||
│ ├── server/index.vue
|
||||
│ ├── cache/index.vue
|
||||
│ └── cacheList/index.vue
|
||||
└── tool/ # 系统工具（3个页面）
|
||||
├── build/index.vue
|
||||
├── gen/index.vue
|
||||
└── swagger/index.vue
|
||||
```
|
||||
|
||||
**占位页面特性**：
|
||||
- 使用`el-result`组件显示"功能开发中"提示
|
||||
- 列出该功能的计划功能点
|
||||
- 提供"返回首页"按钮
|
||||
- 统一的UI风格
|
||||
|
||||
#### Git提交记录
|
||||
|
||||
```bash
|
||||
Commit: 885f578
|
||||
Message: feat: 添加RuoYi系统管理菜单和占位页面
|
||||
Files: 20个文件（2个修改，18个新增）
|
||||
Status: ✅ 已Push到远程仓库
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验证方法
|
||||
|
||||
### 1. 重启前后端服务（必须！）
|
||||
|
||||
**后端重启**：
|
||||
```bash
|
||||
# 停止旧进程
|
||||
ps aux | grep "pangu-admin.jar" | grep -v grep | awk '{print $2}' | xargs kill -9
|
||||
|
||||
# 启动新服务
|
||||
cd /path/to/pangu-user-platform
|
||||
nohup java -jar pangu-admin/target/pangu-admin.jar > /tmp/pangu-backend.log 2>&1 &
|
||||
|
||||
# 查看日志
|
||||
tail -f /tmp/pangu-backend.log
|
||||
# 等待出现：Started PanguApplication in X seconds
|
||||
```
|
||||
|
||||
**前端重启**：
|
||||
```bash
|
||||
# 停止旧进程
|
||||
ps aux | grep -E "vite|npm.*dev" | grep -v grep | awk '{print $2}' | xargs kill -9
|
||||
|
||||
# 启动新服务
|
||||
cd /path/to/pangu-user-platform/pangu-ui
|
||||
nohup npm run dev > /tmp/pangu-frontend.log 2>&1 &
|
||||
|
||||
# 查看日志
|
||||
tail -f /tmp/pangu-frontend.log
|
||||
# 等待出现：VITE v7.3.1 ready in X ms
|
||||
```
|
||||
|
||||
### 2. 清除浏览器缓存
|
||||
|
||||
**方法一：强制刷新**
|
||||
- Mac：`Cmd + Shift + R`
|
||||
- Windows：`Ctrl + Shift + R`
|
||||
|
||||
**方法二：清除缓存**
|
||||
1. 打开浏览器开发者工具（F12）
|
||||
2. 右键点击刷新按钮
|
||||
3. 选择"清空缓存并硬性重新加载"
|
||||
|
||||
**方法三：无痕模式**
|
||||
1. 打开无痕/隐私浏览窗口
|
||||
2. 访问 http://localhost:3000
|
||||
3. 重新登录测试
|
||||
|
||||
### 3. 验证菜单显示
|
||||
|
||||
登录后，左侧菜单应显示：
|
||||
|
||||
```
|
||||
盘古用户平台
|
||||
├─ 首页 ✅
|
||||
├─ 学校管理 ✅
|
||||
├─ 会员管理 ✅
|
||||
├─ 学生管理 ✅
|
||||
├─ 应用管理 ✅
|
||||
├─ 基础数据 ✅
|
||||
│ ├─ 年级管理
|
||||
│ ├─ 班级管理
|
||||
│ ├─ 科目管理
|
||||
│ └─ 区域管理
|
||||
├─ 系统管理 🆕
|
||||
│ ├─ 用户管理
|
||||
│ ├─ 角色管理
|
||||
│ ├─ 菜单管理
|
||||
│ ├─ 部门管理
|
||||
│ ├─ 岗位管理
|
||||
│ ├─ 字典管理
|
||||
│ ├─ 参数设置
|
||||
│ ├─ 通知公告
|
||||
│ └─ 日志管理
|
||||
├─ 系统监控 🆕
|
||||
│ ├─ 在线用户
|
||||
│ ├─ 定时任务
|
||||
│ ├─ 数据监控
|
||||
│ ├─ 服务监控
|
||||
│ ├─ 缓存监控
|
||||
│ └─ 缓存列表
|
||||
└─ 系统工具 🆕
|
||||
├─ 表单构建
|
||||
├─ 代码生成
|
||||
└─ 系统接口
|
||||
```
|
||||
|
||||
**菜单总数**：27个（9个盘古业务 + 18个RuoYi系统）
|
||||
|
||||
### 4. 功能测试
|
||||
|
||||
**点击任意RuoYi菜单**：
|
||||
- ✅ 应显示"功能开发中"占位页面
|
||||
- ❌ 不应显示404错误或空白页
|
||||
|
||||
**占位页面包含**：
|
||||
- 警告图标和提示文字
|
||||
- 功能说明列表
|
||||
- "返回首页"按钮
|
||||
|
||||
---
|
||||
|
||||
## 常见问题排查
|
||||
|
||||
### Q1: 刷新后菜单还是没有
|
||||
|
||||
**可能原因**：
|
||||
1. 前后端服务未重启
|
||||
2. 浏览器缓存未清除
|
||||
3. 代码未正确更新
|
||||
|
||||
**排查步骤**：
|
||||
```bash
|
||||
# 1. 检查后端服务启动时间
|
||||
ps aux | grep "pangu-admin.jar" | grep -v grep
|
||||
# 确认PID和启动时间是否是刚重启的
|
||||
|
||||
# 2. 检查前端服务启动时间
|
||||
ps aux | grep "vite" | grep -v grep
|
||||
# 确认启动时间
|
||||
|
||||
# 3. 检查代码是否最新
|
||||
cd /path/to/pangu-user-platform
|
||||
git log -1 --oneline
|
||||
# 应该显示：885f578 feat: 添加RuoYi系统管理菜单和占位页面
|
||||
|
||||
# 4. 检查文件是否存在
|
||||
ls pangu-ui/src/views/system/
|
||||
# 应该显示：config dept dict log menu notice post role user
|
||||
|
||||
# 5. 使用无痕模式测试
|
||||
# 打开浏览器无痕窗口，访问 http://localhost:3000
|
||||
```
|
||||
|
||||
### Q2: 点击菜单显示404
|
||||
|
||||
**原因**：路由配置或页面文件缺失
|
||||
|
||||
**解决**：
|
||||
```bash
|
||||
# 重新生成占位页面
|
||||
cd /path/to/pangu-user-platform
|
||||
./scripts/create_placeholder_pages.sh
|
||||
|
||||
# 重启前端服务
|
||||
ps aux | grep "vite" | grep -v grep | awk '{print $2}' | xargs kill -9
|
||||
cd pangu-ui && npm run dev
|
||||
```
|
||||
|
||||
### Q3: 菜单显示但样式异常
|
||||
|
||||
**原因**：图标导入缺失
|
||||
|
||||
**检查**：
|
||||
```bash
|
||||
# 查看Sidebar.vue的import语句
|
||||
grep "import.*icons-vue" pangu-ui/src/layout/components/Sidebar.vue
|
||||
# 应该包含：Monitor, Operation, Tools
|
||||
```
|
||||
|
||||
**修复**：
|
||||
如果图标缺失，手动添加：
|
||||
```vue
|
||||
import { Grid, HomeFilled, Monitor, Operation, School, Setting, Tools, User, UserFilled } from '@element-plus/icons-vue'
|
||||
```
|
||||
|
||||
### Q4: 前端启动报错
|
||||
|
||||
**常见错误**：
|
||||
```
|
||||
Failed to resolve import "@/views/system/user/index.vue"
|
||||
```
|
||||
|
||||
**解决**：
|
||||
```bash
|
||||
# 确认文件存在
|
||||
ls -la pangu-ui/src/views/system/user/index.vue
|
||||
|
||||
# 如果不存在，重新生成
|
||||
./scripts/create_placeholder_pages.sh
|
||||
|
||||
# 重启前端
|
||||
cd pangu-ui
|
||||
rm -rf node_modules/.vite
|
||||
npm run dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 后续规划
|
||||
|
||||
### 短期（1-2周）
|
||||
|
||||
**优先级P0：实现核心管理功能**
|
||||
- [ ] 用户管理（查询、新增、编辑、删除、角色分配）
|
||||
- [ ] 角色管理（查询、新增、编辑、删除、权限分配）
|
||||
- [ ] 菜单管理（查询、新增、编辑、删除、树形展示）
|
||||
|
||||
### 中期（1个月）
|
||||
|
||||
**优先级P1：完善系统管理**
|
||||
- [ ] 部门管理
|
||||
- [ ] 岗位管理
|
||||
- [ ] 字典管理
|
||||
- [ ] 参数设置
|
||||
- [ ] 实现动态菜单加载（从后端API获取）
|
||||
|
||||
### 长期（2-3个月）
|
||||
|
||||
**优先级P2：系统监控和工具**
|
||||
- [ ] 在线用户监控
|
||||
- [ ] 定时任务管理
|
||||
- [ ] 数据监控
|
||||
- [ ] 代码生成工具
|
||||
- [ ] 集成完整的RuoYi菜单管理服务
|
||||
|
||||
---
|
||||
|
||||
## 技术架构说明
|
||||
|
||||
### 当前实现（方案一）
|
||||
|
||||
```
|
||||
┌─────────────┐
|
||||
│ 浏览器 │
|
||||
└──────┬──────┘
|
||||
│ HTTP
|
||||
┌──────▼──────┐
|
||||
│ Vue Router │ ← 硬编码路由配置
|
||||
└──────┬──────┘
|
||||
│
|
||||
┌──────▼──────┐
|
||||
│ Sidebar.vue│ ← 硬编码菜单项
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**特点**：
|
||||
- ✅ 快速实现，无需后端开发
|
||||
- ❌ 所有用户看到相同菜单
|
||||
- ❌ 无法根据角色动态控制
|
||||
|
||||
### 未来实现（方案二 - 动态菜单）
|
||||
|
||||
```
|
||||
┌─────────────┐
|
||||
│ 浏览器 │
|
||||
└──────┬──────┘
|
||||
│ HTTP
|
||||
┌──────▼──────────────┐
|
||||
│ Vue Router (动态) │
|
||||
└──────┬──────────────┘
|
||||
│
|
||||
┌──────▼──────┐ ┌──────────────┐
|
||||
│ Sidebar.vue│ ────>│ 后端菜单API │
|
||||
└─────────────┘ └──────┬───────┘
|
||||
│
|
||||
┌──────▼────────┐
|
||||
│ sys_menu表 │
|
||||
│sys_role_menu表│
|
||||
└───────────────┘
|
||||
```
|
||||
|
||||
**流程**：
|
||||
1. 用户登录后，前端调用 `/api/getRouters`
|
||||
2. 后端根据用户角色查询 `sys_role_menu` 获取菜单权限
|
||||
3. 后端返回该用户有权访问的菜单树
|
||||
4. 前端动态生成路由和侧边栏菜单
|
||||
|
||||
**优点**：
|
||||
- ✅ 根据角色动态显示菜单
|
||||
- ✅ 权限控制更精细
|
||||
- ✅ 易于维护和扩展
|
||||
|
||||
**需要实现**：
|
||||
- 后端：`SysMenuController`、`ISysMenuService`、`SysMenuMapper`
|
||||
- 前端：动态路由加载、菜单权限过滤
|
||||
|
||||
---
|
||||
|
||||
## 相关文件清单
|
||||
|
||||
### 修改的文件（2个）
|
||||
- `pangu-ui/src/layout/components/Sidebar.vue` - 菜单组件
|
||||
- `pangu-ui/src/router/index.js` - 路由配置
|
||||
|
||||
### 新增的文件（19个）
|
||||
- `scripts/create_placeholder_pages.sh` - 批量生成工具
|
||||
- `pangu-ui/src/views/system/*` - 9个系统管理占位页面
|
||||
- `pangu-ui/src/views/monitor/*` - 6个系统监控占位页面
|
||||
- `pangu-ui/src/views/tool/*` - 3个系统工具占位页面
|
||||
|
||||
### 相关文档
|
||||
- `docs/07-运维文档/菜单数据恢复指南.md` - 菜单数据库修复
|
||||
- `docs/07-运维文档/角色权限配置指南.md` - 角色权限修复
|
||||
|
||||
---
|
||||
|
||||
## 总结
|
||||
|
||||
本次修复通过在前端直接添加RuoYi系统菜单的方式，快速恢复了管理后台的完整菜单显示。虽然这是一个临时方案（硬编码），但为后续实现动态菜单加载奠定了基础。
|
||||
|
||||
**关键成果**：
|
||||
- ✅ 菜单数量：从9个增加到27个
|
||||
- ✅ RuoYi系统功能：全部可见
|
||||
- ✅ 用户体验：恢复正常
|
||||
- ✅ 代码质量：结构清晰，易于维护
|
||||
|
||||
**后续工作**：
|
||||
- 实现动态菜单加载
|
||||
- 开发完整的RuoYi系统功能
|
||||
- 集成后端菜单管理服务
|
||||
|
||||
---
|
||||
|
||||
**如有问题，请参考本文档的"常见问题排查"章节，或联系技术支持。**
|
||||
|
||||
---
|
||||
|
||||
文档版本：v1.0
|
||||
最后更新：2026-02-01
|
||||
维护团队：pangu
|
||||
Loading…
Reference in New Issue