恢复修改的数据

src/views/cases/cpns/CasesGrid.vue

@@ -4,23 +4,34 @@ import type { Case } from '@/types/business/cases'
 
 interface Props {
   cases: Case[]
+  /** 当前筛选条件下的案例总数 */
+  total: number
 }
 
 defineProps<Props>()
 
-const emit = defineEmits<{ view: [id: string] }>()
+const emit = defineEmits<{
+  view: [id: string]
+  favorite: [id: string]
+}>()
 </script>
 
 <template>
   <div class="cases-grid">
-    <template v-if="cases.length > 0">
+    <p class="cases-grid__total">
+      {{ total }}
+    </p>
+
+    <div v-if="cases.length > 0" class="cases-grid__list">
       <CaseCard
         v-for="item in cases"
         :key="item.id"
         :item="item"
         @view="emit('view', $event)"
+        @favorite="emit('favorite', $event)"
       />
-    </template>
+    </div>
+
     <p v-else class="cases-grid__empty text-secondary">
       暂无符合条件的案例，请调整筛选条件
     </p>
@@ -29,12 +40,20 @@ const emit = defineEmits<{ view: [id: string] }>()
 
 <style lang="less" scoped>
 .cases-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: @spacing-base;
+  &__total {
+    font-size: 24px;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: @spacing-base;
+    margin-top: @spacing-base;
+  }
 
   &__empty {
-    grid-column: 1 / -1;
     padding: @spacing-xxl 0;
     text-align: center;
     font-size: @font-size-base;