From d3709db4b3af2415331b9aca2c788f6451aecdac Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 7 Jan 2025 09:21:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96varinput=E5=8F=AF=E9=80=89?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=9A=84=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/CommandComposer.vue   |  9 +++++--
 src/components/composer/ComposerCard.vue      | 12 +++++++--
 src/components/composer/ComposerFlow.vue      |  1 +
 .../composer/common/VariableInput.vue         | 27 ++++++++++++-------
 .../composer/flow/ComposerButtons.vue         |  4 +--
 5 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/composer/CommandComposer.vue b/src/components/composer/CommandComposer.vue
index 0689ccc..a3faa10 100644
--- a/src/components/composer/CommandComposer.vue
+++ b/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,
+              },
             }))
           );
         }
diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index ccb2144..6762241 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/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: {
diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index 3175a5d..961143c 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/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"
diff --git a/src/components/composer/common/VariableInput.vue b/src/components/composer/common/VariableInput.vue
index 61d7fb0..e81a173 100644
--- a/src/components/composer/common/VariableInput.vue
+++ b/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">
-                      <span class="text-grey-7"
-                        >点击命令卡片右上角的
-                        <q-icon name="output" size="16px" class="q-mx-xs" />
-                        按钮添加输出变量
-                      </span>
+                    <div class="row items-center justify-center text-grey-7">
+                      <div class="text-grey-7">点击其他命令卡片右上角的</div>
+                      <q-icon name="output" size="16px" class="q-mx-xs" />
+                      <div>按钮添加输出变量</div>
                     </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() {
diff --git a/src/components/composer/flow/ComposerButtons.vue b/src/components/composer/flow/ComposerButtons.vue
index 6d6401d..5e413a7 100644
--- a/src/components/composer/flow/ComposerButtons.vue
+++ b/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')">