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

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

问题描述

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

问题原因分析

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

1. 路由跳转时的自动折叠逻辑

文件位置： ruoyi-plus-soybean/src/hooks/common/router.ts

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

原始代码：

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屏幕也被误判为移动端。

原始代码：

const isMobile = breakpoints.smaller('md'); // 768px

修复方案

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

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

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

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

修改说明：

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

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

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

// 修改前
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. 响应式测试：通过浏览器开发者工具调整窗口大小，测试不同断点的行为

回滚方案

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

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

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

总结

通过调整两个关键断点，成功解决了PC端菜单自动折叠的问题：

1. 路由跳转自动折叠断点：640px → 480px
2. 移动端检测断点：768px → 640px

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