可视化编排添加命令配置功能

src/components/ComposerEditor.vue

@@ -1,8 +1,9 @@
 <template>
   <CommandComposer
     ref="composer"
-    @use-composer="handleComposer"
-    :show-close-button="false"
+    @action="handleComposerAction"
+    v-model="quickcommandInfo"
+    :show-close-button="!isRunComposePage"
     class="fixed-full"
   />
   <!-- 运行结果 -->
@@ -12,29 +13,131 @@
 <script>
 import CommandComposer from "components/composer/CommandComposer.vue";
 import CommandRunResult from "components/CommandRunResult";
+import { findCommandByValue } from "js/composer/composerConfig";
+import programs from "js/options/programs.js";
+import { provide, ref } from "vue";
 
 export default {
   components: { CommandComposer, CommandRunResult },
+  setup(props) {
+    provide("allQuickCommandTags", props.allQuickCommandTags);
+
+    const retoreToFullCommand = (command) => {
+      const { flows } = command;
+      if (!flows) return command;
+      const newFlows = flows.map((flow) => ({
+        ...flow,
+        commands: flow.commands.map((cmd) => {
+          // 恢复所有属性
+          const command = findCommandByValue(cmd.value);
+          return {
+            ...command,
+            ...cmd,
+          };
+        }),
+      }));
+      return {
+        ...command,
+        flows: newFlows,
+      };
+    };
+
+    const getLitedComposerCommand = (command) => {
+      const { flows } = command;
+      if (!flows) return command;
+      const newFlows = flows.map((flow) => ({
+        ...flow,
+        commands: flow.commands.map((cmd) => {
+          const cmdCopy = { ...cmd };
+          // 移除不必要保存的属性
+          const uselessProps = [
+            "config",
+            "label",
+            "component",
+            "subCommands",
+            "outputs",
+            "options",
+            "icon",
+            "width",
+            "placeholder",
+            "summary",
+            "type",
+          ];
+          uselessProps.forEach((prop) => delete cmdCopy[prop]);
+          return cmdCopy;
+        }),
+      }));
+      return {
+        ...command,
+        flows: newFlows,
+      };
+    };
+
+    const commandAction = window.lodashM.cloneDeep(props.action);
+    const savedCommand = commandAction.data || {};
+    const defaultCommand = {
+      program: "quickcomposer",
+      features: {
+        icon: programs.quickcommand.icon,
+        explain: "",
+        platform: ["win32", "linux", "darwin"],
+        mainPush: false,
+        cmds: [""],
+      },
+      flows: [
+        {
+          id: "main",
+          name: "main",
+          label: "主流程",
+          commands: [],
+          customVariables: [],
+        },
+      ],
+      output: "text",
+      tags: [],
+    };
+    const quickcommandInfo = ref({
+      ...defaultCommand,
+      ...retoreToFullCommand(savedCommand),
+    });
+    return {
+      quickcommandInfo,
+      getLitedComposerCommand,
+    };
+  },
+  emits: ["editorEvent"],
   props: {
     action: {
       type: Object,
       required: true,
     },
+    allQuickCommandTags: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      isRunComposePage: this.action.type === "composer",
+    };
   },
   methods: {
-    handleComposer({ type, code }) {
-      switch (type) {
+    handleComposerAction(actionType, command) {
+      switch (actionType) {
         case "run":
-          return this.runCurrentCommand(code);
+          return this.runCurrentCommand(command);
+        case "close":
+          return this.$emit("editorEvent", {
+            type: "back",
+          });
+        case "save":
+          return this.$emit("editorEvent", {
+            type: "save",
+            data: this.getLitedComposerCommand(command),
+          });
       }
     },
-    runCurrentCommand(cmd) {
-      if (!cmd) return;
-      let command = {
-        cmd: cmd,
-        output: "text",
-        program: "quickcommand",
-      };
+    runCurrentCommand(command) {
       this.$refs.result.runCurrentCommand(command);
     },
   },