Merge "修改信息"
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index 47f905f..417105a 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -8,6 +8,7 @@
import MediaPreview from './MediaPreview'
import '../style/PostDetail.css'
import dayjs from 'dayjs'
+import { followUser, unfollowUser } from '../api/api_ljc'
export default function PostDetail() {
const { id } = useParams()
@@ -22,6 +23,7 @@
const [newComment, setNewComment] = useState('')
const [showComments, setShowComments] = useState(false)
const [isFollowing, setIsFollowing] = useState(false)
+ const [followLoading, setFollowLoading] = useState(false)
const [authorInfo, setAuthorInfo] = useState(null)
const [previewImg, setPreviewImg] = useState(null)
const [commentUserMap, setCommentUserMap] = useState({}) // user_id: username
@@ -212,22 +214,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 {}
+ const handleFollowAction = async () => {
+ // 添加了加载状态和错误处理
+ setFollowLoading(true);
+ const currentUserId = getCurrentUserId()
+ try {
+ if (isFollowing) {
+ await unfollowUser(currentUserId, post.user_id);
+ } else {
+ await followUser(currentUserId, post.user_id);
}
+ setIsFollowing(!isFollowing);
+ } catch (error) {
+ console.error(isFollowing ? '取消关注失败' : '关注失败', error);
+ alert(`操作失败: ${error.message || '请重试'}`);
+ } finally {
+ setFollowLoading(false);
}
+};
if (loading) {
return (
@@ -315,12 +319,23 @@
</span>
{/* 关注按钮 */}
{post.user_id && (
- <FollowButton
- userId={post.user_id}
- isFollowing={isFollowing}
- onFollowChange={handleFollowChange}
- style={{marginLeft: 12}}
- />
+ <button
+ className={`follow-btn ${isFollowing ? 'following' : ''}`}
+ onClick={handleFollowAction}
+ disabled={followLoading}
+ style={{
+ marginLeft: '12px',
+ padding: '4px 12px',
+ borderRadius: '20px',
+ border: '1px solid #ccc',
+ background: isFollowing ? '#f0f0f0' : '#007bff',
+ color: isFollowing ? '#333' : 'white',
+ cursor: 'pointer',
+ fontSize: '14px'
+ }}
+ >
+ {followLoading ? '处理中...' : (isFollowing ? '已关注' : '关注')}
+ </button>
)}
</div>
</div>