Revert^2 "api忘改回来了"
ad73250cf9fd50bccc5897ac975e6163e6603e17
Change-Id: I4d81fc59bc9abe4994b4415e96d1e0aea1b5b769
diff --git a/Merge/front/src/components/UserProfile.jsx b/Merge/front/src/components/UserProfile.jsx
index 802c4b6..2e54fac 100644
--- a/Merge/front/src/components/UserProfile.jsx
+++ b/Merge/front/src/components/UserProfile.jsx
@@ -53,7 +53,10 @@
Collections,
ChevronLeft,
ChevronRight,
- Close
+ Close,
+ Bookmark,
+ Group,
+ People
} from '@mui/icons-material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Link, useNavigate } from 'react-router-dom';
@@ -66,7 +69,10 @@
followUser as followUserApi,
unfollowUser as unfollowUserApi,
getUserPosts,
- getUserInteractions
+ getUserInteractions,
+ getUserFollowers,
+ getFavorites,
+ getUserFollowing
} from '../api/api_ljc';
import { fetchPost } from '../api/posts_wzy';
@@ -119,6 +125,10 @@
const navigate = useNavigate();
const [activeTab, setActiveTab] = useState(0);
const [isEditing, setIsEditing] = useState(false);
+ const [favorites, setFavorites] = useState([]);
+ const [following, setFollowing] = useState([]);
+ const [followers, setFollowers] = useState([]);
+ const [follower, setFollower] = useState([]);
const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' });
const [anchorEl, setAnchorEl] = useState(null);
@@ -199,29 +209,7 @@
fetchInteractions();
- const handleFollowUser = async (followeeId) => {
- try {
- await followUserApi(followeeId);
- showSnackbar('关注成功');
-
- // 更新粉丝列表状态（将刚关注的用户标记为已关注）
- // setFollowers(prev => prev.map(user =>
- // user.id === followeeId ? { ...user, is_following: true } : user
- // ));
-
- // 更新当前用户关注数
- if (currentUser) {
- setCurrentUser(prev => ({
- ...prev,
- following_count: prev.following_count + 1
- }));
- }
-
- } catch (error) {
- console.error('关注操作失败:', error);
- showSnackbar('关注失败，请重试', 'error');
- }
- };
+
const fetchData = async () => {
try {
setLoading(true);
@@ -241,6 +229,22 @@
birthday: profileUserRes.data.birthday || '',
location: profileUserRes.data.location || ''
});
+
+ if (activeTab === 1) {
+ // 加载收藏数据
+ const favoritesRes = await getFavorites(userId);
+ setFavorites(favoritesRes.data);
+ } else if (activeTab === 2) {
+ // 加载关注列表
+ const followingRes = await getUserFollowing(userId);
+ setFollowing(followingRes.data);
+ console.log("following",followingRes.data)
+ } else if (activeTab === 3) {
+ // 加载粉丝列表
+ const followersRes = await getUserFollowers(userId);
+ //
+ setFollowers(followersRes.data.data);
+ }
// 获取用户帖子
const postsRes = await getUserPosts(userId);
@@ -283,7 +287,7 @@
};
fetchData();
- }, [userId]);
+ }, [activeTab,userId]);
// 根据标签页加载数据
useEffect(() => {
@@ -314,18 +318,40 @@
}
};
- const handleFollowUser = async (followeeId) => {
+ const handleFollowUser = async (userId,followeeId) => {
try {
- await followUserApi(followeeId);
+ await followUserApi(userId,followeeId);
showSnackbar('关注成功');
- // 更新当前用户关注数
- if (currentUser) {
- setCurrentUser(prev => ({
- ...prev,
- following_count: prev.following_count + 1
- }));
- }
+ // 更新粉丝列表中的关注状态
+ setFollowers(prevFollowers =>
+ prevFollowers.map(follower =>
+ follower.id === followeeId
+ ? { ...follower, is_following: true }
+ : follower
+ )
+ );
+
+ // 更新当前用户的关注数
+ if (currentUser) {
+ setCurrentUser(prev => ({
+ ...prev,
+ following_count: prev.following_count + 1
+ }));
+ }
+
+ // 如果被关注的用户是当前用户的粉丝，更新粉丝数
+ setFollowers(prevFollowers =>
+ prevFollowers.map(follower =>
+ follower.id === followeeId
+ ? {
+ ...follower,
+ followers_count: follower.followers_count + 1
+ }
+ : follower
+ )
+ );
+
} catch (error) {
console.error('关注操作失败:', error);
@@ -333,13 +359,27 @@
}
};
- const handleUnfollow = async (followeeId, e) => {
- e.stopPropagation(); // 阻止事件冒泡
+ const handleUnfollow = async (userId,followeeId, e) => {
+ // e.stopPropagation(); // 阻止事件冒泡
try {
- await unfollowUserApi(followeeId);
+ await unfollowUserApi(userId,followeeId);
showSnackbar('已取消关注');
+ // 更新关注列表 - 移除取消关注的用户
+ setFollowing(prevFollowing =>
+ prevFollowing.filter(user => user.id !== followeeId)
+ );
+
+ // 更新粉丝列表 - 更新关注状态
+ setFollowers(prevFollowers =>
+ prevFollowers.map(follower =>
+ follower.id === followeeId
+ ? { ...follower, is_following: false }
+ : follower
+ )
+ );
+
// 更新当前用户关注数
if (currentUser) {
setCurrentUser(prev => ({
@@ -617,52 +657,32 @@
}}
>
<Tab icon={isMobile ? <Collections /> : null} label="笔记" />
+ <Tab icon={isMobile ? <Bookmark /> : null} label="收藏" />
+ <Tab icon={isMobile ? <Group /> : null} label="关注" />
+ <Tab icon={isMobile ? <People /> : null} label="粉丝" />
</Tabs>
</Box>
{/* 内容区域 */}
<Box sx={{ mt: 3 }}>
- {/* 只保留笔记标签页 */}
- <Grid container spacing={3}>
- {tabLoading ? (
- <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
- <CircularProgress />
- </Grid>
- ) : allPosts.length === 0 ? (
- <Grid item xs={12}>
- <Box sx={{
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- py: 8,
- textAlign: 'center'
- }}>
- <Collections sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
- <Typography variant="h6" sx={{ mb: 1 }}>
- 还没有发布笔记
- </Typography>
- <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
- {isOwnProfile ? '分享你的生活点滴吧～' : '该用户还没有发布任何笔记'}
- </Typography>
- {isOwnProfile && (
- <Button variant="contained" color="primary">
- 发布第一篇笔记
- </Button>
- )}
- </Box>
- </Grid>
- ) : (
- // 显示当前页的帖子
- posts.map((post, index) => (
- <Grid item xs={12} sm={6} lg={3} key={post.id}>
- <Card elevation={0} sx={{
- bgcolor: 'white',
- borderRadius: 3,
- height: '100%',
- display: 'flex',
- flexDirection: 'column'
- }}>
- {/* 只有当帖子有 media_urls 时才显示图片 */}
+
+ {activeTab === 0 && (
+ <Grid container spacing={3}>
+ {tabLoading ? (
+ <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+ <CircularProgress />
+ </Grid>
+ ) : posts.length > 0 ? (
+ posts.map((post, index) => (
+ <Grid item xs={12} sm={6} lg={3} key={post.id}>
+ <Card elevation={0} sx={{
+ bgcolor: 'white',
+ borderRadius: 3,
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column'
+ }}>
+ {/* 只有当帖子有 media_urls 时才显示图片 */}
{post.media_urls && post.media_urls.length > 0 && (
<CardMedia
component="img"
@@ -671,63 +691,322 @@
alt={post.title}
/>
)}
- <CardContent sx={{ flexGrow: 1 }}>
- <Typography gutterBottom variant="h6" component="div">
- {post.title}
- </Typography>
- <Typography variant="body2" color="text.secondary">
- {post.content ? post.content.substring(0, 60) + '...' : '暂无内容'}
- </Typography>
- </CardContent>
- <CardActions sx={{ justifyContent: 'space-between', px: 2, pb: 2 }}>
- <Box>
- <IconButton aria-label="add to favorites">
- <Favorite />
- <Typography variant="body2" sx={{ ml: 1 }}>
- {post.heat || Math.floor(Math.random() * 1000) + 1000}
- </Typography>
- </IconButton>
- <IconButton aria-label="share">
- <Share />
- </IconButton>
- </Box>
- <Chip
- label={post.type === 'image' ? '图文' : post.type === 'video' ? '视频' : '文档'}
- size="small"
- color="primary"
- variant="outlined"
- />
- </CardActions>
- </Card>
+ <CardContent sx={{ flexGrow: 1 }}>
+ <Typography gutterBottom variant="h6" component="div">
+ {post.title}
+ </Typography>
+ <Typography variant="body2" color="text.secondary">
+ {post.content.substring(0, 60)}...
+ </Typography>
+ </CardContent>
+ <CardActions sx={{ justifyContent: 'space-between', px: 2, pb: 2 }}>
+ <Box>
+ <IconButton aria-label="add to favorites">
+ <Favorite />
+ <Typography variant="body2" sx={{ ml: 1 }}>
+ {post.heat || Math.floor(Math.random() * 1000) + 1000}
+ </Typography>
+ </IconButton>
+ <IconButton aria-label="share">
+ <Share />
+ </IconButton>
+ </Box>
+ <Chip
+ label={post.type === 'image' ? '图文' : post.type === 'video' ? '视频' : '文档'}
+ size="small"
+ color="primary"
+ variant="outlined"
+ />
+ </CardActions>
+ </Card>
+ </Grid>
+ ))
+ ) : (
+ <Grid item xs={12}>
+ <Box sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ py: 8,
+ textAlign: 'center'
+ }}>
+ <Collections sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+ <Typography variant="h6" sx={{ mb: 1 }}>
+ 还没有发布笔记
+ </Typography>
+ <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
+ {isOwnProfile ? '分享你的生活点滴吧～' : '该用户还没有发布任何笔记'}
+ </Typography>
+ {isOwnProfile && (
+ <Button variant="contained" color="primary">
+ 发布第一篇笔记
+ </Button>
+ )}
+ </Box>
</Grid>
- ))
- )}
-
- {/* 分页组件 */}
- {allPosts.length > postsPerPage && (
- <Grid item xs={12}>
- <Stack spacing={2} alignItems="center" sx={{ mt: 4 }}>
- <Typography variant="body2" color="textSecondary">
- 共 {allPosts.length} 篇笔记，第 {currentPage} 页，共 {totalPages} 页
- </Typography>
- <Pagination
- count={totalPages}
- page={currentPage}
- onChange={(event, page) => handlePageChange(page)}
- color="primary"
- size={isMobile ? "small" : "medium"}
- showFirstButton
- showLastButton
- sx={{
- '& .MuiPaginationItem-root': {
- borderRadius: 2,
+ )}
+
+ {posts.length > 0 && (
+ <Grid item xs={12}>
+ <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+ <Button
+ variant="outlined"
+ sx={{
+ borderRadius: 20,
+ px: 4,
+ display: 'flex',
+ alignItems: 'center'
+ }}
+ >
+ <ChevronLeft sx={{ mr: 1 }} />
+ 上一页
+ <ChevronRight sx={{ ml: 2 }} />
+ </Button>
+ </Box>
+ </Grid>
+ )}
+ </Grid>
+ )}
+
+ {activeTab === 1 && (
+ <Grid container spacing={3}>
+ {tabLoading ? (
+ <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+ <CircularProgress />
+ </Grid>
+ ) : favorites.length > 0 ? (
+ favorites.map((favorite) => (
+ <Grid item xs={12} sm={6} md={4} lg={3} key={favorite.id}>
+ <Card elevation={0} sx={{
+ bgcolor: 'white',
+ borderRadius: 3,
+ transition: 'transform 0.3s, box-shadow 0.3s',
+ '&:hover': {
+ transform: 'translateY(-5px)',
+ boxShadow: 3
}
- }}
- />
- </Stack>
- </Grid>
- )}
- </Grid>
+ }}>
+ <Box sx={{
+ height: 160,
+ position: 'relative',
+ borderTopLeftRadius: 16,
+ borderTopRightRadius: 16,
+ overflow: 'hidden'
+ }}>
+ <CardMedia
+ component="img"
+ height="160"
+ image={`https://source.unsplash.com/random/400x300?${favorite.id}`}
+ alt={favorite.title}
+ />
+ <Box sx={{
+ position: 'absolute',
+ top: 8,
+ right: 8,
+ bgcolor: 'rgba(0,0,0,0.6)',
+ color: 'white',
+ px: 1,
+ py: 0.5,
+ borderRadius: 4,
+ fontSize: 12
+ }}>
+ {favorite.type === 'image' ? '图文' : favorite.type === 'video' ? '视频' : '文档'}
+ </Box>
+ </Box>
+ <CardContent>
+ <Typography gutterBottom variant="subtitle1" fontWeight="medium">
+ {favorite.title}
+ </Typography>
+ <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <Favorite fontSize="small" color="error" />
+ <Typography variant="body2" sx={{ ml: 0.5 }}>
+ {favorite.heat || Math.floor(Math.random() * 1000) + 1000}
+ </Typography>
+ </Box>
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <Bookmark fontSize="small" color="primary" />
+ <Typography variant="body2" sx={{ ml: 0.5 }}>
+ {Math.floor(Math.random() * 500) + 100}
+ </Typography>
+ </Box>
+ </Box>
+ </CardContent>
+ </Card>
+ </Grid>
+ ))
+ ) : (
+ <Grid item xs={12}>
+ <Box sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ py: 8,
+ textAlign: 'center'
+ }}>
+ <Bookmark sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+ <Typography variant="h6" sx={{ mb: 1 }}>
+ {isOwnProfile ? '你还没有收藏内容' : '该用户没有收藏内容'}
+ </Typography>
+ <Typography variant="body1" color="textSecondary">
+ {isOwnProfile ? '看到喜欢的笔记可以收藏起来哦～' : ''}
+ </Typography>
+ </Box>
+ </Grid>
+ )}
+ </Grid>
+ )}
+
+ {activeTab === 2 && (
+ <Grid container spacing={3}>
+ {tabLoading ? (
+ <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+ <CircularProgress />
+ </Grid>
+ ) : following.length > 0 ? (
+ following.map((follow) => (
+ <Grid item xs={12} sm={6} md={4} key={follow.id}>
+ <Paper
+ elevation={0}
+ sx={{
+ bgcolor: 'white',
+ borderRadius: 3,
+ p: 2,
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+ '&:hover': {
+ boxShadow: 1
+ }
+ }}
+ onClick={() => navigateToUserProfile(follow.id)}
+ >
+ <Avatar
+ src={follow.avatar || 'https://randomuser.me/api/portraits/men/22.jpg'}
+ sx={{ width: 60, height: 60 }}
+ />
+ <Box sx={{ ml: 2, flexGrow: 1 }}>
+ <Typography fontWeight="medium">{follow.username}</Typography>
+ <Typography variant="body2" color="textSecondary">
+ {follow.followers_count || Math.floor(Math.random() * 100) + 10} 粉丝
+ </Typography>
+ </Box>
+ {isOwnProfile && (
+ <Button
+ variant="outlined"
+ size="small"
+ sx={{ borderRadius: 20 }}
+ onClick={(e) => {
+ e.stopPropagation();
+ handleUnfollow(userId,follow.id);
+ }}
+ >
+ 已关注
+ </Button>
+ )}
+ </Paper>
+ </Grid>
+ ))
+ ) : (
+ <Grid item xs={12}>
+ <Box sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ py: 8,
+ textAlign: 'center'
+ }}>
+ <Group sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+ <Typography variant="h6" sx={{ mb: 1 }}>
+ {isOwnProfile ? '你还没有关注任何人' : '该用户还没有关注任何人'}
+ </Typography>
+ <Typography variant="body1" color="textSecondary">
+ {isOwnProfile ? '发现有趣的人并关注他们吧～' : ''}
+ </Typography>
+ </Box>
+ </Grid>
+ )}
+ </Grid>
+ )}
+ {activeTab === 3 && (
+ <Grid container spacing={3}>
+ {tabLoading ? (
+ <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+ <CircularProgress />
+ </Grid>
+ ) : followers.length > 0 ? (
+ followers.map((follower) => (
+ <Grid item xs={12} sm={6} md={4} key={follower.id}>
+ <Paper
+ elevation={0}
+ sx={{
+ bgcolor: 'white',
+ borderRadius: 3,
+ p: 2,
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+ '&:hover': {
+ boxShadow: 1
+ }
+ }}
+ onClick={() => navigateToUserProfile(follower.id)}
+ >
+ <Avatar
+ src={follower.avatar || 'https://randomuser.me/api/portraits/men/22.jpg'}
+ sx={{ width: 60, height: 60 }}
+ />
+ <Box sx={{ ml: 2, flexGrow: 1 }}>
+ <Typography fontWeight="medium">{follower.username}</Typography>
+ <Typography variant="body2" color="textSecondary">
+ {follower.bio || '暂无简介'}
+ </Typography>
+ <Typography variant="body2" color="textSecondary">
+ {follower.followers_count} 粉丝
+ </Typography>
+ </Box>
+ {currentUser && currentUser.id !== follower.id && (
+ <Button
+ variant={follower.is_following ? "outlined" : "contained"}
+ color="primary"
+ size="small"
+ sx={{ borderRadius: 20 }}
+ onClick={(e) => {
+ e.stopPropagation();
+ if (follower.is_following) {
+ handleUnfollow(userId,follower.id);
+ } else {
+ handleFollowUser(userId,follower.id);
+ }
+ }}
+ >
+ {follower.is_following ? '已关注' : '关注'}
+ </Button>
+ )}
+ </Paper>
+ </Grid>
+ ))
+ ) : (
+ <Grid item xs={12}>
+ <Box sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ py: 8,
+ textAlign: 'center'
+ }}>
+ <People sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+ <Typography variant="h6" sx={{ mb: 1 }}>
+ {isOwnProfile ? '你还没有粉丝' : '该用户还没有粉丝'}
+ </Typography>
+ <Typography variant="body1" color="textSecondary">
+ {isOwnProfile ? '分享更多内容来吸引粉丝吧～' : ''}
+ </Typography>
+ </Box>
+ </Grid>
+ )}
+ </Grid>
+ )}
</Box>
</Container>