chore:

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

@@ -1,74 +1,111 @@
 <template>
-  <div class="plugin-config flex">
-    <div class="origin-metadata w-50%">
+  <div class="plugin-config">
+    <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>
-    </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 ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <template v-for="(item, key) in originInputs" :key="key">
+            <div>
+              <div :label="item.title">
+                <label class="flex mt-5">
+                  <span class="w-20 flex-shrink-0">默认值</span>
+                  <rollbackable :value="configForm[key].value" @set="configForm[key].value = item.value ?? null" @clear="unset(configForm, `${key}.value`)"></rollbackable>
+                </label>
+                <label class="flex mt-5">
+                  <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, set } from "lodash-es";
+import { cloneDeep, get, merge, set, unset } 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);
-    pluginMetadata.value = metadataYaml;
+    merge(configForm, settingJson.metadata);
   }
 }
 
@@ -76,11 +113,13 @@ onMounted(async () => {
   await loadPluginSetting();
 });
 
-function doSave() {
-  const metadata = yaml.load(pluginMetadata.value);
-  api.savePluginSetting({
-    id: props.plugin.id,
-    metadata: metadata,
-  });
-}
+function doSave() {}
 </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>