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

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);
   }
 }