feat: 设置页i18n

src/lang/en.ts

@@ -40,4 +40,95 @@ export default {
 		sendCodeError: 'Send code error',
 		retrievePassword: 'Retrieve password'
 	},
+	Settings: {
+		title: 'Settings',
+		slogan: 'Manage your account settings and preferences',
+		profile: {
+			title: 'Profile',
+			description: 'Update your display name, avatar, social links and account security.',
+			firstName: 'FIRST NAME',
+			lastName: 'LAST NAME',
+			firstNamePlaceholder: 'First Name',
+			lastNamePlaceholder: 'Last Name',
+			username: 'USERNAME',
+			usernamePlaceholder: 'Username',
+			usernameTip: 'Your public username on Stylish Parade.',
+			role: 'ROLE',
+			roleTip: 'Select up to 2 labels that suit you.',
+			socialLinks: 'SOCIAL LINKS',
+			linkNumber: 'Link {index}'
+		},
+		security: {
+			title: 'Security',
+			description: 'Manage your login email and password.',
+			email: 'EMAIL',
+			newEmail: 'NEW EMAIL ADDRESS',
+			newEmailPlaceholder: 'Enter new email',
+			verify: 'Verify',
+			verified: 'Verified',
+			verifiedTip: 'Your new email has been verified and is ready to save.',
+			password: 'PASSWORD',
+			newPassword: 'NEW PASSWORD',
+			newPasswordPlaceholder: 'Enter new password',
+			passwordTip: 'You must satisfy ALL password conditions to register.',
+			currentPassword: 'CURRENT PASSWORD',
+			currentPasswordPlaceholder: 'Confirm with your password'
+		},
+		region: {
+			title: 'Language & Region',
+			description: 'Set your preferred language, region and currency display.',
+			displayLanguage: 'DISPLAY LANGUAGE',
+			selectLanguage: 'Select language',
+			region: 'REGION',
+			selectRegion: 'Select region'
+		},
+		buttons: {
+			cancel: 'CANCEL',
+			discard: 'DISCARD',
+			edit: 'EDIT',
+			saveChange: 'SAVE CHANGE',
+			saving: 'SAVING...'
+		},
+		dialog: {
+			title: 'Check your new email',
+			subtitle: 'Enter the 6-digit code sent to',
+			submit: 'Submit',
+			resendCode: 'Resend Code',
+			resendCodeIn: 'Resend Code in {time}'
+		},
+		messages: {
+			enterNewEmailFirst: 'Please enter your new email address first',
+			invalidEmail: 'Please enter a valid email address',
+			sameEmail: 'Please enter a different email address',
+			alreadyVerified: 'This email has already been verified',
+			verificationCodeSent: 'Verification code sent',
+			enterVerificationCode: 'Please enter the 6-digit verification code',
+			verificationCompleted: 'Email verification completed',
+			verifyEmailBeforeSave: 'Please verify your new email before saving',
+			settingsUpdated: 'Settings updated'
+		},
+		roles: {
+			fashionEnthusiast: 'Fashion Enthusiast',
+			contentCreator: 'Content Creator',
+			student: 'Student',
+			retailBuyer: 'Retail / Buyer',
+			fashionDesigner: 'Fashion Designer',
+			brandBusiness: 'Brand / Business',
+			prCommunications: 'PR & Communications',
+			stylist: 'Stylist',
+			graphicDesigner: 'Graphic Designer',
+			artist3d: '3D Artist',
+			other: 'Other'
+		},
+		languages: {
+			english: 'English',
+			chinese: 'Chinese',
+		},
+		regions: {
+			hongKongSar: 'Hong Kong SAR',
+			mainlandChina: 'Mainland China',
+			singapore: 'Singapore',
+			unitedKingdom: 'United Kingdom'
+		}
+	}
 }

src/lang/zh-cn.ts

@@ -41,4 +41,95 @@ export default {
 		sendCodeError: '发送验证码失败',
 		retrievePassword: '找回密码'
 	},
