perf: 优化站点选择组件，切换选择时不刷新列表

packages/core/pipeline/src/context/index.ts

@@ -6,9 +6,9 @@ export type PipelineContext = IContext;
 export type PageReq = {
   offset?: number;
   limit?: number;
-  query?: string;
-  sortBy?: string;
-  sortOrder?: "asc" | "desc";
+  searchKey?: string;
+  // sortBy?: string;
+  // sortOrder?: "asc" | "desc";
 };
 
 export type PageRes = {

packages/plugins/plugin-lib/src/common/util.ts

@@ -39,6 +39,8 @@ export function createRemoteSelectInputDefine(opts?: {
   rules?: any;
   mergeScript?: string;
   search?: boolean;
+  pager?: boolean;
+  component?: any;
 }) {
   const title = opts?.title || "请选择";
   const certDomainsInputKey = opts?.certDomainsInputKey || "certDomains";
@@ -49,6 +51,7 @@ export function createRemoteSelectInputDefine(opts?: {
   const watches = opts?.watches || [];
   const helper = opts?.helper || "请选择";
   const search = opts?.search ?? false;
+  const pager = opts?.pager ?? true;
   let mode = "tags";
   if (opts.multi === false) {
     mode = undefined;
@@ -66,7 +69,9 @@ export function createRemoteSelectInputDefine(opts?: {
       typeName,
       action,
       search,
+      pager,
       watches: [certDomainsInputKey, accessIdInputKey, ...watches],
+      ...opts.component,
     },
     rules: opts?.rules,
     required: opts.required ?? true,

packages/ui/certd-client/src/components/plugins/common/remote-select.vue

@@ -19,6 +19,10 @@
             <a-divider style="margin: 4px 0" />
           </template>
           <v-nodes :vnodes="menu" />
+
+          <div v-if="pager" class="pager text-center p-5">
+            <a-pagination v-model:current="pagerRef.current" simple :total="pagerRef.total" :page-size="pagerRef.limit" />
+          </div>
         </template>
       </a-select>
       <div class="ml-5">
@@ -32,7 +36,7 @@
 </template>
 <script setup lang="ts">
 import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
-import { defineComponent, inject, ref, useAttrs, watch } from "vue";
+import { defineComponent, inject, ref, useAttrs, watch, Ref } from "vue";
 import { PluginDefine } from "@certd/pipeline";
 
 defineOptions({
@@ -54,7 +58,8 @@ const VNodes = defineComponent({
 const props = defineProps<
   {
     watches: string[];
-    search: boolean;
+    search?: boolean;
+    pager?: boolean;
   } & ComponentPropsType
 >();
 
@@ -73,6 +78,9 @@ 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;
@@ -107,6 +115,7 @@ const getOptions = async () => {
   loading.value = true;
   optionsRef.value = [];
 
+  const offset = (pagerRef.value.current - 1) * (pagerRef.value.limit ?? 100);
   try {
     const res = await doRequest(
       {
@@ -116,6 +125,8 @@ const getOptions = async () => {
         input,
         data: {
           searchKey: props.search ? searchKeyRef.value : "",
+          offset: offset,
+          limit: pagerRef.value.limit,
         },
       },
       {
@@ -126,10 +137,26 @@ const getOptions = async () => {
         showErrorNotify: false,
       }
     );
-    if (res && res.length > 0) {
+    const list = res?.list || res || [];
+    if (list.length > 0) {
       message.value = "获取数据成功，请从下拉框中选择";
     }
-    optionsRef.value = res;
+    optionsRef.value = list;
+    pagerRef.value.total = list.length;
+    if (props.pager) {
+      if (res.offset != null) {
+        pagerRef.value.offset = res.offset ?? 0;
+      }
+      if (res.limit != null) {
+        pagerRef.value.limit = res.limit ?? 100;
+      }
+      if (res.total != null) {
+        pagerRef.value.total = res.total ?? list.length;
+      }
+      const { offset, limit } = pagerRef.value;
+      pagerRef.value.current = offset % limit === 0 ? offset / limit + 1 : offset / limit;
+    }
+
     return res;
   } finally {
     loading.value = false;
@@ -151,27 +178,37 @@ async function refreshOptions() {
 }
 
 async function doSearch() {
+  pagerRef.value.current = 1;
   await refreshOptions();
 }
 
 watch(
   () => {
-    const values = [];
-
     const pluginType = getPluginType();
-    const { form } = getScope();
+    const { form, key } = getScope();
     const input = pluginType === "plugin" ? form.input : form;
-
-    for (const item of props.watches) {
-      values.push(input[item]);
+    const watches = {};
+    for (const key of props.watches) {
+      watches[key] = input[key];
     }
     return {
-      form: input,
-      watched: values,
+      form: watches,
+      key,
     };
   },
-  async () => {
-    await getOptions();
+  async (value, oldValue) => {
+    const { form } = value;
+    const oldForm = oldValue.form;
+    let changed = oldForm == null || optionsRef.value.length == 0;
+    for (const key of props.watches) {
+      if (form[key] != oldForm[key]) {
+        changed = true;
+        break;
+      }
+    }
+    if (changed) {
+      await getOptions();
+    }
   },
   {
     immediate: true,

packages/ui/certd-server/src/plugins/plugin-farcdn/plugins/plugin-refresh-cert.ts

@@ -53,6 +53,7 @@ export class FarcdnRefreshCert extends AbstractPlusTaskPlugin {
     createRemoteSelectInputDefine({
       title: "证书Id",
       helper: "要更新的Farcdn证书id",
+
       action: FarcdnRefreshCert.prototype.onGetCertList.name
     })
   )

pnpm-lock.yaml

@@ -46,7 +46,7 @@ importers:
   packages/core/acme-client:
     dependencies:
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../basic
       '@peculiar/x509':
         specifier: ^1.11.0
@@ -207,10 +207,10 @@ importers:
   packages/core/pipeline:
     dependencies:
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../basic
       '@certd/plus-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../pro/plus-core
       dayjs:
         specifier: ^1.11.7
@@ -415,7 +415,7 @@ importers:
   packages/libs/lib-k8s:
     dependencies:
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@kubernetes/client-node':
         specifier: 0.21.0
@@ -455,16 +455,16 @@ importers:
   packages/libs/lib-server:
     dependencies:
       '@certd/acme-client':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/acme-client
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@certd/plus-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../pro/plus-core
       '@midwayjs/cache':
         specifier: ~3.14.0
@@ -607,16 +607,16 @@ importers:
   packages/plugins/plugin-cert:
     dependencies:
       '@certd/acme-client':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/acme-client
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@certd/plugin-lib':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../plugin-lib
       '@google-cloud/publicca':
         specifier: ^1.3.0
@@ -695,10 +695,10 @@ importers:
         specifier: ^3.787.0
         version: 3.810.0(aws-crt@1.26.2)
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@kubernetes/client-node':
         specifier: 0.21.0
@@ -786,19 +786,19 @@ importers:
   packages/pro/commercial-core:
     dependencies:
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/lib-server':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-server
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@certd/plugin-plus':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../plugin-plus
       '@certd/plus-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../plus-core
       '@midwayjs/core':
         specifier: ~3.20.3
@@ -883,22 +883,22 @@ importers:
         specifier: ^1.0.2
         version: 1.0.3
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/lib-k8s':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-k8s
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@certd/plugin-cert':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../plugins/plugin-cert
       '@certd/plugin-lib':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../plugins/plugin-lib
       '@certd/plus-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../plus-core
       ali-oss:
         specifier: ^6.21.0
@@ -1001,7 +1001,7 @@ importers:
   packages/pro/plus-core:
     dependencies:
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       dayjs:
         specifier: ^1.11.7
@@ -1291,10 +1291,10 @@ importers:
         version: 0.1.3(zod@3.24.4)
     devDependencies:
       '@certd/lib-iframe':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-iframe
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@rollup/plugin-commonjs':
         specifier: ^25.0.7
@@ -1474,43 +1474,43 @@ importers:
         specifier: ^3.705.0
         version: 3.810.0(aws-crt@1.26.2)
       '@certd/acme-client':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/acme-client
       '@certd/basic':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/basic
       '@certd/commercial-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../pro/commercial-core
       '@certd/jdcloud':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-jdcloud
       '@certd/lib-huawei':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-huawei
       '@certd/lib-k8s':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-k8s
       '@certd/lib-server':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/lib-server
       '@certd/midway-flyway-js':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../libs/midway-flyway-js
       '@certd/pipeline':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../core/pipeline
       '@certd/plugin-cert':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../plugins/plugin-cert
       '@certd/plugin-lib':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../plugins/plugin-lib
       '@certd/plugin-plus':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../pro/plugin-plus
       '@certd/plus-core':
-        specifier: ^1.34.5
+        specifier: ^1.34.7
         version: link:../../pro/plus-core
       '@corsinvest/cv4pve-api-javascript':
         specifier: ^8.3.0