🐛 修复手机导航对比度与趋势日期布局

针对 iPhone Safari 中侧栏半透明合成导致导航文字和图标发灰的问题，提高移动导航可读性，并恢复趋势日期的手机单行布局。

- 导航抽屉改为不透明实色背景，遮罩只作用于右侧内容
- 提高品牌、菜单、关闭按钮和退出登录的文字图标对比度
- 强化当前菜单选中态，兼顾浅色与深色模式
- 手机端开始和结束日期恢复同一行并保持 44px 控件高度
- 已通过架构检查、类型检查、ESLint 和生产构建

src/components/common/NativeDateSelect.vue

@@ -214,36 +214,39 @@ const updatePart = (part: DatePart, value: string) => {
 
 @media (max-width: 639px) {
   :global(.analytics-date-range) {
-    --native-date-width: 100%;
+    --native-date-width: auto;
-    display: grid !important;
+    display: flex !important;
     width: 100%;
-    grid-template-columns: minmax(0, 1fr);
+    flex-wrap: nowrap !important;
-    gap: 0.5rem !important;
+    gap: 0.2rem !important;
   }
 
   .native-date-strip {
+    width: min-content;
+    min-width: 0;
+    flex: 1 1 0;
     min-height: 2.75rem;
-    padding-inline: 0.5rem;
+    padding-inline: 0.2rem;
   }
 
   .native-date-part {
     height: 2.75rem;
-    min-width: 2.75rem;
+    min-width: 0;
-    font-size: 0.9rem;
+    font-size: clamp(0.75rem, 3.4vw, 0.9rem);
   }
 
   .native-date-year {
-    width: 5.25rem;
+    width: clamp(3.35rem, 15vw, 4rem);
   }
 
   .native-date-month,
   .native-date-day {
-    width: 2.75rem;
+    width: clamp(1.7rem, 8vw, 2.2rem);
   }
 
   .native-date-separator {
-    margin-inline: clamp(0.12ch, 0.55vw, 0.3ch);
+    margin-inline: 0;
-    font-size: clamp(0.8rem, 3.65vw, 0.95rem);
+    font-size: clamp(0.72rem, 3vw, 0.85rem);
   }
 }
 

src/layout/AdminLayout/AdminLayout.vue

@@ -14,11 +14,11 @@
     <!-- Sidebar -->
     <aside
       ref="sidebarRef"
-      class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
+      class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r shadow-2xl lg:relative lg:h-screen lg:translate-x-0 lg:shadow-none"
       :class="[
         isDarkMode
-          ? 'border-[#31454d] bg-[#1a2930]/92 backdrop-filter backdrop-blur-xl'
+          ? 'border-[#3d555f] bg-[#18282f]'
-          : 'border-[#c8d7da] bg-[#f2f6f5]/92 backdrop-blur-xl',
+          : 'border-[#b8cbd0] bg-[#f9fcfc]',
         isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
         'transition-transform duration-300 ease-in-out lg:transition-none'
       ]"
@@ -26,29 +26,29 @@
       <!-- Logo区域 -->
       <div
         class="flex items-center justify-between h-16 px-4 border-b"
-        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+        :class="[isDarkMode ? 'border-[#3d555f]' : 'border-[#c8d7da]']"
       >
         <div class="flex items-center">
           <div
             class="rounded-full bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] p-1 animate-spin-slow"
           >
-            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]']">
+            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#18282f]' : 'bg-white']">
               <BoxIcon
                 class="w-6 h-6"
-                :class="[isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']"
+                :class="[isDarkMode ? 'text-[#b9dbe2]' : 'text-[#356b7d]']"
               />
             </div>
           </div>
           <h1
             @click="router.push('/')"
             class="ml-2 text-xl font-semibold cursor-pointer"
-            :class="[isDarkMode ? 'text-[#edf4f4]' : 'text-[#2d4650]']"
+            :class="[isDarkMode ? 'text-white' : 'text-[#173b47]']"
           >
             {{ t('common.appName') }}
           </h1>
         </div>
-        <button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="closeSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
+        <button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="closeSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg transition-colors lg:hidden" :class="[isDarkMode ? 'hover:bg-[#294047]' : 'hover:bg-[#e5eff1]']">
-          <XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
+          <XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-[#d7e6e9]' : 'text-[#294b56]']" />
         </button>
       </div>
 
@@ -62,11 +62,11 @@
               :class="[
                 route.name === item.id
                   ? isDarkMode
-                    ? 'border-[#a5c8d0] bg-[#294047] text-[#dceff1]'
+                    ? 'border-[#8bc2cf] bg-[#29454f] text-white shadow-sm'
-                    : 'border-[#6f98a6] bg-[#d5e4e6] text-[#315c69]'
+                    : 'border-[#327a91] bg-[#dcecef] text-[#123f4e] shadow-sm'
                   : isDarkMode
-                    ? 'border-transparent text-[#aebfc3] hover:bg-[#22353c]'
+                    ? 'border-transparent text-[#d0dee1] hover:bg-[#223942] hover:text-white'
-                    : 'border-transparent text-[#586f75] hover:bg-[#e5eeee]'
+                    : 'border-transparent text-[#294b56] hover:bg-[#e8f1f2] hover:text-[#163d49]'
               ]"
               @click="closeSidebarForMobile"
             >
@@ -78,14 +78,14 @@
       </nav>
 
       <!-- 退出登录按钮 -->
-      <div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
+      <div class="p-4 border-t" :class="[isDarkMode ? 'border-[#3d555f]' : 'border-[#c8d7da]']">
         <button
           @click="handleLogout"
           class="flex min-h-11 w-full items-center rounded-lg p-2 transition-colors duration-200"
           :class="[
             isDarkMode
-              ? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
+              ? 'text-[#d0dee1] hover:bg-[#223942] hover:text-white'
-              : 'text-[#586f75] hover:bg-[#e5eeee] hover:text-[#2d4650]'
+              : 'text-[#36535c] hover:bg-[#e8f1f2] hover:text-[#173b47]'
           ]"
         >
           <LogOutIcon class="w-5 h-5 mr-3" />