admin/FIX_INSTRUCTIONS.md

菜单显示问题修复说明

问题原因

在实现动态路由权限时，我们将路由名称从连字符改为下划线格式：

• user-manage → user_manage
• my-device → my_device
• my-application → my_application

但是，组件路径(component)必须与实际文件夹结构保持一致，而实际文件夹使用的是连字符：

• src/views/user-manage/
• src/views/my-device/
• src/views/my-application/

这导致前端无法找到对应的组件文件，出现错误和菜单显示异常。

解决方案

保持以下规则：

1. 路由名称(name) 使用下划线：user_manage, my_device, my_application
2. 组件路径(component) 使用连字符匹配实际文件夹：view.user-manage, view.my-device

修复步骤

方法一：使用批处理脚本（推荐）

1. 双击运行 fix_database.bat
2. 按任意键开始执行
3. 等待修复完成
4. 重启后端服务
5. 刷新浏览器测试

方法二：手动执行 SQL

1. 打开 MySQL 客户端或命令行

2. 连接到数据库：

   mysql -h localhost -P 3306 -u root -proot soybean_admin
   

3. 执行 SQL 文件：

   source EXECUTE_THIS_FIX.sql;
   

   或者直接复制 EXECUTE_THIS_FIX.sql 中的 SQL 语句执行

4. 重启后端服务

5. 刷新浏览器测试

验证修复

执行 SQL 后，应该看到类似以下的结果：

路由名称(下划线)	路径	组件路径(连字符)
user_manage	/user-manage	layout.base$view.user-manage
user_manage_list	/user-manage/list	layout.base$view.user-manage_list
my_device	/my-device	layout.base$view.my-device
my_device_status	/my-device/status	layout.base$view.my-device_status

重启服务

修复数据库后，必须重启后端服务：

cd backend
start.bat

测试

1. 清除浏览器缓存（Ctrl+Shift+Delete）
2. 强制刷新页面（Ctrl+Shift+R）
3. 重新登录
4. 检查菜单是否正常显示
5. 检查是否还有重复菜单
6. 检查父子菜单层级是否正确

如果还有问题

如果修复后仍有问题，请检查：

1. 后端日志中是否有错误信息
2. 浏览器控制台是否有错误
3. 数据库中的 component 字段是否已正确更新
4. 是否已重启后端服务
5. 是否已清除浏览器缓存

技术细节

路由名称规则（用于权限判断）

• 使用下划线分隔
• 父菜单：0-1个下划线（如 user_manage, device）
• 子菜单：2个或以上下划线（如 user_manage_list, device_online）

组件路径规则（用于加载 Vue 组件）

• 必须与实际文件夹结构完全一致
• 文件夹使用连字符：user-manage, my-device
• 子文件夹也使用连字符：power-control, my-list
• 格式：layout.base$view.{folder}_{subfolder}

示例对照表

路由名称	文件夹路径	组件路径
user_manage	src/views/user-manage/	layout.base$view.user-manage
user_manage_list	src/views/user-manage/list/	layout.base$view.user-manage_list
my_device	src/views/my-device/	layout.base$view.my-device
my_device_status	src/views/my-device/status/	layout.base$view.my-device_status
my_device_power	src/views/my-device/power-control/	layout.base$view.my-device_power-control