perf: 登录支持极验验证码

2025-11-25 09:10:11 +08:00 · 2025-09-11 23:47:05 +08:00
parent 65f34f1d31
commit 370db62bf0
22 changed files with 552 additions and 129 deletions
--- a/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
@@ -711,6 +711,10 @@ export default {
    setting: {
      showRunStrategy: "Show RunStrategy",
      showRunStrategyHelper: "Allow modify the run strategy of the task",
+
+      captchaEnabled: "Enable Captcha",
+      captchaHelper: "Whether to enable captcha verification for login",
+      captchaType: "Captcha Type",
    },
  },
  modal: {
@@ -731,4 +735,8 @@ export default {
    challengeSetting: "Challenge Setting",
    gotoCnameTip: "Please go to CNAME Record Page",
  },
+  addonSelector: {
+    select: "Select",
+    placeholder: "select please",
+  },
 };
--- a/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
@@ -714,6 +714,10 @@ export default {
    setting: {
      showRunStrategy: "显示运行策略选择",
      showRunStrategyHelper: "任务设置中是否允许选择运行策略",
+
+      captchaEnabled: "启用验证码",
+      captchaHelper: "登录时是否启用验证码",
+      captchaType: "验证码类型",
    },
  },
  modal: {
@@ -734,4 +738,8 @@ export default {
    challengeSetting: "校验配置",
    gotoCnameTip: "CNAME域名配置请前往CNAME记录页面添加",
  },
+  addonSelector: {
+    select: "选择",
+    placeholder: "请选择",
+  },
 };
--- 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
@@ -0,0 +1,173 @@
+<template>
+  <div class="addon-selector">
+    <div class="flex-o w-100">
+      <!--      <fs-dict-select class="flex-1" :value="modelValue" :dict="optionsDictRef" :disabled="disabled" :render-label="renderLabel" :slots="selectSlots" :allow-clear="true" v-bind="select" @update:value="onChange" />-->
+      <span v-if="modelValue" class="mr-5 cd-flex-inline">
+        <a-tag class="mr-5" color="green">{{ target?.name || modelValue }}</a-tag>
+        <fs-icon class="cd-icon-button" icon="ion:close-circle-outline" @click="clear"></fs-icon>
+      </span>
+      <span v-else class="mlr-5 text-gray">{{ placeholder || t("certd.addonSelector.placeholder") }}</span>
+      <fs-table-select
+        ref="tableSelectRef"
+        class="flex-0"
+        :model-value="modelValue"
+        :dict="optionsDictRef"
+        :create-crud-options="createCrudOptionsWithApi"
+        :crud-options-override="{
+          search: { show: false },
+          table: {
+            scroll: {
+              x: 540,
+            },
+          },
+        }"
+        :show-current="false"
+        :show-select="false"
+        :dialog="{ width: 960 }"
+        :destroy-on-close="false"
+        height="400px"
+        v-bind="tableSelect"
+        @update:model-value="onChange"
+        @dialog-closed="doRefresh"
+      >
+        <template #default="scope">
+          <fs-button class="ml-5" :disabled="disabled" :size="size" type="primary" :text="t('certd.addonSelector.select')" @click="scope.open" />
+        </template>
+      </fs-table-select>
+    </div>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { inject, ref, Ref, watch } from "vue";
+import { createAddonApi } from "../api";
+import { message } from "ant-design-vue";
+import { dict } from "@fast-crud/fast-crud";
+import createCrudOptions from "../crud";
+import { addonProvide } from "../common";
+import { useUserStore } from "/@/store/user";
+import { useI18n } from "/src/locales";
+
+const { t } = useI18n();
+
+defineOptions({
+  name: "AddonSelector",
+});
+
+const props = defineProps<{
+  modelValue?: number | string | number[] | string[];
+  type?: string;
+  placeholder?: string;
+  size?: string;
+  disabled?: boolean;
+  select?: any;
+  tableSelect?: any;
+  addonType: string;
+  from?: string;
+}>();
+
+const onChange = async (value: number) => {
+  await emitValue(value);
+};
+
+const emit = defineEmits(["update:modelValue", "selected-change", "change"]);
+
+const api = createAddonApi({
+  from: props.from,
+  addonType: props.addonType,
+});
+addonProvide(api);
+
+function createCrudOptionsWithApi(opts: any) {
+  opts.context = {
+    api,
+    addonType: props.addonType,
+  };
+  return createCrudOptions(opts);
+}
+
+const tableSelectRef = ref();
+const optionsDictRef = dict({
+  url: `/addon/options?addonType=${props.addonType}`,
+  value: "id",
+  label: "name",
+});
+
+const renderLabel = (option: any) => {
+  return <span>{option.name}</span>;
+};
+
+async function openTableSelectDialog() {
+  selectOpened.value = false;
+  await tableSelectRef.value.open({});
+  await tableSelectRef.value.crudExpose.openAdd({});
+}
+
+const selectOpened = ref(false);
+const selectSlots = ref({
+  dropdownRender({ menuNode, props }: any) {
+    const res = [];
+    res.push(menuNode);
+    // res.push(<a-divider style="margin: 4px 0" />);
+    // res.push(<a-space style="padding: 4px 8px" />);
+    // res.push(<fs-button class="w-100" type="text" icon="plus-outlined" text="新建通知渠道" onClick={openTableSelectDialog}></fs-button>);
+    return res;
+  },
+});
+
+const target: Ref<any> = ref({});
+
+function clear() {
+  if (props.disabled) {
+    return;
+  }
+  emitValue(null);
+}
+
+const userStore = useUserStore();
+
+async function emitValue(value: any) {
+  // target.value = optionsDictRef.dataMap[value];
+  const userId = userStore.userInfo.id;
+  if (pipeline?.value && pipeline.value.userId !== userId) {
+    message.error(`对不起，您不能修改他人流水线的${props.addonType}设置`);
+    return;
+  }
+  emit("change", value);
+  emit("update:modelValue", value);
+}
+
+async function refreshTarget(value: any) {
+  if (value > 0) {
+    target.value = await api.GetSimpleInfo(value);
+  }
+}
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  async value => {
+    // await optionsDictRef.loadDict();
+    //@ts-ignore
+    await refreshTarget(value);
+    // target.value = optionsDictRef.dataMap[value];
+    emit("selected-change", target.value);
+  },
+  {
+    immediate: true,
+  }
+);
+
+//当不在pipeline中编辑时，可能为空
+const pipeline = inject("pipeline", null);
+
+async function doRefresh() {
+  await optionsDictRef.reloadDict();
+}
+</script>
+<style lang="less">
+.addon-selector {
+  width: 100%;
+}
+</style>
--- a/packages/ui/certd-client/src/views/certd/addon/api.ts
+++ b/packages/ui/certd-client/src/views/certd/addon/api.ts
@@ -1,14 +1,23 @@
 import { request } from "/src/api/service";
 import { RequestHandleReq } from "/@/components/plugins/lib";

