chengfei-test-system/src/views/main/components/menu.vue

<script setup lang="ts">
import { useCommonStoreHook } from "@/store";

const { currentMenuIndex, currentProjectId, currentExecutionId } =
  toRefs(useCommonStoreHook());

interface MenuItem {
  name: string;
  icon: string;
  route: string;
  index: number;
}

const menus = ref<MenuItem[]>([
  {
    name: "首页",
    icon: "home",
    route: "/main/home",
    index: 0,
  },
  {
    name: "测试执行",
    icon: "run-test",
    route: "/main/run-test",
    index: 1,
  },
  {
    name: "数据管理",
    icon: "data-manager",
    route: "/main/data-manager",
    index: 2,
  },
  {
    name: "工程配置",
    icon: "project-config",
    route: "/main/project-config",
    index: 3,
  },
  {
    name: "报告模版",
    icon: "report-template",
    route: "/main/report-template",
    index: 4,
  },
  {
    name: "人员管理",
    icon: "person-manager",
    route: "/main/person-manager",
    index: 5,
  },
]);

const router = useRouter();
const handleMenuClick = (menu: MenuItem) => {
  if (menu.index != currentMenuIndex.value) {
    // 如果工程配置没有值，就不跳转，并提示   && !currentProjectId.value
    if (menu.index === 3) {
      if (!currentProjectId.value) {
        ElMessage.warning("请先在首页选择工程");
        return;
      }
      router.push({
        name: "ProjectConfig",
        params: { engineerId: currentProjectId.value },
      });
    } else if (menu.index === 1) {
      if (!currentExecutionId.value) {
        ElMessage.warning("请先在首页执行工程");
        return;
      }
      router.push({
        name: "RunTesting",
        params: { engineerId: currentExecutionId.value },
      });
    } else {
      // 其他菜单都可以跳转

      router.push(menu.route);
    }

    currentMenuIndex.value = menu.index;
  }
};

const route = useRoute();
const isCurrentMenu = (menu: MenuItem) => {
  // console.log(route, menu);
  // 判断route.path是否包含menu.route

  return route.path.startsWith(menu.route);
};
</script>

<template>
  <div class="menu">
    <div
      class="menu-box"
      v-for="menu in menus"
      :key="menu.name"
      @click="handleMenuClick(menu)"
    >
      <!--      这里的图标可以用可变色的svg 传过去一个color属性，然后根据当前路由的颜色来显示不同的颜色-->

      <svg-icon
        :icon-class="menu.icon"
        size="24"
        :style="{
          color: isCurrentMenu(menu) ? 'white' : '#AFB9D0',
        }"
      />
      <div class="name" :class="[isCurrentMenu(menu) ? 'selected' : 'normal']">
        {{ menu.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.menu {
  height: calc(100vh - $main-header-height);
  width: 79px;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 12px 6px;
  background-color: $hj-black-1;

  .menu-box {
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 12px;

    .name {
      margin-top: 10px;
      font-weight: bold;
      font-size: 12px;
      line-height: 19px;
      text-align: center;
    }

    .normal {
      color: #afb9d0;
    }
    .selected {
      color: $hj-white-1;
    }
  }
}
</style>