@fe-free/core 4.0.2 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @fe-free/core
 
+## 4.0.4
+
+### Patch Changes
+
+- feat: i18n
+  - @fe-free/icons@4.0.4
+  - @fe-free/tool@4.0.4
+
+## 4.0.3
+
+### Patch Changes
+
+- @fe-free/icons@4.0.3
+- @fe-free/tool@4.0.3
+
 ## 4.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -45,9 +45,13 @@
     "@ant-design/pro-components": "2.8.9",
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
+    "i18next": "^25.7.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
-    "@fe-free/icons": "4.0.2",
-    "@fe-free/tool": "4.0.2"
+    "react-i18next": "^16.4.0",
+    "@fe-free/tool": "4.0.4",
+    "@fe-free/icons": "4.0.4"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/core_app/index.tsx

@@ -1,11 +1,14 @@
 import { ProConfigProvider } from '@ant-design/pro-components';
 import { useTitle } from 'ahooks';
 import { App, ConfigProvider } from 'antd';
+import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
 import classNames from 'classnames';
 import { merge } from 'lodash-es';
 import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BrowserRouter as Router, useNavigate } from 'react-router-dom';
+import { EnumLanguage, I18nProvider } from '../i18n';
 import { routeTool } from '../route';
 import { customValueTypeMap } from '../value_type_map';
 import { themeConfig } from './config';
@@ -94,8 +97,7 @@ function SetRouteTool({ basename }: { basename: string }) {
   return null;
 }
 
-/** 提供一些基础的组 APP 功能 */
-function CoreApp(props: {
+interface CoreAppProps {
   basename: string;
   name?: string;
   enableCheckUpdate?: boolean;
@@ -107,7 +109,9 @@ function CoreApp(props: {
   customConfig?: {
     hiddenFormItemLabelColon?: boolean;
   };
-}) {
+}
+/** 提供一些基础的组 APP 功能 */
+function CoreAppBase(props: CoreAppProps) {
   const {
     basename,
     name,
@@ -120,6 +124,8 @@ function CoreApp(props: {
     customConfig,
   } = props;
 
+  const { i18n } = useTranslation();
+
   useTitle(name || '');
 
   useEffect(() => {
@@ -133,6 +139,14 @@ function CoreApp(props: {
     return merge(themeConfig, configProviderProps?.theme);
   }, [configProviderProps?.theme]);
 
+  const locale = useMemo(() => {
+    if (configProviderProps?.locale) {
+      return configProviderProps.locale;
+    }
+
+    return i18n.language === EnumLanguage.EN_US ? enUS : zhCN;
+  }, [configProviderProps?.locale, i18n.language]);
+
   return (
     <ProConfigProvider
       {...proConfigProviderProps}
@@ -140,11 +154,7 @@ function CoreApp(props: {
       valueTypeMap={{ ...customValueTypeMap, ...proConfigProviderProps?.valueTypeMap }}
     >
       {/* 集成好 locale */}
-      <ConfigProvider
-        {...configProviderProps}
-        locale={configProviderProps?.locale || zhCN}
-        theme={theme}
-      >
+      <ConfigProvider {...configProviderProps} locale={locale} theme={theme}>
         <App
           {...appProps}
           className={classNames('fec-app', appProps?.className, {
@@ -162,4 +172,12 @@ function CoreApp(props: {
   );
 }
 
+function CoreApp(props: CoreAppProps) {
+  return (
+    <I18nProvider>
+      <CoreAppBase {...props} />
+    </I18nProvider>
+  );
+}
+
 export { CoreApp };

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -32,6 +32,9 @@ export const Basic: Story = {
         title: 'id',
         dataIndex: 'id',
         search: true,
+        formItemProps: {
+          label: '这是label',
+        },
       },
       {
         title: '名字(省略)',

package/src/i18n.tsx

@@ -0,0 +1,63 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import ICU from 'i18next-icu';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+
+enum EnumLanguage {
+  ZH_CN = 'zh-CN',
+  EN_US = 'en-US',
+}
+
+const valueEnumLanguage = {
+  [EnumLanguage.ZH_CN]: {
+    text: '中文',
+    value: EnumLanguage.ZH_CN,
+  },
+  [EnumLanguage.EN_US]: {
+    text: '英文',
+    value: EnumLanguage.EN_US,
+  },
+};
+
+const listLanguage = Object.keys(valueEnumLanguage).map((key) => {
+  const item = valueEnumLanguage[key];
+
+  return {
+    value: item.value !== undefined ? item.value : key,
+    label: item.text,
+    originData: item.data,
+  };
+});
+
+function initI18n({ enTranslation }) {
+  const cacheLng = localStorage.getItem('i18nextLng') || EnumLanguage.ZH_CN;
+  const lng = listLanguage.find((item) => item.value === cacheLng) ? cacheLng : EnumLanguage.ZH_CN;
+
+  i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .use(ICU)
+    .init({
+      resources: {
+        [EnumLanguage.ZH_CN]: {
+          translation: {},
+        },
+        [EnumLanguage.EN_US]: {
+          translation: {
+            ...enTranslation,
+          },
+        },
+      },
+      lng,
+      fallbackLng: EnumLanguage.ZH_CN,
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+}
+
+function I18nProvider({ children }: { children: React.ReactNode }) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+
+export { EnumLanguage, I18nProvider, initI18n, listLanguage, valueEnumLanguage };