From 9475f2e56cdf0d94f1fc63ab14f140f5e256c900 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Mon, 7 Apr 2025 23:52:21 +0800
Subject: [PATCH] chore: code-editor

---
 packages/ui/certd-client/src/App.vue          |   4 +-
 .../components/code-editor/async-import.ts    |  37 +++
 .../components/code-editor/import-works.ts    |  48 ++++
 .../src/components/code-editor/index.vue      | 247 ++++++++++++++++++
 .../src/components/code-editor/validators.ts  |  37 +++
 .../src/components/code-editor/workers.ts     |  59 +++++
 .../src/components/code-editor/yaml.worker.ts |   1 +
 .../ui/certd-client/src/components/index.ts   |   6 +
 packages/ui/certd-client/src/main.ts          |   7 +-
 .../src/views/certd/pipeline/detail.vue       |  22 +-
 .../sys/plugin/components/plugin-input.vue    | 108 ++++----
 .../src/views/sys/plugin/edit.vue             |  73 +++---
 12 files changed, 551 insertions(+), 98 deletions(-)
 create mode 100644 packages/ui/certd-client/src/components/code-editor/async-import.ts
 create mode 100644 packages/ui/certd-client/src/components/code-editor/import-works.ts
 create mode 100644 packages/ui/certd-client/src/components/code-editor/index.vue
 create mode 100644 packages/ui/certd-client/src/components/code-editor/validators.ts
 create mode 100644 packages/ui/certd-client/src/components/code-editor/workers.ts
 create mode 100644 packages/ui/certd-client/src/components/code-editor/yaml.worker.ts

diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue
index 0b65e7b7..9197921d 100644
--- a/packages/ui/certd-client/src/App.vue
+++ b/packages/ui/certd-client/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <AConfigProvider :locale="locale" :theme="tokenTheme">
-    <fs-form-provider>
+    <FsFormProvider>
       <contextHolder />
       <router-view />
-    </fs-form-provider>
+    </FsFormProvider>
   </AConfigProvider>
 </template>
 
