重构：在 config 列表，完整引入分页

Author: YunaiV

src/components/Pagination/index.vue

@@ -1,64 +1,43 @@
+<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
 <template>
-  <div :class="{ hidden }" class="pagination-container">
-    <el-pagination
-      :background="background"
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :pager-count="pagerCount"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
+  <el-pagination
+    v-show="total > 0"
+    class="float-right mt-15px mb-15px"
+    :background="true"
+    layout="total, sizes, prev, pager, next, jumper"
+    :page-sizes="[10, 20, 30, 50]"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :pager-count="pagerCount"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
 </template>
-
 <script setup>
-// TODO 芋艿：ts 重写
-// TODO 芋艿：scrollTo 接入
-// import { scrollTo } from '@/utils/scroll-to'
 import { computed } from 'vue'
 
 const props = defineProps({
+  // 总条目数
   total: {
     required: true,
     type: Number
   },
+  // 当前页数：pageNo
   page: {
     type: Number,
     default: 1
   },
+  // 每页显示条目个数：pageSize
   limit: {
     type: Number,
     default: 20
   },
-  pageSizes: {
-    type: Array,
-    default() {
-      return [10, 20, 30, 50]
-    }
-  },
+  // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
   // 移动端页码按钮的数量端默认值 5
   pagerCount: {
     type: Number,
     default: document.body.clientWidth < 992 ? 5 : 7
-  },
-  layout: {
-    type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
-  },
-  background: {
-    type: Boolean,
-    default: true
-  },
-  autoScroll: {
-    type: Boolean,
-    default: true
-  },
-  hidden: {
-    type: Boolean,
-    default: false
   }
 })
 
@@ -68,6 +47,7 @@ const currentPage = computed({
     return props.page
   },
   set(val) {
+    // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
     emit('update:page', val)
   }
 })
@@ -76,32 +56,20 @@ const pageSize = computed({
     return props.limit
   },
   set(val) {
+    // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
     emit('update:limit', val)
   }
 })
-function handleSizeChange(val) {
+const handleSizeChange = (val) => {
+  // 如果修改后超过最大页面，强制跳转到第 1 页
   if (currentPage.value * val > props.total) {
     currentPage.value = 1
   }
+  // 触发 pagination 事件，重新加载列表
   emit('pagination', { page: currentPage.value, limit: val })
-  if (props.autoScroll) {
-    // scrollTo(0, 800)
-  }
 }
-function handleCurrentChange(val) {
+const handleCurrentChange = (val) => {
+  // 触发 pagination 事件，重新加载列表
   emit('pagination', { page: val, limit: pageSize.value })
-  if (props.autoScroll) {
-    // scrollTo(0, 800)
-  }
 }
 </script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>

src/views/infra/config/index.vue

@@ -36,7 +36,7 @@
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
         />
       </el-form-item>
       <el-form-item>
@@ -103,8 +103,8 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
     <Pagination
-      v-show="total > 0"
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"