Sfoglia il codice sorgente

fix(table): 列表分页对齐数据页样式并修复翻页闪动

- QueryTableModal 分页改为总条数 + 每页条数下拉 + 紧凑页码 + 前往页
- 页码按钮 26×26、选中高亮、间距字号对齐数据页
- 移除全局「禁用分页整条隐藏」规则,加载时不再先消失再出现
cc 5 giorni fa
parent
commit
61289da25e

+ 84 - 34
ai-electron/frontend/src/case/views/dm/components/QueryTableModal.vue

@@ -133,14 +133,26 @@
 
     <template #footer>
       <div ref="paginationRef" class="pagination-bar">
-        <AnalysisPagination
-          :total="pagination.total"
+        <div class="pagination-total">共 {{ pagination.total }} 条</div>
+        <Select
+          :value="pagination.limit"
+          class="pagination-size-select"
+          :options="pageSizeOptions"
+          :getPopupContainer="getTableSettingPopupContainer"
+          @change="handlePageSizeSelect"
+        />
+        <Pagination
           :current="pagination.page"
+          :total="pagination.total"
           :page-size="pagination.limit"
-          :page-size-options="pageSizeOptions"
-          :loading="loading"
-          @change="handlePaginationChange"
+          :show-size-changer="false"
+          @change="handlePageChange"
         />
+        <div class="pagination-jump">
+          <span>前往</span>
+          <Input v-model:value="jumpPage" class="pagination-jump-input" @pressEnter="handleJumpPage" />
+          <span>页</span>
+        </div>
       </div>
     </template>
   </BasicModal>
@@ -149,8 +161,7 @@
 <script lang="ts" setup>
   import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
   import type { Dayjs } from 'dayjs';
-  import { Button, DatePicker, Input, Select } from 'ant-design-vue';
-  import AnalysisPagination from '@/core/components/AnalysisPagination/src/AnalysisPagination.vue';
+  import { Button, DatePicker, Input, Pagination, Select } from 'ant-design-vue';
   import { EmptyState } from '@/core/components/EmptyState';
   import { BasicTable } from '@/core/components/Table';
   import { BasicModal } from '@/core/components/Modal';
@@ -231,6 +242,38 @@
     emit('page-change', page, pageSize);
   };
 
+  /** 分页条与数据页保持一致:总条数 + 每页条数下拉 + 原生页码 + 前往页输入框 */
+  const jumpPage = ref(String(props.pagination.page || 1));
+
+  watch(
+    () => props.pagination.page,
+    (page) => {
+      jumpPage.value = String(page || 1);
+    },
+  );
+
+  const handlePageChange = (page: number) => {
+    handlePaginationChange(page, props.pagination.limit);
+  };
+
+  const handlePageSizeSelect = (value: any) => {
+    const pageSize = Number(value);
+    if (!Number.isFinite(pageSize) || pageSize === props.pagination.limit || props.loading) return;
+    emit('page-change', 1, pageSize);
+  };
+
+  const handleJumpPage = () => {
+    const maxPage = Math.max(1, Math.ceil(props.pagination.total / props.pagination.limit));
+    let target = Math.max(1, Number(jumpPage.value) || 1);
+    if (target > maxPage) {
+      target = maxPage;
+    }
+    jumpPage.value = String(target);
+    if (target !== props.pagination.page) {
+      handlePaginationChange(target, props.pagination.limit);
+    }
+  };
+
   const handleTableChange = (_pagination: any, _filters: any, sorter: any) => {
     const currentSorter = Array.isArray(sorter) ? sorter[0] : sorter;
     if (!currentSorter?.order) return;
@@ -772,50 +815,57 @@
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
-    color: #6b7280;
-    font-size: 12px;
+    color: #98a2b3;
+    font-size: 11px;
     flex-wrap: nowrap;
 
     .pagination-total {
       margin-right: 0;
-      color: #64748b;
+      color: #98a2b3;
       white-space: nowrap;
     }
 
-    .pagination-size {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      white-space: nowrap;
+    .pagination-size-select {
+      width: 112px;
+      flex: 0 0 auto;
+    }
 
-      .ant-select {
-        width: 86px;
-      }
+    .ant-pagination.ant-pagination {
+      margin: 0;
 
-      .ant-select-selector {
+      .ant-pagination-item,
+      .ant-pagination-prev,
+      .ant-pagination-next,
+      .ant-pagination-jump-prev,
+      .ant-pagination-jump-next {
+        min-width: 26px;
+        height: 26px;
         border-radius: 6px;
+        border-color: #e7ebf3;
+        line-height: 24px;
+      }
+
+      .ant-pagination-item-active {
+        border-color: #2a50ec;
+        background: #eef2ff;
+
+        a {
+          color: #2a50ec;
+          font-weight: 600;
+        }
       }
     }
 
-    .pagination-actions {
+    .pagination-jump {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: 8px;
       white-space: nowrap;
+    }
 
-      .page-total {
-        color: #6b7280;
-        min-width: 28px;
-        text-align: center;
-      }
-
-      .ant-btn {
-        border-radius: 6px;
-      }
-
-      .ant-btn-primary {
-        min-width: 36px;
-      }
+    .pagination-jump-input {
+      width: 64px;
+      flex: 0 0 auto;
     }
   }
 </style>

+ 2 - 3
ai-electron/frontend/src/core/design/ant/pagination.less

@@ -101,9 +101,8 @@ html[data-theme='dark'] {
     width: auto;
   }
 
-  &-disabled {
-    display: none !important;
-  }
+  /* 禁用态不能整条 display:none:列表翻页进入 loading 时隐藏、结束再恢复,
+     底部分页栏会闪一下。禁用交互交给 Ant 自身的 ant-pagination-disabled 样式。 */
 
   .ant-select-status-error {
     .ant-select-selector {