添加图例显示和隐藏功能

src/components/TongzhouTrafficMap.vue

@@ -2,8 +2,11 @@
   <div class="map-wrapper">
     <div ref="mapContainer" class="map-container"></div>
 
-    <div class="map-legend" :style="privateStyle.legend" v-if="!mode || mode === '路口'">
-      <div class="legend-title">图例</div>
+    <div class="map-legend" :style="privateStyle.legend" v-if="(!mode || mode === '路口')" :class="{ 'legend-hidden': !legendVisible }">
+      <div class="legend-header">
+        <div class="legend-title">图例</div>
+        <div class="legend-close-btn" @click="toggleLegend">✕</div>
+      </div>
       <div class="legend-list">
         <div class="legend-item all-select" @click="toggleAll">
           <div class="legend-dot"
@@ -32,6 +35,9 @@
         </div>
       </div>
     </div>
+    <div class="legend-show-btn" v-if="(!mode || mode === '路口') && !legendVisible" @click="toggleLegend">
+      <div class="legend-show-icon">☰</div>
+    </div>
   </div>
 </template>
 
@@ -55,6 +61,7 @@ export default {
       privateStyle: {
         legend: {}
       },
+      legendVisible: true,
       activeLegends: ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"],
       legendConfig: [
         // 横向主干道 (由北向南)
@@ -417,6 +424,10 @@ export default {
       } else {
         console.warn("未在地图上找到该坐标对应的点位:", targetPos);
       }
+    },
+
+    toggleLegend() {
+      this.legendVisible = !this.legendVisible;
     }
   }
 };
@@ -557,16 +568,74 @@ export default {
   padding: 15px;
   border-radius: 6px;
   z-index: 100;
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
 }
 
-.legend-title {
-  color: #fff;
-  font-size: 14px;
+.map-legend.legend-hidden {
+  opacity: 0;
+  transform: translateX(100%);
+  pointer-events: none;
+}
+
+.legend-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 12px;
   border-bottom: 1px solid #1e4d8e;
   padding-bottom: 8px;
 }
 
+.legend-close-btn {
+  color: #8da6c7;
+  cursor: pointer;
+  font-size: 16px;
+  transition: color 0.3s;
+  line-height: 1;
+}
+
+.legend-close-btn:hover {
+  color: #ffffff;
+}
+
+.legend-show-btn {
+  position: absolute;
+  bottom: 30px;
+  right: 20px;
+  background: rgba(5, 22, 45, 0.9);
+  border: 1px solid #1e4d8e;
+  width: 40px;
+  height: 40px;
+  border-radius: 6px 0 0 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 99;
+  transition: all 0.3s ease-in-out;
+}
+
+.legend-show-btn:hover {
+  background: rgba(10, 30, 60, 0.9);
+  border-color: #3a75c4;
+}
+
+.legend-show-icon {
+  color: #8da6c7;
+  font-size: 18px;
+  transition: color 0.3s;
+}
+
+.legend-show-btn:hover .legend-show-icon {
+  color: #ffffff;
+}
+
+.legend-title {
+  color: #fff;
+  font-size: 14px;
+}
+
 .legend-item {
   display: flex;
   align-items: center;