chore(个人设置): ui调整

src/store/modules/system-language.ts

@@ -40,6 +40,11 @@ export const useSystemLanguageStore = defineStore('system-language-store', {
 
     languageOptions: defaultLanguageOptions,
   }),
+  getters: {
+    currentLanguage(state): I18n.LangType {
+      return state.currentLanguageInfo.key
+    },
+  },
   actions: {
     updateCurrentLanguageInfo(key: I18n.LangType) {
       if (this.currentLanguageInfo.key === key) return ''

src/views/personal-settings/components/mailbox-binding-modal.vue

 <script setup lang="ts">
+import { fetchEmailCode, fetchUserInfoUpdate, fetchVerifyCode } from '@/apis/user'
+import { useUserStore } from '@/store/modules/user'
+import { ss } from '@/utils/storage'
 import type { CountdownInst, FormInst, FormItemRule } from 'naive-ui'
+import isEmail from 'validator/es/lib/isEmail'
 import { onMounted, ref, shallowReadonly, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/store/modules/user'
-import isEmail from 'validator/es/lib/isEmail'
-import { fetchEmailCode, fetchUserInfoUpdate, fetchVerifyCode } from '@/apis/user'
-import { ss } from '@/utils/storage'
 
 const { t } = useI18n()
 const userStore = useUserStore()
+
 const emailInfoFormRef = useTemplateRef<FormInst>('emailInfoFormRef')
 const countdownRef = useTemplateRef<CountdownInst>('countdownRef')
 
@@ -145,6 +146,7 @@ function handleSMSCodeGain() {
       :bordered="false"
       size="medium"
       closable
+      content-style="margin-top: 20px;"
       @close="() => (isShowMailboxBindingModal = false)"
     >
       <n-form
@@ -153,16 +155,13 @@ function handleSMSCodeGain() {
         label-width="auto"
         :model="emailInfoForm"
         :rules="emailInfoFormRules"
+        size="large"
       >
         <n-form-item :label="t('common_module.email')" path="email">
           <n-input v-model:value="emailInfoForm.email" :placeholder="t('login_module.please_enter_your_email_address')">
             <template #suffix>
               <span class="mx-[10px] inline-block h-[50%] w-[2px] bg-[#e0e0e6]"></span>
-              <span
-                v-show="!isShowCountdown"
-                class="text-theme-color cursor-pointer text-[12px]"
-                @click="handleSMSCodeGain"
-              >
+              <span v-show="!isShowCountdown" class="cursor-pointer text-[12px] text-[#333]" @click="handleSMSCodeGain">
                 {{ t('login_module.get_verification_code') }}
               </span>
 
@@ -190,10 +189,16 @@ function handleSMSCodeGain() {
       <template #footer>
         <div class="text-end">
           <n-space justify="end">
-            <n-button @click="() => (isShowMailboxBindingModal = false)">
+            <n-button class="!h-[34px] !w-[96px]" round @click="() => (isShowMailboxBindingModal = false)">
               {{ t('common_module.cancel_btn_text') }}
             </n-button>
-            <n-button type="primary" :loading="mailboxBindingSubmitBtnLoading" @click="handleMailboxBindingSubmit">
+            <n-button
+              class="!h-[34px] !w-[96px]"
+              color="#6F77FF"
+              round
+              :loading="mailboxBindingSubmitBtnLoading"
+              @click="handleMailboxBindingSubmit"
+            >
               {{ t('common_module.confirm_btn_text') }}
             </n-button>
           </n-space>

src/views/personal-settings/components/password-change-modal.vue

 <script setup lang="ts">
 import { fetchEmailCode, fetchSMSCode, fetchUserPasswordUpdate, fetchVerifyCode } from '@/apis/user'
+import { useSystemLanguageStore } from '@/store/modules/system-language'
 import { useUserStore } from '@/store/modules/user'
 import { ss } from '@/utils/storage'
 import type { CountdownInst, FormInst, FormItemRule } from 'naive-ui'
@@ -8,9 +9,11 @@ import { onMounted, ref, shallowReadonly, useTemplateRef, watchEffect } from 'vu
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+const userStore = useUserStore()
+const systemLanguageStore = useSystemLanguageStore()
+
 const passwordInfoFormRef = useTemplateRef<FormInst>('passwordInfoFormRef')
 const countdownRef = useTemplateRef<CountdownInst>('countdownRef')
-const userStore = useUserStore()
 
 const isShowPasswordChangeModal = defineModel<boolean>('isShowPasswordChangeModal', { default: false })
 
@@ -186,11 +189,12 @@ function handleSMSCodeGain() {
 <template>
   <n-modal v-model:show="isShowPasswordChangeModal" :mask-closable="false" :on-after-leave="onModalAfterLeave">
     <n-card
-      class="!w-[600px]"
+      :class="systemLanguageStore.currentLanguage === 'en' ? '!w-[700px]' : '!w-[600px]'"
       :title="t('personal_settings_module.password_change')"
       :bordered="false"
       size="medium"
       closable
+      content-style="margin-top: 20px;"
       @close="() => (isShowPasswordChangeModal = false)"
     >
       <n-form
@@ -199,6 +203,7 @@ function handleSMSCodeGain() {
         label-width="auto"
         :model="passwordInfoForm"
         :rules="passwordFormRules"
+        size="large"
       >
         <n-form-item :label="t('personal_settings_module.obtaining_the_verification_code')">
           <div>
@@ -265,10 +270,16 @@ function handleSMSCodeGain() {
       <template #footer>
         <div class="text-end">
           <n-space justify="end">
-            <n-button @click="() => (isShowPasswordChangeModal = false)">
+            <n-button class="!h-[34px] !w-[96px]" round @click="() => (isShowPasswordChangeModal = false)">
               {{ t('common_module.cancel_btn_text') }}
             </n-button>
-            <n-button type="primary" :loading="passwordChangeSubmitBtnLoading" @click="handlePasswordChangeSubmit">
+            <n-button
+              class="!h-[34px] !w-[96px]"
+              color="#6F77FF"
+              round
+              :loading="passwordChangeSubmitBtnLoading"
+              @click="handlePasswordChangeSubmit"
+            >
               {{ t('common_module.confirm_btn_text') }}
             </n-button>
           </n-space>