mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
feat: Add cursor rules for locale (#53720)
This commit is contained in:
parent
f64e575c1d
commit
4e350a90f7
1 changed files with 94 additions and 0 deletions
94
.cursor/rules/locale.mdc
Normal file
94
.cursor/rules/locale.mdc
Normal file
|
@ -0,0 +1,94 @@
|
|||
---
|
||||
description: 本地化规范文档
|
||||
globs: ["components/locale/*_*.ts", "components/locale/index.tsx"]
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# 本地化规范
|
||||
|
||||
antd 中所有的本地化配置都应该在 `components/locale` 目录中完成定义,主要分为两步:类型定义和本地化配置
|
||||
|
||||
## 类型定义
|
||||
|
||||
antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`, 当需要添加新的本地化配置时,需要检查对应组件或全局配置的类型是否存在,如果不存在,则需要增加相应的类型描述。
|
||||
如果新增或修改的本地化配置时组件配置,那么具体的本地化类型应该在相应的组件目录定义,定义好后在 `components/locale/index.tsx` 引入对应组件的类型定义。
|
||||
|
||||
## 本地化配置
|
||||
|
||||
### 纯字符串配置
|
||||
|
||||
antd 中的本地化配置文件命名规则是:`*_*.ts`,如:`zh_CN.ts`,文件默认导出一个 `Locale` 类型对象。
|
||||
通常在为 antd 添加后修改某一项本地化配置时,如无特殊说明,需要同时修改所有语言的本地化配置。
|
||||
|
||||
本地化配置文件列表如下(包括但不限于):
|
||||
|
||||
```json
|
||||
["components/locale/ar_EG.ts","components/locale/az_AZ.ts","components/locale/bg_BG.ts","components/locale/bn_BD.ts","components/locale/by_BY.ts","components/locale/ca_ES.ts","components/locale/cs_CZ.ts","components/locale/da_DK.ts","components/locale/de_DE.ts","components/locale/el_GR.ts","components/locale/en_GB.ts","components/locale/en_US.ts","components/locale/es_ES.ts","components/locale/et_EE.ts","components/locale/eu_ES.ts","components/locale/fa_IR.ts","components/locale/fi_FI.ts","components/locale/fr_BE.ts","components/locale/fr_CA.ts","components/locale/fr_FR.ts","components/locale/ga_IE.ts","components/locale/gl_ES.ts","components/locale/he_IL.ts","components/locale/hi_IN.ts","components/locale/hr_HR.ts","components/locale/hu_HU.ts","components/locale/hy_AM.ts","components/locale/id_ID.ts","components/locale/is_IS.ts","components/locale/it_IT.ts","components/locale/ja_JP.ts","components/locale/ka_GE.ts","components/locale/kk_KZ.ts","components/locale/km_KH.ts","components/locale/kmr_IQ.ts","components/locale/kn_IN.ts","components/locale/ko_KR.ts","components/locale/ku_IQ.ts","components/locale/lt_LT.ts","components/locale/lv_LV.ts","components/locale/mk_MK.ts","components/locale/ml_IN.ts","components/locale/mn_MN.ts","components/locale/ms_MY.ts","components/locale/my_MM.ts","components/locale/nb_NO.ts","components/locale/ne_NP.ts","components/locale/nl_BE.ts","components/locale/nl_NL.ts","components/locale/pl_PL.ts","components/locale/pt_BR.ts","components/locale/pt_PT.ts","components/locale/ro_RO.ts","components/locale/ru_RU.ts","components/locale/si_LK.ts","components/locale/sk_SK.ts","components/locale/sl_SI.ts","components/locale/sr_RS.ts","components/locale/sv_SE.ts","components/locale/ta_IN.ts","components/locale/th_TH.ts","components/locale/tk_TK.ts","components/locale/tr_TR.ts","components/locale/uk_UA.ts","components/locale/ur_PK.ts","components/locale/uz_UZ.ts","components/locale/vi_VN.ts","components/locale/zh_CN.ts","components/locale/zh_HK.ts","components/locale/zh_TW.ts"]
|
||||
```
|
||||
|
||||
本地化配置的内容通常是纯字符串,如:
|
||||
|
||||
```typescript
|
||||
{
|
||||
// ...
|
||||
Modal: {
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
justOkText: '知道了',
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### 字符串模版配置
|
||||
|
||||
当然,也有一些需要配置需要再运行时实时替换变量的模版配置,带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容:
|
||||
```typescript
|
||||
{
|
||||
// ...
|
||||
date: {
|
||||
format: '${label}日期格式无效',
|
||||
parse: '${label}不能转换为日期',
|
||||
invalid: '${label}是一个无效日期',
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 全局配置
|
||||
|
||||
如果某个本地化配置不独属于某个组件,而是数据全局的本地化配置,此时应该在 `global` 中添加相关属性,如:
|
||||
|
||||
```typescript
|
||||
{
|
||||
// ...
|
||||
// locales for all components
|
||||
global: {
|
||||
placeholder: '请选择',
|
||||
},
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
# 使用本地化
|
||||
|
||||
antd 中具体使用本地化配置时,可以使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化,并跟组件属性中传入的本地化配置合并后得到最完整的本地化配置,如:
|
||||
|
||||
```tsx
|
||||
import { useLocale } from "../locale";
|
||||
import enUS from '../locale/en_US';
|
||||
|
||||
export function TestComp(props) {
|
||||
const { locale: propLocale } = props;
|
||||
const [contextLocale] = useLocale("TestComp", enUs);
|
||||
|
||||
const locale = {...contextLocale, ...propLocale};
|
||||
|
||||
return (
|
||||
<div title={locale?.title}>
|
||||
{locale?.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
Loading…
Add table
Add a link
Reference in a new issue