From 8af3463668a40b9b99febb02e3b4e0d9d8d719b4 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Tue, 20 May 2025 01:11:26 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20aaWaf=E3=80=81cdnfly=E7=AB=99=E7=82=B9?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=94=AF=E6=8C=81=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/plugin-lib/src/common/util.ts     |  3 ++
 .../plugins/common/remote-select.vue          | 44 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/plugins/plugin-lib/src/common/util.ts b/packages/plugins/plugin-lib/src/common/util.ts
index 9bf5e42b..d5a88b70 100644
--- a/packages/plugins/plugin-lib/src/common/util.ts
+++ b/packages/plugins/plugin-lib/src/common/util.ts
@@ -38,6 +38,7 @@ export function createRemoteSelectInputDefine(opts?: {
   required?: boolean;
   rules?: any;
   mergeScript?: string;
+  search?: boolean;
 }) {
   const title = opts?.title || "请选择";
   const certDomainsInputKey = opts?.certDomainsInputKey || "certDomains";
@@ -47,6 +48,7 @@ export function createRemoteSelectInputDefine(opts?: {
   const type = opts?.type || "plugin";
   const watches = opts?.watches || [];
   const helper = opts?.helper || "请选择";
+  const search = opts?.search ?? false;
   let mode = "tags";
   if (opts.multi === false) {
     mode = undefined;
@@ -63,6 +65,7 @@ export function createRemoteSelectInputDefine(opts?: {
       type,
       typeName,
       action,
+      search,
       watches: [certDomainsInputKey, accessIdInputKey, ...watches],
     },
     rules: opts?.rules,
diff --git a/packages/ui/certd-client/src/components/plugins/common/remote-select.vue b/packages/ui/certd-client/src/components/plugins/common/remote-select.vue
index e6c0c7e1..2b564bcb 100644
--- a/packages/ui/certd-client/src/components/plugins/common/remote-select.vue
+++ b/packages/ui/certd-client/src/components/plugins/common/remote-select.vue
@@ -1,7 +1,26 @@
 <template>
   <div class="remote-select">
     <div class="flex flex-row">
-      <a-select class="remote-select-input" show-search :filter-option="filterOption" :options="optionsRef" :value="value" v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)" />
+      <a-select class="remote-select-input" show-search :filter-option="filterOption" :options="optionsRef" :value="value" v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)">
+        <template #dropdownRender="{ menuNode: menu }">
+          <template v-if="search">
+            <div class="flex w-full" style="padding: 4px 8px">
+              <a-input ref="inputRef" v-model:value="searchKeyRef" class="flex-1" allow-clear placeholder="查询关键字" @keydown.enter="doSearch" />
+              <a-button class="ml-2" :loading="loading" type="text" @click="doSearch">
+                <template #icon>
+                  <search-outlined />
+                </template>
+                查询
+              </a-button>
+            </div>
+            <div v-if="hasError" class="helper p-2" :class="{ error: hasError }">
+              {{ message }}
+            </div>
+            <a-divider style="margin: 4px 0" />
+          </template>
+          <v-nodes :vnodes="menu" />
+        </template>
+      </a-select>
       <div class="ml-5">
         <fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
       </div>
@@ -13,16 +32,29 @@
 </template>
 <script setup lang="ts">
 import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
-import { inject, ref, useAttrs, watch } from "vue";
+import { defineComponent, inject, ref, useAttrs, watch } from "vue";
 import { PluginDefine } from "@certd/pipeline";
 
 defineOptions({
   name: "RemoteSelect",
 });
 
+const VNodes = defineComponent({
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    return this.vnodes;
+  },
+});
+
 const props = defineProps<
   {
     watches: string[];
+    search: boolean;
   } & ComponentPropsType
 >();
 
@@ -36,6 +68,7 @@ const getCurrentPluginDefine: any = inject("getCurrentPluginDefine");
 const getScope: any = inject("get:scope");
 const getPluginType: any = inject("get:plugin:type");
 
+const searchKeyRef = ref("");
 const optionsRef = ref([]);
 const message = ref("");
 const hasError = ref(false);
@@ -81,6 +114,9 @@ const getOptions = async () => {
         typeName: form.type,
         action: props.action,
         input,
+        data: {
+          searchKey: props.search ? searchKeyRef.value : "",
+        },
       },
       {
         onError(err: any) {
@@ -114,6 +150,10 @@ async function refreshOptions() {
   await getOptions();
 }
 
+async function doSearch() {
+  await refreshOptions();
+}
+
 watch(
   () => {
     const values = [];