RuoYi-Vue-Plus/前端菜单自动折叠问题修复报告.md

# 前端菜单自动折叠问题修复报告

## 问题描述

在当前默认设置下，点击左侧二级菜单打开页面后，左侧菜单会自动折叠，影响用户体验。

## 问题原因分析

经过代码分析，发现有两个地方导致菜单自动折叠：

### 1. 路由跳转时的自动折叠逻辑
**文件位置：** `ruoyi-plus-soybean/src/hooks/common/router.ts`

在 `routerPushByKeyWithMetaQuery` 函数中，当点击菜单项进行路由跳转时，会检测屏幕宽度，如果小于设定值就自动折叠菜单。

**原始代码：**
```typescript
const isTrueMobile = window.innerWidth < 640;
if (isTrueMobile && !appStore.siderCollapse) {
  appStore.setSiderCollapse(true);
}
```

### 2. 移动端检测断点设置
**文件位置：** `ruoyi-plus-soybean/src/store/modules/app/index.ts`

使用了 `breakpoints.smaller('md')` 来检测移动端，'md' 对应768px，这个断点过于宽松，导致普通PC屏幕也被误判为移动端。

**原始代码：**
```typescript
const isMobile = breakpoints.smaller('md'); // 768px
```

## 修复方案

### 修复1：优化路由跳转时的自动折叠逻辑

**修改文件：** `ruoyi-plus-soybean/src/hooks/common/router.ts`

```typescript
// 修改前
const isTrueMobile = window.innerWidth < 640;

// 修改后  
const isTrueMobile = window.innerWidth < 480;
```

**修改说明：**
- 将自动折叠的断点从640px降低到480px
- 只有在真正的手机设备上（屏幕宽度小于480px）才会自动折叠
- 保留了移动端的自动折叠功能，同时避免了PC端的误触发

### 修复2：调整移动端检测断点

**修改文件：** `ruoyi-plus-soybean/src/store/modules/app/index.ts`

```typescript
// 修改前
const isMobile = breakpoints.smaller('md'); // 768px

// 修改后
const isMobile = breakpoints.smaller('sm'); // 640px
```

**修改说明：**
- 将移动端检测断点从'md'(768px)改为'sm'(640px)
- 减少了普通PC屏幕被误判为移动端的情况
- 保持了对真正移动设备的正确识别

## 断点对照表

| 断点名称 | 屏幕宽度 | 设备类型        |
| -------- | -------- | --------------- |
| xs       | < 480px  | 手机            |
| sm       | < 640px  | 大屏手机/小平板 |
| md       | < 768px  | 平板            |
| lg       | < 1024px | 小屏笔记本      |
| xl       | < 1280px | 桌面显示器      |

## 修复效果

### 修复前
- 在768px以下的屏幕上，菜单会自动折叠
- 点击菜单项时，640px以下的屏幕会触发自动折叠
- 普通笔记本电脑（1366x768）可能被误判为移动端

### 修复后
- 在640px以下的屏幕上，菜单会自动折叠
- 点击菜单项时，只有480px以下的屏幕才会触发自动折叠
- 大部分PC设备不会再被误判为移动端
- 保留了对真正移动设备的支持

## 测试建议

1. **PC端测试**：在1920x1080、1366x768等常见PC分辨率下测试，确认菜单不会自动折叠
2. **平板测试**：在768px-1024px范围内测试，确认行为符合预期
3. **手机测试**：在480px以下测试，确认自动折叠功能正常工作
4. **响应式测试**：通过浏览器开发者工具调整窗口大小，测试不同断点的行为

## 回滚方案

如果需要回滚修改，可以将代码恢复为：

```typescript
// router.ts
const isTrueMobile = window.innerWidth < 640;

// app/index.ts  
const isMobile = breakpoints.smaller('md');
```

## 总结

通过调整两个关键断点，成功解决了PC端菜单自动折叠的问题：
1. 路由跳转自动折叠断点：640px → 480px
2. 移动端检测断点：768px → 640px

这些修改保持了移动端的良好体验，同时解决了PC端的误触发问题。