complete login i18n

src/components/capture/Capture.vue

@@ -15,15 +15,16 @@
             </div>
           </div>
           <div class="msg">
-            <div v-if="isVerified" class="pass">验证通过</div>
-            <div v-else-if="errorCount > 0" class="error">
-              点击错误，请重新点击
+            <div v-if="errorCount > 0" class="error">
+              {{ $t('AlertInfo.capture.error') }}
             </div>
             <div class="hint" v-if="!isVerified">
-              请按顺序点击以下字符:
+              {{ $t('AlertInfo.capture.order') }}
               {{ characters.map((char) => char.value).join(' ') }}
             </div>
-            <div class="refresh" @click="resetCharacters">点击刷新</div>
+            <div class="refresh" @click="resetCharacters">
+              {{ $t('AlertInfo.capture.refresh') }}
+            </div>
           </div>
         </div>
       </div>
@@ -55,9 +56,9 @@ interface Character {
 
 emits('validate', false)
 
-// 获得随机 26 个字符
+// 获得随机字符
 function generateRandomCharacters(): Character[] {
-  const chars = t('AlertInfo.captureText')
+  const chars = t('AlertInfo.capture.text')
   const randomChars: Character[] = []
 
   // 创建一个 Set 集合用于去重
@@ -84,6 +85,7 @@ function generateRandomCharacters(): Character[] {
   return randomChars
 }
 
+// 获取字符的随机位置
 function getRandomCoordinate(): number {
   const minCoordinate = 50
   const maxCoordinate = 150
@@ -93,6 +95,7 @@ function getRandomCoordinate(): number {
   )
 }
 
+// 处理字符被点击
 const handleCharacterClick = (char: Character): Promise<boolean> => {
   return new Promise<boolean>((resolve, reject) => {
     clickedCharacters.value += char.value
@@ -110,6 +113,7 @@ const handleCharacterClick = (char: Character): Promise<boolean> => {
   })
 }
 
+// 重置字符，防止位置重合和 .
 function resetCharacters() {
   characters.value = generateRandomCharacters()
   clickedCharacters.value = ''

src/language/en.ts

@@ -119,20 +119,41 @@ export default {
     publish: 'Confirm Publish',
     draft: 'Save Draft',
   },
+  login: {
+    loginTitle: 'Login',
+    forget: 'Forgot your password? Click here to send a password reset email',
+    loginUsername: 'Username or email',
+    loginPassword: 'Password',
+    capture: 'Click to proceed with the human verification process',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: 'OK',
     cancel: 'Cancel',
   },
   AlertInfo: {
+    edit: {
       publish: 'Confirm to publish?',
       publishSuccess: 'Publish Successfully',
       publishCancel: 'Cancel Publish',
       draft: 'The draft has been saved successfully!',
-    login: 'Login Successfully! Welcome to KUN Visual Novel ~ ',
     },
-  CaptureInfo: {
-    capture: 'Human-machine identity verification successful.',
+    login: {
+      success: 'Login Successfully! Welcome to KUN Visual Novel ~ ',
+      emptyUsername: 'Username cannot be empty',
+      emptyPassword: 'Password cannot be empty',
+      invalidPassword:
+        'Invalid password format. Password must be 6 to 17 characters long and must include at least one letter and one number. It can optionally include special characters such as \\w!@#$%^&()-+=',
+      invalidUsername:
+        'Invalid username. Username should be 1 to 17 characters long and can include: Chinese characters, English letters, numbers, underscore, and tilde (~)',
+    },
+    capture: {
+      click: 'Please click above to complete the human verification',
+      success: 'Human-machine identity verification successful',
       text: 'abcdefghijklmnopqrstuvwxyz',
+      order: 'Please click the characters in order',
+      refresh: 'Refresh',
+      error: 'Click error, please click again',
+    },
   },
 }

src/language/zh.ts

@@ -118,20 +118,41 @@ export default {
     publish: '确认发布',
     draft: '保存草稿',
   },
+  login: {
+    loginTitle: '登录',
+    forget: '忘记密码? 点击发送重置邮件',
+    loginUsername: '用户名或邮箱',
+    loginPassword: '密码',
+    capture: '点击进行人机身份验证',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: '确定',
     cancel: '取消',
   },
   AlertInfo: {
+    edit: {
       publish: '确认发布吗？',
       publishSuccess: '发布成功',
       publishCancel: '取消发布',
       draft: '草稿已经保存成功！',
-    login: '登陆成功!欢迎来到 鲲 Galgame ~ ',
     },
-  CaptureInfo: {
-    capture: '人机身份验证通过',
+    login: {
+      login: '登陆成功!欢迎来到 鲲 Galgame ~ ',
+      emptyUsername: '用户名不可为空',
+      emptyPassword: '密码不可为空',
+      invalidPassword:
+        '非法的密码格式，密码的长度为 6 到 17 位，必须包含至少一个英文字符和一个数字，可以选择性的包含 \\w!@#$%^&*()-+= 等特殊字符',
+      invalidUsername:
+        '非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线',
+    },
+    capture: {
+      click: '请点击上方完成人机身份验证',
+      success: '人机身份验证通过 ~ ',
       text: '闭月羞花出水芙蓉亭亭玉立小只可爱软萌鲲',
+      order: '请按顺序点击以下字符',
+      refresh: '刷新',
+      error: '点击错误，请重新点击',
+    },
   },
 }

src/views/login/components/Login.vue

@@ -11,6 +11,10 @@ import Capture from '@/components/capture/Capture.vue'
 // 导入验证表单是否合法的函数
 import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
 
+// 导入 i18n
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 // 定义人机验证的标志
 const isShowValidate = ref(false)
 // 定义人机验证是否完成的标志
@@ -32,7 +36,7 @@ const handleVerify = (result: boolean) => {
   if (result) {
     // 处理人机校验完成后的逻辑
     isShowValidate.value = false
-    info.info('CaptureInfo.capture')
+    info.info(t('AlertInfo.capture.success'))
     isCaptureComplete.value = true
   }
 }
@@ -41,11 +45,11 @@ const isEmptyInput = () => {
   // 如果输入的字段为空
   if (!loginForm.username.trim()) {
     // 提示用户输入的名字为空
-    info.info('用户名不可为空')
+    info.info(t('AlertInfo.login.emptyUsername'))
     return false
   } else if (!loginForm.password.trim()) {
     // 提示用户输入的密码为空
-    info.info('密码不可为空')
+    info.info(t('AlertInfo.login.emptyPassword'))
     return false
   } else {
     return true
@@ -64,16 +68,12 @@ const isValidInput = (): boolean => {
       return true
     } else {
       // 如果密码非法的话返回非法密码
-      info.info(
-        `非法的密码格式，密码的长度为 6 到 17 位，必须包含至少一个英文字符和一个数字，可以选择性的包含 \\w!@#$%^&*()-+= 等特殊字符`
-      )
+      info.info(t('AlertInfo.login.invalidPassword'))
       return false
     }
   } else {
     // 输入的用户名或邮箱错误时的逻辑
-    info.info(
-      `非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线 `
-    )
+    info.info(t('AlertInfo.login.invalidUsername'))
     return false
   }
 }
@@ -84,7 +84,7 @@ const handleLogin = () => {
   if (isValidInput()) {
     // 未完成人机身份验证提示信息，直接返回
     if (!isCaptureComplete.value) {
-      info.info('请点击上方完成人机身份验证')
+      info.info(t('AlertInfo.capture.click'))
       return
     }
     // 所有的验证都通过了再向后端发送请求
@@ -92,7 +92,7 @@ const handleLogin = () => {
       // 如果请求成功跳转到主页
       if (res.success) {
         router.push('/')
-        info.info('AlertInfo.login')
+        info.info(t('AlertInfo.login.success'))
       }
     })
   }
@@ -104,24 +104,26 @@ const handleLogin = () => {
   <div class="login">
     <Capture @validate="handleVerify" :isShowValidate="isShowValidate" />
     <form class="form" @submit.prevent="handleLogin">
-      <h2 class="title">登陆</h2>
+      <h2 class="title">{{ $t('login.loginTitle') }}</h2>
       <input
         v-model="loginForm.username"
         type="text"
-        placeholder="用户名或邮箱"
+        :placeholder="$t('login.loginUsername')"
         class="input"
       />
       <input
         v-model="loginForm.password"
         type="password"
-        placeholder="密码"
+        :placeholder="$t('login.loginPassword')"
         class="input"
       />
-      <span class="forget">忘记密码? 点击发送重置邮件</span>
-      <span @click="isShowValidate = true" class="capture"
-        >点击进行人机身份验证</span
-      >
-      <button class="btn" type="submit">登陆</button>
+      <span class="forget">{{ $t('login.forget') }}</span>
+      <span @click="isShowValidate = true" class="capture">{{
+        $t('login.capture')
+      }}</span>
+      <button class="btn" type="submit">
+        {{ $t('login.loginTitle') }}
+      </button>
     </form>
   </div>
 </template>
@@ -188,6 +190,7 @@ const handleLogin = () => {
 
 .btn {
   position: absolute;
+  margin-top: 1.5rem;
   bottom: 7%;
   border-radius: 50px;
   background-color: var(--kungalgame-trans-white-5);
@@ -207,10 +210,6 @@ const handleLogin = () => {
   color: var(--kungalgame-white);
 }
 
-.form > .btn {
-  margin-top: 1.5rem;
-}
-
 .btn:active {
   transform: scale(0.95);
 }