saasadminui/docs/侧边栏菜单样式修复说明.md

saasadminui 侧边栏菜单修复说明

修复日期：2026-05-27

问题描述

1. 侧栏收起后几乎看不见：收起后只剩一条白边，图标和菜单名都看不到。
2. 菜单区域背景为白色：与右侧主内容区混在一起，没有层次。

根因

问题	原因
收起后不可见	Sidebar/index.vue 内层 .sidebar-wrapper 写死 width: 200px，外层 topNav 布局收起为 54px 时被裁切
无法再次展开	topNav: true 时顶栏没有汉堡按钮，Cookie 若 sidebarStatus=0 会一直处于收起态
白底	菜单与容器多处硬编码 #fff

修改文件

文件	改动
src/layout/components/Sidebar/index.vue	背景改为 #F0F2F5；宽度 100%；折叠态图标居中；子菜单浅灰底
src/layout/components/Navbar.vue	topNav 模式增加汉堡按钮，可展开/收起侧栏
src/layout/index.vue	topNav 侧栏展开 200px / 收起 54px 与动画
src/assets/styles/sidebar.scss	外层侧栏背景与折叠样式统一

使用说明

• 展开：点击 Logo 左侧汉堡图标，侧栏显示图标 + 菜单名。
• 收起：再次点击汉堡；鼠标悬停图标会显示 tooltip 菜单名（Element UI 折叠菜单默认行为）。
• 有子菜单的项：收起后点击/悬停图标会弹出子菜单浮层。

验收

1. 刷新 npm run dev 后进入首页。
2. 侧栏背景为浅灰 #F0F2F5，与白色内容区有区分。
3. 点击汉堡收起后能看到居中图标；悬停显示菜单名称。
4. 再次点击可展开，菜单名称正常显示。