Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
a41e06a6e1 | ||
|
|
ba4084170e | ||
|
|
bf435d4986 | ||
|
|
06fb78edab | ||
|
|
05a6ee59ff | ||
|
|
1e1307b8d4 | ||
|
|
6793a2070e | ||
|
|
d6cd969990 | ||
|
|
7d15f5186b | ||
|
|
45bbb593c9 | ||
|
|
e6b21d5acd | ||
|
|
435badcbb5 | ||
|
|
afc227159a | ||
|
|
da2ea0da11 | ||
|
|
880b27f655 | ||
|
|
190d7863fe | ||
|
|
1a10506385 | ||
|
|
928589f749 | ||
|
|
8f4dfcebe3 | ||
|
|
e8c53dafc5 |
@@ -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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "chrono-snap",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -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 |
@@ -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 |
2
src-tauri/Cargo.lock
generated
2
src-tauri/Cargo.lock
generated
@@ -667,7 +667,7 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "chrono-snap"
|
||||
version = "0.1.0"
|
||||
version = "0.2.0"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"base64 0.22.1",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "chrono-snap"
|
||||
version = "0.1.0"
|
||||
version = "0.2.0"
|
||||
description = "An app to record screens and events"
|
||||
authors = ["you"]
|
||||
edition = "2021"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "chrono-snap",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"identifier": "top.volan.chrono-snap",
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
@@ -12,13 +12,13 @@
|
||||
"app": {
|
||||
"windows": [
|
||||
{
|
||||
"title": "瞬影 - 时间记录 v0.1.0",
|
||||
"title": "瞬影 - 时间记录 v0.2.0",
|
||||
"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": ["**"]
|
||||
|
||||
831
src/App.vue
831
src/App.vue
@@ -1,99 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
|
||||
import { load } from "@tauri-apps/plugin-store";
|
||||
import { open, save } from "@tauri-apps/plugin-dialog";
|
||||
import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { load as loadStore } from "@tauri-apps/plugin-store";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2, ChevronDown, ChevronLeft, ChevronRight, Calendar, Download } from "lucide-vue-next";
|
||||
import {
|
||||
RefreshCw, Calendar, ChevronLeft, ChevronRight, Play, Pause, SquarePlus, Tag as TagIcon, Download, Settings, Maximize2, X, Image as ImageIcon, BarChart2, Trash2
|
||||
} from "lucide-vue-next";
|
||||
|
||||
// --- Types ---
|
||||
interface Tag { id: number; name: string; parent_id: number | null; color: string; }
|
||||
interface DBEvent { id: number; date: string; start_minute: number; end_minute: number; main_tag_id: number; sub_tag_id: number | null; content: string; }
|
||||
interface TimelineItem { time: string; path: string; isNextDay?: boolean; }
|
||||
import {
|
||||
isSetupComplete, savePath, dbPath, isPaused, currentDate, timelineImages, selectedImage, lockedImage,
|
||||
previewSrc, isFullscreen, dayEvents, toast, showToast, timelineZoom, theme, viewMode,
|
||||
retainDays, captureInterval,
|
||||
TIME_OFFSET_MINUTES, TOTAL_MINUTES, getTagColor, getTagName, mainTags, getSubTags,
|
||||
logicalMinutesToTime, logicalMinutesFromTime, formatDuration,
|
||||
loadTags, loadEvents, toISODate
|
||||
} from "./store";
|
||||
import { DBEvent, TimelineItem } from "./types";
|
||||
|
||||
const TOTAL_MINUTES = 24 * 60;
|
||||
const TIME_OFFSET_MINUTES = 3 * 60;
|
||||
// --- Components ---
|
||||
import Setup from "./components/Setup.vue";
|
||||
import Preview from "./components/views/Preview.vue";
|
||||
import Dashboard from "./components/views/Dashboard.vue";
|
||||
import TagManager from "./components/modals/TagManager.vue";
|
||||
import ExportModal from "./components/modals/ExportModal.vue";
|
||||
import SettingsModal from "./components/modals/SettingsModal.vue";
|
||||
|
||||
// --- State ---
|
||||
const isSetupComplete = ref(false);
|
||||
const savePath = ref("");
|
||||
const dbPath = ref("");
|
||||
const isPaused = ref(false);
|
||||
const currentDate = ref(new Date().toLocaleDateString('sv'));
|
||||
const timelineImages = ref<TimelineItem[]>([]);
|
||||
const selectedImage = ref<TimelineItem | null>(null);
|
||||
const lockedImage = ref<TimelineItem | null>(null);
|
||||
const previewSrc = ref("");
|
||||
const isFullscreen = ref(false);
|
||||
// --- Local State (Timeline UI) ---
|
||||
const isSettingsOpen = ref(false);
|
||||
const isTagManagerOpen = ref(false);
|
||||
const isExportModalOpen = ref(false);
|
||||
const isEventModalOpen = ref(false);
|
||||
const isCalendarOpen = ref(false);
|
||||
const isMouseOverTimeline = ref(false); // Track mouse state to prevent race conditions
|
||||
|
||||
const toast = ref({ message: "", type: "success", visible: false });
|
||||
const showToast = (message: string, type = "success") => {
|
||||
toast.value = { message, type, visible: true };
|
||||
setTimeout(() => { toast.value.visible = false; }, 3000);
|
||||
};
|
||||
const calendarRef = ref<HTMLElement | null>(null);
|
||||
const calendarMonth = ref(new Date());
|
||||
const timelineRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const retainDays = ref(30);
|
||||
const captureInterval = ref(60);
|
||||
const timelineZoom = ref(1.5);
|
||||
|
||||
const tags = ref<Tag[]>([]);
|
||||
const dayEvents = ref<DBEvent[]>([]);
|
||||
const isDragging = ref(false);
|
||||
const dragStartMin = ref<number | null>(null);
|
||||
const dragEndMin = ref<number | null>(null);
|
||||
const hoveredTime = ref<string | null>(null);
|
||||
const hoveredEventDetails = ref<{ event: DBEvent; x: number; y: number } | null>(null);
|
||||
const currentLogicalMinute = ref(-1);
|
||||
|
||||
const editingEvent = ref<DBEvent>({ id: 0, date: "", start_minute: 0, end_minute: 0, main_tag_id: 0, sub_tag_id: null, content: "" });
|
||||
const hoveredTime = ref<string | null>(null);
|
||||
const timelineRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const rulerHeight = computed(() => TOTAL_MINUTES * timelineZoom.value);
|
||||
const mainTags = computed(() => tags.value.filter(t => t.parent_id === null));
|
||||
const getSubTags = (parentId: number) => tags.value.filter(t => t.parent_id === parentId);
|
||||
const getTagColor = (tagId: number) => tags.value.find(t => t.id === tagId)?.color || "#007AFF";
|
||||
const getTagName = (tagId: number | null) => tags.value.find(t => t.id === tagId)?.name || "-- 无 --";
|
||||
|
||||
let store: any = null;
|
||||
let captureUnlisten: any = null;
|
||||
|
||||
// --- Custom Picker States ---
|
||||
const calendarRef = ref<HTMLElement | null>(null);
|
||||
// --- Time Pickers State ---
|
||||
const startTimePickerRef = ref<HTMLElement | null>(null);
|
||||
const endTimePickerRef = ref<HTMLElement | null>(null);
|
||||
const tagSelectRef = ref<HTMLElement | null>(null);
|
||||
const exportStartCalendarRef = ref<HTMLElement | null>(null);
|
||||
const exportEndCalendarRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const isCalendarOpen = ref(false);
|
||||
const calendarMonth = ref(new Date());
|
||||
const isStartTimeOpen = ref(false);
|
||||
const isEndTimeOpen = ref(false);
|
||||
const isExportStartCalendarOpen = ref(false);
|
||||
const isExportEndCalendarOpen = ref(false);
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (isCalendarOpen.value && calendarRef.value && !calendarRef.value.contains(target)) {
|
||||
isCalendarOpen.value = false;
|
||||
}
|
||||
if (isStartTimeOpen.value && startTimePickerRef.value && !startTimePickerRef.value.contains(target)) {
|
||||
isStartTimeOpen.value = false;
|
||||
}
|
||||
if (isEndTimeOpen.value && endTimePickerRef.value && !endTimePickerRef.value.contains(target)) {
|
||||
isEndTimeOpen.value = false;
|
||||
}
|
||||
if (isTagSelectOpen.value && tagSelectRef.value && !tagSelectRef.value.contains(target)) {
|
||||
isTagSelectOpen.value = false;
|
||||
}
|
||||
if (isExportStartCalendarOpen.value && exportStartCalendarRef.value && !exportStartCalendarRef.value.contains(target)) {
|
||||
isExportStartCalendarOpen.value = false;
|
||||
}
|
||||
if (isExportEndCalendarOpen.value && exportEndCalendarRef.value && !exportEndCalendarRef.value.contains(target)) {
|
||||
isExportEndCalendarOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openStartTimePicker = async () => {
|
||||
isStartTimeOpen.value = !isStartTimeOpen.value;
|
||||
@@ -115,112 +72,109 @@ const openEndTimePicker = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const calendarDays = computed(() => {
|
||||
const y = calendarMonth.value.getFullYear();
|
||||
const m = calendarMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay();
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = [];
|
||||
const padding = (firstDay + 6) % 7;
|
||||
for (let i = 0; i < padding; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
|
||||
return days;
|
||||
});
|
||||
|
||||
const selectCalendarDate = (date: Date) => {
|
||||
currentDate.value = date.toLocaleDateString('sv'); // sv locale gives YYYY-MM-DD
|
||||
isCalendarOpen.value = false;
|
||||
loadTimeline(true); loadEvents();
|
||||
// --- Logic ---
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Logic ---
|
||||
let currentMinuteInterval: number | null = null;
|
||||
let captureUnlisten: any = null;
|
||||
|
||||
watch(currentDate, () => {
|
||||
updateCurrentMinute();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('mousedown', handleClickOutside);
|
||||
store = await load("config.json");
|
||||
const path = await store.get("savePath");
|
||||
const dPath = await store.get("dbPath");
|
||||
updateCurrentMinute();
|
||||
currentMinuteInterval = window.setInterval(updateCurrentMinute, 60000);
|
||||
|
||||
const store = await loadStore("config.json");
|
||||
const path = await store.get<string>("savePath");
|
||||
const dPath = await store.get<string>("dbPath");
|
||||
|
||||
if (path && dPath) {
|
||||
savePath.value = path as string;
|
||||
dbPath.value = dPath as string;
|
||||
savePath.value = path;
|
||||
dbPath.value = dPath;
|
||||
isSetupComplete.value = true;
|
||||
await invoke("update_db_path", { path: dbPath.value });
|
||||
retainDays.value = (await store.get("retainDays")) as number || 30;
|
||||
captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60);
|
||||
timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
|
||||
|
||||
const rDays = await store.get<number>("retainDays");
|
||||
if (rDays) retainDays.value = rDays;
|
||||
const cInterval = await store.get<number>("captureInterval");
|
||||
if (cInterval) captureInterval.value = Math.max(cInterval, 60);
|
||||
const tZoom = await store.get<number>("timelineZoom");
|
||||
if (tZoom) timelineZoom.value = tZoom;
|
||||
const tTheme = await store.get<string>("theme");
|
||||
if (tTheme) theme.value = tTheme;
|
||||
|
||||
applyTheme(theme.value);
|
||||
await invoke("update_interval", { seconds: captureInterval.value });
|
||||
isPaused.value = await invoke("get_pause_state");
|
||||
isPaused.value = await invoke<boolean>("get_pause_state");
|
||||
|
||||
await loadTimeline(true); await loadTags(); await loadEvents();
|
||||
}
|
||||
|
||||
await listen<boolean>("pause-state-changed", (event) => { isPaused.value = event.payload; });
|
||||
captureUnlisten = await listen("refresh-timeline", () => { loadTimeline(); });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('mousedown', handleClickOutside);
|
||||
if (currentMinuteInterval) window.clearInterval(currentMinuteInterval);
|
||||
if (captureUnlisten) captureUnlisten();
|
||||
});
|
||||
|
||||
const selectFolder = async () => { const s = await open({ directory: true }); if (s) savePath.value = s as string; };
|
||||
const selectDBFile = async () => { const s = await open({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
|
||||
const createDBFile = async () => { const s = await save({ filters: [{ name: "SQLite", extensions: ["db"] }] }); if (s) dbPath.value = s as string; };
|
||||
|
||||
const completeSetup = async () => {
|
||||
if (savePath.value && dbPath.value) {
|
||||
await store.set("savePath", savePath.value);
|
||||
await store.set("dbPath", dbPath.value);
|
||||
await store.save();
|
||||
await invoke("update_db_path", { path: dbPath.value });
|
||||
isSetupComplete.value = true;
|
||||
await loadTimeline(true); await loadTags(); await loadEvents();
|
||||
}
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (isCalendarOpen.value && calendarRef.value && !calendarRef.value.contains(target)) isCalendarOpen.value = false;
|
||||
if (isStartTimeOpen.value && startTimePickerRef.value && !startTimePickerRef.value.contains(target)) isStartTimeOpen.value = false;
|
||||
if (isEndTimeOpen.value && endTimePickerRef.value && !endTimePickerRef.value.contains(target)) isEndTimeOpen.value = false;
|
||||
};
|
||||
|
||||
const loadTags = async () => { tags.value = await invoke("get_tags"); };
|
||||
const loadEvents = async () => { dayEvents.value = await invoke("get_events", { date: currentDate.value }); };
|
||||
|
||||
const handleAddTag = async (name: string, parentId: number | null, color: string) => {
|
||||
try {
|
||||
await invoke("add_tag", { name, parentId, color });
|
||||
await loadTags();
|
||||
showToast("标签添加成功");
|
||||
} catch (e) {
|
||||
showToast("添加失败: " + e, "error");
|
||||
}
|
||||
const applyTheme = (val: string) => {
|
||||
const isDark = val === 'dark' || (val === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
};
|
||||
|
||||
const handleDeleteTag = async (id: number) => {
|
||||
try {
|
||||
await invoke("delete_tag", { id });
|
||||
await loadTags();
|
||||
showToast("标签已删除");
|
||||
} catch (e: any) {
|
||||
if (e.toString().includes("FOREIGN KEY")) {
|
||||
showToast("该标签正在被使用，无法删除", "error");
|
||||
} else {
|
||||
showToast("删除失败: " + e, "error");
|
||||
const loadTimeline = async (autoScroll = false) => {
|
||||
if (savePath.value) {
|
||||
const rawImages = await invoke<TimelineItem[]>("get_timeline", { date: currentDate.value, baseDir: savePath.value });
|
||||
// Pre-calculate logical minutes to prevent high-cost recalculation on every mouse move
|
||||
timelineImages.value = rawImages.map(img => ({
|
||||
...img,
|
||||
logical_minute: timeToLogicalMinutes(img.time, img.isNextDay)
|
||||
}));
|
||||
|
||||
if (autoScroll && timelineRef.value) {
|
||||
await nextTick();
|
||||
const now = new Date();
|
||||
const currentMin = now.getHours() * 60 + now.getMinutes();
|
||||
const logicalMin = (currentMin < TIME_OFFSET_MINUTES ? currentMin + 1440 : currentMin) - TIME_OFFSET_MINUTES;
|
||||
timelineRef.value.scrollTop = Math.max(0, logicalMin * timelineZoom.value - timelineRef.value.clientHeight / 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveEvent = async () => {
|
||||
try {
|
||||
await invoke("save_event", { event: editingEvent.value });
|
||||
isEventModalOpen.value = false;
|
||||
await loadEvents();
|
||||
showToast("事件已保存");
|
||||
} catch (e) {
|
||||
showToast("保存失败: " + e, "error");
|
||||
}
|
||||
const updatePreview = async (img: TimelineItem | null) => {
|
||||
if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
|
||||
selectedImage.value = img;
|
||||
const b64 = await invoke<string>("get_image_base64", { path: img.path });
|
||||
previewSrc.value = `data:image/jpeg;base64,${b64}`;
|
||||
};
|
||||
|
||||
const deleteEvent = async (id: number) => {
|
||||
try {
|
||||
await invoke("delete_event", { id });
|
||||
await loadEvents();
|
||||
showToast("事件已删除");
|
||||
} catch (e) {
|
||||
showToast("删除失败: " + e, "error");
|
||||
}
|
||||
// --- Timeline Handlers ---
|
||||
const handleTimelineMouseDown = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const min = Math.floor((e.clientY - timelineRef.value.getBoundingClientRect().top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
isDragging.value = true; dragStartMin.value = min; dragEndMin.value = min;
|
||||
};
|
||||
|
||||
const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
|
||||
@@ -228,56 +182,56 @@ const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
|
||||
let t = h * 60 + m + (s / 60); if (isNextDay) t += 1440; return t - TIME_OFFSET_MINUTES;
|
||||
};
|
||||
|
||||
const logicalMinutesToTime = (min: number) => {
|
||||
let t = (min + TIME_OFFSET_MINUTES) % 1440;
|
||||
const h = Math.floor(t / 60); const m = Math.floor(t % 60);
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const logicalMinutesFromTime = (timeStr: string) => {
|
||||
const [h, m] = timeStr.split(":").map(Number);
|
||||
let total = h * 60 + m;
|
||||
if (h < 3) total += 1440;
|
||||
return total - TIME_OFFSET_MINUTES;
|
||||
};
|
||||
|
||||
const startTimeInput = computed({
|
||||
get: () => logicalMinutesToTime(editingEvent.value.start_minute),
|
||||
set: (val) => { editingEvent.value.start_minute = logicalMinutesFromTime(val); }
|
||||
});
|
||||
|
||||
const endTimeInput = computed({
|
||||
get: () => logicalMinutesToTime(editingEvent.value.end_minute),
|
||||
set: (val) => { editingEvent.value.end_minute = logicalMinutesFromTime(val); }
|
||||
});
|
||||
|
||||
const updatePreview = async (img: TimelineItem | null) => {
|
||||
if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
|
||||
selectedImage.value = img;
|
||||
const b64 = await invoke("get_image_base64", { path: img.path });
|
||||
previewSrc.value = `data:image/jpeg;base64,${b64}`;
|
||||
};
|
||||
|
||||
const handleTimelineMouseDown = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
isDragging.value = true; dragStartMin.value = min; dragEndMin.value = min;
|
||||
};
|
||||
|
||||
// Request Animation Frame lock for mouse move
|
||||
let isMouseMovePending = false;
|
||||
const handleTimelineMouseMove = (e: MouseEvent) => {
|
||||
if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const min = Math.floor((e.clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
if (min >= 0 && min < 1440) {
|
||||
hoveredTime.value = logicalMinutesToTime(min);
|
||||
if (isDragging.value) dragEndMin.value = min;
|
||||
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);
|
||||
isMouseOverTimeline.value = true;
|
||||
|
||||
if (isMouseMovePending) return;
|
||||
isMouseMovePending = true;
|
||||
|
||||
const clientY = e.clientY; // Capture coordinate outside RAF
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
isMouseMovePending = false;
|
||||
|
||||
// Safety check: If mouse already left before this frame executed, DO NOT update preview
|
||||
if (!isMouseOverTimeline.value || !timelineRef.value) return;
|
||||
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const min = Math.floor((clientY - rect.top + timelineRef.value.scrollTop) / timelineZoom.value);
|
||||
|
||||
if (min >= 0 && min < 1440) {
|
||||
hoveredTime.value = logicalMinutesToTime(min);
|
||||
if (isDragging.value) dragEndMin.value = min;
|
||||
if (viewMode.value === 'dashboard') return;
|
||||
|
||||
if (timelineImages.value.length === 0) return;
|
||||
|
||||
let closest = timelineImages.value[0];
|
||||
let minDiff = Math.abs(closest.logical_minute! - min);
|
||||
|
||||
for (let i = 1; i < timelineImages.value.length; i++) {
|
||||
const img = timelineImages.value[i];
|
||||
const diff = Math.abs(img.logical_minute! - min);
|
||||
if (diff < minDiff) {
|
||||
minDiff = diff;
|
||||
closest = img;
|
||||
}
|
||||
}
|
||||
|
||||
if (closest) updatePreview(closest);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleTimelineMouseLeave = () => {
|
||||
isMouseOverTimeline.value = false; // Immediately flag as left
|
||||
hoveredTime.value = null;
|
||||
if (viewMode.value === 'dashboard') return;
|
||||
if (!isDragging.value && lockedImage.value) {
|
||||
updatePreview(lockedImage.value);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -289,198 +243,107 @@ const handleTimelineMouseUp = () => {
|
||||
if (end - start >= 1) {
|
||||
editingEvent.value = { id: 0, date: currentDate.value, start_minute: start, end_minute: end, main_tag_id: mainTags.value[0]?.id || 0, sub_tag_id: null, content: "" };
|
||||
isEventModalOpen.value = true;
|
||||
} else {
|
||||
const closest = timelineImages.value.reduce((p, c) => {
|
||||
const pd = Math.abs(timeToLogicalMinutes(p.time, p.isNextDay) - start);
|
||||
const cd = Math.abs(timeToLogicalMinutes(c.time, c.isNextDay) - start);
|
||||
return cd < pd ? c : p;
|
||||
}, timelineImages.value[0]);
|
||||
if (closest) { lockedImage.value = closest; updatePreview(closest); }
|
||||
} else if (timelineImages.value.length) {
|
||||
// Optimized linear search on click
|
||||
let closest = timelineImages.value[0];
|
||||
let minDiff = Math.abs(closest.logical_minute! - start);
|
||||
for (let i = 1; i < timelineImages.value.length; i++) {
|
||||
const img = timelineImages.value[i];
|
||||
const diff = Math.abs(img.logical_minute! - start);
|
||||
if (diff < minDiff) {
|
||||
minDiff = diff;
|
||||
closest = img;
|
||||
}
|
||||
}
|
||||
if (closest) { lockedImage.value = closest; viewMode.value = 'preview'; updatePreview(closest); }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimelineMouseLeave = () => {
|
||||
hoveredTime.value = null;
|
||||
if (!isDragging.value && lockedImage.value) updatePreview(lockedImage.value);
|
||||
};
|
||||
|
||||
const handleTimelineWheel = (e: WheelEvent) => {
|
||||
if (e.ctrlKey) {
|
||||
e.preventDefault(); if (!timelineRef.value) return;
|
||||
const rect = timelineRef.value.getBoundingClientRect();
|
||||
const my = e.clientY - rect.top; const cy = my + timelineRef.value.scrollTop;
|
||||
const oh = rulerHeight.value; const delta = e.deltaY > 0 ? -0.2 : 0.2;
|
||||
timelineZoom.value = Math.min(Math.max(0.5, timelineZoom.value + delta), 15);
|
||||
timelineRef.value.scrollTop = (cy / oh) * rulerHeight.value - my;
|
||||
updateSettings();
|
||||
const oh = TOTAL_MINUTES * timelineZoom.value;
|
||||
timelineZoom.value = Math.min(Math.max(0.5, timelineZoom.value + (e.deltaY > 0 ? -0.2 : 0.2)), 15);
|
||||
timelineRef.value.scrollTop = (cy / oh) * (TOTAL_MINUTES * timelineZoom.value) - my;
|
||||
}
|
||||
};
|
||||
|
||||
const updateSettings = async () => {
|
||||
await store.set("savePath", savePath.value);
|
||||
await store.set("dbPath", dbPath.value);
|
||||
await store.set("retainDays", retainDays.value);
|
||||
await store.set("captureInterval", captureInterval.value);
|
||||
await store.set("timelineZoom", timelineZoom.value);
|
||||
await store.save();
|
||||
await invoke("update_db_path", { path: dbPath.value });
|
||||
await invoke("update_interval", { seconds: captureInterval.value });
|
||||
const selectCalendarDate = (date: Date) => {
|
||||
currentDate.value = toISODate(date);
|
||||
isCalendarOpen.value = false;
|
||||
selectedImage.value = null;
|
||||
lockedImage.value = null;
|
||||
previewSrc.value = "";
|
||||
hoveredTime.value = null;
|
||||
hoveredEventDetails.value = null;
|
||||
dayEvents.value = []
|
||||
timelineImages.value = [];
|
||||
updateCurrentMinute();
|
||||
loadTimeline(true);
|
||||
loadEvents();
|
||||
};
|
||||
|
||||
const togglePauseState = async () => { isPaused.value = await invoke("toggle_pause"); };
|
||||
const loadTimeline = async (autoScrollToCurrentTime = false) => {
|
||||
if (savePath.value) {
|
||||
timelineImages.value = await invoke("get_timeline", { date: currentDate.value, baseDir: savePath.value });
|
||||
await nextTick();
|
||||
if (autoScrollToCurrentTime && timelineRef.value) {
|
||||
const now = new Date();
|
||||
const currentMin = now.getHours() * 60 + now.getMinutes();
|
||||
const logicalMin = (currentMin < TIME_OFFSET_MINUTES ? currentMin + 1440 : currentMin) - TIME_OFFSET_MINUTES;
|
||||
const targetY = logicalMin * timelineZoom.value;
|
||||
const containerHeight = timelineRef.value.clientHeight;
|
||||
timelineRef.value.scrollTop = Math.max(0, targetY - containerHeight / 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const newTagName = ref(""); const newTagParent = ref<number | null>(null); const newTagColor = ref("#007AFF");
|
||||
const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; newTagColor.value = "#007AFF"; };
|
||||
|
||||
// --- Custom Select State ---
|
||||
const isTagSelectOpen = ref(false);
|
||||
|
||||
// --- Export State ---
|
||||
const isExportModalOpen = ref(false);
|
||||
const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
|
||||
const exportEndDate = ref(currentDate.value);
|
||||
const exportStartMonth = ref(new Date(exportStartDate.value));
|
||||
const exportEndMonth = ref(new Date(exportEndDate.value));
|
||||
|
||||
const exportStartCalendarDays = computed(() => {
|
||||
const y = exportStartMonth.value.getFullYear();
|
||||
const m = exportStartMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay();
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = [];
|
||||
const padding = (firstDay + 6) % 7;
|
||||
const calendarDays = computed(() => {
|
||||
const y = calendarMonth.value.getFullYear(); const m = calendarMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay(); const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = []; const padding = (firstDay + 6) % 7;
|
||||
for (let i = 0; i < padding; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
|
||||
return days;
|
||||
});
|
||||
|
||||
const exportEndCalendarDays = computed(() => {
|
||||
const y = exportEndMonth.value.getFullYear();
|
||||
const m = exportEndMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay();
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = [];
|
||||
const padding = (firstDay + 6) % 7;
|
||||
for (let i = 0; i < padding; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
|
||||
return days;
|
||||
});
|
||||
|
||||
const selectExportStartDate = (date: Date) => {
|
||||
exportStartDate.value = date.toLocaleDateString('sv');
|
||||
isExportStartCalendarOpen.value = false;
|
||||
};
|
||||
|
||||
const selectExportEndDate = (date: Date) => {
|
||||
exportEndDate.value = date.toLocaleDateString('sv');
|
||||
isExportEndCalendarOpen.value = false;
|
||||
};
|
||||
|
||||
const openExportModal = () => {
|
||||
exportEndDate.value = currentDate.value;
|
||||
exportStartMonth.value = new Date(exportStartDate.value);
|
||||
exportEndMonth.value = new Date(exportEndDate.value);
|
||||
isExportModalOpen.value = true;
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
const saveEvent = async () => {
|
||||
if (editingEvent.value.end_minute <= editingEvent.value.start_minute) {
|
||||
showToast("结束时间必须晚于开始时间", "error");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
|
||||
|
||||
if (events.length === 0) {
|
||||
showToast("所选范围内没有找到记录", "error");
|
||||
return;
|
||||
}
|
||||
await invoke("save_event", { event: editingEvent.value });
|
||||
isEventModalOpen.value = false; await loadEvents(); showToast("事件已保存");
|
||||
} catch (e) { showToast("保存失败: " + e, "error"); }
|
||||
};
|
||||
|
||||
const savePath = await save({
|
||||
filters: [{ name: "JSON 文件", extensions: ["json"] }],
|
||||
defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
|
||||
});
|
||||
const deleteEvent = async (id: number) => {
|
||||
try { await invoke("delete_event", { id }); await loadEvents(); showToast("事件已删除"); } catch (e) { showToast("删除失败: " + e, "error"); }
|
||||
};
|
||||
|
||||
if (savePath) {
|
||||
const exportData = events.map(e => ({
|
||||
date: e.date,
|
||||
start_time: logicalMinutesToTime(e.start_minute),
|
||||
end_time: logicalMinutesToTime(e.end_minute),
|
||||
main_tag: getTagName(e.main_tag_id),
|
||||
sub_tag: getTagName(e.sub_tag_id),
|
||||
content: e.content
|
||||
}));
|
||||
|
||||
await invoke("write_file", { path: savePath, content: JSON.stringify(exportData, null, 2) });
|
||||
isExportModalOpen.value = false;
|
||||
showToast("导出成功");
|
||||
}
|
||||
} catch (e) {
|
||||
showToast("导出失败: " + e, "error");
|
||||
}
|
||||
const handleQuickAddEvent = () => {
|
||||
let start = dayEvents.value.length ? Math.max(...dayEvents.value.map(e => e.end_minute)) : 0;
|
||||
let end = currentLogicalMinute.value >= 0 ? currentLogicalMinute.value : Math.min(start + 30, 1439);
|
||||
editingEvent.value = { id: 0, date: currentDate.value, start_minute: Math.min(start, end), end_minute: end, main_tag_id: mainTags.value[0]?.id || 0, sub_tag_id: null, content: "" };
|
||||
isEventModalOpen.value = true;
|
||||
};
|
||||
|
||||
const togglePause = async () => {
|
||||
isPaused.value = await invoke<boolean>("toggle_pause");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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-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">初始化设置</h1>
|
||||
<div class="space-y-6 text-left mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-[#86868B]">截图保存目录</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
|
||||
<button @click="selectFolder" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-[#86868B]">数据库文件</label>
|
||||
<div class="flex gap-2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="completeSetup" :disabled="!savePath || !dbPath" class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold w-full disabled:opacity-50">开始使用</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-screen w-screen flex flex-col overflow-hidden text-text-main bg-bg-main">
|
||||
<Setup v-if="!isSetupComplete" />
|
||||
<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 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 }}
|
||||
<!-- Sidebar -->
|
||||
<div class="w-80 bg-bg-sidebar border-r border-border-main flex flex-col select-none relative">
|
||||
<div class="p-6 bg-bg-sidebar/80 backdrop-blur-md sticky top-0 z-100 border-b border-border-main/50">
|
||||
<div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">瞬影 - 时间记录</h2><button @click="loadTimeline(true); loadEvents()" class="p-2 hover:bg-bg-card rounded-xl text-text-sec"><RefreshCw :size="18" /></button></div>
|
||||
<div ref="calendarRef" class="relative">
|
||||
<button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-bg-card border border-border-main rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-bg-input">
|
||||
<Calendar :size="16" class="absolute left-4 text-text-sec" />{{ currentDate }}
|
||||
</button>
|
||||
<div v-if="isCalendarOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl 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-bg-card rounded-3xl shadow-2xl border border-border-main z-100 p-5 animate-in fade-in zoom-in-95 duration-200">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<button @click="calendarMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-[#F2F2F7] rounded-xl"><ChevronLeft :size="18"/></button>
|
||||
<button @click="calendarMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
|
||||
<span class="text-sm font-black">{{ calendarMonth.getFullYear() }}年 {{ calendarMonth.getMonth()+1 }}月</span>
|
||||
<button @click="calendarMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth()+1, 1)" class="p-2 hover:bg-[#F2F2F7] rounded-xl"><ChevronRight :size="18"/></button>
|
||||
<button @click="calendarMonth = new Date(calendarMonth.getFullYear(), calendarMonth.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-[#86868B]">{{d}}</div></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 calendarDays" :key="i" class="aspect-square flex items-center justify-center">
|
||||
<button v-if="date" @click="selectCalendarDate(date)" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === currentDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-[#F2F2F7] text-main'">{{ date.getDate() }}</button>
|
||||
<button v-if="date" @click="selectCalendarDate(date)" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === currentDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -488,231 +351,117 @@ const handleExport = async () => {
|
||||
</div>
|
||||
|
||||
<div ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="handleTimelineMouseLeave" @wheel="handleTimelineWheel">
|
||||
<div :style="{ height: rulerHeight + 'px' }" class="relative ml-14 mr-4">
|
||||
<div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-[#E5E5E7]/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
|
||||
<span 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 :style="{ height: TOTAL_MINUTES * timelineZoom + 'px' }" class="relative ml-14 mr-4">
|
||||
<div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-border-main/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
|
||||
<span v-if="h > 1" class="absolute -left-11 -top-2.5 text-[10px] font-bold text-text-sec">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span>
|
||||
</div>
|
||||
<div v-for="ev in dayEvents" :key="ev.id" class="absolute left-0 w-[45%] opacity-80 border-l-4" :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="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 transition-all duration-100" :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '50', borderColor: getTagColor(ev.main_tag_id) }" @click.stop="editingEvent = { ...ev }; isEventModalOpen = true" @mousedown.stop @mouseenter="hoveredEventDetails = { event: ev, x: $event.clientX, y: $event.clientY }" @mousemove="hoveredEventDetails ? (hoveredEventDetails.x = $event.clientX, hoveredEventDetails.y = $event.clientY) : null" @mouseleave="hoveredEventDetails = null"></div>
|
||||
<div v-for="img in timelineImages" :key="img.path" class="absolute left-[50%] right-2 h-0.5 bg-[#007AFF]/20 rounded-full" :class="[selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-1 z-10' : '', lockedImage?.path === img.path ? 'bg-[#007AFF] h-1.5 ring-2 ring-[#007AFF]/20 z-20' : '']" :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"></div>
|
||||
<div v-if="dragStartMin !== null && dragEndMin !== null" class="absolute left-0 w-full bg-[#007AFF]/10 border-y-2 border-[#007AFF] pointer-events-none z-30" :style="{ top: Math.min(dragStartMin, dragEndMin) * timelineZoom + 'px', height: Math.abs(dragEndMin - dragStartMin) * timelineZoom + 'px' }"></div>
|
||||
<div v-if="isDragging && dragStartMin !== null && dragEndMin !== null" class="absolute left-0 w-full bg-[#007AFF]/10 border-y-2 border-[#007AFF] pointer-events-none z-30" :style="{ top: Math.min(dragStartMin, dragEndMin) * timelineZoom + 'px', height: Math.abs(dragEndMin - dragStartMin) * timelineZoom + 'px' }"></div>
|
||||
<div v-if="hoveredTime" class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-40 pointer-events-none" :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00') * timelineZoom + 'px' }"><div class="absolute -left-12 -top-3 bg-[#007AFF] text-white text-[9px] px-1 py-0.5 rounded font-bold">{{ hoveredTime }}</div></div>
|
||||
<div v-if="currentLogicalMinute >= 0" class="absolute left-0 right-0 border-t-2 border-[#FF3B30] z-30 pointer-events-none" :style="{ top: currentLogicalMinute * timelineZoom + 'px' }"><div class="absolute -left-12 -top-2.5 bg-[#FF3B30] text-white text-[9px] px-1 py-0.5 rounded font-bold shadow-[0_0_8px_rgba(255,59,48,0.5)]">{{ logicalMinutesToTime(currentLogicalMinute) }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t border-[#E5E5E7] bg-white/50 flex justify-around">
|
||||
<button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
|
||||
<button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-[#86868B]"><TagIcon :size="22" /></button>
|
||||
<button @click="openExportModal" class="p-3 rounded-2xl text-[#86868B]"><Download :size="22" /></button>
|
||||
<button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-[#86868B]"><Settings :size="22" /></button>
|
||||
<div class="p-4 border-t border-border-main bg-bg-card/50 flex justify-around">
|
||||
<button @click="togglePause" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-text-sec'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
|
||||
<button @click="handleQuickAddEvent" class="p-3 rounded-2xl text-text-sec"><SquarePlus :size="22" /></button>
|
||||
<button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-text-sec"><TagIcon :size="22" /></button>
|
||||
<button @click="isExportModalOpen = true" class="p-3 rounded-2xl text-text-sec"><Download :size="22" /></button>
|
||||
<button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-text-sec"><Settings :size="22" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
<!-- Main Panel -->
|
||||
<div class="flex-1 bg-bg-main flex flex-col relative overflow-hidden">
|
||||
<div class="p-6 flex items-center justify-between border-b bg-bg-card/80 backdrop-blur-md z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg font-bold">{{ viewMode === 'preview' ? (selectedImage ? selectedImage.time : '预览') : '时间分析' }}</span>
|
||||
<span v-if="viewMode === 'preview' && selectedImage" class="text-xs font-bold px-2 py-0.5 rounded-md" :class="lockedImage?.path === selectedImage.path ? 'bg-[#007AFF] text-white' : 'bg-bg-input text-text-sec'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button v-if="viewMode === 'preview' && selectedImage" @click="isFullscreen = true" class="p-2.5 text-text-sec hover:text-text-main"><Maximize2 :size="20" /></button>
|
||||
<div class="flex bg-bg-input rounded-xl p-1 gap-1 border border-border-main/50 shadow-inner">
|
||||
<button @click="viewMode = 'preview'" class="px-3 py-1.5 text-[11px] font-bold rounded-lg transition-all flex items-center gap-1.5" :class="viewMode === 'preview' ? 'bg-bg-card shadow-md text-text-main' : 'text-text-sec hover:text-text-main'"><ImageIcon :size="14"/> 预览</button>
|
||||
<button @click="viewMode = 'dashboard'" class="px-3 py-1.5 text-[11px] font-bold rounded-lg transition-all flex items-center gap-1.5" :class="viewMode === 'dashboard' ? 'bg-bg-card shadow-md text-text-main' : 'text-text-sec hover:text-text-main'"><BarChart2 :size="14"/> 统计</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center p-12 bg-[#F2F2F7]/30">
|
||||
<img v-if="previewSrc" :src="previewSrc" class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border" />
|
||||
<div v-else class="text-[#86868B] text-center"><Maximize2 :size="48" class="mx-auto mb-4 opacity-20" /><p>在时间轴上滑动或拖拽以记录</p></div>
|
||||
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<Preview v-show="viewMode === 'preview'" />
|
||||
<Dashboard v-if="viewMode === 'dashboard'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<TagManager v-if="isTagManagerOpen" @close="isTagManagerOpen = false" />
|
||||
<ExportModal v-if="isExportModalOpen" @close="isExportModalOpen = false" />
|
||||
<SettingsModal v-if="isSettingsOpen" @close="isSettingsOpen = false" />
|
||||
|
||||
<!-- Event Modal -->
|
||||
<div v-if="isEventModalOpen" class="fixed inset-0 z-110 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isEventModalOpen = false">
|
||||
<div class="bg-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="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col">
|
||||
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">{{ editingEvent.id ? '编辑事件' : '新增事件' }}</h2><button @click="isEventModalOpen = false"><X :size="24" /></button></div>
|
||||
<div class="p-10 space-y-8">
|
||||
<div class="flex gap-4">
|
||||
<!-- Start Time Custom Picker -->
|
||||
<div ref="startTimePickerRef" class="flex-1 space-y-1 relative">
|
||||
<label class="text-[10px] font-bold text-[#86868B]">开始时间</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 class="flex gap-3 items-end">
|
||||
<div ref="startTimePickerRef" class="flex-1 relative">
|
||||
<label class="text-[10px] font-bold text-text-sec block mb-1">开始时间</label>
|
||||
<button @click="openStartTimePicker" class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30"><span class="text-sm font-bold leading-none">{{ logicalMinutesToTime(editingEvent.start_minute) }}</span></button>
|
||||
<div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
|
||||
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-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"
|
||||
:class="Math.floor((editingEvent.start_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-[#F2F2F7] text-main'"
|
||||
>{{ String((h-1+3)%24).padStart(2,'0') }}</button>
|
||||
<button v-for="h in 24" :key="h" @click="editingEvent.start_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.start_minute % 60).padStart(2,'0')}`)" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="Math.floor((editingEvent.start_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String((h-1+3)%24).padStart(2,'0') }}</button>
|
||||
</div>
|
||||
<div class="w-px bg-[#E5E5E7] my-2"></div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
|
||||
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-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)"
|
||||
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>
|
||||
<button v-for="m in 60" :key="m" @click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="editingEvent.start_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String(m-1).padStart(2,'0') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Time Custom Picker -->
|
||||
<div ref="endTimePickerRef" class="flex-1 space-y-1 relative">
|
||||
<label class="text-[10px] font-bold text-[#86868B]">结束时间</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 class="h-12 flex items-center justify-center"><span class="text-[11px] font-bold text-text-sec bg-bg-input px-3 py-1.5 rounded-xl border border-border-main/50">{{ formatDuration(editingEvent.start_minute, editingEvent.end_minute) }}</span></div>
|
||||
<div ref="endTimePickerRef" class="flex-1 relative">
|
||||
<label class="text-[10px] font-bold text-text-sec block mb-1">结束时间</label>
|
||||
<button @click="openEndTimePicker" class="w-full h-12 bg-bg-input rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-bg-hover transition-all border border-transparent focus:border-[#007AFF]/30"><span class="text-sm font-bold leading-none">{{ logicalMinutesToTime(editingEvent.end_minute) }}</span></button>
|
||||
<div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64">
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
|
||||
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-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"
|
||||
:class="Math.floor((editingEvent.end_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-[#F2F2F7] text-main'"
|
||||
>{{ String((h-1+3)%24).padStart(2,'0') }}</button>
|
||||
<button v-for="h in 24" :key="h" @click="editingEvent.end_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:${String(editingEvent.end_minute % 60).padStart(2,'0')}`)" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="Math.floor((editingEvent.end_minute + TIME_OFFSET_MINUTES) / 60) % 24 === (h-1+3)%24 ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String((h-1+3)%24).padStart(2,'0') }}</button>
|
||||
</div>
|
||||
<div class="w-px bg-[#E5E5E7] my-2"></div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
|
||||
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-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)"
|
||||
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>
|
||||
<button v-for="m in 60" :key="m" @click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1); isEndTimeOpen = false" class="py-2 text-xs rounded-lg transition-colors w-full text-center" :class="editingEvent.end_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ String(m-1).padStart(2,'0') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">主标签</label>
|
||||
<div class="space-y-2"><label class="text-[10px] font-bold text-text-sec">主标签</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-[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-[12px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></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-text-sec">副标签</label>
|
||||
<div class="flex flex-wrap gap-2"><button v-for="sub in getSubTags(editingEvent.main_tag_id)" :key="sub.id" @click="editingEvent.sub_tag_id = sub.id" class="px-3 py-1.5 rounded-lg text-[12px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-bg-input text-text-sec'">{{ sub.name }}</button></div>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="editingEvent.content"
|
||||
placeholder="记录具体内容..."
|
||||
@keydown.ctrl.enter="saveEvent"
|
||||
class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-25 outline-none border border-transparent focus:bg-white focus:border-[#E5E5E7] transition-all"
|
||||
></textarea>
|
||||
<textarea v-model="editingEvent.content" placeholder="记录具体内容..." @keydown.ctrl.enter="saveEvent" class="w-full bg-bg-input rounded-2xl p-4 text-sm min-h-25 outline-none border border-transparent focus:bg-bg-card focus:border-border-main transition-all"></textarea>
|
||||
</div>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button v-if="editingEvent.id" @click="deleteEvent(editingEvent.id); isEventModalOpen = false" class="text-[#FF3B30] font-bold px-4 py-2 flex items-center gap-2"><Trash2 :size="18" /> 删除</button>
|
||||
<button @click="saveEvent" class="flex-1 bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20">保存记录</button>
|
||||
<button @click="saveEvent" class="flex-1 bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20">保存事件</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isTagManagerOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isTagManagerOpen = false">
|
||||
<div class="bg-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>
|
||||
</div>
|
||||
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4 h-fit">
|
||||
<h3 class="font-bold text-xs text-[#86868B] uppercase">添加标签</h3>
|
||||
<div class="space-y-1">
|
||||
<label class="text-[10px] font-bold text-[#86868B] ml-1">标签名称</label>
|
||||
<input v-model="newTagName" placeholder="输入名称..." class="w-full bg-white rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
|
||||
</div>
|
||||
<div ref="tagSelectRef" class="space-y-1 relative">
|
||||
<label class="text-[10px] font-bold text-[#86868B] ml-1">父级标签</label>
|
||||
<button @click="isTagSelectOpen = !isTagSelectOpen" class="w-full bg-white 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-[#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 @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>
|
||||
</div>
|
||||
<div v-if="newTagParent === null" class="space-y-1">
|
||||
<label class="text-[10px] font-bold text-[#86868B] ml-1">主题颜色</label>
|
||||
<div class="flex flex-wrap gap-2"><button v-for="c in ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6']" :key="c" @click="newTagColor = c" class="w-5 h-5 rounded-full border-2 transition-all" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
|
||||
</div>
|
||||
<button @click="handleAddTag(newTagName, newTagParent, newTagColor); resetTagForm()" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-3 rounded-xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isExportModalOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isExportModalOpen = false">
|
||||
<div class="bg-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-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" class="w-full bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">导出为 JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isSettingsOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
|
||||
<div class="bg-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]">数据库文件</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>
|
||||
|
||||
<!-- Fullscreen & Tooltip & Toast -->
|
||||
<div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-200 bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div>
|
||||
|
||||
<div v-if="hoveredEventDetails && hoveredEventDetails.event" class="fixed z-300 pointer-events-none bg-bg-card/90 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-4 w-64" :style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTagColor(hoveredEventDetails.event.main_tag_id) }"></div>
|
||||
<span class="font-bold text-sm text-text-main">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span>
|
||||
<span v-if="hoveredEventDetails.event.sub_tag_id" class="text-[10px] font-bold text-text-sec bg-bg-input px-2 py-0.5 rounded-md border border-border-main/50">{{ getTagName(hoveredEventDetails.event.sub_tag_id) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] font-bold text-text-sec mb-2.5"><span>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span><span class="bg-bg-input px-1.5 py-0.5 rounded-lg text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span></div>
|
||||
<div v-if="hoveredEventDetails.event.content" class="text-xs text-text-main leading-relaxed wrap-break-words whitespace-pre-wrap">{{ hoveredEventDetails.event.content }}</div>
|
||||
</div>
|
||||
<div v-if="toast.visible" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-300 animate-in fade-in slide-in-from-bottom-4 duration-300">
|
||||
<div class="px-6 py-3 rounded-2xl shadow-2xl backdrop-blur-md flex items-center gap-3 border border-white/20" :class="toast.type === 'error' ? 'bg-[#FF3B30] text-white' : 'bg-white/90 text-[#1D1D1F]'">
|
||||
<div class="px-6 py-3 rounded-2xl shadow-2xl backdrop-blur-md flex items-center gap-3 border border-white/20" :class="toast.type === 'error' ? 'bg-[#FF3B30] text-white' : 'bg-bg-card/90 text-text-main'">
|
||||
<div v-if="toast.type === 'error'" class="w-5 h-5 rounded-full border-2 border-white flex items-center justify-center text-[12px] font-black">!</div>
|
||||
<div v-else class="w-5 h-5 rounded-full bg-[#34C759] flex items-center justify-center text-white text-[10px]">✓</div>
|
||||
<span class="text-sm font-bold">{{ toast.message }}</span>
|
||||
@@ -724,4 +473,4 @@ const handleExport = async () => {
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</style>
|
||||
@@ -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);
|
||||
|
||||
@@ -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
52
src/components/Setup.vue
Normal 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>
|
||||
147
src/components/modals/ExportModal.vue
Normal file
147
src/components/modals/ExportModal.vue
Normal 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>
|
||||
66
src/components/modals/SettingsModal.vue
Normal file
66
src/components/modals/SettingsModal.vue
Normal 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>
|
||||
96
src/components/modals/TagManager.vue
Normal file
96
src/components/modals/TagManager.vue
Normal 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>
|
||||
179
src/components/views/Dashboard.vue
Normal file
179
src/components/views/Dashboard.vue
Normal 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>
|
||||
14
src/components/views/Preview.vue
Normal file
14
src/components/views/Preview.vue
Normal 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>
|
||||
116
src/store/dashboardStore.ts
Normal file
116
src/store/dashboardStore.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
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 } 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 () => {
|
||||
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 };
|
||||
});
|
||||
109
src/store/index.ts
Normal file
109
src/store/index.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { ref, computed } from "vue";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { Tag, DBEvent, TimelineItem, Toast } from "../types";
|
||||
|
||||
export const TIME_OFFSET_MINUTES = 180;
|
||||
export const TOTAL_MINUTES = 1440;
|
||||
|
||||
// --- 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 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 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
|
||||
};
|
||||
29
src/types/index.ts
Normal file
29
src/types/index.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export interface Tag {
|
||||
id: number;
|
||||
name: string;
|
||||
parent_id: number | null;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface DBEvent {
|
||||
id: number;
|
||||
date: string;
|
||||
start_minute: number;
|
||||
end_minute: number;
|
||||
main_tag_id: number;
|
||||
sub_tag_id: number | null;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface TimelineItem {
|
||||
time: string;
|
||||
path: string;
|
||||
isNextDay?: boolean;
|
||||
logical_minute?: number;
|
||||
}
|
||||
|
||||
export interface Toast {
|
||||
message: string;
|
||||
type: "success" | "error";
|
||||
visible: boolean;
|
||||
}
|
||||
Reference in New Issue
Block a user