合并JWL，WZY，TRM代码
Change-Id: Ifb4fcad3c06733e1e005e7d8d9403e3561010fb4
diff --git a/Merge/front/src/components/HomeFeed.jsx b/Merge/front/src/components/HomeFeed.jsx
new file mode 100644
index 0000000..39e0ca8
--- /dev/null
+++ b/Merge/front/src/components/HomeFeed.jsx
@@ -0,0 +1,90 @@
+// src/components/HomeFeed.jsx
+
+import React, { useState, useEffect } from 'react'
+import { ThumbsUp } from 'lucide-react'
+import { fetchPosts, fetchPost } from '../api/posts_wzy'
+import '../style/HomeFeed.css'
+
+const categories = [
+ '推荐','穿搭','美食','彩妆','影视',
+ '职场','情感','家居','游戏','旅行','健身'
+]
+
+export default function HomeFeed() {
+ const [activeCat, setActiveCat] = useState('推荐')
+ const [items, setItems] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ useEffect(() => {
+ 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)
+ } catch (e) {
+ setError(e.message)
+ } finally {
+ setLoading(false)
+ }
+ }
+ loadPosts()
+ }, [])
+
+ return (
+ <div className="home-feed">
+ {/* 顶部分类 */}
+ <nav className="feed-tabs">
+ {categories.map(cat => (
+ <button
+ key={cat}
+ className={cat === activeCat ? 'tab active' : 'tab'}
+ onClick={() => setActiveCat(cat)}
+ >
+ {cat}
+ </button>
+ ))}
+ </nav>
+
+ {/* 状态提示 */}
+ {loading ? (
+ <div className="loading">加载中…</div>
+ ) : error ? (
+ <div className="error">加载失败：{error}</div>
+ ) : (
+ /* 瀑布流卡片区 */
+ <div className="feed-grid">
+ {items.map(item => (
+ <div key={item.id} className="feed-card">
+ <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">
+ <img className="avatar" src={item.avatar} alt={item.author} />
+ <span className="username">{item.author}</span>
+ </div>
+ <div className="card-likes">
+ <ThumbsUp size={16} />
+ <span className="likes-count">{item.likes}</span>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ )
+}