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