feat: 将滚动事件移东到组件内部

This commit is contained in:
zdl
2025-11-24 15:54:26 +08:00
parent 44ecf7e5c7
commit 3a0898634f
2 changed files with 10 additions and 11 deletions

View File

@@ -1,7 +1,7 @@
// src/views/AgentChat/components/ChatArea/index.js // src/views/AgentChat/components/ChatArea/index.js
// 中间聊天区域组件 // 中间聊天区域组件
import React from 'react'; import React, { useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { import {
Box, Box,
@@ -56,7 +56,6 @@ import MessageRenderer from './MessageRenderer';
* @param {Function} props.onToggleRightSidebar - 切换右侧栏回调 * @param {Function} props.onToggleRightSidebar - 切换右侧栏回调
* @param {Function} props.onNewSession - 新建会话回调 * @param {Function} props.onNewSession - 新建会话回调
* @param {string} props.userAvatar - 用户头像 URL * @param {string} props.userAvatar - 用户头像 URL
* @param {RefObject} props.messagesEndRef - 消息列表底部引用
* @param {RefObject} props.inputRef - 输入框引用 * @param {RefObject} props.inputRef - 输入框引用
* @param {RefObject} props.fileInputRef - 文件上传输入引用 * @param {RefObject} props.fileInputRef - 文件上传输入引用
* @returns {JSX.Element} * @returns {JSX.Element}
@@ -78,10 +77,15 @@ const ChatArea = ({
onToggleRightSidebar, onToggleRightSidebar,
onNewSession, onNewSession,
userAvatar, userAvatar,
messagesEndRef,
inputRef, inputRef,
fileInputRef, fileInputRef,
}) => { }) => {
// Auto-scroll 功能:当消息列表更新时,自动滚动到底部
const messagesEndRef = useRef(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
return ( return (
<Flex flex={1} direction="column"> <Flex flex={1} direction="column">
{/* 顶部标题栏 - 深色毛玻璃 */} {/* 顶部标题栏 - 深色毛玻璃 */}
@@ -214,7 +218,6 @@ const ChatArea = ({
{/* 消息列表 */} {/* 消息列表 */}
<Box <Box
flex={1} flex={1}
p={6}
bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))" bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))"
overflowY="auto" overflowY="auto"
> >
@@ -253,7 +256,7 @@ const ChatArea = ({
animate="animate" animate="animate"
exit={{ opacity: 0, y: 20 }} exit={{ opacity: 0, y: 20 }}
> >
<Box px={6} py={3}> <Box px={6}>
<Box maxW="896px" mx="auto"> <Box maxW="896px" mx="auto">
<HStack fontSize="xs" color="gray.500" mb={2} fontWeight="medium" spacing={1}> <HStack fontSize="xs" color="gray.500" mb={2} fontWeight="medium" spacing={1}>
<Sparkles className="w-3 h-3" /> <Sparkles className="w-3 h-3" />
@@ -308,7 +311,7 @@ const ChatArea = ({
borderTop="1px solid" borderTop="1px solid"
borderColor="rgba(255, 255, 255, 0.1)" borderColor="rgba(255, 255, 255, 0.1)"
px={6} px={6}
py={4} py={1}
boxShadow="0 -8px 32px 0 rgba(31, 38, 135, 0.37)" boxShadow="0 -8px 32px 0 rgba(31, 38, 135, 0.37)"
> >
<Box maxW="896px" mx="auto"> <Box maxW="896px" mx="auto">

View File

@@ -16,7 +16,7 @@ import ChatArea from './components/ChatArea';
import RightSidebar from './components/RightSidebar'; import RightSidebar from './components/RightSidebar';
// 自定义 Hooks // 自定义 Hooks
import { useAgentSessions, useAgentChat, useFileUpload, useAutoScroll } from './hooks'; import { useAgentSessions, useAgentChat, useFileUpload } from './hooks';
/** /**
* Agent Chat - 主组件HeroUI v3 深色主题) * Agent Chat - 主组件HeroUI v3 深色主题)
@@ -82,9 +82,6 @@ const AgentChat = () => {
loadSessions, loadSessions,
}); });
// 自动滚动 Hook
const { messagesEndRef } = useAutoScroll(messages);
// ==================== 输入框引用(保留在主组件)==================== // ==================== 输入框引用(保留在主组件)====================
const inputRef = React.useRef(null); const inputRef = React.useRef(null);
@@ -134,7 +131,6 @@ const AgentChat = () => {
onToggleRightSidebar={() => setIsRightSidebarOpen(true)} onToggleRightSidebar={() => setIsRightSidebarOpen(true)}
onNewSession={createNewSession} onNewSession={createNewSession}
userAvatar={user?.avatar} userAvatar={user?.avatar}
// messagesEndRef={messagesEndRef}
inputRef={inputRef} inputRef={inputRef}
fileInputRef={fileInputRef} fileInputRef={fileInputRef}
/> />