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 a5156f4..834e841 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,7 +1,10 @@
-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";
 interface SelfStatusProps {
     className?: string;
 }
@@ -13,11 +16,25 @@
     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]);
 
     return (
         <div className={style.container}>
             <div className={style.left}>
-                <img className={style.avatar} 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 b49490a..9c38334 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;
   }
   
 body.dark {
@@ -35,5 +36,6 @@
     --text-color: #f1f1f1;
     --card-bg: #1e1e1e;
     --border-color: #444444;
+    --select-bg-color:#3a466b;
   }
   
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 69441df..9205b1b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,13 @@
-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 { setupMock } from "./mock/index";
+import { useEffect } from "react";
+import { checkAndRefreshToken } from "./utils/jwt";
 
 if(localStorage.getItem("theme") === null) {
     localStorage.setItem("theme", "light");
@@ -13,7 +16,9 @@
     document.body.className=localStorage.getItem("theme")!;
 }
 
+setupMock()
 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 fabb34e..4429216 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -3,6 +3,7 @@
 import {setupAuthMock}  from './auth'
 import { setupUserMock } from './user';
 import { setupPostMock } from './post';
+import { setupCommentMock } from './comment';
 
 // 创建 Mock 实例
 export const mock = new MockAdapter(instance, { 
@@ -18,9 +19,8 @@
   setupAuthMock(mock)
   setupUserMock(mock)
   setupPostMock(mock)
+  setupCommentMock(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 c56ada3..93e6cf9 100644
--- a/src/route/index.tsx
+++ b/src/route/index.tsx
@@ -6,6 +6,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([
     {
@@ -24,6 +26,14 @@
                         element:<Forum/>
 
                     },
+                    {
+                        path: '/posts',
+                        element: <PostList/>
+                    },
+                    {
+                        path: '/postsDetail',
+                        element: <PostDetail/>
+                    }
                 ]
             },
         ]
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 1eaad87..273a9c4 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -12,6 +12,7 @@
   // 请求拦截器
   instance.interceptors.request.use(
     (config) => {
+      console.log('Request Config:', config)
       // 添加认证 token
       const token = localStorage.getItem('token')
       if (token) {
@@ -27,7 +28,6 @@
   // 响应拦截器
   instance.interceptors.response.use(
     (response) => {
-      console.log('Response:', response)
       // 统一处理响应数据格式
       if (response.status === 200) {
         return response.data
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 c0c2e0e..f41e53f 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,8 +12,13 @@
 import logo from "&/assets/logo.png";
 import { useAppDispatch } from "@/hooks/store";
 import { useSelector } from "react-redux";
+
+import { checkAndRefreshToken } from "@/utils/jwt";
 const Frame:React.FC = () => {
 
+    useEffect(() => {
+        checkAndRefreshToken();
+    }, []);
     const dispatch = useAppDispatch();
 
     const showSearch = useSelector((state: any) => state.setting.showSearch); 
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index bd429c7..562f178 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -11,38 +11,39 @@
 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 { refresh: postUserLoginRefresh } = useApi(() => request.post(postUserLogin, {}), false);
+    const { refresh: postUserLoginRefresh } = useApi(() => request.post(postUserLogin, {email, password}), false);
     const { refresh: getUserInfoRefresh } = useApi(() => request.get(getUserInfo), false);
+    const [messageApi, contextHolder] = message.useMessage();
 
     const nav = useNavigate();
+    const showErrorMessage = async (message: string) => {
+        messageApi.error(message);
+    };
     const handleLogin = debounce(async () => {
         try {
-            const res =await postUserLoginRefresh();
-            if (res==null ||(res as any).error) {
-                alert('Login failed. Please check your credentials.');
-                return;
+            const res = await postUserLoginRefresh();
+            console.log(res);
+            if (res == null || (res as any).error) {
+                throw new Error('登录失败');
             }
             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;
 
@@ -51,6 +52,7 @@
     }
     return (
         <div className={style.form}>
+            {contextHolder}
             <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" />
diff --git a/src/views/postDetail/postDetail.module.css b/src/views/postDetail/postDetail.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/postDetail/postDetail.module.css
diff --git a/src/views/postDetail/postDetail.tsx b/src/views/postDetail/postDetail.tsx
new file mode 100644
index 0000000..a40fb68
--- /dev/null
+++ b/src/views/postDetail/postDetail.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import styles from './PostDetail.module.css';
+import { Card, List, Typography, Button, Input, Spin, Empty } from 'antd';
+type CommentProps = {
+	children?: React.ReactNode;
+};
+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';
+
+const { Title, Text, Paragraph } = Typography;
+const { TextArea } = Input;
+
+export interface PostResponse {
+	createdAt?: number;
+	hotScore?: number;
+	lastCalculated?: number;
+	postContent?: string;
+	postId?: number;
+	postTitle?: string;
+	postType?: string;
+	userId?: number;
+	viewCount?: 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);
+
+	useEffect(() => {
+		console.log('postId', postId);
+		if (!postId) return;
+		const fetchData = async () => {
+			setLoading(true);
+			const res = await getPostDetailRefresh();
+			if (res == null || (res as any).error) {
+				setLoading(false);
+				return;
+			}
+			setPost(res as PostResponse);
+			await getPostCommentsRefresh();
+			setComments(res 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.content}>
+				<div className={styles.postDetail}>
+						
+				</div >
+				<Card title={post.postTitle} className={styles.card}>
+					<Paragraph>{post.postContent}</Paragraph>
+					<div className={styles.actions}>
+						<Button type="primary" onClick={() => setNewComment('')}>评论</Button>
+					</div>
+				</Card>
+
+				<List
+					className={styles.commentList}
+					header={<Title level={4}>评论区</Title>}
+					dataSource={comments}
+					renderItem={(item) => (
+						<List.Item key={item.commentId}>
+							<List.Item.Meta
+								title={<Text strong>{item.userId}</Text>}
+								description={<Text>{item.content}</Text>}
+							/>
+						</List.Item>
+					)}
+				/>
+
+				<TextArea
+					rows={4}
+					value={newComment}
+					onChange={(e) => setNewComment(e.target.value)}
+					placeholder="写下你的评论..."
+				/>
+				</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