✨ 优化日期选择和提示圆角

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())

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'