diff --git a/src/views/frame/frame.tsx b/src/views/frame/frame.tsx
index f41e53f..83106a1 100644
--- a/src/views/frame/frame.tsx
+++ b/src/views/frame/frame.tsx
@@ -12,8 +12,8 @@
 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(() => {
@@ -23,6 +23,11 @@
 
     const showSearch = useSelector((state: any) => state.setting.showSearch); 
     const theme= useSelector((state: any) => state.setting.theme);
+    
+    const navigate = useNavigate(); // ✅ 用于跳转
+    const [searchText, setSearchText] = useState(""); // ✅ 存储搜索输入内容
+
+
     const toggleSearch = () => {
         dispatch({ type: "setting/toggleSearch" });
     }
@@ -35,12 +40,27 @@
         dispatch({ type: "setting/toggleTheme" });
     };
 
+    // ✅ 用于跳转
+    const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter" && searchText.trim() !== "") {
+            navigate(`/search?keyword=${encodeURIComponent(searchText.trim())}`);
+        }
+    };
+
 
     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="输入关键词进行搜索"/>)}
+                {showSearch && (
+                    // <input className={style.searchInput} placeholder="输入关键词进行搜索"/>
+                    <input
+                        className={style.searchInput}
+                        placeholder="输入关键词进行搜索"
+                        value={searchText}
+                        onChange={(e) => setSearchText(e.target.value)}
+                        onKeyDown={handleSearch} // ⌨️ 按下回车时执行跳转
+                    />)}
                 <div className={style.toollist}>
                     <SearchOutlined onClick={toggleSearch}/>
                     <FontSizeOutlined onClick={toggleFontSize}/>
