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

## 问题描述

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

## 问题原因

**根本原因：** 数据库中这两个路由的 `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. ✅ 重新登录测试

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