feat: login page add `i18n`

locales/en.yaml

@@ -87,3 +87,43 @@ menus:
   hsExecl: Export Excel
 status:
   hsLoad: Loading...
+login:
+  username: Username
+  password: Password
+  verifyCode: VerifyCode
+  remember: Remember Password
+  sure: Sure Password
+  forget: Forget Password?
+  login: Login
+  thirdLogin: Third Login
+  phoneLogin: Phone Login
+  qRCodeLogin: QRCode Login
+  register: Register
+  weChatLogin: WeChat Login
+  alipayLogin: Alipay Login
+  qqLogin: QQ Login
+  weiboLogin: Weibo Login
+  phone: Phone
+  smsVerifyCode: SMS VerifyCode
+  back: Back
+  test: Mock Test
+  tip: After scanning the code, click "Confirm" to complete the login
+  definite: Definite
+  loginSuccess: Login Success
+  registerSuccess: Regist Success
+  tickPrivacy: Please tick Privacy Policy
+  readAccept: I have read it carefully and accept
+  privacyPolicy: Privacy Policy
+  getVerifyCode: Get VerifyCode
+  info: Seconds
+  usernameReg: Please enter username
+  passwordReg: Please enter password
+  verifyCodeReg: Please enter verify code
+  verifyCodeCorrectReg: Please enter correct verify code
+  verifyCodeSixReg: Please enter a 6-digit verify code
+  phoneReg: Please enter the phone
+  phoneCorrectReg: Please enter the correct phone number format
+  passwordRuleReg: The password format should be any combination of 8-18 digits
+  passwordSureReg: Please enter confirm password
+  passwordDifferentReg: The two passwords do not match!
+  passwordUpdateReg: Password has been updated

locales/zh-CN.yaml

@@ -87,3 +87,43 @@ menus:
   hsExecl: 导出Excel
 status:
   hsLoad: 加载中...
+login:
+  username: 账号
+  password: 密码
+  verifyCode: 验证码
+  remember: 记住密码
+  sure: 确认密码
+  forget: 忘记密码?
+  login: 登录
+  thirdLogin: 第三方登录
+  phoneLogin: 手机登录
+  qRCodeLogin: 二维码登录
+  register: 注册
+  weChatLogin: 微信登录
+  alipayLogin: 支付宝登录
+  qqLogin: QQ登录
+  weiboLogin: 微博登录
+  phone: 手机号码
+  smsVerifyCode: 短信验证码
+  back: 返回
+  test: 模拟测试
+  tip: 扫码后点击"确认"，即可完成登录
+  definite: 确定
+  loginSuccess: 登录成功
+  registerSuccess: 注册成功
+  tickPrivacy: 请勾选隐私政策
+  readAccept: 我已仔细阅读并接受
+  privacyPolicy: 《隐私政策》
+  getVerifyCode: 获取验证码
+  info: 秒后重新获取
+  usernameReg: 请输入账号
+  passwordReg: 请输入密码
+  verifyCodeReg: 请输入验证码
+  verifyCodeCorrectReg: 请输入正确的验证码
+  verifyCodeSixReg: 请输入6位数字验证码
+  phoneReg: 请输入手机号码
+  phoneCorrectReg: 请输入正确的手机号码格式
+  passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
+  passwordSureReg: 请输入确认密码
+  passwordDifferentReg: 两次密码不一致!
+  passwordUpdateReg: 修改密码成功

package.json

@@ -70,7 +70,7 @@
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.37",
     "vue-form-create2": "^1.2.8",
-    "vue-i18n": "^9.2.0-beta.39",
+    "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.0.2",
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.1.2",
@@ -95,7 +95,7 @@
     "@iconify-icons/ri": "^1.2.1",
     "@iconify-icons/uil": "^1.2.1",
     "@iconify/vue": "^3.2.1",
-    "@intlify/vite-plugin-vue-i18n": "^5.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.0",
     "@pureadmin/theme": "^2.4.0",
     "@types/element-resize-detector": "1.1.3",
     "@types/js-cookie": "^3.0.1",
@@ -141,9 +141,9 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unocss": "^0.44.7",
+    "unocss": "^0.45.5",
     "unplugin-vue-define-options": "^0.6.1",
-    "vite": "^3.0.3",
+    "vite": "^3.0.5",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^1.1.0",
     "vite-svg-loader": "^3.4.0",

src/views/login/components/phone.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
 import { phoneRules } from "../utils/rule";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
