wenbao-website/src/components/Sidebar.vue

<template>
  <div class="sidebar">
    <div v-if="title" class="title">
      <h2>{{ title }}</h2>
    </div>
    <ul class="sidebar-menu">
      <slot />
      <li v-for="(item, key) in items" :key="key">
        <a v-if="item.link.startsWith('http')" :href="item.link" target="_blank">
          {{ item.text }}
          <Icon name="material-symbols-light:chevron-right" />
        </a>
        <router-link v-else :to="item.link" :class="{ 'active': item.id == activeId }">
          {{ item.text }}
          <Icon name="material-symbols-light:chevron-right" />
        </router-link>
      </li>
      <li v-if="showBackUpLevel">
        <router-link :to="backUpLevelLink">
          <div @click="emit('backUpLevel')">
            <Icon name="material-symbols:undo" />
            返回上一级
          </div>
        </router-link>
      </li>
      <li v-else-if="showEmpty && (!items || items.length === 0)" class="no-content">
        暂无相关子分类
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  activeId: {
    type: Number,
    default: 0,
  },
  showBackUpLevel: {
    type: Boolean,
    default: false,
  },
  showEmpty: {
    type: Boolean,
    default: true,
  },
  backUpLevelLink: {
    type: String,
    default: '',
  },
  items: {
    type: Object as PropType<Array<{
      id: number;
      text: string;
      link: string;
    }>>,
    default: () => ([]),
  },
});
const emit = defineEmits(['backUpLevel']);

</script>