14 KiB

Raw Blame History

RuoYi系统菜单恢复指南

文档版本：v1.0
创建日期：2026-02-01
作者：pangu

问题描述

用户重新登录后，管理后台左侧菜单只显示盘古业务菜单，缺少RuoYi系统管理菜单（系统管理、系统监控、系统工具）。

缺失的菜单模块

模块	子菜单数量	状态
系统管理	9个	❌ 缺失
系统监控	6个	❌ 缺失
系统工具	3个	❌ 缺失

根本原因分析

1. 前端菜单硬编码

问题：frontend/src/layout/components/Sidebar.vue中菜单是硬编码的，只包含盘古业务菜单，没有RuoYi系统菜单。

代码位置：

<!-- 原菜单只有这些 -->
<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. 数据库权限状态

验证结果：✅ 数据库权限正常

-- 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 - 添加菜单项

文件位置：frontend/src/layout/components/Sidebar.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>

图标导入：

import { Grid, HomeFilled, Monitor, Operation, School, Setting, Tools, User, UserFilled } from '@element-plus/icons-vue'

2. router/index.js - 添加路由

文件位置：frontend/src/router/index.js

新增18个路由：

// 系统管理路由（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

生成的页面：

frontend/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提交记录

Commit: 885f578
Message: feat: 添加RuoYi系统管理菜单和占位页面
Files: 20个文件（2个修改，18个新增）
Status: ✅ 已Push到远程仓库

验证方法

1. 重启前后端服务（必须！）

后端重启：

# 停止旧进程
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

前端重启：

# 停止旧进程
ps aux | grep -E "vite|npm.*dev" | grep -v grep | awk '{print $2}' | xargs kill -9

# 启动新服务
cd /path/to/pangu-user-platform/frontend
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

方法二：清除缓存

打开浏览器开发者工具（F12）
右键点击刷新按钮
选择"清空缓存并硬性重新加载"

方法三：无痕模式

打开无痕/隐私浏览窗口
访问 http://localhost:3000
重新登录测试

3. 验证菜单显示

登录后，左侧菜单应显示：

盘古用户平台
├─ 首页 ✅
├─ 学校管理 ✅
├─ 会员管理 ✅
├─ 学生管理 ✅
├─ 应用管理 ✅
├─ 基础数据 ✅
│  ├─ 年级管理
│  ├─ 班级管理
│  ├─ 科目管理
│  └─ 区域管理
├─ 系统管理 🆕
│  ├─ 用户管理
│  ├─ 角色管理
│  ├─ 菜单管理
│  ├─ 部门管理
│  ├─ 岗位管理
│  ├─ 字典管理
│  ├─ 参数设置
│  ├─ 通知公告
│  └─ 日志管理
├─ 系统监控 🆕
│  ├─ 在线用户
│  ├─ 定时任务
│  ├─ 数据监控
│  ├─ 服务监控
│  ├─ 缓存监控
│  └─ 缓存列表
└─ 系统工具 🆕
   ├─ 表单构建
   ├─ 代码生成
   └─ 系统接口

菜单总数：27个（9个盘古业务 + 18个RuoYi系统）

4. 功能测试

点击任意RuoYi菜单：

✅ 应显示"功能开发中"占位页面
❌ 不应显示404错误或空白页

占位页面包含：

警告图标和提示文字
功能说明列表
"返回首页"按钮

常见问题排查

Q1: 刷新后菜单还是没有

可能原因：

前后端服务未重启
浏览器缓存未清除
代码未正确更新

排查步骤：

# 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 frontend/src/views/system/
# 应该显示：config dept dict log menu notice post role user

# 5. 使用无痕模式测试
# 打开浏览器无痕窗口，访问 http://localhost:3000

Q2: 点击菜单显示404

原因：路由配置或页面文件缺失

解决：

# 重新生成占位页面
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 frontend && npm run dev

Q3: 菜单显示但样式异常

原因：图标导入缺失

检查：

# 查看Sidebar.vue的import语句
grep "import.*icons-vue" frontend/src/layout/components/Sidebar.vue
# 应该包含：Monitor, Operation, Tools

修复：如果图标缺失，手动添加：

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"

解决：

# 确认文件存在
ls -la frontend/src/views/system/user/index.vue

# 如果不存在，重新生成
./scripts/create_placeholder_pages.sh

# 重启前端
cd frontend
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表│
                     └───────────────┘

流程：

用户登录后，前端调用 /api/getRouters
后端根据用户角色查询 sys_role_menu 获取菜单权限
后端返回该用户有权访问的菜单树
前端动态生成路由和侧边栏菜单

优点：

✅ 根据角色动态显示菜单
✅ 权限控制更精细
✅ 易于维护和扩展

需要实现：

后端：SysMenuController、ISysMenuService、SysMenuMapper
前端：动态路由加载、菜单权限过滤

关键成果：

✅ 菜单数量：从9个增加到27个
✅ RuoYi系统功能：全部可见
✅ 用户体验：恢复正常
✅ 代码质量：结构清晰，易于维护

后续工作：

实现动态菜单加载
开发完整的RuoYi系统功能
集成后端菜单管理服务

如有问题，请参考本文档的"常见问题排查"章节，或联系技术支持。

文档版本：v1.0
最后更新：2026-02-01
维护团队：pangu

14 KiB

Raw Blame History

RuoYi系统菜单恢复指南

问题描述

缺失的菜单模块

根本原因分析

1. 前端菜单硬编码

2. 缺少后端菜单管理服务

3. 数据库权限状态

解决方案

方案一：前端直接添加菜单（已实施）✅

修改文件

1. Sidebar.vue - 添加菜单项

2. router/index.js - 添加路由

3. 创建占位页面

Git提交记录

验证方法

1. 重启前后端服务（必须！）

2. 清除浏览器缓存

3. 验证菜单显示

4. 功能测试

常见问题排查

Q1: 刷新后菜单还是没有

Q2: 点击菜单显示404

Q3: 菜单显示但样式异常

Q4: 前端启动报错

后续规划

短期（1-2周）

中期（1个月）

长期（2-3个月）

技术架构说明

当前实现（方案一）

未来实现（方案二 - 动态菜单）

相关文件清单

修改的文件（2个）

新增的文件（19个）

相关文档

总结

14 KiB Raw Blame History Unescape Escape

RuoYi系统菜单恢复指南

问题描述

缺失的菜单模块

根本原因分析

1. 前端菜单硬编码

2. 缺少后端菜单管理服务

3. 数据库权限状态

解决方案

方案一：前端直接添加菜单（已实施）✅

修改文件

1. Sidebar.vue - 添加菜单项

2. router/index.js - 添加路由

3. 创建占位页面

Git提交记录

验证方法

1. 重启前后端服务（必须！）

2. 清除浏览器缓存

3. 验证菜单显示

4. 功能测试

常见问题排查

Q1: 刷新后菜单还是没有

Q2: 点击菜单显示404

Q3: 菜单显示但样式异常

Q4: 前端启动报错

后续规划

短期（1-2周）

中期（1个月）

长期（2-3个月）

技术架构说明

当前实现（方案一）

未来实现（方案二 - 动态菜单）

相关文件清单

修改的文件（2个）

新增的文件（19个）

相关文档

总结

14 KiB

Raw Blame History