From 4a1cab0f4c0c3604b87c0e4ef2ff830a24e25b2a Mon Sep 17 00:00:00 2001 From: liuxiran Date: Wed, 12 Aug 2020 13:08:07 +0800 Subject: [PATCH 1/2] docs: create I18N_USER_GUIDE.md --- I18N_USER_GUIDE.md | 147 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 I18N_USER_GUIDE.md diff --git a/I18N_USER_GUIDE.md b/I18N_USER_GUIDE.md new file mode 100644 index 0000000000..1c51391822 --- /dev/null +++ b/I18N_USER_GUIDE.md @@ -0,0 +1,147 @@ + + +# Apache APISIX Dashboard I18N User Guide + +The Apache APISIX Dashboard uses [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) to solve the i18n issues, in order to make the i18n more clear and reasonable, we would recommend to obey the following rules + +## Location of locale configuration： + +- Please put **the global locales** under `src/locales`. +- Please put **each page's locale file** under `src/pages/$PAGE/locales` folder. +- Please put **the Component's locale file** under `src/components/$COMPONENT/locales` folder, and we **MUST** import them manually + +## How to name the key for each locale filed： + +the key can be like this : [basicModule].[moduleName].[elementName].[...desc] + +- what's the first tow levels? e.g: `app.pwa`, `page.consumer`, `component.actionBar` + +- The subkeys are divided into $element + $description style e.g: `app.pwa.message.offline`, `component.actionBar.button.nextStep` + + - If the the text is the part of a element, we can use [elementNameProps] e.g: `page.consumer.proTableColumns.username`. + - If there are two or more same level part locales of a element, we can add number suffix e.g: `page.route.form.itemRulesExtraMessage1.path`, `page.route.form.itemRulesExtraMessage2.path`. + +- common texts, we should not repeat in other part, and the common locale key omit [elementName] would be better. + + - If the text is used in two or more places inside the module, we would recommend to share the text in the module, e.g:`page.route.parameterPosition`. + - If the text is used in two or more places between modules, we would recommend to share the text globally, and add`global`as the moduleName,git e.g:`component.global.confirm`. + +## Global locale keys + +we have already defined many global keys, before you do i18n, you can refer to [those](https://github.com/apache/apisix-dashboard/blob/master/src/locales/zh-CN/component.ts). + +## Recommended subkey naming + +- **Form** + +| element | props | locale subKey | +| --------- | -------------- | ----------------------------- | +| Form.Item | label | form.itemLabel | +| Form.Item | rules.required | form.itemRulesRequiredMessage | +| Form.Item | rules.pattern | form.itemRulesPatternMessage | +| Form.Item | extra | form.itemExtraMessage | + +**Example:** + +```js +'page.route.form.itemRulesExtraMessage.parameterName': '仅支持字母和数字，且只能以字母开头', +'page.route.form.itemLabel.apiName': 'API 名称', +'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度100，仅支持字母、数字、- 和 _，且只能以字母开头', +``` + +- **Input** + +| element | props | locale subKey | +| ------- | ----------- | ----------------- | +| Input | placeholder | input.placeholder | + +**Example:** + +```js +'page.route.input.placeholder.parameterNameHttpHeader': '请求头键名，例如：HOST', +``` + +- **Button** + +| element | props | locale subKey | +| ------- | ----- | ------------- | +| Button | null | button | + +**Example:** + +```js +'page.route.button.returnList': '返回路由列表', +``` + +- **PanelSection** + +| element | props | locale subKey | +| ------------ | ----- | ------------------ | +| PanelSection | title | panelSection.title | + +**Example:** + +```js +'page.route.panelSection.title.nameDescription': '名称及其描述', +``` + +- **Steps** + +| element | props | locale subKey | +| ---------- | ----- | --------------- | +| Steps.step | title | steps.stepTitle | + +**Example:** + +```js +'page.route.steps.stepTitle.defineApiRequest': '定义 API 请求', +``` + +- **Select** + +| element | props | locale subKey | +| ------------- | ----- | ------------- | +| Select.Option | null | select.option | + +**Example:** + +```js +'page.route.select.option.enableHttps': '启用 HTTPS', +``` + +- **Radio** + +| element | props | locale subKey | +| ------- | ----- | ------------- | +| Radio | null | radio | + +**Example:** + +```js +'page.route.radio.staySame': '保持原样', +``` + +- **ProTable** + +| element | props | locale subKey | +| -------- | ------------- | --------------------- | +| ProTable | columns.title | proTable.columnsTitle | + +_ProTable usually appears in conjunction with forms, and columns title are same with form item label, so we recommend these title keys to be the common key in modules._ From 931d3ec221c9e3dbeafe03cf9a1cf99b1663cbe5 Mon Sep 17 00:00:00 2001 From: liuxiran Date: Thu, 13 Aug 2020 18:09:33 +0800 Subject: [PATCH 2/2] docs: modify I18N_USER_GUIDE.md --- I18N_USER_GUIDE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/I18N_USER_GUIDE.md b/I18N_USER_GUIDE.md index 1c51391822..0ebd44f6d0 100644 --- a/I18N_USER_GUIDE.md +++ b/I18N_USER_GUIDE.md @@ -40,8 +40,8 @@ the key can be like this : [basicModule].[moduleName].[elementName].[...desc] - common texts, we should not repeat in other part, and the common locale key omit [elementName] would be better. - - If the text is used in two or more places inside the module, we would recommend to share the text in the module, e.g:`page.route.parameterPosition`. - - If the text is used in two or more places between modules, we would recommend to share the text globally, and add`global`as the moduleName,git e.g:`component.global.confirm`. + - If the text is used in two or more places inside the module, we would recommend sharing the text in the module, e.g:`page.route.parameterPosition`. + - If the text is used in two or more places between modules, we would recommend sharing the text globally, and add`global`as the moduleName,git e.g:`component.global.confirm`. ## Global locale keys