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

<script setup lang="ts">
interface MenuItem {
  name: string;
  icon: string;
  route: string;
}

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

const router = useRouter();
const handleMenuClick = (menu: MenuItem) => {
  if (menu.route != currentMenu.value.route) {
    currentMenu.value = menu;
    router.push(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: menu.route === currentMenu.route ? 'white' : '#AFB9D0',
        }"
      />
      <div
        class="name"
        :class="[menu.route === currentMenu.route ? '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-3;

  .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>