From 9257faf132c221f3ed4a65f6a9412f709b092f1b Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Fri, 24 Jan 2025 17:31:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20ArrayEditor=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=A0=85=E6=A0=8F=E5=B8=83=E5=B1=80=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8C=89=E9=92=AE=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=9B=E8=B0=83=E6=95=B4=20SelectListEditor=20?=
 =?UTF-8?q?=E5=88=97=E5=AE=BD=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composer/common/ArrayEditor.vue           | 159 ++++++++++--------
 .../composer/ui/SelectListEditor.vue          |   3 +-
 2 files changed, 87 insertions(+), 75 deletions(-)

diff --git a/src/components/composer/common/ArrayEditor.vue b/src/components/composer/common/ArrayEditor.vue
index 1af1207..cbf179d 100644
--- a/src/components/composer/common/ArrayEditor.vue
+++ b/src/components/composer/common/ArrayEditor.vue
@@ -6,76 +6,73 @@
     :model-value="isCollapse"
   >
     <div class="array-editor">
-      <div
-        v-for="(row, index) in rows"
-        :key="index"
-        class="row items-center q-gutter-sm"
-      >
-        <template v-if="!!columns">
-          <div
-            v-for="column in processedColumns"
-            :key="column.key"
-            :class="[column.width ? `col-${column.width}` : 'col']"
-          >
-            <VariableInput
-              :model-value="row[column.key]"
-              v-bind="column"
-              @update:model-value="
-                (val) => updateColumn(index, column.key, val)
-              "
+      <div v-for="(row, index) in rows" :key="index" class="array-row">
+        <div class="row-content row q-col-gutter-sm">
+          <template v-if="!!columns">
+            <div
+              v-for="column in processedColumns"
+              :key="column.key"
+              :class="[column.width ? `col-${column.width}` : 'col']"
+            >
+              <VariableInput
+                :model-value="row[column.key]"
+                v-bind="column"
+                @update:model-value="
+                  (val) => updateColumn(index, column.key, val)
+                "
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="col">
+              <VariableInput
+                :model-value="row"
+                v-bind="$attrs"
+                @update:model-value="(val) => updateValue(index, val)"
+              />
+            </div>
+          </template>
+        </div>
+
+        <div class="btn-container">
+          <template v-if="rows.length === 1">
+            <q-btn
+              flat
+              dense
+              size="sm"
+              icon="add"
+              class="center-btn"
+              @click="addRow"
             />
-          </div>
-        </template>
-        <template v-else>
-          <div class="col">
-            <VariableInput
-              :model-value="row"
-              v-bind="$attrs"
-              @update:model-value="(val) => updateValue(index, val)"
+          </template>
+          <template v-else-if="index === rows.length - 1">
+            <q-btn
+              flat
+              dense
+              size="sm"
+              icon="remove"
+              class="top-btn"
+              @click="removeRow(index)"
             />
-          </div>
-        </template>
-        <div class="col-auto">
-          <div class="btn-container">
-            <template v-if="rows.length === 1">
-              <q-btn
-                flat
-                dense
-                size="sm"
-                icon="add"
-                class="center-btn"
-                @click="addRow"
-              />
-            </template>
-            <template v-else-if="index === rows.length - 1">
-              <q-btn
-                flat
-                dense
-                size="sm"
-                icon="remove"
-                class="top-btn"
-                @click="removeRow(index)"
-              />
-              <q-btn
-                flat
-                dense
-                size="sm"
-                icon="add"
-                class="bottom-btn"
-                @click="addRow"
-              />
-            </template>
-            <template v-else>
-              <q-btn
-                flat
-                dense
-                size="sm"
-                icon="remove"
-                class="center-btn"
-                @click="removeRow(index)"
-              />
-            </template>
-          </div>
+            <q-btn
+              flat
+              dense
+              size="sm"
+              icon="add"
+              class="bottom-btn"
+              @click="addRow"
+            />
+          </template>
+          <template v-else>
+            <q-btn
+              flat
+              dense
+              size="sm"
+              icon="remove"
+              class="center-btn"
+              @click="removeRow(index)"
+            />
+          </template>
         </div>
       </div>
     </div>
@@ -271,7 +268,18 @@ export default defineComponent({
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  /*消除q-gutter-sm为第一行带来的额外padding*/
+  margin-top: -8px;
+  margin-left: -8px;
+}
+
+.array-row {
+  display: flex;
+}
+
+.row-content {
+  flex: 1;
+  margin: 0; /* 覆盖 Quasar 的默认 margin */
 }
 
 /* 防止输入框换行 */
@@ -283,11 +291,12 @@ export default defineComponent({
 
 .btn-container {
   position: relative;
-  width: 32px;
-  height: 32px;
+  width: 16px;
+  padding-top: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .btn-container .q-btn {
@@ -296,18 +305,20 @@ export default defineComponent({
   height: 16px;
   min-height: 16px;
   padding: 0;
+  /*抵消array-editor的margin-left，顺便和左边保持距离*/
+  margin-right: -8px;
 }
 
 .btn-container .center-btn {
-  position: relative;
+  top: 18px;
 }
 
 .btn-container .top-btn {
-  top: 0;
+  top: 8px;
 }
 
 .btn-container .bottom-btn {
-  bottom: 0;
+  top: 28px;
 }
 
 .array-editor :deep(.q-btn .q-icon) {
diff --git a/src/components/composer/ui/SelectListEditor.vue b/src/components/composer/ui/SelectListEditor.vue
index 9004446..b0979ef 100644
--- a/src/components/composer/ui/SelectListEditor.vue
+++ b/src/components/composer/ui/SelectListEditor.vue
@@ -199,11 +199,12 @@ export default defineComponent({
         title: {
           label: "标题",
           noIcon: true,
+          width: 4,
         },
         description: {
           label: "描述",
           noIcon: true,
-          width: 5,
+          width: 6,
         },
       },
       subCommands: [