diff --git a/src/api/post.ts b/src/api/post.ts
new file mode 100644
index 0000000..99dc8fa
--- /dev/null
+++ b/src/api/post.ts
@@ -0,0 +1 @@
+export const hotPosts='/post/hot'
\ No newline at end of file
diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css
new file mode 100644
index 0000000..b531f39
--- /dev/null
+++ b/src/components/navbar/navbar.module.css
@@ -0,0 +1,12 @@
+.menu{
+    background-color: var(--card-bg);
+    font-size: 1rem;
+    
+    display:flex;
+    justify-content:space-between;
+}
+
+.menu *{
+    color:var(--text-color);
+    transition:none;
+}
\ No newline at end of file
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
new file mode 100644
index 0000000..a6c1fe7
--- /dev/null
+++ b/src/components/navbar/navbar.tsx
@@ -0,0 +1,139 @@
+import React, { use } from "react";
+import Icon, {
+    HomeOutlined,
+} from "@ant-design/icons";
+import { Space } from 'antd';
+import type { GetProps } from 'antd';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import { useState } from "react";
+import style from './navbar.module.css'
+
+
+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>
+      <path d="M85.333333 348.091733V764.586667a153.6 153.6 0 0 0 153.6 153.6h561.578667a153.6 153.6 0 0 0 153.6-153.6V348.091733a153.6 153.6 0 0 0-153.6-153.6H238.933333a153.6 153.6 0 0 0-153.6 153.6z m68.266667 0a85.333333 85.333333 0 0 1 85.333333-85.333333h561.578667a85.333333 85.333333 0 0 1 85.333333 85.333333V764.586667a85.333333 85.333333 0 0 1-85.333333 85.333333H238.933333a85.333333 85.333333 0 0 1-85.333333-85.333333V348.091733z" fill="#000000" p-id="7332"></path><path d="M401.885867 182.254933l-65.467734-69.188266a34.133333 34.133333 0 1 0-49.578666 46.933333l65.450666 69.1712a34.133333 34.133333 0 0 0 49.595734-46.916267zM635.989333 182.254933l65.467734-69.188266a34.133333 34.133333 0 1 1 49.578666 46.933333l-65.467733 69.1712a34.133333 34.133333 0 0 1-49.578667-46.916267zM383.556267 472.405333v167.168a85.333333 85.333333 0 0 0 128.733866 73.454934l141.482667-83.575467a85.333333 85.333333 0 0 0 0-146.944l-141.482667-83.575467a85.333333 85.333333 0 0 0-128.733866 73.454934z m68.266666 0a17.066667 17.066667 0 0 1 25.7536-14.711466l141.4656 83.592533a17.066667 17.066667 0 0 1 0 29.3888l-141.482666 83.575467a17.066667 17.066667 0 0 1-25.736534-14.677334v-167.185066z" fill="#000000" p-id="7333"></path>
+    </svg>
+);
+const MusicSvg = () => (
+    <svg width="1em" height="1em" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2776" viewBox="0 0 1024 1024">
+        <title>music icon</title>
+        <path d="M895.456 770.56C895.552 769.696 896 768.896 896 768L896 160c0-1.056-0.512-1.984-0.608-3.008-0.032-1.664 0.448-3.232 0.16-4.928-2.88-17.408-19.328-29.184-36.8-26.304l-480 80c-17.408 2.912-29.216 19.392-26.304 36.832 0.256 1.472 1.024 2.656 1.44 4.032C352.96 249.664 352 252.672 352 256l0 429.6c-20.128-9.376-43.648-14.784-69.408-14.784-21.312 0-42.816 3.456-63.968 10.336-39.616 12.8-73.536 36.224-95.584 65.984-24.064 32.512-31.68 70.24-20.864 103.648 15.648 48.288 66.656 79.456 129.92 79.456 21.248 0 42.72-3.456 63.904-10.304 58.656-19.04 100.288-59.2 115.04-103.808C413.888 811.328 416 806.016 416 800l0-5.312c1.056-8.48 1.056-16.96 0-25.472L416 264.448l416-69.344 0 490.88c-20.32-9.632-44.096-15.2-70.176-15.2-21.28 0-42.816 3.456-63.968 10.336-39.584 12.8-73.568 36.224-95.584 65.984-24.096 32.512-31.68 70.24-20.864 103.648 15.648 48.288 66.656 79.456 129.92 79.456 21.248 0 42.752-3.456 63.904-10.304C853.472 894.56 902.176 831.68 895.456 770.56z" fill="#5D646F" p-id="2777"></path>
+      
+    </svg>
+);
+const GameSvg = () => (
+    <svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" p-id="8400" viewBox="0 0 1024 1024">
+        <title>game icon</title>
+        <path d="M683.2 588.8m-43.2 0a43.2 43.2 0 1 0 86.4 0 43.2 43.2 0 1 0-86.4 0Z" p-id="8401"></path><path d="M942.4 358.4c-30.4-17.6-64-25.6-97.6-25.6H555.2v-256c0-25.6-17.6-43.2-43.2-43.2s-43.2 17.6-43.2 43.2v256H174.4C81.6 332.8 0 414.4 0 512v299.2c0 97.6 81.6 179.2 174.4 179.2 84.8 0 158.4-64 174.4-145.6h324.8c17.6 81.6 84.8 145.6 174.4 145.6 97.6 0 174.4-81.6 174.4-179.2V512c1.6-59.2-28.8-120-80-153.6z m-4.8 456c0 51.2-36.8 94.4-88 94.4s-89.6-43.2-89.6-94.4c0-30.4-20.8-56-56-56H353.6c-64 0-84.8 25.6-84.8 56 0 51.2-43.2 89.6-89.6 89.6-51.2 0-89.6-43.2-89.6-94.4V507.2c-4.8-46.4 38.4-89.6 84.8-89.6H848c25.6 0 46.4 8 64 30.4 17.6 17.6 25.6 38.4 25.6 64v302.4z" p-id="8402"></path><path d="M340.8 545.6h-43.2v-43.2c0-25.6-17.6-43.2-43.2-43.2s-43.2 17.6-43.2 43.2v43.2h-43.2c-25.6 0-43.2 17.6-43.2 43.2s17.6 43.2 43.2 43.2h43.2v43.2c0 25.6 17.6 43.2 43.2 43.2s43.2-17.6 43.2-43.2v-43.2h43.2c25.6 0 43.2-17.6 43.2-43.2s-17.6-43.2-43.2-43.2z" p-id="8403"></path><path d="M852.8 588.8m-43.2 0a43.2 43.2 0 1 0 86.4 0 43.2 43.2 0 1 0-86.4 0Z" p-id="8404"></path><path d="M768 504m-43.2 0a43.2 43.2 0 1 0 86.4 0 43.2 43.2 0 1 0-86.4 0Z" p-id="8405"></path><path d="M768 673.6m-43.2 0a43.2 43.2 0 1 0 86.4 0 43.2 43.2 0 1 0-86.4 0Z" p-id="8406"></path>
+    </svg>
+);
+const SoftwareSvg = () => (
+    <svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" p-id="10283" viewBox="0 0 1024 1024">
+        <title>software icon</title>
+        <path d="M398.208 113.792v284.448H113.76V113.792h284.448z m0-56.896H113.76c-31.296 0-56.896 25.6-56.896 56.896v284.448c0 31.296 25.6 56.896 56.896 56.896h284.448c31.296 0 56.896-25.6 56.896-56.896V113.792c0-31.296-25.6-56.896-56.896-56.896z m0 568.896v284.448H113.76v-284.448h284.448z m0-56.896H113.76c-31.296 0-56.896 25.6-56.896 56.896v284.448c0 31.296 25.6 56.896 56.896 56.896h284.448c31.296 0 56.896-25.6 56.896-56.896v-284.448c0-31.296-25.6-56.896-56.896-56.896z m512-455.104v284.448h-284.448V113.792h284.448z m0-56.896h-284.448c-31.296 0-56.896 25.6-56.896 56.896v284.448c0 31.296 25.6 56.896 56.896 56.896h284.448c31.296 0 56.896-25.6 56.896-56.896V113.792c0-31.296-25.6-56.896-56.896-56.896z m0 568.896v284.448h-284.448v-284.448h284.448z m0-56.896h-284.448c-31.296 0-56.896 25.6-56.896 56.896v284.448c0 31.296 25.6 56.896 56.896 56.896h284.448c31.296 0 56.896-25.6 56.896-56.896v-284.448c0-31.296-25.6-56.896-56.896-56.896z" p-id="10284"></path>
+    </svg>
+);
+const ChatSvg = () => (
+    <svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" p-id="15809" viewBox="0 0 1024 1024">
+        <title>chat icon</title>
+        <path d="M920.642991 1.684336h-583.775701c-48.08972 0-87.327103 39.428785-87.327103 87.738617v88.217122H103.596262c-48.328972 0-87.566355 39.419215-87.566355 87.977869V675.935701c0 48.558654 39.237383 87.977869 87.566355 87.977869H133.024299v229.31858a28.901682 28.901682 0 0 0 18.42243 27.159925c3.588785 1.435514 7.17757 2.162841 10.766355 2.162841a29.284486 29.284486 0 0 0 21.293458-9.129869L418.691589 763.674318h268.201869c23.685981 0 44.740187-10.335701 60.770093-26.202916l93.069159 98.552822c5.742056 6.010019 13.398131 9.139439 21.293458 9.13944 3.588785 0 7.17757-0.727327 10.766355-2.162842a29.265346 29.265346 0 0 0 18.42243-27.169495V587.718579H920.642991c48.08972 0 87.327103-39.428785 87.327102-87.738616v-410.55701C1007.730841 41.103551 968.73271 1.684336 920.642991 1.684336zM686.893458 705.019215h-281.839252c-9.809346 0-18.183178 5.292262-23.446729 12.737794L191.401869 919.437159V735.547813c0-0.239252-0.239252-0.478505-0.239252-0.717757 0-0.239252 0.239252-0.478505 0.239252-0.727327 0-16.096897-13.158879-29.322766-29.188785-29.322766H103.596262c-16.029907 0-29.188785-13.216299-29.188785-29.322767V265.617944c0-16.106467 13.158879-29.332336 29.188785-29.332337h145.943925v263.943178c0 48.309832 39.237383 87.729047 87.327103 87.729047h269.876635l101.442991 107.453009c-5.502804 5.761196-12.919626 9.608374-21.293458 9.608374z m262.699065-204.8c0 16.106467-12.919626 29.093084-28.949532 29.093084h-58.616823c-16.029907 0-29.188785 13.206729-29.188785 29.322766v183.889346l-192.358878-204.082243-0.239253-0.239252c-1.914019-1.923589-4.06729-3.129421-6.459813-4.564935-0.957009-0.727327-1.914019-1.684336-3.11028-1.923588-0.957009-0.478505-1.914019-0.239252-2.871028-0.727328a24.757832 24.757832 0 0 0-8.373832-1.684336H336.86729a28.968673 28.968673 0 0 1-28.949533-29.083514V89.422953c0-16.106467 12.919626-29.093084 28.949533-29.093084h583.775701a28.968673 28.968673 0 0 1 28.949532 29.093084v410.796262z" fill="#2E323F" p-id="15810"></path>
+    </svg>
+);
+
+
+const MusicIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={MusicSvg} {...props} />
+);
+const VideoIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={VideoSvg} {...props} />
+);
+const GameIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={GameSvg} {...props} />
+);
+const SoftwareIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={SoftwareSvg} {...props} />
+);
+const ChatIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={ChatSvg} {...props} />
+);
+
+
+const items: MenuItem[] = [
+{
+    key: 'home',
+    icon: <HomeOutlined />,
+    label: (
+    <a href={{web_base_url}+'/'}>
+        首页
+    </a>
+    ),
+},
+{
+    key: 'video',
+    icon: <VideoIcon />,
+    label: (
+    <a href={{web_base_url}+'/posts?type=video'}>
+        影视
+    </a>
+    ),
+},
+{
+    key: 'music',
+    icon: <MusicIcon />,
+    label: (
+    <a href={{web_base_url}+'/posts?type=music'}>
+        音乐
+    </a>
+    ),
+},
+{
+    key: 'game',
+    icon: <GameIcon />,
+    label: (
+    <a href={{web_base_url}+'/posts?type=game'}>
+        游戏
+    </a>
+    ),
+},
+{
+    key: 'software',
+    icon: <SoftwareIcon />,
+    label: (
+    <a href={{web_base_url}+'/posts?type=software'}>
+        软件
+    </a>
+    ),
+},
+{
+    key: 'chat',
+    icon: <ChatIcon />,
+    label: (
+    <a href={{web_base_url}+'/posts?type=chat'}>
+        聊天
+    </a>
+    ),
+},
+];
+
+
+
+
+
+const Navbar: React.FC = () => {
+    const [current, setCurrent] = useState('home');
+
+    const onClick: MenuProps['onClick'] = (e) => {
+        console.log('click ', e);
+        setCurrent(e.key);
+    };
+
+    return <Menu className={style.menu} onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
+}
+
+export default Navbar;
diff --git a/src/components/postsPanel/postsPanel.module.css b/src/components/postsPanel/postsPanel.module.css
new file mode 100644
index 0000000..dc10683
--- /dev/null
+++ b/src/components/postsPanel/postsPanel.module.css
@@ -0,0 +1,38 @@
+.panel{
+    background-color: var(--card-bg);
+    height:100%;
+    width:100%;
+}
+
+.header{
+    border-bottom:1px solid var(--border-color);
+    box-shadow: 1px;
+    height:10%;
+    width:100%;
+    display:flex;
+    justify-content: space-between;
+}
+
+.header .title{
+    font:bold ;
+    color:var(--text-color);
+    
+}
+
+.header .more{
+    font:bold ;
+    color:var(--text-color);
+}
+
+.content .item{
+    display:flex;
+    justify-content:space-between;
+
+}
+.content .item .text{
+    width:70%;
+    overflow-x:hidden;
+    color:var(--text-color);
+}
+
+
diff --git a/src/components/postsPanel/postsPanel.tsx b/src/components/postsPanel/postsPanel.tsx
new file mode 100644
index 0000000..e4f87c0
--- /dev/null
+++ b/src/components/postsPanel/postsPanel.tsx
@@ -0,0 +1,40 @@
+import { useApi } from '@/hooks/request';
+import React, { useCallback } from  'react';
+import request from '@/utils/request'
+import style from './postsPanel.module.css'
+
+
+interface panelProps{
+    name:string,
+    url:string,
+    limit:number
+}
+
+const PostsPanel:React.FC<panelProps> = (props) => {
+    const fenchData = useCallback(() => request.get(props.url), [props.url])
+    const {data} = useApi(fenchData, true);
+
+
+
+    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}>
+                {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>
+                    </div>
+                ))  :(
+                    <div>未查询到相关记录</div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default PostsPanel;
\ No newline at end of file
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index be2a3bc..a5156f4 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -13,7 +13,6 @@
     const downloadTraffic = useAppSelector(state => state.user.downloadTraffic);
     const downloadPoints = useAppSelector(state => state.user.downloadPoints);
     const avatar = useAppSelector(state => state.user.avatar);
-    console.log(avatar)
 
     return (
         <div className={style.container}>
@@ -23,14 +22,14 @@
             <div className={style.right}>
                 <div className={style.info}>
                     <p className={style.userName}>{userName}</p>
-                    <p className={style.role}>角色: {role}</p>
-                    <p className={style.uploadTraffic}>上传量: {uploadTraffic}</p>
-                    <p className={style.downloadTraffic}>下载量: {downloadTraffic}</p>
+                    <p className={style.role}>用户组: {role && role.trim().length? role:'N/A'}</p>
+                    <p className={style.uploadTraffic}>上传量: {uploadTraffic ? uploadTraffic : 0}</p>
+                    <p className={style.downloadTraffic}>下载量: {downloadTraffic ? downloadTraffic : 0}</p>
 
                     <p className={style.shareRatio}>
                         分享率: {uploadTraffic && downloadTraffic ? (uploadTraffic / downloadTraffic).toFixed(2) : "N/A"}
                     </p>
-                    <p className={style.downloadPoints}>下载积分: {downloadPoints}</p>
+                    <p className={style.downloadPoints}>下载积分: {downloadPoints ? downloadPoints : 0}</p>
                 </div>
                 <button className={style.signInButton}>签到</button>
             </div>
diff --git a/src/components/selfStatus/style.module.css b/src/components/selfStatus/style.module.css
index bcf883c..8ed86a7 100644
--- a/src/components/selfStatus/style.module.css
+++ b/src/components/selfStatus/style.module.css
@@ -6,7 +6,7 @@
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 10px;
-    background-color: #f9f9f9;
+    background-color: var(--card-bg);
     width: 100%;
     height: 100%; /* Adjust height as needed */
     box-sizing: border-box;
@@ -48,6 +48,7 @@
 
 .userName {
     font-size: 18px;
+    color:var(--text-color);
     font-weight: bold;
     margin-bottom: 5px;
 }
@@ -56,6 +57,8 @@
 .downloadTraffic,
 .downloadPoints,
 .shareRatio {
+    color:var(--text-color);
+    margin-top:5px;
     font-size: 14px;
     margin-bottom: 5px;
 }
diff --git a/src/global.css b/src/global.css
index 8d1922e..b49490a 100644
--- a/src/global.css
+++ b/src/global.css
@@ -4,7 +4,7 @@
     height: 100vh;
     width: 100vw;
     background-color: #e6f7ff; /* Light blue background */
-    display: flex;
+    /* display: flex; */
     justify-content: center;
     align-items: center;
     font-family: Arial, sans-serif; /* Optional: Set a global font */
@@ -16,9 +16,24 @@
     height: 100vh;
     width: 100vw;
     background-color: #e6f7ff; /* Light blue background */
-    display: flex;
+    /* display: flex; */
     justify-content: center;
     align-items: center;
     font-family: Arial, sans-serif; /* Optional: Set a global font */
     box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+body.light {
+    --bg-color: #f9f9f9;
+    --text-color: #000000;
+    --card-bg: #ffffff;
+    --border-color: #e0e0e0;
+  }
+  
+body.dark {
+    --bg-color: #2b2b2b;
+    --text-color: #f1f1f1;
+    --card-bg: #1e1e1e;
+    --border-color: #444444;
+  }
+  
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 4bd29bd..69441df 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,13 @@
 import { RouterProvider } from "react-router";
 import './global.css';
 
+if(localStorage.getItem("theme") === null) {
+    localStorage.setItem("theme", "light");
+    document.body.className="light";
+}else{
+    document.body.className=localStorage.getItem("theme")!;
+}
+
 const root = createRoot(document.getElementById('root')!)
 root.render(
     <Provider store={store}>
diff --git a/src/mock/auth.d.ts b/src/mock/auth.d.ts
index 70d0d39..0f7494a 100644
--- a/src/mock/auth.d.ts
+++ b/src/mock/auth.d.ts
@@ -1,3 +1,3 @@
 import type MockAdapter from 'axios-mock-adapter';
 
-export declare function setupAuthMock(mock: MockAdapter): void;
\ No newline at end of file
+export declare function setupAuthMock(mock: MockAdapter): void;
diff --git a/src/mock/index.ts b/src/mock/index.ts
index b07a1be..fabb34e 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -1,6 +1,8 @@
 import MockAdapter from 'axios-mock-adapter';
 import instance from '@/utils/axios'
 import {setupAuthMock}  from './auth'
+import { setupUserMock } from './user';
+import { setupPostMock } from './post';
 
 // 创建 Mock 实例
 export const mock = new MockAdapter(instance, { 
@@ -14,6 +16,8 @@
 
   // 加载各模块 Mock
   setupAuthMock(mock)
+  setupUserMock(mock)
+  setupPostMock(mock)
   
   console.log('Mock 模块已加载')
 }
diff --git a/src/mock/post.d.ts b/src/mock/post.d.ts
new file mode 100644
index 0000000..9d00ff3
--- /dev/null
+++ b/src/mock/post.d.ts
@@ -0,0 +1,3 @@
+
+import type MockAdapter from 'axios-mock-adapter';
+export declare function setupPostMock(mock: MockAdapter): void;
\ No newline at end of file
diff --git a/src/mock/post.js b/src/mock/post.js
new file mode 100644
index 0000000..abdfc6a
--- /dev/null
+++ b/src/mock/post.js
@@ -0,0 +1,17 @@
+import Mock from 'mockjs';
+import MockAdapter from 'axios-mock-adapter';
+import {hotPosts} 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'
+        }]);
+        return [200, data];
+      });
+}    
diff --git a/src/mock/user.d.ts b/src/mock/user.d.ts
index 0f12476..9d72eb0 100644
--- a/src/mock/user.d.ts
+++ b/src/mock/user.d.ts
@@ -1,3 +1,2 @@
 import type MockAdapter from 'axios-mock-adapter';
