完成全部页面分页组件的抽取

pages/mall/admin/maintain/dev-tools/data-dict.uvue

@@ -239,6 +239,8 @@ function handleDelete(item: any) {
   font-size: 14px;
   color: #666;
   padding: 0 10px;
+  display: flex;
+  flex-direction: row;
 }
 
 .action-link {

pages/mall/admin/maintain/dev-tools/database.uvue

@@ -21,7 +21,7 @@
             <view class="th col-op">操作</view>
           </view>
           <view class="tbody">
-            <view v-for="(item, index) in tableData" :key="index" class="tr">
+            <view v-for="(item, index) in pagedList" :key="index" class="tr">
               <view class="td col-name">{{ item.name }}</view>
               <view class="td col-engine">{{ item.engine }}</view>
               <view class="td col-rows">{{ item.rows }}</view>
@@ -35,21 +35,87 @@
             </view>
           </view>
         </view>
+        <CommonPagination
+          v-if="true"
+          :total="total"
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 tableData 为 fetchTableList() 调用
 const tableData = ref([
   { name: 'eb_system_admin', engine: 'InnoDB', rows: 5, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '后台管理员表' },
   { name: 'eb_user', engine: 'InnoDB', rows: 1250, dataSize: '320.00 KB', indexSize: '156.00 KB', comment: '用户表' },
   { name: 'eb_store_product', engine: 'InnoDB', rows: 86, dataSize: '1.20 MB', indexSize: '64.00 KB', comment: '商品表' },
   { name: 'eb_store_order', engine: 'InnoDB', rows: 4521, dataSize: '2.50 MB', indexSize: '512.00 KB', comment: '订单表' },
-  { name: 'eb_system_config', engine: 'InnoDB', rows: 156, dataSize: '48.00 KB', indexSize: '16.00 KB', comment: '系统配置表' }
+  { name: 'eb_system_config', engine: 'InnoDB', rows: 156, dataSize: '48.00 KB', indexSize: '16.00 KB', comment: '系统配置表' },
+  { name: 'eb_store_category', engine: 'InnoDB', rows: 42, dataSize: '32.00 KB', indexSize: '16.00 KB', comment: '商品分类表' },
+  { name: 'eb_user_address', engine: 'InnoDB', rows: 3210, dataSize: '256.00 KB', indexSize: '64.00 KB', comment: '用户收货地址表' },
+  { name: 'eb_store_cart', engine: 'InnoDB', rows: 8820, dataSize: '1.80 MB', indexSize: '256.00 KB', comment: '购物车表' },
+  { name: 'eb_coupon', engine: 'InnoDB', rows: 312, dataSize: '96.00 KB', indexSize: '32.00 KB', comment: '优惠券表' },
+  { name: 'eb_coupon_user', engine: 'InnoDB', rows: 12500, dataSize: '3.20 MB', indexSize: '512.00 KB', comment: '用户优惠券表' },
+  { name: 'eb_store_order_product', engine: 'InnoDB', rows: 9800, dataSize: '2.10 MB', indexSize: '320.00 KB', comment: '订单商品明细表' },
+  { name: 'eb_system_admin_log', engine: 'InnoDB', rows: 25000, dataSize: '8.00 MB', indexSize: '1.20 MB', comment: '管理员操作日志表' },
+  { name: 'eb_user_integral', engine: 'InnoDB', rows: 5600, dataSize: '640.00 KB', indexSize: '128.00 KB', comment: '用户积分记录表' },
+  { name: 'eb_seckill', engine: 'InnoDB', rows: 18, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '秒杀活动表' },
+  { name: 'eb_bargain', engine: 'InnoDB', rows: 24, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '研价活动表' },
+  { name: 'eb_combination', engine: 'InnoDB', rows: 36, dataSize: '32.00 KB', indexSize: '16.00 KB', comment: '拼团活动表' },
+  { name: 'eb_agent', engine: 'InnoDB', rows: 890, dataSize: '128.00 KB', indexSize: '32.00 KB', comment: '代理商表' },
+  { name: 'eb_spread_commission', engine: 'InnoDB', rows: 18700, dataSize: '4.50 MB', indexSize: '768.00 KB', comment: '佣金流水表' },
+  { name: 'eb_wechat_media', engine: 'InnoDB', rows: 210, dataSize: '2.50 MB', indexSize: '64.00 KB', comment: '微信素材库表' }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => tableData.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return tableData.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function handleExport() {
   uni.showLoading({ title: '正在备份...' })
@@ -138,7 +204,7 @@ function handleRepair(name: string) {
 .col-size { flex: 1; }
 .col-index { flex: 1; }
 .col-comment { flex: 2; }
-.col-op { width: 120px; justify-content: space-around; }
+.col-op { width: 120px; justify-content: space-around; display: flex; flex-direction: row; }
 
 .op-link {
   color: #1890ff;