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

2026-04-15 05:00:52 +08:00 · 2025-09-13 23:01:14 +08:00
parent 50f92f55e2
commit 7bdde68ece
29 changed files with 446 additions and 390 deletions
--- a/packages/ui/certd-client/src/components/captcha/captcha-input.vue
+++ b/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>
--- a/packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue
+++ b/packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue
@@ -1,64 +1,56 @@
 <template>
-  <div ref="captchaRef" class="captcha_input"></div>
+  <div ref="captchaRef" class="geetest_captcha_wrapper"></div>
 </template>
 <script setup lang="ts">
-import { onMounted, defineProps, defineEmits, ref } from "vue";
+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";
-const props = defineProps<{
-  modelValue?: any;
-}>();
-const emit = defineEmits(["update:modelValue", "change"]);

+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 api = {
-  async getClientParams(): Promise<any> {
-    const res = await request({
-      url: "/captcha/getParams",
-      method: "post",
-    });
-    return res;
-  },
-};
-
-// async function getCaptchaAddonDefine() {
-//   const type = settingStore.public.captchaType;
-//   const define = addonApi.getDefineByType("captcha", type);
-// }
-
 const captchaInstanceRef = ref({});
 async function init() {
-  const params = await api.getClientParams();
+  // if (!initGeetest4) {
+  //   await import("https://static.geetest.com/v4/gt4.js");
+  // }
+
+  const { captchaId } = await props.captchaGet();
  // @ts-ignore
  initGeetest4(
    {
-      captchaId: params.captchaId,
+      captchaId: captchaId,
    },
    (captcha: any) => {
      // captcha为验证码实例
      captcha.appendTo(captchaRef.value); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
      captchaInstanceRef.value.instance = captcha;
-      captchaInstanceRef.value.captchaId = params.captchaId;
+      captchaInstanceRef.value.captchaId = captchaId;
    }
  );
 }

