@fe-free/core 4.0.4 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/core
 
+## 5.0.0
+
+### Minor Changes
+
+- feat: i18n
+
+### Patch Changes
+
+- @fe-free/icons@5.0.0
+- @fe-free/tool@5.0.0
+
+## 4.0.5
+
+### Patch Changes
+
+- @fe-free/icons@4.0.5
+- @fe-free/tool@4.0.5
+
 ## 4.0.4
 
 ### Patch Changes

package/i18next.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'i18next-cli';
+
+export default defineConfig({
+  locales: ['zh-CN', 'en-US'],
+  extract: {
+    primaryLanguage: 'zh-CN',
+    secondaryLanguages: ['en-US'],
+    input: ['./src/**/*.{js,jsx,ts,tsx}'],
+    output: './src/locales/{{language}}/{{namespace}}.json',
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "4.0.4",
+  "version": "5.0.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -50,10 +50,10 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/tool": "4.0.4",
-    "@fe-free/icons": "4.0.4"
+    "@fe-free/icons": "5.0.0",
+    "@fe-free/tool": "5.0.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"
   }
 }

package/src/core_app/index.tsx

@@ -22,11 +22,17 @@ function getPathname(src?: string) {
 
 function CheckUpdate({ basename }: { basename: string }) {
   const { modal } = App.useApp();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const mainScript = document.querySelector('[data-name="mainScript"]');
     if (!mainScript) {
-      console.log('没找到 [data-name="mainScript"]，不启用更新提醒');
+      console.log(
+        t(
+          '@fe-free/core.app.mainScriptNotFound',
+          '没找到 [data-name="mainScript"]，不启用更新提醒',
+        ),
+      );
       return;
     }
 
@@ -48,10 +54,10 @@ function CheckUpdate({ basename }: { basename: string }) {
       }
 
       modal.confirm({
-        title: '发现新版本',
-        content: '请及时刷新页面更新，以避免影响使用',
-        okText: '刷新',
-        cancelText: '稍后更新',
+        title: t('@fe-free/core.app.newVersionFound', '发现新版本'),
+        content: t('@fe-free/core.app.refreshPrompt', '请及时刷新页面更新，以避免影响使用'),
+        okText: t('@fe-free/core.app.refresh', '刷新'),
+        cancelText: t('@fe-free/core.app.updateLater', '稍后更新'),
         onOk: () => {
           window.location.reload();
         },
@@ -80,7 +86,7 @@ function CheckUpdate({ basename }: { basename: string }) {
     return () => {
       clearInterval(timer);
     };
-  }, []);
+  }, [t]);
 
   return null;
 }
@@ -148,13 +154,12 @@ function CoreAppBase(props: CoreAppProps) {
   }, [configProviderProps?.locale, i18n.language]);
 
   return (
-    <ProConfigProvider
-      {...proConfigProviderProps}
-      // 集成好 customValueTypeMap
-      valueTypeMap={{ ...customValueTypeMap, ...proConfigProviderProps?.valueTypeMap }}
-    >
-      {/* 集成好 locale */}
-      <ConfigProvider {...configProviderProps} locale={locale} theme={theme}>
+    <ConfigProvider {...configProviderProps} locale={locale} theme={theme}>
+      <ProConfigProvider
+        {...proConfigProviderProps}
+        // 集成好 customValueTypeMap
+        valueTypeMap={{ ...customValueTypeMap, ...proConfigProviderProps?.valueTypeMap }}
+      >
         <App
           {...appProps}
           className={classNames('fec-app', appProps?.className, {
@@ -167,8 +172,8 @@ function CoreAppBase(props: CoreAppProps) {
             {children}
           </Router>
         </App>
-      </ConfigProvider>
-    </ProConfigProvider>
+      </ProConfigProvider>
+    </ConfigProvider>
   );
 }
 

package/src/crud/crud.tsx

@@ -2,6 +2,7 @@ import type { ActionType } from '@ant-design/pro-components';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
 import { getTableScroll, Table } from './table';
@@ -33,6 +34,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
     ref,
   } = props;
 
+  const { t } = useTranslation();
   useTips(props);
 
   const actionRef = useRef<ActionType | undefined>(undefined);
@@ -102,7 +104,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
 
     if (actions.includes('batch_delete') && requestDeleteByRecords) {
       const batchDeleteAction = {
-        btnText: '批量删除',
+        btnText: t('@fe-free/core.crud.batchDelete', '批量删除'),
         danger: true,
         onClick: async (_, { selectedRows }) => {
           await requestDeleteByRecords(selectedRows);
@@ -112,7 +114,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
     }
 
     return bas;
-  }, [actions, originBatchActions, requestDeleteByRecords]);
+  }, [actions, originBatchActions, requestDeleteByRecords, t]);
 
   const { rowSelection, tableAlertRender, tableAlertOptionRender } = useRowSelection<
     DataSource,

