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

packages/ui/certd-client/src/components/captcha/captcha-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="captchaComponent" v-if="settingStore.inited" ref="captchaRef" class="captcha_input" :captcha-get="getCaptcha" @change="onChange" />
+  <component :is="captchaComponent" v-if="settingStore.inited" ref="captchaRef" :model-value="modelValue" class="captcha_input" :captcha-get="getCaptcha" @change="onChange" />
 </template>
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from "vue";
@@ -7,6 +7,12 @@ import { useSettingStore } from "/@/store/settings";
 import { nanoid } from "nanoid";
 import { request } from "/@/api/service";
 
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 const captchaRef = ref(null);
 const settingStore = useSettingStore();
 
@@ -17,7 +23,7 @@ const captchaAddonId = computed(() => {
   return settingStore.sysPublic.captchaAddonId ?? 0;
 });
 const captchaComponent = computed(() => {
-  let type = "image";
+  let type: any = "image";
   if (settingStore.sysPublic.captchaAddonId && settingStore.sysPublic.captchaType) {
     type = settingStore.sysPublic.captchaType;
   }
@@ -36,7 +42,7 @@ async function getCaptcha(): Promise<any> {
   });
 }
 
-function onChange(data) {
+function onChange(data: any) {
   emits("update:modelValue", data);
   emits("change", data);
 }
@@ -44,7 +50,11 @@ function onChange(data) {
 async function getCaptchaForm() {
   return await captchaRef.value.getCaptchaForm();
 }
+async function reset() {
+  await captchaRef.value.reset();
+}
 defineExpose({
   getCaptchaForm,
+  reset,
 });
 </script>

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();
 });

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

@@ -11,10 +11,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineEmits, defineExpose, defineProps, ref } from "vue";
+import { defineEmits, defineExpose, defineProps, ref, watch } from "vue";
 import { nanoid } from "nanoid";
 
 const props = defineProps<{
+  modelValue: any;
   captchaGet?: () => Promise<any>;
 }>();
 defineOptions({
@@ -42,6 +43,7 @@ function getCaptchaForm() {
 defineExpose({
   resetImageCode,
   getCaptchaForm,
+  reset: resetImageCode,
 });
 
 resetImageCode();
@@ -52,7 +54,18 @@ function onChange(value: string) {
   emitChange(form);
 }
 
-function emitChange(value) {
+watch(
+  () => {
+    return props.modelValue;
+  },
+  value => {
+    if (value == null) {
+      reset();
+    }
+  }
+);
+
+function emitChange(value: any) {
   emit("update:modelValue", value);
   emit("change", value);
 }