fix-user-collections
Change-Id: I51af59fc5866095a4d8ef248be7a28b27d9f4f64
diff --git a/src/pages/UserCenter/UserCollect.jsx b/src/pages/UserCenter/UserCollect.jsx
index e69de29..59d9c9a 100644
--- a/src/pages/UserCenter/UserCollect.jsx
+++ b/src/pages/UserCenter/UserCollect.jsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Header from '../../components/Header';
+import UserNav from './UserNav';
+import { useUser } from '../../context/UserContext';
+import { useLocation } from 'wouter'; // ✅ 引入 wouter 的 useLocation
+import './UserCollect.css';
+
+const UserCollect = () => {
+ const { user, loading: userLoading } = useUser();
+ const [collections, setCollections] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [, navigate] = useLocation(); // ✅ 获取跳转函数
+
+ useEffect(() => {
+ if (userLoading) return;
+
+ if (!user || !user.userId) {
+ setError('未登录或用户信息获取失败');
+ setLoading(false);
+ return;
+ }
+
+ const fetchCollections = async () => {
+ try {
+ const response = await axios.get(`/echo/forum/posts/${user.userId}/getAllcollections`);
+ setCollections(response.data || []);
+ setError(null);
+ } catch (error) {
+ console.error('获取收藏失败:', error);
+ setError('获取收藏失败，请稍后再试');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchCollections();
+ }, [user, userLoading]);
+
+ return (
+ <div className="user-profile-container">
+ <Header />
+ <div className="user-center">
+ <div className="user-nav-container">
+ <UserNav />
+ </div>
+
+ <div className="common-card">
+ <div className="right-content">
+ <h2 style={{ marginBottom: '1rem' }}>我的收藏</h2>
+ {userLoading || loading ? (
+ <p>加载中...</p>
+ ) : error ? (
+ <p className="error">{error}</p>
+ ) : collections.length === 0 ? (
+ <p>暂无收藏内容。</p>
+ ) : (
+ collections.map((post) => (
+ <div
+ key={post.postNo}
+ className="post-item"
+ onClick={() => navigate(`/forum/post/${post.postNo}`)} // ✅ 跳转帖子详情页
+ style={{ cursor: 'pointer' }}
+ >
+ <h3>{post.title || '无标题'}</h3>
+ <p>{post.postContent?.slice(0, 100) || '暂无内容'}...</p>
+ <p style={{ fontSize: '12px', color: '#888' }}>
+ 作者：{post.username || '未知'} | 发布时间未知
+ </p>
+ <hr />
+ </div>
+ ))
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default UserCollect;