合并代码
Change-Id: Id5e0dc4f7b448b4ba615243bf1dfa964907f5d68
diff --git a/Merge/front/src/components/FavoritePosts.jsx b/Merge/front/src/components/FavoritePosts.jsx
new file mode 100644
index 0000000..4afe125
--- /dev/null
+++ b/Merge/front/src/components/FavoritePosts.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { getFavorites } from '../api/api_ljc';
+import { FaHeart } from 'react-icons/fa';
+
+const FavoritePosts = ({ userId }) => {
+ const [favorites, setFavorites] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchFavorites = async () => {
+ try {
+ setLoading(true);
+ const response = await getFavorites(userId);
+ setFavorites(response.data);
+ } catch (error) {
+ console.error('Failed to fetch favorites:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (userId) {
+ fetchFavorites();
+ }
+ }, [userId]);
+
+ if (loading) {
+ return (
+ <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+ {[1, 2, 3, 4, 5, 6].map(item => (
+ <div key={item} className="bg-gray-100 rounded-xl aspect-square animate-pulse"></div>
+ ))}
+ </div>
+ );
+ }
+
+ if (favorites.length === 0) {
+ return (
+ <div className="text-center py-16">
+ <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-500 mb-4">
+ <FaHeart className="text-2xl" />
+ </div>
+ <h3 className="text-lg font-medium text-gray-900">暂无收藏内容</h3>
+ <p className="mt-1 text-gray-500">你还没有收藏任何笔记</p>
+ </div>
+ );
+ }
+
+ // 模拟瀑布流布局数据
+ const waterfallData = favorites.map(post => ({
+ ...post,
+ height: Math.floor(Math.random() * 100) + 200 // 随机高度
+ }));
+
+ return (
+ <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+ {waterfallData.map(post => (
+ <div
+ key={post.id}
+ className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
+ >
+ <div
+ className="relative bg-gray-200"
+ style={{ height: `${post.height}px` }}
+ >
+ {/* 占位图片 */}
+ <div className="absolute inset-0 bg-gradient-to-br from-pink-100 to-orange-100"></div>
+
+ {/* 类型标签 */}
+ <div className="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
+ {post.type === 'image' ? '图文' :
+ post.type === 'video' ? '视频' : '文档'}
+ </div>
+
+ {/* 收藏标记 */}
+ <div className="absolute bottom-2 right-2 bg-red-500 rounded-full p-1">
+ <FaHeart className="text-white text-xs" />
+ </div>
+ </div>
+
+ <div className="p-3">
+ <h3 className="font-medium line-clamp-2">{post.title}</h3>
+ <div className="flex items-center mt-2 text-xs text-gray-500">
+ <span>❤️ 2.5k</span>
+ <span className="mx-2">•</span>
+ <span>⭐ 156</span>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+};
+
+export default FavoritePosts;
\ No newline at end of file