From 93813f7b56eaf329652876fc3a71b5040565289b Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Mon, 11 May 2026 11:28:59 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20setting=E9=A1=B5=E9=9D=A2=E6=8B=86?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EmailVerificationDialog.vue    |   2 +-
 .../setting/components/ProfileSection.vue     | 235 +++++
 src/views/setting/components/Radio.vue        |   2 +-
 .../setting/components/RegionSection.vue      | 128 +++
 .../setting/components/SecuritySection.vue    | 242 +++++
 .../setting/components/SettingsActions.vue    |  73 ++
 .../setting/components/SettingsSection.vue    |  52 +
 src/views/setting/index.vue                   | 950 ++----------------
 src/views/setting/types.ts                    |  46 +
 src/views/setting/useSettingsForm.ts          | 288 ++++++
 10 files changed, 1169 insertions(+), 849 deletions(-)
 create mode 100644 src/views/setting/components/ProfileSection.vue
 create mode 100644 src/views/setting/components/RegionSection.vue
 create mode 100644 src/views/setting/components/SecuritySection.vue
 create mode 100644 src/views/setting/components/SettingsActions.vue
 create mode 100644 src/views/setting/components/SettingsSection.vue
 create mode 100644 src/views/setting/types.ts
 create mode 100644 src/views/setting/useSettingsForm.ts

diff --git a/src/views/setting/components/EmailVerificationDialog.vue b/src/views/setting/components/EmailVerificationDialog.vue
index 454086e..d70f8d2 100644
--- a/src/views/setting/components/EmailVerificationDialog.vue
+++ b/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')}`
diff --git a/src/views/setting/components/ProfileSection.vue b/src/views/setting/components/ProfileSection.vue
new file mode 100644
index 0000000..a6159a7
--- /dev/null
+++ b/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>
diff --git a/src/views/setting/components/Radio.vue b/src/views/setting/components/Radio.vue
index 7c05e54..2f60ea0 100644
--- a/src/views/setting/components/Radio.vue
+++ b/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',
diff --git a/src/views/setting/components/RegionSection.vue b/src/views/setting/components/RegionSection.vue
new file mode 100644
index 0000000..c640893
--- /dev/null
+++ b/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>
diff --git a/src/views/setting/components/SecuritySection.vue b/src/views/setting/components/SecuritySection.vue
new file mode 100644
index 0000000..2d6d865
--- /dev/null
+++ b/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>
diff --git a/src/views/setting/components/SettingsActions.vue b/src/views/setting/components/SettingsActions.vue
new file mode 100644
index 0000000..d4fa7a5
--- /dev/null
+++ b/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>
diff --git a/src/views/setting/components/SettingsSection.vue b/src/views/setting/components/SettingsSection.vue
new file mode 100644
index 0000000..7a76448
--- /dev/null
+++ b/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>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index e7c5f25..8b4c55f 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -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')"
-                  />
-                </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>
+      <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" />
 
-      <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')"
-              />
-              <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>
+      <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" />
 
-      <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"
-                />
-              </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>
+      <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" />
 
-      <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,362 +111,45 @@ watch(
   height: 100%;
   overflow-y: auto;
   background: #ffffff;
+}
 
-  .field-text() {
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    color: #232323;
-  }
+.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%);
+}
 
-  .field-frame() {
-    width: 100%;
-    min-height: 4rem;
-    border: 0.1rem solid #979797;
-  }
+.title {
+  font-family: 'KaiseiOpti-Bold';
+  font-size: 4rem;
+  line-height: 3.6rem;
+  color: #232323;
+}
 
-  .control-wrapper() {
-    box-shadow: none;
-    border-radius: 0;
-    padding: 0 2rem;
-  }
+.slogan {
+  font-family: 'KaiseiOpti-Regular';
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  color: #585858;
+}
 
-  .banner {
-    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%);
+.setting-content {
+  padding: 4rem 18rem 7rem;
+}
 
-    .title {
-      font-family: 'KaiseiOpti-Bold';
-      font-size: 4rem;
-      line-height: 3.6rem;
-      color: #232323;
-    }
+.gap {
+  height: 0.05rem;
+  margin-top: 6rem;
+  margin-bottom: 4rem;
+  background-color: #c4c4c4;
 
-    .slogan {
-      font-family: 'KaiseiOpti-Regular';
-      font-size: 1.6rem;
-      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 {
-      height: 0.05rem;
-      margin-top: 6rem;
-      margin-bottom: 4rem;
-      background-color: #c4c4c4;
-
-      &.bottom-gap {
-        margin-top: 4rem;
-      }
-    }
-
-    .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;
-    }
+  &.bottom-gap {
+    margin-top: 4rem;
   }
 }
 
diff --git a/src/views/setting/types.ts b/src/views/setting/types.ts
new file mode 100644
index 0000000..0d8abf5
--- /dev/null
+++ b/src/views/setting/types.ts
@@ -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
+}
diff --git a/src/views/setting/useSettingsForm.ts b/src/views/setting/useSettingsForm.ts
new file mode 100644
index 0000000..02e6c1c
--- /dev/null
+++ b/src/views/setting/useSettingsForm.ts
@@ -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
+  }
+}