From 4b3323c5db102ddafa4669a72d5ef51e3da5a074 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 7 Jan 2025 00:54:59 +0800
Subject: [PATCH] =?UTF-8?q?valinput=E5=8F=98=E9=87=8F=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A1=86=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/common/VariableInput.vue         | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/composer/common/VariableInput.vue b/src/components/composer/common/VariableInput.vue
index f1d396f..61d7fb0 100644
--- a/src/components/composer/common/VariableInput.vue
+++ b/src/components/composer/common/VariableInput.vue
@@ -111,9 +111,21 @@
           <template v-else>
             <q-item>
               <q-item-section>
-                <q-item-label
-                  >无可用变量，请先点击命令卡片输出变量按钮设置变量</q-item-label
-                >
+                <q-item-label class="empty-variables-tip">
+                  <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>
+                    </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>
+                  </div>
+                </q-item-label>
               </q-item-section>
             </q-item>
           </template>
@@ -411,4 +423,15 @@ export default defineComponent({
 .body--dark .option-item:hover {
   backg: rgba(255, 255, 255, 0.1);
 }
+
+.empty-variables-tip {
+  text-align: center;
+  font-size: 13px;
+  opacity: 0.9;
+  transition: opacity 0.3s ease;
+}
+
+.empty-variables-tip:hover {
+  opacity: 1;
+}
 </style>