24 Commits

Author SHA1 Message Date
Julian Freeman
5b4abdeae7 upgrade 2026-03-26 19:31:26 -04:00
Julian Freeman
10583fd882 improve 2026-03-26 19:23:22 -04:00
Julian Freeman
0e424c9afb fix some bugs 2026-03-26 18:48:07 -04:00
Julian Freeman
8f8fe93f4e fix animi 2026-03-26 17:49:56 -04:00
Julian Freeman
a41e06a6e1 upgrade 2026-03-26 15:18:55 -04:00
Julian Freeman
ba4084170e fix bugs 2026-03-26 15:04:10 -04:00
Julian Freeman
bf435d4986 support custom stat dates 2026-03-26 14:59:07 -04:00
Julian Freeman
06fb78edab fix bugs 2026-03-26 14:46:18 -04:00
Julian Freeman
05a6ee59ff fix time duration 2026-03-26 13:08:47 -04:00
Julian Freeman
1e1307b8d4 refactor 2026-03-26 12:17:03 -04:00
Julian Freeman
6793a2070e support stats 2026-03-26 11:46:02 -04:00
Julian Freeman
d6cd969990 update 2026-03-23 10:08:13 -04:00
Julian Freeman
7d15f5186b support dark mode 2026-03-23 10:07:21 -04:00
Julian Freeman
45bbb593c9 fix bug 2026-03-23 09:43:27 -04:00
Julian Freeman
e6b21d5acd add addEvent button 2026-03-23 09:34:45 -04:00
Julian Freeman
435badcbb5 fix timeline selection 2026-03-23 09:22:45 -04:00
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
25 changed files with 1590 additions and 566 deletions

View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + Typescript App</title>
<title>Chrono Snap</title>
</head>
<body>

View File

