fix: 我的收藏列表与后端扁平字段对齐,修复 coverUrl 报错
Made-with: Cursor
This commit is contained in:
parent
e8da2ee3f8
commit
cc5a5fb4e3
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user