feat: login page add i18n

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>