From c6704627fce6ad829a19c7b25095324fbcd9df4a Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Fri, 16 Jun 2023 08:50:22 +0800 Subject: [PATCH] complete login i18n --- src/components/capture/Capture.vue | 18 ++++++----- src/language/en.ts | 39 ++++++++++++++++++------ src/language/zh.ts | 39 ++++++++++++++++++------ src/views/login/components/Login.vue | 45 ++++++++++++++-------------- 4 files changed, 93 insertions(+), 48 deletions(-) diff --git a/src/components/capture/Capture.vue b/src/components/capture/Capture.vue index cdbcb367..f2a22cdc 100644 --- a/src/components/capture/Capture.vue +++ b/src/components/capture/Capture.vue @@ -15,15 +15,16 @@
-
验证通过
-
- 点击错误，请重新点击 +
+ {{ $t('AlertInfo.capture.error') }}
- 请按顺序点击以下字符: + {{ $t('AlertInfo.capture.order') }} {{ characters.map((char) => char.value).join(' ') }}
-
点击刷新
+
+ {{ $t('AlertInfo.capture.refresh') }} +
@@ -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 => { return new Promise((resolve, reject) => { clickedCharacters.value += char.value @@ -110,6 +113,7 @@ const handleCharacterClick = (char: Character): Promise => { }) } +// 重置字符，防止位置重合和 . function resetCharacters() { characters.value = generateRandomCharacters() clickedCharacters.value = '' diff --git a/src/language/en.ts b/src/language/en.ts index 62fd7d0d..ca70f18e 100644 --- a/src/language/en.ts +++ b/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: { - 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.', - text: 'abcdefghijklmnopqrstuvwxyz', + edit: { + publish: 'Confirm to publish?', + publishSuccess: 'Publish Successfully', + publishCancel: 'Cancel Publish', + draft: 'The draft has been saved successfully!', + }, + 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', + }, }, } diff --git a/src/language/zh.ts b/src/language/zh.ts index b4c275c6..dbf86888 100644 --- a/src/language/zh.ts +++ b/src/language/zh.ts @@ -118,20 +118,41 @@ export default { publish: '确认发布', draft: '保存草稿', }, + login: { + loginTitle: '登录', + forget: '忘记密码? 点击发送重置邮件', + loginUsername: '用户名或邮箱', + loginPassword: '密码', + capture: '点击进行人机身份验证', + }, // 非页面组件这里统一用大驼峰 ComponentAlert: { confirm: '确定', cancel: '取消', }, AlertInfo: { - publish: '确认发布吗？', - publishSuccess: '发布成功', - publishCancel: '取消发布', - draft: '草稿已经保存成功！', - login: '登陆成功!欢迎来到 鲲 Galgame ~ ', - }, - CaptureInfo: { - capture: '人机身份验证通过', - text: '闭月羞花出水芙蓉亭亭玉立小只可爱软萌鲲', + edit: { + publish: '确认发布吗？', + publishSuccess: '发布成功', + publishCancel: '取消发布', + draft: '草稿已经保存成功！', + }, + login: { + login: '登陆成功!欢迎来到 鲲 Galgame ~ ', + emptyUsername: '用户名不可为空', + emptyPassword: '密码不可为空', + invalidPassword: + '非法的密码格式，密码的长度为 6 到 17 位，必须包含至少一个英文字符和一个数字，可以选择性的包含 \\w!@#$%^&*()-+= 等特殊字符', + invalidUsername: + '非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线', + }, + capture: { + click: '请点击上方完成人机身份验证', + success: '人机身份验证通过 ~ ', + text: '闭月羞花出水芙蓉亭亭玉立小只可爱软萌鲲', + order: '请按顺序点击以下字符', + refresh: '刷新', + error: '点击错误，请重新点击', + }, }, } diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue index 663d6136..148c1680 100644 --- a/src/views/login/components/Login.vue +++ b/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 = () => { @@ -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); }