优化减少组件间数组传递

src/components/CommandEditor.vue

@@ -2,28 +2,27 @@
   <div class="command-editor">
     <!-- 编程语言栏 -->
     <CommandLanguageBar
-      v-model="quickcommandInfo"
+      v-model="commandManager.state.currentCommand"
       :canCommandSave="canCommandSave"
-      :isRunCodePage="isRunCodePage"
       @action="handleAction"
     />
 
     <!-- 命令设置栏 -->
     <CommandConfig
       v-if="!isRunCodePage"
-      :model-value="commandConfig"
+      v-model="commandManager.state.currentCommand"
       @update:is-expanded="isConfigExpanded = $event"
       :expand-on-focus="true"
       class="command-config"
-      @update:model-value="updateCommandConfig"
     />
 
     <!-- 编辑器 -->
     <CodeEditor
-      v-model="quickcommandInfo.cmd"
+      v-model="commandManager.state.currentCommand.cmd"
+      v-model:cursor-position="
+        commandManager.state.currentCommand.cursorPosition
+      "
       :language="getLanguage()"
-      :cursor-position="quickcommandInfo.cursorPosition"
-      @update:cursor-position="quickcommandInfo.cursorPosition = $event"
       placeholder="请输入代码"
       class="codeEditor"
       ref="editor"
@@ -34,7 +33,7 @@
   <EditorTools
     ref="editorTools"
     v-show="!isConfigExpanded"
-    :commandCode="quickcommandInfo?.features?.code || 'temp'"
+    :commandCode="currentCommand.features?.code || 'temp'"
     @restore="restoreHistory"
   />
 
@@ -49,7 +48,7 @@
   </q-dialog>
 
   <!-- 运行结果 -->
-  <CommandRunResult :action="action" ref="result"></CommandRunResult>
+  <CommandRunResult ref="result"></CommandRunResult>
 </template>
 
 <script>
@@ -61,6 +60,7 @@ import CommandRunResult from "components/CommandRunResult";
 import CommandComposer from "components/composer/CommandComposer.vue";
 import programs from "js/options/programs.js";
 import { dbManager } from "js/utools.js";
+import { useCommandManager } from "js/commandManager.js";
 
 // 预加载 MonacoEditor
 const CodeEditorPromise = import("components/editor/CodeEditor.vue");
@@ -102,64 +102,23 @@ export default {
       },
     };
   },
