Initial commit
This commit is contained in:
380
src/views/Home/HomePage.js
Normal file
380
src/views/Home/HomePage.js
Normal file
@@ -0,0 +1,380 @@
|
||||
// src/views/Home/HomePage.js - 专业投资分析平台
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
Button,
|
||||
Flex,
|
||||
VStack,
|
||||
HStack,
|
||||
SimpleGrid,
|
||||
Link
|
||||
} from '@chakra-ui/react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import heroBg from '../../assets/img/BackgroundCard1.png';
|
||||
import '../../styles/home-animations.css';
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, isAuthenticated, isLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 移除统计数据动画
|
||||
|
||||
// 保留原有的调试信息
|
||||
useEffect(() => {
|
||||
console.log('🏠 HomePage AuthContext 状态:', {
|
||||
user,
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
hasUser: !!user,
|
||||
userInfo: user ? {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
nickname: user.nickname
|
||||
} : null
|
||||
});
|
||||
}, [user, isAuthenticated, isLoading]);
|
||||
|
||||
// 核心功能配置 - 5个主要功能
|
||||
const coreFeatures = [
|
||||
{
|
||||
id: 'news-catalyst',
|
||||
title: '新闻催化分析',
|
||||
description: '实时新闻事件分析，捕捉市场催化因子',
|
||||
icon: '📊',
|
||||
color: 'yellow',
|
||||
url: 'https://valuefrontier.cn/community',
|
||||
badge: '核心',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 'concepts',
|
||||
title: '概念中心',
|
||||
description: '热门概念与主题投资分析追踪',
|
||||
icon: '🎯',
|
||||
color: 'purple',
|
||||
url: 'https://valuefrontier.cn/concepts',
|
||||
badge: '热门'
|
||||
},
|
||||
{
|
||||
id: 'stocks',
|
||||
title: '个股信息汇总',
|
||||
description: '全面的个股基本面信息整合',
|
||||
icon: '📈',
|
||||
color: 'blue',
|
||||
url: 'https://valuefrontier.cn/stocks',
|
||||
badge: '全面'
|
||||
},
|
||||
{
|
||||
id: 'limit-analyse',
|
||||
title: '涨停板块分析',
|
||||
description: '涨停板数据深度分析与规律挖掘',
|
||||
icon: '🚀',
|
||||
color: 'green',
|
||||
url: 'https://valuefrontier.cn/limit-analyse',
|
||||
badge: '精准'
|
||||
},
|
||||
{
|
||||
id: 'company',
|
||||
title: '个股罗盘',
|
||||
description: '个股全方位分析与投资决策支持',
|
||||
icon: '🧭',
|
||||
color: 'orange',
|
||||
url: 'https://valuefrontier.cn/company?scode=688256',
|
||||
badge: '专业'
|
||||
},
|
||||
{
|
||||
id: 'trading-simulation',
|
||||
title: '模拟盘交易',
|
||||
description: '100万起始资金，体验真实交易环境',
|
||||
icon: '💰',
|
||||
color: 'teal',
|
||||
url: '/trading-simulation',
|
||||
badge: '实战'
|
||||
}
|
||||
];
|
||||
|
||||
// 个人中心配置
|
||||
const personalCenter = {
|
||||
title: '个人中心',
|
||||
description: '账户管理与个人设置',
|
||||
icon: '👤',
|
||||
color: 'gray',
|
||||
url: 'https://valuefrontier.cn/home/center'
|
||||
};
|
||||
|
||||
const handleProductClick = (url) => {
|
||||
if (url.startsWith('http')) {
|
||||
// 外部链接，直接打开
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
// 内部路由
|
||||
navigate(url);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 开发调试信息 */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<Box bg="rgba(0, 0, 0, 0.8)" color="yellow.200" p={2} fontSize="xs" zIndex={1000} position="relative">
|
||||
认证: {isAuthenticated ? '✅' : '❌'} | 用户: {user?.nickname || '无'}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Hero Section - 深色科技风格 */}
|
||||
<Box
|
||||
position="relative"
|
||||
minH="100vh"
|
||||
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* 背景图片和装饰 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
right="0"
|
||||
w="50%"
|
||||
h="100%"
|
||||
bgImage={`url(${heroBg})`}
|
||||
bgSize="cover"
|
||||
bgPosition="center"
|
||||
opacity={0.3}
|
||||
_after={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(90deg, rgba(14, 12, 21, 0.9) 0%, rgba(14, 12, 21, 0.3) 100%)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 装饰性几何图形 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="20%"
|
||||
left="10%"
|
||||
w="200px"
|
||||
h="200px"
|
||||
borderRadius="50%"
|
||||
bg="rgba(255, 215, 0, 0.1)"
|
||||
filter="blur(80px)"
|
||||
className="float-animation"
|
||||
/>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="30%"
|
||||
right="20%"
|
||||
w="150px"
|
||||
h="150px"
|
||||
borderRadius="50%"
|
||||
bg="rgba(138, 43, 226, 0.1)"
|
||||
filter="blur(60px)"
|
||||
className="float-animation-reverse"
|
||||
/>
|
||||
|
||||
<Container maxW="7xl" position="relative" zIndex={2}>
|
||||
<VStack spacing={16} align="stretch" minH="100vh" justify="center">
|
||||
{/* 主标题区域 */}
|
||||
<VStack spacing={6} textAlign="center" pt={20}>
|
||||
<Heading
|
||||
size="4xl"
|
||||
color="white"
|
||||
fontWeight="900"
|
||||
letterSpacing="-2px"
|
||||
lineHeight="shorter"
|
||||
>
|
||||
智能投资分析平台
|
||||
</Heading>
|
||||
<Text fontSize="xl" color="whiteAlpha.800" maxW="3xl" lineHeight="tall">
|
||||
专业投资研究工具，助您把握市场机遇
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
{/* 个人中心入口 */}
|
||||
<Flex justify="flex-end" pr={4}>
|
||||
<Button
|
||||
leftIcon={<Text fontSize="lg">{personalCenter.icon}</Text>}
|
||||
colorScheme="gray"
|
||||
variant="ghost"
|
||||
size="md"
|
||||
color="whiteAlpha.800"
|
||||
_hover={{
|
||||
bg: 'whiteAlpha.200',
|
||||
color: 'white'
|
||||
}}
|
||||
onClick={() => handleProductClick(personalCenter.url)}
|
||||
>
|
||||
{personalCenter.title}
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* 核心功能面板 */}
|
||||
<Box>
|
||||
<VStack spacing={8}>
|
||||
<Heading size="2xl" color="white" textAlign="center">
|
||||
核心功能
|
||||
</Heading>
|
||||
|
||||
{/* 新闻催化分析 - 突出显示 */}
|
||||
<Card
|
||||
bg="transparent"
|
||||
border="2px solid"
|
||||
borderColor="yellow.400"
|
||||
borderRadius="3xl"
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
shadow="2xl"
|
||||
w="100%"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%)',
|
||||
zIndex: 0
|
||||
}}
|
||||
>
|
||||
<CardBody p={8} position="relative" zIndex={1}>
|
||||
<Flex align="center" justify="space-between">
|
||||
<HStack spacing={6}>
|
||||
<Box
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
bg="yellow.400"
|
||||
color="black"
|
||||
>
|
||||
<Text fontSize="3xl">{coreFeatures[0].icon}</Text>
|
||||
</Box>
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack>
|
||||
<Heading size="xl" color="white">
|
||||
{coreFeatures[0].title}
|
||||
</Heading>
|
||||
<Badge colorScheme="yellow" variant="solid" fontSize="sm">
|
||||
{coreFeatures[0].badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.800" fontSize="lg" maxW="md">
|
||||
{coreFeatures[0].description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
<Button
|
||||
colorScheme="yellow"
|
||||
size="lg"
|
||||
borderRadius="full"
|
||||
fontWeight="bold"
|
||||
onClick={() => handleProductClick(coreFeatures[0].url)}
|
||||
>
|
||||
进入功能 →
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 其他5个功能 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} w="100%">
|
||||
{coreFeatures.slice(1).map((feature, index) => (
|
||||
<Card
|
||||
key={feature.id}
|
||||
bg="whiteAlpha.100"
|
||||
backdropFilter="blur(10px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
borderRadius="2xl"
|
||||
cursor="pointer"
|
||||
transition="all 0.3s ease"
|
||||
_hover={{
|
||||
bg: 'whiteAlpha.200',
|
||||
borderColor: `${feature.color}.400`,
|
||||
transform: 'translateY(-4px)',
|
||||
shadow: '2xl'
|
||||
}}
|
||||
onClick={() => handleProductClick(feature.url)}
|
||||
minH="180px"
|
||||
>
|
||||
<CardBody p={6}>
|
||||
<VStack spacing={4} align="start" h="100%">
|
||||
<HStack>
|
||||
<Box
|
||||
p={3}
|
||||
borderRadius="lg"
|
||||
bg={`${feature.color}.50`}
|
||||
border="1px solid"
|
||||
borderColor={`${feature.color}.200`}
|
||||
>
|
||||
<Text fontSize="2xl">{feature.icon}</Text>
|
||||
</Box>
|
||||
<Badge colorScheme={feature.color} variant="solid">
|
||||
{feature.badge}
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
<VStack align="start" spacing={2} flex={1}>
|
||||
<Heading size="lg" color="white">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
<Text color="whiteAlpha.800" fontSize="sm" lineHeight="tall">
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
colorScheme={feature.color}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
alignSelf="flex-end"
|
||||
onClick={() => handleProductClick(feature.url)}
|
||||
>
|
||||
使用
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 底部区域 */}
|
||||
<Box
|
||||
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 100%)"
|
||||
py={12}
|
||||
position="relative"
|
||||
>
|
||||
<Container maxW="7xl" position="relative" zIndex={1}>
|
||||
<VStack spacing={6} textAlign="center">
|
||||
<Text color="whiteAlpha.600" fontSize="sm">
|
||||
© 2024 价值前沿. 保留所有权利.
|
||||
</Text>
|
||||
<HStack spacing={4} fontSize="xs" color="whiteAlpha.500">
|
||||
<Link
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
|
||||
isExternal
|
||||
color="whiteAlpha.500"
|
||||
_hover={{ color: 'whiteAlpha.700' }}
|
||||
>
|
||||
京公网安备11010802046286号
|
||||
</Link>
|
||||
<Text>京ICP备2025107343号-1</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user