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

fix time ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 18:24:35 -04:00
parent 1074f95e32
commit 1fce04859a
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
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, ChevronDown, ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2, ChevronDown, ChevronLeft, ChevronRight, Calendar } from "lucide-vue-next";
// --- Types ---
interface Tag { id: number; name: string; parent_id: number | null; color: string; }
@@ -384,25 +384,26 @@ const isTagSelectOpen = ref(false);
<!-- Start Time Custom Picker -->
<div class="flex-1 space-y-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
<button @click="isStartTimeOpen = !isStartTimeOpen; isEndTimeOpen = false" class="w-full bg-[#F2F2F7] rounded-xl px-4 py-3 text-sm font-bold text-left hover:bg-[#E5E5E7] transition-all flex items-center gap-2">
<Clock :size="14" class="text-[#86868B] shrink-0" />
<span>{{ startTimeInput }}</span>
<button @click="isStartTimeOpen = !isStartTimeOpen; isEndTimeOpen = false"
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-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
<div class="text-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">时</div>
<div class="text-[9px] 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-xs rounded-lg transition-colors"
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>
</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-[9px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">分</div>
<div class="text-[9px] 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-xs rounded-lg transition-colors"
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>
</div>
@@ -411,25 +412,26 @@ const isTagSelectOpen = ref(false);
<!-- End Time Custom Picker -->
<div class="flex-1 space-y-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
<button @click="isEndTimeOpen = !isEndTimeOpen; isStartTimeOpen = false" class="w-full bg-[#F2F2F7] rounded-xl px-4 py-3 text-sm font-bold text-left hover:bg-[#E5E5E7] transition-all flex items-center gap-2">
<Clock :size="14" class="text-[#86868B] shrink-0" />
<span>{{ endTimeInput }}</span>
<button @click="isEndTimeOpen = !isEndTimeOpen; isStartTimeOpen = false"
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="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 text-center">
<div class="text-[9px] 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"
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>
</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="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
<div class="text-[9px] 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"
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>
</div>