chore: 登录页多语言

src/locales/langs/zh-cn.yaml

@@ -68,9 +68,22 @@ common_module:
 
 login_module:
   app_welcome_words: '欢迎使用萃想POC'
+  please_enter_your_username: '请输入用户名'
+  please_enter_your_password: '请输入密码'
+  please_enter_your_cell_phone_number: '请输入手机号'
+  please_enter_your_correct_cell_phone_number: '请输入正确手机号'
+  please_enter_the_verification_code: '请输入验证码'
+  please_enter_your_email_address: '请输入邮箱地址'
+  please_enter_the_correct_email_address: '请输入正确邮箱地址'
+  mainland_china: '中国大陆'
+  hong_kong_china: '中国香港'
+  login_success: '登录成功'
+  successful: '获取成功'
+  get_verification_code: '获取验证码'
+  other_login_methods: '其他登录方式'
 
 home_module:
-  agent_welcome_message: 'Hi, 歡迎使用SuperLink'
+  agent_welcome_message: 'Hi, 欢迎使用SuperLink'
   agent_description: '在这里，你可以体验多个平台的模型和专属的智能体'
 
 router_title_module:

src/locales/langs/zh-hk.yaml

@@ -68,6 +68,19 @@ common_module:
 
 login_module:
   app_welcome_words: '歡迎使用萃想POC'
+  please_enter_your_username: '請輸入用戶名'
+  please_enter_your_password: '請輸入密碼'
+  please_enter_your_cell_phone_number: '請輸入手機號'
+  please_enter_your_correct_cell_phone_number: '請輸入正確手機號'
+  please_enter_the_verification_code: '請輸入驗証碼'
+  please_enter_your_email_address: '請輸入郵箱地址'
+  please_enter_the_correct_email_address: '請輸入正確郵箱地址'
+  mainland_china: '中國大陸'
+  hong_kong_china: '中國香港'
+  login_success: '登錄成功'
+  successful: '獲取成功'
+  get_verification_code: '獲取驗証碼'
+  other_login_methods: '其他登錄方式'
 
 home_module:
   agent_welcome_message: 'Hi, 歡迎使用SuperLink'

src/views/login/login.vue

