160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
|
<div class="setting-wrapper mini-scrollbar">
|
|
<div class="banner">
|
|
<div class="title">{{ t('Settings.title') }}</div>
|
|
<div class="slogan">{{ t('Settings.slogan') }}</div>
|
|
</div>
|
|
|
|
<div class="setting-content">
|
|
<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 class="gap" />
|
|
|
|
<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"
|
|
/>
|
|
|
|
<div class="gap" />
|
|
|
|
<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"
|
|
/>
|
|
|
|
<div class="gap bottom-gap" />
|
|
|
|
<SettingsActions
|
|
:is-editing="isEditing"
|
|
:saving="saving"
|
|
@edit="handleEdit"
|
|
@save="handleSave"
|
|
@discard="handleDiscard"
|
|
/>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
<EmailVerificationDialog
|
|
:visible="isVerificationDialogVisible"
|
|
:email="verificationTargetEmail"
|
|
:saving="saving"
|
|
@close="closeVerificationDialog"
|
|
@resend="handleSendVerifyCode"
|
|
@submit="handleVerificationSubmit"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
|
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 {
|
|
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>
|
|
.setting-wrapper {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.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';
|
|
font-size: 4rem;
|
|
line-height: 3.6rem;
|
|
color: #232323;
|
|
}
|
|
|
|
.slogan {
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-size: 1.6rem;
|
|
line-height: 2.4rem;
|
|
color: #585858;
|
|
}
|
|
|
|
.setting-content {
|
|
padding: 4rem 18rem 7rem;
|
|
}
|
|
|
|
.gap {
|
|
height: 0.05rem;
|
|
margin-top: 6rem;
|
|
margin-bottom: 4rem;
|
|
background-color: #c4c4c4;
|
|
|
|
&.bottom-gap {
|
|
margin-top: 4rem;
|
|
}
|
|
}
|
|
|
|
:deep(.el-select-dropdown__item) {
|
|
padding: 0 2rem !important;
|
|
}
|
|
</style>
|