chore:

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

@@ -1,74 +1,111 @@
 <template>
-  <div class="plugin-config flex">
+  <div class="plugin-config">
-    <div class="origin-metadata w-50%">
+    <div class="origin-metadata w-100%">
       <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 ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
-      </div>
+          <template v-for="(item, key) in originInputs" :key="key">
-    </div>
+            <div>
-    <div class="template-props w-50%">
+              <div :label="item.title">
-      <div class="block-title">
+                <label class="flex mt-5">
-        自定义配置
+                  <span class="w-20 flex-shrink-0">默认值</span>
-        <div class="helper">1</div>
+                  <rollbackable :value="configForm[key].value" @set="configForm[key].value = item.value ?? null" @clear="unset(configForm, `${key}.value`)"></rollbackable>
-      </div>
+                </label>
-      <div class="p-10">
+                <label class="flex mt-5">
-        <code-editor id="config" v-model:model-value="pluginMetadata" style="height: 60vh" language="yaml" @save="doSave"></code-editor>
+                  <span class="w-20 flex-shrink-0">是否显示</span>
+                  <rollbackable :value="configForm[key].show" @set="set(configForm, `${key}.show`, item.show ?? null)" @clear="unset(configForm, `${key}.show`)"></rollbackable>
+                </label>
+                <label class="flex mt-5">
+                  <span class="w-20 flex-shrink-0">帮助说明</span>
+                  {{ configForm[key].helper }}
+                  <rollbackable :value="configForm[key].helper" @setter="configForm[key].helper = item.helper" @clear1="delete configForm[key].helper"></rollbackable>
+                </label>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, Ref } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, Ref, unref } 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, merge, set, unset } from "lodash-es";
-import { cloneDeep, get, set } from "lodash-es";
+import Rollbackable from "./rollbackable.vue";
 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 pluginMetadata = ref<any>("");
 const currentPlugin = ref();
-const originMetadata = computed(() => {
+console.log("111111111111111111111");
+const labelCol = ref({
+  span: null,
+  style: {
+    width: "145px",
+  },
+});
+const wrapperCol = ref({ span: 16 });
+const configForm: any = reactive({});
+
+function getScope() {
+  return {
+    form: configForm,
+  };
+}
+function getScopeFunc() {
+  return getScope;
+}
+function getForm() {
+  return configForm;
+}
+
+const editableKeys = ref([
+  { key: "value", label: "默认值" },
+  { key: "show", label: "是否显示", component: { name: "a-switch", vModel: "checked" } },
+  { key: "helper", label: "帮助说明", component: { name: "a-textarea", vModel: "value", rows: 4 } },
+]);
+
+const originInputs = 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 = {};
+    value.key = key;
+    const newInput: any = cloneDeep(value);
     newInputs[key] = newInput;
-    for (const pickKey of picks) {
-      const v = get(value, pickKey);
-      if (v) {
-        set(newInput, pickKey, v);
-      }
-    }
   }
-  return yaml.dump(newInputs);
+  return newInputs;
 });
 
+function clearFormValue(key: string) {
+  unset(configForm, key);
+  console.log(key, configForm);
+}
+
 async function loadPluginSetting() {
   currentPlugin.value = await pluginStore.getPluginDefine(props.plugin.name);
-
+  for (const key in currentPlugin.value.input) {
+    configForm[key] = {};
+  }
   const setting = props.plugin.sysSetting;
   if (setting) {
     const settingJson = JSON.parse(setting);
-    const metadataYaml = yaml.dump(settingJson.metadata);
+    merge(configForm, settingJson.metadata);
-    pluginMetadata.value = metadataYaml;
   }
 }
 
@@ -76,11 +113,13 @@ onMounted(async () => {
   await loadPluginSetting();
 });
 
-function doSave() {
+function doSave() {}
-  const metadata = yaml.load(pluginMetadata.value);
-  api.savePluginSetting({
-    id: props.plugin.id,
-    metadata: metadata,
-  });
-}
 </script>
+
+<style lang="less">
+.plugin-config {
+  pre {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cloneDeep, get, merge, set, unset } from "lodash-es";
+import { defineProps } from "vue";
+const props = defineProps<{ value: any }>();
+
+const emits = defineEmits(["setter", "clear1"]);
+function setValue() {
+  console.log("33333");
+  emits("setter");
+}
+function clearValue() {
+  console.log("4444");
+  emits("clear1");
+}
+</script>
+
+<template>
+  <div class="rollbackable">
+    <div class="flex">
+      <div>
+        <slot v-if="value === undefined" name="default"></slot>
+        <slot v-else name="edit"></slot>
+      </div>
+      <div>
+        <div v-if="value === undefined" type="primary" size="small" @click.stop="setValue">自定义</div>
+        <div v-else style="margin-left: 100px" type="primary" size="small" @click.stop="clearValue">还原</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less"></style>

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

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