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

@@ -3,9 +3,17 @@ import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import TopBar from './components/TopBar.vue'
 import ThemeSwitcher from './components/ThemeSwitcher.vue'
+import YohakuTop from './ui/yohaku/YohakuTop.vue'
+import YohakuFoot from './ui/yohaku/YohakuFoot.vue'
+import { site, setAdminScope } from './site'
 
 const route = useRoute()
 const isAdmin = computed(() => route.path.startsWith('/admin'))
+// vivid 只在公开前台生效：后台永远走 classic 那套（--admin-* token + 原 data-ui/data-theme），
+// 不受 ui_id 影响。vivid.css 会命中 .btn / .input 这类全局类，后台表单正在用，
+// 所以必须在 data-ui 轴上退回 classic，而不是只靠 --admin-* 区分。
+// 余白（vivid）只在公开前台生效：后台永远走 classic 那套。
+const isVivid = computed(() => site.ui_id === 'vivid' && !isAdmin.value)
 
 // body hook：让全局 CSS 知道当前是 admin，
 // focus-visible 等样式跟着切 token。
@@ -15,16 +23,21 @@ watch(
     if (typeof document !== 'undefined') {
       document.body.classList.toggle('admin-shell-active', v)
     }
+    // 同一个开关也用于把 data-ui / data-theme 收回 classic
+    setAdminScope(v)
   },
   { immediate: true }
 )
 </script>
 
 <template>
-  <TopBar v-if="!isAdmin" />
+  <YohakuTop v-if="isVivid" />
+  <TopBar v-else-if="!isAdmin" />
   <RouterView />
-  <!-- 桌面端：左栏底部放 inline 形态；窄屏：左栏收起，浮动按钮兜底 -->
-  <ThemeSwitcher variant="floating" class="theme-floating-only" />
+  <YohakuFoot v-if="isVivid" />
+  <!-- 桌面端：左栏底部放 inline 形态；窄屏：左栏收起，浮动按钮兜底。
+       vivid 的顶部导航自带切换器，浮动那个就不重复出现了。 -->
+  <ThemeSwitcher v-if="!isVivid" variant="floating" class="theme-floating-only" />
 </template>
 
 <style scoped>