refactor: 移除未使用的功能和组件，优化地图工具栏的代码结构，更新样式以支持深色主题

src/components/map-toolbar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import SvgIcon from '@common/svg-icon.vue';
 import type { EditorService } from '@core/editor.service';
 import { useToolbar } from '@core/useToolbar';
 import { computed, inject, type InjectionKey, onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
@@ -17,7 +16,7 @@ const props = defineProps<Props>();
 
 const editorRef = inject(props.token)!;
 
-const isFullscreen = computed(() => !!document.fullscreenElement);
+// const isFullscreen = computed(() => !!document.fullscreenElement);
 
 // 颜色配置面板状态
 const showColorConfig = ref(false);
@@ -26,7 +25,7 @@ const showColorConfig = ref(false);
 const {
   toggleGrid: _toggleGrid,
   toggleRule: _toggleRule,
-  fitView: _fitView,
+  // fitView: _fitView,
   zoomIn: _zoomIn,
   zoomOut: _zoomOut,
 } = useToolbar();
@@ -37,40 +36,40 @@ const zoomIn = () => {
 const zoomOut = () => {
   if (editorRef.value) _zoomOut(editorRef.value);
 };
-const fitView = async () => {
+// const fitView = async () => {
-  if (editorRef.value) await _fitView(editorRef.value);
+//   if (editorRef.value) await _fitView(editorRef.value);
-};
+// };
 
-const toggleFullscreen = async () => {
+// const toggleFullscreen = async () => {
-  try {
+//   try {
-    const el = props.containerEl || document.documentElement;
+//     const el = props.containerEl || document.documentElement;
-    if (!document.fullscreenElement) {
+//     if (!document.fullscreenElement) {
-      await el.requestFullscreen?.();
+//       await el.requestFullscreen?.();
-    } else {
+//     } else {
-      await document.exitFullscreen?.();
+//       await document.exitFullscreen?.();
-    }
+//     }
-  } catch (e) {
+//   } catch (e) {
-    console.warn('全屏切换失败', e);
+//     console.warn('全屏切换失败', e);
-  }
+//   }
-};
+// };
 
-const downloadBase64 = (base64: string, filename = 'map.png') => {
+// const downloadBase64 = (base64: string, filename = 'map.png') => {
-  const a = document.createElement('a');
+//   const a = document.createElement('a');
-  a.href = base64;
+//   a.href = base64;
-  a.download = filename;
+//   a.download = filename;
-  document.body.appendChild(a);
+//   document.body.appendChild(a);
-  a.click();
+//   a.click();
-  document.body.removeChild(a);
+//   document.body.removeChild(a);
-};
+// };
 
-const exportImage = () => {
+// const exportImage = () => {
-  try {
+//   try {
-    const base64 = editorRef.value?.toPng?.(2);
+//     const base64 = editorRef.value?.toPng?.(2);
-    if (base64) downloadBase64(base64, '地图截图.png');
+//     if (base64) downloadBase64(base64, '地图截图.png');
-  } catch (e) {
+//   } catch (e) {
-    console.warn('截图失败', e);
+//     console.warn('截图失败', e);
-  }
+//   }
-};
+// };
 
 // 网格/标尺开关：调用 useToolbar 封装
 const toggleGrid = () => editorRef.value && _toggleGrid(editorRef.value);
@@ -164,7 +163,7 @@ onBeforeUnmount(() => {
 
 // 定义组件名称
 defineOptions({
-  name: 'MapToolbar'
+  name: 'MapToolbar',
 });
 </script>
 
@@ -172,10 +171,10 @@ defineOptions({
   <div class="map-toolbar">
     <a-space size="small">
       <a-button class="icon-btn tool-btn" size="small" :title="'放大'" @click="zoomIn">
-        <SvgIcon name="enlarge" :size="18" :forceColor="true" />
+        <img src="/src/assets/icons/png/enlarge.png" alt="放大" class="toolbar-icon" />
       </a-button>
       <a-button class="icon-btn tool-btn" size="small" :title="'缩小'" @click="zoomOut">
-        <SvgIcon name="shrink" :size="18" :forceColor="true" />
+        <img src="/src/assets/icons/png/shrink.png" alt="缩小" class="toolbar-icon" />
       </a-button>
       <!-- <a-button class="icon-btn tool-btn" size="small" :title="'适配视图'" @click="fitView"> 适配视图 </a-button> -->
       <a-button
@@ -187,19 +186,24 @@ defineOptions({
         @click="toggleMeasure"
         :title="measuring ? '退出测量' : '测量尺'"
       >
-        <SvgIcon name="rule" :size="16" :forceColor="true" :active="measuring" />
+        <img src="/src/assets/icons/png/rule.png" alt="测量尺" class="toolbar-icon" :class="{ active: measuring }" />
       </a-button>
-      <a-button class="icon-btn tool-btn" size="small" :title="'标尺'" @click="toggleRule">标尺</a-button>
+      <!-- <a-button class="icon-btn tool-btn" size="small" :title="'标尺'" @click="toggleRule">标尺</a-button>
-      <a-button class="icon-btn tool-btn" size="small" :title="'网格'" @click="toggleGrid">网格</a-button>
+      <a-button class="icon-btn tool-btn" size="small" :title="'网格'" @click="toggleGrid">网格</a-button> -->
-      <a-button 
+      <a-button
-        class="icon-btn tool-btn" 
+        class="icon-btn tool-btn"
-        size="small" 
+        size="small"
-        :title="'颜色配置'" 
+        :title="'颜色配置'"
         :type="showColorConfig ? 'primary' : 'default'"
         :ghost="!showColorConfig"
         @click="toggleColorConfig"
       >
-        <SvgIcon name="palette" :size="16" :forceColor="true" :active="showColorConfig" />
+        <img
+          src="/src/assets/icons/png/theme.png"
+          alt="颜色配置"
+          class="toolbar-icon"
+          :class="{ active: showColorConfig }"
+        />
       </a-button>
       <!-- <a-button class="icon-btn tool-btn" size="small" :title="'截图'" @click="exportImage">截图</a-button>
       <a-button
@@ -218,12 +222,7 @@ defineOptions({
     <div class="color-config-container" @click.stop>
       <div class="color-config-header">
         <h3>编辑器颜色配置</h3>
-        <a-button 
+        <a-button type="text" size="small" @click="showColorConfig = false" class="close-btn">
-          type="text" 
-          size="small" 
-          @click="showColorConfig = false"
-          class="close-btn"
-        >
           <SvgIcon name="close" :size="16" />
         </a-button>
       </div>
@@ -278,35 +277,39 @@ defineOptions({
   right: 24px;
   bottom: 24px;
   z-index: 101;
-  background: rgba(0, 0, 0, 0.45);
+  background: #eeeff2;
-  padding: 8px 10px;
+  padding: 8px 12px;
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  color: #fff;
+  color: #333;
+
   :deep(.ant-btn) {
     padding: 0 10px;
+    border: none;
+    box-shadow: none;
   }
 
   .icon-btn {
-    padding: 8px;
+    padding: 6px;
-    margin: 0 4px;
+    margin: 0 2px;
-    // width: 32px;
+    width: 32px;
-    // height: 32px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: get-color(primary);
+    background-color: transparent;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(13, 187, 138, 0.1);
+    }
   }
-  /* 提升特异性，覆盖全局 .ant-btn.icon-btn.tool-btn:hover 的 !important 背景色 */
+
-  :deep(.ant-btn.icon-btn.tool-btn:hover) {
+  .toolbar-icon {
-    background-color: transparent !important;
+    width: 18px;
-    color: #0dbb8a !important;
+    height: 18px;
-    box-shadow: none !important;
+    transition: all 0.2s ease;
-  }
-  .ant-btn.icon-btn.tool-btn:not(:disabled):hover {
-    background-color: transparent !important;
-    color: #0dbb8a !important;
-    box-shadow: none !important;
   }
 }
 
@@ -320,19 +323,17 @@ defineOptions({
       outline: none !important;
     }
   }
-  /* 常规与悬停覆盖（需高特异性与 !important 以压过上面的 hover 规则） */
+  /* 测量按钮激活状态 */
   .ant-btn.icon-btn.tool-btn.measuring {
     background-color: #0dbb8a;
     width: 32px;
     height: 32px;
     border-color: #0dbb8a;
+
+    .toolbar-icon {
+      filter: brightness(0) invert(1);
+    }
   }
-  // :deep(.ant-btn.icon-btn.tool-btn.measuring:hover) {
-  //   background-color: #ff4d4f !important;
-  //   border-color: #ff4d4f !important;
-  //   color: #fff !important;
-  //   box-shadow: none !important;
-  // }
 }
 
 /* 网格背景（占位实现），通过 toggleGrid 开关 */
@@ -416,3 +417,52 @@ defineOptions({
   height: 100%;
 }
 </style>
+
+<!-- 深色主题样式 -->
+<style lang="scss">
+[theme='dark'] .map-toolbar {
+  background: #36393a;
+  color: rgba(255, 255, 255, 0.6509803922);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+  .toolbar-icon {
+    filter: brightness(0) invert(1);
+  }
+  .ant-btn.icon-btn.tool-btn:not(:disabled) {
+    color: rgba(255, 255, 255, 0.6509803922) !important;
+    &:hover {
+      background-color: #464949 !important;
+    }
+  }
+  .ant-btn.icon-btn.tool-btn.measuring {
+    background-color: #0dbb8a;
+    border-color: #0dbb8a;
+
+    .toolbar-icon {
+      filter: brightness(0) invert(1);
+    }
+  }
+}
+
+[theme='dark'] .color-config-container {
+  background: #1f1f1f;
+}
+
+[theme='dark'] .color-config-header {
+  background: #2a2a2a;
+  border-bottom: 1px solid #404040;
+}
+
+[theme='dark'] .color-config-header h3 {
+  color: #e6e6e6;
+}
+
+[theme='dark'] .close-btn {
+  color: #999;
+}
+
+[theme='dark'] .close-btn:hover {
+  color: #ccc;
+  background: #404040;
+}
+</style>

src/services/color/color-config.service.ts

@@ -482,11 +482,11 @@ const DARK_THEME_COLORS: EditorColorConfig = {
   storage: {
     occupied: '#ff4d4f',
     available: '#52c41a',
-    default: '#f5f5f5',
+    default: '#f5f5f574',
     locked: '#faad14',
     moreButton: {
       background: '#e6f4ff',
-      border: '#1677ff',
+      border: '#f5f5f574',
       text: '#1677ff'
     }
   },