style(PaginationField): 重构分页组件布局使用网格系统

将actions容器从flex布局改为grid布局，实现左中右三列对齐
左列(上一页)靠左，中列(提交)居中，右列(下一页)靠右

 <!--
  * @Date: 2025-11-18 16:17:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-20 17:56:14
+ * @LastEditTime: 2025-11-25 14:48:19
  * @FilePath: /data-table/src/components/PaginationField/index.vue
  * @Description: 分页组件
 -->
@@ -9,16 +9,22 @@
   <div class="pagination-field">
     <div class="indicator">第{{ current + 1 }}页 / 共{{ total }}页</div>
     <div class="actions">
-      <van-button
-        v-if="showPrev"
-        :disabled="prev_disabled_effective || current === 0"
-        round
-        type="primary"
-        class="btn"
-        @click="onPrev"
-      >{{ prev_label_effective }}</van-button>
-      <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
-      <van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitButton.text }}</van-button>
+      <div class="actionsLeft">
+        <van-button
+          v-if="showPrev"
+          :disabled="prev_disabled_effective || current === 0"
+          round
+          type="primary"
+          class="btn"
+          @click="onPrev"
+        >{{ prev_label_effective }}</van-button>
+      </div>
+      <div class="actionsCenter">
+        <van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitButton.text }}</van-button>
+      </div>
+      <div class="actionsRight">
+        <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
+      </div>
     </div>
   </div>
 </template>
@@ -93,13 +99,29 @@ const onSubmit = () => emit('submit')
     margin-bottom: 0.5rem;
   }
 
-  .actions {
-    display: flex;
-    gap: 0.75rem;
+    .actions {
+        // 三列栅格：左列起始（上一页），中列居中（提交），右列末尾（下一页）
+        display: grid;
+        width: 100%;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: start; // 垂直方向顶对齐
+        min-height: 44px; // 保障容器高度，按钮靠顶部
 
-    .btn {
-      min-width: 6rem;
+        .actionsLeft {
+            justify-self: start; // 左对齐到边
+        }
+
+        .actionsCenter {
+            justify-self: center; // 中间居中
+        }
+
+        .actionsRight {
+            justify-self: end; // 右对齐到边
+        }
+
+        .btn {
+            min-width: 6rem;
+        }
     }
-  }
 }
 </style>