feat:日志高度设置

This commit is contained in:
1708-huayu 2025-07-23 18:39:39 +08:00
parent db19c5e12c
commit a2aced4c85
1 changed files with 56 additions and 15 deletions

View File

@ -7,12 +7,8 @@ import TextArea from "antd/es/input/TextArea";
import style from "@/components/DiaryOption.module.css" import style from "@/components/DiaryOption.module.css"
import dayjs from "dayjs"; import dayjs from "dayjs";
import {addTaskLogAPI} from "@/components/service/Diary"; import {addTaskLogAPI} from "@/components/service/Diary";
import {ListBodyRef} from "antd/es/transfer/ListBody";
import {ListRef} from "rc-virtual-list/lib/List"; import {ListRef} from "rc-virtual-list/lib/List";
const CONTAINER_HEIGHT = 400;
const PAGE_SIZE = 20;
const DiaryOption = (props: SelectDiary) => { const DiaryOption = (props: SelectDiary) => {
// 抽屉 start // 抽屉 start
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -23,6 +19,36 @@ const DiaryOption = (props: SelectDiary) => {
setOpen(false); setOpen(false);
}; };
// 抽屉 end // 抽屉 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 // 头按钮设置 start
const [currentIndex, setCurrentIndex] = useState(1); const [currentIndex, setCurrentIndex] = useState(1);
@ -58,6 +84,7 @@ const DiaryOption = (props: SelectDiary) => {
}).then(res => { }).then(res => {
setDiaryList([res.data.data, ...diaryList]) setDiaryList([res.data.data, ...diaryList])
setSendValue(undefined) setSendValue(undefined)
setShouldScroll(true);
}).finally(() => { }).finally(() => {
setSendValueFlag(false); setSendValueFlag(false);
}) })
@ -83,7 +110,7 @@ const DiaryOption = (props: SelectDiary) => {
showMessage && message.success(`${results.length} more items loaded!`); showMessage && message.success(`${results.length} more items loaded!`);
if (!showMessage) { if (!showMessage) {
if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') { 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 listRef = useRef<ListRef>(null);
const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => { const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
// Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
if ( // if (
Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1 && // Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - containerHeight) <= 1 &&
!noMoreFlag // !noMoreFlag
) { // ) {
// appendData();
// }
if (e.currentTarget.scrollTop === 0 && !noMoreFlag) {
appendData(); appendData();
setShouldScroll(false);
} }
}; };
// 数据 end // 数据 end
// 滚动处理 start
// 条件滚动
useEffect(() => {
console.log({shouldScroll},{listRef})
if (shouldScroll && listRef.current) {
listRef.current.scrollTo({
top: 99999,
});
}
}, [diaryList, shouldScroll,open]);
// 滚动处理 end
// 点击操作 start // 点击操作 start
const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>() const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
const onClickTAskDiary = (item: ListDiary, operate: string) => { const onClickTAskDiary = (item: ListDiary, operate: string) => {
@ -241,7 +282,7 @@ const DiaryOption = (props: SelectDiary) => {
</div> </div>
} }
> >
<div className="displayFlexRow" <div className="displayFlexRow titleButton"
style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}> style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}>
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)} <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
type={currentIndex == 0 ? "primary" : "default"}></Button> type={currentIndex == 0 ? "primary" : "default"}></Button>
@ -250,14 +291,14 @@ const DiaryOption = (props: SelectDiary) => {
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)} <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
type={currentIndex == 2 ? "primary" : "default"}></Button> type={currentIndex == 2 ? "primary" : "default"}></Button>
</div> </div>
<List style={{height: "auto"}}> <List>
<VirtualList <VirtualList
data={diaryReduceList} data={diaryReduceList}
// height={CONTAINER_HEIGHT} height={containerHeight}
// itemHeight={47} // itemHeight={47}
itemKey="email" itemKey="id"
onScroll={onScroll} onScroll={onScroll}
style={{height: "auto"}} // style={{height: "auto"}}
ref={listRef} ref={listRef}
> >
{item => ( {item => (