From 1e1307b8d492df6b77f4f71ddd89557c358da785 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Thu, 26 Mar 2026 12:10:39 -0400
Subject: [PATCH] refactor

---
 src/App.vue                             | 1005 ++++-------------------
 src/components/Setup.vue                |   52 ++
 src/components/modals/ExportModal.vue   |  126 +++
 src/components/modals/SettingsModal.vue |   66 ++
 src/components/modals/TagManager.vue    |   96 +++
 src/components/views/Dashboard.vue      |   85 ++
 src/components/views/Preview.vue        |   14 +
 src/store/dashboardStore.ts             |   75 ++
 src/store/index.ts                      |   75 ++
 src/types/index.ts                      |   28 +
 10 files changed, 773 insertions(+), 849 deletions(-)
 create mode 100644 src/components/Setup.vue
 create mode 100644 src/components/modals/ExportModal.vue
 create mode 100644 src/components/modals/SettingsModal.vue
 create mode 100644 src/components/modals/TagManager.vue
 create mode 100644 src/components/views/Dashboard.vue
 create mode 100644 src/components/views/Preview.vue
 create mode 100644 src/store/dashboardStore.ts
 create mode 100644 src/store/index.ts
 create mode 100644 src/types/index.ts

diff --git a/src/App.vue b/src/App.vue
index 9b841a6..9aa13a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,169 +1,57 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
-import { load } from "@tauri-apps/plugin-store";
-import { open, save } from "@tauri-apps/plugin-dialog";
+import { load as loadStore } from "@tauri-apps/plugin-store";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2, ChevronDown, ChevronLeft, ChevronRight, Calendar, Download, SquarePlus, BarChart2, Image as ImageIcon } from "lucide-vue-next";
+import { 
+  RefreshCw, Calendar, ChevronLeft, ChevronRight, Play, Pause, SquarePlus, Tag as TagIcon, Download, Settings, Maximize2, X, Image as ImageIcon, BarChart2 
+} from "lucide-vue-next";
 
-// --- 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; }
+import { 
+  isSetupComplete, savePath, dbPath, isPaused, currentDate, timelineImages, selectedImage, lockedImage, 
+  previewSrc, isFullscreen, dayEvents, toast, showToast, timelineZoom, theme, viewMode,
+  retainDays, captureInterval,
+  TIME_OFFSET_MINUTES, TOTAL_MINUTES, getTagColor, getTagName, mainTags, getSubTags,
+  logicalMinutesToTime, logicalMinutesFromTime, formatDuration,
+  loadTags, loadEvents
+} from "./store";
+import { DBEvent, TimelineItem } from "./types";
 
-const TOTAL_MINUTES = 24 * 60;
-const TIME_OFFSET_MINUTES = 3 * 60;
+// --- Components ---
+import Setup from "./components/Setup.vue";
+import Preview from "./components/views/Preview.vue";
+import Dashboard from "./components/views/Dashboard.vue";
+import TagManager from "./components/modals/TagManager.vue";
+import ExportModal from "./components/modals/ExportModal.vue";
+import SettingsModal from "./components/modals/SettingsModal.vue";
 
-// --- State ---
-const isSetupComplete = ref(false);
-const savePath = ref("");
-const dbPath = ref("");
-const isPaused = ref(false);
-const currentDate = ref(new Date(Date.now() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv'));
-const timelineImages = ref<TimelineItem[]>([]);
-const selectedImage = ref<TimelineItem | null>(null);
-const lockedImage = ref<TimelineItem | null>(null);
-const previewSrc = ref("");
-const isFullscreen = ref(false);
+// --- Local State (Timeline UI) ---
 const isSettingsOpen = ref(false);
 const isTagManagerOpen = ref(false);
-const expandedMainTags = ref<number[]>([]);
-const toggleMainTag = (id: number) => {
-  const index = expandedMainTags.value.indexOf(id);
-  if (index > -1) expandedMainTags.value.splice(index, 1);
-  else expandedMainTags.value.push(id);
-};
+const isExportModalOpen = ref(false);
 const isEventModalOpen = ref(false);
+const isCalendarOpen = ref(false);
 
-const toast = ref({ message: "", type: "success", visible: false });
-const showToast = (message: string, type = "success") => {
-  toast.value = { message, type, visible: true };
-  setTimeout(() => { toast.value.visible = false; }, 3000);
-};
+const calendarRef = ref<HTMLElement | null>(null);
+const calendarMonth = ref(new Date());
+const timelineRef = ref<HTMLElement | null>(null);
 
-const retainDays = ref(30);
-const captureInterval = ref(60);
-const timelineZoom = ref(1.5);
-const theme = ref("system");
-
-const viewMode = ref<'preview' | 'dashboard'>('preview');
-const dashboardRange = ref<'today' | '7days' | '30days'>('today');
-const dashboardStartDate = ref(currentDate.value);
-const dashboardEndDate = ref(currentDate.value);
-const dashboardEvents = ref<DBEvent[]>([]);
-const dailyAverageMode = ref<'natural' | 'recorded'>('natural');
-
-const loadDashboardEvents = async () => {
-  dashboardEvents.value = await invoke("get_events_range", { startDate: dashboardStartDate.value, endDate: dashboardEndDate.value });
-};
-
-watch([dashboardRange, currentDate], async () => {
-  const end = new Date(currentDate.value);
-  let start = new Date(currentDate.value);
-  if (dashboardRange.value === '7days') start.setDate(end.getDate() - 6);
-  else if (dashboardRange.value === '30days') start.setDate(end.getDate() - 29);
-  dashboardStartDate.value = start.toLocaleDateString('sv');
-  dashboardEndDate.value = end.toLocaleDateString('sv');
-  if (viewMode.value === 'dashboard') await loadDashboardEvents();
-});
-
-watch(viewMode, async (mode) => {
-  if (mode === 'dashboard') {
-    const end = new Date(currentDate.value);
-    let start = new Date(currentDate.value);
-    if (dashboardRange.value === '7days') start.setDate(end.getDate() - 6);
-    else if (dashboardRange.value === '30days') start.setDate(end.getDate() - 29);
-    dashboardStartDate.value = start.toLocaleDateString('sv');
-    dashboardEndDate.value = end.toLocaleDateString('sv');
-    await loadDashboardEvents();
-  }
-});
-
-const dashboardStats = computed(() => {
-  let totalMinutes = 0;
-  const mainTagMap = new Map<number, { total: number, subTags: Map<number, number> }>();
-  const uniqueDays = new Set<string>();
-
-  dashboardEvents.value.forEach(ev => {
-    let diff = ev.end_minute - ev.start_minute;
-    if (diff < 0) diff += 1440;
-    totalMinutes += diff;
-    uniqueDays.add(ev.date);
-
-    if (!mainTagMap.has(ev.main_tag_id)) {
-      mainTagMap.set(ev.main_tag_id, { total: 0, subTags: new Map() });
-    }
-    const mainStat = mainTagMap.get(ev.main_tag_id)!;
-    mainStat.total += diff;
-
-    if (ev.sub_tag_id) {
-      const subTotal = mainStat.subTags.get(ev.sub_tag_id) || 0;
-      mainStat.subTags.set(ev.sub_tag_id, subTotal + diff);
-    }
-  });
-
-  const start = new Date(dashboardStartDate.value);
-  const end = new Date(dashboardEndDate.value);
-  const naturalDays = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 86400000) + 1);
-  const recordedDays = Math.max(1, uniqueDays.size);
-  const daysCount = dailyAverageMode.value === 'natural' ? naturalDays : recordedDays;
-
-  const mainTagsList = Array.from(mainTagMap.entries()).map(([id, stat]) => {
-    const subTagsList = Array.from(stat.subTags.entries()).map(([subId, subTotal]) => ({
-      id: subId,
-      total: subTotal,
-      percentage: stat.total > 0 ? (subTotal / stat.total) * 100 : 0
-    })).sort((a, b) => b.total - a.total);
-
-    return {
-      id,
-      total: stat.total,
-      dailyAverage: stat.total / daysCount,
-      percentage: totalMinutes > 0 ? (stat.total / totalMinutes) * 100 : 0,
-      subTags: subTagsList
-    };
-  }).sort((a, b) => b.total - a.total);
-
-  return { totalMinutes, dailyAverage: totalMinutes / daysCount, mainTags: mainTagsList, naturalDays, recordedDays, daysCount };
-});
-
-const formatMinutes = (mins: number) => {
-  const h = Math.floor(mins / 60);
-  const m = Math.floor(mins % 60);
-  if (h === 0) return `${m}m`;
-  return `${h}h ${m}m`;
-};
-
-const applyTheme = (val: string) => {
-  if (val === 'dark') {
-    document.documentElement.classList.add('dark');
-  } else if (val === 'light') {
-    document.documentElement.classList.remove('dark');
-  } else {
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }
-};
-
-watch(theme, (newVal) => {
-  applyTheme(newVal);
-});
-
-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 hoveredEventDetails = ref<{ event: DBEvent; x: number; y: number } | null>(null);
-
 const currentLogicalMinute = ref(-1);
