feat: 更新开发环境token，重构颜色配置逻辑，简化颜色更新方法，新增默认颜色生成函数

.env.development

@@ -4,5 +4,5 @@ ENV_WEBSOCKET_BASE=/ws
 ENV_STORAGE_WEBSOCKET_BASE=/vwedWs
 
 # 开发环境token配置 - 可以手动设置或从另一个项目获取后填入
-ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTAzMzkwMTcsInVzZXJuYW1lIjoiYWRtaW4ifQ.uGWMIPH9-sdyEwr0bQBMKQSTAjYBZhlIVDRHGtheENE
+ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTc0NDc3NzMsInVzZXJuYW1lIjoiYWRtaW4ifQ.kCwSuHfYWZS5uVZLL912gTT2OrCEO4dyHJAjkDz7hE0
 ENV_DEV_TENANT_ID=1000

src/components/color/color-config-panel.vue

@@ -10,35 +10,35 @@
         <label>普通点填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.point.small.fill[1]"
-          @update:modelValue="(value) => updateColor('point.small.fill.1', { target: { value } })"
+          @update:modelValue="(value) => updateColor('point.small.fill.1', value)"
         />
       </div>
       <div class="color-group">
         <label>等待点填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.point.small.fill[2]"
-          @update:modelValue="(value) => updateColor('point.small.fill.2', { target: { value } })"
+          @update:modelValue="(value) => updateColor('point.small.fill.2', value)"
         />
       </div>
       <div class="color-group">
         <label>避让点填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.point.small.fill[3]"
-          @update:modelValue="(value) => updateColor('point.small.fill.3', { target: { value } })"
+          @update:modelValue="(value) => updateColor('point.small.fill.3', value)"
         />
       </div>
       <div class="color-group">
         <label>临时避让点填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.point.small.fill[4]"
-          @update:modelValue="(value) => updateColor('point.small.fill.4', { target: { value } })"
+          @update:modelValue="(value) => updateColor('point.small.fill.4', value)"
         />
       </div>
       <div class="color-group">
         <label>库区点填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.point.small.fill[5]"
-          @update:modelValue="(value) => updateColor('point.small.fill.5', { target: { value } })"
+          @update:modelValue="(value) => updateColor('point.small.fill.5', value)"
         />
       </div>
     </div>
@@ -55,35 +55,35 @@
           <label>库区填充：</label>
           <ColorPickerWithAlpha 
             :modelValue="config.area.fill[1]"
-            @update:modelValue="(value) => updateColor('area.fill.1', { target: { value } })"
+            @update:modelValue="(value) => updateColor('area.fill.1', value)"
           />
         </div>
         <div class="color-group">
           <label>互斥区填充：</label>
           <ColorPickerWithAlpha 
             :modelValue="config.area.fill[11]"
-            @update:modelValue="(value) => updateColor('area.fill.11', { target: { value } })"
+            @update:modelValue="(value) => updateColor('area.fill.11', value)"
           />
         </div>
         <div class="color-group">
           <label>非互斥区填充：</label>
           <ColorPickerWithAlpha 
             :modelValue="config.area.fill[12]"
-            @update:modelValue="(value) => updateColor('area.fill.12', { target: { value } })"
+            @update:modelValue="(value) => updateColor('area.fill.12', value)"
           />
         </div>
         <div class="color-group">
           <label>约束区填充：</label>
           <ColorPickerWithAlpha 
             :modelValue="config.area.fill[13]"
-            @update:modelValue="(value) => updateColor('area.fill.13', { target: { value } })"
+            @update:modelValue="(value) => updateColor('area.fill.13', value)"
           />
         </div>
         <div class="color-group">
           <label>描述区填充：</label>
           <ColorPickerWithAlpha 
             :modelValue="config.area.fill[14]"
-            @update:modelValue="(value) => updateColor('area.fill.14', { target: { value } })"
+            @update:modelValue="(value) => updateColor('area.fill.14', value)"
           />
         </div>
       </div>
@@ -170,21 +170,21 @@
         <label>空载路线：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.route.strokeEmpty"
-          @update:modelValue="(value) => updateColor('route.strokeEmpty', { target: { value } })"
+          @update:modelValue="(value) => updateColor('route.strokeEmpty', value)"
         />
       </div>
       <div class="color-group">
         <label>载货路线：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.route.strokeLoaded"
-          @update:modelValue="(value) => updateColor('route.strokeLoaded', { target: { value } })"
+          @update:modelValue="(value) => updateColor('route.strokeLoaded', value)"
         />
       </div>
       <div class="color-group">
         <label>禁行路线：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.route.strokeForbidden"