+import { $t, transformI18n } from "/@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
 import { useUserStoreHook } from "/@/store/modules/user";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+const { t } = useI18n();
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -23,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
     if (valid) {
       // 模拟登录请求，需根据实际开发进行修改
       setTimeout(() => {
-        message.success("登录成功");
+        message.success(transformI18n($t("login.loginSuccess")));
         loading.value = false;
       }, 2000);
     } else {
@@ -46,7 +49,7 @@ function onBack() {
         <el-input
           clearable
           v-model="ruleForm.phone"
-          placeholder="手机号码"
+          :placeholder="t('login.phone')"
           :prefix-icon="useRenderIcon('iphone')"
         />
       </el-form-item>
@@ -58,7 +61,7 @@ function onBack() {
           <el-input
             clearable
             v-model="ruleForm.verifyCode"
-            placeholder="短信验证码"
+            :placeholder="t('login.smsVerifyCode')"
             :prefix-icon="
               useRenderIcon('ri:shield-keyhole-line', { online: true })
             "
@@ -68,7 +71,11 @@ function onBack() {
             class="ml-2"
             @click="useVerifyCode().start(ruleFormRef, 'phone')"
           >
-            {{ text }}
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
           </el-button>
         </div>
       </el-form-item>
@@ -83,7 +90,7 @@ function onBack() {
           :loading="loading"
           @click="onLogin(ruleFormRef)"
         >
-          登录
+          {{ t("login.login") }}
         </el-button>
       </el-form-item>
     </Motion>
@@ -91,7 +98,7 @@ function onBack() {
     <Motion :delay="200">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          返回
+          {{ t("login.back") }}
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/components/qrCode.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import Motion from "../utils/motion";
 import ReQrcode from "/@/components/ReQrcode";
 import { useUserStoreHook } from "/@/store/modules/user";
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
+  <Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
   <Motion :delay="100">
     <el-divider>
-      <p class="text-gray-500 text-xs">扫码后点击"确认"，即可完成登录</p>
+      <p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
     </el-divider>
   </Motion>
   <Motion :delay="150">
@@ -16,7 +19,7 @@ import { useUserStoreHook } from "/@/store/modules/user";
       class="w-full mt-4"
       @click="useUserStoreHook().SET_CURRENTPAGE(0)"
     >
-      返回
+      {{ t("login.back") }}
     </el-button>
   </Motion>
 </template>

src/views/login/components/regist.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
 import { updateRules } from "../utils/rule";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "/@/plugins/i18n";
 import { useUserStoreHook } from "/@/store/modules/user";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+const { t } = useI18n();
 const checked = ref(false);
 const loading = ref(false);
 const ruleForm = reactive({
@@ -23,9 +26,9 @@ const repeatPasswordRule = [
   {
     validator: (rule, value, callback) => {
       if (value === "") {
-        callback(new Error("请输入确认密码"));
+        callback(new Error(transformI18n($t("login.passwordSureReg"))));
       } else if (ruleForm.password !== value) {
-        callback(new Error("两次密码不一致!"));
+        callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
       } else {
         callback();
       }
@@ -42,12 +45,12 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
       if (checked.value) {
         // 模拟请求，需根据实际开发进行修改
         setTimeout(() => {
-          message.success("注册成功");
+          message.success(transformI18n($t("login.registerSuccess")));
           loading.value = false;
         }, 2000);
       } else {
         loading.value = false;
-        message.warning("请勾选隐私政策");
+        message.warning(transformI18n($t("login.tickPrivacy")));
       }
     } else {
       loading.value = false;
@@ -71,13 +74,19 @@ function onBack() {
   >
     <Motion>
       <el-form-item
-        :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
+        :rules="[
+          {
+            required: true,
+            message: transformI18n($t('login.usernameReg')),
+            trigger: 'blur'
+          }
+        ]"
         prop="username"
       >
         <el-input
           clearable
           v-model="ruleForm.username"
-          placeholder="账号"
+          :placeholder="t('login.username')"
           :prefix-icon="useRenderIcon('user')"
         />
       </el-form-item>
@@ -88,7 +97,7 @@ function onBack() {
         <el-input
           clearable
           v-model="ruleForm.phone"
-          placeholder="手机号码"
+          :placeholder="t('login.phone')"
           :prefix-icon="useRenderIcon('iphone')"
         />
       </el-form-item>
@@ -100,7 +109,7 @@ function onBack() {
           <el-input
             clearable
             v-model="ruleForm.verifyCode"
-            placeholder="短信验证码"
+            :placeholder="t('login.smsVerifyCode')"
             :prefix-icon="
               useRenderIcon('ri:shield-keyhole-line', { online: true })
             "
@@ -110,7 +119,11 @@ function onBack() {
             class="ml-2"
             @click="useVerifyCode().start(ruleFormRef, 'phone')"
           >
-            {{ text }}
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
           </el-button>
         </div>
       </el-form-item>
@@ -122,7 +135,7 @@ function onBack() {
           clearable
           show-password
           v-model="ruleForm.password"
-          placeholder="密码"
+          :placeholder="t('login.password')"
           :prefix-icon="useRenderIcon('lock')"
         />
       </el-form-item>
@@ -134,7 +147,7 @@ function onBack() {
           clearable
           show-password
           v-model="ruleForm.repeatPassword"
-          placeholder="确认密码"
+          :placeholder="t('login.sure')"
           :prefix-icon="useRenderIcon('lock')"
         />
       </el-form-item>
@@ -142,8 +155,12 @@ function onBack() {
 
     <Motion :delay="300">
       <el-form-item>
-        <el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
-        <el-button link type="primary"> 《隐私政策》 </el-button>
+        <el-checkbox v-model="checked">
+          {{ t("login.readAccept") }}
+        </el-checkbox>
+        <el-button link type="primary">
+          {{ t("login.privacyPolicy") }}
+        </el-button>
       </el-form-item>
     </Motion>
 
@@ -156,7 +173,7 @@ function onBack() {
           :loading="loading"
           @click="onUpdate(ruleFormRef)"
         >
-          确定
+          {{ t("login.definite") }}
         </el-button>
       </el-form-item>
     </Motion>
@@ -164,7 +181,7 @@ function onBack() {
     <Motion :delay="400">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          返回
+          {{ t("login.back") }}
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/components/update.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
 import { updateRules } from "../utils/rule";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "/@/plugins/i18n";
 import { useUserStoreHook } from "/@/store/modules/user";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+const { t } = useI18n();
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -21,9 +24,9 @@ const repeatPasswordRule = [
   {
     validator: (rule, value, callback) => {
       if (value === "") {
-        callback(new Error("请输入确认密码"));
+        callback(new Error(transformI18n($t("login.passwordSureReg"))));
       } else if (ruleForm.password !== value) {
-        callback(new Error("两次密码不一致!"));
+        callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
       } else {
         callback();
       }
@@ -39,7 +42,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
     if (valid) {
       // 模拟请求，需根据实际开发进行修改
       setTimeout(() => {
-        message.success("修改密码成功");
+        message.success(transformI18n($t("login.passwordUpdateReg")));
         loading.value = false;
       }, 2000);
     } else {
@@ -67,7 +70,7 @@ function onBack() {
         <el-input
           clearable
           v-model="ruleForm.phone"
-          placeholder="手机号码"
+          :placeholder="t('login.phone')"
           :prefix-icon="useRenderIcon('iphone')"
         />
       </el-form-item>
@@ -79,7 +82,7 @@ function onBack() {
           <el-input
             clearable
             v-model="ruleForm.verifyCode"
-            placeholder="短信验证码"
+            :placeholder="t('login.smsVerifyCode')"
             :prefix-icon="
               useRenderIcon('ri:shield-keyhole-line', { online: true })
             "
@@ -89,7 +92,11 @@ function onBack() {
             class="ml-2"
             @click="useVerifyCode().start(ruleFormRef, 'phone')"
           >
-            {{ text }}
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
           </el-button>
         </div>
       </el-form-item>
@@ -101,7 +108,7 @@ function onBack() {
           clearable
           show-password
           v-model="ruleForm.password"
-          placeholder="密码"
+          :placeholder="t('login.password')"
           :prefix-icon="useRenderIcon('lock')"
         />
       </el-form-item>
@@ -113,7 +120,7 @@ function onBack() {
           clearable
           show-password
           v-model="ruleForm.repeatPassword"
-          placeholder="确认密码"
+          :placeholder="t('login.sure')"
           :prefix-icon="useRenderIcon('lock')"
         />
       </el-form-item>
@@ -128,7 +135,7 @@ function onBack() {
           :loading="loading"
           @click="onUpdate(ruleFormRef)"
         >
-          确定
+          {{ t("login.definite") }}
         </el-button>
       </el-form-item>
     </Motion>
@@ -136,7 +143,7 @@ function onBack() {
     <Motion :delay="300">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          返回
+          {{ t("login.back") }}
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { loginRules } from "./utils/rule";
@@ -11,6 +12,7 @@ import { useNav } from "/@/layout/hooks/nav";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { storageSession } from "@pureadmin/utils";
+import { $t, transformI18n } from "/@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "/@/layout/hooks/useLayout";
 import { useUserStoreHook } from "/@/store/modules/user";
@@ -42,6 +44,7 @@ const currentPage = computed(() => {
 const { initStorage } = useLayout();
 initStorage();
 
+const { t } = useI18n();
 const { dataTheme, dataThemeChange } = useDataThemeChange();
 const { getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
@@ -151,11 +154,20 @@ dataThemeChange();
             @keyup.enter="onLogin(ruleFormRef)"
           >
             <Motion :delay="100">
-              <el-form-item prop="username">
+              <el-form-item
+                :rules="[
+                  {
+                    required: true,
+                    message: transformI18n($t('login.usernameReg')),
+                    trigger: 'blur'
+                  }
+                ]"
+                prop="username"
+              >
                 <el-input
                   clearable
                   v-model="ruleForm.username"
-                  placeholder="账号"
+                  :placeholder="t('login.username')"
                   :prefix-icon="useRenderIcon('user')"
                 />
               </el-form-item>
@@ -167,7 +179,7 @@ dataThemeChange();
                   clearable
                   show-password
                   v-model="ruleForm.password"
-                  placeholder="密码"
+                  :placeholder="t('login.password')"
                   :prefix-icon="useRenderIcon('lock')"
                 />
               </el-form-item>
@@ -178,7 +190,7 @@ dataThemeChange();
                 <el-input
                   clearable
                   v-model="ruleForm.verifyCode"
-                  placeholder="验证码"
+                  :placeholder="t('login.verifyCode')"
                   :prefix-icon="
                     useRenderIcon('ri:shield-keyhole-line', { online: true })
                   "
@@ -193,13 +205,15 @@ dataThemeChange();
             <Motion :delay="250">
               <el-form-item>
                 <div class="w-full h-20px flex justify-between items-center">
-                  <el-checkbox v-model="checked">记住密码</el-checkbox>
+                  <el-checkbox v-model="checked">
+                    {{ t("login.remember") }}
+                  </el-checkbox>
                   <el-button
                     link
                     type="primary"
                     @click="useUserStoreHook().SET_CURRENTPAGE(4)"
                   >
-                    忘记密码?
+                    {{ t("login.forget") }}
                   </el-button>
                 </div>
                 <el-button
@@ -209,7 +223,7 @@ dataThemeChange();
                   :loading="loading"
                   @click="onLogin(ruleFormRef)"
                 >
-                  登录
+                  {{ t("login.login") }}
                 </el-button>
               </el-form-item>
             </Motion>
@@ -224,7 +238,7 @@ dataThemeChange();
                     size="default"
                     @click="onHandle(index + 1)"
                   >
-                    {{ item.title }}
+                    {{ t(item.title) }}
                   </el-button>
                 </div>
               </el-form-item>
@@ -234,13 +248,13 @@ dataThemeChange();
           <Motion v-if="currentPage === 0" :delay="350">
             <el-form-item>
               <el-divider>
-                <p class="text-gray-500 text-xs">第三方登录</p>
+                <p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
               </el-divider>
               <div class="w-full flex justify-evenly">
                 <span
                   v-for="(item, index) in thirdParty"
                   :key="index"
-                  :title="`${item.title}登录`"
+                  :title="t(item.title)"
                 >
                   <IconifyIconOnline
                     :icon="`ri:${item.icon}-fill`"

src/views/login/utils/enums.ts

@@ -1,30 +1,32 @@
+import { $t } from "/@/plugins/i18n";
+
 const operates = [
   {
-    title: "手机登录"
+    title: $t("login.phoneLogin")
   },
   {
-    title: "二维码登录"
+    title: $t("login.qRCodeLogin")
   },
   {
-    title: "注册"
+    title: $t("login.register")
   }
 ];
 
 const thirdParty = [
   {
-    title: "微信",
+    title: $t("login.weChatLogin"),
     icon: "wechat"
   },
   {
-    title: "支付宝",
+    title: $t("login.alipayLogin"),
     icon: "alipay"
   },
   {
-    title: "QQ",
+    title: $t("login.qqLogin"),
     icon: "qq"
   },
   {
-    title: "微博",
+    title: $t("login.weiboLogin"),
     icon: "weibo"
   }
 ];

src/views/login/utils/motion.ts

@@ -1,6 +1,6 @@
 import { h, defineComponent, withDirectives, resolveDirective } from "vue";
 
-// 封装@vueuse/motion动画库中的自定义指令v-motion
+/** 封装@vueuse/motion动画库中的自定义指令v-motion */
 export default defineComponent({
   name: "Motion",
   props: {

src/views/login/utils/rule.ts

@@ -1,6 +1,7 @@
 import { reactive } from "vue";
 import { isPhone } from "@pureadmin/utils";
 import type { FormRules } from "element-plus";
+import { $t, transformI18n } from "/@/plugins/i18n";
 import { useUserStoreHook } from "/@/store/modules/user";
 
 /** 6位数字验证码正则 */
@@ -12,16 +13,13 @@ export const REGEXP_PWD =
 
 /** 登录校验 */
 const loginRules = reactive(<FormRules>{
-  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
   password: [
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入密码"));
+          callback(new Error(transformI18n($t("login.passwordReg"))));
         } else if (!REGEXP_PWD.test(value)) {
-          callback(
-            new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
-          );
+          callback(new Error(transformI18n($t("login.passwordRuleReg"))));
         } else {
           callback();
         }
@@ -33,9 +31,9 @@ const loginRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
         } else if (useUserStoreHook().verifyCode !== value) {
-          callback(new Error("请输入正确的验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
         } else {
           callback();
         }
@@ -51,9 +49,9 @@ const phoneRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入手机号码"));
+          callback(new Error(transformI18n($t("login.phoneReg"))));
         } else if (!isPhone(value)) {
-          callback(new Error("请输入正确的手机号码格式"));
+          callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
         } else {
           callback();
         }
@@ -65,9 +63,9 @@ const phoneRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
         } else if (!REGEXP_SIX.test(value)) {
-          callback(new Error("请输入6位数字验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
         } else {
           callback();
         }
@@ -83,9 +81,9 @@ const updateRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入手机号码"));
+          callback(new Error(transformI18n($t("login.phoneReg"))));
         } else if (!isPhone(value)) {
-          callback(new Error("请输入正确的手机号码格式"));
+          callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
         } else {
           callback();
         }
@@ -97,9 +95,9 @@ const updateRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
         } else if (!REGEXP_SIX.test(value)) {
-          callback(new Error("请输入6位数字验证码"));
+          callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
         } else {
           callback();
         }
@@ -111,11 +109,9 @@ const updateRules = reactive(<FormRules>{
     {
       validator: (rule, value, callback) => {
         if (value === "") {
-          callback(new Error("请输入密码"));
+          callback(new Error(transformI18n($t("login.passwordReg"))));
         } else if (!REGEXP_PWD.test(value)) {
-          callback(
-            new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
-          );
+          callback(new Error(transformI18n($t("login.passwordRuleReg"))));
         } else {
           callback();
         }

src/views/login/utils/static.ts

@@ -9,7 +9,7 @@ import illustration4 from "/@/assets/login/illustration4.svg?component";
 import illustration5 from "/@/assets/login/illustration5.svg?component";
 import illustration6 from "/@/assets/login/illustration6.svg?component";
 
-/* Show a different background every day */
+/** Show a different background every day */
 const currentWeek = computed(() => {
   switch (String(new Date().getDay())) {
     case "0":

src/views/login/utils/verifyCode.ts

@@ -3,9 +3,8 @@ import { cloneDeep } from "lodash-unified";
 import { ref } from "vue";
 
 const isDisabled = ref(false);
-const TEXT = "获取验证码";
 const timer = ref(null);
-const text = ref(TEXT);
+const text = ref("");
 
 export const useVerifyCode = () => {
   const start = async (
@@ -20,11 +19,11 @@ export const useVerifyCode = () => {
         clearInterval(timer.value);
         timer.value = setInterval(() => {
           if (time > 0) {
-            text.value = `${time}秒后重新获取`;
+            text.value = `${time}`;
             isDisabled.value = true;
             time -= 1;
           } else {
-            text.value = TEXT;
+            text.value = "";
             isDisabled.value = false;
             clearInterval(timer.value);
             time = initTime;
@@ -35,7 +34,7 @@ export const useVerifyCode = () => {
   };
 
   const end = () => {
-    text.value = TEXT;
+    text.value = "";
     isDisabled.value = false;
     clearInterval(timer.value);
   };