布局容器
管理端默认采用侧边栏 + 内容区结构：Sidebar 240px，Header 56px，Content 内边距 20px。移动端侧边栏自动收起。
20 · LAYOUT · 布局容器（§3.7）
经典侧边栏布局
布局结构说明
Header
56px 固定
Sider
240px / 64px
Content
flex-1 自适应
Footer
48px 固定
<section id="layout" class="section">
<div class="section-title">20 · LAYOUT · 布局容器（§3.7）</div>
<div class="demo-sub">经典侧边栏布局</div>
<div class="demo-box" style="padding:0;overflow:hidden">
<div style="display:flex;height:280px;border:1px solid #E4E4E7;border-radius:6px;overflow:hidden">
<div style="width:200px;background:#fff;border-right:1px solid #E4E4E7;display:flex;flex-direction:column">
<div style="height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid #E4E4E7">
<span style="font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#185058">RUNDA</span>
</div>
<div style="flex:1;padding:12px 8px">
<div style="padding:8px 12px;font-size:13px;font-weight:500;color:#185058;background:#F0F7F8;border-radius:4px;border-left:2px solid #185058;margin-bottom:4px">数据总览</div>
<div style="padding:8px 12px;font-size:13px;color:#52525B;border-radius:4px;margin-bottom:4px">患者管理</div>
<div style="padding:8px 12px;font-size:13px;color:#52525B;border-radius:4px">系统设置</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column">
<div style="height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #E4E4E7">
<span style="font-size:14px;font-weight:500;color:#18181B">数据总览</span>
<div style="width:28px;height:28px;border-radius:50%;background:#F0F7F8;display:grid;place-items:center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
</div>
</div>
<div style="flex:1;background:#FAFAFA;padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start">
<div style="background:#fff;border:1px solid #E4E4E7;border-radius:6px;padding:16px">
<div style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:#71717A;margin-bottom:8px">总患者数</div>
<div style="font-size:24px;font-weight:500;font-family:var(--font-numeric, 'Urbanist', 'PingFang SC', sans-serif);color:#18181B">1,284</div>
</div>
<div style="background:#fff;border:1px solid #E4E4E7;border-radius:6px;padding:16px">
<div style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:#71717A;margin-bottom:8px">今日入院</div>
<div style="font-size:24px;font-weight:500;font-family:var(--font-numeric, 'Urbanist', 'PingFang SC', sans-serif);color:#185058">23</div>
</div>
<div style="background:#fff;border:1px solid #E4E4E7;border-radius:6px;padding:16px">
<div style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:#71717A;margin-bottom:8px">待处理</div>
<div style="font-size:24px;font-weight:500;font-family:var(--font-numeric, 'Urbanist', 'PingFang SC', sans-serif);color:#C28A2C">7</div>
</div>
</div>
</div>
</div>
</div>
<div class="demo-sub">布局结构说明</div>
<div class="demo-box">
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-size:12px">
<div style="padding:12px;background:#F0F7F8;border-radius:4px;text-align:center">
<div style="font-weight:600;color:#185058;margin-bottom:4px">Header</div>
<div style="color:#52525B;font-family:ui-monospace,monospace">56px 固定</div>
</div>
<div style="padding:12px;background:#F0F7F8;border-radius:4px;text-align:center">
<div style="font-weight:600;color:#185058;margin-bottom:4px">Sider</div>
<div style="color:#52525B;font-family:ui-monospace,monospace">240px / 64px</div>
</div>
<div style="padding:12px;background:#F0F7F8;border-radius:4px;text-align:center">
<div style="font-weight:600;color:#185058;margin-bottom:4px">Content</div>
<div style="color:#52525B;font-family:ui-monospace,monospace">flex-1 自适应</div>
</div>
<div style="padding:12px;background:#F0F7F8;border-radius:4px;text-align:center">
<div style="font-weight:600;color:#185058;margin-bottom:4px">Footer</div>
<div style="color:#52525B;font-family:ui-monospace,monospace">48px 固定</div>
</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。