diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 5f0caa0..7234c32 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,95 +1,413 @@
-import React, { useState } from 'react';
+// 写一个简单的欢迎界面
+import React, { useEffect, useState } from 'react';
+import { Card, Statistic, Row, Col, Divider, Button } from 'antd';
+import { LikeOutlined, HeartOutlined, EyeOutlined } from '@ant-design/icons';
+import { getUserInfo } from '@/services/session';
+import styles from './index.module.css'; // 假设我们创建了一个CSS模块文件
+import './css/stars-style.css'
+import { Flex } from 'antd';
+import { Typography } from "@mui/material";
+import { useRequest } from '@umijs/max';
+import { getPlanetList, updatePlanet, getUserPlanet, getPlanetInfo, PlanetEntity } from '@/services/planets/api';
 
-const planets = [
-    { name: 'Mercury', desc: 'The smallest planet.', img: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Venus', desc: 'The hottest planet.', img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Earth', desc: 'Our home planet.', img: 'https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Mars', desc: 'The red planet.', img: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=400&q=80' },
-    { name: 'Jupiter', desc: 'The largest planet.', img: 'https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80' },
-];
+const Welcome: React.FC = () => {
+  //  获取用户信息
+  // const { data: userInfo, loading } = useRequest(async () => {
+  //   return { data: await getUserInfo() };
+  // });
 
-const navItems = ['首页', '资源', '关于', '联系'];
+  const { data: userInfo, loading } = useRequest(async () => {
+    const userRes = await getUserInfo();
+    // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
+    const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
+    const UserplanetRes = await getUserPlanet({ userId });
+    const planetId = UserplanetRes.planetId || 1;
+    const planetRes = await getPlanetInfo({ planetId });
 
-const Home: React.FC = () => {
-    const [search, setSearch] = useState('');
+    return {
+      data: {
+        ...userRes.user,
+        planet: planetRes
+      }
+    };
+  });
 
-    const filteredPlanets = planets.filter(p =>
-        p.name.toLowerCase().includes(search.toLowerCase())
-    );
+  if (loading) {
+    return <div>loading...</div>;
+  }
 
-    return (
-        <div style={{ fontFamily: 'sans-serif', background: 'linear-gradient(to bottom, #0f2027, #2c5364)', minHeight: '100vh', color: '#fff' }}>
-            {/* 导航栏 */}
-            <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '24px 48px', background: 'rgba(0,0,0,0.4)' }}>
-                <div style={{ fontWeight: 'bold', fontSize: 28, letterSpacing: 2 }}>🌌 PT星球</div>
-                <div>
-                    {navItems.map(item => (
-                        <a
-                            key={item}
-                            href="#"
-                            style={{
-                                color: '#fff',
-                                margin: '0 18px',
-                                textDecoration: 'none',
-                                fontSize: 18,
-                                transition: 'color 0.2s',
-                            }}
-                        >
-                            {item}
-                        </a>
-                    ))}
-                </div>
-            </nav>
+  const currentUser = userInfo;
 
-            {/* 搜索框 */}
-            <div style={{ display: 'flex', justifyContent: 'center', margin: '48px 0 32px 0' }}>
-                <input
-                    type="text"
-                    placeholder="搜索星球资源..."
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
-                    style={{
-                        width: 360,
-                        padding: '12px 20px',
-                        borderRadius: 24,
-                        border: 'none',
-                        fontSize: 18,
-                        outline: 'none',
-                        boxShadow: '0 2px 12px rgba(0,0,0,0.2)',
-                    }}
-                />
-            </div>
-
-            {/* 资源卡片 */}
-            <div style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                justifyContent: 'center',
-                gap: '32px',
-                padding: '0 48px 48px 48px'
-            }}>
-                {filteredPlanets.map(planet => (
-                    <div
-                        key={planet.name}
-                        style={{
-                            background: 'rgba(255,255,255,0.08)',
-                            borderRadius: 18,
-                            width: 260,
-                            boxShadow: '0 4px 24px rgba(0,0,0,0.18)',
-                            overflow: 'hidden',
-                            transition: 'transform 0.2s',
-                        }}
-                    >
-                        <img src={planet.img} alt={planet.name} style={{ width: '100%', height: 140, objectFit: 'cover' }} />
-                        <div style={{ padding: 20 }}>
-                            <div style={{ fontWeight: 'bold', fontSize: 22, marginBottom: 8 }}>{planet.name}</div>
-                            <div style={{ fontSize: 16, color: '#cfd8dc' }}>{planet.desc}</div>
-                        </div>
-                    </div>
-                ))}
-            </div>
+  console.log(currentUser)
+  return (
+    <div>
+      <div className="origin">
+        <div className="control">
+          <div className="galaxy">
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+            <div className="star"></div>
+          </div>
         </div>
-    );
+      </div>
+      <div className="main">
+        <div>
+
+          {/* 第一排：悬浮搜索框 */}
+          <div className={styles.searchBarContainer}>
+            <input type="text" placeholder="Search for everything..." className={styles.searchInput} />
+          </div>
+          <div style={{ display: "flex", marginTop: '40px' }}>
+            <div className={styles.leftBox}>
+              <div className={styles.textContent}>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    color: "#fff",
+                    fontWeight: 600,
+                    mb: 2,
+                    letterSpacing: 2,
+                    textShadow: "0 2px 16px #0ea5e9",
+                  }}
+                >
+                  Welcome Back!
+                </Typography>
+
+                <h2 className={styles.titlebox}>{currentUser?.nickName}，整点什么？</h2>
+                <Button style={{ width: "100px" }} size='small' type="primary" onClick={() => window.location.href = '/relation'}>我的形象</Button>
+              </div>
+              <div className={styles.gitAnimation}>
+                <img
+                  src={`/images/planets/${userInfo?.planet?.filename}.gif`}
+                  alt="用户形象"
+                  style={{
+                    width: 150,
+                    height: 150,
+                    borderRadius: '50%',
+                    border: '2px solid #4a4a7a',
+                    boxShadow: '0 0 15px #6a5acd'
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 新增右侧统计卡片（使用Ant Design组件） */}
+            <Card className={styles.rightCard} title="种子统计" bordered={false}>
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Statistic title="总种子数" value={128} />
+                </Col>
+                <Col span={8}>
+                  <Statistic title="活跃种子" value={42} />
+                </Col>
+                <Col span={8}>
+                  <Statistic title="完成种子" value={86} />
+                </Col>
+              </Row>
+              <Divider />
+            </Card>
+            <Card className={styles.rightCard2} >
+
+              <Flex className={styles.buttonGroup}>
+                <div style={{
+                  fontSize: '16px',
+                  color: '#a8b2d1',
+                  letterSpacing: '1px'
+                }}>来看看星球的
+                </div>
+                <div style={{
+                  fontSize: '23px',
+                  color: '#0abde3',
+                  letterSpacing: '1px',
+                  fontWeight: 'bold',
+                }}>
+                  种子
+                </div>
+                <Button type="primary" onClick={() => window.location.href = '/torrent-upload'}>新建种子</Button>
+                <Button onClick={() => window.location.href = '/torrent-list'}>我的种子</Button>
+              </Flex>
+            </Card>
+
+            <Card className={styles.rightCard2} >
+
+              <Flex className={styles.buttonGroup}>
+                <div style={{
+                  fontSize: '16px',
+                  color: '#a8b2d1',
+                  letterSpacing: '1px'
+                }}>现在看看星球
+                </div>
+                <div style={{
+                  fontSize: '23px',
+                  color: '#e1b12c',
+                  letterSpacing: '1px',
+                  fontWeight: 'bold',
+                }}>
+                  动态
+                </div>
+                <Button color="orange" variant="solid" onClick={() => window.location.href = '/user-center'}>立即创作</Button>
+                <Button onClick={() => window.location.href = '/user-center'}>我的创作</Button>
+              </Flex>
+            </Card>
+
+          </div>
+
+          <div className={styles.homeContainer}>
+
+            {/* 第二排：左侧欢迎信息和右侧通知公告 */}
+            <div className={styles.secondRow}>
+              {/* 左侧框 */}
+              {/* 中间框：最新热点 */}
+              <div className={styles.middleBox}>
+                <div className={styles.hotSpot}>
+                  <h3 className={styles.hotTitle}>排行榜动态</h3>
+                  <ul className={styles.hotList}>
+                    {Array.from({ length: 5 }, (_, i) => (
+                      <li key={i} className={styles.hotItem}>
+                        <span className={styles.hotItemNumber}>{`${i + 1}`}</span>
+                        <span className={styles.hotItemText}>综合榜{`${i + 1}`}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              {/* 右侧框：通知公告（轮播样式） */}
+              <div className={styles.rightBox}>
+                <div className={styles.carouselContainer}>
+                  {/* 轮播内容，这里用几个div模拟 */}
+                  <div className={styles.carouselItem}>通知公告 1</div>
+                  <div className={styles.carouselItem}>通知公告 2</div>
+                  <div className={styles.carouselItem}>通知公告 3</div>
+                </div>
+              </div>
+            </div>
+            {/* 第三排：帖子卡片 */}
+            <div className={styles.thirdRow}>
+              {Array.from({ length: 16 }, (_, i) => (
+                <div className={styles.postCard} key={i}>
+                  <div className={styles.cardContent}>
+                    <h3 className={styles.postTitle}>模拟帖子标题{`${i + 1}`}（这是一个可能会很长的标题测试单行缩略效果）</h3>
+                    <img src="/images/post-cover.jpg" alt="帖子封面" className={styles.cardImage} />
+                    <div className={styles.infoWrapper}>
+                      <p className={styles.postAuthor}>作者：用户{`${i + 1}`}</p>
+                      <div className={styles.tagsContainer}>
+                        {['技术', '生活', '分享'].map((tag, idx) => (
+                          <span className={styles.tag} key={idx}>{tag}</span>
+                        ))}
+                      </div>
+                      <div className={styles.statsContainer}>
+                        <span className={styles.statItem}><LikeOutlined /> {Math.floor(Math.random() * 1000)}</span>
+                        <span className={styles.statItem}><HeartOutlined /> {Math.floor(Math.random() * 500)}</span>
+                        <span className={styles.statItem}><EyeOutlined /> {Math.floor(Math.random() * 5000)}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default Home;
\ No newline at end of file
+export default Welcome;