From d8622aafbeb650f7694254b3d56acc253164c58c Mon Sep 17 00:00:00 2001 From: xudan Date: Tue, 9 Sep 2025 15:31:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E8=B7=AF=E7=BA=BF?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=B7=AF=E7=BA=BF=E5=AE=BD=E5=BA=A6=E8=AE=BE=E7=BD=AE=E5=92=8C?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/color/color-config-panel.vue | 85 ++++++++++++++++----- src/services/color/color-config.service.ts | 32 +++++++- src/services/editor.service.ts | 4 +- 3 files changed, 98 insertions(+), 23 deletions(-) diff --git a/src/components/color/color-config-panel.vue b/src/components/color/color-config-panel.vue index e91121a..b63aa03 100644 --- a/src/components/color/color-config-panel.vue +++ b/src/components/color/color-config-panel.vue @@ -165,27 +165,63 @@
-

路线颜色

-
- - +

路线配置

+ + +
+
路线颜色
+
+ + +
+
+ + +
+
+ + +
-
- - -
-
- - + + +
+
路线宽度
+
+ + + px +
+
+ + + px +
@@ -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(); diff --git a/src/services/color/color-config.service.ts b/src/services/color/color-config.service.ts index 67494c1..460086d 100644 --- a/src/services/color/color-config.service.ts +++ b/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 + } }; } diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index 21fd996..05ecdc6 100644 --- a/src/services/editor.service.ts +++ b/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.直线: