11
Change-Id: Id6671597b5f501cc2c20a5c996c52c389d46938a
diff --git a/Merge/front/src/components/HomeFeed.jsx b/Merge/front/src/components/HomeFeed.jsx
index 82e027a..0f3c0fe 100644
--- a/Merge/front/src/components/HomeFeed.jsx
+++ b/Merge/front/src/components/HomeFeed.jsx
@@ -8,6 +8,7 @@
import { getUserInfo } from '../utils/auth'
import { deepRecommend } from '../api/recommend_rhj'
import postsAPI from '../api/posts_api'
+import MediaPreview from './MediaPreview'
import '../style/HomeFeed.css'
const categories = [
@@ -59,9 +60,10 @@
title: d.title,
author: `作者 ${d.user_id}`,
avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '',
+ media: d.media_urls?.[0] || '', // 改为 media,支持图片和视频
likes: d.heat,
- content: d.content || ''
+ content: d.content || '',
+ mediaUrls: d.media_urls || [] // 保存所有媒体URL
}
} catch {
return {
@@ -69,9 +71,10 @@
title: item.title,
author: item.author || '佚名',
avatar: `https://i.pravatar.cc/40?img=${item.id}`,
- img: item.img || '',
+ media: item.img || '',
likes: item.heat || 0,
- content: item.content || ''
+ content: item.content || '',
+ mediaUrls: []
}
}
})
@@ -101,9 +104,10 @@
title: d.title,
author: `作者 ${d.user_id}`,
avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '',
+ media: d.media_urls?.[0] || '', // 改为 media,支持图片和视频
likes: d.heat,
- content: d.content || ''
+ content: d.content || '',
+ mediaUrls: d.media_urls || [] // 保存所有媒体URL
}
} catch {
// 拉详情失败时兜底
@@ -112,9 +116,10 @@
title: item.title,
author: item.author || '佚名',
avatar: `https://i.pravatar.cc/40?img=${item.id}`,
- img: item.img || '',
+ media: item.img || '',
likes: item.heat || 0,
- content: item.content || ''
+ content: item.content || '',
+ mediaUrls: []
}
}
})
@@ -144,9 +149,10 @@
title: d.title,
author: `作者 ${d.user_id}`,
avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '',
+ media: d.media_urls?.[0] || '', // 改为 media,支持图片和视频
likes: d.heat,
- content: d.content || ''
+ content: d.content || '',
+ mediaUrls: d.media_urls || [] // 保存所有媒体URL
}
} catch {
// 拉详情失败时兜底
@@ -155,9 +161,10 @@
title: item.title,
author: item.author || '佚名',
avatar: `https://i.pravatar.cc/40?img=${item.id}`,
- img: item.img || '',
+ media: item.img || '',
likes: item.heat || 0,
- content: item.content || ''
+ content: item.content || '',
+ mediaUrls: []
}
}
})
@@ -187,9 +194,10 @@
title: d.title,
author: `作者 ${d.user_id}`,
avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '',
+ media: d.media_urls?.[0] || '', // 改为 media,支持图片和视频
likes: d.heat,
- content: d.content || ''
+ content: d.content || '',
+ mediaUrls: d.media_urls || [] // 保存所有媒体URL
}
} catch {
return {
@@ -197,9 +205,10 @@
title: item.title,
author: item.author || '佚名',
avatar: `https://i.pravatar.cc/40?img=${item.id}`,
- img: item.img || '',
+ media: item.img || '',
likes: item.heat || 0,
- content: item.content || ''
+ content: item.content || '',
+ mediaUrls: []
}
}
})
@@ -260,9 +269,11 @@
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
+ authorId: d.user_id,
+ avatar: `http://192.168.5.200:8080/static/profile.webp`,
+ media: d.media_urls?.[0] || '', // 改为 media,支持图片和视频
+ likes: d.heat,
+ mediaUrls: d.media_urls || [] // 保存所有媒体URL
}
})
)
@@ -304,6 +315,8 @@
}
}
+ const [previewImg, setPreviewImg] = useState(null)
+
const handlePostClick = (postId) => {
navigate(`/post/${postId}`)
}
@@ -431,7 +444,20 @@
) : (
items.map(item => (
<div key={item.id} className="feed-card" onClick={() => handlePostClick(item.id)}>
- {item.img && <img className="card-img" src={item.img} alt={item.title} />}
+ {item.media && (
+ <MediaPreview
+ url={item.media}
+ alt={item.title}
+ className="card-img"
+ onClick={(url) => {
+ // 对于图片,显示预览
+ if (!url.toLowerCase().includes('video') && !url.includes('.mp4') && !url.includes('.webm')) {
+ setPreviewImg(url)
+ }
+ }}
+ style={{ cursor: 'pointer' }}
+ />
+ )}
<h3 className="card-title">{item.title}</h3>
{item.content && <div className="card-content">{item.content.slice(0, 60) || ''}</div>}
<div className="card-footer">
@@ -449,6 +475,37 @@
)}
</div>
)}
+
+ {/* 图片预览弹窗 */}
+ {previewImg && (
+ <div
+ className="img-preview-mask"
+ style={{
+ position: 'fixed',
+ zIndex: 9999,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ background: 'rgba(0,0,0,0.7)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }}
+ onClick={() => setPreviewImg(null)}
+ >
+ <img
+ src={previewImg}
+ alt="大图预览"
+ style={{
+ maxWidth: '90vw',
+ maxHeight: '90vh',
+ borderRadius: 12,
+ boxShadow: '0 4px 24px #0008'
+ }}
+ />
+ </div>
+ )}
</div>
)
}