fix now line

optimize timeline ui
add now time
2026-03-23 00:24:40 -04:00 · 2026-03-23 00:11:18 -04:00 · 2026-03-22 23:51:02 -04:00 · 2026-03-22 23:37:22 -04:00 · 2026-03-22 22:48:11 -04:00 · 2026-03-22 22:41:38 -04:00
68 changed files with 339 additions and 133 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,3 @@
-# Tauri + Vue + TypeScript
+# 瞬影 - 时间记录

-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+由 Gemini CLI 生成。
--- a/app-icon.png
+++ b/app-icon.png
--- a/icon.svg
+++ b/icon.svg
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <!-- Background Gradient -->
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#007AFF" />
+      <stop offset="100%" stop-color="#0056B3" />
+    </linearGradient>
+    
+    <!-- Shutter Gradient -->
+    <linearGradient id="shutterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="1" />
+      <stop offset="100%" stop-color="#F2F2F7" stop-opacity="0.8" />
+    </linearGradient>
+
+    <!-- Drop Shadow for depth -->
+    <filter id="dropShadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="#000000" flood-opacity="0.25" />
+    </filter>
+    
+    <!-- Inner Shadow for the lens -->
+    <filter id="innerShadow">
+      <feOffset dx="0" dy="4"/>
+      <feGaussianBlur stdDeviation="6" result="offset-blur"/>
+      <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
+      <feFlood flood-color="black" flood-opacity="0.15" result="color"/>
+      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
+      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
+    </filter>
+  </defs>
+
+  <!-- App Icon Base (Squircle) -->
+  <rect x="32" y="32" width="448" height="448" rx="100" ry="100" fill="url(#bgGradient)" filter="url(#dropShadow)" />
+
+  <!-- Outer Camera/Clock Ring -->
+  <circle cx="256" cy="256" r="160" fill="none" stroke="#FFFFFF" stroke-width="24" stroke-opacity="0.3" />
+
+  <!-- Time Track / Timeline segments (representing intervals) -->
+  <path d="M 256 96 A 160 160 0 0 1 416 256" fill="none" stroke="#FFFFFF" stroke-width="24" stroke-linecap="round" />
+  
+  <!-- Central Shutter/Lens Background -->
+  <circle cx="256" cy="256" r="112" fill="url(#shutterGradient)" filter="url(#innerShadow)" />
+
+  <!-- Inner Dark Lens -->
+  <circle cx="256" cy="256" r="64" fill="#1D1D1F" />
+
+  <!-- Camera Flash / Sparkle -->
+  <circle cx="340" cy="172" r="16" fill="#FFFFFF" />
+
+  <!-- Clock Hands (Time element) inside the lens -->
+  <!-- Minute Hand -->
+  <line x1="256" y1="256" x2="256" y2="200" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
+  <!-- Hour Hand -->
+  <line x1="256" y1="256" x2="296" y2="256" stroke="#007AFF" stroke-width="8" stroke-linecap="round" />
+  
+  <!-- Center Pin -->
+  <circle cx="256" cy="256" r="12" fill="#FFFFFF" />
+  
+</svg>
--- a/index.html
+++ b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + Typescript App</title>
+    <title>Chrono Snap</title>
  </head>

  <body>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "chrono-snap",
  "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/tauri.svg
