调试兴趣小组封面图
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)}>