Typography
组织标题、正文和辅助文本。中文惯用名：排版。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.typography |
| 名称 | Typography |
| 二级分类 | 通用（general） |
| 用途 | 组织标题、正文和辅助文本 |
| 描述 | 中文惯用名：排版。 |
预览
静态结构：渲染为带 data-slot="typography" 与 data-variant 的语义标签——variant → 标签映射：h1 ~ h4 → <h1> ~ <h4>，p / lead / muted → <p>，list → <ul>，inline-code → <code>，small → <small>；样式经 cva 变体类挂载（h2 带底部分隔线、inline-code 为 bg-muted 圆角等宽、muted 为 text-sm text-muted-foreground、lead 为 text-xl 弱化色）；文本经 text 属性注入。
DSL 结构
{
"type": "Typography",
"props": {
"variant": "h3",
"text": "三级标题 H3"
}
}何时用
何时使用
- 建立文档级排版层级：页面 / 区块标题（h1 ~ h4）、正文段落、引导语与辅助说明。
- 需要语义标签同步正确：variant 决定渲染标签（h3 → <h3>），利于大纲与读屏结构。
- 行内代码、引用、列表等富文本片段：inline-code / blockquote / list 变体。
何时不用
- 只有颜色、字号或装饰差异的短文本：使用 Text（语义色 + 粗体 / 删除线 / 下划线）。
- 多段结构化长内容（含表格、代码块、嵌套列表）：使用 Markdown。
- 文本本身就是操作入口：使用 Button（text / link 变体）或 Link。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| h1 ~ h4 标题 | 逐级递减的字号与字重（h2 带分隔线） | 页面标题、区块标题、卡片标题 |
| p 正文 | leading-7 常规段落 | 正文阅读内容 |
| lead | text-xl 弱化色引导语 | 页头摘要、导语 |
| muted | text-sm 弱化色 | 辅助说明、字段注释、时间戳 |
| inline-code | 等宽字体 + 灰底圆角 | 正文中的变量名、命令行、字段名 |
| blockquote / list | 左侧竖线引用 / 圆点列表 | 引用他人观点、要点罗列 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | `'h1' | 'h2' | 'h3' |
text | string | — | 文本内容（可含表达式） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 一页只用一个 h1，标题层级按 h1 → h4 逐级下降，不跳级。
- 标题描述内容而非形式（「订单详情」而非「加粗大字」），层级语义与视觉保持一致。
- 正文段落用 p 而非给 Text 堆叠样式，后续换肤时排版规则统一生效。
- 弱化信息统一用 muted，不在同一区块混用多种辅助文本变体。
正例
- ✓ 详情页：Typography h2「基础信息」+ 多个 p 段落组织正文。
- ✓ 页头导语：Typography lead 描述页面用途，正文用 p 承接。
反例
- ✕ 用 h4 + 自定义字号冒充 h2（层级语义与视觉不符）。
- ✕ 整段长文（含表格、代码块）塞进单个 Typography text（应使用 Markdown）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。