chore:

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

@@ -12,6 +12,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  type: {
+    type: String,
+    default: "image",
+  },
+  addonId: {
+    type: Number,
+    default: 0,
+  },
 });
 const captchaRef = ref(null);
 const settingStore = useSettingStore();
@@ -23,7 +31,7 @@ const captchaAddonId = computed(() => {
   return settingStore.sysPublic.captchaAddonId ?? 0;
 });
 const captchaComponent = computed(() => {
-  let type: any = "image";
+  let type: any = props.type ?? "image";
   if (settingStore.sysPublic.captchaAddonId && settingStore.sysPublic.captchaType) {
     type = settingStore.sysPublic.captchaType;
   }

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

@@ -14,7 +14,6 @@ async function loadCaptchaScript() {
   await loadScript("https://static.geetest.com/v4/gt4.js");
   loaded.value = true;
 }
-loadCaptchaScript();
 
 defineOptions({
   name: "GeetestCaptcha",
@@ -25,15 +24,10 @@ const props = defineProps<{
   captchaGet: () => Promise<any>;
 }>();
 const captchaRef = ref(null);
-// const addonApi = createAddonApi();
-const settingStore = useSettingStore();
 
 const captchaInstanceRef: Ref = ref({});
 async function init() {
-  // if (!initGeetest4) {
-  //   await import("https://static.geetest.com/v4/gt4.js");
-  // }
-
+  await loadCaptchaScript();
   const { captchaId } = await props.captchaGet();
   // @ts-ignore
   initGeetest4(

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -730,6 +730,7 @@ export default {
       registerSetting: "Register Settings",
       safeSetting: "Safe Settings",
       paymentSetting: "Payment Settings",
+      captchaSetting: "Captcha Setting",
     },
   },
   modal: {

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -731,6 +731,7 @@ export default {
       registerSetting: "注册设置",
       safeSetting: "安全设置",
       paymentSetting: "支付设置",
+      captchaSetting: "验证码设置",
     },
   },
   modal: {

packages/ui/certd-client/src/views/sys/settings/index.vue

@@ -17,6 +17,9 @@
         <a-tab-pane key="safe" :tab="t('certd.sys.setting.safeSetting')">
           <SettingSafe v-if="activeKey === 'safe'" />
         </a-tab-pane>
+        <a-tab-pane key="captcha" :tab="t('certd.sys.setting.captchaSetting')">
+          <SettingCaptcha v-if="activeKey === 'captcha'" />
+        </a-tab-pane>
       </a-tabs>
     </div>
   </fs-page>
@@ -27,6 +30,8 @@ import SettingBase from "/@/views/sys/settings/tabs/base.vue";
 import SettingRegister from "/@/views/sys/settings/tabs/register.vue";
 import SettingPayment from "/@/views/sys/settings/tabs/payment.vue";
 import SettingSafe from "/@/views/sys/settings/tabs/safe.vue";
+import SettingCaptcha from "/@/views/sys/settings/tabs/captcha.vue";
+
 import { useRoute, useRouter } from "vue-router";
 import { ref } from "vue";
 import { useSettingStore } from "/@/store/settings";

packages/ui/certd-client/src/views/sys/settings/tabs/base.vue

@@ -47,24 +47,6 @@
         <div class="helper" v-html="t('certd.commonCnameHelper')"></div>
       </a-form-item>
 
-      <a-form-item :label="t('certd.sys.setting.captchaEnabled')" :name="['public', 'captchaEnabled']">
-        <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 :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-form-item>
-      <a-form-item v-if="formState.public.captchaType" :label="t('certd.sys.setting.captchaTest')">
-        <div class="flex">
-          <CaptchaInput v-model:model-value="captchaTestForm.captcha" class="w-50%"></CaptchaInput>
-          <a-button class="ml-2" type="primary" @click="doCaptchaValidate">后端验证</a-button>
-        </div>
-      </a-form-item>
-
-      <a-form-item :name="['public', 'captchaType']" class="hidden">
-        <a-input v-model:model-value="formState.public.captchaType"></a-input>
-      </a-form-item>
-
       <a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
         <a-button :loading="saveLoading" type="primary" html-type="submit">{{ t("certd.saveButton") }}</a-button>
       </a-form-item>
@@ -89,25 +71,6 @@ defineOptions({
   name: "SettingBase",
 });
 
-const captchaTestForm = reactive({
-  captcha: null,
-  pass: false,
-});
-
-async function doCaptchaValidate() {
-  if (!captchaTestForm.captcha) {
-    notification.error({
-      message: "请进行验证码验证",
-    });
-    return;
-  }
-  await api.TestCaptcha(captchaTestForm.captcha);
-  notification.success({
-    message: "校验通过",
-  });
-  captchaTestForm.pass = true;
-}
-
 const formState = reactive<Partial<SysSettings>>({
   public: {
     icpNo: "",
@@ -133,13 +96,6 @@ const onFinish = async (form: any) => {
   try {
     saveLoading.value = true;
 
-    if (form.public.captchaEnabled && !captchaTestForm.pass) {
-      notification.error({
-        message: "请先通过验证码测试之后再开启登录验证码",
-      });
-      return;
-    }
-
     await api.SysSettingsSave(form);
     await settingsStore.loadSysSettings();
     notification.success({
@@ -147,25 +103,9 @@ const onFinish = async (form: any) => {
     });
   } finally {
     saveLoading.value = false;
-    captchaTestForm.pass = false;
   }
 };
 
-const onFinishFailed = (errorInfo: any) => {
-  // console.log("Failed:", errorInfo);
-};
-
-async function stopOtherUserTimer() {
-  await api.stopOtherUserTimer();
-  notification.success({
-    message: t("certd.stopSuccess"),
-  });
-}
-
-function onAddonChanged(target: any) {
-  formState.public.captchaType = target.type;
-}
-
 const testProxyLoading = ref(false);
 async function testProxy() {
   testProxyLoading.value = true;

packages/ui/certd-client/src/views/sys/settings/tabs/captcha.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="sys-settings-form sys-settings-base">
+    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish">
+      <a-form-item :label="t('certd.sys.setting.captchaEnabled')" :name="['public', 'captchaEnabled']">
+        <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 :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-form-item>
+      <a-form-item v-if="formState.public.captchaType === settingsStore.sysPublic.captchaType" :label="t('certd.sys.setting.captchaTest')">
+        <div class="flex">
+          <CaptchaInput v-model:model-value="captchaTestForm.captcha" class="w-50%"></CaptchaInput>
+          <a-button class="ml-2" type="primary" @click="doCaptchaValidate">后端验证</a-button>
+        </div>
+      </a-form-item>
+
+      <a-form-item :name="['public', 'captchaType']" class="hidden">
+        <a-input v-model:model-value="formState.public.captchaType"></a-input>
+      </a-form-item>
+
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
+        <a-button :loading="saveLoading" type="primary" html-type="submit">{{ t("certd.saveButton") }}</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { reactive, ref } from "vue";
+import { SysSettings } from "/@/views/sys/settings/api";
+import * as api from "/@/views/sys/settings/api";
+import { merge } from "lodash-es";
+import { useSettingStore } from "/@/store/settings";
+import { notification } from "ant-design-vue";
+import { util } from "/@/utils";
+import { useI18n } from "/src/locales";
+import AddonSelector from "../../../certd/addon/addon-selector/index.vue";
+import CaptchaInput from "/@/components/captcha/captcha-input.vue";
+const { t } = useI18n();
+
+defineOptions({
+  name: "SettingCaptcha",
+});
+
+const captchaTestForm = reactive({
+  captcha: null,
+  pass: false,
+});
+
+async function doCaptchaValidate() {
+  if (!captchaTestForm.captcha) {
+    notification.error({
+      message: "请进行验证码验证",
+    });
+    return;
+  }
+  await api.TestCaptcha(captchaTestForm.captcha);
+  notification.success({
+    message: "校验通过",
+  });
+  captchaTestForm.pass = true;
+}
+
+const formState = reactive<Partial<SysSettings>>({
+  public: {
+    icpNo: "",
+    mpsNo: "",
+  },
+  private: {},
+});
+
+async function loadSysSettings() {
+  const data: any = await api.SysSettingsGet();
+  merge(formState, data);
+}
+
+const saveLoading = ref(false);
+loadSysSettings();
+const settingsStore = useSettingStore();
+const onFinish = async (form: any) => {
+  try {
+    saveLoading.value = true;
+
+    if (form.public.captchaEnabled && !captchaTestForm.pass) {
+      if (form.public.captchaType === settingsStore.sysPublic.captchaType) {
+        notification.error({
+          message: "您正在开启登录验证码，请先通过验证码测试，后端校验成功后才能保存",
+        });
+      } else {
+        notification.error({
+          message: "您正在开启登录验证码，请先关闭登录验证码开关，保存，然后会显示验证码，进行验证码测试，后端校验成功，之后再开启登录验证码，并保存",
+        });
+      }
+
+      return;
+    }
+
+    await api.SysSettingsSave(form);
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: t("certd.saveSuccess"),
+    });
+  } catch (e) {
+    console.error(e);
+    clearValidState();
+  } finally {
+    saveLoading.value = false;
+  }
+};
+
+function clearValidState() {
+  captchaTestForm.pass = false;
+  captchaTestForm.captcha = null;
+}
+
+function onAddonChanged(target: any) {
+  formState.public.captchaType = target.type;
+  clearValidState();
+}
+</script>
+<style lang="less">
+.sys-settings-base {
+}
+</style>