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

upgrade

Browse Source
This commit is contained in:
Julian Freeman
2026-03-26 15:18:55 -04:00
parent ba4084170e
commit a41e06a6e1
6 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -403,7 +403,7 @@ const togglePause = async () => {
<!-- 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-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-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-3 items-end">
<div ref="startTimePickerRef" class="flex-1 relative">
@@ -443,7 +443,7 @@ const togglePause = async () => {
</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>

22
src/components/views/Dashboard.vue
View File

@@ -2,7 +2,7 @@
import { ref, computed, onMounted, onUnmounted } from "vue";
import { BarChart2, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
import {
dashboardStats, dashboardRange, dailyAverageMode, dashboardStartDate, dashboardEndDate,
dashboardStats, dashboardRange, dailyAverageMode,
customStartDate, customEndDate,
isStartCalendarOpen, isEndCalendarOpen,
formatMinutes, getTagColor, getTagName
@@ -71,19 +71,19 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
<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="14" class="absolute left-3.5 text-[#007AFF]" />
<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-xs font-black">{{ startCalendarMonth.getFullYear() }}年 {{ startCalendarMonth.getMonth()+1 }}月</span>
<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-[9px] font-bold text-text-sec">{{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 startCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="customStartDate = toISODate(date); isStartCalendarOpen = false" class="w-7 h-7 rounded-full text-[10px] font-medium transition-all" :class="toISODate(date) === customStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
<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>
@@ -91,19 +91,19 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
<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="14" class="absolute left-3.5 text-[#007AFF]" />
<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-xs font-black">{{ endCalendarMonth.getFullYear() }}年 {{ endCalendarMonth.getMonth()+1 }}月</span>
<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-[9px] font-bold text-text-sec">{{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 endCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
<button v-if="date" @click="customEndDate = toISODate(date); isEndCalendarOpen = false" class="w-7 h-7 rounded-full text-[10px] font-medium transition-all" :class="toISODate(date) === customEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
<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>
@@ -160,10 +160,10 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
<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-[200px] h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
<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-[40px] text-right">{{ formatMinutes(sub.total) }}</span>
<span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-10 text-right">{{ formatMinutes(sub.total) }}</span>
</div>
</div>
</div>