feat: multi-language layout

src/views/sys/error-log/DetailModal.vue

@@ -1,15 +1,15 @@
 <template>
-  <BasicModal :width="800" :title="t('sys.errorLog.tableActionDesc')" v-bind="$attrs">
+  <BasicModal :width="800" :title="t('tableActionDesc')" v-bind="$attrs">
     <Description :data="info" @register="register" />
   </BasicModal>
 </template>
 <script lang="ts">
   import { defineComponent, PropType } from 'vue';
-  import { useI18n } from 'vue-i18n';
 
   import { BasicModal } from '/@/components/Modal/index';
   import { ErrorInfo } from '/@/store/modules/error';
   import { Description, useDescription } from '/@/components/Description/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   import { getDescSchema } from './data';
 
@@ -23,7 +23,7 @@
       },
     },
     setup() {
-      const { t } = useI18n();
+      const { t } = useI18n('sys.errorLog');
       const [register] = useDescription({
         column: 2,
         schema: getDescSchema(),

src/views/sys/error-log/data.tsx

@@ -1,16 +1,15 @@
 import { Tag } from 'ant-design-vue';
 import { BasicColumn } from '/@/components/Table/index';
 import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
 
-import { useExternalI18n } from '/@/hooks/web/useLocale';
-
-const { t } = useExternalI18n();
+const { t } = useI18n('sys.errorLog');
 
 export function getColumns(): BasicColumn[] {
   return [
     {
       dataIndex: 'type',
-      title: t('sys.errorLog.tableColumnType'),
+      title: t('tableColumnType'),
       width: 80,
       customRender: ({ text }) => {
         const color =
@@ -33,12 +32,12 @@ export function getColumns(): BasicColumn[] {
     },
     {
       dataIndex: 'time',
-      title: t('sys.errorLog.tableColumnDate'),
+      title: t('tableColumnDate'),
       width: 160,
     },
     {
       dataIndex: 'file',
-      title: t('sys.errorLog.tableColumnFile'),
+      title: t('tableColumnFile'),
       width: 200,
     },
     {
@@ -48,12 +47,12 @@ export function getColumns(): BasicColumn[] {
     },
     {
       dataIndex: 'message',
-      title: t('sys.errorLog.tableColumnMsg'),
+      title: t('tableColumnMsg'),
       width: 300,
     },
     {
       dataIndex: 'stack',
-      title: t('sys.errorLog.tableColumnStackMsg'),
+      title: t('tableColumnStackMsg'),
       width: 300,
     },
   ];

src/views/sys/error-log/index.vue

@@ -35,7 +35,7 @@
 
   import { useModal } from '/@/components/Modal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from 'vue-i18n';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   import { errorStore, ErrorInfo } from '/@/store/modules/error';
 
@@ -53,7 +53,7 @@
       const rowInfoRef = ref<ErrorInfo>();
       const imgListRef = ref<string[]>([]);
 
-      const { t } = useI18n();
+      const { t } = useI18n('sys.errorLog');
 
       const [register, { setTableData }] = useTable({
         title: t('sys.errorLog.tableTitle'),
@@ -80,7 +80,7 @@
       );
       const { createMessage } = useMessage();
       if (isDevMode()) {
-        createMessage.info(t('sys.errorLog.enableMessage'));
+        createMessage.info(t('enableMessage'));
       }
       // 查看详情
       function handleDetail(row: ErrorInfo) {

src/views/sys/exception/Exception.tsx

@@ -1,3 +1,5 @@
+import './exception.less';
+
 import type { PropType } from 'vue';
 
 import { Result, Button } from 'ant-design-vue';
@@ -12,9 +14,8 @@ import { useRoute } from 'vue-router';
 
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { PageEnum } from '/@/enums/pageEnum';
-import { useI18n } from 'vue-i18n';
+import { useI18n } from '/@/hooks/web/useI18n';
 
-import './exception.less';
 interface MapValue {
   title: string;
   subTitle: string;
@@ -52,7 +53,7 @@ export default defineComponent({
     const { query } = useRoute();
     const go = useGo();
     const redo = useRedo();
-    const { t } = useI18n();
+    const { t } = useI18n('sys.exception');
 
     const getStatus = computed(() => {
       const { status: routeStatus } = query;
@@ -66,13 +67,13 @@ export default defineComponent({
       }
     );
 
-    const backLoginI18n = t('sys.exception.backLogin');
-    const backHomeI18n = t('sys.exception.backHome');
+    const backLoginI18n = t('backLogin');
+    const backHomeI18n = t('backHome');
 
     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
       title: '403',
       status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
-      subTitle: t('sys.exception.subTitle403'),
+      subTitle: t('subTitle403'),
       btnText: props.full ? backLoginI18n : backHomeI18n,
       handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
     });
@@ -80,7 +81,7 @@ export default defineComponent({
     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
       title: '404',
       status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
-      subTitle: t('sys.exception.subTitle404'),
+      subTitle: t('subTitle404'),
       btnText: props.full ? backLoginI18n : backHomeI18n,
       handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
     });
@@ -88,22 +89,22 @@ export default defineComponent({
     unref(statusMapRef).set(ExceptionEnum.ERROR, {
       title: '500',
       status: `${ExceptionEnum.ERROR}`,
-      subTitle: t('sys.exception.subTitle500'),
+      subTitle: t('subTitle500'),
       btnText: backHomeI18n,
       handler: () => go(),
     });
 
     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
-      title: t('sys.exception.noDataTitle'),
+      title: t('noDataTitle'),
       subTitle: '',
-      btnText: t('sys.exception.redo'),
+      btnText: t('redo'),
       handler: () => redo(),
       icon: notDataImg,
     });
 
     unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
-      title: t('sys.exception.networkErrorTitle'),
-      subTitle: t('sys.exception.networkErrorSubTitle'),
+      title: t('networkErrorTitle'),
+      subTitle: t('networkErrorSubTitle'),
       btnText: 'Refresh',
       handler: () => redo(),
       icon: netWorkImg,

src/views/sys/lock/index.vue

@@ -6,7 +6,7 @@
         <p class="lock-page__header-name">{{ realName }}</p>
       </div>
       <BasicForm @register="register" v-if="!getIsNotPwd" />
-      <Alert v-if="errMsgRef" type="error" :message="t('sys.lock.alert')" banner />
+      <Alert v-if="errMsgRef" type="error" :message="t('alert')" banner />
       <div class="lock-page__footer">
         <a-button type="default" class="mt-2 mr-2" @click="goLogin" v-if="!getIsNotPwd">
           {{ t('sys.lock.backToLogin') }}
@@ -26,8 +26,7 @@
 
   import { userStore } from '/@/store/modules/user';
   import { appStore } from '/@/store/modules/app';
-
-  import { useI18n } from 'vue-i18n';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'LockPage',
@@ -37,7 +36,7 @@
       const loadingRef = ref(false);
       const errMsgRef = ref(false);
 
-      const { t } = useI18n();
+      const { t } = useI18n('sys.lock');
       const [register, { validateFields }] = useForm({
         showActionButtonGroup: false,
         schemas: [
@@ -47,7 +46,7 @@
             component: 'InputPassword',
             componentProps: {
               style: { width: '100%' },
-              placeholder: t('sys.lock.placeholder'),
+              placeholder: t('placeholder'),
             },
             rules: [{ required: true }],
           },

src/views/sys/login/Login.vue

@@ -4,7 +4,7 @@
     <div class="login-form-wrap">
       <div class="login-form mx-6">
         <div class="login-form__content px-2 py-10">
-          <AppLocalPicker class="login-form__locale" />
+          <AppLocalePicker v-if="showLocale" class="login-form__locale" />
           <header>
             <img :src="logo" class="mr-4" />
             <h1>{{ title }}</h1>
@@ -64,23 +64,23 @@
   import { Checkbox } from 'ant-design-vue';
 
   import Button from '/@/components/Button/index.vue';
-  import { AppLocalPicker } from '/@/components/Application';
+  import { AppLocalePicker } from '/@/components/Application';
   // import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
 
   import { userStore } from '/@/store/modules/user';
-  import { useI18n } from 'vue-i18n';
 
   // import { appStore } from '/@/store/modules/app';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useGlobSetting } from '/@/hooks/setting';
+  import { useGlobSetting, useProjectSetting } from '/@/hooks/setting';
   import logo from '/@/assets/images/logo.png';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
     components: {
       //  BasicDragVerify,
       AButton: Button,
       ACheckbox: Checkbox,
-      AppLocalPicker,
+      AppLocalePicker,
     },
     setup() {
       const formRef = ref<any>(null);
@@ -88,8 +88,9 @@
       // const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
 
       const globSetting = useGlobSetting();
+      const { locale } = useProjectSetting();
       const { notification } = useMessage();
-      const { t } = useI18n();
+      const { t } = useI18n('sys.login');
 
       // const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
 
@@ -103,10 +104,8 @@
       });
 
       const formRules = reactive({
-        account: [{ required: true, message: t('sys.login.accountPlaceholder'), trigger: 'blur' }],
-        password: [
-          { required: true, message: t('sys.login.passwordPlaceholder'), trigger: 'blur' },
-        ],
+        account: [{ required: true, message: t('accountPlaceholder'), trigger: 'blur' }],
+        password: [{ required: true, message: t('passwordPlaceholder'), trigger: 'blur' }],
         // verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
       });
 
@@ -131,8 +130,8 @@
           );
           if (userInfo) {
             notification.success({
-              message: t('sys.login.loginSuccessTitle'),
-              description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
+              message: t('loginSuccessTitle'),
+              description: `${t('loginSuccessDesc')}: ${userInfo.realName}`,
               duration: 3,
             });
           }
@@ -154,6 +153,7 @@
         title: globSetting && globSetting.title,
         logo,
         t,
+        showLocale: locale.show,
       };
     },
   });