页面结构
展示型页面采用 ACT 三段式结构，管理型页面采用侧边栏 + Header + Content。所有页面共享统一的容器宽度与间距节奏。
15 · PAGE PATTERNS · 页面结构
Layer Stepper（B 端三层流程）
1
LAYER 1
感知层
数据采集与接入
→
2
LAYER 2
映射层
标准化与治理
→
3
LAYER 3
推理层
知识图谱与推理
管理端列表页结构
<section id="page" class="section">
<div class="section-title">15 · PAGE PATTERNS · 页面结构</div>
<div class="demo-sub">Layer Stepper（B 端三层流程）</div>
<div class="mb-8">
<div class="layer-stepper">
<div class="layer-tab">
<div class="layer-badge">1</div>
<div>
<div class="layer-eyebrow">LAYER 1</div>
<div class="layer-title">感知层</div>
<div class="layer-subtitle">数据采集与接入</div>
</div>
</div>
<div class="layer-arrow">→</div>
<div class="layer-tab is-active">
<div class="layer-badge">2</div>
<div>
<div class="layer-eyebrow">LAYER 2</div>
<div class="layer-title">映射层</div>
<div class="layer-subtitle">标准化与治理</div>
</div>
</div>
<div class="layer-arrow">→</div>
<div class="layer-tab">
<div class="layer-badge">3</div>
<div>
<div class="layer-eyebrow">LAYER 3</div>
<div class="layer-title">推理层</div>
<div class="layer-subtitle">知识图谱与推理</div>
</div>
</div>
</div>
</div>
<div class="demo-sub">管理端列表页结构</div>
<div class="demo-box" style="padding:0;overflow:hidden;background:#FAFAFA">
<div class="flex">
<!-- Mini Sidebar -->
<div style="width:180px;background:#fff;border-right:1px solid #E4E4E7;padding:12px 0;flex-shrink:0">
<div class="flex items-center gap-2 px-4 pb-3 mb-2 border-b border-ink-100">
<span class="w-2 h-2 rounded-full bg-cdx-600"></span>
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-900">RUNDA</span>
</div>
<div class="px-2 space-y-0.5">
<div class="demo-side-item is-active px-3 py-1.5 text-[11px] text-cdx-700 bg-cdx-50 rounded font-medium border-l-2 border-cdx-700">工作台</div>
<div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">患者管理</div>
<div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">数据报表</div>
<div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">系统设置</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 min-w-0">
<!-- Header -->
<div class="h-10 bg-white border-b border-ink-100 flex items-center justify-between px-4">
<div class="breadcrumb" style="font-size:10px">
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-sep">/</span>
<span class="breadcrumb-item is-current">工作台</span>
</div>
<div class="w-5 h-5 rounded-full bg-cdx-100"></div>
</div>
<!-- Content -->
<div class="p-4">
<div class="flex items-center justify-between mb-3">
<span class="text-[13px] font-semibold text-ink-900">数据概览</span>
<button class="px-2 py-1 text-[10px] bg-cdx-700 text-white rounded">导出</button>
</div>
<div class="grid grid-cols-3 gap-2 mb-3">
<div class="bg-white border border-ink-100 rounded p-2">
<div class="text-[9px] text-ink-500">总量</div>
<div class="font-mono text-[14px] font-semibold text-ink-900">12,847</div>
</div>
<div class="bg-white border border-ink-100 rounded p-2">
<div class="text-[9px] text-ink-500">本月</div>
<div class="font-mono text-[14px] font-semibold text-ink-900">342</div>
</div>
<div class="bg-white border border-ink-100 rounded p-2">
<div class="text-[9px] text-ink-500">待审</div>
<div class="font-mono text-[14px] font-semibold text-[#C28A2C]">28</div>
</div>
</div>
<div class="bg-white border border-ink-100 rounded overflow-hidden">
<div class="grid grid-cols-4 gap-0 text-[9px] font-medium text-ink-500 bg-ink-50 px-2 py-1.5 border-b border-ink-100">
<span>ID</span><span>姓名</span><span>科室</span><span>状态</span>
</div>
<div class="demo-list-row grid grid-cols-4 gap-0 text-[9px] text-ink-700 px-2 py-1.5 border-b border-ink-50">
<span class="font-mono text-cdx-700">P-001</span><span>张三</span><span>呼吸内科</span><span class="text-[#15803D]">在院</span>
</div>
<div class="demo-list-row grid grid-cols-4 gap-0 text-[9px] text-ink-700 px-2 py-1.5">
<span class="font-mono text-cdx-700">P-002</span><span>李四</span><span>心内科</span><span class="text-ink-400">出院</span>
</div>
</div>
</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 检查清单逐项核对。