@@ -10,6 +10,7 @@ import SparkMD5 from 'spark-md5'
 import { useUserStore } from '@/store/modules/user'
 import type { UserInfo } from '@/store/types/user'
 import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 enum StorageKeyEnum {
   smsCountdownTime = 'SMS_COUNTDOWN_TIME',
@@ -26,6 +27,7 @@ interface LoginPayload {
 const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 
 const passwordLoginFormRef = useTemplateRef<FormInst>('passwordLoginFormRef')
 const smsLoginFormRef = useTemplateRef<FormInst>('smsLoginFormRef')
@@ -51,8 +53,8 @@ const emailLoginForm = ref({
 })
 
 const passwordLoginFormRules = shallowReadonly<FormRules>({
-  account: { required: true, message: '請輸入用戶名', trigger: 'blur' },
-  password: { required: true, message: '請輸入密碼', trigger: 'blur' },
+  account: { required: true, message: t('login_module.please_enter_your_username'), trigger: 'blur' },
+  password: { required: true, message: t('login_module.please_enter_your_password'), trigger: 'blur' },
 })
 const smsLoginFormRules = shallowReadonly<FormRules>({
   phoneNumber: {
@@ -60,15 +62,15 @@ const smsLoginFormRules = shallowReadonly<FormRules>({
     required: true,
     validator: (_rule: FormItemRule, value: string) => {
       if (!value) {
-        return new Error('請輸入手機號')
+        return new Error(t('login_module.please_enter_your_cell_phone_number'))
       } else if (!isMobilePhone(value, ['zh-CN', 'zh-HK'])) {
-        return new Error('請輸入正確手機號')
+        return new Error(t('login_module.please_enter_your_correct_cell_phone_number'))
       }
 
       return
     },
   },
-  code: { required: true, message: '請輸入驗証碼' },
+  code: { required: true, message: t('login_module.please_enter_the_verification_code') },
 })
 const emailLoginFormRules = shallowReadonly<FormRules>({
   email: {
@@ -76,24 +78,24 @@ const emailLoginFormRules = shallowReadonly<FormRules>({
     required: true,
     validator: (_rule: FormItemRule, value: string) => {
       if (!value) {
-        return new Error('請輸入郵箱地址')
+        return new Error(t('login_module.please_enter_your_email_address'))
       } else if (!isEmail(value)) {
-        return new Error('請輸入正確郵箱地址')
+        return new Error(t('login_module.please_enter_the_correct_email_address'))
       }
 
       return
     },
   },
-  code: { required: true, message: '請輸入驗証碼' },
+  code: { required: true, message: t('login_module.please_enter_the_verification_code') },
 })
 
 const phoneNumberAreaOptions = shallowReadonly([
   {
-    label: '+86 中國大陸',
+    label: `+86 ${t('login_module.mainland_china')}`,
     value: '+86',
   },
   {
-    label: '+852 中國香港',
+    label: `+852 ${t('login_module.hong_kong_china')}`,
     value: '+852',
   },
 ])
@@ -232,7 +234,7 @@ function handleLoginSubmit(method: LoginMethod) {
         const redirectUrl = decodeURIComponent((route.query.redirect as string) || '')
         router.replace({ path: redirectUrl ? redirectUrl : '/' })
 
-        window.$message.success('登錄成功')
+        window.$message.success(t('login_module.login_success'))
 
         ss.remove(StorageKeyEnum.smsCountdownTime)
         ss.remove(StorageKeyEnum.emailCountdownTime)
@@ -264,7 +266,7 @@ function handleSMSCodeGain() {
       fetchSMSCode(getInputPhoneNumber()).then((res) => {
         if (res.code !== 0) return ''
 
-        window.$message.success('獲取成功')
+        window.$message.success(t('login_module.successful'))
       })
     },
     (rule) => {
@@ -286,7 +288,7 @@ function handleEmailCodeGain() {
       fetchEmailCode(encodeURIComponent(emailLoginForm.value.email)).then((res) => {
         if (res.code !== 0) return ''
 
-        window.$message.success('獲取成功')
+        window.$message.success(t('login_module.successful'))
       })
     },
     (rule) => {
@@ -309,7 +311,7 @@ function handleEmailCodeGain() {
         style="transform-style: preserve-3d"
         @animationend="onCardReserveAnimationEnd"
       >
-        <h1 class="font-600 py-[34px] text-center text-[22px]">歡迎使用萃想POC</h1>
+        <h1 class="font-600 py-[34px] text-center text-[22px]">{{ t('login_module.app_welcome_words') }}</h1>
 
         <div>
           <!-- 密码登录 -->
@@ -326,7 +328,7 @@ function handleEmailCodeGain() {
                 v-model:value="passwordLoginForm.account"
                 :allow-input="noSideSpace"
                 :maxlength="11"
-                placeholder="請輸入用戶名"
+                :placeholder="t('login_module.please_enter_your_username')"
               >
                 <template #prefix>
                   <div class="mr-[6px]">
@@ -342,7 +344,7 @@ function handleEmailCodeGain() {
                 :allow-input="noSideSpace"
                 type="password"
                 show-password-on="click"
-                placeholder="請輸入密碼"
+                :placeholder="t('login_module.please_enter_your_password')"
               >
                 <template #prefix>
                   <div class="mr-[6px]">
@@ -360,7 +362,7 @@ function handleEmailCodeGain() {
                 :disabled="!passwordLoginForm.account || !passwordLoginForm.password"
                 @click="handleLoginSubmit('password')"
               >
-                登錄
+                {{ t('common_module.login') }}
               </n-button>
             </n-form-item>
           </n-form>
@@ -379,7 +381,7 @@ function handleEmailCodeGain() {
                 v-model:value.trim="smsLoginForm.phoneNumber"
                 :allow-input="onlyAllowNumber"
                 :maxlength="currentPhoneNumberArea === '+852' ? 8 : 11"
-                placeholder="請輸入手機號"
+                :placeholder="t('login_module.please_enter_your_cell_phone_number')"
               >
                 <template #prefix>
                   <div class="flex items-center">
@@ -406,7 +408,7 @@ function handleEmailCodeGain() {
                 :allow-input="onlyAllowNumber"
                 show-password-on="click"
                 :maxlength="6"
-                placeholder="請輸入驗証碼"
+                :placeholder="t('login_module.please_enter_the_verification_code')"
               >
                 <template #suffix>
                   <div class="flex items-center">
@@ -420,7 +422,7 @@ function handleEmailCodeGain() {
                         size="small"
                         @click="handleSMSCodeGain"
                       >
-                        獲取驗証碼
+                        {{ t('login_module.get_verification_code') }}
                       </n-button>
 
                       <div v-show="isShowCountdown" class="inline-block w-[50px] text-center">
@@ -446,7 +448,7 @@ function handleEmailCodeGain() {
                 :disabled="!smsLoginForm.phoneNumber || !smsLoginForm.code"
                 @click="handleLoginSubmit('sms')"
               >
-                登錄
+                {{ t('common_module.login') }}
               </n-button>
             </n-form-item>
           </n-form>
@@ -461,7 +463,11 @@ function handleEmailCodeGain() {
             :rules="emailLoginFormRules"
           >
             <n-form-item path="email">
-              <n-input v-model:value="emailLoginForm.email" :allow-input="noSideSpace" placeholder="請輸入郵箱地址">
+              <n-input
+                v-model:value="emailLoginForm.email"
+                :allow-input="noSideSpace"
+                :placeholder="t('login_module.please_enter_your_email_address')"
+              >
                 <template #prefix>
                   <div class="mr-[6px]">
                     <Mail theme="outline" size="16" fill="#868686" :stroke-width="3" />
@@ -475,7 +481,7 @@ function handleEmailCodeGain() {
                 :allow-input="onlyAllowNumber"
                 show-password-on="click"
                 :maxlength="6"
-                placeholder="請輸入驗証碼"
+                :placeholder="t('login_module.please_enter_the_verification_code')"
               >
                 <template #suffix>
                   <div class="flex items-center">
@@ -489,7 +495,7 @@ function handleEmailCodeGain() {
                         size="small"
                         @click="handleEmailCodeGain"
                       >
-                        獲取驗証碼
+                        {{ t('login_module.get_verification_code') }}
                       </n-button>
 
                       <div v-show="isShowCountdown" class="inline-block w-[50px] text-center">
@@ -515,7 +521,7 @@ function handleEmailCodeGain() {
                 :disabled="!emailLoginForm.email || !emailLoginForm.code"
                 @click="handleLoginSubmit('email')"
               >
-                登錄
+                {{ t('common_module.login') }}
               </n-button>
             </n-form-item>
           </n-form>
@@ -523,7 +529,9 @@ function handleEmailCodeGain() {
 
         <div class="absolute bottom-[22px] left-0 w-full">
           <div class="mb-[32px]">
-            <div class="mb-[12px] text-center text-[12px] text-[#999999]">其他登錄方式</div>
+            <div class="mb-[12px] text-center text-[12px] text-[#999999]">
+              {{ t('login_module.other_login_methods') }}
+            </div>
             <div class="flex items-center justify-center">
               <button
                 v-show="currentLoginMethod !== 'email'"

types/locales.d.ts

@@ -73,6 +73,18 @@ declare namespace I18n {
 
     login_module: {
       app_welcome_words: string
+      please_enter_your_username: string
+      please_enter_your_password: string
+      please_enter_your_cell_phone_number: string
+      please_enter_your_correct_cell_phone_number: string
+      please_enter_the_verification_code: string
+      please_enter_your_email_address: string
+      please_enter_the_correct_email_address: string
+      mainland_china: string
+      hong_kong_china: string
+      login_success: string
+      get_verification_code: string
+      other_login_methods: string
     }
 
     home_module: {