bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue

<template>
  <div class="map-controls">
    <!-- 左侧：正在观看卫星设备 -->
    <div class="map-controls__left">
      <div class="device-watch">
        <button
          class="tool-btn"
          :class="{ 'device-watch--active': isWatchingDevice }"
          @click="handleDeviceWatch"
        >
          <img
            class="device-watch__icon"
            :src="getDeviceIcon()"
            alt="卫星设备"
          />
          <span class="device-watch__text">{{ DEVICE_WATCH.label }}</span>
        </button>
      </div>
    </div>

    <!-- 右侧：测量工具 -->
    <div class="map-controls__right">
      <div class="tool-group">
        <button
          v-for="tool in MAP_TOOLS"
          :key="tool.key"
          class="tool-btn"
          :class="{ 'tool-btn--active': activeTool === tool.key }"
          @click="handleToolClick(tool.key)"
        >
          <img
            class="tool-btn__icon"
            :src="getToolIcon(tool)"
            :alt="tool.label"
          />
          <span class="tool-btn__text">{{ tool.label }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { MAP_TOOLS, DEVICE_WATCH } from "../../constants.js";

// 卫星设备观看状态
const isWatchingDevice = ref(false);

// 当前激活的测量工具
const activeTool = ref(null);

// 定义对外事件
const emit = defineEmits(["device-watch", "tool-change"]);

// 调试：检查常量是否正确加载
console.log('MapControls - MAP_TOOLS:', MAP_TOOLS);
console.log('MapControls - DEVICE_WATCH:', DEVICE_WATCH);

/**
 * 获取设备图标
 */
const getDeviceIcon = () => {
  const iconName = DEVICE_WATCH.icon;
  const state = isWatchingDevice.value ? "点亮" : "";
  try {
    return new URL(
      `../../assets/images/MapControls/${iconName}${state}.png`,
      import.meta.url
    ).href;
  } catch (error) {
    console.error('加载设备图标失败:', error);
    return '';
  }
};

/**
 * 获取工具图标
 */
const getToolIcon = (tool) => {
  const iconName = tool.icon;
  const state = activeTool.value === tool.key ? "点亮" : "";
  try {
    return new URL(
      `../../assets/images/MapControls/${iconName}${state}.png`,
      import.meta.url
    ).href;
  } catch (error) {
    console.error('加载工具图标失败:', error, tool);
    return '';
  }
};

/**
 * 处理设备观看按钮点击
 */
const handleDeviceWatch = () => {
  isWatchingDevice.value = !isWatchingDevice.value;
  console.log("切换卫星设备观看:", isWatchingDevice.value);
  emit("device-watch", isWatchingDevice.value);
};

/**
 * 处理测量工具点击
 */
const handleToolClick = (toolKey) => {
  // 点击同一个工具则取消激活
  if (activeTool.value === toolKey) {
    activeTool.value = null;
  } else {
    activeTool.value = toolKey;
  }
  console.log("切换地图工具:", toolKey);
  emit("tool-change", {
    tool: toolKey,
    active: activeTool.value === toolKey,
  });
};
</script>

<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;
@use "../../assets/styles/common.scss" as *;

.map-controls {
  position: relative; // 改为相对定位，由父容器控制位置
  display: flex;
  gap: vw(14);
  align-items: flex-end;

  &__left,
  &__right {
    position: relative;
  }
}

/* 左侧：设备观看按钮 */
.device-watch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: vh(6);
  padding: vh(24) vw(40);
  background-image: url("../../assets/images/MapControls/二级标题栏bg-1.png");
  background-position: center bottom;
  background-size: 100% 72%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  // min-height: vh(56);
  height: vh(56);
  width: vw(205);

  // 发光效果
  filter: drop-shadow(0 0 vw(12) rgba(0, 162, 255, 0.4));

  &:hover {
    filter: drop-shadow(0 0 vw(16) rgba(0, 162, 255, 0.6));
    transform: translateY(vh(-2));
  }

  &:active {
    transform: translateY(0);
  }

  &--active {
    filter: drop-shadow(0 0 vw(20) rgba(0, 212, 255, 0.8));

    .device-watch__text {
      color: #00d4ff;
      font-weight: 500;
    }

    .device-watch__icon {
      transform: scale(1.1);
    }
  }

  &__icon {
    width: vw(32);
    height: vh(28);
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  &__text {
    font-size: fs(12);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-shadow: 0 vh(1) vh(2) rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease;
  }

  // 悬停时图标轻微放大
  &:hover .device-watch__icon {
    transform: scale(1.05);
  }

  &--active:hover .device-watch__icon {
    transform: scale(1.15);
  }
}

/* 右侧：工具组 */
.tool-group {
  position: relative;
  display: flex;
  // gap: vw(12);
  padding: vh(0) vw(10);
  background-image: url("../../assets/images/MapControls/二级标题栏bg-2.png");
  background-position: center bottom;
  background-size: 100% 72%;
  background-repeat: no-repeat;
  // min-height: vh(56);
  height: vh(56);
  width: vw(285);

  // 发光效果
  filter: drop-shadow(0 0 vw(12) rgba(0, 162, 255, 0.3));
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // gap: vh(6);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  padding: vh(4) vw(4);

  &:hover {
    transform: translateY(vh(-2));
  }

  &:active {
    transform: translateY(0);
  }

  &__icon {
    width: vw(32);
    height: vw(32);
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  &__text {
    font-size: fs(12);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-shadow: 0 vh(1) vh(2) rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease;
  }

  // 激活状态
  &--active {
    .tool-btn__text {
      color: #00d4ff;
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 500;
    }

    .tool-btn__icon {
      transform: scale(1.1);
    }
  }

  // 悬停时图标轻微放大
  &:hover .tool-btn__icon {
    transform: scale(1.05);
  }

  &--active:hover .tool-btn__icon {
    transform: scale(1.15);
  }
}
</style>