-export function createAddonApi() {
-  const apiPrefix = "/addon";
+export function createAddonApi(opts: { from: any; addonType: string }) {
+  let apiPrefix = "/addon";
+  if (opts.from === "sys") {
+    apiPrefix = "/sys/addon";
+  }
  return {
    async GetList(query: any) {
      return await request({
        url: apiPrefix + "/page",
        method: "post",
-        data: query,
+        data: {
+          ...query,
+          query: {
+            addonType: opts.addonType,
+            ...query.query,
+          },
+        },
      });
    },

@@ -16,7 +25,10 @@ export function createAddonApi() {
      return await request({
        url: apiPrefix + "/add",
        method: "post",
-        data: obj,
+        data: {
+          ...obj,
+          addonType: opts.addonType,
+        },
      });
    },

@@ -46,7 +58,7 @@ export function createAddonApi() {

    async GetOptions(id: number) {
      return await request({
-        url: apiPrefix + "/options",
+        url: apiPrefix + `/options?addonType=${opts.addonType}`,
        method: "post",
      });
    },
@@ -68,22 +80,22 @@ export function createAddonApi() {

    async GetSimpleInfo(id: number) {
      return await request({
-        url: apiPrefix + "/simpleInfo",
+        url: apiPrefix + `/simpleInfo?addonType=${opts.addonType}`,
        method: "post",
        params: { id },
      });
    },

-    async GetDefineTypes(addonType: string) {
+    async GetDefineTypes() {
      return await request({
-        url: apiPrefix + `/getTypeDict?addonType=${addonType}`,
+        url: apiPrefix + `/getTypeDict?addonType=${opts.addonType}`,
        method: "post",
      });
    },

    async GetProviderDefine(type: string) {
      return await request({
-        url: apiPrefix + "/define",
+        url: apiPrefix + `/define?addonType=${opts.addonType}`,
        method: "post",
        params: { type },
      });
@@ -91,14 +103,14 @@ export function createAddonApi() {

    async GetProviderDefineByType(type: string) {
      return await request({
-        url: apiPrefix + "/defineByType",
+        url: apiPrefix + `/defineByType?addonType=${opts.addonType}`,
        method: "post",
        params: { type },
      });
    },

    async Handle(req: RequestHandleReq, opts: any = {}) {
-      const url = `/pi/handle/${req.type}`;
+      const url = `/handle/${req.type}?addonType=${opts.addonType}`;
      const { typeName, action, data, input } = req;
      const res = await request({
        url,
--- a/packages/ui/certd-client/src/views/certd/addon/common.tsx
+++ b/packages/ui/certd-client/src/views/certd/addon/common.tsx
@@ -5,6 +5,7 @@ import { forEach, get, merge, set } from "lodash-es";
 import { Modal } from "ant-design-vue";
 import { mitter } from "/@/utils/util.mitt";
 import { useI18n } from "/src/locales";
+import * as pipelineApi from "/@/views/certd/pipeline/api";

 export function addonProvide(api: any) {
  provide("addonApi", api);
@@ -13,13 +14,13 @@ export function addonProvide(api: any) {
  });
 }

-export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
+export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any, addonType: string) {
  const { t } = useI18n();
-  const addonTypeTypeDictRef = dict({
-    data: [{ value: "captcha", label: "验证码" }],
-  });
+  // const addonTypeTypeDictRef = dict({
+  //   data: [{ value: "captcha", label: "验证码" }],
+  // });
  const addonTypeDictRef = dict({
-    url: "/addon/getTypeDict?addonType=captcha",
+    url: `/addon/getTypeDict?addonType=${addonType}`,
  });
  const defaultPluginConfig = {
    component: {
@@ -61,7 +62,6 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
      }
      //字段配置赋值
      columnsRef.value[key] = column;
-      console.log("form", columnsRef.value, form);
    });
  }

@@ -79,30 +79,30 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
        show: false,
      },
    },
-    addonType: {
-      title: "Addon类型",
-      type: "dict-select",
-      dict: addonTypeTypeDictRef,
-      search: {
-        show: false,
-      },
-      column: {
-        width: 200,
-        component: {
-          color: "auto",
-        },
-      },
-      form: {
-        onChange(ctx: { value: any }) {
-          addonTypeDictRef.url = `/addon/getTypeDict?addonType=${ctx.value}`;
-        },
-      },
-      editForm: {
-        component: {
-          disabled: false,
-        },
-      },
-    },
+    // addonType: {
+    //   title: "Addon类型",
+    //   type: "dict-select",
+    //   dict: addonTypeTypeDictRef,
+    //   search: {
+    //     show: false,
+    //   },
+    //   column: {
+    //     width: 200,
+    //     component: {
+    //       color: "auto",
+    //     },
+    //   },
+    //   form: {
+    //     onChange(ctx: { value: any }) {
+    //       addonTypeDictRef.url = `/addon/getTypeDict?addonType=${ctx.value}`;
+    //     },
+    //   },
+    //   editForm: {
+    //     component: {
+    //       disabled: false,
+    //     },
+    //   },
+    // },
    type: {
      title: t("certd.notificationType"),
      type: "dict-select",
--- a/packages/ui/certd-client/src/views/certd/addon/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/addon/crud.tsx
@@ -1,9 +1,10 @@
 import { ref } from "vue";
 import { getCommonColumnDefine } from "./common";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { createAddonApi } from "/@/views/certd/addon/api";
-const api = createAddonApi();
+
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const api = context.api;
+  const addonType = context.addonType;
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return await api.GetList(query);
  };
@@ -25,7 +26,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
  };

  const typeRef = ref();
-  const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api);
+  const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api, addonType);
  return {
    crudOptions: {
      request: {
--- a/packages/ui/certd-client/src/views/certd/addon/index.vue
+++ b/packages/ui/certd-client/src/views/certd/addon/index.vue
@@ -14,14 +14,14 @@
 import { defineComponent, onActivated, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { createNotificationApi } from "./api";
-import { notificationProvide } from "/@/views/certd/notification/common";
+import { createAddonApi } from "./api";
+import { addonProvide } from "/@/views/certd/addon/common";

 export default defineComponent({
-  name: "NotificationManager",
+  name: "AddonManager",
  setup() {
-    const api = createNotificationApi();
-    notificationProvide(api);
+    const api = createAddonApi();
+    addonProvide(api);
    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });

    // 页面打开后获取列表数据
--- a/packages/ui/certd-client/src/views/framework/login/captcha-input.vue
+++ b/packages/ui/certd-client/src/views/framework/login/captcha-input.vue
@@ -0,0 +1,90 @@
+<template>
+  <div ref="captchaRef" class="captcha_input"></div>
+</template>
+<script setup lang="ts">
+import { onMounted, defineProps, defineEmits, ref } 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"]);
+
+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();
+  // @ts-ignore
+  initGeetest4(
+    {
+      captchaId: params.captchaId,
+    },
+    (captcha: any) => {
+      // captcha为验证码实例
+      captcha.appendTo(captchaRef.value); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
+      captchaInstanceRef.value.instance = captcha;
+      captchaInstanceRef.value.captchaId = params.captchaId;
+    }
+  );
+}
+
+async function getValidatedForm() {
+  if (!captchaInstanceRef.value?.instance) {
+    notification.error({
+      message: "验证码还未初始化",
+    });
+    return false;
+  }
+  const result = await captchaInstanceRef.value.instance.getValidate();
+  if (!result) {
+    notification.error({
+      message: "请先完成验证码验证",
+    });
+    return false;
+  }
+  result.captcha_id = captchaInstanceRef.value.captchaId;
+
+  return result;
+}
+
+function onChange(value: string) {
+  emit("update:modelValue", value);
+  emit("change", value);
+}
+
+defineExpose({
+  getValidatedForm,
+});
+
+onMounted(async () => {
+  await init();
+});
+</script>
+<style lang="less">
+.captcha_input {
+  .geetest_captcha {
+    .geetest_holder {
+      width: 100%;
+    }
+  }
+}
+</style>
--- a/packages/ui/certd-client/src/views/framework/login/captcha.vue
+++ b/packages/ui/certd-client/src/views/framework/login/captcha.vue
@@ -1,46 +0,0 @@
-<template>
-  <div class="captcha"></div>
-</template>
-<script setup lang="ts">
-import { doRequest } from "/@/components/plugins/lib";
-import { createAddonApi } from "/src/api/modules/addon";
-import { useSettingStore } from "/@/store/settings";
-const props = defineProps<{
-  modelValue?: any;
-}>();
-const emit = defineEmits(["update:modelValue", "change"]);
-
-const addonApi = createAddonApi();
-const settingStore = useSettingStore();
-async function getCaptchaAddonDefine() {
-  const type = settingStore.public.captchaType;
-  const define = addonApi.getDefineByType("captcha", type);
-
-  const res = await doRequest(
-    {
-      addonId: settingStore.public.captchaAddonId
-      type: "captcha",
-      typeName: type,
-      action: "onGetParams",
-    },
-  );
-}
-
-function init() {
-  // @ts-ignore
-  initGeetest4(
-    {
-      captchaId: "您的captchaId",
-    },
-    (captcha: any) => {
-      // captcha为验证码实例
-      captcha.appendTo(".captcha"); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
-    }
-  );
-}
-
-function onChange(value: string) {
-  emit("update:modelValue", value);
-  emit("change", value);
-}
-</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 required name="captcha">
-              <captcha v-model:model-value="formState.captcha"></captcha>
+            <a-form-item v-if="settingStore.sysPublic.captchaEnabled" required name="captcha">
+              <CaptchaInput ref="captchaInputRef" v-model:model-value="formState.captcha"></CaptchaInput>
            </a-form-item>
          </template>
        </a-tab-pane>
@@ -95,10 +95,10 @@ 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";
 export default defineComponent({
  name: "LoginPage",
-  components: { LanguageToggle, SmsCode, ImageCode },
+  components: { LanguageToggle, SmsCode, ImageCode, CaptchaInput },
  setup() {
    const { t } = useI18n();
    const verifyCodeInputRef = ref();
@@ -165,6 +165,10 @@ export default defineComponent({
    const handleFinish = async (values: any) => {
      loading.value = true;
      try {
+        formState.captcha = await doCaptchaValidate();
+        if (!formState.captcha) {
+          return;
+        }
        const loginType = formState.loginType;
        await userStore.login(loginType, toRaw(formState));
      } catch (e: any) {
@@ -199,6 +203,20 @@ export default defineComponent({
      return sysPublicSettings.registerEnabled && (sysPublicSettings.usernameRegisterEnabled || sysPublicSettings.emailRegisterEnabled);
    }

+    const captchaInputRef = ref();
+    async function doCaptchaValidate() {
+      if (!sysPublicSettings.captchaEnabled) {
+        return {};
+      }
+      const res = await captchaInputRef.value.getValidatedForm();
+      if (!res) {
+        return false;
+      }
+      return {
+        ...res,
+      };
+    }
+
    return {
      t,
      loading,
@@ -216,6 +234,7 @@ export default defineComponent({
      handleTwoFactorSubmit,
      verifyCodeInputRef,
      settingStore,
+      captchaInputRef,
    };
  },
 });
--- a/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
@@ -47,6 +47,20 @@
        <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 v-if="formState.public.captchaEnabled" :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-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>
@@ -63,7 +77,7 @@ 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";
 const { t } = useI18n();

 defineOptions({
@@ -115,6 +129,11 @@ async function stopOtherUserTimer() {
  });
 }

+function onAddonChanged(target: any) {
+  debugger;
+  formState.public.captchaType = target.type;
+}
+
 const testProxyLoading = ref(false);
 async function testProxy() {
  testProxyLoading.value = true;