style: 文章/案例列表改为纯文字竖向列表
去掉封面图卡片网格,改为单列分隔线列表: - 文章行:日期 | 标题 | 栏目 - 案例行:日期 | 标题,下方摘要与客户 顺带清理去掉图片后已无引用的 fileUrl 解构, 并为案例列表补上空状态(此前空数据渲染为空白)。
This commit is contained in:
@@ -11,33 +11,34 @@
|
|||||||
</div>
|
</div>
|
||||||
<SiteError v-else-if="error" message="获取案例列表失败" />
|
<SiteError v-else-if="error" message="获取案例列表失败" />
|
||||||
|
|
||||||
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div v-else-if="cases.length > 0" class="max-w-[1200px] mx-auto bg-white rounded-xl shadow-sm px-6 py-2">
|
||||||
<article
|
<ul class="divide-y divide-gray-100">
|
||||||
v-for="item in cases"
|
<li v-for="item in cases" :key="item.id">
|
||||||
:key="item.id"
|
<NuxtLink :to="`/case/${item.id}`" class="block py-4 group">
|
||||||
class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
|
<div class="flex items-baseline gap-4">
|
||||||
>
|
<span class="shrink-0 text-xs text-gray-400 tabular-nums">
|
||||||
<NuxtLink :to="`/case/${item.id}`" class="block">
|
{{ formatDate(item.projectTime || item.createTime) }}
|
||||||
<div class="aspect-[4/3] bg-gray-100 overflow-hidden">
|
</span>
|
||||||
<img
|
<h2 class="flex-1 min-w-0 text-base text-gray-900 truncate group-hover:text-blue-600 transition-colors">
|
||||||
v-if="item.cover"
|
{{ item.title }}
|
||||||
:src="fileUrl(item.cover)"
|
</h2>
|
||||||
: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>
|
||||||
</div>
|
<div class="mt-1 pl-[5.5rem]">
|
||||||
</NuxtLink>
|
<p v-if="stripHtml(item.summary)" class="text-sm text-gray-500 line-clamp-1">
|
||||||
</article>
|
{{ 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>
|
</div>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
@@ -59,13 +60,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import dayjs from 'dayjs'
|
||||||
import type { CaseItem, PageResult } from '~/types'
|
import type { CaseItem, PageResult } from '~/types'
|
||||||
import { collectDescendantNavIds } from '~/utils/nav-tree'
|
import { collectDescendantNavIds } from '~/utils/nav-tree'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 模板 1 - 案例列表页
|
* 模板 1 - 案例列表页
|
||||||
*/
|
*/
|
||||||
const { fileUrl } = useFileUrl()
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const { allNavigations, fetchSiteInfo } = useSite()
|
const { allNavigations, fetchSiteInfo } = useSite()
|
||||||
|
|
||||||
@@ -127,4 +128,8 @@ const pageTitle = computed(() => {
|
|||||||
return find(navs)?.title || '案例展示'
|
return find(navs)?.title || '案例展示'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function formatDate(date?: string) {
|
||||||
|
if (!date) return ''
|
||||||
|
return dayjs(date).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -14,34 +14,25 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div v-if="articles.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div v-if="articles.length > 0" class="max-w-[1200px] mx-auto bg-white rounded-xl shadow-sm px-6 py-2">
|
||||||
<article
|
<ul class="divide-y divide-gray-100">
|
||||||
v-for="item in articles"
|
<li v-for="item in articles" :key="item.id || item.articleId">
|
||||||
:key="item.id || item.articleId"
|
<NuxtLink
|
||||||
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
|
:to="`/article/${item.id || item.articleId}`"
|
||||||
>
|
class="flex items-baseline gap-4 py-4 group"
|
||||||
<NuxtLink :to="`/article/${item.id || item.articleId}`">
|
>
|
||||||
<div class="aspect-video bg-gray-100 flex items-center justify-center">
|
<span class="shrink-0 text-xs text-gray-400 tabular-nums">
|
||||||
<img
|
{{ formatDate(item.publishTime || item.createTime) }}
|
||||||
v-if="item.image || item.cover || item.photo"
|
</span>
|
||||||
:src="fileUrl(item.image || item.cover || item.photo || '')"
|
<span class="flex-1 min-w-0 text-base text-gray-900 truncate group-hover:text-blue-600 transition-colors">
|
||||||
:alt="item.title"
|
{{ item.title }}
|
||||||
class="w-full h-full object-cover"
|
</span>
|
||||||
>
|
<span v-if="item.categoryName" class="shrink-0 text-xs text-blue-600">
|
||||||
<span v-else class="text-gray-400">暂无图片</span>
|
{{ item.categoryName }}
|
||||||
</div>
|
</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div class="p-5">
|
</li>
|
||||||
<div class="text-xs text-gray-500 mb-2">
|
</ul>
|
||||||
{{ 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>
|
</div>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
@@ -86,7 +77,6 @@ import type { Article, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
|
|||||||
import { collectDescendantNavIds } from '~/utils/nav-tree'
|
import { collectDescendantNavIds } from '~/utils/nav-tree'
|
||||||
|
|
||||||
const { allNavigations, fetchSiteInfo } = useSite()
|
const { allNavigations, fetchSiteInfo } = useSite()
|
||||||
const { fileUrl } = useFileUrl()
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
await fetchSiteInfo()
|
await fetchSiteInfo()
|
||||||
|
|||||||
Reference in New Issue
Block a user