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) => (
+
+
+
+ ))}
+
+
+
)}
-
+
{/* 输入栏 - 深色毛玻璃 */}