smartai2dian0/src/views/common/NavItem.vue

<template>
  <router-link :to="to">
    <div class="nav-item" :class="{ 'is-active': is_active }">
      <span class="nav-item-icon"><img :src="img_src" /></span>
      <span>{{ label }}</span>
    </div>
  </router-link>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

const props = defineProps({
  label: String,
  to: String,
  icon_name: String
});

const is_active = computed(() => {
  const route = useRoute();

  const cur_path = route.path;

  return cur_path === props.to;
});

const img_src = computed(() => {
  if (is_active.value) {
    // TODO: 如果是激活状态，应该改为 2
    // 资源目录应该添加名为 2 的图标
    return `../../assets/${props.icon_name}-1.png`;
  } else {
    return `../../assets/${props.icon_name}-1.png`;
  }
});
</script>

<style lang="css" scoped>
.nav-item {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 40px;
  border-radius: 20px;

  padding-left: 15px;
  padding-right: 15px;

  margin-left: 5px;
  margin-right: 5px;

  color: var(--color-text-1);
}
.nav-item:hover {
  background-color: var(--color-fill-4);
  color: #fff;
}
.nav-item.is-active {
  background-color: rgb(var(--primary-6));
  color: #fff;
}

.nav-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 5px;
}
.nav-item-icon img {
  width: 18px;
}
</style>