style: 文章/案例列表改为纯文字竖向列表

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

顺带清理去掉图片后已无引用的 fileUrl 解构,
并为案例列表补上空状态(此前空数据渲染为空白)。
This commit is contained in:
2026-09-29 02:49:56 +08:00
parent daeb9aed9c
commit 09dfded0c8
2 changed files with 51 additions and 56 deletions
+19 -29
View File
@@ -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()