From 2cb0c6bb325ce9f2d5a9904cc5745e4364363781 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 12 Feb 2025 23:41:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E7=BC=96=E6=8E=92?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=91=BD=E4=BB=A4=E9=85=8D=E7=BD=AE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue              |  44 +-
 src/components/CommandRunResult.vue           |  32 +-
 src/components/ComposerEditor.vue             | 127 ++++-
 src/components/card/layouts/DenseLayout.vue   |   8 +-
 src/components/card/layouts/ListLayout.vue    |   6 +
 src/components/composer/CommandComposer.vue   |  14 +-
 src/components/composer/ComposerCard.vue      |   9 +-
 src/components/composer/ComposerFlow.vue      |   4 -
 src/components/composer/FlowTabs.vue          | 164 +++----
 .../composer/flow/ComposerButtons.vue         |  26 +-
 src/components/editor/CommandConfig.vue       | 336 +++++++++++++
 src/components/editor/MatchRuleEditor.vue     | 449 ++++++++++++++++++
 src/css/composer.css                          |   4 +
 src/js/autoDetach.js                          |  66 ---
 src/js/commandManager.js                      |  53 ++-
 src/js/common/uuid.js                         |   6 +-
 src/js/composer/generateCode.js               |   7 +
 src/js/options/commandTypes.js                |  17 +-
 src/pages/CommandPage.vue                     |   2 +-
 src/pages/ConfigurationPage.vue               |  16 +-
 20 files changed, 1147 insertions(+), 243 deletions(-)
 create mode 100644 src/components/editor/CommandConfig.vue
 create mode 100644 src/components/editor/MatchRuleEditor.vue
 delete mode 100644 src/js/autoDetach.js

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 46af740..81e818b 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -4,9 +4,9 @@
     ref="sidebar"
     :canCommandSave="canCommandSave"
     :quickcommandInfo="quickcommandInfo"
+    :allQuickCommandTags="allQuickCommandTags"
     class="absolute-left shadow-1"
     :style="{
-      width: sideBarWidth + 'px',
       zIndex: 1,
       transform: isFullscreen ? 'translateX(-100%)' : 'translateX(0)',
       transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
@@ -64,7 +64,11 @@
 
   <!-- 可视化编排 -->
   <q-dialog v-model="showComposer" maximized>
-    <CommandComposer ref="composer" @use-composer="handleComposer" />
+    <CommandComposer
+      ref="composer"
+      @action="handleComposerAction"
+      :model-value="{ flows }"
+    />
   </q-dialog>
 
   <!-- 运行结果 -->
@@ -78,6 +82,7 @@ import CommandLanguageBar from "components/editor/CommandLanguageBar";
 import EditorTools from "components/editor/EditorTools";
 import CommandRunResult from "components/CommandRunResult";
 import CommandComposer from "components/composer/CommandComposer.vue";
+import programs from "js/options/programs.js";
 
 // 预加载 MonacoEditor
 const MonacoEditorPromise = import("components/editor/MonacoEditor");
