perf: aaWaf、cdnfly站点选择支持查询

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 = [];