diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..f15b3e1
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name localhost;
+    
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri $uri/ /index.html;  # 关键：支持前端路由
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}
\ No newline at end of file
diff --git a/scripts/.env b/scripts/.env
deleted file mode 100644
index 083c815..0000000
--- a/scripts/.env
+++ /dev/null
@@ -1 +0,0 @@
-NODE_ENV=development
\ No newline at end of file
diff --git a/scripts/webpack.base.js b/scripts/webpack.base.js
index eb4f06e..5224c08 100644
--- a/scripts/webpack.base.js
+++ b/scripts/webpack.base.js
@@ -150,10 +150,6 @@
       cwd: process.cwd(),
     }),
     new webpack.DefinePlugin({
-      'process.env': JSON.stringify({
-        NODE_ENV: process.env.NODE_ENV || 'production',
-        // 这里可以添加其他你需要的环境变量
-      }),
       // 确保基础变量存在
       'process.platform': JSON.stringify(platform()),
       'process.browser': JSON.stringify(true)
diff --git a/scripts/webpack.dev.js b/scripts/webpack.dev.js
index c5feb8d..eeb400a 100644
--- a/scripts/webpack.dev.js
+++ b/scripts/webpack.dev.js
@@ -14,7 +14,7 @@
       'process.env': JSON.stringify({
         NODE_ENV: 'development',    // 等价于 mode 设置
         PUBLIC_URL: './',           // 建议使用相对路径
-        API_BASE_URL: 'http://localhost:3030/api', // 添加API路径
+        API_BASE_URL: 'http://localhost:5008', // 添加API路径
         WEB_BASE_URL: 'http://localhost:8080', // 添加WEB路径
       })
     }),
diff --git a/scripts/webpack.prod.js b/scripts/webpack.prod.js
index 0de8641..88ac0ba 100644
--- a/scripts/webpack.prod.js
+++ b/scripts/webpack.prod.js
@@ -3,4 +3,14 @@
 
 module.exports = merge(base, {
   mode: 'production', // 生产模式
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify({
+        NODE_ENV: 'production',    // 等价于 mode 设置
+        PUBLIC_URL: './',           // 建议使用相对路径
+        API_BASE_URL: 'http://localhost:5008', // 添加API路径
+        WEB_BASE_URL: 'http://localhost:8080', // 添加WEB路径
+      })
+    }),
+  ],
 })
\ No newline at end of file
diff --git a/src/api/auth.ts b/src/api/auth.ts
index bc6d413..cba34b3 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,3 +1,4 @@
 export const postUserLogin= '/auth/login';
 export const postUserRegister= '/auth/register';
-export const postVerifivateCode="/auth/send_verification_code";
\ No newline at end of file
+export const postVerifivateCode="/auth/send_verification_code";
+export const getRefreshToken="/auth/refresh_token";
\ No newline at end of file
diff --git a/src/api/comment.ts b/src/api/comment.ts
new file mode 100644
index 0000000..1809ad2
--- /dev/null
+++ b/src/api/comment.ts
@@ -0,0 +1 @@
+export const  getPostComments = '/api/comments/post'
\ No newline at end of file
diff --git a/src/api/post.ts b/src/api/post.ts
index 99dc8fa..b211bdd 100644
--- a/src/api/post.ts
+++ b/src/api/post.ts
@@ -1 +1,6 @@
-export const hotPosts='/post/hot'
\ No newline at end of file
+export const getHotPosts='/post/recommended'
+export const getLikePosts='/post/recommended-by-tags'
+export const getPosts='/post/search'
+export const getPostDetail='/post'
+export const getPostComments='/comments/post'
+export const unknownAPI='/api/unknown'
\ No newline at end of file
diff --git a/src/api/user.ts b/src/api/user.ts
index 30fbfff..ecea4d8 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1 +1,3 @@
-export const getUserInfo="/user"
\ No newline at end of file
+export const getUserInfo="/user"
+
+export const postFollowUser="/user/follow"
\ No newline at end of file
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index a6c1fe7..a305521 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React, { use, useEffect } from "react";
 import Icon, {
     HomeOutlined,
 } from "@ant-design/icons";
@@ -8,12 +8,12 @@
 import { Menu } from 'antd';
 import { useState } from "react";
 import style from './navbar.module.css'
-
+import { set } from "lodash";
+import { useNavigate } from "react-router";
 
 type CustomIconComponentProps = GetProps<typeof Icon>;
 type MenuItem = Required<MenuProps>['items'][number];
 const web_base_url = process.env.WEB_BASE_URL || 'http://localhost:3000';
-
 const VideoSvg = () => (
     <svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" p-id="7331" viewBox="0 0 1024 1024">
       <title>video icon</title>
@@ -63,7 +63,6 @@
     <Icon component={ChatSvg} {...props} />
 );
 
-
 const items: MenuItem[] = [
 {
     key: 'home',
@@ -78,7 +77,7 @@
     key: 'video',
     icon: <VideoIcon />,
     label: (
-    <a href={{web_base_url}+'/posts?type=video'}>
+    <a href={'/posts?type=video'}>
         影视
     </a>
     ),
@@ -87,7 +86,7 @@
     key: 'music',
     icon: <MusicIcon />,
     label: (
-    <a href={{web_base_url}+'/posts?type=music'}>
+    <a href={'/posts?type=music'}>
         音乐
     </a>
     ),
@@ -96,7 +95,7 @@
     key: 'game',
     icon: <GameIcon />,
     label: (
-    <a href={{web_base_url}+'/posts?type=game'}>
+    <a href={'/posts?type=game'}>
         游戏
     </a>
     ),
@@ -105,7 +104,7 @@
     key: 'software',
     icon: <SoftwareIcon />,
     label: (
-    <a href={{web_base_url}+'/posts?type=software'}>
+    <a href={'/posts?type=software'}>
         软件
     </a>
     ),
@@ -114,20 +113,27 @@
     key: 'chat',
     icon: <ChatIcon />,
     label: (
-    <a href={{web_base_url}+'/posts?type=chat'}>
+    <a href={'/posts?type=chat'}>
         聊天
     </a>
     ),
 },
 ];
 
+interface NavbarProps {
+    current?: string;
+}
 
 
 