-async function getValidatedForm() {
+function getCaptchaForm() {
  if (!captchaInstanceRef.value?.instance) {
-    notification.error({
-      message: "验证码还未初始化",
-    });
+    // notification.error({
+    //   message: "验证码还未初始化",
+    // });
    return false;
  }
-  const result = await captchaInstanceRef.value.instance.getValidate();
+  const result = captchaInstanceRef.value.instance.getValidate();
  if (!result) {
-    notification.error({
-      message: "请先完成验证码验证",
-    });
+    // notification.error({
+    //   message: "请先完成验证码验证",
+    // });
    return false;
  }
  result.captcha_id = captchaInstanceRef.value.captchaId;
@@ -66,13 +58,27 @@ async function getValidatedForm() {
  return result;
 }

-function onChange(value: string) {
+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({
-  getValidatedForm,
+  getCaptchaForm,
 });

 onMounted(async () => {
@@ -80,7 +86,7 @@ onMounted(async () => {
 });
 </script>
 <style lang="less">
-.captcha_input {
+.geetest_captcha_wrapper {
  .geetest_captcha {
    .geetest_holder {
      width: 100%;
--- a/packages/ui/certd-client/src/components/captcha/captchas/image_captcha.vue
+++ b/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>
--- a/packages/ui/certd-client/src/components/plugins/common/remote-tree-select.vue
+++ b/packages/ui/certd-client/src/components/plugins/common/remote-tree-select.vue
@@ -53,7 +53,6 @@ const pagerRef: Ref = ref({
  current: 1,
 });
 const getOptions = async () => {
-  debugger;
  if (loading.value) {
    return;
  }
--- a/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
@@ -712,7 +712,7 @@ export default {
      showRunStrategy: "Show RunStrategy",
      showRunStrategyHelper: "Allow modify the run strategy of the task",

-      captchaEnabled: "Enable Captcha",
+      captchaEnabled: "Enable Login Captcha",
      captchaHelper: "Whether to enable captcha verification for login",
      captchaType: "Captcha Type",
    },
--- a/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
@@ -715,7 +715,7 @@ export default {
      showRunStrategy: "显示运行策略选择",
      showRunStrategyHelper: "任务设置中是否允许选择运行策略",

-      captchaEnabled: "启用验证码",
+      captchaEnabled: "启用登录验证码",
      captchaHelper: "登录时是否启用验证码",
      captchaType: "验证码类型",
    },
--- a/packages/ui/certd-client/src/views/certd/addon/addon-selector/index.vue
+++ b/packages/ui/certd-client/src/views/certd/addon/addon-selector/index.vue
@@ -140,6 +140,11 @@ async function emitValue(value: any) {
 async function refreshTarget(value: any) {
  if (value > 0) {
    target.value = await api.GetSimpleInfo(value);
+  } else {
+    target.value = {
+      //captchaType会监听此字段，给个默认值
+      type: "",
+    };
  }
 }

--- a/packages/ui/certd-client/src/views/framework/forgot-password/index.vue
+++ b/packages/ui/certd-client/src/views/framework/forgot-password/index.vue
@@ -20,8 +20,11 @@
              </template>
            </a-input>
          </a-form-item>
+          <a-form-item has-feedback name="captchaForEmail" label="验证码">
+            <CaptchaInput v-model:model-value="formState.captchaForEmail"></CaptchaInput>
+          </a-form-item>
          <a-form-item has-feedback name="validateCode" label="邮件验证码">
-            <email-code v-model:value="formState.validateCode" :img-code="formState.imgCode" :email="formState.input" :random-str="formState.randomStr" verification-type="forgotPassword" />
+            <email-code v-model:value="formState.validateCode" :captcha="formState.captchaForEmail" :email="formState.input" :random-str="formState.randomStr" verification-type="forgotPassword" />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="mobile" tab="手机号找回">
@@ -32,23 +35,15 @@
              </template>
            </a-input>
          </a-form-item>
+          <a-form-item has-feedback name="captchaForSms" label="验证码">
+            <CaptchaInput v-model:model-value="formState.captchaForSms"></CaptchaInput>
+          </a-form-item>
          <a-form-item name="validateCode" label="手机验证码">
-            <sms-code
-              v-model:value="formState.validateCode"
-              :img-code="formState.imgCode"
-              :mobile="formState.input"
-              :phone-code="formState.phoneCode"
-              :random-str="formState.randomStr"
-              verification-type="forgotPassword"
-            />
+            <sms-code v-model:value="formState.validateCode" :captcha="formState.captchaForSms" :mobile="formState.input" :phone-code="formState.phoneCode" verification-type="forgotPassword" />
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

-      <a-form-item has-feedback name="imgCode" label="图片验证码">
-        <image-code ref="imageCodeRef" v-model:value="formState.imgCode" v-model:random-str="formState.randomStr"></image-code>
-      </a-form-item>
-
      <a-form-item has-feedback name="password" label="新密码">
        <a-input-password v-model:value="formState.password" placeholder="新密码" size="large" autocomplete="off">
          <template #prefix>
@@ -66,8 +61,10 @@
      <a-form-item>
        <a-button type="primary" size="large" html-type="submit" class="submit-button"> 找回密码</a-button>

-        <div v-comm="false" class="mt-2">
-          <a href="https://certd.docmirror.cn/guide/use/forgotpasswd/" target="_blank"> 管理员无绑定通信方式或MFA丢失找回 </a>
+        <div class="mt-2 flex-between">
+          <a v-comm="false" href="https://certd.docmirror.cn/guide/use/forgotpasswd/" target="_blank"> 管理员无绑定通信方式或MFA丢失找回 </a>
+
+          <router-link :to="{ name: 'login' }"> 返回登录 </router-link>
        </div>
      </a-form-item>
    </a-form>
@@ -82,6 +79,7 @@ import SmsCode from "/@/views/framework/login/sms-code.vue";
 import { utils } from "@fast-crud/fast-crud";
 import { useUserStore } from "/@/store/user";
 import { useSettingStore } from "/@/store/settings";
+import CaptchaInput from "/@/components/captcha/captcha-input.vue";
 defineOptions({
  name: "ForgotPasswordPage",
 });
@@ -89,7 +87,8 @@ defineOptions({
 const rules = {
  input: [{ required: true }],
  validateCode: [{ required: true }],
-  imgCode: [{ required: true }, { min: 4, max: 4, message: "请输入4位图片验证码" }],
+  captchaForEmail: [{ required: true }],
+  captchaForSms: [{ required: true }],
  password: [
    { required: true, trigger: "change", message: "请输入密码" },
    { min: 6, message: "至少输入6位密码" },
@@ -119,15 +118,13 @@ const forgotPasswordType = ref();
 const userStore = useUserStore();
 const settingStore = useSettingStore();
 const formRef = ref();
-const imageCodeRef = ref();

 const formState: any = reactive({
  input: "",
-  randomStr: "",
-  imgCode: "",
+  captchaForSms: null,
+  captchaForEmail: null,
  phoneCode: "86",
  validateCode: "",
-
  password: "",
  confirmPassword: "",
 });
@@ -141,7 +138,6 @@ onMounted(() => {
 watch(forgotPasswordType, () => {
  formState.input = "";
  formState.validateCode = "";
-  imageCodeRef.value.resetImageCode();
  formRef.value.clearValidate(Object.keys(formState).filter(key => !["password", "confirmPassword"].includes(key)));
 });

@@ -150,8 +146,6 @@ const handleFinish = async (values: any) => {
    toRaw({
      type: forgotPasswordType.value,
      input: formState.input,
-      randomStr: formState.randomStr,
-      imgCode: formState.imgCode,
      validateCode: formState.validateCode,
      password: formState.password,
      confirmPassword: formState.confirmPassword,
--- a/packages/ui/certd-client/src/views/framework/login/image-code.vue
+++ b/packages/ui/certd-client/src/views/framework/login/image-code.vue
@@ -1,41 +0,0 @@
-<template>
-  <div class="flex">
-    <a-input :value="value" 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="imageCodeUrl" @click="resetImageCode" />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs, defineExpose } from "vue";
-import { nanoid } from "nanoid";
-
-const props = defineProps<{
-  randomStr?: string;
-  value?: string;
-}>();
-const emit = defineEmits(["update:value", "update:randomStr", "change"]);
-
-function onChange(value: string) {
-  emit("update:value", value);
-  emit("change", value);
-}
-
-const imageCodeUrl = ref();
-function resetImageCode() {
-  const randomStr = nanoid(10);
-  let url = "api/basic/code/captcha";
-  imageCodeUrl.value = url + "?randomStr=" + randomStr;
-  emit("update:randomStr", randomStr);
-}
-
-defineExpose({
-  resetImageCode,
-})
-
-resetImageCode();
-</script>
--- a/packages/ui/certd-client/src/views/framework/login/index.vue
+++ b/packages/ui/certd-client/src/views/framework/login/index.vue
@@ -21,8 +21,8 @@
              </a-input-password>
            </a-form-item>

-            <a-form-item v-if="settingStore.sysPublic.captchaEnabled" required name="captcha">
-              <CaptchaInput ref="captchaInputRef" v-model:model-value="formState.captcha"></CaptchaInput>
+            <a-form-item v-if="settingStore.sysPublic.captchaEnabled" has-feedback required name="captcha" :rules="rules.captcha">
+              <CaptchaInput v-model:model-value="formState.captcha"></CaptchaInput>
            </a-form-item>
          </template>
        </a-tab-pane>
@@ -36,12 +36,12 @@
              </a-input>
            </a-form-item>

-            <a-form-item has-feedback name="imgCode">
-              <image-code v-model:value="formState.imgCode" v-model:random-str="formState.randomStr"></image-code>
+            <a-form-item has-feedback name="smsCaptcha">
+              <CaptchaInput v-model:model-value="formState.smsCaptcha"></CaptchaInput>
            </a-form-item>

            <a-form-item name="smsCode" :rules="rules.smsCode">
-              <sms-code v-model:value="formState.smsCode" :img-code="formState.imgCode" :mobile="formState.mobile" :phone-code="formState.phoneCode" :random-str="formState.randomStr" />
+              <sms-code v-model:value="formState.smsCode" :captcha="formState.smsCaptcha" :mobile="formState.mobile" :phone-code="formState.phoneCode" />
            </a-form-item>
          </template>
        </a-tab-pane>
@@ -91,14 +91,13 @@ import { defineComponent, nextTick, reactive, ref, toRaw } from "vue";
 import { useUserStore } from "/src/store/user";
 import { useSettingStore } from "/@/store/settings";
 import { utils } from "@fast-crud/fast-crud";
-import ImageCode from "/@/views/framework/login/image-code.vue";
 import SmsCode from "/@/views/framework/login/sms-code.vue";
 import { useI18n } from "/@/locales";
 import { LanguageToggle } from "/@/vben/layouts";
-import CaptchaInput from "./captcha-input.vue";
+import CaptchaInput from "/@/components/captcha/captcha-input.vue";
 export default defineComponent({
  name: "LoginPage",
-  components: { LanguageToggle, SmsCode, ImageCode, CaptchaInput },
+  components: { LanguageToggle, SmsCode, CaptchaInput },
  setup() {
    const { t } = useI18n();
    const verifyCodeInputRef = ref();
@@ -112,10 +111,9 @@ export default defineComponent({
      mobile: "",
      password: "",
      loginType: "password", //password
-      imgCode: "",
      smsCode: "",
-      randomStr: "",
-      captcha: {},
+      captcha: null,
+      smsCaptcha: null,
    });

    const rules = {
@@ -143,6 +141,12 @@ export default defineComponent({
          message: "请输入短信验证码",
        },
      ],
+      captcha: [
+        {
+          required: true,
+          message: "请进行验证码验证",
+        },
+      ],
    };
    const layout = {
      labelCol: {
@@ -165,10 +169,10 @@ export default defineComponent({
    const handleFinish = async (values: any) => {
      loading.value = true;
      try {
-        formState.captcha = await doCaptchaValidate();
-        if (!formState.captcha) {
-          return;
-        }
+        // formState.captcha = await doCaptchaValidate();
+        // if (!formState.captcha) {
+        //   return;
+        // }
        const loginType = formState.loginType;
        await userStore.login(loginType, toRaw(formState));
      } catch (e: any) {
@@ -204,6 +208,7 @@ export default defineComponent({
    }

    const captchaInputRef = ref();
+    const captchaInputForSmsCode = ref();
    async function doCaptchaValidate() {
      if (!sysPublicSettings.captchaEnabled) {
        return {};
@@ -235,6 +240,7 @@ export default defineComponent({
      verifyCodeInputRef,
      settingStore,
      captchaInputRef,
+      captchaInputForSmsCode,
    };
  },
 });
--- a/packages/ui/certd-client/src/views/framework/login/sms-code.vue
+++ b/packages/ui/certd-client/src/views/framework/login/sms-code.vue
@@ -5,7 +5,7 @@
        <fs-icon icon="ion:mail-outline"></fs-icon>
      </template>
    </a-input>
-    <div class="input-right">
+    <div class="input-right ml-5">
      <a-button class="getCaptcha" type="primary" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
        {{ smsTime <= 0 ? "发送" : smsTime + " s" }}
      </a-button>
@@ -21,8 +21,7 @@ const props = defineProps<{
  value?: string;
  mobile?: string;
  phoneCode?: string;
-  imgCode?: string;
-  randomStr?: string;
+  captcha?: any;
  verificationType?: string;
 }>();
 const emit = defineEmits(["update:value", "change"]);
@@ -48,8 +47,8 @@ async function sendSmsCode() {
    notification.error({ message: "请输入手机号" });
    return;
  }
-  if (!props.imgCode) {
-    notification.error({ message: "请输入图片验证码" });
+  if (!props.captcha) {
+    notification.error({ message: "请输入验证码" });
    return;
  }
  loading.value = true;
@@ -57,8 +56,7 @@ async function sendSmsCode() {
    await api.sendSmsCode({
      phoneCode: props.phoneCode,
      mobile: props.mobile,
-      imgCode: props.imgCode,
-      randomStr: props.randomStr,
+      captcha: props.captcha,
      verificationType: props.verificationType,
    });
  } finally {
--- a/packages/ui/certd-client/src/views/framework/register/email-code.vue
+++ b/packages/ui/certd-client/src/views/framework/register/email-code.vue
@@ -5,7 +5,7 @@
        <fs-icon icon="ion:mail-outline"></fs-icon>
      </template>
    </a-input>
-    <div class="input-right">
+    <div class="input-right ml-5">
      <a-button class="getCaptcha" type="primary" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
        {{ smsTime <= 0 ? "发送" : smsTime + " s" }}
      </a-button>
@@ -20,8 +20,7 @@ import * as api from "/@/store/settings/api.basic";
 const props = defineProps<{
  value?: string;
  email?: string;
-  imgCode?: string;
-  randomStr?: string;
+  captcha?: any;
  verificationType?: string;
 }>();
 const emit = defineEmits(["update:value", "change"]);
@@ -44,16 +43,15 @@ async function sendSmsCode() {
    notification.error({ message: "请输入邮箱" });
    return;
  }
-  if (!props.imgCode) {
-    notification.error({ message: "请输入图片验证码" });
+  if (!props.captcha) {
+    notification.error({ message: "请输入验证码" });
    return;
  }
  loading.value = true;
  try {
    await api.sendEmailCode({
      email: props.email,
-      imgCode: props.imgCode,
-      randomStr: props.randomStr,
+      captcha: props.captcha,
      verificationType: props.verificationType,
    });
  } finally {
--- a/packages/ui/certd-client/src/views/framework/register/index.vue
+++ b/packages/ui/certd-client/src/views/framework/register/index.vue
@@ -25,8 +25,8 @@
                </template>
              </a-input-password>
            </a-form-item>
-            <a-form-item has-feedback name="imgCode" label="图片验证码" :rules="rules.imgCode">
-              <image-code v-model:value="formState.imgCode" v-model:random-str="formState.randomStr"></image-code>
+            <a-form-item has-feedback name="captcha" label="验证码" :rules="rules.captcha">
+              <CaptchaInput v-model:model-value="formState.captcha"></CaptchaInput>
            </a-form-item>
          </template>
        </a-tab-pane>
@@ -61,12 +61,12 @@
              </a-input-password>
            </a-form-item>

-            <a-form-item has-feedback name="imgCode" label="图片验证码" :rules="rules.imgCode">
-              <image-code v-model:value="formState.imgCode" v-model:random-str="formState.randomStr"></image-code>
+            <a-form-item has-feedback name="imgCode" label="验证码" :rules="rules.imgCode">
+              <CaptchaInput v-model:model-value="formState.captchaForEmail"></CaptchaInput>
            </a-form-item>

            <a-form-item has-feedback name="validateCode" :rules="rules.validateCode" label="邮件验证码">
-              <email-code v-model:value="formState.validateCode" :img-code="formState.imgCode" :email="formState.email" :random-str="formState.randomStr" />
+              <email-code v-model:value="formState.validateCode" :captcha="formState.captchaForEmail" :email="formState.email" />
            </a-form-item>
          </template>
        </a-tab-pane>
@@ -86,13 +86,13 @@
 import { defineComponent, reactive, ref, toRaw } from "vue";
 import { useUserStore } from "/src/store/user";
 import { utils } from "@fast-crud/fast-crud";
-import ImageCode from "/@/views/framework/login/image-code.vue";
 import EmailCode from "./email-code.vue";
 import { useSettingStore } from "/@/store/settings";
 import { notification } from "ant-design-vue";
+import CaptchaInput from "/@/components/captcha/captcha-input.vue";
 export default defineComponent({
  name: "RegisterPage",
-  components: { EmailCode, ImageCode },
+  components: { CaptchaInput, EmailCode },
  setup() {
    const settingsStore = useSettingStore();
    const registerType = ref("email");
@@ -114,7 +114,7 @@ export default defineComponent({
      username: "",
      password: "",
      confirmPassword: "",
-      randomStr: "",
+      captcha: null,
    });

    const rules = {
@@ -159,17 +159,6 @@ export default defineComponent({
        },
      ],

-      imgCode: [
-        {
-          required: true,
-          message: "请输入图片验证码",
-        },
-        {
-          min: 4,
-          max: 4,
-          message: "请输入4位图片验证码",
-        },
-      ],
      smsCode: [
        {
          required: true,
@@ -198,9 +187,8 @@ export default defineComponent({
          type: registerType.value,
          password: formState.password,
          username: formState.username,
-          imgCode: formState.imgCode,
-          randomStr: formState.randomStr,
          email: formState.email,
+          captcha: formState.captcha,
          validateCode: formState.validateCode,
        }) as any
      );
@@ -214,16 +202,7 @@ export default defineComponent({
      formRef.value.resetFields();
    };

-    const imageCodeUrl = ref();
-    function resetImageCode() {
-      let url = "/basic/code";
-      imageCodeUrl.value = url + "?t=" + new Date().getTime();
-    }
-    resetImageCode();
-
    return {
-      resetImageCode,
-      imageCodeUrl,
      formState,
      formRef,
      rules,
--- a/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
@@ -51,13 +51,11 @@
        <a-switch v-model:checked="formState.public.captchaEnabled" />
        <div class="helper" v-html="t('certd.sys.setting.captchaHelper')"></div>
      </a-form-item>
-      <a-form-item v-if="formState.public.captchaEnabled" :label="t('certd.sys.setting.captchaType')" :name="['public', 'captchaAddonId']">
+      <a-form-item :label="t('certd.sys.setting.captchaType')" :name="['public', 'captchaAddonId']">
        <addon-selector v-model:model-value="formState.public.captchaAddonId" addon-type="captcha" from="sys" @selected-change="onAddonChanged" />
-
-        <a-input v-model:model-value="formState.public.captchaType" class="hidden"></a-input>
      </a-form-item>

-      <a-form-item v-if="formState.public.captchaEnabled" :name="['public', 'captchaType']" class="hidden">
+      <a-form-item :name="['public', 'captchaType']" class="hidden">
        <a-input v-model:model-value="formState.public.captchaType"></a-input>
      </a-form-item>

@@ -130,7 +128,6 @@ async function stopOtherUserTimer() {
 }

 function onAddonChanged(target: any) {
-  debugger;
  formState.public.captchaType = target.type;
 }