feat: 验证码输入弹窗

src/views/setting/index.vue

@@ -118,7 +118,17 @@
             <div class="security-label">NEW EMAIL ADDRESS</div>
             <div class="outlined-field verify-field align-center">
               <el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
-              <div class="verify-btn">Verify</div>
+              <button
+                type="button"
+                class="verify-btn"
+                :class="{ verified: isEmailVerified }"
+                @click="handleVerifyEmail"
+              >
+                {{ isEmailVerified ? 'Verified' : 'Verify' }}
+              </button>
+            </div>
+            <div v-if="isEmailVerified" class="security-tip verified-tip">
+              Your new email has been verified and is ready to save.
             </div>
           </div>
 
@@ -219,12 +229,22 @@
       </div>
     </div>
     <Footer />
+
+    <EmailVerificationDialog
+      :visible="isVerificationDialogVisible"
+      :email="verificationTargetEmail"
+      :saving="saving"
+      @close="closeVerificationDialog"
+      @resend="handleSendVerifyCode"
+      @submit="handleVerificationSubmit"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
 import Radio from './components/Radio.vue'
 
 interface SettingsData {
@@ -294,8 +314,18 @@ 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 fullName = computed(() => {
   const data = displayData.value
@@ -313,9 +343,18 @@ const roleModel = computed({
   }
 })
 
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+const resetEmailVerificationState = () => {
+  isVerificationDialogVisible.value = false
+  verificationTargetEmail.value = ''
+  verifiedEmail.value = ''
+}
+
 const resetDraftState = () => {
   draftData.value = cloneSettingsData(sourceData.value)
   securityDraft.value = createEmptySecurityDraft()
+  resetEmailVerificationState()
 }
 
 const handleEdit = () => {
@@ -329,6 +368,7 @@ const handleAddLink = () => {
 
 const resetSecurityEmail = () => {
   securityDraft.value.newEmail = ''
+  resetEmailVerificationState()
 }
 
 const resetSecurityPassword = () => {
@@ -341,6 +381,54 @@ const handleDiscard = () => {
   isEditing.value = false
 }
 
+const closeVerificationDialog = () => {
+  isVerificationDialogVisible.value = false
+  verificationTargetEmail.value = ''
+}
+
+const handleVerifyEmail = async () => {
+  const nextEmail = normalizedNewEmail.value
+
+  if (!nextEmail) {
+    ElMessage.warning('Please enter your new email address first')
+    return
+  }
+
+  if (!emailPattern.test(nextEmail)) {
+    ElMessage.warning('Please enter a valid email address')
+    return
+  }
+
+  if (nextEmail === sourceData.value.email) {
+    ElMessage.warning('Please enter a different email address')
+    return
+  }
+
+  if (verifiedEmail.value === nextEmail) {
+    ElMessage.success('This email has already been verified')
+    return
+  }
+
+  verificationTargetEmail.value = nextEmail
+  await handleSendVerifyCode()
+  isVerificationDialogVisible.value = true
+}
+
+const handleSendVerifyCode = () => {
+  ElMessage.success('Verification code sent')
+}
+
+const handleVerificationSubmit = (code: string) => {
+  if (code.length !== 6) {
+    ElMessage.warning('Please enter the 6-digit verification code')
+    return
+  }
+
+  verifiedEmail.value = verificationTargetEmail.value
+  closeVerificationDialog()
+  ElMessage.success('Email verification completed')
+}
+
 const buildNextData = () => {
   const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
   return {
@@ -356,6 +444,11 @@ const buildNextData = () => {
 }
 
 const handleSave = async () => {
+  if (hasNewEmailChange.value && !isEmailVerified.value) {
+    ElMessage.warning('Please verify your new email before saving')
+    return
+  }
+
   const nextData = buildNextData()
   saving.value = true
   try {
@@ -365,6 +458,7 @@ const handleSave = async () => {
     })
     draftData.value = cloneSettingsData(sourceData.value)
     securityDraft.value = createEmptySecurityDraft()
+    resetEmailVerificationState()
     isEditing.value = false
     ElMessage.success('Settings updated')
   } catch (error) {
@@ -373,6 +467,25 @@ const handleSave = async () => {
     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()
+    }
+  }
+)
 </script>
 
 <style lang="less" scoped>
@@ -697,6 +810,7 @@ const handleSave = async () => {
 
       .verify-btn {
         border: none;
+        min-width: 11rem;
         height: 2.8rem;
         line-height: 2.8rem;
         border-left: 0.1rem solid #979797;
@@ -706,6 +820,12 @@ const handleSave = async () => {
         color: #232323;
         cursor: pointer;
         padding: 0 2rem;
+
+        &.verified {
+          color: #ffffff;
+          background: #232323;
+          border-left-color: #232323;
+        }
       }
 
       .password-mask {
@@ -790,6 +910,10 @@ const handleSave = async () => {
     .edit-btn {
       min-width: 12rem;
     }
+
+    .verified-tip {
+      color: #6f7f68;
+    }
   }
 }