From a2aced4c85217c767bfb782b271faabe0b8a5935 Mon Sep 17 00:00:00 2001
From: 1708-huayu <57060237+1708-huayu@users.noreply.github.com>
Date: Wed, 23 Jul 2025 18:39:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=97=A5=E5=BF=97=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DiaryOption.tsx | 71 +++++++++++++++++++++++++++-------
 1 file changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/DiaryOption.tsx b/src/components/DiaryOption.tsx
index 8404b1b..156434c 100644
--- a/src/components/DiaryOption.tsx
+++ b/src/components/DiaryOption.tsx
@@ -7,12 +7,8 @@ import TextArea from "antd/es/input/TextArea";
 import style from "@/components/DiaryOption.module.css"
 import dayjs from "dayjs";
 import {addTaskLogAPI} from "@/components/service/Diary";
-import {ListBodyRef} from "antd/es/transfer/ListBody";
 import {ListRef} from "rc-virtual-list/lib/List";
 
-const CONTAINER_HEIGHT = 400;
-const PAGE_SIZE = 20;
-
 const DiaryOption = (props: SelectDiary) => {
     // 抽屉 start
     const [open, setOpen] = useState(false);
@@ -23,6 +19,36 @@ const DiaryOption = (props: SelectDiary) => {
         setOpen(false);
     };
     // 抽屉 end
+    const [shouldScroll,setShouldScroll] = React.useState(true);
+    // 设置高度 start
+    const [containerHeight, setContainerHeight] = useState(400);
+    useEffect(() => {
+        if (!open) return;
+        // 使用 setTimeout 确保 Drawer 内容已渲染
+        const timer = setTimeout(() => {
+            const innerDiv = document.querySelector('.ant-drawer-body');
+            const titleButtonHeight = document.querySelector('.titleButton');
+            // clientHeight：可视高度（包括 padding，但不包括 border、margin 和滚动条）
+            // offsetHeight：总高度（包括 padding、border 和滚动条，但不包括 margin）
+            // scrollHeight：内容总高度（包括不可见部分）
+            if (innerDiv && titleButtonHeight) {
+                console.log(innerDiv.clientHeight)
+                setContainerHeight(innerDiv.clientHeight - titleButtonHeight.clientHeight)
+            }
+        }, 100);
+
+        return () => clearTimeout(timer);
+        // console.log({contentRef})
+        // const observer = new ResizeObserver((entries) => {
+        //     const entry = entries[0];
+        //     setContentHeight(entry.contentRect.height);
+        // });
+        //
+        // observer.observe(contentRef.current);
+        //
+        // return () => observer.disconnect();
+    }, [open]);
+    // 设置高度 end
 
     // 头按钮设置 start
     const [currentIndex, setCurrentIndex] = useState(1);
@@ -58,6 +84,7 @@ const DiaryOption = (props: SelectDiary) => {
         }).then(res => {
             setDiaryList([res.data.data, ...diaryList])
             setSendValue(undefined)
+            setShouldScroll(true);
         }).finally(() => {
             setSendValueFlag(false);
         })
@@ -83,7 +110,7 @@ const DiaryOption = (props: SelectDiary) => {
                 showMessage && message.success(`${results.length} more items loaded!`);
                 if (!showMessage) {
                     if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') {
-                        listRef.current.scrollTo({top: 9999999 });
+                        listRef.current.scrollTo({top: 9999999});
                     }
                 }
             });
@@ -128,16 +155,30 @@ const DiaryOption = (props: SelectDiary) => {
     const listRef = useRef<ListRef>(null);
     const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
         // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
-        if (
-            Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1 &&
-            !noMoreFlag
-        ) {
+        // if (
+        //     Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - containerHeight) <= 1 &&
+        //     !noMoreFlag
+        // ) {
+        //     appendData();
+        // }
+        if (e.currentTarget.scrollTop === 0 && !noMoreFlag) {
             appendData();
+            setShouldScroll(false);
         }
     };
-
     // 数据 end
+    // 滚动处理 start
 
+    // 条件滚动
+    useEffect(() => {
+        console.log({shouldScroll},{listRef})
+        if (shouldScroll && listRef.current) {
+            listRef.current.scrollTo({
+                top: 99999,
+            });
+        }
+    }, [diaryList, shouldScroll,open]);
+    // 滚动处理  end
     // 点击操作 start
     const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
     const onClickTAskDiary = (item: ListDiary, operate: string) => {
@@ -241,7 +282,7 @@ const DiaryOption = (props: SelectDiary) => {
                     </div>
                 }
             >
-                <div className="displayFlexRow"
+                <div className="displayFlexRow titleButton"
                      style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}>
                     <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
                             type={currentIndex == 0 ? "primary" : "default"}>全部</Button>
@@ -250,14 +291,14 @@ const DiaryOption = (props: SelectDiary) => {
                     <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
                             type={currentIndex == 2 ? "primary" : "default"}>失效</Button>
                 </div>
-                <List style={{height: "auto"}}>
+                <List>
                     <VirtualList
                         data={diaryReduceList}
-                        // height={CONTAINER_HEIGHT}
+                        height={containerHeight}
                         // itemHeight={47}
-                        itemKey="email"
+                        itemKey="id"
                         onScroll={onScroll}
-                        style={{height: "auto"}}
+                        // style={{height: "auto"}}
                         ref={listRef}
                     >
                         {item => (