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

apps/demo/main.ts

@@ -70,6 +70,7 @@ import {
   toast,
   tour,
   tooltip,
+  typography,
 } from '@ui-arch/ui';
 import type { RowKey } from '@ui-arch/ui';
 
@@ -1252,6 +1253,42 @@ const content = h(
     }),
     h('span', { class: 'out' }, () => `当前选中：${calDay() || '无'}`),
   ),
+  section(
+    'sec-typography',
+    '排版文本',
+    'typography 一个入口覆盖标题 / 正文 / 行内三种形态：variant 决定语义标签（标题出 h1-h5，读屏可按层级跳读），装饰位可叠加，长描述用 ellipsis 截断并自动挂 title 看全文，copyable 给订单号这类要复制的字段。',
+    card({ title: '标题层级' },
+      typography({ variant: 'title', level: 3, content: '订单详情' }),
+      typography({ variant: 'title', level: 5, content: '第三节：配送与售后' }),
+      typography({ variant: 'paragraph', type: 'secondary', content: '标题按 level 出 h1-h5，字号由样式表按标签给，这里没写任何内联字号。' }),
+    ),
+    card({ title: '行内装饰' },
+      typography({
+        variant: 'paragraph',
+        content: h('span', null,
+          '本周新增 ',
+          typography({ content: '2', strong: true, type: 'success' }),
+          ' 个组件，门禁命令 ',
+          typography({ content: 'npm run check', code: true }),
+          '，搜索命中 ',
+          typography({ content: '排版', mark: true }),
+          '，已作废 ',
+          typography({ content: '旧接口', delete: true }),
+          '。'),
+      }),
+    ),
+    card({ title: '截断与复制' },
+      typography({
+        variant: 'paragraph',
+        ellipsis: 2,
+        content: '这一段故意写得很长用来演示多行截断：组件把行数写进 CSS 变量交给 -webkit-line-clamp，超出的部分显示省略号，同时把全文挂到 title 上，鼠标停留即可读完，调用方不需要自己算宽度或加「展开」按钮。',
+      }),
+      space({ size: 'sm' },
+        typography({ content: 'RB-2048-0917-3355', code: true, copyable: true }),
+        typography({ content: '点右侧复制可写进剪贴板', type: 'secondary' }),
+      ),
+    ),
+  ),
 );
 
 // 引导漫游实例：根节点需挂到 body（fixed 定位，不参与布局）