diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 5df899b..826c26f 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -673,6 +673,7 @@ dependencies = [
  "base64 0.22.1",
  "chrono",
  "image",
+ "rusqlite",
  "serde",
  "serde_json",
  "tauri",
@@ -1078,7 +1079,7 @@ version = "0.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ab8ecd87370524b461f8557c119c405552c396ed91fc0a8eec68679eab26f94a"
 dependencies = [
- "libloading 0.7.4",
+ "libloading 0.8.9",
 ]
 
 [[package]]
@@ -1337,6 +1338,18 @@ dependencies = [
  "zune-inflate",
 ]
 
+[[package]]
+name = "fallible-iterator"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2acce4a10f12dc2fb14a218589d4f1f62ef011b2d0cc4b3cb1bba8e94da14649"
+
+[[package]]
+name = "fallible-streaming-iterator"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7360491ce676a36bf9bb3c56c1aa791658183a54d2744120f27285738d90465a"
+
 [[package]]
 name = "fastrand"
 version = "2.3.0"
@@ -1944,6 +1957,18 @@ name = "hashbrown"
 version = "0.16.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
+dependencies = [
+ "foldhash 0.2.0",
+]
+
+[[package]]
+name = "hashlink"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea0b22561a9c04a7cb1a302c013e0259cd3b4bb619f145b32f72b8b4bcbed230"
+dependencies = [
+ "hashbrown 0.16.1",
+]
 
 [[package]]
 name = "heck"
@@ -2627,6 +2652,17 @@ dependencies = [
  "system-deps 7.0.7",
 ]
 
+[[package]]
+name = "libsqlite3-sys"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f111c8c41e7c61a49cd34e44c7619462967221a6443b0ec299e0ac30cfb9b1"
+dependencies = [
+ "cc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "libwayshot-xcap"
 version = "0.3.2"
@@ -4234,6 +4270,31 @@ version = "0.8.53"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "47b34b781b31e5d73e9fbc8689c70551fd1ade9a19e3e28cfec8580a79290cc4"
 
+[[package]]
+name = "rsqlite-vfs"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8a1f2315036ef6b1fbacd1972e8ee7688030b0a2121edfc2a6550febd41574d"
+dependencies = [
+ "hashbrown 0.16.1",
+ "thiserror 2.0.18",
+]
+
+[[package]]
+name = "rusqlite"
+version = "0.39.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0d2b0146dd9661bf67bb107c0bb2a55064d556eeb3fc314151b957f313bcd4e"
+dependencies = [
+ "bitflags 2.11.0",
+ "fallible-iterator",
+ "fallible-streaming-iterator",
+ "hashlink",
+ "libsqlite3-sys",
+ "smallvec",
+ "sqlite-wasm-rs",
+]
+
 [[package]]
 name = "rustc-hash"
 version = "2.1.1"
@@ -4691,6 +4752,18 @@ dependencies = [
  "system-deps 6.2.2",
 ]
 
+[[package]]
+name = "sqlite-wasm-rs"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f4206ed3a67690b9c29b77d728f6acc3ce78f16bf846d83c94f76400320181b"
+dependencies = [
+ "cc",
+ "js-sys",
+ "rsqlite-vfs",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "stable_deref_trait"
 version = "1.2.1"
@@ -5741,6 +5814,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "vcpkg"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
+
 [[package]]
 name = "version-compare"
 version = "0.2.1"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 8aa8f2a..c642475 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -31,6 +31,7 @@ chrono = "0.4.44"
 tokio = { version = "1.50.0", features = ["rt-multi-thread", "macros", "time"] }
 anyhow = "1.0.102"
 base64 = "0.22.1"
+rusqlite = { version = "0.39.0", features = ["bundled"] }
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-autostart = "2"
diff --git a/src-tauri/src/db.rs b/src-tauri/src/db.rs
new file mode 100644
index 0000000..094120a
--- /dev/null
+++ b/src-tauri/src/db.rs
@@ -0,0 +1,135 @@
+use rusqlite::{params, Connection};
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct Tag {
+    pub id: i64,
+    pub name: String,
+    pub parent_id: Option<i64>,
+    pub color: String,
+}
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct Event {
+    pub id: i64,
+    pub date: String,
+    pub start_minute: i32,
+    pub end_minute: i32,
+    pub main_tag_id: i64,
+    pub sub_tag_id: Option<i64>,
+    pub content: String,
+}
+
+pub fn init_db(path: &str) -> anyhow::Result<()> {
+    let conn = Connection::open(path)?;
+    
+    conn.execute(
+        "CREATE TABLE IF NOT EXISTS tags (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT NOT NULL,
+            parent_id INTEGER,
+            color TEXT NOT NULL,
+            FOREIGN KEY(parent_id) REFERENCES tags(id)
+        )",
+        [],
+    )?;
+
+    conn.execute(
+        "CREATE TABLE IF NOT EXISTS events (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            date TEXT NOT NULL,
+            start_minute INTEGER NOT NULL,
+            end_minute INTEGER NOT NULL,
+            main_tag_id INTEGER NOT NULL,
+            sub_tag_id INTEGER,
+            content TEXT,
+            FOREIGN KEY(main_tag_id) REFERENCES tags(id),
+            FOREIGN KEY(sub_tag_id) REFERENCES tags(id)
+        )",
+        [],
+    )?;
+
+    Ok(())
+}
+
+pub fn get_tags(path: &str) -> anyhow::Result<Vec<Tag>> {
+    let conn = Connection::open(path)?;
+    let mut stmt = conn.prepare("SELECT id, name, parent_id, color FROM tags")?;
+    let tag_iter = stmt.query_map([], |row| {
+        Ok(Tag {
+            id: row.get(0)?,
+            name: row.get(1)?,
+            parent_id: row.get(2)?,
+            color: row.get(3)?,
+        })
+    })?;
+
+    let mut results = Vec::new();
+    for tag in tag_iter {
+        results.push(tag?);
+    }
+    Ok(results)
+}
+
+pub fn add_tag(path: &str, name: &str, parent_id: Option<i64>, color: &str) -> anyhow::Result<i64> {
+    let conn = Connection::open(path)?;
+    conn.execute(
+        "INSERT INTO tags (name, parent_id, color) VALUES (?1, ?2, ?3)",
+        params![name, parent_id, color],
+    )?;
+    Ok(conn.last_insert_rowid())
+}
+
+pub fn delete_tag(path: &str, id: i64) -> anyhow::Result<()> {
+    let conn = Connection::open(path)?;
+    // Also delete child tags
+    conn.execute("DELETE FROM tags WHERE parent_id = ?1", params![id])?;
+    conn.execute("DELETE FROM tags WHERE id = ?1", params![id])?;
+    Ok(())
+}
+
+pub fn get_events(path: &str, date: &str) -> anyhow::Result<Vec<Event>> {
+    let conn = Connection::open(path)?;
+    let mut stmt = conn.prepare("SELECT id, date, start_minute, end_minute, main_tag_id, sub_tag_id, content FROM events WHERE date = ?1")?;
+    let event_iter = stmt.query_map(params![date], |row| {
+        Ok(Event {
+            id: row.get(0)?,
+            date: row.get(1)?,
+            start_minute: row.get(2)?,
+            end_minute: row.get(3)?,
+            main_tag_id: row.get(4)?,
+            sub_tag_id: row.get(5)?,
+            content: row.get(6)?,
+        })
+    })?;
+
+    let mut results = Vec::new();
+    for event in event_iter {
+        results.push(event?);
+    }
+    Ok(results)
+}
+
+pub fn save_event(path: &str, event: Event) -> anyhow::Result<i64> {
+    let conn = Connection::open(path)?;
+    if event.id > 0 {
+        conn.execute(
+            "UPDATE events SET date=?1, start_minute=?2, end_minute=?3, main_tag_id=?4, sub_tag_id=?5, content=?6 WHERE id=?7",
+            params![event.date, event.start_minute, event.end_minute, event.main_tag_id, event.sub_tag_id, event.content, event.id],
+        )?;
+        Ok(event.id)
+    } else {
+        conn.execute(
+            "INSERT INTO events (date, start_minute, end_minute, main_tag_id, sub_tag_id, content) VALUES (?1, ?2, ?3, ?4, ?5, ?6)",
+            params![event.date, event.start_minute, event.end_minute, event.main_tag_id, event.sub_tag_id, event.content],
+        )?;
+        Ok(conn.last_insert_rowid())
+    }
+}
+
+pub fn delete_event(path: &str, id: i64) -> anyhow::Result<()> {
+    let conn = Connection::open(path)?;
+    conn.execute("DELETE FROM events WHERE id = ?1", params![id])?;
+    Ok(())
+}
diff --git a/src-tauri/src/engine.rs b/src-tauri/src/engine.rs
index 7d865a5..ba7a969 100644
--- a/src-tauri/src/engine.rs
+++ b/src-tauri/src/engine.rs
@@ -11,9 +11,60 @@ use tauri_plugin_store::StoreExt;
 pub struct AppState {
     pub is_paused: Arc<AtomicBool>,
     pub capture_interval_secs: std::sync::atomic::AtomicU64,
+    pub db_path: std::sync::Mutex<Option<String>>,
     pub toggle_menu_item: std::sync::Mutex<Option<tauri::menu::MenuItem<tauri::Wry>>>,
 }
 
+#[tauri::command]
+pub fn update_db_path(state: tauri::State<'_, AppState>, path: String) -> Result<(), String> {
+    crate::db::init_db(&path).map_err(|e| e.to_string())?;
+    let mut db_path = state.db_path.lock().unwrap();
+    *db_path = Some(path);
+    Ok(())
+}
+
+#[tauri::command]
+pub fn get_tags(state: tauri::State<'_, AppState>) -> Result<Vec<crate::db::Tag>, String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::get_tags(path).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn add_tag(state: tauri::State<'_, AppState>, name: String, parent_id: Option<i64>, color: String) -> Result<i64, String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::add_tag(path, &name, parent_id, &color).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn delete_tag(state: tauri::State<'_, AppState>, id: i64) -> Result<(), String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::delete_tag(path, id).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn get_events(state: tauri::State<'_, AppState>, date: String) -> Result<Vec<crate::db::Event>, String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::get_events(path, &date).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn save_event(state: tauri::State<'_, AppState>, event: crate::db::Event) -> Result<i64, String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::save_event(path, event).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn delete_event(state: tauri::State<'_, AppState>, id: i64) -> Result<(), String> {
+    let path = state.db_path.lock().unwrap();
+    let path = path.as_ref().ok_or("Database path not set")?;
+    crate::db::delete_event(path, id).map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 pub fn update_interval(state: tauri::State<'_, AppState>, seconds: u64) {
     state.capture_interval_secs.store(seconds, Ordering::SeqCst);
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 6efbc1b..65aa1fe 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,3 +1,4 @@
+mod db;
 mod engine;
 mod tray;
 
@@ -21,12 +22,20 @@ pub fn run() {
             engine::get_pause_state,
             engine::get_timeline,
             engine::get_image_base64,
-            engine::update_interval
+            engine::update_interval,
+            engine::update_db_path,
+            engine::get_tags,
+            engine::add_tag,
+            engine::delete_tag,
+            engine::get_events,
+            engine::save_event,
+            engine::delete_event
         ])
         .setup(|app| {
             app.manage(engine::AppState {
                 is_paused: Arc::new(AtomicBool::new(false)),
                 capture_interval_secs: std::sync::atomic::AtomicU64::new(30),
+                db_path: std::sync::Mutex::new(None),
                 toggle_menu_item: std::sync::Mutex::new(None),
             });
             tray::create_tray(app.handle())?;
diff --git a/src/App.vue b/src/App.vue
index 4561934..50e327f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import { load } from "@tauri-apps/plugin-store";
-import { open } from "@tauri-apps/plugin-dialog";
+import { open, save } from "@tauri-apps/plugin-dialog";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw } from "lucide-vue-next";
+import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2 } from "lucide-vue-next";
 
-// --- Types & Constants ---
-interface TimelineItem {
-  time: string; // "HH:mm:ss"
-  path: string;
-  isNextDay?: boolean;
-}
+// --- Types ---
+interface Tag { id: number; name: string; parent_id: number | null; color: string; }
+interface DBEvent { id: number; date: string; start_minute: number; end_minute: number; main_tag_id: number; sub_tag_id: number | null; content: string; }
+interface TimelineItem { time: string; path: string; isNextDay?: boolean; }
 
 const TOTAL_MINUTES = 24 * 60;
-const TIME_OFFSET_MINUTES = 3 * 60; // 03:00 logical day start
+const TIME_OFFSET_MINUTES = 3 * 60;
 
 // --- State ---
 const isSetupComplete = ref(false);
 const savePath = ref("");
+const dbPath = ref("");
 const isPaused = ref(false);
 const currentDate = ref(new Date().toISOString().split("T")[0]);
 const timelineImages = ref<TimelineItem[]>([]);
@@ -27,16 +26,28 @@ const lockedImage = ref<TimelineItem | null>(null);
 const previewSrc = ref("");
 const isFullscreen = ref(false);
 const isSettingsOpen = ref(false);
+const isTagManagerOpen = ref(false);
+const isEventModalOpen = ref(false);
+
 const mergeScreens = ref(false);
 const retainDays = ref(30);
 const captureInterval = ref(30);
-const timelineZoom = ref(1.5); // pixels per minute
+const timelineZoom = ref(1.5);
 
+const tags = ref<Tag[]>([]);
+const dayEvents = ref<DBEvent[]>([]);
+const isDragging = ref(false);
+const dragStartMin = ref<number | null>(null);
+const dragEndMin = ref<number | null>(null);
+
+const editingEvent = ref<DBEvent>({ id: 0, date: "", start_minute: 0, end_minute: 0, main_tag_id: 0, sub_tag_id: null, content: "" });
 const hoveredTime = ref<string | null>(null);
 const timelineRef = ref<HTMLElement | null>(null);
 
-// Computed ruler height based on zoom
 const rulerHeight = computed(() => TOTAL_MINUTES * timelineZoom.value);
+const mainTags = computed(() => tags.value.filter(t => t.parent_id === null));
+const getSubTags = (parentId: number) => tags.value.filter(t => t.parent_id === parentId);
+const getTagColor = (tagId: number) => tags.value.find(t => t.id === tagId)?.color || "#007AFF";
 
 let store: any = null;
 let captureUnlisten: any = null;
@@ -45,378 +56,290 @@ let captureUnlisten: any = null;
 onMounted(async () => {
   store = await load("config.json");
   const path = await store.get("savePath");
-  if (path) {
+  const dPath = await store.get("dbPath");
+  if (path && dPath) {
     savePath.value = path as string;
+    dbPath.value = dPath as string;
     isSetupComplete.value = true;
+    await invoke("update_db_path", { path: dbPath.value });
     mergeScreens.value = (await store.get("mergeScreens")) as boolean || false;
     retainDays.value = (await store.get("retainDays")) as number || 30;
     captureInterval.value = (await store.get("captureInterval")) as number || 30;
     timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
-    
     await invoke("update_interval", { seconds: captureInterval.value });
     isPaused.value = await invoke("get_pause_state");
-    await loadTimeline();
+    await loadTimeline(); await loadTags(); await loadEvents();
   }
-
-  await listen<boolean>("pause-state-changed", (event) => {
-    isPaused.value = event.payload;
-  });
-
-  captureUnlisten = await listen("refresh-timeline", () => {
-    loadTimeline();
-  });
+  await listen<boolean>("pause-state-changed", (event) => { isPaused.value = event.payload; });
+  captureUnlisten = await listen("refresh-timeline", () => { loadTimeline(); });
 });
 
-onUnmounted(() => {
-  if (captureUnlisten) captureUnlisten();
-});
+onUnmounted(() => { if (captureUnlisten) captureUnlisten(); });
 
-const selectFolder = async () => {
-  const selected = await open({ directory: true, multiple: false });
-  if (selected && typeof selected === "string") {
-    savePath.value = selected;
-    await store.set("savePath", selected);
+const selectFolder = async () => { const s = await open({ directory: true }); if (s) savePath.value = s as string; };
+const selectDBFile = async () => { const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
+const createDBFile = async () => { const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
+
+const completeSetup = async () => {
+  if (savePath.value && dbPath.value) {
+    await store.set("savePath", savePath.value);
+    await store.set("dbPath", dbPath.value);
     await store.save();
+    await invoke("update_db_path", { path: dbPath.value });
     isSetupComplete.value = true;
-    await loadTimeline();
+    await loadTimeline(); await loadTags(); await loadEvents();
   }
 };
 
-const updateSettings = async () => {
-  await store.set("mergeScreens", mergeScreens.value);
-  await store.set("retainDays", retainDays.value);
-  await store.set("captureInterval", captureInterval.value);
-  await store.set("timelineZoom", timelineZoom.value);
-  await store.save();
-  await invoke("update_interval", { seconds: captureInterval.value });
+const loadTags = async () => { tags.value = await invoke("get_tags"); };
+const loadEvents = async () => { dayEvents.value = await invoke("get_events", { date: currentDate.value }); };
+
+const handleAddTag = async (name: string, parentId: number | null, color: string) => {
+  await invoke("add_tag", { name, parentId, color });
+  await loadTags();
 };
 
-const togglePauseState = async () => {
-  isPaused.value = await invoke("toggle_pause");
+const handleDeleteTag = async (id: number) => {
+  await invoke("delete_tag", { id });
+  await loadTags();
 };
 
-const loadTimeline = async () => {
-  if (!savePath.value) return;
-  timelineImages.value = await invoke("get_timeline", { 
-    date: currentDate.value, 
-    baseDir: savePath.value 
-  });
+const saveEvent = async () => {
+  await invoke("save_event", { event: editingEvent.value });
+  isEventModalOpen.value = false;
+  await loadEvents();
 };
 
-const updatePreview = async (img: TimelineItem | null) => {
-  if (!img) {
-    selectedImage.value = null;
-    previewSrc.value = "";
-    return;
-  }
-  if (selectedImage.value?.path === img.path && previewSrc.value) return;
-  selectedImage.value = img;
-  try {
-    const base64 = await invoke("get_image_base64", { path: img.path });
-    previewSrc.value = `data:image/jpeg;base64,${base64}`;
-  } catch (e) {
-    console.error("Failed to load image:", e);
-  }
+const deleteEvent = async (id: number) => {
+  await invoke("delete_event", { id });
+  await loadEvents();
 };
 
-// --- Helper Functions for Logical Day ---
-
-// Converts absolute HH:mm to minutes relative to 03:00 start
 const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
   const [h, m] = timeStr.split(":").map(Number);
-  let total = h * 60 + m;
-  if (isNextDay) total += 24 * 60;
-  return total - TIME_OFFSET_MINUTES;
+  let t = h * 60 + m; if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
 };
 
-// Converts logical minutes (0 to 1439) back to HH:mm
-const logicalMinutesToTime = (logicalMinutes: number) => {
-  let total = logicalMinutes + TIME_OFFSET_MINUTES;
-  total = total % (24 * 60);
-  const h = Math.floor(total / 60);
-  const m = Math.floor(total % 60);
+const logicalMinutesToTime = (min: number) => {
+  let t = (min + TIME_OFFSET_MINUTES) % 1440;
+  const h = Math.floor(t / 60); const m = Math.floor(t % 60);
   return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
 };
 
-const findClosestImage = (logicalMin: number) => {
-  if (timelineImages.value.length === 0) return null;
-  return timelineImages.value.reduce((prev, curr) => {
-    const prevDiff = Math.abs(timeToLogicalMinutes(prev.time, prev.isNextDay) - logicalMin);
-    const currDiff = Math.abs(timeToLogicalMinutes(curr.time, curr.isNextDay) - logicalMin);
-    return currDiff < prevDiff ? curr : prev;
-  }, timelineImages.value[0]);
+const updatePreview = async (img: TimelineItem | null) => {
+  if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
+  selectedImage.value = img;
+  const b64 = await invoke("get_image_base64", { path: img.path });
+  previewSrc.value = `data:image/jpeg;base64,${b64}`;
+};
+
+const handleTimelineMouseDown = (e: MouseEvent) => {
+  if (!timelineRef.value) return;
+  const rect = timelineRef.value.getBoundingClientRect();
+  const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
+  isDragging.value = true; dragStartMin.value = min; dragEndMin.value = min;
 };
 
 const handleTimelineMouseMove = (e: MouseEvent) => {
   if (!timelineRef.value) return;
   const rect = timelineRef.value.getBoundingClientRect();
-  const y = e.clientY - rect.top + timelineRef.value.scrollTop;
-  const logicalMin = Math.floor(y / timelineZoom.value);
-  
-  if (logicalMin >= 0 && logicalMin < TOTAL_MINUTES) {
-    hoveredTime.value = logicalMinutesToTime(logicalMin);
-    const closest = findClosestImage(logicalMin);
-    if (closest) updatePreview(closest);
+  const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
+  if (min >= 0 && min < 1440) {
+    hoveredTime.value = logicalMinutesToTime(min);
+    if (isDragging.value) dragEndMin.value = min;
+    else {
+      const closest = timelineImages.value.reduce((p, c) => {
+        const pd = Math.abs(timeToLogicalMinutes(p.time, p.isNextDay) - min);
+        const cd = Math.abs(timeToLogicalMinutes(c.time, c.isNextDay) - min);
+        return cd < pd ? c : p;
+      }, timelineImages.value[0]);
+      if (closest) updatePreview(closest);
+    }
+  }
+};
+
+const handleTimelineMouseUp = () => {
+  if (isDragging.value) {
+    isDragging.value = false;
+    const start = Math.min(dragStartMin.value!, dragEndMin.value!);
+    const end = Math.max(dragStartMin.value!, dragEndMin.value!);
+    if (end - start >= 1) {
+      editingEvent.value = { id: 0, date: currentDate.value, start_minute: start, end_minute: end, main_tag_id: mainTags.value[0]?.id || 0, sub_tag_id: null, content: "" };
+      isEventModalOpen.value = true;
+    } else {
+        const closest = timelineImages.value.reduce((p, c) => {
+            const pd = Math.abs(timeToLogicalMinutes(p.time, p.isNextDay) - start);
+            const cd = Math.abs(timeToLogicalMinutes(c.time, c.isNextDay) - start);
+            return cd < pd ? c : p;
+        }, timelineImages.value[0]);
+        if (closest) { lockedImage.value = closest; updatePreview(closest); }
+    }
   }
 };
 
 const handleTimelineMouseLeave = () => {
   hoveredTime.value = null;
-  if (lockedImage.value) updatePreview(lockedImage.value);
-};
-
-const handleTimelineClick = (e: MouseEvent) => {
-  if (!timelineRef.value) return;
-  const rect = timelineRef.value.getBoundingClientRect();
-  const y = e.clientY - rect.top + timelineRef.value.scrollTop;
-  const logicalMin = Math.floor(y / timelineZoom.value);
-  
-  const closest = findClosestImage(logicalMin);
-  if (closest) {
-    lockedImage.value = closest;
-    updatePreview(closest);
-  }
+  if (!isDragging.value && lockedImage.value) updatePreview(lockedImage.value);
 };
 
 const handleTimelineWheel = (e: WheelEvent) => {
   if (e.ctrlKey) {
-    e.preventDefault();
-    if (!timelineRef.value) return;
-
+    e.preventDefault(); if (!timelineRef.value) return;
     const rect = timelineRef.value.getBoundingClientRect();
-    const mouseYInViewport = e.clientY - rect.top;
-    const scrollOffset = timelineRef.value.scrollTop;
-    
-    // Position of cursor relative to the content total height before zoom
-    const cursorYInContent = mouseYInViewport + scrollOffset;
-    const oldRulerHeight = rulerHeight.value;
-
-    // Perform zoom change
-    const delta = e.deltaY > 0 ? -0.2 : 0.2;
-    const newZoom = Math.min(Math.max(0.5, timelineZoom.value + delta), 15);
-    
-    if (newZoom === timelineZoom.value) return;
-    
-    timelineZoom.value = newZoom;
-    
-    // Wait for DOM update or calculate it
-    const newRulerHeight = TOTAL_MINUTES * newZoom;
-
-    // Calculate new scroll position to keep cursor point fixed
-    const newScrollTop = (cursorYInContent / oldRulerHeight) * newRulerHeight - mouseYInViewport;
-    
-    timelineRef.value.scrollTop = newScrollTop;
-    
+    const my = e.clientY - rect.top; const cy = my + timelineRef.value.scrollTop;
+    const oh = rulerHeight.value; const delta = e.deltaY > 0 ? -0.2 : 0.2;
+    timelineZoom.value = Math.min(Math.max(0.5, timelineZoom.value + delta), 15);
+    timelineRef.value.scrollTop = (cy / oh) * rulerHeight.value - my;
     updateSettings();
   }
 };
 
+const updateSettings = async () => {
+  await store.set("mergeScreens", mergeScreens.value); await store.set("retainDays", retainDays.value);
+  await store.set("captureInterval", captureInterval.value); await store.set("timelineZoom", timelineZoom.value);
+  await store.save(); await invoke("update_interval", { seconds: captureInterval.value });
+};
+
+const togglePauseState = async () => { isPaused.value = await invoke("toggle_pause"); };
+const loadTimeline = async () => { if (savePath.value) timelineImages.value = await invoke("get_timeline", { date: currentDate.value, baseDir: savePath.value }); };
+
+const newTagName = ref(""); const newTagParent = ref<number | null>(null); const newTagColor = ref("#007AFF");
+const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF"; };
 </script>
 
 <template>
   <div class="h-screen w-screen flex flex-col overflow-hidden text-[#1D1D1F] bg-[#FBFBFD]">
-    <!-- Setup Wizard -->
+    
     <div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center p-10">
-      <div class="bg-white p-12 rounded-[32px] shadow-2xl max-w-md text-center border border-[#E5E5E7]">
-        <div class="w-20 h-20 bg-[#007AFF]/10 rounded-3xl flex items-center justify-center mx-auto mb-8">
-           <FolderOpen :size="40" class="text-[#007AFF]" />
+      <div class="bg-white p-12 rounded-[32px] shadow-2xl max-w-lg text-center border border-[#E5E5E7]">
+        <Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
+        <h1 class="text-3xl font-bold mb-4">初始化 Chrono Snap</h1>
+        <div class="space-y-6 text-left mb-10">
+          <div class="space-y-2">
+            <label class="text-xs font-bold text-[#86868B]">截图保存目录</label>
+            <div class="flex gap-2">
+              <input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
+              <button @click="selectFolder" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-bold text-[#86868B]">SQLite 数据库文件</label>
+            <div class="flex gap-2">
+              <input type="text" readonly :value="dbPath" placeholder="请选择或创建 .db 文件..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
+              <div class="flex gap-1">
+                <button @click="selectDBFile" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
+                <button @click="createDBFile" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :size="18" /></button>
+              </div>
+            </div>
+          </div>
         </div>
-        <h1 class="text-3xl font-bold mb-4 tracking-tight">初始化 Chrono Snap</h1>
-        <p class="text-[#86868B] mb-10 leading-relaxed">请选择一个本地文件夹，用于安全地存储您的视觉历史记录。</p>
-        <button 
-          @click="selectFolder"
-          class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold hover:bg-[#0063CC] transition-all transform active:scale-95 shadow-lg shadow-[#007AFF]/20 w-full flex items-center justify-center gap-3"
-        >
-          选择存储目录
-        </button>
+        <button @click="completeSetup" :disabled="!savePath || !dbPath" class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold w-full disabled:opacity-50">开始使用</button>
       </div>
     </div>
 
-    <!-- Main Workspace -->
     <div v-else class="flex flex-1 overflow-hidden">
-      <!-- Vertical Ruler Sidebar -->
-      <div class="w-72 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
-        <!-- Date Picker Header -->
-          <div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
-          <div class="flex items-center justify-between mb-4">
-            <h2 class="text-lg font-bold tracking-tight">历史活动</h2>
-            <button @click="loadTimeline" class="p-2 hover:bg-white rounded-xl transition-colors text-[#86868B] hover:text-[#007AFF]">
-              <RefreshCw :size="18" />
-            </button>
-          </div>
-          <div class="space-y-4">
-            <input 
-              type="date" 
-              v-model="currentDate" 
-              @change="loadTimeline"
-              class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2 text-sm font-medium focus:ring-2 focus:ring-[#007AFF]/20 focus:border-[#007AFF] outline-none transition-all"
-            />
+      <div class="w-80 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
+        <div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
+          <div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">历史活动</h2><button @click="loadTimeline(); loadEvents()" class="p-2 hover:bg-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
+          <input type="date" v-model="currentDate" @change="loadTimeline(); loadEvents()" class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2.5 text-sm outline-none" />
+        </div>
+
+        <div ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="handleTimelineMouseLeave" @wheel="handleTimelineWheel">
+          <div :style="{ height: rulerHeight + 'px' }" class="relative ml-14 mr-4">
+            <div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-[#E5E5E7]/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
+              <span class="absolute -left-11 -top-2.5 text-[10px] font-bold text-[#86868B]">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span>
+            </div>
+            <div v-for="ev in dayEvents" :key="ev.id" class="absolute left-0 w-[45%] opacity-80 border-l-4" :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '22', borderColor: getTagColor(ev.main_tag_id) }" @click.stop="editingEvent = { ...ev }; isEventModalOpen = true"></div>
+            <div v-for="img in timelineImages" :key="img.path" class="absolute left-[50%] right-2 h-1 bg-[#007AFF]/20 rounded-full" :class="[selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-2 z-10' : '', lockedImage?.path === img.path ? 'bg-[#007AFF] h-2.5 ring-2 ring-[#007AFF]/20 z-20' : '']" :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"></div>
+            <div v-if="dragStartMin !== null && dragEndMin !== null" class="absolute left-0 w-full bg-[#007AFF]/10 border-y-2 border-[#007AFF] pointer-events-none z-30" :style="{ top: Math.min(dragStartMin, dragEndMin) * timelineZoom + 'px', height: Math.abs(dragEndMin - dragStartMin) * timelineZoom + 'px' }"></div>
+            <div v-if="hoveredTime" class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-40 pointer-events-none" :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00') * timelineZoom + 'px' }"><div class="absolute -left-12 -top-3 bg-[#007AFF] text-white text-[9px] px-1 py-0.5 rounded font-bold">{{ hoveredTime }}</div></div>
           </div>
         </div>
 
-        <!-- Scrollable Ruler -->
-        <div 
-          ref="timelineRef"
-          class="flex-1 overflow-y-auto relative no-scrollbar hover:cursor-crosshair group"
-          @mousemove="handleTimelineMouseMove"
-          @mouseleave="handleTimelineMouseLeave"
-          @click="handleTimelineClick"
-          @wheel="handleTimelineWheel"
-        >
-          <!-- Ruler Canvas -->
-          <div :style="{ height: rulerHeight + 'px' }" class="relative ml-16">
-            <!-- Hour Markers (Starting from 03:00) -->
-            <div v-for="h in 24" :key="h" 
-              class="absolute left-0 w-full border-t border-[#E5E5E7]/60 flex items-start"
-              :style="{ top: (h-1) * 60 * timelineZoom + 'px' }"
-            >
-              <span class="absolute -left-12 -top-2.5 text-[10px] font-bold text-[#86868B] tracking-tighter">
-                {{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00
-              </span>
-            </div>
-
-            <!-- Activity Bars -->
-            <div 
-              v-for="img in timelineImages" 
-              :key="img.path"
-              class="absolute left-1 right-8 h-1 bg-[#007AFF]/30 rounded-full"
-              :class="[
-                selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-2 shadow-sm z-10' : '',
-                lockedImage?.path === img.path ? 'bg-[#007AFF] h-2.5 ring-2 ring-[#007AFF]/20 z-20' : ''
-              ]"
-              :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"
-            ></div>
-
-            <!-- Hover Cursor Line -->
-            <div 
-              v-if="hoveredTime"
-              class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-30 pointer-events-none"
-              :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00' && hoveredTime >= '00:00' && hoveredTime !== '03:00') * timelineZoom + 'px' }"
-            >
-               <div class="absolute -left-14 -top-3 bg-[#007AFF] text-white text-[10px] px-1.5 py-0.5 rounded font-bold shadow-sm">
-                 {{ hoveredTime }}
-               </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Footer Actions -->
-        <div class="p-4 border-t border-[#E5E5E7] bg-white/50 backdrop-blur-sm flex justify-around">
-          <button @click="togglePauseState" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'">
-            <Play v-if="isPaused" :size="22" /> <Pause v-else :size="22" />
-          </button>
-          <button @click="isSettingsOpen = true" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors text-[#86868B]">
-            <Settings :size="22" />
-          </button>
+        <div class="p-4 border-t border-[#E5E5E7] bg-white/50 flex justify-around">
+          <button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
+          <button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-[#86868B]"><TagIcon :size="22" /></button>
+          <button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-[#86868B]"><Settings :size="22" /></button>
         </div>
       </div>
 
-      <!-- Main Preview Area -->
       <div class="flex-1 bg-[#FBFBFD] flex flex-col relative overflow-hidden">
-        <div class="p-6 flex items-center justify-between border-b border-[#E5E5E7]/50 bg-white/80 backdrop-blur-md z-10">
-          <div v-if="selectedImage" class="flex items-center gap-3">
-            <span class="text-lg font-bold">{{ selectedImage.time }}</span>
-            <span v-if="lockedImage?.path === selectedImage.path" class="text-xs font-bold px-2 py-0.5 bg-[#007AFF] text-white rounded-full uppercase tracking-wider">已定格</span>
-            <span v-else class="text-xs font-medium px-2 py-0.5 bg-[#F2F2F7] text-[#86868B] rounded-full uppercase tracking-wider">预览中</span>
-          </div>
+        <div class="p-6 flex items-center justify-between border-b bg-white/80 backdrop-blur-md z-10">
+          <div v-if="selectedImage" class="flex items-center gap-3"><span class="text-lg font-bold">{{ selectedImage.time }}</span><span class="text-xs font-bold px-2 py-0.5" :class="lockedImage?.path === selectedImage.path ? 'bg-[#007AFF] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span></div>
           <div v-else class="text-[#86868B] font-medium">未选中活动</div>
-          
-          <button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 rounded-xl hover:bg-[#F2F2F7] transition-all text-[#86868B]">
-            <Maximize2 :size="20" />
-          </button>
+          <button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 text-[#86868B]"><Maximize2 :size="20" /></button>
         </div>
-
-        <div class="flex-1 flex items-center justify-center p-12 overflow-hidden bg-[#F2F2F7]/30">
-          <div v-if="previewSrc" class="relative group max-w-full max-h-full">
-              <img 
-              :src="previewSrc" 
-              class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-white/50"
-            />
-          </div>
-          <div v-else class="flex flex-col items-center gap-4 text-[#86868B]">
-            <div class="w-16 h-16 bg-[#E5E5E7] rounded-full flex items-center justify-center opacity-50">
-                <Maximize2 :size="30" />
-            </div>
-            <p class="font-medium">在时间轴上滑动以预览</p>
-          </div>
+        <div class="flex-1 flex items-center justify-center p-12 bg-[#F2F2F7]/30">
+          <img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border" />
+          <div v-else class="text-[#86868B] text-center"><Maximize2 :size="48" class="mx-auto mb-4 opacity-20" /><p>在时间轴上滑动或拖拽以记录</p></div>
         </div>
       </div>
     </div>
 
-    <!-- Settings Modal -->
-    <div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
-      <div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
-        <div class="p-8 border-b border-[#E5E5E7] flex justify-between items-center bg-[#FBFBFD]">
-          <h2 class="text-2xl font-bold">设置</h2>
-          <button @click="isSettingsOpen = false" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#E5E5E7] transition-colors">
-            <X :size="24" />
-          </button>
-        </div>
+    <!-- Modals -->
+    <div v-if="isEventModalOpen" class="fixed inset-0 z-[110] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isEventModalOpen = false">
+      <div class="bg-white rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col">
+        <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">{{ editingEvent.id ? '编辑事件' : '新增记录' }}</h2><button @click="isEventModalOpen = false"><X :size="24" /></button></div>
         <div class="p-10 space-y-8">
-          <div class="space-y-3">
-            <label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">存储位置</label>
-            <div class="flex gap-3">
-              <input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-2xl px-5 py-3.5 text-sm font-medium text-[#1D1D1F] outline-none" />
-              <button @click="selectFolder" class="bg-white border-2 border-[#E5E5E7] p-3.5 rounded-2xl hover:border-[#007AFF] transition-all"><FolderOpen :size="20" /></button>
-            </div>
+          <div class="flex gap-4">
+            <div class="flex-1 space-y-1"><label class="text-[10px] font-bold text-[#86868B]">开始</label><div class="bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center">{{ logicalMinutesToTime(editingEvent.start_minute) }}</div></div>
+            <div class="flex-1 space-y-1"><label class="text-[10px] font-bold text-[#86868B]">结束</label><div class="bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center">{{ logicalMinutesToTime(editingEvent.end_minute) }}</div></div>
           </div>
-
-          <div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl">
-            <div class="space-y-0.5">
-              <div class="font-bold text-[#1D1D1F]">多屏合并</div>
-              <div class="text-xs font-medium text-[#86868B]">将所有屏幕拼接成一张图片</div>
-            </div>
-            <button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-14 h-8 rounded-full transition-all relative shadow-inner" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'">
-              <div class="absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform shadow-md" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div>
-            </button>
-          </div>
-
           <div class="space-y-4">
-            <div class="flex justify-between items-end">
-              <label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">截图间隔</label>
-              <span class="text-lg font-black text-[#007AFF]">{{ captureInterval }} 秒</span>
+            <div class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">主标签</label>
+              <div class="grid grid-cols-4 gap-2"><button v-for="tag in mainTags" :key="tag.id" @click="editingEvent.main_tag_id = tag.id; editingEvent.sub_tag_id = null" class="px-2 py-2 rounded-xl text-[10px] font-bold border-2" :style="{ backgroundColor: editingEvent.main_tag_id === tag.id ? tag.color : 'transparent', borderColor: tag.color, color: editingEvent.main_tag_id === tag.id ? 'white' : tag.color }">{{ tag.name }}</button></div>
             </div>
-            <input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
-            <p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">自动截图的频率（10秒至10分钟）。</p>
+            <div v-if="editingEvent.main_tag_id && getSubTags(editingEvent.main_tag_id).length" class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">副标签</label>
+              <div class="flex flex-wrap gap-2"><button v-for="sub in getSubTags(editingEvent.main_tag_id)" :key="sub.id" @click="editingEvent.sub_tag_id = sub.id" class="px-3 py-1.5 rounded-lg text-[10px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></div>
+            </div>
+            <textarea v-model="editingEvent.content" placeholder="记录具体内容..." class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-[100px] outline-none"></textarea>
           </div>
-
-          <div class="space-y-4">
-            <div class="flex justify-between items-end">
-              <label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">清理策略</label>
-              <span class="text-lg font-black text-[#007AFF]">{{ retainDays }} 天</span>
-            </div>
-            <input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
-            <p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">超过此天数的截图将被自动永久删除。</p>
+          <div class="flex gap-4 pt-4">
+             <button v-if="editingEvent.id" @click="deleteEvent(editingEvent.id); isEventModalOpen = false" class="text-[#FF3B30] font-bold px-4 py-2 flex items-center gap-2"><Trash2 :size="18" /> 删除</button>
+             <button @click="saveEvent" class="flex-1 bg-[#007AFF] text-white py-4 rounded-2xl font-bold">保存记录</button>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Fullscreen Modal -->
-    <div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl animate-in fade-in duration-300">
-      <button @click="isFullscreen = false" class="absolute top-10 right-10 w-14 h-14 flex items-center justify-center bg-white/10 text-white rounded-full hover:bg-white/20 transition-all backdrop-blur-md">
-        <X :size="36" />
-      </button>
-      <img :src="previewSrc" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl" />
+    <div v-if="isTagManagerOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isTagManagerOpen = false">
+      <div class="bg-white rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col">
+        <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">标签管理</h2><button @click="isTagManagerOpen = false"><X :size="24" /></button></div>
+        <div class="flex-1 overflow-y-auto p-10 flex gap-10">
+          <div class="flex-1 space-y-6">
+            <div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
+              <div class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl"><div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div><span class="font-bold">{{ mt.name }}</span></div><button @click="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button></div>
+              <div class="ml-7 space-y-1"><div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"><span class="text-sm">{{ st.name }}</span><button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button></div></div>
+            </div>
+          </div>
+          <div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4">
+            <h3 class="font-bold text-xs text-[#86868B] uppercase">添加标签</h3>
+            <input v-model="newTagName" placeholder="名称" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none" />
+            <select v-model="newTagParent" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none appearance-none"><option :value="null">-- 无 --</option><option v-for="t in mainTags" :key="t.id" :value="t.id">{{ t.name }}</option></select>
+            <div v-if="newTagParent === null" class="flex flex-wrap gap-2"><button v-for="c in ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6']" :key="c" @click="newTagColor = c" class="w-5 h-5 rounded-full border-2" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
+            <button @click="handleAddTag(newTagName, newTagParent, newTagColor); resetTagForm()" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-2.5 rounded-xl font-bold">创建</button>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
+      <div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden flex flex-col">
+        <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">设置</h2><button @click="isSettingsOpen = false"><X :size="24" /></button></div>
+        <div class="p-10 space-y-8">
+          <div class="space-y-3"><label class="text-xs font-bold text-[#86868B]">存储位置</label><div class="flex gap-2"><input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2 text-sm outline-none" /><button @click="selectFolder" class="bg-white border p-2 rounded-xl"><FolderOpen :size="18" /></button></div></div>
+          <div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl"><div class="space-y-0.5"><div class="font-bold">多屏合并</div><div class="text-[10px] text-[#86868B]">拼接所有屏幕</div></div><button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-12 h-6 rounded-full relative transition-all" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'"><div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-all" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div></button></div>
+          <div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">截图间隔</label><span class="text-xs font-bold text-[#007AFF]">{{ captureInterval }}s</span></div><input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-[#E5E5E7] accent-[#007AFF]" /></div>
+          <div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">清理策略</label><span class="text-xs font-bold text-[#007AFF]">{{ retainDays }}天</span></div><input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-1 bg-[#E5E5E7] accent-[#007AFF]" /></div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div>
   </div>
 </template>
 
 <style>
 .no-scrollbar::-webkit-scrollbar { display: none; }
 .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-
-.fade-enter-active, .fade-leave-active { transition: opacity 0.1s ease; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
-
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-  background: #ffffff;
-  border: 4px solid #007AFF;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-  margin-top: -11px;
-}
 </style>