ONE/frontend/src/ui/yohaku/YohakuTop.vue

<script setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { site } from '../../site'

// 余白顶栏。对应设计稿的 <header class="top">：品牌 / 导航 / 操作三块，
// 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
// 样式在 ui/yohaku/chrome.css，选择器已收敛到 html[data-ui="vivid"] 下。
//
// 窄屏例外：设计稿在窄屏把导航整个 display:none 掉了，手机上会没有任何导航入口。
// 这里补一个 ☰ + 全屏菜单（chrome.css 的 .menu / .menu-btn）。

const route = useRoute()
const scrolled = ref(false)
const menuOpen = ref(false)
const burger = ref(null)
const menuEl = ref(null)

const links = [
  { to: '/', label: '时间线', en: 'Timeline' },
  { to: '/archive', label: '归档', en: 'Archive' },
  { to: '/tags', label: '标签', en: 'Tags' },
  { to: '/projects', label: '作品', en: 'Projects' },
  { to: '/about', label: '关于', en: 'About' }
]

const initial = () => (site.author_name || site.site_title || 'O').trim().slice(0, 1).toUpperCase()
const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE'

function isOn(l) {
  return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
}

function onScroll() {
  scrolled.value = (window.scrollY || 0) > 8
}

function openMenu() {
  menuOpen.value = true
  // 焦点交给对话框本身（aria-modal 承诺过），Tab 第一下才落到「时间线」。
  // 不直接 focus 第一个链接：即使 touch 上不长出焦点环，也会让首项看起来「被选中」，
  // 和 .on 的高亮抢意思。preventScroll 防止 iOS 顺手滚背景。
  nextTick(() => menuEl.value?.focus({ preventScroll: true }))
}
function closeMenu() {
  menuOpen.value = false
  nextTick(() => burger.value?.focus({ preventScroll: true }))
}

// 菜单铺满全屏时锁住底层滚动（iOS 上不锁背景会跟着手指滑）
watch(menuOpen, (v) => { document.body.style.overflow = v ? 'hidden' : '' })
// 点了链接 → 路由变了 → 菜单收起
watch(() => route.fullPath, () => { menuOpen.value = false })

function onKey(e) {
  if (e.key === 'Escape') closeMenu()
}

// 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
const mqWide = window.matchMedia('(min-width: 721px)')
function onWide(e) { if (e.matches) menuOpen.value = false }

onMounted(() => {
  window.addEventListener('scroll', onScroll, { passive: true })
  window.addEventListener('keydown', onKey)
  mqWide.addEventListener('change', onWide)
  onScroll()
})
onBeforeUnmount(() => {
  window.removeEventListener('scroll', onScroll)
  window.removeEventListener('keydown', onKey)
  mqWide.removeEventListener('change', onWide)
  document.body.style.overflow = ''
  menuOpen.value = false
})

// 设计稿里主题键是 ◐ / ◑：亮色时显示 ◐（点它去暗），暗色时显示 ◑。
function toggleTheme() {
  // site.themeMode 是站点级偏好（auto / light / dark），site.js 里有 watcher 负责落盘与写 data-theme。
  // 这里直接改它，不自己碰 document ： 单一数据源。
  const dark = document.documentElement.getAttribute('data-theme') === 'vivid-dark'
  site.themeMode = dark ? 'light' : 'dark'
}
</script>

<template>
  <header class="top" :class="{ scrolled }">
    <div class="top-in">
      <RouterLink class="brand" to="/">
        <span class="av">{{ initial() }}</span>
        <span>{{ title() }}</span>
      </RouterLink>
      <nav class="nav" aria-label="站点导航">
        <RouterLink
          v-for="l in links"
          :key="l.to"
          :to="l.to"
          :class="{ on: isOn(l) }"
        >{{ l.label }}</RouterLink>
      </nav>
      <div class="top-acts">
        <button class="icon-btn theme-btn" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
        <button
          ref="burger"
          class="icon-btn menu-btn"
          type="button"
          aria-label="打开菜单"
          aria-controls="v-menu"
          :aria-expanded="menuOpen"
          @click="openMenu"
        >☰</button>
      </div>
    </div>
  </header>

  <!-- 窄屏全屏菜单。必须待在 .top 外面：.top 有 backdrop-filter，
       会给 position:fixed 的后代当包含块，铺不满屏。 -->
  <Transition name="v-menu">
    <div
      v-if="menuOpen"
      id="v-menu"
      ref="menuEl"
      class="menu"
      role="dialog"
      aria-modal="true"
      aria-label="站点导航"
      tabindex="-1"
      @click.self="closeMenu"
    >
      <div class="menu-head">
        <span class="m-brand">
          <span class="av">{{ initial() }}</span>
          <span>{{ title() }}</span>
        </span>
        <button class="icon-btn" type="button" aria-label="关闭菜单" @click="closeMenu">✕</button>
      </div>
      <nav class="menu-in">
        <RouterLink
          v-for="l in links"
          :key="l.to"
          :to="l.to"
          :class="{ on: isOn(l) }"
        >
          <span>{{ l.label }}</span>
          <em>{{ l.en }}</em>
        </RouterLink>
      </nav>
      <div class="menu-foot">
        <button class="chip" type="button" @click="toggleTheme">◐ 切换明暗</button>
      </div>
    </div>
  </Transition>
</template>