feat(client): improve locale
This commit is contained in:
parent
7839e78164
commit
b466b8f6fb
@ -1,9 +1,8 @@
|
|||||||
import { ConfigProvider, Spin } from 'antd';
|
import { ConfigProvider, Spin } from 'antd';
|
||||||
import enUS from 'antd/lib/locale/en_US';
|
|
||||||
import zhCN from 'antd/lib/locale/zh_CN';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useAPIClient, useRequest } from '../api-client';
|
import { useAPIClient, useRequest } from '../api-client';
|
||||||
|
import locale from '../locale';
|
||||||
|
|
||||||
export function AntdConfigProvider(props) {
|
export function AntdConfigProvider(props) {
|
||||||
const { remoteLocale, ...others } = props;
|
const { remoteLocale, ...others } = props;
|
||||||
@ -28,7 +27,7 @@ export function AntdConfigProvider(props) {
|
|||||||
return <Spin />;
|
return <Spin />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<ConfigProvider {...others} locale={i18n.language === 'zh-CN' ? zhCN : enUS}>
|
<ConfigProvider {...others} locale={locale[i18n.language].antd}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
import i18next from 'i18next';
|
import i18next from 'i18next';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { initReactI18next } from 'react-i18next';
|
import { initReactI18next } from 'react-i18next';
|
||||||
import { resources } from '../locale';
|
import locale from '../locale';
|
||||||
const log = require('debug')('i18next');
|
const log = require('debug')('i18next');
|
||||||
|
|
||||||
export const i18n = i18next.createInstance();
|
export const i18n = i18next.createInstance();
|
||||||
|
|
||||||
|
const resources = {};
|
||||||
|
|
||||||
|
Object.keys(locale).forEach((lang) => {
|
||||||
|
resources[lang] = locale[lang].resources;
|
||||||
|
});
|
||||||
|
|
||||||
i18n.use(initReactI18next).init({
|
i18n.use(initReactI18next).init({
|
||||||
lng: localStorage.getItem('NOCOBASE_LOCALE') || 'en-US',
|
lng: localStorage.getItem('NOCOBASE_LOCALE') || 'en-US',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
@ -18,13 +24,8 @@ i18n.use(initReactI18next).init({
|
|||||||
resources,
|
resources,
|
||||||
});
|
});
|
||||||
|
|
||||||
const momentLngs = {
|
|
||||||
'en-US': 'en',
|
|
||||||
'zh-CN': 'zh-cn',
|
|
||||||
};
|
|
||||||
|
|
||||||
function setMomentLng(language) {
|
function setMomentLng(language) {
|
||||||
const lng = momentLngs[language || 'en-US'] || 'en';
|
const lng = locale[language || 'en-US'].moment || 'en';
|
||||||
log(lng);
|
log(lng);
|
||||||
moment.locale(lng);
|
moment.locale(lng);
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,39 @@
|
|||||||
|
import antdEnUS from 'antd/lib/locale/en_US';
|
||||||
|
import antdZhCN from 'antd/lib/locale/zh_CN';
|
||||||
import enUS from './en_US';
|
import enUS from './en_US';
|
||||||
import zhCN from './zh_CN';
|
import zhCN from './zh_CN';
|
||||||
|
|
||||||
export const resources = {
|
export type LocaleOptions = {
|
||||||
|
label: string;
|
||||||
|
moment: string;
|
||||||
|
antd: any;
|
||||||
|
resources?: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
'en-US': {
|
'en-US': {
|
||||||
client: {
|
label: 'English',
|
||||||
...enUS,
|
// https://github.com/moment/moment/blob/develop/locale/en.js
|
||||||
|
moment: 'en',
|
||||||
|
// https://github.com/ant-design/ant-design/tree/master/components/locale/en_US
|
||||||
|
antd: antdEnUS,
|
||||||
|
resources: {
|
||||||
|
client: {
|
||||||
|
...enUS,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
client: {
|
label: '简体中文',
|
||||||
...zhCN,
|
// https://github.com/moment/moment/blob/develop/locale/zh-cn.js
|
||||||
|
moment: 'zh-cn',
|
||||||
|
// https://github.com/ant-design/ant-design/tree/master/components/locale/zh_CN
|
||||||
|
antd: antdZhCN,
|
||||||
|
// i18next
|
||||||
|
resources: {
|
||||||
|
client: {
|
||||||
|
...zhCN,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
} as Record<string, LocaleOptions>;
|
||||||
|
@ -89,6 +89,19 @@ const schema: ISchema = {
|
|||||||
{ label: '简体中文', value: 'zh-CN' },
|
{ label: '简体中文', value: 'zh-CN' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
enabledLanguages: {
|
||||||
|
type: 'array',
|
||||||
|
title: '{{t("Enabled languages")}}',
|
||||||
|
'x-component': 'Select',
|
||||||
|
"x-component-props": {
|
||||||
|
mode: 'multiple',
|
||||||
|
},
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
enum: [
|
||||||
|
{ label: 'English', value: 'en-US' },
|
||||||
|
{ label: '简体中文', value: 'zh-CN' },
|
||||||
|
],
|
||||||
|
},
|
||||||
allowSignUp: {
|
allowSignUp: {
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
default: true,
|
default: true,
|
||||||
|
@ -1,13 +1,20 @@
|
|||||||
import { Menu, Select } from 'antd';
|
import { Menu, Select } from 'antd';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useAPIClient, useCurrentUserContext } from '..';
|
import { useAPIClient, useCurrentUserContext, useSystemSettings } from '..';
|
||||||
|
import locale from '../locale';
|
||||||
|
|
||||||
export const LanguageSettings = () => {
|
export const LanguageSettings = () => {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const api = useAPIClient();
|
const api = useAPIClient();
|
||||||
const ctx = useCurrentUserContext();
|
const ctx = useCurrentUserContext();
|
||||||
|
const { data } = useSystemSettings();
|
||||||
|
const enabledLanguages: string[] = data?.data?.enabledLanguages || [];
|
||||||
|
if (!enabledLanguages.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// console.log('data', data?.data?.enabledLanguages);
|
||||||
return (
|
return (
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
eventKey={'LanguageSettings'}
|
eventKey={'LanguageSettings'}
|
||||||
@ -23,10 +30,14 @@ export const LanguageSettings = () => {
|
|||||||
onDropdownVisibleChange={(open) => {
|
onDropdownVisibleChange={(open) => {
|
||||||
setOpen(open);
|
setOpen(open);
|
||||||
}}
|
}}
|
||||||
options={[
|
options={Object.keys(locale)
|
||||||
{ label: '简体中文', value: 'zh-CN' },
|
.filter((lang) => enabledLanguages.includes(lang))
|
||||||
{ label: 'English', value: 'en-US' },
|
.map((lang) => {
|
||||||
]}
|
return {
|
||||||
|
label: locale[lang].label,
|
||||||
|
value: lang,
|
||||||
|
};
|
||||||
|
})}
|
||||||
value={i18n.language}
|
value={i18n.language}
|
||||||
onChange={async (lang) => {
|
onChange={async (lang) => {
|
||||||
await api.resource('users').updateProfile({
|
await api.resource('users').updateProfile({
|
||||||
|
@ -21,6 +21,10 @@ export default defineCollection({
|
|||||||
name: 'logo',
|
name: 'logo',
|
||||||
target: 'attachments',
|
target: 'attachments',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'array',
|
||||||
|
name: 'enabledLanguages',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'string',
|
type: 'string',
|
||||||
name: 'appLang',
|
name: 'appLang',
|
||||||
|
Loading…
Reference in New Issue
Block a user