优化varinput可选变量的获取逻辑

src/components/composer/CommandComposer.vue

@@ -43,12 +43,17 @@ export default defineComponent({
     // 提供获取当前变量的函数，直接返回解析后的变量列表
     const getCurrentVariables = () => {
       const variables = [];
-      for (const cmd of commandFlow.value) {
+      for (const [index, cmd] of commandFlow.value.entries()) {
         if (cmd.saveOutput && cmd.outputVariable) {
           variables.push(
             ...parseVariables(cmd.outputVariable).map((variable) => ({
               name: variable,
-              sourceCommand: cmd,
+              // 提供来源命令的标志信息
+              sourceCommand: {
+                label: cmd.label,
+                id: cmd.id,
+                index,
+              },
             }))
           );
         }

src/components/composer/ComposerCard.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { defineComponent, inject } from "vue";
+import { defineComponent, inject, provide, computed } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import MultiParams from "components/composer/MultiParams.vue";
 import CommandHead from "components/composer/card/CommandHead.vue";
@@ -85,6 +85,10 @@ export default defineComponent({
       type: Object,
       required: true,
     },
+    commandIndex: {
+      type: Number,
+      required: true,
+    },
   },
   emits: ["remove", "run", "addBranch", "toggle-collapse", "update:modelValue"],
   computed: {
@@ -109,8 +113,12 @@ export default defineComponent({
       );
     },
   },
-  setup() {
+  setup(props) {
     const getCurrentVariables = inject("getCurrentVariables");
+    // 创建响应式的commandIndex
+    const commandIndex = computed(() => props.commandIndex);
+    // 主要用于VariableInput组件的变量选择下拉框，获取当前命令的索引
+    provide("commandIndex", commandIndex);
     return { getCurrentVariables };
   },
   methods: {

src/components/composer/ComposerFlow.vue

@@ -49,6 +49,7 @@
               >
                 <ComposerCard
                   v-model="commands[index]"
+                  :command-index="index"
                   @remove="removeCommand(index)"
                   @run="handleRunCommand"
                   @add-branch="addBranch"

src/components/composer/common/VariableInput.vue

@@ -79,7 +79,7 @@
         }"
         class="variable-dropdown prepend-btn"
         size="sm"
-        @click="variables = getCurrentVariables()"
+        @click="variables = getAvailableVariables()"
       >
         <q-list class="variable-list">
           <q-item-label header class="variable-label">
@@ -115,14 +115,12 @@
                   <div class="q-gutter-md">
                     <div class="row items-center justify-center text-grey-6">
                       <q-icon name="info" size="20px" class="q-mr-sm" />
-                      <span>无可用变量</span>
+                      <span>当前命令没有可用变量</span>
                     </div>
-                    <div class="row items-center justify-center">
+                    <div class="row items-center justify-center text-grey-7">
-                      <span class="text-grey-7"
+                      <div class="text-grey-7">点击其他命令卡片右上角的</div>
-                        >点击命令卡片右上角的
                       <q-icon name="output" size="16px" class="q-mx-xs" />
-                        按钮添加输出变量
+                      <div>按钮添加输出变量</div>
-                      </span>
                     </div>
                   </div>
                 </q-item-label>
@@ -198,7 +196,18 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup() {
     const getCurrentVariables = inject("getCurrentVariables");
-    return { getCurrentVariables };
+    const commandIndex = inject("commandIndex", null);
+
+    const getAvailableVariables = () => {
+      // commandIndex 是响应式的，所以需要使用 value 来获取其值
+      return getCurrentVariables().filter(
+        (variable) => variable.sourceCommand.index < commandIndex.value
+      );
+    };
+
+    return {
+      getAvailableVariables,
+    };
   },
 
   data() {

src/components/composer/flow/ComposerButtons.vue

@@ -22,11 +22,11 @@
         v-if="isDev"
       >
       </q-btn>
-      <q-btn icon="logout" dense flat v-close-popup>
+      <q-btn icon="close" dense flat v-close-popup>
         <q-tooltip>退出可视化编排</q-tooltip>
       </q-btn>
       <q-separator vertical />
-      <q-btn dense icon="publish" flat @click="$emit('action', 'insert')">
+      <q-btn dense icon="read_more" flat @click="$emit('action', 'insert')">
         <q-tooltip>插入到编辑器光标处</q-tooltip>
       </q-btn>
       <q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">