-
-const Navbar: React.FC = () => {
+const Navbar: React.FC<NavbarProps> = (props) => {
     const [current, setCurrent] = useState('home');
-
+    useEffect(() => {
+        console.log('current:', props.current);
+        if (props.current) {
+            setCurrent(props.current);
+        }
+    },[props.current]);
     const onClick: MenuProps['onClick'] = (e) => {
         console.log('click ', e);
         setCurrent(e.key);
diff --git a/src/components/postsPanel/postsPanel.module.css b/src/components/postsPanel/postsPanel.module.css
index dc10683..b4b75ce 100644
--- a/src/components/postsPanel/postsPanel.module.css
+++ b/src/components/postsPanel/postsPanel.module.css
@@ -2,6 +2,7 @@
     background-color: var(--card-bg);
     height:100%;
     width:100%;
+    padding:0px 5px;
 }
 
 .header{
@@ -27,7 +28,16 @@
 .content .item{
     display:flex;
     justify-content:space-between;
+    align-items:center;
+    padding-top:10px;
+    padding-bottom:10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* 添加边框阴影 */
+    border:1px solid rgba(0,0,0,0.04);
+}
 
+.content .item:hover {
+    background:var(--select-bg-color);
+    cursor:pointer
 }
 .content .item .text{
     width:70%;
diff --git a/src/components/postsPanel/postsPanel.tsx b/src/components/postsPanel/postsPanel.tsx
index e4f87c0..2916753 100644
--- a/src/components/postsPanel/postsPanel.tsx
+++ b/src/components/postsPanel/postsPanel.tsx
@@ -2,6 +2,7 @@
 import React, { useCallback } from  'react';
 import request from '@/utils/request'
 import style from './postsPanel.module.css'
+import { useNavigate } from 'react-router';
 
 
 interface panelProps{
@@ -11,23 +12,24 @@
 }
 
 const PostsPanel:React.FC<panelProps> = (props) => {
-    const fenchData = useCallback(() => request.get(props.url), [props.url])
+    const nav = useNavigate();
+    const fenchData = useCallback(() => request.get(`${props.url}?page=1&size=5`), [props.url])
     const {data} = useApi(fenchData, true);
-
-
-
+    const handlePostCheck =(postId:string) =>{
+        nav('/postDetail?postId=' + postId);
+    }
     return (
         <div className={style.panel}>
             <div className={style.header}>
                 <span className={style.title}>{props.name}</span>
                 <span className={style.more}>更多</span>
             </div>
-            <div className={style.content}>
+            <div className={style.content} >
                 {data && data.length > 0 ?
-                data?.map((item: { title: string; date: string }, index: number) => (
-                    <div key={index} className={style.item}>
-                        <span className={style.text}>{item.title}</span>
-                        <span>{item.date}</span>
+                data?.map((item: {postId:string, postTitle: string; createdAt: string }, index: number) => (
+                    <div key={index} className={style.item} onClick={()=> handlePostCheck(item.postId)} >
+                        <span className={style.text}>{item.postTitle}</span>
+                        <span>{item.createdAt}</span>
                     </div>
                 ))  :(
                     <div>未查询到相关记录</div>
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index 3745736..61d3f4e 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,8 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useAppSelector } from "../../hooks/store";
 import style from "./style.module.css"
+import { useApi } from "@/hooks/request";
+import request from "@/utils/request";
+import { getUserInfo } from "@/api/user";
+import { useAppDispatch } from "@/hooks/store";
+
 import { useNavigate } from "react-router";
 
+
 interface SelfStatusProps {
     className?: string;
 }
@@ -16,6 +22,19 @@
     const downloadTraffic = useAppSelector(state => state.user.downloadTraffic);
     const downloadPoints = useAppSelector(state => state.user.downloadPoints);
     const avatar = useAppSelector(state => state.user.avatar);
+    const dispatch = useAppDispatch();
+    const { data, refresh } = useApi(() => request.get(getUserInfo), false);
+    useEffect(() => {
+        if (avatar.length === 0) {
+            refresh(); // 触发 API 请求
+        }
+    }, [avatar, refresh]);
+
+    useEffect(() => {
+        if (data) {
+            dispatch({ type: "user/getUserInfo", payload: data });
+        }
+    }, [data, dispatch]);
 
     function handleAvatarClick(){
         nav('/homepage')
@@ -24,7 +43,8 @@
     return (
         <div className={style.container}>
             <div className={style.left}>
-                <img className={style.avatar} onClick={handleAvatarClick} src={avatar} alt="User Avatar" />
+                {avatar && avatar.length > 0 ? (
+                <img className={style.avatar} src={avatar} alt="User Avatar" />):null}
             </div>
             <div className={style.right}>
                 <div className={style.info}>
diff --git a/src/components/selfStatus/style.module.css b/src/components/selfStatus/style.module.css
index 8ed86a7..858e88a 100644
--- a/src/components/selfStatus/style.module.css
+++ b/src/components/selfStatus/style.module.css
@@ -4,7 +4,6 @@
     align-items: flex-start;
     justify-content: space-between;
     padding: 20px;
-    border: 1px solid #ccc;
     border-radius: 10px;
     background-color: var(--card-bg);
     width: 100%;
diff --git a/src/global.css b/src/global.css
index 81a6670..a5f7396 100644
--- a/src/global.css
+++ b/src/global.css
@@ -28,6 +28,7 @@
     --text-color: #000000;
     --card-bg: #ffffff;
     --border-color: #e0e0e0;
+    --select-bg-color: #b3d8fd;
     --primary-color: #3498db; 
     --primary-hover: #2980b9;
     --primary-card: #a3d1f0;
@@ -38,6 +39,7 @@
     --text-color: #f1f1f1;
     --card-bg: #1e1e1e;
     --border-color: #444444;
+    --select-bg-color:#3a466b;
     --primary-color: #3498db; 
     --primary-hover: #2980b9;
     --primary-card:#280202;
diff --git a/src/index.tsx b/src/index.tsx
index 69441df..494de3e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { use } from "react";
 import {createRoot} from "react-dom/client"
 import { Provider } from "react-redux";
 import router from "./route";
 import store from "./store/index";
 import { RouterProvider } from "react-router";
 import './global.css';
+import { useEffect } from "react";
+import { checkAndRefreshToken } from "./utils/jwt";
 
 if(localStorage.getItem("theme") === null) {
     localStorage.setItem("theme", "light");
@@ -14,6 +16,7 @@
 }
 
 const root = createRoot(document.getElementById('root')!)
+
 root.render(
     <Provider store={store}>
         <RouterProvider router={router}/>
diff --git a/src/mock/auth.js b/src/mock/auth.js
index 3cc837b..272d8b7 100644
--- a/src/mock/auth.js
+++ b/src/mock/auth.js
@@ -1,16 +1,63 @@
 import Mock from 'mockjs';
 import MockAdapter from 'axios-mock-adapter';
-import {postUserLogin} from '@/api/auth'; // Import the API endpoint
+import {postUserLogin, getRefreshToken} from '@/api/auth'; // Import the API endpoint
 
+
+
+function generateToken(userId, role) {
+  const exp = Math.floor(Date.now() / 1000) + 60 * 60;
+
+  // 生成 JWT Header
+  const header = {
+      alg: 'HS256', // 签名算法
+      typ: 'JWT',   // 类型
+  };
+
+  // 生成 JWT Payload
+  const payload = {
+      userId,
+      role,
+      exp,
+  };
+
+  // Base64 编码 Header 和 Payload
+  const base64Header = btoa(JSON.stringify(header));
+  const base64Payload = btoa(JSON.stringify(payload));
+
+  // 模拟 Signature（实际应使用密钥进行 HMAC-SHA256 签名）
+  const signature = btoa('mock-signature'); // 简单模拟签名
+
+  // 拼接 JWT Token
+  const token = `${base64Header}.${base64Payload}.${signature}`;
+  return token;
+}
 /**
  * 设置用户相关的 Mock 接口
  * @param {MockAdapter} mock 
  */
-export function setupAuthMock(mock){
-    mock.onPost(postUserLogin).reply(config => {
-        let data = Mock.mock({
-          "token": '11111111111111111',
-        });
-        return [200, data];
+export function setupAuthMock(mock) {
+  mock.onPost(postUserLogin).reply(config => {
+    const data = JSON.parse(config.data);
+    if(data.email === 'admin@1' && data.password === '123456'){
+      // 模拟用户登录数据
+      const token = generateToken(1, 'admin'); 
+      
+      // 返回模拟的 Token
+      let data = Mock.mock({
+          token,
       });
-}    
+      return [200, data];
+    }else{
+      return [401, {message: '用户名或密码错误'}];
+    }
+  });
+  mock.onGet(getRefreshToken).reply(config => {
+      // 模拟用户登录数据
+      const  token = generateToken(1, 'admin'); // 这里的 1 和 'admin' 可以根据需要修改
+      // 返回模拟的 Token
+      let data = Mock.mock({
+          token,
+      });
+      return [200, data];
+  })
+}
diff --git a/src/mock/comment.d.ts b/src/mock/comment.d.ts
new file mode 100644
index 0000000..2ed6cca
--- /dev/null
+++ b/src/mock/comment.d.ts
@@ -0,0 +1,3 @@
+import type MockAdapter from 'axios-mock-adapter';
+
+export declare function setupCommentMock(mock: MockAdapter): void;
\ No newline at end of file
diff --git a/src/mock/comment.js b/src/mock/comment.js
new file mode 100644
index 0000000..695ccc4
--- /dev/null
+++ b/src/mock/comment.js
@@ -0,0 +1,34 @@
+import mockjs from "mockjs";
+import MockAdapter from "axios-mock-adapter";
+import { getPostComments} from "@/api/comment";
+
+export function setupCommentMock(mock) {
+    const getPostCommentsPattern = new RegExp(`^${getPostComments}/\\d+$`);
+    mock.onGet(getPostCommentsPattern).reply(config => {
+         let data = mockjs.mock({
+            [`list|5`]: [
+                {
+                    "commentId|+1": 1, // 自增评论 ID
+                    "content": "@cparagraph(1, 3)", // 随机生成 1-3 段评论内容
+                    "createdAt": "@datetime('T')", // 随机生成时间戳
+                    "parentCommentId": null, // 顶级评论的父评论 ID 为 null
+                    "postId|1-100": 1, // 随机生成帖子 ID
+                    "userId|1-100": 1, // 随机生成用户 ID
+                    "replies|0-3": [ // 随机生成 0-3 条子评论
+                        {
+                            "commentId|+1": 100, // 子评论的 ID 从 100 开始自增
+                            "content": "@cparagraph(1, 2)", // 随机生成 1-2 段子评论内容
+                            "createdAt": "@datetime('T')", // 随机生成时间戳
+                            "parentCommentId": "@increment(1)", // 父评论 ID
+                            "postId|1-100": 1, // 随机生成帖子 ID
+                            "userId|1-100": 1, // 随机生成用户 ID
+                            "replies": [] // 子评论的子评论为空
+                        }
+                    ]
+                },
+            ],
+        });
+        return [200, data.list];
+    });
+
+}
\ No newline at end of file
diff --git a/src/mock/index.ts b/src/mock/index.ts
index f9c6a64..49cc44f 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -3,16 +3,17 @@
 import { setupAuthMock }  from './auth'
 import { setupUserMock } from './user';
 import { setupPostMock } from './post';
+import { setupCommentMock } from './comment';
 import {setupUserMessageMock} from './homepage';
 import { setupUploadMock } from './upload';
 
-// 创建 Mock 实例
-export const mock = new MockAdapter(instance, { 
-  delayResponse: process.env.NODE_ENV === 'test' ? 0 : 500 
-})
 
 // 聚合所有 Mock 模块
 export function setupMock() {
+  return;
+  const mock = new MockAdapter(instance, { 
+    delayResponse: process.env.NODE_ENV === 'test' ? 0 : 500 
+  })
   // 开发环境启用 Mock
   if (process.env.NODE_ENV !== 'development') return
 
@@ -20,11 +21,9 @@
   setupAuthMock(mock)
   setupUserMock(mock)
   setupPostMock(mock)
+  setupCommentMock(mock)
   setupUserMessageMock(mock)
   setupUploadMock(mock)
-
   console.log('Mock 模块已加载')
 }
 
-// 自动执行
-setupMock()
\ No newline at end of file
diff --git a/src/mock/post.js b/src/mock/post.js
index abdfc6a..63f4413 100644
--- a/src/mock/post.js
+++ b/src/mock/post.js
@@ -1,17 +1,83 @@
 import Mock from 'mockjs';
 import MockAdapter from 'axios-mock-adapter';
-import {hotPosts} from '@/api/post'
+import {getHotPosts, getLikePosts, getPosts, getPostDetail} from '@/api/post'
 
 /**
  * 设置用户相关的 Mock 接口
  * @param {MockAdapter} mock 
  */
 export function setupPostMock(mock){
-    mock.onGet(hotPosts).reply(config => {
-        let data = Mock.mock([{
-          'title':'test title',
-          'date':'2025-4-20'
-        }]);
+    const hotPostsPattern = new RegExp(`^${getHotPosts}(\\?page=\\d+&size=\\d+)?$`);
+    const LikePostsPattern = new RegExp(`^${getLikePosts}(\\?page=\\d+&size=\\d+)?$`);
+    const searchPostsPattern = new RegExp(`^${getPosts}\\?((keyword=[^&]+&?)|(tags=[^&]+&?)|(author=[^&]+&?)|)+(page=\\d+)&(pageSize=\\d+)$`);
+    mock.onGet(hotPostsPattern).reply(config => {
+      const urlParams = new URLSearchParams(config.url.split('?')[1]);
+      const size = parseInt(urlParams.get('size')) || 10;
+      let data = Mock.mock({
+        [`list|${size}`]: [
+          {
+            'postId|+1': 1,
+            'postTitle': '@ctitle(5, 10)',
+            'postContent': '@cparagraph(1, 3)',
+            'author': '@cname()',
+            'createdAt': '@date("yyyy-MM-dd")',
+            'viewCount|1-100': 1,
+          },
+        ],
+      });
+      return [200, data.list];
+    });
+      mock.onGet(LikePostsPattern).reply(config => {
+        const urlParams = new URLSearchParams(config.url.split('?')[1]);
+        const size = parseInt(urlParams.get('size')) || 10;
+        let data = Mock.mock({
+          [`list|${size}`]: [
+            {
+              'postId|+1': 1,
+              'postTitle': '@ctitle(5, 10)',
+              'postContent': '@cparagraph(1, 3)',
+              'author': '@cname()',
+              'createdAt': '@date("yyyy-MM-dd")',
+              'viewCount|1-100': 1,
+            },
+          ],
+        });
+        return [200, data.list];
+      });
+      mock.onGet(searchPostsPattern).reply(config => {
+        const urlParams = new URLSearchParams(config.url.split('?')[1]);
+        const tags = urlParams.get('tags')?.split(',') || []; // 将 tags 参数解析为数组
+        const page = parseInt(urlParams.get('page')) || 1; // 默认 page 为 1
+        const size = parseInt(urlParams.get('size')) || 10; // 默认 size 为 10
+        let data = Mock.mock({
+          [`list|${size}`]: [
+            {
+              'postId|+1': 1,
+              'postTitle': '@ctitle(5, 10)',
+              'postContent': '@cparagraph(1, 3)',
+              'author': '@cname()',
+              'createdAt': '@date("yyyy-MM-dd")',
+              'viewCount|1-100': 1,
+            },
+          ],
+        });
+        return [200, data.list];
+      });
+
+
+      const getPostDetailPattern = new RegExp(`^${getPostDetail}/[0-9]+$`);
+      mock.onGet(getPostDetailPattern).reply(config => {
+        const postId = config.url.split('/').pop();
+        let data = Mock.mock({
+          'postId': postId,
+          'postTitle': '@ctitle(5, 10)',
+          'postContent': '@cparagraph(1, 3)',
+          'author': '@cname()',
+          'createdAt': '@date("yyyy-MM-dd")',
+          'viewCount|1-100': 1,
+        });
         return [200, data];
       });
+
+
 }    
diff --git a/src/route/index.tsx b/src/route/index.tsx
index 62bb7a5..857118e 100644
--- a/src/route/index.tsx
+++ b/src/route/index.tsx
@@ -9,6 +9,8 @@
 import React from 'react'
 import Forum from '../views/forum'
 import { RootState } from '@/store'
+import PostList from '../views/postList/postList'
+import PostDetail from '../views/postDetail/postDetail'
 
 const router = createBrowserRouter([
     {
@@ -28,6 +30,14 @@
 
                     },
                     {
+                        path: '/posts',
+                        element: <PostList/>
+                    },
+                    {
+                        path: '/postsDetail',
+                        element: <PostDetail/>
+                    },
+                    {
                         path:'/homepage',
                         element: <Homepage/>
                     },
diff --git a/src/store/userReducer.ts b/src/store/userReducer.ts
index bbed95e..b677263 100644
--- a/src/store/userReducer.ts
+++ b/src/store/userReducer.ts
@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { isTokenExpired } from '@/utils/jwt';
 
 interface UserState {
     userId: string;
@@ -15,7 +16,7 @@
     userId: '',
     userName: '',
     role: '',
-    isLogin: false,
+    isLogin: localStorage.getItem('token')&& isTokenExpired(localStorage.getItem('token') as string) ==='0'  ? true : false,
     uploadTraffic: 0,
     downloadTraffic: 0,
     downloadPoints: 0,
@@ -39,7 +40,6 @@
             state.downloadTraffic = action.payload.downloadTraffic;
             state.downloadPoints = action.payload.downloadPoints;
             state.avatar = action.payload.avatar;
-            console.log(state);
         },
         logout: (state) => {
             state.userId = '';
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 8c60d4b..3c9c122 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -2,8 +2,7 @@
 import type { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 const instance = axios.create({
-    // baseURL: process.env.API_BASE_URL,
-    baseURL: 'http://localhost:8080',
+    baseURL: process.env.API_BASE_URL,
     timeout: 10000,
     headers: {
       'Content-Type': 'application/json'
@@ -13,6 +12,7 @@
   // 请求拦截器
   instance.interceptors.request.use(
     (config) => {
+      console.log('Request Config:', config)
       // 添加认证 token
       const token = localStorage.getItem('token')
       if (token) {
@@ -28,7 +28,6 @@
   // 响应拦截器
   instance.interceptors.response.use(
     (response) => {
-      console.log('Response:', response)
       // 统一处理响应数据格式
       if (response.status === 200) {
         return response.data
@@ -36,6 +35,9 @@
       return Promise.reject(response.data)
     },
     (error) => {
+      if(error.status===401){
+       // window.location.href = '/login';
+      }
       // 统一错误处理
       console.error('API Error:', error.response?.status, error.message)
       return Promise.reject(error)
diff --git a/src/utils/jwt.ts b/src/utils/jwt.ts
new file mode 100644
index 0000000..42308dc
--- /dev/null
+++ b/src/utils/jwt.ts
@@ -0,0 +1,61 @@
+import { getRefreshToken } from '@/api/auth';
+import axios from 'axios';
+
+function parseJwt(token: string) {
+    console.log('Parsing JWT token:', token);
+    try {
+        const base64Url = token.split('.')[1];
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(
+            atob(base64)
+                .split('')
+                .map(c => `%${('00' + c.charCodeAt(0).toString(16)).slice(-2)}`)
+                .join('')
+        );
+        return JSON.parse(jsonPayload);
+    } catch (error) {
+        console.error('Invalid JWT token:', error);
+        return null;
+    }
+}
+
+/**
+ * 检查token是否过期
+ * @returns {string} -1: token无效 0: token未过期 1: token已过期
+**/
+export function isTokenExpired(token: string): string {
+    if (token === null || token === undefined) {
+        return '-1'; // 如果没有token，认为token无效
+    }
+    const decoded = parseJwt(token);
+    if (!decoded || !decoded.exp) {
+        return '-1'; // 如果解析失败或没有 `exp` 字段，认为token无效
+    }
+    const currentTime = Math.floor(Date.now() / 1000); // 当前时间（秒）
+    const bufferTime = 60 * 10; // 过期前的缓冲时间（秒）
+    return decoded.exp < currentTime ?decoded.exp < currentTime - bufferTime ? '-1' : '1'  :"0";
+}
+
+async function refreshToken() {
+    try {
+        const response = await axios.post(getRefreshToken, {
+            token: localStorage.getItem('token'),
+        });
+        const newToken = response.data.token;
+        localStorage.setItem('token', newToken);
+        return newToken;
+    } catch (error) {
+        console.error('Failed to refresh token:', error);
+        return null;
+    }
+}
+
+export async function checkAndRefreshToken() {
+    const token = localStorage.getItem('token');
+    if (token && isTokenExpired(token)=='1') {
+        const newToken = await refreshToken();
+        if (!newToken) {
+            localStorage.removeItem('token');
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/forum/index.tsx b/src/views/forum/index.tsx
index 345f880..83d791f 100644
--- a/src/views/forum/index.tsx
+++ b/src/views/forum/index.tsx
@@ -5,7 +5,7 @@
 import style from "./index.module.css";
 import Navbar from "@/components/navbar/navbar";
 import PostsPanel from "@/components/postsPanel/postsPanel";
-import { hotPosts } from "@/api/post";
+import { getHotPosts, getLikePosts} from "@/api/post";
 import { Carousel } from 'antd';
 import ad1 from '&/assets/ad1.png'
 import ad2 from '&/assets/ad2.png'
@@ -42,7 +42,7 @@
                         </Carousel>
                     </div>
                     <div className={style.hotPosts}>
-                        <PostsPanel name='热门种子' url={hotPosts} limit={5}/>
+                        <PostsPanel name='热门种子' url={getHotPosts} limit={5}/>
                     </div>
                 </div>
                </div>
@@ -54,13 +54,13 @@
             </div>
             <div className={style.down}>
                 <div className={style.newPost}>
-                    <PostsPanel name='最新发布' url={hotPosts} limit={5}/>
+                    <PostsPanel name='最新发布' url={getHotPosts} limit={5}/>
                 </div>
                 <div className={style.likePost}>
-                    <PostsPanel name='猜你喜欢' url={hotPosts} limit={5}/>
+                    <PostsPanel name='猜你喜欢' url={getLikePosts} limit={5}/>
                 </div>
                 <div className={style.forsalePost}>
-                    <PostsPanel name='促销种子' url={hotPosts} limit={5}/>
+                    <PostsPanel name='促销种子' url={getHotPosts} limit={5}/>
                 </div>
             </div>
         </div>
diff --git a/src/views/frame/frame.tsx b/src/views/frame/frame.tsx
index c22a528..83106a1 100644
--- a/src/views/frame/frame.tsx
+++ b/src/views/frame/frame.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { use } from "react";
 import { Outlet } from "react-router";
 import { useEffect, useState } from "react";
 import { 
@@ -12,12 +12,13 @@
 import logo from "&/assets/logo.png";
 import { useAppDispatch } from "@/hooks/store";
 import { useSelector } from "react-redux";
-
+import { checkAndRefreshToken } from "@/utils/jwt";
 import { useNavigate } from "react-router-dom";
-
-
 const Frame:React.FC = () => {
 
+    useEffect(() => {
+        checkAndRefreshToken();
+    }, []);
     const dispatch = useAppDispatch();
 
     const showSearch = useSelector((state: any) => state.setting.showSearch); 
diff --git a/src/views/login/login.module.css b/src/views/login/login.module.css
index dca1df4..a7fc6f4 100644
--- a/src/views/login/login.module.css
+++ b/src/views/login/login.module.css
@@ -74,6 +74,18 @@
     max-width: 300px;
 }
 
+.sendCode {
+    padding:5px;
+    border-radius: 5px;
+    border: none;
+    font-size: 8px;
+    background-color: #ff7300; /* Blue */
+    color: white;
+    cursor: pointer;
+    width: 60px;
+    max-width: 300px;
+}
+
 .form .register:hover {
     background-color: #0056b3; /* Darker blue */
 }
@@ -90,4 +102,20 @@
     text-decoration: underline;
     align-content: flex-end;
     color: #007BFF; /* Blue */
+}
+
+.back {
+    background: none;
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+    margin-top: 8px;
+    font-size: 16px;
+    padding: 0;
+    transition: color 0.2s;
+}
+
+.back:hover {
+    color: #0056b3;
+    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index 96c5485..fef6e32 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -1,28 +1,39 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { useApi } from '@/hooks/request';
 import request from '@/utils/request';
-import { postUserLogin} from '@/api/auth';
+import { postUserLogin } from '@/api/auth';
 import { useAppDispatch } from '@/hooks/store';
-import { RootState } from '@/store';
 import style from './login.module.css';
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
 import logo from '&/assets/logo.png';
 import { getUserInfo } from '@/api/user';
 import debounce from 'lodash/debounce';
+import { message } from 'antd';
 
 const Login: React.FC = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
-    const dispatch = useAppDispatch();
+    const [showRegister, setShowRegister] = useState(false);
+    const [inviteCode, setInviteCode] = useState('');
+    const [registerEmail, setRegisterEmail] = useState('');
+    const [registerPassword, setRegisterPassword] = useState('');
+    const [emailCode, setEmailCode] = useState('');
+    const [codeBtnDisabled, setCodeBtnDisabled] = useState(false);
+    const [codeBtnText, setCodeBtnText] = useState('发送验证码');
+    const [codeTimer, setCodeTimer] = useState<NodeJS.Timeout | null>(null);
 
+    const dispatch = useAppDispatch();
+    const [messageApi, contextHolder] = message.useMessage();
     const { refresh: postUserLoginRefresh } = useApi(
         () => request.post(postUserLogin, { email, password}), false);
     const { refresh: getUserInfoRefresh } = useApi(
         () => request.get(getUserInfo), false);
-
     const nav = useNavigate();
+    const showErrorMessage = async (msg: string) => {
+        messageApi.error(msg);
+    };
+
+    // 登录逻辑
     const handleLogin = debounce(async () => {
         try {
             const res =await postUserLoginRefresh({email, password});
@@ -32,35 +43,141 @@
                 return;
             }
             dispatch({ type: "user/login", payload: res });
-            
+
             const userInfo = await getUserInfoRefresh();
-            if (userInfo==null || (userInfo as any).error) {
-                alert('Failed to fetch user information.');
-                return;
+            if (userInfo == null || (userInfo as any).error) {
+                throw new Error('获取用户信息失败');
             }
             dispatch({ type: "user/getUserInfo", payload: userInfo });
             nav('/');
         } catch (error) {
-            alert('An unexpected error occurred. Please try again later.');
-            if (error instanceof Error) {
-              console.error(error.message); // 明确访问 message 属性
-            } else {
-              console.error('Unknown error occurred');
-            }
+            showErrorMessage('登录失败，请检查您的用户名和密码');
         }
     }, 1000) as () => void;
 
+    // 发送验证码逻辑
+    const handleSendCode = async () => {
+        if (!registerEmail) {
+            showErrorMessage('请填写邮箱');
+            return;
+        }
+        setCodeBtnDisabled(true);
+        let seconds = 60;
+        setCodeBtnText(`已发送(${seconds}s)`);
+        const timer = setInterval(() => {
+            seconds -= 1;
+            setCodeBtnText(`已发送(${seconds}s)`);
+            if (seconds <= 0) {
+                clearInterval(timer);
+                setCodeBtnDisabled(false);
+                setCodeBtnText('发送验证码');
+            }
+        }, 1000);
+        setCodeTimer(timer);
+        // TODO: 调用发送验证码接口
+        message.success('验证码已发送');
+    };
+
+    // 切换回登录
+    const handleBackToLogin = () => {
+        setShowRegister(false);
+        setInviteCode('');
+        setRegisterEmail('');
+        setRegisterPassword('');
+        setEmailCode('');
+        if (codeTimer) clearInterval(codeTimer);
+        setCodeBtnDisabled(false);
+        setCodeBtnText('发送验证码');
+    };
+
+    // 注册逻辑（仅前端校验，实际应调用注册接口）
+    const handleRegister = async () => {
+        if (!inviteCode || !registerEmail || !registerPassword || !emailCode) {
+            showErrorMessage('请填写完整信息');
+            return;
+        }
+        // TODO: 调用注册接口
+        message.success('注册成功，请登录');
+        handleBackToLogin();
+    };
+
     const handleLogoClick = () => {
         nav('/');
-    }
+    };
+
     return (
         <div className={style.form}>
-            <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick}></img>
-            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={style.email} placeholder="Enter your email" />
-            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className={style.password} placeholder="Enter your password" />
-            <button className={style.submit} onClick={() => handleLogin()}>登录</button>
-            <button className={style.register}>注册</button>
-            <button className={style.forget}> 忘记密码</button>
+            {contextHolder}
+            <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick} />
+            {!showRegister ? (
+                <>
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className={style.email}
+                        placeholder="Enter your email"
+                    />
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className={style.password}
+                        placeholder="Enter your password"
+                    />
+                    <button className={style.submit} onClick={() => handleLogin()}>登录</button>
+                    <button className={style.register} onClick={() => setShowRegister(true)}>注册</button>
+                    <button className={style.forget}>忘记密码</button>
+                </>
+            ) : (
+                <>
+                    <input
+                        type="text"
+                        value={inviteCode}
+                        onChange={(e) => setInviteCode(e.target.value)}
+                        className={style.invite}
+                        placeholder="邀请码"
+                    />
+                    <input
+                        type="email"
+                        value={registerEmail}
+                        onChange={(e) => setRegisterEmail(e.target.value)}
+                        className={style.email}
+                        placeholder="邮箱"
+                    />
+                    <input
+                        type="password"
+                        value={registerPassword}
+                        onChange={(e) => setRegisterPassword(e.target.value)}
+                        className={style.password}
+                        placeholder="密码"
+                    />
+                    <div style={{ display: 'flex',width:'80%', alignItems: 'center', gap: 8, padding:'10px' }}>
+                        <input
+                            type="text"
+                            value={emailCode}
+                            onChange={(e) => setEmailCode(e.target.value)}
+                            className={style.code}
+                            placeholder="邮箱验证码"
+                            style={{ flex: 1 }}
+                        />
+                        <button
+                            className={style.sendCode}
+                            onClick={handleSendCode}
+                            disabled={codeBtnDisabled}
+                            style={{
+                                background: codeBtnDisabled ? '#ccc' : undefined,
+                                color: codeBtnDisabled ? '#888' : undefined,
+                                cursor: codeBtnDisabled ? 'not-allowed' : 'pointer'
+                            }}
+                        >
+                            {codeBtnText}
+                        </button>
+                    </div>
+                    <button className={style.submit} onClick={handleRegister}>注册</button>
+                    <button className={style.back} onClick={handleBackToLogin}>返回登录</button>
+                </>
+            )}
         </div>
     );
 };
diff --git a/src/views/postDetail/postDetail.module.css b/src/views/postDetail/postDetail.module.css
new file mode 100644
index 0000000..46c2176
--- /dev/null
+++ b/src/views/postDetail/postDetail.module.css
@@ -0,0 +1,89 @@
+.commentList .ant-list-item {
+    min-height: 300px;
+    height: 300px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    /* 可选：让内容垂直居中可用 align-items: center; */
+}
+.contentArea {
+  width: 100%;
+  max-width: 900px;
+  margin: 32px auto 0 auto;
+  padding: 0 16px 32px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.card {
+  border-radius: 10px;
+  background: var(--card-bg);
+}
+
+.metaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.locked {
+  margin: 12px 0;
+  color: #d4380d;
+  font-weight: bold;
+}
+
+.contentText {
+  font-size: 17px;
+  color: var(--text-color);
+  line-height: 1.8;
+  margin-top: 12px;
+}
+
+.addCommentCard {
+  border-radius: 10px;
+  background: var(--card-bg);
+}
+
+.textarea {
+  font-size: 15px;
+}
+
+.commentListCard {
+  border-radius: 10px;
+  background: var(--card-bg);
+}
+
+.commentList .ant-list-item,
+.replyList .ant-list-item {
+  min-height: 120px;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--border-color);
+  padding: 24px 16px;
+}
+
+.replyList {
+  margin-left: 32px;
+  background: transparent;
+}
+
+.replyItem {
+  background: #f6f8fa;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  padding: 12px 16px;
+}
+
+@media (max-width: 600px) {
+  .contentArea {
+    max-width: 100%;
+    padding: 0 4px 24px 4px;
+  }
+  .card, .addCommentCard, .commentListCard {
+    padding: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/views/postDetail/postDetail.tsx b/src/views/postDetail/postDetail.tsx
new file mode 100644
index 0000000..d6029a8
--- /dev/null
+++ b/src/views/postDetail/postDetail.tsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import styles from './PostDetail.module.css';
+import { Card, List, Typography, Button, Input, Spin, Empty, Divider } from 'antd';
+import { getPostDetail } from '@/api/post';
+import { getPostComments } from '@/api/comment';
+import { useSearchParams } from 'react-router-dom';
+import request from '@/utils/request';
+import { useApi } from '@/hooks/request';
+import Navbar from '@/components/navbar/navbar';
+import { DownloadOutlined, LikeOutlined, LikeFilled } from '@ant-design/icons';
+
+const { Title, Text, Paragraph } = Typography;
+const { TextArea } = Input;
+
+export interface PostResponse {
+  postId?: number;
+  userId?: number;
+  postTitle?: string;
+  postContent?: string;
+  createdAt?: number;
+  postType?: string;
+  isLocked?: boolean;
+  lockedReason?: string;
+  lockedAt?: string;
+  lockedBy?: number;
+  viewCount?: number;
+  hotScore?: number;
+  lastCalculated?: number;
+  [property: string]: any;
+}
+
+export interface CommentResponse {
+  commentId?: number;
+  content?: string;
+  createdAt?: number;
+  parentCommentId?: number | null;
+  postId?: number;
+  replies?: CommentResponse[];
+  userId?: number;
+  [property: string]: any;
+}
+
+const PostDetail: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const postId = searchParams.get('postId');
+  const { refresh: getPostDetailRefresh } = useApi(() => request.get(getPostDetail + `/${postId}`), false);
+  const { refresh: getPostCommentsRefresh } = useApi(() => request.get(getPostComments + `/${postId}`), false);
+  const [post, setPost] = useState<PostResponse | null>(null);
+  const [comments, setComments] = useState<CommentResponse[]>([]);
+  const [newComment, setNewComment] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [liked, setLiked] = useState(false);
+
+  useEffect(() => {
+    if (!postId) return;
+    const fetchData = async () => {
+      setLoading(true);
+      const postRes = await getPostDetailRefresh();
+      if (!postRes || (postRes as any).error) {
+        setLoading(false);
+        return;
+      }
+      setPost(postRes as PostResponse);
+
+      const commentsRes = await getPostCommentsRefresh();
+      setComments(commentsRes as CommentResponse[]);
+      setLoading(false);
+    };
+    fetchData();
+  }, [postId]);
+
+  if (loading) return <div className={styles.center}><Spin /></div>;
+  if (!post) return <div className={styles.center}><Empty description="未找到帖子" /></div>;
+
+  return (
+    <div className={styles.container}>
+      {/* 固定导航栏 */}
+      <div className={styles.nav}>
+        <Navbar current={post.postType} />
+      </div>
+      {/* 内容区域 */}
+      <div className={styles.contentArea}>
+        <Card
+          title={<Title level={3} style={{ margin: 0 }}>{post.postTitle || "帖子标题"}</Title>}
+          className={styles.card}
+          bordered={false}
+          style={{ marginBottom: 24, boxShadow: '0 4px 24px rgba(0,0,0,0.08)' }}
+          extra={
+            <div style={{ display: 'flex', gap: 16 }}>
+              <Button
+                type="primary"
+                icon={<DownloadOutlined />}
+                onClick={() => {
+                  // 下载逻辑
+                  window.open(`/api/download/post/${post.postId}`, '_blank');
+                }}
+              >
+                下载
+              </Button>
+              <Button
+                type="primary"
+                icon={liked ? <LikeFilled /> : <LikeOutlined />}
+                style={liked ? { background: '#ccc', borderColor: '#ccc', color: '#888', cursor: 'not-allowed' } : {}}
+                disabled={liked}
+                onClick={() => setLiked(true)}
+              >
+                {liked ? '已点赞' : '点赞'}
+              </Button>
+            </div>
+          }
+        >
+          <div className={styles.metaRow}>
+            <Text type="secondary">作者ID: {post.userId}</Text>
+            <Text type="secondary">发布时间: {post.createdAt ? new Date(post.createdAt).toLocaleString() : "未知"}</Text>
+            <Text type="secondary">浏览量: {post.viewCount}</Text>
+            <Text type="secondary">类型: {post.postType}</Text>
+            <Text type="secondary">热度: {post.hotScore}</Text>
+            <Text type="secondary">最后计算: {post.lastCalculated ? new Date(post.lastCalculated).toLocaleString() : "无"}</Text>
+          </div>
+          {post.isLocked && (
+            <div className={styles.locked}>
+              <Text type="danger">本帖已锁定</Text>
+              {post.lockedReason && <Text type="secondary">（原因：{post.lockedReason}）</Text>}
+              {post.lockedAt && <Text style={{ marginLeft: 8 }}>锁定时间: {post.lockedAt}</Text>}
+              {post.lockedBy !== 0 && <Text style={{ marginLeft: 8 }}>锁定人ID: {post.lockedBy}</Text>}
+            </div>
+          )}
+          <Divider style={{ margin: '16px 0' }} />
+          <Paragraph className={styles.contentText}>{post.postContent || "暂无内容"}</Paragraph>
+        </Card>
+
+        {/* 发布评论区域 */}
+        <Card className={styles.addCommentCard} style={{ marginBottom: 32, boxShadow: '0 2px 12px rgba(0,0,0,0.06)' }}>
+          <Title level={5} style={{ marginBottom: 12 }}>发布评论</Title>
+          <TextArea
+            rows={4}
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder="写下你的评论..."
+            className={styles.textarea}
+          />
+          <Button
+            type="primary"
+            style={{ marginTop: 12, float: 'right' }}
+            onClick={() => setNewComment('')}
+            disabled={!newComment.trim()}
+          >
+            评论
+          </Button>
+          <div style={{ clear: 'both' }} />
+        </Card>
+
+        <Card
+          className={styles.commentListCard}
+          title={<Title level={4} style={{ margin: 0 }}>评论区</Title>}
+          bodyStyle={{ padding: 0 }}
+        >
+          <List
+            className={styles.commentList}
+            dataSource={comments}
+            locale={{ emptyText: <Empty description="暂无评论" /> }}
+            renderItem={(item) => (
+              <List.Item className={styles.commentItem} key={item.commentId}>
+                <List.Item.Meta
+                  title={<Text strong>用户ID: {item.userId}</Text>}
+                  description={
+                    <>
+                      <Text>{item.content}</Text>
+                      <div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
+                        {item.createdAt && new Date(item.createdAt).toLocaleString()}
+                      </div>
+                    </>
+                  }
+                />
+                {/* 可递归渲染子评论 */}
+                {item.replies && item.replies.length > 0 && (
+                  <List
+                    className={styles.replyList}
+                    dataSource={item.replies}
+                    renderItem={reply => (
+                      <List.Item className={styles.replyItem} key={reply.commentId}>
+                        <List.Item.Meta
+                          title={<Text strong>用户ID: {reply.userId}</Text>}
+                          description={
+                            <>
+                              <Text>{reply.content}</Text>
+                              <div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
+                                {reply.createdAt && new Date(reply.createdAt).toLocaleString()}
+                              </div>
+                            </>
+                          }
+                        />
+                      </List.Item>
+                    )}
+                  />
+                )}
+              </List.Item>
+            )}
+          />
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default PostDetail;
\ No newline at end of file
diff --git a/src/views/postDetail/posterInfo.tsx b/src/views/postDetail/posterInfo.tsx
new file mode 100644
index 0000000..8fe381c
--- /dev/null
+++ b/src/views/postDetail/posterInfo.tsx
@@ -0,0 +1,37 @@
+import { PositionType } from 'antd/es/image/style';
+import request from '@/utils/request';
+import { useApi } from '@/hooks/request';
+import React from 'react';
+import { useNavigate } from 'react-router';
+import { postFollowUser } from '@/api/user';
+interface PosterInfoProps {
+    userId: number;
+    userName: string;
+    role:string;
+    avatar: string;
+}
+
+const PosterInfo: React.FC<PosterInfoProps> = (prop:PosterInfoProps) => {
+    const nav = useNavigate();
+    const { refresh } = useApi(()=>request.post(postFollowUser+`userId=${prop.userId}`), false);
+    const handleClick = () => {
+        nav(`/homepage?userId=${prop.userId}`);
+    }
+
+    const handleFollow = () => {
+        refresh()
+    }
+    const { userId, userName, role, avatar } = prop;
+    return (
+        <>
+            <div className="poster-info" onClick={handleClick}>
+                <img src={avatar}></img>
+                <p>{userName}</p>
+                <p>{role}</p>
+            </div>
+            <button className="poster-info-button" />关注
+
+        </>
+
+    );
+}
\ No newline at end of file
diff --git a/src/views/postList/postList.module.css b/src/views/postList/postList.module.css
new file mode 100644
index 0000000..6290106
--- /dev/null
+++ b/src/views/postList/postList.module.css
@@ -0,0 +1,88 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+}
+
+.left {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+}
+
+.navbar {
+    height: 60px;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto; /* 允许垂直滚动 */
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+}
+
+.contentItem {
+    position: relative;
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+.contentItem h3 {
+    margin: 0 0 5px;
+    font-size: 18px;
+    color: #333;
+}
+
+.contentItem p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+}
+
+.contentItem .createDate {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 12px;
+    color: #999;
+}
+
+.noData {
+    text-align: center;
+    color: #999;
+    margin-top: 20px;
+}
+
+.right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+}
+
+.selfStatus {
+    margin-bottom: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    padding: 10px;
+}
+
+.filter {
+    flex: 1;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/src/views/postList/postList.tsx b/src/views/postList/postList.tsx
new file mode 100644
index 0000000..c08b7cf
--- /dev/null
+++ b/src/views/postList/postList.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import style from "./postList.module.css";
+import SelfStatus from "@/components/selfStatus/selfStatus";
+import Navbar from "@/components/navbar/navbar";
+import PostsPanel from "@/components/postsPanel/postsPanel";
+import { getPosts, unknownAPI } from "@/api/post";
+import { Form } from "antd"
+import { useApi } from "@/hooks/request";
+import request from "@/utils/request";
+import { Pagination, PaginationProps } from "antd";
+import { set } from "lodash";
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+
+
+const PostList:React.FC = () => {
+    const [searchParams] = useSearchParams();
+    const type = searchParams.get("type") || ""; 
+    const nav = useNavigate();
+
+    if(type in ['video', 'music', 'game', 'software']) {
+        nav('/')
+    }
+
+    const {data:postList, refresh:getPostList} = useApi(() => request.get(getPosts + `?tags=${[type]}&page=${currentPage}&pageSize=${pageSize}`), false);
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const [pageSize, setPageSize] = React.useState(10);
+    const handlePageChange = (page:number, size?:number) => {
+        setCurrentPage(page);
+        if(size) setPageSize(size);
+        console.log(page, size);
+    };
+
+    const handlePostClick = (postId:number) => {
+        nav(`/postsDetail?postId=${postId}`);
+    }
+
+    useEffect(() => {
+        getPostList();
+    },[currentPage, pageSize]);
+
+    return (
+        <div className={style.container}>
+            <div className={style.left}>
+                <div className={style.navbar}>
+                    <Navbar current={type}/>
+                </div>
+                <div className={style.content}>
+                    {postList && postList.length > 0 ? (
+                        postList.map((post: { postId: number; postTitle: string; postContent: string; createdAt:string }) => (
+                            <div key={post.postId} className={style.contentItem} onClick={() => handlePostClick(post.postId)}>
+                                <h3>{post.postTitle}</h3>
+                                <p>{post.postContent.substring(0, 20)}</p>
+                                <p className={style.createDate}>{post.createdAt}</p>
+                            </div>
+                        ))
+                    ) : (
+                        <div className={style.noData}>未查询到相关帖子</div>
+                    )}
+
+                    <Pagination
+                        showSizeChanger
+                        onShowSizeChange={handlePageChange}
+                        defaultCurrent={1}
+                        total={500}
+                        onChange={handlePageChange}
+                    />
+                </div>
+            </div>
+            <div className={style.right}>
+                <div className={style.selfStatus}>
+                    <SelfStatus/>
+                </div>
+                <div className={style.filter}>
+                    
+                </div> 
+            </div>
+        </div>
+    )
+}
+
+export default PostList;
\ No newline at end of file
diff --git a/test/login.test.tsx b/test/login.test.tsx
deleted file mode 100644
index b342387..0000000
--- a/test/login.test.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import Login from '../src/views/login/login';
-import { useApi } from '@/hooks/request';
-import { useAppDispatch } from '@/hooks/store';
-import { useNavigate } from 'react-router';
-import { useSelector } from 'react-redux';
-
-
-jest.mock('@/hooks/request', () => ({
-  useApi: jest.fn(),
-}));
-// 模拟所有外部依赖
-jest.mock('@/hooks/store', () => ({
-  useAppDispatch: jest.fn(),
-}));
-
-jest.mock('react-router', () => ({
-  useNavigate: jest.fn(),
-}));
-
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(),
-}));
-
-// 类型安全：明确模拟函数的返回类型
-const mockUseApi = useApi as jest.MockedFunction<typeof useApi>;
-const mockUseAppDispatch = useAppDispatch as jest.MockedFunction<typeof useAppDispatch>;
-const mockUseNavigate = useNavigate as jest.MockedFunction<typeof useNavigate>;
-const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
-
-describe('Login Component', () => {
-    const mockDispatch = jest.fn();
-    const mockNavigate = jest.fn();
-    const mockPostRefresh = jest.fn();
-    const mockGetRefresh = jest.fn();
-
-    beforeEach(() => {
-      // 初始化模拟函数返回值
-      mockUseAppDispatch.mockReturnValue(mockDispatch);
-      mockUseNavigate.mockReturnValue(mockNavigate);
-      mockUseSelector.mockImplementation((selector) => selector({ user: { userName: '' } }));
-      
-      // 默认模拟 useApi 返回正常状态
-      mockUseApi
-      .mockReturnValueOnce({
-        data: { token: 'mock-token' },
-        loading: false,
-        error: null,
-        refresh: mockPostRefresh,
-      })
-      .mockReturnValueOnce({
-        data:{
-            'userId' : '001',
-            'userName' : 'san3yuan',
-            'role' : 'manager',
-            'uploadTraffic' : 0,
-            'downloadTraffic': 0,
-            'downloadPoints' : 0,
-            'avatar' : 'https://www.w3school.com.cn/i/photo/tulip.jpg',
-        },
-        loading: false,
-        error: null,
-        refresh: mockGetRefresh,
-      })
-      ;
-    });
-  
-    afterEach(() => {
-      jest.clearAllMocks();
-    });
-  
-    // 测试 1: 基础渲染
-    it('渲染所有输入框和按钮', () => {
-      render(<Login />);
-      expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Enter your password')).toBeInTheDocument();
-      expect(screen.getByText('登录')).toBeInTheDocument();
-      expect(screen.getByText('注册')).toBeInTheDocument();
-      expect(screen.getByText('忘记密码')).toBeInTheDocument();
-    });
-  
-    // 测试 2: 登录成功流程
-    it('点击登录按钮触发API请求、Redux更新和导航', async () => {
-      // 模拟 API 返回有效数据
-      mockPostRefresh.mockResolvedValue({ token: 'mock-token' });
-      mockGetRefresh.mockResolvedValue({
-        'userId' : '001',
-        'userName' : 'san3yuan',
-        'role' : 'manager',
-        'uploadTraffic' : 0,
-        'downloadTraffic': 0,
-        'downloadPoints' : 0,
-        'avatar' : 'https://www.w3school.com.cn/i/photo/tulip.jpg',
-    });
-    
-      render(<Login />);
-      jest.useFakeTimers();
-      fireEvent.click(screen.getByText('登录'));
-      jest.runAllTimers();
-      await waitFor(() => {
-        // 验证 dispatch 调用
-        expect(mockPostRefresh).toHaveBeenCalled();
-      
-        // 验证Redux更新
-        expect(mockDispatch).toHaveBeenNthCalledWith(1, {
-          type: 'user/login',
-          payload: { token: 'mock-token' }
-        });
-
-        // 验证第二次API调用（用户信息）
-        expect(mockGetRefresh).toHaveBeenCalled();
-
-        // 验证用户信息更新
-        expect(mockDispatch).toHaveBeenNthCalledWith(2, {
-          type: 'user/getUserInfo',
-          payload: {
-            'userId' : '001',
-            'userName' : 'san3yuan',
-            'role' : 'manager',
-            'uploadTraffic' : 0,
-            'downloadTraffic': 0,
-            'downloadPoints' : 0,
-            'avatar' : 'https://www.w3school.com.cn/i/photo/tulip.jpg',
-        }
-        });
-      });
-    });  
-  });
\ No newline at end of file
diff --git a/test/postsPanel.test.tsx b/test/postsPanel.test.tsx
deleted file mode 100644
index cd753fc..0000000
--- a/test/postsPanel.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { useApi } from '@/hooks/request';
-import PostsPanel from '@/components/postsPanel/postsPanel';
-
-// 模拟 useApi
-jest.mock('@/hooks/request', () => ({
-    useApi: jest.fn(() => ({
-        data: [], // 默认返回空数组
-        loading: false,
-        error: null,
-    })),
-}));
-describe('PostsPanel Component', () => {
-    const mockUseApi = useApi as jest.MockedFunction<typeof useApi>;
-
-    it('renders the component with a title', () => {
-        // 渲染组件
-        render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
-
-        // 验证标题是否正确渲染
-        expect(screen.getByText('热门帖子')).toBeInTheDocument();
-        expect(screen.getByText('更多')).toBeInTheDocument();
-    });
-
-    it('renders posts when data is available', async () => {
-        // 模拟 API 返回数据
-        mockUseApi.mockReturnValue({
-            data: [
-                { title: 'Post 1', date: '2025-04-01' },
-                { title: 'Post 2', date: '2025-04-02' },
-            ],
-        });
-
-        // 渲染组件
-        render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
-
-        // 验证数据是否正确渲染
-        await waitFor(() => {
-            expect(screen.getByText('Post 1')).toBeInTheDocument();
-            expect(screen.getByText('2025-04-01')).toBeInTheDocument();
-            expect(screen.getByText('Post 2')).toBeInTheDocument();
-            expect(screen.getByText('2025-04-02')).toBeInTheDocument();
-        });
-    });
-
-    it('renders a message when no data is available', async () => {
-        // 模拟 API 返回空数据
-        mockUseApi.mockReturnValue({
-            data: [],
-        });
-
-        // 渲染组件
-        render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
-
-        // 验证无数据时的提示信息
-        await waitFor(() => {
-            expect(screen.getByText('未查询到相关记录')).toBeInTheDocument();
-        });
-    });
-
-    it('handles loading state', () => {
-        // 模拟加载状态
-        mockUseApi.mockReturnValue({
-            data: null,
-        });
-
-        // 渲染组件
-        render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
-
-        // 验证组件是否正确渲染（可以根据需求添加加载状态的测试）
-        expect(screen.getByText('未查询到相关记录')).toBeInTheDocument();
-    });
-});
\ No newline at end of file
diff --git a/test/selfStatus.test.tsx b/test/selfStatus.test.tsx
deleted file mode 100644
index 4bd690e..0000000
--- a/test/selfStatus.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import SelfStatus from '@/components/selfStatus/selfStatus';
-import { render, screen } from '@testing-library/react';
-import { useSelector } from 'react-redux';
-import React from 'react';
-import '@testing-library/jest-dom';
-import { useAppSelector } from '@/hooks/store';
-
-jest.mock('@/hooks/request', () => ({
-    useApi: jest.fn(),
-  }));
-  // 模拟所有外部依赖
-  jest.mock('@/hooks/store', () => ({
-    useAppDispatch: jest.fn(),
-    useAppSelector: jest.fn(),
-  }));
-  
-  jest.mock('react-router', () => ({
-    useNavigate: jest.fn(),
-  }));
-  
-  jest.mock('react-redux', () => ({
-    useSelector: jest.fn(),
-  }));
-
-
-describe('SelfStatus Component', () => {
-    it('renders correctly', () => {
-        (useAppSelector as jest.Mock).mockImplementation((selector) => selector({
-            user: {
-                userId: '001',
-                userName: 'san3yuan',
-                role: 'manager',
-                uploadTraffic: 0,
-                downloadTraffic: 0,
-                downloadPoints: 0,
-            },
-            setting: {
-                theme: 'light',
-            },
-        }));
-        
-        render(<SelfStatus />);
-        
-        expect(screen.getByText('san3yuan')).toBeInTheDocument();
-        expect(screen.getByText('用户组: manager')).toBeInTheDocument();
-        expect(screen.getByText('上传量: 0')).toBeInTheDocument();
-        expect(screen.getByText('下载量: 0')).toBeInTheDocument();
-        expect(screen.getByText('下载积分: 0')).toBeInTheDocument();
-    })
-    it('calculates and displays share ratio correctly', () => {
-        (useAppSelector as jest.Mock).mockImplementation((selector) => selector({
-            user: {
-                uploadTraffic: 100,
-                downloadTraffic: 50,
-            },
-        }));
-        render(<SelfStatus />);
-        expect(screen.getByText('分享率: 2.00')).toBeInTheDocument();
-    });
-    it('handles empty data gracefully', () => {
-        (useAppSelector as jest.Mock).mockImplementation((selector) => selector({
-            user: {
-                userName: '',
-                role: '',
-                uploadTraffic: null,
-                downloadTraffic: null,
-                downloadPoints: null,
-            },
-        }));
-        render(<SelfStatus />);
-        expect(screen.getByText('用户组: N/A')).toBeInTheDocument();
-        expect(screen.getByText('上传量: 0')).toBeInTheDocument();
-        expect(screen.getByText('下载量: 0')).toBeInTheDocument();        
-        expect(screen.getByText('分享率: N/A')).toBeInTheDocument();
-        expect(screen.getByText('下载积分: 0')).toBeInTheDocument();
-    });
-});
\ No newline at end of file