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

support dark mode

Browse Source
This commit is contained in:
Julian Freeman
2026-03-23 10:01:03 -04:00
parent 45bbb593c9
commit 7d15f5186b
2 changed files with 164 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/App.vue
View File

@@ -44,6 +44,25 @@ const showToast = (message: string, type = "success") => {
const retainDays = ref(30); const retainDays = ref(30);
const captureInterval = ref(60); const captureInterval = ref(60);
const timelineZoom = ref(1.5); const timelineZoom = ref(1.5);
const theme = ref("system");
const applyTheme = (val: string) => {
if (val === 'dark') {
document.documentElement.classList.add('dark');
} else if (val === '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');
}
}
};
watch(theme, (newVal) => {
applyTheme(newVal);
});
const tags = ref<Tag[]>([]); const tags = ref<Tag[]>([]);
const dayEvents = ref<DBEvent[]>([]); const dayEvents = ref<DBEvent[]>([]);
@@ -200,6 +219,8 @@ onMounted(async () => {
retainDays.value = (await store.get("retainDays")) as number || 30; retainDays.value = (await store.get("retainDays")) as number || 30;
captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60); captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60);
timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5; timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5;
theme.value = (await store.get("theme")) as string || "system";
applyTheme(theme.value);
await invoke("update_interval", { seconds: captureInterval.value }); await invoke("update_interval", { seconds: captureInterval.value });
isPaused.value = await invoke("get_pause_state"); isPaused.value = await invoke("get_pause_state");
await loadTimeline(true); await loadTags(); await loadEvents(); await loadTimeline(true); await loadTags(); await loadEvents();
@@ -393,6 +414,7 @@ const updateSettings = async () => {
await store.set("retainDays", retainDays.value); await store.set("retainDays", retainDays.value);
await store.set("captureInterval", captureInterval.value); await store.set("captureInterval", captureInterval.value);
await store.set("timelineZoom", timelineZoom.value); await store.set("timelineZoom", timelineZoom.value);
await store.set("theme", theme.value);
await store.save(); await store.save();
await invoke("update_db_path", { path: dbPath.value }); await invoke("update_db_path", { path: dbPath.value });
await invoke("update_interval", { seconds: captureInterval.value }); await invoke("update_interval", { seconds: captureInterval.value });
@@ -529,27 +551,27 @@ const handleExport = async () => {
</script> </script>
<template> <template>
<div class="h-screen w-screen flex flex-col overflow-hidden text-[#1D1D1F] bg-[#FBFBFD]"> <div class="h-screen w-screen flex flex-col overflow-hidden text-text-main bg-bg-main">
<div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center p-10"> <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]"> <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" /> <Settings :size="40" class="text-[#007AFF] mx-auto mb-8" />
<h1 class="text-3xl font-bold mb-4">初始化设置</h1> <h1 class="text-3xl font-bold mb-4">初始化设置</h1>
<div class="space-y-6 text-left mb-10"> <div class="space-y-6 text-left mb-10">
<div class="space-y-2"> <div class="space-y-2">
<label class="text-xs font-bold text-[#86868B]">截图保存目录</label> <label class="text-xs font-bold text-text-sec">截图保存目录</label>
<div class="flex gap-2"> <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" /> <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-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button> <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> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="text-xs font-bold text-[#86868B]">数据库文件</label> <label class="text-xs font-bold text-text-sec">数据库文件</label>
<div class="flex gap-2"> <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" /> <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"> <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="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-white border border-[#E5E5E7] p-2.5 rounded-xl hover:border-[#007AFF]"><Plus :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>
</div> </div>
@@ -559,24 +581,24 @@ const handleExport = async () => {
</div> </div>
<div v-else class="flex flex-1 overflow-hidden"> <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="w-80 bg-bg-sidebar border-r border-border-main flex flex-col select-none relative">
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-100 border-b border-[#E5E5E7]/50"> <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-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div> <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 group"> <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"> <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 transition-all">
<Calendar :size="16" class="absolute left-4 text-[#86868B]" /> <Calendar :size="16" class="absolute left-4 text-text-sec" />
{{ currentDate }} {{ currentDate }}
</button> </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"> <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> <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>
<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 class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in calendarDays" :key="i" class="aspect-square flex items-center justify-center"> <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> </div>
</div> </div>
@@ -585,12 +607,12 @@ const handleExport = async () => {
<div ref="timelineRef" class="flex-1 overflow-y-auto no-scrollbar hover:cursor-crosshair relative" @mousedown="handleTimelineMouseDown" @mousemove="handleTimelineMouseMove" @mouseup="handleTimelineMouseUp" @mouseleave="handleTimelineMouseLeave" @wheel="handleTimelineWheel"> <div 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 :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' }"> <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-[#86868B]">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span> <span v-if="h > 1" class="absolute -left-11 -top-2.5 text-[10px] font-bold text-text-sec">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span>
</div> </div>
<div v-for="ev in dayEvents" :key="ev.id" <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" class="absolute left-0 w-[45%] opacity-80 border-l-4 cursor-pointer hover:opacity-100 hover:border-l-[6px] hover:z-50 hover:brightness-110"
:style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '22', borderColor: getTagColor(ev.main_tag_id) }" :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) }"
@mouseenter="handleEventMouseEnter(ev, $event)" @mouseenter="handleEventMouseEnter(ev, $event)"
@mousemove="handleEventMouseMove" @mousemove="handleEventMouseMove"
@mouseleave="handleEventMouseLeave" @mouseleave="handleEventMouseLeave"
@@ -603,107 +625,107 @@ const handleExport = async () => {
</div> </div>
</div> </div>
<div class="p-4 border-t border-[#E5E5E7] bg-white/50 flex justify-around"> <div class="p-4 border-t border-border-main bg-bg-card/50 flex justify-around">
<button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'" :title="isPaused ? '恢复记录' : '暂停记录'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button> <button @click="togglePauseState" class="p-3 rounded-2xl" :class="isPaused ? 'text-[#FF3B30]' : 'text-text-sec'" :title="isPaused ? '恢复记录' : '暂停记录'"><Play v-if="isPaused" :size="22" /><Pause v-else :size="22" /></button>
<button @click="handleQuickAddEvent" class="p-3 rounded-2xl text-[#86868B]" title="添加记录"><SquarePlus :size="22" /></button> <button @click="handleQuickAddEvent" class="p-3 rounded-2xl text-text-sec" title="添加记录"><SquarePlus :size="22" /></button>
<button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-[#86868B]" title="标签管理"><TagIcon :size="22" /></button> <button @click="isTagManagerOpen = true" class="p-3 rounded-2xl text-text-sec" title="标签管理"><TagIcon :size="22" /></button>
<button @click="openExportModal" class="p-3 rounded-2xl text-[#86868B]" title="导出记录"><Download :size="22" /></button> <button @click="openExportModal" class="p-3 rounded-2xl text-text-sec" title="导出记录"><Download :size="22" /></button>
<button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-[#86868B]" title="设置"><Settings :size="22" /></button> <button @click="isSettingsOpen = true" class="p-3 rounded-2xl text-text-sec" title="设置"><Settings :size="22" /></button>
</div> </div>
</div> </div>
<div class="flex-1 bg-[#FBFBFD] flex flex-col relative overflow-hidden"> <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-white/80 backdrop-blur-md z-10"> <div class="p-6 flex items-center justify-between border-b bg-bg-card/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-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-bg-input text-text-sec'">{{ lockedImage?.path === selectedImage.path ? '已定格' : '预览中' }}</span></div>
<div v-else class="text-[#86868B] font-medium">未选中活动</div> <div v-else class="text-text-sec font-medium">未选中活动</div>
<button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 text-[#86868B]"><Maximize2 :size="20" /></button> <button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 text-text-sec"><Maximize2 :size="20" /></button>
</div> </div>
<div class="flex-1 flex items-center justify-center p-12 bg-[#F2F2F7]/30"> <div class="flex-1 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" /> <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 v-else class="text-text-sec text-center"><Maximize2 :size="48" class="mx-auto mb-4 opacity-20" /><p>在时间轴上滑动或拖拽以记录</p></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Modals --> <!-- Modals -->
<div v-if="isEventModalOpen" class="fixed inset-0 z-110 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isEventModalOpen = false"> <div v-if="isEventModalOpen" class="fixed inset-0 z-110 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isEventModalOpen = false">
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col"> <div class="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; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div> <div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">{{ editingEvent.id ? '编辑记录' : '新增记录' }}</h2><button @click="isEventModalOpen = false; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div>
<div class="p-10 space-y-8"> <div class="p-10 space-y-8">
<div class="flex gap-3 items-end"> <div class="flex gap-3 items-end">
<!-- Start Time Custom Picker --> <!-- Start Time Custom Picker -->
<div ref="startTimePickerRef" class="flex-1 relative"> <div ref="startTimePickerRef" class="flex-1 relative">
<label class="text-[10px] font-bold text-[#86868B] block mb-1">开始时间</label> <label class="text-[10px] font-bold text-text-sec block mb-1">开始时间</label>
<button @click="openStartTimePicker" <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"> 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">
<!-- <Clock :size="14" class="text-[#86868B] block" /> --> <!-- <Clock :size="14" class="text-text-sec block" /> -->
<span class="text-sm font-bold leading-none">{{ startTimeInput }}</span> <span class="text-sm font-bold leading-none">{{ startTimeInput }}</span>
</button> </button>
<div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64"> <div v-if="isStartTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-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="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> <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1 text-center border-b border-border-main/30">时</div>
<button v-for="h in 24" :key="h" <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')}`)" @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="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'" :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> >{{ String((h-1+3)%24).padStart(2,'0') }}</button>
</div> </div>
<div class="w-px bg-[#E5E5E7] my-2"></div> <div class="w-px bg-bg-hover my-2"></div>
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1"> <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> <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1 text-center border-b border-border-main/30">分</div>
<button v-for="m in 60" :key="m" <button v-for="m in 60" :key="m"
@click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false" @click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false"
class="py-2 text-[11px] rounded-lg transition-colors w-full text-center flex items-center justify-center" class="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'" :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> >{{ String(m-1).padStart(2,'0') }}</button>
</div> </div>
</div> </div>
</div> </div>
<!-- Duration Badge --> <!-- Duration Badge -->
<div class="h-12 flex items-center justify-center"> <div class="h-12 flex items-center justify-center">
<span class="text-[11px] font-bold text-[#86868B] bg-[#F2F2F7] px-3 py-1.5 rounded-xl border border-[#E5E5E7]/50">{{ eventDurationFormatted }}</span> <span class="text-[11px] font-bold text-text-sec bg-bg-input px-3 py-1.5 rounded-xl border border-border-main/50">{{ eventDurationFormatted }}</span>
</div> </div>
<!-- End Time Custom Picker --> <!-- End Time Custom Picker -->
<div ref="endTimePickerRef" class="flex-1 relative"> <div ref="endTimePickerRef" class="flex-1 relative">
<label class="text-[10px] font-bold text-[#86868B] block mb-1">结束时间</label> <label class="text-[10px] font-bold text-text-sec block mb-1">结束时间</label>
<button @click="openEndTimePicker" <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"> 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">
<!-- <Clock :size="14" class="text-[#86868B] block" /> --> <!-- <Clock :size="14" class="text-text-sec block" /> -->
<span class="text-sm font-bold leading-none">{{ endTimeInput }}</span> <span class="text-sm font-bold leading-none">{{ endTimeInput }}</span>
</button> </button>
<div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-3xl shadow-2xl border border-[#E5E5E7] z-120 p-4 animate-in fade-in slide-in-from-top-2 flex gap-4 h-64"> <div v-if="isEndTimeOpen" class="absolute top-full left-0 right-0 mt-2 bg-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="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> <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1">时</div>
<button v-for="h in 24" :key="h" <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')}`)" @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="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'" :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> >{{ String((h-1+3)%24).padStart(2,'0') }}</button>
</div> </div>
<div class="w-px bg-[#E5E5E7] my-2"></div> <div class="w-px bg-bg-hover my-2"></div>
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center"> <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> <div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-bg-card py-1">分</div>
<button v-for="m in 60" :key="m" <button v-for="m in 60" :key="m"
@click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1); isEndTimeOpen = false" @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="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'" :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> >{{ String(m-1).padStart(2,'0') }}</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="space-y-4"> <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 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>
<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 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-[#F2F2F7] text-[#86868B]'">{{ sub.name }}</button></div> <div class="flex flex-wrap gap-2"><button v-for="sub in getSubTags(editingEvent.main_tag_id)" :key="sub.id" @click="editingEvent.sub_tag_id = sub.id" class="px-3 py-1.5 rounded-lg text-[12px] font-medium" :class="editingEvent.sub_tag_id === sub.id ? 'bg-[#1D1D1F] text-white' : 'bg-bg-input text-text-sec'">{{ sub.name }}</button></div>
</div> </div>
<textarea <textarea
v-model="editingEvent.content" v-model="editingEvent.content"
placeholder="记录具体内容..." placeholder="记录具体内容..."
@keydown.ctrl.enter="saveEvent" @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" 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> ></textarea>
</div> </div>
<div class="flex gap-4 pt-4"> <div class="flex gap-4 pt-4">
@@ -715,46 +737,46 @@ const handleExport = async () => {
</div> </div>
<div v-if="isTagManagerOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isTagManagerOpen = false"> <div v-if="isTagManagerOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isTagManagerOpen = false">
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200"> <div class="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="isTagManagerOpen = false"><X :size="24" /></button></div> <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-hidden p-10 flex gap-10">
<div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar"> <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 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-[#F2F2F7] rounded-xl cursor-pointer"> <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"> <div class="flex items-center gap-3">
<ChevronRight :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" /> <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> <div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
<span class="font-bold">{{ mt.name }}</span> <span class="font-bold">{{ mt.name }}</span>
</div> </div>
<button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button> <button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
</div> </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-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
<div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"> <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> <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> <button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4 h-fit"> <div class="w-64 bg-bg-input p-6 rounded-3xl space-y-4 h-fit">
<h3 class="font-bold text-xs text-[#86868B] uppercase">添加标签</h3> <h3 class="font-bold text-xs text-text-sec uppercase">添加标签</h3>
<div class="space-y-1"> <div class="space-y-1">
<label class="text-[10px] font-bold text-[#86868B] ml-1">标签名称</label> <label class="text-[10px] font-bold text-text-sec 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" /> <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>
<div ref="tagSelectRef" class="space-y-1 relative"> <div ref="tagSelectRef" class="space-y-1 relative">
<label class="text-[10px] font-bold text-[#86868B] ml-1">父级标签</label> <label class="text-[10px] font-bold text-text-sec 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"> <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> <span>{{ getTagName(newTagParent) }}</span>
<ChevronDown :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" /> <ChevronDown :size="14" class="text-text-sec transition-transform" :class="{ 'rotate-180': isTagSelectOpen }" />
</button> </button>
<div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-[#E5E5E7] z-60 overflow-hidden py-2 animate-in fade-in zoom-in-95 duration-200"> <div v-if="isTagSelectOpen" class="absolute top-full left-0 right-0 mt-2 bg-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-[#F2F2F7] cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === null }">-- 无 --</div> <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-[#F2F2F7] cursor-pointer" :class="{ 'text-[#007AFF] font-bold': newTagParent === t.id }">{{ t.name }}</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> </div>
<div v-if="newTagParent === null" class="space-y-1"> <div v-if="newTagParent === null" class="space-y-1">
<label class="text-[10px] font-bold text-[#86868B] ml-1">主题颜色</label> <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 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> </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> <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>
@@ -764,48 +786,48 @@ const handleExport = async () => {
</div> </div>
<div v-if="isExportModalOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isExportModalOpen = false"> <div 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="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="isExportModalOpen = false"><X :size="24" /></button></div> <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="p-10 space-y-8">
<div class="space-y-4"> <div class="space-y-4">
<div class="space-y-2"> <div class="space-y-2">
<label class="text-[10px] font-bold text-[#86868B]">日期范围</label> <label class="text-[10px] font-bold text-text-sec">日期范围</label>
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center">
<div ref="exportStartCalendarRef" class="relative flex-1"> <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"> <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-[#86868B]" /> <Calendar :size="16" class="absolute left-4 text-text-sec" />
{{ exportStartDate }} {{ exportStartDate }}
</button> </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 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"> <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> <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> <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> <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>
<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 class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in exportStartCalendarDays" :key="i" class="aspect-square flex items-center justify-center"> <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> <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-bg-input text-main'">{{ date.getDate() }}</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<span class="text-[#86868B] font-black text-xs">至</span> <span class="text-text-sec font-black text-xs">至</span>
<div ref="exportEndCalendarRef" class="relative flex-1"> <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"> <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-[#86868B]" /> <Calendar :size="16" class="absolute left-4 text-text-sec" />
{{ exportEndDate }} {{ exportEndDate }}
</button> </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 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"> <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> <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> <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> <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>
<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 class="grid grid-cols-7 gap-1">
<div v-for="(date, i) in exportEndCalendarDays" :key="i" class="aspect-square flex items-center justify-center"> <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> <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-bg-input text-main'">{{ date.getDate() }}</button>
</div> </div>
</div> </div>
</div> </div>
@@ -819,13 +841,22 @@ const handleExport = async () => {
</div> </div>
<div v-if="isSettingsOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false"> <div v-if="isSettingsOpen" class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden flex flex-col"> <div class="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="isSettingsOpen = false"><X :size="24" /></button></div> <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="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-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(); updateSettings()" 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-[#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-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().then(updateSettings)" title="打开现有" class="bg-bg-card border p-2 rounded-xl hover:border-[#007AFF] transition-all"><FolderOpen :size="18" /></button><button @click="createDBFile().then(updateSettings)" 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><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 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> </div>
</div> </div>
@@ -833,24 +864,24 @@ const handleExport = async () => {
<div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-200 bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div> <div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-200 bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div>
<div v-if="hoveredEventDetails" <div v-if="hoveredEventDetails"
class="fixed z-300 pointer-events-none bg-white/90 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-4 w-64 animate-in fade-in zoom-in-95 duration-150" 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 animate-in fade-in zoom-in-95 duration-150"
:style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }"> :style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }">
<div class="flex items-center gap-2 mb-2"> <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> <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTagColor(hoveredEventDetails.event.main_tag_id) }"></div>
<span class="font-bold text-sm text-[#1D1D1F]">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span> <span 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-[#86868B] bg-[#F2F2F7] px-2 py-0.5 rounded-md border border-[#E5E5E7]/50">{{ getTagName(hoveredEventDetails.event.sub_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>
<div class="flex items-center justify-between text-[11px] font-bold text-[#86868B] mb-2.5"> <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>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span>
<span class="bg-[#F2F2F7] px-1.5 py-0.5 rounded-lg border border-[#E5E5E7]/30 text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span> <span class="bg-bg-input px-1.5 py-0.5 rounded-lg border border-border-main/30 text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span>
</div> </div>
<div v-if="hoveredEventDetails.event.content" class="text-xs text-[#1D1D1F] leading-relaxed wrap-break-words whitespace-pre-wrap"> <div v-if="hoveredEventDetails.event.content" class="text-xs text-text-main leading-relaxed wrap-break-words whitespace-pre-wrap">
{{ hoveredEventDetails.event.content }} {{ hoveredEventDetails.event.content }}
</div> </div>
</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 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-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> <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> <span class="text-sm font-bold">{{ toast.message }}</span>

38
src/assets/main.css
View File

@@ -1,19 +1,41 @@
@import "tailwindcss"; @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 { :root {
--primary-color: #007AFF; --primary-color: #007AFF;
--primary-hover: #0063CC; --bg-main: #FBFBFD;
--bg-light: #FBFBFD; --bg-sidebar: #F8FAFD;
--sidebar-bg: #F8FAFD; --bg-card: #FFFFFF;
--bg-input: #F2F2F7;
--bg-hover: #E5E5E7;
--border-main: #E5E5E7;
--text-main: #1D1D1F; --text-main: #1D1D1F;
--text-sec: #86868B; --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 { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 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); background-color: var(--bg-light);