diff --git a/packages/ui/certd-client/src/components/code-editor/async-import.ts b/packages/ui/certd-client/src/components/code-editor/async-import.ts
new file mode 100644
index 00000000..c550158a
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/async-import.ts
@@ -0,0 +1,37 @@
+export async function importJsYaml() {
+  return await import("js-yaml");
+}
+
+export async function importYamlContribution() {
+  await import("monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution");
+}
+
+export async function importJsonContribution() {
+  await import("monaco-editor/esm/vs/language/json/monaco.contribution");
+}
+
+export async function importJavascriptContribution() {
+  await import("monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution");
+}
+
+export async function importMonacoYaml() {
+  return await import("monaco-yaml");
+}
+
+export async function importWorks() {
+  const editorWorker = await import("monaco-editor/esm/vs/editor/editor.worker?worker");
+  const jsonWorker = await import("monaco-editor/esm/vs/language/json/json.worker?worker");
+  const cssWorker = await import("monaco-editor/esm/vs/language/css/css.worker?worker");
+  const htmlWorker = await import("monaco-editor/esm/vs/language/html/html.worker?worker");
+  const tsWorker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker");
+  const yamlWorker = await import("./yaml.worker?worker");
+
+  return {
+    editorWorker,
+    jsonWorker,
+    cssWorker,
+    htmlWorker,
+    tsWorker,
+    yamlWorker,
+  };
+}
diff --git a/packages/ui/certd-client/src/components/code-editor/import-works.ts b/packages/ui/certd-client/src/components/code-editor/import-works.ts
new file mode 100644
index 00000000..ee04a655
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/import-works.ts
@@ -0,0 +1,48 @@
+// const editorWorker = await import("monaco-editor/esm/vs/editor/editor.worker?worker");
+// const jsonWorker = await import("monaco-editor/esm/vs/language/json/json.worker?worker");
+// const cssWorker = await import("monaco-editor/esm/vs/language/css/css.worker?worker");
+// const htmlWorker = await import("monaco-editor/esm/vs/language/html/html.worker?worker");
+// const tsWorker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker");
+// const yamlWorker = await import("monaco-yaml/yaml.worker.js?worker");
+
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+import yamlWorker from "./yaml.worker?worker";
+
+const WorkerBucket: any = {};
+
+/**
+ * 注册自定义worker
+ * @param name
+ * @param worker
+ */
+export function registerWorker(name: string, worker: any) {
+  WorkerBucket[name] = worker;
+}
+//@ts-ignore
+window.MonacoEnvironment = {
+  //@ts-ignore
+  getWorker(_, label) {
+    debugger;
+    const custom = WorkerBucket[label];
+    if (custom) {
+      return new custom();
+    }
+    if (label === "json") {
+      return new jsonWorker();
+    } else if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker();
+    } else if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker();
+    } else if (label === "typescript" || label === "javascript") {
+      return new tsWorker();
+    } else if (label === "yaml" || label === "yml") {
+      //@ts-ignore
+      return new yamlWorker();
+    }
+    return new editorWorker();
+  },
+};
diff --git a/packages/ui/certd-client/src/components/code-editor/index.vue b/packages/ui/certd-client/src/components/code-editor/index.vue
new file mode 100644
index 00000000..8da38344
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/index.vue
@@ -0,0 +1,247 @@
+<template>
+  <div ref="monacoRef" class="fs-editor-code"></div>
+</template>
+
+<script lang="ts" setup>
+import * as monaco from "monaco-editor";
+// import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { cloneDeep, debounce as lodashDebounce } from "lodash-es";
+import { initWorkers } from "./workers";
+import { importJavascriptContribution, importJsonContribution, importMonacoYaml, importYamlContribution } from "./async-import";
+
+/**
+ * config:
+ *   value: '', // 编辑器初始文本
+ *   language: 'javascript', // 语言
+ *   theme: 'vs', // 主题
+ *   readOnly: false, // 是否只读
+ *   minimap: { enabled: false }, // 是否启用小地图
+ *   fontSize: 14, // 字体大小
+ *   tabSize: 2, // tab缩进长度
+ *   automaticLayout: true, // 自动布局
+ *   lineNumbers: 'off', // 是否启用行号
+ *   contextmenu: true, // 是否启用上下文菜单
+ *   folding: true, // 是否启用代码折叠
+ *   foldingStrategy: 'auto', // 代码折叠策略
+ *   wordWrap: 'on', // 自动换行设置
+ *   wrappingIndent: 'indent', // 换行缩进
+ *   formatOnPaste: true, // 粘贴时是否自动格式化
+ *   formatOnType: true, // 输入时是否自动格式化
+ *   dragAndDrop: true, // 是否允许拖放
+ *   cursorStyle: 'line', // 光标样式
+ *   cursorBlinking: 'blink', // 光标闪烁方式
+ *   scrollbar: {
+ *     vertical: 'auto', // 垂直滚动条的显示方式
+ *     horizontal: 'auto', // 水平滚动条的显示方式
+ *     verticalScrollbarSize: 2, // 垂直滚动条的宽
+ *     horizontalScrollbarSize: 2, // 水平滚动条的高度
+ *   }
+ */
+const props = defineProps<{
+  language?: string;
+  modelValue?: string;
+  config?: any;
+  schema?: any;
+  debounce?: number;
+  init?: any;
+  readonly?: boolean;
+  disabled?: boolean;
+  id?: string;
+}>();
+
+export type EditorCodeCtx = {
+  // monaco对象
+  monaco: any;
+  //语言
+  language: string;
+  //配置
+  config: any;
+  //editor实例对象
+  instance?: any;
+
+  schema?: any;
+};
+
+const monacoRef = ref();
+
+let instanceRef: any = null;
+
+function disposeEditor() {
+  // if (instanceRef.value) {
+  //   instanceRef.value.dispose(); //使用完成销毁实例
+  // }
+}
+
+onUnmounted(() => {
+  disposeEditor();
+});
+
+const emits = defineEmits(["update:modelValue", "change", "ready"]);
+
+const emitValue = lodashDebounce((value: any) => {
+  emits("update:modelValue", value);
+}, props.debounce || 500);
+
+// watch(
+//   () => {
+//     return props.modelValue;
+//   },
+//   (value: string) => {
+//     if (instanceRef.value && value !== instanceRef.value.getValue()) {
+//       // instanceRef.value.setValue(value);
+//     }
+//   }
+// );
+
+async function createEditor(ctx: EditorCodeCtx) {
+  disposeEditor();
+  const instance = monaco.editor.create(monacoRef.value, {
+    automaticLayout: true,
+    value: props.modelValue,
+    language: ctx.language,
+    theme: "vs-dark",
+    minimap: { enabled: false },
+    readOnly: props.readonly || props.disabled,
+    hover: {
+      enabled: true,
+    },
+    ...ctx.config,
+  });
+
+  // @event `change`
+  instance.onDidChangeModelContent(event => {
+    const value = instance.getValue();
+    if (props.modelValue !== value) {
+      emits("change", value);
+      emitValue(value);
+    }
+  });
+
+  instanceRef = instance;
+  ctx.instance = instance;
+  emits("ready", ctx);
+  return instance;
+}
+
+async function initJavascript(ctx: EditorCodeCtx) {
+  await importJavascriptContribution();
+  monaco.languages.register({ id: "javascript" });
+}
+
+async function initJson(ctx: EditorCodeCtx) {
+  await importJsonContribution();
+  monaco.languages.register({ id: "json" });
+
+  const schemas = [];
+  if (ctx.schema) {
+    schemas.push({
+      // uri: "http://myserver/foo-schema.json", // id of the first schema
+      fileMatch: ["*"], // associate with our model
+      schema: {
+        ...ctx.schema,
+      },
+    });
+  }
+
+  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    enableSchemaRequest: false,
+    schemas,
+  });
+}
+
+async function initYaml(ctx: EditorCodeCtx) {
+  await importYamlContribution();
+  const { configureMonacoYaml } = await importMonacoYaml();
+  monaco.languages.register({ id: "yaml" });
+
+  const schemas = [];
+  if (ctx.schema) {
+    schemas.push({
+      fileMatch: ["*"], // associate with our model
+      schema: {
+        ...ctx.schema,
+      },
+      uri: "http://myserver/foo-schema.json",
+    });
+  }
+  configureMonacoYaml(monaco, {
+    schemas,
+    format: true,
+    hover: true,
+    completion: true,
+    validate: true,
+    isKubernetes: false,
+    enableSchemaRequest: false,
+  });
+  const uri = monaco.Uri.parse(`fs-editor-code-yaml-${props.id || ""}.yaml`);
+  const oldModel = monaco.editor.getModel(uri);
+  if (oldModel) {
+    oldModel.dispose();
+  }
+  ctx.config.model = monaco.editor.createModel(props.modelValue, "yaml", uri);
+}
+
+async function doInit() {
+  await initWorkers();
+  const ctx: EditorCodeCtx = {
+    monaco,
+    language: props.language || "javascript",
+    config: cloneDeep(props.config || {}),
+    schema: props.schema,
+  };
+  if (ctx.language === "javascript") {
+    await initJavascript(ctx);
+  } else if (ctx.language === "yaml") {
+    await initYaml(ctx);
+  } else if (ctx.language === "json") {
+    await initJson(ctx);
+  }
+
+  await createEditor(ctx);
+}
+// watch(
+//   () => {
+//     return {
+//       language: props.language,
+//       config: props.config,
+//     };
+//   },
+//   (value: any) => {
+//     doInit();
+//   }
+// );
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  newValue => {
+    if (instanceRef) {
+      const editor = instanceRef;
+      if (newValue !== editor.getValue()) {
+        editor.setValue(newValue);
+      }
+    }
+  }
+);
+
+onMounted(async () => {
+  await doInit();
+});
+</script>
+
+<style lang="less">
+.fs-editor-code {
+  min-height: 100px;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  position: relative;
+}
+
+.monaco-editor .hover-content {
+  z-index: 1000 !important;
+}
+</style>
diff --git a/packages/ui/certd-client/src/components/code-editor/validators.ts b/packages/ui/certd-client/src/components/code-editor/validators.ts
new file mode 100644
index 00000000..d55f80d3
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/validators.ts
@@ -0,0 +1,37 @@
+import { importJsYaml } from "./async-import";
+
+const jsonRule = {
+  validator: async (rule: any, value: any) => {
+    //校验value json的有效性
+    if (value) {
+      try {
+        JSON.parse(value);
+      } catch (e: any) {
+        console.error(e);
+        throw new Error("json格式错误:" + e.message);
+      }
+    }
+  },
+  message: "json格式错误",
+};
+
+const yamlRule = {
+  validator: async (rule: any, value: any) => {
+    //校验value yaml的有效性
+    if (value) {
+      try {
+        const yaml = await importJsYaml();
+        yaml.load(value, { schema: yaml.JSON_SCHEMA });
+      } catch (e: any) {
+        console.error(e);
+        throw new Error("yaml格式错误:" + e.message);
+      }
+    }
+  },
+  message: "yaml格式错误",
+};
+
+export const FsEditorCodeValidators = {
+  jsonRule,
+  yamlRule,
+};
diff --git a/packages/ui/certd-client/src/components/code-editor/workers.ts b/packages/ui/certd-client/src/components/code-editor/workers.ts
new file mode 100644
index 00000000..31cd3aa0
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/workers.ts
@@ -0,0 +1,59 @@
+import { importWorks } from "./async-import";
+
+const WorkerBucket: any = {};
+
+/**
+ * 注册自定义worker
+ * @param name
+ * @param worker
+ */
+export function registerWorker(name: string, worker: any) {
+  WorkerBucket[name] = worker;
+}
+
+export async function initWorkers() {
+  if (window.MonacoEnvironment) {
+    return;
+  }
+
+  // const { editorWorker, jsonWorker, cssWorker, htmlWorker, tsWorker } = await importWorks();
+  //
+  // // const editorWorker = new Worker(new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url));
+  // // const jsonWorker = new Worker(new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url));
+  // // const cssWorker = new Worker(new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url));
+  // // const htmlWorker = new Worker(new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url));
+  // // const tsWorker = new Worker(new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url));
+  // // const yamlWorker = new Worker(new URL("./yaml.worker.js", import.meta.url));
+
+  const editorWorker = await import("monaco-editor/esm/vs/editor/editor.worker?worker");
+  const jsonWorker = await import("monaco-editor/esm/vs/language/json/json.worker?worker");
+  const cssWorker = await import("monaco-editor/esm/vs/language/css/css.worker?worker");
+  const htmlWorker = await import("monaco-editor/esm/vs/language/html/html.worker?worker");
+  const tsWorker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker");
+  const yamlWorker = await import("./yaml.worker?worker");
+
+  //@ts-ignore
+  window.MonacoEnvironment = {
+    //@ts-ignore
+    getWorker(_, label) {
+      const custom = WorkerBucket[label];
+      if (custom) {
+        return new custom();
+      }
+      if (label === "json") {
+        return new jsonWorker.default();
+      } else if (label === "css" || label === "scss" || label === "less") {
+        return new cssWorker.default();
+      } else if (label === "html" || label === "handlebars" || label === "razor") {
+        return new htmlWorker.default();
+      } else if (label === "typescript" || label === "javascript") {
+        return new tsWorker.default();
+      } else if (label === "yaml" || label === "yml") {
+        debugger;
+        //@ts-ignore
+        return new yamlWorker.default();
+      }
+      return new editorWorker.default();
+    },
+  };
+}
diff --git a/packages/ui/certd-client/src/components/code-editor/yaml.worker.ts b/packages/ui/certd-client/src/components/code-editor/yaml.worker.ts
new file mode 100644
index 00000000..e56ff9c9
--- /dev/null
+++ b/packages/ui/certd-client/src/components/code-editor/yaml.worker.ts
@@ -0,0 +1 @@
+export * from "monaco-yaml/yaml.worker.js";
diff --git a/packages/ui/certd-client/src/components/index.ts b/packages/ui/certd-client/src/components/index.ts
index a2de51da..4698b26d 100644
--- a/packages/ui/certd-client/src/components/index.ts
+++ b/packages/ui/certd-client/src/components/index.ts
@@ -12,12 +12,18 @@ import IconSelect from "./icon-select.vue";
 import ExpiresTimeText from "./expires-time-text.vue";
 import FileInput from "./file-input.vue";
 import PemInput from "./pem-input.vue";
