重构命令输出变量系统：新增OutputEditor组件，支持更灵活的变量配置和回调函数创建

2025-06-30 04:42:45 +08:00 · 2025-01-26 01:36:20 +08:00 · 2025-01-26 01:36:20 +08:00 · 208a6a08d9
commit 208a6a08d9
parent 0f020d394a
21 changed files with 551 additions and 320 deletions
--- a/src/components/composer/ComposerCard.vue
+++ b/src/components/composer/ComposerCard.vue
@ -36,7 +36,6 @@
        <CommandHead
          :command="localCommand"
          @update:outputVariable="handleOutputVariableUpdate"
-          @toggle-output="handleToggleOutput"
          @toggle-collapse="handleToggleCollapse"
          @run="runCommand"
          @remove="$emit('remove')"
@ -96,7 +95,6 @@ import VariableInput from "components/composer/common/VariableInput.vue";
 import MultiParams from "components/composer/MultiParams.vue";
 import CommandHead from "components/composer/card/CommandHead.vue";
 import * as CardComponents from "js/composer/cardComponents";
-import { processVariable } from "js/composer/variableManager";
 import { newVarInputVal } from "js/composer/varInputValManager";
 import ControlCommand from "components/composer/control/ControlCommand.vue";

@ -156,24 +154,28 @@ export default defineComponent({
    return { getCurrentExistingVar };
  },
  methods: {
-    handleOutputVariableUpdate(value) {
-      const result = processVariable({
-        value,
-        existingVars: this.getCurrentExistingVar().map((v) => v.name),
-      });
+    handleOutputVariableUpdate(result) {
+      const { outputVariable, mode, functionInfo } = result;

-      if (result.warning) {
-        quickcommand.showMessageBox(result.warning, "info");
-      }
+      if (outputVariable.name || outputVariable.details) {
+        this.localCommand.outputVariable = { ...outputVariable };
+        // 如果是回调模式，添加 callbackFunc 属性
+        if (mode === "callback") {
+          this.localCommand.callbackFunc = functionInfo.name;
+        } else {
+          delete this.localCommand.callbackFunc;
+        }

-      this.localCommand.outputVariable = result.processedValue;
-    },
-    handleToggleOutput() {
-      this.localCommand.saveOutput = !this.localCommand.saveOutput;
-
-      // 如果关闭输出，清空变量名
-      if (!this.localCommand.saveOutput) {
-        this.localCommand.outputVariable = null;
+        // 如果是回调函数模式，创建新函数
+        if (mode === "callback" && functionInfo) {
+          this.$emit("add-command", {
+            command: functionInfo,
+            type: "function",
+          });
+        }
+      } else {
+        delete this.localCommand.outputVariable;
+        delete this.localCommand.callbackFunc;
      }
    },
    runCommand() {
@ -182,9 +184,10 @@ export default defineComponent({
      // 创建一个带临时变量的命令副本
      const tempCommand = {
        ...this.localCommand,
-        outputVariable:
-          this.localCommand.outputVariable || `temp_${Date.now()}`,
-        saveOutput: true,
+        outputVariable: {
+          name: `temp_${Date.now()}`,
+          ...this.localCommand.outputVariable,
+        },
      };
      this.$emit("run", tempCommand);
    },
@ -234,12 +237,10 @@ export default defineComponent({
    },
    handleAddPrint() {
      // 创建一个打印命令
-      if (!this.localCommand.outputVariable) {
-        this.localCommand.outputVariable = `temp_${parseInt(
-          new Date().getTime() / 1000
-        )}`;
-        this.localCommand.saveOutput = true;
-      }
+      this.localCommand.outputVariable = {
+        name: `temp_${Date.now()}`,
+        ...this.localCommand.outputVariable,
+      };
      const printCommand = {
        value: "console.log",
        label: "显示消息",
@ -250,7 +251,7 @@ export default defineComponent({
            icon: "info",
          },
        ],
-        argvs: [newVarInputVal("var", this.localCommand.outputVariable)],
+        argvs: [newVarInputVal("var", this.localCommand.outputVariable.name)],
      };
      this.$emit("add-command", {
        command: printCommand,
--- a/src/components/composer/ComposerFlow.vue
+++ b/src/components/composer/ComposerFlow.vue
@ -293,12 +293,6 @@ export default defineComponent({
        ...parsedAction,
        id: this.getUniqueId(),
      };
-      if (newCommand.saveOutput && newCommand.outputVariable) {
-        newCommand.outputVariable = processVariable({
-          value: newCommand.outputVariable,
-          existingVars: this.getCurrentExistingVar().map((v) => v.name),
-        }).processedValue;
-      }
      return newCommand;
    },
    getUniqueId() {
@ -351,7 +345,9 @@ export default defineComponent({
          command,
          {
            //没有输出，则不打印
-            code: `if(${command.outputVariable}!==undefined){console.log(${command.outputVariable})}`,
+            code: `if(${command.outputVariable.name}!==undefined){
+              console.log(${command.outputVariable.name})
+            }`,
          },
        ],
      };
@ -446,24 +442,31 @@ export default defineComponent({
      });
      return newCommands;
    },
-    handleAddCommand({ command, type }, index) {
-      if (type === "chain") {
-        // 如果是复制链式命令
-        const { startIndex, endIndex } = this.getChainIndex(command.chainId);
-        const chainCommands = this.commands.slice(startIndex, endIndex + 1);
-        const newChainCommands = this.copyCommands(chainCommands);
-        const newCommands = [...this.commands];
-        newCommands.splice(endIndex + 1, 0, ...newChainCommands);
-        this.$emit("update:modelValue", newCommands);
+    handleAddCommand(event, index) {
+      const { command, type } = event;
+      if (type === "function") {
+        // 如果是创建新函数的事件，传递给FlowTabs处理
+        this.$emit("action", "addFlow", command);
      } else {
-        // 单个命令的复制逻辑
-        const newCommand = {
-          ...command,
-          id: this.getUniqueId(),
-        };
-        const newCommands = [...this.commands];
-        newCommands.splice(index + 1, 0, newCommand);
-        this.$emit("update:modelValue", newCommands);
+        // 原有的复制命令逻辑保持不变
+        if (type === "chain") {
+          // 如果是复制链式命令
+          const { startIndex, endIndex } = this.getChainIndex(command.chainId);
+          const chainCommands = this.commands.slice(startIndex, endIndex + 1);
+          const newChainCommands = this.copyCommands(chainCommands);
+          const newCommands = [...this.commands];
+          newCommands.splice(endIndex + 1, 0, ...newChainCommands);
+          this.$emit("update:modelValue", newCommands);
+        } else {
+          // 单个命令的复制逻辑
+          const newCommand = {
+            ...command,
+            id: this.getUniqueId(),
+          };
+          const newCommands = [...this.commands];
+          newCommands.splice(index + 1, 0, newCommand);
+          this.$emit("update:modelValue", newCommands);
+        }
      }
    },
    handleToggleChainDisable({ chainId, disabled }) {
--- a/src/components/composer/FlowTabs.vue
+++ b/src/components/composer/FlowTabs.vue
@ -84,7 +84,7 @@
        v-model="showVariableManager"
        :flow="flow"
        :variables="flow.customVariables"
-        @update-flow="updateFlow(flow)"
+        @update-flow="Sub(flow)"
        :is-main-flow="flow.id === 'main'"
        :output-variables="outputVariables"
        class="variable-panel"
@ -102,7 +102,6 @@ import FlowManager from "components/composer/flow/FlowManager.vue";
 import { generateCode } from "js/composer/generateCode";
 import { findCommandByValue } from "js/composer/composerConfig";
 import { generateUniqSuffix } from "js/composer/variableManager";
-import { parseVariables } from "js/composer/variableManager";
 export default defineComponent({
  name: "FlowTabs",
  components: {
@ -152,9 +151,10 @@ export default defineComponent({
    const getOutputVariables = (flow = getCurrentFlow()) => {
      const variables = [];
      for (const [index, cmd] of flow.commands.entries()) {
-        if (cmd.saveOutput && cmd.outputVariable) {
+        if (cmd.outputVariable) {
+          const { name, details = {} } = cmd.outputVariable;
          variables.push(
-            ...parseVariables(cmd.outputVariable).map((variable) => ({
+            ...[name, ...Object.values(details)].map((variable) => ({
              name: variable,
              // 提供来源命令的标志信息
              sourceCommand: {
@ -231,16 +231,43 @@ export default defineComponent({
        )
      );
    },
-    addFlow() {
+    addFlow(options = {}) {
      const id = this.$root.getUniqueId();
-      const name = this.generateFlowName();
-      this.subFlows.push({
+      const name = options.name || this.generateFlowName();
+      const newFlow = {
        id,
        name,
        label: name.replace("func_", "函数"),
        commands: [],
        customVariables: [],
-      });
+      };
+
+      // 添加函数参数
+      if (options.params) {
+        options.params.forEach((param) => {
+          newFlow.customVariables.push({
+            name: param,
+            type: "param",
+          });
+        });
+      }
+
+      // 添加局部变量
+      if (options.localVars && options.localVars.length > 0) {
+        options.localVars.forEach((varInfo) => {
+          newFlow.customVariables.push({
+            name: varInfo.name,
+            type: "var",
+            value: varInfo.value,
+          });
+        });
+      }
+
+      this.subFlows.push(newFlow);
+      if (options.params || options.localVars) {
+        return;
+      }
+
      this.activeTab = id;
      this.$nextTick(() => {
        this.toggleVariableManager();
@ -253,6 +280,16 @@ export default defineComponent({
        this.activeTab = this.flows[0].id;
      }
    },
+    updateSubFlow(index, payload) {
+      const { params, localVars } = payload;
+      this.subFlows[index].customVariables = [
+        ...params.map((param) => ({
+          name: param,
+          type: "param",
+        })),
+        ...localVars,
+      ];
+    },
    generateFlowCode(flow) {
      return generateCode(flow);
    },
@ -282,6 +319,16 @@ export default defineComponent({
        case "toggleVariableManager":
          this.toggleVariableManager();
          break;
+        case "addFlow":
+          // 处理新函数创建
+          const index = this.subFlows.findIndex((f) => f.name === payload.name);
+          if (index > -1) {
+            // 如果函数已存在，则更新
+            this.updateSubFlow(index, payload);
+          } else {
+            this.addFlow(payload);
+          }
+          break;
        default:
          this.$emit("action", type, this.generateAllFlowCode());
      }
@ -295,18 +342,22 @@ export default defineComponent({
        ...flow,
        commands: flow.commands.map((cmd) => {
          const cmdCopy = { ...cmd };
-          // 移除不必要的属性
+          // 移除不必要保存的属性
          const uselessProps = [
            "config",
            "code",
            "label",
            "component",
            "subCommands",
+            "outputs",
            "options",
            "defaultValue",
            "icon",
            "width",
            "placeholder",
+            "isAsync",
+            "summary",
+            "type",
          ];
          uselessProps.forEach((prop) => delete cmdCopy[prop]);
          return cmdCopy;
@ -323,6 +374,7 @@ export default defineComponent({
      const newFlows = flowsData.map((flow) => ({
        ...flow,
        commands: flow.commands.map((cmd) => {
+          // 恢复所有属性
          const command = findCommandByValue(cmd.value);
          return {
            ...command,
@ -330,7 +382,7 @@ export default defineComponent({
          };
        }),
      }));
-      this.updateFlow(newFlows);
+      this.Sub(newFlows);
      this.activeTab = this.mainFlow.id;
    },
    runFlows(flow) {
@ -358,7 +410,7 @@ export default defineComponent({
      this.activeTab = flow.id;
      this.toggleVariableManager();
    },
-    updateFlow(flow) {
+    Sub(flow) {
      this.mainFlow = flow[0];
      this.subFlows = flow.slice(1);
    },
--- a/src/components/composer/card/CommandButtons.vue
+++ b/src/components/composer/card/CommandButtons.vue
@ -6,39 +6,18 @@
        class="output-section row items-center no-wrap"
        v-if="!isControlFlow"
      >
-        <!-- 变量输入框 -->
-        <q-input
-          v-if="command.saveOutput"
-          v-model="inputValue"
-          @focus="sourceValue = inputValue"
-          @blur="handleBlur"
-          outlined
-          placeholder="变量名"
-          class="variable-input"
-          align="center"
-        >
-        </q-input>
-        <!-- 保存变量按钮 -->
+        <!-- 输出变量按钮 -->
        <q-icon
-          :name="command.saveOutput ? 'data_object' : 'output'"
+          name="output"
          v-if="!command.neverHasOutput"
          class="output-btn"
-          @click="$emit('toggle-output')"
+          :color="command.outputVariable ? 'primary' : ''"
+          @click="showOutputEditor = true"
        >
          <q-tooltip>
-            <div class="text-body2">
-              {{
-                command.saveOutput
-                  ? "当前命令的输出将保存到变量中"
-                  : "点击将此命令的输出保存为变量以供后续使用"
-              }}
-            </div>
+            <div class="text-body2">配置命令输出变量</div>
            <div class="text-caption text-grey-5">
-              {{
-                command.saveOutput
-                  ? "点击取消输出到变量"
-                  : "保存后可在其他命令中使用此变量"
-              }}
+              将命令的输出保存为变量以供后续使用
            </div>
          </q-tooltip>
        </q-icon>
@ -113,12 +92,24 @@
        </q-icon>
      </div>
    </div>
+
+    <!-- 输出编辑器 -->
+    <OutputEditor
+      v-model="showOutputEditor"
+      :command="command"
+      @confirm="$emit('update:outputVariable', $event)"
+    />
  </div>
 </template>

 <script>
+import OutputEditor from "./OutputEditor.vue";
+
 export default {
  name: "CommandButtons",
+  components: {
+    OutputEditor,
+  },
  props: {
    command: {
      type: Object,
@ -143,18 +134,11 @@ export default {
  },
  data() {
    return {
-      inputValue: this.command.outputVariable || "",
-      sourceValue: "",
+      showOutputEditor: false,
    };
  },
-  watch: {
-    "command.outputVariable"(newVal) {
-      this.inputValue = newVal || "";
-    },
-  },
  emits: [
    "update:outputVariable",
-    "toggle-output",
    "run",
    "remove",
    "toggle-collapse",
@ -162,17 +146,6 @@ export default {
    "toggle-disable",
    "add-print",
  ],
-  methods: {
-    handleBlur() {
-      // 如果输入框的值和源值相同，则不更新
-      if (
-        this.inputValue.replace(/[ ]/g, "") ===
-        this.sourceValue.replace(/[ ]/g, "")
-      )
-        return;
-      this.$emit("update:outputVariable", this.inputValue);
-    },
-  },
 };
 </script>

@ -185,37 +158,9 @@ export default {

 /* 输出部分样式 */
 .output-section {
-  /* margin-right: 8px; */
  gap: 8px;
 }

-.variable-input {
-  width: 120px;
-}
-
-.output-section :deep(.q-field) {
-  border-radius: 4px;
-}
-
-.output-section :deep(.q-field__control) {
-  height: 20px;
-  min-height: 20px;
-  padding: 0 4px;
-}
-
-.output-section :deep(.q-field__marginal) {
-  height: 20px;
-  width: 24px;
-  min-width: 24px;
-}
-
-.output-section :deep(.q-field__native) {
-  padding: 0;
-  font-size: 12px;
-  min-height: 20px;
-  text-align: center;
-}
-
 /* 按钮样式 */
 .output-btn,
 .run-btn,
@ -251,14 +196,6 @@ export default {
 }

 /* 暗色模式适配 */
-.body--dark .output-section :deep(.q-field) {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.body--dark .output-section :deep(.q-field--focused) {
-  background: #1d1d1d;
-}
-
 .body--dark .output-btn {
  border-color: rgba(255, 255, 255, 0.1);
 }
--- a/src/components/composer/card/CommandHead.vue
+++ b/src/components/composer/card/CommandHead.vue
@ -46,7 +46,6 @@
      :isFirstCommandInChain="isFirstCommandInChain"
      :isLastCommandInChain="isLastCommandInChain"
      @update:outputVariable="$emit('update:outputVariable', $event)"
-      @toggle-output="$emit('toggle-output')"
      @run="$emit('run')"
      @remove="$emit('remove')"
    />
@ -67,13 +66,7 @@ export default {
      required: true,
    },
  },
-  emits: [
-    "update:outputVariable",
-    "toggle-output",
-    "run",
-    "remove",
-    "toggle-collapse",
-  ],
+  emits: ["update:outputVariable", "run", "remove", "toggle-collapse"],
  computed: {
    contentClass() {
      return {
--- a/src/components/composer/card/OutputEditor.vue
+++ b/src/components/composer/card/OutputEditor.vue
@ -0,0 +1,318 @@
+<template>
+  <q-dialog v-model="isOpen" persistent>
+    <q-card class="output-editor q-px-sm">
+      <div class="row justify-center q-px-sm q-pt-md">
+        {{ commandName }}
+      </div>
+      <div class="simple-output q-px-sm">
+        <q-badge color="primary" class="q-mb-sm q-pa-xs">完整结果</q-badge>
+        <q-input v-model="simpleOutputVar" filled dense autofocus>
+          <template v-slot:prepend>
+            <div class="variable-label">
+              {{ currentOutputs?.label || "输出变量名" }}
+            </div>
+          </template>
+        </q-input>
+      </div>
+      <div v-if="hasNestedFields(currentOutputs)">
+        <q-badge color="primary" class="q-ma-sm q-pa-xs">详细输出</q-badge>
+        <q-scroll-area
+          style="height: 200px"
+          :thumb-style="{
+            width: '2px',
+          }"
+        >
+          <div class="detail-output column q-col-gutter-sm q-px-sm">
+            <div v-for="(output, key) in detailOutputs" :key="key">
+              <!-- 如果是嵌套对象 -->
+              <div v-if="hasNestedFields(output)">
+                <BorderLabel :label="output.label || key" :model-value="false">
+                  <div class="column q-col-gutter-sm">
+                    <div
+                      v-for="(subOutput, subKey) in getNestedFields(output)"
+                      :key="subKey"
+                    >
+                      <div class="output-item">
+                        <q-input
+                          v-model="outputVars[`${key}.${subKey}`]"
+                          filled
+                          dense
+                          autofocus
+                          class="col"
+                          :placeholder="subOutput.placeholder"
+                        >
+                          <template v-slot:prepend>
+                            <div class="variable-label">
+                              {{ subOutput.label }}
+                            </div>
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </div>
+                </BorderLabel>
+              </div>
+              <!-- 如果是普通字段 -->
+              <div v-else class="output-item">
+                <q-input
+                  v-model="outputVars[key]"
+                  filled
+                  dense
+                  class="col"
+                  :placeholder="output.placeholder"
+                  autofocus
+                >
+                  <template v-slot:prepend>
+                    <div class="variable-label">{{ output.label }}</div>
+                  </template>
+                </q-input>
+              </div>
+            </div>
+          </div>
+        </q-scroll-area>
+      </div>
+
+      <div v-if="isAsyncCommand">
+        <q-badge color="primary" class="q-ma-sm q-pa-xs">输出模式</q-badge>
+        <div class="row q-col-gutter-sm q-px-sm">
+          <q-select
+            v-model="outputMode"
+            :options="outputModeOptions"
+            filled
+            dense
+            autofocus
+            emit-value
+            map-options
+            class="col"
+          >
+          </q-select>
+          <q-input
+            v-model="callbackFunc"
+            filled
+            dense
+            autofocus
+            class="col-8"
+            v-if="outputMode === 'callback'"
+          >
+            <template v-slot:prepend>
+              <div class="variable-label">回调函数名</div>
+            </template>
+          </q-input>
+        </div>
+      </div>
+
+      <div class="row justify-end q-px-sm q-py-sm">
+        <q-btn flat label="取消" color="primary" v-close-popup />
+        <q-btn flat label="确定" color="primary" @click="handleConfirm" />
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import BorderLabel from "components/composer/common/BorderLabel.vue";
+
+export default defineComponent({
+  name: "OutputEditor",
+  components: {
+    BorderLabel,
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    command: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue", "confirm"],
+  computed: {
+    isOpen: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    currentSubCommand() {
+      if (!this.command.subCommands) return {};
+      return this.command.subCommands.find(
+        (cmd) => cmd.value === this.command.value
+      );
+    },
+    commandName() {
+      return this.currentSubCommand.label || this.command.label;
+    },
+    isAsyncCommand() {
+      return this.currentSubCommand.isAsync || this.command.isAsync;
+    },
+    currentOutputs() {
+      return this.currentSubCommand.outputs || this.command.outputs;
+    },
+    detailOutputs() {
+      let outputs = { ...this.currentOutputs };
+      delete outputs.label;
+      delete outputs.placeholder;
+      return outputs;
+    },
+  },
+  data() {
+    return {
+      simpleOutputVar: "",
+      outputVars: {},
+      outputMode: "wait",
+      outputModeOptions: [
+        {
+          label: "等待运行完毕",
+          value: "wait",
+        },
+        {
+          label: "输出到回调函数",
+          value: "callback",
+        },
+      ],
+      callbackFunc: "",
+    };
+  },
+  watch: {
+    "command.outputVariable": {
+      immediate: true,
+      deep: true,
+      handler(outputVariable) {
+        this.initOutputVars(outputVariable);
+      },
+    },
+    "command.callbackFunc": {
+      immediate: true,
+      handler(callbackFunc) {
+        if (callbackFunc) {
+          this.outputMode = "callback";
+          this.callbackFunc = callbackFunc;
+        } else {
+          this.outputMode = "wait";
+        }
+      },
+    },
+  },
+  methods: {
+    hasNestedFields(output) {
+      console.log(output);
+      return Object.keys(output).some(
+        (key) => key !== "label" && key !== "placeholder"
+      );
+    },
+    getNestedFields(output) {
+      const fields = {};
+      Object.entries(output).forEach(([key, value]) => {
+        if (key !== "label" && key !== "placeholder") {
+          fields[key] = value;
+        }
+      });
+      return fields;
+    },
+    initOutputVars(outputVariable) {
+      // 初始化完整输出变量名
+      if (!outputVariable) return;
+      this.simpleOutputVar = outputVariable.name || "";
+
+      if (this.currentOutputs) {
+        // 初始化详细输出变量，直接使用扁平化的结构
+        this.outputVars = outputVariable?.details || {};
+      }
+    },
+    handleConfirm() {
+      const outputVariable = {
+        name: this.simpleOutputVar,
+      };
+
+      if (this.currentOutputs) {
+        const flatVars = {};
+        Object.entries(this.outputVars).forEach(([path, value]) => {
+          if (!value) return; // 跳过空值
+          flatVars[path] = value;
+        });
+
+        // 如果有非空的变量，才添加到结果中
+        if (Object.keys(flatVars).length > 0) {
+          outputVariable.details = flatVars;
+        }
+      }
+
+      // 根据输出模式处理
+      const result = {
+        outputVariable,
+        mode: this.outputMode,
+      };
+
+      // 如果是回调函数模式，添加回调函数名和参数信息
+      if (this.outputMode === "callback" && this.callbackFunc) {
+        // 添加函数参数和本地变量信息
+        result.functionInfo = {
+          name: this.callbackFunc,
+          params: [outputVariable.name],
+          localVars: outputVariable.details
+            ? Object.entries(outputVariable.details).map(([path, varName]) => ({
+                name: varName,
+                type: "var",
+                value: `${outputVariable.name}.${path}`,
+              }))
+            : [],
+        };
+      }
+
+      this.$emit("confirm", result);
+      this.isOpen = false;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.output-editor {
+  width: 450px;
+}
+
+.output-item {
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.output-item:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.variable-label {
+  font-size: 12px;
+  border-radius: 4px;
+  padding-right: 10px;
+  text-align: center;
+}
+
+.body--dark .output-item:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.output-editor :deep(.q-field--filled .q-field__control),
+.output-editor :deep(.q-field--filled .q-field__control > *),
+.output-editor :deep(.q-field--filled .q-field__native) {
+  max-height: 36px;
+  min-height: 36px;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+/* 去除filled输入框边框 */
+.output-editor :deep(.q-field__control:before) {
+  border: none;
+}
+
+/* 去除filled输入框下划线 */
+.output-editor :deep(.q-field__control:after) {
+  height: 0;
+  border-bottom: none;
+}
+</style>
--- a/src/components/composer/common/ButtonGroup.vue
+++ b/src/components/composer/common/ButtonGroup.vue
@ -9,6 +9,9 @@
      <div
        v-for="opt in options"
        :key="opt.value"
+        :style="{
+          height: height,
+        }"
        :class="['button-item', { active: modelValue === opt.value }]"
        @click="$emit('update:modelValue', opt.value)"
      >
@ -31,6 +34,10 @@ export default defineComponent({
    modelValue: {
      required: true,
    },
+    height: {
+      type: String,
+      default: "26px",
+    },
    options: {
      type: Array,
      required: true,
@ -67,7 +74,6 @@ export default defineComponent({
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 4px;
--- a/src/components/composer/flow/ComposerButtons.vue
+++ b/src/components/composer/flow/ComposerButtons.vue
@ -60,28 +60,33 @@
        <q-tooltip>载入</q-tooltip>
      </q-btn>
      <q-separator vertical />
-      <q-btn
-        flat
-        dense
-        icon="preview"
-        @mouseenter="handleMouseEnter"
-        @mouseleave="handleMouseLeave"
-      >
+      <q-btn flat dense icon="preview" @click="isVisible = true">
+        <q-tooltip>预览代码</q-tooltip>
      </q-btn>
      <q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
        <q-tooltip>运行</q-tooltip>
      </q-btn>
    </div>

-    <transition name="preview-fade">
-      <div v-if="isVisible" class="preview-popup">
-        <div class="preview-header">
-          <q-icon name="code" size="16px" class="q-mr-xs" />
-          <span>预览代码</span>
-        </div>
-        <pre class="preview-code"><code>{{ code }}</code></pre>
-      </div>
-    </transition>
+    <q-dialog v-model="isVisible">
+      <q-card style="width: 550px">
+        <q-card-section class="row items-center q-py-xs q-px-md">
+          <div>
+            <q-icon name="code" size="16px" class="q-mr-sm" />
+            预览代码
+          </div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+
+        <q-card-section class="q-pa-none">
+          <q-separator />
+          <q-scroll-area style="height: 400px">
+            <pre class="preview-code"><code>{{ code }}</code></pre>
+          </q-scroll-area>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
  </div>
 </template>

@ -112,27 +117,16 @@ export default defineComponent({
    return {
      isVisible: false,
      code: "",
-      previewTimer: null,
      isDev: window.utools.isDev(),
    };
  },

-  methods: {
-    handleMouseEnter() {
-      this.previewTimer = setTimeout(() => {
+  watch: {
+    isVisible(val) {
+      if (val) {
        this.code = this.generateCode();
-        this.isVisible = true;
-      }, 200);
+      }
    },
-
-    handleMouseLeave() {
-      clearTimeout(this.previewTimer);
-      this.isVisible = false;
-    },
-  },
-
-  beforeUnmount() {
-    clearTimeout(this.previewTimer);
  },
 });
 </script>
@ -165,31 +159,6 @@ export default defineComponent({
  color: var(--q-primary);
 }

-.preview-popup {
-  position: absolute;
-  top: 40px;
-  right: 30px;
-  min-width: 300px;
-  max-width: 600px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-  transform-origin: center right;
-}
-
-.preview-header {
-  padding: 10px 14px;
-  background: rgba(var(--q-primary-rgb), 0.03);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 8px 8px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--q-primary);
-  display: flex;
-  align-items: center;
-}
-
 .preview-code {
  margin: 0;
  padding: 14px;
@ -215,30 +184,4 @@ export default defineComponent({
 .preview-code::-webkit-scrollbar-thumb:hover {
  background: var(--q-primary-opacity-30);
 }
-
-/* 过渡动画 */
-.preview-fade-enter-active,
-.preview-fade-leave-active {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.preview-fade-enter-from,
-.preview-fade-leave-to {
-  opacity: 0;
-  transform: translateX(20px) scale(0.95);
-}
-
-/* 暗色模式适配 */
-.body--dark .preview-popup {
-  background: #1d1d1d;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
-.body--dark .preview-header {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.body--dark .preview-code {
-  color: #e0e0e0;
-}
 </style>
--- a/src/js/composer/commands/codingCommand.js
+++ b/src/js/composer/commands/codingCommand.js
@ -7,8 +7,6 @@ export const codingCommands = {
      value: "quickcomposer.coding.base64Encode",
      label: "编解码",
      icon: "code",
-      outputVariable: "processedText",
-      saveOutput: true,
      config: [
        {
          label: "要编解码的文本",
@ -63,22 +61,16 @@ export const codingCommands = {
      value: "quickcomposer.coding.symmetricCrypto",
      label: "对称加解密",
      component: "SymmetricCryptoEditor",
-      outputVariable: "processedText",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.coding.asymmetricCrypto",
      label: "非对称加解密",
      component: "AsymmetricCryptoEditor",
-      outputVariable: "processedText",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.coding.md5Hash",
      label: "哈希计算",
      icon: "enhanced_encryption",
-      outputVariable: "hashValue",
-      saveOutput: true,
      config: [
        {
          label: "要计算哈希的文本",
--- a/src/js/composer/commands/dataCommands.js
+++ b/src/js/composer/commands/dataCommands.js
@ -355,8 +355,6 @@ export const dataCommands = {
      componentProps: {
        inputLabel: "要处理的文本",
      },
-      outputVariable: "processedText",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.data.buffer.from",
--- a/src/js/composer/commands/macosCommands.js
+++ b/src/js/composer/commands/macosCommands.js
@ -13,6 +13,33 @@ export const macosCommands = {
          value: "quickcomposer.macos.app.getFrontmost",
          label: "获取前台应用",
          icon: "front_hand",
+          outputs: {
+            label: "前台应用信息",
+            name: { label: "应用名称" },
+            displayedName: { label: "应用显示名称" },
+            path: { label: "应用路径" },
+            version: { label: "应用版本" },
+            pid: { label: "应用进程ID" },
+            backgroundOnly: { label: "是否后台运行" },
+            visible: { label: "是否可见" },
+            frontmost: { label: "是否前台运行" },
+            window: {
+              label: "窗口信息",
+              name: { label: "窗口名称" },
+              title: { label: "窗口标题" },
+              index: { label: "窗口索引" },
+              position: {
+                label: "窗口位置",
+                placeholder: "数组， 第一个元素是 x 坐标，第二个元素是 y 坐标",
+              },
+              size: {
+                label: "窗口大小",
+                placeholder: "数组， 第一个元素是宽度，第二个元素是高度",
+              },
+              minimized: { label: "是否最小化" },
+              fullscreen: { label: "是否全屏" },
+            },
+          },
        },
        {
          value: "quickcomposer.macos.app.getRunningApps",
--- a/src/js/composer/commands/networkCommands.js
+++ b/src/js/composer/commands/networkCommands.js
@ -43,8 +43,6 @@ export const networkCommands = {
      component: "AxiosConfigEditor",
      isAsync: true,
      icon: "http",
-      outputVariable: "{data}",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.network.url.parse",
--- a/src/js/composer/commands/screenCommands.js
+++ b/src/js/composer/commands/screenCommands.js
@ -73,8 +73,6 @@ export const screenCommands = {
      value: "utools.getPrimaryDisplay",
      label: "获取显示器信息",
      icon: "monitor",
-      outputVariable: "display",
-      saveOutput: true,
      subCommands: [
        {
          value: "utools.getPrimaryDisplay",
@ -104,8 +102,6 @@ export const screenCommands = {
      value: "utools.screenToDipPoint",
      label: "物理/DIP坐标转换",
      icon: "transform",
-      outputVariable: "{x,y}",
-      saveOutput: true,
      config: [XY_DICT_EDITOR],
      subCommands: [
        {
@ -124,8 +120,6 @@ export const screenCommands = {
      value: "utools.screenToDipRect",
      label: "物理/DIP区域转换",
      icon: "transform",
-      outputVariable: "{x,y,width,height}",
-      saveOutput: true,
      config: [RECT_DICT_EDITOR],
      subCommands: [
        {
--- a/src/js/composer/commands/simulateCommands.js
+++ b/src/js/composer/commands/simulateCommands.js
@ -223,16 +223,12 @@ export const simulateCommands = {
      label: "屏幕取色",
      icon: "colorize",
      isAsync: true,
-      outputVariable: "{hex,rgb}",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.simulate.captureScreen",
      label: "屏幕截图",
      icon: "screenshot_monitor",
      isAsync: true,
-      outputVariable: "base64Data",
-      saveOutput: true,
      config: [
        {
          label: "截图范围",
--- a/src/js/composer/commands/statusCommands.js
+++ b/src/js/composer/commands/statusCommands.js
@ -7,40 +7,30 @@ export const statusCommands = {
      label: "获取当前文件管理器路径",
      icon: "folder",
      isAsync: true,
-      outputVariable: "currentFolderPath",
-      saveOutput: true,
    },
    {
      value: "utools.readCurrentBrowserUrl",
      label: "获取当前浏览器地址",
      icon: "language",
      isAsync: true,
-      outputVariable: "currentBrowserUrl",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.status.getSelectedText",
      label: "获取选中文本",
      icon: "text_fields",
      isAsync: true,
-      outputVariable: "selectedText",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.status.getSelectedImage",
      label: "获取选中的图片",
      icon: "image",
      isAsync: true,
-      outputVariable: "selectedImage",
-      saveOutput: true,
    },
    {
      value: "quickcomposer.status.getSelectedFiles",
      label: "获取选中的文件",
      icon: "file_present",
      isAsync: true,
-      outputVariable: "selectedFiles",
-      saveOutput: true,
    },
  ],
 };
--- a/src/js/composer/commands/systemCommands.js
+++ b/src/js/composer/commands/systemCommands.js
@ -72,8 +72,6 @@ export const systemCommands = {
    {
      value: "electron.clipboard.readText",
      label: "读取剪贴板",
-      outputVariable: "clipboardContent",
-      saveOutput: true,
      subCommands: [
        {
          value: "electron.clipboard.readText",
@ -112,8 +110,6 @@ export const systemCommands = {
    {
      value: "utools.getPath",
      label: "获取系统路径",
-      outputVariable: "systemPath",
-      saveOutput: true,
      defaultValue: "home",
      config: [
        {
--- a/src/js/composer/commands/uiCommands.js
+++ b/src/js/composer/commands/uiCommands.js
@ -169,8 +169,9 @@ export const uiCommands = {
      value: "quickcommand.showConfirmBox",
      label: "确认框",
      isAsync: true,
-      outputVariable: "confirmed",
-      saveOutput: true,
+      outputs: {
+        label: "是否确认",
+      },
      config: [
        {
          label: "提示内容",
@ -219,8 +220,6 @@ export const uiCommands = {
      value: "quickcommand.showButtonBox",
      label: "按钮组",
      isAsync: true,
-      outputVariable: "{id,text}",
-      saveOutput: true,
      width: 12,
      config: [
        {
@ -256,8 +255,6 @@ export const uiCommands = {
      value: "quickcommand.showInputBox",
      label: "输入框",
      isAsync: true,
-      outputVariable: "[inputValue1]",
-      saveOutput: true,
      config: [
        {
          label: "输入框",
@ -302,8 +299,6 @@ export const uiCommands = {
      value: "quickcommand.showTextArea",
      label: "文本框",
      isAsync: true,
-      outputVariable: "textareaValue",
-      saveOutput: true,
      config: [
        {
          label: "文本框占位符",
@ -372,8 +367,6 @@ export const uiCommands = {
    {
      value: "utools.showOpenDialog",
      label: "文件选择框",
-      outputVariable: "filePaths",
-      saveOutput: true,
      subCommands: [
        {
          value: "utools.showOpenDialog",
--- a/src/js/composer/commands/userdataCommands.js
+++ b/src/js/composer/commands/userdataCommands.js
@ -14,15 +14,11 @@ export const userdataCommands = {
          icon: "title",
        },
      ],
-      outputVariable: "userData",
-      saveOutput: true,
    },
    {
      value: "quickcommand.userData.all",
      label: "获取所有用户数据",
      icon: "database",
-      outputVariable: "userDatas",
-      saveOutput: true,
    },
    {
      value: "quickcommand.userData.put",
--- a/src/js/composer/commands/utoolsCommand.js
+++ b/src/js/composer/commands/utoolsCommand.js
@ -47,15 +47,11 @@ export const utoolsCommands = {
      value: "utools.isDarkColors",
      label: "是否深色模式",
      icon: "dark_mode",
-      outputVariable: "isDark",
-      saveOutput: true,
    },
    {
      value: "utools.getUser",
      label: "获取用户信息",
      icon: "person",
-      outputVariable: "{avatar,nickname,type}",
-      saveOutput: true,
    },
    {
      value: "utools.redirect",
@ -163,20 +159,14 @@ export const utoolsCommands = {
      value: "utools.getWindowType",
      label: "获取当前窗口类型",
      icon: "window",
-      outputVariable: "windowType",
-      saveOutput: true,
    },
    {
      value: "utools.getNativeId",
      label: "获取本地ID",
-      outputVariable: "nativeId",
-      saveOutput: true,
    },
    {
      value: "utools.getAppVersion",
      label: "获取uTools版本",
-      outputVariable: "appVersion",
-      saveOutput: true,
    },
  ],
 };
--- a/src/js/composer/commands/windowsCommands.js
+++ b/src/js/composer/commands/windowsCommands.js
@ -207,8 +207,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.window.getWindowInfo",
          label: "搜索窗口",
          icon: "search",
-          outputVariable: "windowInfo",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.automation.inspect",
@ -451,7 +449,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.automation.getvalue",
          label: "获取值",
          icon: "content_paste",
-          outputVariable: "elementValue",
        },
        {
          value: "quickcomposer.windows.automation.select",
@ -621,8 +618,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.sendmessage.listControls",
          label: "获取控件树",
          icon: "account_tree",
-          outputVariable: "controlsTree",
-          saveOutput: true,
          config: [
            {
              component: "OptionEditor",
@ -810,8 +805,6 @@ export const windowsCommands = {
      label: "剪贴板/文件监控",
      icon: "monitor_heart",
      isAsync: true,
-      outputVariable: "monitorEvent",
-      saveOutput: true,
      showLoading: true,
      subCommands: [
        {
@ -879,8 +872,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.process.listProcesses",
          label: "进程列表",
          icon: "list",
-          outputVariable: "processList",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.process.killProcess",
@ -956,8 +947,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.registry.listKeys",
          label: "列出项",
          icon: "list",
-          outputVariable: "registryKeys",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.registry.getValue",
@ -983,8 +972,6 @@ export const windowsCommands = {
              placeholder: "要获取的值名称",
            },
          ],
-          outputVariable: "registryValue",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.registry.setValue",
@ -1072,8 +1059,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.service.listServices",
          label: "服务列表",
          icon: "list",
-          outputVariable: "serviceList",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.service.controlService",
@ -1116,8 +1101,6 @@ export const windowsCommands = {
          value: "quickcomposer.windows.software.listSoftware",
          label: "软件列表",
          icon: "list",
-          outputVariable: "softwareList",
-          saveOutput: true,
        },
        {
          value: "quickcomposer.windows.software.uninstallSoftware",
--- a/src/js/composer/generateCode.js
+++ b/src/js/composer/generateCode.js
@ -2,8 +2,7 @@ export function generateCode(flow) {
  const { commands, name, label, customVariables = [] } = flow;

  const params = customVariables.filter((v) => v.type === "param") || [];
-  const manualVars =
-    customVariables.filter((v) => v.type === "var") || [];
+  const manualVars = customVariables.filter((v) => v.type === "var") || [];
  // 检查是否包含异步函数
  const hasAsyncFunction = commands.some((cmd) => cmd.isAsync);

@ -25,15 +24,41 @@ export function generateCode(flow) {
    // 跳过禁用的命令
    if (cmd.disabled) return;
    if (!cmd.code) return;
-    let line = indent;

+    let cmdCode = cmd.code;
+    // 处理输出变量
    if (cmd.outputVariable) {
-      line += `let ${cmd.outputVariable} = `;
+      const { name, details } = cmd.outputVariable;
+      if (cmd.isAsync) {
+        if (cmd.callbackFunc) {
+          // 使用回调函数模式
+          cmdCode = `${cmdCode}.then(${cmd.callbackFunc})`;
+        } else {
+          // 使用 await 模式
+          cmdCode = `const ${name} = await ${cmdCode}`;
+          code.push(indent + cmdCode);
+          // 处理详细变量
+          if (details) {
+            Object.entries(details).forEach(([path, varName]) => {
+              code.push(`${indent}let ${varName} = ${name}.${path};`);
+            });
+          }
+          return;
+        }
+      } else {
+        cmdCode = `const ${name} = ${cmdCode}`;
+        code.push(indent + cmdCode);
+        // 处理详细变量
+        if (details) {
+          Object.entries(details).forEach(([path, varName]) => {
+            code.push(`${indent}let ${varName} = ${name}.${path};`);
+          });
+        }
+        return;
+      }
    }

-    let awaitCmd = cmd.isAsync ? "await " : "";
-    line += `${awaitCmd} ${cmd.code}`;
-    code.push(line);
+    code.push(indent + cmdCode);
  });

  code.push("}"); // Close the function