admin/修复全屏显示问题说明.md

修复"我的设备"和"设备申请"全屏显示问题

问题描述

点击"我的设备"和"设备申请"菜单后，页面全屏显示，侧边栏和顶部导航栏都消失了，只剩下页面内容。

问题原因

根本原因： 数据库中这两个路由的 component 字段配置不正确。

父路由必须使用 layout.base 作为 component，这样才能：

• 显示侧边栏菜单
• 显示顶部导航栏
• 在内容区域显示子路由页面

如果 component 配置错误或为空，前端会使用默认的全屏布局，导致侧边栏和顶栏消失。

解决方案

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

1. 双击运行 fix_fullscreen_issue.bat
2. 等待脚本执行完成
3. 重启后端服务
4. 清除浏览器缓存
5. 重新登录测试

方法2：手动执行 SQL

# 在命令行中执行
mysql -u root -proot < fix_fullscreen_issue.sql

然后：

1. 重启后端服务
2. 清除浏览器缓存
3. 重新登录测试

正确的路由配置

父路由配置

父路由必须使用 layout.base：

-- 我的设备父路由
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} 格式：

-- 我的设备子路由
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. 检查数据库

-- 查看"我的设备"路由
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 字段是否包含这些路由名称：

-- 检查角色配置
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

如果没有，运行：

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. ✅ 重新登录测试

完成后，"我的设备"和"设备申请"菜单应该正常显示在布局中，不再全屏。