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

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]
       ]"

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>

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,30 +246,25 @@
               {{ analyticsSummaryText }}
             </p>
           </div>
-          <div class="flex flex-wrap items-center gap-2">
+          <div class="w-full max-w-full space-y-3 lg:w-auto">
-            <input
+            <div class="grid gap-2 md:grid-cols-2">
+              <NativeDateSelect
                 v-model="analyticsStart"
-              type="date"
+                :field-class="fieldClass"
-              min="1900-01-01"
+                aria-label="开始日期"
-              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
+              <NativeDateSelect
                 v-model="analyticsEnd"
-              type="date"
+                :field-class="fieldClass"
-              min="1900-01-01"
+                aria-label="结束日期"
-              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"
               />
+            </div>
+            <div class="grid grid-cols-3 gap-2 sm:flex sm:justify-end">
               <button
                 type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
                 :class="detailActionClass"
                 @click="trendCanvas?.zoom(0.75)"
               >
@@ -277,7 +272,7 @@
               </button>
               <button
                 type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
                 :class="detailActionClass"
                 @click="trendCanvas?.zoom(1.33)"
               >
@@ -285,7 +280,7 @@
               </button>
               <button
                 type="button"
-              class="h-11 rounded-lg border px-3 text-sm font-medium transition-colors"
+                class="h-11 rounded-[30px] border px-4 text-sm font-medium transition-colors"
                 :class="detailActionClass"
                 @click="trendCanvas?.resetWindow()"
               >
@@ -293,9 +288,10 @@
               </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'