Jelajahi Sumber

```
feat(login): 登录对话框国际化重构

- 集成 vue-i18n 实现登录表单国际化
- 将硬编码的验证消息替换为多语言文本
- 更新中英文本地化配置文件
- 移除测试用的默认账号密码值
- 调整短信登录为验证码登录的文案描述
```

zhangningning 1 bulan lalu
induk
melakukan
fc6733a17f
3 mengubah file dengan 36 tambahan dan 24 penghapusan
  1. 23 21
      src/components/LoginDialog.vue
  2. 6 1
      src/locales/en.js
  3. 7 2
      src/locales/zh-CN.js

+ 23 - 21
src/components/LoginDialog.vue

@@ -224,6 +224,8 @@ import { useAppStore } from '@/pinia/appStore'
 const appStore = useAppStore();
 import { useRoute } from 'vue-router'
 const route = useRoute()
+import { useI18n } from 'vue-i18n' 
+const { t } = useI18n() 
 // 正则表达式
 const PHONE_REGEX = /^1[3-9]\d{9}$/;
 const EMAIL_REGEX = /^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+$/;
@@ -268,21 +270,21 @@ const activeTab = ref('sms')
 
 // 密码登录表单
 const passwordForm = reactive({
-  account: '13925214105',
-  password: 'zhangning13Z',
+  account: '13925214105',//
+  password: 'zhangning13Z',//
   captcha: '',
   uuid: ''
 })
 
 // 短信登录表单
 const smsForm = reactive({
-  account: '13925214105',
+  account: '',
   verifyCode: ''
 })
 
 // 重置密码表单
 const resetForm = reactive({
-  account: '13925214105',
+  account: '',
   verifyCode: '',
   newPassword: '',
   confirmPassword: ''
@@ -306,46 +308,46 @@ const emailCountdown = ref(0)
 // 表单验证规则
 const passwordRules = reactive({
   account: [
-    { required: true, message: '请输入账号', trigger: 'blur' },
-    { validator: (val) => isPasswordPhone.value || isPasswordEmail.value, message: '请输入正确的(手机号或邮箱)', trigger: 'blur' }
+    { required: true, message: t('login.placeholderAccount'), trigger: 'blur' },
+    { validator: (val) => isPasswordPhone.value || isPasswordEmail.value, message: t('login.placeholderPhoneOrEmailTip'), trigger: 'blur' }
   ],
   password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
+    { required: true, message: t('login.placeholderPassword'), trigger: 'blur' },
+    { min: 6, message: t('login.passwordMinLength'), trigger: 'blur' }
   ],
   captcha: [
-    { required: true, message: '请输入验证码', trigger: 'blur' }
+    { required: true, message: t('login.placeholderCaptcha'), trigger: 'blur' }
   ]
 })
 
 const smsRules = reactive({
   account: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { validator: (rule, val) => PHONE_REGEX.test(val) || EMAIL_REGEX.test(val), message: '请输入正确的(手机号或邮箱)', trigger: 'blur' }
+    { required: true, message: t('login.placeholderPhone'), trigger: 'blur' },
+    { validator: (rule, val) => PHONE_REGEX.test(val) || EMAIL_REGEX.test(val), message: t('login.placeholderPhoneOrEmailTip'), trigger: 'blur' }
 
   ],
   verifyCode: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur' }
+    { required: true, message: t('login.placeholderCaptcha'), trigger: 'blur' },
+    // { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur' }
   ]
 })
 // 重置密码表单验证规则
 const resetRules = reactive({
   account: [
-    { required: true, message: '请输入手机号或邮箱', trigger: 'blur' },
-    { validator: (rule, val) => PHONE_REGEX.test(val) || EMAIL_REGEX.test(val), message: '请输入正确的(手机号或邮箱)', trigger: 'blur' }
+    { required: true, message: t('login.placeholderPhoneOrEmail'), trigger: 'blur' },
+    { validator: (rule, val) => PHONE_REGEX.test(val) || EMAIL_REGEX.test(val), message: t('login.placeholderPhoneOrEmailTip'), trigger: 'blur' }
   ],
   verifyCode: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur' }
+    { required: true, message: t('login.placeholderCaptcha'), trigger: 'blur' },
+    // { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur' }
   ],
   newPassword: [
-    { required: true, message: '请输入新密码', trigger: 'blur' },
-    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
+    { required: true, message: t('login.placeholderNewPassword'), trigger: 'blur' },
+    { min: 6, message: t('login.passwordMinLength'), trigger: 'blur' }
   ],
   confirmPassword: [
-    { required: true, message: '请确认新密码', trigger: 'blur' },
-    { validator: (rule, val) => val === resetForm.newPassword, message: '两次输入密码不一致', trigger: 'blur' }
+    { required: true, message: t('login.placeholderConfirmPassword'), trigger: 'blur' },
+    { validator: (rule, val) => val === resetForm.newPassword, message: t('login.passwordNotSame'), trigger: 'blur' }
   ]
 })
 

+ 6 - 1
src/locales/en.js

@@ -106,10 +106,11 @@ export default {
     modify:"Modify",
   },
   login: {
-    smsLogin: 'SMS Login',
+    smsLogin: 'Captcha Login',
     passwordLogin: 'Password Login',
     resetPassword: 'Reset Password',
     placeholderPhoneOrEmail: 'Please input phone or email',
+    placeholderAccount:"Please input account",
     placeholderCaptcha: 'Please input captcha',
     sendCaptcha: 'Send Captcha',
     otherLogin: 'Other Login',
@@ -118,6 +119,10 @@ export default {
     placeholderConfirmPassword: 'Please confirm new password',
     forgetPassword: 'Forget Password',
     addTags: 'New Tag',
+    passwordMinLength:"Password length must be at least 6 characters",
+    placeholderPhone:"Please input phone number",
+    passwordNotSame:"Passwords do not match",
+    placeholderPhoneOrEmailTip:"Please input right phone or email",
   },
   // 添加路由标题翻译
   route: {

+ 7 - 2
src/locales/zh-CN.js

@@ -111,10 +111,11 @@ export default {
     modify:"修改",
   },
   login: {
-    smsLogin: '短信登录',
-    passwordLogin: '账号密码登录',
+    smsLogin: '验证码登录',
+    passwordLogin: '密码登录',
     resetPassword: '重置密码',
     placeholderPhoneOrEmail: '请输入手机号或邮箱',
+    placeholderAccount:"请输入账号",
     placeholderCaptcha: '请输入验证码',
     sendCaptcha: '发送验证码',
     otherLogin: '其他登录方式',
@@ -122,6 +123,10 @@ export default {
     placeholderNewPassword: '请输入新密码',
     placeholderConfirmPassword: '请确认新密码',
     forgetPassword: '忘记密码',
+    passwordMinLength:"密码长度不能少于6个字符",
+    placeholderPhone:"请输入手机号",
+    passwordNotSame:"两次输入密码不一致",
+    placeholderPhoneOrEmailTip:"请输入正确的(手机号或邮箱)",
   },
   // 添加路由标题翻译
   route: {