-  props: {
-    action: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const isRunCodePage = ref(props.action.type === "run");
-    const canCommandSave = ref(!isRunCodePage.value);
+  setup() {
+    const commandManager = useCommandManager();
 
-    const commandAction = window.lodashM.cloneDeep(props.action);
-    const savedCommand = isRunCodePage.value
-      ? dbManager.getDB("cfg_codeHistory")
-      : commandAction.data || {};
+    const defaultCommand = commandManager.getDefaultCommand("quickcommand");
 
-    const defaultCommand = {
-      program: "quickcommand",
-      features: {
-        icon: programs.quickcommand.icon,
-        explain: "",
-        platform: ["win32", "linux", "darwin"],
-        mainPush: false,
-        cmds: [],
-      },
-      output: "text",
-      tags: [],
-      cmd: "",
-      scptarg: "",
-      charset: {
-        scriptCode: "",
-        outputCode: "",
-      },
-      customOptions: {
-        bin: "",
-        argv: "",
-        ext: "",
-      },
-    };
-    const quickcommandInfo = ref({
+    commandManager.state.currentCommand = {
       ...defaultCommand,
-      ...savedCommand,
-    });
+      ...commandManager.state.currentCommand,
+    };
 
-    // 默认命令不可编辑
-    if (quickcommandInfo.value.tags?.includes("默认") && !utools.isDev()) {
-      canCommandSave.value = false;
-    }
-
-    const commandConfig = computed(() => {
-      const { tags, output, features, program } = quickcommandInfo.value;
-      return { tags, output, features, program };
+    const currentCommand = computed(() => {
+      return commandManager.state.currentCommand;
     });
 
     return {
-      quickcommandInfo,
-      isRunCodePage,
-      canCommandSave,
-      commandConfig,
+      commandManager,
+      currentCommand,
     };
   },
   mounted() {
@@ -169,6 +128,17 @@ export default {
   beforeUnmount() {
     document.removeEventListener("keydown", this.handleKeydown);
   },
+  computed: {
+    isRunCodePage() {
+      return this.$route.name === "code";
+    },
+    canCommandSave() {
+      if (this.isRunCodePage) return false;
+      if (window.utools.isDev()) return true;
+      if (this.currentCommand.tags?.includes("默认")) return false;
+      return true;
+    },
+  },
   methods: {
     handleComposerAction(actionType, actionData) {
       switch (actionType) {
@@ -179,7 +149,7 @@ export default {
         case "apply":
           // actionData 命令的cmd
           this.showComposer = false;
-          this.quickcommandInfo.cmd = actionData;
+          this.commandManager.state.currentCommand.cmd = actionData;
           this.$refs.editor.formatDocument();
           break;
         case "close":
@@ -189,22 +159,17 @@ export default {
     },
     // 保存
     saveCurrentCommand() {
-      this.$emit("editorEvent", "save", this.quickcommandInfo);
+      this.$emit("editorEvent", "save", this.currentCommand);
       this.saveToHistory(); // 保存时记录历史
     },
     // 运行
     runCurrentCommand(command) {
       if (!command) {
         this.saveToHistory(); // 运行时不保存但记录历史
-        command = { ...this.quickcommandInfo };
+        command = { ...this.currentCommand };
       }
       this.$refs.result.runCurrentCommand(command);
     },
-    saveCodeHistory() {
-      if (!this.isRunCodePage) return;
-      let command = window.lodashM.cloneDeep(this.quickcommandInfo);
-      dbManager.putDB(command, "cfg_codeHistory");
-    },
     handleAction(event, data) {
       switch (event) {
         case "run":
@@ -228,8 +193,8 @@ export default {
     },
     saveToHistory() {
       this.$refs.editorTools.tryToSave(
-        this.quickcommandInfo.cmd,
-        this.quickcommandInfo.program
+        this.currentCommand.cmd,
+        this.currentCommand.program
       );
     },
     restoreHistory(item) {
@@ -237,22 +202,16 @@ export default {
       this.saveToHistory();
 
       // 恢复历史内容
-      this.quickcommandInfo.cmd = item.content;
-      this.quickcommandInfo.program = item.program;
-    },
-    updateCommandConfig(value) {
-      this.quickcommandInfo = {
-        ...this.quickcommandInfo,
-        ...value,
-      };
+      this.currentCommand.cmd = item.content;
+      this.currentCommand.program = item.program;
     },
     getLanguage() {
-      if (this.quickcommandInfo.program !== "custom") {
-        return this.quickcommandInfo.program;
+      if (this.currentCommand.program !== "custom") {
+        return this.currentCommand.program;
       }
-      if (!this.quickcommandInfo.customOptions.ext) return;
+      if (!this.currentCommand.customOptions.ext) return;
       let language = Object.values(programs).find(
-        (program) => program.ext === this.quickcommandInfo.customOptions.ext
+        (program) => program.ext === this.currentCommand.customOptions.ext
       );
       if (!language) return;
       return language.name;

src/components/CommandRunResult.vue

@@ -100,22 +100,12 @@ export default {
         /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/,
     };
   },
-  props: {
-    /**
-     * run：    「RunCode界面」 无侧栏，运行结果弹窗显示，保存命令历史
-     * edit：   「编辑命令界面』 有侧栏，运行结果弹窗显示，需要对payload临时赋值
-     * new：    『新建命令界面」 有侧栏，运行结果弹窗显示，需要对payload临时赋值
-     * config： 「配置界面』    运行结果弹窗显示，需要对payload临时赋值
-     * input：  『主输入框进入」 运行结果直接展示，动态调整窗体高度
-     */
-    action: Object,
-  },
   computed: {
     fromUtools() {
-      return this.action.type === "input";
+      return this.$route.name === "command";
     },
     needTempPayload() {
-      return ["edit", "new", "config"].includes(this.action.type);
+      return !["command", "code", "composer"].includes(this.$route.name);
     },
     maxHeight() {
       return this.fromUtools ? 600 : 400;

src/components/ComposerEditor.vue

@@ -2,27 +2,29 @@
   <CommandComposer
     ref="composer"
     @action="handleComposerAction"
-    v-model="quickcommandInfo"
+    v-model="commandManager.state.currentCommand"
     :disabled-control-buttons="disabledControlButtons"
     class="fixed-full"
   />
   <!-- 运行结果 -->
-  <CommandRunResult :action="action" ref="result"></CommandRunResult>
+  <CommandRunResult ref="result"></CommandRunResult>
 </template>
 
 <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 { ref, computed } from "vue";
+import { useCommandManager } from "js/commandManager.js";
 
 export default {
   components: { CommandComposer, CommandRunResult },
-  setup(props) {
+  setup() {
+    const commandManager = useCommandManager();
+
     const retoreToFullCommand = (command) => {
-      const { flows } = command;
-      if (!flows) return command;
+      const newCommand = window.lodashM.cloneDeep(command);
+      const { flows } = newCommand;
+      if (!flows) return newCommand;
       const newFlows = flows.map((flow) => ({
         ...flow,
         commands: flow.commands.map((cmd) => {
@@ -71,45 +73,25 @@ export default {
       };
     };
 
-    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: [],
-      output: "text",
-      tags: [],
-    };
-    const quickcommandInfo = ref({
+    const defaultCommand = commandManager.getDefaultCommand("quickcomposer");
+
+    commandManager.state.currentCommand = {
       ...defaultCommand,
-      ...retoreToFullCommand(savedCommand),
-    });
-
-    const isRunComposePage = computed(() => {
-      return props.action.type === "composer";
-    });
-
-    const disabledControlButtons = computed(() => {
-      return isRunComposePage.value ? ["close", "save", "apply"] : ["apply"];
-    });
+      ...retoreToFullCommand(commandManager.state.currentCommand),
+    };
 
     return {
-      quickcommandInfo,
+      commandManager,
       getLitedComposerCommand,
-      disabledControlButtons,
     };
   },
   emits: ["editorEvent"],
-  props: {
-    action: {
-      type: Object,
-      required: true,
+  computed: {
+    isRunComposerPage() {
+      return this.$route.name === "composer";
+    },
+    disabledControlButtons() {
+      return this.isRunComposerPage ? ["close", "save", "apply"] : ["apply"];
     },
   },
   methods: {

src/components/composer/FlowTabs.vue

@@ -74,7 +74,7 @@
     >
       <CommandConfig
         class="command-config-panel"
-        v-if="flow.id === 'main' && commandConfig.features"
+        v-if="flow.id === 'main' && showCommandConfig"
         :model-value="commandConfig"
         @update:model-value="updateCommandConfig"
       />
@@ -267,6 +267,14 @@ export default defineComponent({
       outputVariables: [],
     };
   },
+  computed: {
+    isRunComposerPage() {
+      return this.$route.name === "composer";
+    },
+    showCommandConfig() {
+      return !this.isRunComposerPage && this.commandConfig.features;
+    },
+  },
   methods: {
     generateFlowName(baseName = "func_") {
       return (

src/components/config/FooterBar.vue

@@ -77,7 +77,7 @@
           <q-btn
             split
             flat
-            @click="$emit('add-new', 'CommandEditor')"
+            @click="$emit('add-new', 'quickcommand')"
             color="primary"
             class="new-btn"
           >
@@ -87,7 +87,7 @@
           <q-btn
             split
             flat
-            @click="$emit('add-new', 'ComposerEditor')"
+            @click="$emit('add-new', 'quickcomposer')"
             color="primary"
             class="new-btn"
           >

src/components/editor/CommandLanguageBar.vue

@@ -238,10 +238,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    isRunCodePage: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ["update:modelValue", "action"],
   components: {
@@ -261,6 +257,9 @@ export default {
     currentCommand() {
       return this.modelValue;
     },
+    isRunCodePage() {
+      return this.$route.name === "code";
+    },
   },
   methods: {
     handleProgramChange(newProgram) {