timeline auto scrool

This commit is contained in:
Julian Freeman
2026-03-22 18:38:29 -04:00
parent aad775d4f4
commit 55bab14a07

View File

@@ -100,7 +100,7 @@ const calendarDays = computed(() => {
const selectCalendarDate = (date: Date) => {
currentDate.value = date.toLocaleDateString('sv'); // sv locale gives YYYY-MM-DD
isCalendarOpen.value = false;
loadTimeline(); loadEvents();
loadTimeline(true); loadEvents();
};
// --- Logic ---
@@ -119,7 +119,7 @@ onMounted(async () => {
timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
await invoke("update_interval", { seconds: captureInterval.value });
isPaused.value = await invoke("get_pause_state");
await loadTimeline(); await loadTags(); await loadEvents();
await loadTimeline(true); await loadTags(); await loadEvents();
}
await listen<boolean>("pause-state-changed", (event) => { isPaused.value = event.payload; });
captureUnlisten = await listen("refresh-timeline", () => { loadTimeline(); });
@@ -138,7 +138,7 @@ const completeSetup = async () => {
await store.save();
await invoke("update_db_path", { path: dbPath.value });
isSetupComplete.value = true;
await loadTimeline(); await loadTags(); await loadEvents();
await loadTimeline(true); await loadTags(); await loadEvents();
}
};
@@ -299,7 +299,20 @@ const updateSettings = async () => {
};
const togglePauseState = async () => { isPaused.value = await invoke("toggle_pause"); };
const loadTimeline = async () => { if (savePath.value) timelineImages.value = await invoke("get_timeline", { date: currentDate.value, baseDir: savePath.value }); };
const loadTimeline = async (autoScrollToCurrentTime = false) => {
if (savePath.value) {
timelineImages.value = await invoke("get_timeline", { date: currentDate.value, baseDir: savePath.value });
await nextTick();
if (autoScrollToCurrentTime && timelineRef.value) {
const now = new Date();
const currentMin = now.getHours() * 60 + now.getMinutes();
const logicalMin = (currentMin < TIME_OFFSET_MINUTES ? currentMin + 1440 : currentMin) - TIME_OFFSET_MINUTES;
const targetY = logicalMin * timelineZoom.value;
const containerHeight = timelineRef.value.clientHeight;
timelineRef.value.scrollTop = Math.max(0, targetY - containerHeight / 2);
}
}
};
const newTagName = ref(""); const newTagParent = ref<number | null>(null); const newTagColor = ref("#007AFF");
const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF"; };
@@ -341,7 +354,7 @@ const isTagSelectOpen = ref(false);
<div v-else class="flex flex-1 overflow-hidden">
<div class="w-80 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
<div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">历史活动</h2><button @click="loadTimeline(); loadEvents()" class="p-2 hover:bg-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
<div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">历史活动</h2><button @click="loadTimeline(true); loadEvents()" class="p-2 hover:bg-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
<div class="relative group">
<button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-white border border-[#E5E5E7] rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-[#F2F2F7] transition-all">
<Calendar :size="16" class="absolute left-4 text-[#86868B]" />