task-273(验收反馈): 店铺数据卡片宫格排(一行3个/一页9张+卡片分页)

admin-frontend-vue/src/pages/tasks/ShopDataTasksPage.vue

@@ -30,6 +30,9 @@ const groups = ref<ShopDataTaskGroup[]>([])
 const totalShops = ref(0)
 const page = ref(1)
 const pageSize = 20
+// 卡片宫格分页：一行 3 个、一页 9 张卡片（在店铺分页的结果文件内翻页）。
+const cardPage = ref(1)
+const cardPageSize = 9
 
 const filter = reactive<ShopDataFilter & { dateRange: string[] }>({ ...createShopDataFilter(), dateRange: [] })
 const selection = ref<Set<string>>(new Set())
@@ -90,8 +93,15 @@ function reset() {
 }
 
 const allResultRows = computed(() => groups.value.flatMap((group) => group.results))
+const pagedResultRows = computed(() =>
+  allResultRows.value.slice((cardPage.value - 1) * cardPageSize, cardPage.value * cardPageSize),
+)
 const selectionCount = computed(() => countShopDataSelection(selection.value))
 
+function changeCardPage(p: number) {
+  cardPage.value = p
+}
+
 function resultFileCount(): number {
   return groups.value.reduce((sum, group) => sum + group.results.length, 0)
 }
@@ -274,12 +284,12 @@ onMounted(load)
         :total="totalShops"
         :page-size="pageSize"
         :current-page="page"
-        @current-change="(p: number) => { page = p; selection = new Set(); load() }"
+        @current-change="(p: number) => { page = p; cardPage = 1; selection = new Set(); load() }"
       />
     </div>
 
     <div v-if="allResultRows.length" class="shop-card-grid">
-      <article v-for="row in allResultRows" :key="row.resultId || `${row.taskNo}-${row.filename}`" class="shop-card">
+      <article v-for="row in pagedResultRows" :key="row.resultId || `${row.taskNo}-${row.filename}`" class="shop-card">
         <header class="shop-card-head">
           <span class="shop-name" :title="row.shopName || '-'">{{ row.shopName || '-' }}</span>
         </header>
@@ -335,6 +345,16 @@ onMounted(load)
         </div>
       </article>
     </div>
+    <div v-if="allResultRows.length > cardPageSize" class="table-footer">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="allResultRows.length"
+        :page-size="cardPageSize"
+        :current-page="cardPage"
+        @current-change="changeCardPage"
+      />
+    </div>
 
     <el-empty v-else-if="!loading" description="暂无符合条件的店铺数据任务" />
 
@@ -366,7 +386,7 @@ onMounted(load)
 .f-item.wide { width: 340px; }
 .f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
 .shop-summary-row { display: flex; justify-content: space-between; align-items: center; color: var(--el-text-color-secondary); font-size: 13px; }
-.shop-card-grid { display: flex; flex-direction: column; gap: 14px; }
+.shop-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
 .shop-card { border: 1px solid var(--el-border-color); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28); overflow: hidden; }
 .shop-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
 .shop-name { font-weight: 600; color: var(--el-text-color-primary); }