fix date ui

2026-03-22 19:40:00 -04:00
parent f0112ffcd4
commit 98aeda3a46
2 changed files with 89 additions and 6 deletions
--- a/src-tauri/src/db.rs
+++ b/src-tauri/src/db.rs
@@ -1,6 +1,5 @@
 use rusqlite::{params, Connection};
 use serde::{Deserialize, Serialize};
-use std::path::PathBuf;

 #[derive(Serialize, Deserialize, Clone)]
 pub struct Tag {
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,11 +64,15 @@ const calendarRef = ref<HTMLElement | null>(null);
 const startTimePickerRef = ref<HTMLElement | null>(null);
 const endTimePickerRef = ref<HTMLElement | null>(null);
 const tagSelectRef = ref<HTMLElement | null>(null);
+const exportStartCalendarRef = ref<HTMLElement | null>(null);
+const exportEndCalendarRef = ref<HTMLElement | null>(null);

 const isCalendarOpen = ref(false);
 const calendarMonth = ref(new Date());
 const isStartTimeOpen = ref(false);
 const isEndTimeOpen = ref(false);
+const isExportStartCalendarOpen = ref(false);
+const isExportEndCalendarOpen = ref(false);

 const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
@@ -84,6 +88,12 @@ const handleClickOutside = (event: MouseEvent) => {
  if (isTagSelectOpen.value && tagSelectRef.value && !tagSelectRef.value.contains(target)) {
    isTagSelectOpen.value = false;
  }
+  if (isExportStartCalendarOpen.value && exportStartCalendarRef.value && !exportStartCalendarRef.value.contains(target)) {
+    isExportStartCalendarOpen.value = false;
+  }
+  if (isExportEndCalendarOpen.value && exportEndCalendarRef.value && !exportEndCalendarRef.value.contains(target)) {
+    isExportEndCalendarOpen.value = false;
+  }
 };

 const openStartTimePicker = async () => {
@@ -349,9 +359,47 @@ const isTagSelectOpen = ref(false);
 const isExportModalOpen = ref(false);
 const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
 const exportEndDate = ref(currentDate.value);
+const exportStartMonth = ref(new Date(exportStartDate.value));
+const exportEndMonth = ref(new Date(exportEndDate.value));
+
+const exportStartCalendarDays = computed(() => {
+  const y = exportStartMonth.value.getFullYear();
+  const m = exportStartMonth.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 exportEndCalendarDays = computed(() => {
+  const y = exportEndMonth.value.getFullYear();
+  const m = exportEndMonth.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 selectExportStartDate = (date: Date) => {
+  exportStartDate.value = date.toLocaleDateString('sv');
+  isExportStartCalendarOpen.value = false;
+};
+
+const selectExportEndDate = (date: Date) => {
+  exportEndDate.value = date.toLocaleDateString('sv');
+  isExportEndCalendarOpen.value = false;
+};

 const openExportModal = () => {
  exportEndDate.value = currentDate.value;
+  exportStartMonth.value = new Date(exportStartDate.value);
+  exportEndMonth.value = new Date(exportEndDate.value);
  isExportModalOpen.value = true;
 };

@@ -600,16 +648,52 @@ const handleExport = async () => {
    </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 class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
+      <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="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="space-y-4">
            <div class="space-y-2">
              <label class="text-[10px] font-bold text-[#86868B]">日期范围</label>
-              <div class="flex gap-2 items-center">
-                <input type="date" v-model="exportStartDate" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
-                <span class="text-[#86868B] font-bold">至</span>
-                <input type="date" v-model="exportEndDate" class="flex-1 bg-[#F2F2F7] rounded-xl px-4 py-2.5 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all" />
+              <div class="flex gap-4 items-center">
+                <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">
+                    <Calendar :size="16" class="absolute left-4 text-[#86868B]" />
+                    {{ exportStartDate }}
+                  </button>
+                  <div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-white rounded-[24px] shadow-2xl border border-[#E5E5E7] z-[120] p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
+                    <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>
+                      <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>
+                    </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 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>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <span class="text-[#86868B] font-black text-xs">至</span>
+                <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">
+                    <Calendar :size="16" class="absolute left-4 text-[#86868B]" />
+                    {{ exportEndDate }}
+                  </button>
+                  <div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-white rounded-[24px] shadow-2xl border border-[#E5E5E7] z-[120] p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
+                    <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>
+                      <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>
+                    </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 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>
+                      </div>
+                    </div>
+                  </div>
+                </div>
              </div>
            </div>
          </div>