-let currentMinuteInterval: 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: "" });
+
+// --- Time Pickers State ---
+const startTimePickerRef = ref<HTMLElement | null>(null);
+const endTimePickerRef = ref<HTMLElement | null>(null);
+const isStartTimeOpen = ref(false);
+const isEndTimeOpen = ref(false);
+
+// --- Logic ---
 const updateCurrentMinute = () => {
   const now = new Date();
   const logicalDateStr = new Date(now.getTime() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv');
@@ -175,144 +63,44 @@ const updateCurrentMinute = () => {
   }
 };
 
-const handleEventMouseEnter = (ev: DBEvent, e: MouseEvent) => {
-  hoveredEventDetails.value = { event: ev, x: e.clientX, y: e.clientY };
-};
-const handleEventMouseMove = (e: MouseEvent) => {
-  if (hoveredEventDetails.value) {
-    hoveredEventDetails.value.x = e.clientX;
-    hoveredEventDetails.value.y = e.clientY;
-  }
-};
-const handleEventMouseLeave = () => {
-  hoveredEventDetails.value = null;
-};
-
-watch(dayEvents, (newEvents) => {
-  if (hoveredEventDetails.value) {
-    const exists = newEvents.some(ev => ev.id === hoveredEventDetails.value?.event.id);
-    if (!exists) {
-      hoveredEventDetails.value = null;
-    }
-  }
-});
-
-const timelineRef = ref<HTMLElement | null>(null);
-
-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";
-const getTagName = (tagId: number | null) => tags.value.find(t => t.id === tagId)?.name || "-- 无 --";
-
-let store: any = null;
+let currentMinuteInterval: number | null = null;
 let captureUnlisten: any = null;
 
-// --- Custom Picker States ---
-const calendarRef = ref<HTMLElement | null>(null);
-const startTimePickerRef = ref<HTMLElement | null>(null);
-const endTimePickerRef = ref<HTMLElement | null>(null);
-const tagSelectRef = ref<HTMLElement | null>(null);
-const exportStartCalendarRef = ref<HTMLElement | null>(null);
-const exportEndCalendarRef = ref<HTMLElement | null>(null);
-
-const isCalendarOpen = ref(false);
-const calendarMonth = ref(new Date());
-const isStartTimeOpen = ref(false);
-const isEndTimeOpen = ref(false);
-const isExportStartCalendarOpen = ref(false);
-const isExportEndCalendarOpen = ref(false);
-
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (isCalendarOpen.value && calendarRef.value && !calendarRef.value.contains(target)) {
-    isCalendarOpen.value = false;
-  }
-  if (isStartTimeOpen.value && startTimePickerRef.value && !startTimePickerRef.value.contains(target)) {
-    isStartTimeOpen.value = false;
-  }
-  if (isEndTimeOpen.value && endTimePickerRef.value && !endTimePickerRef.value.contains(target)) {
-    isEndTimeOpen.value = false;
-  }
-  if (isTagSelectOpen.value && tagSelectRef.value && !tagSelectRef.value.contains(target)) {
-    isTagSelectOpen.value = false;
-  }
-  if (isExportStartCalendarOpen.value && exportStartCalendarRef.value && !exportStartCalendarRef.value.contains(target)) {
-    isExportStartCalendarOpen.value = false;
-  }
-  if (isExportEndCalendarOpen.value && exportEndCalendarRef.value && !exportEndCalendarRef.value.contains(target)) {
-    isExportEndCalendarOpen.value = false;
-  }
-};
-
-const openStartTimePicker = async () => {
-  isStartTimeOpen.value = !isStartTimeOpen.value;
-  isEndTimeOpen.value = false;
-  if (isStartTimeOpen.value) {
-    await nextTick();
-    const activeItems = document.querySelectorAll('.z-120 .bg-\\[\\#007AFF\\].text-white');
-    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
-  }
-};
-
-const openEndTimePicker = async () => {
-  isEndTimeOpen.value = !isEndTimeOpen.value;
-  isStartTimeOpen.value = false;
-  if (isEndTimeOpen.value) {
-    await nextTick();
-    const activeItems = document.querySelectorAll('.z-120 .bg-\\[\\#007AFF\\].text-white');
-    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
-  }
-};
-
-const calendarDays = computed(() => {
-  const y = calendarMonth.value.getFullYear();
-  const m = calendarMonth.value.getMonth();
-  const firstDay = new Date(y, m, 1).getDay();
-  const daysInMonth = new Date(y, m + 1, 0).getDate();
-  const days = [];
-  const padding = (firstDay + 6) % 7;
-  for (let i = 0; i < padding; i++) days.push(null);
-  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
-  return days;
+watch(currentDate, () => {
+  updateCurrentMinute();
 });
 
-const selectCalendarDate = (date: Date) => {
-  currentDate.value = date.toLocaleDateString('sv'); // sv locale gives YYYY-MM-DD
-  isCalendarOpen.value = false;
-  selectedImage.value = null;
-  lockedImage.value = null;
-  previewSrc.value = "";
-  hoveredTime.value = null;
-  hoveredEventDetails.value = null;
-  dayEvents.value = [];
-  timelineImages.value = [];
-  updateCurrentMinute();
-  loadTimeline(true); loadEvents();
-};
-
-// --- Logic ---
 onMounted(async () => {
   window.addEventListener('mousedown', handleClickOutside);
   updateCurrentMinute();
   currentMinuteInterval = window.setInterval(updateCurrentMinute, 60000);
-  store = await load("config.json");
-  const path = await store.get("savePath");
-  const dPath = await store.get("dbPath");
+  
+  const store = await loadStore("config.json");
+  const path = await store.get<string>("savePath");
+  const dPath = await store.get<string>("dbPath");
+  
   if (path && dPath) {
-    savePath.value = path as string;
-    dbPath.value = dPath as string;
+    savePath.value = path;
+    dbPath.value = dPath;
     isSetupComplete.value = true;
     await invoke("update_db_path", { path: dbPath.value });
-    retainDays.value = (await store.get("retainDays")) as number || 30;
-    captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60);
-    timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
-    theme.value = (await store.get("theme")) as string || "system";
+    
+    const rDays = await store.get<number>("retainDays");
+    if (rDays) retainDays.value = rDays;
+    const cInterval = await store.get<number>("captureInterval");
+    if (cInterval) captureInterval.value = Math.max(cInterval, 60);
+    const tZoom = await store.get<number>("timelineZoom");
+    if (tZoom) timelineZoom.value = tZoom;
+    const tTheme = await store.get<string>("theme");
+    if (tTheme) theme.value = tTheme;
+
     applyTheme(theme.value);
     await invoke("update_interval", { seconds: captureInterval.value });
-    isPaused.value = await invoke("get_pause_state");
+    isPaused.value = await invoke<boolean>("get_pause_state");
+    
     await loadTimeline(true); await loadTags(); await loadEvents();
   }
+
   await listen<boolean>("pause-state-changed", (event) => { isPaused.value = event.payload; });
   captureUnlisten = await listen("refresh-timeline", () => { loadTimeline(); });
 });
@@ -323,130 +111,50 @@ onUnmounted(() => {
   if (captureUnlisten) captureUnlisten(); 
 });
 
-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(true); await loadTags(); await loadEvents();
-  }
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (isCalendarOpen.value && calendarRef.value && !calendarRef.value.contains(target)) isCalendarOpen.value = false;
+  if (isStartTimeOpen.value && startTimePickerRef.value && !startTimePickerRef.value.contains(target)) isStartTimeOpen.value = false;
+  if (isEndTimeOpen.value && endTimePickerRef.value && !endTimePickerRef.value.contains(target)) isEndTimeOpen.value = false;
 };
 
-const loadTags = async () => { tags.value = await invoke("get_tags"); };
-const loadEvents = async () => { 
-  dayEvents.value = await invoke("get_events", { date: currentDate.value }); 
-  if (viewMode.value === 'dashboard') await loadDashboardEvents();
+const applyTheme = (val: string) => {
+  const isDark = val === 'dark' || (val === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  document.documentElement.classList.toggle('dark', isDark);
 };
 
-const handleAddTag = async (name: string, parentId: number | null, color: string) => {
-  try {
-    await invoke("add_tag", { name, parentId, color });
-    await loadTags();
-    showToast("标签添加成功");
-  } catch (e) {
-    showToast("添加失败: " + e, "error");
-  }
-};
-
-const handleDeleteTag = async (id: number) => {
-  try {
-    await invoke("delete_tag", { id });
-    await loadTags();
-    showToast("标签已删除");
-  } catch (e: any) {
-    if (e.toString().includes("FOREIGN KEY")) {
-      showToast("该标签正在被使用，无法删除", "error");
-    } else {
-      showToast("删除失败: " + e, "error");
+const loadTimeline = async (autoScroll = false) => { 
+  if (savePath.value) {
+    timelineImages.value = await invoke<TimelineItem[]>("get_timeline", { date: currentDate.value, baseDir: savePath.value }); 
+    if (autoScroll && timelineRef.value) {
+      await nextTick();
+      const now = new Date();
+      const currentMin = now.getHours() * 60 + now.getMinutes();
+      const logicalMin = (currentMin < TIME_OFFSET_MINUTES ? currentMin + 1440 : currentMin) - TIME_OFFSET_MINUTES;
+      timelineRef.value.scrollTop = Math.max(0, logicalMin * timelineZoom.value - timelineRef.value.clientHeight / 2);
     }
   }
 };
 
-const saveEvent = async () => {
-  try {
-    await invoke("save_event", { event: editingEvent.value });
-    isEventModalOpen.value = false;
-    await loadEvents();
-    showToast("事件已保存");
-  } catch (e) {
-    showToast("保存失败: " + e, "error");
-  }
-};
-
-const deleteEvent = async (id: number) => {
-  try {
-    await invoke("delete_event", { id });
-    await loadEvents();
-    showToast("事件已删除");
-  } catch (e) {
-    showToast("删除失败: " + e, "error");
-  }
-};
-
-const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
-  const [h, m, s = 0] = timeStr.split(":").map(Number);
-  let t = h * 60 + m + (s / 60); if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
-};
-
-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 logicalMinutesFromTime = (timeStr: string) => {
-  const [h, m] = timeStr.split(":").map(Number);
-  let total = h * 60 + m;
-  if (h < 3) total += 1440;
-  return total - TIME_OFFSET_MINUTES;
-};
-
-const startTimeInput = computed({
-  get: () => logicalMinutesToTime(editingEvent.value.start_minute),
-  set: (val) => { editingEvent.value.start_minute = logicalMinutesFromTime(val); }
-});
-
-const endTimeInput = computed({
-  get: () => logicalMinutesToTime(editingEvent.value.end_minute),
-  set: (val) => { editingEvent.value.end_minute = logicalMinutesFromTime(val); }
-});
-
-const eventDurationFormatted = computed(() => {
-  let diff = editingEvent.value.end_minute - editingEvent.value.start_minute;
-  if (diff < 0) diff += 1440;
-  const h = Math.floor(diff / 60);
-  const m = diff % 60;
-  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
-});
-
-const formatDuration = (start: number, end: number) => {
-  let diff = end - start;
-  if (diff < 0) diff += 1440;
-  const h = Math.floor(diff / 60);
-  const m = diff % 60;
-  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '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 });
+  const b64 = await invoke<string>("get_image_base64", { path: img.path });
   previewSrc.value = `data:image/jpeg;base64,${b64}`;
 };
 
+// --- Timeline Handlers ---
 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);
+  const min = Math.floor((e.clientY - timelineRef.value.getBoundingClientRect().top + timelineRef.value.scrollTop) / timelineZoom.value);
   isDragging.value = true; dragStartMin.value = min; dragEndMin.value = min;
 };
 
+const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
+  const [h, m, s = 0] = timeStr.split(":").map(Number);
+  let t = h * 60 + m + (s / 60); if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
+};
+
 const handleTimelineMouseMove = (e: MouseEvent) => {
   if (!timelineRef.value) return;
   const rect = timelineRef.value.getBoundingClientRect();
@@ -472,219 +180,78 @@ const handleTimelineMouseUp = () => {
     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 {
+    } else if (timelineImages.value.length) {
         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; 
-          viewMode.value = 'preview';
-          updatePreview(closest); 
-        }
+        if (closest) { lockedImage.value = closest; viewMode.value = 'preview'; updatePreview(closest); }
     }
   }
 };
 
