From 06aac275f95f680282d7283a17817a8d083acae6 Mon Sep 17 00:00:00 2001
From: "weicw1996@qq.com" <weicw1996@qq.com>
Date: Wed, 30 Sep 2026 17:43:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(template-07):=20=E6=A1=88=E4=BE=8B?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=B9=E4=B8=89=E6=A0=8F=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=EF=BC=8C=E5=B8=A6=E5=B0=81=E9=9D=A2=E5=9B=BE=E4=B8=8E=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原为单列图文列表（日期 + 标题 + 摘要 + 客户名）。现改为 sm:2 列 / lg:3 列
的卡片网格：封面图（aspect-[4/3]，无图时显示「暂无图片」占位）、标题、
摘要（line-clamp-2）、客户名，与首页 RecommendCasesSection 的视觉一致。

封面走已有的 useFileUrl()（app/composables/useFileUrl.ts）拼接，
CaseItem.cover / CaseItem.clientName 在 app/types/index.ts 中已定义。

这是独立的 UI 调整，与同批次的域名迁移无关，故拆为单独提交。
eslint 通过（本次改动未新增 warning）。
---
 app/templates/template-07/pages/CaseList.vue | 55 ++++++++++----------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/app/templates/template-07/pages/CaseList.vue b/app/templates/template-07/pages/CaseList.vue
index 7431960..6cfb0ed 100644
--- a/app/templates/template-07/pages/CaseList.vue
+++ b/app/templates/template-07/pages/CaseList.vue
@@ -11,29 +11,33 @@
       </div>
       <SiteError v-else-if="error" message="获取案例列表失败" />
 
-      <div v-else-if="cases.length > 0" class="max-w-[1200px] mx-auto bg-white rounded-xl shadow-sm px-6 py-2">
-        <ul class="divide-y divide-gray-100">
-          <li v-for="item in cases" :key="item.id">
-            <NuxtLink :to="`/case/${item.id}`" class="block py-4 group">
-              <div class="flex items-baseline gap-4">
-                <span class="shrink-0 text-xs text-gray-400 tabular-nums">
-                  {{ formatDate(item.publishTime) }}
-                </span>
-                <h2 class="flex-1 min-w-0 text-base text-gray-900 truncate group-hover:text-blue-600 transition-colors">
-                  {{ item.title }}
-                </h2>
+      <div v-else-if="cases.length > 0" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <article
+          v-for="item in cases"
+          :key="item.id"
+          class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
+        >
+          <NuxtLink :to="`/case/${item.id}`" class="block">
+            <div class="aspect-[4/3] bg-gray-100 overflow-hidden">
+              <img
+                v-if="item.cover"
+                :src="fileUrl(item.cover)"
+                :alt="item.title"
+                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+              >
+              <span v-else class="flex items-center justify-center h-full text-gray-400">暂无图片</span>
+            </div>
+            <div class="p-5">
+              <h2 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
+                {{ item.title }}
+              </h2>
+              <p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
+              <div v-if="item.clientName" class="mt-3 text-xs text-gray-500">
+                客户：{{ item.clientName }}
               </div>
-              <div class="mt-1 pl-[5.5rem]">
-                <p v-if="stripHtml(item.summary)" class="text-sm text-gray-500 line-clamp-1">
-                  {{ stripHtml(item.summary) }}
-                </p>
-                <div v-if="item.clientName" class="mt-1 text-xs text-gray-400">
-                  客户：{{ item.clientName }}
-                </div>
-              </div>
-            </NuxtLink>
-          </li>
-        </ul>
+            </div>
+          </NuxtLink>
+        </article>
       </div>
 
       <!-- 空状态 -->
@@ -60,13 +64,13 @@
 </template>
 
 <script setup lang="ts">
-import dayjs from 'dayjs'
 import type { CaseItem, PageResult } from '~/types'
 import { collectDescendantNavIds } from '~/utils/nav-tree'
 
 /**
  * 模板 1 - 案例列表页
  */
+const { fileUrl } = useFileUrl()
 const route = useRoute()
 const { allNavigations, fetchSiteInfo } = useSite()
 
@@ -127,9 +131,4 @@ const pageTitle = computed(() => {
   }
   return find(navs)?.title || '案例展示'
 })
-
-function formatDate(date?: string) {
-  if (!date) return ''
-  return dayjs(date).format('YYYY-MM-DD')
-}
 </script>