Merge branch 'refs/heads/v2-dev' into v2-dev-buy

# Conflicts: # docs/.vitepress/config.ts # packages/ui/certd-client/src/views/certd/pipeline/sub-domain/index.vue
2026-05-15 12:37:30 +08:00 · 2025-09-22 22:29:59 +08:00
parent b5d8161bc2 e30db9ee77
commit 81e588a896
175 changed files with 4551 additions and 684 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -66,7 +66,7 @@ const getOptions = async () => {
  const input = (pluginType === "plugin" ? form?.input : form) || {};

  for (let key in define.input) {
-    const inWatches = props.watches.includes(key);
+    const inWatches = props.watches?.includes(key);
    const inputDefine = define.input[key];
    if (inWatches && inputDefine.required) {
      const value = input[key];
@@ -105,7 +105,7 @@ const getOptions = async () => {
  const input = (pluginType === "plugin" ? form?.input : form) || {};

  for (let key in define.input) {
-    const inWatches = props.watches.includes(key);
+    const inWatches = props.watches?.includes(key);
    const inputDefine = define.input[key];
    if (inWatches && inputDefine.required) {
      const value = input[key];
@@ -169,7 +169,7 @@ const getOptions = async () => {
 };

 const filterOption = (input: string, option: any) => {
-  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 || String(option.value).toLowerCase().indexOf(input.toLowerCase());
+  return option.label.toLowerCase().includes(input.toLowerCase()) || String(option.value).toLowerCase().includes(input.toLowerCase());
 };

 async function onClick() {
@@ -0,0 +1,191 @@
+<template>
+  <div class="remote-select">
+    <div class="flex flex-row">
+      <a-tree-select class="remote-tree-select-input" :tree-data="optionsRef" :value="value" tree-checkable allow-clear v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)"> </a-tree-select>
+      <div class="ml-5">
+        <fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
+      </div>
+    </div>
+    <div class="helper" :class="{ error: hasError }">
+      {{ message }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
+import { defineComponent, inject, ref, useAttrs, watch, Ref } from "vue";
+import { PluginDefine } from "@certd/pipeline";
+
+defineOptions({
+  name: "RemoteTreeSelect",
+});
+
+const props = defineProps<
+  {
+    watches: string[];
+    search?: boolean;
+    pager?: boolean;
+  } & ComponentPropsType
+>();
+
+const emit = defineEmits<{
+  "update:value": any;
+}>();
+
+const attrs = useAttrs();
+
+const getCurrentPluginDefine: any = inject("getCurrentPluginDefine", () => {
+  return {};
+});
+const getScope: any = inject("get:scope", () => {
+  return {};
+});
+const getPluginType: any = inject("get:plugin:type", () => {
+  return "plugin";
+});
+
+const searchKeyRef = ref("");
+const optionsRef = ref([]);
+const message = ref("");
+const hasError = ref(false);
+const loading = ref(false);
+const pagerRef: Ref = ref({
+  current: 1,
+});
+const getOptions = async () => {
+  if (loading.value) {
+    return;
+  }
+
+  if (!getCurrentPluginDefine) {
+    return;
+  }
+
+  const define: PluginDefine = getCurrentPluginDefine()?.value;
+  if (!define) {
+    return;
+  }
+  const pluginType = getPluginType();
+  const { form } = getScope();
+  const input = (pluginType === "plugin" ? form?.input : form) || {};
+
+  for (let key in define.input) {
+    const inWatches = props.watches?.includes(key);
+    const inputDefine = define.input[key];
+    if (inWatches && inputDefine.required) {
+      const value = input[key];
+      if (value == null || value === "") {
+        console.log("remote-select required", key);
+        return;
+      }
+    }
+  }
+
+  message.value = "";
+  hasError.value = false;
+  loading.value = true;
+  const pageNo = pagerRef.value.pageNo;
+  const pageSize = pagerRef.value.pageSize;
+  try {
+    const res = await doRequest(
+      {
+        type: pluginType,
+        typeName: form.type,
+        action: props.action,
+        input,
+        data: {
+          searchKey: props.search ? searchKeyRef.value : "",
+          pageNo,
+          pageSize,
+        },
+      },
+      {
+        onError(err: any) {
+          hasError.value = true;
+          message.value = `获取选项出错：${err.message}`;
+        },
+        showErrorNotify: false,
+      }
+    );
+    const list = res?.list || res || [];
+    if (list.length > 0) {
+      message.value = "获取数据成功，请从下拉框中选择";
+    } else {
+      message.value = "获取数据成功，没有数据";
+    }
+    optionsRef.value = list;
+    pagerRef.value.total = list.length;
+    if (props.pager) {
+      if (res.pageNo != null) {
+        pagerRef.value.pageNo = res.pageNo ?? 1;
+      }
+      if (res.pageSize != null) {
+        pagerRef.value.pageSize = res.pageSize ?? 100;
+      }
+      if (res.total != null) {
+        pagerRef.value.total = res.total ?? list.length;
+      }
+    }
+
+    return res;
+  } finally {
+    loading.value = false;
+  }
+};
+
+async function onClick() {
+  if (optionsRef.value?.length === 0) {
+    await refreshOptions();
+  }
+}
+
+async function refreshOptions() {
+  await getOptions();
+}
+
+async function doSearch() {
+  pagerRef.value.pageNo = 1;
+  await refreshOptions();
+}
+
+watch(
+  () => {
+    const pluginType = getPluginType();
+    const { form, key } = getScope();
+    const input = (pluginType === "plugin" ? form?.input : form) || {};
+    const watches = {};
+    for (const key of props.watches) {
+      //@ts-ignore
+      watches[key] = input[key];
+    }
+    return {
+      form: watches,
+      key,
+    };
+  },
+  async (value, oldValue) => {
+    const { form } = value;
+    const oldForm: any = oldValue?.form;
+    let changed = oldForm == null || optionsRef.value.length == 0;
+    for (const key of props.watches) {
+      //@ts-ignore
+      if (oldForm && form[key] != oldForm[key]) {
+        changed = true;
+        break;
+      }
+    }
+    if (changed) {
+      await getOptions();
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+async function onPageChange(current: any) {
+  await refreshOptions();
+}
+</script>
+
+<style lang="less"></style>
@@ -2,6 +2,7 @@ import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
 import RemoteAutoComplete from "./common/remote-auto-complete.vue";
 import RemoteSelect from "./common/remote-select.vue";
 import RemoteInput from "./common/remote-input.vue";
+import RemoteTreeSelect from "./common/remote-tree-select.vue";
 import CertDomainsGetter from "./common/cert-domains-getter.vue";
 import OutputSelector from "/@/components/plugins/common/output-selector/index.vue";
 import DnsProviderSelector from "/@/components/plugins/cert/dns-provider-selector/index.vue";
@@ -24,6 +25,7 @@ export default {
    app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
    app.component("RemoteAutoComplete", RemoteAutoComplete);
    app.component("RemoteSelect", RemoteSelect);
+    app.component("RemoteTreeSelect", RemoteTreeSelect);
    app.component("RemoteInput", RemoteInput);
    app.component("CertDomainsGetter", CertDomainsGetter);
    app.component("InputPassword", InputPassword);