Gitiles
Code Review Sign In
gerrit.lilingkun.com / ThunderHubWeb / 8d736711d9889dbe4bff11a5fb92d7b63ebe5da2 / . / src / pages / Home / index.tsx
blob: 7234c3288bd99dd40eadb09685f3c2c4a34015bd [file] [log] [blame]
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]1// 写一个简单的欢迎界面
2import React, { useEffect, useState } from 'react';
3import { Card, Statistic, Row, Col, Divider, Button } from 'antd';
4import { LikeOutlined, HeartOutlined, EyeOutlined } from '@ant-design/icons';
5import { getUserInfo } from '@/services/session';
6import styles from './index.module.css'; // 假设我们创建了一个CSS模块文件
7import './css/stars-style.css'
8import { Flex } from 'antd';
9import { Typography } from "@mui/material";
10import { useRequest } from '@umijs/max';
11import { getPlanetList, updatePlanet, getUserPlanet, getPlanetInfo, PlanetEntity } from '@/services/planets/api';
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]12
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]13const Welcome: React.FC = () => {
14 // 获取用户信息
15 // const { data: userInfo, loading } = useRequest(async () => {
16 // return { data: await getUserInfo() };
17 // });
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]18
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]19 const { data: userInfo, loading } = useRequest(async () => {
20 const userRes = await getUserInfo();
21 // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
22 const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
23 const UserplanetRes = await getUserPlanet({ userId });
24 const planetId = UserplanetRes.planetId || 1;
25 const planetRes = await getPlanetInfo({ planetId });
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]26
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]27 return {
28 data: {
29 ...userRes.user,
30 planet: planetRes
31 }
32 };
33 });
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]34
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]35 if (loading) {
36 return <div>loading...</div>;
37 }
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]38
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]39 const currentUser = userInfo;
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]40
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]41 console.log(currentUser)
42 return (
43 <div>
44 <div className="origin">
45 <div className="control">
46 <div className="galaxy">
47 <div className="star"></div>
48 <div className="star"></div>
49 <div className="star"></div>
50 <div className="star"></div>
51 <div className="star"></div>
52 <div className="star"></div>
53 <div className="star"></div>
54 <div className="star"></div>
55 <div className="star"></div>
56 <div className="star"></div>
57 <div className="star"></div>
58 <div className="star"></div>
59 <div className="star"></div>
60 <div className="star"></div>
61 <div className="star"></div>
62 <div className="star"></div>
63 <div className="star"></div>
64 <div className="star"></div>
65 <div className="star"></div>
66 <div className="star"></div>
67 <div className="star"></div>
68 <div className="star"></div>
69 <div className="star"></div>
70 <div className="star"></div>
71 <div className="star"></div>
72 <div className="star"></div>
73 <div className="star"></div>
74 <div className="star"></div>
75 <div className="star"></div>
76 <div className="star"></div>
77 <div className="star"></div>
78 <div className="star"></div>
79 <div className="star"></div>
80 <div className="star"></div>
81 <div className="star"></div>
82 <div className="star"></div>
83 <div className="star"></div>
84 <div className="star"></div>
85 <div className="star"></div>
86 <div className="star"></div>
87 <div className="star"></div>
88 <div className="star"></div>
89 <div className="star"></div>
90 <div className="star"></div>
91 <div className="star"></div>
92 <div className="star"></div>
93 <div className="star"></div>
94 <div className="star"></div>
95 <div className="star"></div>
96 <div className="star"></div>
97 <div className="star"></div>
98 <div className="star"></div>
99 <div className="star"></div>
100 <div className="star"></div>
101 <div className="star"></div>
102 <div className="star"></div>
103 <div className="star"></div>
104 <div className="star"></div>
105 <div className="star"></div>
106 <div className="star"></div>
107 <div className="star"></div>
108 <div className="star"></div>
109 <div className="star"></div>
110 <div className="star"></div>
111 <div className="star"></div>
112 <div className="star"></div>
113 <div className="star"></div>
114 <div className="star"></div>
115 <div className="star"></div>
116 <div className="star"></div>
117 <div className="star"></div>
118 <div className="star"></div>
119 <div className="star"></div>
120 <div className="star"></div>
121 <div className="star"></div>
122 <div className="star"></div>
123 <div className="star"></div>
124 <div className="star"></div>
125 <div className="star"></div>
126 <div className="star"></div>
127 <div className="star"></div>
128 <div className="star"></div>
129 <div className="star"></div>
130 <div className="star"></div>
131 <div className="star"></div>
132 <div className="star"></div>
133 <div className="star"></div>
134 <div className="star"></div>
135 <div className="star"></div>
136 <div className="star"></div>
137 <div className="star"></div>
138 <div className="star"></div>
139 <div className="star"></div>
140 <div className="star"></div>
141 <div className="star"></div>
142 <div className="star"></div>
143 <div className="star"></div>
144 <div className="star"></div>
145 <div className="star"></div>
146 <div className="star"></div>
147 <div className="star"></div>
148 <div className="star"></div>
149 <div className="star"></div>
150 <div className="star"></div>
151 <div className="star"></div>
152 <div className="star"></div>
153 <div className="star"></div>
154 <div className="star"></div>
155 <div className="star"></div>
156 <div className="star"></div>
157 <div className="star"></div>
158 <div className="star"></div>
159 <div className="star"></div>
160 <div className="star"></div>
161 <div className="star"></div>
162 <div className="star"></div>
163 <div className="star"></div>
164 <div className="star"></div>
165 <div className="star"></div>
166 <div className="star"></div>
167 <div className="star"></div>
168 <div className="star"></div>
169 <div className="star"></div>
170 <div className="star"></div>
171 <div className="star"></div>
172 <div className="star"></div>
173 <div className="star"></div>
174 <div className="star"></div>
175 <div className="star"></div>
176 <div className="star"></div>
177 <div className="star"></div>
178 <div className="star"></div>
179 <div className="star"></div>
180 <div className="star"></div>
181 <div className="star"></div>
182 <div className="star"></div>
183 <div className="star"></div>
184 <div className="star"></div>
185 <div className="star"></div>
186 <div className="star"></div>
187 <div className="star"></div>
188 <div className="star"></div>
189 <div className="star"></div>
190 <div className="star"></div>
191 <div className="star"></div>
192 <div className="star"></div>
193 <div className="star"></div>
194 <div className="star"></div>
195 <div className="star"></div>
196 <div className="star"></div>
197 <div className="star"></div>
198 <div className="star"></div>
199 <div className="star"></div>
200 <div className="star"></div>
201 <div className="star"></div>
202 <div className="star"></div>
203 <div className="star"></div>
204 <div className="star"></div>
205 <div className="star"></div>
206 <div className="star"></div>
207 <div className="star"></div>
208 <div className="star"></div>
209 <div className="star"></div>
210 <div className="star"></div>
211 <div className="star"></div>
212 <div className="star"></div>
213 <div className="star"></div>
214 <div className="star"></div>
215 <div className="star"></div>
216 <div className="star"></div>
217 <div className="star"></div>
218 <div className="star"></div>
219 <div className="star"></div>
220 <div className="star"></div>
221 <div className="star"></div>
222 <div className="star"></div>
223 <div className="star"></div>
224 <div className="star"></div>
225 <div className="star"></div>
226 <div className="star"></div>
227 <div className="star"></div>
228 <div className="star"></div>
229 <div className="star"></div>
230 <div className="star"></div>
231 <div className="star"></div>
232 <div className="star"></div>
233 <div className="star"></div>
234 <div className="star"></div>
235 <div className="star"></div>
236 <div className="star"></div>
237 <div className="star"></div>
238 <div className="star"></div>
239 <div className="star"></div>
240 <div className="star"></div>
241 <div className="star"></div>
242 <div className="star"></div>
243 <div className="star"></div>
244 <div className="star"></div>
245 <div className="star"></div>
246 <div className="star"></div>
247 </div>
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]248 </div>
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]249 </div>
250 <div className="main">
251 <div>
252
253 {/* 第一排：悬浮搜索框 */}
254 <div className={styles.searchBarContainer}>
255 <input type="text" placeholder="Search for everything..." className={styles.searchInput} />
256 </div>
257 <div style={{ display: "flex", marginTop: '40px' }}>
258 <div className={styles.leftBox}>
259 <div className={styles.textContent}>
260 <Typography
261 variant="h4"
262 sx={{
263 color: "#fff",
264 fontWeight: 600,
265 mb: 2,
266 letterSpacing: 2,
267 textShadow: "0 2px 16px #0ea5e9",
268 }}
269 >
270 Welcome Back!
271 </Typography>
272
273 <h2 className={styles.titlebox}>{currentUser?.nickName}，整点什么？</h2>
274 <Button style={{ width: "100px" }} size='small' type="primary" onClick={() => window.location.href = '/relation'}>我的形象</Button>
275 </div>
276 <div className={styles.gitAnimation}>
277 <img
278 src={`/images/planets/${userInfo?.planet?.filename}.gif`}
279 alt="用户形象"
280 style={{
281 width: 150,
282 height: 150,
283 borderRadius: '50%',
284 border: '2px solid #4a4a7a',
285 boxShadow: '0 0 15px #6a5acd'
286 }}
287 />
288 </div>
289 </div>
290
291 {/* 新增右侧统计卡片（使用Ant Design组件） */}
292 <Card className={styles.rightCard} title="种子统计" bordered={false}>
293 <Row gutter={16}>
294 <Col span={8}>
295 <Statistic title="总种子数" value={128} />
296 </Col>
297 <Col span={8}>
298 <Statistic title="活跃种子" value={42} />
299 </Col>
300 <Col span={8}>
301 <Statistic title="完成种子" value={86} />
302 </Col>
303 </Row>
304 <Divider />
305 </Card>
306 <Card className={styles.rightCard2} >
307
308 <Flex className={styles.buttonGroup}>
309 <div style={{
310 fontSize: '16px',
311 color: '#a8b2d1',
312 letterSpacing: '1px'
313 }}>来看看星球的
314 </div>
315 <div style={{
316 fontSize: '23px',
317 color: '#0abde3',
318 letterSpacing: '1px',
319 fontWeight: 'bold',
320 }}>
321 种子
322 </div>
323 <Button type="primary" onClick={() => window.location.href = '/torrent-upload'}>新建种子</Button>
324 <Button onClick={() => window.location.href = '/torrent-list'}>我的种子</Button>
325 </Flex>
326 </Card>
327
328 <Card className={styles.rightCard2} >
329
330 <Flex className={styles.buttonGroup}>
331 <div style={{
332 fontSize: '16px',
333 color: '#a8b2d1',
334 letterSpacing: '1px'
335 }}>现在看看星球
336 </div>
337 <div style={{
338 fontSize: '23px',
339 color: '#e1b12c',
340 letterSpacing: '1px',
341 fontWeight: 'bold',
342 }}>
343 动态
344 </div>
345 <Button color="orange" variant="solid" onClick={() => window.location.href = '/user-center'}>立即创作</Button>
346 <Button onClick={() => window.location.href = '/user-center'}>我的创作</Button>
347 </Flex>
348 </Card>
349
350 </div>
351
352 <div className={styles.homeContainer}>
353
354 {/* 第二排：左侧欢迎信息和右侧通知公告 */}
355 <div className={styles.secondRow}>
356 {/* 左侧框 */}
357 {/* 中间框：最新热点 */}
358 <div className={styles.middleBox}>
359 <div className={styles.hotSpot}>
360 <h3 className={styles.hotTitle}>排行榜动态</h3>
361 <ul className={styles.hotList}>
362 {Array.from({ length: 5 }, (_, i) => (
363 <li key={i} className={styles.hotItem}>
364 <span className={styles.hotItemNumber}>{`${i + 1}`}</span>
365 <span className={styles.hotItemText}>综合榜{`${i + 1}`}</span>
366 </li>
367 ))}
368 </ul>
369 </div>
370 </div>
371
372 {/* 右侧框：通知公告（轮播样式） */}
373 <div className={styles.rightBox}>
374 <div className={styles.carouselContainer}>
375 {/* 轮播内容，这里用几个div模拟 */}
376 <div className={styles.carouselItem}>通知公告 1</div>
377 <div className={styles.carouselItem}>通知公告 2</div>
378 <div className={styles.carouselItem}>通知公告 3</div>
379 </div>
380 </div>
381 </div>
382 {/* 第三排：帖子卡片 */}
383 <div className={styles.thirdRow}>
384 {Array.from({ length: 16 }, (_, i) => (
385 <div className={styles.postCard} key={i}>
386 <div className={styles.cardContent}>
387 <h3 className={styles.postTitle}>模拟帖子标题{`${i + 1}`}（这是一个可能会很长的标题测试单行缩略效果）</h3>
388 <img src="/images/post-cover.jpg" alt="帖子封面" className={styles.cardImage} />
389 <div className={styles.infoWrapper}>
390 <p className={styles.postAuthor}>作者：用户{`${i + 1}`}</p>
391 <div className={styles.tagsContainer}>
392 {['技术', '生活', '分享'].map((tag, idx) => (
393 <span className={styles.tag} key={idx}>{tag}</span>
394 ))}
395 </div>
396 <div className={styles.statsContainer}>
397 <span className={styles.statItem}><LikeOutlined /> {Math.floor(Math.random() * 1000)}</span>
398 <span className={styles.statItem}><HeartOutlined /> {Math.floor(Math.random() * 500)}</span>
399 <span className={styles.statItem}><EyeOutlined /> {Math.floor(Math.random() * 5000)}</span>
400 </div>
401 </div>
402 </div>
403 </div>
404 ))}
405 </div>
406 </div>
407 </div>
408 </div>
409 </div>
410 );
Jiarenxiang36728482025-06-07 21:51:26 +0800[diff] [blame]411};
412
zhaoyumaof8f81842025-06-09 00:00:46 +0800[diff] [blame]413export default Welcome;