-          @update:modelValue="(value) => updateColor('route.strokeForbidden', { target: { value } })"
+          @update:modelValue="(value) => updateColor('route.strokeForbidden', value)"
         />
       </div>
     </div>
@@ -196,28 +196,28 @@
         <label>正常状态填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.robot.fillNormal"
-          @update:modelValue="(value) => updateColor('robot.fillNormal', { target: { value } })"
+          @update:modelValue="(value) => updateColor('robot.fillNormal', value)"
         />
       </div>
       <div class="color-group">
         <label>告警状态填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.robot.fillWarning"
-          @update:modelValue="(value) => updateColor('robot.fillWarning', { target: { value } })"
+          @update:modelValue="(value) => updateColor('robot.fillWarning', value)"
         />
       </div>
       <div class="color-group">
         <label>故障状态填充：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.robot.fillFault"
-          @update:modelValue="(value) => updateColor('robot.fillFault', { target: { value } })"
+          @update:modelValue="(value) => updateColor('robot.fillFault', value)"
         />
       </div>
       <div class="color-group">
         <label>路径线条：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.robot.line"
-          @update:modelValue="(value) => updateColor('robot.line', { target: { value } })"
+          @update:modelValue="(value) => updateColor('robot.line', value)"
         />
       </div>
       
@@ -276,14 +276,14 @@
         <label>占用状态：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.storage.occupied"
-          @update:modelValue="(value) => updateColor('storage.occupied', { target: { value } })"
+          @update:modelValue="(value) => updateColor('storage.occupied', value)"
         />
       </div>
       <div class="color-group">
         <label>默认状态：</label>
         <ColorPickerWithAlpha 
           :modelValue="config.storage.default"
-          @update:modelValue="(value) => updateColor('storage.default', { target: { value } })"
+          @update:modelValue="(value) => updateColor('storage.default', value)"
         />
       </div>
     </div>
@@ -331,14 +331,12 @@ const hasRobotSizeChanged = computed(() => {
          tempRobotSize.value.imageHeight !== config.value.robot.imageHeight;
 });
 
-const updateColor = (path: string, event: Event | { target: { value: string } }) => {
+// 通用颜色更新方法
-  const target = event.target as HTMLInputElement;
+const updateColor = (path: string, value: string) => {
-  if (target) {
+  colorConfig.setColor(path, value);
-    colorConfig.setColor(path, target.value);
-  }
 };
 
-// 更新临时机器人尺寸
+// 机器人尺寸相关方法
 const updateTempRobotSize = (key: 'imageWidth' | 'imageHeight', event: Event) => {
   const target = event.target as HTMLInputElement;
   if (target) {
@@ -346,51 +344,45 @@ const updateTempRobotSize = (key: 'imageWidth' | 'imageHeight', event: Event) =>
   }
 };
 
-// 应用机器人尺寸更改
 const applyRobotSize = () => {
   colorConfig.setColor('robot.imageWidth', tempRobotSize.value.imageWidth.toString());
   colorConfig.setColor('robot.imageHeight', tempRobotSize.value.imageHeight.toString());
 };
 
-// 重置机器人尺寸到当前配置值
 const resetRobotSize = () => {
   tempRobotSize.value.imageWidth = config.value.robot.imageWidth;
   tempRobotSize.value.imageHeight = config.value.robot.imageHeight;
 };
 
-// 更新边框属性
+// 边框配置相关方法
 const updateBorderProperty = (property: 'width', event: Event) => {
   const target = event.target as HTMLInputElement;
-  if (target) {
+  if (!target) return;
-    const value = Number(target.value);
-    // 更新全局边框宽度
-    colorConfig.setColor(`area.border.${property}`, value.toString());
   
-    // 同时更新所有区域类型的边框宽度
+  const value = Number(target.value);
-    const areaTypes = [1, 11, 12, 13, 14];
+  colorConfig.setColor(`area.border.${property}`, value.toString());
-    areaTypes.forEach(type => {
+  
-      colorConfig.setAreaBorderWidth(type, value);
+  // 同时更新所有区域类型的边框属性
-    });
+  const areaTypes = [1, 11, 12, 13, 14];
-  }
+  areaTypes.forEach(type => {
+    colorConfig.setAreaBorderWidth(type, value);
+  });
 };
 
-// 更新边框透明度
 const updateBorderOpacity = (event: Event) => {
   const target = event.target as HTMLInputElement;
-  if (target) {
+  if (!target) return;
-    const opacity = Number(target.value) / 100;
-    // 更新全局边框透明度
-    colorConfig.setColor('area.border.opacity', opacity.toString());
   
-    // 同时更新所有区域类型的边框透明度
+  const opacity = Number(target.value) / 100;
-    const areaTypes = [1, 11, 12, 13, 14];
+  colorConfig.setColor('area.border.opacity', opacity.toString());
-    areaTypes.forEach(type => {
+  
-      colorConfig.setAreaBorderOpacity(type, opacity);
+  // 同时更新所有区域类型的边框透明度
-    });
+  const areaTypes = [1, 11, 12, 13, 14];
-  }
+  areaTypes.forEach(type => {
+    colorConfig.setAreaBorderOpacity(type, opacity);
+  });
 };
 
-// 更新区域边框颜色
 const updateAreaBorderColor = (areaType: number, color: string) => {
   colorConfig.setAreaBorderColor(areaType, color);
 };

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

@@ -1,6 +1,17 @@
+import { MapAreaType, MapPointType } from '@api/map';
 import sTheme from '@core/theme.service';
 import { ref, watch } from 'vue';
 
+/**
+ * 点位类型常量 - 从枚举中提取数字类型
+ */
+const POINT_TYPES = Object.values(MapPointType).filter(value => typeof value === 'number') as number[];
+
+/**
+ * 区域类型常量 - 从枚举中提取数字类型
+ */
+const AREA_TYPES = Object.values(MapAreaType).filter(value => typeof value === 'number') as number[];
+
 /**
  * 编辑器颜色配置接口
  */
@@ -110,6 +121,129 @@ export interface EditorColorConfig {
   };
 }
 
