From c3c5006daa39c20624cb58864f2b92b230a38a7a Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Wed, 26 Mar 2025 12:05:28 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/common/remote-input.vue           | 99 +++++++++++++++++++
 .../plugins/common/remote-select.vue          | 21 ++--
 .../src/components/plugins/index.ts           |  2 +
 .../plugins/synology/device-id-getter.vue     |  8 +-
 4 files changed, 111 insertions(+), 19 deletions(-)
 create mode 100644 packages/ui/certd-client/src/components/plugins/common/remote-input.vue

diff --git a/packages/ui/certd-client/src/components/plugins/common/remote-input.vue b/packages/ui/certd-client/src/components/plugins/common/remote-input.vue
new file mode 100644
index 00000000..9fd0f3fb
--- /dev/null
+++ b/packages/ui/certd-client/src/components/plugins/common/remote-input.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="remote-input">
+    <a-input v-bind="attrs" :value="modelValue" @update:value="onInputChange"></a-input>
+    <fs-button class="ml-1" v-bind="button" :text="button?.text || title" @click="openDialog"></fs-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { doRequest } from "/@/components/plugins/lib";
+import { inject, ref, useAttrs } from "vue";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+import { notification } from "ant-design-vue";
+
+defineOptions({
+  name: "RemoteInput",
+});
+const { openCrudFormDialog } = useFormWrapper();
+const props = defineProps<{
+  modelValue: string;
+  title: string;
+  action: string;
+  form: any;
+  button?: any;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": any;
+}>();
+
+const getScope: any = inject("get:scope");
+const getPluginType: any = inject("get:plugin:type");
+
+const attrs = useAttrs();
+
+const loading = ref(false);
+
+function onInputChange(value: string) {
+  emit("update:modelValue", value);
+}
+
+async function openDialog() {
+  function createCrudOptions() {
+    return {
+      crudOptions: {
+        columns: {
+          ...props.form.columns,
+        },
+        form: {
+          wrapper: {
+            title: props.title,
+            saveRemind: false,
+          },
+          afterSubmit() {
+            notification.success({ message: "操作成功" });
+          },
+          async doSubmit({ form }: any) {
+            return await doPluginFormSubmit(form);
+          },
+        },
+      },
+    };
+  }
+  const { crudOptions } = createCrudOptions();
+  await openCrudFormDialog({ crudOptions });
+}
+
+const doPluginFormSubmit = async (data: any) => {
+  if (loading.value) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const pluginType = getPluginType();
+    const { form } = getScope();
+    const res = await doRequest({
+      type: pluginType,
+      typeName: form.type,
+      action: props.action,
+      input: pluginType === "plugin" ? form.input : form,
+      data: data,
+    });
+    //获取返回值 填入到input中
+    emit("update:modelValue", res);
+    return res;
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+<style lang="less">
+.remote-input {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .a-input {
+    flex: 1;
+  }
+}
+</style>
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 410a2e08..aa80b4c8 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,16 +1,7 @@
 <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)" />
       <div class="ml-5">
         <fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
       </div>
@@ -26,7 +17,7 @@ import { inject, ref, useAttrs, watch } from "vue";
 import { PluginDefine } from "@certd/pipeline";
 
 defineOptions({
-  name: "RemoteSelect"
+  name: "RemoteSelect",
 });
 
 const props = defineProps<
@@ -87,14 +78,14 @@ const getOptions = async () => {
         type: pluginType,
         typeName: form.type,
         action: props.action,
-        input: pluginType === "plugin" ? form.input : form
+        input: pluginType === "plugin" ? form.input : form,
       },
       {
         onError(err: any) {
           hasError.value = true;
           message.value = `获取选项出错：${err.message}`;
         },
-        showErrorNotify: false
+        showErrorNotify: false,
       }
     );
     if (res && res.length > 0) {
@@ -129,14 +120,14 @@ watch(
     }
     return {
       form: props.form,
-      watched: values
+      watched: values,
     };
   },
   async () => {
     await getOptions();
   },
   {
-    immediate: true
+    immediate: true,
   }
 );
 </script>
diff --git a/packages/ui/certd-client/src/components/plugins/index.ts b/packages/ui/certd-client/src/components/plugins/index.ts
index aba2ab19..4b6152c7 100644
--- a/packages/ui/certd-client/src/components/plugins/index.ts
+++ b/packages/ui/certd-client/src/components/plugins/index.ts
@@ -1,5 +1,6 @@
 import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
 import RemoteSelect from "./common/remote-select.vue";
+import RemoteInput from "./common/remote-input.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";
@@ -21,6 +22,7 @@ export default {
 
     app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
     app.component("RemoteSelect", RemoteSelect);
+    app.component("RemoteInput", RemoteInput);
     app.component("CertDomainsGetter", CertDomainsGetter);
     app.component("InputPassword", InputPassword);
   },
diff --git a/packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue b/packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue
index b60416f4..b81ac2d9 100644
--- a/packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue
+++ b/packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue
@@ -15,7 +15,7 @@ import { Modal } from "ant-design-vue";
 import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
 
 defineOptions({
-  name: "DeviceIdGetter"
+  name: "DeviceIdGetter",
 });
 
 const props = defineProps<ComponentPropsType>();
@@ -38,9 +38,9 @@ async function loginWithOTPCode(otpCode: string) {
     typeName: form.type,
     action: "LoginWithOPTCode",
     data: {
-      otpCode
+      otpCode,
     },
-    input: form
+    input: form,
   });
 }
 
@@ -61,7 +61,7 @@ async function getDeviceId() {
       const res = await loginWithOTPCode(otpCodeRef.value);
       console.log("did返回", res);
       emit("update:value", res.did);
-    }
+    },
   });
 }
 </script>