xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新颜色配置面板，移除冗余颜色选项并添加禁行路线颜色配置

Browse Source
This commit is contained in:
xudan 2025-09-05 13:53:00 +08:00
parent 9bd97f7248
commit 2174e8350b
3 changed files with 17 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/color-config-panel.vue
View File

@ -43,31 +43,6 @@
</div>
</div>
<!-- 路线颜色配置 -->
<div class="color-section">
<h4>路线颜色</h4>
<div class="color-group">
<label>可通行路线：</label>
<ColorPickerWithAlpha
:modelValue="config.route.stroke[1]"
@update:modelValue="(value) => updateColor('route.stroke.1', { target: { value } })"
/>
</div>
<div class="color-group">
<label>双向路线：</label>
<ColorPickerWithAlpha
:modelValue="config.route.stroke[2]"
@update:modelValue="(value) => updateColor('route.stroke.2', { target: { value } })"
/>
</div>
<div class="color-group">
<label>禁行路线：</label>
<ColorPickerWithAlpha
:modelValue="config.route.stroke[10]"
@update:modelValue="(value) => updateColor('route.stroke.10', { target: { value } })"
/>
</div>
</div>
<!-- 区域颜色配置 -->
<div class="color-section">
@ -126,6 +101,13 @@
@update:modelValue="(value) => updateColor('route.strokeLoaded', { target: { value } })"
/>
</div>
<div class="color-group">
<label>禁行路线：</label>
<ColorPickerWithAlpha
:modelValue="config.route.strokeForbidden"
@update:modelValue="(value) => updateColor('route.strokeForbidden', { target: { value } })"
/>
</div>
</div>
<!-- 机器人颜色配置 -->
@ -171,13 +153,6 @@
@update:modelValue="(value) => updateColor('storage.occupied', { target: { value } })"
/>
</div>
<div class="color-group">
<label>可用状态：</label>
<ColorPickerWithAlpha
:modelValue="config.storage.available"
@update:modelValue="(value) => updateColor('storage.available', { target: { value } })"
/>
</div>
<div class="color-group">
<label>默认状态：</label>
<ColorPickerWithAlpha
@ -185,34 +160,6 @@
@update:modelValue="(value) => updateColor('storage.default', { target: { value } })"
/>
</div>
<div class="color-group">
<label>锁定状态：</label>
<ColorPickerWithAlpha
:modelValue="config.storage.locked"
@update:modelValue="(value) => updateColor('storage.locked', { target: { value } })"
/>
</div>
<div class="color-group">
<label>更多按钮背景：</label>
<ColorPickerWithAlpha
:modelValue="config.storage.moreButton.background"
@update:modelValue="(value) => updateColor('storage.moreButton.background', { target: { value } })"
/>
</div>
<div class="color-group">
<label>更多按钮边框：</label>
<ColorPickerWithAlpha
:modelValue="config.storage.moreButton.border"
@update:modelValue="(value) => updateColor('storage.moreButton.border', { target: { value } })"
/>
</div>
<div class="color-group">
<label>更多按钮文字：</label>
<ColorPickerWithAlpha
:modelValue="config.storage.moreButton.text"
@update:modelValue="(value) => updateColor('storage.moreButton.text', { target: { value } })"
/>
</div>
</div>

21
src/services/color-config.service.ts
View File

@ -36,10 +36,9 @@ export interface EditorColorConfig {
// 路线颜色
route: {
strokeActive: string;
stroke: Record<number, string>; // 按路线类型索引
// 空载和载货路线专用颜色
strokeEmpty: string; // 空载路线颜色
strokeLoaded: string; // 载货路线颜色
strokeForbidden: string; // 禁行路线颜色
};
// 区域颜色
@ -143,14 +142,9 @@ const DEFAULT_COLORS: EditorColorConfig = {
},
route: {
strokeActive: '#EBB214',
stroke: {
0: '#8C8C8C',
1: '#52C41A',
2: '#1982F3',
10: '#E63A3A'
},
strokeEmpty: '#52C41A', // 空载路线 - 绿色
strokeLoaded: '#1982F3' // 载货路线 - 蓝色
strokeEmpty: '#52C41A', // 空载路线 - 绿色
strokeLoaded: '#1982F3', // 载货路线 - 蓝色
strokeForbidden: '#E63A3A' // 禁行路线 - 红色
},
area: {
strokeActive: '#EBB214',
@ -386,14 +380,9 @@ class ColorConfigService {
},
route: {
strokeActive: theme.route?.strokeActive || DEFAULT_COLORS.route.strokeActive,
stroke: {
0: theme.route?.['stroke-0'] || DEFAULT_COLORS.route.stroke[0],
1: theme.route?.['stroke-1'] || DEFAULT_COLORS.route.stroke[1],
2: theme.route?.['stroke-2'] || DEFAULT_COLORS.route.stroke[2],
10: theme.route?.['stroke-10'] || DEFAULT_COLORS.route.stroke[10],
},
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,
},
area: {
strokeActive: theme.area?.strokeActive || DEFAULT_COLORS.area.strokeActive,

6
src/services/editor.service.ts
View File

@ -1751,8 +1751,12 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
case MapRoutePassType.仅载货可通行:
routeColor = colorConfig.getColor('route.strokeLoaded') || get(theme, 'route.stroke-loaded') || '';
break;
case MapRoutePassType.禁行:
routeColor = colorConfig.getColor('route.strokeForbidden') || get(theme, 'route.stroke-forbidden') || '';
break;
default:
routeColor = colorConfig.getColor(`route.stroke.${pass}`) || get(theme, `route.stroke-${pass}`) || '';
// 无限制路线使用空载路线颜色作为默认
routeColor = colorConfig.getColor('route.strokeEmpty') || get(theme, 'route.stroke-empty') || '';
break;
}
}