From ceda55bef700858ab7a83dc7891341244d4c9436 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 22 Apr 2026 20:31:23 +0800 Subject: [PATCH] style(Typography): add style and docs --- docs/mobile/api/typography.en-US.md | 26 ++++ docs/mobile/api/typography.md | 26 ++++ js/global-config/mobile/locale/ar_KW.ts | 5 + js/global-config/mobile/locale/en_US.ts | 5 + js/global-config/mobile/locale/it_IT.ts | 5 + js/global-config/mobile/locale/ja_JP.ts | 5 + js/global-config/mobile/locale/ko_KR.ts | 5 + js/global-config/mobile/locale/ru_RU.ts | 5 + js/global-config/mobile/locale/zh_CN.ts | 5 + js/global-config/mobile/locale/zh_TW.ts | 5 + style/mobile/components/typography/_docs.less | 23 ++++ .../mobile/components/typography/_index.less | 114 ++++++++++++++++++ style/mobile/components/typography/_var.less | 29 +++++ 13 files changed, 258 insertions(+) create mode 100644 docs/mobile/api/typography.en-US.md create mode 100644 docs/mobile/api/typography.md create mode 100644 style/mobile/components/typography/_docs.less create mode 100644 style/mobile/components/typography/_index.less create mode 100644 style/mobile/components/typography/_var.less diff --git a/docs/mobile/api/typography.en-US.md b/docs/mobile/api/typography.en-US.md new file mode 100644 index 0000000000..8a435e577b --- /dev/null +++ b/docs/mobile/api/typography.en-US.md @@ -0,0 +1,26 @@ +--- +title: Typography +description: Typography is used to basic text layout and style. +isComponent: true +spline: base +--- + +### Base + +{{ base }} + +### Combination + +{{ combination }} + +### Theme + +{{ theme }} + +### Copyable + +{{ copyable }} + +### Ellipsis + +{{ ellipsis }} diff --git a/docs/mobile/api/typography.md b/docs/mobile/api/typography.md new file mode 100644 index 0000000000..d86a222b94 --- /dev/null +++ b/docs/mobile/api/typography.md @@ -0,0 +1,26 @@ +--- +title: Typography 排版 +description: 排版用于文本基础编排和样式，使用排版组件，可以快速完成页面中的文本内容制作，同时配合其他组件完成暗黑明亮模式切换等风格统一的需求 +isComponent: true +spline: base +--- + +### 基础文本 + +{{ base }} + +### 组合用法 + +{{ combination }} + +### 主题样式 + +{{ theme }} + +### 可复制 + +{{ copyable }} + +### 文本省略 + +{{ ellipsis }} diff --git a/js/global-config/mobile/locale/ar_KW.ts b/js/global-config/mobile/locale/ar_KW.ts index 3fea713ec3..501223361d 100644 --- a/js/global-config/mobile/locale/ar_KW.ts +++ b/js/global-config/mobile/locale/ar_KW.ts @@ -121,6 +121,11 @@ export default { finish: 'أنهي', back: 'العودة', }, + typography: { + expandText: 'توسيع', + collapseText: 'طي', + copiedText: 'النسخ اكتمل', + }, qrcode: { expiredText: 'منتهي الصلاحية', refreshText: 'ينعش', diff --git a/js/global-config/mobile/locale/en_US.ts b/js/global-config/mobile/locale/en_US.ts index 807ad12a32..c7d705aefa 100644 --- a/js/global-config/mobile/locale/en_US.ts +++ b/js/global-config/mobile/locale/en_US.ts @@ -110,6 +110,11 @@ export default { finish: 'Finish', back: 'Back', }, + typography: { + expandText: 'more', + collapseText: 'collapse', + copiedText: 'copied', + }, qrcode: { expiredText: 'expired', refreshText: 'refresh', diff --git a/js/global-config/mobile/locale/it_IT.ts b/js/global-config/mobile/locale/it_IT.ts index f3a03d2183..c83649fa51 100644 --- a/js/global-config/mobile/locale/it_IT.ts +++ b/js/global-config/mobile/locale/it_IT.ts @@ -109,6 +109,11 @@ export default { finish: 'Finisci', back: 'Indietro', }, + typography: { + expandText: 'Espandere', + collapseText: 'ripiegare', + copiedText: 'Copia completata', + }, qrcode: { expiredText: 'scaduto', refreshText: 'aggiornare', diff --git a/js/global-config/mobile/locale/ja_JP.ts b/js/global-config/mobile/locale/ja_JP.ts index 393b6b5021..37110fdcc1 100644 --- a/js/global-config/mobile/locale/ja_JP.ts +++ b/js/global-config/mobile/locale/ja_JP.ts @@ -96,6 +96,11 @@ export default { finish: '完了', back: '戻る', }, + typography: { + expandText: 'もっと拡大する', + collapseText: '畳む', + copiedText: 'コピー成功', + }, qrcode: { expiredText: '期限切れ', refreshText: 'リフレッシュ', diff --git a/js/global-config/mobile/locale/ko_KR.ts b/js/global-config/mobile/locale/ko_KR.ts index 5b32411d61..6fba0be4ec 100644 --- a/js/global-config/mobile/locale/ko_KR.ts +++ b/js/global-config/mobile/locale/ko_KR.ts @@ -96,6 +96,11 @@ export default { finish: '완료', back: '뒤로', }, + typography: { + expandText: '더보기', + collapseText: '접기', + copiedText: '복사 성공', + }, qrcode: { expiredText: '만료됨', refreshText: '새로 고치다', diff --git a/js/global-config/mobile/locale/ru_RU.ts b/js/global-config/mobile/locale/ru_RU.ts index da4bad60c5..9983a7de9f 100644 --- a/js/global-config/mobile/locale/ru_RU.ts +++ b/js/global-config/mobile/locale/ru_RU.ts @@ -121,6 +121,11 @@ export default { finish: 'Готово', back: 'Назад', }, + typography: { + expandText: 'Развернуть', + collapseText: 'Свернуть', + copiedText: 'Скопировано', + }, qrcode: { expiredText: 'истекший', refreshText: 'обновить', diff --git a/js/global-config/mobile/locale/zh_CN.ts b/js/global-config/mobile/locale/zh_CN.ts index dc7e2001cb..11389113f3 100644 --- a/js/global-config/mobile/locale/zh_CN.ts +++ b/js/global-config/mobile/locale/zh_CN.ts @@ -97,6 +97,11 @@ export default { finish: '完成', back: '返回', }, + typography: { + expandText: '展开', + collapseText: '收起', + copiedText: '复制成功', + }, qrcode: { expiredText: '二维码过期', refreshText: '点击刷新', diff --git a/js/global-config/mobile/locale/zh_TW.ts b/js/global-config/mobile/locale/zh_TW.ts index 62c0989d5c..811e2cae00 100644 --- a/js/global-config/mobile/locale/zh_TW.ts +++ b/js/global-config/mobile/locale/zh_TW.ts @@ -96,6 +96,11 @@ export default { finish: '完成', back: '返回', }, + typography: { + expandText: '展開', + collapseText: '收起', + copiedText: '復製成功', + }, qrcode: { expiredText: '二維碼過期', refreshText: '點擊刷新', diff --git a/style/mobile/components/typography/_docs.less b/style/mobile/components/typography/_docs.less new file mode 100644 index 0000000000..7a5c04396d --- /dev/null +++ b/style/mobile/components/typography/_docs.less @@ -0,0 +1,23 @@ +@import './_var.less'; + +// TDesign 站点中有代码code元素的相关样式 为正常展示需要覆盖为typography样式 +div[name='DEMO'] *:not(pre) > .t-typography code { + border-radius: @radius-default; + border: 1px solid @component-border; + margin: 0 calc(@spacer / 2); + background-color: @bg-color-secondarycontainer; + padding: 0 @spacer; + color: @text-color-primary; + transition: background-color 0.2s; + font: @font-body-small; + font-family: @typography-code-family; +} + +// 纵向展示 Text 组件DEMO示例中去掉 margin +div[name='DEMO'] .vertical-demo .t-typography code { + margin: 0; +} + +div[name='DEMO'] .vertical-demo .t-typography kbd { + margin: 0; +} diff --git a/style/mobile/components/typography/_index.less b/style/mobile/components/typography/_index.less new file mode 100644 index 0000000000..38e99c2b5b --- /dev/null +++ b/style/mobile/components/typography/_index.less @@ -0,0 +1,114 @@ +@import '../../base.less'; + +@import './_var.less'; + +.@{prefix}-typography { + color: @typography-text-primary-color; + font: @font-body-medium; + margin: @spacer-2 0; + + // 标题 + h1& { + font: @typography-h1-font; + margin-top: @spacer-4; + margin-bottom: @spacer-3; + } + + h2& { + font: @typography-h2-font; + margin-top: @spacer-4; + margin-bottom: @spacer-3; + } + + h3& { + font: @typography-h3-font; + margin-top: @spacer-4; + margin-bottom: @spacer-2; + } + + h4& { + font: @typography-h4-font; + margin-top: @spacer-3; + margin-bottom: @spacer-2; + } + + h5& { + font: @typography-h5-font; + margin-top: @spacer-3; + margin-bottom: @spacer-2; + } + + h6& { + font: @typography-h6-font; + } + + // 加粗样式 + strong { + font-weight: @typography-text-strong; + } + + // 标记样式 + mark { + background-color: @typography-text-mark-color; + } + + // 代码样式 + code { + border-radius: @radius-default; + border: 1px solid @component-border; + margin: 0 @spacer; + background-color: @bg-color-secondarycontainer; + padding: 0 @spacer; + transition: background-color .2s; + white-space: nowrap; + font: @typography-code-font; + font-family: @typography-code-family; + display: inline-block; + } + + // 键盘样式 + kbd { + border-radius: @radius-default; + border: 1px solid @component-border; + margin: 0 calc(@spacer / 2); + background-color: @bg-color-secondarycontainer; + padding: 0 @spacer; + box-shadow: 0 1px 0 0 @component-border; + font: @typography-code-font; + font-family: @typography-code-family; + display: inline-block; + } + + // 不可选样式 + &--disabled { + color: @typography-text-disabled-color; + cursor: not-allowed; + } + + // 主题样式 + &--success { + color: @typography-text-success-color; + } + + &--warning { + color: @typography-text-warning-color; + } + + &--error { + color: @typography-text-error-color; + } + + &--secondary { + color: @typography-text-secondary-color; + } + + &-ellipsis-symbol, + .t-icon-copy { + color: @typography-icon-color; + cursor: pointer; + } + + .t-icon-checked { + color: @success-color; + } +} diff --git a/style/mobile/components/typography/_var.less b/style/mobile/components/typography/_var.less new file mode 100644 index 0000000000..e846ecec66 --- /dev/null +++ b/style/mobile/components/typography/_var.less @@ -0,0 +1,29 @@ +@typography-text-primary-color: @text-color-primary; +@typography-text-secondary-color: @text-color-secondary; +@typography-text-disabled-color: @text-color-disabled; +@typography-text-success-color: @success-color; +@typography-text-error-color: @error-color; +@typography-text-warning-color: @warning-color; +@typography-text-mark-color: #fcdf47; +@typography-icon-color: @brand-color; + +@typography-text-strong: 600; + +@typography-text-font: @font-body-medium; +@typography-code-font: @font-body-small; +@typography-h1-font: @font-headline-large; +@typography-h2-font: @font-headline-medium; +@typography-h3-font: @font-headline-small; +@typography-h4-font: @font-title-large; +@typography-h5-font: @font-title-medium; +@typography-h6-font: @font-title-small; + +@typography-code-family: + Source Code Pro, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Hiragino Sans GB, + Microsoft YaHei UI, + Microsoft YaHei;