style: 实现地图的暗黑模式样式

src/styles/theme.scss

@@ -200,6 +200,7 @@
   --color-customize-column-tabs-header-border: #ebeef5;
 
   --color-shipment-status-label-bg: #ccd1db;
+  --color-shipment-status-shadow: rgba(0, 0, 0, 0.1);
 
   --color-slider-bg: #fff;
   --color-slider-thumb-start: #2b2f36;
@@ -251,6 +252,7 @@
   --color-customize-column-item-drag-bg: #7d4c26;
   --color-customize-column-tabs-header-border: #3f434a;
 
+  --color-shipment-status-shadow: rgba(0, 0, 0, 0.5);
   --color-shipment-status-label-bg: #656f7d;
   --color-shipment-status-detail-path-font-color: #b5b7ba;
   --color-shipment-status-label-font-color: #c6cad0;

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -4,6 +4,7 @@
     ref="mapContainer"
     style="width: 100%; height: 520px"
     class="tracking-map"
+    :class="{ 'dark-mode': themeStore.theme === 'dark' }"
   ></div>
 </template>
 <script setup lang="ts">
@@ -13,6 +14,10 @@ import OriginIcon from '../images/originIcon.png'
 import TransferIcon from '../images/transferIcon.png'
 import { onMounted, ref, watch } from 'vue'
 import * as turf from '@turf/turf'
+import { mapData } from './mapData'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const props = defineProps<{
   serial_no?: string
@@ -549,12 +554,13 @@ onUnmounted(() => {
           margin-left: -2px;
           font-size: 12px;
           font-weight: 700;
+          color: #2b2f36;
         }
       }
       .label {
         margin-bottom: 4px;
         font-size: 12px;
-        color: let(--color-neutral-2);
+        color: #646a73;
       }
     }
   }
@@ -563,28 +569,91 @@ onUnmounted(() => {
   .leaflet-popup-tip {
     display: none;
   }
-  .transport-map {
-    .leaflet-touch {
-      .leaflet-bar {
-        border: 0;
-        border-radius: 4px;
-        overflow: hidden;
-      }
-    }
-  }
+
   .leaflet-control-zoom {
     span {
       color: #2b2f36;
     }
   }
 }
-/* 示例：将所有地图元素的颜色反转 */
-.leaflet-container {
+.leaflet-control {
+  a.leaflet-control-zoom-in,
+  a.leaflet-control-zoom-out,
+  a.leaflet-bar-part {
+    width: 26px;
+    height: 26px;
+    font-size: 18px;
+  }
+}
+.dark-mode {
+  div.leaflet-control-zoom.leaflet-bar.leaflet-control {
+    border: 0;
+    border-radius: 4px;
+    box-shadow: none;
+    a {
+      background-color: #3c414a;
+      border-bottom: none;
+      span {
+        color: var(--color-neutral-1);
+      }
+      &:first-child {
+        span {
+          display: inline-block;
+          width: 24px;
+          border-bottom: 2px solid #575c64;
+        }
+      }
+    }
+  }
+  .reset-zoom-control {
+    border: none;
+    background-color: #3c414a;
+  }
+  a.leaflet-bar-part {
+    background-color: #3c414a;
+    border-radius: 4px;
+    box-shadow: none;
+    overflow: hidden;
+    div {
+      border-color: var(--color-neutral-1) !important;
+      div {
+        background-color: var(--color-neutral-1) !important;
+      }
+    }
+  }
+}
+
+/* 示例：将所有地图图片的颜色反转 */
+.dark-mode img:not(.leaflet-marker-icon) {
   filter: invert(1) hue-rotate(200deg);
 }
+// 防止暗黑模式下地图超出容器
+.tracking-map {
+  overflow: hidden;
+}
+// 修改暗黑模式下的背景色
+.leaflet-container.dark-mode,
+.leaflet-map-pane.dark-mode,
+.leaflet-tile-container.dark-mode {
+  background-color: #2b2f36;
+}
+// 处理版权信息在切换模式后样式错误bug
+.leaflet-right .leaflet-control-attribution {
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0 4px 4px 0;
+  color: #2b2f36;
+  span {
+    font-size: 12px;
+    color: #2b2f36;
+  }
+  a {
+    color: #0078a8;
+    font-size: 12px;
+  }
+}
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {
-  margin-top: 10px; /* 增加上边距，使按钮与默认缩放按钮之间有间距 */
+  margin-top: 10px;
   border-radius: 4px;
   background-color: white;
   border: 1px solid #ccc;

src/views/Tracking/src/components/TrackingDetail/src/components/TransportStep.vue

@@ -45,6 +45,8 @@ const handleTabClick = (name: string) => {
   height: 484px;
   background-color: #fff;
   border-radius: 12px;
+  border: 1px solid var(--color-border);
+  box-shadow: -2px 2px 12px 0px var(--color-shipment-status-shadow);
   .header {
     display: flex;
     height: 48px;