From 09dfded0c8ea672c0c147fdf2c96052fe9222ccb Mon Sep 17 00:00:00 2001
From: "weicw1996@qq.com" <weicw1996@qq.com>
Date: Tue, 29 Sep 2026 02:49:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=96=87=E7=AB=A0/=E6=A1=88=E4=BE=8B?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=B9=E4=B8=BA=E7=BA=AF=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E7=AB=96=E5=90=91=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

去掉封面图卡片网格，改为单列分隔线列表：
- 文章行：日期 | 标题 | 栏目
- 案例行：日期 | 标题，下方摘要与客户

顺带清理去掉图片后已无引用的 fileUrl 解构，
并为案例列表补上空状态（此前空数据渲染为空白）。
---
 app/templates/template-07/pages/CaseList.vue | 59 +++++++++++---------
 app/templates/template-07/pages/NewsList.vue | 48 +++++++---------
 2 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/app/templates/template-07/pages/CaseList.vue b/app/templates/template-07/pages/CaseList.vue
index f98efe0..21c6d76 100644
--- a/app/templates/template-07/pages/CaseList.vue
+++ b/app/templates/template-07/pages/CaseList.vue
@@ -11,33 +11,34 @@
       </div>
       <SiteError v-else-if="error" message="获取案例列表失败" />
 
-      <div v-else 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 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.projectTime || item.createTime) }}
+                </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>
-            </div>
-          </NuxtLink>
-        </article>
+              <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>
+
+      <!-- 空状态 -->
+      <div v-else class="text-center py-20">
+        <p class="text-gray-500">暂无案例内容</p>
       </div>
 
       <!-- 分页 -->
@@ -59,13 +60,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,4 +128,8 @@ const pageTitle = computed(() => {
   return find(navs)?.title || '案例展示'
 })
 
+function formatDate(date?: string) {
+  if (!date) return ''
+  return dayjs(date).format('YYYY-MM-DD')
+}
 </script>
diff --git a/app/templates/template-07/pages/NewsList.vue b/app/templates/template-07/pages/NewsList.vue
index 22f91f4..d7eb589 100644
--- a/app/templates/template-07/pages/NewsList.vue
+++ b/app/templates/template-07/pages/NewsList.vue
@@ -14,34 +14,25 @@
       </div>
 
       <template v-else>
-        <div v-if="articles.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <article
-            v-for="item in articles"
-            :key="item.id || item.articleId"
-            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
-          >
-            <NuxtLink :to="`/article/${item.id || item.articleId}`">
-              <div class="aspect-video bg-gray-100 flex items-center justify-center">
-                <img
-                  v-if="item.image || item.cover || item.photo"
-                  :src="fileUrl(item.image || item.cover || item.photo || '')"
-                  :alt="item.title"
-                  class="w-full h-full object-cover"
-                >
-                <span v-else class="text-gray-400">暂无图片</span>
-              </div>
-            </NuxtLink>
-            <div class="p-5">
-              <div class="text-xs text-gray-500 mb-2">
-                {{ formatDate(item.publishTime || item.createTime) }}
-                <span v-if="item.categoryName" class="ml-2 text-blue-600">{{ item.categoryName }}</span>
-              </div>
-              <h2 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-blue-600 transition-colors">
-                <NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
-              </h2>
-              <p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
-            </div>
-          </article>
+        <div v-if="articles.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 articles" :key="item.id || item.articleId">
+              <NuxtLink
+                :to="`/article/${item.id || item.articleId}`"
+                class="flex items-baseline gap-4 py-4 group"
+              >
+                <span class="shrink-0 text-xs text-gray-400 tabular-nums">
+                  {{ formatDate(item.publishTime || item.createTime) }}
+                </span>
+                <span class="flex-1 min-w-0 text-base text-gray-900 truncate group-hover:text-blue-600 transition-colors">
+                  {{ item.title }}
+                </span>
+                <span v-if="item.categoryName" class="shrink-0 text-xs text-blue-600">
+                  {{ item.categoryName }}
+                </span>
+              </NuxtLink>
+            </li>
+          </ul>
         </div>
 
         <!-- 空状态 -->
@@ -86,7 +77,6 @@ import type { Article, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
 import { collectDescendantNavIds } from '~/utils/nav-tree'
 
 const { allNavigations, fetchSiteInfo } = useSite()
-const { fileUrl } = useFileUrl()
 const route = useRoute()
 
 await fetchSiteInfo()