feat: 验证码输入弹窗

src/views/setting/components/EmailVerificationDialog.vue

@@ -0,0 +1,253 @@
+<template>
+  <div v-if="visible" class="verification-dialog" @click.self="handleClose">
+    <div class="verification-dialog__panel">
+      <button type="button" class="verification-dialog__close" @click="handleClose">
+        <SvgIcon name="close" size="24" />
+      </button>
+
+      <div class="verification-dialog__title">Check your new email</div>
+      <div class="verification-dialog__subtitle">Enter the 6-digit code sent to</div>
+      <div class="verification-dialog__email">{{ email }}</div>
+
+      <InputCode
+        ref="verificationCodeRef"
+        class="verification-code"
+        @update:model-value="handleVerificationCodeChange"
+        @submit="handleVerificationCodeChange"
+      />
+
+      <button
+        type="button"
+        class="verification-dialog__submit"
+        :disabled="saving || verificationCode.length !== 6"
+        @click="handleSubmit"
+      >
+        Submit
+      </button>
+
+      <button
+        type="button"
+        class="verification-dialog__resend"
+        :disabled="resendCountdown > 0"
+        @click="handleResend"
+      >
+        {{ resendCountdown > 0 ? `Resend Code in ${formattedResendCountdown}` : 'Resend Code' }}
+      </button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import InputCode from '@/components/input-code.vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    email: string
+    saving?: boolean
+  }>(),
+  {
+    saving: false
+  }
+)
+
+const emit = defineEmits<{
+  close: []
+  resend: []
+  submit: [code: string]
+}>()
+
+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
+
+const formattedResendCountdown = computed(
+  () => `00:${String(resendCountdown.value).padStart(2, '0')}`
+)
+
+const clearResendCountdownTimer = () => {
+  if (resendCountdownTimer) {
+    window.clearInterval(resendCountdownTimer)
+    resendCountdownTimer = null
+  }
+}
+
+const startResendCountdown = () => {
+  clearResendCountdownTimer()
+  resendCountdown.value = RESEND_COUNTDOWN_SECONDS
+  resendCountdownTimer = window.setInterval(() => {
+    if (resendCountdown.value <= 1) {
+      resendCountdown.value = 0
+      clearResendCountdownTimer()
+      return
+    }
+
+    resendCountdown.value -= 1
+  }, 1000)
+}
+
+const resetVerificationCodeInput = async () => {
+  verificationCode.value = ''
+  await nextTick()
+  verificationCodeRef.value?.resetCode?.()
+}
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleVerificationCodeChange = (value: string) => {
+  verificationCode.value = value
+}
+
+const handleSubmit = () => {
+  if (verificationCode.value.length !== 6) return
+
+  emit('submit', verificationCode.value)
+}
+
+const handleResend = async () => {
+  if (resendCountdown.value > 0) return
+
+  emit('resend')
+  startResendCountdown()
+  await resetVerificationCodeInput()
+}
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (!visible) {
+      clearResendCountdownTimer()
+      verificationCode.value = ''
+      resendCountdown.value = RESEND_COUNTDOWN_SECONDS
+      return
+    }
+
+    await resetVerificationCodeInput()
+    startResendCountdown()
+  }
+)
+
+watch(
+  () => props.email,
+  async () => {
+    if (!props.visible) return
+
+    await resetVerificationCodeInput()
+    startResendCountdown()
+  }
+)
+
+onBeforeUnmount(() => {
+  clearResendCountdownTimer()
+})
+</script>
+
+<style lang="less" scoped>
+.verification-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.verification-dialog__panel {
+  width: 60rem;
+  padding: 4.8rem 7.2rem 5rem;
+  position: relative;
+  background: #efefef;
+  box-shadow: 0 2rem 6rem rgba(35, 35, 35, 0.14);
+}
+
+.verification-dialog__close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  border: none;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: #585858;
+  cursor: pointer;
+}
+
+.verification-dialog__title {
+  color: #232323;
+  text-align: center;
+  font-family: 'KaiseiOpti-Bold';
+  font-size: 3rem;
+}
+
+.verification-dialog__subtitle {
+  margin-top: 2rem;
+  color: #585858;
+  text-align: center;
+  font-family: 'KaiseiOpti-Regular';
+  font-size: 1.6rem;
+  line-height: 2.8rem;
+}
+
+.verification-dialog__email {
+  margin-top: 0.8rem;
+  color: #232323;
+  text-align: center;
+  font-family: 'KaiseiOpti-Bold';
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.verification-code {
+  margin-top: 4.8rem;
+  --input-code-justify-content: center;
+  --input-code-input-gap: 1.4rem;
+  --input-code-input-width: 6rem;
+  --input-code-input-height: 6rem;
+}
+
+.verification-dialog__submit {
+  width: 100%;
+  height: 4.8rem;
+  margin-top: 5rem;
+  border: 0.1rem solid #232323;
+  background: #232323;
+  color: #ffffff;
+  font-family: 'KaiseiOpti-Bold';
+  font-size: 1.6rem;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.verification-dialog__resend {
+  margin: 2rem auto 0;
+  display: block;
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: #7c7c7c;
+  font-family: 'KaiseiOpti-Regular';
+  font-size: 1.6rem;
+  line-height: 1.6;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.85;
+  }
+}
+</style>

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;
+    }
   }
 }