+/**
+ * 生成点位类型的默认颜色配置
+ */
+function generatePointTypeColors(): Record<number, { stroke: string; strokeActive: string; fill: string }> {
+  const colors: Record<number, { stroke: string; strokeActive: string; fill: string }> = {};
+  
+  // 预定义的颜色方案
+  const colorSchemes = {
+    // 小点位颜色 (1-9)
+    small: {
+      stroke: '#8C8C8C',
+      strokeActive: '#EBB214',
+      fills: ['#14D1A5', '#69C6F5', '#E48B1D', '#E48B1D', '#a72b69']
+    },
+    // 大点位颜色 (11+)
+    large: {
+      stroke: '#595959',
+      strokeActive: '#EBB214',
+      fills: ['#1890ff', '#52c41a', '#faad14', '#722ed1', '#13c2c2', '#ff4d4f']
+    }
+  };
+  
+  POINT_TYPES.forEach(type => {
+    const isSmallPoint = type >= 1 && type <= 9;
+    const scheme = isSmallPoint ? colorSchemes.small : colorSchemes.large;
+    const fillIndex = isSmallPoint ? (type - 1) : (type - 11);
+    
+    colors[type] = {
+      stroke: scheme.stroke,
+      strokeActive: scheme.strokeActive,
+      fill: scheme.fills[fillIndex] || scheme.fills[0]
+    };
+  });
+  
+  return colors;
+}
+
+/**
+ * 生成区域类型的默认颜色配置
+ */
+function generateAreaTypeColors(): Record<number, { 
+  stroke: string; 
+  strokeActive: string; 
+  fill: string; 
+  borderColor: string; 
+  borderWidth: number; 
+  borderOpacity: number 
+}> {
+  const colors: Record<number, { 
+    stroke: string; 
+    strokeActive: string; 
+    fill: string; 
+    borderColor: string; 
+    borderWidth: number; 
+    borderOpacity: number 
+  }> = {};
+  
+  // 预定义的颜色方案
+  const colorSchemes = [
+    { stroke: '#9ACDFF99', fill: '#9ACDFF33', borderColor: '#1890FF' }, // 库区
+    { stroke: '#FF535399', fill: '#FF9A9A33', borderColor: '#FF4D4F' }, // 互斥区
+    { stroke: '#0DBB8A99', fill: '#0DBB8A33', borderColor: '#52C41A' }, // 非互斥区
+    { stroke: '#e61e4aad', fill: '#e61e4a33', borderColor: '#FA8C16' }, // 约束区
+    { stroke: '#FFD70099', fill: '#FFD70033', borderColor: '#722ED1' }  // 描述区
+  ];
+  
+  AREA_TYPES.forEach((type, index) => {
+    const scheme = colorSchemes[index] || colorSchemes[0];
+    colors[type] = {
+      stroke: scheme.stroke,
+      strokeActive: '#EBB214',
+      fill: scheme.fill,
+      borderColor: scheme.borderColor,
+      borderWidth: 1,
+      borderOpacity: 0.15
+    };
+  });
+  
+  return colors;
+}
+
+/**
+ * 生成区域描边颜色配置
+ */
+function generateAreaStrokeColors(): Record<number, string> {
+  const colors: Record<number, string> = {};
+  const colorSchemes = ['#9ACDFF99', '#FF535399', '#0DBB8A99', '#e61e4aad', '#FFD70099'];
+  
+  AREA_TYPES.forEach((type, index) => {
+    colors[type] = colorSchemes[index] || colorSchemes[0];
+  });
+  
+  return colors;
+}
+
+/**
+ * 生成区域填充颜色配置
+ */
+function generateAreaFillColors(): Record<number, string> {
+  const colors: Record<number, string> = {};
+  const colorSchemes = ['#9ACDFF33', '#FF9A9A33', '#0DBB8A33', '#e61e4a33', '#FFD70033'];
+  
+  AREA_TYPES.forEach((type, index) => {
+    colors[type] = colorSchemes[index] || colorSchemes[0];
+  });
+  
+  return colors;
+}
+
+/**
+ * 生成区域边框颜色配置
+ */
+function generateAreaBorderColors(): Record<number, string> {
+  const colors: Record<number, string> = {};
+  const colorSchemes = ['#1890FF', '#FF4D4F', '#52C41A', '#FA8C16', '#722ED1'];
+  
+  AREA_TYPES.forEach((type, index) => {
+    colors[type] = colorSchemes[index] || colorSchemes[0];
+  });
+  
+  return colors;
+}
+
 /**
  * 默认颜色配置
  */
