feat: add i18n support for antd and WebFastifyForm

client/packages/design/components/WebMetaForm/index.tsx

@@ -21,6 +21,17 @@ regField('select', FastifyFormSelect);
 regField('checkbox', FastifyFormCheckbox);
 regField('custom', FastifyFormCustom);
 
+let webFastifyFormConfig = {
+  submitLabel: 'Submit',
+};
+
+export function setWebFastifyFormConfig(config: typeof webFastifyFormConfig) {
+  webFastifyFormConfig = {
+    ...webFastifyFormConfig,
+    ...config,
+  };
+}
+
 const WebFastifyFormContainer: FastifyFormContainerComponent = React.memo(
   (props) => {
     const layout = props.layout;
@@ -42,7 +53,7 @@ const WebFastifyFormContainer: FastifyFormContainerComponent = React.memo(
             onClick={() => props.handleSubmit()}
             disabled={props.canSubmit === false}
           >
-            {props.submitLabel ?? '提交'}
+            {props.submitLabel ?? webFastifyFormConfig.submitLabel}
           </Button>
         </Form.Item>
       );

client/packages/design/components/index.ts

@@ -10,7 +10,10 @@ export { Image, setImageUrlParser } from './Image';
 export { SensitiveText } from './SensitiveText';
 export { VirtualChatList } from './VirtualChatList';
 
-export { WebMetaForm } from './WebMetaForm';
+export {
+  WebMetaForm,
+  setWebFastifyFormConfig as setWebMetaFormConfig,
+} from './WebMetaForm';
 export {
   createFastifyFormSchema as createMetaFormSchema,
   fieldSchema as metaFormFieldSchema,

client/shared/i18n/index.ts

@@ -119,8 +119,8 @@ export async function setLanguage(lang: AllowedLanguage): Promise<void> {
 /**
  * 获取i18n语言
  */
-export function getLanguage(): string {
-  return i18next.language;
+export function getLanguage(): AllowedLanguage {
+  return i18next.language as AllowedLanguage;
 }
 
 /**

client/web/src/App.tsx

@@ -7,9 +7,11 @@ import {
   Routes,
 } from 'react-router-dom';
 import {
+  getLanguage,
   parseUrlStr,
   sharedEvent,
   TcProvider,
+  useAsync,
   useColorScheme,
   useGlobalConfigStore,
   useLanguage,
@@ -28,6 +30,8 @@ import { AppRouterApi } from './components/AppRouterApi';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ErrorBoundary } from './components/ErrorBoundary';
+import enUS from 'antd/es/locale/en_US';
+import type { Locale } from 'antd/es/locale-provider';
 
 const AppRouter: any = isElectron() ? HashRouter : BrowserRouter;
 
@@ -55,15 +59,34 @@ const InviteRoute = Loadable(
     )
 );
 
+export const TcAntdProvider: React.FC<PropsWithChildren> = React.memo(
+  (props) => {
+    const { value: locale } = useAsync(async (): Promise<Locale> => {
+      const language = getLanguage();
+
+      if (language === 'zh-CN') {
+        return import('antd/es/locale/zh_CN').then((m) => m.default);
+      }
+
+      return enUS;
+    }, []);
+
+    return (
+      <AntdProvider getPopupContainer={getPopupContainer} locale={locale}>
+        {props.children}
+      </AntdProvider>
+    );
+  }
+);
+TcAntdProvider.displayName = 'TcAntdProvider';
+
 const AppProvider: React.FC<PropsWithChildren> = React.memo((props) => {
   return (
     <Suspense fallback={<LoadingSpinner />}>
       <AppRouter>
         <TcProvider>
           <DndProvider backend={HTML5Backend}>
-            <AntdProvider getPopupContainer={getPopupContainer}>
-              {props.children}
-            </AntdProvider>
+            <TcAntdProvider>{props.children}</TcAntdProvider>
           </DndProvider>
         </TcProvider>
       </AppRouter>

client/web/src/init.tsx

@@ -21,7 +21,7 @@ import { getUserJWT } from './utils/jwt-helper';
 import _get from 'lodash/get';
 import { recordMeasure } from './utils/measure-helper';
 import { postMessageEvent } from './utils/event-helper';
-import { setImageUrlParser } from 'tailchat-design';
+import { setImageUrlParser, setWebMetaFormConfig } from 'tailchat-design';
 
 recordMeasure('init');
 postMessageEvent('init');
@@ -72,6 +72,10 @@ setGlobalLoading((text) => {
 
 setImageUrlParser(parseUrlStr);
 
+setWebMetaFormConfig({
+  submitLabel: t('提交'),
+});
+
 const backToLoginPage = (() => {
   let timer: number;