+import { defineAsyncComponent } from "vue";
 export default {
   install(app: any) {
+    app.component(
+      "CodeEditor",
+      defineAsyncComponent(() => import("./code-editor/index.vue"))
+    );
     app.component("PiContainer", PiContainer);
     app.component("TextEditable", TextEditable);
     app.component("FileInput", FileInput);
     app.component("PemInput", PemInput);
+    // app.component("CodeEditor", CodeEditor);
 
     app.component("CronLight", CronLight);
     app.component("CronEditor", CronEditor);
diff --git a/packages/ui/certd-client/src/main.ts b/packages/ui/certd-client/src/main.ts
index 478b236f..e7fba4bf 100644
--- a/packages/ui/certd-client/src/main.ts
+++ b/packages/ui/certd-client/src/main.ts
@@ -13,6 +13,7 @@ import plugin from "./plugin/";
 import { setupVben } from "./vben";
 import { util } from "/@/utils";
 import { initPreferences } from "/@/vben/preferences";
+// import "./components/code-editor/import-works";
 // @ts-ignore
 async function bootstrap() {
   const app = createApp(App);
@@ -33,9 +34,9 @@ async function bootstrap() {
     namespace,
     overrides: {
       app: {
-        name: import.meta.env.VITE_APP_TITLE
-      }
-    }
+        name: import.meta.env.VITE_APP_TITLE,
+      },
+    },
   });
 
   app.mount("#app");
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
index 6649b360..06ab5ccf 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
@@ -18,7 +18,7 @@ import { LocalStorage } from "/@/utils/util.storage";
 import { useUserStore } from "/@/store/modules/user";
 
 defineOptions({
-  name: "PipelineDetail"
+  name: "PipelineDetail",
 });
 const route = useRoute();
 const pipelineId: Ref = ref(route.query.id);
