From e13f778f2a0bbe92553b1cf44db4ca949238b3fd Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sun, 12 Jan 2025 11:35:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4VariableInput=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E6=9B=B4=E5=8A=A0=E7=B4=A7=E5=87=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/common/VariableInput.vue         | 48 ++++++++++++++-----
 .../composer/ui/SelectListEditor.vue          |  4 +-
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/composer/common/VariableInput.vue b/src/components/composer/common/VariableInput.vue
index 6b64104..de8cf48 100644
--- a/src/components/composer/common/VariableInput.vue
+++ b/src/components/composer/common/VariableInput.vue
@@ -29,10 +29,10 @@
         v-if="!hasSelectedVariable"
       >
         <q-tooltip>{{
-          isString
+          (isString
             ? "当前类型是：字符串"
-            : "当前类型是：变量、数字、表达式等" +
-              (disableToggleType ? "" : "，点击切换")
+            : "当前类型是：变量、数字、表达式等") +
+          (disableToggleType ? "" : "，点击切换")
         }}</q-tooltip>
       </q-btn>
       <!-- 选项下拉按钮 -->
@@ -104,10 +104,7 @@
       <q-btn-dropdown
         flat
         dense
-        :class="{
-          'text-primary': hasSelectedVariable,
-          'text-grey-6': !hasSelectedVariable,
-        }"
+        stretch
         class="variable-dropdown prepend-btn"
         size="sm"
         @click="variables = getAvailableVariables()"
@@ -398,18 +395,43 @@ export default defineComponent({
 
 .variable-input :deep(.q-field__control) {
   padding-left: 8px;
-  padding-right: 8px;
+  padding-right: 0px;
+}
+
+.variable-input :deep(.q-field__append) {
+  padding-left: 0;
 }
 
 .prepend-btn {
-  min-width: 24px;
-  padding: 4px;
-  opacity: 0.6;
-  transition: all 0.3s ease;
+  max-width: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 5px;
+  transition: all 0.6s ease;
 }
 
-.prepend-btn:hover {
+.string-toggle.prepend-btn {
+  transform: translateX(14px);
+  max-width: 0;
+  margin-left: 0;
+  opacity: 0;
+}
+
+.variable-input:hover .string-toggle.prepend-btn {
+  max-width: 14px;
   opacity: 1;
+  transform: translateX(0);
+  margin-left: 5px;
+  transition: all 0.6s ease;
+}
+
+.variable-dropdown.prepend-btn {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.body--dark .variable-dropdown.prepend-btn {
+  background-color: rgba(255, 255, 255, 0.02);
 }
 
 .clear-btn:hover {
diff --git a/src/components/composer/ui/SelectListEditor.vue b/src/components/composer/ui/SelectListEditor.vue
index eb336fc..85e707a 100644
--- a/src/components/composer/ui/SelectListEditor.vue
+++ b/src/components/composer/ui/SelectListEditor.vue
@@ -218,7 +218,7 @@ export default defineComponent({
       arrayEditorColumns: {
         id: {
           label: "id",
-          width: 3,
+          width: 2,
           noIcon: true,
         },
         title: {
@@ -228,7 +228,7 @@ export default defineComponent({
         description: {
           label: "描述",
           noIcon: true,
-          width: 4,
+          width: 5,
         },
       },
     };