完善RForm，增加i18n国际化渲染

src/components/r-form/index.tsx

@@ -14,6 +14,7 @@ import { useApiContext } from '@/context.ts'
 import { useDeepCompareEffect } from 'react-use'
 import { RFormTypes } from '@/types/r-form/model'
 import { ProCoreActionType } from '@ant-design/pro-utils/es/typing'
+import { getI18nTitle } from '@/i18n.ts'
 
 
 export interface RFormProps {
@@ -66,7 +67,7 @@ const RForm = (
 
   useDeepCompareEffect(() => {
 
-    let res = transformAntdTableProColumns(curdModal?.columns || [], propColumns)
+    let res = transformAntdTableProColumns(curdModal?.columns || [], propColumns, curdModal?.config?.i18n)
     if (resolveColumns) {
       res = resolveColumns(res)
     }
@@ -101,7 +102,7 @@ const RForm = (
       formItemProps: { hidden: true }
     } ].concat(res as any).concat([
       {
-        title: '操作',
+        title: getI18nTitle(curdModal?.config?.i18n, { dataIndex: 'option', title: '操作' },),
         dataIndex: 'option',
         valueType: 'option',
         fixed: 'right',
@@ -114,7 +115,7 @@ const RForm = (
       } as any
     ])
     setColumns(_columns)
-  }, [ curdModal?.columns, propColumns, renderColumnOptions, resolveColumns, deleteModel, form, isDeleting, setOpen, ])
+  }, [ curdModal?.columns, curdModal?.config?.i18n, propColumns, renderColumnOptions, resolveColumns, deleteModel, form, isDeleting, setOpen, ])
 
   useEffect(() => {
     if (apiCtx.isApi && apiCtx.api) {
@@ -170,7 +171,7 @@ const RForm = (
               })
               setOpen(true)
             }}
