smartai2dian0/src/views/common/NavItem.vue

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

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

const props = defineProps({
  label: String,
  to: String,
  icon: String
});
const route = useRoute();
const target = props.to;

const isChatType = (cur_path) => {
  return cur_path === '/chat' || cur_path === '/chat/history' || cur_path === '/chat/board' || cur_path === '/chat/qa';
};
const isKnowLedgeType = (cur_path) => {
  return cur_path === '/knowledge' || cur_path === '/knowledge/detail';
};
const isIntelligentType = (cur_path) => {
  return cur_path === '/intelligent' || cur_path === '/intelligent/detail';
};

const is_active = computed(() => {
  const cur_path = route.path;

  if (target === '/chat/history') {
    // 对话
    const is_chat = isChatType(cur_path);

    if (is_chat) {
      return true;
    } else {
      return false;
    }
  }
  if (['/knowledge', '/knowledge/detail'].includes(target)) {
    return isKnowLedgeType(cur_path);
  }
  if (['/intelligent', '/intelligent/detail'].includes(target)) {
    return isIntelligentType(cur_path);
  }

  return cur_path === target;
});

</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 {
  font-size: 22px;
  margin-right: 5px;
}
</style>