返回按钮处理

.env

@@ -1,5 +1,5 @@
 # 应用版本号
-VITE_APP_VERSION=1.0.2
+VITE_APP_VERSION=1.0.3
 
 # 构建时间戳（会在构建时自动更新）
 VITE_BUILD_TIME=""

src/components/MobileHeader.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="mobile-header">
     <button v-if="showBack" class="back-btn" @click="handleBack">
-      <span>←</span>
+      <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </button>
     <h1 class="title">{{ title }}</h1>
     <button v-if="showHelp" class="help-btn" @click="$emit('help')">
-      <span>?</span>
+      <svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+        <path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </button>
     <div v-else class="placeholder"></div>
   </div>
@@ -74,43 +80,128 @@ const handleBack = () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  background-color: white;
-  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 16px; /* 减少上下内边距 */
+  min-height: 44px; /* 设置最小高度而不是固定高度 */
+  background: white; /* 保持白色背景 */
+  border-bottom: 1px solid #f0f0f0; /* 更淡的边框 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
   position: sticky;
   top: 0;
   z-index: 100;
+  /* 适配手机屏幕的安全区域 */
+  padding-top: max(8px, env(safe-area-inset-top));
+}
+
+/* 适配 iOS设备的屏幕顶部缺口 */
+@supports (padding: max(0px)) {
+  .mobile-header {
+    padding-top: max(8px, env(safe-area-inset-top));
+  }
 }
 
 .back-btn, .help-btn {
-  width: 40px;
-  height: 40px;
+  width: 36px; /* 稍微减小尺寸 */
+  height: 36px;
   border: none;
-  background: none;
+  background: #f8f9fa; /* 浅灰色背景 */
+  border-radius: 50%; /* 圆形按钮 */
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  color: #333;
+  color: #495057; /* 深灰色图标 */
   cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid #e9ecef; /* 浅边框 */
 }
 
 .back-btn:hover, .help-btn:hover {
-  background-color: #f0f0f0;
-  border-radius: 20px;
+  background: #e9ecef;
+  color: #343a40; /* 更深的灰色 */
+  transform: scale(1.05); /* 微微放大 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.back-btn:active, .help-btn:active {
+  transform: scale(0.95);
+  background: #dee2e6;
+}
+
+.back-icon, .help-icon {
+  width: 20px;
+  height: 20px;
+  color: inherit;
+  stroke-width: 2.5; /* 加粗线条确保清晰 */
 }
 
 .title {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
-  color: #333;
+  color: #212529; /* 深色标题 */
   text-align: center;
   flex: 1;
+  letter-spacing: 0.3px; /* 轻微字母间距 */
 }
 
 .placeholder {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
+}
+
+/* 小屏幕优化 */
+@media (max-width: 375px) {
+  .mobile-header {
+    padding: 6px 12px;
+    min-height: 40px;
+  }
+  
+  .back-btn, .help-btn {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .back-icon, .help-icon {
+    width: 18px;
+    height: 18px;
+  }
+  
+  .title {
+    font-size: 16px;
+  }
+  
+  .placeholder {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/* 高分辨率屏幕优化 */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .back-icon, .help-icon {
+    stroke-width: 2.2;
+  }
+}
+
+/* 暗黑模式适配 */
+@media (prefers-color-scheme: dark) {
+  .mobile-header {
+    background: #1a1a1a;
+    border-bottom-color: #333;
+  }
+  
+  .back-btn, .help-btn {
+    background: #2d2d2d;
+    border-color: #444;
+    color: #e0e0e0;
+  }
+  
+  .back-btn:hover, .help-btn:hover {
+    background: #404040;
+    color: #fff;
+  }
+  
+  .title {
+    color: #fff;
+  }
 }
 </style>