chore: plugin default

packages/ui/certd-client/src/components/code-editor/index.vue

@@ -77,7 +77,7 @@ onUnmounted(() => {
   disposeEditor();
 });
 
-const emits = defineEmits(["update:modelValue", "change", "ready"]);
+const emits = defineEmits(["update:modelValue", "change", "ready", "save"]);
 
 const emitValue = lodashDebounce((value: any) => {
   emits("update:modelValue", value);
@@ -91,6 +91,10 @@ async function createEditor(ctx: EditorCodeCtx) {
     language: ctx.language,
     theme: "vs-dark",
     minimap: { enabled: false },
+    insertSpaces: true,
+    tabSize: 2,
+    autoIndent: true, // 自动布局
+    renderWhitespace: true,
     readOnly: props.readonly || props.disabled,
     hover: {
       enabled: true,
@@ -113,6 +117,20 @@ async function createEditor(ctx: EditorCodeCtx) {
   if (props.modelValue) {
     instanceRef.setValue(props.modelValue);
   }
+
+  instance.addAction({
+    id: "custom_save",
+    label: "save",
+    contextMenuOrder: 1, // 菜单项的排序权重 越小，越靠前
+    contextMenuGroupId: "customCommand", // 菜单项的分组
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+    run: async () => {
+      await instanceRef.getAction("editor.action.formatDocument").run();
+      emits("save", {
+        value: props.modelValue,
+      });
+    }, //方法
+  });
   return instance;
 }
 
@@ -128,7 +146,7 @@ async function initJson(ctx: EditorCodeCtx) {
   const schemas = [];
   if (ctx.schema) {
     schemas.push({
-      // uri: "http://myserver/foo-schema.json", // id of the first schema
+      uri: "http://myserver/foo-schema.json", // id of the first schema
       fileMatch: ["*"], // associate with our model
       schema: {
         ...ctx.schema,
@@ -147,7 +165,8 @@ async function initYaml(ctx: EditorCodeCtx) {
   await importYamlContribution();
   const { configureMonacoYaml } = await importMonacoYaml();
   monaco.languages.register({ id: "yaml" });
-
+  const id = `fs-editor-code-yaml-${props.id || ""}.yaml`;
+  const uri = monaco.Uri.parse(id);
   const schemas = [];
   if (ctx.schema) {
     schemas.push({
@@ -155,7 +174,7 @@ async function initYaml(ctx: EditorCodeCtx) {
       schema: {
         ...ctx.schema,
       },
-      uri: "http://myserver/foo-schema.json",
+      uri: id,
     });
   }
   configureMonacoYaml(monaco, {
@@ -167,7 +186,7 @@ async function initYaml(ctx: EditorCodeCtx) {
     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();

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

@@ -117,7 +117,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           form: {
             show: true,
             order: 0,
-            helper: "必须为英文，驼峰命名，类型作为前缀\n例如AliyunDeployToCDN",
+            helper: "必须为英文，驼峰命名，类型作为前缀\n例如AliyunDeployToCDN\n插件一旦被使用，不要修改名称",
             rules: [{ required: true }],
           },
           column: {
@@ -140,7 +140,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           form: {
             show: true,
             order: 0,
-            helper: "上传到应用商店时，将作为插件名称前缀,例如：greper/pluginName",
+            helper: "上传到插件商店时，将作为插件名称前缀,例如：greper/pluginName",
             rules: [{ required: true }],
           },
           column: {
@@ -187,7 +187,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         },
         desc: {
           title: "描述",
-          type: "text",
+          type: "textarea",
           helper: "插件的描述",
           column: {
             width: 300,
@@ -230,6 +230,11 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           form: {
             rules: [{ required: true }],
           },
+          editForm: {
+            component: {
+              disabled: true,
+            },
+          },
           dict: dict({
             data: [
               { label: "授权", value: "access" },
@@ -245,6 +250,14 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             },
           },
         },
+        version: {
+          title: "版本",
+          type: "text",
+          column: {
+            width: 100,
+            align: "center",
+          },
+        },
         group: {
           title: "分组",
           type: "dict-select",
@@ -264,6 +277,29 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             },
           },
         },
+        "default.strategy.runStrategy": {
+          title: "运行策略",
+          type: "dict-select",
+
+          dict: dict({
+            data: [
+              { value: 0, label: "正常运行" },
+              { value: 1, label: "成功后跳过（部署任务）" },
+            ],
+          }),
+          form: {
+            value: 1,
+            rules: [{ required: true }],
+            helper: "默认运行策略",
+          },
+          column: {
+            width: 100,
+            align: "left",
+            component: {
+              color: "auto",
+            },
+          },
+        },
         disabled: {
           title: "点击禁用/启用",
           type: "dict-switch",
@@ -274,6 +310,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             ],
           }),
           form: {
+            title: "禁用/启用",
             value: false,
           },
           column: {

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

@@ -13,29 +13,39 @@
       </div>
     </template>
     <div class="pi-plugin-editor">
+      <div class="base">
+        <a-tabs type="card">
+          <a-tab-pane key="base" tab="插件信息"> </a-tab-pane>
+        </a-tabs>
+        <div class="base-body">
+          <fs-form ref="baseFormRef" v-bind="formOptionsRef"></fs-form>
+        </div>
+      </div>
       <div class="metadata">
         <a-tabs type="card">
           <a-tab-pane key="editor" tab="元数据"> </a-tab-pane>
         </a-tabs>
         <div class="metadata-body">
-          <code-editor id="metadata" v-model:model-value="plugin.metadata" language="yaml"></code-editor>
+          <code-editor id="metadata" v-model:model-value="plugin.metadata" language="yaml" @save="doSave"></code-editor>
         </div>
       </div>
       <div class="script">
         <a-tabs type="card">
           <a-tab-pane key="script" tab="脚本"> </a-tab-pane>
         </a-tabs>
-        <code-editor id="content" v-model:model-value="plugin.content" language="javascript"></code-editor>
+        <code-editor id="content" v-model:model-value="plugin.content" language="javascript" @save="doSave"></code-editor>
       </div>
     </div>
   </fs-page>
 </template>
 <script lang="ts" setup>
-import { onMounted, provide, ref } from "vue";
+import { onMounted, provide, ref, Ref } from "vue";
 import { useRoute } from "vue-router";
 import * as api from "./api";
 import yaml from "js-yaml";
 import { notification } from "ant-design-vue";
+import createCrudOptions from "./crud";
+import { useColumns } from "@fast-crud/fast-crud";
 
 const CertApplyPluginNames = ["CertApply", "CertApplyLego", "CertApplyUpload"];
 defineOptions({
@@ -44,25 +54,49 @@ defineOptions({
 const route = useRoute();
 
 const plugin = ref<any>({});
+const formOptionsRef: Ref = ref();
+const baseFormRef: Ref = ref({});
+function initFormOptions() {
+  const formCrudOptions = createCrudOptions({
+    crudExpose: {},
+    context: {},
+  });
+
+  const { buildFormOptions } = useColumns();
+
+  const formOptions = buildFormOptions(formCrudOptions.crudOptions, {});
+
+  formOptions.col = {
+    span: 24,
+  };
+  formOptions.labelCol = {
+    style: {
+      width: "100px",
+    },
+  };
+  formOptionsRef.value = formOptions;
+}
+initFormOptions();
 
 async function getPlugin() {
   const id = route.query.id;
   const pluginObj = await api.GetObj(id);
-  if (!pluginObj.metadata) {
-    pluginObj.metadata = yaml.dump({
-      input: {
-        cert: {
-          title: "前置任务生成的证书",
-          component: {
-            name: "output-selector",
-            from: [...CertApplyPluginNames],
-          },
-        },
-      },
-      output: {},
+  if (pluginObj.metadata) {
+    const metadata = yaml.load(pluginObj.metadata);
+    pluginObj.default = metadata.default || {};
+    delete metadata.default;
+    pluginObj.metadata = yaml.dump(metadata, {
+      indent: 2,
     });
   }
   plugin.value = pluginObj;
+
+  const baseFrom = {
+    ...pluginObj,
+  };
+  delete baseFrom.metadata;
+  delete baseFrom.content;
+  baseFormRef.value.setFormData(baseFrom);
 }
 
 onMounted(async () => {
@@ -76,8 +110,16 @@ provide("get:plugin", () => {
 const saveLoading = ref(false);
 async function doSave() {
   saveLoading.value = true;
+  const baseForm = baseFormRef.value.getFormData();
+  const metadata = yaml.load(plugin.value.metadata);
+  metadata.default = baseForm.default;
+  const form = {
+    ...plugin.value,
+    ...baseForm,
+    metadata: yaml.dump(metadata, { indent: 2 }),
+  };
   try {
-    await api.UpdateObj(plugin.value);
+    await api.UpdateObj(form);
     notification.success({
       message: "保存成功",
     });
@@ -112,9 +154,18 @@ async function doTest() {
       flex: 1;
     }
 
+    .base {
+      width: 400px;
+      max-width: 30%;
+      margin-right: 20px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
     .metadata {
       width: 600px;
-      max-width: 50%;
+      max-width: 30%;
       margin-right: 20px;
       display: flex;
       flex-direction: column;