余白 UI：按设计稿模块化还原 + 站主自定义 CSS + 详情 neighbors + 静态缓存头

前端（新增 ui/yohaku/，各视图按 ui_id=vivid 分支渲染；classic 与后台不受影响）
- 令牌层：设计稿数值原样落地，28 个 --v-* 为站主接口（自定义 CSS 可覆盖，
  放 @layer 让出优先级）；另加防线，中和 styles.css 裸选择器
  （h1 衬线 / body 行高 / 后台 .stat/.toolbar/.chip 卡片）漏进余白元素
- 顶栏（滚动收缩态）/ 阅读进度（顶部 2px + READ n%）/ 页脚
- 首页：hero（统计条）/ 筛选（类型分段 + 标签 chips + 搜索）/
  长文卡片与短文纸条 / 分页 / 作品展示区（3 件 + 查看所有，参照 diygod.cc）；
  面板栅格改 1.6fr 1fr 1fr 且高度自适应内容（标签云明显大一圈）
- 文章页：三栏「纸」—— 左时间线（前后各两篇）/ 中纸张 / 右目录与阅读进度；
  短文详情不显示标题（h1 视觉隐藏保留无障碍）
- 全部规则收敛在 html[data-ui='vivid'] 前缀下；无 !important

后端
- GET /api/posts/:slug 增 neighbors（前后各两篇，详情页侧栏时间线用）
- SPA 缓存头：index.html no-cache，assets/ 带 hash 长期 immutable
  （此前无缓存头，浏览器会一直拿旧构建）

其他
- 站主自定义 CSS 管线（customCss.js + ui/sections.js，按分区注入，仅 vivid）
- 删除旧 vivid 覆盖层实现（VividNav/Hero/Footer/Timeline/Toc、ui/vivid.css）
- 设计稿原型附于仓库根 index.html；作品表清掉外链 diygod.cc 的示例封面，
  改用本地占位图（public/covers/）

frontend/src/ui/yohaku/YohakuTop.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } 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"] 下。
+
+const route = useRoute()
+const scrolled = ref(false)
+
+const links = [
+  { to: '/', label: '时间线' },
+  { to: '/archive', label: '归档' },
+  { to: '/tags', label: '标签' },
+  { to: '/projects', label: '作品' },
+  { to: '/about', label: '关于' }
+]
+
+const initial = () => (site.author_name || site.site_title || 'O').trim().slice(0, 1).toUpperCase()
+
+function onScroll() {
+  scrolled.value = (window.scrollY || 0) > 8
+}
+onMounted(() => {
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
+
+// 设计稿里主题键是 ◐ / ◑：亮色时显示 ◐（点它去暗），暗色时显示 ◑。
+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>{{ site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE' }}</span>
+      </RouterLink>
+      <nav class="nav" aria-label="站点导航">
+        <RouterLink
+          v-for="l in links"
+          :key="l.to"
+          :to="l.to"
+          :class="{ on: l.to === '/' ? route.path === '/' : route.path.startsWith(l.to) }"
+        >{{ l.label }}</RouterLink>
+      </nav>
+      <div class="top-acts">
+        <button class="icon-btn" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
+      </div>
+    </div>
+  </header>
+</template>