Merge remote-tracking branch 'refs/remotes/origin/master'
Change-Id: I599f5959d217e7cb51cf76233b2409b34d49abca
diff --git a/WZY/xhs_front/src/components/HomeFeed.jsx b/WZY/xhs_front/src/components/HomeFeed.jsx
index d906e33..382c942 100644
--- a/WZY/xhs_front/src/components/HomeFeed.jsx
+++ b/WZY/xhs_front/src/components/HomeFeed.jsx
@@ -20,24 +20,50 @@
async function loadPosts() {
try {
const list = await fetchPosts() // [{id, title, heat, created_at}, …]
- // 为了拿到 media_urls 和 user_id，这里再拉详情
- const detailed = await Promise.all(
- list.map(async p => {
- const d = await fetchPost(p.id)
- return {
- id: d.id,
- title: d.title,
- author: `作者 ${d.user_id}`,
- avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '', // 用第一张媒体作为封面
- likes: d.heat
- }
- })
- )
- setItems(detailed)
+
+ // 第一轮：立即展示基础信息
+ const basicItems = list.map(p => ({
+ id: p.id,
+ title: p.title,
+ author: `作者 ${p.user_id || 'unknown'}`,
+ avatar: `https://i.pravatar.cc/40?img=${p.user_id || 1}`,
+ img: '', // 暂时为空
+ likes: p.heat || 0,
+ loading: true // 标记图片正在加载
+ }))
+
+ setItems(basicItems)
+ setLoading(false) // 基础内容已加载完成
+
+ // 第二轮：异步加载详情和图片
+ basicItems.forEach(async (item, index) => {
+ try {
+ const detail = await fetchPost(item.id)
+ setItems(prevItems =>
+ prevItems.map(prevItem =>
+ prevItem.id === item.id
+ ? {
+ ...prevItem,
+ img: detail.media_urls?.[0] || '',
+ loading: false
+ }
+ : prevItem
+ )
+ )
+ } catch (e) {
+ // 单个图片加载失败不影响其他
+ setItems(prevItems =>
+ prevItems.map(prevItem =>
+ prevItem.id === item.id
+ ? { ...prevItem, loading: false }
+ : prevItem
+ )
+ )
+ }
+ })
+
} catch (e) {
setError(e.message)
- } finally {
setLoading(false)
}
}
@@ -69,7 +95,11 @@
<div className="feed-grid">
{items.map(item => (
<div key={item.id} className="feed-card">
- <img className="card-img" src={item.img} alt={item.title} />
+ {item.loading ? (
+ <div className="card-img-placeholder">图片加载中...</div>
+ ) : (
+ <img className="card-img" src={item.img} alt={item.title} />
+ )}
<h3 className="card-title">{item.title}</h3>
<div className="card-footer">
<div className="card-author">