增强 FlowTabs 和变量管理：引入了 VariableManager 组件以更好地处理变量，更新了 ComposerFlow 以支持自定义变量，并改进了 VariableList 中的变量选择界面。增加了切换变量管理的功能，并调整了代码生成以包含参数和局部变量。

src/components/composer/FlowTabs.vue

@@ -77,17 +77,28 @@
       />
     </div>
 
-    <div class="flow-container">
+    <div
-      <ComposerFlow
+      class="flow-container"
       v-for="flow in flows"
-        v-show="activeTab === flow.id"
       :key="flow.id"
+      v-show="activeTab === flow.id"
+    >
+      <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"
       />
+      <VariableManager
+        v-model="showVariableManager"
+        :variables="flow.customVariables"
+        @update:variables="flow.customVariables = $event"
+        :is-main-flow="flow.id === 'main'"
+        :output-variables="outputVariables"
+        class="variable-panel"
+      />
     </div>
   </div>
 </template>
@@ -96,6 +107,7 @@
 import { defineComponent, provide, ref, computed } from "vue";
 import ComposerFlow from "./ComposerFlow.vue";
 import ComposerButtons from "./flow/ComposerButtons.vue";
+import VariableManager from "./flow/VariableManager.vue";
 import { generateCode } from "js/composer/generateCode";
 import { findCommandByValue } from "js/composer/composerConfig";
 import { generateUniqSuffix } from "js/composer/variableManager";
