wip: multi-language support

src/views/sys/login/Login.vue

@@ -4,6 +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" />
           <header>
             <img :src="logo" class="mr-4" />
             <h1>{{ title }}</h1>
@@ -29,13 +30,15 @@
               <a-col :span="12">
                 <a-form-item>
                   <!-- No logic, you need to deal with it yourself -->
-                  <a-checkbox v-model:checked="autoLogin" size="small">自动登录</a-checkbox>
+                  <a-checkbox v-model:checked="autoLogin" size="small">{{
+                    t('sys.login.autoLogin')
+                  }}</a-checkbox>
                 </a-form-item>
               </a-col>
               <a-col :span="12">
                 <a-form-item :style="{ 'text-align': 'right' }">
                   <!-- No logic, you need to deal with it yourself -->
-                  <a-button type="link" size="small">忘记密码</a-button>
+                  <a-button type="link" size="small">{{ t('sys.login.forgetPassword') }}</a-button>
                 </a-form-item>
               </a-col>
             </a-row>
@@ -47,7 +50,7 @@
                 :block="true"
                 @click="login"
                 :loading="formState.loading"
-                >{{ t('system.login.button') }}</a-button
+                >{{ t('sys.login.loginButton') }}</a-button
               >
             </a-form-item>
           </a-form>
@@ -61,6 +64,7 @@
   import { Checkbox } from 'ant-design-vue';
 
   import Button from '/@/components/Button/index.vue';
+  import { AppLocalPicker } from '/@/components/Application';
   // import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
 
   import { userStore } from '/@/store/modules/user';
@@ -68,7 +72,7 @@
 
   // import { appStore } from '/@/store/modules/app';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useSetting } from '/@/hooks/core/useSetting';
+  import { useGlobSetting } from '/@/settings/use';
   import logo from '/@/assets/images/logo.png';
 
   export default defineComponent({
@@ -76,14 +80,16 @@
       //  BasicDragVerify,
       AButton: Button,
       ACheckbox: Checkbox,
+      AppLocalPicker,
     },
     setup() {
       const formRef = ref<any>(null);
       const autoLoginRef = ref(false);
       // const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
 
-      const { globSetting } = useSetting();
+      const globSetting = useGlobSetting();
       const { notification } = useMessage();
+      const { t } = useI18n();
 
       // const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
 
@@ -97,8 +103,10 @@
       });
 
       const formRules = reactive({
-        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        account: [{ required: true, message: t('sys.login.accountPlaceholder'), trigger: 'blur' }],
+        password: [
+          { required: true, message: t('sys.login.passwordPlaceholder'), trigger: 'blur' },
+        ],
         // verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
       });
 
@@ -123,8 +131,8 @@
           );
           if (userInfo) {
             notification.success({
-              message: '登录成功',
-              description: `欢迎回来: ${userInfo.realName}`,
+              message: t('sys.login.loginSuccessTitle'),
+              description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
               duration: 3,
             });
           }
@@ -134,7 +142,6 @@
           formState.loading = false;
         }
       }
-      const { t } = useI18n();
       return {
         formRef,
         // verifyRef,
@@ -195,7 +202,14 @@
         .respond-to(xlarge, { width: 540px; right:0});
       }
 
+      &__locale {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+
       &__content {
+        position: relative;
         width: 100%;
         height: 100%;
         border: 1px solid #999;