feat: 设置页i18n
This commit is contained in:
@@ -40,4 +40,95 @@ export default {
|
||||
sendCodeError: 'Send code error',
|
||||
retrievePassword: 'Retrieve password'
|
||||
},
|
||||
Settings: {
|
||||
title: 'Settings',
|
||||
slogan: 'Manage your account settings and preferences',
|
||||
profile: {
|
||||
title: 'Profile',
|
||||
description: 'Update your display name, avatar, social links and account security.',
|
||||
firstName: 'FIRST NAME',
|
||||
lastName: 'LAST NAME',
|
||||
firstNamePlaceholder: 'First Name',
|
||||
lastNamePlaceholder: 'Last Name',
|
||||
username: 'USERNAME',
|
||||
usernamePlaceholder: 'Username',
|
||||
usernameTip: 'Your public username on Stylish Parade.',
|
||||
role: 'ROLE',
|
||||
roleTip: 'Select up to 2 labels that suit you.',
|
||||
socialLinks: 'SOCIAL LINKS',
|
||||
linkNumber: 'Link {index}'
|
||||
},
|
||||
security: {
|
||||
title: 'Security',
|
||||
description: 'Manage your login email and password.',
|
||||
email: 'EMAIL',
|
||||
newEmail: 'NEW EMAIL ADDRESS',
|
||||
newEmailPlaceholder: 'Enter new email',
|
||||
verify: 'Verify',
|
||||
verified: 'Verified',
|
||||
verifiedTip: 'Your new email has been verified and is ready to save.',
|
||||
password: 'PASSWORD',
|
||||
newPassword: 'NEW PASSWORD',
|
||||
newPasswordPlaceholder: 'Enter new password',
|
||||
passwordTip: 'You must satisfy ALL password conditions to register.',
|
||||
currentPassword: 'CURRENT PASSWORD',
|
||||
currentPasswordPlaceholder: 'Confirm with your password'
|
||||
},
|
||||
region: {
|
||||
title: 'Language & Region',
|
||||
description: 'Set your preferred language, region and currency display.',
|
||||
displayLanguage: 'DISPLAY LANGUAGE',
|
||||
selectLanguage: 'Select language',
|
||||
region: 'REGION',
|
||||
selectRegion: 'Select region'
|
||||
},
|
||||
buttons: {
|
||||
cancel: 'CANCEL',
|
||||
discard: 'DISCARD',
|
||||
edit: 'EDIT',
|
||||
saveChange: 'SAVE CHANGE',
|
||||
saving: 'SAVING...'
|
||||
},
|
||||
dialog: {
|
||||
title: 'Check your new email',
|
||||
subtitle: 'Enter the 6-digit code sent to',
|
||||
submit: 'Submit',
|
||||
resendCode: 'Resend Code',
|
||||
resendCodeIn: 'Resend Code in {time}'
|
||||
},
|
||||
messages: {
|
||||
enterNewEmailFirst: 'Please enter your new email address first',
|
||||
invalidEmail: 'Please enter a valid email address',
|
||||
sameEmail: 'Please enter a different email address',
|
||||
alreadyVerified: 'This email has already been verified',
|
||||
verificationCodeSent: 'Verification code sent',
|
||||
enterVerificationCode: 'Please enter the 6-digit verification code',
|
||||
verificationCompleted: 'Email verification completed',
|
||||
verifyEmailBeforeSave: 'Please verify your new email before saving',
|
||||
settingsUpdated: 'Settings updated'
|
||||
},
|
||||
roles: {
|
||||
fashionEnthusiast: 'Fashion Enthusiast',
|
||||
contentCreator: 'Content Creator',
|
||||
student: 'Student',
|
||||
retailBuyer: 'Retail / Buyer',
|
||||
fashionDesigner: 'Fashion Designer',
|
||||
brandBusiness: 'Brand / Business',
|
||||
prCommunications: 'PR & Communications',
|
||||
stylist: 'Stylist',
|
||||
graphicDesigner: 'Graphic Designer',
|
||||
artist3d: '3D Artist',
|
||||
other: 'Other'
|
||||
},
|
||||
languages: {
|
||||
english: 'English',
|
||||
chinese: 'Chinese',
|
||||
},
|
||||
regions: {
|
||||
hongKongSar: 'Hong Kong SAR',
|
||||
mainlandChina: 'Mainland China',
|
||||
singapore: 'Singapore',
|
||||
unitedKingdom: 'United Kingdom'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,4 +41,95 @@ export default {
|
||||
sendCodeError: '发送验证码失败',
|
||||
retrievePassword: '找回密码'
|
||||
},
|
||||
Settings: {
|
||||
title: '设置',
|
||||
slogan: '管理你的账户设置和偏好',
|
||||
profile: {
|
||||
title: '个人资料',
|
||||
description: '更新你的显示名称、头像、社交链接和账户安全信息。',
|
||||
firstName: '名字',
|
||||
lastName: '姓氏',
|
||||
firstNamePlaceholder: '请输入名字',
|
||||
lastNamePlaceholder: '请输入姓氏',
|
||||
username: '用户名',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
usernameTip: '这是你在 Stylish Parade 上公开显示的用户名。',
|
||||
role: '身份标签',
|
||||
roleTip: '最多选择 2 个符合你的标签。',
|
||||
socialLinks: '社交链接',
|
||||
linkNumber: '链接 {index}'
|
||||
},
|
||||
security: {
|
||||
title: '安全',
|
||||
description: '管理你的登录邮箱和密码。',
|
||||
email: '邮箱',
|
||||
newEmail: '新邮箱地址',
|
||||
newEmailPlaceholder: '请输入新邮箱',
|
||||
verify: '验证',
|
||||
verified: '已验证',
|
||||
verifiedTip: '你的新邮箱已验证成功，可以保存。',
|
||||
password: '密码',
|
||||
newPassword: '新密码',
|
||||
newPasswordPlaceholder: '请输入新密码',
|
||||
passwordTip: '你必须满足所有密码条件才能注册。',
|
||||
currentPassword: '当前密码',
|
||||
currentPasswordPlaceholder: '请输入当前密码确认'
|
||||
},
|
||||
region: {
|
||||
title: '语言与地区',
|
||||
description: '设置你偏好的语言、地区和货币显示方式。',
|
||||
displayLanguage: '显示语言',
|
||||
selectLanguage: '请选择语言',
|
||||
region: '地区',
|
||||
selectRegion: '请选择地区'
|
||||
},
|
||||
buttons: {
|
||||
cancel: '取消',
|
||||
discard: '放弃',
|
||||
edit: '编辑',
|
||||
saveChange: '保存更改',
|
||||
saving: '保存中...'
|
||||
},
|
||||
dialog: {
|
||||
title: '检查你的新邮箱',
|
||||
subtitle: '请输入发送到以下邮箱的 6 位验证码',
|
||||
submit: '提交',
|
||||
resendCode: '重新发送验证码',
|
||||
resendCodeIn: '{time} 后可重新发送验证码'
|
||||
},
|
||||
messages: {
|
||||
enterNewEmailFirst: '请先输入新的邮箱地址',
|
||||
invalidEmail: '请输入有效的邮箱地址',
|
||||
sameEmail: '请输入不同的邮箱地址',
|
||||
alreadyVerified: '该邮箱已完成验证',
|
||||
verificationCodeSent: '验证码已发送',
|
||||
enterVerificationCode: '请输入 6 位验证码',
|
||||
verificationCompleted: '邮箱验证完成',
|
||||
verifyEmailBeforeSave: '请先完成新邮箱验证再保存',
|
||||
settingsUpdated: '设置已更新'
|
||||
},
|
||||
roles: {
|
||||
fashionEnthusiast: '时尚爱好者',
|
||||
contentCreator: '内容创作者',
|
||||
student: '学生',
|
||||
retailBuyer: '零售 / 买手',
|
||||
fashionDesigner: '服装设计师',
|
||||
brandBusiness: '品牌 / 商业',
|
||||
prCommunications: '公关与传播',
|
||||
stylist: '造型师',
|
||||
graphicDesigner: '平面设计师',
|
||||
artist3d: '3D 艺术家',
|
||||
other: '其他'
|
||||
},
|
||||
languages: {
|
||||
english: '英文',
|
||||
chinese: '中文',
|
||||
},
|
||||
regions: {
|
||||
hongKongSar: '中国香港特别行政区',
|
||||
mainlandChina: '中国大陆',
|
||||
singapore: '新加坡',
|
||||
unitedKingdom: '英国'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<SvgIcon name="close" size="24" />
|
||||
</button>
|
||||
|
||||
<div class="verification-dialog__title">Check your new email</div>
|
||||
<div class="verification-dialog__subtitle">Enter the 6-digit code sent to</div>
|
||||
<div class="verification-dialog__title">{{ t('Settings.dialog.title') }}</div>
|
||||
<div class="verification-dialog__subtitle">{{ t('Settings.dialog.subtitle') }}</div>
|
||||
<div class="verification-dialog__email">{{ email }}</div>
|
||||
|
||||
<InputCode
|
||||
@@ -22,7 +22,7 @@
|
||||
:disabled="saving || verificationCode.length !== 6"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
Submit
|
||||
{{ t('Settings.dialog.submit') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -31,13 +31,15 @@
|
||||
:disabled="resendCountdown > 0"
|
||||
@click="handleResend"
|
||||
>
|
||||
{{ resendCountdown > 0 ? `Resend Code in ${formattedResendCountdown}` : 'Resend Code' }}
|
||||
{{ resendButtonText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import InputCode from '@/components/input-code.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
@@ -57,6 +59,8 @@ const emit = defineEmits<{
|
||||
submit: [code: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const RESEND_COUNTDOWN_SECONDS = 60
|
||||
|
||||
const verificationCode = ref('')
|
||||
@@ -68,6 +72,12 @@ const formattedResendCountdown = computed(
|
||||
() => `00:${String(resendCountdown.value).padStart(2, '0')}`
|
||||
)
|
||||
|
||||
const resendButtonText = computed(() =>
|
||||
resendCountdown.value > 0
|
||||
? t('Settings.dialog.resendCodeIn', { time: formattedResendCountdown.value })
|
||||
: t('Settings.dialog.resendCode')
|
||||
)
|
||||
|
||||
const clearResendCountdownTimer = () => {
|
||||
if (resendCountdownTimer) {
|
||||
window.clearInterval(resendCountdownTimer)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner flex flex-center flex-col">
|
||||
<div class="title">Settings</div>
|
||||
<div class="slogan">Manage your account settings and preferences</div>
|
||||
<div class="title">{{ t('Settings.title') }}</div>
|
||||
<div class="slogan">{{ t('Settings.slogan') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-content">
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Profile</div>
|
||||
<div class="label">{{ t('Settings.profile.title') }}</div>
|
||||
<div class="label-desc">
|
||||
Update your display name, avatar, social links and account security.
|
||||
{{ t('Settings.profile.description') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,47 +29,58 @@
|
||||
<div class="read-section">
|
||||
<div class="read-row two-column">
|
||||
<div class="read-item">
|
||||
<div class="read-label">FIRST NAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.firstName') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.firstName }}</div>
|
||||
<div v-show="isEditing" class="form-item-value name">
|
||||
<el-input v-model="draftData.firstName" placeholder="First Name" />
|
||||
<el-input
|
||||
v-model="draftData.firstName"
|
||||
:placeholder="t('Settings.profile.firstNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-item">
|
||||
<div class="read-label">LAST NAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.lastName') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.lastName }}</div>
|
||||
<div v-show="isEditing" class="form-item-value name">
|
||||
<el-input v-model="draftData.lastName" placeholder="Last Name" />
|
||||
<el-input
|
||||
v-model="draftData.lastName"
|
||||
:placeholder="t('Settings.profile.lastNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-row">
|
||||
<div class="read-label">USERNAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.username') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.username }}</div>
|
||||
<div v-show="isEditing" class="form-item-value">
|
||||
<el-input v-model="draftData.username" placeholder="Username" />
|
||||
<el-input
|
||||
v-model="draftData.username"
|
||||
:placeholder="t('Settings.profile.usernamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">Your public username on Stylish Parade.</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.usernameTip') }}</div>
|
||||
|
||||
<div class="read-row role-row">
|
||||
<div class="read-label">ROLE</div>
|
||||
<div class="read-label">{{ t('Settings.profile.role') }}</div>
|
||||
<div :class="{ 'readonly-radio-group': !isEditing }">
|
||||
<Radio multiple :max="2" v-model="roleModel" :options="roleList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">Select up to 2 labels that suit you.</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.roleTip') }}</div>
|
||||
|
||||
<div class="social-links read-social-links">
|
||||
<div class="title">SOCIAL LINKS</div>
|
||||
<div class="title">{{ t('Settings.profile.socialLinks') }}</div>
|
||||
<div class="links-list flex flex-col">
|
||||
<div
|
||||
class="links-item flex align-center"
|
||||
v-for="(item, index) in displayData.links"
|
||||
:key="`view-${index}`"
|
||||
>
|
||||
<div class="link-index">Link {{ index + 1 }}</div>
|
||||
<div class="link-index">
|
||||
{{ t('Settings.profile.linkNumber', { index: index + 1 }) }}
|
||||
</div>
|
||||
<div v-show="!isEditing" class="link-href flex-1 readonly">{{ item }}</div>
|
||||
<div v-show="isEditing" class="link-href flex-1">
|
||||
<el-input v-model="draftData.links[index]" />
|
||||
@@ -93,15 +104,15 @@
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Security</div>
|
||||
<div class="label-desc">Manage your login email and password.</div>
|
||||
<div class="label">{{ t('Settings.security.title') }}</div>
|
||||
<div class="label-desc">{{ t('Settings.security.description') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container security-container">
|
||||
<div class="inner-divider" />
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row flex align-center">
|
||||
<div class="security-label inline">EMAIL</div>
|
||||
<div class="security-label inline">{{ t('Settings.security.email') }}</div>
|
||||
<div class="security-static flex-1">{{ displayData.email }}</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
@@ -109,26 +120,31 @@
|
||||
class="small-btn"
|
||||
@click="resetSecurityEmail"
|
||||
>
|
||||
CANCEL
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">NEW EMAIL ADDRESS</div>
|
||||
<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
|
||||
<div class="outlined-field verify-field align-center">
|
||||
<el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
|
||||
<el-input
|
||||
v-model="securityDraft.newEmail"
|
||||
:placeholder="t('Settings.security.newEmailPlaceholder')"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="handleVerifyEmail"
|
||||
>
|
||||
{{ isEmailVerified ? 'Verified' : 'Verify' }}
|
||||
{{
|
||||
isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
Your new email has been verified and is ready to save.
|
||||
{{ t('Settings.security.verifiedTip') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +152,7 @@
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row flex align-center">
|
||||
<div class="security-label inline">PASSWORD</div>
|
||||
<div class="security-label inline">{{ t('Settings.security.password') }}</div>
|
||||
<div class="security-static password-mask flex-1">.........</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
@@ -144,32 +160,32 @@
|
||||
class="small-btn"
|
||||
@click="resetSecurityPassword"
|
||||
>
|
||||
CANCEL
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">NEW PASSWORD</div>
|
||||
<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Enter new password"
|
||||
:placeholder="t('Settings.security.newPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="security-tip">You must satisfy ALL password conditions to register.</div>
|
||||
<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">CURRENT PASSWORD</div>
|
||||
<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.currentPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Confirm with your password"
|
||||
:placeholder="t('Settings.security.currentPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,31 +197,47 @@
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Language & Region</div>
|
||||
<div class="label-desc">Set your preferred language, region and currency display.</div>
|
||||
<div class="label">{{ t('Settings.region.title') }}</div>
|
||||
<div class="label-desc">{{ t('Settings.region.description') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container region-container">
|
||||
<div class="region-row">
|
||||
<div class="security-label">DISPLAY LANGUAGE</div>
|
||||
<div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayData.language }}
|
||||
{{ displayLanguageLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select v-model="draftData.language" placeholder="Select language">
|
||||
<el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
|
||||
<el-select
|
||||
v-model="draftData.language"
|
||||
:placeholder="t('Settings.region.selectLanguage')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in languageList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region-row">
|
||||
<div class="security-label">REGION</div>
|
||||
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayData.region }}
|
||||
{{ displayRegionLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select v-model="draftData.region" placeholder="Select region">
|
||||
<el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
|
||||
<el-select
|
||||
v-model="draftData.region"
|
||||
:placeholder="t('Settings.region.selectRegion')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in regionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,14 +249,16 @@
|
||||
<div class="action-container flex">
|
||||
<template v-if="isEditing">
|
||||
<button type="button" class="primary-btn" :disabled="saving" @click="handleSave">
|
||||
{{ saving ? 'SAVING...' : 'SAVE CHANGE' }}
|
||||
{{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
|
||||
</button>
|
||||
<button type="button" class="secondary-btn" :disabled="saving" @click="handleDiscard">
|
||||
DISCARD
|
||||
{{ t('Settings.buttons.discard') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">EDIT</button>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">
|
||||
{{ t('Settings.buttons.edit') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,18 +278,40 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
||||
import Radio from './components/Radio.vue'
|
||||
|
||||
const roleValues = [
|
||||
'fashionEnthusiast',
|
||||
'contentCreator',
|
||||
'student',
|
||||
'retailBuyer',
|
||||
'fashionDesigner',
|
||||
'brandBusiness',
|
||||
'prCommunications',
|
||||
'stylist',
|
||||
'graphicDesigner',
|
||||
'artist3d',
|
||||
'other'
|
||||
] as const
|
||||
|
||||
const languageValues = ['english', 'chinese'] as const
|
||||
const regionValues = ['hongKongSar', 'mainlandChina', 'singapore', 'unitedKingdom'] as const
|
||||
|
||||
type RoleValue = (typeof roleValues)[number]
|
||||
type LanguageValue = (typeof languageValues)[number]
|
||||
type RegionValue = (typeof regionValues)[number]
|
||||
|
||||
interface SettingsData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
username: string
|
||||
role: string[]
|
||||
role: RoleValue[]
|
||||
links: string[]
|
||||
language: string
|
||||
region: string
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
}
|
||||
|
||||
interface SecurityDraft {
|
||||
@@ -264,32 +320,43 @@ interface SecurityDraft {
|
||||
currentPassword: string
|
||||
}
|
||||
|
||||
const roleList = [
|
||||
'Fashion Enthusiast',
|
||||
'Content Creator',
|
||||
'Student',
|
||||
'Retail / Buyer',
|
||||
'Fashion Designer',
|
||||
'Brand / Business',
|
||||
'PR & Communications',
|
||||
'Stylist',
|
||||
'Graphic Designer',
|
||||
'3D Artist',
|
||||
'Other'
|
||||
].map((item) => ({ name: item, value: item }))
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const languageList = ['English', 'Chinese', 'Japanese']
|
||||
const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
|
||||
const languageLocaleMap: Record<LanguageValue, 'ENGLISH' | 'CHINESE_SIMPLIFIED'> = {
|
||||
english: 'ENGLISH',
|
||||
chinese: 'CHINESE_SIMPLIFIED',
|
||||
}
|
||||
|
||||
const roleList = computed(() =>
|
||||
roleValues.map((value) => ({
|
||||
name: t(`Settings.roles.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const languageList = computed(() =>
|
||||
languageValues.map((value) => ({
|
||||
label: t(`Settings.languages.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const regionList = computed(() =>
|
||||
regionValues.map((value) => ({
|
||||
label: t(`Settings.regions.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const createDefaultData = (): SettingsData => ({
|
||||
firstName: 'Alexandra',
|
||||
lastName: 'Chen',
|
||||
email: 'alex.chen@gmail.com',
|
||||
username: '@alexandra_chen',
|
||||
role: ['Student', 'Graphic Designer'],
|
||||
role: ['student', 'graphicDesigner'],
|
||||
links: ['https://instagram.com/username', 'https://...'],
|
||||
language: 'English',
|
||||
region: 'Hong Kong SAR'
|
||||
language: 'english',
|
||||
region: 'hongKongSar'
|
||||
})
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
@@ -326,6 +393,8 @@ const hasNewEmailChange = computed(
|
||||
const isEmailVerified = computed(
|
||||
() => hasNewEmailChange.value && verifiedEmail.value === normalizedNewEmail.value
|
||||
)
|
||||
const displayLanguageLabel = computed(() => t(`Settings.languages.${displayData.value.language}`))
|
||||
const displayRegionLabel = computed(() => t(`Settings.regions.${displayData.value.region}`))
|
||||
|
||||
const fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
@@ -334,7 +403,7 @@ const fullName = computed(() => {
|
||||
|
||||
const roleModel = computed({
|
||||
get: () => displayData.value.role,
|
||||
set: (value: string[]) => {
|
||||
set: (value: RoleValue[]) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.role = value
|
||||
return
|
||||
@@ -351,6 +420,12 @@ const resetEmailVerificationState = () => {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
const syncAppLanguage = (language: LanguageValue) => {
|
||||
const nextLocale = languageLocaleMap[language]
|
||||
locale.value = nextLocale
|
||||
localStorage.setItem('language', nextLocale)
|
||||
}
|
||||
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
@@ -386,47 +461,47 @@ const closeVerificationDialog = () => {
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
const handleVerifyEmail = async () => {
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning('Please enter your new email address first')
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning('Please enter a valid email address')
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning('Please enter a different email address')
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success('This email has already been verified')
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
await handleSendVerifyCode()
|
||||
handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success('Verification code sent')
|
||||
ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning('Please enter the 6-digit verification code')
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success('Email verification completed')
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
|
||||
const buildNextData = () => {
|
||||
@@ -445,22 +520,28 @@ const buildNextData = () => {
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning('Please verify your new email before saving')
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
try {
|
||||
sourceData.value = cloneSettingsData({
|
||||
...nextData,
|
||||
links: nextData.links.length ? nextData.links : ['']
|
||||
})
|
||||
|
||||
if (nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language)
|
||||
}
|
||||
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success('Settings updated')
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
|
||||
Reference in New Issue
Block a user