src/pages/Home/index.tsx

// 写一个简单的欢迎界面
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';
import {generatePassKey} from '../../services/bt/index'

const Welcome: React.FC = () => {
  //  获取用户信息
  // const { data: userInfo, loading } = useRequest(async () => {
  //   return { data: await getUserInfo() };
  // });

  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 });

    return {
      data: {
        ...userRes.user,
        planet: planetRes
      }
    };
  });

  if (loading) {
    return <div>loading...</div>;
  }

  const currentUser = userInfo;

  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 style={{ display: 'flex', alignItems: 'center' }}>
            <div className={styles.searchBarContainer}>
              <input type="text" placeholder="Search for everything..." className={styles.searchInput} />
            </div>
            <Button
              type="primary"
              style={{ marginLeft: 16 }}
              onClick={async () => {
              try {
                const res = await generatePassKey();
                if (res && res.code === 0 && res.data && res.data.passkey) {
                window.alert(`邀请码: ${res.data.passkey}`);
                } else {
                window.alert('邀请码生成失败');
                }
              } catch (e) {
                window.alert('邀请码生成失败');
              }
              }}
            >
              邀请他人
            </Button>
            </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-my'}>我的种子</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 Welcome;