feat: multi-language component

src/components/Table/src/components/TableSetting.vue

@@ -4,27 +4,27 @@
 
     <Tooltip placement="top" v-if="getSetting.redo">
       <template #title>
-        <span>刷新</span>
+        <span>{{ t('settingRedo') }}</span>
       </template>
       <RedoOutlined @click="redo" />
     </Tooltip>
 
     <Tooltip placement="top" v-if="getSetting.size">
       <template #title>
-        <span>密度</span>
+        <span>{{ t('settingDens') }}</span>
       </template>
       <Dropdown placement="bottomCenter" :trigger="['click']">
         <ColumnHeightOutlined />
         <template #overlay>
           <Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
             <MenuItem key="default">
-              <span>默认</span>
+              <span>{{ t('settingDensDefault') }}</span>
             </MenuItem>
             <MenuItem key="middle">
-              <span>中等</span>
+              <span>{{ t('settingDensMiddle') }}</span>
             </MenuItem>
             <MenuItem key="small">
-              <span>紧凑</span>
+              <span>{{ t('settingDensSmall') }}</span>
             </MenuItem>
           </Menu>
         </template>
@@ -33,7 +33,7 @@
 
     <Tooltip placement="top" v-if="getSetting.setting">
       <template #title>
-        <span>列设置</span>
+        <span>{{ t('settingColumn') }}</span>
       </template>
       <Popover
         placement="bottomLeft"
@@ -58,9 +58,9 @@
               v-model:checked="checkAll"
               @change="onCheckAllChange"
             >
-              列展示
+              {{ t('settingColumnShow') }}
             </Checkbox>
-            <a-button size="small" type="link" @click="reset">重置</a-button>
+            <a-button size="small" type="link" @click="reset"> {{ t('settingReset') }}</a-button>
           </div>
         </template>
         <SettingOutlined />
@@ -69,7 +69,7 @@
 
     <Tooltip placement="top" v-if="getSetting.fullScreen">
       <template #title>
-        <span>全屏</span>
+        <span>{{ t('settingFullScreen') }}</span>
       </template>
       <FullscreenOutlined @click="handleFullScreen" v-if="!isFullscreenRef" />
       <FullscreenExitOutlined @click="handleFullScreen" v-else />
@@ -90,6 +90,7 @@
   import { useFullscreen } from '/@/hooks/web/useFullScreen';
 
   import type { SizeType, TableSetting } from '../types/table';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   interface Options {
     label: string;
@@ -139,6 +140,8 @@
         defaultCheckList: [],
       });
 
+      const { t } = useI18n('component.table');
+
       function init() {
         let ret: Options[] = [];
         table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
@@ -217,6 +220,7 @@
         reset,
         getSetting,
         ...toRefs(state),
+        t,
       };
     },
   });

src/components/Table/src/hooks/useColumns.ts

@@ -4,7 +4,9 @@ import { unref, ComputedRef, Ref, computed, watchEffect, ref, toRaw } from 'vue'
 import { isBoolean, isArray, isObject } from '/@/utils/is';
 import { PAGE_SIZE } from '../const';
 import { useProps } from './useProps';
+import { useI18n } from '/@/hooks/web/useI18n';
 
+const { t } = useI18n('component.table');
 export function useColumns(
   refProps: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<false | PaginationProps>
@@ -42,7 +44,7 @@ export function useColumns(
       columns.unshift({
         flag: 'INDEX',
         width: 50,
-        title: '序号',
+        title: t('index'),
         align: 'center',
         customRender: ({ index }) => {
           const getPagination = unref(getPaginationRef);

src/components/Table/src/hooks/usePagination.tsx

@@ -8,6 +8,9 @@ import { isBoolean } from '/@/utils/is';
 
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
 import { useProps } from './useProps';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n('component.table');
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const configRef = ref<PaginationProps>({});
   const { propsRef } = useProps(refProps);
@@ -22,7 +25,7 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
       pageSize: PAGE_SIZE,
       size: 'small',
       defaultPageSize: PAGE_SIZE,
-      showTotal: (total) => `共 ${total} 条数据`,
+      showTotal: (total) => t('total', { total }),
       showSizeChanger: true,
       pageSizeOptions: PAGE_SIZE_OPTIONS,
       itemRender: ({ page, type, originalElement }) => {