合并冲突
Change-Id: I3b6ac5ae87aad8fe746eceecc8f92fc5574b50a8
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;