表格
表头使用 ink-50 背景与 12px 大写标签，行 hover 显示 cdx-50。行内操作按钮字号固定 13px，与单元格正文一致。
07 · TABLES · 表格
<section id="tables" class="section">
<div class="section-title">07 · TABLES · 表格</div>
<div class="demo-box" style="padding:0;overflow:hidden">
<div class="flex items-center justify-between px-4 py-3 border-b border-ink-100">
<div class="flex items-center gap-3">
<span class="text-[14px] font-semibold text-ink-900">患者列表</span>
<span class="text-[12px] text-ink-400 font-mono">12,847 条</span>
</div>
<div class="flex gap-2">
<input class="px-3 py-1.5 text-[12px] border border-ink-200 rounded bg-ink-50" placeholder="搜索患者...">
<button class="px-3 py-1.5 text-[12px] border border-ink-200 rounded bg-white hover:border-cdx-700">筛选</button>
</div>
</div>
<table class="data-table">
<thead>
<tr>
<th><label class="checkbox" style="gap:0"><input type="checkbox"><span class="checkbox-box"></span></label></th>
<th class="th-sortable asc">患者 ID</th>
<th class="th-sortable">姓名</th>
<th>科室</th>
<th>主诊断</th>
<th class="th-sortable">入院日期</th>
<th>状态</th>
<th class="col-action">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="checkbox" style="gap:0"><input type="checkbox"><span class="checkbox-box"></span></label></td>
<td class="font-mono text-[12px] text-cdx-700">P-20260001</td>
<td class="font-medium">张三</td>
<td>呼吸内科</td>
<td><span class="inline-block px-2 py-0.5 text-[11px] bg-cdx-50 text-cdx-700 rounded">冠心病</span></td>
<td class="font-mono text-[12px]">2026-03-15</td>
<td><span class="pulse-dot"></span><span class="text-[12px] text-[#15803D]">在院</span></td>
<td class="col-action"><button class="px-2 py-0.5 text-[13px] text-cdx-700 hover:bg-cdx-50 rounded">详情</button></td>
</tr>
<tr class="is-selected">
<td><label class="checkbox" style="gap:0"><input type="checkbox" checked><span class="checkbox-box"></span></label></td>
<td class="font-mono text-[12px] text-cdx-700">P-20260002</td>
<td class="font-medium">李四</td>
<td>心血管内科</td>
<td><span class="inline-block px-2 py-0.5 text-[11px] bg-[#FEF3C7] text-[#92400E] rounded">高血压 III 级</span></td>
<td class="font-mono text-[12px]">2026-03-12</td>
<td><span class="text-[12px] text-ink-500">已出院</span></td>
<td class="col-action"><button class="px-2 py-0.5 text-[13px] text-cdx-700 hover:bg-cdx-50 rounded">详情</button></td>
</tr>
<tr>
<td><label class="checkbox" style="gap:0"><input type="checkbox"><span class="checkbox-box"></span></label></td>
<td class="font-mono text-[12px] text-cdx-700">P-20260003</td>
<td class="font-medium">王五</td>
<td>肿瘤科</td>
<td><span class="inline-block px-2 py-0.5 text-[11px] bg-[#FEF2F2] text-[#991B1B] rounded">肺腺癌 T2N1</span></td>
<td class="font-mono text-[12px]">2026-03-10</td>
<td><span class="pulse-dot"></span><span class="text-[12px] text-[#15803D]">在院</span></td>
<td class="col-action"><button class="px-2 py-0.5 text-[13px] text-cdx-700 hover:bg-cdx-50 rounded">详情</button></td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-between px-4 py-3 border-t border-ink-100 text-[12px] text-ink-500">
<span class="demo-table-count">已选 1 项 · 共 12,847 条</span>
<div class="demo-pager">
<button class="demo-page" type="button" data-page="prev" aria-label="上一页">‹</button>
<button class="demo-page is-current" type="button" data-page="1">1</button>
<button class="demo-page" type="button" data-page="2">2</button>
<button class="demo-page" type="button" data-page="3">3</button>
<button class="demo-page" type="button" data-page="next" aria-label="下一页">›</button>
</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 检查清单逐项核对。