-
 export declare function setupUserMock(mock: MockAdapter): void;
\ No newline at end of file
diff --git a/src/mock/user.js b/src/mock/user.js
index e3ae653..c0e1321 100644
--- a/src/mock/user.js
+++ b/src/mock/user.js
@@ -15,7 +15,7 @@
             'uploadTraffic' : 0,
             'downloadTraffic': 0,
             'downloadPoints' : 0,
-            'avatar' : 0,
+            'avatar' : 'https://www.w3school.com.cn/i/photo/tulip.jpg',
         });
         return [200, data];
       });
diff --git a/src/route/index.tsx b/src/route/index.tsx
index d857a36..c56ada3 100644
--- a/src/route/index.tsx
+++ b/src/route/index.tsx
@@ -2,6 +2,7 @@
 import PrivateRoute from './privateRoute'
 import { useSelector } from 'react-redux'
 import Login from '../views/login/login'
+import Frame from '../views/frame/frame'
 import React from 'react'
 import Forum from '../views/forum'
 import { RootState } from '@/store'
@@ -15,8 +16,15 @@
         redirectPath="/login"/>, 
         children: [
             {
-                index: true,
-                element: <Forum /> // 论坛主页面
+                path:'/',
+                element: <Frame/>,
+                children: [
+                    {
+                        index: true,
+                        element:<Forum/>
+
+                    },
+                ]
             },
         ]
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 5501ef3..57b060a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,10 @@
 import {configureStore} from '@reduxjs/toolkit';
