组件 / 其他

LocaleProvider

国际化组件，为组件提供多语言支持。

设计文档（新窗口打开）

目前支持语言

语言语言包
简体中文zh_CN（亦可写 zh-CN）
英语（美）en_US（亦可写 en-US）
与 Semi 的差异

Semi 内置 57 个语言包，本库目前只内置 zh_CN / en_US 两个。

需要其它语种时，用 registerLocale(code, bundle) 注册自己的语言包即可（见下方「注册自定义语言包」）—— 这是本库补充的能力，Semi 的 locale 只接受语言包对象、没有注册表。

已支持组件

目前有以下组件存在内置默认文本，均已实现国际化多语言适配：

AIChatDialogue、AIChatInput、Anchor、AudioPlayer、AutoComplete、Avatar、BackTop、Banner、Breadcrumb、Calendar、Carousel、Cascader、Chat、CodeHighlight、ColorPicker、Cropper、DatePicker、Feedback、Form、HotKeys、Image、Input、InputNumber、JsonViewer、List、Modal、Nav、Notification、Pagination、PinCode、Popconfirm、Popover、Rating、Select、SideSheet、SideBar、Slider、Spin、Steps、Table、Tabs、Tag、TagInput、TimePicker、Toast、Transfer、Tree、TreeSelect、Typography、Upload、UserGuide、VideoPlayer

使用

LocaleProvider 使用了 Svelte 的 context 上下文特性，你只需要在应用外围包裹一次即可全局生效。 当需要切换语言时，直接切换 props 传入的 locale 即可。

import { LocaleProvider, en_US } from '@chenzy-design/svelte';

// 在 locale 中传入相应的语言包即可
<LocaleProvider locale={en_US}>
  <App />
</LocaleProvider>;

代码示例

国际化

    Total pages: 10
  • 1
  • 2
  • 3
  • 4
  • …
    •
  • 9
  • 10
    总页数：10
  • 1
  • 2
  • 3
  • 4
  • …
    •
  • 9
  • 10

自定义国际化组件

当你的自定义组件，也希望消费 LocaleProvider Context 中的 localeCode 或者读取具体某个组件的 i18n 文本 localeData 时， 可以使用 useLocale() 获取（等价 Semi 的 LocaleConsumer：React 用 render-props 组件，Svelte 用初始化期调用的 helper）。

  • loc().component('TimePicker') 取整片语言包（对应 Semi 的 localeData），可读嵌套/数组值；
  • loc().code 即当前生效的语言码（对应 Semi 的 localeCode）。
本库补充

loc().t('X.y')（点号路径取单条文案）、loc().formatDate() / loc().formatNumber()（Intl 格式化）、 loc().direction（文本方向）均为本库补充：Semi LocaleConsumer 只透传 localeData/localeCode/dateFnsLocale/currency， 格式化与方向推断分散在各消费组件内部自行实现；本库把这套逻辑收敛到 @chenzy-design/locale 的 createLocale， 供全部消费组件复用同一份格式化/回退实现，而非重复散落在每个组件里。

zh-CN : 开始时间
en-US : Start Time
en-GB : Start Time
zh-CN : semi
en-US : design
en-GB : dsm

支持多语言的组件

示例给出了目前所有支持多语言的组件。

当你的网站有 RTL 适配需求时，推荐直接使用 ConfigProvider，除了可配置 locale 外，还可以同时配置 direction='rtl'； 若无 RTL 适配需求，直接使用 LocaleProvider 即可。

Pagination
    总页数：10
  • 1
  • 2
  • 3
  • 4
  • …
    •
  • 9
  • 10
    • 跳至 页
Modal
Select & Cascader
DatePicker
TimePicker


TreeSelect
Table
Name
Age
Address
Bytedance 0 32 Beijing, Haidian. Zhichun Road 0
Bytedance 1 32 Beijing, Haidian. Zhichun Road 1
Bytedance 2 32 Beijing, Haidian. Zhichun Road 2
Bytedance 3 32 Beijing, Haidian. Zhichun Road 3
Bytedance 4 32 Beijing, Haidian. Zhichun Road 4
Bytedance 5 32 Beijing, Haidian. Zhichun Road 5
Bytedance 6 32 Beijing, Haidian. Zhichun Road 6
Bytedance 7 32 Beijing, Haidian. Zhichun Road 7
Bytedance 8 32 Beijing, Haidian. Zhichun Road 8
Bytedance 9 32 Beijing, Haidian. Zhichun Road 9
显示第 1 条-第 10 条，共 46 条
  • 1
  • 2
  • 3
  • 4
  • 5
