排印 typography

布局组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

root 管段间距与最大行宽，标题与段落各自拿字号、字重、行高

版式约定

字号、字重与行高都收进令牌，不再逐处手写。段与段之间的间距由 root 统一给。

最大行宽也由 root 管，整块正文不会拉成一行行难读的长句。

<script setup lang="ts">
import { XhTypographyHeading, XhTypographyParagraph, XhTypographyRoot } from "@xihan-ui/vue";
</script>

<template>
  <XhTypographyRoot>
    <!-- as 决定渲染成哪个标签，要进文档大纲就自己写上去 -->
    <XhTypographyHeading as="h3" :level="3">版式约定</XhTypographyHeading>
    <XhTypographyParagraph>
      字号、字重与行高都收进令牌，不再逐处手写。段与段之间的间距由 root 统一给。
    </XhTypographyParagraph>
    <XhTypographyParagraph>
      最大行宽也由 root 管，整块正文不会拉成一行行难读的长句。
    </XhTypographyParagraph>
  </XhTypographyRoot>
</template>

标题档位

level 只换字号档位，标签仍由 as 决定；不传 level 即默认档

第 1 档标题

第 2 档标题

第 3 档标题

第 4 档标题

第 5 档标题

第 6 档标题

<script setup lang="ts">
import { XhTypographyHeading, XhTypographyRoot } from "@xihan-ui/vue";

// as const 让每一项是字面量类型，才对得上 level 收的 1-6 联合
const levels = [1, 2, 3, 4, 5, 6] as const;
</script>

<template>
  <XhTypographyRoot>
    <XhTypographyHeading v-for="l in levels" :key="l" :level="l">
      第 {{ l }} 档标题
    </XhTypographyHeading>
  </XhTypographyRoot>
</template>

行内文字

variant 换形态：muted 弱化、strong 加重、code 等宽

不写 variant 就是一段普通正文，这一段弱化， 这一段加重， 档位写在 data-level 上。

链接自带下划线，不只靠颜色区分。

<script setup lang="ts">
import {
  XhTypographyLink,
  XhTypographyParagraph,
  XhTypographyRoot,
  XhTypographyText,
} from "@xihan-ui/vue";
</script>

<template>
  <XhTypographyRoot>
    <XhTypographyParagraph>
      不写 variant 就是一段普通正文，<XhTypographyText variant="muted">这一段弱化</XhTypographyText>，
      <XhTypographyText variant="strong">这一段加重</XhTypographyText>，
      档位写在 <XhTypographyText as="code" variant="code">data-level</XhTypographyText> 上。
    </XhTypographyParagraph>
    <XhTypographyParagraph>
      链接自带下划线，<XhTypographyLink href="#">不只靠颜色区分</XhTypographyLink>。
    </XhTypographyParagraph>
  </XhTypographyRoot>
</template>

语气

tone 决定这一段行内文字用哪族颜色，与 variant 是两个轴，可以一起写

brand 语气的一段文字

neutral 语气的一段文字

success 语气的一段文字

warning 语气的一段文字

danger 语气的一段文字

info 语气的一段文字

此操作不可撤销

<script setup lang="ts">
import { XhTypographyParagraph, XhTypographyRoot, XhTypographyText } from "@xihan-ui/vue";

const tones = ["brand", "neutral", "success", "warning", "danger", "info"];
</script>

<template>
  <XhTypographyRoot>
    <XhTypographyParagraph v-for="t in tones" :key="t">
      <XhTypographyText :tone="t">{{ t }} 语气的一段文字</XhTypographyText>
    </XhTypographyParagraph>
    <XhTypographyParagraph>
      <XhTypographyText tone="danger" variant="strong">此操作不可撤销</XhTypographyText>
    </XhTypographyParagraph>
  </XhTypographyRoot>
</template>

尺寸

size 换的是整块正文的字号与段间距，不传 size 即默认档

小档

正文字号与段间距跟着档位走，标题档位另由 level 决定。

默认档

正文字号与段间距跟着档位走，标题档位另由 level 决定。

大档

正文字号与段间距跟着档位走，标题档位另由 level 决定。

<script setup lang="ts">
import { XhTypographyHeading, XhTypographyParagraph, XhTypographyRoot } from "@xihan-ui/vue";

// 中间一档不写 size，用 undefined 表达
const sizes = [
  { size: "sm", label: "小" },
  { size: undefined, label: "默认" },
  { size: "lg", label: "大" },
] as const;
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px">
    <XhTypographyRoot v-for="s in sizes" :key="s.label" :size="s.size">
      <XhTypographyHeading :level="4">{{ s.label }}档</XhTypographyHeading>
      <XhTypographyParagraph>正文字号与段间距跟着档位走，标题档位另由 level 决定。</XhTypographyParagraph>
    </XhTypographyRoot>
  </div>
</template>

产物

层	值
自定义元素	<xh-typography>
Vue 组件	XhTypographyHeading XhTypographyLink XhTypographyParagraph XhTypographyRoot XhTypographyText
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/typography.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="typography"：root · heading · paragraph · text · link

Props

属性	类型	必填	说明
size	Size		尺寸：sm / md / lg，整块正文的字号与段间距跟着换档。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']
getHeadingProps	(props?: TypographyHeadingProps) => T['element']
getParagraphProps	() => T['element']
getTextProps	(props?: TypographyTextProps) => T['element']
getLinkProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。