feat: multi-language component

Author: anncwb

CHANGELOG.zh_CN.md

@@ -14,6 +14,8 @@
 ### 🎫 Chores
 
 - 更新 antdv 到`2.0.0-rc.2`
+- 更新 vue 到`3.0.3`
+- 更新 vite 到`1.0.0.rc10`
 - 暂时删除 `@vueuse/core`.等稳定后在集成。目前不太稳定。
 
 ## 2.0.0-rc.11 (2020-11-18)

package.json

@@ -35,7 +35,7 @@
     "qrcode": "^1.4.4",
     "sortablejs": "^1.12.0",
     "vditor": "^3.6.6",
-    "vue": "^3.0.2",
+    "vue": "^3.0.3",
     "vue-i18n": "^9.0.0-beta.8",
     "vue-router": "^4.0.0-rc.5",
     "vuex": "^4.0.0-rc.1",
@@ -63,7 +63,7 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.3",
     "@vuedx/typecheck": "^0.2.4-0",
     "@vuedx/typescript-plugin-vue": "^0.2.4-0",
     "autoprefixer": "^9.8.6",
@@ -96,7 +96,7 @@
     "tasksfile": "^5.1.1",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
-    "vite": "^1.0.0-rc.9",
+    "vite": "^1.0.0-rc.10",
     "vite-plugin-html": "^1.0.0-beta.2",
     "vite-plugin-mock": "^1.0.6",
     "vite-plugin-purge-icons": "^0.4.5",

src/components/Drawer/src/BasicDrawer.tsx

@@ -1,3 +1,5 @@
+import './index.less';
+
 import type { DrawerInstance, DrawerProps } from './types';
 
 import { defineComponent, ref, computed, watchEffect, watch, unref, nextTick, toRaw } from 'vue';
@@ -13,8 +15,7 @@ import { getSlot } from '/@/utils/helper/tsxHelper';
 import { isFunction, isNumber } from '/@/utils/is';
 import { buildUUID } from '/@/utils/uuid';
 import { deepMerge } from '/@/utils';