@@ -109,13 +114,22 @@ export default {
   },
   data() {
     return {
-      programLanguages: Object.keys(this.$root.programs),
+      programLanguages: Object.keys(programs),
       sideBarWidth: 200,
       languageBarHeight: 40,
       showComposer: false,
       isRunCodePage: this.action.type === "run",
       canCommandSave: this.action.type !== "run",
       showSidebar: this.action.type !== "run",
+      flows: [
+        {
+          id: "main",
+          name: "main",
+          label: "主流程",
+          commands: [],
+          customVariables: [],
+        },
+      ],
       quickcommandInfo: {
         program: "quickcommand",
         cmd: "",
@@ -141,15 +155,9 @@ export default {
       required: true,
     },
     allQuickCommandTags: Array,
-    isLeaving: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  created() {
-    this.commandInit();
   },
   mounted() {
+    this.commandInit();
     this.sidebarInit();
   },
   computed: {
@@ -196,7 +204,7 @@ export default {
     // 匹配编程语言
     matchLanguage() {
       if (!this.quickcommandInfo.customOptions.ext) return;
-      let language = Object.values(this.$root.programs).filter(
+      let language = Object.values(programs).filter(
         (program) => program.ext === this.quickcommandInfo.customOptions.ext
       );
       if (language.length) {
@@ -205,7 +213,7 @@ export default {
     },
     // 设置编程语言
     setLanguage(language) {
-      let highlight = this.$root.programs[language].highlight;
+      let highlight = programs[language].highlight;
       this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
     },
     insertText(text) {
@@ -216,14 +224,16 @@ export default {
       this.$refs.editor.setEditorValue(text);
       this.$refs.editor.formatDocument();
     },
-    handleComposer({ type, code }) {
-      switch (type) {
+    handleComposerAction(actionType, actionData) {
+      switch (actionType) {
         case "run":
-          return this.runCurrentCommand(code);
+          return this.runCurrentCommand(actionData);
         case "insert":
-          return this.insertText(code);
+          return this.insertText(actionData);
         case "apply":
-          return this.replaceText(code);
+          return this.replaceText(actionData);
+        case "close":
+          return this.showComposer = false;
       }
     },
     // 保存
diff --git a/src/components/CommandRunResult.vue b/src/components/CommandRunResult.vue
index de82142..19f8428 100644
--- a/src/components/CommandRunResult.vue
+++ b/src/components/CommandRunResult.vue
@@ -75,6 +75,8 @@ import specialVars from "js/options/specialVars.js";
 import commandTypes from "js/options/commandTypes.js";
 import ResultArea from "components/ResultArea.vue";
 import ResultMenu from "components/popup/ResultMenu.vue";
+import { generateFlowsCode } from "js/composer/generateCode";
+import { getValidCommand } from "js/commandManager";
 
 export default {
   components: { ResultArea, ResultMenu },
@@ -127,11 +129,20 @@ export default {
   methods: {
     // 运行命令
     async runCurrentCommand(currentCommand) {
+      let command = window.lodashM.cloneDeep(currentCommand);
+      // 如果是composer命令，则动态生成cmd
+      if (command.program === "quickcomposer") {
+        command.cmd = generateFlowsCode(command.flows);
+      }
       this.$root.isRunningCommand = true;
-      await this.getTempPayload(currentCommand);
-      if (currentCommand.cmd.includes("{{subinput"))
-        return this.setSubInput(currentCommand);
-      this.fire(currentCommand);
+      try {
+        await this.getTempPayload(command);
+      } catch (error) {
+        return quickcommand.showMessageBox(error.toString(), "error");
+      }
+      // 如果命令包含子输入框，则设置子输入框
+      if (command.cmd.includes("{{subinput")) return this.setSubInput(command);
+      this.fire(command);
     },
     async fire(currentCommand) {
       currentCommand.cmd = this.assignSpecialVars(currentCommand.cmd);
@@ -147,6 +158,7 @@ export default {
       let resultOpts = { outPlugin, action, earlyExit };
       switch (currentCommand.program) {
         case "quickcommand":
+        case "quickcomposer":
           window.runCodeInSandbox(
             currentCommand.cmd,
             (stdout, stderr) => this.handleResult(stdout, stderr, resultOpts),
@@ -278,11 +290,15 @@ export default {
     // payload 临时赋值
     async getTempPayload(currentCommand) {
       if (!this.needTempPayload) return;
-      let type =
-        currentCommand.cmdType || currentCommand.features?.cmds[0].type;
+      currentCommand = getValidCommand(currentCommand);
+      const firstCmd = currentCommand.features.cmds[0];
+      const type = firstCmd.type || "text";
       this.$root.enterData = {
-        type: type || "text",
-        payload: await commandTypes[type]?.tempPayload?.(),
+        type,
+        payload:
+          type === "text"
+            ? firstCmd
+            : (await commandTypes[type]?.tempPayload?.()) || {},
       };
     },
     handleResult(stdout, stderr, options) {
diff --git a/src/components/ComposerEditor.vue b/src/components/ComposerEditor.vue
index 19b7cdb..6cdfc8a 100644
--- a/src/components/ComposerEditor.vue
+++ b/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);
     },
   },
diff --git a/src/components/card/layouts/DenseLayout.vue b/src/components/card/layouts/DenseLayout.vue
index 4e1db69..ab9d0d7 100644
--- a/src/components/card/layouts/DenseLayout.vue
+++ b/src/components/card/layouts/DenseLayout.vue
@@ -46,7 +46,7 @@
         width="16px"
       />
       <div>|</div>
-      <q-img :src="programs[commandInfo.program].icon" width="16px" />
+      <q-img :src="program.icon" width="16px" />
       <div class="text-subtitle2">{{ programName }}</div>
     </div>
   </q-card-section>
@@ -75,6 +75,12 @@ export default {
   },
   computed: {
     program() {
+      if (this.commandInfo.program === "quickcomposer") {
+        return {
+          ...this.programs.quickcommand,
+          shortName: "可视化",
+        };
+      }
       return this.programs[this.commandInfo.program];
     },
     programName() {
diff --git a/src/components/card/layouts/ListLayout.vue b/src/components/card/layouts/ListLayout.vue
index 82ac87b..351aad7 100644
--- a/src/components/card/layouts/ListLayout.vue
+++ b/src/components/card/layouts/ListLayout.vue
@@ -70,6 +70,12 @@ export default {
   },
   computed: {
     program() {
+      if (this.commandInfo.program === "quickcomposer") {
+        return {
+          ...this.programs.quickcommand,
+          name: "可视化编排",
+        };
+      }
       return this.programs[this.commandInfo.program];
     },
   },
diff --git a/src/components/composer/CommandComposer.vue b/src/components/composer/CommandComposer.vue
index a13c8d8..e8ce444 100644
--- a/src/components/composer/CommandComposer.vue
+++ b/src/components/composer/CommandComposer.vue
@@ -10,8 +10,10 @@
       <!-- 右侧命令流程 -->
       <div class="col command-section">
         <FlowTabs
-          @action="handleComposer"
+          @action="handleAction"
           :show-close-button="showCloseButton"
+          :model-value="modelValue"
+          @update:model-value="$emit('update:modelValue', $event)"
         />
       </div>
     </div>
@@ -44,12 +46,16 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
   },
-  emits: ["use-composer"],
+  emits: ["action", "update:modelValue"],
   methods: {
-    handleComposer(type, code) {
+    handleAction(actionType, actionData) {
       // 直接转发事件和代码
-      this.$emit("use-composer", { type, code });
+      this.$emit("action", actionType, actionData);
     },
     findCommandNeedLoading(flow) {
       // 暂时只在运行单独命令时显示载入界面，因为运行整个命令流时，如果不打印输出，是无法判断什么时候运行结束的，
diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index f7fbc80..c4bb269 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/src/components/composer/ComposerCard.vue
@@ -197,7 +197,7 @@ export default defineComponent({
       };
       const consoleLogVars =
         this.getAvailableOutputVariableName(outputVariable);
-      const tempFlow = {
+      const tempFlows = [{
         name: "main",
         commands: [
           tempCommand,
@@ -207,9 +207,10 @@ export default defineComponent({
               console.log(${consoleLogVars})
             }`,
           },
-        ],
-      };
-      this.$emit("run", tempFlow);
+          ],
+        },
+      ];
+      this.$emit("run", tempFlows);
     },
     handleToggleCollapse() {
       if (this.localCommand.isControlFlow) {
diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index a6ff593..3e327ab 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/src/components/composer/ComposerFlow.vue
@@ -82,10 +82,6 @@ export default defineComponent({
       required: true,
       default: () => [],
     },
-    generateCode: {
-      type: Function,
-      required: true,
-    },
     showCloseButton: {
       type: Boolean,
       default: true,
diff --git a/src/components/composer/FlowTabs.vue b/src/components/composer/FlowTabs.vue
index d0fbc64..bc9aefc 100644
--- a/src/components/composer/FlowTabs.vue
+++ b/src/components/composer/FlowTabs.vue
@@ -59,9 +59,9 @@
       </div>
 
       <ComposerButtons
-        :generate-code="generateAllFlowCode"
         :is-all-collapsed="isAllCollapsed"
         :show-close-button="showCloseButton"
+        :flows="flows"
         @action="handleAction"
       />
     </div>
@@ -72,10 +72,15 @@
       :key="flow.id"
       v-show="activeTab === flow.id"
     >
+      <CommandConfig
+        class="command-config-panel"
+        v-if="flow.id === 'main' && commandConfig.features"
+        :model-value="commandConfig"
+        @update:model-value="updateCommandConfig"
+      />
       <ComposerFlow
         class="flow-wrapper"
         v-model="flow.commands"
-        :generate-code="() => generateFlowCode(flow)"
         :show-close-button="flows.length > 1"
         @action="(type, payload) => handleAction(type, payload)"
         ref="flowRefs"
@@ -84,7 +89,7 @@
         v-model="showVariableManager"
         :flow="flow"
         :variables="flow.customVariables"
-        @update-flow="Sub(flow)"
+        @update-flow="updateFlows(flow)"
         :is-main-flow="flow.id === 'main'"
         :output-variables="outputVariables"
         class="variable-panel"
@@ -99,10 +104,10 @@ import draggable from "vuedraggable";
 import ComposerFlow from "components/composer/ComposerFlow.vue";
 import ComposerButtons from "components/composer/flow/ComposerButtons.vue";
 import FlowManager from "components/composer/flow/FlowManager.vue";
-import { generateCode } from "js/composer/generateCode";
-import { findCommandByValue } from "js/composer/composerConfig";
+import CommandConfig from "components/editor/CommandConfig.vue";
 import { generateUniqSuffix } from "js/composer/variableManager";
 import { getUniqueId } from "js/common/uuid";
+
 export default defineComponent({
   name: "FlowTabs",
   components: {
@@ -110,23 +115,44 @@ export default defineComponent({
     ComposerButtons,
     draggable,
     FlowManager,
+    CommandConfig,
   },
+  emits: ["update:modelValue", "action"],
   props: {
     showCloseButton: {
       type: Boolean,
       default: true,
     },
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
   },
-  setup() {
-    const mainFlow = ref({
-      id: "main",
-      name: "main",
-      label: "主流程",
-      commands: [],
-      customVariables: [],
+  setup(props, { emit }) {
+    const updateFlows = (newFlows) => {
+      emit("update:modelValue", {
+        ...props.modelValue,
+        flows: newFlows,
+      });
+    };
+
+    const flows = computed(() => props.modelValue.flows);
+
+    const mainFlow = computed({
+      get: () => flows.value[0],
+      set: (newVal) => {
+        const newFlows = [newVal, ...flows.value.slice(1)];
+        updateFlows(newFlows);
+      },
     });
 
-    const subFlows = ref([]);
+    const subFlows = computed({
+      get: () => flows.value.slice(1),
+      set: (newVal) => {
+        const newFlows = [mainFlow.value, ...newVal];
+        updateFlows(newFlows);
+      },
+    });
 
     // 获取所有函数
     const getCurrentFunctions = () => {
@@ -140,8 +166,6 @@ export default defineComponent({
     };
     provide("getCurrentFunctions", getCurrentFunctions);
 
-    const flows = computed(() => [mainFlow.value, ...subFlows.value]);
-
     const activeTab = ref("main");
 
     const getCurrentFlow = () => {
@@ -208,6 +232,7 @@ export default defineComponent({
       subFlows,
       activeTab,
       getOutputVariables,
+      updateFlows,
     };
   },
   data() {
@@ -217,6 +242,12 @@ export default defineComponent({
       outputVariables: [],
     };
   },
+  computed: {
+    commandConfig() {
+      const { tags, output, features } = this.modelValue;
+      return { tags, output, features };
+    },
+  },
   methods: {
     generateFlowName(baseName = "func_") {
       return (
@@ -249,7 +280,7 @@ export default defineComponent({
         });
       }
 
-      this.subFlows.push(newFlow);
+      this.subFlows = [...this.subFlows, newFlow];
 
       if (options.silent) {
         return;
@@ -263,7 +294,10 @@ export default defineComponent({
     removeFlow(flow) {
       const index = this.subFlows.findIndex((f) => f.id === flow.id);
       if (index > -1) {
-        this.subFlows.splice(index, 1);
+        this.subFlows = [
+          ...this.subFlows.slice(0, index),
+          ...this.subFlows.slice(index + 1),
+        ];
         this.activeTab = this.flows[0].id;
       }
     },
@@ -279,25 +313,13 @@ export default defineComponent({
       // 完全更新参数
       this.subFlows[index].customVariables = [...newParams, ...localVars];
     },
-    generateFlowCode(flow) {
-      return generateCode(flow);
-    },
-    generateAllFlowCode() {
-      // 生成所有flow的代码
-      return [...this.subFlows, this.mainFlow]
-        .map((flow) => this.generateFlowCode(flow))
-        .join("\n\n");
-    },
     handleAction(type, payload) {
       switch (type) {
         case "save":
           this.saveFlows();
           break;
-        case "load":
-          this.loadFlows();
-          break;
         case "run":
-          this.runFlows(payload);
+          this.runCommand(payload);
           break;
         case "collapseAll":
           this.collapseAll();
@@ -308,6 +330,9 @@ export default defineComponent({
         case "toggleVariableManager":
           this.toggleVariableManager();
           break;
+        case "close":
+          this.$emit("action", "close");
+          break;
         case "addFlow":
           // 处理新函数创建
           const index = this.subFlows.findIndex((f) => f.name === payload.name);
@@ -319,7 +344,7 @@ export default defineComponent({
           }
           break;
         default:
-          this.$emit("action", type, this.generateAllFlowCode());
+          this.$emit("action", type, payload);
       }
     },
     toggleVariableManager() {
@@ -327,61 +352,17 @@ export default defineComponent({
       this.outputVariables = this.getOutputVariables();
     },
     saveFlows() {
-      const flowsData = this.flows.map((flow) => ({
-        ...flow,
-        commands: flow.commands.map((cmd) => {
-          const cmdCopy = { ...cmd };
-          // 移除不必要保存的属性
-          const uselessProps = [
-            "config",
-            "code",
-            "label",
-            "component",
-            "subCommands",
-            "outputs",
-            "options",
-            "defaultValue",
-            "icon",
-            "width",
-            "placeholder",
-            "summary",
-            "type",
-            "defaultOutputVariable",
-          ];
-          uselessProps.forEach((prop) => delete cmdCopy[prop]);
-          return cmdCopy;
-        }),
-      }));
-      localStorage.setItem("quickcomposer.flows", JSON.stringify(flowsData));
-      quickcommand.showMessageBox("保存成功");
+      this.$emit("action", "save", {
+        ...this.modelValue,
+        flows: this.flows,
+      });
     },
-    loadFlows() {
-      const savedFlows = localStorage.getItem("quickcomposer.flows");
-      if (!savedFlows) return;
-
-      const flowsData = JSON.parse(savedFlows);
-      const newFlows = flowsData.map((flow) => ({
-        ...flow,
-        commands: flow.commands.map((cmd) => {
-          // 恢复所有属性
-          const command = findCommandByValue(cmd.value);
-          return {
-            ...command,
-            ...cmd,
-          };
-        }),
-      }));
-      this.Sub(newFlows);
-      this.activeTab = this.mainFlow.id;
-    },
-    runFlows(flow) {
-      const code = flow
-        ? this.generateFlowCode(flow)
-        : this.generateAllFlowCode();
-      this.$emit("action", "run", code);
-      if (!code.includes("console.log")) {
-        quickcommand.showMessageBox("已运行");
-      }
+    runCommand(flows = this.flows) {
+      const command = {
+        ...this.modelValue,
+        flows,
+      };
+      this.$emit("action", "run", command);
     },
     collapseAll() {
       this.$refs.flowRefs.forEach((flow) => {
@@ -399,9 +380,12 @@ export default defineComponent({
       this.activeTab = flow.id;
       this.toggleVariableManager();
     },
-    Sub(flow) {
-      this.mainFlow = flow[0];
-      this.subFlows = flow.slice(1);
+    updateCommandConfig(newVal) {
+      const newModelValue = {
+        ...this.modelValue,
+        ...newVal,
+      };
+      this.$emit("update:modelValue", newModelValue);
     },
   },
 });
@@ -556,4 +540,8 @@ export default defineComponent({
   border-bottom: 2px solid var(--q-primary);
   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
+
+.command-config-panel {
+  padding: 8px;
+}
 </style>
diff --git a/src/components/composer/flow/ComposerButtons.vue b/src/components/composer/flow/ComposerButtons.vue
index 0fd7e97..bc7a7eb 100644
--- a/src/components/composer/flow/ComposerButtons.vue
+++ b/src/components/composer/flow/ComposerButtons.vue
@@ -57,9 +57,6 @@
       <q-btn dense flat icon="save" @click="$emit('action', 'save')">
         <q-tooltip>保存</q-tooltip>
       </q-btn>
-      <q-btn dense flat icon="history" @click="$emit('action', 'load')">
-        <q-tooltip>载入</q-tooltip>
-      </q-btn>
       <q-btn flat dense icon="preview" @click="isVisible = true">
         <q-tooltip>预览代码</q-tooltip>
       </q-btn>
@@ -92,15 +89,12 @@
 
 <script>
 import { defineComponent } from "vue";
+import { generateFlowsCode } from "js/composer/generateCode";
 
 export default defineComponent({
   name: "ComposerButtons",
 
   props: {
-    generateCode: {
-      type: Function,
-      required: true,
-    },
     isAllCollapsed: {
       type: Boolean,
       default: false,
@@ -109,6 +103,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    flows: {
+      type: Array,
+      default: () => [],
+    },
   },
 
   emits: ["action"],
@@ -124,7 +122,7 @@ export default defineComponent({
   watch: {
     isVisible(val) {
       if (val) {
-        this.code = this.generateCode();
+        this.code = generateFlowsCode(this.flows);
       }
     },
   },
@@ -172,16 +170,6 @@ export default defineComponent({
 
 /* 自定义滚动条 */
 .preview-code::-webkit-scrollbar {
-  width: 6px;
-}
-
-.preview-code::-webkit-scrollbar-thumb {
-  background: var(--q-primary-opacity-20);
-  border-radius: 3px;
-  transition: background 0.3s;
-}
-
-.preview-code::-webkit-scrollbar-thumb:hover {
-  background: var(--q-primary-opacity-30);
+  width: 5px;
 }
 </style>
diff --git a/src/components/editor/CommandConfig.vue b/src/components/editor/CommandConfig.vue
new file mode 100644
index 0000000..463ff76
--- /dev/null
+++ b/src/components/editor/CommandConfig.vue
@@ -0,0 +1,336 @@
+<template>
+  <q-expansion-item
+    v-model="isExpanded"
+    class="command-config"
+    @dragover="isExpanded = false"
+  >
+    <template v-slot:header>
+      <div class="row q-col-gutter-sm basic-config">
+        <div class="col-auto">
+          <q-avatar size="36px" square class="featureIco">
+            <q-img
+              @click.stop="showIconPicker = true"
+              :src="
+                currentCommand.features.icon
+              "
+            />
+          </q-avatar>
+        </div>
+        <div class="col">
+          <q-input
+            :model-value="currentCommand.features.explain"
+            filled
+            dense
+            @update:model-value="updateCommand('features.explain', $event)"
+            placeholder="名称"
+            @click.stop
+          >
+            <template v-slot:append>
+              <q-icon name="drive_file_rename_outline" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </template>
+
+    <!-- 展开的配置项 -->
+    <div class="expanded-config">
+      <!-- 匹配规则 -->
+      <div class="config-section">
+        <div class="section-title">
+          <q-icon name="rule" size="16px" />
+          <span class="q-ml-sm">匹配规则</span>
+          <q-icon
+            name="help"
+            size="16px"
+            class="q-ml-sm cursor-pointer"
+            @click="showMatchRuleHelp"
+          >
+            <q-tooltip>查看帮助</q-tooltip>
+          </q-icon>
+          <q-icon
+            name="data_object"
+            size="16px"
+            class="q-ml-sm cursor-pointer"
+            :color="showMatchRuleJson ? 'primary' : 'grey'"
+            @click="showMatchRuleJson = !showMatchRuleJson"
+          >
+            <q-tooltip>编辑JSON配置</q-tooltip>
+          </q-icon>
+        </div>
+        <MatchRuleEditor
+          :showJson="showMatchRuleJson"
+          :model-value="currentCommand.features.cmds"
+          @update:model-value="updateCommand('features.cmds', $event)"
+        />
+      </div>
+
+      <!-- 标签 -->
+      <div class="config-section">
+        <div class="section-title">
+          <q-icon name="label" size="16px" />
+          <span class="q-ml-sm">标签</span>
+        </div>
+        <q-select
+          :model-value="currentCommand.tags"
+          @update:model-value="updateCommand('tags', $event)"
+          :options="allQuickCommandTags"
+          dense
+          options-dense
+          filled
+          use-input
+          use-chips
+          multiple
+          hide-dropdown-icon
+          new-value-mode="add-unique"
+          placeholder="回车添加，最多3个"
+          max-values="3"
+          @new-value="tagVerify"
+          input-debounce="0"
+          ref="commandTagRef"
+          @blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
+        />
+      </div>
+
+      <!-- 输出 -->
+      <div class="config-section">
+        <div class="section-title">
+          <q-icon name="output" size="16px" />
+          <span class="q-ml-sm">输出</span>
+        </div>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <ButtonGroup
+              :model-value="currentCommand.output"
+              :options="outputTypesOptionsDy"
+              @update:model-value="updateCommand('output', $event)"
+              height="26px"
+            />
+          </div>
+          <div class="col-12">
+            <div class="section-title">
+              <q-icon name="search" size="16px" />
+              <span class="q-ml-sm"
+                >搜索面板推送
+                <q-btn
+                  flat
+                  round
+                  size="xs"
+                  icon="help"
+                  @click="showMainPushHelp"
+                />
+              </span>
+            </div>
+            <ButtonGroup
+              :model-value="currentCommand.features.mainPush"
+              :options="searchPushOptions"
+              @update:model-value="handleMainPushChange"
+              height="30px"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 平台 -->
+      <div class="config-section">
+        <div class="section-title">
+          <q-icon name="devices" size="16px" />
+          <span class="q-ml-sm">平台</span>
+        </div>
+        <CheckGroup
+          :model-value="currentCommand.features.platform"
+          :options="Object.values(platformTypes)"
+          @update:model-value="updateCommand('features.platform', $event)"
+          height="30px"
+        />
+      </div>
+    </div>
+
+    <!-- 图标选择对话框 -->
+    <q-dialog v-model="showIconPicker" position="left">
+      <iconPicker
+        @iconChanged="(dataUrl) => updateCommand('features.icon', dataUrl)"
+        ref="icon"
+      />
+    </q-dialog>
+  </q-expansion-item>
+</template>
+
+<script>
+import { defineComponent, inject, computed } from "vue";
+import iconPicker from "components/popup/IconPicker.vue";
+import outputTypes from "js/options/outputTypes.js";
+import platformTypes from "js/options/platformTypes.js";
+import CheckGroup from "components/composer/common/CheckGroup.vue";
+import ButtonGroup from "components/composer/common/ButtonGroup.vue";
+import commandTypes from "js/options/commandTypes.js";
+import MatchRuleEditor from "components/editor/MatchRuleEditor.vue";
+
+export default defineComponent({
+  name: "CommandConfig",
+  components: {
+    iconPicker,
+    CheckGroup,
+    ButtonGroup,
+    MatchRuleEditor,
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const allQuickCommandTags = inject("allQuickCommandTags").filter(
+      (tag) => !["默认", "未分类", "搜索结果"].includes(tag)
+    );
+
+    const currentCommand = computed(() => props.modelValue);
+
+    return {
+      allQuickCommandTags,
+      currentCommand,
+    };
+  },
+  data() {
+    return {
+      isExpanded: false,
+      showIconPicker: false,
+      showMatchRuleJson: false,
+      commandTypes,
+      outputTypes,
+      platformTypes,
+      isFileTypeDirectory: false,
+      searchPushOptions: [
+        { value: false, label: "禁用（进入插件后才执行命令）" },
+        { value: true, label: "启用（在uTools主搜索框直接执行命令）" },
+      ],
+    };
+  },
+  computed: {
+    commandTypesOptions() {
+      const options = Object.values(this.commandTypes);
+      return this.currentCommand.features.mainPush
+        ? options.map((cmdType) =>
+            ["regex", "over", "key"].includes(cmdType.name)
+              ? cmdType
+              : { ...cmdType, disabled: true }
+          )
+        : options;
+    },
+    outputTypesOptionsDy() {
+      const options = Object.values(this.outputTypes);
+      return this.currentCommand.features.mainPush
+        ? options.map((outputType) =>
+            outputType.name !== "text"
+              ? { ...outputType, disabled: true }
+              : outputType
+          )
+        : options;
+    },
+  },
+  methods: {
+    updateCommand(path, value) {
+      const newCommand = { ...this.currentCommand };
+      const keys = path.split(".");
+      const lastKey = keys.pop();
+      const target = keys.reduce((obj, key) => obj[key], newCommand);
+      target[lastKey] = value;
+      this.$emit("update:modelValue", newCommand);
+    },
+    tagVerify(val, done) {
+      if (["默认", "未分类", "搜索结果"].includes(val)) {
+        return done(`_${val}_`);
+      }
+      done(val);
+    },
+    autoAddInputVal(e, ref) {
+      const inputValue = e.target.value;
+      if (!inputValue) return;
+      ref.add(inputValue, true);
+    },
+    handleMainPushChange(val) {
+      this.updateCommand("features.mainPush", val);
+      if (val) {
+        this.updateCommand("output", "text");
+      }
+    },
+    showMainPushHelp() {
+      window.showUb.help("#u0e9f1430");
+    },
+    showMatchRuleHelp() {
+      utools.ubrowser
+        .goto(
+          "https://www.u-tools.cn/docs/developer/information/plugin-json.html#%E5%8A%9F%E8%83%BD%E6%8C%87%E4%BB%A4"
+        )
+        .run();
+    },
+  },
+});
+</script>
+
+<style scoped>
+.command-config {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.command-config :deep(.q-field__inner) {
+  font-family: "Consolas", "Monaco", monospace;
+}
+
+.basic-config {
+  width: 100%;
+}
+
+.command-config :deep(.q-item) {
+  padding: 0;
+  min-height: unset;
+  cursor: default;
+}
+
+.command-config :deep(.q-item__section--side) {
+  padding: 0;
+}
+
+.command-config :deep(.q-item:hover) {
+  background: transparent;
+}
+
+.command-config :deep(.q-focus-helper) {
+  display: none;
+}
+
+.config-section {
+  margin-bottom: 4px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--q-primary);
+  padding: 4px 2px;
+  user-select: none;
+}
+
+.featureIco {
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.featureIco:hover {
+  transform: scale(1.02) translateY(-2px);
+}
+
+.expanded-config {
+  overflow-y: auto;
+  max-height: 450px;
+  padding: 0 5px;
+}
+
+::-webkit-scrollbar {
+  width: 1px;
+}
+</style>
diff --git a/src/components/editor/MatchRuleEditor.vue b/src/components/editor/MatchRuleEditor.vue
new file mode 100644
index 0000000..c1d97e7
--- /dev/null
+++ b/src/components/editor/MatchRuleEditor.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="match-rule-editor">
+    <!-- JSON编辑模式 -->
+    <div v-if="showJson" class="json-editor">
+      <q-input
+        :model-value="jsonText"
+        @update:model-value="updateJsonText($event)"
+        type="textarea"
+        filled
+        autogrow
+      />
+    </div>
+
+    <!-- 可视化编辑模式 -->
+    <div v-else class="visual-editor">
+      <!-- 规则类型选择按钮组 -->
+      <div class="rule-type-buttons q-mb-sm q-mt-xs">
+        <div v-for="type in ruleTypeOptions" :key="type.value" class="col-auto">
+          <q-btn
+            :label="type.label"
+            :icon="type.icon"
+            :color="type.color"
+            outline
+            dense
+            class="rule-type-btn"
+            @click="addRuleByType(type.value)"
+          >
+            <q-badge
+              v-if="ruleTypeCounts[type.value]"
+              floating
+              :label="ruleTypeCounts[type.value]"
+            />
+          </q-btn>
+        </div>
+      </div>
+
+      <!-- 规则列表 -->
+      <div class="rules-container">
+        <!-- 关键词匹配规则组 -->
+        <div v-if="keyRules.length" class="key-rules-row">
+          <div
+            v-for="(rule, index) in keyRules"
+            :key="'key-' + index"
+            class="key-input-wrapper"
+          >
+            <q-input
+              :model-value="rule"
+              @update:model-value="updateModelValueByIndex($event, index)"
+              dense
+              filled
+              :label="`关键词 ${index + 1}`"
+            >
+              <template v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click="removeRule(index)"
+                  size="12px"
+                  class="cursor-pointer text-grey"
+                />
+              </template>
+            </q-input>
+          </div>
+        </div>
+
+        <!-- 其他类型规则 -->
+        <div
+          v-for="(rule, index) in nonKeyRules"
+          :key="'other-' + index"
+          class="rule-item"
+        >
+          <div class="row items-center">
+            <div class="col-auto q-mr-sm">
+              <q-field dense filled>
+                <template v-slot:control>
+                  <q-icon :name="commandTypes[rule.type].icon" />
+                  <div class="q-mx-xs" style="user-select: none">
+                    {{ commandTypes[rule.type].label }}
+                  </div>
+                  <q-icon
+                    name="cancel"
+                    @click="removeRule(index + keyRules.length)"
+                    size="12px"
+                    class="cursor-pointer text-grey"
+                  />
+                </template>
+              </q-field>
+            </div>
+
+            <!-- 正则匹配 -->
+            <template v-if="rule.type === 'regex'">
+              <div class="col row q-gutter-sm">
+                <q-input
+                  v-model="rule.match"
+                  dense
+                  filled
+                  label="匹配文本正则表达式"
+                  placeholder="例：/xxx/，任意匹配的正则会被 uTools 忽略"
+                  class="col"
+                  @blur="validateRegex(rule)"
+                />
+                <q-input
+                  v-model.number="rule.minLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最小长度"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+                <q-input
+                  v-model.number="rule.maxLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最大长度"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+              </div>
+            </template>
+
+            <!-- 文件匹配 -->
+            <template v-else-if="rule.type === 'files'">
+              <div class="col row q-gutter-sm">
+                <q-input
+                  v-model="rule.match"
+                  dense
+                  filled
+                  label="匹配文件(夹)名正则表达式"
+                  placeholder="可选，例：/xxx/"
+                  class="col"
+                  @blur="validateRegex(rule)"
+                />
+                <q-select
+                  :model-value="rule.fileType || 'file'"
+                  @update:model-value="rule.fileType = $event"
+                  :options="[
+                    { label: '文件', value: 'file' },
+                    { label: '文件夹', value: 'directory' },
+                  ]"
+                  label="文件类型"
+                  dense
+                  options-dense
+                  filled
+                  emit-value
+                  map-options
+                  class="col-2"
+                />
+                <q-input
+                  v-model.number="rule.minLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最小数量"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+                <q-input
+                  v-model.number="rule.maxLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最大数量"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+              </div>
+            </template>
+
+            <!-- 窗口匹配 -->
+            <template v-else-if="rule.type === 'window'">
+              <div class="col row q-gutter-sm">
+                <q-input
+                  :model-value="rule.match.app.join(',')"
+                  @update:model-value="
+                    rule.match.app = getArrayFromString($event)
+                  "
+                  dense
+                  filled
+                  class="col"
+                  label="程序/应用名，逗号隔开"
+                  placeholder="例：xxx.exe,xxx.app"
+                />
+                <q-input
+                  v-model="rule.match.title"
+                  dense
+                  filled
+                  label="匹配窗口标题正则表达式"
+                  placeholder="可选，例：/xxx/"
+                  class="col-5"
+                  @blur="validateRegex({ match: rule.match.title })"
+                />
+              </div>
+            </template>
+
+            <!-- 图片匹配 -->
+            <template v-else-if="rule.type === 'img'">
+              <q-field v-model="rule.label" dense filled class="col">
+                <template v-slot:control>
+                  <div>无需配置</div>
+                </template>
+              </q-field>
+            </template>
+
+            <!-- 所有文本匹配 -->
+            <template v-else-if="rule.type === 'over'">
+              <div class="col row q-gutter-sm">
+                <q-input
+                  v-model="rule.exclude"
+                  dense
+                  filled
+                  label="排除的正则表达式字符串"
+                  placeholder="可选，例：/xxx/"
+                  class="col"
+                  @blur="validateRegex({ match: rule.exclude })"
+                />
+                <q-input
+                  v-model.number="rule.minLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最小长度"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+                <q-input
+                  v-model.number="rule.maxLength"
+                  type="number"
+                  dense
+                  filled
+                  label="最大长度"
+                  placeholder="可选"
+                  style="width: 65px"
+                />
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import commandTypes from "js/options/commandTypes.js";
+
+export default defineComponent({
+  name: "MatchRuleEditor",
+  props: {
+    modelValue: {
+      type: Array,
+      required: true,
+    },
+    showJson: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ["update:modelValue"],
+
+  data() {
+    return {
+      ruleTypeOptions: Object.values(commandTypes)
+        .filter((type) => type.name !== "professional")
+        .map((type) => ({
+          label: type.label,
+          value: type.name,
+          icon: type.icon,
+          color: type.color,
+        })),
+      commandTypes,
+    };
+  },
+
+  computed: {
+    localRules() {
+      return [...this.keyRules, ...this.nonKeyRules];
+    },
+
+    // 关键词规则
+    keyRules() {
+      return this.modelValue.filter((rule) => typeof rule === "string");
+    },
+
+    // 非关键词规则
+    nonKeyRules() {
+      return this.modelValue.filter((rule) => typeof rule !== "string");
+    },
+
+    // JSON文本
+    jsonText() {
+      return JSON.stringify(this.modelValue, null, 2);
+    },
+
+    // 计算每种规则类型的数量
+    ruleTypeCounts() {
+      return this.localRules.reduce((counts, rule) => {
+        const type = typeof rule === "string" ? "key" : rule.type;
+        counts[type] = (counts[type] || 0) + 1;
+        return counts;
+      }, {});
+    },
+  },
+
+  methods: {
+    validateRegex(rule) {
+      const matchValue = rule.match;
+      if (!matchValue) return;
+
+      try {
+        if (!matchValue.startsWith("/")) {
+          rule.match = `/${matchValue}/`;
+        }
+        new RegExp(matchValue.replace(/^\/|\/[gimuy]*$/g, ""));
+      } catch (e) {
+        rule.match = "/./";
+      }
+    },
+
+    removeRule(index) {
+      const newRules = [...this.localRules];
+      newRules.splice(index, 1);
+      if (newRules.length == 0) {
+        return;
+      }
+      this.updateModelValue(newRules);
+    },
+
+    updateJsonText(newJsonText) {
+      try {
+        const parsed = JSON.parse(newJsonText);
+        const validConfig = parsed.filter((rule) => {
+          if (typeof rule === "string") return true;
+          return Object.values(commandTypes).some(
+            (type) => type.name === rule.type
+          );
+        });
+        this.updateModelValue(validConfig);
+      } catch (_) {}
+    },
+
+    updateModelValue(newRules) {
+      this.$emit("update:modelValue", newRules);
+    },
+
+    updateModelValueByIndex(newValue, index) {
+      const newRules = [...this.localRules];
+      newRules[index] = newValue;
+      this.updateModelValue(newRules);
+    },
+
+    getArrayFromString(str) {
+      return str
+        .split(",")
+        .filter(Boolean)
+        .map((item) => item.trim());
+    },
+
+    // 根据类型添加新规则
+    addRuleByType(type) {
+      const newRules = [...this.localRules];
+
+      if (type === "key") {
+        // 在所有关键词后面插入新的关键词
+        newRules.splice(this.keyRules.length, 0, "");
+      } else {
+        // 非关键词类型，直接添加到末尾
+        newRules.push({
+          type,
+          match: {
+            window: { app: [] },
+            regex: "",
+          }[type],
+        });
+      }
+
+      this.updateModelValue(newRules);
+    },
+  },
+});
+</script>
+
+<style scoped>
+.rule-type-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.rule-type-buttons :deep(.q-btn) {
+  padding: 0;
+  font-size: 12px;
+  height: 24px;
+  min-width: 85px;
+}
+
+.body--dark .rule-type-count {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.rules-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: -4px;
+}
+
+.key-rules-row {
+  display: flex;
+  gap: 8px;
+}
+
+.key-input-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.key-input-wrapper :deep(.q-field__append) {
+  padding: 0 4px;
+}
+
+.key-input-wrapper :deep(.q-icon) {
+  font-size: 16px;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+}
+
+.key-input-wrapper :deep(.q-icon:hover) {
+  opacity: 1;
+}
+
+.json-editor {
+  font-family: monospace;
+}
+
+.json-editor :deep(.q-field__native) {
+  min-height: 200px;
+  font-family: monospace;
+}
+
+/* 隐藏默认的数字输入框箭头 - Chrome, Safari, Edge, Opera */
+.match-rule-editor :deep(input[type="number"]::-webkit-outer-spin-button),
+.match-rule-editor :deep(input[type="number"]::-webkit-inner-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/src/css/composer.css b/src/css/composer.css
index e8b5c14..997e72f 100644
--- a/src/css/composer.css
+++ b/src/css/composer.css
@@ -25,6 +25,10 @@
   font-size: 12px;
 }
 
+.command-composer .q-field--filled.q-select--with-chips .q-field__control .q-chip {
+  margin: 0 4px;
+}
+
 /* 输入框图标大小 */
 .command-composer .q-field--filled .q-field__control .q-icon {
   font-size: 18px;
diff --git a/src/js/autoDetach.js b/src/js/autoDetach.js
deleted file mode 100644
index 5ed5116..0000000
--- a/src/js/autoDetach.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const winScpt = `Add-Type -TypeDefinition @"
-using System;
-using System.Runtime.InteropServices;
-public class Win32 {
-    [StructLayout(LayoutKind.Sequential)]
-    public struct RECT {
-        public int Left;
-        public int Top;
-        public int Right;
-        public int Bottom;
-    }
-    [DllImport("user32.dll", SetLastError=true)]
-    public static extern IntPtr GetForegroundWindow();
-    [DllImport("user32.dll", SetLastError=true)]
-    public static extern bool GetWindowRect(IntPtr hwnd, out RECT lpRect);
-}
-"@
-$foregroundWindow = [Win32]::GetForegroundWindow()
-$windowRect = New-Object Win32+RECT
-$_ = [Win32]::GetWindowRect($foregroundWindow, [ref]$windowRect)
-$result = New-Object PSObject
-$result | Add-Member -Type NoteProperty -Name Left -Value $windowRect.Left
-$result | Add-Member -Type NoteProperty -Name Top -Value $windowRect.Top
-$result | Add-Member -Type NoteProperty -Name Right -Value $windowRect.Right
-$result | Add-Member -Type NoteProperty -Name Bottom -Value $windowRect.Bottom
-$result | ConvertTo-Json`;
-
-const macScpt = `tell application "System Events"
-  set frontmostProcess to first application process where it is frontmost
-  set frontmostWindow to first window of frontmostProcess
-  set {windowLeft, windowTop} to position of frontmostWindow
-  set {windowWidth, windowHeight} to size of frontmostWindow
-  set windowRight to windowLeft + windowWidth
-  set windowBottom to windowTop + windowHeight
-end tell
-return "{ \\"Left\\": " & windowLeft & ", \\"Top\\": " & windowTop & ", \\"Right\\": " & windowRight & ", \\"Bottom\\": " &windowBottom & " }"`;
-
-const getForegroundWindowPos = async () => {
-  let foregroundWindowPos;
-  try {
-    if (window.utools.isWindows()) {
-      foregroundWindowPos = await window.quickcommand.runPowerShell(winScpt);
-    } else if (window.utools.isMacOS()) {
-      foregroundWindowPos = await window.quickcommand.runAppleScript(macScpt);
-    }
-  } catch (error) {
-    console.log(error);
-  }
-  if (!foregroundWindowPos) return;
-  return JSON.parse(foregroundWindowPos);
-};
-
-let autoDetach = async () => {
-  const foregroundWindowPos = await getForegroundWindowPos();
-  console.log(foregroundWindowPos);
-  if (foregroundWindowPos) {
-    const { Left, Top, Right, Bottom } = foregroundWindowPos;
-    let { x, y } = window.utools.getCursorScreenPoint();
-    window.utools.simulateMouseDoubleClick(Left + 200, Top + 30);
-    window.utools.simulateMouseMove(x, y);
-  }
-};
-
-export default {
-  autoDetach,
-};
diff --git a/src/js/commandManager.js b/src/js/commandManager.js
index 025df16..e2e4f5b 100644
--- a/src/js/commandManager.js
+++ b/src/js/commandManager.js
@@ -2,6 +2,8 @@ import { reactive } from "vue";
 import quickcommandParser from "js/common/quickcommandParser.js";
 import importAll from "js/common/importAll.js";
 import utoolsFull from "js/utools.js";
+import { getUniqueId } from "js/common/uuid.js";
+import outputTypes from "js/options/outputTypes.js";
 
 // 默认命令
 const defaultCommands = importAll(
@@ -16,6 +18,50 @@ const state = reactive({
   activatedQuickPanels: [],
 });
 
+const getCmdType = (cmds) => {
+  const firstCmdType = cmds[0].type || "key";
+  if (!cmds.find((x) => typeof x !== "string")) return "key";
+  if (!cmds.find((x) => x.type !== firstCmdType)) return firstCmdType;
+  return "professional";
+};
+
+const getFeatureCode = (cmds) => {
+  return `${getCmdType(cmds)}_${getUniqueId({ short: true })}`;
+};
+
+const getLabeledCmds = (cmds, explain) => {
+  return cmds.map((cmd) => {
+    if (typeof cmd === "string") {
+      return cmd || explain;
+    }
+    return {
+      ...cmd,
+      label: cmd.label || explain,
+    };
+  });
+};
+
+export const getValidCommand = (command) => {
+  const { cmds, explain } = command.features;
+  if (!explain) throw "名称不能为空";
+  if (!Array.isArray(cmds)) throw "匹配规则格式错误";
+
+  // 未配置label或关键字时，直接使用名称
+  command.features.cmds = getLabeledCmds(cmds, explain);
+
+  // 不需要显示输入框的输入类型，添加mainHide属性
+  if (outputTypes[command.output].outPlugin) {
+    command.features.mainHide = true;
+  }
+
+  // 生成唯一code
+  if (!command.features.code) {
+    command.features.code = getFeatureCode(cmds);
+  }
+
+  return window.lodashM.cloneDeep(command);
+};
+
 // 使用函数工厂模式，确保每个组件获取自己的状态副本
 export function useCommandManager() {
   // 获取已启用的命令
@@ -59,6 +105,11 @@ export function useCommandManager() {
 
   // 保存命令
   const saveCommand = (command) => {
+    try {
+      command = getValidCommand(command);
+    } catch (e) {
+      return quickcommand.showMessageBox(e.toString(), "error");
+    }
     const code = command.features.code;
     state.allQuickCommands[code] = command;
 
@@ -70,7 +121,7 @@ export function useCommandManager() {
     utoolsFull.whole.setFeature(command.features);
 
     if (!isDefaultCommand(code)) {
-      utoolsFull.putDB(window.lodashM.cloneDeep(command), "qc_" + code);
+      utoolsFull.putDB(command, "qc_" + code);
     }
 
     getAllQuickCommandTags();
diff --git a/src/js/common/uuid.js b/src/js/common/uuid.js
index 84ef06c..37ef469 100644
--- a/src/js/common/uuid.js
+++ b/src/js/common/uuid.js
@@ -1,7 +1,9 @@
-export const getUniqueId = () => {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+export const getUniqueId = (options = {}) => {
+  const { short = false } = options;
+  const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
     const v = c === "x" ? r : (r & 0x3) | 0x8;
     return v.toString(16);
   });
+  return short ? uuid.substring(0, 8) : uuid;
 };
diff --git a/src/js/composer/generateCode.js b/src/js/composer/generateCode.js
index e3f73e5..b029292 100644
--- a/src/js/composer/generateCode.js
+++ b/src/js/composer/generateCode.js
@@ -133,3 +133,10 @@ export function generateCode(flow) {
 
   return finalCode;
 }
+
+export function generateFlowsCode(flows) {
+  const [mainFlow, ...subFlows] = flows;
+  return [...subFlows, mainFlow]
+    .map((flow) => generateCode(flow))
+    .join("\n\n");
+}
diff --git a/src/js/options/commandTypes.js b/src/js/options/commandTypes.js
index 85efabc..ae8c8d1 100644
--- a/src/js/options/commandTypes.js
+++ b/src/js/options/commandTypes.js
@@ -3,7 +3,8 @@
  */
 
 const jsonSample = [
-  "关键词",
+  "关键词1",
+  "关键词2",
   {
     type: "img",
     label: "图片匹配",
@@ -41,12 +42,12 @@ const jsonSample = [
   },
 ];
 
-const commandTypes = {
+export default {
   key: {
     name: "key",
     label: "关键词",
     icon: "font_download",
-    color: "teal",
+    color: "blue",
     matchLabel: "关键词",
     desc: "直接在主输入框输入对应关键字，最通用的一种模式，关键字可以设置多个",
     valueType: "array",
@@ -57,7 +58,7 @@ const commandTypes = {
   },
   regex: {
     name: "regex",
-    label: "正则/划词",
+    label: "正则",
     icon: "rule",
     color: "cyan",
     matchLabel: "正则",
@@ -82,7 +83,7 @@ const commandTypes = {
   over: {
     name: "over",
     label: "所有文本",
-    matchLabel: "无需设置",
+    matchLabel: "无需配置",
     icon: "emergency",
     color: "light-green",
     desc: "匹配主输入框的所有文本，但只有在该文本未设置对应的插件或功能时才生效",
@@ -104,7 +105,7 @@ const commandTypes = {
   },
   window: {
     name: "window",
-    label: "窗口/进程",
+    label: "窗口",
     matchLabel: "进程名",
     icon: "widgets",
     color: "indigo",
@@ -154,7 +155,7 @@ const commandTypes = {
   },
   files: {
     name: "files",
-    label: "复制/选中文件",
+    label: "文件",
     matchLabel: "正则",
     icon: "description",
     color: "light-blue",
@@ -200,5 +201,3 @@ const commandTypes = {
     jsonSample: jsonSample,
   },
 };
-
-export default commandTypes;
diff --git a/src/pages/CommandPage.vue b/src/pages/CommandPage.vue
index 3a8ecee..fc2de94 100644
--- a/src/pages/CommandPage.vue
+++ b/src/pages/CommandPage.vue
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     runCurrentCommand(command) {
-      this.$refs.result.runCurrentCommand(window.lodashM.cloneDeep(command));
+      this.$refs.result.runCurrentCommand(command);
     },
   },
 };
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 5e24085..b30d181 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -221,9 +221,7 @@ export default {
       }
     },
     runCommand(code) {
-      this.$refs.result.runCurrentCommand(
-        window.lodashM.cloneDeep(this.allQuickCommands[code])
-      );
+      this.$refs.result.runCurrentCommand(this.allQuickCommands[code]);
     },
     // 启用命令
     enableCommand(code) {
@@ -241,13 +239,16 @@ export default {
       }
     },
     // 编辑命令
-    editCommand(command) {
+    editCommand(commandOrCode) {
       // 即可传入 code，也可直接传入 command
-      if (typeof command === "string") command = this.allQuickCommands[command];
+      const command =
+        typeof commandOrCode === "string"
+          ? this.allQuickCommands[commandOrCode]
+          : commandOrCode;
       this.commandEditorAction = {
         type: "edit",
         data: window.lodashM.cloneDeep(command),
-        component: "CommandEditor",
+        component: command.flows ? "ComposerEditor" : "CommandEditor",
       };
       this.isEditorShow = true;
     },
@@ -349,6 +350,7 @@ export default {
     saveCommand(command) {
       const code = this.commandManager.saveCommand(command);
       this.locateToCommand(command.tags, code);
+      quickcommand.showMessageBox("保存成功！");
     },
     editorEvent(event) {
       switch (event.type) {
@@ -394,7 +396,7 @@ export default {
 
       // 更新存储
       this.commandManager.state.allQuickCommands = {
-        ...this.commandManager.state.allQuickCommands,
+        ...this.allQuickCommands,
         ...tagCommands,
       };