From 6a7986f7897d158d269a65c671972b5147fe2e4b Mon Sep 17 00:00:00 2001
From: Hao Wang <1493390671@qq.com>
Date: Fri, 25 Jul 2025 18:43:53 +1000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B8=96=E5=AD=90=E7=82=B9=E5=87=BB=E5=90=8E=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E6=98=BE=E7=A4=BA=E5=B9=B6=E8=87=AA=E5=8A=A8=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Forum/index.tsx | 56 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/pages/Forum/index.tsx b/src/pages/Forum/index.tsx
index 4464bd9..00d0d83 100644
--- a/src/pages/Forum/index.tsx
+++ b/src/pages/Forum/index.tsx
@@ -14,7 +14,7 @@ import {
   Radio,
 } from 'antd';
 import { history, useModel } from 'umi';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
   fetchPosts as apiFetchPosts,
   fetchPostLikes as apiFetchPostLikes,
@@ -68,6 +68,24 @@ const CenteredContainer = styled.div`
   box-sizing: border-box;
 `;
 
+// 高亮动画List.Item
+const AnimatedListItem = styled(List.Item)<{ $highlighted?: boolean }>`
+  && {
+    background: ${({ $highlighted }) => ($highlighted ? '#e6f7ff' : '#fff')};
+    border-radius: 6px;
+    transition: background 0.8s cubic-bezier(0.4,0,0.2,1);
+  }
+`;
+
+const AnimatedCard = styled(Card)<{ $highlighted?: boolean }>`
+  && {
+    background: ${({ $highlighted }) => ($highlighted ? '#e6f7ff' : '#fff')};
+    border: none;
+    border-radius: 6px;
+    transition: background 0.8s cubic-bezier(0.4,0,0.2,1);
+  }
+`;
+
 const ForumPage: React.FC = () => {
   const { initialState } = useModel('@@initialState');
   const userId = initialState?.currentUser?.id;
@@ -86,6 +104,7 @@ const ForumPage: React.FC = () => {
   // 点赞相关状态
   const [initialLikes, setInitialLikes] = useState<Record<number, number>>({});
   const [initialLiked, setInitialLiked] = useState<Record<number, boolean>>({});
+  const [highlightedPostId, setHighlightedPostId] = useState<number | null>(null);
 
   // 加载热门帖子（按点赞数降序，显示前2条）
   const loadHotPosts = async () => {
@@ -167,6 +186,23 @@ const ForumPage: React.FC = () => {
       });
   }, [posts]);
 
+  // 页面加载时检测localStorage，自动跳转页码并高亮
+  useEffect(() => {
+    const lastView = localStorage.getItem('forum_last_view');
+    if (lastView) {
+      try {
+        const { page, postId } = JSON.parse(lastView);
+        if (page && page !== currentPage) {
+          setCurrentPage(page); // 跳转到存储的页码
+        }
+        setHighlightedPostId(postId);
+        // 1.5秒后自动取消高亮
+        setTimeout(() => setHighlightedPostId(null), 2000);
+      } catch {}
+      localStorage.removeItem('forum_last_view');
+    }
+  }, []);
+
   const handlePostCreated = () => {
     loadPosts(1, pageSize);
     // Mock数据不需要重新加载，但保持一致性
@@ -186,9 +222,14 @@ const ForumPage: React.FC = () => {
   };
 
   const handlePostClick = (postId: number, liked: boolean) => {
+    // 存储当前页码和帖子id
+    localStorage.setItem('forum_last_view', JSON.stringify({
+      page: currentPage,
+      postId,
+    }));
     history.push({
       pathname: `/forum/${postId}`,
-      query: { liked: liked ? '1' : '0' }, // 使用query参数传递点赞状态
+      query: { liked: liked ? '1' : '0' },
     });
   };
 
@@ -296,9 +337,11 @@ const ForumPage: React.FC = () => {
           dataSource={posts}
           renderItem={(item) => {
             const formatted = formatDate(item.updateTime);
+            const isHighlighted = item.id === highlightedPostId;
             return (
-              <List.Item>
-                <Card
+              <AnimatedListItem $highlighted={isHighlighted}>
+                <AnimatedCard
+                  $highlighted={isHighlighted}
                   title={item.title}
                   extra={
                     <Space align="center" size="small">
@@ -320,15 +363,14 @@ const ForumPage: React.FC = () => {
                       initialCount={initialLikes[item.id]}
                       initialLiked={initialLiked[item.id]}
                       onChange={(id, liked, count) => {
-                        // 只改这个 post 的 liked/count，别全量重拉
                         setInitialLiked((prev) => ({ ...prev, [id]: liked }));
                         setInitialLikes((prev) => ({ ...prev, [id]: count }));
                       }}
                     />
                     <Typography.Text type="secondary">{item.commentCount} 条评论</Typography.Text>
                   </Space>
-                </Card>
-              </List.Item>
+                </AnimatedCard>
+              </AnimatedListItem>
             );
           }}
         />