fix: 我的收藏列表与后端扁平字段对齐,修复 coverUrl 报错

Made-with: Cursor
This commit is contained in:
zhonghua 2026-04-08 17:16:13 +08:00
parent e8da2ee3f8
commit cc5a5fb4e3

View File

@ -17,27 +17,24 @@
<div v-else class="works-grid">
<div
v-for="item in list"
:key="item.id"
:key="item.favoriteId ?? item.workId"
class="work-card"
@click="$router.push(`/p/works/${item.work.id}`)"
@click="$router.push(`/p/works/${item.workId}`)"
>
<div class="card-cover">
<img v-if="item.work.coverUrl" :src="item.work.coverUrl" :alt="item.work.title" />
<img v-if="item.coverUrl" :src="item.coverUrl" :alt="item.title" />
<div v-else class="cover-placeholder">
<picture-outlined />
</div>
</div>
<div class="card-body">
<h3>{{ item.work.title }}</h3>
<div class="card-author">
<a-avatar :size="20" :src="item.work.creator?.avatar">
{{ item.work.creator?.nickname?.charAt(0) }}
</a-avatar>
<span>{{ item.work.creator?.nickname }}</span>
<h3>{{ item.title }}</h3>
<div v-if="item.favoriteTime" class="card-meta">
{{ formatFavoriteTime(item.favoriteTime) }}
</div>
<div class="card-stats">
<span><heart-outlined /> {{ item.work.likeCount || 0 }}</span>
<span><eye-outlined /> {{ item.work.viewCount || 0 }}</span>
<span><heart-outlined /> {{ item.likeCount ?? 0 }}</span>
<span><eye-outlined /> {{ item.viewCount ?? 0 }}</span>
</div>
</div>
</div>
@ -61,12 +58,30 @@ import { message } from 'ant-design-vue'
import { PictureOutlined, HeartOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { publicInteractionApi } from '@/api/public'
const list = ref<any[]>([])
/** 与后端 /public/mine/favorites 返回结构一致(扁平字段,无嵌套 work */
interface FavoriteListItem {
favoriteId: number
favoriteTime?: string
workId: number
title: string
coverUrl?: string | null
likeCount?: number
viewCount?: number
}
const list = ref<FavoriteListItem[]>([])
const loading = ref(true)
const page = ref(1)
const pageSize = 12
const total = ref(0)
/** 收藏时间展示 */
const formatFavoriteTime = (iso: string) => {
const d = new Date(iso)
if (Number.isNaN(d.getTime())) return ''
return `收藏于 ${d.toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`
}
const fetchList = async () => {
loading.value = true
try {
@ -123,9 +138,8 @@ $primary: #6366f1;
.card-body {
padding: 10px 12px;
h3 { font-size: 13px; font-weight: 600; color: #1e1b4b; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-author {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
span { font-size: 11px; color: #6b7280; }
.card-meta {
font-size: 11px; color: #9ca3af; margin-bottom: 6px;
}
.card-stats {
display: flex; gap: 12px;