perf: 优化宝塔网站部署插件远程获取数据的提示

packages/ui/certd-client/src/api/service.ts

@@ -47,7 +47,13 @@ function createService() {
             return dataAxios.data;
           default:
             // 不是正确的 code
-            errorCreate(`${dataAxios.msg}: ${response.config.url}`);
+            const errorMessage = dataAxios.msg;
+            // @ts-ignore
+            if (response?.config?.onError) {
+              // @ts-ignore
+              response.config.onError(new Error(errorMessage));
+            }
+            errorCreate(`${errorMessage}: ${response.config.url}`);
             return dataAxios;
         }
       }

packages/ui/certd-client/src/components/plugins/common/cert-domains-getter.vue

@@ -1,3 +1,8 @@
+<template>
+  <a-select mode="tags" readonly :value="modelValue" />
+  <div>{{ errorRef }}</div>
+</template>
+
 <script setup lang="ts">
 import { inject, ref, watch } from "vue";
 
@@ -57,9 +62,4 @@ watch(
 );
 </script>
 
-<template>
-  <a-select mode="tags" readonly :value="modelValue" />
-  <div>{{ errorRef }}</div>
-</template>
-
 <style lang="less"></style>

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

@@ -1,6 +1,28 @@
+<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)"
+      />
+      <div class="ml-5">
+        <fs-button title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
+      </div>
+    </div>
+    <div class="helper error">
+      {{ message }}
+    </div>
+  </div>
+</template>
 <script setup lang="ts">
 import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
-import { ref, watch } from "vue";
+import { ref, useAttrs, watch } from "vue";
 
 defineOptions({
   name: "RemoteSelect"
@@ -16,6 +38,8 @@ const emit = defineEmits<{
   "update:value": any;
 }>();
 
+const attrs = useAttrs();
+
 const optionsRef = ref([]);
 const message = ref("");
 const getOptions = async () => {
@@ -27,8 +51,8 @@ const getOptions = async () => {
       input: props.form
     },
     {
-      onError(err) {
+      onError(err: any) {
-        message.value = err.message;
+        message.value = `获取选项出错：${err.message}`;
       }
     }
   );
@@ -44,6 +68,10 @@ async function onClick() {
     return;
   }
   isFirst = false;
+  await refreshOptions();
+}
+
+async function refreshOptions() {
   optionsRef.value = await getOptions();
 }
 
@@ -64,21 +92,4 @@ watch(
 );
 </script>
 
-<template>
-  <div>
-    <a-select
-      class="remote-select"
-      show-search
-      :filter-option="filterOption"
-      :options="optionsRef"
-      :value="value"
-      @click="onClick"
-      @update:value="emit('update:value', $event)"
-    />
-    <div class="helper">
-      {{ message }}
-    </div>
-  </div>
-</template>
-
 <style lang="less"></style>

packages/ui/certd-client/src/components/plugins/lib/index.ts

@@ -14,7 +14,7 @@ export type RequestHandleReq<T = any> = {
   input: T;
 };
 
-export async function doRequest(req: RequestHandleReq, opts?: any = {}) {
+export async function doRequest(req: RequestHandleReq, opts: any = {}) {
   const url = req.type === "access" ? "/pi/handle/access" : "/pi/handle/plugin";
   const { typeName, action, data, input } = req;
   const res = await request({

packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <contextHolder />
-    <a-input v-bind="attrs" :value="value" :allow-clear="true" @update:value="emit('update:value', $event)">
+    <a-input :value="value" :allow-clear="true" v-bind="attrs" @update:value="emit('update:value', $event)">
       <template #suffix>
         <a-tag class="cursor-pointer" @click="getDeviceId">获取设备ID</a-tag>
       </template>

packages/ui/certd-client/src/style/common.less

@@ -203,9 +203,12 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .helper {
-  display: inline-block;
   color: #aeaeae;
   font-size: 12px;
+
+  &.error{
+    color: #ff4d4f;
+  }
 }