lvfengfree
44cb688072
- 问题：数据库中路由使用下划线(my_device)，前端期望连字符(my-device) - 导致路由无法匹配，页面全屏显示 - 添加诊断和修复脚本： * check_route_naming.sql - 检查路由命名问题 * fix_my_routes_naming.sql - 修复路由命名 * fix_my_routes_naming.bat - 批处理执行脚本 - 修复后需要重启后端服务和清除浏览器缓存
210 lines
5.2 KiB
Markdown
210 lines
5.2 KiB
Markdown
# 修复"我的设备"和"设备申请"全屏显示问题
|
||
|
||
## 问题描述
|
||
|
||
点击"我的设备"和"设备申请"菜单后，页面全屏显示，侧边栏和顶部导航栏都消失了，只剩下页面内容。
|
||
|
||
## 问题原因
|
||
|
||
**根本原因：** 数据库中这两个路由的 `component` 字段配置不正确。
|
||
|
||
父路由必须使用 `layout.base` 作为 component，这样才能：
|
||
- 显示侧边栏菜单
|
||
- 显示顶部导航栏
|
||
- 在内容区域显示子路由页面
|
||
|
||
如果 component 配置错误或为空，前端会使用默认的全屏布局，导致侧边栏和顶栏消失。
|
||
|
||
## 解决方案
|
||
|
||
### 方法1：使用批处理脚本（推荐）
|
||
|
||
1. 双击运行 `fix_fullscreen_issue.bat`
|
||
2. 等待脚本执行完成
|
||
3. 重启后端服务
|
||
4. 清除浏览器缓存
|
||
5. 重新登录测试
|
||
|
||
### 方法2：手动执行 SQL
|
||
|
||
```bash
|
||
# 在命令行中执行
|
||
mysql -u root -proot < fix_fullscreen_issue.sql
|
||
```
|
||
|
||
然后：
|
||
1. 重启后端服务
|
||
2. 清除浏览器缓存
|
||
3. 重新登录测试
|
||
|
||
## 正确的路由配置
|
||
|
||
### 父路由配置
|
||
|
||
父路由必须使用 `layout.base`：
|
||
|
||
```sql
|
||
-- 我的设备父路由
|
||
route_id: 'my-device'
|
||
name: 'my-device'
|
||
path: '/my-device'
|
||
component: 'layout.base' -- 关键！必须是 layout.base
|
||
meta: '{"title":"我的设备","i18nKey":"route.my_device","icon":"mdi:laptop","order":7}'
|
||
|
||
-- 设备申请父路由
|
||
route_id: 'my-application'
|
||
name: 'my-application'
|
||
path: '/my-application'
|
||
component: 'layout.base' -- 关键！必须是 layout.base
|
||
meta: '{"title":"设备申请","i18nKey":"route.my_application","icon":"mdi:file-document","order":8}'
|
||
```
|
||
|
||
### 子路由配置
|
||
|
||
子路由使用 `view.{folder}_{subfolder}` 格式：
|
||
|
||
```sql
|
||
-- 我的设备子路由
|
||
component: 'view.my-device_status'
|
||
component: 'view.my-device_remote-control'
|
||
component: 'view.my-device_power-control'
|
||
|
||
-- 设备申请子路由
|
||
component: 'view.my-application_apply'
|
||
component: 'view.my-application_my-list'
|
||
```
|
||
|
||
## 关键配置说明
|
||
|
||
### 为什么之前会全屏显示？
|
||
|
||
当路由配置为空或缺失时，前端无法识别正确的布局组件，可能会：
|
||
1. 使用默认的全屏布局
|
||
2. 或者直接渲染页面组件而不包含侧边栏和顶栏
|
||
|
||
### 正确的配置
|
||
|
||
父路由必须设置 `component: 'layout.base'`，这样才能：
|
||
- 显示侧边栏菜单
|
||
- 显示顶部导航栏
|
||
- 在内容区域显示子路由页面
|
||
|
||
子路由使用 `component: 'view.{folder}_{subfolder}'` 格式，例如：
|
||
- `view.my-device_status`
|
||
- `view.my-application_apply`
|
||
|
||
## 验证修复
|
||
|
||
### 1. 检查数据库
|
||
|
||
```sql
|
||
-- 查看"我的设备"路由
|
||
SELECT route_id, name, path, component
|
||
FROM sys_route
|
||
WHERE name LIKE 'my-device%'
|
||
ORDER BY order_num;
|
||
|
||
-- 查看"设备申请"路由
|
||
SELECT route_id, name, path, component
|
||
FROM sys_route
|
||
WHERE name LIKE 'my-application%'
|
||
ORDER BY order_num;
|
||
```
|
||
|
||
应该看到完整的路由配置。
|
||
|
||
### 2. 检查后端日志
|
||
|
||
重启后端后，登录时应该看到：
|
||
|
||
```
|
||
=== 用户路由权限调试 ===
|
||
...
|
||
路由: my-device - 是否允许: true
|
||
路由: my-device_status - 是否允许: true
|
||
路由: my-application - 是否允许: true
|
||
路由: my-application_apply - 是否允许: true
|
||
...
|
||
```
|
||
|
||
### 3. 检查前端
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Network 标签
|
||
3. 登录后查看 `/route/getUserRoutes` 请求的响应
|
||
4. 应该包含 `my-device` 和 `my-application` 路由
|
||
|
||
### 4. 界面验证
|
||
|
||
- 左侧菜单栏显示"我的设备"和"设备申请"
|
||
- 点击菜单后，页面在正常布局中显示（有侧边栏和顶栏）
|
||
- 不再全屏显示
|
||
- 子菜单可以正常展开和访问
|
||
|
||
## 如果还是有问题
|
||
|
||
### 问题A：执行 SQL 失败
|
||
|
||
**可能原因：**
|
||
- MySQL 服务未启动
|
||
- 数据库连接信息不正确（用户名/密码）
|
||
- 数据库 `soybean_admin` 不存在
|
||
|
||
**解决：**
|
||
1. 检查 MySQL 服务是否运行
|
||
2. 确认数据库连接信息：`root/root`
|
||
3. 确认数据库 `soybean_admin` 存在
|
||
|
||
### 问题B：后端没有返回这些路由
|
||
|
||
**可能原因：**
|
||
- 后端未重启
|
||
- 角色权限配置不正确
|
||
|
||
**解决：**
|
||
1. 确保重启了后端服务
|
||
2. 检查角色的 `menus` 字段是否包含这些路由名称：
|
||
|
||
```sql
|
||
-- 检查角色配置
|
||
SELECT role_code, menus FROM sys_role WHERE role_code = 'R_USER';
|
||
```
|
||
|
||
应该包含：`my-device,my-device_status,my-device_remote-control,my-device_power-control,my-application,my-application_apply,my-application_my-list`
|
||
|
||
如果没有，运行：
|
||
```bash
|
||
fix_403_complete.bat
|
||
```
|
||
|
||
### 问题C：前端还是全屏显示
|
||
|
||
**可能原因：**
|
||
- 浏览器缓存未清除
|
||
- 前端路由缓存
|
||
|
||
**解决：**
|
||
1. 完全清除浏览器缓存（Ctrl+Shift+Delete，选择全部时间）
|
||
2. 关闭所有浏览器窗口
|
||
3. 重新打开浏览器
|
||
4. 使用无痕模式测试
|
||
|
||
## 相关文件
|
||
|
||
- `fix_fullscreen_issue.sql` - SQL 修复脚本
|
||
- `fix_fullscreen_issue.bat` - 批处理脚本
|
||
- `fix_403_complete.sql` - 角色权限修复脚本
|
||
- `src/views/my-device/` - "我的设备"页面组件
|
||
- `src/views/my-application/` - "设备申请"页面组件
|
||
- `src/router/elegant/routes.ts` - 前端路由配置（自动生成）
|
||
|
||
## 总结
|
||
|
||
修复步骤：
|
||
1. ✅ 运行 `fix_fullscreen_issue.bat`
|
||
2. ✅ 重启后端服务
|
||
3. ✅ 清除浏览器缓存
|
||
4. ✅ 重新登录测试
|
||
|
||
完成后，"我的设备"和"设备申请"菜单应该正常显示在布局中，不再全屏。
|