完成90%页面分页组件的抽取

pages/mall/admin/cms/article/list.uvue

@@ -40,7 +40,7 @@
         </view>
 
         <view class="table-body">
-          <view class="table-row" v-for="item in articleList" :key="item.id">
+          <view class="table-row" v-for="item in pagedList" :key="item.id">
             <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
             <view class="td col-img">
               <view class="img-box"><text class="img-placeholder">🖼️</text></view>
@@ -65,11 +65,22 @@
           </view>
         </view>
 
-        <view class="pagination-bar">
-          <view class="page-info">
-             <text class="page-total">共 {{ articleList.length }} 条</text>
-          </view>
-        </view>
+        <CommonPagination
+          v-if="total > 0"
+          :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>
 
@@ -217,14 +228,68 @@
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 const filterCategory = ref('全部')
 const filterKeyword = ref('')
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 articleList 为 fetchArticleList() 调用
 const articleList = ref([
-  { id: '240', name: '赋能消费 | 卷狗优选迈向文化消费新时代', categoryName:'消费文化', linkedProduct: '', views: '3349', time: '2025-04-01 16:34' },
-  { id: '237', name: '把重要的日子放在桌面', categoryName:'品牌资讯', linkedProduct: '2024新款吹风机...', views: '260', time: '2025-04-01 16:32' }
+  { id: '260', name: '赋能消费 | 卷狗优选迈向文化消费新时代', categoryName: '消费文化', linkedProduct: '', views: '3349', time: '2025-04-01 16:34' },
+  { id: '259', name: '把重要的日子放在桌面', categoryName: '品牌资讯', linkedProduct: '2024新款吹风机...', views: '260', time: '2025-04-01 16:32' },
+  { id: '258', name: '春季家居好物推荐', categoryName: '购物心得', linkedProduct: '', views: '1820', time: '2025-03-28 10:00' },
+  { id: '257', name: '如何挑选适合自己的护肤品', categoryName: '消费文化', linkedProduct: '', views: '2100', time: '2025-03-25 14:20' },
+  { id: '256', name: '品牌创始人专访：坚守初心', categoryName: '品牌资讯', linkedProduct: '', views: '980', time: '2025-03-20 09:15' },
+  { id: '255', name: '高效厨房整理术', categoryName: '购物心得', linkedProduct: '多功能收纳盒...', views: '3456', time: '2025-03-18 11:30' },
+  { id: '254', name: '2025年度流行色解析', categoryName: '消费文化', linkedProduct: '', views: '4120', time: '2025-03-15 16:00' },
+  { id: '253', name: '新品发布：智能水杯上市', categoryName: '品牌资讯', linkedProduct: '智能水杯Pro', views: '5230', time: '2025-03-10 10:00' },
+  { id: '252', name: '宠物用品选购指南', categoryName: '购物心得', linkedProduct: '宠物牵引绳', views: '770', time: '2025-03-08 12:00' },
+  { id: '251', name: '极简生活方式的艺术', categoryName: '消费文化', linkedProduct: '', views: '6100', time: '2025-03-05 08:30' },
+  { id: '250', name: '环保购物袋全测评', categoryName: '购物心得', linkedProduct: '帆布购物袋', views: '1430', time: '2025-03-01 14:00' },
+  { id: '249', name: '春节营销实战复盘', categoryName: '品牌资讯', linkedProduct: '', views: '2210', time: '2025-02-20 09:00' },
+  { id: '248', name: '提升生活品质的10个妙招', categoryName: '消费文化', linkedProduct: '', views: '8900', time: '2025-02-15 10:00' },
+  { id: '247', name: '运动装备选购攻略', categoryName: '购物心得', linkedProduct: '跑步鞋推荐款', views: '3310', time: '2025-02-10 11:00' },
+  { id: '246', name: '年货节好物大盘点', categoryName: '品牌资讯', linkedProduct: '', views: '7640', time: '2025-02-05 14:00' },
+  { id: '245', name: '居家健身的正确打开方式', categoryName: '消费文化', linkedProduct: '哑铃套装', views: '4450', time: '2025-01-28 09:30' },
+  { id: '244', name: '厨房小家电测评合集', categoryName: '购物心得', linkedProduct: '空气炸锅推荐', views: '5560', time: '2025-01-20 10:00' },
+  { id: '243', name: '品牌十周年回顾', categoryName: '品牌资讯', linkedProduct: '', views: '3120', time: '2025-01-15 16:00' },
+  { id: '242', name: '冬季护肤必备清单', categoryName: '消费文化', linkedProduct: '', views: '6780', time: '2025-01-10 14:00' },
+  { id: '241', name: '新年礼物推荐：让 Ta 惊喜', categoryName: '购物心得', linkedProduct: '礼品套装', views: '9900', time: '2025-01-01 00:00' }
 ])
+// ========== 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(() => articleList.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 articleList.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 ==========
 
 const categoryList = ref(['购物心得', '消费文化', '品牌资讯', '全部']) // Mock data mirroring categories
 const dropdownVisible = ref(false)