minnan-zhangzhou-admin/src/components/PageHeader.vue

<script setup lang="ts">
import { RouterLink, useRoute, useRouter } from 'vue-router'

withDefaults(
  defineProps<{
    title?: string
    subtitle?: string
  }>(),
  {
    title: '闽南文化（漳州）生态保护区',
    subtitle: '数字驾驶舱 · 守护一城古韵',
  },
)

// 顶部导航 —— 与后端路由无关的静态配置，后续可改为从菜单接口读取
const navItems = [
  { label: '保护区概况', to: '/protection-overview' },
  { label: '文化资源', to: '/culture-resources' },
  { label: '传承体验', to: '/heritage-experience' },
  { label: '文旅融合', to: '/culture-tourism' },
  { label: '公众传播', to: '/public-communication' },
  { label: '数字档案', to: '/digital-archives' },
]

const route = useRoute()
const router = useRouter()

function goBack() {
  router.back()
}
</script>

<template>
  <header
    class="relative -mx-5 flex min-h-[112px] w-[calc(100%+2.5rem)] shrink-0 items-center gap-8 overflow-hidden border-b border-[#c69b51]/70 bg-gradient-to-r from-[#2b1115] via-[#4b1d20] to-[#321317] px-7 py-4 shadow-[0_5px_22px_rgba(18,7,9,.35)] backdrop-blur-sm"
  >
    <div
      class="pointer-events-none absolute inset-x-7 bottom-0 h-px bg-gradient-to-r from-transparent via-[#e0b86d]/80 to-transparent"
    ></div>
    <div
      class="pointer-events-none absolute right-8 top-2 h-16 w-40 opacity-25"
      style="
        background-image: radial-gradient(circle, rgba(224, 184, 109, 0.55) 1px, transparent 1px);
        background-size: 14px 14px;
      "
    ></div>

    <button
      v-if="route.path !== '/'"
      type="button"
      aria-label="返回上一页"
      title="返回上一页"
      class="grid h-9 w-9 shrink-0 place-items-center rounded border border-[#d3ae65]/60 text-[#f2c66f] transition hover:border-[#d3ae65] hover:bg-[#b64d3c]"
      @click="goBack"
    >
      <svg
        aria-hidden="true"
        class="h-5 w-5"
        fill="none"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M15 5L8 12L15 19"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
        ></path>
      </svg>
    </button>

    <div class="flex min-w-0 flex-1 items-center gap-5">
      <div class="min-w-0">
        <div
          class="truncate text-[24px] font-bold tracking-[.18em] text-[#ead6a6] [text-shadow:0_0_10px_rgba(225,194,125,.16)]"
        >
          {{ title }}
        </div>
        <div v-if="subtitle" class="mt-1 text-xs tracking-[.32em] text-[#c9ac76]">
          {{ subtitle }}
        </div>
      </div>
    </div>

    <nav class="relative z-10 flex shrink-0 items-center justify-end gap-5 text-base text-[#d8c18d]">
      <RouterLink
        to="/"
        aria-label="首页"
        title="首页"
        class="grid h-9 w-9 place-items-center rounded text-[#f2c66f] transition hover:bg-[#b64d3c] hover:border-[#d3ae65]"
      >
        <svg aria-hidden="true" class="h-7 w-8" fill="none" viewBox="0 0 80 64" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 39C19 36 30 30 40 18C49 29 60 34 72 38" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"></path>
          <path d="M13 42V51M67 40V49M18 37C27 34 35 27 40 20C47 28 54 33 64 37" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path>
          <path d="M7 55C22 45 34 49 46 54C57 59 67 56 73 48C77 43 76 37 71 35C66 33 62 37 63 41C64 44 67 45 69 43" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path>
          <path d="M48 30V45" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"></path>
          <path d="M39 27H44V32H39Z" fill="#9f4026" stroke="#9f4026" stroke-linejoin="round"></path>
          <path d="M19 37V43" stroke="#9f4026" stroke-linecap="round" stroke-width="1.8"></path>
        </svg>
      </RouterLink>

      <RouterLink
        v-for="item in navItems"
        :key="item.to"
        :to="item.to"
        class="rounded border border-transparent px-3 py-3 transition"
        :class="
          route.path === item.to
            ? 'border-[#d3ae65]! bg-[rgba(182,77,60,.82)] text-[#f0d9a0] shadow-[0_0_16px_rgba(182,77,60,.2)]'
            : 'hover:border-[#d3ae65] hover:bg-[rgba(182,77,60,.82)] hover:text-[#f0d9a0] hover:shadow-[0_0_16px_rgba(182,77,60,.2)]'
        "
      >
        {{ item.label }}
      </RouterLink>
    </nav>
  </header>
</template>