chore: plugin config

packages/ui/certd-client/src/router/source/modules/sys.ts

@@ -133,7 +133,7 @@ export const sysResources = [
         title: "certd.sysResources.sysPluginConfig",
         name: "SysPluginConfig",
         path: "/sys/plugin/config",
-        component: "/sys/plugin/config.vue",
+        component: "/sys/plugin/config-common.vue",
         meta: {
           show: () => {
             const settingStore = useSettingStore();

packages/ui/certd-client/src/views/certd/access/common.tsx

@@ -84,6 +84,7 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
         component: {
           color: "auto",
         },
+        order: -1,
       },
       form: {
         component: {

packages/ui/certd-client/src/views/certd/access/crud.tsx

@@ -82,6 +82,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           },
           column: {
             width: 300,
+            order: -11,
           },
         },
         from: {

packages/ui/certd-client/src/views/sys/plugin/api.ts

@@ -97,6 +97,7 @@ export type CertApplyPluginSysInput = {
 export type PluginSysSetting<T> = {
   sysSetting: {
     input?: T;
+    metadata?: Record<string, any>;
   };
 };
 export type CommPluginConfig = {
@@ -118,6 +119,14 @@ export async function SaveCommPluginConfigs(data: CommPluginConfig): Promise<voi
   });
 }
 
+export async function savePluginSetting(req: { id: number; metadata: any }): Promise<void> {
+  return await request({
+    url: apiPrefix + "/saveSetting",
+    method: "post",
+    data: req,
+  });
+}
+
 export async function DoTest(req: { id: number; input: any }): Promise<void> {
   return await request({
     url: apiPrefix + "/doTest",

packages/ui/certd-client/src/views/sys/plugin/config-editor.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="plugin-config flex">
+    <div class="origin-metadata w-50%">
+      <div class="block-title">
+        插件原始参数配置
+        <div class="helper">1111</div>
+      </div>
+      <div class="p-10">
+        <code-editor id="origin" v-model:model-value="originMetadata" style="height: 60vh" language="yaml" :disabled="true"></code-editor>
+      </div>
+    </div>
+    <div class="template-props w-50%">
+      <div class="block-title">
+        自定义配置
+        <div class="helper">1</div>
+      </div>
+      <div class="p-10">
+        <code-editor id="config" v-model:model-value="pluginMetadata" style="height: 60vh" language="yaml" @save="doSave"></code-editor>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, Ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import * as api from "./api";
+import { usePluginStore } from "/@/store/plugin";
+import yaml from "js-yaml";
+import { cloneDeep, get, set } from "lodash-es";
+const route = useRoute();
+const templateId = route.query.templateId as string;
+
+const router = useRouter();
+const pluginStore = usePluginStore();
+const props = defineProps<{
+  plugin: any;
+}>();
+
+const pluginMetadata = ref<string>("");
+const currentPlugin = ref();
+const originMetadata = computed(() => {
+  if (!currentPlugin.value) {
+    return;
+  }
+  const input = cloneDeep(currentPlugin.value.input);
+  const newInputs: any = {};
+  const picks = ["title", "helper", "component.options"];
+
+  for (const key in input) {
+    const value = input[key];
+    const newInput: any = {};
+    newInputs[key] = newInput;
+    for (const pickKey of picks) {
+      const v = get(value, pickKey);
+      if (v) {
+        set(newInput, pickKey, v);
+      }
+    }
+  }
+  return yaml.dump(newInputs);
+});
+
+async function loadPluginSetting() {
+  currentPlugin.value = await pluginStore.getPluginDefine(props.plugin.name);
+
+  const setting = props.plugin.sysSetting;
+  if (setting) {
+    const settingJson = JSON.parse(setting);
+    const metadataYaml = yaml.dump(settingJson.metadata);
+    pluginMetadata.value = metadataYaml;
+  }
+}
+
+onMounted(async () => {
+  await loadPluginSetting();
+});
+
+function doSave() {
+  const metadata = yaml.load(pluginMetadata.value);
+  api.savePluginSetting({
+    id: props.plugin.id,
+    metadata: metadata,
+  });
+}
+</script>

packages/ui/certd-client/src/views/sys/plugin/crud.tsx

@@ -1,11 +1,14 @@
 import * as api from "./api";
 import { useI18n } from "/src/locales";
-import { Ref, ref } from "vue";
+import { Ref, ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { Modal, notification } from "ant-design-vue";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { Modal } from "ant-design-vue";
 //@ts-ignore
 import yaml from "js-yaml";
+import { usePluginImport } from "./use-import";
+import { usePluginConfig } from "./use-config";
+import { useSettingStore } from "/src/store/settings/index";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const router = useRouter();
@@ -35,75 +38,11 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
 
   const selectedRowKeys: Ref<any[]> = ref([]);
   context.selectedRowKeys = selectedRowKeys;
-  const { openCrudFormDialog } = useFormWrapper();
 
-  async function openImportDialog() {
-    function createCrudOptions() {
-      return {
-        crudOptions: {
-          columns: {
-            content: {
-              title: t("certd.pluginFile"),
-              type: "text",
-              form: {
-                component: {
-                  name: "pem-input",
-                  vModel: "modelValue",
-                  textarea: {
-                    rows: 8,
-                  },
-                },
-                col: {
-                  span: 24,
-                },
-                helper: t("certd.selectPluginFile"),
-              },
-            },
-            override: {
-              title: t("certd.overrideSameName"),
-              type: "dict-switch",
-              dict: dict({
-                data: [
-                  {
-                    value: true,
-                    label: t("certd.override"),
-                  },
-                  {
-                    value: false,
-                    label: t("certd.noOverride"),
-                  },
-                ],
-              }),
-              form: {
-                value: false,
-                col: {
-                  span: 24,
-                },
-                helper: t("certd.overrideHelper"),
-              },
-            },
-          },
-          form: {
-            wrapper: {
-              title: t("certd.importPlugin"),
-              saveRemind: false,
-            },
-            afterSubmit() {
-              notification.success({ message: t("certd.operationSuccess") });
-              crudExpose.doRefresh();
-            },
-            async doSubmit({ form }: any) {
-              return await api.ImportPlugin({
-                ...form,
-              });
-            },
-          },
-        },
-      };
-    }
-    const { crudOptions } = createCrudOptions();
-    await openCrudFormDialog({ crudOptions });
-  }
+  const { openImportDialog } = usePluginImport();
+  const { openConfigDialog } = usePluginConfig();
+
+  const settingStore = useSettingStore();
   return {
     crudOptions: {
       settings: {
@@ -139,7 +78,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             text: t("certd.import"),
             type: "primary",
             async click() {
-              await openImportDialog();
+              await openImportDialog({ crudExpose });
             },
           },
         },
@@ -186,6 +125,21 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
               }
             },
           },
+          config: {
+            show: computed(() => {
+              return settingStore.isComm;
+            }),
+            text: null,
+            icon: "ion:settings-outline",
+            title: t("certd.config"),
+            type: "link",
+            async click({ row }) {
+              await openConfigDialog({
+                row,
+                crudExpose,
+              });
+            },
+          },
         },
       },
       table: {

packages/ui/certd-client/src/views/sys/plugin/use-config.tsx

@@ -0,0 +1,50 @@
+import * as api from "/@/views/sys/plugin/api";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+import { useI18n } from "/@/locales";
+import { Modal, notification } from "ant-design-vue";
+import ConfigEditor from "./config-editor.vue";
+export function usePluginConfig() {
+  const { openCrudFormDialog } = useFormWrapper();
+  const { t } = useI18n();
+
+  async function openConfigDialog({ row, crudExpose }) {
+    function createCrudOptions() {
+      return {
+        crudOptions: {
+          columns: {},
+          form: {
+            wrapper: {
+              width: "80%",
+              title: "插件元数据配置",
+              saveRemind: false,
+              slots: {
+                "form-body-top": () => {
+                  return (
+                    <div>
+                      <ConfigEditor plugin={row}></ConfigEditor>
+                    </div>
+                  );
+                },
+              },
+            },
+            afterSubmit() {
+              notification.success({ message: t("certd.operationSuccess") });
+              crudExpose.doRefresh();
+            },
+            async doSubmit({ form }: any) {
+              return await api.ImportPlugin({
+                ...form,
+              });
+            },
+          },
+        },
+      };
+    }
+    const { crudOptions } = createCrudOptions();
+    await openCrudFormDialog({ crudOptions });
+  }
+
+  return {
+    openConfigDialog,
+  };
+}

packages/ui/certd-client/src/views/sys/plugin/use-import.ts

@@ -0,0 +1,80 @@
+import * as api from "/@/views/sys/plugin/api";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+import { useI18n } from "/@/locales";
+import { Modal, notification } from "ant-design-vue";
+export function usePluginImport() {
+  const { openCrudFormDialog } = useFormWrapper();
+  const { t } = useI18n();
+
+  async function openImportDialog({ crudExpose }) {
+    function createCrudOptions() {
+      return {
+        crudOptions: {
+          columns: {
+            content: {
+              title: t("certd.pluginFile"),
+              type: "text",
+              form: {
+                component: {
+                  name: "pem-input",
+                  vModel: "modelValue",
+                  textarea: {
+                    rows: 8,
+                  },
+                },
+                col: {
+                  span: 24,
+                },
+                helper: t("certd.selectPluginFile"),
+              },
+            },
+            override: {
+              title: t("certd.overrideSameName"),
+              type: "dict-switch",
+              dict: dict({
+                data: [
+                  {
+                    value: true,
+                    label: t("certd.override"),
+                  },
+                  {
+                    value: false,
+                    label: t("certd.noOverride"),
+                  },
+                ],
+              }),
+              form: {
+                value: false,
+                col: {
+                  span: 24,
+                },
+                helper: t("certd.overrideHelper"),
+              },
+            },
+          },
+          form: {
+            wrapper: {
+              title: t("certd.importPlugin"),
+              saveRemind: false,
+            },
+            afterSubmit() {
+              notification.success({ message: t("certd.operationSuccess") });
+              crudExpose.doRefresh();
+            },
+            async doSubmit({ form }: any) {
+              return await api.ImportPlugin({
+                ...form,
+              });
+            },
+          },
+        },
+      };
+    }
+    const { crudOptions } = createCrudOptions();
+    await openCrudFormDialog({ crudOptions });
+  }
+
+  return {
+    openImportDialog,
+  };
+}

packages/ui/certd-server/src/modules/plugin/service/plugin-config-service.ts

@@ -6,6 +6,7 @@ export type PluginConfig = {
   disabled: boolean;
   sysSetting: {
     input?: Record<string, any>;
+    metadata?: Record<string, any>;
   };
 };
 
@@ -57,7 +58,14 @@ export class PluginConfigService {
         author: "certd",
       });
     } else {
-      await this.pluginService.getRepository().update({ name }, { sysSetting: JSON.stringify(sysSetting) });
+      let setting = JSON.parse(pluginEntity.sysSetting || "{}");
+      if (sysSetting.metadata) {
+        setting.metadata = sysSetting.metadata;
+      }
+      if (sysSetting.input) {
+        setting.input = sysSetting.input;
+      }
+      await this.pluginService.getRepository().update({ name }, { sysSetting: JSON.stringify(setting) });
     }
   }