fix: 修复日志页面自动滚动问题 (#382)

This commit is contained in:
ᴀᴍᴛᴏᴀᴇʀ
2025-07-09 23:34:50 +08:00
committed by GitHub
parent ce60838244
commit 74a45526f0
13 changed files with 43 additions and 35 deletions

View File

@@ -19,7 +19,7 @@
<BreadCrumb items={$breadcrumbStore} />
</div>
</header>
<div class="w-full overflow-y-auto px-6 py-2" style="scrollbar-width: thin;">
<div class="w-full overflow-y-auto px-6 py-2" style="scrollbar-width: thin;" id="main">
<slot />
</div>
</Sidebar.Inset>

View File

@@ -87,29 +87,29 @@
const videoChartConfig = {
videos: {
label: '视频数量',
color: 'var(--chart-1)'
color: 'var(--color-slate-700)'
}
} satisfies Chart.ChartConfig;
const memoryChartConfig = {
used: {
label: '整体占用',
color: 'var(--chart-1)'
color: 'var(--color-slate-700)'
},
process: {
label: '程序占用',
color: 'var(--chart-2)'
color: 'var(--color-slate-950)'
}
} satisfies Chart.ChartConfig;
const cpuChartConfig = {
used: {
label: '整体占用',
color: 'var(--chart-1)'
color: 'var(--color-slate-700)'
},
process: {
label: '程序占用',
color: 'var(--chart-2)'
color: 'var(--color-slate-950)'
}
} satisfies Chart.ChartConfig;

View File

@@ -8,15 +8,18 @@
let logEventSource: EventSource | null = null;
let logs: Array<{ timestamp: string; level: string; message: string }> = [];
let shouldAutoScroll = true;
let main: HTMLElement | null = null;
function checkScrollPosition() {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
shouldAutoScroll = scrollTop + clientHeight >= scrollHeight - 5;
if (main) {
const { scrollTop, scrollHeight, clientHeight } = main;
shouldAutoScroll = scrollTop + clientHeight >= scrollHeight - 5;
}
}
function scrollToBottom() {
if (shouldAutoScroll) {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
if (shouldAutoScroll && main) {
main.scrollTop = main.scrollHeight;
}
}
@@ -45,23 +48,24 @@
onMount(() => {
setBreadcrumb([{ label: '日志' }]);
window.addEventListener('scroll', checkScrollPosition);
main = document.getElementById('main');
main?.addEventListener('scroll', checkScrollPosition);
startLogStream();
return () => {
stopLogStream();
window.removeEventListener('scroll', checkScrollPosition);
main?.removeEventListener('scroll', checkScrollPosition);
};
});
function getLevelColor(level: string) {
switch (level) {
case 'ERROR':
return 'text-red-600';
return 'text-rose-600';
case 'WARN':
return 'text-yellow-600';
case 'INFO':
default:
return 'text-green-600';
return 'text-emerald-600';
}
}
</script>

View File

@@ -112,8 +112,8 @@
{:else}
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-green-500"></div>
<span class="text-sm text-green-600">已认证</span>
<div class="h-2 w-2 rounded-full bg-emerald-500"></div>
<span class="text-sm text-emerald-600">已认证</span>
</div>
<Button
variant="outline"