feat: 增强路线配置功能，新增路线宽度设置和获取逻辑，优化颜色配置面板

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

@@ -165,27 +165,63 @@
 
     <!-- 路线颜色配置 -->
     <div class="color-section">
-      <h4>路线颜色</h4>
-      <div class="color-group">
-        <label>空载路线：</label>
-        <ColorPickerWithAlpha 
-          :modelValue="config.route.strokeEmpty"
-          @update:modelValue="(value) => updateColor('route.strokeEmpty', value)"
-        />
+      <h4>路线配置</h4>
+      
+      <!-- 路线颜色 -->
+      <div class="color-subsection">
+        <h5>路线颜色</h5>
+        <div class="color-group">
+          <label>空载路线：</label>
+          <ColorPickerWithAlpha 
+            :modelValue="config.route.strokeEmpty"
+            @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', value)"
+          />
+        </div>
+        <div class="color-group">
+          <label>禁行路线：</label>
+          <ColorPickerWithAlpha 
+            :modelValue="config.route.strokeForbidden"
+            @update:modelValue="(value) => updateColor('route.strokeForbidden', value)"
+          />
+        </div>
       </div>
-      <div class="color-group">
-        <label>载货路线：</label>
-        <ColorPickerWithAlpha 
-          :modelValue="config.route.strokeLoaded"
-          @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', value)"
-        />
+
+      <!-- 路线宽度 -->
+      <div class="color-subsection">
+        <h5>路线宽度</h5>
+        <div class="color-group">
+          <label>普通路线宽度：</label>
+          <input 
+            type="number" 
+            :value="config.route.width.normal"
+            @input="(e) => updateRouteWidth('normal', e)"
+            min="1" 
+            max="20" 
+            step="1"
+            class="size-input"
+          />
+          <span class="unit">px</span>
+        </div>
+        <div class="color-group">
+          <label>激活路线宽度：</label>
+          <input 
+            type="number" 
+            :value="config.route.width.active"
+            @input="(e) => updateRouteWidth('active', e)"
+            min="1" 
+            max="20" 
+            step="1"
+            class="size-input"
+          />
+          <span class="unit">px</span>
+        </div>
       </div>
     </div>
 
@@ -387,6 +423,15 @@ const updateAreaBorderColor = (areaType: number, color: string) => {
   colorConfig.setAreaBorderColor(areaType, color);
 };
 
+// 路线宽度更新方法
+const updateRouteWidth = (type: 'normal' | 'active', event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (!target) return;
+  
+  const value = Number(target.value);
+  colorConfig.setColor(`route.width.${type}`, value.toString());
+};
+
 
 const resetToDefault = async () => {
   colorConfig.resetToDefault();

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

@@ -52,6 +52,11 @@ export interface EditorColorConfig {
     strokeEmpty: string;    // 空载路线颜色
     strokeLoaded: string;   // 载货路线颜色
     strokeForbidden: string; // 禁行路线颜色
+    // 路线宽度配置
+    width: {
+      normal: number;       // 普通路线宽度
+      active: number;       // 激活路线宽度
+    };
   };
   
   // 区域颜色
@@ -284,7 +289,11 @@ const DEFAULT_COLORS: EditorColorConfig = {
     strokeNone: '#8C8C8C',       // 无路线 - 灰色
     strokeEmpty: '#52C41A',      // 空载路线 - 绿色
     strokeLoaded: '#1982F3',     // 载货路线 - 蓝色
-    strokeForbidden: '#E63A3A'   // 禁行路线 - 红色
+    strokeForbidden: '#E63A3A',  // 禁行路线 - 红色
+    width: {
+      normal: 2,                 // 普通路线宽度 - 2像素
+      active: 3                  // 激活路线宽度 - 3像素
+    }
   },
   area: {
     strokeActive: '#EBB214',
@@ -368,7 +377,11 @@ const DARK_THEME_COLORS: EditorColorConfig = {
     strokeNone: '#8C8C8C',       // 无路线 - 灰色
     strokeEmpty: '#49AA19',      // 空载路线 - 绿色
     strokeLoaded: '#1982F3',     // 载货路线 - 蓝色
-    strokeForbidden: '#E63A3A'   // 禁行路线 - 红色
+    strokeForbidden: '#E63A3A',  // 禁行路线 - 红色
+    width: {
+      normal: 2,                 // 普通路线宽度 - 2像素
+      active: 3                  // 激活路线宽度 - 3像素
+    }
   },
   area: {
     strokeActive: '#FCC947',
@@ -742,6 +755,17 @@ class ColorConfigService {
     return this.getNestedValue(this.config.value, `area.types.${areaType}.borderOpacity`) || this.config.value.area.border.opacity;
   }
 
+  /**
+   * 获取路线宽度
+   * @param isActive 是否为激活状态
+   */
+  public getRouteWidth(isActive: boolean = false): number {
+    const widthType = isActive ? 'active' : 'normal';
+    return this.getNestedValue(this.config.value, `route.width.${widthType}`) || 
+           this.config.value.route.width[widthType] || 
+           (isActive ? 3 : 2);
+  }
+
   /**
    * 批量设置区域边框配置
    * @param areaType 区域类型
@@ -820,6 +844,10 @@ class ColorConfigService {
         strokeForbidden: theme.route['stroke-10'] || 
                         theme.route['stroke-forbidden'] || 
                         DEFAULT_COLORS.route.strokeForbidden,
+        width: {
+          normal: theme.route.width?.normal || DEFAULT_COLORS.route.width.normal,
+          active: theme.route.width?.active || DEFAULT_COLORS.route.width.active
+        }
       };
     }
 

src/services/editor.service.ts

@@ -2079,7 +2079,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
     }
   }
   ctx.strokeStyle = routeColor;
-  ctx.lineWidth = active ? 3 * s : 2 * s;
+  // 使用配置的路线宽度
+  const routeWidth = colorConfig.getRouteWidth(active);
+  ctx.lineWidth = routeWidth * s;
   ctx.moveTo(x1, y1);
   switch (type) {
     case MapRouteType.直线: