@fe-free/core 4.0.4 → 5.0.0

package/src/crud_of_list/index.tsx

@@ -2,6 +2,7 @@ import { useDebounce } from 'ahooks';
 import { Input } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
 import './style.scss';
@@ -15,15 +16,26 @@ interface CRUDOfListProps<
 }
 
 function useTips(props) {
+  const { t } = useTranslation();
   useEffect(() => {
     const count = props.tableProps.columns?.filter((column) => column.search).length;
     if (!count) {
-      console.warn('CRUDOfList 的 columns 中至少有一个 search 为 true 的列');
+      console.warn(
+        t(
+          'core.crudOfList.warnAtLeastOneSearch',
+          'CRUDOfList 的 columns 中至少有一个 search 为 true 的列',
+        ),
+      );
     }
     if (count > 1) {
-      console.warn('CRUDOfList 的 columns 中只能有一个 search 为 true 的列');
+      console.warn(
+        t(
+          'core.crudOfList.warnOnlyOneSearch',
+          'CRUDOfList 的 columns 中只能有一个 search 为 true 的列',
+        ),
+      );
     }
-  }, []);
+  }, [t]);
 }
 
 function SearchRender(props: {
@@ -31,9 +43,10 @@ function SearchRender(props: {
   value?: string;
   onChange: (value: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Input
-      placeholder={props.placeholder ?? '输入搜索'}
+      placeholder={props.placeholder ?? t('@fe-free/core.crudOfList.searchPlaceholder', '输入搜索')}
       allowClear
       value={props.value}
       onChange={(e) => props.onChange(e.target.value)}

package/src/crud_of_pure/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
 import './style.scss';
@@ -17,6 +18,7 @@ function CRUDOfPure<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 >(props: CRUDOfPureProps<DataSource, Key>) {
+  const { t } = useTranslation();
   const newColumns = props.tableProps.columns?.map((column) => {
     if (column.search) {
       return {
@@ -30,8 +32,12 @@ function CRUDOfPure<
         fieldProps: {
           placeholder:
             column.valueType === 'select' || column.valueEnum
-              ? `请选择${column.title}`
-              : `请输入${column.title}`,
+              ? t('@fe-free/core.crudOfPure.selectPlaceholder', '请选择{title}', {
+                  title: column.title,
+                })
+              : t('@fe-free/core.crudOfPure.inputPlaceholder', '请输入{title}', {
+                  title: column.title,
+                }),
           ...column.fieldProps,
         },
       };

package/src/data_viewer/index.tsx

@@ -1,6 +1,7 @@
 import { ArrowsAltOutlined } from '@fe-free/icons';
 import { Button, Modal, Select } from 'antd';
 import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Editor } from '../editor';
 import { PageLayout } from '../page_layout';
 
@@ -19,6 +20,7 @@ const options = [
 ];
 
 function DataViewer({ data, title, enableMaximize }: DataViewerProps) {
+  const { t } = useTranslation();
   const [maximize, setMaximize] = useState(false);
   const [language, setLanguage] = useState<DataViewerLanguage>(
     options[0].value as DataViewerLanguage,
@@ -64,7 +66,13 @@ function DataViewer({ data, title, enableMaximize }: DataViewerProps) {
         </div>
       </PageLayout>
       {maximize && (
-        <Modal title="查看" open width={'80vw'} onCancel={() => setMaximize(false)} footer={null}>
+        <Modal
+          title={t('@fe-free/core.dataViewer.view', '查看')}
+          open
+          width={'80vw'}
+          onCancel={() => setMaximize(false)}
+          footer={null}
+        >
           <div className="h-[80vh]">
             <Editor
               value={value}

package/src/form/form_list/form_list.tsx

@@ -3,6 +3,7 @@ import { ProForm } from '@ant-design/pro-components';
 import { Input, InputNumber, Switch } from 'antd';
 
 import { uniq, uniqBy } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
 import { ProFormListHelper } from './form_list_helper';
 
 interface ListTextProps {
@@ -108,6 +109,7 @@ function ListBoolean(props: ListBooleanProps) {
 
 function ProFormListText(props: ProFormItemProps<ListTextProps>) {
   const { fieldProps, ...rest } = props;
+  const { t } = useTranslation();
 
   return (
     <ProForm.Item
@@ -121,19 +123,19 @@ function ProFormListText(props: ProFormItemProps<ListTextProps>) {
             if (value) {
               if (fieldProps?.isValueLabel) {
                 if (value?.some((item) => item.value === undefined || item.value === '')) {
-                  return Promise.reject('存在空选项');
+                  return Promise.reject(t('@fe-free/core.formList.emptyOption', '存在空选项'));
                 }
                 // 不能有重复的 value
                 if (uniqBy(value, 'value').length !== value.length) {
-                  return Promise.reject('不能有重复');
+                  return Promise.reject(t('@fe-free/core.formList.duplicateValue', '不能有重复'));
                 }
               } else {
                 if (value?.some((item) => item === undefined || item === '')) {
-                  return Promise.reject('存在空选项');
+                  return Promise.reject(t('@fe-free/core.formList.emptyOption', '存在空选项'));
                 }
                 // 不能有重复的 value
                 if (uniq(value).length !== value.length) {
-                  return Promise.reject('不能有重复');
+                  return Promise.reject(t('@fe-free/core.formList.duplicateValue', '不能有重复'));
                 }
               }
             }
@@ -150,6 +152,7 @@ function ProFormListText(props: ProFormItemProps<ListTextProps>) {
 
 function ProFormListNumber(props: ProFormItemProps<ListNumberProps>) {
   const { fieldProps, ...rest } = props;
+  const { t } = useTranslation();
 
   return (
     <ProForm.Item
@@ -163,19 +166,19 @@ function ProFormListNumber(props: ProFormItemProps<ListNumberProps>) {
             if (value) {
               if (fieldProps?.isValueLabel) {
                 if (value?.some((item) => item.value === undefined || item.value === null)) {
-                  return Promise.reject('存在空选项');
+                  return Promise.reject(t('@fe-free/core.formList.emptyOption', '存在空选项'));
                 }
                 // 不能有重复的 value
                 if (uniqBy(value, 'value').length !== value.length) {
-                  return Promise.reject('不能有重复');
+                  return Promise.reject(t('@fe-free/core.formList.duplicateValue', '不能有重复'));
                 }
               } else {
                 if (value?.some((item) => item === undefined || item === null)) {
-                  return Promise.reject('存在空选项');
+                  return Promise.reject(t('@fe-free/core.formList.emptyOption', '存在空选项'));
                 }
                 // 不能有重复的 value
                 if (uniq(value).length !== value.length) {
-                  return Promise.reject('不能有重复');
+                  return Promise.reject(t('@fe-free/core.formList.duplicateValue', '不能有重复'));
                 }
               }
             }

package/src/form/form_list/form_list_helper.tsx

@@ -1,6 +1,7 @@
 import { DeleteOutlined, PlusOutlined } from '@fe-free/icons';
 import { Button } from 'antd';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 interface ProFormListHelperProps<T> {
   value?: T[];
@@ -27,6 +28,7 @@ interface ProFormListHelperProps<T> {
 
 const emptyArr = [];
 function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
+  const { t } = useTranslation();
   const options = props.value || emptyArr;
 
   return (
@@ -85,7 +87,7 @@ function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
               props.onChange?.(newOptions);
             }}
           >
-            {props.addText || '添加'}
+            {props.addText || t('@fe-free/core.formList.add', '添加')}
           </Button>
         </div>
       )}

package/src/form/form_list/form_list_modal_helper.tsx

@@ -2,6 +2,7 @@ import { ModalForm } from '@ant-design/pro-components';
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@fe-free/icons';
 import { Button } from 'antd';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const emptyArr = [];
 
@@ -34,6 +35,7 @@ function Edit<T>(props: {
   editForm?: any;
   disabledSubmitter?: boolean;
 }) {
+  const { t } = useTranslation();
   const handleFinish = async (newValues) => {
     props.onChange(newValues as T);
 
@@ -42,7 +44,11 @@ function Edit<T>(props: {
 
   return (
     <ModalForm
-      title={props.values ? '编辑' : '添加'}
+      title={
+        props.values
+          ? t('@fe-free/core.formList.edit', '编辑')
+          : t('@fe-free/core.formList.add', '添加')
+      }
       trigger={props.children}
       onFinish={handleFinish}
       formRef={props?.editForm}
@@ -119,7 +125,7 @@ function ProFormListModalHelper<T = any>(props: ProFormListModalHelperProps<T>)
           >
             {props.addTrigger || (
               <Button size="small" icon={<PlusOutlined />}>
-                添加
+                {t('@fe-free/core.formList.add', '添加')}
               </Button>
             )}
           </Edit>

package/src/i18n.tsx

@@ -33,6 +33,8 @@ function initI18n({ enTranslation }) {
   const cacheLng = localStorage.getItem('i18nextLng') || EnumLanguage.ZH_CN;
   const lng = listLanguage.find((item) => item.value === cacheLng) ? cacheLng : EnumLanguage.ZH_CN;
 
+  console.log('initI18n', 'cacheLng', cacheLng, 'lng', lng);
+
   i18n
     .use(LanguageDetector)
     .use(initReactI18next)
@@ -60,4 +62,7 @@ function I18nProvider({ children }: { children: React.ReactNode }) {
   return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 }
 
+// @ts-ignore
+window._i18n = i18n;
+
 export { EnumLanguage, I18nProvider, initI18n, listLanguage, valueEnumLanguage };

package/src/infinite_list/index.tsx

@@ -2,6 +2,7 @@ import { Spin } from 'antd';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useImperativeHandle, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import stringify from 'safe-stable-stringify';
 import { useGlobalInfiniteScroll } from '../ahooks/use_global_infinite_scroll';
 
@@ -34,6 +35,7 @@ const InfiniteListBase = <D, P>({
   gridClassName,
   className,
 }: InfiniteListProps<D, P>) => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
 
   const { data, loading, loadingMore, noMore, mutate, reload } = useGlobalInfiniteScroll(
@@ -103,8 +105,16 @@ const InfiniteListBase = <D, P>({
         </div>
       )}
       <div className="flex w-full items-center justify-center">
-        {noMore && <div className="my-5 text-center text-03">没有更多数据</div>}
-        {loadingMore && <div className="my-5 text-center text-03">加载更多数据中...</div>}
+        {noMore && (
+          <div className="my-5 text-center text-03">
+            {t('@fe-free/core.infiniteList.noMoreData', '没有更多数据')}
+          </div>
+        )}
+        {loadingMore && (
+          <div className="my-5 text-center text-03">
+            {t('@fe-free/core.infiniteList.loadingMore', '加载更多数据中...')}
+          </div>
+        )}
       </div>
     </div>
   );

package/src/locales/en-US/translation.json

@@ -0,0 +1,87 @@
+{
+  "@fe-free/core": {
+    "app": {
+      "mainScriptNotFound": "Could not find [data-name=\"mainScript\"], update reminder is disabled",
+      "newVersionFound": "New version found",
+      "refresh": "Refresh",
+      "refreshPrompt": "Please refresh the page in time to update to avoid affecting usage",
+      "updateLater": "Update later"
+    },
+    "crud": {
+      "batchActionConfirm": "Are you sure you want to execute {action}?",
+      "batchDelete": "Batch delete",
+      "cancel": "Cancel",
+      "clearSelection": "Clear selection",
+      "confirm": "Confirm",
+      "create": "Create",
+      "createSuccess": "Created successfully",
+      "delete": "Delete",
+      "deleteConfirm": "Are you sure you want to delete \"{name}\"?",
+      "deleteSuccess": "Deleted successfully",
+      "deleteWarning": "This action cannot be undone, please proceed with caution",
+      "operate": "Actions",
+      "read": "View",
+      "requestDeleteByRecordRequired": "requestDeleteByRecord is required",
+      "selectedItems": "{num} items selected",
+      "update": "Edit",
+      "updateSuccess": "Updated successfully",
+      "warnCreateDetailForm": "detailForm is required when actions include create",
+      "warnReadDetailForm": "detailForm is required when actions include read",
+      "warnUpdateDetailForm": "detailForm is required when actions include update"
+    },
+    "crudOfList": {
+      "searchPlaceholder": "Enter search"
+    },
+    "crudOfPure": {
+      "inputPlaceholder": "Please enter {title}",
+      "selectPlaceholder": "Please select {title}"
+    },
+    "dataViewer": {
+      "view": "View"
+    },
+    "fileTree": {
+      "create": "Create",
+      "createSubDirectory": "Create subdirectory",
+      "delete": "Delete",
+      "directoryName": "Directory name",
+      "update": "Edit"
+    },
+    "formList": {
+      "add": "Add",
+      "duplicateValue": "Duplicate values are not allowed",
+      "edit": "Edit",
+      "emptyOption": "Empty option exists"
+    },
+    "infiniteList": {
+      "loadingMore": "Loading more data...",
+      "noMoreData": "No more data"
+    },
+    "record": {
+      "inputPlaceholder": "Please enter"
+    },
+    "upload": {
+      "delete": "Delete",
+      "dragUpload": "Click or drag files to this area to upload",
+      "fileCount": "File count ({success}/{total})",
+      "localUpload": "Local upload",
+      "maxFilesWarning": "Only {num} files can be uploaded at most, excess files will be ignored.",
+      "pleaseSelect": "Please select"
+    },
+    "valueTypeMap": {
+      "view": "View"
+    }
+  },
+  "core": {
+    "crud": {
+      "warnBatchDeleteRequestDeleteByRecords": "requestDeleteByRecords is required when actions include batch_delete",
+      "warnCreateRequestCreateByValues": "requestCreateByValues is required when actions include create",
+      "warnDeleteProps": "deleteProps and requestDeleteByRecord are required when actions include delete",
+      "warnReadRequestGetByRecord": "requestGetByRecord is required when actions include read",
+      "warnUpdateRequest": "requestGetByRecord and requestUpdateByValues are required when actions include update"
+    },
+    "crudOfList": {
+      "warnAtLeastOneSearch": "At least one column with search set to true is required in CRUDOfList columns",
+      "warnOnlyOneSearch": "Only one column with search set to true is allowed in CRUDOfList columns"
+    }
+  }
+}

package/src/locales/zh-CN/translation.json

@@ -0,0 +1,87 @@
+{
+  "@fe-free/core": {
+    "app": {
+      "mainScriptNotFound": "没找到 [data-name=\"mainScript\"]，不启用更新提醒",
+      "newVersionFound": "发现新版本",
+      "refresh": "刷新",
+      "refreshPrompt": "请及时刷新页面更新，以避免影响使用",
+      "updateLater": "稍后更新"
+    },
+    "crud": {
+      "batchActionConfirm": "确定要执行 {action} 吗？",
+      "batchDelete": "批量删除",
+      "cancel": "取消",
+      "clearSelection": "取消选择",
+      "confirm": "确定",
+      "create": "新建",
+      "createSuccess": "新建成功",
+      "delete": "删除",
+      "deleteConfirm": "确认删除 \"{name}\" 吗？",
+      "deleteSuccess": "删除成功",
+      "deleteWarning": "删除后不可恢复，请谨慎操作",
+      "operate": "操作",
+      "read": "查看",
+      "requestDeleteByRecordRequired": "没有传 requestDeleteByRecord",
+      "selectedItems": "已选 {num} 项",
+      "update": "编辑",
+      "updateSuccess": "更新成功",
+      "warnCreateDetailForm": "actions 包含 create 时，需要传递 detailForm",
+      "warnReadDetailForm": "actions 包含 read 时，需要传递 detailForm",
+      "warnUpdateDetailForm": "actions 包含 update 时，需要传递 detailForm"
+    },
+    "crudOfList": {
+      "searchPlaceholder": "输入搜索"
+    },
+    "crudOfPure": {
+      "inputPlaceholder": "请输入{title}",
+      "selectPlaceholder": "请选择{title}"
+    },
+    "dataViewer": {
+      "view": "查看"
+    },
+    "fileTree": {
+      "create": "新建",
+      "createSubDirectory": "新建子目录",
+      "delete": "删除",
+      "directoryName": "目录名称",
+      "update": "编辑"
+    },
+    "formList": {
+      "add": "添加",
+      "duplicateValue": "不能有重复",
+      "edit": "编辑",
+      "emptyOption": "存在空选项"
+    },
+    "infiniteList": {
+      "loadingMore": "加载更多数据中...",
+      "noMoreData": "没有更多数据"
+    },
+    "record": {
+      "inputPlaceholder": "请输入"
+    },
+    "upload": {
+      "delete": "删除",
+      "dragUpload": "点击或拖拽到此区域进行上传",
+      "fileCount": "文件数量 ({success}/{total})",
+      "localUpload": "本地上传",
+      "maxFilesWarning": "最多只能上传 {num} 个文件，超出部分会忽略。",
+      "pleaseSelect": "请选择"
+    },
+    "valueTypeMap": {
+      "view": "查看"
+    }
+  },
+  "core": {
+    "crud": {
+      "warnBatchDeleteRequestDeleteByRecords": "actions 包含 batch_delete 时，需要传递 requestDeleteByRecords",
+      "warnCreateRequestCreateByValues": "actions 包含 create 时，需要传递 requestCreateByValues",
+      "warnDeleteProps": "actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord",
+      "warnReadRequestGetByRecord": "actions 包含 read 时，需要传递 requestGetByRecord",
+      "warnUpdateRequest": "actions 包含 update 时，需要传递 requestGetByRecord 和 requestUpdateByValues"
+    },
+    "crudOfList": {
+      "warnAtLeastOneSearch": "CRUDOfList 的 columns 中至少有一个 search 为 true 的列",
+      "warnOnlyOneSearch": "CRUDOfList 的 columns 中只能有一个 search 为 true 的列"
+    }
+  }
+}

package/src/record/index.tsx

@@ -1,6 +1,7 @@
 import { Divider, Input } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ProFormListHelper } from '../form';
 
 function Item({
@@ -12,6 +13,7 @@ function Item({
   label?: string;
   onChange: (value: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col gap-2">
       <div className="flex items-center gap-1">
@@ -20,7 +22,7 @@ function Item({
       </div>
       <Input
         value={value}
-        placeholder={'请输入'}
+        placeholder={t('@fe-free/core.record.inputPlaceholder', '请输入')}
         onChange={(e) => {
           onChange(e.target.value);
         }}

package/src/tree/file_tree.tsx

@@ -4,6 +4,7 @@ import { Dropdown } from 'antd';
 import type { DataNode } from 'antd/es/tree';
 import classNames from 'classnames';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { OperateDelete } from '../crud/crud_delete';
 import { FileCard } from '../file';
 import type { TreeProps } from './tree';
@@ -46,13 +47,14 @@ function Detail<D extends DataNode>({
   requestUpdateByValues?: FileTreeProps<D>['requestUpdateByValues'];
   trigger: React.ReactElement;
 }) {
+  const { t } = useTranslation();
   const title = useMemo(() => {
     if (action === 'create') {
-      return '新建';
+      return t('@fe-free/core.fileTree.create', '新建');
     }
 
-    return '编辑';
-  }, [action]);
+    return t('@fe-free/core.fileTree.update', '编辑');
+  }, [action, t]);
 
   return (
     <ModalForm
@@ -83,7 +85,12 @@ function Detail<D extends DataNode>({
       labelCol={{ span: 6 }}
     >
       <ProFormText name="key" hidden />
-      <ProFormText name="title" label="目录名称" required rules={[{ required: true }]} />
+      <ProFormText
+        name="title"
+        label={t('@fe-free/core.fileTree.directoryName', '目录名称')}
+        required
+        rules={[{ required: true }]}
+      />
     </ModalForm>
   );
 }
@@ -98,6 +105,7 @@ function More({
   updateProps,
   deleteProps,
 }) {
+  const { t } = useTranslation();
   const isCreateDisabled = createProps?.operateIsDisabled?.(nodeData);
   const isCreateHidden = createProps?.operateIsHidden?.(nodeData);
   const isUpdateDisabled = updateProps?.operateIsDisabled?.(nodeData);
@@ -109,13 +117,15 @@ function More({
     actions?.includes('create') &&
       !isCreateHidden && {
         label: isCreateDisabled ? (
-          <div className="cursor-not-allowed text-03">新建子目录</div>
+          <div className="cursor-not-allowed text-03">
+            {t('@fe-free/core.fileTree.createSubDirectory', '新建子目录')}
+          </div>
         ) : (
           <Detail
             action="create"
             nodeData={{ key: nodeData.key }}
             requestCreateByValues={(values) => requestCreateByValues?.({ ...values })}
-            trigger={<div>新建子目录</div>}
+            trigger={<div>{t('@fe-free/core.fileTree.createSubDirectory', '新建子目录')}</div>}
           />
         ),
         key: 'create',
@@ -123,13 +133,15 @@ function More({
     actions?.includes('update') &&
       !isUpdateHidden && {
         label: isUpdateDisabled ? (
-          <div className="cursor-not-allowed text-03">编辑</div>
+          <div className="cursor-not-allowed text-03">
+            {t('@fe-free/core.fileTree.update', '编辑')}
+          </div>
         ) : (
           <Detail
             action="update"
             nodeData={nodeData}
             requestUpdateByValues={(values) => requestUpdateByValues?.({ ...values })}
-            trigger={<div>编辑</div>}
+            trigger={<div>{t('@fe-free/core.fileTree.update', '编辑')}</div>}
           />
         ),
         key: 'update',
@@ -137,11 +149,13 @@ function More({
     actions?.includes('delete') &&
       !isDeleteHidden && {
         label: isDeleteDisabled ? (
-          <div className="cursor-not-allowed text-03">删除</div>
+          <div className="cursor-not-allowed text-03">
+            {t('@fe-free/core.fileTree.delete', '删除')}
+          </div>
         ) : (
           <OperateDelete
             name={nodeData.title}
-            operateText="删除"
+            operateText={t('@fe-free/core.fileTree.delete', '删除')}
             onDelete={() => requestDeleteByRecord?.({ key: nodeData.key })}
           />
         ),