From 2cc21840026a84c85096cd31e4638d45a3de4c54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=98=E9=A3=8E?= <fsmecx@gmail.com>
Date: Mon, 1 Dec 2025 14:34:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=BC=BAMessageRecord=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E7=AE=A1=E7=90=86=E6=B6=88=E6=81=AF=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=9C=9F=E9=97=B4=E7=9A=84=E6=BB=9A=E5=8A=A8=E8=A1=8C?=
 =?UTF-8?q?=E4=B8=BA=E3=80=82=E4=B8=BA=E6=B6=88=E6=81=AF=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E5=92=8C=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=EF=BC=8C=E9=80=9A=E8=BF=87=E5=9C=A8=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=9B=B4=E5=A4=9A=E6=B6=88=E6=81=AF=E6=97=B6=E4=BF=9D?=
 =?UTF-8?q?=E7=95=99=E6=BB=9A=E5=8A=A8=E4=BD=8D=E7=BD=AE=E6=9D=A5=E7=A1=AE?=
 =?UTF-8?q?=E4=BF=9D=E5=B9=B3=E6=BB=91=E7=9A=84=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MessageRecord/index.tsx        | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
index c6a78cb8..c534fe9d 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
@@ -150,6 +150,7 @@ type GroupRenderItem = {
 
 const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
   // 右键菜单状态
   const [contextMenu, setContextMenu] = useState({
     visible: false,
@@ -171,6 +172,8 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
   const isLoadingData = useWeChatStore(state => state.isLoadingData);
   const showCheckbox = useWeChatStore(state => state.showCheckbox);
   const prevMessagesRef = useRef(currentMessages);
+  const isLoadingMoreRef = useRef(false);
+  const scrollPositionRef = useRef<number>(0);
   const updateShowCheckbox = useWeChatStore(state => state.updateShowCheckbox);
   const updateEnterModule = useWeChatStore(state => state.updateEnterModule);
   const currentCustomer = useCustomerStore(state =>
@@ -460,7 +463,10 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
       }
     });
 
-    if (currentMessages.length > prevLength && !hasVideoStateChange) {
+    // 如果正在加载更早的消息，不自动滚动到底部
+    if (isLoadingMoreRef.current && currentMessages.length > prevLength) {
+      // 不滚动，等待加载完成后在另一个 useEffect 中恢复滚动位置
+    } else if (currentMessages.length > prevLength && !hasVideoStateChange) {
       scrollToBottom();
     } else if (isLoadingData && !hasVideoStateChange) {
       scrollToBottom();
@@ -470,6 +476,22 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
     prevMessagesRef.current = currentMessages;
   }, [currentMessages, isLoadingData]);
 
+  // 监听加载状态，当加载完成时恢复滚动位置
+  useEffect(() => {
+    if (!messagesLoading && isLoadingMoreRef.current) {
+      // 等待DOM更新后恢复滚动位置
+      requestAnimationFrame(() => {
+        const container = messagesContainerRef.current;
+        if (container) {
+          const scrollHeight = container.scrollHeight;
+          const newScrollTop = scrollHeight - scrollPositionRef.current;
+          container.scrollTop = newScrollTop;
+        }
+        isLoadingMoreRef.current = false;
+      });
+    }
+  }, [messagesLoading]);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -762,6 +784,12 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
     if (messagesLoading || !currentMessagesHasMore) {
       return;
     }
+    // 保存当前滚动位置（距离底部的距离）
+    const container = messagesContainerRef.current;
+    if (container) {
+      scrollPositionRef.current = container.scrollHeight - container.scrollTop;
+      isLoadingMoreRef.current = true;
+    }
     loadChatMessages(false);
   };
 
@@ -840,7 +868,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
   };
 
   return (
-    <div className={styles.messagesContainer}>
+    <div ref={messagesContainerRef} className={styles.messagesContainer}>
       <div
         className={styles.loadMore}
         onClick={() => loadMoreMessages()}