重构：重构个人中心前端代码

continew-admin-ui/src/views/system/user/center/components/security-settings/update-email.vue

@@ -15,7 +15,7 @@
         </a-typography-paragraph>
       </div>
       <div class="operation">
-        <a-link @click="toUpdate">
+        <a-link :title="$t('userCenter.securitySettings.button.update')" @click="toUpdate">
           {{ $t('userCenter.securitySettings.button.update') }}
         </a-link>
       </div>
@@ -23,96 +23,82 @@
   </a-list-item-meta>
 
   <a-modal
-    v-model:visible="visible"
     :title="$t('userCenter.securitySettings.updateEmail.modal.title')"
+    :visible="visible"
     :mask-closable="false"
+    @ok="handleUpdate"
     @cancel="handleCancel"
-    @before-ok="handleUpdate"
   >
-    <a-form ref="formRef" :model="formData" :rules="rules">
-      <a-form-item
-        field="newEmail"
-        :validate-trigger="['change', 'blur']"
-        :label="$t('userCenter.securitySettings.updateEmail.form.label.newEmail')"
-      >
+    <a-form ref="formRef" :model="form" :rules="rules">
+      <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.newEmail')" field="newEmail">
         <a-input
-          v-model="formData.newEmail"
+          v-model="form.newEmail"
           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.newEmail')"
-          size="large"
           allow-clear
-        >
-        </a-input>
+          size="large"
+        />
       </a-form-item>
-      <a-form-item
-        field="captcha"
-        :validate-trigger="['change', 'blur']"
-        :label="$t('userCenter.securitySettings.updateEmail.form.label.captcha')"
-      >
+      <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.captcha')" field="captcha">
         <a-input
-          v-model="formData.captcha"
+          v-model="form.captcha"
           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.captcha')"
+          max-length="6"
+          allow-clear
           size="large"
           style="width: 80%"
-          allow-clear
-          max-length="6"
-        >
-        </a-input>
+        />
         <a-button
-          class="captcha-btn"
+          :loading="captchaLoading"
           type="primary"
           size="large"
-          :loading="captchaLoading"
           :disabled="captchaDisable"
-          @click="sendCaptcha"
+          class="captcha-btn"
+          @click="handleSendCaptcha"
         >
           {{ captchaBtnName }}
         </a-button>
       </a-form-item>
-      <a-form-item
-        field="currentPassword"
-        :validate-trigger="['change', 'blur']"
-        :label="$t('userCenter.securitySettings.updateEmail.form.label.currentPassword')"
-      >
+      <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.currentPassword')" field="currentPassword">
         <a-input-password
-          v-model="formData.currentPassword"
+          v-model="form.currentPassword"
           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.currentPassword')"
-          size="large"
-          allow-clear
           max-length="32"
-        >
-        </a-input-password>
+          allow-clear
+          size="large"
+        />
       </a-form-item>
     </a-form>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
-  import { useLoginStore } from '@/store';
-  import { FormInstance } from '@arco-design/web-vue/es/form';
-  import useLoading from '@/hooks/loading';
-  import { FieldRule, Message } from '@arco-design/web-vue';
+  import { getCurrentInstance, ref, reactive, computed } from 'vue';
+  import { FieldRule } from '@arco-design/web-vue';
   import { getMailCaptcha } from '@/api/common/captcha';
   import { updateEmail } from '@/api/system/user-center';
+  import { useI18n } from 'vue-i18n';
+  import { useLoginStore } from '@/store';
   import { encryptByRsa } from '@/utils/encrypt';
 
+  const { proxy } = getCurrentInstance() as any;
+
   const { t } = useI18n();
-  const { loading, setLoading } = useLoading();
   const loginStore = useLoginStore();
+  const captchaTime = ref(60);
+  const captchaTimer = ref();
+  const captchaLoading = ref(false);
+  const captchaDisable = ref(false);
   const visible = ref(false);
   const captchaBtnNameKey = ref('userCenter.securitySettings.updateEmail.form.sendCaptcha');
   const captchaBtnName = computed(() => t(captchaBtnNameKey.value));
