OutPutEditor支持下拉选择变量和函数

src/components/composer/card/CommandButtons.vue

@@ -10,8 +10,10 @@
         <q-icon
           name="output"
           v-if="!command.neverHasOutput"
-          class="output-btn"
+          :class="[
-          :color="command.outputVariable ? 'primary' : ''"
+            'output-btn',
+            command.outputVariable ? 'output-btn-active' : '',
+          ]"
           @click="showOutputEditor = true"
         >
           <q-tooltip>
@@ -195,6 +197,11 @@ export default {
   color: var(--q-primary);
 }
 
+.output-btn-active {
+  color: var(--q-primary);
+  opacity: 1;
+}
+
 /* 暗色模式适配 */
 .body--dark .output-btn {
   border-color: rgba(255, 255, 255, 0.1);

src/components/composer/card/OutputEditor.vue

@@ -11,6 +11,7 @@
           v-model="simpleOutputVar"
           :label="currentOutputs?.label || '输出变量名'"
           autofocus
+          :show-variable-list="true"
           class="q-px-sm"
         />
       </SectionBlock>
@@ -75,6 +76,7 @@
                 label="回调函数"
                 placeholder="新函数名则自动创建"
                 class="col-8"
+                :show-function-list="true"
               />
             </template>
           </div>

src/components/composer/card/output/OutputField.vue

@@ -12,6 +12,14 @@
     <template v-slot:prepend>
       <div class="variable-label">{{ label }}</div>
     </template>
+    <template v-slot:append>
+      <VariableList
+        :show-variable-list="showVariableList"
+        :show-function-list="showFunctionList"
+        @emit-value="updateValBySelect"
+        class="variable-list-btn"
+      />
+    </template>
   </q-input>
   <q-select
     v-else
@@ -28,8 +36,12 @@
 
 <script>
 import { defineComponent } from "vue";
+import VariableList from "components/composer/common/varinput/VariableList.vue";
 
 export default defineComponent({
+  components: {
+    VariableList,
+  },
   name: "OutputField",
   props: {
     modelValue: {
@@ -51,8 +63,21 @@ export default defineComponent({
       type: null,
       default: null,
     },
+    showVariableList: {
+      type: Boolean,
+      default: false,
+    },
+    showFunctionList: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
+  methods: {
+    updateValBySelect(_type, val) {
+      this.$emit("update:modelValue", val);
+    },
+  },
 });
 </script>
 
@@ -73,6 +98,14 @@ export default defineComponent({
   font-size: 12px;
 }
 
+.output-field:not(.q-select) :deep(.q-field__control) {
+  padding-right: 0;
+}
+
+.output-field.q-select :deep(.q-field__append) {
+  font-size: 16px;
+}
+
 /* 去除filled输入框边框 */
 .output-field :deep(.q-field__control:before) {
   border: none;
@@ -83,4 +116,18 @@ export default defineComponent({
   height: 0;
   border-bottom: none;
 }
+
+.variable-list-btn {
+  padding: 0 12px;
+}
+
+/* 去掉下拉按钮的焦点效果 */
+.variable-list-btn :deep(.q-focus-helper) {
+  display: none !important;
+}
+
+/* 移除波纹效果 */
+.variable-list-btn :deep(.q-ripple) {
+  display: none;
+}
 </style>

src/components/composer/common/VariableInput.vue

@@ -47,7 +47,12 @@
         class="prepend-btn"
       />
       <!-- 变量选择下拉 -->
-      <VariableList @emit-value="updateValBySelect" class="prepend-btn" />
+      <VariableList
+        @emit-value="updateValBySelect"
+        :show-variable-list="true"
+        :show-function-list="true"
+        class="prepend-btn variable-list-btn"
+      />
     </template>
     <template v-slot:prepend>
       <q-icon v-if="!noIcon" :name="icon || 'code'" />
@@ -294,4 +299,13 @@ export default defineComponent({
   margin-left: 5px;
   transition: all 0.6s ease;
 }
+
+/* 暗色模式 */
+.variable-list-btn {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.body--dark .variable-list-btn {
+  background: rgba(255, 255, 255, 0.02);
+}
 </style>

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

@@ -4,12 +4,13 @@
     dense
     stretch
     size="sm"
-    class="variable-dropdown"
+    :dropdown-icon="icon"
+    :no-icon-animation="icon !== 'arrow_drop_down'"
     @click="({ variables, functions } = getAvailableVariablesAndFunctions())"
   >
     <q-list class="variable-list">
       <template v-if="variables.length || functions.length">
-        <div v-if="variables.length">
+        <div v-if="variables.length && showVariableList">
           <q-item-label header class="variable-label">
             <q-separator class="separator-left" />
             <div class="label-content">
@@ -35,7 +36,7 @@
             </q-item-section>
           </q-item>
         </div>
-        <div v-if="functions.length">
+        <div v-if="functions.length && showFunctionList">
           <q-item-label header class="variable-label">
             <q-separator class="separator-left" />
             <div class="label-content">
@@ -143,13 +144,15 @@ export default defineComponent({
 
     const getAvailableVariables = () => {
       const variables = getCurrentVariables();
-      return variables.filter((variable) =>
+      const usableVariables = variables.filter((variable) =>
         // 输出变量只显示在当前命令之前的
         variable.type === "output"
           ? variable.sourceCommand.index < commandIndex.value
           : // 参数和局部变量显示所有
             true
       );
+      // 去除名称重复的变量，只保留最新的
+      return [...new Map(usableVariables.map((v) => [v.name, v])).values()];
     };
 
     const getCurrentFunctions = inject("getCurrentFunctions");
@@ -188,6 +191,20 @@ export default defineComponent({
       );
     },
   },
+  props: {
+    showVariableList: {
+      type: Boolean,
+      default: true,
+    },
+    showFunctionList: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: String,
+      default: "arrow_drop_down",
+    },
+  },
 });
 </script>
 
@@ -293,15 +310,6 @@ export default defineComponent({
   color: var(--q-grey-7);
 }
 
-/* 暗色模式 */
-.variable-dropdown {
-  background: rgba(0, 0, 0, 0.02);
-}
-
-.body--dark .variable-dropdown {
-  background: rgba(255, 255, 255, 0.02);
-}
-
 .body--dark .variable-item:hover {
   background: rgba(255, 255, 255, 0.1);
 }

src/components/composer/flow/FlowManager.vue

@@ -160,7 +160,7 @@
         </div>
         <div class="var-list">
           <div
-            v-for="(variable, index) in localFlow.outputVariables"
+            v-for="(variable, index) in outputVariables"
             :key="index"
             class="var-item output-var"
           >
@@ -198,6 +198,11 @@ export default defineComponent({
       type: Object,
       required: true,
     },
+    outputVariables: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
   },
   emits: ["update:modelValue", "update:flow"],
   computed: {

src/js/composer/generateCode.js

@@ -1,15 +1,12 @@
 export function generateCode(flow) {
-  let usedVarNames = {};
+  let usedVarNames = [];
 
   // 获取变量赋值代码，如果变量已经存在，则直接赋值，否则声明并赋值
-  const getVarAssignCode = (varName, varValue, funcName) => {
+  const getVarAssignCode = (varName, varValue) => {
-    if (!usedVarNames[funcName]) {
+    if (usedVarNames.includes(varName)) {
-      usedVarNames[funcName] = [];
-    }
-    if (usedVarNames[funcName].includes(varName)) {
       return `${varName} = ${varValue};`;
     }
-    usedVarNames[funcName].push(varName);
+    usedVarNames.push(varName);
     if (!varValue) {
       return `let ${varName};`;
     }
@@ -42,7 +39,7 @@ export function generateCode(flow) {
 
   // 局部变量赋值
   manualVars.forEach((v) => {
-    code.push(indent + getVarAssignCode(v.name, v.value, flow.name));
+    code.push(indent + getVarAssignCode(v.name, v.value));
   });
 
   commands.forEach((cmd) => {
@@ -94,7 +91,8 @@ export function generateCode(flow) {
             code.push(
               `${indent}${getVarAssignCode(
                 varName,
-                getVarByPath(promiseName, path)
+                getVarByPath(promiseName, path),
+                flow.name
               )}`
             );
           });
@@ -107,7 +105,11 @@ export function generateCode(flow) {
         if (details) {
           Object.entries(details).forEach(([path, varName]) => {
             code.push(
-              `${indent}${getVarAssignCode(varName, getVarByPath(name, path))}`
+              `${indent}${getVarAssignCode(
+                varName,
+                getVarByPath(name, path),
+                flow.name
+              )}`
             );
           });
         }