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

@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
+import YohakuArticle from '../ui/yohaku/YohakuArticle.vue'
 import { publicApi } from '../api'
 import { site, applyDocTitle } from '../site'
 import { formatDate, minutesLabel, sanitizeHtml } from '../utils'
@@ -11,13 +12,35 @@ const route = useRoute()
 const post = ref(null)
 const loading = ref(true)
 const error = ref('')
+const isVivid = computed(() => site.ui_id === 'vivid')
+
+// 正文 h2 加 id，供 vivid 右栏目录；classic 不用但无害
+function withHeadingIds(html) {
+  const doc = new DOMParser().parseFromString(html || '', 'text/html')
+  const heads = [...doc.querySelectorAll('h2')]
+  heads.forEach((h, i) => {
+    if (!h.id) h.id = 'h-' + i
+  })
+  return {
+    html: doc.body.innerHTML,
+    headings: heads.map((h) => ({ id: h.id, text: h.textContent || '' }))
+  }
+}
+
+const contentHtml = ref('')
+const headings = ref([])
 
 async function load() {
   loading.value = true
   error.value = ''
   post.value = null
+  contentHtml.value = ''
+  headings.value = []
   try {
     post.value = await publicApi.post(route.params.slug)
+    const prepared = withHeadingIds(post.value.content_html)
+    contentHtml.value = prepared.html
+    headings.value = prepared.headings
     applyDocTitle(post.value.kind === 'short' ? '短文' : post.value.title)
   } catch (e) {
     error.value = e.message || '加载失败'
@@ -34,10 +57,18 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
 </script>
 
 <template>
-  <div class="shell">
-    <div class="layout">
-      <LeftNav />
+  <YohakuArticle
+    v-if="isVivid"
+    :post="post"
+    :headings="headings"
+    :content-html="contentHtml"
+    :neighbors="post?.neighbors || []"
+    :loading="loading"
+    :error="error"
+  />
 
+  <div v-else class="shell">
+    <div class="layout">
       <main class="main">
         <div v-if="loading" class="loading">载入中…</div>
 
@@ -65,7 +96,11 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
             <p v-if="!isShort && post.summary" class="lede">{{ post.summary }}</p>
           </header>
 
-          <div class="prose" :class="{ 'prose-short': isShort }" v-html="sanitizeHtml(post.content_html)"></div>
+          <div
+            class="prose"
+            :class="{ 'prose-short': isShort }"
+            v-html="sanitizeHtml(contentHtml)"
+          ></div>
 
           <footer class="foot">
             <div v-if="post.tags && post.tags.length" class="tags">
@@ -83,7 +118,6 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
         </article>
       </main>
 
-      <RightRail />
     </div>
   </div>
 </template>