修正帖子列表、帖子详情的头像与名字显示问题
Change-Id: Ibcb01510f9474ea43c8739f3013c3aaa32e32640
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index 009ba6c..cc5eb96 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -3,6 +3,8 @@
import { ArrowLeft, ThumbsUp, MessageCircle, Share2, BookmarkPlus, Heart, Eye } from 'lucide-react'
import { searchAPI } from '../api/search_jwlll'
import { getUserInfo } from '../utils/auth'
+import FollowButton from './FollowButton'
+import postsAPI from '../api/posts_api'
import '../style/PostDetail.css'
export default function PostDetail() {
@@ -17,6 +19,8 @@
const [comments, setComments] = useState([])
const [newComment, setNewComment] = useState('')
const [showComments, setShowComments] = useState(false)
+ const [isFollowing, setIsFollowing] = useState(false)
+ const [authorInfo, setAuthorInfo] = useState(null)
// 获取当前用户ID
const getCurrentUserId = () => {
const userInfo = getUserInfo()
@@ -47,6 +51,33 @@
}
}, [id])
+ // 检查当前用户是否已关注发帖人
+ useEffect(() => {
+ if (post && post.user_id) {
+ // 这里假设有API postsAPI.getUserFollowing
+ const checkFollow = async () => {
+ try {
+ const userInfo = getUserInfo()
+ if (!userInfo?.id) return
+ const res = await postsAPI.getUserFollowing(userInfo.id)
+ if (Array.isArray(res)) {
+ setIsFollowing(res.some(u => u.id === post.user_id))
+ } else if (Array.isArray(res.following)) {
+ setIsFollowing(res.following.some(u => u.id === post.user_id))
+ }
+ } catch {}
+ }
+ checkFollow()
+ }
+ }, [post])
+
+ // 拉取发帖人信息
+ useEffect(() => {
+ if (post && post.user_id) {
+ postsAPI.getUser(post.user_id).then(res => setAuthorInfo(res || {})).catch(() => setAuthorInfo({}))
+ }
+ }, [post])
+
useEffect(() => {
fetchPostDetail()
fetchComments()
@@ -108,6 +139,24 @@
}
}
+ // 关注后刷新关注状态
+ const handleFollowChange = async (followed) => {
+ setIsFollowing(followed)
+ // 关注/取关后重新拉取一次关注状态，保证和数据库同步
+ if (post && post.user_id) {
+ try {
+ const userInfo = getUserInfo()
+ if (!userInfo?.id) return
+ const res = await postsAPI.getUserFollowing(userInfo.id)
+ if (Array.isArray(res)) {
+ setIsFollowing(res.some(u => u.id === post.user_id))
+ } else if (Array.isArray(res.following)) {
+ setIsFollowing(res.following.some(u => u.id === post.user_id))
+ }
+ } catch {}
+ }
+ }
+
if (loading) {
return (
<div className="post-detail">
@@ -119,6 +168,7 @@
)
}
+ // 优化错误和不存在的判断逻辑
if (error) {
return (
<div className="post-detail">
@@ -134,11 +184,12 @@
)
}
- if (!post) {
+ // 只有明确为 null 或 undefined 时才显示不存在
+ if (post === null || post === undefined) {
return (
<div className="post-detail">
<div className="error-container">
- <h2>😔 帖子不存在</h2>
+ <h2>😔 帖子不存在或已被删除</h2>
<p>该帖子可能已被删除或不存在</p>
<button onClick={handleBack} className="back-btn">
<ArrowLeft size={20} />
@@ -179,13 +230,26 @@
<div className="post-meta">
<div className="author-info">
<div className="avatar">
- {post.author ? post.author.charAt(0).toUpperCase() : 'U'}
+ {authorInfo && authorInfo.avatar && authorInfo.avatar.startsWith('http') ? (
+ <img className="avatar" src={authorInfo.avatar} alt={authorInfo.username || authorInfo.nickname || post.author || '用户'} />
+ ) : (
+ <img className="avatar" src={`https://i.pravatar.cc/40?img=${post.user_id}`} alt={authorInfo?.username || authorInfo?.nickname || post.author || '用户'} />
+ )}
</div>
<div className="author-details">
- <span className="author-name">{post.author || '匿名用户'}</span>
+ <span className="author-name">{authorInfo?.username || authorInfo?.nickname || post.author || '匿名用户'}</span>
<span className="post-date">
{post.create_time ? new Date(post.create_time).toLocaleDateString('zh-CN') : '未知时间'}
</span>
+ {/* 关注按钮 */}
+ {post.user_id && (
+ <FollowButton
+ userId={post.user_id}
+ isFollowing={isFollowing}
+ onFollowChange={handleFollowChange}
+ style={{marginLeft: 12}}
+ />
+ )}
</div>
</div>
<div className="post-stats">