-const handleTimelineMouseLeave = () => {
-  hoveredTime.value = null;
-  if (viewMode.value === 'dashboard') return;
-  if (!isDragging.value && lockedImage.value) updatePreview(lockedImage.value);
-};
-
 const handleTimelineWheel = (e: WheelEvent) => {
   if (e.ctrlKey) {
     e.preventDefault(); if (!timelineRef.value) return;
     const rect = timelineRef.value.getBoundingClientRect();
     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 oh = TOTAL_MINUTES * timelineZoom.value;
+    timelineZoom.value = Math.min(Math.max(0.5, timelineZoom.value + (e.deltaY > 0 ? -0.2 : 0.2)), 15);
+    timelineRef.value.scrollTop = (cy / oh) * (TOTAL_MINUTES * timelineZoom.value) - my;
   }
 };
 
-const updateSettings = async () => {
-  await store.set("savePath", savePath.value);
-  await store.set("dbPath", dbPath.value);
-  await store.set("retainDays", retainDays.value);
-  await store.set("captureInterval", captureInterval.value); 
-  await store.set("timelineZoom", timelineZoom.value);
-  await store.set("theme", theme.value);
-  await store.save();
-  await invoke("update_db_path", { path: dbPath.value });
-  await invoke("update_interval", { seconds: captureInterval.value });
+const selectCalendarDate = (date: Date) => {
+  currentDate.value = date.toLocaleDateString('sv');
+  isCalendarOpen.value = false;
+  selectedImage.value = null; lockedImage.value = null; previewSrc.value = "";
+  loadTimeline(true); loadEvents();
 };
 
-const togglePauseState = async () => { isPaused.value = await invoke("toggle_pause"); };
-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 calendarDays = computed(() => {
+  const y = calendarMonth.value.getFullYear(); const m = calendarMonth.value.getMonth();
+  const firstDay = new Date(y, m, 1).getDay(); const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const days = []; const padding = (firstDay + 6) % 7;
+  for (let i = 0; i < padding; i++) days.push(null);
+  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
+  return days;
+});
+
+const saveEvent = async () => {
+  try {
+    await invoke("save_event", { event: editingEvent.value });
+    isEventModalOpen.value = false; await loadEvents(); showToast("事件已保存");
+  } catch (e) { showToast("保存失败: " + e, "error"); }
+};
+
+const deleteEvent = async (id: number) => {
+  try { await invoke("delete_event", { id }); await loadEvents(); showToast("事件已删除"); } catch (e) { showToast("删除失败: " + e, "error"); }
 };
 
 const handleQuickAddEvent = () => {
-  let start = 0;
-  if (dayEvents.value && dayEvents.value.length > 0) {
-    const lastEvent = dayEvents.value.reduce((prev, curr) => curr.end_minute > prev.end_minute ? curr : prev, dayEvents.value[0]);
-    start = lastEvent.end_minute;
-  }
-
-  let end = 1439;
-  if (currentLogicalMinute.value >= 0) {
-    end = currentLogicalMinute.value;
-  }
-
-  if (start > end) start = end;
-
-  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: "" 
-  };
+  let start = dayEvents.value.length ? Math.max(...dayEvents.value.map(e => e.end_minute)) : 0;
+  let end = currentLogicalMinute.value >= 0 ? currentLogicalMinute.value : 1439;
+  editingEvent.value = { id: 0, date: currentDate.value, start_minute: Math.min(start, end), end_minute: end, main_tag_id: mainTags.value[0]?.id || 0, sub_tag_id: null, content: "" };
   isEventModalOpen.value = true;
 };
 
