
遇到这个情况的人应该不少从 Gitee 上把 RuoYi-Vue-Plus 的前端工程 plus-ui 拉下来本地 pnpm dev 跑起来然后用 Microsoft Edge 打开调试结果浏览器窗口在某个页面里就是无法最小化——点任务栏的缩略图没用点右上角的“最小化”按钮也没反应窗口死死钉在屏幕中间。一开始我也以为是 Vue3 项目的 bug排查了一圈才发现问题根源大部分时候不在代码里而是 Edge 自己进入了“假全屏”或者渲染进程异常的状态。下面把整个定位过程和可落地的处理方案完整梳理一遍给遇到同类问题的人一个参考。1. 从 Gitee 拉取 plus-ui 并复现问题先确认一下背景plus-ui 是 RuoYi-Vue-Plus 的现代前端工程技术栈是 Vue3、Vite、Element Plus、Pinia源码托管在 Gitee。如果你还没拉过代码可以直接执行git clone --depth 1 https://gitee.com/JavaLionLi/plus-ui.git cd plus-ui pnpm install pnpm devRuoYi-Vue-Plus 官方推荐使用 pnpm因为这套工程依赖比较多npm 和 yarn 在依赖解析上偶尔会有版本错位的问题。启动后 Vite 默认开在 5173 端口Edge 打开 http://localhost:5173/ 就可以看到登录页。我测试的环境是 Windows 11、Edge 120 版本区间、Node 18、pnpm 8代码分支是 plus-ui 的 develop 分支。复现路径大概是这样进入系统后点击头部导航栏右侧的“全屏”按钮进入全屏再退出全屏然后回到页面里点最小化窗口会发现窗口没有反应。还有一种触发方式是不点全屏按钮只在页面里停留一段时间期间切换几个标签页再切回来Edge 窗口也会偶尔出现最小化按钮失灵。这个现象不是百分之百复现属于“偶发但高频”的窗口状态异常所以处理这类问题必须先记录复现路径不然改代码很容易南辕北辙。2. 别急着改代码先区分“窗口异常”和“页面异常”出现这个问题的第一反应很多人会去看 Vue 组件的 onMounted、定时器、全局事件监听怀疑是不是页面代码把窗口的某些事件拦住了。这里必须先建立一个基本概念网页里的 JavaScript 无法直接控制浏览器标题栏和最小化按钮除非页面调用了 Fullscreen API 把浏览器带进全屏状态或者浏览器自身处于特殊模式。所以接到这个反馈我的习惯是先做几个快速测试判断问题到底在哪一层。2.1 先做四个侧写测试打开一个新的标签页访问 about:blank 或者任意普通网站然后点击最小化按钮。如果别的页面也最小化不了那问题基本和 plus-ui 无关直接转向 Edge 自身和 Windows 系统状态。回到 plus-ui 页面按一次 F11。如果窗口恢复到正常的带标题栏状态说明刚才就是浏览器层面的全屏模式只是你之前没有意识到。注意 F11 的全屏和 Fullscreen API 的全屏不完全一样F11 是浏览器外壳的全屏右键菜单和标题栏都会被隐藏按 F11 退出Fullscreen API 是页面元素铺满屏幕通常按 Esc 退出。再按一次 Esc看屏幕上有没有出现“退出全屏”的气泡提示。如果有说明页面代码里使用了 document.documentElement.requestFullscreen() 把整个页面带进了全屏而窗口最小化按钮在这种状态下是不可用或者根本看不见的。还可以用快捷键窗口系统菜单。按 AltSpace在弹出的菜单里选择“最小化(N)”或者直接按 WinD、WinM。如果快捷键能最小化说明窗口本身没有坏只是 Edge 的 UI 状态显示出了偏差。2.2 根据测试结果决定排查方向做完上面几个测试基本就能定位了F11/Esc 能恢复正常而且只有 plus-ui 页面会出现重点检查项目里是否有全屏封装比如 screenfull、自定义的全屏按钮。所有页面都无法最小化但快捷键有效重点怀疑 Edge 渲染进程或者 GPU 进程卡死。连快捷键都无法最小化先强制结束 Edge 进程再去排查 Windows 的 DWM 窗口管理器是否异常。我在处理这个问题时做过一个简单的对照表把“浏览器问题”和“页面问题”分开之后每一步都有据可查。3. 主因一页面全屏 API 调用引发的问题其实在大多数“只有 plus-ui 页面无法最小化”的报告里第一元凶都是全屏 API 的状态没有同步好。3.1 为什么 plus-ui 容易踩这个坑RuoYi-Vue-Plus 的头部导航里自带全屏按钮这个按钮在不少版本里是用 screenfull 库封装的实现方式大致是import screenfull from screenfull const toggleFullscreen () { screenfull.toggle() }这段代码单独看没有太大问题但要注意两个细节。第一screenfull 的版本如果比较旧在 Edge 新版本上对 fullscreenchange 事件的处理会有兼容性坑第二很多封装只在点击按钮时执行 toggle没有监听全屏状态变化导致用户按 Esc 退出全屏后页面里的全屏状态变量没有同步更新。用户再次点击按钮就可能触发一次无效的 requestFullscreenEdge 在这种反复切换下会进入一个非常尴尬的“半全屏”状态窗口的最小化按钮就失灵了。另外requestFullscreen 返回的是一个 Promise如果当前标签页处于非激活状态或者代码运行在 iframe 中且没有 allowfullscreen 属性这个 Promise 会被 reject。如果没有加 catch 处理Edge 会在控制台报 unhandled rejection同时页面的全屏状态可能停留在中间态表现在用户侧就是“窗口无法最小化”。3.2 正确的全屏切换写法我把 plus-ui 里这部分逻辑改成监听 fullscreenchange而不是只靠点击时的一锤子买卖。原生写法可以这样let isFullscreen false document.addEventListener(fullscreenchange, () { isFullscreen !!document.fullscreenElement // 在这里同步按钮的激活状态或者图标 }) async function toggleFullscreen() { try { if (document.fullscreenElement) { await document.exitFullscreen() } else { await document.documentElement.requestFullscreen() } } catch (e) { console.warn(全屏切换失败, e) } }如果项目里已经依赖 screenfull也可以直接用它的事件 APIimport screenfull from screenfull screenfull.on(change, () { console.log(当前全屏状态, screenfull.isFullscreen) }) function toggleFullscreen() { if (!screenfull.isEnabled) return screenfull.toggle() }关键点在于不管用户是用按钮退出全屏还是按 Esc 退出全屏状态都必须被同步。这一条能解决掉很大一部分“只有项目页面没办法最小化”的报告。3.3 已经卡在“伪全屏”时的应急退出如果现在已经被卡住了别去硬点按钮先按 Esc再按 F11。页面如果已经没有任何响应可以用 AltTab 切到别的应用再切回来有时候能让 Edge 重新绘制一遍窗口 UI。还不行就右键任务栏上的 Edge 图标选择关闭所有窗口最后再用任务管理器结束 Microsoft Edge 进程强制重启浏览器。这个操作会丢当前会话但能最快恢复系统状态。4. 主因二Edge 渲染进程与硬件加速如果排除了全屏 API问题依然存在那很大概率是 Edge 的渲染进程或者 GPU 进程出了问题。4.1 如何判断是不是渲染进程异常这种情况下窗口通常是有标题栏的但点击最小化按钮没有高亮反馈任务栏预览画面卡死页面内部却还能滚动、点击。有时候甚至整个页面会白屏或者花屏。plus-ui 的登录页有动态背景和粒子动画对 GPU 的占用不算低恰好容易触发这个问题。这时候我建议打开任务管理器CtrlShiftEsc在“进程”列表里找到所有 Microsoft Edge 相关的进程重点看 GPU 进程。如果 GPU 进程的 CPU 占用一直在 100% 左右或者进程反复重启基本可以肯定是硬件加速引起的渲染问题。如果 Edge 主进程显示“未响应”那就不用怀疑了直接结束进程。4.2 快速恢复与长期规避快速恢复的办法很简单右键任务栏 Edge 图标选择关闭所有窗口如果没反应就在任务管理器里结束所有 Microsoft Edge 进程。重新打开之后如果这个现象频繁出现就做两个长期调整。第一个是关闭硬件加速。打开 Edge 地址栏输入 edge://settings/system找到“使用硬件加速”如果可用把它关掉然后重启浏览器。关闭硬件加速后GPU 进程不再参与网页渲染虽然一些动画效果会稍微变卡但窗口状态会稳定很多。第二个是检查 edge://flags。如果你之前为了某些功能开过实验性 flag建议先在 flags 页面点击右上角的“Reset all to default”重置。这里要提醒一句edge://flags 是给开发者测试用的隐藏配置普通人不要乱开尤其不要开哪些涉及 Windows 窗口行为、触控板行为、文本渲染的 flag开了很容易引入奇怪的问题。5. 从 Vue3 项目侧做防御性处理虽然根源大部分在浏览器但既然是在 plus-ui 上踩到项目侧也可以做几个防御性处理降低触发概率。5.1 全局监听 fullscreenchange把全屏状态做成响应式数据在全局组件里监听 fullscreenchange而不是只在点击按钮时切换。以 plus-ui 的布局组件为例可以这样加import { ref, onBeforeUnmount } from vue const fullscreenState ref(false) function onFullscreenChange() { fullscreenState.value !!document.fullscreenElement } document.addEventListener(fullscreenchange, onFullscreenChange) onBeforeUnmount(() { document.removeEventListener(fullscreenchange, onFullscreenChange) })这样按钮的图标和状态始终跟随真实的全屏状态就算用户按 Esc 退出状态也不会错。状态不错就不会出现“页面以为还在全屏、但浏览器已经退出全屏”的混乱。5.2 页面失焦时的全屏自愈还可以监听 visibilitychange做一次状态自愈。我实际在项目里加过这段逻辑document.addEventListener(visibilitychange, () { if (document.visibilityState visible document.fullscreenElement) { document.exitFullscreen().catch(() {}) } })场景是这样的用户从 plus-ui 切换到别的应用Edge 标签页变成后台再切回来时如果发现窗口状态不对这段代码会在页面重新可见时主动退出全屏。注意不要在 visibilityState 为 hidden 的时候退出那样用户每次切走再切回来都要重新进全屏体验反而更差。5.3 避开的窗口 API 和依赖升级如果你在项目里见过这类代码建议删掉window.resizeTo(1200, 800) window.moveTo(100, 100) window.open(url, , width1000,height700,top50,left50)这些窗口控制 API 在普通标签页里基本是受限或无效的在 Edge 的独立窗口模式PWA/应用模式下使用容易干扰浏览器对窗口状态的记忆。我处理过一个案例项目里用 window.open 弹出了一个小窗之后主窗口的最小化按钮彻底失灵杀掉所有 Edge 进程才恢复。依赖版本也要留意。plus-ui 如果是从比较早的分支拉下来的建议把 vue、element-plus、vite、screenfull 这些核心依赖升级到和官方 develop 分支一致。尤其是 screenfull5.x 版本在 Edge 新版本上出现过 fullscreenchange 不触发的问题升级到 6.x 之后稳定不少。升级前记得先提交锁文件。6. 常见问题速查与两个 Gitee 小坑把这个问题相关的现象和处理方向整理成一张表方便以后排查时直接对照。现象判断方法最快处理根本处理点击最小化按钮无反应页面正常按 F11 / Esc 看是否退出全屏Esc 或 F11修复项目全屏切换代码右上角最小化按钮消失移动鼠标到屏幕最顶部看是否有隐藏工具栏浮出退出全屏后关闭自动隐藏工具栏最小化后任务栏找不到窗口按 AltTab 查找窗口AltSpace 后按 M用方向键移动窗口检查多显示器配置移除 window.moveTo任意网页都无法最小化打开 about:blank 测试任务管理器结束所有 Edge 进程关闭硬件加速更新 Edge 或显卡驱动只有 plus-ui 页面频繁出现打开 Edge 无痕窗口测试无痕窗口内操作禁用扩展检查全屏封装和依赖版本另外从 Gitee 拉取 plus-ui 时也有两个小坑。第一个是 clone 中途失败网络波动或者仓库较大时容易发生建议用浅克隆git clone --depth 1 https://gitee.com/JavaLionLi/plus-ui.git第二个是 pnpm install 超时很多情况下是默认源的问题可以临时切换镜像pnpm config set registry https://registry.npmmirror.com安装完成后记得把 registry 改回官方源避免后续发布或拉取时受到镜像同步延迟的影响。按照我个人的排查习惯遇到这种“无法最小化”的问题顺序永远是先按 Esc、再按 F11排除全屏然后 AltSpace 加 N试试快捷键最小化不行就开一个 about:blank 页面做对照再不行直接结束所有 Edge 进程重启。恢复之后才去考虑是改项目代码还是调整浏览器设置。这套流程走下来绝大多数“无法最小化”都能在几分钟内定位到问题而不是一头扎进 Vue 组件里改半天。