-import userReducer from './userReducer';
+import  userReducer from './userReducer';
+import  settingReducer  from './settingReducer';
 const store = configureStore({
   reducer: {
     user: userReducer,
+    setting:settingReducer,
   }
 });
 
diff --git a/src/store/settingReducer.ts b/src/store/settingReducer.ts
new file mode 100644
index 0000000..ef519b2
--- /dev/null
+++ b/src/store/settingReducer.ts
@@ -0,0 +1,50 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+interface SettingState {
+    theme: string;
+    fontSize: string;
+    showSearch: boolean;
+}
+
+const initialState: SettingState = {
+    theme: localStorage.getItem("theme") || "light",
+    fontSize: localStorage.getItem("font") || "medium",
+    showSearch: false,
+};
+
+const fontSizeMap: Record<string, string> = {
+    small: "12px",
+    medium: "16px",
+    large: "20px",
+};
+document.body.className = initialState.theme; // 设置初始主题
+document.documentElement.style.fontSize = fontSizeMap[initialState.fontSize];
+export const settingSlice = createSlice({
+    name:"setting",
+    initialState,
+    reducers:{
+        toggleSearch: (state) => {
+            state.showSearch = !state.showSearch;
+        },
+        toggleFontSize: (state) => {
+            state.fontSize =
+                state.fontSize === "small"
+                    ? "medium"
+                    : state.fontSize === "medium"
+                    ? "large"
+                    : "small";
+            document.documentElement.style.fontSize = fontSizeMap[state.fontSize]; // 切换字体大小
+            localStorage.setItem("font", state.fontSize); // 保存到 localStorage
+        },
+        toggleTheme: (state) => {
+            const nextTheme = state.theme === "light" ? "dark" : "light";
+            state.theme = nextTheme;
+            document.body.className = nextTheme; // 切换 body 类名用于全局主题
+            localStorage.setItem("theme", nextTheme); // 保存到 localStorage
+            console.log("theme:", nextTheme)
+        },
+    },
+})
+
+export default settingSlice.reducer;
+export const { toggleSearch, toggleFontSize, toggleTheme } = settingSlice.actions;
\ No newline at end of file
diff --git a/src/store/userReducer.ts b/src/store/userReducer.ts
index 61cacb8..bbed95e 100644
--- a/src/store/userReducer.ts
+++ b/src/store/userReducer.ts
@@ -32,7 +32,6 @@
             state.isLogin = true;
         },
         getUserInfo: (state, action) => {
-            
             state.userId = action.payload.userId;
             state.userName = action.payload.userName;
             state.role = action.payload.role;
@@ -40,6 +39,7 @@
             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/views/forum/index.module.css b/src/views/forum/index.module.css
index 53cf91c..5cd586a 100644
--- a/src/views/forum/index.module.css
+++ b/src/views/forum/index.module.css
@@ -1,12 +1,80 @@
-.selfStatus{
-    width:25%;
-    height:45%;
-    position: absolute;
-    right:0%;
-    top:0%;
-    
+/* index.module.css */
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative; /* 新增 */
 }
-.container{
+.up{
+    width: 100%;
+    height: 50%;
+    position: relative; /* 新增 */
+    top: 0%;
+    display: flex;
+    flex-direction: row;
+    border-radius: 8px;
+}
+
+.down{
+    height:48%;
+    width:100%;
+    bottom:0%;
+    display:flex;
+    flex-direction:row;
+}
+
+
+.upright{
+    width:25%;
+}
+.upleft{
+    height:100%;
+    width:75%;
+    margin:5px;
+    display:flex;
+    flex-direction:column;
+}
+
+.upcontent{
+    display:flex;
+    flex-direction: row;
     width:100%;
     height:100%;
+}
+
+.advertisements {
+    width:40%;
+    margin: 5px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.adImage {
+    width: 100%;
+    height: 99%;
+    object-fit: fill;
+    border-radius: 8px;
+}
+
+
+.hotPosts{
+    width:60%;
+    margin:5px;
+}
+
+
+.selfStatus {
+    width: 100%;
+    height: 100%;
+    position: relative; /* 改为绝对定位 */
+    
+    border-radius: 8px;
+}
+
+.newPost,
+.likePost,
+.forsalePost {
+
+    flex:1;
+    margin:5px;
+    border-radius: 8px;
 }
\ No newline at end of file
diff --git a/src/views/forum/index.tsx b/src/views/forum/index.tsx
index dbceffd..345f880 100644
--- a/src/views/forum/index.tsx
+++ b/src/views/forum/index.tsx
@@ -3,14 +3,65 @@
 import SelfStatus from "@/components/selfStatus/selfStatus";
 
 import style from "./index.module.css";
+import Navbar from "@/components/navbar/navbar";
+import PostsPanel from "@/components/postsPanel/postsPanel";
+import { hotPosts } from "@/api/post";
+import { Carousel } from 'antd';
+import ad1 from '&/assets/ad1.png'
+import ad2 from '&/assets/ad2.png'
+import { useEffect } from "react";
 
 export default function Forum() {
+    useEffect(() => {
+        // 禁止滚动
+        document.body.style.overflow = 'hidden';
 
-
+        // 组件卸载时恢复滚动
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+    
+    
     return (
         <div className={style.container}>
-            <div className={style.selfStatus}>
-                <SelfStatus />
+            <div className={style.up}>
+               <div className={style.upleft}>
+                <div className={style.navbar}>
+                    <Navbar/>
+                </div>
+                <div className={style.upcontent}>
+                    <div className={style.advertisements}>
+                        <Carousel arrows infinite={false}>
+                            <div>
+                                <img src={ad1} alt="广告1" className={style.adImage} />
+                            </div>
+                            <div>
+                                <img src={ad2} alt="广告2" className={style.adImage} />
+                            </div>
+                        </Carousel>
+                    </div>
+                    <div className={style.hotPosts}>
+                        <PostsPanel name='热门种子' url={hotPosts} limit={5}/>
+                    </div>
+                </div>
+               </div>
+                <div className={style.upright}>
+                    <div className={style.selfStatus}>
+                        <SelfStatus />
+                    </div>
+                </div> 
+            </div>
+            <div className={style.down}>
+                <div className={style.newPost}>
+                    <PostsPanel name='最新发布' url={hotPosts} limit={5}/>
+                </div>
+                <div className={style.likePost}>
+                    <PostsPanel name='猜你喜欢' url={hotPosts} limit={5}/>
+                </div>
+                <div className={style.forsalePost}>
+                    <PostsPanel name='促销种子' url={hotPosts} limit={5}/>
+                </div>
             </div>
         </div>
     );
diff --git a/src/views/frame/frame.module.css b/src/views/frame/frame.module.css
new file mode 100644
index 0000000..91967f8
--- /dev/null
+++ b/src/views/frame/frame.module.css
@@ -0,0 +1,63 @@
+
+
+.header{
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    height:8%;
+    background-color: var(--bg-color);
+    width: 100%;
+    overflow:hidden;
+}
+
+.header .logo{
+    width: 100px; /* Set a fixed width for the logo */
+    height: auto; /* Maintain aspect ratio */
+    left:0;
+    margin:10px;
+}
+
+.header .searchInput{
+    border:1px solid rgb(197, 193, 194);
+    width: 60%;
+    height:50%;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 1rem;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    transition: all 0.1s ease-in-out;
+}
+
+.header .toollist{
+    align-content: center;
+    right:0;
+    gap:10px;
+    margin-right:10px;
+}
+
+.header .toollist > *{
+    padding: 5px 10px;
+    width:auto;
+    font-size:150%;
+    user-select: none;
+    color: var(--text-color);
+}
+
+.header .toollist > *:hover{
+    background-color: rgb(197, 193, 194);
+    border-radius: 5px;
+    cursor: pointer;
+    font-size:160%;
+    transition: all 0.1s ease-in-out;
+    color: var(--text-color);
+}
+
+.container{
+    height:92vh;
+    background-color:var(--bg-color);
+    display:flex;
+    flex-direction:column;
+    overflow: auto;
+    width:100%;
+}
\ No newline at end of file
diff --git a/src/views/frame/frame.tsx b/src/views/frame/frame.tsx
new file mode 100644
index 0000000..c0c2e0e
--- /dev/null
+++ b/src/views/frame/frame.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Outlet } from "react-router";
+import { useEffect, useState } from "react";
+import { 
+    SearchOutlined, 
+    FontSizeOutlined, 
+    MessageOutlined, 
+    SunOutlined, 
+    MoonOutlined
+ } from "@ant-design/icons";
+import style from "./frame.module.css";
+import logo from "&/assets/logo.png";
+import { useAppDispatch } from "@/hooks/store";
+import { useSelector } from "react-redux";
+const Frame:React.FC = () => {
+
+    const dispatch = useAppDispatch();
+
+    const showSearch = useSelector((state: any) => state.setting.showSearch); 
+    const theme= useSelector((state: any) => state.setting.theme);
+    const toggleSearch = () => {
+        dispatch({ type: "setting/toggleSearch" });
+    }
+
+    const toggleFontSize = () => {
+        dispatch({ type: "setting/toggleFontSize" });
+    };
+
+    const toggleTheme = () => {
+        dispatch({ type: "setting/toggleTheme" });
+    };
+
+
+    return (
+        <div style={{ display: 'block', height: '100vh' }}>
+            <header className={style.header}>
+                <img className={style.logo} src={logo} alt="website logo"></img>
+                {showSearch && (<input className={style.searchInput} placeholder="输入关键词进行搜索"/>)}
+                <div className={style.toollist}>
+                    <SearchOutlined onClick={toggleSearch}/>
+                    <FontSizeOutlined onClick={toggleFontSize}/>
+                    <MessageOutlined />
+                    {theme === 'dark' ? <MoonOutlined onClick={toggleTheme}/> : <SunOutlined onClick={toggleTheme}/>}
+                </div>
+            </header>
+            <div className={style.container}>
+                <Outlet/>
+            </div>
+            
+            
+        </div>
+    );
+}
+
+export default Frame;
\ No newline at end of file
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index 26b7842..bd429c7 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -8,21 +8,21 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
-import logo from '&/asserts/logo.png';
+import logo from '&/assets/logo.png';
 import { getUserInfo } from '@/api/user';
-
+import debounce from 'lodash/debounce';
 
 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: getUserInfoRefresh } = useApi(async () => await request.get(getUserInfo), false);
+    const { refresh: getUserInfoRefresh } = useApi(() => request.get(getUserInfo), false);
 
     const nav = useNavigate();
-    const handleLogin = async () => {
+    const handleLogin = debounce(async () => {
         try {
-            const res = await postUserLoginRefresh();
+            const res =await postUserLoginRefresh();
             if (res==null ||(res as any).error) {
                 alert('Login failed. Please check your credentials.');
                 return;
@@ -44,14 +44,17 @@
               console.error('Unknown error occurred');
             }
         }
-    };
+    }, 1000) as () => void;
 
+    const handleLogoClick = () => {
+        nav('/');
+    }
     return (
         <div className={style.form}>
-            <img className={style.logo} src={logo} alt="logo"></img>
+            <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.submit} onClick={() => handleLogin()}>登录</button>
             <button className={style.register}>注册</button>
             <button className={style.forget}> 忘记密码</button>
         </div>