主控面板应使用Grid布局，因其天然支持二维划分，可一步定义侧边栏、顶部导航、主内容区和状态栏的位置与响应行为；Flex嵌套多层易失控，尤其固定侧边栏+自适应内容+底部区域时，Grid的grid-template-areas或行列定义更直观可靠。
主控面板用 flex 还是 grid？
现代主控面板布局，grid 是更直接的选择。它天然支持二维划分（行列同时控制），能一步定义侧边栏、顶部导航、主内容区和状态栏的位置与响应行为；而 flex 在处理多区域嵌套时容易层层包裹、flex-basis 和 flex-grow 交互难控，尤其当需要固定侧边栏+自适应内容+底部固定高度区域时，grid 的 grid-template-areas 或 grid-template-rows/columns 更直观可靠。
常见错误：用 flex 套 flex 实现三栏，结果在 Safari 下 min-height: 100vh 失效，内容区塌陷——这是 flex 容器未显式设 height 导致子项无法正确计算高度。
- 推荐结构：
display: grid在根容器（如<body>或最外层<div class="app">）上设置 - 典型模板：
grid-template-areas: "header header header" "nav main status" "footer footer footer" - 配合
grid-template-rows: 60px 1fr 32px和grid-template-columns: 240px 1fr 200px，可精准分配空间
sidebar 固定宽度但需适配移动端
侧边栏不能简单写死 width: 240px 就完事。桌面端要稳定，移动端必须收起，且收起后不能留白或遮挡内容。关键在于分离“布局结构”和“显示状态”。
错误做法：用 display: none 切换 sidebar，导致 grid 模板中 grid-template-areas 无法动态更新，布局错乱；或用 transform: translateX(-100%) 但没加 will-change: transform，滑动卡顿。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 桌面态：保留
grid-area: nav，宽度由grid-template-columns控制 - 移动端：用媒体查询重写
grid-template-areas，例如改为"header" "main" "status" "footer"，让 nav 不参与布局 - 若需抽屉式展开，把 sidebar 放在 body 后、用
position: fixed+z-index独立控制，不参与主 grid 流程
主内容区滚动只影响 main，不带动 header 和 sidebar
用户滚动时，顶部导航栏和侧边栏应始终可见，只有中间内容区滚动——这要求 main 区域自身具备独立滚动能力，而不是靠整个页面 body 滚动。
典型翻车点：给 main 设了 overflow-y: auto，但没限制其最大高度，结果在小屏下内容被截断；或者忘了设 min-height: 0，导致 flex/grid 子项在某些浏览器里忽略 overflow 设置。
- 必须给
main设置明确高度约束，例如：max-height: calc(100vh - 60px - 32px)（扣掉 header 和 status 高度） - 加上
min-height: 0和overflow-y: auto，确保滚动生效 - 避免在
main内部再嵌套一层无意义的div，否则需额外加min-height: 0到该 wrapper 上
暗色模式下 background-color 和 color 的批量切换逻辑
主控面板通常需支持系统级暗色模式，但不能只靠 @media (prefers-color-scheme: dark) 覆盖所有样式——组件内联样式、JS 动态插入的元素、第三方图表库的 canvas 文字等，都可能漏掉。
真实问题：切到暗色模式后，表格斑马纹颜色反了，输入框 placeholder 看不见，或者 svg 图标因 fill 用硬编码色值而发灰。
- 核心策略：用 CSS 自定义属性（
--bg-primary,--text-secondary等）统一管理颜色，并在 :root 和@media中分别定义 - 对 SVG，改用
fill: currentColor或fill: var(--icon-color)，避免写死#333 - JavaScript 中读取主题时，优先用
window.matchMedia('(prefers-color-scheme: dark)').matches，而非依赖 class 名判断，避免手动同步遗漏
真正麻烦的是第三方组件库的样式穿透——比如用了 Ant Design 的 <Table>，它的内部单元格背景色是内联 style，得靠 !important + 更高 specificity 覆盖，这种地方最容易漏测。
