diff --git a/src/views/AgentChat/components/ChatArea/WelcomeScreen.js b/src/views/AgentChat/components/ChatArea/WelcomeScreen.js new file mode 100644 index 00000000..0bebbf38 --- /dev/null +++ b/src/views/AgentChat/components/ChatArea/WelcomeScreen.js @@ -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 ( + + onClick(card.prompt)} + _hover={{ + bg: 'rgba(255, 255, 255, 0.06)', + borderColor: 'rgba(255, 255, 255, 0.15)', + boxShadow: `0 8px 32px ${card.shadowColor}`, + }} + > + + + + + + {card.title} + + + + {card.description} + + + + ); +}; + +/** + * WelcomeScreen - 欢迎界面组件 + * + * @param {Object} props + * @param {Function} props.onSuggestionClick - 点击建议时的回调 + * @returns {JSX.Element} + */ +const WelcomeScreen = ({ onSuggestionClick }) => { + return ( + + + {/* Logo 和标题 */} + + + {/* 动态 Logo */} + + {/* 外层光晕 */} + + {/* 旋转边框 */} + + + + + + + {/* 标题 */} + + + 你好,我是价小前 + + + 你的 AI 投研助手 + + + + + + {/* 简介 */} + + + + 基于最先进的大语言模型,结合专业微调的金融理解能力, +
+ 整合实时投研数据与专业分析工具,为你提供智能投资研究服务。 +
+
+
+ + {/* 能力标签 */} + + + {CAPABILITIES.map((cap, idx) => ( + + + + + {cap.text} + + + + ))} + + + + {/* 建议任务卡片 */} + + + + + + 试试这些问题 + + + + + + {SUGGESTION_CARDS.map((card, idx) => ( + + ))} + + + + {/* 底部提示 */} + + + 输入你的问题,或点击上方卡片快速开始 + + +
+
+ ); +}; + +export default WelcomeScreen; diff --git a/src/views/AgentChat/components/ChatArea/index.js b/src/views/AgentChat/components/ChatArea/index.js index 71b48d87..7e11e14b 100644 --- a/src/views/AgentChat/components/ChatArea/index.js +++ b/src/views/AgentChat/components/ChatArea/index.js @@ -5,7 +5,6 @@ import React, { useRef, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Box, - Button, Input, Avatar, Badge, @@ -27,14 +26,13 @@ import { Settings, Cpu, Zap, - Sparkles, Paperclip, Image as ImageIcon, } from 'lucide-react'; import { AVAILABLE_MODELS } from '../../constants/models'; -import { quickQuestions } from '../../constants/quickQuestions'; import { animations } from '../../constants/animations'; import MessageRenderer from './MessageRenderer'; +import WelcomeScreen from './WelcomeScreen'; /** * ChatArea - 中间聊天区域组件 @@ -215,94 +213,49 @@ const ChatArea = ({ - {/* 消息列表 */} + {/* 消息列表 / 欢迎界面 */} - - - - {messages.map((message) => ( - - - - ))} - -
- - - - - {/* 快捷问题 */} - - {messages.length <= 2 && !isProcessing && ( + {/* 判断是否显示欢迎界面:只有初始欢迎消息(1条)或没有消息时显示 */} + {messages.length <= 1 && !isProcessing ? ( + { + onInputChange(prompt); + inputRef.current?.focus(); + }} + /> + ) : ( - - - - - 快速开始 - - - {quickQuestions.map((question, idx) => ( - - - - ))} - - - + + + {messages.map((message) => ( + + + + ))} + +
+ )} - + {/* 输入栏 - 深色毛玻璃 */}