perf: 登录注册、找回密码都支持极验验证码和图片验证码

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex">
+    <a-input :value="valueRef" placeholder="请输入图片验证码" autocomplete="off" @update:value="onChange">
+      <template #prefix>
+        <fs-icon icon="ion:image-outline"></fs-icon>
+      </template>
+    </a-input>
+    <div class="input-right pointer" title="点击刷新">
+      <img class="image-code" :src="imageCodeSrc" @click="resetImageCode" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineEmits, defineExpose, defineProps, ref } from "vue";
+import { nanoid } from "nanoid";
+
+const props = defineProps<{
+  captchaGet?: () => Promise<any>;
+}>();
+defineOptions({
+  name: "ImageCaptcha",
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const valueRef = ref("");
+const randomStrRef = ref();
+const imageCodeSrc = ref();
+async function resetImageCode() {
+  const res = await props.captchaGet();
+  randomStrRef.value = res.randomStr;
+  valueRef.value = "";
+  emitChange(null);
+  imageCodeSrc.value = "data:image/svg+xml," + encodeURIComponent(res.imageData);
+}
+
+function getCaptchaForm() {
+  return {
+    imageCode: valueRef.value,
+    randomStr: randomStrRef.value,
+  };
+}
+defineExpose({
+  resetImageCode,
+  getCaptchaForm,
+});
+
+resetImageCode();
+
+function onChange(value: string) {
+  valueRef.value = value;
+  const form = getCaptchaForm();
+  emitChange(form);
+}
+
+function emitChange(value) {
+  emit("update:modelValue", value);
+  emit("change", value);
+}
+</script>