+	Settings: {
+		title: '设置',
+		slogan: '管理你的账户设置和偏好',
+		profile: {
+			title: '个人资料',
+			description: '更新你的显示名称、头像、社交链接和账户安全信息。',
+			firstName: '名字',
+			lastName: '姓氏',
+			firstNamePlaceholder: '请输入名字',
+			lastNamePlaceholder: '请输入姓氏',
+			username: '用户名',
+			usernamePlaceholder: '请输入用户名',
+			usernameTip: '这是你在 Stylish Parade 上公开显示的用户名。',
+			role: '身份标签',
+			roleTip: '最多选择 2 个符合你的标签。',
+			socialLinks: '社交链接',
+			linkNumber: '链接 {index}'
+		},
+		security: {
+			title: '安全',
+			description: '管理你的登录邮箱和密码。',
+			email: '邮箱',
+			newEmail: '新邮箱地址',
+			newEmailPlaceholder: '请输入新邮箱',
+			verify: '验证',
+			verified: '已验证',
+			verifiedTip: '你的新邮箱已验证成功，可以保存。',
+			password: '密码',
+			newPassword: '新密码',
+			newPasswordPlaceholder: '请输入新密码',
+			passwordTip: '你必须满足所有密码条件才能注册。',
+			currentPassword: '当前密码',
+			currentPasswordPlaceholder: '请输入当前密码确认'
+		},
+		region: {
+			title: '语言与地区',
+			description: '设置你偏好的语言、地区和货币显示方式。',
+			displayLanguage: '显示语言',
+			selectLanguage: '请选择语言',
+			region: '地区',
+			selectRegion: '请选择地区'
+		},
+		buttons: {
+			cancel: '取消',
+			discard: '放弃',
+			edit: '编辑',
+			saveChange: '保存更改',
+			saving: '保存中...'
+		},
+		dialog: {
+			title: '检查你的新邮箱',
+			subtitle: '请输入发送到以下邮箱的 6 位验证码',
+			submit: '提交',
+			resendCode: '重新发送验证码',
+			resendCodeIn: '{time} 后可重新发送验证码'
+		},
+		messages: {
+			enterNewEmailFirst: '请先输入新的邮箱地址',
+			invalidEmail: '请输入有效的邮箱地址',
+			sameEmail: '请输入不同的邮箱地址',
+			alreadyVerified: '该邮箱已完成验证',
+			verificationCodeSent: '验证码已发送',
+			enterVerificationCode: '请输入 6 位验证码',
+			verificationCompleted: '邮箱验证完成',
+			verifyEmailBeforeSave: '请先完成新邮箱验证再保存',
+			settingsUpdated: '设置已更新'
+		},
+		roles: {
+			fashionEnthusiast: '时尚爱好者',
+			contentCreator: '内容创作者',
+			student: '学生',
+			retailBuyer: '零售 / 买手',
+			fashionDesigner: '服装设计师',
+			brandBusiness: '品牌 / 商业',
+			prCommunications: '公关与传播',
+			stylist: '造型师',
+			graphicDesigner: '平面设计师',
+			artist3d: '3D 艺术家',
+			other: '其他'
+		},
+		languages: {
+			english: '英文',
+			chinese: '中文',
+		},
+		regions: {
+			hongKongSar: '中国香港特别行政区',
+			mainlandChina: '中国大陆',
+			singapore: '新加坡',
+			unitedKingdom: '英国'
+		}
+	}
 }

src/views/setting/components/EmailVerificationDialog.vue

@@ -5,8 +5,8 @@
         <SvgIcon name="close" size="24" />
       </button>
 
-      <div class="verification-dialog__title">Check your new email</div>
+      <div class="verification-dialog__title">{{ t('Settings.dialog.title') }}</div>
-      <div class="verification-dialog__subtitle">Enter the 6-digit code sent to</div>
+      <div class="verification-dialog__subtitle">{{ t('Settings.dialog.subtitle') }}</div>
       <div class="verification-dialog__email">{{ email }}</div>
 
       <InputCode
@@ -22,7 +22,7 @@
         :disabled="saving || verificationCode.length !== 6"
         @click="handleSubmit"
       >
-        Submit
+        {{ t('Settings.dialog.submit') }}
       </button>
 
       <button
@@ -31,13 +31,15 @@
         :disabled="resendCountdown > 0"
         @click="handleResend"
       >
