date selector upgrade

src/App.vue

@@ -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, Calendar, Clock } from "lucide-vue-next";
+import { Tag as TagIcon, FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw, Plus, Trash2, ChevronDown, ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
 
 // --- Types ---
 interface Tag { id: number; name: string; parent_id: number | null; color: string; }
@@ -59,6 +59,30 @@ const getTagName = (tagId: number | null) => tags.value.find(t => t.id === tagId
 let store: any = null;
 let captureUnlisten: any = null;
 
+// --- Custom Picker States ---
+const isCalendarOpen = ref(false);
+const calendarMonth = ref(new Date());
+const isStartTimeOpen = ref(false);
+const isEndTimeOpen = ref(false);
+
+const calendarDays = computed(() => {
+  const y = calendarMonth.value.getFullYear();
+  const m = calendarMonth.value.getMonth();
+  const firstDay = new Date(y, m, 1).getDay();
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const days = [];
+  const padding = (firstDay + 6) % 7;
+  for (let i = 0; i < padding; i++) days.push(null);
+  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
+  return days;
+});
+
+const selectCalendarDate = (date: Date) => {
+  currentDate.value = date.toLocaleDateString('sv'); // sv locale gives YYYY-MM-DD
+  isCalendarOpen.value = false;
+  loadTimeline(); loadEvents();
+};
+
 // --- Logic ---
 onMounted(async () => {
   store = await load("config.json");
@@ -299,8 +323,23 @@ const isTagSelectOpen = ref(false);
         <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>
           <div class="relative group">
-             <Calendar :size="16" class="absolute left-4 top-1/2 -translate-y-1/2 text-sec pointer-events-none" />
+             <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">
-             <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" />
+                <Calendar :size="16" class="absolute left-4 text-[#86868B]" />
+                {{ currentDate }}
+             </button>
+             <div v-if="isCalendarOpen" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-[24px] shadow-2xl border border-[#E5E5E7] z-[100] p-5 animate-in fade-in zoom-in-95 duration-200">
+                <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>
+                  <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>
+                </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">
+                  <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>
+                  </div>
+                </div>
+             </div>
           </div>
         </div>
 
@@ -339,21 +378,33 @@ const isTagSelectOpen = ref(false);
     <!-- 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 class="bg-white 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; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div>
         <div class="p-10 space-y-8">
           <div class="flex gap-4">
-            <div class="flex-1 space-y-1">
+            <div class="flex-1 space-y-1 relative">
               <label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
-              <div class="relative">
+              <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] pointer-events-none" />
+                <Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B]" />
-                <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" />
+                {{ startTimeInput }}
+              </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>
               </div>
             </div>
-            <div class="flex-1 space-y-1">
+            <div class="flex-1 space-y-1 relative">
               <label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
-              <div class="relative">
+              <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] pointer-events-none" />
+                <Clock :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#86868B]" />
-                <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" />
+                {{ endTimeInput }}
+              </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>
               </div>
             </div>
           </div>
@@ -375,7 +426,7 @@ const isTagSelectOpen = ref(false);
     </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 class="bg-white rounded-[40px] shadow-2xl w-full max-w-2xl h-[80vh] overflow-hidden flex flex-col">
+      <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="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-y-auto p-10 flex gap-10">
           <div class="flex-1 space-y-6">
@@ -390,7 +441,6 @@ const isTagSelectOpen = ref(false);
               <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">
@@ -402,7 +452,6 @@ const isTagSelectOpen = ref(false);
                 <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>
@@ -417,23 +466,8 @@ const isTagSelectOpen = ref(false);
       <div class="bg-white 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-10 space-y-8">
-          <div class="space-y-3">
+          <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>
-            <label class="text-xs font-bold text-[#86868B]">截图保存位置</label>
+          <div class="space-y-3"><label class="text-xs font-bold text-[#86868B]">SQLite 数据库文件</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="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-[#86868B]">SQLite 数据库文件</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="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>
@@ -456,11 +490,4 @@ const isTagSelectOpen = ref(false);
 <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>