主控面板优先用 flexbox 搭建垂直骨架，复杂看板再局部用 grid；侧边栏折叠用 visibility+width+overflow 组合；固定 header 需动态 padding 匹配高度；权限控制须菜单、路由、组件三者统一校验。
主控面板用 Flexbox 还是 Grid？选错会卡死响应式
绝大多数后台系统主控面板用 Flexbox 就够了，Grid 在复杂嵌套仪表盘里才有明显优势。别一上来就套 display: grid，尤其当侧边栏要折叠、顶部导航要自适应高度时，Flexbox 的 flex-direction 和 flex-wrap 更可控。
常见错误是把整个 .main-panel 设成 grid，结果在小屏下子项不换行、溢出滚动条卡住，或者 grid-template-areas 写死后无法动态隐藏模块。
- 优先用
display: flex+flex-direction: column搭建垂直骨架（header → nav → main → footer） - 内部模块如数据看板，再用
display: grid布局卡片，避免全局 grid 嵌套过深 - 折叠侧边栏时，改的是
nav的width和flex-shrink，不是重写 grid 模板
侧边栏折叠逻辑怎么写才不崩？
折叠不是简单 show/hide，核心是保持布局流不中断。用 visibility: hidden + width: 0 + overflow: hidden 组合最稳，比 display: none 安全——后者会让父容器 flex 计算失效，导致 main 区域宽度错乱。
还要注意图标和文字的过渡：文字消失时，opacity 和 transform 要同步，否则视觉跳变；图标尺寸别硬写 px，统一用 rem 配合根字体缩放，不然折叠后图标比例失调。
- 折叠状态用 class 控制，比如
.sidebar.collapsed，别依赖 JS 直接操作 style - 监听窗口 resize 时，检查是否需要重置折叠状态（比如从手机横屏切回竖屏）
- 用
transition: width 0.3s ease, opacity 0.2s ease，别只写一个属性
顶部导航栏固定后内容被遮挡？
这是最常踩的坑：position: fixed 的 header 会脱离文档流，但下面的 .main-content 没预留空间，直接顶上去。解决方案不是加 margin-top 硬顶，而是用 padding-top + box-sizing: border-box。
更关键是，这个 padding 值必须和 header 的实际高度一致。如果 header 高度随屏幕缩放变化（比如用了 rem 或 vh），padding 也得动态匹配，否则在某些分辨率下还是遮挡。
- 给
.main-content设padding-top: calc(1rem + 48px)这类组合值，比纯px更适配 - 用
getBoundingClientRect().height在 JS 初始化时读取 header 实际高度，再设 padding（适合高度不固定场景） - 避免在 header 里塞太多浮动元素或绝对定位，它们会让
offsetHeight计算失真
权限控制导致 DOM 渲染错乱？
后端返回菜单数据后，前端按权限过滤再渲染，容易漏掉关键节点：比如用户没「报表」权限，但代码只删了菜单项，没同步移除对应路由和页面组件，结果点击空链接报 Cannot find module 或白屏。
真正该做的是“权限驱动渲染”，不是“渲染完再删”。菜单结构、路由配置、页面组件三者必须用同一份权限标识对齐，比如都用 permission: "report:view" 字段。
- 菜单生成用递归组件，每层都校验
v-if="hasPermission(item.permission)" - 路由守卫里同样校验权限，拒绝无权访问的 URL，别让页面加载后再提示 403
- 组件内敏感操作（如删除按钮）也要用权限指令包裹，不能只靠菜单隐藏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
