优化 ArrayEditor 组件的栅栏布局样式，优化按钮位置；调整 SelectListEditor 列宽设置

src/components/composer/common/ArrayEditor.vue

@@ -6,76 +6,73 @@
     :model-value="isCollapse"
   >
     <div class="array-editor">
-      <div
+      <div v-for="(row, index) in rows" :key="index" class="array-row">
-        v-for="(row, index) in rows"
+        <div class="row-content row q-col-gutter-sm">
-        :key="index"
+          <template v-if="!!columns">
-        class="row items-center q-gutter-sm"
+            <div
-      >
+              v-for="column in processedColumns"
-        <template v-if="!!columns">
+              :key="column.key"
-          <div
+              :class="[column.width ? `col-${column.width}` : 'col']"
-            v-for="column in processedColumns"
+            >
-            :key="column.key"
+              <VariableInput
-            :class="[column.width ? `col-${column.width}` : 'col']"
+                :model-value="row[column.key]"
-          >
+                v-bind="column"
-            <VariableInput
+                @update:model-value="
-              :model-value="row[column.key]"
+                  (val) => updateColumn(index, column.key, val)
-              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>
+          <template v-else-if="index === rows.length - 1">
-        <template v-else>
+            <q-btn
-          <div class="col">
+              flat
-            <VariableInput
+              dense
-              :model-value="row"
+              size="sm"
-              v-bind="$attrs"
+              icon="remove"
-              @update:model-value="(val) => updateValue(index, val)"
+              class="top-btn"
+              @click="removeRow(index)"
             />
-          </div>
+            <q-btn
-        </template>
+              flat
-        <div class="col-auto">
+              dense
-          <div class="btn-container">
+              size="sm"
-            <template v-if="rows.length === 1">
+              icon="add"
-              <q-btn
+              class="bottom-btn"
-                flat
+              @click="addRow"
-                dense
+            />
-                size="sm"
+          </template>
-                icon="add"
+          <template v-else>
-                class="center-btn"
+            <q-btn
-                @click="addRow"
+              flat
-              />
+              dense
-            </template>
+              size="sm"
-            <template v-else-if="index === rows.length - 1">
+              icon="remove"
-              <q-btn
+              class="center-btn"
-                flat
+              @click="removeRow(index)"
-                dense
+            />
-                size="sm"
+          </template>
-                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>
         </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;
+  width: 16px;
-  height: 32px;
+  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) {

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: [