调试兴趣小组封面图
Change-Id: I757ff42431a7f7c280444bec03a4fc965416aa2d
diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index 087abcb..4f0a801 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -1,3 +1,12 @@
+.user-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 1.5px solid #ddd;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+}
+
.friend-moments-container {
margin: 0 auto;
background: #333;
@@ -42,7 +51,6 @@
padding: 1% 1.5%;
margin: 1% 2%;
border-radius: 6px;
- /*设置item之间的间隔*/
margin-bottom: 2%;
background-color: #e9ded2;
}
@@ -87,7 +95,6 @@
font-size: 12px;
}
-/* Modal 样式 */
.modal-overlay {
position: fixed;
top: 0;
@@ -111,7 +118,6 @@
gap: 20px;
}
-/* 标题 */
.modal-dialog h3 {
margin: 0;
color : #4A3B34;
@@ -172,4 +178,5 @@
.modal-actions .btn.submit {
background: #BA929A;
color: #fff;
-}
+}
+
diff --git a/src/pages/FriendMoments/FriendMoments.jsx b/src/pages/FriendMoments/FriendMoments.jsx
index 526c06d..9595b8b 100644
--- a/src/pages/FriendMoments/FriendMoments.jsx
+++ b/src/pages/FriendMoments/FriendMoments.jsx
@@ -5,6 +5,13 @@
import { Edit, GoodTwo, Comment } from '@icon-park/react';
import { UserContext } from '../../context/UserContext'; // 引入用户上下文
+// 修改后的封面图 URL 拼接函数
+const formatImageUrl = (url) => {
+ if (!url) return '';
+ const filename = url.split('/').pop(); // 提取文件名部分
+ return `http://localhost:8080/uploads/post/${filename}`;
+};
+
const FriendMoments = () => {
const [feeds, setFeeds] = useState([]);
const [filteredFeeds, setFilteredFeeds] = useState([]);
@@ -191,12 +198,6 @@
return;
}
- // 检查是否已经点赞，防止重复请求
- // const currentFeed = feeds.find(feed => feed.postNo === dynamicId);
- // if (currentFeed && currentFeed.liked) {
- // console.warn('尝试重复点赞，已忽略');
- // return;
- // }
console.log('当前用户ID:', userId);
console.log('即将点赞的动态ID:', dynamicId);
@@ -400,17 +401,6 @@
<Edit theme="outline" size="18" style={{ marginRight: '6px' }} />
创建动态
</button>
- {/* <div className="f-search-bar">
- <input
- className="search-input"
- type="text"
- value={query}
- onChange={e => setQuery(e.target.value)}
- placeholder="输入要搜索的动态"
- />
- <button className="search-btn" onClick={handleSearch}>搜索</button>
- <button className="search-btn" onClick={handleReset}>重置</button>
- </div> */}
</div>
<div className="feed-list">
@@ -429,7 +419,11 @@
<div className="feed-item" key={feed.postNo || `feed-${Math.random()}`}>
{/* 显示发布者信息 */}
<div className="feed-author">
- <img src={feed.avatar_url || 'https://example.com/default-avatar.jpg'} alt={feed.username || '用户头像'} />
+ <img
+ className="user-avatar"
+ src={feed.avatar_url || 'https://example.com/default-avatar.jpg'}
+ alt={feed.username || '用户头像'}
+ />
<div>
<h4>{feed.username || '未知用户'}</h4>
<span className="feed-date">{new Date(feed.postTime || Date.now()).toLocaleString()}</span>
@@ -441,17 +435,17 @@
{feed.imageUrl && (
<div className="feed-images">
- {/* 处理可能是单张图片或多张图片的情况 */}
{typeof feed.imageUrl === 'string' ? (
- <img src={feed.imageUrl} alt="动态图片" />
+ <img src={formatImageUrl(feed.imageUrl)} alt="动态图片" />
) : (
feed.imageUrl.map((url, i) => (
- <img key={i} src={url} alt={`动态图${i}`} />
+ <img key={i} src={formatImageUrl(url)} alt={`动态图${i}`} />
))
)}
</div>
)}
+
<div className="feed-footer">
<div className="like-container">
<button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
index 4f76bac..8fdc640 100644
--- a/src/pages/InterestGroup/GroupItem.jsx
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -1,59 +1,3 @@
-// import React, { useState } from 'react';
-// import { useGroupStore } from '../../context/useGroupStore';
-// import { useUser } from '../../context/UserContext'; // ✅ 新增：引入 UserContext
-// import CreatePostForm from './CreatePostForm';
-
-// const GroupItem = ({ group }) => {
-// const { handleJoinGroup, joinStatus } = useGroupStore();
-// const { user } = useUser(); // ✅ 获取 user
-// const userId = user?.userId; // ✅ 安全获取 userId
-// const [showCreatePost, setShowCreatePost] = useState(false);
-
-// return (
-// <div className="group-item">
-// <div className="group-content">
-// <img
-// style={{ width: '40%', height: '40%' }}
-// src={group.cover_image || 'https://picsum.photos/200/200'}
-// alt={group.groupName || group.name}
-// className="group-cover"
-// />
-// <div className="group-info-right">
-// <h3>{group.groupName || group.name}</h3>
-// <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
-// <button
-// onClick={() => handleJoinGroup(group.group_id, userId)}
-// disabled={joinStatus[group.group_id] === '加入成功' || !userId}
-// >
-// {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
-// </button>
-
-// {userId && joinStatus[group.group_id] === '加入成功' && (
-// <button onClick={() => setShowCreatePost(!showCreatePost)}>
-// +发布帖子
-// </button>
-// )}
-// </div>
-// </div>
-
-// <div className="group-description">
-// <p>{group.description}</p>
-// </div>
-// <p>分类：{group.category}</p>
-
-// {showCreatePost && (
-// <CreatePostForm
-// groupId={group.group_id}
-// onClose={() => setShowCreatePost(false)}
-// />
-// )}
-// </div>
-// );
-// };
-
-// export default GroupItem;
-
-
import React, { useState } from 'react';
import { useGroupStore } from '../../context/useGroupStore';
import { useUser } from '../../context/UserContext';
@@ -76,7 +20,7 @@
<div className="group-content">
<img
style={{ width: '40%', height: '40%' }}
- src={group.cover_image || 'https://picsum.photos/200/200'}
+ src={group.coverImage || 'https://picsum.photos/200/200'}
alt={group.groupName}
className="group-cover"
/>
@@ -115,64 +59,4 @@
);
};
-export default GroupItem;
-
-
-// import React, { useState } from 'react';
-// import { useGroupStore } from '../../context/useGroupStore';
-// import { useUser } from '../../context/UserContext';
-// import CreatePostForm from './CreatePostForm';
-
-// const GroupItem = ({ group }) => {
-// console.log('group:', group);
-
-// const { handleJoinGroup, joinStatus } = useGroupStore();
-// const { user } = useUser();
-// const userId = user?.userId; // 确保使用正确的字段名（取自 localStorage 的结构）
-// const [showCreatePost, setShowCreatePost] = useState(false);
-
-// return (
-// <div className="group-item">
-// <div className="group-content">
-// <img
-// style={{ width: '40%', height: '40%' }}
-// src={group.cover_image || 'https://picsum.photos/200/200'}
-// alt={group.name}
-// className="group-cover"
-// />
-// <div className="group-info-right">
-// <h3>{group.name}</h3>
-// <p style={{ color: '#BA929A' }}>{group.member_count || 0}人加入了小组</p>
-
-// <button
-// onClick={() => handleJoinGroup(group.group_id, userId)}
-// disabled={joinStatus[group.group_id] === '加入成功' || !userId}
-// >
-// {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
-// </button>
-
-// {userId && joinStatus[group.group_id] === '加入成功' && (
-// <button onClick={() => setShowCreatePost(!showCreatePost)}>
-// +发布帖子
-// </button>
-// )}
-// </div>
-// </div>
-
-// <div className="group-description">
-// <p>{group.description}</p>
-// </div>
-// <p>分类：{group.category}</p>
-
-// {showCreatePost && (
-// <CreatePostForm
-// groupId={group.group_id}
-// onClose={() => setShowCreatePost(false)}
-// />
-// )}
-// </div>
-// );
-// };
-
-// export default GroupItem;
-
+export default GroupItem;
\ No newline at end of file