chore: setting页面拆分

src/views/setting/components/EmailVerificationDialog.vue

@@ -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')}`

src/views/setting/components/ProfileSection.vue

@@ -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>

src/views/setting/components/Radio.vue

@@ -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',

src/views/setting/components/RegionSection.vue

@@ -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>

src/views/setting/components/SecuritySection.vue

@@ -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>

src/views/setting/components/SettingsActions.vue

@@ -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>

src/views/setting/components/SettingsSection.vue

@@ -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>