diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js index d4f8afe6..1f46cf6f 100644 --- a/src/views/AgentChat/index.js +++ b/src/views/AgentChat/index.js @@ -194,8 +194,17 @@ const AgentChatV4 = () => { // UI 状态 const [searchQuery, setSearchQuery] = useState(''); - const { isOpen: isSidebarOpen, onToggle: toggleSidebar } = useDisclosure({ defaultIsOpen: true }); - const { isOpen: isRightPanelOpen, onToggle: toggleRightPanel } = useDisclosure({ defaultIsOpen: true }); + + // 检测是否为移动设备(屏幕宽度小于 768px) + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + + // 根据设备类型设置侧边栏默认状态(移动端默认收起) + const { isOpen: isSidebarOpen, onToggle: toggleSidebar } = useDisclosure({ + defaultIsOpen: !isMobile + }); + const { isOpen: isRightPanelOpen, onToggle: toggleRightPanel } = useDisclosure({ + defaultIsOpen: !isMobile + }); // Refs const messagesEndRef = useRef(null); @@ -310,6 +319,17 @@ const AgentChatV4 = () => { scrollToBottom(); }, [messages]); + // 监听窗口大小变化,动态更新移动端状态 + useEffect(() => { + const handleResize = () => { + const mobile = window.innerWidth < 768; + setIsMobile(mobile); + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + const addMessage = (message) => { setMessages((prev) => [...prev, { ...message, id: Date.now() }]); }; @@ -684,7 +704,6 @@ const AgentChatV4 = () => { bg={darkBg} position="relative" overflow="hidden" - pt="80px" // 给导航栏留出空间 > {/* 背景装饰 - 黄金光晕效果 */} { backdropFilter="blur(20px)" borderRight="1px solid" borderColor={borderGold} - h="100%" + h="calc(100vh - 80px)" + mt="80px" display="flex" flexDirection="column" boxShadow="0 8px 32px rgba(255, 215, 0, 0.1)" @@ -889,19 +909,19 @@ const AgentChatV4 = () => { {/* 主聊天区域 */} - + {/* 聊天头部 */} - + } size="sm" @@ -912,8 +932,8 @@ const AgentChatV4 = () => { onClick={toggleSidebar} /> { justifyContent="center" boxShadow="0 4px 12px rgba(255, 215, 0, 0.3)" > - + - - 价小前投研 + + 价小前投研 { AI 深度分析 - + {AVAILABLE_MODELS.find(m => m.id === selectedModel)?.name || '智能模型'} - + } size="sm" @@ -998,8 +1018,8 @@ const AgentChatV4 = () => { { }, }} > - + {messages.map((message) => ( @@ -1020,7 +1040,7 @@ const AgentChatV4 = () => { {/* 快捷问题 */} {messages.length <= 2 && !isProcessing && ( - + 💡 试试这些问题: @@ -1052,14 +1072,14 @@ const AgentChatV4 = () => { )} {/* 输入框 */} - + setInputValue(e.target.value)} onKeyPress={handleKeyPress} - placeholder="输入你的问题,我会进行深度分析..." + placeholder={isMobile ? "输入问题..." : "输入你的问题,我会进行深度分析..."} bg="rgba(255, 255, 255, 0.05)" border="1px solid" borderColor={borderGold} @@ -1068,7 +1088,7 @@ const AgentChatV4 = () => { _focus={{ borderColor: goldAccent, boxShadow: `0 0 0 1px ${goldAccent}` }} mr={2} disabled={isProcessing} - size="lg" + size={{ base: "md", md: "lg" }} /> @@ -1099,7 +1121,8 @@ const AgentChatV4 = () => { backdropFilter="blur(20px)" borderLeft="1px solid" borderColor={borderGold} - h="100%" + h="calc(100vh - 80px)" + mt="80px" overflowY="auto" boxShadow="0 -8px 32px rgba(255, 215, 0, 0.1)" css={{