feat 搭建架构骨架

src/views/cases/cpns/CasesGrid.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CaseCard } from '@/components'
+import type { Case } from '@/types/business/cases'
+
+interface Props {
+  cases: Case[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{ view: [id: string] }>()
+</script>
+
+<template>
+  <div class="cases-grid">
+    <template v-if="cases.length > 0">
+      <CaseCard
+        v-for="item in cases"
+        :key="item.id"
+        :item="item"
+        @view="emit('view', $event)"
+      />
+    </template>
+    <p v-else class="cases-grid__empty text-secondary">
+      暂无符合条件的案例，请调整筛选条件
+    </p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.cases-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: @spacing-base;
+
+  &__empty {
+    grid-column: 1 / -1;
+    padding: @spacing-xxl 0;
+    text-align: center;
+    font-size: @font-size-base;
+  }
+}
+</style>