@@ -33,8 +33,8 @@ const pipelineOptions: PipelineOptions = {
         userId: detail.pipeline.userId,
         stages: [],
         triggers: [],
-        ...JSON.parse(detail.pipeline.content || "{}")
-      }
+        ...JSON.parse(detail.pipeline.content || "{}"),
+      },
     } as PipelineDetail;
   },
 
@@ -56,13 +56,13 @@ const pipelineOptions: PipelineOptions = {
   async doSave(pipelineConfig: any) {
     await api.Save({
       id: pipelineConfig.id,
-      content: JSON.stringify(pipelineConfig)
+      content: JSON.stringify(pipelineConfig),
     });
   },
   async doTrigger(options: { pipelineId: number; stepId?: string }) {
     const { pipelineId, stepId } = options;
     await api.Trigger(pipelineId, stepId);
-  }
+  },
 };
 
 const pipelineOptionsRef: Ref<PipelineOptions> = ref(pipelineOptions);
@@ -83,7 +83,7 @@ function useTour() {
     onFinish: () => {
       tour.value.open = false;
       LocalStorage.set("tour-off", true, 999999999);
-    }
+    },
   });
 
   const tourHandleOpen = (val: boolean): void => {
@@ -99,28 +99,28 @@ function useTour() {
         description: "这里就是我们刚创建的证书任务，点击可以修改证书申请参数",
         target: () => {
           return document.querySelector(".pipeline .stages .stage_0 .task");
-        }
+        },
       },
       {
         title: "添加部署证书任务",
         description: "证书申请成功之后还需要部署证书，点击这里可以添加证书部署任务",
         target: () => {
           return document.querySelector(".pipeline .stages .last-stage .tasks .task");
-        }
+        },
       },
       {
         title: "手动运行流水线",
         description: "点击此处可以手动运行流水线",
         target: () => {
           return document.querySelector(".pipeline .stages .first-stage .tasks .task");
-        }
-      }
+        },
+      },
     ];
   }
 
   return {
     tour,
-    tourHandleOpen
+    tourHandleOpen,
   };
 }
 
