余白 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/views/HomeView.vue

@@ -4,12 +4,20 @@ import { useRoute, useRouter } from 'vue-router'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
 import PostCard from '../components/PostCard.vue'
+import YohakuHome from '../ui/yohaku/YohakuHome.vue'
 import { publicApi } from '../api'
 import { site, applyDocTitle } from '../site'
 
 const route = useRoute()
 const router = useRouter()
 
+// vivid（余白）走的是另一套 DOM：hero + toolbar + feed + pager + panels。
+// 数据来源和 classic 完全一样，只是呈现不同 —— 所以分支放在视图层，不动取数逻辑。
+const isVivid = computed(() => site.ui_id === 'vivid')
+const yTags = ref([])
+const yProjects = ref([])
+const yStats = ref({ posts: 0, chars: 0 })
+
 const items = ref([])
 const total = ref(0)
 const loading = ref(true)
@@ -67,8 +75,34 @@ async function load() {
 }
 
 onMounted(load)
+onMounted(loadYohakuExtras) // 余白的附加数据（标签 / 作品 / 全站统计）只在 vivid 下取一次
 watch([kind, tag, page], load)
 
+// 余白头版要四个数字：文章 / 字数 / 标签 / 作品。
+// 这些是「全站统计」，不能用当前筛选后的 total，所以单独取一次；
+// 取不到就不显示统计，绝不挡住首页。
+async function loadYohakuExtras() {
+  if (!isVivid.value) return
+  try {
+    const [tg, pj, ar] = await Promise.all([
+      publicApi.tags(),
+      publicApi.projects(),
+      publicApi.archive()
+    ])
+    // 三个接口都返回包装对象：{tags:[]} / {projects:[]} / {years:[]}
+    yTags.value = tg?.tags || []
+    yProjects.value = pj?.projects || []
+    const flat = []
+    ;(ar?.years || []).forEach((y) => (y.months || []).forEach((m) => (m.posts || []).forEach((x) => flat.push(x))))
+    yStats.value = {
+      posts: flat.length,
+      chars: flat.reduce((n, x) => n + (x.content_len || 0), 0)
+    }
+  } catch (e) {
+    yStats.value = { posts: total.value, chars: 0 }
+  }
+}
+
 function setKind(value) {
   router.push({ path: '/', query: { ...(value ? { kind: value } : {}), ...(tag.value ? { tag: tag.value } : {}) } })
 }
@@ -86,7 +120,28 @@ applyDocTitle('')
 </script>
 
 <template>
-  <div class="shell">
+  <YohakuHome
+    v-if="isVivid"
+    :items="items"
+    :total="total"
+    :page="page"
+    :max-page="pageCount"
+    :kind="kind"
+    :tag="tag"
+    :query="String(route.query.q || '')"
+    :tags="yTags"
+    :projects="yProjects"
+    :stat-posts="yStats.posts"
+    :stat-chars="yStats.chars"
+    :stat-tags="yTags.length"
+    :stat-projects="yProjects.length"
+    @update:kind="setKind"
+    @update:tag="(v) => router.push({ path: '/', query: v ? { tag: v } : {} })"
+    @update:query="(v) => router.push({ path: '/', query: v ? { q: v } : {} })"
+    @go="(n) => router.push({ path: '/', query: { ...route.query, page: n } })"
+  />
+
+  <div v-else class="shell">
     <div class="layout">
       <LeftNav />