-        {{ resendCountdown > 0 ? `Resend Code in ${formattedResendCountdown}` : 'Resend Code' }}
+        {{ resendButtonText }}
       </button>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import InputCode from '@/components/input-code.vue'
 
 const props = withDefaults(
@@ -57,6 +59,8 @@ const emit = defineEmits<{
   submit: [code: string]
 }>()
 
+const { t } = useI18n()
+
 const RESEND_COUNTDOWN_SECONDS = 60
 
 const verificationCode = ref('')
@@ -68,6 +72,12 @@ const formattedResendCountdown = computed(
   () => `00:${String(resendCountdown.value).padStart(2, '0')}`
 )
 
+const resendButtonText = computed(() =>
+  resendCountdown.value > 0
+    ? t('Settings.dialog.resendCodeIn', { time: formattedResendCountdown.value })
+    : t('Settings.dialog.resendCode')
+)
+
 const clearResendCountdownTimer = () => {
   if (resendCountdownTimer) {
     window.clearInterval(resendCountdownTimer)

src/views/setting/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="setting-wrapper mini-scrollbar">
     <div class="banner flex flex-center flex-col">
-      <div class="title">Settings</div>
+      <div class="title">{{ t('Settings.title') }}</div>
-      <div class="slogan">Manage your account settings and preferences</div>
+      <div class="slogan">{{ t('Settings.slogan') }}</div>
     </div>
 
     <div class="setting-content">
       <div class="setting-item flex">
         <div class="label-container">
-          <div class="label">Profile</div>
+          <div class="label">{{ t('Settings.profile.title') }}</div>
           <div class="label-desc">
-            Update your display name, avatar, social links and account security.
+            {{ t('Settings.profile.description') }}
           </div>
         </div>
 
@@ -29,47 +29,58 @@
           <div class="read-section">
             <div class="read-row two-column">
               <div class="read-item">
-                <div class="read-label">FIRST NAME</div>
+                <div class="read-label">{{ t('Settings.profile.firstName') }}</div>
                 <div v-show="!isEditing" class="read-box">{{ displayData.firstName }}</div>
                 <div v-show="isEditing" class="form-item-value name">
-                  <el-input v-model="draftData.firstName" placeholder="First Name" />
+                  <el-input
+                    v-model="draftData.firstName"
+                    :placeholder="t('Settings.profile.firstNamePlaceholder')"
+                  />
                 </div>
               </div>
               <div class="read-item">
-                <div class="read-label">LAST NAME</div>
+                <div class="read-label">{{ t('Settings.profile.lastName') }}</div>
                 <div v-show="!isEditing" class="read-box">{{ displayData.lastName }}</div>
                 <div v-show="isEditing" class="form-item-value name">
-                  <el-input v-model="draftData.lastName" placeholder="Last Name" />
+                  <el-input
+                    v-model="draftData.lastName"
+                    :placeholder="t('Settings.profile.lastNamePlaceholder')"
+                  />
                 </div>
               </div>
             </div>
 
             <div class="read-row">
-              <div class="read-label">USERNAME</div>
+              <div class="read-label">{{ t('Settings.profile.username') }}</div>
               <div v-show="!isEditing" class="read-box">{{ displayData.username }}</div>
               <div v-show="isEditing" class="form-item-value">
-                <el-input v-model="draftData.username" placeholder="Username" />
+                <el-input
+                  v-model="draftData.username"
+                  :placeholder="t('Settings.profile.usernamePlaceholder')"
+                />
               </div>
             </div>
-            <div class="read-tip">Your public username on Stylish Parade.</div>
+            <div class="read-tip">{{ t('Settings.profile.usernameTip') }}</div>
 
             <div class="read-row role-row">
-              <div class="read-label">ROLE</div>
+              <div class="read-label">{{ t('Settings.profile.role') }}</div>
               <div :class="{ 'readonly-radio-group': !isEditing }">
                 <Radio multiple :max="2" v-model="roleModel" :options="roleList" />
               </div>
             </div>
-            <div class="read-tip">Select up to 2 labels that suit you.</div>
+            <div class="read-tip">{{ t('Settings.profile.roleTip') }}</div>
 
             <div class="social-links read-social-links">
-              <div class="title">SOCIAL LINKS</div>
+              <div class="title">{{ t('Settings.profile.socialLinks') }}</div>
               <div class="links-list flex flex-col">
                 <div
                   class="links-item flex align-center"
                   v-for="(item, index) in displayData.links"
                   :key="`view-${index}`"
                 >
-                  <div class="link-index">Link {{ index + 1 }}</div>
+                  <div class="link-index">
+                    {{ t('Settings.profile.linkNumber', { index: index + 1 }) }}
+                  </div>
                   <div v-show="!isEditing" class="link-href flex-1 readonly">{{ item }}</div>
                   <div v-show="isEditing" class="link-href flex-1">
                     <el-input v-model="draftData.links[index]" />
@@ -93,15 +104,15 @@
 
       <div class="setting-item flex">
         <div class="label-container">
-          <div class="label">Security</div>
+          <div class="label">{{ t('Settings.security.title') }}</div>
-          <div class="label-desc">Manage your login email and password.</div>
+          <div class="label-desc">{{ t('Settings.security.description') }}</div>
         </div>
 
         <div class="context-container security-container">
           <div class="inner-divider" />
           <div class="security-row">
             <div class="security-inline-row flex align-center">
-              <div class="security-label inline">EMAIL</div>
+              <div class="security-label inline">{{ t('Settings.security.email') }}</div>
               <div class="security-static flex-1">{{ displayData.email }}</div>
               <button
                 v-show="isEditing"
@@ -109,26 +120,31 @@
                 class="small-btn"
                 @click="resetSecurityEmail"
               >
-                CANCEL
+                {{ t('Settings.buttons.cancel') }}
               </button>
             </div>
           </div>
 
           <div v-show="isEditing" class="security-row">
-            <div class="security-label">NEW EMAIL ADDRESS</div>
+            <div class="security-label">{{ t('Settings.security.newEmail') }}</div>
             <div class="outlined-field verify-field align-center">
-              <el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
+              <el-input
+                v-model="securityDraft.newEmail"
+                :placeholder="t('Settings.security.newEmailPlaceholder')"
+              />
               <button
                 type="button"
                 class="verify-btn"
                 :class="{ verified: isEmailVerified }"
                 @click="handleVerifyEmail"
               >
-                {{ isEmailVerified ? 'Verified' : 'Verify' }}
+                {{
+                  isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify')
+                }}
               </button>
             </div>
             <div v-if="isEmailVerified" class="security-tip verified-tip">
-              Your new email has been verified and is ready to save.
+              {{ t('Settings.security.verifiedTip') }}
             </div>
           </div>
 
@@ -136,7 +152,7 @@
 
           <div class="security-row">
             <div class="security-inline-row flex align-center">
-              <div class="security-label inline">PASSWORD</div>
+              <div class="security-label inline">{{ t('Settings.security.password') }}</div>
               <div class="security-static password-mask flex-1">.........</div>
               <button
                 v-show="isEditing"
@@ -144,32 +160,32 @@
                 class="small-btn"
                 @click="resetSecurityPassword"
               >
-                CANCEL
+                {{ t('Settings.buttons.cancel') }}
               </button>
             </div>
           </div>
 
           <div v-show="isEditing" class="security-row">
-            <div class="security-label">NEW PASSWORD</div>
+            <div class="security-label">{{ t('Settings.security.newPassword') }}</div>
             <div class="outlined-field">
               <el-input
                 v-model="securityDraft.newPassword"
                 type="password"
                 show-password
-                placeholder="Enter new password"
+                :placeholder="t('Settings.security.newPasswordPlaceholder')"
               />
             </div>
-            <div class="security-tip">You must satisfy ALL password conditions to register.</div>
+            <div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
           </div>
 
           <div v-show="isEditing" class="security-row">
-            <div class="security-label">CURRENT PASSWORD</div>
+            <div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
             <div class="outlined-field">
               <el-input
                 v-model="securityDraft.currentPassword"
                 type="password"
                 show-password
-                placeholder="Confirm with your password"
+                :placeholder="t('Settings.security.currentPasswordPlaceholder')"
               />
             </div>
           </div>
@@ -181,31 +197,47 @@
 
       <div class="setting-item flex">
         <div class="label-container">
-          <div class="label">Language &amp; Region</div>
+          <div class="label">{{ t('Settings.region.title') }}</div>
-          <div class="label-desc">Set your preferred language, region and currency display.</div>
+          <div class="label-desc">{{ t('Settings.region.description') }}</div>
         </div>
 
         <div class="context-container region-container">
           <div class="region-row">
-            <div class="security-label">DISPLAY LANGUAGE</div>
+            <div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
             <div v-show="!isEditing" class="security-static field-box">
-              {{ displayData.language }}
+              {{ displayLanguageLabel }}
             </div>
             <div v-show="isEditing" class="outlined-field select-field">
-              <el-select v-model="draftData.language" placeholder="Select language">
+              <el-select
-                <el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
+                v-model="draftData.language"
+                :placeholder="t('Settings.region.selectLanguage')"
+              >
+                <el-option
+                  v-for="item in languageList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </div>
           </div>
 
           <div class="region-row">
-            <div class="security-label">REGION</div>
+            <div class="security-label">{{ t('Settings.region.region') }}</div>
             <div v-show="!isEditing" class="security-static field-box">
-              {{ displayData.region }}
+              {{ displayRegionLabel }}
             </div>
             <div v-show="isEditing" class="outlined-field select-field">
-              <el-select v-model="draftData.region" placeholder="Select region">
+              <el-select
-                <el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
+                v-model="draftData.region"
+                :placeholder="t('Settings.region.selectRegion')"
+              >
+                <el-option
+                  v-for="item in regionList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </div>
           </div>
@@ -217,14 +249,16 @@
       <div class="action-container flex">
         <template v-if="isEditing">
           <button type="button" class="primary-btn" :disabled="saving" @click="handleSave">
-            {{ saving ? 'SAVING...' : 'SAVE CHANGE' }}
+            {{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
           </button>
           <button type="button" class="secondary-btn" :disabled="saving" @click="handleDiscard">
-            DISCARD
+            {{ t('Settings.buttons.discard') }}
           </button>
         </template>
         <template v-else>
-          <button type="button" class="primary-btn edit-btn" @click="handleEdit">EDIT</button>
+          <button type="button" class="primary-btn edit-btn" @click="handleEdit">
+            {{ t('Settings.buttons.edit') }}
+          </button>
         </template>
       </div>
     </div>
@@ -244,18 +278,40 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
 import Radio from './components/Radio.vue'
 
+const roleValues = [
+  'fashionEnthusiast',
+  'contentCreator',
+  'student',
+  'retailBuyer',
+  'fashionDesigner',
+  'brandBusiness',
+  'prCommunications',
+  'stylist',
+  'graphicDesigner',
+  'artist3d',
+  'other'
+] as const
+
+const languageValues = ['english', 'chinese'] as const
+const regionValues = ['hongKongSar', 'mainlandChina', 'singapore', 'unitedKingdom'] as const
+
+type RoleValue = (typeof roleValues)[number]
+type LanguageValue = (typeof languageValues)[number]
+type RegionValue = (typeof regionValues)[number]
+
 interface SettingsData {
   firstName: string
   lastName: string
   email: string
   username: string
-  role: string[]
+  role: RoleValue[]
   links: string[]
-  language: string
+  language: LanguageValue
-  region: string
+  region: RegionValue
 }
 
 interface SecurityDraft {
@@ -264,32 +320,43 @@ interface SecurityDraft {
   currentPassword: string
 }
 
-const roleList = [
+const { t, locale } = useI18n({ useScope: 'global' })
-  'Fashion Enthusiast',
-  'Content Creator',
-  'Student',
-  'Retail / Buyer',
-  'Fashion Designer',
-  'Brand / Business',
-  'PR & Communications',
-  'Stylist',
-  'Graphic Designer',
-  '3D Artist',
-  'Other'
-].map((item) => ({ name: item, value: item }))
 
-const languageList = ['English', 'Chinese', 'Japanese']
+const languageLocaleMap: Record<LanguageValue, 'ENGLISH' | 'CHINESE_SIMPLIFIED'> = {
-const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
+  english: 'ENGLISH',
+  chinese: 'CHINESE_SIMPLIFIED',
+}
+
+const roleList = computed(() =>
+  roleValues.map((value) => ({
+    name: t(`Settings.roles.${value}`),
+    value
+  }))
+)
+
+const languageList = computed(() =>
+  languageValues.map((value) => ({
+    label: t(`Settings.languages.${value}`),
+    value
+  }))
+)
+
+const regionList = computed(() =>
+  regionValues.map((value) => ({
+    label: t(`Settings.regions.${value}`),
+    value
+  }))
+)
 
 const createDefaultData = (): SettingsData => ({
   firstName: 'Alexandra',
   lastName: 'Chen',
   email: 'alex.chen@gmail.com',
   username: '@alexandra_chen',
-  role: ['Student', 'Graphic Designer'],
+  role: ['student', 'graphicDesigner'],
   links: ['https://instagram.com/username', 'https://...'],
-  language: 'English',
+  language: 'english',
-  region: 'Hong Kong SAR'
+  region: 'hongKongSar'
 })
 
 const cloneSettingsData = (data: SettingsData): SettingsData => ({
@@ -326,6 +393,8 @@ const hasNewEmailChange = computed(
 const isEmailVerified = computed(
   () => hasNewEmailChange.value && verifiedEmail.value === normalizedNewEmail.value
 )
+const displayLanguageLabel = computed(() => t(`Settings.languages.${displayData.value.language}`))
+const displayRegionLabel = computed(() => t(`Settings.regions.${displayData.value.region}`))
 
 const fullName = computed(() => {
   const data = displayData.value
@@ -334,7 +403,7 @@ const fullName = computed(() => {
 
 const roleModel = computed({
   get: () => displayData.value.role,
-  set: (value: string[]) => {
+  set: (value: RoleValue[]) => {
     if (isEditing.value) {
       draftData.value.role = value
       return
@@ -351,6 +420,12 @@ const resetEmailVerificationState = () => {
   verifiedEmail.value = ''
 }
 
+const syncAppLanguage = (language: LanguageValue) => {
+  const nextLocale = languageLocaleMap[language]
+  locale.value = nextLocale
+  localStorage.setItem('language', nextLocale)
+}
+
 const resetDraftState = () => {
   draftData.value = cloneSettingsData(sourceData.value)
   securityDraft.value = createEmptySecurityDraft()
@@ -386,47 +461,47 @@ const closeVerificationDialog = () => {
   verificationTargetEmail.value = ''
 }
 
-const handleVerifyEmail = async () => {
+const handleVerifyEmail = () => {
   const nextEmail = normalizedNewEmail.value
 
   if (!nextEmail) {
-    ElMessage.warning('Please enter your new email address first')
+    ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
     return
   }
 
   if (!emailPattern.test(nextEmail)) {
-    ElMessage.warning('Please enter a valid email address')
+    ElMessage.warning(t('Settings.messages.invalidEmail'))
     return
   }
 
   if (nextEmail === sourceData.value.email) {
-    ElMessage.warning('Please enter a different email address')
+    ElMessage.warning(t('Settings.messages.sameEmail'))
     return
   }
 
   if (verifiedEmail.value === nextEmail) {
-    ElMessage.success('This email has already been verified')
+    ElMessage.success(t('Settings.messages.alreadyVerified'))
     return
   }
 
   verificationTargetEmail.value = nextEmail
-  await handleSendVerifyCode()
+  handleSendVerifyCode()
   isVerificationDialogVisible.value = true
 }
 
 const handleSendVerifyCode = () => {
-  ElMessage.success('Verification code sent')
+  ElMessage.success(t('Settings.messages.verificationCodeSent'))
 }
 
 const handleVerificationSubmit = (code: string) => {
   if (code.length !== 6) {
-    ElMessage.warning('Please enter the 6-digit verification code')
+    ElMessage.warning(t('Settings.messages.enterVerificationCode'))
     return
   }
 
   verifiedEmail.value = verificationTargetEmail.value
   closeVerificationDialog()
-  ElMessage.success('Email verification completed')
+  ElMessage.success(t('Settings.messages.verificationCompleted'))
 }
 
 const buildNextData = () => {
@@ -445,22 +520,28 @@ const buildNextData = () => {
 
 const handleSave = async () => {
   if (hasNewEmailChange.value && !isEmailVerified.value) {
-    ElMessage.warning('Please verify your new email before saving')
+    ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
     return
   }
 
   const nextData = buildNextData()
+  const previousLanguage = sourceData.value.language
   saving.value = true
   try {
     sourceData.value = cloneSettingsData({
       ...nextData,
       links: nextData.links.length ? nextData.links : ['']
     })
+
+    if (nextData.language !== previousLanguage) {
+      syncAppLanguage(nextData.language)
+    }
+
     draftData.value = cloneSettingsData(sourceData.value)
     securityDraft.value = createEmptySecurityDraft()
     resetEmailVerificationState()
     isEditing.value = false
-    ElMessage.success('Settings updated')
+    ElMessage.success(t('Settings.messages.settingsUpdated'))
   } catch (error) {
     console.warn(error)
   } finally {