yphsalumni.org/app/layouts/default.vue

<template>
  <UPage>
    <UBanner
      title="永中校友会 40 周年庆典活动火热筹募中！"
      icon="hugeicons:party"
      close
      :actions="bannerActions"
    />
    <UHeader>
      <template #left>
        <NuxtLink to="/">
          <div class="flex gap-4 items-center">
            <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
            <h1
              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
            >
              永平中学校友会
            </h1>
          </div>
        </NuxtLink>
      </template>

      <template #default>
        <UNavigationMenu :items="items" content-orientation="vertical" />
      </template>

      <template #right>
        <UColorModeButton />
        <UButton
          v-for="link in socialLinks"
          color="neutral"
          variant="ghost"
          v-bind="link"
        />
        <UButton
          icon="line-md:account-add"
          to="/join-us"
          color="primary"
          variant="solid"
          label="加入"
        />
      </template>

      <template #body>
        <UNavigationMenu
          :items="items"
          orientation="vertical"
          class="-mx-2.5"
        />
      </template>
    </UHeader>

    <UMain>
      <Transition name="page" mode="out-in">
        <NuxtPage />
      </Transition>
    </UMain>

    <UFooter>
      <template #left>
        <p>© 2025 永平中学校友会. 保留所有权利.</p>
      </template>

      <template #default>
        <p class="mt-1">
          Powered by:
          <a
            href="https://tootaio.com"
            target="_blank"
            class="font-semibold hover:underline"
            style="color: #e24545"
          >
            Tootaio Studio
          </a>
          <span class="mt-1 text-sm">2018 级毕业学长（麦祖奕）</span>
        </p>
      </template>

      <template #right>
        <UButton
          v-for="link in socialLinks"
          color="neutral"
          variant="ghost"
          v-bind="link"
        />
      </template>
    </UFooter>
  </UPage>
</template>

<script setup lang="ts">
import type { NavigationMenuItem, ButtonProps } from "@nuxt/ui";

const route = useRoute();

const bannerActions = ref<ButtonProps[]>([
  {
    label: "查看策划书",
    variant: "outline",
    icon: "lucide:arrow-right",
    to: "/40th-anniversary/proposal",
  },
]);

const items = computed<NavigationMenuItem[]>(() => [
  { label: "首页", to: "/" },
  { label: "新闻", to: "/news", active: route.path.startsWith("/news") },
  {
    label: "活动",
    to: "/events",
    active: route.path.startsWith("/events"),
    children: [
      {
        label: "40 周年庆",
        to: "/40th-anniversary",
        active: route.path.startsWith("/40th-anniversary"),
        badge: {
          label: "Hot",
          color: "error",
        },
      },
    ],
  },
  {
    label: "关于校友会",
    to: "/about",
    active: route.path.startsWith("/about"),
  },
  {
    label: "友情链接",
    children: [
      {
        label: "永平中学官网",
        icon: "mdi:book-education",
        to: "https://yphs.edu.my/",
        target: "_blank",
      },
      {
        label: "桃李教育网",
        icon: "mdi:web",
        to: "https://efuxi.vtour.my/",
        target: "_blank",
      },
      {
        label: "董总 Dong Zong",
        icon: "mdi:web",
        to: "https://www.dongzong.my/",
        target: "_blank",
      },
    ],
  },
  // { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
  // { label: "关于", to: "#about", active: route.path.startsWith("#about") },
]);

const socialLinks = ref<ButtonProps[]>([
  {
    icon: "line-md:tiktok",
    to: "https://www.tiktok.com/@yphs.alumni",
    target: "_blank",
  },
  {
    icon: "line-md:facebook",
    to: "https://www.facebook.com/YPHS.Alumni/",
    target: "_blank",
  },
]);
</script>

<style lang="css" scoped>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>