iter(g129): 新增排版文本组件 typography

This commit is contained in:
HIsheR
2026-10-26 15:18:27 +08:00
parent 6158f49583
commit ea2a846734
13 changed files with 451 additions and 10 deletions
+88 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T06:49:03.720Z",
"generatedAt": "2026-10-26T07:17:51.824Z",
"repoRoot": ".",
"packages": [
{
@@ -203,7 +203,8 @@
"multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用",
"anchor(props):锚点导航,竖排区块链接,滚动时按目标位置高亮当前区块(aria-current 同步),点击按 offset 偏移量平滑定位并回写 hash;container 可指定内滚容器",
"popconfirm(props, trigger):二次确认气泡,挂在任意触发器上,就地确认危险操作;确定后先收起再回调,取消 / 点外部 / Esc 走 onCancel,展开即聚焦「取消」",
"calendar(props):月历,整月网格内嵌页面(排期 / 值班 / 日程),每日可带 marker 标记文案,方向键漫游 + Enter 选中,翻月走 onMonthChange"
"calendar(props):月历,整月网格内嵌页面(排期 / 值班 / 日程),每日可带 marker 标记文案,方向键漫游 + Enter 选中,翻月走 onMonthChange",
"typography(props):排版文本,variant 决定语义(标题出 h1-h5 / 段落出 p / 行内出 span),支持语义色、装饰位、对齐、多行截断与复制按钮"
],
"keyTypes": [
"ButtonProps",
@@ -3075,6 +3076,91 @@
"需要显示每天有几件事就传 marker:返回非空文案即渲染小徽标,并拼进 aria-label 让读屏也听得到",
"键盘:Tab 进入网格一次,←→ 逐日、↑↓ 逐周、Enter / 空格 选中;跨月会自动翻页并交接焦点"
]
},
{
"id": "typography",
"title": "排版文本 Typography",
"demo": "sec-typography",
"props": [
{
"n": "content",
"t": "string | Node",
"r": 1,
"d": "文本内容:字符串按纯文本渲染;传 DOM 则原样插入(此时不参与截断与复制)"
},
{
"n": "variant",
"t": "'title' | 'text' | 'paragraph'",
"df": "text",
"d": "排版形态,决定语义标签与字号:title 出 h1-h5、paragraph 出 p、text 出 span"
},
{
"n": "level",
"t": "1 | 2 | 3 | 4 | 5",
"df": "3",
"d": "标题层级,仅 variant=title 生效;越界值会被夹到 1-5"
},
{
"n": "type",
"t": "'secondary' | 'success' | 'warning' | 'danger'",
"d": "语义色调;缺省主文本色"
},
{
"n": "strong",
"t": "boolean",
"df": "false",
"d": "加粗强调"
},
{
"n": "underline",
"t": "boolean",
"df": "false",
"d": "下划线(可为链接式文案保留指引视觉)"
},
{
"n": "delete",
"t": "boolean",
"df": "false",
"d": "删除线,用于作废文案;会同时弱化文字颜色"
},
{
"n": "mark",
"t": "boolean",
"df": "false",
"d": "高亮底纹(警示色 24% 混透明),用于搜索命中片段"
},
{
"n": "code",
"t": "boolean",
"df": "false",
"d": "等宽代码样式,用于行内字段名 / 命令"
},
{
"n": "align",
"t": "'left' | 'center' | 'right'",
"d": "水平对齐;缺省左对齐"
},
{
"n": "ellipsis",
"t": "number",
"d": "截断行数(1 起):超出显示省略号,纯文本自动挂 title 供悬停看全文;缺省不截断"
},
{
"n": "copyable",
"t": "boolean",
"df": "false",
"d": "右侧附复制按钮:点击写剪贴板并回显「已复制 / 复制失败」,1.2 秒后复原"
}
],
"example": "typography({ variant: 'title', level: 2, content: '部署说明' }); typography({ content: 'RB-2048', code: true, copyable: true }); typography({ variant: 'paragraph', ellipsis: 2, content: '一段很长的说明……' })",
"steps": [
"正文一律用 variant='text' 或 'paragraph',标题用 variant='title' + level,标签自动出 h1-h5,别自己写 h 标签再叠样式",
"文内强调用装饰位组合:strong 加粗、mark 高亮、code 等宽、underline / delete 表示链接与作废,一个组件内可叠加",
"长描述(卡片摘要、表格说明)用 ellipsis 给行数:超出显示省略号并自动挂 title,悬停即看全文,不必额外做展开按钮",
"订单号 / 密钥 / 命令这类要复制的内容传 copyable:按钮独立于文本节点,复制失败会回显「复制失败」而不是静默",
"content 传 DOM 时组件只负责语义标签与类名:截断与复制对 DOM 内容不生效(取不到稳定文本)",
"段落连续排列时相邻 .ua-type-paragraph 自动留出间距,单个段落不额外撑高,嵌进卡片也不会有空隙"
]
}
]
},