feat：接口联调

pages/cases/index.vue

@@ -1,11 +1,30 @@
 <script setup>
 import SiteHeader from '~/components/site/SiteHeader.vue'
 import SiteFooter from '~/components/site/SiteFooter.vue'
-import { caseCategories, featuredCase, resultSnapshots } from '~/data/cases'
+const { ALL_LABEL, bySortAndTime, categoryList, fetchPublicContent, normalizeCase } =
+  useOfficialContent()
 
-const activeCategory = ref('全部')
+const activeCategory = ref(ALL_LABEL)
 const { openConsultation } = useConsultation()
 
+const { data: caseRows } = await useAsyncData('public-cases', async () => {
+  const rows = await fetchPublicContent('CASE')
+  return rows.sort(bySortAndTime).map((item) => normalizeCase(item, new Map()))
+})
+
+const cases = computed(() => caseRows.value || [])
+const caseCategories = computed(() => categoryList(cases.value, 'industry'))
+const featuredCase = computed(
+  () =>
+    cases.value.find((item) => item.isFeatured) ||
+    cases.value.find((item) => item.isFullCase) ||
+    cases.value[0] ||
+    null
+)
+const resultSnapshots = computed(() =>
+  cases.value.filter((item) => item.id !== featuredCase.value?.id)
+)
+
 useHead({
   title: '客户案例｜大马棒·云途全域 GEO',
   meta: [
@@ -17,12 +36,13 @@ useHead({
   ]
 })
 
-const showFeatured = computed(
-  () => activeCategory.value === '全部' || activeCategory.value === featuredCase.industry
-)
+const showFeatured = computed(() => {
+  if (!featuredCase.value) return false
+  return activeCategory.value === ALL_LABEL || activeCategory.value === featuredCase.value.industry
+})
 const visibleSnapshots = computed(() => {
-  if (activeCategory.value === '全部') return resultSnapshots
-  return resultSnapshots.filter((item) => item.industry === activeCategory.value)
+  if (activeCategory.value === ALL_LABEL) return resultSnapshots.value
+  return resultSnapshots.value.filter((item) => item.industry === activeCategory.value)
 })
 const hasResults = computed(() => showFeatured.value || visibleSnapshots.value.length > 0)
 
@@ -141,7 +161,7 @@ function requestCustomPlan(source) {
                 <article
                   v-for="(snapshot, index) in visibleSnapshots"
                   :key="`${activeCategory}-${snapshot.title}`"
-                  :class="{ wide: index === 0 && activeCategory === '全部' }"
+                  :class="{ wide: index === 0 && activeCategory === ALL_LABEL }"
                 >
                   <div class="snapshot-image">
                     <img :src="snapshot.cover" :alt="`${snapshot.industry}结果快照`" /><span>{{
@@ -853,10 +873,13 @@ function requestCustomPlan(source) {
     url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
 }
 .cases-cta-content {
+  display: grid;
+  justify-items: center;
   padding: 75px 0;
   text-align: center;
 }
 .cases-cta-content > p {
+  width: 100%;
   margin: 0;
   color: #237df0;
   font-size: 12px;