kev/Drawer/drawer-htmlroot/components/DrawerHeader.vue

<!--
工具栏组件

add by RYG
-->
<template>
  <div class="flex-container">
    <div v-if="!isInside" class="flex-container">
      <img src="~/assets/img/KEP001.svg" class="align-item" />
      <span class="text-item">KE Platform</span>
    </div>
    <ImageButton
      v-for="btn in buttons"
      :key="btn.key"
      :imageUrl="btn.imageUrl"
      :text="btn.text"
      @click="handleButtonClick(btn)"
      class="imgBtn"
      :class="{ active: activeIndex === btn.index }"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import ImageButton from "./ImageButton.vue";
import { emitter } from "~/utils/eventBus";

const activeIndex = ref(-1);
// import { useBtnClickStore } from "~/stores/btnClickStore";

// const store = useBtnClickStore();

// const emit = defineEmits(["btnClick"]);
// const imageUrl = ref('/assets/img/mornejiantou.svg'); // 确保路径正确
const isInside = ref(true);
const buttons = [
  {
    imageUrl: "_nuxt/assets/img/default.svg",
    text: "默认",
    key: "default",
    index: 0,
  },
  {
    imageUrl: "_nuxt/assets/img/zoom_in.svg",
    text: "放大",
    key: "zoom_in",
    index: 1,
  },
  {
    imageUrl: "_nuxt/assets/img/zoom_out.svg",
    text: "缩小",
    key: "zoom_out",
    index: 2,
  },
  {
    imageUrl: "_nuxt/assets/img/refresh.svg",
    text: "刷新",
    key: "refresh",
    index: 3,
  },
  {
    imageUrl: "_nuxt/assets/img/center.svg",
    text: "居中",
    key: "center",
    index: 4,
  },
  {
    imageUrl: "_nuxt/assets/img/part.svg",
    text: "局部",
    key: "part",
    index: 5,
  },
  {
    imageUrl: "_nuxt/assets/img/all.svg",
    text: "全部",
    key: "all",
    index: 6,
  },
  {
    imageUrl: "_nuxt/assets/img/move.svg",
    text: "移动",
    key: "move",
    index: 7,
  },
  {
    imageUrl: "_nuxt/assets/img/choose_arrow.svg",
    text: "选择",
    key: "choose",
    index: 8,
  },
  {
    imageUrl: "_nuxt/assets/img/save.svg",
    text: "保存",
    key: "save",
    index: 9,
  },
  {
    imageUrl: "_nuxt/assets/img/image_layer_tree.svg",
    text: "图层",
    key: "layer",
    index: 10,
  },
];

const handleButtonClick = (btn) => {
  activeIndex.value = btn.index;
  emitter.emit("btnClick", { key: btn.key, index: btn.index });
  //   emit("btnClick", btn.key); // 触发事件，将按钮的key传递出去
  //   store.newBtnClicked(btn.key);
  //   switch (btn.key) {
  //     case "default":
  //       // 处理默认按钮点击
  //       break;
  //     case "zoom_in":
  //       // 处理放大按钮点击
  //       break;
  //     case "zoom_out":
  //       // 处理缩小按钮点击
  //       break;
  //     case "refresh":
  //       // 处理刷新按钮点击
  //       break;
  //     case "center":
  //       // 处理居中按钮点击
  //       break;
  //     case "part":
  //       // 处理局部按钮点击
  //       break;
  //     case "all":
  //       // 处理全部按钮点击
  //       break;
  //     case "move":
  //       // 处理移动按钮点击
  //       break;
  //     case "choose":
  //       // 处理选择按钮点击
  //       break;
  //     case "save":
  //       // 处理保存按钮点击
  //       break;
  //     case "layer":
  //       // 处理图层按钮点击
  //       break;
  //     default:
  //       console.warn(`未定义的按钮：${btn.key}`);
  //   }
};
</script>

<style scoped>
.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 元素间距 */
  gap: 12px;
  padding-left:15px;
}

.align-item {
  width: 30px;
  height: 35px;
}

.text-item {
  font-size: 20px;
}

.active {
  background-color: #fff;
  color: rgb(24, 144, 255);
}

.imgBtn {
  height: 35px;
  width: 30px;
}

.imgBtn :hover {
  color: rgb(24, 144, 255);
}
</style>