-  const captchaLoading = ref(false);
-  const captchaDisable = ref(false);
-  const captchaTime = ref(60);
-  const captchaTimer = ref();
-  const formRef = ref<FormInstance>();
-  const formData = reactive({
+
+  // 表单数据
+  const form = reactive({
     newEmail: '',
     captcha: '',
     currentPassword: '',
   });
+  // 表单验证规则
   const rules = computed((): Record<string, FieldRule[]> => {
     return {
       newEmail: [
@@ -134,10 +120,12 @@
       currentPassword: [
         { required: true, message: t('userCenter.securitySettings.updateEmail.form.error.required.currentPassword') }
       ]
-    }
+    };
   });
 
-  // 重置验证码相关
+  /**
+   * 重置验证码
+   */
   const resetCaptcha = () => {
     window.clearInterval(captchaTimer.value);
     captchaTime.value = 60;
@@ -145,69 +133,71 @@
     captchaDisable.value = false;
   }
 
-  // 发送验证码
-  const sendCaptcha = async () => {
+  /**
+   * 发送验证码
+   */
+  const handleSendCaptcha = () => {
     if (captchaLoading.value) return;
-    const errors = await formRef.value?.validateField('newEmail');
-    if (errors) return;
-    captchaLoading.value = true;
-    captchaBtnNameKey.value = 'userCenter.securitySettings.updateEmail.form.loading.sendCaptcha';
-    try {
-      const res = await getMailCaptcha({
-        email: formData.newEmail
-      });
-      if (res.success) {
-        captchaLoading.value = false;
-        captchaDisable.value = true;
-        captchaBtnNameKey.value = `${t('userCenter.securitySettings.updateEmail.form.reSendCaptcha')}(${captchaTime.value -= 1}s)`;
-        Message.success(res.msg);
-
-        captchaTimer.value = window.setInterval(function() {
-          captchaTime.value -= 1;
-          captchaBtnNameKey.value = `${t('userCenter.securitySettings.updateEmail.form.reSendCaptcha')}(${captchaTime.value}s)`;
-          if (captchaTime.value < 0) {
-            window.clearInterval(captchaTimer.value);
-            captchaTime.value = 60;
-            captchaBtnNameKey.value = t('userCenter.securitySettings.updateEmail.form.reSendCaptcha');
-            captchaDisable.value = false;
-          }
-        }, 1000);
+    proxy.$refs.formRef.validateField('newEmail', (valid: any) => {
+      if (!valid) {
+        captchaLoading.value = true;
+        captchaBtnNameKey.value = 'userCenter.securitySettings.updateEmail.form.loading.sendCaptcha';
+        getMailCaptcha({
+          email: form.newEmail
+        }).then((res) => {
+          captchaLoading.value = false;
+          captchaDisable.value = true;
+          captchaBtnNameKey.value = `${t('userCenter.securitySettings.updateEmail.form.reSendCaptcha')}(${captchaTime.value -= 1}s)`;
+          captchaTimer.value = window.setInterval(function() {
+            captchaTime.value -= 1;
+            captchaBtnNameKey.value = `${t('userCenter.securitySettings.updateEmail.form.reSendCaptcha')}(${captchaTime.value}s)`;
+            if (captchaTime.value < 0) {
+              window.clearInterval(captchaTimer.value);
+              captchaTime.value = 60;
+              captchaBtnNameKey.value = t('userCenter.securitySettings.updateEmail.form.reSendCaptcha');
+              captchaDisable.value = false;
+            }
+          }, 1000);
+          proxy.$message.success(res.msg);
+        }).catch(() => {
+          resetCaptcha();
+          captchaLoading.value = false;
+        });
       }
-    } catch (err) {
-      resetCaptcha();
-      captchaLoading.value = false;
-      console.log((err as Error));
-    }
+    });
   };
 
-  // 确定修改
-  const handleUpdate = async () => {
-    if (loading.value) return false;
-    const errors = await formRef.value?.validate();
-    if (errors) return false;
-    setLoading(true);
-    try {
-      const res = await updateEmail({
-        newEmail: formData.newEmail,
-        captcha: formData.captcha,
-        currentPassword: encryptByRsa(formData.currentPassword) || '',
-      });
-      await loginStore.getInfo();
-      if (res.success) Message.success(res.msg);
-    } finally {
-      setLoading(false);
-    }
-    return true;
-  };
-
-  // 取消修改
+  /**
+   * 取消
+   */
   const handleCancel = () => {
     visible.value = false;
-    formRef.value?.resetFields();
+    proxy.$refs.formRef.resetFields();
     resetCaptcha();
   };
 
-  // 打开修改窗口
+  /**
+   * 修改
+   */
+  const handleUpdate = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        updateEmail({
+          newEmail: form.newEmail,
+          captcha: form.captcha,
+          currentPassword: encryptByRsa(form.currentPassword) || '',
+        }).then((res) => {
+          handleCancel();
+          loginStore.getInfo();
+          proxy.$message.success(res.msg);
+        });
+      }
+    });
+  };
+
+  /**
+   * 打开修改对话框
+   */
   const toUpdate = () => {
     visible.value = true;
   };