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

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

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