support events
This commit is contained in:
Julian Freeman
511
src/App.vue
511
src/App.vue
@@ -1,24 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { load } from "@tauri-apps/plugin-store";
|
||||
import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { open, save } from "@tauri-apps/plugin-dialog";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw } from "lucide-vue-next";
|
||||
import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2 } from "lucide-vue-next";
|
||||
|
||||
// --- Types & Constants ---
|
||||
interface TimelineItem {
|
||||
time: string; // "HH:mm:ss"
|
||||
path: string;
|
||||
isNextDay?: boolean;
|
||||
}
|
||||
// --- Types ---
|
||||
interface Tag { id: number; name: string; parent_id: number | null; color: string; }
|
||||
interface DBEvent { id: number; date: string; start_minute: number; end_minute: number; main_tag_id: number; sub_tag_id: number | null; content: string; }
|
||||
interface TimelineItem { time: string; path: string; isNextDay?: boolean; }
|
||||
|
||||
const TOTAL_MINUTES = 24 * 60;
|
||||
const TIME_OFFSET_MINUTES = 3 * 60; // 03:00 logical day start
|
||||
const TIME_OFFSET_MINUTES = 3 * 60;
|
||||
|
||||
// --- State ---
|
||||
const isSetupComplete = ref(false);
|
||||
const savePath = ref("");
|
||||
const dbPath = ref("");
|
||||
const isPaused = ref(false);
|
||||
const currentDate = ref(new Date().toISOString().split("T")[0]);
|
||||
const timelineImages = ref<TimelineItem[]>([]);
|
||||
@@ -27,16 +26,28 @@ const lockedImage = ref<TimelineItem | null>(null);
|
||||
const previewSrc = ref("");
|
||||
const isFullscreen = ref(false);
|
||||
const isSettingsOpen = ref(false);
|
||||
const isTagManagerOpen = ref(false);
|
||||
const isEventModalOpen = ref(false);
|
||||
|
||||
const mergeScreens = ref(false);
|
||||
const retainDays = ref(30);
|
||||
const captureInterval = ref(30);
|
||||
const timelineZoom = ref(1.5); // pixels per minute
|
||||
const timelineZoom = ref(1.5);
|
||||
|
||||
const tags = ref<Tag[]>([]);
|
||||
const dayEvents = ref<DBEvent[]>([]);
|
||||
const isDragging = ref(false);
|
||||
const dragStartMin = ref<number | null>(null);
|
||||
const dragEndMin = ref<number | null>(null);
|
||||
|
||||
const editingEvent = ref<DBEvent>({ id: 0, date: "", start_minute: 0, end_minute: 0, main_tag_id: 0, sub_tag_id: null, content: "" });
|
||||
const hoveredTime = ref<string | null>(null);
|
||||
const timelineRef = ref<HTMLElement | null>(null);
|
||||
|
||||
// Computed ruler height based on zoom
|
||||
const rulerHeight = computed(() => TOTAL_MINUTES * timelineZoom.value);
|
||||
const mainTags = computed(() => tags.value.filter(t => t.parent_id === null));
|
||||
const getSubTags = (parentId: number) => tags.value.filter(t => t.parent_id === parentId);
|
||||
const getTagColor = (tagId: number) => tags.value.find(t => t.id === tagId)?.color || "#007AFF";
|
||||
|
||||
let store: any = null;
|
||||
let captureUnlisten: any = null;
|
||||
@@ -45,378 +56,290 @@ let captureUnlisten: any = null;
|
||||
onMounted(async () => {
|
||||
store = await load("config.json");
|
||||
const path = await store.get("savePath");
|
||||
if (path) {
|
||||
const dPath = await store.get("dbPath");
|
||||
if (path && dPath) {
|
||||
savePath.value = path as string;
|
||||
dbPath.value = dPath as string;
|
||||
isSetupComplete.value = true;
|
||||
await invoke("update_db_path", { path: dbPath.value });
|
||||
mergeScreens.value = (await store.get("mergeScreens")) as boolean || false;
|
||||
retainDays.value = (await store.get("retainDays")) as number || 30;
|
||||
captureInterval.value = (await store.get("captureInterval")) as number || 30;
|
||||
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 loadTimeline(); await loadTags(); await loadEvents();
|
||||
}
|
||||
|
||||
await listen<boolean>("pause-state-changed", (event) => {
|
||||
isPaused.value = event.payload;
|
||||
});
|
||||
|
||||
captureUnlisten = await listen("refresh-timeline", () => {
|
||||
loadTimeline();
|
||||
});
|
||||
await listen<boolean>("pause-state-changed", (event) => { isPaused.value = event.payload; });
|
||||
captureUnlisten = await listen("refresh-timeline", () => { loadTimeline(); });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (captureUnlisten) captureUnlisten();
|
||||
});
|
||||
onUnmounted(() => { if (captureUnlisten) captureUnlisten(); });
|
||||
|
||||
const selectFolder = async () => {
|
||||
const selected = await open({ directory: true, multiple: false });
|
||||
if (selected && typeof selected === "string") {
|
||||
savePath.value = selected;
|
||||
await store.set("savePath", selected);
|
||||
const selectFolder = async () => { const s = await open({ directory: true }); if (s) savePath.value = s as string; };
|
||||
const selectDBFile = async () => { const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
|
||||
const createDBFile = async () => { const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
|
||||
|
||||
const completeSetup = async () => {
|
||||
if (savePath.value && dbPath.value) {
|
||||
await store.set("savePath", savePath.value);
|
||||
await store.set("dbPath", dbPath.value);
|
||||
await store.save();
|
||||
await invoke("update_db_path", { path: dbPath.value });
|
||||
isSetupComplete.value = true;
|
||||
await loadTimeline();
|
||||
await loadTimeline(); await loadTags(); await loadEvents();
|
||||
}
|
||||
};
|
||||
|
||||
const updateSettings = async () => {
|
||||
await store.set("mergeScreens", mergeScreens.value);
|
||||
await store.set("retainDays", retainDays.value);
|
||||
await store.set("captureInterval", captureInterval.value);
|
||||
await store.set("timelineZoom", timelineZoom.value);
|
||||
await store.save();
|
||||
await invoke("update_interval", { seconds: captureInterval.value });
|
||||
const loadTags = async () => { tags.value = await invoke("get_tags"); };
|
||||
const loadEvents = async () => { dayEvents.value = await invoke("get_events", { date: currentDate.value }); };
|
||||
|
||||
const handleAddTag = async (name: string, parentId: number | null, color: string) => {
|
||||
await invoke("add_tag", { name, parentId, color });
|
||||
await loadTags();
|
||||
};
|
||||
|
||||
const togglePauseState = async () => {
|
||||
isPaused.value = await invoke("toggle_pause");
|
||||
const handleDeleteTag = async (id: number) => {
|
||||
await invoke("delete_tag", { id });
|
||||
await loadTags();
|
||||
};
|
||||
|
||||
const loadTimeline = async () => {
|
||||
if (!savePath.value) return;
|
||||
timelineImages.value = await invoke("get_timeline", {
|
||||
date: currentDate.value,
|
||||
baseDir: savePath.value
|
||||
});
|
||||
const saveEvent = async () => {
|
||||
await invoke("save_event", { event: editingEvent.value });
|
||||
isEventModalOpen.value = false;
|
||||
await loadEvents();
|
||||
};
|
||||
|
||||
const updatePreview = async (img: TimelineItem | null) => {
|
||||
if (!img) {
|
||||
selectedImage.value = null;
|
||||
previewSrc.value = "";
|
||||
return;
|
||||
}
|
||||
if (selectedImage.value?.path === img.path && previewSrc.value) return;
|
||||
selectedImage.value = img;
|
||||
try {
|
||||
const base64 = await invoke("get_image_base64", { path: img.path });
|
||||
previewSrc.value = `data:image/jpeg;base64,${base64}`;
|
||||
} catch (e) {
|
||||
console.error("Failed to load image:", e);
|
||||
}
|
||||
const deleteEvent = async (id: number) => {
|
||||
await invoke("delete_event", { id });
|
||||
await loadEvents();
|
||||
};
|
||||
|
||||
// --- Helper Functions for Logical Day ---
|
||||
|
||||
// Converts absolute HH:mm to minutes relative to 03:00 start
|
||||
const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
|
||||
const [h, m] = timeStr.split(":").map(Number);
|
||||
let total = h * 60 + m;
|
||||
if (isNextDay) total += 24 * 60;
|
||||
return total - TIME_OFFSET_MINUTES;
|
||||
let t = h * 60 + m; if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
|
||||
};
|
||||
|
||||
// Converts logical minutes (0 to 1439) back to HH:mm
|
||||
const logicalMinutesToTime = (logicalMinutes: number) => {
|
||||
let total = logicalMinutes + TIME_OFFSET_MINUTES;
|
||||
total = total % (24 * 60);
|
||||
const h = Math.floor(total / 60);
|
||||
const m = Math.floor(total % 60);
|
||||
const logicalMinutesToTime = (min: number) => {
|
||||
let t = (min + TIME_OFFSET_MINUTES) % 1440;
|
||||
const h = Math.floor(t / 60); const m = Math.floor(t % 60);
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const findClosestImage = (logicalMin: number) => {
|
||||
if (timelineImages.value.length === 0) return null;
|
||||
return timelineImages.value.reduce((prev, curr) => {
|
||||
const prevDiff = Math.abs(timeToLogicalMinutes(prev.time, prev.isNextDay) - logicalMin);
|
||||
const currDiff = Math.abs(timeToLogicalMinutes(curr.time, curr.isNextDay) - logicalMin);
|
||||
return currDiff < prevDiff ? curr : prev;
|
||||
}, timelineImages.value[0]);
|
||||
const updatePreview = async (img: TimelineItem | null) => {
|
||||
if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
|
||||
selectedImage.value = img;
|
||||
const b64 = await invoke("get_image_base64", { path: img.path });
|
||||
previewSrc.value = `data:image/jpeg;base64,${b64}`;
|
||||
};
|
||||
|
||||
const handleTimelineMouseDown = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
isDragging.value = true; dragStartMin.value = min; dragEndMin.value = min;
|
||||
};
|
||||
|
||||
const handleTimelineMouseMove = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top + timelineRef.value.scrollTop;
|
||||
const logicalMin = Math.floor(y / timelineZoom.value);
|
||||
|
||||
if (logicalMin >= 0 && logicalMin < TOTAL_MINUTES) {
|
||||
hoveredTime.value = logicalMinutesToTime(logicalMin);
|
||||
const closest = findClosestImage(logicalMin);
|
||||
if (closest) updatePreview(closest);
|
||||
const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
if (min >= 0 && min < 1440) {
|
||||
hoveredTime.value = logicalMinutesToTime(min);
|
||||
if (isDragging.value) dragEndMin.value = min;
|
||||
else {
|
||||
const closest = timelineImages.value.reduce((p, c) => {
|
||||
const pd = Math.abs(timeToLogicalMinutes(p.time, p.isNextDay) - min);
|
||||
const cd = Math.abs(timeToLogicalMinutes(c.time, c.isNextDay) - min);
|
||||
return cd < pd ? c : p;
|
||||
}, timelineImages.value[0]);
|
||||
if (closest) updatePreview(closest);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimelineMouseUp = () => {
|
||||
if (isDragging.value) {
|
||||
isDragging.value = false;
|
||||
const start = Math.min(dragStartMin.value!, dragEndMin.value!);
|
||||
const end = Math.max(dragStartMin.value!, dragEndMin.value!);
|
||||
if (end - start >= 1) {
|
||||
editingEvent.value = { id: 0, date: currentDate.value, start_minute: start, end_minute: end, main_tag_id: mainTags.value[0]?.id || 0, sub_tag_id: null, content: "" };
|
||||
isEventModalOpen.value = true;
|
||||
} else {
|
||||
const closest = timelineImages.value.reduce((p, c) => {
|
||||
const pd = Math.abs(timeToLogicalMinutes(p.time, p.isNextDay) - start);
|
||||
const cd = Math.abs(timeToLogicalMinutes(c.time, c.isNextDay) - start);
|
||||
return cd < pd ? c : p;
|
||||
}, timelineImages.value[0]);
|
||||
if (closest) { lockedImage.value = closest; updatePreview(closest); }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimelineMouseLeave = () => {
|
||||
hoveredTime.value = null;
|
||||
if (lockedImage.value) updatePreview(lockedImage.value);
|
||||
};
|
||||
|
||||
const handleTimelineClick = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top + timelineRef.value.scrollTop;
|
||||
const logicalMin = Math.floor(y / timelineZoom.value);
|
||||
|
||||
const closest = findClosestImage(logicalMin);
|
||||
if (closest) {
|
||||
lockedImage.value = closest;
|
||||
updatePreview(closest);
|
||||
}
|
||||
if (!isDragging.value && lockedImage.value) updatePreview(lockedImage.value);
|
||||
};
|
||||
|
||||
const handleTimelineWheel = (e: WheelEvent) => {
|
||||
if (e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
if (!timelineRef.value) return;
|
||||
|
||||
e.preventDefault(); if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const mouseYInViewport = e.clientY - rect.top;
|
||||
const scrollOffset = timelineRef.value.scrollTop;
|
||||
|
||||
// Position of cursor relative to the content total height before zoom
|
||||
const cursorYInContent = mouseYInViewport + scrollOffset;
|
||||
const oldRulerHeight = rulerHeight.value;
|
||||
|
||||
// Perform zoom change
|
||||
const delta = e.deltaY > 0 ? -0.2 : 0.2;
|
||||
const newZoom = Math.min(Math.max(0.5, timelineZoom.value + delta), 15);
|
||||
|
||||
if (newZoom === timelineZoom.value) return;
|
||||
|
||||
timelineZoom.value = newZoom;
|
||||
|
||||
// Wait for DOM update or calculate it
|
||||
const newRulerHeight = TOTAL_MINUTES * newZoom;
|
||||
|
||||
// Calculate new scroll position to keep cursor point fixed
|
||||
const newScrollTop = (cursorYInContent / oldRulerHeight) * newRulerHeight - mouseYInViewport;
|
||||
|
||||
timelineRef.value.scrollTop = newScrollTop;
|
||||
|
||||
const my = e.clientY - rect.top; const cy = my + timelineRef.value.scrollTop;
|
||||
const oh = rulerHeight.value; const delta = e.deltaY > 0 ? -0.2 : 0.2;
|
||||
timelineZoom.value = Math.min(Math.max(0.5, timelineZoom.value + delta), 15);
|
||||
timelineRef.value.scrollTop = (cy / oh) * rulerHeight.value - my;
|
||||
updateSettings();
|
||||
}
|
||||
};
|
||||
|
||||
const updateSettings = async () => {
|
||||
await store.set("mergeScreens", mergeScreens.value); await store.set("retainDays", retainDays.value);
|
||||
await store.set("captureInterval", captureInterval.value); await store.set("timelineZoom", timelineZoom.value);
|
||||
await store.save(); await invoke("update_interval", { seconds: captureInterval.value });
|
||||
};
|
||||
|
||||
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 newTagName = ref(""); const newTagParent = ref<number | null>(null); const newTagColor = ref("#007AFF");
|
||||
const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF"; };
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen w-screen flex flex-col overflow-hidden text-[#1D1D1F] bg-[#FBFBFD]">
|
||||
<!-- Setup Wizard -->
|
||||
|
||||
<div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center p-10">
|
||||
<div class="bg-white p-12 rounded-[32px] shadow-2xl max-w-md text-center border border-[#E5E5E7]">
|
||||
<div class="w-20 h-20 bg-[#007AFF]/10 rounded-3xl flex items-center justify-center mx-auto mb-8">
|
||||
<FolderOpen :size="40" class="text-[#007AFF]" />
|
||||
<div class="bg-white p-12 rounded-[32px] shadow-2xl max-w-lg text-center border border-[#E5E5E7]">
|
||||
<Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
|
||||
<h1 class="text-3xl font-bold mb-4">初始化 Chrono Snap</h1>
|
||||
<div class="space-y-6 text-left mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-[#86868B]">截图保存目录</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
|
||||
<button @click="selectFolder" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-[#86868B]">SQLite 数据库文件</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" readonly :value="dbPath" placeholder="请选择或创建 .db 文件..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
|
||||
<div class="flex gap-1">
|
||||
<button @click="selectDBFile" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
|
||||
<button @click="createDBFile" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :size="18" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mb-4 tracking-tight">初始化 Chrono Snap</h1>
|
||||
<p class="text-[#86868B] mb-10 leading-relaxed">请选择一个本地文件夹，用于安全地存储您的视觉历史记录。</p>
|
||||
<button
|
||||
@click="selectFolder"
|
||||
class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold hover:bg-[#0063CC] transition-all transform active:scale-95 shadow-lg shadow-[#007AFF]/20 w-full flex items-center justify-center gap-3"
|
||||
>
|
||||
选择存储目录
|
||||
</button>
|
||||
<button @click="completeSetup" :disabled="!savePath || !dbPath" class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold w-full disabled:opacity-50">开始使用</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Workspace -->
|
||||
<div v-else class="flex flex-1 overflow-hidden">
|
||||
<!-- Vertical Ruler Sidebar -->
|
||||
<div class="w-72 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
|
||||
<!-- Date Picker Header -->
|
||||
<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 tracking-tight">历史活动</h2>
|
||||
<button @click="loadTimeline" class="p-2 hover:bg-white rounded-xl transition-colors text-[#86868B] hover:text-[#007AFF]">
|
||||
<RefreshCw :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<input
|
||||
type="date"
|
||||
v-model="currentDate"
|
||||
@change="loadTimeline"
|
||||
class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2 text-sm font-medium focus:ring-2 focus:ring-[#007AFF]/20 focus:border-[#007AFF] outline-none transition-all"
|
||||
/>
|
||||
<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>
|
||||
<input type="date" v-model="currentDate" @change="loadTimeline(); loadEvents()" class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2.5 text-sm outline-none" />
|
||||
</div>
|
||||
|
||||
<div ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="handleTimelineMouseLeave" @wheel="handleTimelineWheel">
|
||||
<div :style="{ height: rulerHeight + 'px' }" class="relative ml-14 mr-4">
|
||||
<div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-[#E5E5E7]/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
|
||||
<span class="absolute -left-11 -top-2.5 text-[10px] font-bold text-[#86868B]">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span>
|
||||
</div>
|
||||
<div v-for="ev in dayEvents" :key="ev.id" class="absolute left-0 w-[45%] opacity-80 border-l-4" :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '22', borderColor: getTagColor(ev.main_tag_id) }" @click.stop="editingEvent = { ...ev }; isEventModalOpen = true"></div>
|
||||
<div v-for="img in timelineImages" :key="img.path" class="absolute left-[50%] right-2 h-1 bg-[#007AFF]/20 rounded-full" :class="[selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-2 z-10' : '', lockedImage?.path === img.path ? 'bg-[#007AFF] h-2.5 ring-2 ring-[#007AFF]/20 z-20' : '']" :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"></div>
|
||||
<div v-if="dragStartMin !== null && dragEndMin !== null" class="absolute left-0 w-full bg-[#007AFF]/10 border-y-2 border-[#007AFF] pointer-events-none z-30" :style="{ top: Math.min(dragStartMin, dragEndMin) * timelineZoom + 'px', height: Math.abs(dragEndMin - dragStartMin) * timelineZoom + 'px' }"></div>
|
||||
<div v-if="hoveredTime" class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-40 pointer-events-none" :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00') * timelineZoom + 'px' }"><div class="absolute -left-12 -top-3 bg-[#007AFF] text-white text-[9px] px-1 py-0.5 rounded font-bold">{{ hoveredTime }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable Ruler -->
|
||||
<div
|
||||
ref="timelineRef"
|
||||
class="flex-1 overflow-y-auto relative no-scrollbar hover:cursor-crosshair group"
|
||||
@mousemove="handleTimelineMouseMove"
|
||||
@mouseleave="handleTimelineMouseLeave"
|
||||
@click="handleTimelineClick"
|
||||
@wheel="handleTimelineWheel"
|
||||
>
|
||||
<!-- Ruler Canvas -->
|
||||
<div :style="{ height: rulerHeight + 'px' }" class="relative ml-16">
|
||||
<!-- Hour Markers (Starting from 03:00) -->
|
||||
<div v-for="h in 24" :key="h"
|
||||
class="absolute left-0 w-full border-t border-[#E5E5E7]/60 flex items-start"
|
||||
:style="{ top: (h-1) * 60 * timelineZoom + 'px' }"
|
||||
>
|
||||
<span class="absolute -left-12 -top-2.5 text-[10px] font-bold text-[#86868B] tracking-tighter">
|
||||
{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Activity Bars -->
|
||||
<div
|
||||
v-for="img in timelineImages"
|
||||
:key="img.path"
|
||||
class="absolute left-1 right-8 h-1 bg-[#007AFF]/30 rounded-full"
|
||||
:class="[
|
||||
selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-2 shadow-sm z-10' : '',
|
||||
lockedImage?.path === img.path ? 'bg-[#007AFF] h-2.5 ring-2 ring-[#007AFF]/20 z-20' : ''
|
||||
]"
|
||||
:style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"
|
||||
></div>
|
||||
|
||||
<!-- Hover Cursor Line -->
|
||||
<div
|
||||
v-if="hoveredTime"
|
||||
class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-30 pointer-events-none"
|
||||
:style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00' && hoveredTime >= '00:00' && hoveredTime !== '03:00') * timelineZoom + 'px' }"
|
||||
>
|
||||
<div class="absolute -left-14 -top-3 bg-[#007AFF] text-white text-[10px] px-1.5 py-0.5 rounded font-bold shadow-sm">
|
||||
{{ hoveredTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Actions -->
|
||||
<div class="p-4 border-t border-[#E5E5E7] bg-white/50 backdrop-blur-sm flex justify-around">
|
||||
<button @click="togglePauseState" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'">
|
||||
<Play v-if="isPaused" :size="22" /> <Pause v-else :size="22" />
|
||||
</button>
|
||||
<button @click="isSettingsOpen = true" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors text-[#86868B]">
|
||||
<Settings :size="22" />
|
||||
</button>
|
||||
<div class="p-4 border-t border-[#E5E5E7] bg-white/50 flex justify-around">
|
||||
<button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
|
||||
<button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-[#86868B]"><TagIcon :size="22" /></button>
|
||||
<button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-[#86868B]"><Settings :size="22" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Preview Area -->
|
||||
<div class="flex-1 bg-[#FBFBFD] flex flex-col relative overflow-hidden">
|
||||
<div class="p-6 flex items-center justify-between border-b border-[#E5E5E7]/50 bg-white/80 backdrop-blur-md z-10">
|
||||
<div v-if="selectedImage" class="flex items-center gap-3">
|
||||
<span class="text-lg font-bold">{{ selectedImage.time }}</span>
|
||||
<span v-if="lockedImage?.path === selectedImage.path" class="text-xs font-bold px-2 py-0.5 bg-[#007AFF] text-white rounded-full uppercase tracking-wider">已定格</span>
|
||||
<span v-else class="text-xs font-medium px-2 py-0.5 bg-[#F2F2F7] text-[#86868B] rounded-full uppercase tracking-wider">预览中</span>
|
||||
</div>
|
||||
<div class="p-6 flex items-center justify-between border-b bg-white/80 backdrop-blur-md z-10">
|
||||
<div v-if="selectedImage" class="flex items-center gap-3"><span class="text-lg font-bold">{{ selectedImage.time }}</span><span class="text-xs font-bold px-2 py-0.5" :class="lockedImage?.path === selectedImage.path ? 'bg-[#007AFF] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span></div>
|
||||
<div v-else class="text-[#86868B] font-medium">未选中活动</div>
|
||||
|
||||
<button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 rounded-xl hover:bg-[#F2F2F7] transition-all text-[#86868B]">
|
||||
<Maximize2 :size="20" />
|
||||
</button>
|
||||
<button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 text-[#86868B]"><Maximize2 :size="20" /></button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center p-12 overflow-hidden bg-[#F2F2F7]/30">
|
||||
<div v-if="previewSrc" class="relative group max-w-full max-h-full">
|
||||
<img
|
||||
:src="previewSrc"
|
||||
class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center gap-4 text-[#86868B]">
|
||||
<div class="w-16 h-16 bg-[#E5E5E7] rounded-full flex items-center justify-center opacity-50">
|
||||
<Maximize2 :size="30" />
|
||||
</div>
|
||||
<p class="font-medium">在时间轴上滑动以预览</p>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center p-12 bg-[#F2F2F7]/30">
|
||||
<img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border" />
|
||||
<div v-else class="text-[#86868B] text-center"><Maximize2 :size="48" class="mx-auto mb-4 opacity-20" /><p>在时间轴上滑动或拖拽以记录</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
|
||||
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div class="p-8 border-b border-[#E5E5E7] flex justify-between items-center bg-[#FBFBFD]">
|
||||
<h2 class="text-2xl font-bold">设置</h2>
|
||||
<button @click="isSettingsOpen = false" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#E5E5E7] transition-colors">
|
||||
<X :size="24" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modals -->
|
||||
<div v-if="isEventModalOpen" class="fixed inset-0 z-[110] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isEventModalOpen = false">
|
||||
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col">
|
||||
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">{{ editingEvent.id ? '编辑事件' : '新增记录' }}</h2><button @click="isEventModalOpen = false"><X :size="24" /></button></div>
|
||||
<div class="p-10 space-y-8">
|
||||
<div class="space-y-3">
|
||||
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">存储位置</label>
|
||||
<div class="flex gap-3">
|
||||
<input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-2xl px-5 py-3.5 text-sm font-medium text-[#1D1D1F] outline-none" />
|
||||
<button @click="selectFolder" class="bg-white border-2 border-[#E5E5E7] p-3.5 rounded-2xl hover:border-[#007AFF] transition-all"><FolderOpen :size="20" /></button>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 space-y-1"><label class="text-[10px] font-bold text-[#86868B]">开始</label><div class="bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center">{{ logicalMinutesToTime(editingEvent.start_minute) }}</div></div>
|
||||
<div class="flex-1 space-y-1"><label class="text-[10px] font-bold text-[#86868B]">结束</label><div class="bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center">{{ logicalMinutesToTime(editingEvent.end_minute) }}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl">
|
||||
<div class="space-y-0.5">
|
||||
<div class="font-bold text-[#1D1D1F]">多屏合并</div>
|
||||
<div class="text-xs font-medium text-[#86868B]">将所有屏幕拼接成一张图片</div>
|
||||
</div>
|
||||
<button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-14 h-8 rounded-full transition-all relative shadow-inner" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'">
|
||||
<div class="absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform shadow-md" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">截图间隔</label>
|
||||
<span class="text-lg font-black text-[#007AFF]">{{ captureInterval }} 秒</span>
|
||||
<div class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">主标签</label>
|
||||
<div class="grid grid-cols-4 gap-2"><button v-for="tag in mainTags" :key="tag.id" @click="editingEvent.main_tag_id = tag.id; editingEvent.sub_tag_id = null" class="px-2 py-2 rounded-xl text-[10px] font-bold border-2" :style="{ backgroundColor: editingEvent.main_tag_id === tag.id ? tag.color : 'transparent', borderColor: tag.color, color: editingEvent.main_tag_id === tag.id ? 'white' : tag.color }">{{ tag.name }}</button></div>
|
||||
</div>
|
||||
<input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
|
||||
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">自动截图的频率（10秒至10分钟）。</p>
|
||||
<div v-if="editingEvent.main_tag_id && getSubTags(editingEvent.main_tag_id).length" class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">副标签</label>
|
||||
<div class="flex flex-wrap gap-2"><button v-for="sub in getSubTags(editingEvent.main_tag_id)" :key="sub.id" @click="editingEvent.sub_tag_id = sub.id" class="px-3 py-1.5 rounded-lg text-[10px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></div>
|
||||
</div>
|
||||
<textarea v-model="editingEvent.content" placeholder="记录具体内容..." class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-[100px] outline-none"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">清理策略</label>
|
||||
<span class="text-lg font-black text-[#007AFF]">{{ retainDays }} 天</span>
|
||||
</div>
|
||||
<input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
|
||||
<p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">超过此天数的截图将被自动永久删除。</p>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button v-if="editingEvent.id" @click="deleteEvent(editingEvent.id); isEventModalOpen = false" class="text-[#FF3B30] font-bold px-4 py-2 flex items-center gap-2"><Trash2 :size="18" /> 删除</button>
|
||||
<button @click="saveEvent" class="flex-1 bg-[#007AFF] text-white py-4 rounded-2xl font-bold">保存记录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen Modal -->
|
||||
<div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl animate-in fade-in duration-300">
|
||||
<button @click="isFullscreen = false" class="absolute top-10 right-10 w-14 h-14 flex items-center justify-center bg-white/10 text-white rounded-full hover:bg-white/20 transition-all backdrop-blur-md">
|
||||
<X :size="36" />
|
||||
</button>
|
||||
<img :src="previewSrc" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl" />
|
||||
<div v-if="isTagManagerOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isTagManagerOpen = false">
|
||||
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col">
|
||||
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">标签管理</h2><button @click="isTagManagerOpen = false"><X :size="24" /></button></div>
|
||||
<div class="flex-1 overflow-y-auto p-10 flex gap-10">
|
||||
<div class="flex-1 space-y-6">
|
||||
<div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
|
||||
<div class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl"><div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div><span class="font-bold">{{ mt.name }}</span></div><button @click="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button></div>
|
||||
<div class="ml-7 space-y-1"><div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"><span class="text-sm">{{ st.name }}</span><button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4">
|
||||
<h3 class="font-bold text-xs text-[#86868B] uppercase">添加标签</h3>
|
||||
<input v-model="newTagName" placeholder="名称" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none" />
|
||||
<select v-model="newTagParent" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none appearance-none"><option :value="null">-- 无 --</option><option v-for="t in mainTags" :key="t.id" :value="t.id">{{ t.name }}</option></select>
|
||||
<div v-if="newTagParent === null" class="flex flex-wrap gap-2"><button v-for="c in ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6']" :key="c" @click="newTagColor = c" class="w-5 h-5 rounded-full border-2" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
|
||||
<button @click="handleAddTag(newTagName, newTagParent, newTagColor); resetTagForm()" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-2.5 rounded-xl font-bold">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
|
||||
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden flex flex-col">
|
||||
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">设置</h2><button @click="isSettingsOpen = false"><X :size="24" /></button></div>
|
||||
<div class="p-10 space-y-8">
|
||||
<div class="space-y-3"><label class="text-xs font-bold text-[#86868B]">存储位置</label><div class="flex gap-2"><input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2 text-sm outline-none" /><button @click="selectFolder" class="bg-white border p-2 rounded-xl"><FolderOpen :size="18" /></button></div></div>
|
||||
<div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl"><div class="space-y-0.5"><div class="font-bold">多屏合并</div><div class="text-[10px] text-[#86868B]">拼接所有屏幕</div></div><button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-12 h-6 rounded-full relative transition-all" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'"><div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-all" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div></button></div>
|
||||
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">截图间隔</label><span class="text-xs font-bold text-[#007AFF]">{{ captureInterval }}s</span></div><input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-[#E5E5E7] accent-[#007AFF]" /></div>
|
||||
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">清理策略</label><span class="text-xs font-bold text-[#007AFF]">{{ retainDays }}天</span></div><input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-1 bg-[#E5E5E7] accent-[#007AFF]" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.1s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 4px solid #007AFF;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
margin-top: -11px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user