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

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

@@ -0,0 +1,50 @@
+<template>
+  <component :is="captchaComponent" v-if="settingStore.inited" ref="captchaRef" class="captcha_input" :captcha-get="getCaptcha" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref, computed, defineAsyncComponent } from "vue";
+import { useSettingStore } from "/@/store/settings";
+import { nanoid } from "nanoid";
+import { request } from "/@/api/service";
+
+const captchaRef = ref(null);
+const settingStore = useSettingStore();
+
+const emits = defineEmits(["update:modelValue", "change"]);
+const captchaImpls = import.meta.glob("./captchas/*.vue");
+
+const captchaAddonId = computed(() => {
+  return settingStore.sysPublic.captchaAddonId ?? 0;
+});
+const captchaComponent = computed(() => {
+  let type = "image";
+  if (settingStore.sysPublic.captchaAddonId && settingStore.sysPublic.captchaType) {
+    type = settingStore.sysPublic.captchaType;
+  }
+  const componentName = `${type}_captcha`;
+  return defineAsyncComponent(captchaImpls[`./captchas/${componentName}.vue`]);
+});
+
+async function getCaptcha(): Promise<any> {
+  const randomStr = nanoid(10);
+  return await request({
+    url: `/basic/code/captcha/get?randomStr=${randomStr}`,
+    method: "post",
+    data: {
+      captchaAddonId: captchaAddonId.value,
+    },
+  });
+}
+
+function onChange(data) {
+  emits("update:modelValue", data);
+  emits("change", data);
+}
+
+async function getCaptchaForm() {
+  return await captchaRef.value.getCaptchaForm();
+}
+defineExpose({
+  getCaptchaForm,
+});
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+  <div ref="captchaRef" class="geetest_captcha_wrapper"></div>
+</template>
+<script setup lang="ts">
+import { onMounted, defineProps, defineEmits, ref, onUnmounted } from "vue";
+import { useSettingStore } from "/@/store/settings";
+import { request } from "/src/api/service";
+import { notification } from "ant-design-vue";
+
+defineOptions({
+  name: "GeetestCaptcha",
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const props = defineProps<{
+  captchaGet: () => Promise<any>;
+}>();
+const captchaRef = ref(null);
+// const addonApi = createAddonApi();
+const settingStore = useSettingStore();
+
+const captchaInstanceRef = ref({});
+async function init() {
+  // if (!initGeetest4) {
+  //   await import("https://static.geetest.com/v4/gt4.js");
+  // }
+
+  const { captchaId } = await props.captchaGet();
+  // @ts-ignore
+  initGeetest4(
+    {
+      captchaId: captchaId,
+    },
+    (captcha: any) => {
+      // captcha为验证码实例
+      captcha.appendTo(captchaRef.value); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
+      captchaInstanceRef.value.instance = captcha;
+      captchaInstanceRef.value.captchaId = captchaId;
+    }
+  );
+}
+
+function getCaptchaForm() {
+  if (!captchaInstanceRef.value?.instance) {
+    // notification.error({
+    //   message: "验证码还未初始化",
+    // });
+    return false;
+  }
+  const result = captchaInstanceRef.value.instance.getValidate();
+  if (!result) {
+    // notification.error({
+    //   message: "请先完成验证码验证",
+    // });
+    return false;
+  }
+  result.captcha_id = captchaInstanceRef.value.captchaId;
+
+  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);
+
+onUnmounted(() => {
+  clearTimeout(timeoutId);
+});
+
+function emitChange(value: string) {
+  emit("update:modelValue", value);
+  emit("change", value);
+}
+
+defineExpose({
+  getCaptchaForm,
+});
+
+onMounted(async () => {
+  await init();
+});
+</script>
+<style lang="less">
+.geetest_captcha_wrapper {
+  .geetest_captcha {
+    .geetest_holder {
+      width: 100%;
+    }
+  }
+}
+</style>

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>