From 8201f526f08e784f6a3f040646928e432c7ee0b3 Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Fri, 5 Jun 2026 12:34:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E4=BC=98=E5=8C=96=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E9=80=89=E6=8B=A9=E5=92=8C=E6=8F=90=E7=A4=BA=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AlertComponent.vue   |  2 +-
 src/components/common/NativeDateSelect.vue | 97 ++++++++++++++++++++++
 src/views/manage/DashboardView.vue         | 95 ++++++++++-----------
 src/views/manage/FileManageView.vue        |  4 +-
 4 files changed, 144 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common/NativeDateSelect.vue

diff --git a/src/components/common/AlertComponent.vue b/src/components/common/AlertComponent.vue
index a4505e2..3684490 100644
--- a/src/components/common/AlertComponent.vue
+++ b/src/components/common/AlertComponent.vue
@@ -8,7 +8,7 @@
       v-for="alert in alerts"
       :key="alert.id"
       :class="[
-        'w-full rounded-lg shadow-xl overflow-hidden',
+        'w-full rounded-[30px] shadow-xl overflow-hidden',
         'bg-gradient-to-r',
         gradientClasses[alert.type]
       ]"
diff --git a/src/components/common/NativeDateSelect.vue b/src/components/common/NativeDateSelect.vue
new file mode 100644
index 0000000..0250ba0
--- /dev/null
+++ b/src/components/common/NativeDateSelect.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="grid w-full grid-cols-3 gap-2 sm:w-auto">
+    <select
+      :value="parts.year"
+      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
+      :class="fieldClass"
+      :aria-label="`${ariaLabel}年`"
+      @change="updatePart('year', ($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="year in years" :key="year" :value="year">{{ year }}年</option>
+    </select>
+    <select
+      :value="parts.month"
+      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
+      :class="fieldClass"
+      :aria-label="`${ariaLabel}月`"
+      @change="updatePart('month', ($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="month in months" :key="month" :value="month">
+        {{ month.toString().padStart(2, '0') }}月
+      </option>
+    </select>
+    <select
+      :value="parts.day"
+      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
+      :class="fieldClass"
+      :aria-label="`${ariaLabel}日`"
+      @change="updatePart('day', ($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="day in days" :key="day" :value="day">
+        {{ day.toString().padStart(2, '0') }}日
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    fieldClass?: string | string[]
+    ariaLabel?: string
+    minYear?: number
+    maxYear?: number
+  }>(),
+  {
+    fieldClass: '',
+    ariaLabel: '日期',
+    minYear: 1900,
+    maxYear: 2100
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  change: []
+}>()
+
+type DatePart = 'year' | 'month' | 'day'
+
+const pad = (value: number) => String(value).padStart(2, '0')
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value))
+const getDaysInMonth = (year: number, month: number) => new Date(year, month, 0).getDate()
+
+const years = computed(() =>
+  Array.from({ length: props.maxYear - props.minYear + 1 }, (_, index) => props.minYear + index)
+)
+const months = Array.from({ length: 12 }, (_, index) => index + 1)
+
+const parts = computed(() => {
+  const [rawYear, rawMonth, rawDay] = props.modelValue.split('-').map(Number)
+  const year = clamp(Number.isFinite(rawYear) ? rawYear : new Date().getFullYear(), props.minYear, props.maxYear)
+  const month = clamp(Number.isFinite(rawMonth) ? rawMonth : new Date().getMonth() + 1, 1, 12)
+  const day = clamp(
+    Number.isFinite(rawDay) ? rawDay : new Date().getDate(),
+    1,
+    getDaysInMonth(year, month)
+  )
+  return { year, month, day }
+})
+
+const days = computed(() =>
+  Array.from(
+    { length: getDaysInMonth(parts.value.year, parts.value.month) },
+    (_, index) => index + 1
+  )
+)
+
+const updatePart = (part: DatePart, value: string) => {
+  const next = { ...parts.value, [part]: Number(value) }
+  next.day = clamp(next.day, 1, getDaysInMonth(next.year, next.month))
+  emit('update:modelValue', `${next.year}-${pad(next.month)}-${pad(next.day)}`)
+  emit('change')
+}
+</script>
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index f6a8462..5a790e1 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -28,7 +28,7 @@
 
     <div
       v-if="errorMessage"
-      class="mb-6 rounded-lg border px-4 py-3 text-sm"
+      class="mb-6 rounded-[30px] border px-4 py-3 text-sm"
       :class="[
         isDarkMode
           ? 'border-red-900/50 bg-red-950/30 text-red-200'
@@ -246,56 +246,52 @@
               {{ analyticsSummaryText }}
             </p>
           </div>
