mirror of
https://github.com/amtoaer/bili-sync.git
synced 2026-07-09 22:43:55 +08:00
fix: 修复日志页面自动滚动问题 (#382)
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user