Skip to content

P
poc-fe
Commit 5ca3f840 authored by tyyin lan's avatar tyyin lan
Browse files
Options

chore: 登录页多语言

parent bde09892
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 27 deletions
src/locales/langs/zh-cn.yaml
View file @ 5ca3f840
......@@ -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
View file @ 5ca3f840
......@@ -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
View file @ 5ca3f840
......@@ -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
View file @ 5ca3f840
......@@ -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: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment