From 54e8219111200cf0c61162452da22dd539fd5897 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Sun, 24 Sep 2023 01:05:48 +0800 Subject: [PATCH] feat: login i18n --- src/components/verification-code/Code.vue | 10 +- src/language/en.ts | 40 ++++- src/language/zh.ts | 40 ++++- src/views/kungalgamer/components/Header.vue | 1 + src/views/kungalgamer/components/NavBar.vue | 1 + src/views/login/Login.vue | 178 ++++++++++---------- src/views/login/components/Login.vue | 28 +-- src/views/login/components/Register.vue | 54 ++++-- src/views/login/components/registerForm.ts | 8 +- 9 files changed, 225 insertions(+), 135 deletions(-) diff --git a/src/components/verification-code/Code.vue b/src/components/verification-code/Code.vue index 6b2d98aa..f0118054 100644 --- a/src/components/verification-code/Code.vue +++ b/src/components/verification-code/Code.vue @@ -6,6 +6,10 @@ import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer' import { useKUNGalgameMessageStore } from '@/store/modules/message' const info = useKUNGalgameMessageStore() +// 导入 i18n +import { useI18n } from 'vue-i18n' +const { tm } = useI18n() + // 父组件让它发送验证码它再发送 const props = defineProps<{ email: string @@ -37,16 +41,14 @@ const sendCode = () => { // 发送验证码 useKUNGalgameUserStore().sendCode(props.email) - info.info( - '验证码已发送，您可以在邮箱中查看，注意查看垃圾邮件，如果未收到邮件，您可以在 30 秒后尝试重新发送邮箱验证码' - ) + info.info(tm('AlertInfo.code.code')) } } diff --git a/src/language/en.ts b/src/language/en.ts index f3caa674..615b9c27 100644 --- a/src/language/en.ts +++ b/src/language/en.ts @@ -169,11 +169,36 @@ export default { draft: 'Save Draft', }, login: { - loginTitle: 'Login', - forget: 'Forgot your password? Click here to send reset email', - loginUsername: 'Username or email', - loginPassword: 'Password', - capture: 'Click to proceed with the human verification process', + login: { + loginTitle: 'Login', + forget: 'Forgot your password? Click here to send reset email', + loginUsername: 'Username or email', + loginPassword: 'Password', + capture: 'Click to proceed with the human verification process', + }, + overlay: { + title: 'Welcome to KUN Visual Novel Registration', + world: `The World's`, + moe: 'Cutest', + forum: 'Galgame Forum', + login: 'Login', + home: 'Welcome Back', + kun: 'KUN Visual Novel Gives You', + hug: 'The Warmest Hug', + register: 'Register', + }, + register: { + title: 'Register', + name: 'username', + email: 'email', + password: 'password', + code: 'Email verification code', + send: 'Send code', + click: 'Clicking Register means you have agreed to our', + agreement: 'User Agreement', + and: 'and', + privacy: 'Privacy Policy', + }, }, // 非页面组件这里统一用大驼峰 ComponentAlert: { @@ -189,8 +214,6 @@ export default { }, login: { success: 'Login Successfully! Welcome to KUN Visual Novel ~ ', - emptyUsername: 'Username cannot be empty', - emptyPassword: 'Password cannot be empty', invalidUsername: 'Invalid username. Username should be 1 to 17 characters long and can include: Chinese characters, English letters, numbers, underscore, and tilde (~)', invalidPassword: @@ -206,5 +229,8 @@ export default { hint4: `Za~~~ko~♡ zako~♡ Just you wait, you'll regret it in the end`, answer: 'Answer', }, + code: { + code: `The verification code has been sent. You can check it in your email. Please check your spam folder. If you haven't received the email, you can try to resend the email verification code after 30 seconds.`, + }, }, } diff --git a/src/language/zh.ts b/src/language/zh.ts index bec5f703..5191326f 100644 --- a/src/language/zh.ts +++ b/src/language/zh.ts @@ -168,11 +168,36 @@ export default { draft: '保存草稿', }, login: { - loginTitle: '登录', - forget: '忘记密码? 点击发送重置邮件', - loginUsername: '用户名或邮箱', - loginPassword: '密码', - capture: '点击进行人机身份验证', + login: { + loginTitle: '登录', + forget: '忘记密码? 点击发送重置邮件', + loginUsername: '用户名或邮箱', + loginPassword: '密码', + capture: '点击进行人机身份验证', + }, + overlay: { + title: '欢迎注册 KUNgalgame', + world: `世界上最`, + moe: '萌', + forum: '的 Galgame 论坛', + login: '登录', + home: '欢迎回家', + kun: 'KUNgalgame 给你', + hug: '最温暖的拥抱', + register: '注册', + }, + register: { + title: '注册', + name: '用户名', + email: '邮箱', + password: '密码', + code: '邮箱验证码', + send: '发送验证码', + click: '点击注册表示您已经同意我们的', + agreement: '用户协议', + and: '和', + privacy: '隐私政策', + }, }, // 非页面组件这里统一用大驼峰 ComponentAlert: { @@ -188,8 +213,6 @@ export default { }, login: { login: '登陆成功!欢迎来到 鲲 Galgame ~ ', - emptyUsername: '用户名不可为空', - emptyPassword: '密码不可为空', invalidUsername: '非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线', invalidPassword: @@ -205,5 +228,8 @@ export default { hint4: '杂~~~鱼~♡杂鱼~♡你就看吧，最后害的还是你自己', answer: '答案', }, + code: { + code: '验证码已发送，您可以在邮箱中查看，注意查看垃圾邮件，如果未收到邮件，您可以在 30 秒后尝试重新发送邮箱验证码', + }, }, } diff --git a/src/views/kungalgamer/components/Header.vue b/src/views/kungalgamer/components/Header.vue index 031fa6cc..f80d5319 100644 --- a/src/views/kungalgamer/components/Header.vue +++ b/src/views/kungalgamer/components/Header.vue @@ -36,6 +36,7 @@ width: 100%; /* 头部的颜色 */ background-color: var(--kungalgame-trans-blue-0); + border-radius: 7px 7px 0 0; align-items: center; span:nth-child(1) { font-family: serif; diff --git a/src/views/kungalgamer/components/NavBar.vue b/src/views/kungalgamer/components/NavBar.vue index a918d6fd..5768d708 100644 --- a/src/views/kungalgamer/components/NavBar.vue +++ b/src/views/kungalgamer/components/NavBar.vue @@ -70,6 +70,7 @@ const navBar: nav[] = [ height: 100%; width: 120px; background-color: var(--kungalgame-trans-pink-0); + border-radius: 0 0 0 7px; border-right: 1px solid var(--kungalgame-blue-4); box-sizing: border-box; display: flex; diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue index 497ef520..2903d489 100644 --- a/src/views/login/Login.vue +++ b/src/views/login/Login.vue @@ -38,19 +38,28 @@ const handleClickRegister = () => {

- 欢迎注册 KUNgalgame

—— 世界上最萌的 - galgame 论坛 + {{ $tm('login.overlay.title') }}

—— + {{ $tm('login.overlay.world') }} + {{ $tm('login.overlay.moe') }} + {{ $tm('login.overlay.forum') }}


- +

- 欢迎回家
+ {{ $tm('login.overlay.home') }}
- KUNgalgame 给你最温暖的拥抱 +
+ {{ $tm('login.overlay.kun') }} +
+ {{ $tm('login.overlay.hug') }}

- +
@@ -98,44 +107,28 @@ const handleClickRegister = () => { width: 100%; } -.container.active .login { - transform: translateX(100%); -} - -.container.active .register { - animation: show 0.6s; - opacity: 1; - transform: translateX(100%); - z-index: 5; -} -@keyframes show { - 0%, - 49.99% { - opacity: 0; - z-index: 1; +.container.active { + .login { + transform: translateX(100%); } - - 50%, - 100% { + .register { + animation: show 0.6s; opacity: 1; + transform: translateX(100%); z-index: 5; } -} - -.container.active .container-overlay { - transform: translateX(-100%); -} - -.container.active .overlay { - transform: translateX(50%); -} - -.container.active .left { - transform: translateX(0); -} - -.container.active .right { - transform: translateX(20%); + .container-overlay { + transform: translateX(-100%); + } + .overlay { + transform: translateX(50%); + } + .left { + transform: translateX(0); + } + .right { + transform: translateX(20%); + } } .container-overlay { @@ -155,28 +148,29 @@ const handleClickRegister = () => { transform: translateX(0); transition: transform 0.6s ease-in-out; width: 200%; + + h2 { + margin-top: 150px; + font-size: medium; + color: var(--kungalgame-font-color-2); + } + + h2 span { + color: var(--kungalgame-red-4); + padding: 0 5px; + font-size: 20px; + } + + .left { + transform: translateX(-20%); + } + + .right { + right: 0; + transform: translateX(0); + } } -.btn { - position: absolute; - bottom: 7%; - border-radius: 50px; - background-color: var(--kungalgame-trans-white-5); - border: 1px solid var(--kungalgame-blue-4); - color: var(--kungalgame-blue-4); - cursor: pointer; - font-size: 0.9em; - letter-spacing: 0.1rem; - padding: 0.6rem 4rem; - text-transform: uppercase; - transition: transform 80ms ease-in; - overflow: hidden; - white-space: nowrap; -} -.btn:hover { - background-color: var(--kungalgame-blue-4); - color: var(--kungalgame-white); -} /* 交互页面的盒子 */ .panel { align-items: center; @@ -192,45 +186,47 @@ const handleClickRegister = () => { width: 50%; background-color: var(--kungalgame-trans-white-5); } + .btn { + width: 150px; + position: absolute; + border-radius: 50px; + cursor: pointer; + font-size: 15px; + letter-spacing: 2px; + padding: 7px 0px; + text-transform: uppercase; + transition: all 0.2s; + overflow: hidden; + white-space: nowrap; /* 红色按钮距离底部的距离 */ position: absolute; - bottom: 7%; + bottom: 10%; background-color: var(--kungalgame-red-0); border: 1px solid var(--kungalgame-red-4); color: var(--kungalgame-red-4); -} -.btn:hover { - background-color: var(--kungalgame-red-4); - color: var(--kungalgame-white); + + &:hover { + background-color: var(--kungalgame-red-4); + color: var(--kungalgame-white); + } + + &:active { + transform: scale(0.95); + } } -h2 { - margin-top: 150px; - font-size: medium; - color: var(--kungalgame-font-color-2); -} +@keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } -h2 span { - color: var(--kungalgame-red-4); - padding: 0 5px; - font-size: 20px; -} - -.left { - transform: translateX(-20%); -} - -.right { - right: 0; - transform: translateX(0); -} - -.btn:active { - transform: scale(0.95); -} - -.btn:focus { - outline: none; + 50%, + 100% { + opacity: 1; + z-index: 5; + } } diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue index 22af5d8e..7bee3077 100644 --- a/src/views/login/components/Login.vue +++ b/src/views/login/components/Login.vue @@ -4,6 +4,8 @@ import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer' import { useRouter } from 'vue-router' // 使用全局通知 import { useKUNGalgameMessageStore } from '@/store/modules/message' +// 全局消息组件（顶部） +import message from '@/components/alert/Message' // 导入人机验证组件 const Capture = defineAsyncComponent( @@ -38,7 +40,6 @@ const handleVerify = (result: boolean) => { if (result) { // 处理人机校验完成后的逻辑 isShowValidate.value = false - info.info(tm('AlertInfo.capture.success')) isCaptureComplete.value = true } } @@ -47,11 +48,11 @@ const isEmptyInput = (): boolean => { // 如果输入的字段为空 if (!loginForm.name.trim()) { // 提示用户输入的名字为空 - info.info(tm('AlertInfo.login.emptyUsername')) + message('Username cannot be empty', '用户名不可为空', 'warn') return false } else if (!loginForm.password.trim()) { // 提示用户输入的密码为空 - info.info(tm('AlertInfo.login.emptyPassword')) + message('Password cannot be empty', '密码不可为空', 'warn') return false } else { return true @@ -86,7 +87,11 @@ const handleLogin = () => { } // 未完成人机身份验证提示信息，直接返回 if (!isCaptureComplete.value) { - info.info(tm('AlertInfo.capture.click')) + message( + 'Please click above to complete the human verification', + '请点击上方完成人机身份验证', + 'warn' + ) return } // 所有的验证都通过了再向后端发送请求 @@ -110,29 +115,29 @@ const handleLogin = () => { :isShowValidate="isShowValidate" />
-

{{ $tm('login.loginTitle') }}

+

{{ $tm('login.login.loginTitle') }}

- {{ $tm('login.forget') }} + {{ $tm('login.login.forget') }} {{ - $tm('login.capture') + $tm('login.login.capture') }}
@@ -199,6 +204,7 @@ const handleLogin = () => { } .btn { + width: 150px; position: absolute; bottom: 10%; border-radius: 50px; @@ -208,7 +214,7 @@ const handleLogin = () => { cursor: pointer; font-size: 15px; letter-spacing: 2px; - padding: 7px 50px; + padding: 7px 0px; text-transform: uppercase; transition: all 0.2s; overflow: hidden; diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue index dfa6e6e2..3268dbd9 100644 --- a/src/views/login/components/Register.vue +++ b/src/views/login/components/Register.vue @@ -1,9 +1,8 @@ -