fix(movement-supervision): 更新播放控制器图标样式，调整暗黑主题背景色

src/components/PlaybackController.vue

@@ -250,11 +250,6 @@ const handleTimelineClick = (event: MouseEvent) => {
   z-index: 1000;
   backdrop-filter: blur(5px);
   border-top: 1px solid #f0f0f0;
-
-  body[data-theme='dark'] & {
-    background-color: rgba(20, 20, 20, 0.9);
-    border-top: 1px solid #303030;
-  }
 }
 
 .time-display {

src/pages/movement-supervision.vue

@@ -11,6 +11,7 @@ import type { RobotRealtimeInfo } from '../apis/robot';
 import { getSceneByGroupId, getSceneById, monitorRealSceneById, monitorSceneById } from '../apis/scene';
 import expandIcon from '../assets/icons/png/expand.png';
 import foldIcon from '../assets/icons/png/fold.png';
+import foldIcon2 from '../assets/icons/png/fold-2.png';
 import FollowViewNotification from '../components/follow-view-notification.vue';
 import PlaybackController from '../components/PlaybackController.vue';
 import RobotLabels from '../components/robot-labels.vue';
@@ -861,7 +862,7 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
       <a-layout-content>
         <div ref="container" class="editor-container full"></div>
         <!-- 自定义地图工具栏（固定右下角，最小侵入） -->
-        <MapToolbar :token="EDITOR_KEY" :container-el="container" />
+        <MapToolbar v-if="!isPlaybackMode" :token="EDITOR_KEY" :container-el="container" />
       </a-layout-content>
     </a-layout>
   </a-layout>
@@ -906,7 +907,12 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
       @click="isPlaybackControllerVisible = !isPlaybackControllerVisible"
     >
       <template #icon>
-        <i class="icon" :class="isPlaybackControllerVisible ? 'fold' : 'expand'" />
+        <img
+          :src="foldIcon2"
+          class="fold-icon"
+          :class="{ folded: !isPlaybackControllerVisible }"
+          alt="toggle-playback"
+        />
       </template>
     </a-float-button>
 
@@ -967,11 +973,21 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
   z-index: 10;
   background-color: #fff;
   border-radius: 4px;
-  body[data-theme='dark'] & {
-    background-color: #000;
+  html[theme='dark'] & {
+    background-color: #5a5d5e;
   }
 }
 :deep(.ant-tabs-tab) {
   padding: 14px 12px !important;
 }
+
+.fold-icon {
+  width: 48px;
+  height: 48px;
+  transition: transform 0.3s ease;
+
+  &.folded {
+    transform: rotate(180deg);
+  }
+}
 </style>

src/pages/scene-editor.vue

@@ -1016,8 +1016,8 @@ const handleFloorChange = async (value: any) => {
   z-index: 10;
   background-color: #fff;
   border-radius: 4px;
-  body[data-theme='dark'] & {
-    background-color: #000;
+  html[theme='dark'] & {
+    background-color: #5a5d5e;
   }
 }
 
@@ -1083,4 +1083,9 @@ const handleFloorChange = async (value: any) => {
     margin-bottom: 0;
   }
 }
+html[theme='dark'] {
+  .sider-toggle {
+    background-color: #5a5d5e;
+  }
+}
 </style>