diff --git a/src/views/homepage/homepage.module.css b/src/views/homepage/homepage.module.css
new file mode 100644
index 0000000..fdcc060
--- /dev/null
+++ b/src/views/homepage/homepage.module.css
@@ -0,0 +1,249 @@
+/* 主题色变量 */
+/* :root {
+    --primary-color: #3498db; 
+    --primary-hover: #2980b9;
+    --secondary-color: #f1c40f; 
+    --dark-color: #2c3e50; 
+    --light-color: #ecf0f1;
+    --text-color: #333;
+    --text-secondary: #7f8c8d;
+    --border-color: #ddd;
+  } */
+  
+    /* --bg-color: #2b2b2b;
+    --text-color: #f1f1f1;
+    --card-bg: #1e1e1e;
+    --border-color: #444444; */
+
+  .container {
+    min-height: 100vh;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
+  
+  /* 顶部导航栏 */
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 15px 30px;
+    background-color: solid var(--card-bg);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .logo {
+    height: 40px;
+    cursor: pointer;
+    transition: transform 0.3s;
+  }
+  
+  .logo:hover {
+    transform: scale(1.05);
+  }
+  
+  .siteTitle {
+    margin: 0 0 0 15px;
+    color: var(--text-color);
+    font-size: 24px;
+  }
+  
+  /* 主内容区 */
+  .mainContent {
+    display: flex;
+    min-height: calc(100vh - 70px);
+    padding: 20px;
+    gap: 20px;
+  }
+  
+  /* 左侧用户信息区 */
+  .userProfile {
+    flex: 2;
+    background-color: var(--card-bg);
+    border-radius: 10px;
+    padding: 25px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  }
+  
+  .userHeader {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .userAvatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid var(--primary-color);
+    margin-right: 20px;
+  }
+  
+  .userInfo {
+    flex: 1;
+  }
+  
+  .username {
+    margin: 0 0 5px 0;
+    color: var(--text-color);
+    font-size: 22px;
+  }
+  
+  .inviteCode {
+    color: var(--text-color);
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  
+  .editButton {
+    padding: 8px 20px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s;
+  }
+  
+  .editButton:hover {
+    background-color: var(--primary-hover);
+  }
+  
+  /* 用户统计 */
+  .userStats {
+    display: flex;
+    justify-content: space-between;
+    margin: 25px 0;
+    padding: 15px 0;
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+  }
+  
+  .statItem {
+    text-align: center;
+    padding: 0 10px;
+  }
+  
+  .statNumber {
+    font-size: 22px;
+    font-weight: bold;
+    color: var(--primary-color);
+  }
+  
+  .statLabel {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-top: 5px;
+  }
+  
+  /* 用户数据 */
+  .userData {
+    background-color: var(--light-color);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 25px;
+  }
+  
+  .dataItem {
+    margin-bottom: 8px;
+    font-size: 15px;
+  }
+  
+  .dataItem strong {
+    color: var(--primary-color);
+  }
+  
+  /* 作品区 */
+  .worksSection {
+    margin-top: 30px;
+  }
+  
+  .sectionTitle {
+    margin: 0 0 20px 0;
+    color: var(--dark-color);
+    font-size: 18px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--primary-color);
+  }
+  
+  .workItem {
+    padding: 15px;
+    margin-bottom: 15px;
+    background-color: var(--primary-card);
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+  
+  .workItem:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  .workTitle {
+    margin: 0 0 10px 0;
+    color: var(--text-color);
+    font-size: 16px;
+  }
+  
+  .workMeta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: var(--text-color);
+  }
+  
+  /* 右侧内容区 */
+  .rightContent {
+    flex: 1;
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .petSection, .trafficSection {
+    background-color: var(--card-bg);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  }
+  
+  .petContainer {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 15px;
+    text-align: center;
+  }
+  
+  .petImage {
+    max-width: 100%;
+    height: auto;
+    border-radius: 5px;
+  }
+  
+  .trafficContainer {
+    background-color: white;
+    border-radius: 8px;
+    padding: 10px;
+    text-align: center;
+    border: 1px solid var(--border-color);
+  }
+  
+  .trafficImage {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  /* 加载和错误状态 */
+  .loading, .error {
+    padding: 20px;
+    text-align: center;
+    color: var(--text-color);
+  }
+  
+  .error {
+    color: #e74c3c;
+  }
\ No newline at end of file
diff --git a/src/views/homepage/homepage.tsx b/src/views/homepage/homepage.tsx
new file mode 100644
index 0000000..58c910f
--- /dev/null
+++ b/src/views/homepage/homepage.tsx
@@ -0,0 +1,164 @@
+import React, { useCallback, useEffect } from 'react';
+import styles from './homepage.module.css';
+import { useApi } from '@/hooks/request';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
+import { useNavigate } from 'react-router';
+import logo from '&/assets/logo.png';
+import { getUserMessage } from '@/api/homepage';
+import request from '@/utils/request'
+import { hotPosts } from '@/api/post';
+import { postUserLogin } from '@/api/auth';
+
+interface WorkItem {  
+  postId: number,
+  userId: number,
+  postTitle: string,
+  postContent: string,
+  createdAt: number,
+  postType: string,
+  viewCount: number,
+  hotScore: number,
+  lastCalculated: number
+
+}
+
+interface UserStats {
+  likes: number;
+  following: number;
+  followers: number;
+  mutualFollows: number;
+}
+
+interface UserResponse {
+  username: string;
+  inviteCode: string;
+  stats: UserStats;
+  upload: string;
+  level: string;
+  works: WorkItem[];
+  petImage: string;
+  trafficImage: string;
+}
+
+
+const Homepage: React.FC =() => {
+  const navigate = useNavigate();
+  const userInfo = useSelector((state: RootState) => state.user);
+  
+  // 获取用户作品数据
+  // const {data: response, loading, error, refresh} =useApi(()=>request.get(getUserMessage), false);
+  const { data: response, loading, error, refresh } = useApi<UserResponse>(() => request.get(getUserMessage), false);
+  useEffect(() => {
+    refresh(); // 页面首次加载时触发请求
+  }, []);
+  // 用户统计数据
+  const userStats = {
+    likes: response?.stats?.likes ?? 0,
+    following: response?.stats?.following ?? 0,
+    followers: response?.stats?.followers ?? 0,
+    mutualFollows: response?.stats?.mutualFollows ?? 0,
+    uploadAmount: response?.upload ?? '--',
+    level: response?.level ?? '--'
+  };
+  
+  const handleLogoClick = () => {
+    navigate('/');
+  };
+
+  return (
+    <div className={styles.container}>
+
+
+      {/* 用户信息主区域 */}
+      <div className={styles.mainContent}>
+        {/* 左侧用户信息区 */}
+        <div className={styles.userProfile}>
+          <div className={styles.userHeader}>
+            <img 
+              src={userInfo.avatar || '/default-avatar.png'} 
+              alt="用户头像" 
+              className={styles.userAvatar}
+            />
+            <div className={styles.userInfo}>
+              <h2 className={styles.username}>阳菜，放睛！</h2>
+              <div className={styles.inviteCode}>邀请码：1314520</div>
+              <button className={styles.editButton}>编辑主页</button>
+               <button 
+                className={styles.editButton}
+                onClick={() => navigate('/postDetails', {
+                  state: { isNewPost: true }
+                })}
+              >
+                发布种子
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.userStats}>
+            <div className={styles.statItem}>
+              <div className={styles.statNumber}>{userStats.likes}</div>
+              <div className={styles.statLabel}>获赞</div>
+            </div>
+            <div className={styles.statItem}>
+              <div className={styles.statNumber}>{userStats.following}</div>
+              <div className={styles.statLabel}>关注</div>
+            </div>
+            <div className={styles.statItem}>
+              <div className={styles.statNumber}>{userStats.followers}</div>
+              <div className={styles.statLabel}>粉丝</div>
+            </div>
+            <div className={styles.statItem}>
+              <div className={styles.statNumber}>{userStats.mutualFollows}</div>
+              <div className={styles.statLabel}>互关</div>
+            </div>
+          </div>
+
+          <div className={styles.userData}>
+            <div className={styles.dataItem}>
+              <span>您的总上传量为：</span>
+              <strong>{userStats.uploadAmount}</strong>
+            </div>
+            <div className={styles.dataItem}>
+              <span>您的用户等级为：</span>
+              <strong>{userStats.level}</strong>
+            </div>
+          </div>
+
+          <div className={styles.worksSection}>
+            <h3 className={styles.sectionTitle}>我的作品</h3>
+            {loading && <div className={styles.loading}>加载中...</div>}
+            {error && <div className={styles.error}>{error.message}</div>}
+            
+            {response && response.works.map(work => (
+              <div key={work.postId} className={styles.workItem}>
+                <h4 className={styles.workTitle}>{work.postTitle}</h4>
+                <div className={styles.workMeta}>
+                  <span>发布时间：{work.createdAt}</span>
+                  <span>下载量：{work.viewCount} 做种数：{'待定'}</span>
+                </div>
+              </div>
+            )) }
+          </div>
+        </div>
+
+        {/* 右侧内容区 */}
+        <div className={styles.rightContent}>
+          <div className={styles.petSection}>
+            <h3 className={styles.sectionTitle}>宠物图</h3>
+            <div className={styles.petContainer}>
+              <img 
+                src="/assets/pet-blue-star.png" 
+                alt="蓝色星星宠物" 
+                className={styles.petImage}
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Homepage;
\ No newline at end of file
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 562f178..fef6e32 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -1,37 +1,46 @@
-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';
-
+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, {email, password}), false);
-    const { refresh: getUserInfoRefresh } = useApi(() => request.get(getUserInfo), false);
-    const [messageApi, contextHolder] = message.useMessage();
+    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 (message: string) => {
-        messageApi.error(message);
+    const showErrorMessage = async (msg: string) => {
+        messageApi.error(msg);
     };
+
+    // 登录逻辑
     const handleLogin = debounce(async () => {
         try {
-            const res = await postUserLoginRefresh();
-            console.log(res);
-            if (res == null || (res as any).error) {
-                throw new Error('登录失败');
+            const res =await postUserLoginRefresh({email, password});
+            console.log("res", res);
+            if (res==null ||(res as any).error) {
+                alert('Login failed. Please check your credentials.');
+                return;
             }
             dispatch({ type: "user/login", payload: res });
 
@@ -42,23 +51,133 @@
             dispatch({ type: "user/getUserInfo", payload: userInfo });
             nav('/');
         } catch (error) {
-            // 将错误信息传递给一个异步函数
             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}>
             {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" />
-            <button className={style.submit} onClick={() => handleLogin()}>登录</button>
-            <button className={style.register}>注册</button>
-            <button className={style.forget}> 忘记密码</button>
+            <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/pet/pet.module.css b/src/views/pet/pet.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/pet/pet.module.css
diff --git a/src/views/pet/pet.tsx b/src/views/pet/pet.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/pet/pet.tsx
diff --git a/src/views/postDetail/postDetail.module.css b/src/views/postDetail/postDetail.module.css
index e69de29..46c2176 100644
--- a/src/views/postDetail/postDetail.module.css
+++ 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
index a40fb68..d6029a8 100644
--- a/src/views/postDetail/postDetail.tsx
+++ b/src/views/postDetail/postDetail.tsx
@@ -1,114 +1,206 @@
 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 { 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 {
-	createdAt?: number;
-	hotScore?: number;
-	lastCalculated?: number;
-	postContent?: string;
-	postId?: number;
-	postTitle?: string;
-	postType?: string;
-	userId?: number;
-	viewCount?: number;
-	[property: string]: any;
+  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;
+  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 [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(() => {
-		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]);
+  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);
 
-	if (loading) return <div className={styles.center}><Spin /></div>;
-	if (!post) return <div className={styles.center}><Empty description="未找到帖子" /></div>;
+      const commentsRes = await getPostCommentsRefresh();
+      setComments(commentsRes as CommentResponse[]);
+      setLoading(false);
+    };
+    fetchData();
+  }, [postId]);
 
-	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>
+  if (loading) return <div className={styles.center}><Spin /></div>;
+  if (!post) return <div className={styles.center}><Empty description="未找到帖子" /></div>;
 
-				<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>
-					)}
-				/>
+  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>
 
-				<TextArea
-					rows={4}
-					value={newComment}
-					onChange={(e) => setNewComment(e.target.value)}
-					placeholder="写下你的评论..."
-				/>
-				</div>
-		</div>
-	);
+        {/* 发布评论区域 */}
+        <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/search/search.module.css b/src/views/search/search.module.css
new file mode 100644
index 0000000..2e1f40a
--- /dev/null
+++ b/src/views/search/search.module.css
@@ -0,0 +1,132 @@
+:root {
+  --primary-color: #3498db;
+  --primary-hover: #2980b9;
+  --secondary-color: #f1c40f;
+  --dark-color: #2c3e50;
+  --light-color: #ecf0f1;
+  --text-color: #333;
+  --text-secondary: #7f8c8d;
+  --border-color: #ddd;
+  --bg-color: #2b2b2b;
+  --card-bg: #1e1e1e;
+}
+
+.container {
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  padding: 20px;
+}
+
+.secondaryHeader {
+  background-color: var(--card-bg);
+  padding: 15px 20px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-wrap: wrap; /* 可换成 nowrap + overflow-x: auto 实现强制一行 + 横向滚动 */
+  gap: 15px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.selectBox {
+  background-color: var(--light-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.selectBox:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+
+.tagFilters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  background-color: var(--light-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.tagFilters label {
+  margin: 0;
+  color: var(--text-color);
+}
+
+.filterButton {
+  padding: 8px 16px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.filterButton:hover {
+  background-color: var(--primary-hover);
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.postItem {
+  background-color: var(--card-bg);
+  padding: 20px;
+  border-radius: 8px;
+  border-left: 4px solid var(--primary-color);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.postItem h3 {
+  margin: 0 0 10px 0;
+  color: var(--text-color);
+}
+
+.postItem p {
+  margin: 4px 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.secondaryHeader {
+  background-color: var(--card-bg);
+  padding: 15px 20px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.leftSection {
+  display: flex;
+  gap: 10px;
+}
+
+.centerSection {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.rightSection {
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/src/views/search/search.tsx b/src/views/search/search.tsx
new file mode 100644
index 0000000..cd9db91
--- /dev/null
+++ b/src/views/search/search.tsx
@@ -0,0 +1,131 @@
+// search.tsx
+import React, { useState, useEffect } from 'react';
+import styles from './search.module.css';
+import { useLocation } from "react-router-dom";
+
+interface PostItem {
+  postId: number;
+  userId: number;
+  postTitle: string;
+  postContent: string;
+  createdAt: number;
+  postType: string;
+  viewCount: number;
+  hotScore: number;
+  lastCalculated: number;
+  tags?: number[];
+}
+
+const tagMap: Record<number, string> = {
+  1: "搞笑",
+  2: "悬疑",
+  3: "教育",
+  4: "动作",
+  5: "剧情"
+};
+
+const SearchPage: React.FC = () => {
+  const [posts, setPosts] = useState<PostItem[]>([]);
+  const [filteredPosts, setFilteredPosts] = useState<PostItem[]>([]);
+  const [selectedPostType, setSelectedPostType] = useState<string>('all');
+  const [selectedRating, setSelectedRating] = useState<number | null>(null);
+  const [selectedTags, setSelectedTags] = useState<number[]>([]);
+
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const keyword = params.get("keyword");
+
+  useEffect(() => {
+    fetch('/api/posts')
+      .then((res) => res.json())
+      .then((data) => {
+        setPosts(data);
+        setFilteredPosts(data);
+      });
+  }, []);
+
+  const applyFilters = () => {
+    let filtered = posts;
+
+    if (selectedPostType !== 'all') {
+      filtered = filtered.filter((post) => post.postType === selectedPostType);
+    }
+
+    if (selectedRating !== null) {
+      filtered = filtered.filter((post) => post.hotScore >= selectedRating);
+    }
+
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter((post) =>
+        post.tags?.some((tag) => selectedTags.includes(tag))
+      );
+    }
+
+    setFilteredPosts(filtered);
+  };
+
+  return (
+    <div className={styles.secondaryHeader}>
+    <div className={styles.leftSection}>
+        <select
+        value={selectedPostType}
+        onChange={(e) => setSelectedPostType(e.target.value)}
+        className={styles.selectBox}
+        >
+        <option value="all">所有分区</option>
+        <option value="影视">影视</option>
+        <option value="音乐">音乐</option>
+        <option value="游戏">游戏</option>
+        <option value="软件">软件</option>
+        </select>
+
+        <select
+        value={selectedRating || ''}
+        onChange={(e) =>
+            setSelectedRating(e.target.value ? Number(e.target.value) : null)
+        }
+        className={styles.selectBox}
+        >
+        <option value="">所有评分</option>
+        <option value="1">1星及以上</option>
+        <option value="2">2星及以上</option>
+        <option value="3">3星及以上</option>
+        <option value="4">4星及以上</option>
+        <option value="5">5星</option>
+        </select>
+    </div>
+
+    <div className={styles.centerSection}>
+        <div className={styles.tagFilters}>
+        {Object.entries(tagMap).map(([tagId, tagName]) => (
+            <label key={tagId}>
+            <input
+                type="checkbox"
+                value={tagId}
+                checked={selectedTags.includes(Number(tagId))}
+                onChange={(e) => {
+                const value = Number(e.target.value);
+                setSelectedTags((prev) =>
+                    prev.includes(value)
+                    ? prev.filter((t) => t !== value)
+                    : [...prev, value]
+                );
+                }}
+            />
+            {tagName}
+            </label>
+        ))}
+        </div>
+    </div>
+
+    <div className={styles.rightSection}>
+        <button className={styles.filterButton} onClick={applyFilters}>
+        筛选
+        </button>
+    </div>
+    </div>
+
+  );
+};
+
+export default SearchPage;
diff --git a/src/views/upload/upload.module.css b/src/views/upload/upload.module.css
new file mode 100644
index 0000000..5a9952a
--- /dev/null
+++ b/src/views/upload/upload.module.css
@@ -0,0 +1,150 @@
+.container {
+  background-color: var(--card-bg);
+  padding: 32px;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+}
+
+.formGroup {
+  margin-bottom: 20px;
+}
+
+.input,
+.select,
+.textarea {
+  width: 100%;
+  padding: 8px 12px;
+  margin-top: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+.upload {
+  margin-top: 8px;
+}
+
+.textarea {
+  height: 100px;
+  resize: none;
+}
+
+.charCount {
+  text-align: right;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.requirement {
+  font-size: 14px;
+  color: var(--primary-color);
+  margin-bottom: 12px;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.submitBtn {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submitBtn:hover {
+  background-color: var(--primary-hover);
+}
+
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+.form {
+  width: 400px;
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.title {
+  font-size: 22px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.input,
+.textarea {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+.textarea {
+  resize: vertical;
+  height: 100px;
+}
+
+.uploadArea {
+  padding: 12px;
+  border: 2px dashed #999;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  background: #f9f9f9;
+  margin-bottom: 16px;
+  transition: all 0.2s;
+}
+
+.uploadArea:hover {
+  background: #f0f0f0;
+  border-color: #666;
+}
+
+.fileName {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #333;
+}
+
+.error {
+  color: red;
+  margin-bottom: 10px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.uploadButton {
+  width: 100%;
+  padding: 10px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.uploadButton:hover {
+  background-color: #317ee7;
+}
diff --git a/src/views/upload/upload.tsx b/src/views/upload/upload.tsx
new file mode 100644
index 0000000..4a60330
--- /dev/null
+++ b/src/views/upload/upload.tsx
@@ -0,0 +1,123 @@
+import instance from '@/utils/axios';
+import React, { useState } from 'react';
+import styles from './upload.module.css';
+import { Upload } from '@/api/upload';
+import { useNavigate } from 'react-router-dom'; // 用于跳转
+
+const PostDetails = () => {
+  const [postTitle, setPostTitle] = useState('');
+  const [postType, setPostType] = useState('');
+  const [postContent, setPostContent] = useState('');
+  const [isChecked, setIsChecked] = useState(false);
+
+  const navigate = useNavigate();
+
+  const handleSubmit = async () => {
+    if (!postTitle.trim() || !postType || !postContent.trim()) {
+      alert('请填写完整内容（资源名、类型、内容介绍）');
+      return;
+    }
+
+    if (!isChecked) {
+      alert('请先确认您已知晓以上内容');
+      return;
+    }
+
+    const payload = {
+      post: {
+        postId: 0,
+        userId: 0,
+        postTitle,
+        postContent,
+        createdAt: Date.now(),
+        postType,
+        viewCount: 0,
+        hotScore: 5,
+        lastCalculated: Date.now()
+      },
+      tagIds: [0]
+    };
+
+    try {
+      const res = await instance.post(Upload, payload);
+
+      console.log('mock返回内容：', res.code);
+
+      // 判断返回内容是否成功（根据你 mock 接口返回的 code 字段）
+      if (res.code !== 0) throw new Error('发布失败');
+
+      alert('发布成功！');
+      navigate(-1); // 返回上一页（homepage）
+    } catch (error) {
+      alert('发布失败，请稍后重试');
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.formGroup}>
+        <label>资源名：</label>
+        <input
+          type="text"
+          value={postTitle}
+          placeholder="请输入文本"
+          onChange={(e) => setPostTitle(e.target.value)}
+          className={styles.input}
+        />
+      </div>
+
+      <div className={styles.formGroup}>
+        <label>类型选择：</label>
+        <select
+          value={postType}
+          onChange={(e) => setPostType(e.target.value)}
+          className={styles.select}
+        >
+          <option value="">下拉选择</option>
+          <option value="type1">类型一</option>
+          <option value="type2">类型二</option>
+        </select>
+      </div>
+
+      {/* 暂时移除上传文件表单 */}
+      {/* <div className={styles.formGroup}>
+        <label>上传资源：</label>
+        <input
+          type="file"
+          onChange={(e) => setFile(e.target.files?.[0] || null)}
+          className={styles.upload}
+        />
+      </div> */}
+
+      <div className={styles.formGroup}>
+        <label>内容介绍：</label>
+        <textarea
+          placeholder="请输入内容介绍"
+          value={postContent}
+          onChange={(e) => setPostContent(e.target.value)}
+          maxLength={200}
+          className={styles.textarea}
+        />
+        <div className={styles.charCount}>{postContent.length}/200</div>
+      </div>
+
+      <div className={styles.requirement}>【发布内容要求】</div>
+
+      <div className={styles.checkbox}>
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+        />
+        <span>我已知晓以上内容</span>
+      </div>
+
+      <button onClick={handleSubmit} className={styles.submitBtn}>
+        我已知晓
+      </button>
+    </div>
+  );
+};
+
+export default PostDetails;