From 1074f95e327d196fbfd4b08ab6af3aafa5f25b32 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Sun, 22 Mar 2026 18:06:54 -0400
Subject: [PATCH] time selector upgrade

---
 src/App.vue | 56 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0421a12..a48e49b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -381,29 +381,57 @@ const isTagSelectOpen = ref(false);
         <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="flex gap-4">
+            <!-- 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 pl-10 pr-3 py-3 text-sm font-bold text-left hover:bg-[#E5E5E7] transition-all">
-                <Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B]" />
-                {{ startTimeInput }}
+              <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>
-              <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 flex-col gap-4">
-                 <div class="text-xs font-bold text-sec px-1">选择小时</div>
-                 <div class="grid grid-cols-6 gap-1">
-                    <button v-for="h in 24" :key="h" @click="editingEvent.start_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:00`); isStartTimeOpen = false" class="py-1.5 text-[10px] hover:bg-[#007AFF] hover:text-white rounded-lg transition-colors border border-[#E5E5E7]/50">{{ String((h-1+3)%24).padStart(2,'0') }}</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>
+                    <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="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>
+                    <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="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>
               </div>
             </div>
+            <!-- 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 pl-10 pr-3 py-3 text-sm font-bold text-left hover:bg-[#E5E5E7] transition-all">
-                <Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B]" />
-                {{ endTimeInput }}
+              <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>
-              <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 flex-col gap-4">
-                 <div class="text-xs font-bold text-sec px-1">选择小时</div>
-                 <div class="grid grid-cols-6 gap-1">
-                    <button v-for="h in 24" :key="h" @click="editingEvent.end_minute = logicalMinutesFromTime(`${String((h-1+3)%24).padStart(2,'0')}:00`); isEndTimeOpen = false" class="py-1.5 text-[10px] hover:bg-[#007AFF] hover:text-white rounded-lg transition-colors border border-[#E5E5E7]/50">{{ String((h-1+3)%24).padStart(2,'0') }}</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="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="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="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="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>
               </div>
             </div>