-const newTagName = ref(""); const newTagParent = ref<number | null>(null); const newTagColor = ref("#007AFF");
-const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF"; };
-
-// --- Custom Select State ---
-const isTagSelectOpen = ref(false);
-
-// --- Export State ---
-const isExportModalOpen = ref(false);
-const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
-const exportEndDate = ref(currentDate.value);
-const exportStartMonth = ref(new Date(exportStartDate.value));
-const exportEndMonth = ref(new Date(exportEndDate.value));
-
-const exportStartCalendarDays = computed(() => {
-  const y = exportStartMonth.value.getFullYear();
-  const m = exportStartMonth.value.getMonth();
-  const firstDay = new Date(y, m, 1).getDay();
-  const daysInMonth = new Date(y, m + 1, 0).getDate();
-  const days = [];
-  const padding = (firstDay + 6) % 7;
-  for (let i = 0; i < padding; i++) days.push(null);
-  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
-  return days;
-});
-
-const exportEndCalendarDays = computed(() => {
-  const y = exportEndMonth.value.getFullYear();
-  const m = exportEndMonth.value.getMonth();
-  const firstDay = new Date(y, m, 1).getDay();
-  const daysInMonth = new Date(y, m + 1, 0).getDate();
-  const days = [];
-  const padding = (firstDay + 6) % 7;
-  for (let i = 0; i < padding; i++) days.push(null);
-  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
-  return days;
-});
-
-const selectExportStartDate = (date: Date) => {
-  exportStartDate.value = date.toLocaleDateString('sv');
-  isExportStartCalendarOpen.value = false;
-};
-
-const selectExportEndDate = (date: Date) => {
-  exportEndDate.value = date.toLocaleDateString('sv');
-  isExportEndCalendarOpen.value = false;
-};
-
-const openExportModal = () => {
-  exportEndDate.value = currentDate.value;
-  exportStartMonth.value = new Date(exportStartDate.value);
-  exportEndMonth.value = new Date(exportEndDate.value);
-  isExportModalOpen.value = true;
-};
-
-const handleExport = async () => {
-  try {
-    const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
-    
-    if (events.length === 0) {
-      showToast("所选范围内没有找到记录", "error");
-      return;
-    }
-
-    const savePath = await save({
-      filters: [{ name: "JSON 文件", extensions: ["json"] }],
-      defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
-    });
-
-    if (savePath) {
-      const exportData = events.map(e => ({
-        date: e.date,
-        start_time: logicalMinutesToTime(e.start_minute),
-        end_time: logicalMinutesToTime(e.end_minute),
-        main_tag: getTagName(e.main_tag_id),
-        sub_tag: getTagName(e.sub_tag_id),
-        content: e.content
-      }));
-      
-      await invoke("write_file", { path: savePath, content: JSON.stringify(exportData, null, 2) });
-      isExportModalOpen.value = false;
-      showToast("导出成功");
-    }
-  } catch (e) {
-    showToast("导出失败: " + e, "error");
-  }
+const togglePause = async () => {
+  isPaused.value = await invoke<boolean>("toggle_pause");
 };
 </script>
 
 <template>
   <div class="h-screen w-screen flex flex-col overflow-hidden text-text-main bg-bg-main">
-    
-    <div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center p-10">
-      <div class="bg-bg-card p-12 rounded-4xl shadow-2xl max-w-lg text-center border border-border-main">
-        <Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
-        <h1 class="text-3xl font-bold mb-4">初始化设置</h1>
-        <div class="space-y-6 text-left mb-10">
-          <div class="space-y-2">
-            <label class="text-xs font-bold text-text-sec">截图保存目录</label>
-            <div class="flex gap-2">
-              <input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
-              <button @click="selectFolder" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button>
-            </div>
-          </div>
-          <div class="space-y-2">
-            <label class="text-xs font-bold text-text-sec">数据库文件</label>
-            <div class="flex gap-2">
-              <input type="text" readonly :value="dbPath" placeholder="请选择或创建数据库文件..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
-              <div class="flex gap-1">
-                <button @click="selectDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
-                <button @click="createDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :size="18" /></button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <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>
-
+    <Setup v-if="!isSetupComplete" />
     <div v-else class="flex flex-1 overflow-hidden">
+      <!-- Sidebar -->
       <div class="w-80 bg-bg-sidebar border-r border-border-main flex flex-col select-none relative">
         <div class="p-6 bg-bg-sidebar/80 backdrop-blur-md sticky top-0 z-100 border-b border-border-main/50">
           <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-bg-card rounded-xl text-text-sec"><RefreshCw :size="18" /></button></div>
-          <div ref="calendarRef" class="relative group">
-             <button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-bg-card border border-border-main rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-bg-input transition-all">
-                <Calendar :size="16" class="absolute left-4 text-text-sec" />
-                {{ currentDate }}
+          <div ref="calendarRef" class="relative">
+             <button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-bg-card border border-border-main rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-bg-input">
+                <Calendar :size="16" class="absolute left-4 text-text-sec" />{{ currentDate }}
              </button>
              <div v-if="isCalendarOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-100 p-5 animate-in fade-in zoom-in-95 duration-200">
                 <div class="flex items-center justify-between mb-4">
@@ -702,47 +269,35 @@ const handleExport = async () => {
           </div>
         </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 ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="hoveredTime = null" @wheel="handleTimelineWheel">
+          <div :style="{ height: TOTAL_MINUTES * timelineZoom + 'px' }" class="relative ml-14 mr-4">
             <div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-border-main/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
               <span v-if="h > 1" class="absolute -left-11 -top-2.5 text-[10px] font-bold text-text-sec">{{ 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 cursor-pointer hover:opacity-100 hover:border-l-[6px] hover:z-50 hover:brightness-110" 
-              :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '50', borderColor: getTagColor(ev.main_tag_id) }" 
-              @mouseenter="handleEventMouseEnter(ev, $event)"
-              @mousemove="handleEventMouseMove"
-              @mouseleave="handleEventMouseLeave"
-              @click.stop="editingEvent = { ...ev }; isEventModalOpen = true">
-            </div>
+            <div v-for="ev in dayEvents" :key="ev.id" class="absolute left-0 w-[45%] opacity-80 border-l-4 cursor-pointer hover:z-50 hover:brightness-110" :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '50', borderColor: getTagColor(ev.main_tag_id) }" @click.stop="editingEvent = { ...ev }; isEventModalOpen = true" @mouseenter="hoveredEventDetails = { event: ev, x: $event.clientX, y: $event.clientY }" @mousemove="hoveredEventDetails ? (hoveredEventDetails.x = $event.clientX, hoveredEventDetails.y = $event.clientY) : null" @mouseleave="hoveredEventDetails = null"></div>
             <div v-for="img in timelineImages" :key="img.path" class="absolute left-[50%] right-2 h-0.5 bg-[#007AFF]/20 rounded-full" :class="[selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-1 z-10' : '', lockedImage?.path === img.path ? 'bg-[#007AFF] h-1.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="isDragging && 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 v-if="currentLogicalMinute >= 0" class="absolute left-0 right-0 border-t-2 border-[#FF3B30] z-30 pointer-events-none" :style="{ top: currentLogicalMinute * timelineZoom + 'px' }"><div class="absolute -left-12 -top-2.5 bg-[#FF3B30] text-white text-[9px] px-1 py-0.5 rounded font-bold shadow-[0_0_8px_rgba(255,59,48,0.5)]">{{ logicalMinutesToTime(currentLogicalMinute) }}</div></div>
           </div>
         </div>
 
         <div class="p-4 border-t border-border-main bg-bg-card/50 flex justify-around">
-          <button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-text-sec'" :title="isPaused ? '恢复记录' : '暂停记录'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
-          <button @click="handleQuickAddEvent" class="p-3 rounded-2xl text-text-sec" title="添加记录"><SquarePlus :size="22" /></button>
-          <button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-text-sec" title="标签管理"><TagIcon :size="22" /></button>
-          <button @click="openExportModal" class="p-3 rounded-2xl text-text-sec" title="导出记录"><Download :size="22" /></button>
-          <button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-text-sec" title="设置"><Settings :size="22" /></button>
+          <button @click="togglePause" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-text-sec'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
+          <button @click="handleQuickAddEvent" class="p-3 rounded-2xl text-text-sec"><SquarePlus :size="22" /></button>
+          <button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-text-sec"><TagIcon :size="22" /></button>
+          <button @click="isExportModalOpen = true" class="p-3 rounded-2xl text-text-sec"><Download :size="22" /></button>
+          <button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-text-sec"><Settings :size="22" /></button>
         </div>
       </div>
 
+      <!-- Main Panel -->
       <div class="flex-1 bg-bg-main flex flex-col relative overflow-hidden">
         <div class="p-6 flex items-center justify-between border-b bg-bg-card/80 backdrop-blur-md z-10">
-          <div v-if="viewMode === 'preview'" class="flex items-center gap-3">
-            <template v-if="selectedImage">
-              <span class="text-lg font-bold">{{ selectedImage.time }}</span><span class="text-xs font-bold px-2 py-0.5 rounded-md" :class="lockedImage?.path === selectedImage.path ? 'bg-[#007AFF] text-white' : 'bg-bg-input text-text-sec'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span>
-            </template>
-            <span v-else class="text-text-sec font-medium">未选中活动</span>
+          <div class="flex items-center gap-3">
+            <span class="text-lg font-bold">{{ viewMode === 'preview' ? (selectedImage ? selectedImage.time : '预览') : '时间分析' }}</span>
+            <span v-if="viewMode === 'preview' && selectedImage" class="text-xs font-bold px-2 py-0.5 rounded-md" :class="lockedImage?.path === selectedImage.path ? 'bg-[#007AFF] text-white' : 'bg-bg-input text-text-sec'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span>
           </div>
-          <div v-else class="flex items-center gap-3">
-            <span class="text-lg font-bold">时间分析</span>
-          </div>
-          
           <div class="flex items-center gap-4">
             <button v-if="viewMode === 'preview' && selectedImage" @click="isFullscreen = true" class="p-2.5 text-text-sec hover:text-text-main"><Maximize2 :size="20" /></button>
             <div class="flex bg-bg-input rounded-xl p-1 gap-1 border border-border-main/50 shadow-inner">
@@ -753,151 +308,45 @@ const handleExport = async () => {
         </div>
 
         <div class="flex-1 relative overflow-hidden">
-          <div v-show="viewMode === 'preview'" class="absolute inset-0 flex items-center justify-center p-12 bg-bg-input/30">
-            <img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-border-main/50" />
-            <div v-else class="text-text-sec text-center"><Maximize2 :size="48" class="mx-auto mb-4 opacity-20" /><p>在时间轴上滑动或拖拽以记录</p></div>
-          </div>
-          
-          <div v-if="viewMode === 'dashboard'" class="absolute inset-0 overflow-y-auto no-scrollbar p-10 bg-bg-main animate-in fade-in zoom-in-95 duration-200">
-            <div class="max-w-3xl mx-auto">
-              <div class="flex justify-between items-center mb-10">
-                 <div class="flex bg-bg-input rounded-xl p-1.5 gap-1 border border-border-main/50 shadow-inner">
-                    <button @click="dashboardRange = 'today'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === 'today' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">今日</button>
-                    <button @click="dashboardRange = '7days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '7days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">近 7 天</button>
-                    <button @click="dashboardRange = '30days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '30days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">近 30 天</button>
-                 </div>
-                 <div v-if="dashboardRange !== 'today'" class="flex bg-bg-input rounded-xl p-1 gap-1 border border-border-main/50 shadow-inner">
-                    <button @click="dailyAverageMode = 'natural'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'natural' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">自然天数 ({{dashboardStats.naturalDays}}天)</button>
-                    <button @click="dailyAverageMode = 'recorded'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'recorded' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">记录天数 ({{dashboardStats.recordedDays}}天)</button>
-                 </div>
-              </div>
-
-              <div class="grid grid-cols-2 gap-6 mb-10">
-                 <div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
-                    <div class="text-xs font-bold text-text-sec mb-2">总记录时长</div>
-                    <div class="text-4xl font-black text-text-main">{{ formatMinutes(dashboardStats.totalMinutes) }}</div>
-                 </div>
-                 <div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
-                    <div class="text-xs font-bold text-text-sec mb-2">日均时长</div>
-                    <div class="text-4xl font-black text-[#007AFF]">{{ formatMinutes(dashboardStats.dailyAverage) }}</div>
-                 </div>
-              </div>
-
-              <div class="mb-12 bg-bg-card border border-border-main p-6 rounded-3xl shadow-sm">
-                 <h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">占比总览</h3>
-                 <div class="h-6 w-full bg-bg-input rounded-full overflow-hidden flex shadow-inner mb-4 border border-border-main/30">
-                    <div v-for="tag in dashboardStats.mainTags" :key="tag.id" :style="{ width: tag.percentage + '%', backgroundColor: getTagColor(tag.id) }" class="h-full first:rounded-l-full last:rounded-r-full border-r border-bg-main/20 last:border-0 transition-all duration-500 hover:brightness-110 cursor-pointer" :title="getTagName(tag.id) + ' ' + tag.percentage.toFixed(1) + '%'"></div>
-                 </div>
-                 <div class="flex flex-wrap gap-4 px-2">
-                    <div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="flex items-center gap-2">
-                       <div class="w-3 h-3 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
-                       <span class="text-xs font-bold text-text-sec">{{ getTagName(tag.id) }} <span class="text-text-main ml-1">{{ tag.percentage.toFixed(0) }}%</span></span>
-                    </div>
-                 </div>
-              </div>
-
-              <div class="space-y-4">
-                 <h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">时间分布明细</h3>
-                 <div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="bg-bg-card border border-border-main rounded-3xl p-5 shadow-sm transition-all hover:border-border-main/80 hover:shadow-md">
-                    <div class="flex justify-between items-center mb-1">
-                       <div class="flex items-center gap-3">
-                          <div class="w-4 h-4 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
-                          <span class="font-bold text-lg">{{ getTagName(tag.id) }}</span>
-                       </div>
-                       <div class="text-right">
-                          <div class="font-black text-xl">{{ formatMinutes(tag.total) }}</div>
-                       </div>
-                    </div>
-                    <div class="flex items-center gap-2 mb-4 pl-7 text-[11px] font-bold text-text-sec">
-                      <span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30">占比 {{ tag.percentage.toFixed(1) }}%</span>
-                      <span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30 text-[#007AFF]">日均 {{ formatMinutes(tag.dailyAverage) }}</span>
-                    </div>
-                    
-                    <div v-if="tag.subTags.length > 0" class="pl-7 space-y-3 pt-4 border-t border-border-main/50">
-                       <div v-for="sub in tag.subTags" :key="sub.id" class="flex justify-between items-center group gap-4">
-                          <span class="text-xs text-text-main font-bold w-16 truncate">{{ getTagName(sub.id) }}</span>
-                          <div class="flex items-center gap-3 flex-1 justify-end">
-                             <div class="w-full max-w-50 h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
-                                <div class="h-full rounded-full opacity-80" :style="{ width: sub.percentage + '%', backgroundColor: getTagColor(tag.id) }"></div>
-                             </div>
-                             <span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-10 text-right">{{ formatMinutes(sub.total) }}</span>
-                          </div>
-                       </div>
-                    </div>
-                 </div>
-                 
-                 <div v-if="dashboardStats.mainTags.length === 0" class="text-center py-20">
-                   <BarChart2 :size="48" class="mx-auto mb-4 text-text-sec opacity-20" />
-                   <div class="text-text-sec font-bold">该时间范围内没有记录数据</div>
-                 </div>
-              </div>
-            </div>
-          </div>
+          <Preview v-show="viewMode === 'preview'" />
+          <Dashboard v-if="viewMode === 'dashboard'" />
         </div>
       </div>
     </div>
 
     <!-- Modals -->
+    <TagManager v-if="isTagManagerOpen" @close="isTagManagerOpen = false" />
+    <ExportModal v-if="isExportModalOpen" @close="isExportModalOpen = false" />
+    <SettingsModal v-if="isSettingsOpen" @close="isSettingsOpen = false" />
+    
+    <!-- Event Modal -->
     <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-bg-card 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; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div>
+        <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="flex gap-3 items-end">
-            <!-- Start Time Custom Picker -->
             <div ref="startTimePickerRef" class="flex-1 relative">
               <label class="text-[10px] font-bold text-text-sec block mb-1">开始时间</label>
-              <button @click="openStartTimePicker" 
-                class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30">
-                <span class="text-sm font-bold leading-none">{{ startTimeInput }}</span>
-              </button>
+              <button @click="isStartTimeOpen = !isStartTimeOpen; isEndTimeOpen = false" class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30"><span class="text-sm font-bold leading-none">{{ logicalMinutesToTime(editingEvent.start_minute) }}</span></button>
               <div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
                  <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
-                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1 text-center border-b border-border-main/30">时</div>
-                    <button v-for="h in 24" :key="h" 
-                      @click="editingEvent.start_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.start_minute % 60).padStart(2,'0')}`)"
-                      class="py-2 text-[11px] rounded-lg transition-colors w-full text-center flex items-center justify-center"
-                      :class="Math.floor((editingEvent.start_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'"
-                    >{{ String((h-1+3)%24).padStart(2,'0') }}</button>
+                    <button v-for="h in 24" :key="h" @click="editingEvent.start_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.start_minute % 60).padStart(2,'0')}`)" class="py-2 text-[11px] rounded-lg transition-colors w-full text-center" :class="Math.floor((editingEvent.start_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String((h-1+3)%24).padStart(2,'0') }}</button>
                  </div>
-                 <div class="w-px bg-bg-hover my-2"></div>
                  <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
-                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1 text-center border-b border-border-main/30">分</div>
-                    <button v-for="m in 60" :key="m" 
-                      @click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false"
-                      class="py-2 text-[11px] rounded-lg transition-colors w-full text-center flex items-center justify-center"
-                      :class="editingEvent.start_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'"
-                    >{{ String(m-1).padStart(2,'0') }}</button>
+                    <button v-for="m in 60" :key="m" @click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false" class="py-2 text-[11px] rounded-lg transition-colors w-full text-center" :class="editingEvent.start_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String(m-1).padStart(2,'0') }}</button>
                  </div>
               </div>
             </div>
-            <!-- Duration Badge -->
-            <div class="h-12 flex items-center justify-center">
-              <span class="text-[11px] font-bold text-text-sec bg-bg-input px-3 py-1.5 rounded-xl border border-border-main/50">{{ eventDurationFormatted }}</span>
-            </div>
-            <!-- End Time Custom Picker -->
+            <div class="h-12 flex items-center justify-center"><span class="text-[11px] font-bold text-text-sec bg-bg-input px-3 py-1.5 rounded-xl border border-border-main/50">{{ formatDuration(editingEvent.start_minute, editingEvent.end_minute) }}</span></div>
             <div ref="endTimePickerRef" class="flex-1 relative">
               <label class="text-[10px] font-bold text-text-sec block mb-1">结束时间</label>
-              <button @click="openEndTimePicker" 
-                class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30">
-                <span class="text-sm font-bold leading-none">{{ endTimeInput }}</span>
-              </button>
+              <button @click="isEndTimeOpen = !isEndTimeOpen; isStartTimeOpen = false" class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30"><span class="text-sm font-bold leading-none">{{ logicalMinutesToTime(editingEvent.end_minute) }}</span></button>
               <div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
                  <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
-                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1">时</div>
-                    <button v-for="h in 24" :key="h" 
-                      @click="editingEvent.end_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.end_minute % 60).padStart(2,'0')}`)"
-                      class="py-2 text-xs rounded-lg transition-colors w-full text-center"
-                      :class="Math.floor((editingEvent.end_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'"
-                    >{{ String((h-1+3)%24).padStart(2,'0') }}</button>
+                    <button v-for="h in 24" :key="h" @click="editingEvent.end_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.end_minute % 60).padStart(2,'0')}`)" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="Math.floor((editingEvent.end_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String((h-1+3)%24).padStart(2,'0') }}</button>
                  </div>
-                 <div class="w-px bg-bg-hover my-2"></div>
                  <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
-                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1">分</div>
-                    <button v-for="m in 60" :key="m" 
-                      @click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1); isEndTimeOpen = false"
-                      class="py-2 text-xs rounded-lg transition-colors w-full text-center"
-                      :class="editingEvent.end_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'"
-                    >{{ String(m-1).padStart(2,'0') }}</button>
+                    <button v-for="m in 60" :key="m" @click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1); isEndTimeOpen = false" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="editingEvent.end_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String(m-1).padStart(2,'0') }}</button>
                  </div>
               </div>
             </div>
