julian/chrono-snap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

optimize ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 17:59:15 -04:00
parent d340a922cf
commit 4d6eaf2ab2
1 changed files with 49 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/App.vue
View File

@@ -4,7 +4,7 @@ import { load } from "@tauri-apps/plugin-store";
import { open, save } from "@tauri-apps/plugin-dialog";
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 } from "lucide-vue-next";
import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2, ChevronDown, Calendar, Clock } from "lucide-vue-next";
// --- Types ---
interface Tag { id: number; name: string; parent_id: number | null; color: string; }
@@ -54,6 +54,7 @@ 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;
@@ -159,12 +160,10 @@ const logicalMinutesToTime = (min: number) => {
const logicalMinutesFromTime = (timeStr: string) => {
const [h, m] = timeStr.split(":").map(Number);
let total = h * 60 + m;
// If hour < 3, it belongs to the "late night" part of our logical day (03:00 to 03:00)
if (h < 3) total += 1440;
return total - TIME_OFFSET_MINUTES;
};
// Computed properties for time inputs in the modal
const startTimeInput = computed({
get: () => logicalMinutesToTime(editingEvent.value.start_minute),
set: (val) => { editingEvent.value.start_minute = logicalMinutesFromTime(val); }
@@ -251,7 +250,6 @@ const updateSettings = async () => {
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 });
};
@@ -261,6 +259,9 @@ const loadTimeline = async () => { if (savePath.value) timelineImages.value = aw
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);
</script>
<template>
@@ -275,7 +276,7 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<label class="text-xs font-bold text-[#86868B]">截图保存目录</label>
<div class="flex gap-2">
<input type="text" readonly :value="savePath" placeholder="请选择目录..." class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none" />
<button @click="selectFolder" class="bg-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><FolderOpen :size="18" /></button>
<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">
@@ -297,7 +298,10 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<div class="w-80 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
<div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">历史活动</h2><button @click="loadTimeline(); loadEvents()" class="p-2 hover:bg-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
<input type="date" v-model="currentDate" @change="loadTimeline(); loadEvents()" class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2.5 text-sm outline-none" />
<div class="relative group">
<Calendar :size="16" class="absolute left-4 top-1/2 -translate-y-1/2 text-sec pointer-events-none" />
<input type="date" v-model="currentDate" @change="loadTimeline(); loadEvents()" class="w-full bg-white border border-[#E5E5E7] rounded-xl pl-11 pr-4 py-2.5 text-sm font-medium outline-none focus:border-[#007AFF] hover:bg-[#F2F2F7] transition-all custom-input" />
</div>
</div>
<div ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="handleTimelineMouseLeave" @wheel="handleTimelineWheel">
@@ -340,11 +344,17 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<div class="flex gap-4">
<div class="flex-1 space-y-1">
<label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
<input type="time" v-model="startTimeInput" class="w-full bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center outline-none focus:ring-2 focus:ring-[#007AFF]/20 transition-all" />
<div class="relative">
<Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B] pointer-events-none" />
<input type="time" v-model="startTimeInput" class="w-full bg-[#F2F2F7] rounded-xl pl-9 pr-3 py-3 text-sm font-bold outline-none focus:bg-white focus:ring-2 focus:ring-[#007AFF]/10 transition-all custom-input" />
</div>
</div>
<div class="flex-1 space-y-1">
<label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
<input type="time" v-model="endTimeInput" class="w-full bg-[#F2F2F7] rounded-xl p-3 text-sm font-bold text-center outline-none focus:ring-2 focus:ring-[#007AFF]/20 transition-all" />
<div class="relative">
<Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B] pointer-events-none" />
<input type="time" v-model="endTimeInput" class="w-full bg-[#F2F2F7] rounded-xl pl-9 pr-3 py-3 text-sm font-bold outline-none focus:bg-white focus:ring-2 focus:ring-[#007AFF]/10 transition-all custom-input" />
</div>
</div>
</div>
<div class="space-y-4">
@@ -354,11 +364,11 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<div v-if="editingEvent.main_tag_id && getSubTags(editingEvent.main_tag_id).length" class="space-y-2"><label class="text-[10px] font-bold text-[#86868B]">副标签</label>
<div class="flex flex-wrap gap-2"><button v-for="sub in getSubTags(editingEvent.main_tag_id)" :key="sub.id" @click="editingEvent.sub_tag_id = sub.id" class="px-3 py-1.5 rounded-lg text-[10px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></div>
</div>
<textarea v-model="editingEvent.content" placeholder="记录具体内容..." class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-[100px] outline-none"></textarea>
<textarea v-model="editingEvent.content" placeholder="记录具体内容..." class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-sm min-h-[100px] outline-none border border-transparent focus:bg-white focus:border-[#E5E5E7] transition-all"></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">保存记录</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>
@@ -376,10 +386,28 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
</div>
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4">
<h3 class="font-bold text-xs text-[#86868B] uppercase">添加标签</h3>
<input v-model="newTagName" placeholder="名称" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none" />
<select v-model="newTagParent" class="w-full bg-white rounded-xl px-4 py-2 text-sm outline-none appearance-none"><option :value="null">-- 无 --</option><option v-for="t in mainTags" :key="t.id" :value="t.id">{{ t.name }}</option></select>
<div v-if="newTagParent === null" class="flex flex-wrap gap-2"><button v-for="c in ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#AF52DE', '#5856D6']" :key="c" @click="newTagColor = c" class="w-5 h-5 rounded-full border-2" :style="{ backgroundColor: c, borderColor: newTagColor === c ? '#1D1D1F' : 'transparent' }"></button></div>
<button @click="handleAddTag(newTagName, newTagParent, newTagColor); resetTagForm()" :disabled="!newTagName" class="w-full bg-[#007AFF] text-white py-2.5 rounded-xl font-bold">创建</button>
<div 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 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>
@@ -396,7 +424,6 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<button @click="selectFolder(); updateSettings()" class="bg-white border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button>
</div>
</div>
<div class="space-y-3">
<label class="text-xs font-bold text-[#86868B]">SQLite 数据库文件</label>
<div class="flex gap-2">
@@ -407,7 +434,6 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
</div>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl"><div class="space-y-0.5"><div class="font-bold">多屏合并</div><div class="text-[10px] text-[#86868B]">拼接所有屏幕</div></div><button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-12 h-6 rounded-full relative transition-all" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'"><div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-all" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div></button></div>
<div class="space-y-2"><div class="flex justify-between"><label class="text-xs font-bold">截图间隔</label><span class="text-xs font-bold text-[#007AFF]">{{ captureInterval }}s</span></div><input type="range" v-model.number="captureInterval" min="10" max="600" step="10" @change="updateSettings" class="w-full h-1 bg-[#E5E5E7] accent-[#007AFF]" /></div>
<div class="space-y-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>
@@ -417,7 +443,6 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<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>
<!-- Toast Notification -->
<div v-if="toast.visible" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-[300] animate-in fade-in slide-in-from-bottom-4 duration-300">
<div class="px-6 py-3 rounded-2xl shadow-2xl backdrop-blur-md flex items-center gap-3 border border-white/20" :class="toast.type === 'error' ? 'bg-[#FF3B30] text-white' : 'bg-white/90 text-[#1D1D1F]'">
<div v-if="toast.type === 'error'" class="w-5 h-5 rounded-full border-2 border-white flex items-center justify-center text-[12px] font-black">!</div>
@@ -431,4 +456,11 @@ const resetTagForm = () => { newTagName.value = ""; newTagParent.value = null; n
<style>
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.custom-input::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(180deg) brightness(95%) contrast(80%);
opacity: 0.6;
transition: all 0.2s;
}
.custom-input::-webkit-calendar-picker-indicator:hover { opacity: 1; transform: scale(1.1); }
</style>