timeline auto scrool
This commit is contained in:
23
src/App.vue
23
src/App.vue
@@ -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]" />
|
||||
|
||||
Reference in New Issue
Block a user