update pay function

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"  // 给导航栏留出空间
     >
       {/* 背景装饰 - 黄金光晕效果 */}
       <Box
@@ -720,7 +739,8 @@ const AgentChatV4 = () => {
           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 = () => {
       </Collapse>
 
       {/* 主聊天区域 */}
-      <Flex flex="1" direction="column" h="100%" position="relative">
+      <Flex flex="1" direction="column" h="calc(100vh - 80px)" mt="80px" position="relative">
         {/* 聊天头部 */}
         <Box
           bg={glassBg}
           backdropFilter="blur(20px)"
           borderBottom="1px solid"
           borderColor={borderGold}
-          px={6}
+          px={{ base: 3, md: 6 }}
-          py={4}
+          py={{ base: 3, md: 4 }}
           boxShadow="0 4px 16px rgba(255, 215, 0, 0.1)"
         >
           <HStack justify="space-between">
-            <HStack spacing={4}>
+            <HStack spacing={{ base: 2, md: 4 }}>
               <IconButton
                 icon={<FiMessageSquare />}
                 size="sm"
@@ -912,8 +932,8 @@ const AgentChatV4 = () => {
                 onClick={toggleSidebar}
               />
               <Box
-                w="40px"
+                w={{ base: "32px", md: "40px" }}
-                h="40px"
+                h={{ base: "32px", md: "40px" }}
                 borderRadius="lg"
                 bg={goldGradient}
                 display="flex"
@@ -921,10 +941,10 @@ const AgentChatV4 = () => {
                 justifyContent="center"
                 boxShadow="0 4px 12px rgba(255, 215, 0, 0.3)"
               >
-                <FiCpu fontSize="1.5rem" color={darkBg} />
+                <FiCpu fontSize={{ base: "1.2rem", md: "1.5rem" }} color={darkBg} />
               </Box>
-              <VStack align="start" spacing={0}>
+              <VStack align="start" spacing={0} display={{ base: "none", sm: "flex" }}>
-                <Heading size="md" color={textWhite}>价小前投研</Heading>
+                <Heading size={{ base: "sm", md: "md" }} color={textWhite}>价小前投研</Heading>
                 <HStack>
                   <Badge
                     bg="rgba(255, 215, 0, 0.2)"
@@ -938,14 +958,14 @@ const AgentChatV4 = () => {
                       <span>AI 深度分析</span>
                     </HStack>
                   </Badge>
-                  <Text fontSize="xs" color={textGray}>
+                  <Text fontSize="xs" color={textGray} display={{ base: "none", md: "block" }}>
                     {AVAILABLE_MODELS.find(m => m.id === selectedModel)?.name || '智能模型'}
                   </Text>
                 </HStack>
               </VStack>
             </HStack>
 
-            <HStack>
+            <HStack spacing={{ base: 1, md: 2 }}>
               <IconButton
                 icon={<FiRefreshCw />}
                 size="sm"
@@ -998,8 +1018,8 @@ const AgentChatV4 = () => {
         <Box
           flex="1"
           overflowY="auto"
-          px={6}
+          px={{ base: 3, md: 6 }}
-          py={4}
+          py={{ base: 4, md: 6 }}
           css={{
             '&::-webkit-scrollbar': { width: '8px' },
             '&::-webkit-scrollbar-thumb': {
@@ -1008,7 +1028,7 @@ const AgentChatV4 = () => {
             },
           }}
         >
-          <VStack spacing={4} align="stretch">
+          <VStack spacing={{ base: 4, md: 5 }} align="stretch" maxW="1200px" mx="auto">
             {messages.map((message) => (
               <Fade in key={message.id}>
                 <MessageRenderer message={message} userAvatar={user?.avatar} />
@@ -1020,7 +1040,7 @@ const AgentChatV4 = () => {
 
         {/* 快捷问题 */}
         {messages.length <= 2 && !isProcessing && (
-          <Box px={6} py={3} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
+          <Box px={{ base: 3, md: 6 }} py={{ base: 3, md: 4 }} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
             <Text fontSize="xs" color={textGray} mb={2}>
               💡 试试这些问题：
             </Text>
@@ -1052,14 +1072,14 @@ const AgentChatV4 = () => {
         )}
 
         {/* 输入框 */}
-        <Box px={6} py={4} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
+        <Box px={{ base: 3, md: 6 }} py={{ base: 3, md: 4 }} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
           <Flex>
             <Input
               ref={inputRef}
               value={inputValue}
               onChange={(e) => 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" }}
             />
             <Button
               bg={goldGradient}
@@ -1076,8 +1096,8 @@ const AgentChatV4 = () => {
               onClick={handleSendMessage}
               isLoading={isProcessing}
               disabled={!inputValue.trim() || isProcessing}
-              size="lg"
+              size={{ base: "md", md: "lg" }}
-              minW="100px"
+              minW={{ base: "60px", md: "100px" }}
               _hover={{
                 transform: 'translateY(-2px)',
                 boxShadow: '0 4px 20px rgba(255, 215, 0, 0.4)',
@@ -1085,7 +1105,9 @@ const AgentChatV4 = () => {
               transition="all 0.3s"
               fontWeight="bold"
             >
-              {isProcessing ? <Spinner size="sm" /> : <HStack spacing={2}><FiSend /><Text>发送</Text></HStack>}
+              {isProcessing ? <Spinner size="sm" /> : (
+                isMobile ? <FiSend /> : <HStack spacing={2}><FiSend /><Text>发送</Text></HStack>
+              )}
             </Button>
           </Flex>
         </Box>
@@ -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={{