perf: 部署支持1Panel

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
+import { ref, watch } from "vue";
+
+const props = defineProps<
+  {
+    watches: string[];
+  } & ComponentPropsType
+>();
+
+const emit = defineEmits<{
+  "update:value": any;
+}>();
+
+const optionsRef = ref([]);
+const getOptions = async () => {
+  return await doRequest({
+    type: props.type,
+    typeName: props.typeName,
+    action: props.action,
+    input: props.form
+  });
+};
+
+watch(
+  () => {
+    const values = [];
+    for (const item of props.watches) {
+      values.push(props.form[item]);
+    }
+    return {
+      form: props.form,
+      watched: values
+    };
+  },
+  async () => {
+    optionsRef.value = await getOptions();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <a-select class="remote-select" :options="optionsRef" :value="value" @update:value="emit('update:value', $event)" />
+</template>
+
+<style lang="less"></style>

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

@@ -1,6 +1,8 @@
-import PiSynologyIdDeviceGetter from "./synology/device-id-getter.vue";
+import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
+import RemoteSelect from "./common/remote-select.vue";
 export default {
   install(app: any) {
-    app.component("PiSynologyDeviceIdGetter", PiSynologyIdDeviceGetter);
+    app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
+    app.component("RemoteSelect", RemoteSelect);
   }
 };

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

@@ -0,0 +1,31 @@
+import { request } from "/@/api/service";
+export type ComponentPropsType = {
+  type: string;
+  typeName: string;
+  action: string;
+  form: any;
+  value?: any;
+};
+export type RequestHandleReq<T = any> = {
+  type: strin;
+  typeName: string;
+  action: string;
+  data: any;
+  input: T;
+};
+
+export async function doRequest(req: RequestHandleReq) {
+  const url = req.type === "access" ? "/pi/handle/access" : "/pi/handle/plugin";
+  const { typeName, action, data, input } = req;
+  const res = await request({
+    url,
+    method: "post",
+    data: {
+      typeName,
+      action,
+      data,
+      input
+    }
+  });
+  return res;
+}

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

@@ -11,15 +11,10 @@
 
 <script lang="tsx" setup>
 import { defineProps, ref, useAttrs } from "vue";
-import { request } from "/@/api/service";
 import { Modal } from "ant-design-vue";
+import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
 
-const props = defineProps<{
-  type: string;
-  typeName: string;
-  form: any;
-  value?: any;
-}>();
+const props = defineProps<ComponentPropsType>();
 
 const emit = defineEmits<{
   "update:value": any;
@@ -29,24 +24,15 @@ const attrs = useAttrs();
 
 const otpCodeRef = ref("");
 
-async function doRequest(action: string, data: any) {
-  const res = await request({
-    url: "/pi/handle",
-    method: "post",
-    data: {
-      type: props.type,
-      typeName: props.typeName,
-      action,
-      data: data,
-      input: props.form.access
-    }
-  });
-  return res;
-}
-
 async function loginWithOTPCode(otpCode: string) {
-  return await doRequest("LoginWithOPTCode", {
-    otpCode
+  return await doRequest({
+    type: props.type,
+    typeName: props.typeName,
+    action: "LoginWithOPTCode",
+    data: {
+      otpCode
+    },
+    form: props.form
   });
 }
 

packages/ui/certd-client/src/use/use-refrence.tsx

@@ -1,23 +1,19 @@
 import _ from "lodash-es";
-import { compute } from "@fast-crud/fast-crud";
+import { asyncCompute, compute } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
+export type MergeScriptContext = {
+  compute: typeof compute;
+  asyncCompute: typeof asyncCompute;
+  computed: typeof computed;
+};
 
 export function useReference(formItem: any) {
-  if (formItem.reference) {
-    for (const reference of formItem.reference) {
-      _.set(
-        formItem,
-        reference.dest,
-        compute<any>((scope) => {
-          return _.get(scope, reference.src);
-        })
-      );
-    }
-    delete formItem.reference;
-  }
-
   if (formItem.mergeScript) {
     const ctx = {
-      compute
+      compute,
+      asyncCompute,
+      computed
     };
     const script = formItem.mergeScript;
     const func = new Function("ctx", script);