Typography 排版

文本内容的基本格式。

何时使用

• 文章 / 博客 / 详情页中的标题、段落、引用、链接。
• 需要一组语义化的文本类型（强调、次要、错误等）。

基本使用

<c-typography> 是排版的容器，里面可以放 Title / Paragraph / Text / Link。

五级标题

level 取 1–5，对应 <h1>–<h5>。

语义化文本

type 表达"次要 / 成功 / 警告 / 危险"四种语义。

文本样式装饰

可叠加：mark 高亮 / code 代码 / keyboard 键盘 / underline 下划线 / delete 删除线 / strong 加粗 / italic 斜体。

链接

<c-typography-link> 与 <a> 用法一致，自动附带主色 / hover 风格。

段落组合

实战示例：用 Typography 组合标题 / 段落 / 链接构成一个迷你文章页。

可复制（copyable）

文本右侧渲染复制按钮，点击调用 navigator.clipboard.writeText。3 秒后图标自动恢复。

自定义复制图标

通过 slot copy-icon + scope { copied } 自定义图标，渲染回调式 API 一律走 slot（数据元组 tooltips: [before, after] 保留为 prop）。

基本复制

最简形式 :copyable="true"，复制文字 = 显示文字。

复制不同的文本（cfg.text）

显示一段、复制另一段；典型场景是显示脱敏文本而复制原值。

onCopy 回调与计数

复制完成后触发 onCopy(text)，可用于埋点 / 提示 / 计数。

自定义 tooltips（hover 文字）

tooltips: [复制前, 复制后] 替换默认 ['复制', '已复制']；传 false 完全关闭 hover title。

自定义图标（copy-icon slot）

slot 接收 { copied } 作用域参数，可根据复制态切换图标。

短延时（copyableDelay）

copyableDelay 控制复制后图标恢复的毫秒数（默认 3000），可改为更激进的 800ms。

在 Title / Paragraph / Link 上的复制

copyable 是 Text / Title / Paragraph / Link 4 组件共享 prop。

CopyableConfig

字段	类型	默认	说明
text	string	slot.text	实际复制的文本；不传则取 default slot 的纯文本
copyableDelay	number	3000	复制后图标恢复延时（ms）
tooltips	[string, string] | false	['复制','已复制']	鼠标 hover 时的 title 文字（hover tooltip）
onCopy	(text: string) => void	—	复制完成回调

slot

名称	作用域	说明
copy-icon	{ copied }	自定义复制按钮 icon（替代默认 ⎘ / ✓）

可编辑（editable）

点击编辑按钮（或文本本身，配置 triggerType: ['text']）切入 textarea 内联编辑；Enter 提交、Escape 取消，blur 自动提交。

基本编辑

点 ✎ 进入编辑态；textarea 自动 focus；Enter 提交，Escape 取消。

点文本即编辑（triggerType=['text']）

省去 icon，点击文本本身进入编辑态；适合「就地修改」场景。

icon + text 双触发

两种触发方式可以组合，点 icon 或文本都能进入编辑。

maxLength 限制

限制最大字符数；超出后 textarea 原生阻断输入。

onStart / onCancel / onEnd 三态回调

完整生命周期：进入 → 修改 → 提交（onChange + onEnd）或 取消（onCancel）。

自定义 edit-icon

通过 #edit-icon slot 替换默认 ✎ 图标。

用 @update:editable-text 同步外部状态

除 onChange，组件还会 emit update:editable-text 事件，可直接监听同步外部 ref（与 onChange 二选一即可）。

EditableConfig

字段	类型	默认	说明
triggerType	Array<'icon' | 'text'>	['icon']	编辑触发方式
tooltip	string | false	—	icon hover tooltip 文字
editing	boolean	—	受控编辑态
text	string	slot.text	初始编辑文本
maxLength	number	—	最大字符数
onStart	() => void	—	进入编辑回调
onChange	(value: string) => void	—	Enter 提交时回调
onCancel	() => void	—	Escape 取消时回调
onEnd	() => void	—	编辑完成回调（onChange 之后触发）

slot

名称	作用域	说明
edit-icon	—	自定义编辑按钮 icon（替代默认 ✎）

截断（ellipsis）

文字超出指定行数自动截断；可配合 expandable 展开 / 收起，或 tooltip 鼠标 hover 看完整内容。

jsdom 不能测真实尺寸

ellipsis 的视觉效果靠 CSS text-overflow: ellipsis + -webkit-line-clamp。jsdom 无 layout 引擎，测试只覆盖逻辑分支（class 是否挂载 / slot 是否渲染 / expand state 切换 / title attribute），实际截断效果请在浏览器 demo 中肉眼验证。

单行截断

最常见用法，ellipsis: true 等价于 { rows: 1 }。

多行截断

rows 控制截断行数（基于 -webkit-line-clamp）。

可展开（单向）

expandable: true 显示「展开」按钮；展开后按钮消失。

可展开 + 可收起（collapsible）

expandable: 'collapsible' 展开后切「收起」按钮，可来回切换。

自定义展开 / 收起文字

expand-text 和 collapse-text slot 替换默认「展开」/「收起」。

tooltip 显示完整内容

tooltip: true 用原生 title 属性显示完整内容；hover 鼠标即可看；tooltip: '自定义文字' 替换为指定字符串。

受控展开（expanded）

外部 ref 控制展开态，配合自定义按钮做更复杂的交互。

Title 也支持 ellipsis

ellipsis 在 Title 上同样生效（长标题截断常见）。

三大交互组合使用

copyable / editable / ellipsis 可同时启用——按 UI 顺序渲染「截断按钮 → 编辑按钮 → 复制按钮」。

EllipsisConfig

字段	类型	默认	说明
rows	number	1	截断行数（>1 走 -webkit-line-clamp 多行）
expandable	boolean | 'collapsible'	false	true 显示展开按钮；'collapsible' 同时支持展开 + 收起
expanded	boolean	—	受控展开态
tooltip	boolean | string	false	true 显示 title 原生 tooltip（jsdom 友好）；字符串则用该字符串
onExpand	(expanded: boolean) => void	—	展开 / 收起回调
onEllipsis	(clipped: boolean) => void	—	文本是否被截断的状态变化回调（v2.x 待接入实际 measure）

slot

名称	作用域	说明
expand-text	—	自定义「展开」按钮文字（替代默认）
collapse-text	—	自定义「收起」按钮文字（替代默认）

API

Title Props

参数	类型	默认值	说明
level	1 | 2 | 3 | 4 | 5	1	标题级别

Link Props

参数	类型	默认值	说明
href	string	—	链接地址
target	string	—	链接 target

通用 Props（Text / Paragraph / Title / Link）

参数	类型	默认值	说明
type	'secondary' | 'success' | 'warning' | 'danger'	—	文本类型
disabled	boolean	false	禁用
mark	boolean	false	高亮
code	boolean	false	代码样式
keyboard	boolean	false	键盘样式
underline	boolean	false	下划线
delete	boolean	false	删除线
strong	boolean	false	加粗
italic	boolean	false	斜体