-            type={'primary'}>{'添加'}</Button>
+            type={'primary'}>{getI18nTitle('actions.add','添加')}</Button>
   </>
 
   const _renderActions = () => {
@@ -209,7 +210,7 @@ const RForm = (
                           placeholder: '输入关键字搜索',
                         },*/
                         actions: [
-                          <Tooltip key={'filter'} title={'高级查询'}>
+                          <Tooltip key={'filter'} title={getI18nTitle('actions.advanceSearch','高级查询')}>
                             <Badge count={getValueCount(search)}>
                               <Button
                                       onClick={() => {
@@ -277,7 +278,7 @@ const RForm = (
                       form={form}
                       layout={'vertical'}
                       scrollToFirstError={true}
-                      title={model?.id !== 0 ? '编辑' : '添加'}
+                      title={model?.id !== 0 ? getI18nTitle('actions.edit','编辑') : getI18nTitle('actions.add','添加')}
                       {...formProps as any}
                       open={open}
                       onOpenChange={(open) => {
@@ -291,7 +292,7 @@ const RForm = (
                       columns={columns as ProFormColumnsType[]}/>
               <BetaSchemaForm
                       {...curdModal?.form}
-                      title={'高级查询'}
+                      title={getI18nTitle('actions.advanceSearch','高级查询')}
                       grid={true}
                       shouldUpdate={false}
                       width={500}
@@ -313,8 +314,8 @@ const RForm = (
                       }}
                       submitter={{
                         searchConfig: {
-                          resetText: '清空',
-                          submitText: '查询',
+                          resetText: getI18nTitle('actions.clear', '清空'),
+                          submitText: getI18nTitle('actions.search', '查询'),
                         },
                         onReset: () => {
                           filterForm.resetFields()

src/components/r-form/utils/index.tsx

@@ -6,6 +6,7 @@ import request from '@/request'
 import { convertToBool } from '@/utils'
 import { has, get } from 'lodash'
 import { mapTree } from '@/utils/tree.ts'
+import { getI18nTitle } from '@/i18n.ts'
 
 
 const getValueType = (column: ProColumns) => {
@@ -40,7 +41,7 @@ const getComponent = (column: ProColumns) => {
 }
 
 
-export const transformAntdTableProColumns = (columns: ProColumns[], overwriteColumns?: ProColumns[]) => {
+export const transformAntdTableProColumns = (columns: ProColumns[], overwriteColumns?: ProColumns[], i18n?: string) => {
 
   const overwriteKeys = [] as string[]
 
@@ -56,27 +57,40 @@ export const transformAntdTableProColumns = (columns: ProColumns[], overwriteCol
 
     return {
       ...item,
+      title: getI18nTitle(i18n!, item),
       request: item.request ? async (params) => {
-        const { url: _url, method, params: p, fieldNames, resultPath } = item.request as unknown as RFormTypes.IRequest
+        const {
+          transform = true,
+          url: _url,
+          method,
+          params: p,
+          fieldNames,
+          resultPath
+        } = item.request as unknown as RFormTypes.IRequest
         const { value, label, disabled: disabledKey, children = 'children' } = fieldNames || {}
         const url = (_url.startsWith('/') || _url.startsWith('http')) ? _url : `/${_url}`
         return request[method?.toLowerCase() || 'get'](url, {
           ...params,
           ...p,
         }).then(res => {
+
           try {
             const data = resultPath && has(res.data, resultPath) ? get(res.data, resultPath) : res.data
 
+            if (!transform) {
+              return data
+            }
+
             return mapTree(data || [], (i: any) => {
               const disabled = disabledKey && has(i, disabledKey) ? get(i, disabledKey) : ('status' in i ? !convertToBool(i.status) : false)
+              const title = i.i18n ? getI18nTitle(i.i18n, i.label || i[label || 'name']) : i.label || i[label || 'name']
               return {
-                title: i.label || i[label || 'name'],
-                label: i.label || i[label || 'name'],
+                title,
+                label: title,
                 value: i.value ?? i[value || 'id'],
                 disabled,
                 data: i
               }
-
             }, { children })
 
           } catch (e) {

src/i18n.ts

@@ -3,49 +3,72 @@ import i18n, { InitOptions, t } from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next, useTranslation, } from 'react-i18next'
 import { zh, en } from './locales'
+import { ProColumns } from '@ant-design/pro-components'
 
 const detectionOptions = {
-    // 探测器的选项
-    order: [ 'querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag' ],
-    lookupQuerystring: 'lng',
-    lookupCookie: 'i18next',
-    lookupLocalStorage: 'i18nextLng',
-    caches: [ 'localStorage', 'cookie' ],
-    excludeCacheFor: [ 'cimode' ], // 语言探测模式中排除缓存的语言
+  // 探测器的选项
+  order: [ 'querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag' ],
+  lookupQuerystring: 'lng',
+  lookupCookie: 'i18next',
+  lookupLocalStorage: 'i18nextLng',
+  caches: [ 'localStorage', 'cookie' ],
+  excludeCacheFor: [ 'cimode' ], // 语言探测模式中排除缓存的语言
 }
 
 
 export const initI18n = (options?: InitOptions) => {
 
-    i18n.on('initialized', () => {
-        const currentLanguage = i18n.language
-        changeLanguage(currentLanguage)
-    })
-
-    return i18n
-            .use(initReactI18next)
-            .use(LanguageDetector)
-            .init({
-                resources: {
-                    en: {
-                        translation: en.default,
-                    },
-                    zh: {
-                        translation: zh.default,
-                    },
-                },
-                fallbackLng: 'zh',
-                debug: false,
-                detection: detectionOptions,
-                interpolation: {
-                    escapeValue: false,
-                },
-                ...options,
-            })
+  i18n.on('initialized', () => {
+    const currentLanguage = i18n.language
+    changeLanguage(currentLanguage)
+  })
 
+  return i18n
+          .use(initReactI18next)
+          .use(LanguageDetector)
+          .init({
+            resources: {
+              en: {
+                translation: en.default,
+              },
+              zh: {
+                translation: zh.default,
+              },
+            },
+            fallbackLng: 'zh',
+            debug: false,
+            detection: detectionOptions,
+            interpolation: {
+              escapeValue: false,
+            },
+            ...options,
+          })
+
+}
+
+export function getI18nTitle(key: string, defTitle: string): string;
+export function getI18nTitle(key: string, column: ProColumns): string;
+export function getI18nTitle(key: string, option: any): string {
+
+  if (option.dataIndex) {
+    let k = `${key}.columns.${option.dataIndex}`
+    if (option.i18n) {
+      k = option.i18n
+    }
+    //如果没有key也没有option.i18n, 说明没有i18n前缀, 直接返回
+    if (!option.i18n && !key) {
+      return option.title || option.label
+    }
+    return t(k, (option.title || option.label) as string)
+  }
+
+  if (!key) {
+    return option as unknown as string
+  }
+  return t(`${key}`, option as unknown as string)
 }
 
 export {
-    useTranslation, t
+  useTranslation, t
 }
 export default i18n

src/locales/lang/zh-CN.ts

@@ -77,6 +77,12 @@ export default {
     close: '关闭',
     copy: '复制',
     clickCopy: '点击复制',
+    resetPass: '重置密码',
+    save: '保存',
+    submit: '提交',
+    refresh: '刷新',
+    search: '查询',
+    advanceSearch: '高级查询',
   },
   message: {
     infoTitle: '提示',

src/types/r-form/model.d.ts

@@ -27,6 +27,9 @@ export namespace RFormTypes {
     params?: any;
     resultPath?: string;
 
+    //是否需要转换成下拉框的数据或者树形数据格式， 默认为true
+    transform: boolean;
+
     fieldNames?: {
       label: string;
       value: string;

src/utils/index.ts

@@ -216,3 +216,5 @@ export const genProTableColumnWidthProps = (width: string | number) => {
   }
 }
 
+
+