WebIndex/components/nav/NavBar.vue

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'

type Widget = {
  icon: string[]
  url: string
  title: string
}

const props = defineProps({
    navColor: {
      default: false,
      type: Boolean,
    },
  }),
  // 使用 ref 跟踪是否滚动
  scrolled = ref(false),
  littleWidget: Widget[] = [
    {
      icon: ['fas', 'gauge'],
      url: '/netdata/',
      title: 'Pi Dashboard',
    },
    {
      icon: ['fas', 'cloud'],
      url: '/nas/',
      title: 'Nextcloud',
    },
    {
      icon: ['fas', 'code-branch'],
      url: '/git/',
      title: 'Git Repository',
    },
  ],
  // Const logoUrl = getAssetURL("w.png")
  logoType: string = 'logo',
  showLogo = computed(() => logoType === 'text'),
  isExpended = ref<boolean>(false),
  route = useRoute(),

  entry = [
    {
      title: '主页',
      icon: ['fas', 'home'],
      entry: [],
      to: 'index',
    },
    {
      title: '文章',
      icon: ['fas', 'pen'],
      entry: [
        {
          title: '博客',
          url: false,
          to: 'article',
        },
        {
          title: '日记',
          url: false,
          to: 'diary',
        },
      ],
    },
    {
      title: '作品',
      icon: ['fas', 'brush'],
      entry: [
        {
          title: '软件',
          url: false,
          to: 'soft',
        },
        {
          title: '仓库',
          url: true,
          to: 'https://cantyonion.site/git/',
        },
      ],
    },
    {
      title: '杂谈',
      icon: ['fas', 'chess-rook'],
      entry: [],
      to: 'talk',
    },
  ],

  menuExpanded = () => {
    isExpended.value = !isExpended.value
  },

  menuClose = () => {
    isExpended.value = false
  },

  // 监听 scroll 事件
  handleScroll = () => {
    scrolled.value = window.scrollY > 0
  },

  debouncedScroll = debounce(handleScroll, 10),

  alwaysBlueBackground = computed(() => route.name !== 'index' || props.navColor)

// 在组件挂载和卸载时添加和移除事件监听
onMounted(() => {
  window.addEventListener('scroll', debouncedScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', debouncedScroll)
})
</script>

<template>
  <nav
    :class="{ 'bg-transparent': !scrolled && !alwaysBlueBackground,
              'bg-blue-400': scrolled || alwaysBlueBackground,
              'shadow': scrolled }"
    class="fixed top-0 z-20 h-16 w-full text-white transition-all duration-300"
  >
    <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
      <!-- 下拉菜单按钮 -->
      <div
        class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
        @click="menuExpanded"
      >
        <font-awesome-icon
          :icon="['fas', 'bars']"
          class="h-6"
        />
      </div>
      <!--  Logo  -->
      <div class="absolute left-1/2 -translate-x-1/2 md:relative md:left-0 md:translate-x-0">
        <!-- 文字模式 -->
        <div
          v-if="showLogo"
          class="h-full text-4xl min-w-16 logo py-3.5"
        >
          <span>CantyOni_on's Index</span>
        </div>
        <!-- 图片模式 -->
        <div
          v-else
          class="py-2"
        >
          <img
            src="~/assets/images/logo/w.png"
            alt=""
            class="h-12 w-12"
          >
        </div>
      </div>

      <!--  Entry  -->
      <div
        :class="{ 'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended }"
        class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
               md:h-auto md:bg-transparent md:opacity-100"
      >
        <nav-bar-entry-item
          v-for="item in entry"
          :key="item.title"
          :entry="item.entry"
          :icon="item.icon"
          :title="item.title"
          :to="item.to"
          @on-go="menuClose"
        />
      </div>

      <!--  快速跳转小组件  -->
      <div class="flex items-center justify-between gap-4 text-xl">
        <a
          v-for="item in littleWidget"
          :key="item.url"
          :href="item.url"
          :title="item.title"
          class="transition-all hover:scale-125"
        >
          <font-awesome-icon :icon="item.icon" />
        </a>
      </div>
    </div>
  </nav>

  <!-- 用于隔开元素 -->
  <div
    v-if="alwaysBlueBackground"
    class="h-16 w-full"
  />
</template>

<style scoped>
.logo {
  font-family: BaconyScript, serif;
}
</style>