package/src/crud/crud_delete.tsx

@@ -1,6 +1,7 @@
 import { DeleteOutlined } from '@fe-free/icons';
 import { App } from 'antd';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { OperateBtn } from './helper';
 
 interface Params {
@@ -14,14 +15,15 @@ interface Params {
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
   const { modal } = App.useApp();
+  const { t } = useTranslation();
 
   const doDelete = useCallback(async () => {
     await new Promise((resolve) => {
       modal.confirm({
-        title: `确认删除 “${name}” 吗？`,
-        content: desc || '删除后不可恢复，请谨慎操作',
-        okText: '确定',
-        cancelText: '取消',
+        title: t('@fe-free/core.crud.deleteConfirm', '确认删除 "{name}" 吗？', { name }),
+        content: desc || t('@fe-free/core.crud.deleteWarning', '删除后不可恢复，请谨慎操作'),
+        okText: t('@fe-free/core.crud.confirm', '确定'),
+        cancelText: t('@fe-free/core.crud.cancel', '取消'),
         onOk: () => {
           resolve(onDelete());
         },
@@ -30,7 +32,7 @@ function useDelete(params: Params) {
         },
       });
     });
-  }, [modal, name, desc, onDelete]);
+  }, [modal, name, desc, onDelete, t]);
 
   return {
     doDelete,
@@ -40,10 +42,11 @@ function useDelete(params: Params) {
 function OperateDelete(props: Params) {
   const { name, desc, onDelete, operateText, disabled } = props;
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
+  const { t } = useTranslation();
 
   return (
     <OperateBtn
-      title="删除"
+      title={t('@fe-free/core.crud.delete', '删除')}
       icon={<DeleteOutlined />}
       operateText={operateText}
       disabled={disabled}

package/src/crud/crud_detail.tsx

@@ -3,6 +3,7 @@ import { App, Spin } from 'antd';
 import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { CRUDProps } from './types';
 
 /**
@@ -15,18 +16,17 @@ import type { CRUDProps } from './types';
 type action = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
 
 // 先不管类型
-interface CRUDDetailProps
-  extends Pick<
-    CRUDProps,
-    | 'requestGetByRecord'
-    | 'createProps'
-    | 'readProps'
-    | 'requestCreateByValues'
-    | 'updateProps'
-    | 'requestUpdateByValues'
-    | 'detailForm'
-    | 'detailFormInstance'
-  > {
+interface CRUDDetailProps extends Pick<
+  CRUDProps,
+  | 'requestGetByRecord'
+  | 'createProps'
+  | 'readProps'
+  | 'requestCreateByValues'
+  | 'updateProps'
+  | 'requestUpdateByValues'
+  | 'detailForm'
+  | 'detailFormInstance'
+> {
   action: action;
   id?: string;
   record?: any;
@@ -55,6 +55,7 @@ function CRUDDetail(props: CRUDDetailProps) {
   const [loading, setLoading] = useState(id ? true : false);
   const [form] = ProForm.useForm(detailFormInstance);
   const { message } = App.useApp();
+  const { t } = useTranslation();
 
   const handleFinish = useCallback(
     async (values) => {
@@ -63,7 +64,7 @@ function CRUDDetail(props: CRUDDetailProps) {
         if (action === 'create' && requestCreateByValues) {
           result = await requestCreateByValues(values);
 
-          let content = '新建成功';
+          let content = t('@fe-free/core.crud.createSuccess', '新建成功');
           if (createProps?.successText) {
             content = isString(createProps.successText)
               ? createProps.successText
@@ -78,7 +79,7 @@ function CRUDDetail(props: CRUDDetailProps) {
         if (action === 'update' && requestUpdateByValues) {
           result = await requestUpdateByValues(values);
 
-          let content = '更新成功';
+          let content = t('@fe-free/core.crud.updateSuccess', '更新成功');
           if (updateProps?.successText) {
             content = isString(updateProps.successText)
               ? updateProps.successText
@@ -106,7 +107,16 @@ function CRUDDetail(props: CRUDDetailProps) {
         }, 10);
       }
     },
-    [action, requestCreateByValues, requestUpdateByValues, onSuccess, createProps, updateProps],
+    [
+      action,
+      requestCreateByValues,
+      requestUpdateByValues,
+      onSuccess,
+      t,
+      createProps,
+      message,
+      updateProps,
+    ],
   );
 
   const handleOpenChange = useCallback(
@@ -172,23 +182,23 @@ function CRUDDetail(props: CRUDDetailProps) {
 
   const title = useMemo(() => {
     if (action === 'create') {
-      return '新建';
+      return t('@fe-free/core.crud.create', '新建');
     }
     if (action === 'read') {
-      return '查看';
+      return t('@fe-free/core.crud.read', '查看');
     }
     if (action === 'update') {
-      return '编辑';
+      return t('@fe-free/core.crud.update', '编辑');
     }
 
     return '';
-  }, [action]);
+  }, [action, t]);
 
   const submitter = useMemo(() => {
     const result = {
       searchConfig: {
-        submitText: '确定',
-        resetText: '取消',
+        submitText: t('@fe-free/core.crud.confirm', '确定'),
+        resetText: t('@fe-free/core.crud.cancel', '取消'),
       },
     };
     if (action === 'create') {
@@ -223,6 +233,7 @@ function CRUDDetail(props: CRUDDetailProps) {
     readProps?.submitText,
     updateProps?.resetText,
     updateProps?.submitText,
+    t,
   ]);
 
   return (

package/src/crud/use_operate.tsx

@@ -2,6 +2,7 @@ import { EditOutlined, EyeOutlined } from '@fe-free/icons';
 import { App } from 'antd';
 import { isString } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { routeTool } from '../route';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
@@ -20,6 +21,7 @@ function useOperate(props, detailProps, actionRef) {
     requestDeleteByRecord,
   } = props;
   const { message } = App.useApp();
+  const { t } = useTranslation();
 
   const idField = tableProps.rowKey || 'id';
 
@@ -27,7 +29,7 @@ function useOperate(props, detailProps, actionRef) {
     (record) => {
       return () => {
         if (requestDeleteByRecord) {
-          let content = '删除成功';
+          let content = t('@fe-free/core.crud.deleteSuccess', '删除成功');
           if (deleteProps?.successText) {
             content = isString(deleteProps.successText)
               ? deleteProps.successText
@@ -42,10 +44,12 @@ function useOperate(props, detailProps, actionRef) {
           });
         }
 
-        throw new Error('没有传 requestDeleteByRecord');
+        throw new Error(
+          t('@fe-free/core.crud.requestDeleteByRecordRequired', '没有传 requestDeleteByRecord'),
+        );
       };
     },
-    [actionRef, deleteProps, message, requestDeleteByRecord],
+    [actionRef, deleteProps, message, requestDeleteByRecord, t],
   );
 
   const handleReload = useCallback(() => {
@@ -62,7 +66,7 @@ function useOperate(props, detailProps, actionRef) {
         if (disabled) {
           return (
             <OperateBtn
-              title="查看"
+              title={t('@fe-free/core.crud.read', '查看')}
               icon={<EyeOutlined />}
               operateText={readProps?.operateText}
               disabled
@@ -77,7 +81,7 @@ function useOperate(props, detailProps, actionRef) {
               onSuccess={handleReload}
               trigger={
                 <OperateBtn
-                  title="查看"
+                  title={t('@fe-free/core.crud.read', '查看')}
                   icon={<EyeOutlined />}
                   operateText={readProps?.operateText}
                 />
@@ -90,7 +94,7 @@ function useOperate(props, detailProps, actionRef) {
       }
       return null;
     },
-    [detailProps, handleReload, idField, readProps],
+    [detailProps, handleReload, idField, readProps, t],
   );
 
   const readDetailOperate = useCallback(
@@ -101,7 +105,7 @@ function useOperate(props, detailProps, actionRef) {
         if (disabled) {
           return (
             <OperateBtn
-              title="查看"
+              title={t('@fe-free/core.crud.read', '查看')}
               icon={<EyeOutlined />}
               operateText={readProps?.operateText}
               disabled
@@ -110,7 +114,7 @@ function useOperate(props, detailProps, actionRef) {
         } else {
           return (
             <OperateBtn
-              title="查看"
+              title={t('@fe-free/core.crud.read', '查看')}
               icon={<EyeOutlined />}
               operateText={readProps?.operateText}
               onClick={() => {
@@ -129,7 +133,7 @@ function useOperate(props, detailProps, actionRef) {
       }
       return null;
     },
-    [detailIdIndex, readProps],
+    [detailIdIndex, readProps, t],
   );
 
   const updateOperate = useCallback(
@@ -141,7 +145,7 @@ function useOperate(props, detailProps, actionRef) {
         if (disabled) {
           return (
             <OperateBtn
-              title="编辑"
+              title={t('@fe-free/core.crud.update', '编辑')}
               icon={<EditOutlined />}
               operateText={updateProps?.operateText}
               disabled
@@ -156,7 +160,7 @@ function useOperate(props, detailProps, actionRef) {
               onSuccess={handleReload}
               trigger={
                 <OperateBtn
-                  title="编辑"
+                  title={t('@fe-free/core.crud.update', '编辑')}
                   icon={<EditOutlined />}
                   operateText={updateProps?.operateText}
                 />
@@ -170,7 +174,7 @@ function useOperate(props, detailProps, actionRef) {
 
       return null;
     },
-    [detailProps, handleReload, idField, updateProps],
+    [detailProps, handleReload, idField, updateProps, t],
   );
 
   const deleteOperate = useCallback(
@@ -196,7 +200,7 @@ function useOperate(props, detailProps, actionRef) {
 
   const newColumns = useMemo(() => {
     const operateColumn = {
-      title: '操作',
+      title: t('@fe-free/core.crud.operate', '操作'),
       fixed: 'right',
       align: 'center',
       width: operateColumnProps?.width || 120,
@@ -253,6 +257,7 @@ function useOperate(props, detailProps, actionRef) {
     readDetailOperate,
     updateOperate,
     deleteOperate,
+    t,
   ]);
 
   return {

package/src/crud/use_row_selection.tsx

@@ -2,6 +2,7 @@ import type { ActionType } from '@ant-design/pro-components';
 import { App } from 'antd';
 import type { MutableRefObject } from 'react';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { LoadingButton } from '../button';
 import type { CRUDProps } from './types';
 
@@ -15,6 +16,7 @@ function useRowSelection<DataSource, Key>({
   actionRef?: MutableRefObject<ActionType | undefined>;
 }) {
   const { modal } = App.useApp();
+  const { t } = useTranslation();
 
   const rowSelection = useMemo(
     () => ({
@@ -23,18 +25,23 @@ function useRowSelection<DataSource, Key>({
     [originRowSelection],
   );
 
-  const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
-    return (
-      <div>
-        <span>
-          已选 {selectedRowKeys.length} 项
-          <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
-            取消选择
-          </a>
-        </span>
-      </div>
-    );
-  }, []);
+  const tableAlertRender = useCallback(
+    ({ selectedRowKeys, onCleanSelected }) => {
+      return (
+        <div>
+          <span>
+            {t('@fe-free/core.crud.selectedItems', '已选 {num} 项', {
+              num: selectedRowKeys.length,
+            })}
+            <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+              {t('@fe-free/core.crud.clearSelection', '取消选择')}
+            </a>
+          </span>
+        </div>
+      );
+    },
+    [t],
+  );
 
   const tableAlertOptionRender = useCallback(
     ({ selectedRowKeys, selectedRows }) => {
@@ -51,7 +58,13 @@ function useRowSelection<DataSource, Key>({
                 if (action.danger) {
                   await new Promise((resolve) => {
                     modal.confirm({
-                      title: `确定要执行 ${action.btnText} 吗？`,
+                      title: t(
+                        '@fe-free/core.crud.batchActionConfirm',
+                        '确定要执行 {action} 吗？',
+                        {
+                          action: action.btnText,
+                        },
+                      ),
                       onOk: () => {
                         resolve(
                           action.onClick(event, {
@@ -81,7 +94,7 @@ function useRowSelection<DataSource, Key>({
         </div>
       );
     },
-    [actionRef, batchActions, modal],
+    [actionRef, batchActions, modal, t],
   );
 
   if (!batchActions || batchActions.length === 0) {

package/src/crud/use_tips.tsx

@@ -1,49 +1,86 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { CRUDProps } from './types';
 
 function useTips<DataSource, Key>(props: CRUDProps<DataSource, Key>) {
+  const { t } = useTranslation();
   useEffect(() => {
     if (props.actions.includes('create')) {
       if (!props.requestCreateByValues) {
-        console.warn('actions 包含 create 时，需要传递 requestCreateByValues');
+        console.warn(
+          t(
+            'core.crud.warnCreateRequestCreateByValues',
+            'actions 包含 create 时，需要传递 requestCreateByValues',
+          ),
+        );
       }
       if (!props.detailForm) {
-        console.warn('actions 包含 create 时，需要传递 detailForm');
+        console.warn(
+          t(
+            '@fe-free/core.crud.warnCreateDetailForm',
+            'actions 包含 create 时，需要传递 detailForm',
+          ),
+        );
       }
     }
 
     if (props.actions.includes('read')) {
       if (!props.requestGetByRecord) {
-        console.warn('actions 包含 read 时，需要传递 requestGetByRecord');
+        console.warn(
+          t(
+            'core.crud.warnReadRequestGetByRecord',
+            'actions 包含 read 时，需要传递 requestGetByRecord',
+          ),
+        );
       }
       if (!props.detailForm) {
-        console.warn('actions 包含 read 时，需要传递 detailForm');
+        console.warn(
+          t('@fe-free/core.crud.warnReadDetailForm', 'actions 包含 read 时，需要传递 detailForm'),
+        );
       }
     }
 
     if (props.actions.includes('update')) {
       if (!props.requestGetByRecord || !props.requestUpdateByValues) {
         console.warn(
-          'actions 包含 update 时，需要传递 requestGetByRecord 和 requestUpdateByValues',
+          t(
+            'core.crud.warnUpdateRequest',
+            'actions 包含 update 时，需要传递 requestGetByRecord 和 requestUpdateByValues',
+          ),
         );
       }
       if (!props.detailForm) {
-        console.warn('actions 包含 update 时，需要传递 detailForm');
+        console.warn(
+          t(
+            '@fe-free/core.crud.warnUpdateDetailForm',
+            'actions 包含 update 时，需要传递 detailForm',
+          ),
+        );
       }
     }
 
     if (props.actions.includes('delete')) {
       if (!props.deleteProps?.nameIndex || !props.requestDeleteByRecord) {
-        console.warn('actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord');
+        console.warn(
+          t(
+            'core.crud.warnDeleteProps',
+            'actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord',
+          ),
+        );
       }
     }
 
     if (props.actions.includes('batch_delete')) {
       if (!props.requestDeleteByRecords) {
-        console.warn('actions 包含 batch_delete 时，需要传递 requestDeleteByRecords');
+        console.warn(
+          t(
+            'core.crud.warnBatchDeleteRequestDeleteByRecords',
+            'actions 包含 batch_delete 时，需要传递 requestDeleteByRecords',
+          ),
+        );
       }
     }
-  }, []);
+  }, [props, t]);
 }
 
 export { useTips };