📱 自适应移动端趋势日期范围

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;
+    min-height: clamp(2.35rem, 11vw, 2.75rem);
-    padding-inline: 0.5ch;
+    padding-inline: clamp(0.32ch, 1vw, 0.55ch);
   }
 
   .native-date-part {
-    height: 2.55rem;
+    height: clamp(2.25rem, 10.5vw, 2.65rem);
-    font-size: 0.9rem;
+    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;
+    margin-inline: clamp(0.12ch, 0.55vw, 0.3ch);
-    font-size: 0.9rem;
+    font-size: clamp(0.8rem, 3.65vw, 0.95rem);
   }
 }
 

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"