优化减少组件间数组传递

src/App.vue

@@ -11,6 +11,7 @@
 import { defineComponent } from "vue";
 import { setCssVar } from "quasar";
 import { utoolsFull, dbManager } from "./js/utools.js";
+import { useCommandManager } from "./js/commandManager.js";
 import programmings from "./js/options/programs.js";
 import defaultProfile from "./js/options/defaultProfile.js";
 import Cron from "croner";
@@ -22,6 +23,7 @@ export default defineComponent({
   name: "App",
   data() {
     return {
+      commandManager: useCommandManager(),
       setCssVar: setCssVar,
       programs: programmings,
       isRunningCommand: false,
@@ -65,7 +67,7 @@ export default defineComponent({
       });
       window.isAppVersion4() &&
         this.utools.onMainPush(
-          async ({ code, type, payload }) => {
+          async ({ code, payload }) => {
             let result = await this.runCommand(code, payload, 5000);
             return result.map((x) => {
               return {
@@ -73,7 +75,7 @@ export default defineComponent({
               };
             });
           },
-          ({ code, type, payload, option }) => {
+          ({ option }) => {
             window.quickcommand.writeClipboard(option.text);
             window.utools.showNotification("已复制");
           }
@@ -97,10 +99,7 @@ export default defineComponent({
       );
     },
     saveProfile() {
-      dbManager.putDB(
+      dbManager.putDB(window.lodashM.cloneDeep(this.profile), "cfg_profile");
-        window.lodashM.cloneDeep(this.profile),
-        "cfg_profile"
-      );
       dbManager.putDB(
         window.lodashM.cloneDeep(this.nativeProfile),
         "cfg_" + utools.getNativeId() + "_profile"
@@ -124,19 +123,21 @@ export default defineComponent({
       }
     },
     enterPlugin(enter) {
-      // 使用情况统计
-      // this.usageStatistics(enter.code, this.parseDate(new Date()));
       this.updateExp();
       this.$q.dark.set(utools.isDarkColors());
       this.enterData = enter;
-      // 自动分离目前还没有好的方案
-      // if (this.$root.profile.autoDetachFeatures?.includes(enter.code)) {
-      // autoDetach.autoDetach();
-      // }
       this.$router.push(enter.code);
     },
     outPlugin() {
-      this.$refs.view.$refs?.commandEditor?.saveCodeHistory();
+      // 退出时保存RunCode和RunComposer的命令
+      if (!["code", "composer"].includes(this.$route.name)) return;
+
+      const currentCommand = window.lodashM.cloneDeep(
+        this.commandManager.state.currentCommand
+      );
+
+      dbManager.putDB(currentCommand, `cfg_${this.$route.name}History`);
+
       this.$router.push("/");
       this.saveProfile();
     },

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: {
+  setup() {
-    action: {
+    const commandManager = useCommandManager();
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const isRunCodePage = ref(props.action.type === "run");
-    const canCommandSave = ref(!isRunCodePage.value);
 
-    const commandAction = window.lodashM.cloneDeep(props.action);
+    const defaultCommand = commandManager.getDefaultCommand("quickcommand");
-    const savedCommand = isRunCodePage.value
-      ? dbManager.getDB("cfg_codeHistory")
-      : commandAction.data || {};
 
-    const defaultCommand = {
+    commandManager.state.currentCommand = {
-      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({
       ...defaultCommand,
-      ...savedCommand,
+      ...commandManager.state.currentCommand,
-    });
+    };
 
-    // 默认命令不可编辑
+    const currentCommand = computed(() => {
-    if (quickcommandInfo.value.tags?.includes("默认") && !utools.isDev()) {
+      return commandManager.state.currentCommand;
-      canCommandSave.value = false;
-    }
-
-    const commandConfig = computed(() => {
-      const { tags, output, features, program } = quickcommandInfo.value;
-      return { tags, output, features, program };
     });
 
     return {
-      quickcommandInfo,
+      commandManager,
-      isRunCodePage,
+      currentCommand,
-      canCommandSave,
-      commandConfig,
     };
   },
   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.currentCommand.cmd,
-        this.quickcommandInfo.program
+        this.currentCommand.program
       );
     },
     restoreHistory(item) {
@@ -237,22 +202,16 @@ export default {
       this.saveToHistory();
 
       // 恢复历史内容
-      this.quickcommandInfo.cmd = item.content;
+      this.currentCommand.cmd = item.content;
-      this.quickcommandInfo.program = item.program;
+      this.currentCommand.program = item.program;
-    },
-    updateCommandConfig(value) {
-      this.quickcommandInfo = {
-        ...this.quickcommandInfo,
-        ...value,
-      };
     },
     getLanguage() {
-      if (this.quickcommandInfo.program !== "custom") {
+      if (this.currentCommand.program !== "custom") {
-        return this.quickcommandInfo.program;
+        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 { useCommandManager } from "js/commandManager.js";
-import { ref, computed } from "vue";
 
 export default {
   components: { CommandComposer, CommandRunResult },
-  setup(props) {
+  setup() {
+    const commandManager = useCommandManager();
+
     const retoreToFullCommand = (command) => {
-      const { flows } = command;
+      const newCommand = window.lodashM.cloneDeep(command);
-      if (!flows) return 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 defaultCommand = commandManager.getDefaultCommand("quickcomposer");
-    const savedCommand = commandAction.data || {};
+
-    const defaultCommand = {
+    commandManager.state.currentCommand = {
-      program: "quickcomposer",
-      features: {
-        icon: programs.quickcommand.icon,
-        explain: "",
-        platform: ["win32", "linux", "darwin"],
-        mainPush: false,
-        cmds: [],
-      },
-      flows: [],
-      output: "text",
-      tags: [],
-    };
-    const quickcommandInfo = ref({
       ...defaultCommand,
-      ...retoreToFullCommand(savedCommand),
+      ...retoreToFullCommand(commandManager.state.currentCommand),
-    });
+    };
-
-    const isRunComposePage = computed(() => {
-      return props.action.type === "composer";
-    });
-
-    const disabledControlButtons = computed(() => {
-      return isRunComposePage.value ? ["close", "save", "apply"] : ["apply"];
-    });
 
     return {
-      quickcommandInfo,
+      commandManager,
       getLitedComposerCommand,
-      disabledControlButtons,
     };
   },
   emits: ["editorEvent"],
-  props: {
+  computed: {
-    action: {
+    isRunComposerPage() {
-      type: Object,
+      return this.$route.name === "composer";
-      required: true,
+    },
+    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) {

src/js/commandManager.js

@@ -3,6 +3,7 @@ import quickcommandParser from "js/common/quickcommandParser.js";
 import importAll from "js/common/importAll.js";
 import { utoolsFull, dbManager } from "js/utools.js";
 import { getUniqueId } from "js/common/uuid.js";
+import programs from "js/options/programs.js";
 import outputTypes from "js/options/outputTypes.js";
 
 // 默认命令
@@ -18,6 +19,7 @@ const state = reactive({
   activatedQuickPanels: [],
   currentTag: "",
   commandSearchKeyword: "",
+  currentCommand: {},
 });
 
 const getCmdType = (cmds) => {
@@ -253,6 +255,38 @@ export function useCommandManager() {
     });
   };
 
+  const getDefaultCommand = (program = "quickcommand") => {
+    const quickcomposerCommand = {
+      program,
+      features: {
+        icon: programs.quickcommand.icon,
+        explain: "",
+        platform: ["win32", "linux", "darwin"],
+        mainPush: false,
+        cmds: [],
+      },
+      output: "text",
+      tags: [],
+    };
+    const quickcommandCommand = {
+      ...quickcomposerCommand,
+      cmd: "",
+      scptarg: "",
+      charset: {
+        scriptCode: "",
+        outputCode: "",
+      },
+      customOptions: {
+        bin: "",
+        argv: "",
+        ext: "",
+      },
+    };
+    return program === "quickcomposer"
+      ? quickcomposerCommand
+      : quickcommandCommand;
+  };
+
   return {
     state,
     getAllQuickCommands,
@@ -268,5 +302,6 @@ export function useCommandManager() {
     clearAllFeatures,
     clearAllCommands,
     changeCurrentTag,
+    getDefaultCommand,
   };
 }

src/pages/CommandPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CommandRunResult :action="action" ref="result"></CommandRunResult>
+    <CommandRunResult ref="result"></CommandRunResult>
   </div>
 </template>
 
@@ -13,10 +13,6 @@ export default {
   data() {
     return {
       utools: utoolsFull,
-      action: {
-        type: "input",
-        data: {},
-      },
       featureCode: this.$route.path.slice(1),
     };
   },

src/pages/ConfigurationPage.vue

@@ -21,18 +21,11 @@
     <!-- 命令编辑界面 -->
     <transition name="slide">
       <div v-if="isEditorShow" class="editor-container">
-        <component
+        <component :is="editorComponent" @editorEvent="handleEditorEvent" />
-          :is="commandEditorAction.component"
-          :action="commandEditorAction"
-          @editorEvent="handleEditorEvent"
-        />
       </div>
     </transition>
 
-    <CommandRunResult
+    <CommandRunResult ref="result"></CommandRunResult>
-      :action="{ type: 'config' }"
-      ref="result"
-    ></CommandRunResult>
   </div>
 </template>
 
@@ -69,6 +62,7 @@ export default {
       isEditorShow: false,
       commandEditorAction: {},
       footerBarHeight: "40px",
+      editorComponent: "CommandEditor",
     };
   },
   computed: {
@@ -170,18 +164,19 @@ export default {
         typeof commandOrCode === "string"
           ? this.allQuickCommands[commandOrCode]
           : commandOrCode;
-      this.commandEditorAction = {
+      this.editorComponent =
-        type: "edit",
+        command.program === "quickcomposer"
-        data: window.lodashM.cloneDeep(command),
+          ? "ComposerEditor"
-        component: command.flows ? "ComposerEditor" : "CommandEditor",
+          : "CommandEditor";
-      };
+      this.commandManager.state.currentCommand =
+        window.lodashM.cloneDeep(command);
       this.isEditorShow = true;
     },
     // 导入命令
-    async importCommand(quickCommandInfo) {
+    async importCommand(command) {
-      const command = await this.commandManager.importCommand(quickCommandInfo);
+      const result = await this.commandManager.importCommand(command);
-      if (command) {
+      if (result) {
-        this.locateToCommand(command.tags, command.features?.code);
+        this.locateToCommand(result.tags, result.features?.code);
       }
     },
     // 定位命令, 包含changeCurrentTag
@@ -204,12 +199,11 @@ export default {
       });
     },
     // 新建命令
-    addNewCommand(component = "CommandEditor") {
+    addNewCommand(program = "quickcommand") {
-      this.commandEditorAction = {
+      this.editorComponent =
-        type: "new",
+        program === "quickcomposer" ? "ComposerEditor" : "CommandEditor";
-        data: {},
+      this.commandManager.state.currentCommand =
-        component,
+        this.commandManager.getDefaultCommand(program);
-      };
       this.isEditorShow = true;
     },
     saveCommand(command) {

src/pages/RunCodePage.vue

@@ -1,18 +1,21 @@
 <template>
-  <CommandEditor ref="commandEditor" :action="action" />
+  <CommandEditor />
 </template>
 
 <script>
 import CommandEditor from "components/CommandEditor";
+import { dbManager } from "js/utools.js";
+import { useCommandManager } from "js/commandManager.js";
 
 export default {
   components: { CommandEditor },
-  data() {
+  setup() {
-    return {
+    const commandManager = useCommandManager();
-      action: {
+    const savedCommand = dbManager.getDB("cfg_codeHistory");
-        type: "run",
+    const defaultCommand = commandManager.getDefaultCommand("quickcommand");
-        data: {},
+    commandManager.state.currentCommand = {
-      },
+      ...defaultCommand,
+      ...savedCommand,
     };
   },
 };

src/pages/RunComposerPage.vue

@@ -1,20 +1,24 @@
 <template>
   <div>
-    <ComposerEditor :action="action"></ComposerEditor>
+    <ComposerEditor />
   </div>
 </template>
 
 <script>
 import ComposerEditor from "components/ComposerEditor";
+import { dbManager } from "js/utools.js";
+import { useCommandManager } from "js/commandManager.js";
 
 export default {
   components: { ComposerEditor },
-  data() {
+  setup() {
-    return {
+    const commandManager = useCommandManager();
-      action: {
+    const savedCommand = dbManager.getDB("cfg_composerHistory");
-        type: "composer",
+    const defaultCommand = commandManager.getDefaultCommand("quickcomposer");
-        data: {},
+    commandManager.state.currentCommand = {
-      },
+      ...defaultCommand,
+      ...savedCommand,
+      program: "quickcomposer",
     };
   },
 };