update pay function
This commit is contained in:
310
src/views/AgentChat/components/ChatArea/WelcomeScreen.js
Normal file
310
src/views/AgentChat/components/ChatArea/WelcomeScreen.js
Normal file
@@ -0,0 +1,310 @@
|
||||
// src/views/AgentChat/components/ChatArea/WelcomeScreen.js
|
||||
// 欢迎界面组件 - 类似 Gemini/ChatGPT 风格
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
SimpleGrid,
|
||||
Icon,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
Cpu,
|
||||
TrendingUp,
|
||||
BarChart3,
|
||||
Newspaper,
|
||||
Target,
|
||||
Lightbulb,
|
||||
Search,
|
||||
PieChart,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
|
||||
/**
|
||||
* 建议任务卡片数据
|
||||
*/
|
||||
const SUGGESTION_CARDS = [
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: '今日涨停分析',
|
||||
description: '分析今天涨停板的概念分布和热点板块',
|
||||
prompt: '分析一下今天的涨停板，有哪些热点概念？',
|
||||
gradient: 'linear(to-br, orange.400, red.500)',
|
||||
shadowColor: 'rgba(251, 146, 60, 0.3)',
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: '个股深度研究',
|
||||
description: '全面分析某只股票的基本面和技术面',
|
||||
prompt: '帮我分析一下贵州茅台的投资价值',
|
||||
gradient: 'linear(to-br, blue.400, cyan.500)',
|
||||
shadowColor: 'rgba(59, 130, 246, 0.3)',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: '板块轮动追踪',
|
||||
description: '追踪近期市场板块轮动和资金流向',
|
||||
prompt: '最近有哪些板块在轮动？资金流向如何？',
|
||||
gradient: 'linear(to-br, purple.400, pink.500)',
|
||||
shadowColor: 'rgba(168, 85, 247, 0.3)',
|
||||
},
|
||||
{
|
||||
icon: Newspaper,
|
||||
title: '财经热点解读',
|
||||
description: '解读最新的财经新闻和政策影响',
|
||||
prompt: '今天有什么重要的财经新闻？对市场有什么影响？',
|
||||
gradient: 'linear(to-br, green.400, teal.500)',
|
||||
shadowColor: 'rgba(34, 197, 94, 0.3)',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 能力标签
|
||||
*/
|
||||
const CAPABILITIES = [
|
||||
{ icon: Target, text: '精准股票分析' },
|
||||
{ icon: Lightbulb, text: '智能投资建议' },
|
||||
{ icon: PieChart, text: '数据可视化' },
|
||||
{ icon: Sparkles, text: '实时热点追踪' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 建议卡片组件
|
||||
*/
|
||||
const SuggestionCard = ({ card, onClick, index }) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 + index * 0.1, duration: 0.4 }}
|
||||
whileHover={{ scale: 1.02, y: -4 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Box
|
||||
as="button"
|
||||
w="full"
|
||||
p={4}
|
||||
bg="rgba(255, 255, 255, 0.03)"
|
||||
backdropFilter="blur(12px)"
|
||||
border="1px solid"
|
||||
borderColor="rgba(255, 255, 255, 0.08)"
|
||||
borderRadius="xl"
|
||||
textAlign="left"
|
||||
cursor="pointer"
|
||||
transition="all 0.3s"
|
||||
onClick={() => onClick(card.prompt)}
|
||||
_hover={{
|
||||
bg: 'rgba(255, 255, 255, 0.06)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
boxShadow: `0 8px 32px ${card.shadowColor}`,
|
||||
}}
|
||||
>
|
||||
<HStack spacing={3} mb={2}>
|
||||
<Box
|
||||
p={2}
|
||||
borderRadius="lg"
|
||||
bgGradient={card.gradient}
|
||||
boxShadow={`0 4px 12px ${card.shadowColor}`}
|
||||
>
|
||||
<Icon as={card.icon} w={4} h={4} color="white" />
|
||||
</Box>
|
||||
<Text fontWeight="semibold" color="gray.200" fontSize="sm">
|
||||
{card.title}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="xs" color="gray.500" lineHeight="tall">
|
||||
{card.description}
|
||||
</Text>
|
||||
</Box>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* WelcomeScreen - 欢迎界面组件
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Function} props.onSuggestionClick - 点击建议时的回调
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const WelcomeScreen = ({ onSuggestionClick }) => {
|
||||
return (
|
||||
<Box
|
||||
flex={1}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
px={6}
|
||||
py={8}
|
||||
>
|
||||
<VStack spacing={8} maxW="700px" w="full">
|
||||
{/* Logo 和标题 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
{/* 动态 Logo */}
|
||||
<Box position="relative">
|
||||
{/* 外层光晕 */}
|
||||
<motion.div
|
||||
animate={{
|
||||
boxShadow: [
|
||||
'0 0 30px rgba(139, 92, 246, 0.3)',
|
||||
'0 0 60px rgba(139, 92, 246, 0.5)',
|
||||
'0 0 30px rgba(139, 92, 246, 0.3)',
|
||||
],
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: -8,
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
{/* 旋转边框 */}
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: -4,
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(45deg, transparent 40%, rgba(139, 92, 246, 0.5) 50%, transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
w={20}
|
||||
h={20}
|
||||
borderRadius="full"
|
||||
bgGradient="linear(to-br, purple.500, pink.500, blue.500)"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
position="relative"
|
||||
boxShadow="0 8px 32px rgba(139, 92, 246, 0.4)"
|
||||
>
|
||||
<Cpu className="w-10 h-10" color="white" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 标题 */}
|
||||
<VStack spacing={1}>
|
||||
<Text
|
||||
fontSize="3xl"
|
||||
fontWeight="bold"
|
||||
bgGradient="linear(to-r, blue.300, purple.400, pink.400)"
|
||||
bgClip="text"
|
||||
letterSpacing="tight"
|
||||
>
|
||||
你好，我是价小前
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" textAlign="center">
|
||||
你的 AI 投研助手
|
||||
</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</motion.div>
|
||||
|
||||
{/* 简介 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
>
|
||||
<Box
|
||||
p={4}
|
||||
bg="rgba(255, 255, 255, 0.02)"
|
||||
borderRadius="xl"
|
||||
border="1px solid"
|
||||
borderColor="rgba(255, 255, 255, 0.05)"
|
||||
>
|
||||
<Text fontSize="sm" color="gray.400" textAlign="center" lineHeight="tall">
|
||||
基于最先进的大语言模型，结合专业微调的金融理解能力，
|
||||
<br />
|
||||
整合实时投研数据与专业分析工具，为你提供智能投资研究服务。
|
||||
</Text>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* 能力标签 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3, duration: 0.4 }}
|
||||
>
|
||||
<HStack spacing={4} flexWrap="wrap" justify="center">
|
||||
{CAPABILITIES.map((cap, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.3 + idx * 0.05 }}
|
||||
>
|
||||
<HStack
|
||||
spacing={2}
|
||||
px={3}
|
||||
py={1.5}
|
||||
bg="rgba(139, 92, 246, 0.1)"
|
||||
borderRadius="full"
|
||||
border="1px solid"
|
||||
borderColor="rgba(139, 92, 246, 0.2)"
|
||||
>
|
||||
<Icon as={cap.icon} w={3.5} h={3.5} color="purple.400" />
|
||||
<Text fontSize="xs" color="purple.300" fontWeight="medium">
|
||||
{cap.text}
|
||||
</Text>
|
||||
</HStack>
|
||||
</motion.div>
|
||||
))}
|
||||
</HStack>
|
||||
</motion.div>
|
||||
|
||||
{/* 建议任务卡片 */}
|
||||
<Box w="full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<HStack spacing={2} mb={4} justify="center">
|
||||
<Sparkles className="w-4 h-4" color="#a78bfa" />
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="medium">
|
||||
试试这些问题
|
||||
</Text>
|
||||
</HStack>
|
||||
</motion.div>
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={3}>
|
||||
{SUGGESTION_CARDS.map((card, idx) => (
|
||||
<SuggestionCard
|
||||
key={idx}
|
||||
card={card}
|
||||
index={idx}
|
||||
onClick={onSuggestionClick}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
{/* 底部提示 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
>
|
||||
<Text fontSize="xs" color="gray.600" textAlign="center">
|
||||
输入你的问题，或点击上方卡片快速开始
|
||||
</Text>
|
||||
</motion.div>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomeScreen;
|
||||
Reference in New Issue
Block a user