-          <div class="flex flex-wrap items-center gap-2">
-            <input
-              v-model="analyticsStart"
-              type="date"
-              min="1900-01-01"
-              max="2100-12-31"
-              class="native-date-input h-12 min-w-0 flex-1 cursor-pointer rounded-xl border px-3 text-sm sm:flex-none sm:min-w-40"
-              :class="[fieldClass]"
-              @click="openNativeDatePicker"
-              @change="fetchAnalyticsData"
-            />
-            <input
-              v-model="analyticsEnd"
-              type="date"
-              min="1900-01-01"
-              max="2100-12-31"
-              class="native-date-input h-12 min-w-0 flex-1 cursor-pointer rounded-xl border px-3 text-sm sm:flex-none sm:min-w-40"
-              :class="[fieldClass]"
-              @click="openNativeDatePicker"
-              @change="fetchAnalyticsData"
-            />
-            <button
-              type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
-              :class="detailActionClass"
-              @click="trendCanvas?.zoom(0.75)"
-            >
-              放大
-            </button>
-            <button
-              type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
-              :class="detailActionClass"
-              @click="trendCanvas?.zoom(1.33)"
-            >
-              缩小
-            </button>
-            <button
-              type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
-              :class="detailActionClass"
-              @click="trendCanvas?.resetWindow()"
-            >
-              重置
-            </button>
+          <div class="w-full max-w-full space-y-3 lg:w-auto">
+            <div class="grid gap-2 md:grid-cols-2">
+              <NativeDateSelect
+                v-model="analyticsStart"
+                :field-class="fieldClass"
+                aria-label="开始日期"
+                @change="fetchAnalyticsData"
+              />
+              <NativeDateSelect
+                v-model="analyticsEnd"
+                :field-class="fieldClass"
+                aria-label="结束日期"
+                @change="fetchAnalyticsData"
+              />
+            </div>
+            <div class="grid grid-cols-3 gap-2 sm:flex sm:justify-end">
+              <button
+                type="button"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
+                :class="detailActionClass"
+                @click="trendCanvas?.zoom(0.75)"
+              >
+                放大
+              </button>
+              <button
+                type="button"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
+                :class="detailActionClass"
+                @click="trendCanvas?.zoom(1.33)"
+              >
+                缩小
+              </button>
+              <button
+                type="button"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
+                :class="detailActionClass"
+                @click="trendCanvas?.resetWindow()"
+              >
+                重置
+              </button>
+            </div>
           </div>
         </div>
         <div
           v-if="analyticsError"
-          class="mb-4 rounded-lg border px-4 py-3 text-sm"
+          class="mb-4 rounded-[30px] border px-4 py-3 text-sm"
           :class="[
             isDarkMode
               ? 'border-red-900/50 bg-red-950/30 text-red-200'
@@ -434,6 +430,7 @@ import {
 } from 'lucide-vue-next'
 import StatCard from '@/components/common/StatCard.vue'
 import SmoothTrendCanvas from '@/components/common/SmoothTrendCanvas.vue'
+import NativeDateSelect from '@/components/common/NativeDateSelect.vue'
 import { useDashboardStats, useInjectedDarkMode, useTransferAnalytics } from '@/composables'
 import { useI18n } from 'vue-i18n'
 import { ROUTES } from '@/constants'
@@ -495,10 +492,6 @@ const daysAgo = (days: number) => {
   date.setDate(date.getDate() - days)
   return date.toISOString().slice(0, 10)
 }
-const openNativeDatePicker = (event: MouseEvent) => {
-  const input = event.currentTarget as HTMLInputElement & { showPicker?: () => void }
-  input.showPicker?.()
-}
 const trendCanvas = ref<InstanceType<typeof SmoothTrendCanvas> | null>(null)
 const analyticsStart = ref(daysAgo(120))
 const analyticsEnd = ref(today())
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
index 8c5680e..2bdb230 100644
--- a/src/views/manage/FileManageView.vue
+++ b/src/views/manage/FileManageView.vue
@@ -1204,7 +1204,7 @@
 
       <div class="space-y-5">
         <div
-          class="rounded-lg border px-4 py-3 text-sm"
+          class="rounded-[30px] border px-4 py-3 text-sm"
           :class="[
             isDarkMode
               ? 'border-indigo-500/20 bg-indigo-500/10 text-indigo-200'
@@ -1249,7 +1249,7 @@
         />
         <div
           v-else
-          class="rounded-lg border px-4 py-3 text-sm"
+          class="rounded-[30px] border px-4 py-3 text-sm"
           :class="[
             isDarkMode
               ? 'border-gray-700 bg-gray-700/50 text-gray-300'