perf: 登录失败时清除验证码状态

packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue

@@ -2,7 +2,7 @@
   <div ref="captchaRef" class="geetest_captcha_wrapper"></div>
 </template>
 <script setup lang="ts">
-import { onMounted, defineProps, defineEmits, ref, onUnmounted } from "vue";
+import { onMounted, defineProps, defineEmits, ref, onUnmounted, Ref, watch } from "vue";
 import { useSettingStore } from "/@/store/settings";
 import { request } from "/src/api/service";
 import { notification } from "ant-design-vue";
@@ -12,13 +12,14 @@ defineOptions({
 });
 const emit = defineEmits(["update:modelValue", "change"]);
 const props = defineProps<{
+  modelValue: any;
   captchaGet: () => Promise<any>;
 }>();
 const captchaRef = ref(null);
 // const addonApi = createAddonApi();
 const settingStore = useSettingStore();
 
-const captchaInstanceRef = ref({});
+const captchaInstanceRef: Ref = ref({});
 async function init() {
   // if (!initGeetest4) {
   //   await import("https://static.geetest.com/v4/gt4.js");
@@ -35,6 +36,13 @@ async function init() {
       captcha.appendTo(captchaRef.value); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
       captchaInstanceRef.value.instance = captcha;
       captchaInstanceRef.value.captchaId = captchaId;
+
+      captcha.onSuccess(function () {
+        const form = getCaptchaForm();
+        if (form) {
+          emitChange(form);
+        }
+      });
     }
   );
 }
@@ -58,29 +66,51 @@ function getCaptchaForm() {
   return result;
 }
 
-const valueRef = ref(null);
-const timeoutId = setInterval(() => {
-  const form = getCaptchaForm();
-  if (form && valueRef.value != form) {
-    console.log("form", form);
-    valueRef.value = form;
-    emitChange(form);
-  }
-}, 1000);
+// const valueRef = ref(null);
+// const timeoutId = setInterval(() => {
+//   const form = getCaptchaForm();
+//   if (form && valueRef.value != form) {
+//     console.log("form", form);
+//     valueRef.value = form;
+//     emitChange(form);
+//   }
+// }, 1000);
 
-onUnmounted(() => {
-  clearTimeout(timeoutId);
-});
+// onUnmounted(() => {
+//   clearTimeout(timeoutId);
+// });
 
 function emitChange(value: string) {
   emit("update:modelValue", value);
   emit("change", value);
 }
+function reset() {
+  captchaInstanceRef.value.instance.reset();
+}
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  value => {
+    if (value == null) {
+      reset();
+    }
+  }
+);
 
 defineExpose({
   getCaptchaForm,
+  reset,
 });
 
+watch(
+  () => [props.captchaGet],
+  async () => {
+    await init();
+  }
+);
+
 onMounted(async () => {
   await init();
 });