fix: resolve log loss in certain scenarios (#10111)

This commit is contained in:
CityFun 2025-08-22 17:15:52 +08:00 committed by GitHub
parent 4fcf845934
commit c7d603e142
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 48 additions and 18 deletions

View file

@ -149,24 +149,42 @@ const totalHeight = computed(() => logHeight * logCount.value);
const containerHeight = ref(500); const containerHeight = ref(500);
const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight)); const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight));
const startIndex = ref(0); const startIndex = ref(0);
const lastScrollTop = ref(0);
const visibleLogs = computed(() => { const visibleLogs = computed(() => {
return logs.value.slice(startIndex.value, startIndex.value + visibleCount.value); return logs.value.slice(startIndex.value, startIndex.value + visibleCount.value);
}); });
let scrollTimer: ReturnType<typeof setTimeout> | null = null;
const onScroll = () => { const onScroll = () => {
if (logContainer.value) { if (!logContainer.value || isLoading.value) return;
const scrollTop = logContainer.value.scrollTop;
if (scrollTop == 0) { const scrollTop = logContainer.value.scrollTop;
readReq.page = minPage.value - 1; const newStartIndex = Math.max(0, Math.floor(scrollTop / logHeight));
if (readReq.page < 1) {
return; if (scrollTimer) {
} clearTimeout(scrollTimer);
minPage.value = readReq.page;
getContent(true);
}
startIndex.value = Math.floor(scrollTop / logHeight);
} }
startIndex.value = newStartIndex;
scrollTimer = setTimeout(() => {
if (scrollTop <= logHeight && minPage.value > 1) {
const currentScrollTop = scrollTop;
readReq.page = minPage.value - 1;
if (readReq.page >= 1) {
minPage.value = readReq.page;
lastScrollTop.value = currentScrollTop;
getContent(true);
}
}
if (!tailLog.value && scrollTop + containerHeight.value >= totalHeight.value - logHeight && maxPage.value > 1) {
readReq.page = maxPage.value;
getContent(false);
}
}, 50);
}; };
const changeLoading = () => { const changeLoading = () => {
@ -276,11 +294,19 @@ const getContent = async (pre: boolean) => {
} }
nextTick(() => { nextTick(() => {
if (pre) { if (logContainer.value) {
logContainer.value.scrollTop = 2000; if (pre) {
} else { if (!end.value) {
logContainer.value.scrollTop = totalHeight.value; const addedLines = newLogs.length;
containerHeight.value = logContainer.value.getBoundingClientRect().height; const newScrollPosition = lastScrollTop.value + addedLines * logHeight;
logContainer.value.scrollTop = newScrollPosition;
startIndex.value = Math.max(0, Math.floor(newScrollPosition / logHeight));
}
} else {
logContainer.value.scrollTop = totalHeight.value;
containerHeight.value = logContainer.value.getBoundingClientRect().height;
startIndex.value = Math.max(0, logs.value.length - visibleCount.value);
}
} }
}); });
} }

View file

@ -170,7 +170,12 @@
:key="currentRecord?.taskID" :key="currentRecord?.taskID"
@stop-reading="search(false)" @stop-reading="search(false)"
:heightDiff="410" :heightDiff="410"
:config="{ type: 'task', taskID: currentRecord?.taskID, tail: true }" :config="{
type: 'task',
colorMode: 'task',
taskID: currentRecord?.taskID,
tail: true,
}"
/> />
</el-row> </el-row>
</el-form> </el-form>

View file

@ -101,7 +101,6 @@ const search = () => {
loading.value = true; loading.value = true;
getWebsite(req.websiteID) getWebsite(req.websiteID)
.then((res) => { .then((res) => {
console.log(res.data);
req.dir = res.data.sitePath + '/index'; req.dir = res.data.sitePath + '/index';
}) })
.finally(() => { .finally(() => {