diff --git a/packages/ui/certd-client/src/views/sys/plugin/components/plugin-input.vue b/packages/ui/certd-client/src/views/sys/plugin/components/plugin-input.vue
index c661872f..0dda49ac 100644
--- a/packages/ui/certd-client/src/views/sys/plugin/components/plugin-input.vue
+++ b/packages/ui/certd-client/src/views/sys/plugin/components/plugin-input.vue
@@ -25,8 +25,11 @@
               <a-form-item label="必填">
                 <a-switch v-model:checked="item.required" />
               </a-form-item>
-              <a-form-item label="组件配置">
-                <fs-editor-code v-model:model-value="item.component" language="yaml" />
+              <a-form-item label="组件名称">
+                <a-input v-model:value="item.component.name" />
+              </a-form-item>
+              <a-form-item label="组件vModel">
+                <a-input v-model:value="item.component.vModel" />
               </a-form-item>
             </a-form>
           </a-collapse-panel>
@@ -39,7 +42,7 @@
 <script lang="ts" setup>
 import { ref, Ref, inject, toRef } from "vue";
 import { useFormWrapper } from "@fast-crud/fast-crud";
-
+import yaml from "js-yaml";
 const activeKey = ref([]);
 
 const getPlugin: any = inject("get:plugin");
@@ -49,52 +52,63 @@ if (!inputs.value) {
   inputs.value = {};
 }
 function addNewField() {
-  const { openCrudFormDialog } = useFormWrapper();
-
-  openCrudFormDialog({
-    crudOptions: {
-      form: {
-        labelCol: { style: { width: "80px" } },
-        wrapperCol: { span: 18 },
-        wrapper: {
-          title: "添加输入",
-        },
-        doSubmit({ form }: any) {
-          debugger;
-          const key = form.key;
-          const title = form.title;
-          inputs.value[key] = {
-            key,
-            title,
-            component: `
-  name: a-input
-    
-    `,
-            helper: "",
-            value: undefined,
-            required: false,
-          };
-        },
-      },
-      columns: {
-        key: {
-          title: "字段名称",
-          type: "text",
-          form: {
-            helper: "英文字段名称",
-          },
-        },
-        title: {
-          title: "字段标题",
-          type: "text",
-          form: {
-            helper: "字段标题",
-          },
-        },
-      },
-    },
+  inputs.value.push({
+    key: "newKey",
+    title: "字段名",
   });
+  // const { openCrudFormDialog } = useFormWrapper();
+  //
+  // openCrudFormDialog({
+  //   crudOptions: {
+  //     form: {
+  //       labelCol: { style: { width: "80px" } },
+  //       wrapperCol: { span: 18 },
+  //       wrapper: {
+  //         title: "添加输入",
+  //       },
+  //       doSubmit({ form }: any) {
+  //         const key = form.key;
+  //         const title = form.title;
+  //         inputs.value[key] = {
+  //           key,
+  //           title,
+  //           component: {
+  //             name: "a-input",
+  //             vModel: "value",
+  //           },
+  //           helper: "",
+  //           value: undefined,
+  //           required: false,
+  //         };
+  //       },
+  //     },
+  //     columns: {
+  //       key: {
+  //         title: "字段名称",
+  //         type: "text",
+  //         form: {
+  //           helper: "英文字段名称",
+  //         },
+  //       },
+  //       title: {
+  //         title: "字段标题",
+  //         type: "text",
+  //         form: {
+  //           helper: "字段标题",
+  //         },
+  //       },
+  //     },
+  //   },
+  // });
 }
+
+// function onComponentChange(item: any, value: any) {
+//   if (!item) {
+//     item.component = {};
+//     return;
+//   }
+//   item.component = yaml.load(value);
+// }
 </script>
 
 <style lang="less">
diff --git a/packages/ui/certd-client/src/views/sys/plugin/edit.vue b/packages/ui/certd-client/src/views/sys/plugin/edit.vue
index d1899f32..3a83a072 100644
--- a/packages/ui/certd-client/src/views/sys/plugin/edit.vue
+++ b/packages/ui/certd-client/src/views/sys/plugin/edit.vue
@@ -7,44 +7,35 @@
           <span class="name">{{ plugin.title }} 【{{ plugin.author }}/{{ plugin.name }}】 </span>
         </span>
       </div>
+      <div class="more">
+        <a-button type="primary" :loading="saveLoading" @click="doSave">保存</a-button>
+      </div>
     </template>
     <div class="pi-plugin-editor">
       <div class="metadata">
-        <a-tabs v-model:active-key="metadataActive" type="card">
+        <a-tabs type="card">
           <a-tab-pane key="editor" tab="元数据"> </a-tab-pane>
-          <a-tab-pane key="source" tab="yaml"> </a-tab-pane>
         </a-tabs>
         <div class="metadata-body">
-          <a-tabs v-if="metadataActive === 'editor'" class="metadata-editor" tab-position="left" type="card">
-            <a-tab-pane key="input" tab="输入">
-              <plugin-input></plugin-input>
-            </a-tab-pane>
-            <a-tab-pane key="output" tab="输出"></a-tab-pane>
-            <a-tab-pane key="dependLibs" tab="第三方依赖"></a-tab-pane>
-            <a-tab-pane key="dependPlugins" tab="插件依赖"></a-tab-pane>
-          </a-tabs>
-
-          <div v-if="metadataActive === 'source'" class="metadata-source">
-            <fs-editor-code :model-value="metadataStr" language="yaml" @update:model-value="onMetadataStrUpdate"></fs-editor-code>
-          </div>
+          <code-editor id="metadata" v-model:model-value="plugin.metadata" language="yaml"></code-editor>
         </div>
       </div>
       <div class="script">
         <a-tabs type="card">
           <a-tab-pane key="script" tab="脚本"> </a-tab-pane>
         </a-tabs>
-        <fs-editor-code v-model="plugin.content" language="javascript"></fs-editor-code>
+        <code-editor id="content" v-model:model-value="plugin.content" language="javascript"></code-editor>
       </div>
     </div>
   </fs-page>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, watch, provide } from "vue";
+import { onMounted, provide, ref } from "vue";
 import { useRoute } from "vue-router";
 import * as api from "./api";
 import yaml from "js-yaml";
-import PluginInput from "/@/views/sys/plugin/components/plugin-input.vue";
-import { merge } from "lodash-es";
+
+const CertApplyPluginNames = ["CertApply", "CertApplyLego", "CertApplyUpload"];
 defineOptions({
   name: "SysPluginEdit",
 });
@@ -52,30 +43,44 @@ const route = useRoute();
 
 const plugin = ref<any>({});
 
-const metadataStr = ref("");
-function onMetadataStrUpdate(value: string) {
-  metadataStr.value = value;
-}
-const metadataActive = ref("editor");
 async function getPlugin() {
   const id = route.query.id;
   const pluginObj = await api.GetObj(id);
   if (!pluginObj.metadata) {
-    pluginObj.metadata = {
-      input: {},
-      output: {},
-    };
+    pluginObj.metadata = yaml.dump({
+      input: [
+        {
+          key: "cert",
+          title: "前置任务生成的证书",
+          component: {
+            name: "output-selector",
+            from: [...CertApplyPluginNames],
+          },
+        },
+      ],
+      output: [],
+    });
+  } else {
+    pluginObj.metadata = "";
   }
   plugin.value = pluginObj;
 }
-
-onMounted(async () => {
-  await getPlugin();
-});
+getPlugin();
+onMounted(async () => {});
 
 provide("get:plugin", () => {
   return plugin;
 });
+
+const saveLoading = ref(false);
+function doSave() {
+  saveLoading.value = true;
+  try {
+    // api.Save(plugin.value);
+  } finally {
+    saveLoading.value = false;
+  }
+}
 </script>
 
 <style lang="less">
@@ -89,11 +94,11 @@ provide("get:plugin", () => {
     .fs-editor-code {
       height: 100%;
       flex: 1;
-      overflow-y: hidden;
     }
 
     .metadata {
-      width: 500px;
+      width: 600px;
+      max-width: 50%;
       margin-right: 20px;
       display: flex;
       flex-direction: column;
@@ -101,13 +106,11 @@ provide("get:plugin", () => {
       .metadata-body {
         height: 100%;
         flex: 1;
-        overflow-y: hidden;
       }
 
       .metadata-editor {
         height: 100%;
         flex: 1;
-        overflow-y: hidden;
         .ant-tabs-content {
           height: 100%;
         }