+++ b/public/tauri.svg
@@ -1,6 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
-<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
-</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -667,7 +667,7 @@ dependencies = [

 [[package]]
 name = "chrono-snap"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
 "anyhow",
 "base64 0.22.1",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,7 +1,7 @@
 [package]
 name = "chrono-snap"
-version = "0.1.0"
-description = "A Tauri App"
+version = "0.1.1"
+description = "An app to record screens and events"
 authors = ["you"]
 edition = "2021"

--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/64x64.png
+++ b/src-tauri/icons/64x64.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
+++ b/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/values/ic_launcher_background.xml
+++ b/src-tauri/icons/android/values/ic_launcher_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/icons/ios/AppIcon-20x20@1x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@1x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@3x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@3x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@1x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@1x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@3x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@3x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@1x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@1x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@3x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@3x.png
--- a/src-tauri/icons/ios/AppIcon-512@2x.png
+++ b/src-tauri/icons/ios/AppIcon-512@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@2x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@3x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@3x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@1x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@1x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@2x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@2x.png
--- a/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
+++ b/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
--- a/src-tauri/src/db.rs
+++ b/src-tauri/src/db.rs
@@ -1,6 +1,5 @@
 use rusqlite::{params, Connection};
 use serde::{Deserialize, Serialize};
-use std::path::PathBuf;

 #[derive(Serialize, Deserialize, Clone)]
 pub struct Tag {
--- a/src-tauri/src/engine.rs
+++ b/src-tauri/src/engine.rs
@@ -168,6 +168,11 @@ pub fn get_timeline(date: String, base_dir: String) -> Vec<serde_json::Value> {
    results
 }

+#[tauri::command]
+pub fn write_file(path: String, content: String) -> Result<(), String> {
+    std::fs::write(&path, content).map_err(|e| e.to_string())
+}
+
 pub fn start_engine(app: AppHandle) {
    // Start Cleanup routine
    let app_cleanup = app.clone();
@@ -278,10 +283,7 @@ async fn capture_screens(app: &AppHandle) -> anyhow::Result<()> {
        fs::create_dir_all(&base_dir)?;
    }

-    let merge_screens = store
-        .get("mergeScreens")
-        .and_then(|v| v.as_bool())
-        .unwrap_or(false);
+    let merge_screens = true;

    let monitors = Monitor::all()?;
    let now = Local::now();
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -30,7 +30,8 @@ pub fn run() {
            engine::get_events,
            engine::get_events_range,
            engine::save_event,
-            engine::delete_event
+            engine::delete_event,
+            engine::write_file
        ])
        .setup(|app| {
            app.manage(engine::AppState {
--- a/src-tauri/src/tray.rs
+++ b/src-tauri/src/tray.rs
@@ -16,7 +16,7 @@ pub fn create_tray(app: &AppHandle) -> tauri::Result<()> {
    *state.toggle_menu_item.lock().unwrap() = Some(toggle_i.clone());

    TrayIconBuilder::with_id("main_tray")
-        .tooltip("Chrono Snap")
+        .tooltip("瞬影")
        .icon(app.default_window_icon().unwrap().clone())
        .menu(&menu)
        .show_menu_on_left_click(false)
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "chrono-snap",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "identifier": "top.volan.chrono-snap",
  "build": {
    "beforeDevCommand": "pnpm dev",
@@ -12,13 +12,13 @@
  "app": {
    "windows": [
      {
-        "title": "chrono-snap",
-        "width": 800,
-        "height": 600
+        "title": "瞬影 - 时间记录 v0.1.1",
+        "width": 1760,
+        "height": 1100
      }
    ],
    "security": {
-      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost tauri: http://localhost:*",
+      "csp": "default-src 'self'; img-src 'self' asset: http://asset.localhost tauri: http://localhost:* data:",
      "assetProtocol": {
        "enable": true,
        "scope": ["**"]
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,6 @@
 import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
 import { load } from "@tauri-apps/plugin-store";
 import { open, save } from "@tauri-apps/plugin-dialog";
-import { writeTextFile } from "@tauri-apps/plugin-fs";
 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 } from "lucide-vue-next";
@@ -20,7 +19,7 @@ const isSetupComplete = ref(false);
 const savePath = ref("");
 const dbPath = ref("");
 const isPaused = ref(false);
-const currentDate = ref(new Date().toISOString().split("T")[0]);
+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);
@@ -28,6 +27,12 @@ const previewSrc = ref("");
 const isFullscreen = ref(false);
 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 isEventModalOpen = ref(false);

 const toast = ref({ message: "", type: "success", visible: false });
@@ -36,9 +41,8 @@ const showToast = (message: string, type = "success") => {
  setTimeout(() => { toast.value.visible = false; }, 3000);
 };

-const mergeScreens = ref(false);
 const retainDays = ref(30);
-const captureInterval = ref(30);
+const captureInterval = ref(60);
 const timelineZoom = ref(1.5);

 const tags = ref<Tag[]>([]);
@@ -49,6 +53,33 @@ 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 updateCurrentMinute = () => {
+  const now = new Date();
+  const logicalDateStr = new Date(now.getTime() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv');
+  if (logicalDateStr === currentDate.value) {
+    const m = now.getHours() * 60 + now.getMinutes();
+    currentLogicalMinute.value = (m < TIME_OFFSET_MINUTES ? m + 1440 : m) - TIME_OFFSET_MINUTES;
+  } else {
+    currentLogicalMinute.value = -1;
+  }
+};
+
+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;
+};
 const timelineRef = ref<HTMLElement | null>(null);

 const rulerHeight = computed(() => TOTAL_MINUTES * timelineZoom.value);
@@ -65,11 +96,15 @@ 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;
@@ -85,6 +120,12 @@ const handleClickOutside = (event: MouseEvent) => {
  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 () => {
@@ -92,7 +133,7 @@ const openStartTimePicker = async () => {
  isEndTimeOpen.value = false;
  if (isStartTimeOpen.value) {
    await nextTick();
-    const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
+    const activeItems = document.querySelectorAll('.z-120 .bg-\\[\\#007AFF\\].text-white');
    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
  }
 };
@@ -102,7 +143,7 @@ const openEndTimePicker = async () => {
  isStartTimeOpen.value = false;
  if (isEndTimeOpen.value) {
    await nextTick();
-    const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
+    const activeItems = document.querySelectorAll('.z-120 .bg-\\[\\#007AFF\\].text-white');
    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
  }
 };
@@ -122,12 +163,19 @@ const calendarDays = computed(() => {
 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;
+  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");
@@ -136,9 +184,8 @@ onMounted(async () => {
    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;
+    captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60);
    timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
    await invoke("update_interval", { seconds: captureInterval.value });
    isPaused.value = await invoke("get_pause_state");
@@ -150,6 +197,7 @@ onMounted(async () => {

 onUnmounted(() => { 
  window.removeEventListener('mousedown', handleClickOutside);
+  if (currentMinuteInterval) window.clearInterval(currentMinuteInterval);
  if (captureUnlisten) captureUnlisten(); 
 });

@@ -217,8 +265,8 @@ const deleteEvent = async (id: number) => {
 };

 const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
-  const [h, m] = timeStr.split(":").map(Number);
-  let t = h * 60 + m; if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
+  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) => {
@@ -244,6 +292,22 @@ const endTimeInput = computed({
  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;
@@ -265,14 +329,12 @@ const handleTimelineMouseMove = (e: MouseEvent) => {
  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 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);
  }
 };

@@ -315,7 +377,6 @@ const handleTimelineWheel = (e: WheelEvent) => {
 const updateSettings = async () => {
  await store.set("savePath", savePath.value);
  await store.set("dbPath", dbPath.value);
-  await store.set("mergeScreens", mergeScreens.value); 
  await store.set("retainDays", retainDays.value);
  await store.set("captureInterval", captureInterval.value); 
  await store.set("timelineZoom", timelineZoom.value);
@@ -350,52 +411,75 @@ const isTagSelectOpen = ref(false);
 const isExportModalOpen = ref(false);
 const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
 const exportEndDate = ref(currentDate.value);
-const exportSelectedTags = ref<number[]>([]);
+const exportStartMonth = ref(new Date(exportStartDate.value));
+const exportEndMonth = ref(new Date(exportEndDate.value));

-const toggleExportTag = (tagId: number) => {
-  if (exportSelectedTags.value.includes(tagId)) {
-    exportSelectedTags.value = exportSelectedTags.value.filter(id => id !== tagId);
-  } else {
-    exportSelectedTags.value.push(tagId);
-  }
+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 selectAllTags = () => {
-  exportSelectedTags.value = tags.value.map(t => t.id);
+const selectExportEndDate = (date: Date) => {
+  exportEndDate.value = date.toLocaleDateString('sv');
+  isExportEndCalendarOpen.value = false;
 };

 const openExportModal = () => {
  exportEndDate.value = currentDate.value;
-  selectAllTags();
+  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 });
-    const filteredEvents = events.filter(e => exportSelectedTags.value.includes(e.main_tag_id) || (e.sub_tag_id && exportSelectedTags.value.includes(e.sub_tag_id)));
    
-    if (filteredEvents.length === 0) {
-      showToast("所选范围内没有找到匹配的记录", "error");
+    if (events.length === 0) {
+      showToast("所选范围内没有找到记录", "error");
      return;
    }

    const savePath = await save({
-      filters: [{ name: "CSV 逗号分隔值文件", extensions: ["csv"] }],
-      defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.csv`
+      filters: [{ name: "JSON 文件", extensions: ["json"] }],
+      defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
    });

    if (savePath) {
-      let csvContent = "日期,开始时间,结束时间,主标签,副标签,事件内容\n";
-      for (const e of filteredEvents) {
-        const start = logicalMinutesToTime(e.start_minute);
-        const end = logicalMinutesToTime(e.end_minute);
-        const mainTag = getTagName(e.main_tag_id);
-        const subTag = getTagName(e.sub_tag_id);
-        const content = `"${e.content.replace(/"/g, '""')}"`;
-        csvContent += `${e.date},${start},${end},${mainTag},${subTag},${content}\n`;
-      }
-      await writeTextFile(savePath, "\uFEFF" + csvContent);
+      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("导出成功");
    }
@@ -409,9 +493,9 @@ const handleExport = async () => {
  <div class="h-screen w-screen flex flex-col overflow-hidden text-[#1D1D1F] bg-[#FBFBFD]">
    
    <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-lg text-center border border-[#E5E5E7]">
+      <div class="bg-white p-12 rounded-4xl 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>
+        <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-[#86868B]">截图保存目录</label>
@@ -421,9 +505,9 @@ const handleExport = async () => {
            </div>
          </div>
          <div class="space-y-2">
-            <label class="text-xs font-bold text-[#86868B]">SQLite 数据库文件</label>
+            <label class="text-xs font-bold text-[#86868B]">数据库文件</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" />
+              <input type="text" readonly :value="dbPath" placeholder="请选择或创建数据库文件..." 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>
@@ -437,14 +521,14 @@ const handleExport = async () => {

    <div v-else class="flex flex-1 overflow-hidden">
      <div class="w-80 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
-        <div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-50 border-b border-[#E5E5E7]/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-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
+        <div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-100 border-b border-[#E5E5E7]/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-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
          <div ref="calendarRef" class="relative group">
             <button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-white border border-[#E5E5E7] rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-[#F2F2F7] transition-all">
                <Calendar :size="16" class="absolute left-4 text-[#86868B]" />
                {{ currentDate }}
             </button>
-             <div v-if="isCalendarOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-[24px] shadow-2xl border border-[#E5E5E7] z-[100] p-5 animate-in fade-in zoom-in-95 duration-200">
+             <div v-if="isCalendarOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] z-100 p-5 animate-in fade-in zoom-in-95 duration-200">
                <div class="flex items-center justify-between mb-4">
                  <button @click="calendarMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-[#F2F2F7] rounded-xl"><ChevronLeft :size="18"/></button>
                  <span class="text-sm font-black">{{ calendarMonth.getFullYear() }}年 {{ calendarMonth.getMonth()+1 }}月</span>
@@ -463,12 +547,19 @@ const handleExport = async () => {
        <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>
+              <span v-if="h > 1" 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-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) + '22', borderColor: getTagColor(ev.main_tag_id) }" 
+              @mouseenter="handleEventMouseEnter(ev, $event)"
+              @mousemove="handleEventMouseMove"
+              @mouseleave="handleEventMouseLeave"
+              @click.stop="editingEvent = { ...ev }; isEventModalOpen = true">
+            </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="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>

@@ -482,7 +573,7 @@ const handleExport = async () => {

      <div class="flex-1 bg-[#FBFBFD] flex flex-col relative overflow-hidden">
        <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-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 rounded-md" :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 text-[#86868B]"><Maximize2 :size="20" /></button>
        </div>
@@ -494,22 +585,22 @@ const handleExport = async () => {
    </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 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; 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; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div>
        <div class="p-10 space-y-8">
-          <div class="flex gap-4">
+          <div class="flex gap-3 items-end">
            <!-- Start Time Custom Picker -->
-            <div ref="startTimePickerRef" class="flex-1 space-y-1 relative">
-              <label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
+            <div ref="startTimePickerRef" class="flex-1 relative">
+              <label class="text-[10px] font-bold text-[#86868B] block mb-1">开始时间</label>
              <button @click="openStartTimePicker" 
                class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
                <!-- <Clock :size="14" class="text-[#86868B] block" /> -->
                <span class="text-sm font-bold leading-none">{{ startTimeInput }}</span>
              </button>
-              <div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] z-[120] p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
+              <div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] 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-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1 text-center border-b border-[#E5E5E7]/30">时</div>
+                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white py-1 text-center border-b border-[#E5E5E7]/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"
@@ -518,26 +609,30 @@ const handleExport = async () => {
                 </div>
                 <div class="w-px bg-[#E5E5E7] my-2"></div>
                 <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
-                    <div class="text-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1 text-center border-b border-[#E5E5E7]/30">分</div>
+                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white py-1 text-center border-b border-[#E5E5E7]/30">分</div>
                    <button v-for="m in 60" :key="m" 
-                      @click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1)"
+                      @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-[#F2F2F7] 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-[#86868B] bg-[#F2F2F7] px-3 py-1.5 rounded-xl border border-[#E5E5E7]/50">{{ eventDurationFormatted }}</span>
+            </div>
            <!-- End Time Custom Picker -->
-            <div ref="endTimePickerRef" class="flex-1 space-y-1 relative">
-              <label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
+            <div ref="endTimePickerRef" class="flex-1 relative">
+              <label class="text-[10px] font-bold text-[#86868B] block mb-1">结束时间</label>
              <button @click="openEndTimePicker" 
                class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
                <!-- <Clock :size="14" class="text-[#86868B] block" /> -->
                <span class="text-sm font-bold leading-none">{{ endTimeInput }}</span>
              </button>
-              <div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] z-[120] p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
+              <div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] 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-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">时</div>
+                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white 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"
@@ -546,9 +641,9 @@ const handleExport = async () => {
                 </div>
                 <div class="w-px bg-[#E5E5E7] my-2"></div>
                 <div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
-                    <div class="text-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">分</div>
+                    <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">分</div>
                    <button v-for="m in 60" :key="m" 
-                      @click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1)"
+                      @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-[#F2F2F7] text-main'"
                    >{{ String(m-1).padStart(2,'0') }}</button>
@@ -558,16 +653,16 @@ const handleExport = async () => {
          </div>
          <div class="space-y-4">
            <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 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-[12px] 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>
            <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 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-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></div>
            </div>
            <textarea 
              v-model="editingEvent.content" 
              placeholder="记录具体内容..." 
              @keydown.ctrl.enter="saveEvent"
-              class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-[100px] outline-none border border-transparent focus:bg-white focus:border-[#E5E5E7] transition-all"
+              class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-25 outline-none border border-transparent focus:bg-white focus:border-[#E5E5E7] transition-all"
            ></textarea>
          </div>
          <div class="flex gap-4 pt-4">
@@ -578,14 +673,26 @@ 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 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 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 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 @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl cursor-pointer">
+                <div class="flex items-center gap-3">
+                  <ChevronRight :size="14" class="text-[#86868B] 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-[#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 h-fit">
@@ -600,7 +707,7 @@ const handleExport = async () => {
                <span>{{ getTagName(newTagParent) }}</span>
                <ChevronDown :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" />
              </button>
-              <div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-[#E5E5E7] z-[60] overflow-hidden py-2 animate-in fade-in zoom-in-95 duration-200">
+              <div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-[#E5E5E7] 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-[#F2F2F7] 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-[#F2F2F7] cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === t.id }">{{ t.name }}</div>
              </div>
@@ -615,50 +722,93 @@ const handleExport = async () => {
      </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-white rounded-[40px] shadow-2xl w-full max-w-md 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="isExportModalOpen = false"><X :size="24" /></button></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-white 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-[#86868B]">日期范围</label>
-              <div class="flex gap-2 items-center">
-                <input type="date" v-model="exportStartDate" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
-                <span class="text-[#86868B] font-bold">至</span>
-                <input type="date" v-model="exportEndDate" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
-              </div>
-            </div>
-            <div class="space-y-2">
-              <div class="flex justify-between items-end">
-                <label class="text-[10px] font-bold text-[#86868B]">包含的标签</label>
-                <button @click="selectAllTags" class="text-[10px] font-bold text-[#007AFF] hover:underline">全选</button>
-              </div>
-              <div class="flex flex-wrap gap-2 max-h-40 overflow-y-auto p-1 no-scrollbar">
-                <button v-for="tag in tags" :key="tag.id" @click="toggleExportTag(tag.id)" class="px-3 py-1.5 rounded-lg text-[10px] font-medium border-2 transition-all" :style="{ backgroundColor: exportSelectedTags.includes(tag.id) ? tag.color : 'transparent', borderColor: tag.color, color: exportSelectedTags.includes(tag.id) ? 'white' : tag.color }">{{ tag.name }}</button>
+              <div class="flex gap-4 items-center">
+                <div ref="exportStartCalendarRef" class="relative flex-1">
+                  <button @click="isExportStartCalendarOpen = !isExportStartCalendarOpen; isExportEndCalendarOpen = false" class="w-full bg-[#F2F2F7] 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-[#86868B]" />
+                    {{ exportStartDate }}
+                  </button>
+                  <div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] 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-[#F2F2F7] 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-[#F2F2F7] 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-[#86868B]">{{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-[#F2F2F7] text-main'">{{ date.getDate() }}</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <span class="text-[#86868B] font-black text-xs">至</span>
+                <div ref="exportEndCalendarRef" class="relative flex-1">
+                  <button @click="isExportEndCalendarOpen = !isExportEndCalendarOpen; isExportStartCalendarOpen = false" class="w-full bg-[#F2F2F7] 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-[#86868B]" />
+                    {{ exportEndDate }}
+                  </button>
+                  <div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] 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-[#F2F2F7] 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-[#F2F2F7] 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-[#86868B]">{{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-[#F2F2F7] text-main'">{{ date.getDate() }}</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
              </div>
            </div>
          </div>
-          <button @click="handleExport" :disabled="!exportStartDate || !exportEndDate || exportSelectedTags.length === 0" 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">导出为 CSV</button>
+          <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 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(); updateSettings()" class="bg-white 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-[#86868B]">SQLite 数据库文件</label><div class="flex gap-2"><input type="text" readonly :value="dbPath" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2 text-sm outline-none" /><div class="flex gap-1"><button @click="selectDBFile().then(updateSettings)" title="打开现有" class="bg-white border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile().then(updateSettings)" title="新建" class="bg-white border p-2 rounded-xl hover:border-[#007AFF] transition-all"><Plus :size="18" /></button></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">多屏合并</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-3"><label class="text-xs font-bold text-[#86868B]">数据库文件</label><div class="flex gap-2"><input type="text" readonly :value="dbPath" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2 text-sm outline-none" /><div class="flex gap-1"><button @click="selectDBFile().then(updateSettings)" title="打开现有" class="bg-white border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile().then(updateSettings)" title="新建" class="bg-white 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><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-[#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 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="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 v-if="hoveredEventDetails" 
+         class="fixed z-300 pointer-events-none bg-white/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-[#1D1D1F]">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span>
+        <span v-if="hoveredEventDetails.event.sub_tag_id" class="text-[10px] font-bold text-[#86868B] bg-[#F2F2F7] px-2 py-0.5 rounded-md border border-[#E5E5E7]/50">{{ getTagName(hoveredEventDetails.event.sub_tag_id) }}</span>
+      </div>
+      <div class="flex items-center justify-between text-[11px] font-bold text-[#86868B] mb-2.5">
+        <span>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span>
+        <span class="bg-[#F2F2F7] px-1.5 py-0.5 rounded-lg border border-[#E5E5E7]/30 text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span>
+      </div>
+      <div v-if="hoveredEventDetails.event.content" class="text-xs text-[#1D1D1F] 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-white/90 text-[#1D1D1F]'">
        <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>
        <div v-else class="w-5 h-5 rounded-full bg-[#34C759] flex items-center justify-center text-white text-[10px]">✓</div>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Author	SHA1	Message	Date
Julian Freeman	afc227159a	fix now line	2026-03-23 00:24:40 -04:00
Julian Freeman	da2ea0da11	optimize timeline ui	2026-03-23 00:11:18 -04:00
Julian Freeman	880b27f655	add now time	2026-03-22 23:51:02 -04:00
Julian Freeman	190d7863fe	event hover effect	2026-03-22 23:37:22 -04:00
Julian Freeman	1a10506385	optimize time selector	2026-03-22 22:48:11 -04:00
Julian Freeman	928589f749	expandable tags	2026-03-22 22:41:38 -04:00
Julian Freeman	8f4dfcebe3	fix time selector ui	2026-03-22 22:26:38 -04:00
Julian Freeman	e8c53dafc5	fix image preview	2026-03-22 21:36:10 -04:00
Julian Freeman	7afea3912c	fix ui	2026-03-22 20:47:20 -04:00
Julian Freeman	be40442fa8	remove mergeScreens	2026-03-22 20:42:58 -04:00
Julian Freeman	a504fb36e0	fix ui	2026-03-22 20:38:14 -04:00
Julian Freeman	0af5f1c6a9	icon	2026-03-22 20:15:40 -04:00
Julian Freeman	019087be7a	optimize drag	2026-03-22 19:59:22 -04:00
Julian Freeman	da041cf9c8	set min interval to 60s	2026-03-22 19:55:44 -04:00
Julian Freeman	47cd20c72c	fix ui	2026-03-22 19:47:42 -04:00
Julian Freeman	98aeda3a46	fix date ui	2026-03-22 19:40:00 -04:00
Julian Freeman	f0112ffcd4	save json	2026-03-22 19:32:49 -04:00
Julian Freeman	facce53aba	export json	2026-03-22 19:24:01 -04:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`