chore: setting页面拆分
This commit is contained in:
@@ -66,7 +66,7 @@ const RESEND_COUNTDOWN_SECONDS = 60
|
||||
const verificationCode = ref('')
|
||||
const resendCountdown = ref(RESEND_COUNTDOWN_SECONDS)
|
||||
const verificationCodeRef = ref<{ resetCode: (size?: number) => void } | null>(null)
|
||||
let resendCountdownTimer: ReturnType<typeof window.setInterval> | null = null
|
||||
let resendCountdownTimer: number | null = null
|
||||
|
||||
const formattedResendCountdown = computed(
|
||||
() => `00:${String(resendCountdown.value).padStart(2, '0')}`
|
||||
|
||||
235
src/views/setting/components/ProfileSection.vue
Normal file
235
src/views/setting/components/ProfileSection.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<SettingsSection
|
||||
:title="t('Settings.profile.title')"
|
||||
:description="t('Settings.profile.description')"
|
||||
>
|
||||
<div class="profile-header">
|
||||
<div class="avatar relative">
|
||||
<SvgIcon name="user_0" size="46" class="avatar-icon" />
|
||||
<img src="@/assets/images/edit.png" class="avatar-edit-icon" />
|
||||
</div>
|
||||
<div class="profile-summary">
|
||||
<div class="profile-name">{{ fullName }}</div>
|
||||
<div class="profile-email">{{ displayData.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-section">
|
||||
<div class="read-row two-column">
|
||||
<div class="read-item">
|
||||
<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
|
||||
:model-value="firstName"
|
||||
:placeholder="t('Settings.profile.firstNamePlaceholder')"
|
||||
@update:model-value="emit('update:firstName', String($event))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-item">
|
||||
<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
|
||||
:model-value="lastName"
|
||||
:placeholder="t('Settings.profile.lastNamePlaceholder')"
|
||||
@update:model-value="emit('update:lastName', String($event))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-row">
|
||||
<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
|
||||
:model-value="username"
|
||||
:placeholder="t('Settings.profile.usernamePlaceholder')"
|
||||
@update:model-value="emit('update:username', String($event))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.usernameTip') }}</div>
|
||||
|
||||
<div class="read-row role-row">
|
||||
<div class="read-label">{{ t('Settings.profile.role') }}</div>
|
||||
<div :class="{ 'readonly-radio-group': !isEditing }">
|
||||
<Radio multiple :max="2" v-model="roleSelection" :options="roleOptions" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.roleTip') }}</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SettingsSection from './SettingsSection.vue'
|
||||
import Radio from './Radio.vue'
|
||||
import type { RoleOption, RoleValue, SettingsData } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
displayData: SettingsData
|
||||
firstName: string
|
||||
lastName: string
|
||||
username: string
|
||||
fullName: string
|
||||
isEditing: boolean
|
||||
roleModel: RoleValue[]
|
||||
roleOptions: RoleOption[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:firstName', value: string): void
|
||||
(event: 'update:lastName', value: string): void
|
||||
(event: 'update:username', value: string): void
|
||||
(event: 'update:roleModel', value: RoleValue[]): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const roleSelection = computed<RoleValue[]>({
|
||||
get: () => props.roleModel,
|
||||
set: (value) => {
|
||||
emit('update:roleModel', value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.field-text() {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.field-frame() {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
}
|
||||
|
||||
.control-wrapper() {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 2.6rem;
|
||||
margin-bottom: 3.6rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 50%;
|
||||
border: 0.1rem solid #d8d0c7;
|
||||
}
|
||||
|
||||
.avatar-edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 0.1rem solid #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.6rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 2.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.read-section {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
.read-label {
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.read-tip {
|
||||
margin-top: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.read-row + .read-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.read-row.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 28.4rem 28.4rem;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.read-box {
|
||||
.field-frame();
|
||||
.field-text();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.form-item-value {
|
||||
.field-frame();
|
||||
|
||||
&.name {
|
||||
width: 28.4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
.control-wrapper();
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
.field-text();
|
||||
}
|
||||
}
|
||||
|
||||
.readonly-radio-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.role-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="radio-button-group">
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:key="String(item.value)"
|
||||
type="button"
|
||||
:class="[
|
||||
'radio-button',
|
||||
|
||||
128
src/views/setting/components/RegionSection.vue
Normal file
128
src/views/setting/components/RegionSection.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<SettingsSection
|
||||
:title="t('Settings.region.title')"
|
||||
:description="t('Settings.region.description')"
|
||||
>
|
||||
<div class="region-row">
|
||||
<div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayLanguageLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select
|
||||
:model-value="language"
|
||||
:placeholder="t('Settings.region.selectLanguage')"
|
||||
@update:model-value="emit('update:language', $event as LanguageValue)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in languageOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region-row">
|
||||
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayRegionLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select
|
||||
:model-value="region"
|
||||
:placeholder="t('Settings.region.selectRegion')"
|
||||
@update:model-value="emit('update:region', $event as RegionValue)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in regionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SettingsSection from './SettingsSection.vue'
|
||||
import type { LanguageValue, RegionValue, SettingOption } from '../types'
|
||||
|
||||
defineProps<{
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
displayLanguageLabel: string
|
||||
displayRegionLabel: string
|
||||
isEditing: boolean
|
||||
languageOptions: SettingOption<LanguageValue>[]
|
||||
regionOptions: SettingOption<RegionValue>[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:language', value: LanguageValue): void
|
||||
(event: 'update:region', value: RegionValue): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.field-text() {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.field-frame() {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
}
|
||||
|
||||
.control-wrapper() {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.region-row + .region-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.security-label {
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.security-static,
|
||||
.field-box {
|
||||
.field-frame();
|
||||
.field-text();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.outlined-field {
|
||||
.field-frame();
|
||||
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-select__wrapper) {
|
||||
.control-wrapper();
|
||||
min-height: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
242
src/views/setting/components/SecuritySection.vue
Normal file
242
src/views/setting/components/SecuritySection.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<SettingsSection
|
||||
:title="t('Settings.security.title')"
|
||||
:description="t('Settings.security.description')"
|
||||
content-class="security-container"
|
||||
>
|
||||
<div class="inner-divider" />
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row">
|
||||
<div class="security-label inline">{{ t('Settings.security.email') }}</div>
|
||||
<div class="security-static">{{ email }}</div>
|
||||
<button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-email')">
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
|
||||
<div class="outlined-field verify-field">
|
||||
<el-input
|
||||
:model-value="newEmail"
|
||||
:placeholder="t('Settings.security.newEmailPlaceholder')"
|
||||
@update:model-value="emit('update:newEmail', String($event))"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="emit('verify-email')"
|
||||
>
|
||||
{{ isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
{{ t('Settings.security.verifiedTip') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-divider" />
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row">
|
||||
<div class="security-label inline">{{ t('Settings.security.password') }}</div>
|
||||
<div class="security-static password-mask">.........</div>
|
||||
<button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-password')">
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
:model-value="newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('Settings.security.newPasswordPlaceholder')"
|
||||
@update:model-value="emit('update:newPassword', String($event))"
|
||||
/>
|
||||
</div>
|
||||
<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
:model-value="currentPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('Settings.security.currentPasswordPlaceholder')"
|
||||
@update:model-value="emit('update:currentPassword', String($event))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-divider" />
|
||||
</SettingsSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SettingsSection from './SettingsSection.vue'
|
||||
|
||||
defineProps<{
|
||||
email: string
|
||||
newEmail: string
|
||||
newPassword: string
|
||||
currentPassword: string
|
||||
isEditing: boolean
|
||||
isEmailVerified: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:newEmail', value: string): void
|
||||
(event: 'update:newPassword', value: string): void
|
||||
(event: 'update:currentPassword', value: string): void
|
||||
(event: 'reset-email'): void
|
||||
(event: 'reset-password'): void
|
||||
(event: 'verify-email'): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.field-text() {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.field-frame() {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
}
|
||||
|
||||
.control-wrapper() {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.security-row + .security-row {
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.security-label {
|
||||
margin: 0 0 0.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: #585858;
|
||||
|
||||
&.inline {
|
||||
width: 10.8rem;
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.security-static {
|
||||
.field-text();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 2.4rem;
|
||||
padding: 0.1rem 0 0;
|
||||
}
|
||||
|
||||
.security-inline-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.8rem;
|
||||
min-height: 3.2rem;
|
||||
}
|
||||
|
||||
.security-tip {
|
||||
margin-top: 0.6rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.outlined-field {
|
||||
.field-frame();
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
.control-wrapper();
|
||||
min-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
:deep(.el-input) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
border: none;
|
||||
min-width: 11rem;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
border-left: 0.1rem solid #979797;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
padding: 0 2rem;
|
||||
|
||||
&.verified {
|
||||
color: #ffffff;
|
||||
background: #232323;
|
||||
border-left-color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
.password-mask {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
letter-spacing: 0.08rem;
|
||||
}
|
||||
|
||||
.inner-divider {
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
width: 10rem;
|
||||
height: 3.2rem;
|
||||
align-self: flex-start;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.2rem;
|
||||
line-height: 2.6rem;
|
||||
letter-spacing: -0.03em;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verified-tip {
|
||||
color: #6f7f68;
|
||||
}
|
||||
</style>
|
||||
73
src/views/setting/components/SettingsActions.vue
Normal file
73
src/views/setting/components/SettingsActions.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="action-container">
|
||||
<template v-if="isEditing">
|
||||
<button type="button" class="primary-btn" :disabled="saving" @click="emit('save')">
|
||||
{{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
|
||||
</button>
|
||||
<button type="button" class="secondary-btn" :disabled="saving" @click="emit('discard')">
|
||||
{{ t('Settings.buttons.discard') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="primary-btn edit-btn" @click="emit('edit')">
|
||||
{{ t('Settings.buttons.edit') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
defineProps<{
|
||||
isEditing: boolean
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'edit'): void
|
||||
(event: 'save'): void
|
||||
(event: 'discard'): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.action-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 1.2rem;
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
height: 4.4rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.6rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
width: 23.6rem;
|
||||
padding: 0 2.4rem;
|
||||
border-color: #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 12rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
52
src/views/setting/components/SettingsSection.vue
Normal file
52
src/views/setting/components/SettingsSection.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<section class="setting-section">
|
||||
<div class="label-container">
|
||||
<div class="label">{{ title }}</div>
|
||||
<div class="label-desc">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<div :class="['context-container', contentClass]">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
description: string
|
||||
contentClass?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting-section {
|
||||
display: flex;
|
||||
column-gap: 21.4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
width: 27.6rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 2.8rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.label-desc {
|
||||
width: 24rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.context-container {
|
||||
width: 58rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,240 +1,59 @@
|
||||
<template>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner flex flex-center flex-col">
|
||||
<div class="banner">
|
||||
<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">{{ t('Settings.profile.title') }}</div>
|
||||
<div class="label-desc">
|
||||
{{ t('Settings.profile.description') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container">
|
||||
<div class="profile-header flex align-center">
|
||||
<div class="avatar relative">
|
||||
<SvgIcon name="user_0" size="46" class="avatar-icon" />
|
||||
<img src="@/assets/images/edit.png" class="avatar-edit-icon" />
|
||||
</div>
|
||||
<div class="profile-summary flex flex-col">
|
||||
<div class="profile-name">{{ fullName }}</div>
|
||||
<div class="profile-email">{{ displayData.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-section">
|
||||
<div class="read-row two-column">
|
||||
<div class="read-item">
|
||||
<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="t('Settings.profile.firstNamePlaceholder')"
|
||||
<ProfileSection
|
||||
v-model:first-name="draftData.firstName"
|
||||
v-model:last-name="draftData.lastName"
|
||||
v-model:username="draftData.username"
|
||||
v-model:role-model="roleModel"
|
||||
:display-data="displayData"
|
||||
:full-name="fullName"
|
||||
:is-editing="isEditing"
|
||||
:role-options="roleList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-item">
|
||||
<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="t('Settings.profile.lastNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-row">
|
||||
<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="t('Settings.profile.usernamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.usernameTip') }}</div>
|
||||
|
||||
<div class="read-row role-row">
|
||||
<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">{{ t('Settings.profile.roleTip') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap" />
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<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">{{ t('Settings.security.email') }}</div>
|
||||
<div class="security-static flex-1">{{ displayData.email }}</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
type="button"
|
||||
class="small-btn"
|
||||
@click="resetSecurityEmail"
|
||||
>
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
|
||||
<div class="outlined-field verify-field align-center">
|
||||
<el-input
|
||||
v-model="securityDraft.newEmail"
|
||||
:placeholder="t('Settings.security.newEmailPlaceholder')"
|
||||
<SecuritySection
|
||||
v-model:new-email="securityDraft.newEmail"
|
||||
v-model:new-password="securityDraft.newPassword"
|
||||
v-model:current-password="securityDraft.currentPassword"
|
||||
:email="displayData.email"
|
||||
:is-editing="isEditing"
|
||||
:is-email-verified="isEmailVerified"
|
||||
@reset-email="resetSecurityEmail"
|
||||
@reset-password="resetSecurityPassword"
|
||||
@verify-email="handleVerifyEmail"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="handleVerifyEmail"
|
||||
>
|
||||
{{
|
||||
isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
{{ t('Settings.security.verifiedTip') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-divider" />
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row flex align-center">
|
||||
<div class="security-label inline">{{ t('Settings.security.password') }}</div>
|
||||
<div class="security-static password-mask flex-1">.........</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
type="button"
|
||||
class="small-btn"
|
||||
@click="resetSecurityPassword"
|
||||
>
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('Settings.security.newPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.currentPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="t('Settings.security.currentPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-divider" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap" />
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<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">{{ t('Settings.region.displayLanguage') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayLanguageLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<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"
|
||||
<RegionSection
|
||||
v-model:language="draftData.language"
|
||||
v-model:region="draftData.region"
|
||||
:display-language-label="displayLanguageLabel"
|
||||
:display-region-label="displayRegionLabel"
|
||||
:is-editing="isEditing"
|
||||
:language-options="languageList"
|
||||
:region-options="regionList"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region-row">
|
||||
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayRegionLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap bottom-gap" />
|
||||
|
||||
<div class="action-container flex">
|
||||
<template v-if="isEditing">
|
||||
<button type="button" class="primary-btn" :disabled="saving" @click="handleSave">
|
||||
{{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
|
||||
</button>
|
||||
<button type="button" class="secondary-btn" :disabled="saving" @click="handleDiscard">
|
||||
{{ t('Settings.buttons.discard') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">
|
||||
{{ t('Settings.buttons.edit') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<SettingsActions
|
||||
:is-editing="isEditing"
|
||||
:saving="saving"
|
||||
@edit="handleEdit"
|
||||
@save="handleSave"
|
||||
@discard="handleDiscard"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<EmailVerificationDialog
|
||||
@@ -249,288 +68,42 @@
|
||||
</template>
|
||||
|
||||
<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: RoleValue[]
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
}
|
||||
|
||||
interface SecurityDraft {
|
||||
newEmail: string
|
||||
newPassword: string
|
||||
currentPassword: string
|
||||
}
|
||||
import ProfileSection from './components/ProfileSection.vue'
|
||||
import RegionSection from './components/RegionSection.vue'
|
||||
import SecuritySection from './components/SecuritySection.vue'
|
||||
import SettingsActions from './components/SettingsActions.vue'
|
||||
import { useSettingsForm } from './useSettingsForm'
|
||||
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
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', 'graphicDesigner'],
|
||||
language: 'english',
|
||||
region: 'hongKongSar'
|
||||
})
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
role: [...data.role],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
})
|
||||
|
||||
const createEmptySecurityDraft = (): SecurityDraft => ({
|
||||
newEmail: '',
|
||||
newPassword: '',
|
||||
currentPassword: ''
|
||||
})
|
||||
|
||||
const sourceData = ref<SettingsData>(createDefaultData())
|
||||
const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = ref(false)
|
||||
const saving = ref(false)
|
||||
const isVerificationDialogVisible = ref(false)
|
||||
const verificationTargetEmail = ref('')
|
||||
const verifiedEmail = ref('')
|
||||
|
||||
const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
const normalizedNewEmail = computed(() => securityDraft.value.newEmail.trim())
|
||||
const hasNewEmailChange = computed(
|
||||
() => normalizedNewEmail.value.length > 0 && normalizedNewEmail.value !== sourceData.value.email
|
||||
)
|
||||
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
|
||||
return `${data.firstName} ${data.lastName}`.trim()
|
||||
})
|
||||
|
||||
const roleModel = computed({
|
||||
get: () => displayData.value.role,
|
||||
set: (value: RoleValue[]) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.role = value
|
||||
return
|
||||
}
|
||||
sourceData.value.role = value
|
||||
}
|
||||
})
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
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()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
securityDraft.value.newPassword = ''
|
||||
securityDraft.value.currentPassword = ''
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
|
||||
const buildNextData = () => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
return {
|
||||
firstName: draftData.value.firstName.trim(),
|
||||
lastName: draftData.value.lastName.trim(),
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
role: draftData.value.role,
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
try {
|
||||
sourceData.value = cloneSettingsData({
|
||||
...nextData
|
||||
})
|
||||
|
||||
if (nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language)
|
||||
}
|
||||
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
const {
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog
|
||||
} = useSettingsForm({ t, locale })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -538,31 +111,18 @@ watch(
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
|
||||
.field-text() {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.field-frame() {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
}
|
||||
|
||||
.control-wrapper() {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 14.8rem;
|
||||
row-gap: 1.2rem;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
|
||||
linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
@@ -577,272 +137,9 @@ watch(
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
padding: 4rem 18rem 7rem;
|
||||
.setting-item {
|
||||
column-gap: 21.4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
width: 27.6rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
|
||||
.label {
|
||||
font-size: 2.8rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.label-desc {
|
||||
width: 24rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.context-container {
|
||||
width: 58rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.form-item-label,
|
||||
.read-label,
|
||||
.security-label {
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.form-tip,
|
||||
.read-tip,
|
||||
.security-tip {
|
||||
margin-top: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.form-item-value,
|
||||
.outlined-field,
|
||||
.link-href {
|
||||
.field-frame();
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
.control-wrapper();
|
||||
min-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item-value {
|
||||
&.noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.name {
|
||||
width: 28.4rem;
|
||||
}
|
||||
|
||||
&.radio {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
.field-text();
|
||||
}
|
||||
}
|
||||
|
||||
.read-box,
|
||||
.field-box,
|
||||
.security-static {
|
||||
.field-frame();
|
||||
.field-text();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
column-gap: 2.6rem;
|
||||
margin-bottom: 3.6rem;
|
||||
|
||||
.avatar {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 50%;
|
||||
border: 0.1rem solid #d8d0c7;
|
||||
}
|
||||
|
||||
.avatar-edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 0.1rem solid #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-summary {
|
||||
row-gap: 0.6rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 2.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.read-section {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
.col-gap-2 {
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.read-row + .read-row,
|
||||
.region-row + .region-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.read-row.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 28.4rem 28.4rem;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.readonly-radio-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.role-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.security-container {
|
||||
.security-row + .security-row {
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.security-label {
|
||||
margin: 0 0 0.8rem;
|
||||
|
||||
&.inline {
|
||||
width: 10.8rem;
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.security-static {
|
||||
min-height: 2.4rem;
|
||||
padding: 0.1rem 0 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.security-inline-row {
|
||||
gap: 2.8rem;
|
||||
min-height: 3.2rem;
|
||||
}
|
||||
|
||||
.security-tip {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.verify-field {
|
||||
display: flex;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
:deep(.el-input) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
border: none;
|
||||
min-width: 11rem;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
border-left: 0.1rem solid #979797;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
padding: 0 2rem;
|
||||
|
||||
&.verified {
|
||||
color: #ffffff;
|
||||
background: #232323;
|
||||
border-left-color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
.password-mask {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
letter-spacing: 0.08rem;
|
||||
}
|
||||
|
||||
.inner-divider {
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.region-container {
|
||||
.field-box {
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small-btn,
|
||||
.secondary-btn,
|
||||
.primary-btn {
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
width: 10rem;
|
||||
height: 3.2rem;
|
||||
align-self: flex-start;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2.6rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.gap {
|
||||
@@ -856,47 +153,6 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
justify-content: center;
|
||||
column-gap: 1.2rem;
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
height: 4.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.6rem;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
min-width: 23.6rem;
|
||||
padding: 0 2.4rem;
|
||||
border-color: #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 12rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.verified-tip {
|
||||
color: #6f7f68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
padding: 0 2rem !important;
|
||||
}
|
||||
|
||||
46
src/views/setting/types.ts
Normal file
46
src/views/setting/types.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
export const roleValues = [
|
||||
'fashionEnthusiast',
|
||||
'contentCreator',
|
||||
'student',
|
||||
'retailBuyer',
|
||||
'fashionDesigner',
|
||||
'brandBusiness',
|
||||
'prCommunications',
|
||||
'stylist',
|
||||
'graphicDesigner',
|
||||
'artist3d',
|
||||
'other'
|
||||
] as const
|
||||
|
||||
export const languageValues = ['english', 'chinese'] as const
|
||||
export const regionValues = ['hongKongSar', 'mainlandChina', 'singapore', 'unitedKingdom'] as const
|
||||
|
||||
export type RoleValue = (typeof roleValues)[number]
|
||||
export type LanguageValue = (typeof languageValues)[number]
|
||||
export type RegionValue = (typeof regionValues)[number]
|
||||
|
||||
export interface SettingsData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
username: string
|
||||
role: RoleValue[]
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
}
|
||||
|
||||
export interface SecurityDraft {
|
||||
newEmail: string
|
||||
newPassword: string
|
||||
currentPassword: string
|
||||
}
|
||||
|
||||
export interface RoleOption {
|
||||
name: string
|
||||
value: RoleValue
|
||||
}
|
||||
|
||||
export interface SettingOption<T extends string> {
|
||||
label: string
|
||||
value: T
|
||||
}
|
||||
288
src/views/setting/useSettingsForm.ts
Normal file
288
src/views/setting/useSettingsForm.ts
Normal file
@@ -0,0 +1,288 @@
|
||||
import { computed, ref, shallowRef, watch, type Ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
languageValues,
|
||||
regionValues,
|
||||
roleValues,
|
||||
type LanguageValue,
|
||||
type RegionValue,
|
||||
type RoleValue,
|
||||
type SecurityDraft,
|
||||
type SettingsData
|
||||
} from './types'
|
||||
|
||||
type Translate = (key: string, ...args: unknown[]) => string
|
||||
|
||||
interface UseSettingsFormOptions {
|
||||
t: Translate
|
||||
locale: Ref<string>
|
||||
}
|
||||
|
||||
const languageLocaleMap: Record<LanguageValue, 'ENGLISH' | 'CHINESE_SIMPLIFIED'> = {
|
||||
english: 'ENGLISH',
|
||||
chinese: 'CHINESE_SIMPLIFIED'
|
||||
}
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
const createDefaultData = (): SettingsData => ({
|
||||
firstName: 'Alexandra',
|
||||
lastName: 'Chen',
|
||||
email: 'alex.chen@gmail.com',
|
||||
username: '@alexandra_chen',
|
||||
role: ['student', 'graphicDesigner'],
|
||||
language: 'english',
|
||||
region: 'hongKongSar'
|
||||
})
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
role: [...data.role],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
})
|
||||
|
||||
const createEmptySecurityDraft = (): SecurityDraft => ({
|
||||
newEmail: '',
|
||||
newPassword: '',
|
||||
currentPassword: ''
|
||||
})
|
||||
|
||||
export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
|
||||
const sourceData = ref<SettingsData>(createDefaultData())
|
||||
const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = shallowRef(false)
|
||||
const saving = shallowRef(false)
|
||||
const isVerificationDialogVisible = shallowRef(false)
|
||||
const verificationTargetEmail = shallowRef('')
|
||||
const verifiedEmail = shallowRef('')
|
||||
|
||||
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 displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
const normalizedNewEmail = computed(() => securityDraft.value.newEmail.trim())
|
||||
const hasNewEmailChange = computed(
|
||||
() => normalizedNewEmail.value.length > 0 && normalizedNewEmail.value !== sourceData.value.email
|
||||
)
|
||||
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
|
||||
return `${data.firstName} ${data.lastName}`.trim()
|
||||
})
|
||||
|
||||
const roleModel = computed<RoleValue[]>({
|
||||
get: () => displayData.value.role,
|
||||
set: (value) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.role = value
|
||||
return
|
||||
}
|
||||
|
||||
sourceData.value.role = value
|
||||
}
|
||||
})
|
||||
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
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()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
securityDraft.value.newPassword = ''
|
||||
securityDraft.value.currentPassword = ''
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
|
||||
const buildNextData = (): SettingsData => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
|
||||
return {
|
||||
firstName: draftData.value.firstName.trim(),
|
||||
lastName: draftData.value.lastName.trim(),
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
role: [...draftData.value.role],
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
sourceData.value = cloneSettingsData(nextData)
|
||||
|
||||
if (nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language)
|
||||
}
|
||||
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
sourceData,
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user