@@ -909,12 +358,7 @@ const handleExport = async () => {
             <div v-if="editingEvent.main_tag_id && getSubTags(editingEvent.main_tag_id).length" class="space-y-2"><label class="text-[10px] font-bold text-text-sec">副标签</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-[12px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-bg-input text-text-sec'">{{ sub.name }}</button></div>
             </div>
-            <textarea 
-              v-model="editingEvent.content" 
-              placeholder="记录具体内容..." 
-              @keydown.ctrl.enter="saveEvent"
-              class="w-full bg-bg-input rounded-2xl p-4 text-sm min-h-25 outline-none border border-transparent focus:bg-bg-card focus:border-border-main transition-all"
-            ></textarea>
+            <textarea v-model="editingEvent.content" placeholder="记录具体内容..." class="w-full bg-bg-input rounded-2xl p-4 text-sm min-h-25 outline-none border border-transparent focus:bg-bg-card focus:border-border-main transition-all"></textarea>
           </div>
           <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>
@@ -924,150 +368,13 @@ const handleExport = async () => {
       </div>
     </div>
 
-    <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-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
-        <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-hidden p-10 flex gap-10">
-          <div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
-            <div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
-              <div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-bg-input rounded-xl cursor-pointer">
-                <div class="flex items-center gap-3">
-                  <ChevronRight :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
-                  <div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
-                  <span class="font-bold">{{ mt.name }}</span>
-                </div>
-                <button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
-              </div>
-              <div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
-                <div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-bg-input 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-bg-input p-6 rounded-3xl space-y-4 h-fit">
-            <h3 class="font-bold text-xs text-text-sec uppercase">添加标签</h3>
-            <div class="space-y-1">
-              <label class="text-[10px] font-bold text-text-sec ml-1">标签名称</label>
-              <input v-model="newTagName" placeholder="输入名称..." class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
-            </div>
-            <div ref="tagSelectRef" class="space-y-1 relative">
-              <label class="text-[10px] font-bold text-text-sec ml-1">父级标签</label>
-              <button @click="isTagSelectOpen = !isTagSelectOpen" class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm text-left flex justify-between items-center border border-transparent focus:border-[#007AFF] transition-all">
-                <span>{{ getTagName(newTagParent) }}</span>
-                <ChevronDown :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" />
-              </button>
-              <div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-2xl shadow-xl border border-border-main z-60 overflow-hidden py-2 animate-in fade-in zoom-in-95 duration-200">
-                <div @click="newTagParent = null; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === null }">-- 无 --</div>
-                <div v-for="t in mainTags" :key="t.id" @click="newTagParent = t.id; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === t.id }">{{ t.name }}</div>
-              </div>
-            </div>
-            <div v-if="newTagParent === null" class="space-y-1">
-              <label class="text-[10px] font-bold text-text-sec ml-1">主题颜色</label>
-              <div 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 transition-all" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
-            </div>
-            <button @click="handleAddTag(newTagName, newTagParent, newTagColor); resetTagForm()" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-3 rounded-xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all">创建</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="isExportModalOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isExportModalOpen = false">
-      <div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl overflow-visible flex flex-col animate-in fade-in zoom-in duration-200">
-        <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">导出记录</h2><button @click="isExportModalOpen = false"><X :size="24" /></button></div>
-        <div class="p-10 space-y-8">
-          <div class="space-y-4">
-            <div class="space-y-2">
-              <label class="text-[10px] font-bold text-text-sec">日期范围</label>
-              <div class="flex gap-4 items-center">
-                <div ref="exportStartCalendarRef" class="relative flex-1">
-                  <button @click="isExportStartCalendarOpen = !isExportStartCalendarOpen; isExportEndCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
-                    <Calendar :size="16" class="absolute left-4 text-text-sec" />
-                    {{ exportStartDate }}
-                  </button>
-                  <div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
-                    <div class="flex items-center justify-between mb-4">
-                      <button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
-                      <span class="text-sm font-black">{{ exportStartMonth.getFullYear() }}年 {{ exportStartMonth.getMonth()+1 }}月</span>
-                      <button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
-                    </div>
-                    <div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
-                    <div class="grid grid-cols-7 gap-1">
-                      <div v-for="(date, i) in exportStartCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
-                        <button v-if="date" @click="selectExportStartDate(date)" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <span class="text-text-sec font-black text-xs">至</span>
-                <div ref="exportEndCalendarRef" class="relative flex-1">
-                  <button @click="isExportEndCalendarOpen = !isExportEndCalendarOpen; isExportStartCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
-                    <Calendar :size="16" class="absolute left-4 text-text-sec" />
-                    {{ exportEndDate }}
-                  </button>
-                  <div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
-                    <div class="flex items-center justify-between mb-4">
-                      <button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
-                      <span class="text-sm font-black">{{ exportEndMonth.getFullYear() }}年 {{ exportEndMonth.getMonth()+1 }}月</span>
-                      <button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
-                    </div>
-                    <div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
-                    <div class="grid grid-cols-7 gap-1">
-                      <div v-for="(date, i) in exportEndCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
-                        <button v-if="date" @click="selectExportEndDate(date)" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button @click="handleExport" :disabled="!exportStartDate || !exportEndDate" class="w-full bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">导出为 JSON</button>
-        </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-bg-card rounded-[40px] shadow-2xl w-full max-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-text-sec">截图保存位置</label><div class="flex gap-2"><input type="text" readonly :value="savePath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><button @click="selectFolder(); updateSettings()" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button></div></div>
-          <div class="space-y-3"><label class="text-xs font-bold text-text-sec">数据库文件</label><div class="flex gap-2"><input type="text" readonly :value="dbPath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><div class="flex gap-1"><button @click="selectDBFile().then(updateSettings)" title="打开现有" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile().then(updateSettings)" title="新建" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><Plus :size="18" /></button></div></div></div>
-          
-          <div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">主题设置</label></div>
-             <div class="flex bg-bg-input rounded-xl p-1 gap-1">
-                <button @click="theme = 'light'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'light' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">浅色</button>
-                <button @click="theme = 'dark'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'dark' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">深色</button>
-                <button @click="theme = 'system'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'system' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">跟随系统</button>
-             </div>
-          </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="60" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-bg-hover 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-bg-hover accent-[#007AFF]" /></div>
-        </div>
-      </div>
-    </div>
-
+    <!-- Fullscreen & Tooltip & Toast -->
     <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 v-if="hoveredEventDetails" 
-         class="fixed z-300 pointer-events-none bg-bg-card/90 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-4 w-64 animate-in fade-in zoom-in-95 duration-150"
-         :style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }">
-      <div class="flex items-center gap-2 mb-2">
-        <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTagColor(hoveredEventDetails.event.main_tag_id) }"></div>
-        <span class="font-bold text-sm text-text-main">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span>
-        <span v-if="hoveredEventDetails.event.sub_tag_id" class="text-[10px] font-bold text-text-sec bg-bg-input px-2 py-0.5 rounded-md border border-border-main/50">{{ getTagName(hoveredEventDetails.event.sub_tag_id) }}</span>
-      </div>
-      <div class="flex items-center justify-between text-[11px] font-bold text-text-sec mb-2.5">
-        <span>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span>
-        <span class="bg-bg-input px-1.5 py-0.5 rounded-lg border border-border-main/30 text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span>
-      </div>
-      <div v-if="hoveredEventDetails.event.content" class="text-xs text-text-main leading-relaxed wrap-break-words whitespace-pre-wrap">
-        {{ hoveredEventDetails.event.content }}
-      </div>
+    <div v-if="hoveredEventDetails" class="fixed z-300 pointer-events-none bg-bg-card/90 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-4 w-64" :style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }">
+      <div class="flex items-center gap-2 mb-2"><div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTagColor(hoveredEventDetails.event.main_tag_id) }"></div><span class="font-bold text-sm text-text-main">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span></div>
+      <div class="flex items-center justify-between text-[11px] font-bold text-text-sec mb-2.5"><span>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span><span class="bg-bg-input px-1.5 py-0.5 rounded-lg text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span></div>
+      <div v-if="hoveredEventDetails.event.content" class="text-xs text-text-main leading-relaxed wrap-break-words whitespace-pre-wrap">{{ hoveredEventDetails.event.content }}</div>
     </div>
-
     <div v-if="toast.visible" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-300 animate-in fade-in slide-in-from-bottom-4 duration-300">
       <div class="px-6 py-3 rounded-2xl shadow-2xl backdrop-blur-md flex items-center gap-3 border border-white/20" :class="toast.type === 'error' ? 'bg-[#FF3B30] text-white' : 'bg-bg-card/90 text-text-main'">
         <div v-if="toast.type === 'error'" class="w-5 h-5 rounded-full border-2 border-white flex items-center justify-center text-[12px] font-black">!</div>
diff --git a/src/components/Setup.vue b/src/components/Setup.vue
new file mode 100644
index 0000000..835122e
--- /dev/null
+++ b/src/components/Setup.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import { open, save } from "@tauri-apps/plugin-dialog";
+import { Settings, FolderOpen, Plus } from "lucide-vue-next";
+import { savePath, dbPath, isSetupComplete, loadTags, loadEvents } from "../store";
+import { load as loadStore } from "@tauri-apps/plugin-store";
+
+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) {
+    const store = await loadStore("config.json");
+    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 loadTags(); await loadEvents();
+  }
+};
+</script>
+
+<template>
+  <div class="flex-1 flex items-center justify-center p-10 bg-bg-main h-screen">
+    <div class="bg-bg-card p-12 rounded-4xl shadow-2xl max-w-lg text-center border border-border-main">
+      <Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
+      <h1 class="text-3xl font-bold mb-4">初始化设置</h1>
+      <div class="space-y-6 text-left mb-10">
+        <div class="space-y-2">
+          <label class="text-xs font-bold text-text-sec">截图保存目录</label>
+          <div class="flex gap-2">
+            <input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
+            <button @click="selectFolder" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button>
+          </div>
+        </div>
+        <div class="space-y-2">
+          <label class="text-xs font-bold text-text-sec">数据库文件</label>
+          <div class="flex gap-2">
+            <input type="text" readonly :value="dbPath" placeholder="请选择或创建数据库文件..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
+            <div class="flex gap-1">
+              <button @click="selectDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
+              <button @click="createDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :size="18" /></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button @click="completeSetup" :disabled="!savePath || !dbPath" class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold w-full disabled:opacity-50 transition-all active:scale-95">开始使用</button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/modals/ExportModal.vue b/src/components/modals/ExportModal.vue
new file mode 100644
index 0000000..f1f22ba
--- /dev/null
+++ b/src/components/modals/ExportModal.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { save } from "@tauri-apps/plugin-dialog";
+import { X, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
+import { currentDate, showToast, getTagName, logicalMinutesToTime } from "../../store";
+import { DBEvent } from "../../types";
+
+defineEmits(['close']);
+
+const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
+const exportEndDate = ref(currentDate.value);
+const exportStartMonth = ref(new Date(exportStartDate.value));
+const exportEndMonth = ref(new Date(exportEndDate.value));
+const isExportStartCalendarOpen = ref(false);
+const isExportEndCalendarOpen = ref(false);
+
+const exportStartCalendarDays = computed(() => {
+  const y = exportStartMonth.value.getFullYear();
+  const m = exportStartMonth.value.getMonth();
+  const firstDay = new Date(y, m, 1).getDay();
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const days = [];
+  const padding = (firstDay + 6) % 7;
+  for (let i = 0; i < padding; i++) days.push(null);
+  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
+  return days;
+});
+
+const exportEndCalendarDays = computed(() => {
+  const y = exportEndMonth.value.getFullYear();
+  const m = exportEndMonth.value.getMonth();
+  const firstDay = new Date(y, m, 1).getDay();
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const days = [];
+  const padding = (firstDay + 6) % 7;
+  for (let i = 0; i < padding; i++) days.push(null);
+  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
+  return days;
+});
+
+const handleExport = async () => {
+  try {
+    const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
+    if (events.length === 0) {
+      showToast("所选范围内没有找到记录", "error");
+      return;
+    }
+    const savePath = await save({
+      filters: [{ name: "JSON 文件", extensions: ["json"] }],
+      defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
+    });
+    if (savePath) {
+      const exportData = events.map(e => ({
+        date: e.date,
+        start_time: logicalMinutesToTime(e.start_minute),
+        end_time: logicalMinutesToTime(e.end_minute),
+        main_tag: getTagName(e.main_tag_id),
+        sub_tag: getTagName(e.sub_tag_id),
+        content: e.content
+      }));
+      await invoke("write_file", { path: savePath, content: JSON.stringify(exportData, null, 2) });
+      showToast("导出成功");
+    }
+  } catch (e) {
+    showToast("导出失败: " + e, "error");
+  }
+};
+</script>
+
+<template>
+  <div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
+    <div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl overflow-visible flex flex-col animate-in fade-in zoom-in duration-200">
+      <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">导出记录</h2><button @click="$emit('close')"><X :size="24" /></button></div>
+      <div class="p-10 space-y-8">
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <label class="text-[10px] font-bold text-text-sec">日期范围</label>
+            <div class="flex gap-4 items-center">
+              <div class="relative flex-1">
+                <button @click="isExportStartCalendarOpen = !isExportStartCalendarOpen; isExportEndCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
+                  <Calendar :size="16" class="absolute left-4 text-text-sec" />
+                  {{ exportStartDate }}
+                </button>
+                <div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
+                  <div class="flex items-center justify-between mb-4">
+                    <button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
+                    <span class="text-sm font-black">{{ exportStartMonth.getFullYear() }}年 {{ exportStartMonth.getMonth()+1 }}月</span>
+                    <button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
+                  </div>
+                  <div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
+                  <div class="grid grid-cols-7 gap-1">
+                    <div v-for="(date, i) in exportStartCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
+                      <button v-if="date" @click="exportStartDate = date.toLocaleDateString('sv'); isExportStartCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <span class="text-text-sec font-black text-xs">至</span>
+              <div class="relative flex-1">
+                <button @click="isExportEndCalendarOpen = !isExportEndCalendarOpen; isExportStartCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
+                  <Calendar :size="16" class="absolute left-4 text-text-sec" />
+                  {{ exportEndDate }}
+                </button>
+                <div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
+                  <div class="flex items-center justify-between mb-4">
+                    <button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
+                    <span class="text-sm font-black">{{ exportEndMonth.getFullYear() }}年 {{ exportEndMonth.getMonth()+1 }}月</span>
+                    <button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
+                  </div>
+                  <div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
+                  <div class="grid grid-cols-7 gap-1">
+                    <div v-for="(date, i) in exportEndCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
+                      <button v-if="date" @click="exportEndDate = date.toLocaleDateString('sv'); isExportEndCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button @click="handleExport" :disabled="!exportStartDate || !exportEndDate" class="w-full bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">导出为 JSON</button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/modals/SettingsModal.vue b/src/components/modals/SettingsModal.vue
new file mode 100644
index 0000000..6a51e9a
--- /dev/null
+++ b/src/components/modals/SettingsModal.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import { open, save } from "@tauri-apps/plugin-dialog";
+import { X, FolderOpen, Plus } from "lucide-vue-next";
+import { savePath, dbPath, theme, captureInterval, retainDays } from "../../store";
+import { load as loadStore } from "@tauri-apps/plugin-store";
+
+defineEmits(['close']);
+
+const updateSettings = async () => {
+  const store = await loadStore("config.json");
+  await store.set("savePath", savePath.value);
+  await store.set("dbPath", dbPath.value);
+  await store.set("retainDays", retainDays.value);
+  await store.set("captureInterval", captureInterval.value); 
+  await store.set("theme", theme.value);
+  await store.save();
+  await invoke("update_db_path", { path: dbPath.value });
+  await invoke("update_interval", { seconds: captureInterval.value });
+  
+  if (theme.value === 'dark') document.documentElement.classList.add('dark');
+  else if (theme.value === 'light') document.documentElement.classList.remove('dark');
+  else {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+  }
+};
+
+const selectFolder = async () => { 
+  const s = await open({ directory: true }); 
+  if (s) { savePath.value = s as string; await updateSettings(); }
+};
+
+const selectDBFile = async () => { 
+  const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] }); 
+  if (s) { dbPath.value = s as string; await updateSettings(); }
+};
+
+const createDBFile = async () => { 
+  const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] }); 
+  if (s) { dbPath.value = s as string; await updateSettings(); }
+};
+</script>
+
+<template>
+  <div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
+    <div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-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="$emit('close')"><X :size="24" /></button></div>
+      <div class="p-10 space-y-8">
+        <div class="space-y-3"><label class="text-xs font-bold text-text-sec">截图保存位置</label><div class="flex gap-2"><input type="text" readonly :value="savePath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><button @click="selectFolder" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button></div></div>
+        <div class="space-y-3"><label class="text-xs font-bold text-text-sec">数据库文件</label><div class="flex gap-2"><input type="text" readonly :value="dbPath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><div class="flex gap-1"><button @click="selectDBFile" title="打开现有" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile" title="新建" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><Plus :size="18" /></button></div></div></div>
+        
+        <div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">主题设置</label></div>
+           <div class="flex bg-bg-input rounded-xl p-1 gap-1">
+              <button @click="theme = 'light'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'light' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">浅色</button>
+              <button @click="theme = 'dark'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'dark' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">深色</button>
+              <button @click="theme = 'system'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'system' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">跟随系统</button>
+           </div>
+        </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="60" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-bg-hover 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-bg-hover accent-[#007AFF]" /></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/modals/TagManager.vue b/src/components/modals/TagManager.vue
new file mode 100644
index 0000000..b6f0dcf
--- /dev/null
+++ b/src/components/modals/TagManager.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { X, Trash2, ChevronRight, ChevronDown } from "lucide-vue-next";
+import { mainTags, getSubTags, getTagName, showToast, loadTags } from "../../store";
+
+defineEmits(['close']);
+
+const expandedMainTags = ref<number[]>([]);
+const toggleMainTag = (id: number) => {
+  const index = expandedMainTags.value.indexOf(id);
+  if (index > -1) expandedMainTags.value.splice(index, 1);
+  else expandedMainTags.value.push(id);
+};
+
+const isTagSelectOpen = ref(false);
+const newTagName = ref("");
+const newTagParent = ref<number | null>(null);
+const newTagColor = ref("#007AFF");
+
+const handleAddTag = async () => {
+  try {
+    await invoke("add_tag", { name: newTagName.value, parentId: newTagParent.value, color: newTagColor.value });
+    await loadTags();
+    showToast("标签添加成功");
+    newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF";
+  } catch (e) {
+    showToast("添加失败: " + e, "error");
+  }
+};
+
+const handleDeleteTag = async (id: number) => {
+  try {
+    await invoke("delete_tag", { id });
+    await loadTags();
+    showToast("标签已删除");
+  } catch (e: any) {
+    if (e.toString().includes("FOREIGN KEY")) {
+      showToast("该标签正在被使用，无法删除", "error");
+    } else {
+      showToast("删除失败: " + e, "error");
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
+    <div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
+      <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">标签管理</h2><button @click="$emit('close')"><X :size="24" /></button></div>
+      <div class="flex-1 overflow-hidden p-10 flex gap-10">
+        <div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
+          <div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
+            <div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-bg-input rounded-xl cursor-pointer">
+              <div class="flex items-center gap-3">
+                <ChevronRight :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
+                <div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
+                <span class="font-bold">{{ mt.name }}</span>
+              </div>
+              <button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
+            </div>
+            <div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
+              <div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-bg-input 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-bg-input p-6 rounded-3xl space-y-4 h-fit">
+          <h3 class="font-bold text-xs text-text-sec uppercase">添加标签</h3>
+          <div class="space-y-1">
+            <label class="text-[10px] font-bold text-text-sec ml-1">标签名称</label>
+            <input v-model="newTagName" placeholder="输入名称..." class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
+          </div>
+          <div class="space-y-1 relative">
+            <label class="text-[10px] font-bold text-text-sec ml-1">父级标签</label>
+            <button @click="isTagSelectOpen = !isTagSelectOpen" class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm text-left flex justify-between items-center border border-transparent focus:border-[#007AFF] transition-all">
+              <span>{{ getTagName(newTagParent) }}</span>
+              <ChevronDown :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" />
+            </button>
+            <div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-2xl shadow-xl border border-border-main z-60 overflow-hidden py-2 animate-in fade-in zoom-in-95 duration-200">
+              <div @click="newTagParent = null; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === null }">-- 无 --</div>
+              <div v-for="t in mainTags" :key="t.id" @click="newTagParent = t.id; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === t.id }">{{ t.name }}</div>
+            </div>
+          </div>
+          <div v-if="newTagParent === null" class="space-y-1">
+            <label class="text-[10px] font-bold text-text-sec ml-1">主题颜色</label>
+            <div 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 transition-all" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
+          </div>
+          <button @click="handleAddTag" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-3 rounded-xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all">创建</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/views/Dashboard.vue b/src/components/views/Dashboard.vue
new file mode 100644
index 0000000..9793424
--- /dev/null
+++ b/src/components/views/Dashboard.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { BarChart2 } from "lucide-vue-next";
+import { 
+  dashboardStats, dashboardRange, dailyAverageMode, 
+  formatMinutes, getTagColor, getTagName 
+} from "../../store/dashboardStore";
+</script>
+
+<template>
+  <div class="absolute inset-0 overflow-y-auto no-scrollbar p-10 bg-bg-main animate-in fade-in zoom-in-95 duration-200">
+    <div class="max-w-3xl mx-auto">
+      <div class="flex justify-between items-center mb-10">
+         <div class="flex bg-bg-input rounded-xl p-1.5 gap-1 border border-border-main/50 shadow-inner">
+            <button @click="dashboardRange = 'today'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === 'today' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">今日</button>
+            <button @click="dashboardRange = '7days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '7days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">近 7 天</button>
+            <button @click="dashboardRange = '30days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '30days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">近 30 天</button>
+         </div>
+         <div v-if="dashboardRange !== 'today'" class="flex bg-bg-input rounded-xl p-1 gap-1 border border-border-main/50 shadow-inner">
+            <button @click="dailyAverageMode = 'natural'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'natural' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">自然天数 ({{dashboardStats.naturalDays}}天)</button>
+            <button @click="dailyAverageMode = 'recorded'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'recorded' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">记录天数 ({{dashboardStats.recordedDays}}天)</button>
+         </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-6 mb-10">
+         <div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
+            <div class="text-xs font-bold text-text-sec mb-2">总记录时长</div>
+            <div class="text-4xl font-black text-text-main">{{ formatMinutes(dashboardStats.totalMinutes) }}</div>
+         </div>
+         <div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
+            <div class="text-xs font-bold text-text-sec mb-2">日均时长</div>
+            <div class="text-4xl font-black text-[#007AFF]">{{ formatMinutes(dashboardStats.dailyAverage) }}</div>
+         </div>
+      </div>
+
+      <div class="mb-12 bg-bg-card border border-border-main p-6 rounded-3xl shadow-sm">
+         <h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">占比总览</h3>
+         <div class="h-6 w-full bg-bg-input rounded-full overflow-hidden flex shadow-inner mb-4 border border-border-main/30">
+            <div v-for="tag in dashboardStats.mainTags" :key="tag.id" :style="{ width: tag.percentage + '%', backgroundColor: getTagColor(tag.id) }" class="h-full first:rounded-l-full last:rounded-r-full border-r border-bg-main/20 last:border-0 transition-all duration-500 hover:brightness-110 cursor-pointer" :title="getTagName(tag.id) + ' ' + tag.percentage.toFixed(1) + '%'"></div>
+         </div>
+         <div class="flex flex-wrap gap-4 px-2">
+            <div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="flex items-center gap-2">
+               <div class="w-3 h-3 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
+               <span class="text-xs font-bold text-text-sec">{{ getTagName(tag.id) }} <span class="text-text-main ml-1">{{ tag.percentage.toFixed(0) }}%</span></span>
+            </div>
+         </div>
+      </div>
+
+      <div class="space-y-4">
+         <h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">时间分布明细</h3>
+         <div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="bg-bg-card border border-border-main rounded-3xl p-5 shadow-sm transition-all hover:border-border-main/80 hover:shadow-md">
+            <div class="flex justify-between items-center mb-1">
+               <div class="flex items-center gap-3">
+                  <div class="w-4 h-4 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
+                  <span class="font-bold text-lg">{{ getTagName(tag.id) }}</span>
+               </div>
+               <div class="text-right">
+                  <div class="font-black text-xl">{{ formatMinutes(tag.total) }}</div>
+               </div>
+            </div>
+            <div class="flex items-center gap-2 mb-4 pl-7 text-[11px] font-bold text-text-sec">
+              <span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30">占比 {{ tag.percentage.toFixed(1) }}%</span>
+              <span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30 text-[#007AFF]">日均 {{ formatMinutes(tag.dailyAverage) }}</span>
+            </div>
+            
+            <div v-if="tag.subTags.length > 0" class="pl-7 space-y-3 pt-4 border-t border-border-main/50">
+               <div v-for="sub in tag.subTags" :key="sub.id" class="flex justify-between items-center group gap-4">
+                  <span class="text-xs text-text-main font-bold w-16 truncate">{{ getTagName(sub.id) }}</span>
+                  <div class="flex items-center gap-3 flex-1 justify-end">
+                     <div class="w-full max-w-50 h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
+                        <div class="h-full rounded-full opacity-80" :style="{ width: sub.percentage + '%', backgroundColor: getTagColor(tag.id) }"></div>
+                     </div>
+                     <span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-10 text-right">{{ formatMinutes(sub.total) }}</span>
+                  </div>
+               </div>
+            </div>
+         </div>
+         
+         <div v-if="dashboardStats.mainTags.length === 0" class="text-center py-20">
+           <BarChart2 :size="48" class="mx-auto mb-4 text-text-sec opacity-20" />
+           <div class="text-text-sec font-bold">该时间范围内没有记录数据</div>
+         </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/views/Preview.vue b/src/components/views/Preview.vue
new file mode 100644
index 0000000..5723952
--- /dev/null
+++ b/src/components/views/Preview.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Maximize2 } from "lucide-vue-next";
+import { previewSrc } from "../../store";
+</script>
+
+<template>
+  <div class="absolute inset-0 flex items-center justify-center p-12 bg-bg-input/30">
+    <img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-border-main/50" />
+    <div v-else class="text-text-sec text-center">
+      <Maximize2 :size="48" class="mx-auto mb-4 opacity-20" />
+      <p>在时间轴上滑动或拖拽以记录</p>
+    </div>
+  </div>
+</template>
diff --git a/src/store/dashboardStore.ts b/src/store/dashboardStore.ts
new file mode 100644
index 0000000..6d2634d
--- /dev/null
+++ b/src/store/dashboardStore.ts
@@ -0,0 +1,75 @@
+import { ref, computed, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { DBEvent } from "../types";
+import { currentDate, getTagColor, getTagName, formatMinutes } from "./index";
+
+// Re-export for easier access in Dashboard component
+export { getTagColor, getTagName, formatMinutes };
+
+export const dashboardRange = ref<'today' | '7days' | '30days'>('today');
+export const dashboardStartDate = ref(currentDate.value);
+export const dashboardEndDate = ref(currentDate.value);
+export const dashboardEvents = ref<DBEvent[]>([]);
+export const dailyAverageMode = ref<'natural' | 'recorded'>('natural');
+
+export const loadDashboardEvents = async () => {
+  dashboardEvents.value = await invoke("get_events_range", { startDate: dashboardStartDate.value, endDate: dashboardEndDate.value });
+};
+
+watch([dashboardRange, currentDate], () => {
+  const end = new Date(currentDate.value);
+  let start = new Date(currentDate.value);
+  if (dashboardRange.value === '7days') start.setDate(end.getDate() - 6);
+  else if (dashboardRange.value === '30days') start.setDate(end.getDate() - 29);
+  dashboardStartDate.value = start.toLocaleDateString('sv');
+  dashboardEndDate.value = end.toLocaleDateString('sv');
+  loadDashboardEvents();
+}, { immediate: true });
+
+export const dashboardStats = computed(() => {
+  let totalMinutes = 0;
+  const mainTagMap = new Map<number, { total: number, subTags: Map<number, number> }>();
+  const uniqueDays = new Set<string>();
+
+  dashboardEvents.value.forEach(ev => {
+    let diff = ev.end_minute - ev.start_minute;
+    if (diff < 0) diff += 1440;
+    totalMinutes += diff;
+    uniqueDays.add(ev.date);
+
+    if (!mainTagMap.has(ev.main_tag_id)) {
+      mainTagMap.set(ev.main_tag_id, { total: 0, subTags: new Map() });
+    }
+    const mainStat = mainTagMap.get(ev.main_tag_id)!;
+    mainStat.total += diff;
+
+    if (ev.sub_tag_id) {
+      const subTotal = mainStat.subTags.get(ev.sub_tag_id) || 0;
+      mainStat.subTags.set(ev.sub_tag_id, subTotal + diff);
+    }
+  });
+
+  const start = new Date(dashboardStartDate.value);
+  const end = new Date(dashboardEndDate.value);
+  const naturalDays = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 86400000) + 1);
+  const recordedDays = Math.max(1, uniqueDays.size);
+  const daysCount = dailyAverageMode.value === 'natural' ? naturalDays : recordedDays;
+
+  const mainTagsList = Array.from(mainTagMap.entries()).map(([id, stat]) => {
+    const subTagsList = Array.from(stat.subTags.entries()).map(([subId, subTotal]) => ({
+      id: subId,
+      total: subTotal,
+      percentage: stat.total > 0 ? (subTotal / stat.total) * 100 : 0
+    })).sort((a, b) => b.total - a.total);
+
+    return {
+      id,
+      total: stat.total,
+      dailyAverage: stat.total / daysCount,
+      percentage: totalMinutes > 0 ? (stat.total / totalMinutes) * 100 : 0,
+      subTags: subTagsList
+    };
+  }).sort((a, b) => b.total - a.total);
+
+  return { totalMinutes, dailyAverage: totalMinutes / daysCount, mainTags: mainTagsList, naturalDays, recordedDays, daysCount };
+});
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..730b9b1
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,75 @@
+import { ref, computed } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { Tag, DBEvent, TimelineItem, Toast } from "../types";
+
+export const TIME_OFFSET_MINUTES = 180;
+export const TOTAL_MINUTES = 1440;
+
+// --- Config State ---
+export const isSetupComplete = ref(false);
+export const savePath = ref("");
+export const dbPath = ref("");
+export const retainDays = ref(30);
+export const captureInterval = ref(60);
+export const timelineZoom = ref(1.5);
+export const theme = ref("system");
+
+// --- Global UI State ---
+export const isPaused = ref(false);
+export const currentDate = ref(new Date(Date.now() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv'));
+export const viewMode = ref<'preview' | 'dashboard'>('preview');
+export const isFullscreen = ref(false);
+export const previewSrc = ref("");
+export const selectedImage = ref<TimelineItem | null>(null);
+export const lockedImage = ref<TimelineItem | null>(null);
+
+// --- Data State ---
+export const tags = ref<Tag[]>([]);
+export const dayEvents = ref<DBEvent[]>([]);
+export const timelineImages = ref<TimelineItem[]>([]);
+
+// --- Global Toast ---
+export const toast = ref<Toast>({ message: "", type: "success", visible: false });
+export const showToast = (message: string, type: "success" | "error" = "success") => {
+  toast.value = { message, type, visible: true };
+  setTimeout(() => { toast.value.visible = false; }, 3000);
+};
+
+// --- Computed Helpers ---
+export const mainTags = computed(() => tags.value.filter(t => t.parent_id === null));
+export const getSubTags = (parentId: number) => tags.value.filter(t => t.parent_id === parentId);
+export const getTagColor = (tagId: number) => tags.value.find(t => t.id === tagId)?.color || "#007AFF";
+export const getTagName = (tagId: number | null) => tags.value.find(t => t.id === tagId)?.name || "-- 无 --";
+
+// --- Time Helper Functions ---
+export 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')}`;
+};
+
+export const logicalMinutesFromTime = (timeStr: string) => {
+  const [h, m] = timeStr.split(":").map(Number);
+  let total = h * 60 + m;
+  if (h < 3) total += 1440;
+  return total - TIME_OFFSET_MINUTES;
+};
+
+export const formatDuration = (start: number, end: number) => {
+  let diff = end - start;
+  if (diff < 0) diff += 1440;
+  const h = Math.floor(diff / 60);
+  const m = diff % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+};
+
+export const formatMinutes = (mins: number) => {
+  const h = Math.floor(mins / 60);
+  const m = Math.floor(mins % 60);
+  if (h === 0) return `${m}m`;
+  return `${h}h ${m}m`;
+};
+
+// --- Shared Actions ---
+export const loadTags = async () => { tags.value = await invoke("get_tags"); };
+export const loadEvents = async () => { dayEvents.value = await invoke("get_events", { date: currentDate.value }); };
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..c783646
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,28 @@
+export interface Tag {
+  id: number;
+  name: string;
+  parent_id: number | null;
+  color: string;
+}
+
+export interface DBEvent {
+  id: number;
+  date: string;
+  start_minute: number;
+  end_minute: number;
+  main_tag_id: number;
+  sub_tag_id: number | null;
+  content: string;
+}
+
+export interface TimelineItem {
+  time: string;
+  path: string;
+  isNextDay?: boolean;
+}
+
+export interface Toast {
+  message: string;
+  type: "success" | "error";
+  visible: boolean;
+}