Table - Empty
Name
Age
Address
暂无数据
List - Empty
List
暂无数据
Calendar
Typography - Copyable

Click to copy text.

Typography - Collapsible

支持展开和折叠：chenzy-design 的设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

Transfer
总个数：100
选项名称 0
选项名称 1
选项名称 2
选项名称 3
选项名称 4
选项名称 5
选项名称 6
选项名称 7
选项名称 8
选项名称 9
选项名称 10
选项名称 11
选项名称 12
选项名称 13
选项名称 14
选项名称 15
选项名称 16
选项名称 17
选项名称 18
选项名称 19
选项名称 20
选项名称 21
选项名称 22
选项名称 23
选项名称 24
选项名称 25
选项名称 26
选项名称 27
选项名称 28
选项名称 29
选项名称 30
选项名称 31
选项名称 32
选项名称 33
选项名称 34
选项名称 35
选项名称 36
选项名称 37
选项名称 38
选项名称 39
选项名称 40
选项名称 41
选项名称 42
选项名称 43
选项名称 44
选项名称 45
选项名称 46
选项名称 47
选项名称 48
选项名称 49
选项名称 50
选项名称 51
选项名称 52
选项名称 53
选项名称 54
选项名称 55
选项名称 56
选项名称 57
选项名称 58
选项名称 59
选项名称 60
选项名称 61
选项名称 62
选项名称 63
选项名称 64
选项名称 65
选项名称 66
选项名称 67
选项名称 68
选项名称 69
选项名称 70
选项名称 71
选项名称 72
选项名称 73
选项名称 74
选项名称 75
选项名称 76
选项名称 77
选项名称 78
选项名称 79
选项名称 80
选项名称 81
选项名称 82
选项名称 83
选项名称 84
选项名称 85
选项名称 86
选项名称 87
选项名称 88
选项名称 89
选项名称 90
选项名称 91
选项名称 92
选项名称 93
选项名称 94
选项名称 95
选项名称 96
选项名称 97
选项名称 98
选项名称 99
已选个数：0
暂无内容，可从左侧勾选
Form
Navigation
chenzy 数据后台

注册自定义语言包

本库补充
Semi 的 `locale` 只接受语言包对象；本库额外提供 `registerLocale(code, bundle)` 注册表， 注册后 `locale` 可直接传字符串码（内置的 `zh_CN` / `en_US` 也支持字符串写法）。
默认 zh_CN
    总页数：26
  • 1
  • 2
  • 3
  • 4
  • …
    •
  • 25
  • 26
自定义注册包 zh-CN-formal
    本页之外另有记录，合计 26 页
  • 1
  • 2
  • 3
  • 4
  • …
    •
  • 25
  • 26

API 参考

严格对齐 Semi localeProvider.tsx：唯一 prop 是 locale，children 是普通子树、无作用域参数。

属性说明类型默认值
locale语言包对象，或内置/已注册的字符串码（如 'zh_CN' / 'en-US'）；未知码回退 en_USLocale | string-
与 Semi 的差异

Semi LocaleProvider 无 prop 默认值时用内置 zh_CN（defaultProps.locale = DefaultLocale）； 本库未包 LocaleProvider 时组件回退 en_US（useLocale() 的无 Provider 回退），沿用本库既定的默认语言约定。

相关工具

名称说明
mergeLocale(parent, child)深合并两个语言包（子覆盖父）。child 可携带自定义组件的键
registerLocale(code, bundle)把自定义语言包注册到字符串码（本库补充）
resolveLocale(input)把字符串码解析成语言包；对象原样返回
unregisterLocale(code)注销已注册的语言包（主要供测试 teardown）
useLocale()在组件初始化期取得稳定 getter，渲染期读 loc() 拿最新 LocaleApi

Accessibility

  • 本组件无 DOM 输出，不持有 role / aria 属性，不打断辅助技术的可访问性树。
  • lang / dir 同步：LocaleProvider 本身不提供变更回调（对齐 Semi，Semi LocaleProvider 同样无此能力）； 需要 RTL / lang 同步时用 ConfigProvider（提供 direction prop，并在 direction='rtl' 时渲染镜像容器）。
  • locale 切换为纯文本替换，不移动 / 丢失焦点。