From 0e51a19575e2aec925035a70dfc7356ee6d506e5 Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Fri, 10 Jul 2026 13:04:59 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=B6=8B=E5=8A=BF=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/NativeDateSelect.vue | 18 +++++++++++-------
 src/views/manage/DashboardView.vue         |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/common/NativeDateSelect.vue b/src/components/common/NativeDateSelect.vue
index bb9d7e3..d32df21 100644
--- a/src/components/common/NativeDateSelect.vue
+++ b/src/components/common/NativeDateSelect.vue
@@ -134,7 +134,7 @@ const updatePart = (part: DatePart, value: string) => {
 <style scoped>
 .native-date-strip {
   display: inline-flex;
-  width: max-content;
+  width: var(--native-date-width, max-content);
   max-width: 100%;
   min-height: 2.75rem;
   align-items: center;
@@ -213,14 +213,18 @@ const updatePart = (part: DatePart, value: string) => {
 }
 
 @media (max-width: 639px) {
+  :global(.analytics-date-range) {
+    --native-date-width: min(34vw, 8.1rem);
+  }
+
   .native-date-strip {
-    min-height: 2.65rem;
-    padding-inline: 0.5ch;
+    min-height: clamp(2.35rem, 11vw, 2.75rem);
+    padding-inline: clamp(0.32ch, 1vw, 0.55ch);
   }
 
   .native-date-part {
-    height: 2.55rem;
-    font-size: 0.9rem;
+    height: clamp(2.25rem, 10.5vw, 2.65rem);
+    font-size: clamp(0.8rem, 3.65vw, 0.95rem);
   }
 
   .native-date-year {
@@ -233,8 +237,8 @@ const updatePart = (part: DatePart, value: string) => {
   }
 
   .native-date-separator {
-    margin-inline: 0.25ch;
-    font-size: 0.9rem;
+    margin-inline: clamp(0.12ch, 0.55vw, 0.3ch);
+    font-size: clamp(0.8rem, 3.65vw, 0.95rem);
   }
 }
 
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index ce7da59..a067eeb 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -241,7 +241,7 @@
             </p>
             <p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
           </div>
-          <div class="flex w-full min-w-0 items-center justify-center gap-1.5 sm:w-auto sm:flex-row sm:gap-2">
+          <div class="analytics-date-range flex w-full min-w-0 items-center justify-center gap-1.5 sm:w-auto sm:flex-row sm:gap-2">
               <NativeDateSelect
                 v-model="analyticsStart"
                 :field-class="fieldClass"