@@ -1,7 +1,7 @@
{
"name": "chrono-snap",
"private": true,
"version": "0.1.0",
"version": "0.2.1",
"type": "module",
"scripts": {
"dev": "vite",
@@ -14,6 +14,7 @@
"@tauri-apps/plugin-autostart": "~2.5.1",
"@tauri-apps/plugin-dialog": "~2.6.0",
"@tauri-apps/plugin-fs": "~2.4.5",
"@tauri-apps/plugin-notification": "^2.3.3",
"@tauri-apps/plugin-opener": "^2",
"@tauri-apps/plugin-store": "~2.4.2",
"lucide-vue-next": "^0.577.0",

10
pnpm-lock.yaml generated
View File

@@ -20,6 +20,9 @@ importers:
'@tauri-apps/plugin-fs':
specifier: ~2.4.5
version: 2.4.5
'@tauri-apps/plugin-notification':
specifier: ^2.3.3
version: 2.3.3
'@tauri-apps/plugin-opener':
specifier: ^2
version: 2.5.3
@@ -572,6 +575,9 @@ packages:
'@tauri-apps/plugin-fs@2.4.5':
resolution: {integrity: sha512-dVxWWGE6VrOxC7/jlhyE+ON/Cc2REJlM35R3PJX3UvFw2XwYhLGQVAIyrehenDdKjotipjYEVc4YjOl3qq90fA==}
'@tauri-apps/plugin-notification@2.3.3':
resolution: {integrity: sha512-Zw+ZH18RJb41G4NrfHgIuofJiymusqN+q8fGUIIV7vyCH+5sSn5coqRv/MWB9qETsUs97vmU045q7OyseCV3Qg==}
'@tauri-apps/plugin-opener@2.5.3':
resolution: {integrity: sha512-CCcUltXMOfUEArbf3db3kCE7Ggy1ExBEBl51Ko2ODJ6GDYHRp1nSNlQm5uNCFY5k7/ufaK5Ib3Du/Zir19IYQQ==}
@@ -1245,6 +1251,10 @@ snapshots:
dependencies:
'@tauri-apps/api': 2.10.1
'@tauri-apps/plugin-notification@2.3.3':
dependencies:
'@tauri-apps/api': 2.10.1
'@tauri-apps/plugin-opener@2.5.3':
dependencies:
'@tauri-apps/api': 2.10.1

View File

@@ -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>

Before

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -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>

Before

Width:  |  Height:  |  Size: 1.5 KiB

69
src-tauri/Cargo.lock generated
View File

@@ -667,7 +667,7 @@ dependencies = [
[[package]]
name = "chrono-snap"
version = "0.1.0"
version = "0.2.1"
dependencies = [
"anyhow",
"base64 0.22.1",
@@ -681,6 +681,7 @@ dependencies = [
"tauri-plugin-autostart",
"tauri-plugin-dialog",
"tauri-plugin-fs",
"tauri-plugin-notification",
"tauri-plugin-opener",
"tauri-plugin-store",
"tokio",
@@ -2738,6 +2739,18 @@ version = "0.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
[[package]]
name = "mac-notification-sys"
version = "0.6.12"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "29a16783dd1a47849b8c8133c9cd3eb2112cfbc6901670af3dba47c8bbfb07d3"
dependencies = [
"cc",
"objc2",
"objc2-foundation",
"time",
]
[[package]]
name = "markup5ever"
version = "0.14.1"
@@ -2957,6 +2970,20 @@ version = "0.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0676bb32a98c1a483ce53e500a81ad9c3d5b3f7c920c28c24e9cb0980d0b5bc8"
[[package]]
name = "notify-rust"
version = "4.12.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "21af20a1b50be5ac5861f74af1a863da53a11c38684d9818d82f1c42f7fdc6c2"
dependencies = [
"futures-lite",
"log",
"mac-notification-sys",
"serde",
"tauri-winrt-notification",
"zbus",
]
[[package]]
name = "num-bigint"
version = "0.4.6"
@@ -3901,6 +3928,15 @@ dependencies = [
"memchr",
]
[[package]]
name = "quick-xml"
version = "0.37.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "331e97a1af0bf59823e6eadffe373d7b27f485be8748f71471c662c1f269b7fb"
dependencies = [
"memchr",
]
[[package]]
name = "quick-xml"
version = "0.38.4"
@@ -5151,6 +5187,25 @@ dependencies = [
"url",
]
[[package]]
name = "tauri-plugin-notification"
version = "2.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "01fc2c5ff41105bd1f7242d8201fdf3efd70749b82fa013a17f2126357d194cc"
dependencies = [
"log",
"notify-rust",
"rand 0.9.2",
"serde",
"serde_json",
"serde_repr",
"tauri",
"tauri-plugin",
"thiserror 2.0.18",
"time",
"url",
]
[[package]]
name = "tauri-plugin-opener"
version = "2.5.3"
@@ -5289,6 +5344,18 @@ dependencies = [
"toml 0.9.12+spec-1.1.0",
]
[[package]]
name = "tauri-winrt-notification"
version = "0.7.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0b1e66e07de489fe43a46678dd0b8df65e0c973909df1b60ba33874e297ba9b9"
dependencies = [
"quick-xml 0.37.5",
"thiserror 2.0.18",
"windows 0.61.3",
"windows-version",
]
[[package]]
name = "tempfile"
version = "3.27.0"

View File

@@ -1,6 +1,6 @@
[package]
name = "chrono-snap"
version = "0.1.0"
version = "0.2.1"
description = "An app to record screens and events"
authors = ["you"]
edition = "2021"
@@ -32,6 +32,7 @@ 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"] }
tauri-plugin-notification = "2.3.3"
[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
tauri-plugin-autostart = "2"

View File

@@ -5,6 +5,7 @@
"windows": ["main"],
"permissions": [
"core:default",
"opener:default"
"opener:default",
"notification:default"
]
}

View File

@@ -20,6 +20,15 @@ pub struct Event {
pub content: String,
}
#[derive(Serialize, Deserialize, Clone)]
pub struct Reminder {
pub id: i64,
pub date: String,
pub minute: i32,
pub content: String,
pub is_completed: bool,
}
pub fn init_db(path: &str) -> anyhow::Result<()> {
let conn = Connection::open(path)?;
@@ -49,6 +58,17 @@ pub fn init_db(path: &str) -> anyhow::Result<()> {
[],
)?;
conn.execute(
"CREATE TABLE IF NOT EXISTS reminders (
id INTEGER PRIMARY KEY AUTOINCREMENT,
date TEXT NOT NULL,
minute INTEGER NOT NULL,
content TEXT NOT NULL,
is_completed BOOLEAN NOT NULL DEFAULT 0
)",
[],
)?;
Ok(())
}
@@ -152,3 +172,51 @@ pub fn delete_event(path: &str, id: i64) -> anyhow::Result<()> {
conn.execute("DELETE FROM events WHERE id = ?1", params![id])?;
Ok(())
}
pub fn get_reminders(path: &str, date: &str) -> anyhow::Result<Vec<Reminder>> {
let conn = Connection::open(path)?;
let mut stmt = conn.prepare("SELECT id, date, minute, content, is_completed FROM reminders WHERE date = ?1 ORDER BY minute")?;
let iter = stmt.query_map(params![date], |row| {
Ok(Reminder {
id: row.get(0)?,
date: row.get(1)?,
minute: row.get(2)?,
content: row.get(3)?,
is_completed: row.get(4)?,
})
})?;
let mut reminders = Vec::new();
for r in iter {
reminders.push(r?);
}
Ok(reminders)
}
pub fn save_reminder(path: &str, reminder: Reminder) -> anyhow::Result<i64> {
let conn = Connection::open(path)?;
if reminder.id > 0 {
conn.execute(
"UPDATE reminders SET date=?1, minute=?2, content=?3, is_completed=?4 WHERE id=?5",
params![reminder.date, reminder.minute, reminder.content, reminder.is_completed, reminder.id],
)?;
Ok(reminder.id)
} else {
conn.execute(
"INSERT INTO reminders (date, minute, content, is_completed) VALUES (?1, ?2, ?3, ?4)",
params![reminder.date, reminder.minute, reminder.content, reminder.is_completed],
)?;
Ok(conn.last_insert_rowid())
}
}
pub fn delete_reminder(path: &str, id: i64) -> anyhow::Result<()> {
let conn = Connection::open(path)?;
conn.execute("DELETE FROM reminders WHERE id = ?1", params![id])?;
Ok(())
}
pub fn toggle_reminder(path: &str, id: i64, is_completed: bool) -> anyhow::Result<()> {
let conn = Connection::open(path)?;
conn.execute("UPDATE reminders SET is_completed=?1 WHERE id=?2", params![is_completed, id])?;
Ok(())
}

View File

@@ -72,6 +72,34 @@ pub fn delete_event(state: tauri::State<'_, AppState>, id: i64) -> Result<(), St
crate::db::delete_event(path, id).map_err(|e| e.to_string())
}
#[tauri::command]
pub fn get_reminders(state: tauri::State<'_, AppState>, date: String) -> Result<Vec<crate::db::Reminder>, String> {
let path = state.db_path.lock().unwrap();
let path = path.as_ref().ok_or("Database path not set")?;
crate::db::get_reminders(path, &date).map_err(|e| e.to_string())
}
#[tauri::command]
pub fn save_reminder(state: tauri::State<'_, AppState>, reminder: crate::db::Reminder) -> Result<i64, String> {
let path = state.db_path.lock().unwrap();
let path = path.as_ref().ok_or("Database path not set")?;
crate::db::save_reminder(path, reminder).map_err(|e| e.to_string())
}
#[tauri::command]
pub fn delete_reminder(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_reminder(path, id).map_err(|e| e.to_string())
}
#[tauri::command]
pub fn toggle_reminder(state: tauri::State<'_, AppState>, id: i64, is_completed: bool) -> Result<(), String> {
let path = state.db_path.lock().unwrap();
let path = path.as_ref().ok_or("Database path not set")?;
crate::db::toggle_reminder(path, id, is_completed).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);

View File

@@ -11,6 +11,7 @@ pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_dialog::init())
.plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_notification::init())
.plugin(tauri_plugin_store::Builder::new().build())
.plugin(tauri_plugin_autostart::init(
tauri_plugin_autostart::MacosLauncher::LaunchAgent,
@@ -31,6 +32,10 @@ pub fn run() {
engine::get_events_range,
engine::save_event,
engine::delete_event,
engine::get_reminders,
engine::save_reminder,
engine::delete_reminder,
engine::toggle_reminder,
engine::write_file
])
.setup(|app| {

View File

@@ -1,7 +1,7 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "chrono-snap",
"version": "0.1.0",
"productName": "ChronoSnap",
"version": "0.2.1",
"identifier": "top.volan.chrono-snap",
"build": {
"beforeDevCommand": "pnpm dev",
@@ -12,13 +12,13 @@
"app": {
"windows": [
{
"title": "瞬影 - 时间记录 v0.1.0",
"title": "瞬影 - 时间记录 v0.2.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": ["**"]

File diff suppressed because it is too large Load Diff

View File

@@ -1,19 +1,41 @@
@import "tailwindcss";
@theme {
--color-bg-main: var(--bg-main);
--color-bg-sidebar: var(--bg-sidebar);
--color-bg-card: var(--bg-card);
--color-bg-input: var(--bg-input);
--color-bg-hover: var(--bg-hover);
--color-border-main: var(--border-main);
--color-text-main: var(--text-main);
--color-text-sec: var(--text-sec);
}
:root {
--primary-color: #007AFF;
--primary-hover: #0063CC;
--bg-light: #FBFBFD;
--sidebar-bg: #F8FAFD;
--bg-main: #FBFBFD;
--bg-sidebar: #F8FAFD;
--bg-card: #FFFFFF;
--bg-input: #F2F2F7;
--bg-hover: #E5E5E7;
--border-main: #E5E5E7;
--text-main: #1D1D1F;
--text-sec: #86868B;
--border-color: #E5E5E7;
--card-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
--btn-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
--radius-card: 24px;
--radius-btn: 12px;
}
html.dark {
--bg-main: #000000;
--bg-sidebar: #1C1C1E;
--bg-card: #1C1C1E;
--bg-input: #2C2C2E;
--bg-hover: #3A3A3C;
--border-main: #38383A;
--text-main: #F5F5F7;
--text-sec: #98989D;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: var(--bg-light);

View File

@@ -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>

Before

Width:  |  Height:  |  Size: 496 B

52
src/components/Setup.vue Normal file
View File

@@ -0,0 +1,52 @@
<script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import { open, save } from "@tauri-apps/plugin-dialog";
import { Settings, FolderOpen, Plus } from "lucide-vue-next";
import { savePath, dbPath, isSetupComplete, loadTags, loadEvents } from "../store";
import { load as loadStore } from "@tauri-apps/plugin-store";
const selectFolder = async () => { const s = await open({ directory: true }); if (s) savePath.value = s as string; };
const selectDBFile = async () => { const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
const createDBFile = async () => { const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
const completeSetup = async () => {
if (savePath.value && dbPath.value) {
const store = await loadStore("config.json");
await store.set("savePath", savePath.value);
await store.set("dbPath", dbPath.value);
await store.save();
await invoke("update_db_path", { path: dbPath.value });
isSetupComplete.value = true;
await loadTags(); await loadEvents();
}
};
</script>
<template>
<div class="flex-1 flex items-center justify-center p-10 bg-bg-main h-screen">
<div class="bg-bg-card p-12 rounded-4xl shadow-2xl max-w-lg text-center border border-border-main">
<Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
<h1 class="text-3xl font-bold mb-4">初始化设置</h1>
<div class="space-y-6 text-left mb-10">
<div class="space-y-2">
<label class="text-xs font-bold text-text-sec">截图保存目录</label>
<div class="flex gap-2">
<input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
<button @click="selectFolder" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button>
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-bold text-text-sec">数据库文件</label>
<div class="flex gap-2">
<input type="text" readonly :value="dbPath" placeholder="请选择或创建数据库文件..." class="flex-1 bg-bg-input rounded-xl px-4 py-2.5 text-sm outline-none" />
<div class="flex gap-1">
<button @click="selectDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
<button @click="createDBFile" class="bg-bg-card border border-border-main p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :size="18" /></button>
</div>
</div>
</div>
</div>
<button @click="completeSetup" :disabled="!savePath || !dbPath" class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold w-full disabled:opacity-50 transition-all active:scale-95">开始使用</button>
</div>
</div>
</template>

View File

@@ -0,0 +1,147 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { save } from "@tauri-apps/plugin-dialog";
import { X, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
import { currentDate, showToast, getTagName, logicalMinutesToTime, toISODate } from "../../store";
import { DBEvent } from "../../types";
defineEmits(['close']);
const startCalendarRef = ref<HTMLElement | null>(null);
const endCalendarRef = ref<HTMLElement | null>(null);
const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
const exportEndDate = ref(currentDate.value);
const exportStartMonth = ref(new Date(exportStartDate.value));
const exportEndMonth = ref(new Date(exportEndDate.value));
const isExportStartCalendarOpen = ref(false);
const isExportEndCalendarOpen = ref(false);
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (isExportStartCalendarOpen.value && startCalendarRef.value && !startCalendarRef.value.contains(target)) {
isExportStartCalendarOpen.value = false;
}
if (isExportEndCalendarOpen.value && endCalendarRef.value && !endCalendarRef.value.contains(target)) {
isExportEndCalendarOpen.value = false;
}
};
onMounted(() => {
window.addEventListener('mousedown', handleClickOutside);
});
onUnmounted(() => {
window.removeEventListener('mousedown', handleClickOutside);
});
const exportStartCalendarDays = computed(() => {
const y = exportStartMonth.value.getFullYear();
const m = exportStartMonth.value.getMonth();
const firstDay = new Date(y, m, 1).getDay();
const daysInMonth = new Date(y, m + 1, 0).getDate();
const days = [];
const padding = (firstDay + 6) % 7;
for (let i = 0; i < padding; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
return days;
});
const exportEndCalendarDays = computed(() => {
const y = exportEndMonth.value.getFullYear();
const m = exportEndMonth.value.getMonth();
const firstDay = new Date(y, m, 1).getDay();
const daysInMonth = new Date(y, m + 1, 0).getDate();
const days = [];
const padding = (firstDay + 6) % 7;
for (let i = 0; i < padding; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
return days;
});
const handleExport = async () => {
try {
const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
if (events.length === 0) {
showToast("所选范围内没有找到记录", "error");
return;
}
const savePath = await save({
filters: [{ name: "JSON 文件", extensions: ["json"] }],
defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
});
if (savePath) {
const exportData = events.map(e => ({
date: e.date,
start_time: logicalMinutesToTime(e.start_minute),
end_time: logicalMinutesToTime(e.end_minute),
main_tag: getTagName(e.main_tag_id),
sub_tag: getTagName(e.sub_tag_id),
content: e.content
}));
await invoke("write_file", { path: savePath, content: JSON.stringify(exportData, null, 2) });
showToast("导出成功");
}
} catch (e) {
showToast("导出失败: " + e, "error");
}
};
</script>
<template>
<div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
<div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl overflow-visible flex flex-col animate-in fade-in zoom-in duration-200">
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">导出记录</h2><button @click="$emit('close')"><X :size="24" /></button></div>
<div class="p-10 space-y-8">
<div class="space-y-4">
<div class="space-y-2">
<label class="text-[10px] font-bold text-text-sec">日期范围</label>
<div class="flex gap-4 items-center">
<div class="relative flex-1" ref="startCalendarRef">
<button @click="isExportStartCalendarOpen = !isExportStartCalendarOpen; isExportEndCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
<Calendar :size="16" class="absolute left-4 text-text-sec" />
{{ exportStartDate }}
</button>
<div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
<div class="flex items-center justify-between mb-4">
<button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
<span class="text-sm font-black">{{ exportStartMonth.getFullYear() }} {{ exportStartMonth.getMonth()+1 }}</span>
<button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
</div>
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
<div class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in exportStartCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="exportStartDate = toISODate(date); isExportStartCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === exportStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
</div>
</div>
</div>
</div>
<span class="text-text-sec font-black text-xs"></span>
<div class="relative flex-1" ref="endCalendarRef">
<button @click="isExportEndCalendarOpen = !isExportEndCalendarOpen; isExportStartCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
<Calendar :size="16" class="absolute left-4 text-text-sec" />
{{ exportEndDate }}
</button>
<div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
<div class="flex items-center justify-between mb-4">
<button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
<span class="text-sm font-black">{{ exportEndMonth.getFullYear() }} {{ exportEndMonth.getMonth()+1 }}</span>
<button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
</div>
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
<div class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in exportEndCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="exportEndDate = toISODate(date); isExportEndCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === exportEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button @click="handleExport" :disabled="!exportStartDate || !exportEndDate" class="w-full bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">导出为 JSON</button>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,199 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { X, Plus, Trash2, Check, Clock, Calendar, Edit2 } from "lucide-vue-next";
import { invoke } from "@tauri-apps/api/core";
import { reminders, loadReminders, showToast, currentDate, logicalMinutesToTime, logicalMinutesFromTime, currentLogicalMinute, getLogicDateStr, TIME_OFFSET_MINUTES } from "../../store";
import { Reminder } from "../../types";
const emit = defineEmits(["close"]);
const getInitialMinute = () => {
const now = new Date();
const later = new Date(now.getTime() + 10 * 60000);
const h = later.getHours();
const m = later.getMinutes();
return logicalMinutesFromTime(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
};
const newContent = ref("");
const newMinute = ref(getInitialMinute());
const editingId = ref<number | null>(null);
const isTimePickerOpen = ref(false);
const timePickerRef = ref<HTMLElement | null>(null);
const openTimePicker = async () => {
isTimePickerOpen.value = !isTimePickerOpen.value;
if (isTimePickerOpen.value) {
await nextTick();
const activeItems = timePickerRef.value?.querySelectorAll('.bg-\\[\\#007AFF\\].text-white');
activeItems?.forEach(el => el.scrollIntoView({ block: 'center' }));
}
};
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (isTimePickerOpen.value && timePickerRef.value && !timePickerRef.value.contains(target)) {
isTimePickerOpen.value = false;
}
};
onMounted(() => window.addEventListener('mousedown', handleClickOutside));
onUnmounted(() => window.removeEventListener('mousedown', handleClickOutside));
const addReminder = async () => {
if (!newContent.value.trim()) {
showToast("请输入提醒内容", "error");
return;
}
const isEditing = editingId.value !== null;
try {
await invoke("save_reminder", {
reminder: { id: editingId.value || 0, date: currentDate.value, minute: newMinute.value, content: newContent.value, is_completed: false }
});
newContent.value = "";
newMinute.value = getInitialMinute();
editingId.value = null;
await loadReminders();
showToast(isEditing ? "提醒已更新" : "提醒已添加");
} catch (e) {
showToast("保存失败: " + e, "error");
}
};
const editReminder = (r: Reminder) => {
editingId.value = r.id;
newContent.value = r.content;
newMinute.value = r.minute;
};
const cancelEdit = () => {
editingId.value = null;
newContent.value = "";
newMinute.value = getInitialMinute();
};
const toggleStatus = async (r: Reminder) => {
try {
await invoke("toggle_reminder", { id: r.id, isCompleted: !r.is_completed });
await loadReminders();
} catch (e) {}
};
const deleteItem = async (id: number) => {
try {
await invoke("delete_reminder", { id });
await loadReminders();
showToast("提醒已删除");
} catch (e) {}
};
const safeReminders = computed(() => Array.isArray(reminders.value) ? reminders.value : []);
const isPast = computed(() => currentDate.value < getLogicDateStr());
const isToday = computed(() => currentDate.value === getLogicDateStr());
const overdueReminders = computed(() => safeReminders.value.filter(r =>
!r.is_completed && (isPast.value || (isToday.value && r.minute < currentLogicalMinute.value))
));
const upcomingReminders = computed(() => safeReminders.value.filter(r =>
!r.is_completed && (!isPast.value && (!isToday.value || r.minute >= currentLogicalMinute.value))
));
const completedReminders = computed(() => safeReminders.value.filter(r => r.is_completed));
</script>
<template>
<div class="fixed inset-0 z-110 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="emit('close')">
<div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden flex flex-col h-[80vh] max-h-175">
<div class="p-8 border-b border-border-main/50 flex justify-between items-center bg-bg-card/80 backdrop-blur-md sticky top-0 z-10">
<h2 class="text-2xl font-bold flex items-center gap-3"><Clock :size="24" class="text-[#007AFF]"/> 提醒事项</h2>
<button @click="emit('close')" class="p-2 hover:bg-bg-input rounded-xl text-text-sec"><X :size="24" /></button>
</div>
<div class="p-6 border-b border-border-main/50 bg-bg-input/30 relative">
<form @submit.prevent="addReminder" class="flex items-center gap-3">
<div ref="timePickerRef" class="relative">
<button type="button" @click="openTimePicker" class="bg-bg-card border border-border-main rounded-xl px-4 py-3 text-sm font-bold flex items-center justify-center hover:bg-bg-hover transition-all focus:border-[#007AFF]/50 w-24 outline-none" :class="{ 'ring-2 ring-[#007AFF]/50 border-transparent': editingId }">
{{ logicalMinutesToTime(newMinute) }}
</button>
<div v-if="isTimePickerOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64 w-48">
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
<button type="button" v-for="h in 24" :key="h" @click="newMinute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String((newMinute + TIME_OFFSET_MINUTES) % 60).padStart(2,'0')}`)" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="Math.floor((newMinute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">
{{ String((h-1+3)%24).padStart(2,'0') }}
</button>
</div>
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
<button type="button" v-for="m in 60" :key="m" @click="newMinute = Math.floor(newMinute / 60) * 60 + (m-1); isTimePickerOpen = false" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="newMinute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">
{{ String(m-1).padStart(2,'0') }}
</button>
</div>
</div>
</div>
<div class="flex-1 relative">
<input type="text" v-model="newContent" :placeholder="editingId ? '编辑提醒...' : '添加新提醒...'" class="w-full bg-bg-card border border-border-main rounded-xl px-4 py-3 text-sm font-bold outline-none focus:border-[#007AFF]/50 transition-all pr-10" :class="{ 'ring-2 ring-[#007AFF]/50 border-transparent': editingId }" />
<button v-if="editingId" type="button" @click="cancelEdit" class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-text-sec hover:bg-bg-input rounded-lg"><X :size="16" /></button>
</div>
<button type="submit" class="bg-[#007AFF] text-white p-3 rounded-xl hover:brightness-110 transition-all shadow-md shadow-[#007AFF]/20"><Check v-if="editingId" :size="20" /><Plus v-else :size="20" /></button>
</form>
</div>
<div class="flex-1 overflow-y-auto p-6 space-y-6 no-scrollbar">
<!-- 已超时未办 -->
<div v-if="overdueReminders && overdueReminders.length > 0">
<h3 class="text-xs font-bold text-[#FF3B30] mb-3 uppercase tracking-wider">已超时未办</h3>
<div class="space-y-2 mb-6">
<div v-for="r in overdueReminders" :key="r.id" class="flex items-center gap-3 bg-[#FF3B30]/10 p-3 rounded-2xl border border-[#FF3B30]/30 group transition-all hover:bg-[#FF3B30]/20 hover:shadow-sm" :class="{ 'ring-2 ring-[#FF3B30]/50': editingId === r.id }">
<button @click="toggleStatus(r)" class="w-6 h-6 rounded-full border-2 border-[#FF3B30]/50 flex items-center justify-center text-transparent hover:border-[#FF3B30] transition-all"><Check :size="14" class="opacity-0 group-hover:opacity-50 group-hover:text-[#FF3B30]"/></button>
<div class="font-bold text-[#FF3B30] text-sm w-12">{{ logicalMinutesToTime(r.minute) }}</div>
<div class="flex-1 font-medium text-sm text-[#FF3B30] truncate" :class="{ 'opacity-50': editingId === r.id }">{{ r.content }}</div>
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
<button @click="editReminder(r)" class="p-2 text-text-sec hover:text-[#007AFF] rounded-lg hover:bg-[#007AFF]/10"><Edit2 :size="16" /></button>
<button @click="deleteItem(r.id)" class="p-2 text-text-sec hover:text-[#FF3B30] rounded-lg hover:bg-[#FF3B30]/20"><Trash2 :size="16" /></button>
</div>
</div>
</div>
</div>
<!-- 即将到来 -->
<div v-if="upcomingReminders && upcomingReminders.length > 0">
<h3 class="text-xs font-bold text-text-sec mb-3 uppercase tracking-wider">即将到来</h3>
<div class="space-y-2 mb-6">
<div v-for="r in upcomingReminders" :key="r.id" class="flex items-center gap-3 bg-bg-input/50 p-3 rounded-2xl border border-border-main/30 group transition-all hover:bg-bg-input hover:shadow-sm" :class="{ 'ring-2 ring-[#007AFF]/50 border-transparent': editingId === r.id }">
<button @click="toggleStatus(r)" class="w-6 h-6 rounded-full border-2 border-border-main flex items-center justify-center text-transparent hover:border-[#007AFF] transition-all"><Check :size="14" class="opacity-0 group-hover:opacity-30 group-hover:text-[#007AFF]"/></button>
<div class="font-bold text-[#007AFF] text-sm w-12">{{ logicalMinutesToTime(r.minute) }}</div>
<div class="flex-1 font-medium text-sm text-text-main truncate" :class="{ 'opacity-50': editingId === r.id }">{{ r.content }}</div>
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
<button @click="editReminder(r)" class="p-2 text-text-sec hover:text-[#007AFF] rounded-lg hover:bg-[#007AFF]/10"><Edit2 :size="16" /></button>
<button @click="deleteItem(r.id)" class="p-2 text-text-sec hover:text-[#FF3B30] rounded-lg hover:bg-[#FF3B30]/10"><Trash2 :size="16" /></button>
</div>
</div>
</div>
</div>
<!-- 已完成 -->
<div v-if="completedReminders && completedReminders.length > 0">
<h3 class="text-xs font-bold text-text-sec mb-3 uppercase tracking-wider">已完成</h3>
<div class="space-y-2 opacity-60">
<div v-for="r in completedReminders" :key="r.id" class="flex items-center gap-3 bg-bg-input/30 p-3 rounded-2xl border border-transparent group transition-all" :class="{ 'ring-2 ring-border-main': editingId === r.id }">
<button @click="toggleStatus(r)" class="w-6 h-6 rounded-full bg-[#007AFF] flex items-center justify-center text-white"><Check :size="14" /></button>
<div class="font-bold text-text-sec text-sm w-12 line-through">{{ logicalMinutesToTime(r.minute) }}</div>
<div class="flex-1 font-medium text-sm text-text-sec line-through truncate" :class="{ 'opacity-50': editingId === r.id }">{{ r.content }}</div>
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
<button @click="editReminder(r)" class="p-2 text-text-sec hover:text-[#007AFF] rounded-lg hover:bg-[#007AFF]/10"><Edit2 :size="16" /></button>
<button @click="deleteItem(r.id)" class="p-2 text-text-sec hover:text-[#FF3B30] rounded-lg hover:bg-[#FF3B30]/10"><Trash2 :size="16" /></button>
</div>
</div>
</div>
</div>
<!-- 无提醒事项 -->
<div v-if="(!overdueReminders || overdueReminders.length === 0) && (!upcomingReminders || upcomingReminders.length === 0) && (!completedReminders || completedReminders.length === 0)" class="flex flex-col items-center justify-center h-full text-text-sec opacity-40 mt-10">
<Calendar :size="48" class="mb-4" />
<p class="font-bold">今天没有提醒事项</p>
</div>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,66 @@
<script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import { open, save } from "@tauri-apps/plugin-dialog";
import { X, FolderOpen, Plus } from "lucide-vue-next";
import { savePath, dbPath, theme, captureInterval, retainDays } from "../../store";
import { load as loadStore } from "@tauri-apps/plugin-store";
defineEmits(['close']);
const updateSettings = async () => {
const store = await loadStore("config.json");
await store.set("savePath", savePath.value);
await store.set("dbPath", dbPath.value);
await store.set("retainDays", retainDays.value);
await store.set("captureInterval", captureInterval.value);
await store.set("theme", theme.value);
await store.save();
await invoke("update_db_path", { path: dbPath.value });
await invoke("update_interval", { seconds: captureInterval.value });
if (theme.value === 'dark') document.documentElement.classList.add('dark');
else if (theme.value === 'light') document.documentElement.classList.remove('dark');
else {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark');
else document.documentElement.classList.remove('dark');
}
};
const selectFolder = async () => {
const s = await open({ directory: true });
if (s) { savePath.value = s as string; await updateSettings(); }
};
const selectDBFile = async () => {
const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] });
if (s) { dbPath.value = s as string; await updateSettings(); }
};
const createDBFile = async () => {
const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] });
if (s) { dbPath.value = s as string; await updateSettings(); }
};
</script>
<template>
<div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
<div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-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="$emit('close')"><X :size="24" /></button></div>
<div class="p-10 space-y-8">
<div class="space-y-3"><label class="text-xs font-bold text-text-sec">截图保存位置</label><div class="flex gap-2"><input type="text" readonly :value="savePath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><button @click="selectFolder" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button></div></div>
<div class="space-y-3"><label class="text-xs font-bold text-text-sec">数据库文件</label><div class="flex gap-2"><input type="text" readonly :value="dbPath" class="flex-1 bg-bg-input rounded-xl px-4 py-2 text-sm outline-none" /><div class="flex gap-1"><button @click="selectDBFile" title="打开现有" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile" title="新建" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><Plus :size="18" /></button></div></div></div>
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">主题设置</label></div>
<div class="flex bg-bg-input rounded-xl p-1 gap-1">
<button @click="theme = 'light'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'light' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">浅色</button>
<button @click="theme = 'dark'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'dark' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">深色</button>
<button @click="theme = 'system'; updateSettings()" class="flex-1 py-1.5 text-xs font-bold rounded-lg transition-all" :class="theme === 'system' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">跟随系统</button>
</div>
</div>
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">截图间隔</label><span class="text-xs font-bold text-[#007AFF]">{{ captureInterval }}s</span></div><input type="range" v-model.number="captureInterval" min="60" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-bg-hover accent-[#007AFF]" /></div>
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">清理策略</label><span class="text-xs font-bold text-[#007AFF]">{{ retainDays }}</span></div><input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-1 bg-bg-hover accent-[#007AFF]" /></div>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,96 @@
<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { X, Trash2, ChevronRight, ChevronDown } from "lucide-vue-next";
import { mainTags, getSubTags, getTagName, showToast, loadTags } from "../../store";
defineEmits(['close']);
const expandedMainTags = ref<number[]>([]);
const toggleMainTag = (id: number) => {
const index = expandedMainTags.value.indexOf(id);
if (index > -1) expandedMainTags.value.splice(index, 1);
else expandedMainTags.value.push(id);
};
const isTagSelectOpen = ref(false);
const newTagName = ref("");
const newTagParent = ref<number | null>(null);
const newTagColor = ref("#007AFF");
const handleAddTag = async () => {
try {
await invoke("add_tag", { name: newTagName.value, parentId: newTagParent.value, color: newTagColor.value });
await loadTags();
showToast("标签添加成功");
newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF";
} catch (e) {
showToast("添加失败: " + e, "error");
}
};
const handleDeleteTag = async (id: number) => {
try {
await invoke("delete_tag", { id });
await loadTags();
showToast("标签已删除");
} catch (e: any) {
if (e.toString().includes("FOREIGN KEY")) {
showToast("该标签正在被使用,无法删除", "error");
} else {
showToast("删除失败: " + e, "error");
}
}
};
</script>
<template>
<div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
<div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">标签管理</h2><button @click="$emit('close')"><X :size="24" /></button></div>
<div class="flex-1 overflow-hidden p-10 flex gap-10">
<div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
<div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
<div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-bg-input rounded-xl cursor-pointer">
<div class="flex items-center gap-3">
<ChevronRight :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
<div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
<span class="font-bold">{{ mt.name }}</span>
</div>
<button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
</div>
<div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
<div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-bg-input rounded-lg">
<span class="text-sm">{{ st.name }}</span>
<button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button>
</div>
</div>
</div>
</div>
<div class="w-64 bg-bg-input p-6 rounded-3xl space-y-4 h-fit">
<h3 class="font-bold text-xs text-text-sec uppercase">添加标签</h3>
<div class="space-y-1">
<label class="text-[10px] font-bold text-text-sec ml-1">标签名称</label>
<input v-model="newTagName" placeholder="输入名称..." class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
</div>
<div class="space-y-1 relative">
<label class="text-[10px] font-bold text-text-sec ml-1">父级标签</label>
<button @click="isTagSelectOpen = !isTagSelectOpen" class="w-full bg-bg-card rounded-xl px-4 py-2.5 text-sm text-left flex justify-between items-center border border-transparent focus:border-[#007AFF] transition-all">
<span>{{ getTagName(newTagParent) }}</span>
<ChevronDown :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" />
</button>
<div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-2xl shadow-xl border border-border-main z-60 overflow-hidden py-2 animate-in fade-in zoom-in-95 duration-200">
<div @click="newTagParent = null; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === null }">-- --</div>
<div v-for="t in mainTags" :key="t.id" @click="newTagParent = t.id; isTagSelectOpen = false" class="px-4 py-2 text-sm hover:bg-bg-input cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === t.id }">{{ t.name }}</div>
</div>
</div>
<div v-if="newTagParent === null" class="space-y-1">
<label class="text-[10px] font-bold text-text-sec ml-1">主题颜色</label>
<div class="flex flex-wrap gap-2"><button v-for="c in ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6']" :key="c" @click="newTagColor = c" class="w-5 h-5 rounded-full border-2 transition-all" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
</div>
<button @click="handleAddTag" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-3 rounded-xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all">创建</button>
</div>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,179 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { BarChart2, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
import {
dashboardStats, dashboardRange, dailyAverageMode,
customStartDate, customEndDate,
isStartCalendarOpen, isEndCalendarOpen,
formatMinutes, getTagColor, getTagName
} from "../../store/dashboardStore";
import { toISODate } from "../../store";
const startCalendarRef = ref<HTMLElement | null>(null);
const endCalendarRef = ref<HTMLElement | null>(null);
const startCalendarMonth = ref(new Date(customStartDate.value));
const endCalendarMonth = ref(new Date(customEndDate.value));
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (isStartCalendarOpen.value && startCalendarRef.value && !startCalendarRef.value.contains(target)) {
isStartCalendarOpen.value = false;
}
if (isEndCalendarOpen.value && endCalendarRef.value && !endCalendarRef.value.contains(target)) {
isEndCalendarOpen.value = false;
}
};
onMounted(() => {
window.addEventListener('mousedown', handleClickOutside);
});
onUnmounted(() => {
window.removeEventListener('mousedown', handleClickOutside);
});
const getCalendarDays = (month: Date) => {
const y = month.getFullYear();
const m = month.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 startCalendarDays = computed(() => getCalendarDays(startCalendarMonth.value));
const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
</script>
<template>
<div class="absolute inset-0 overflow-y-auto no-scrollbar p-10 bg-bg-main animate-in fade-in zoom-in-95 duration-200">
<div class="max-w-3xl mx-auto">
<!-- Top Filters -->
<div class="flex flex-col gap-6 mb-10">
<div class="flex justify-between items-center">
<div class="flex bg-bg-input rounded-xl p-1.5 gap-1 border border-border-main/50 shadow-inner">
<button @click="dashboardRange = 'today'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === 'today' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">今日</button>
<button @click="dashboardRange = '7days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '7days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'"> 7 </button>
<button @click="dashboardRange = '30days'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === '30days' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'"> 30 </button>
<button @click="dashboardRange = 'custom'" class="px-5 py-2 text-xs font-bold rounded-lg transition-all" :class="dashboardRange === 'custom' ? 'bg-[#007AFF] shadow-lg text-white' : 'text-text-sec hover:text-text-main hover:bg-bg-card'">自定义</button>
</div>
<div v-if="dashboardRange !== 'today'" class="flex bg-bg-input rounded-xl p-1 gap-1 border border-border-main/50 shadow-inner">
<button @click="dailyAverageMode = 'natural'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'natural' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">自然天数 ({{dashboardStats.naturalDays}})</button>
<button @click="dailyAverageMode = 'recorded'" class="px-3 py-1.5 text-[10px] font-bold rounded-lg transition-all" :class="dailyAverageMode === 'recorded' ? 'bg-bg-card shadow-sm text-text-main' : 'text-text-sec hover:text-text-main'">记录天数 ({{dashboardStats.recordedDays}})</button>
</div>
</div>
<!-- Custom Date Pickers -->
<div v-if="dashboardRange === 'custom'" class="flex items-center gap-4 animate-in slide-in-from-top-2 duration-300">
<div class="relative flex-1" ref="startCalendarRef">
<button @click="isStartCalendarOpen = !isStartCalendarOpen; isEndCalendarOpen = false" class="w-full bg-bg-card border border-border-main rounded-xl pl-10 pr-4 py-2.5 text-xs font-bold text-left flex items-center hover:bg-bg-input transition-all">
<Calendar :size="16" class="absolute left-3.5 text-[#007AFF]" />
<span class="text-text-sec mr-2"></span> {{ customStartDate }}
</button>
<div v-if="isStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 w-72 animate-in fade-in zoom-in-95">
<div class="flex items-center justify-between mb-4">
<button @click="startCalendarMonth = new Date(startCalendarMonth.getFullYear(), startCalendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="16"/></button>
<span class="text-sm font-black">{{ startCalendarMonth.getFullYear() }} {{ startCalendarMonth.getMonth()+1 }}</span>
<button @click="startCalendarMonth = new Date(startCalendarMonth.getFullYear(), startCalendarMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="16"/></button>
</div>
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
<div class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in startCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="customStartDate = toISODate(date); isStartCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === customStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
</div>
</div>
</div>
</div>
<div class="text-text-sec font-black text-xs"></div>
<div class="relative flex-1" ref="endCalendarRef">
<button @click="isEndCalendarOpen = !isEndCalendarOpen; isStartCalendarOpen = false" class="w-full bg-bg-card border border-border-main rounded-xl pl-10 pr-4 py-2.5 text-xs font-bold text-left flex items-center hover:bg-bg-input transition-all">
<Calendar :size="16" class="absolute left-3.5 text-[#007AFF]" />
<span class="text-text-sec mr-2"></span> {{ customEndDate }}
</button>
<div v-if="isEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 w-72 animate-in fade-in zoom-in-95">
<div class="flex items-center justify-between mb-4">
<button @click="endCalendarMonth = new Date(endCalendarMonth.getFullYear(), endCalendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="16"/></button>
<span class="text-sm font-black">{{ endCalendarMonth.getFullYear() }} {{ endCalendarMonth.getMonth()+1 }}</span>
<button @click="endCalendarMonth = new Date(endCalendarMonth.getFullYear(), endCalendarMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="16"/></button>
</div>
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
<div class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in endCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="customEndDate = toISODate(date); isEndCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === customEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Overview Cards -->
<div class="grid grid-cols-2 gap-6 mb-10">
<div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
<div class="text-xs font-bold text-text-sec mb-2">总记录时长</div>
<div class="text-4xl font-black text-text-main">{{ formatMinutes(dashboardStats.totalMinutes) }}</div>
</div>
<div class="bg-bg-card border border-border-main rounded-3xl p-6 shadow-sm flex flex-col justify-center">
<div class="text-xs font-bold text-text-sec mb-2">日均时长</div>
<div class="text-4xl font-black text-[#007AFF]">{{ formatMinutes(dashboardStats.dailyAverage) }}</div>
</div>
</div>
<!-- Visual Bar -->
<div class="mb-12 bg-bg-card border border-border-main p-6 rounded-3xl shadow-sm">
<h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">占比总览</h3>
<div class="h-6 w-full bg-bg-input rounded-full overflow-hidden flex shadow-inner mb-4 border border-border-main/30">
<div v-for="tag in dashboardStats.mainTags" :key="tag.id" :style="{ width: tag.percentage + '%', backgroundColor: getTagColor(tag.id) }" class="h-full first:rounded-l-full last:rounded-r-full border-r border-bg-main/20 last:border-0 transition-all duration-500 hover:brightness-110 cursor-pointer" :title="getTagName(tag.id) + ' ' + tag.percentage.toFixed(1) + '%'"></div>
</div>
<div class="flex flex-wrap gap-4 px-2">
<div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
<span class="text-xs font-bold text-text-sec">{{ getTagName(tag.id) }} <span class="text-text-main ml-1">{{ tag.percentage.toFixed(0) }}%</span></span>
</div>
</div>
</div>
<!-- Detailed List -->
<div class="space-y-4">
<h3 class="text-sm font-bold text-text-sec mb-4 uppercase tracking-wider">时间分布明细</h3>
<div v-for="tag in dashboardStats.mainTags" :key="tag.id" class="bg-bg-card border border-border-main rounded-3xl p-5 shadow-sm transition-all hover:border-border-main/80 hover:shadow-md">
<div class="flex justify-between items-center mb-1">
<div class="flex items-center gap-3">
<div class="w-4 h-4 rounded-full shadow-inner" :style="{ backgroundColor: getTagColor(tag.id) }"></div>
<span class="font-bold text-lg">{{ getTagName(tag.id) }}</span>
</div>
<div class="text-right">
<div class="font-black text-xl">{{ formatMinutes(tag.total) }}</div>
</div>
</div>
<div class="flex items-center gap-2 mb-4 pl-7 text-[11px] font-bold text-text-sec">
<span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30">占比 {{ tag.percentage.toFixed(1) }}%</span>
<span class="bg-bg-input/50 px-2 py-1 rounded-md border border-border-main/30 text-[#007AFF]">日均 {{ formatMinutes(tag.dailyAverage) }}</span>
</div>
<!-- Sub-tags -->
<div v-if="tag.subTags.length > 0" class="pl-7 space-y-3 pt-4 border-t border-border-main/50">
<div v-for="sub in tag.subTags" :key="sub.id" class="flex justify-between items-center group gap-4">
<span class="text-xs text-text-main font-bold w-16 truncate">{{ getTagName(sub.id) }}</span>
<div class="flex items-center gap-3 flex-1 justify-end">
<div class="w-full max-w-50 h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
<div class="h-full rounded-full opacity-80" :style="{ width: sub.percentage + '%', backgroundColor: getTagColor(tag.id) }"></div>
</div>
<span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-10 text-right">{{ formatMinutes(sub.total) }}</span>
</div>
</div>
</div>
</div>
<div v-if="dashboardStats.mainTags.length === 0" class="text-center py-20">
<BarChart2 :size="48" class="mx-auto mb-4 text-text-sec opacity-20" />
<div class="text-text-sec font-bold">该时间范围内没有记录数据</div>
</div>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import { Maximize2 } from "lucide-vue-next";
import { previewSrc } from "../../store";
</script>
<template>
<div class="absolute inset-0 flex items-center justify-center p-12 bg-bg-input/30">
<img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-border-main/50" />
<div v-else class="text-text-sec text-center">
<Maximize2 :size="48" class="mx-auto mb-4 opacity-20" />
<p>在时间轴上滑动或拖拽以记录</p>
</div>
</div>
</template>

117
src/store/dashboardStore.ts Normal file
View File

@@ -0,0 +1,117 @@
import { ref, computed, watch } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { DBEvent } from "../types";
import { currentDate, getTagColor, getTagName, formatMinutes, parseISODate, toISODate, viewMode, refreshSignal, dbPath } from "./index";
// Re-export for easier access in Dashboard component
export { getTagColor, getTagName, formatMinutes };
export const dashboardRange = ref<'today' | '7days' | '30days' | 'custom'>('today');
export const dashboardStartDate = ref(currentDate.value);
export const dashboardEndDate = ref(currentDate.value);
// Dedicated memory for custom dates so they don't get overwritten by auto modes
export const customStartDate = ref(currentDate.value);
export const customEndDate = ref(currentDate.value);
export const isStartCalendarOpen = ref(false);
export const isEndCalendarOpen = ref(false);
export const dashboardEvents = ref<DBEvent[]>([]);
export const dailyAverageMode = ref<'natural' | 'recorded'>('natural');
export const loadDashboardEvents = async () => {
if (!dbPath.value) return; // Wait until DB path is initialized
dashboardEvents.value = await invoke("get_events_range", { startDate: dashboardStartDate.value, endDate: dashboardEndDate.value });
};
watch([dashboardRange, currentDate], () => {
if (dashboardRange.value === 'custom') {
dashboardStartDate.value = customStartDate.value;
dashboardEndDate.value = customEndDate.value;
loadDashboardEvents();
return;
}
const end = parseISODate(currentDate.value);
let start = parseISODate(currentDate.value);
if (dashboardRange.value === '7days') {
start.setDate(end.getDate() - 6);
} else if (dashboardRange.value === '30days') {
start.setDate(end.getDate() - 29);
}
dashboardStartDate.value = toISODate(start);
dashboardEndDate.value = toISODate(end);
loadDashboardEvents();
}, { immediate: true });
// Specific trigger for custom range changes
watch([customStartDate, customEndDate], () => {
if (dashboardRange.value === 'custom') {
dashboardStartDate.value = customStartDate.value;
dashboardEndDate.value = customEndDate.value;
loadDashboardEvents();
}
});
// Auto-refresh dashboard when a refresh signal is received (event added/deleted)
watch(refreshSignal, () => {
if (viewMode.value === 'dashboard') {
loadDashboardEvents();
}
});
// Refresh when switching to dashboard mode to catch updates that happened in preview mode
watch(viewMode, (mode) => {
if (mode === 'dashboard') {
loadDashboardEvents();
}
});
export const dashboardStats = computed(() => {
let totalMinutes = 0;
const mainTagMap = new Map<number, { total: number, subTags: Map<number, number> }>();
const uniqueDays = new Set<string>();
dashboardEvents.value.forEach(ev => {
const diff = Math.max(0, ev.end_minute - ev.start_minute);
totalMinutes += diff;
uniqueDays.add(ev.date);
if (!mainTagMap.has(ev.main_tag_id)) {
mainTagMap.set(ev.main_tag_id, { total: 0, subTags: new Map() });
}
const mainStat = mainTagMap.get(ev.main_tag_id)!;
mainStat.total += diff;
if (ev.sub_tag_id) {
const subTotal = mainStat.subTags.get(ev.sub_tag_id) || 0;
mainStat.subTags.set(ev.sub_tag_id, subTotal + diff);
}
});
const start = new Date(dashboardStartDate.value);
const end = new Date(dashboardEndDate.value);
const naturalDays = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 86400000) + 1);
const recordedDays = Math.max(1, uniqueDays.size);
const daysCount = dailyAverageMode.value === 'natural' ? naturalDays : recordedDays;
const mainTagsList = Array.from(mainTagMap.entries()).map(([id, stat]) => {
const subTagsList = Array.from(stat.subTags.entries()).map(([subId, subTotal]) => ({
id: subId,
total: subTotal,
percentage: stat.total > 0 ? (subTotal / stat.total) * 100 : 0
})).sort((a, b) => b.total - a.total);
return {
id,
total: stat.total,
dailyAverage: stat.total / daysCount,
percentage: totalMinutes > 0 ? (stat.total / totalMinutes) * 100 : 0,
subTags: subTagsList
};
}).sort((a, b) => b.total - a.total);
return { totalMinutes, dailyAverage: totalMinutes / daysCount, mainTags: mainTagsList, naturalDays, recordedDays, daysCount };
});

114
src/store/index.ts Normal file
View File

@@ -0,0 +1,114 @@
import { ref, computed } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { Tag, DBEvent, TimelineItem, Toast, Reminder } from "../types";
export const TIME_OFFSET_MINUTES = 180;
export const TOTAL_MINUTES = 1440;
// --- Date Utils (Logical Day Safe) ---
export const getLogicDateStr = (date: Date = new Date()) => {
// Subtract offset to get logic day
const d = new Date(date.getTime() - TIME_OFFSET_MINUTES * 60000);
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
};
export const parseISODate = (dateStr: string) => {
const [y, m, d] = dateStr.split('-').map(Number);
return new Date(y, m - 1, d, 12, 0, 0);
};
export const toISODate = (date: Date) => {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
};
// --- Config State ---
export const isSetupComplete = ref(false);
export const savePath = ref("");
export const dbPath = ref("");
export const retainDays = ref(30);
export const captureInterval = ref(60);
export const timelineZoom = ref(1.5);
export const theme = ref("system");
// --- Global UI State ---
export const isPaused = ref(false);
export const currentDate = ref(getLogicDateStr()); // Initialize with logic date
export const currentLogicalMinute = ref(-1); // Exported to keep track of current minute globally
export const viewMode = ref<'preview' | 'dashboard'>('dashboard');
export const isFullscreen = ref(false);
export const previewSrc = ref("");
export const selectedImage = ref<TimelineItem | null>(null);
export const lockedImage = ref<TimelineItem | null>(null);
// --- Data State ---
export const tags = ref<Tag[]>([]);
export const dayEvents = ref<DBEvent[]>([]);
export const reminders = ref<Reminder[]>([]);
export const timelineImages = ref<TimelineItem[]>([]);
export const refreshSignal = ref(0); // Counter to trigger dashboard refreshes
// --- Global Toast ---
export const toast = ref<Toast>({ message: "", type: "success", visible: false });
export const showToast = (message: string, type: "success" | "error" = "success") => {
toast.value = { message, type, visible: true };
setTimeout(() => { toast.value.visible = false; }, 3000);
};
// --- Computed Helpers ---
export const mainTags = computed(() => tags.value.filter(t => t.parent_id === null));
export const getSubTags = (parentId: number) => tags.value.filter(t => t.parent_id === parentId);
export const getTagColor = (tagId: number | null | undefined) => {
if (tagId == null) return "#007AFF";
const tag = tags.value.find(t => t.id === tagId);
return tag?.color || "#007AFF";
};
export const getTagName = (tagId: number | null | undefined) => {
if (tagId == null) return "";
const tag = tags.value.find(t => t.id === tagId);
return tag?.name || "";
};
// --- Time Helper Functions ---
export const logicalMinutesToTime = (min: number) => {
let t = (min + TIME_OFFSET_MINUTES) % 1440;
const h = Math.floor(t / 60); const m = Math.floor(t % 60);
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
};
export const logicalMinutesFromTime = (timeStr: string) => {
const [h, m] = timeStr.split(":").map(Number);
let total = h * 60 + m;
if (h < 3) total += 1440;
return total - TIME_OFFSET_MINUTES;
};
export const formatDuration = (start: number, end: number) => {
let diff = end - start;
if (diff < 0) diff += 1440;
const h = Math.floor(diff / 60);
const m = diff % 60;
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
};
export const formatMinutes = (mins: number) => {
const h = Math.floor(mins / 60);
const m = Math.floor(mins % 60);
if (h === 0) return `${m}m`;
return `${h}h ${m}m`;
};
// --- Shared Actions ---
export const loadTags = async () => { tags.value = await invoke("get_tags"); };
export const loadEvents = async () => {
dayEvents.value = await invoke("get_events", { date: currentDate.value });
refreshSignal.value++; // Increment to signal other stores to refresh
};
export const loadReminders = async () => {
reminders.value = await invoke("get_reminders", { date: currentDate.value });
};

37
src/types/index.ts Normal file
View File

@@ -0,0 +1,37 @@
export interface Tag {
id: number;
name: string;
parent_id: number | null;
color: string;
}
export interface DBEvent {
id: number;
date: string;
start_minute: number;
end_minute: number;
main_tag_id: number;
sub_tag_id: number | null;
content: string;
}
export interface Reminder {
id: number;
date: string;
minute: number;
content: string;
is_completed: boolean;
}
export interface TimelineItem {
time: string;
path: string;
isNextDay?: boolean;
logical_minute?: number;
}
export interface Toast {
message: string;
type: "success" | "error";
visible: boolean;
}