@@ -137,21 +271,7 @@ const DEFAULT_COLORS: EditorColorConfig = {
       strokeLocked: '#faad14',
       strokeUnlocked: '#52c41a'
     },
-    types: {
+    types: generatePointTypeColors()
-      // 小点位类型 (1-9)
-      1: { stroke: '#8C8C8C', strokeActive: '#EBB214', fill: '#14D1A5' }, // 普通点
-      2: { stroke: '#8C8C8C', strokeActive: '#EBB214', fill: '#69C6F5' }, // 等待点
-      3: { stroke: '#8C8C8C', strokeActive: '#EBB214', fill: '#E48B1D' }, // 避让点
-      4: { stroke: '#8C8C8C', strokeActive: '#EBB214', fill: '#E48B1D' }, // 临时避让点
-      5: { stroke: '#8C8C8C', strokeActive: '#EBB214', fill: '#a72b69' }, // 库区点
-      // 大点位类型 (11+)
-      11: { stroke: '#595959', strokeActive: '#EBB214', fill: '#1890ff' }, // 电梯点
-      12: { stroke: '#595959', strokeActive: '#EBB214', fill: '#52c41a' }, // 自动门点
-      13: { stroke: '#595959', strokeActive: '#EBB214', fill: '#faad14' }, // 充电点
-      14: { stroke: '#595959', strokeActive: '#EBB214', fill: '#722ed1' }, // 停靠点
-      15: { stroke: '#595959', strokeActive: '#EBB214', fill: '#13c2c2' }, // 动作点
-      16: { stroke: '#595959', strokeActive: '#EBB214', fill: '#ff4d4f' }, // 禁行点
-    }
   },
   route: {
     strokeActive: '#EBB214',
@@ -161,75 +281,15 @@ const DEFAULT_COLORS: EditorColorConfig = {
   },
   area: {
     strokeActive: '#EBB214',
-    stroke: {
+    stroke: generateAreaStrokeColors(),
-      1: '#9ACDFF99',
+    fill: generateAreaFillColors(),
-      11: '#FF535399',
-      12: '#0DBB8A99',
-      13: '#e61e4aad',
-      14: '#FFD70099'
-    },
-    fill: {
-      1: '#9ACDFF33',
-      11: '#FF9A9A33',
-      12: '#0DBB8A33',
-      13: '#e61e4a33',
-      14: '#FFD70033'
-    },
     // 边框配置
     border: {
       width: 1,                    // 默认边框宽度
       opacity: 0.15,              // 默认边框透明度 15%
-      colors: {
+      colors: generateAreaBorderColors()
-        1: '#1890FF',             // 库区边框颜色
-        11: '#FF4D4F',            // 互斥区边框颜色
-        12: '#52C41A',            // 非互斥区边框颜色
-        13: '#FA8C16',            // 约束区边框颜色
-        14: '#722ED1'             // 描述区边框颜色
-      }
     },
-    types: {
+    types: generateAreaTypeColors()
-      // 区域类型
-      1: { 
-        stroke: '#9ACDFF99', 
-        strokeActive: '#EBB214', 
-        fill: '#9ACDFF33',
-        borderColor: '#1890FF',
-        borderWidth: 1,
-        borderOpacity: 0.15
-      }, // 库区
-      11: { 
-        stroke: '#FF535399', 
-        strokeActive: '#EBB214', 
-        fill: '#FF9A9A33',
-        borderColor: '#FF4D4F',
-        borderWidth: 1,
-        borderOpacity: 0.15
-      }, // 互斥区
-      12: { 
-        stroke: '#0DBB8A99', 
-        strokeActive: '#EBB214', 
-        fill: '#0DBB8A33',
-        borderColor: '#52C41A',
-        borderWidth: 1,
-        borderOpacity: 0.15
-      }, // 非互斥区
-      13: { 
-        stroke: '#e61e4aad', 
-        strokeActive: '#EBB214', 
-        fill: '#e61e4a33',
-        borderColor: '#FA8C16',
-        borderWidth: 1,
-        borderOpacity: 0.15
-      }, // 约束区
-      14: { 
-        stroke: '#FFD70099', 
-        strokeActive: '#EBB214', 
-        fill: '#FFD70033',
-        borderColor: '#722ED1',
-        borderWidth: 1,
-        borderOpacity: 0.15
-      }, // 描述区
-    }
   },
   robot: {
     stroke: '#01FDAF99',
@@ -414,6 +474,9 @@ class ColorConfigService {
     // 重置标记，允许后续自动保存
     this.isResetting = false;
     
+    // 更新所有机器人的图片尺寸
+    this.updateAllRobotImageSizes();
+    
     // 触发编辑器重新渲染
     this.triggerRender();
   }
@@ -526,138 +589,164 @@ class ColorConfigService {
    * 从主题配置加载默认颜色
    */
   private loadConfig(): void {
-    // 如果正在重置，不加载主题配置
+    if (this.isResetting) return;
-    if (this.isResetting) {
-      return;
-    }
     
     const theme = sTheme.editor as any;
-    if (theme) {
+    if (!theme) return;
-      // 从主题配置中加载颜色，如果没有则使用默认值
+
-      this.config.value = this.mergeConfig(DEFAULT_COLORS, {
+    // 使用简化的主题配置映射
-        point: {
+    const themeConfig = this.buildThemeConfig(theme);
-          small: {
+    this.config.value = this.mergeConfig(DEFAULT_COLORS, themeConfig);
-            stroke: theme['point-s']?.stroke || DEFAULT_COLORS.point.small.stroke,
+  }
-            strokeActive: theme['point-s']?.strokeActive || DEFAULT_COLORS.point.small.strokeActive,
+
-            fill: {
+  /**
-              1: theme['point-s']?.['fill-1'] || DEFAULT_COLORS.point.small.fill[1],
+   * 构建主题配置对象
-              2: theme['point-s']?.['fill-2'] || DEFAULT_COLORS.point.small.fill[2],
+   */
-              3: theme['point-s']?.['fill-3'] || DEFAULT_COLORS.point.small.fill[3],
+  private buildThemeConfig(theme: any): Partial<EditorColorConfig> {
-              4: theme['point-s']?.['fill-4'] || DEFAULT_COLORS.point.small.fill[4],
+    const config: Partial<EditorColorConfig> = {};
-              5: theme['point-s']?.['fill-5'] || DEFAULT_COLORS.point.small.fill[5],
+
-            }
+    // 点位配置
-          },
+    if (theme['point-s'] || theme['point-l']) {
-          large: {
+      config.point = {
-            stroke: theme['point-l']?.stroke || DEFAULT_COLORS.point.large.stroke,
+        small: {
-            strokeActive: theme['point-l']?.strokeActive || DEFAULT_COLORS.point.large.strokeActive,
+          stroke: theme['point-s']?.stroke || DEFAULT_COLORS.point.small.stroke,
-            strokeOccupied: theme['point-l']?.['stroke-occupied'] || DEFAULT_COLORS.point.large.strokeOccupied,
+          strokeActive: theme['point-s']?.strokeActive || DEFAULT_COLORS.point.small.strokeActive,
-            strokeUnoccupied: theme['point-l']?.['stroke-unoccupied'] || DEFAULT_COLORS.point.large.strokeUnoccupied,
+          fill: this.buildFillConfig(theme['point-s'], 'fill', DEFAULT_COLORS.point.small.fill)
-            strokeEmpty: theme['point-l']?.['stroke-empty'] || DEFAULT_COLORS.point.large.strokeEmpty,
-            strokeDisabled: theme['point-l']?.['stroke-disabled'] || DEFAULT_COLORS.point.large.strokeDisabled,
-            strokeEnabled: theme['point-l']?.['stroke-enabled'] || DEFAULT_COLORS.point.large.strokeEnabled,
-            strokeLocked: theme['point-l']?.['stroke-locked'] || DEFAULT_COLORS.point.large.strokeLocked,
-            strokeUnlocked: theme['point-l']?.['stroke-unlocked'] || DEFAULT_COLORS.point.large.strokeUnlocked,
-          }
         },
-        route: {
+        large: {
-          strokeActive: theme.route?.strokeActive || DEFAULT_COLORS.route.strokeActive,
+          stroke: theme['point-l']?.stroke || DEFAULT_COLORS.point.large.stroke,
-          strokeEmpty: theme.route?.['stroke-empty'] || DEFAULT_COLORS.route.strokeEmpty,
+          strokeActive: theme['point-l']?.strokeActive || DEFAULT_COLORS.point.large.strokeActive,
-          strokeLoaded: theme.route?.['stroke-loaded'] || DEFAULT_COLORS.route.strokeLoaded,
+          strokeOccupied: theme['point-l']?.['stroke-occupied'] || DEFAULT_COLORS.point.large.strokeOccupied,
-          strokeForbidden: theme.route?.['stroke-forbidden'] || DEFAULT_COLORS.route.strokeForbidden,
+          strokeUnoccupied: theme['point-l']?.['stroke-unoccupied'] || DEFAULT_COLORS.point.large.strokeUnoccupied,
+          strokeEmpty: theme['point-l']?.['stroke-empty'] || DEFAULT_COLORS.point.large.strokeEmpty,
+          strokeDisabled: theme['point-l']?.['stroke-disabled'] || DEFAULT_COLORS.point.large.strokeDisabled,
+          strokeEnabled: theme['point-l']?.['stroke-enabled'] || DEFAULT_COLORS.point.large.strokeEnabled,
+          strokeLocked: theme['point-l']?.['stroke-locked'] || DEFAULT_COLORS.point.large.strokeLocked,
+          strokeUnlocked: theme['point-l']?.['stroke-unlocked'] || DEFAULT_COLORS.point.large.strokeUnlocked,
         },
-        area: {
+        types: this.buildPointTypesConfig(theme)
-          strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.strokeActive,
+      };
-          stroke: {
-            1: theme.area?.['stroke-1'] || DEFAULT_COLORS.area.stroke[1],
-            11: theme.area?.['stroke-11'] || DEFAULT_COLORS.area.stroke[11],
-            12: theme.area?.['stroke-12'] || DEFAULT_COLORS.area.stroke[12],
-            13: theme.area?.['stroke-13'] || DEFAULT_COLORS.area.stroke[13],
-            14: theme.area?.['stroke-14'] || DEFAULT_COLORS.area.stroke[14],
-          },
-          fill: {
-            1: theme.area?.['fill-1'] || DEFAULT_COLORS.area.fill[1],
-            11: theme.area?.['fill-11'] || DEFAULT_COLORS.area.fill[11],
-            12: theme.area?.['fill-12'] || DEFAULT_COLORS.area.fill[12],
-            13: theme.area?.['fill-13'] || DEFAULT_COLORS.area.fill[13],
-            14: theme.area?.['fill-14'] || DEFAULT_COLORS.area.fill[14],
-          },
-          border: {
-            width: theme.area?.border?.width || DEFAULT_COLORS.area.border.width,
-            opacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.border.opacity,
-            colors: {
-              1: theme.area?.border?.['color-1'] || DEFAULT_COLORS.area.border.colors[1],
-              11: theme.area?.border?.['color-11'] || DEFAULT_COLORS.area.border.colors[11],
-              12: theme.area?.border?.['color-12'] || DEFAULT_COLORS.area.border.colors[12],
-              13: theme.area?.border?.['color-13'] || DEFAULT_COLORS.area.border.colors[13],
-              14: theme.area?.border?.['color-14'] || DEFAULT_COLORS.area.border.colors[14],
-            }
-          },
-          types: {
-            1: {
-              stroke: theme.area?.['stroke-1'] || DEFAULT_COLORS.area.types[1].stroke,
-              strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.types[1].strokeActive,
-              fill: theme.area?.['fill-1'] || DEFAULT_COLORS.area.types[1].fill,
-              borderColor: theme.area?.border?.['color-1'] || DEFAULT_COLORS.area.types[1].borderColor,
-              borderWidth: theme.area?.border?.width || DEFAULT_COLORS.area.types[1].borderWidth,
-              borderOpacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.types[1].borderOpacity,
-            },
-            11: {
-              stroke: theme.area?.['stroke-11'] || DEFAULT_COLORS.area.types[11].stroke,
-              strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.types[11].strokeActive,
-              fill: theme.area?.['fill-11'] || DEFAULT_COLORS.area.types[11].fill,
-              borderColor: theme.area?.border?.['color-11'] || DEFAULT_COLORS.area.types[11].borderColor,
-              borderWidth: theme.area?.border?.width || DEFAULT_COLORS.area.types[11].borderWidth,
-              borderOpacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.types[11].borderOpacity,
-            },
-            12: {
-              stroke: theme.area?.['stroke-12'] || DEFAULT_COLORS.area.types[12].stroke,
-              strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.types[12].strokeActive,
-              fill: theme.area?.['fill-12'] || DEFAULT_COLORS.area.types[12].fill,
-              borderColor: theme.area?.border?.['color-12'] || DEFAULT_COLORS.area.types[12].borderColor,
-              borderWidth: theme.area?.border?.width || DEFAULT_COLORS.area.types[12].borderWidth,
-              borderOpacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.types[12].borderOpacity,
-            },
-            13: {
-              stroke: theme.area?.['stroke-13'] || DEFAULT_COLORS.area.types[13].stroke,
-              strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.types[13].strokeActive,
-              fill: theme.area?.['fill-13'] || DEFAULT_COLORS.area.types[13].fill,
-              borderColor: theme.area?.border?.['color-13'] || DEFAULT_COLORS.area.types[13].borderColor,
-              borderWidth: theme.area?.border?.width || DEFAULT_COLORS.area.types[13].borderWidth,
-              borderOpacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.types[13].borderOpacity,
-            },
-            14: {
-              stroke: theme.area?.['stroke-14'] || DEFAULT_COLORS.area.types[14].stroke,
-              strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.types[14].strokeActive,
-              fill: theme.area?.['fill-14'] || DEFAULT_COLORS.area.types[14].fill,
-              borderColor: theme.area?.border?.['color-14'] || DEFAULT_COLORS.area.types[14].borderColor,
-              borderWidth: theme.area?.border?.width || DEFAULT_COLORS.area.types[14].borderWidth,
-              borderOpacity: theme.area?.border?.opacity || DEFAULT_COLORS.area.types[14].borderOpacity,
-            }
-          }
-        },
-        robot: {
-          stroke: theme.robot?.stroke || DEFAULT_COLORS.robot.stroke,
-          fill: theme.robot?.fill || DEFAULT_COLORS.robot.fill,
-          line: theme.robot?.line || DEFAULT_COLORS.robot.line,
-          strokeNormal: theme.robot?.['stroke-normal'] || DEFAULT_COLORS.robot.strokeNormal,
-          fillNormal: theme.robot?.['fill-normal'] || DEFAULT_COLORS.robot.fillNormal,
-          strokeWarning: theme.robot?.['stroke-warning'] || DEFAULT_COLORS.robot.strokeWarning,
-          fillWarning: theme.robot?.['fill-warning'] || DEFAULT_COLORS.robot.fillWarning,
-          strokeFault: theme.robot?.['stroke-fault'] || DEFAULT_COLORS.robot.strokeFault,
-          fillFault: theme.robot?.['fill-fault'] || DEFAULT_COLORS.robot.fillFault,
-        },
-        autoDoor: {
-          strokeClosed: theme.autoDoor?.['stroke-closed'] || DEFAULT_COLORS.autoDoor.strokeClosed,
-          fillClosed: theme.autoDoor?.['fill-closed'] || DEFAULT_COLORS.autoDoor.fillClosed,
-          strokeOpen: theme.autoDoor?.['stroke-open'] || DEFAULT_COLORS.autoDoor.strokeOpen,
-          fillOpen: theme.autoDoor?.['fill-open'] || DEFAULT_COLORS.autoDoor.fillOpen,
-        },
-        common: {
-          color: theme.color || DEFAULT_COLORS.common.color,
-          background: theme.background || DEFAULT_COLORS.common.background,
-        }
-      });
     }
+
+    // 路线配置
+    if (theme.route) {
+      config.route = {
+        strokeActive: theme.route.strokeActive || DEFAULT_COLORS.route.strokeActive,
+        strokeEmpty: theme.route['stroke-empty'] || DEFAULT_COLORS.route.strokeEmpty,
+        strokeLoaded: theme.route['stroke-loaded'] || DEFAULT_COLORS.route.strokeLoaded,
+        strokeForbidden: theme.route['stroke-forbidden'] || DEFAULT_COLORS.route.strokeForbidden,
+      };
+    }
+
+    // 区域配置
+    if (theme.area) {
+      config.area = {
+        strokeActive: theme.area.strokeActive || DEFAULT_COLORS.area.strokeActive,
+        stroke: this.buildFillConfig(theme.area, 'stroke', DEFAULT_COLORS.area.stroke),
+        fill: this.buildFillConfig(theme.area, 'fill', DEFAULT_COLORS.area.fill),
+        border: {
+          width: theme.area.border?.width || DEFAULT_COLORS.area.border.width,
+          opacity: theme.area.border?.opacity || DEFAULT_COLORS.area.border.opacity,
+          colors: this.buildFillConfig(theme.area.border, 'color', DEFAULT_COLORS.area.border.colors)
+        },
+        types: this.buildAreaTypesConfig(theme.area)
+      };
+    }
+
+    // 机器人配置
+    if (theme.robot) {
+      config.robot = {
+        stroke: theme.robot.stroke || DEFAULT_COLORS.robot.stroke,
+        fill: theme.robot.fill || DEFAULT_COLORS.robot.fill,
+        line: theme.robot.line || DEFAULT_COLORS.robot.line,
+        strokeNormal: theme.robot['stroke-normal'] || DEFAULT_COLORS.robot.strokeNormal,
+        fillNormal: theme.robot['fill-normal'] || DEFAULT_COLORS.robot.fillNormal,
+        strokeWarning: theme.robot['stroke-warning'] || DEFAULT_COLORS.robot.strokeWarning,
+        fillWarning: theme.robot['fill-warning'] || DEFAULT_COLORS.robot.fillWarning,
+        strokeFault: theme.robot['stroke-fault'] || DEFAULT_COLORS.robot.strokeFault,
+        fillFault: theme.robot['fill-fault'] || DEFAULT_COLORS.robot.fillFault,
+        imageWidth: DEFAULT_COLORS.robot.imageWidth,
+        imageHeight: DEFAULT_COLORS.robot.imageHeight
+      };
+    }
+
+    // 自动门配置
+    if (theme.autoDoor) {
+      config.autoDoor = {
+        strokeClosed: theme.autoDoor['stroke-closed'] || DEFAULT_COLORS.autoDoor.strokeClosed,
+        fillClosed: theme.autoDoor['fill-closed'] || DEFAULT_COLORS.autoDoor.fillClosed,
+        strokeOpen: theme.autoDoor['stroke-open'] || DEFAULT_COLORS.autoDoor.strokeOpen,
+        fillOpen: theme.autoDoor['fill-open'] || DEFAULT_COLORS.autoDoor.fillOpen,
+      };
+    }
+
+    // 通用配置
+    if (theme.color || theme.background) {
+      config.common = {
+        color: theme.color || DEFAULT_COLORS.common.color,
+        background: theme.background || DEFAULT_COLORS.common.background,
+      };
+    }
+
+    return config;
+  }
+
+  /**
+   * 构建填充颜色配置
+   */
+  private buildFillConfig(theme: any, prefix: string, defaultConfig: Record<number, string>): Record<number, string> {
+    const config: Record<number, string> = {};
+    
+    AREA_TYPES.forEach(type => {
+      const key = `${prefix}-${type}`;
+      config[type] = theme[key] || defaultConfig[type];
+    });
+    
+    return config;
+  }
+
+  /**
+   * 构建点位类型配置
+   */
+  private buildPointTypesConfig(theme: any): Record<number, any> {
+    const types: Record<number, any> = {};
+    
+    POINT_TYPES.forEach(type => {
+      types[type] = {
+        stroke: theme['point-s']?.stroke || 
+                DEFAULT_COLORS.point.types[type]?.stroke || 
+                DEFAULT_COLORS.point.small.stroke,
+        strokeActive: theme['point-s']?.strokeActive || 
+                      DEFAULT_COLORS.point.types[type]?.strokeActive || 
+                      DEFAULT_COLORS.point.small.strokeActive,
+        fill: theme['point-s']?.[`fill-${type}`] || 
+              DEFAULT_COLORS.point.types[type]?.fill || 
+              DEFAULT_COLORS.point.small.fill[type] || 
+              DEFAULT_COLORS.point.small.fill[1]
+      };
+    });
+    
+    return types;
+  }
+
+  /**
+   * 构建区域类型配置
+   */
+  private buildAreaTypesConfig(theme: any): Record<number, any> {
+    const types: Record<number, any> = {};
+    
+    AREA_TYPES.forEach(type => {
+      types[type] = {
+        stroke: theme[`stroke-${type}`] || DEFAULT_COLORS.area.types[type].stroke,
+        strokeActive: theme.strokeActive || DEFAULT_COLORS.area.types[type].strokeActive,
+        fill: theme[`fill-${type}`] || DEFAULT_COLORS.area.types[type].fill,
+        borderColor: theme.border?.[`color-${type}`] || DEFAULT_COLORS.area.types[type].borderColor,
+        borderWidth: theme.border?.width || DEFAULT_COLORS.area.types[type].borderWidth,
+        borderOpacity: theme.border?.opacity || DEFAULT_COLORS.area.types[type].borderOpacity,
+      };
+    });
+    
+    return types;
   }
 
   /**