-
-import './index.less';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 const prefixCls = 'basic-drawer';
 export default defineComponent({
@@ -27,6 +28,8 @@ export default defineComponent({
     const visibleRef = ref(false);
     const propsRef = ref<Partial<DrawerProps> | null>(null);
 
+    const { t } = useI18n('component.drawer');
+
     const getMergeProps = computed((): any => {
       return deepMerge(toRaw(props), unref(propsRef));
     });
@@ -208,7 +211,7 @@ export default defineComponent({
                 >
                   <FullLoading
                     absolute
-                    tip="加载中..."
+                    tip={t('loadingText')}
                     class={[!unref(getProps).loading ? 'hidden' : '']}
                   />
                   {getSlot(slots, 'default')}

src/components/Drawer/src/props.ts

@@ -1,4 +1,8 @@
 import type { PropType } from 'vue';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n('component.drawer');
+
 export const footerProps = {
   confirmLoading: Boolean as PropType<boolean>,
   /**
@@ -11,7 +15,7 @@ export const footerProps = {
   cancelButtonProps: Object as PropType<any>,
   cancelText: {
     type: String as PropType<string>,
-    default: '关闭',
+    default: t('cancelText'),
   },
   /**
    * @description: Show confirmation button
@@ -23,7 +27,7 @@ export const footerProps = {
   okButtonProps: Object as PropType<any>,
   okText: {
     type: String as PropType<string>,
-    default: '确认',
+    default: t('okText'),
   },
   okType: {
     type: String as PropType<string>,

src/components/Excel/src/ExportExcelModel.vue

@@ -1,5 +1,10 @@
 <template>
-  <BasicModal v-bind="$attrs" title="导出数据" @ok="handleOk" @register="registerModal">
+  <BasicModal
+    v-bind="$attrs"
+    :title="t('exportModalTitle')"
+    @ok="handleOk"
+    @register="registerModal"
+  >
     <BasicForm
       :labelWidth="100"
       :schemas="schemas"
@@ -9,22 +14,26 @@
   </BasicModal>
 </template>
 <script lang="ts">
+  import type { ExportModalResult } from './types';
   import { defineComponent } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { ExportModalResult } from './types';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  const { t } = useI18n('component.excel');
 
   const schemas: FormSchema[] = [
     {
       field: 'filename',
       component: 'Input',
-      label: '文件名',
+      label: t('fileName'),
       rules: [{ required: true }],
     },
     {
       field: 'bookType',
       component: 'Select',
-      label: '文件类型',
+      label: t('fileType'),
       defaultValue: 'xlsx',
       rules: [{ required: true }],
       componentProps: {
@@ -76,6 +85,7 @@
         handleOk,
         registerForm,
         registerModal,
+        t,
       };
     },
   });

src/components/Excel/src/ImportExcel.vue

@@ -79,7 +79,7 @@
               /* DO SOMETHING WITH workbook HERE */
               const excelData = getExcelData(workbook);
               emit('success', excelData);
-              resolve();
+              resolve('');
             } catch (error) {
               reject(error);
             } finally {

src/components/Form/src/FormAction.tsx

@@ -6,6 +6,9 @@ import Button from '/@/components/Button/index.vue';
 import { BasicArrow } from '/@/components/Basic/index';
 
 import { getSlot } from '/@/utils/helper/tsxHelper';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n('component.form');
 
 export default defineComponent({
   name: 'BasicFormAction',
@@ -55,14 +58,14 @@ export default defineComponent({
   setup(props, { slots, emit }) {
     const getResetBtnOptionsRef = computed(() => {
       return {
-        text: '重置',
+        text: t('resetButton'),
         ...props.resetButtonOptions,
       };
     });
 
     const getSubmitBtnOptionsRef = computed(() => {
       return {
-        text: '查询',
+        text: t('submitButton'),
         // htmlType: 'submit',
         ...props.submitButtonOptions,
       };
@@ -108,7 +111,7 @@ export default defineComponent({
                     <Button type="default" class="mr-2" onClick={toggleAdvanced}>
                       {() => (
                         <>
-                          {isAdvanced ? '收起' : '展开'}
+                          {isAdvanced ? t('putAway') : t('unfold')}
                           <BasicArrow expand={!isAdvanced} />
                         </>
                       )}

src/components/Form/src/helper.ts

@@ -1,14 +1,17 @@
 import type { ComponentType } from './types/index';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n('component.form');
 
 /**
  * @description: 生成placeholder
  */
 export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input') || component.includes('Complete')) {
-    return '请输入';
+    return t('input');
   }
   if (component.includes('Picker')) {
-    return '请选择';
+    return t('choose');
   }
   if (
     component.includes('Select') ||
@@ -18,7 +21,7 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Switch')
   ) {
     // return `请选择${label}`;
-    return '请选择';
+    return t('choose');
   }
   return '';
 }

src/components/Menu/src/SearchInput.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="menu-search-input" @Click="handleClick" :class="searchClass">
     <a-input-search
-      placeholder="菜单搜索"
+      :placeholder="t('search')"
       class="menu-search-input__search"
       allowClear
       @change="handleChange"
@@ -12,9 +12,9 @@
   import type { PropType } from 'vue';
   import { defineComponent, computed } from 'vue';
   import { ThemeEnum } from '/@/enums/appEnum';
-
   // hook
   import { useDebounce } from '/@/hooks/core/useDebounce';
+  import { useI18n } from '/@/hooks/web/useI18n';
   //
   export default defineComponent({
     name: 'BasicMenuSearchInput',
@@ -29,6 +29,8 @@
       },
     },
     setup(props, { emit }) {
+      const { t } = useI18n('component.menu');
+
       const [debounceEmitChange] = useDebounce(emitChange, 200);
 
       function emitChange(value?: string): void {
@@ -52,7 +54,7 @@
         return cls;
       });
 
-      return { handleClick, searchClass, handleChange };
+      return { handleClick, searchClass, handleChange, t };
     },
   });
 </script>

src/components/Menu/src/types.ts

@@ -1,4 +1,6 @@
+import { ComputedRef } from 'vue';
 import { ThemeEnum } from '/@/enums/appEnum';
+import { MenuModeEnum } from '/@/enums/menuEnum';
 export interface MenuState {
   // 默认选中的列表
   defaultSelectedKeys: string[];

src/components/Modal/src/props.ts

@@ -1,5 +1,9 @@
 import type { PropType } from 'vue';
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n('component.modal');
+
 export const modalProps = {
   visible: Boolean as PropType<boolean>,
   // open drag
@@ -13,11 +17,11 @@ export const modalProps = {
   },
   cancelText: {
     type: String as PropType<string>,
-    default: '关闭',
+    default: t('cancelText'),
   },
   okText: {
     type: String as PropType<string>,
-    default: '确认',
+    default: t('okText'),
   },
   closeFunc: Function as PropType<() => Promise<boolean>>,
 };

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);