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

<template>
  <div class="color-config-panel">
    <h3>编辑器颜色配置</h3>
    
    <!-- 点位颜色配置 -->
    <div class="color-section">
      <h4>小点位颜色</h4>
      
      <div class="color-group">
        <label>普通点填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.point.small.fill[1]"
          @update:modelValue="(value) => updateColor('point.small.fill.1', { target: { 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 } })"
        />
      </div>
      <div class="color-group">
        <label>避让点填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.point.small.fill[3]"
          @update:modelValue="(value) => updateColor('point.small.fill.3', { target: { 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 } })"
        />
      </div>
      <div class="color-group">
        <label>库区点填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.point.small.fill[5]"
          @update:modelValue="(value) => updateColor('point.small.fill.5', { target: { value } })"
        />
      </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">
      <h4>区域颜色</h4>
      <div class="color-group">
        <label>库区填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.area.fill[1]"
          @update:modelValue="(value) => updateColor('area.fill.1', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>互斥区填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.area.fill[11]"
          @update:modelValue="(value) => updateColor('area.fill.11', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>非互斥区填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.area.fill[12]"
          @update:modelValue="(value) => updateColor('area.fill.12', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>约束区填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.area.fill[13]"
          @update:modelValue="(value) => updateColor('area.fill.13', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>描述区填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.area.fill[14]"
          @update:modelValue="(value) => updateColor('area.fill.14', { target: { value } })"
        />
      </div>
    </div>

    <!-- 路线颜色配置 -->
    <div class="color-section">
      <h4>路线颜色</h4>
      <div class="color-group">
        <label>空载路线：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.route.strokeEmpty"
          @update:modelValue="(value) => updateColor('route.strokeEmpty', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>载货路线：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.route.strokeLoaded"
          @update:modelValue="(value) => updateColor('route.strokeLoaded', { target: { value } })"
        />
      </div>
    </div>

    <!-- 机器人颜色配置 -->
    <div class="color-section">
      <h4>机器人颜色</h4>
      <div class="color-group">
        <label>正常状态填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.robot.fillNormal"
          @update:modelValue="(value) => updateColor('robot.fillNormal', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>告警状态填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.robot.fillWarning"
          @update:modelValue="(value) => updateColor('robot.fillWarning', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>故障状态填充：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.robot.fillFault"
          @update:modelValue="(value) => updateColor('robot.fillFault', { target: { value } })"
        />
      </div>
      <div class="color-group">
        <label>路径线条：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.robot.line"
          @update:modelValue="(value) => updateColor('robot.line', { target: { value } })"
        />
      </div>
    </div>

    <!-- 库位颜色配置 -->
    <div class="color-section">
      <h4>库位颜色</h4>
      <div class="color-group">
        <label>占用状态：</label>
        <ColorPickerWithAlpha 
          :modelValue="config.storage.occupied"
          @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 
          :modelValue="config.storage.default"
          @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>



    <div class="actions">
      <button @click="resetToDefault" class="btn-reset">重置为默认</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';

import colorConfig from '../services/color-config.service';
// 动态导入颜色选择器组件
const ColorPickerWithAlpha = defineAsyncComponent(() => import('./color-picker-with-alpha.vue'));

// 定义组件名称
defineOptions({
  name: 'ColorConfigPanel'
});

const config = computed(() => colorConfig.currentConfig);

const updateColor = (path: string, event: Event | { target: { value: string } }) => {
  const target = event.target as HTMLInputElement;
  if (target) {
    colorConfig.setColor(path, target.value);
  }
};

const resetToDefault = () => {
  colorConfig.resetToDefault();
};
</script>

<style scoped>
.color-config-panel {
  padding: 20px;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.color-config-panel h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.color-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fafafa;
}

.color-section h4 {
  margin: 0 0 16px 0;
  color: #555;
  font-size: 16px;
  font-weight: 600;
}

.color-subsection {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.color-subsection h5 {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.color-group {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.color-group label {
  min-width: 120px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.color-group input[type="color"] {
  width: 60px;
  height: 36px;
  border: 2px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-group input[type="color"]:hover {
  border-color: #40a9ff;
}

.color-group input[type="color"]:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}


.actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

.actions button {
  padding: 10px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-reset {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.btn-reset:hover {
  background: #fff2f0;
  border-color: #ff7875;
}

.actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 滚动条样式 */
.color-config-panel::-webkit-scrollbar {
  width: 6px;
}

.color-config-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.color-config-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.color-config-panel::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>