@@ -107,6 +119,7 @@ export default defineComponent({
     ComposerFlow,
     ComposerButtons,
     draggable,
+    VariableManager,
   },
   props: {
     showCloseButton: {
@@ -120,6 +133,7 @@ export default defineComponent({
       name: "main",
       label: "主流程",
       commands: [],
+      customVariables: [],
     });
 
     const subFlows = ref([]);
@@ -130,6 +144,7 @@ export default defineComponent({
         return {
           label: flow.label,
           value: flow.name,
+          id: flow.id,
         };
       });
     };
@@ -139,11 +154,14 @@ export default defineComponent({
 
     const activeTab = ref("main");
 
-    // 获取当前函数所有变量
+    const getCurrentFlow = () => {
-    const getCurrentVariables = () => {
+      return flows.value.find((flow) => flow.id === activeTab.value);
+    };
+
+    // 获取当前函数所有输出变量
+    const getOutputVariables = (flow = getCurrentFlow()) => {
       const variables = [];
-      const currentFlow = flows.value.find((flow) => flow.id === activeTab.value);
+      for (const [index, cmd] of flow.commands.entries()) {
-      for (const [index, cmd] of currentFlow.commands.entries()) {
         if (cmd.saveOutput && cmd.outputVariable) {
           variables.push(
             ...parseVariables(cmd.outputVariable).map((variable) => ({
@@ -154,6 +172,7 @@ export default defineComponent({
                 id: cmd.id,
                 index,
               },
+              type: "output",
             }))
           );
         }
@@ -161,13 +180,48 @@ export default defineComponent({
       return variables;
     };
 
+    const getFunctionParams = (flowId) => {
+      const flow = flows.value.find((f) => f.id === flowId);
+      return flow.customVariables.filter((v) => v.type === "param");
+    };
+
+    provide("getFunctionParams", getFunctionParams);
+
+    /**
+     * 获取当前函数所有变量
+     * 返回格式：
+     * [
+     *   { name: "变量名", type: "变量类型", sourceCommand: { label: "变量来源" , index?: 来源命令索引, id?: 来源命令id} }
+     * ]
+     */
+    const getCurrentVariables = () => {
+      const currentFlow = getCurrentFlow();
+      const variables = getOutputVariables(currentFlow);
+      const customVariables = currentFlow.customVariables.map((v) => ({
+        name: v.name,
+        type: v.type,
+        sourceCommand: {
+          label: v.type === "param" ? "函数参数" : "局部变量",
+        },
+      }));
+      return [...customVariables, ...variables];
+    };
+
     provide("getCurrentVariables", getCurrentVariables);
 
-    return { flows, mainFlow, subFlows, activeTab };
+    return {
+      flows,
+      mainFlow,
+      subFlows,
+      activeTab,
+      getOutputVariables,
+    };
   },
   data() {
     return {
       isAllCollapsed: false,
+      showVariableManager: false,
+      outputVariables: [],
     };
   },
   methods: {
@@ -189,6 +243,7 @@ export default defineComponent({
         name,
         label: name.replace("func_", "函数"),
         commands: [],
+        customVariables: [],
       });
       this.activeTab = id;
     },
@@ -225,6 +280,10 @@ export default defineComponent({
         case "expandAll":
           this.expandAll();
           break;
+        case "toggleVariableManager":
+          this.showVariableManager = !this.showVariableManager;
+          this.outputVariables = this.getOutputVariables();
+          break;
         default:
           this.$emit("action", type, this.generateAllFlowCode());
       }
@@ -432,8 +491,19 @@ export default defineComponent({
   overflow: hidden;
 }
 
-.body--dark .tabs-header {
+.flow-wrapper {
-  border-bottom-color: rgba(255, 255, 255, 0.05);
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.variable-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
 }
 
 .main-btn {

src/components/composer/common/varinput/VariableList.vue

@@ -8,14 +8,15 @@
     @click="({ variables, functions } = getAvailableVariablesAndFunctions())"
   >
     <q-list class="variable-list">
-      <q-item-label header class="variable-label">
-        <q-icon name="functions" />
-        <span>选择变量或函数</span>
-      </q-item-label>
-
-      <q-separator class="q-my-xs" />
-
       <template v-if="variables.length || functions.length">
+        <div v-if="variables.length">
+          <q-item-label header class="variable-label">
+            <q-separator class="separator-left" />
+            <div class="label-content">
+              <span>变量</span>
+            </div>
+            <q-separator class="separator-right" />
+          </q-item-label>
           <q-item
             v-for="variable in variables"
             :key="variable.name"
@@ -33,21 +34,33 @@
               </q-item-label>
             </q-item-section>
           </q-item>
-        <q-separator v-if="variables.length" />
+        </div>
+        <div v-if="functions.length">
+          <q-item-label header class="variable-label">
+            <q-separator class="separator-left" />
+            <div class="label-content">
+              <span>函数</span>
+            </div>
+            <q-separator class="separator-right" />
+          </q-item-label>
           <q-item
             v-for="func in functions"
-          :key="func.value"
+            :key="func.id"
             clickable
             v-close-popup
-          @click="insertValue(func.value + '()')"
+            @click="insertValue(func.value + getInsertFunctionParams(func.id))"
             class="variable-item"
           >
             <q-item-section>
               <q-item-label class="variable-name">
+                {{ func.value }}
+              </q-item-label>
+              <q-item-label caption class="variable-source">
                 {{ func.label }}
               </q-item-label>
             </q-item-section>
           </q-item>
+        </div>
       </template>
       <template v-else>
         <q-item>
@@ -88,8 +101,13 @@ export default defineComponent({
     const commandIndex = inject("commandIndex", null);
 
     const getAvailableVariables = () => {
-      return getCurrentVariables().filter(
+      const variables = getCurrentVariables();
-        (variable) => variable.sourceCommand.index < commandIndex.value
+      return variables.filter((variable) =>
+        // 输出变量只显示在当前命令之前的
+        variable.type === "output"
+          ? variable.sourceCommand.index < commandIndex.value
+          : // 参数和局部变量显示所有
+            true
       );
     };
 
@@ -102,8 +120,11 @@ export default defineComponent({
       };
     };
 
+    const getFunctionParams = inject("getFunctionParams");
+
     return {
       getAvailableVariablesAndFunctions,
+      getFunctionParams,
     };
   },
   data() {
@@ -116,6 +137,15 @@ export default defineComponent({
     insertValue(value) {
       this.$emit("emitValue", "var", value);
     },
+    getInsertFunctionParams(funcId) {
+      return (
+        "(" +
+        this.getFunctionParams(funcId)
+          .map((p) => p.name)
+          .join(", ") +
+        ")"
+      );
+    },
   },
 });
 </script>
@@ -129,7 +159,6 @@ export default defineComponent({
 }
 /* 变量列表样式 */
 .variable-list {
-  min-width: 200px;
   padding: 4px;
 }
 
@@ -137,7 +166,8 @@ export default defineComponent({
   border-radius: 4px;
   padding: 0px 16px;
   transition: all 0.3s ease;
-  min-height: 40px;
+  min-height: 32px;
+  text-align: center;
 }
 
 .variable-item:hover {
@@ -150,6 +180,25 @@ export default defineComponent({
   align-items: center;
   gap: 4px;
   font-size: 13px;
+  position: relative;
+}
+
+.separator-left {
+  min-width: 16px;
+  flex: 1;
+}
+
+.separator-right {
+  min-width: 16px;
+  flex: 1;
+}
+
+.label-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  white-space: nowrap;
 }
 
 .variable-name {
@@ -160,6 +209,7 @@ export default defineComponent({
 .variable-source {
   font-size: 11px;
   opacity: 0.7;
+  margin-top: 0;
 }
 
 /* 暗色模式适配 */

src/components/composer/flow/ComposerButtons.vue

@@ -11,6 +11,15 @@
         <q-tooltip>{{ isAllCollapsed ? "展开所有" : "折叠所有" }}</q-tooltip>
       </q-btn>
       <q-separator vertical />
+      <q-btn
+        icon="data_object"
+        dense
+        flat
+        @click="$emit('action', 'toggleVariableManager')"
+      >
+        <q-tooltip>变量管理</q-tooltip>
+      </q-btn>
+      <q-separator vertical />
       <q-btn
         @click="$q.dark.toggle()"
         :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"

src/components/composer/flow/VariableManager.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="variable-manager" :class="{ 'is-visible': modelValue }">
+    <div class="variable-content">
+      <div class="variable-header">
+        <div class="header-title">变量管理</div>
+        <q-btn
+          flat
+          dense
+          round
+          icon="close"
+          size="sm"
+          @click="$emit('update:modelValue', false)"
+        />
+      </div>
+      <!-- 参数管理部分 -->
+      <div class="section" v-if="!isMainFlow">
+        <div class="section-header">
+          <div class="section-title">
+            <q-icon name="functions" size="16px" />
+            <div>函数参数</div>
+          </div>
+          <q-btn
+            flat
+            dense
+            round
+            icon="add"
+            size="sm"
+            @click="addVariable('param')"
+          />
+        </div>
+        <div class="var-list">
+          <div
+            v-for="(variable, index) in paramVariables"
+            :key="index"
+            class="var-item"
+          >
+            <q-input
+              v-model="variable.name"
+              dense
+              borderless
+              class="var-input"
+              @blur="validateVariable(variable, 'param')"
+              @keydown.enter="validateVariable(variable, 'param')"
+            />
+            <q-btn
+              flat
+              dense
+              round
+              icon="close"
+              size="xs"
+              @click="removeVariable(index, 'param')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 手动变量管理部分 -->
+      <div class="section">
+        <div class="section-header">
+          <div class="section-title">
+            <q-icon name="data_object" size="16px" />
+            <div>局部变量</div>
+          </div>
+          <q-btn
+            flat
+            dense
+            round
+            icon="add"
+            size="sm"
+            @click="addVariable('var')"
+          />
+        </div>
+        <div class="var-list">
+          <div
+            v-for="(variable, index) in customVars"
+            :key="index"
+            class="var-item"
+          >
+            <div class="var-inputs">
+              <q-input
+                v-model="variable.name"
+                dense
+                borderless
+                class="var-input"
+                placeholder="变量名"
+                @blur="validateVariable(variable, 'var')"
+                @keydown.enter="validateVariable(variable, 'var')"
+              />
+              <q-separator vertical />
+              <q-input
+                v-model="variable.value"
+                dense
+                borderless
+                class="var-input"
+                placeholder="变量值"
+              />
+            </div>
+            <q-btn
+              flat
+              dense
+              round
+              icon="close"
+              size="xs"
+              @click="removeVariable(index, 'var')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 输出变量展示部分 -->
+      <div class="section">
+        <div class="section-header">
+          <div class="section-title">
+            <q-icon name="output" size="16px" />
+            <div>来自输出</div>
+          </div>
+        </div>
+        <div class="var-list">
+          <div
+            v-for="(variable, index) in outputVariables"
+            :key="index"
+            class="var-item output-var"
+          >
+            <div class="var-name">{{ variable.name }}</div>
+            <div class="var-source">{{ variable.sourceCommand.label }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "VariableManager",
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isMainFlow: {
+      type: Boolean,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    outputVariables: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  emits: ["update:modelValue", "update:variables"],
+  computed: {
+    customVariables: {
+      get() {
+        return this.variables || [];
+      },
+      set(value) {
+        this.$emit("update:variables", value);
+      },
+    },
+    paramVariables() {
+      return this.customVariables.filter((v) => v.type === "param");
+    },
+    customVars() {
+      return this.customVariables.filter((v) => v.type === "var");
+    },
+  },
+  methods: {
+    addVariable(type) {
+      const prefix = type === "param" ? "param_" : "var_";
+      const count = this.customVariables.filter((v) => v.type === type).length;
+      this.customVariables = [
+        ...this.customVariables,
+        {
+          name: prefix + (count + 1),
+          type,
+          value: type === "var" ? "" : undefined,
+        },
+      ];
+    },
+    removeVariable(index, type) {
+      const typeVars = this.customVariables.filter((v) => v.type === type);
+      const globalIndex = this.customVariables.indexOf(typeVars[index]);
+      if (globalIndex > -1) {
+        const newVars = [...this.customVariables];
+        newVars.splice(globalIndex, 1);
+        this.customVariables = newVars;
+      }
+    },
+    validateVariable(variable, type) {
+      if (!variable.name) {
+        const prefix = type === "param" ? "param_" : "var_";
+        const count = this.customVariables.filter(
+          (v) => v.type === type
+        ).length;
+        variable.name = prefix + count;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.variable-manager {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  background: rgba(255, 255, 255, 0.95);
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10;
+  overflow: hidden;
+  border-radius: 0 0 8px 0;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.variable-manager.is-visible {
+  width: 200px;
+}
+
+.body--dark .variable-manager {
+  background: rgba(35, 35, 35, 0.95);
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
+}
+
+.variable-content {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  min-width: 200px;
+  padding: 8px;
+  height: 100%;
+  overflow-y: auto;
+  visibility: hidden;
+}
+
+.variable-manager.is-visible .variable-content {
+  opacity: 1;
+  visibility: visible;
+}
+
+.variable-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  margin: -8px -8px 8px -8px;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--q-primary);
+}
+
+.section {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0.8;
+}
+
+.var-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 4px;
+}
+
+.var-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.02);
+  transition: background-color 0.2s ease;
+  min-height: 32px;
+}
+
+.var-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.body--dark .var-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.var-inputs {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  height: 20px;
+}
+
+.var-input {
+  width: 0;
+  flex: 1 1 50%;
+}
+
+.var-input :deep(.q-field__control) {
+  height: 20px;
+  min-height: 20px;
+}
+
+.var-input :deep(.q-field__native) {
+  padding: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.var-input :deep(.q-field__native::placeholder) {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.body--dark .var-input :deep(.q-field__native::placeholder) {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.output-var {
+  padding: 6px 8px;
+  font-size: 12px;
+}
+
+.var-name {
+  font-weight: 500;
+}
+
+.var-source {
+  margin-left: auto;
+  font-size: 11px;
+  opacity: 0.7;
+}
+</style>

src/js/composer/generateCode.js

@@ -1,5 +1,9 @@
 export function generateCode(flow) {
-  const { commands, name, label } = flow;
+  const { commands, name, label, customVariables = [] } = flow;
+
+  const params = customVariables.filter((v) => v.type === "param") || [];
+  const manualVars =
+    customVariables.filter((v) => v.type === "var") || [];
   // 检查是否包含异步函数
   const hasAsyncFunction = commands.some((cmd) => cmd.isAsync);
 
@@ -8,8 +12,13 @@ export function generateCode(flow) {
 
   code.push(`// ${label}`);
   // 生成函数声明
-  code.push(`${hasAsyncFunction ? "async " : ""}function ${funcName}() {`);
+  code.push(
+    `${hasAsyncFunction ? "async " : ""}function ${funcName}(${params
+      .map((p) => p.name)
+      .join(", ")}) {`
+  );
 
+  code.push(manualVars.map((v) => `  let ${v.name} = ${v.value};`).join("\n"));
   const indent = "  ";
 
   commands.forEach((cmd) => {