余白 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/）
2026-09-23 15:37:42 +08:00
1 parent 3238175ef0
commit fbda293072
@@ -4,10 +4,34 @@ import RightRail from '../components/RightRail.vue'
 import { site, applyDocTitle } from '../site'

 applyDocTitle('关于')
+
+import { computed, onMounted, ref } from 'vue'
+import YohakuAbout from '../ui/yohaku/YohakuAbout.vue'
+import { publicApi } from '../api'
+
+// 余白版关于页的四个事实。只在 vivid 下取，取不到就显示 0，不挡页面。
+const isVivid = computed(() => site.ui_id === 'vivid')
+const stat = ref({ posts: 0, tags: 0, projects: 0, long: 0 })
+onMounted(async () => {
+  if (!isVivid.value) return
+  try {
+    const [tg, pj, ar] = await Promise.all([publicApi.tags(), publicApi.projects(), publicApi.archive()])
+    const flat = []
+    ;(ar?.years || []).forEach((y) => (y.months || []).forEach((m) => (m.posts || []).forEach((x) => flat.push(x))))
+    stat.value = {
+      posts: flat.length,
+      tags: (tg?.tags || []).length,
+      projects: (pj?.projects || []).length,
+      long: flat.filter((x) => x.kind === 'long').length
+    }
+  } catch (e) { /* 统计失败不影响关于页 */ }
+})
 </script>

 <template>
-  <div class="shell">
+  <YohakuAbout v-if="isVivid" :post-count="stat.posts" :tag-count="stat.tags" :project-count="stat.projects" :long-count="stat.long" />
+
+  <div v-else class="shell">
    <div class="layout">
      <LeftNav />

@@ -3,10 +3,14 @@ import { computed, onMounted, ref } from 'vue'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
 import { publicApi } from '../api'
-import { applyDocTitle } from '../site'
+import YohakuArchive from '../ui/yohaku/YohakuArchive.vue'
+import { applyDocTitle, site } from '../site'
 import { formatDateShort } from '../utils'

 const years = ref([])
+// vivid（余白）是另一套 DOM，数据来源不变，只在视图层分叉
+const isVivid = computed(() => site.ui_id === 'vivid')
+
 const loading = ref(true)
 const error = ref('')

@@ -29,7 +33,9 @@ applyDocTitle('归档')
 </script>

 <template>
-  <div class="shell">
+  <YohakuArchive v-if="isVivid" :years="years" />
+
+  <div v-else class="shell">
    <div class="layout">
      <LeftNav />

@@ -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 />

@@ -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>
@@ -1,12 +1,16 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
 import ProjectCard from '../components/ProjectCard.vue'
 import { publicApi } from '../api'
-import { applyDocTitle } from '../site'
+import YohakuProjects from '../ui/yohaku/YohakuProjects.vue'
+import { applyDocTitle, site } from '../site'

 const projects = ref([])
+// vivid（余白）是另一套 DOM，数据来源不变，只在视图层分叉
+const isVivid = computed(() => site.ui_id === 'vivid')
+
 const loading = ref(true)
 const error = ref('')

@@ -25,7 +29,9 @@ applyDocTitle('作品')
 </script>

 <template>
-  <div class="shell">
+  <YohakuProjects v-if="isVivid" :projects="projects" />
+
+  <div v-else class="shell">
    <div class="layout">
      <LeftNav />

@@ -1,11 +1,15 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
 import { publicApi } from '../api'
-import { applyDocTitle } from '../site'
+import YohakuTags from '../ui/yohaku/YohakuTags.vue'
+import { applyDocTitle, site } from '../site'

 const tags = ref([])
+// vivid（余白）是另一套 DOM，数据来源不变，只在视图层分叉
+const isVivid = computed(() => site.ui_id === 'vivid')
+
 const loading = ref(true)
 const error = ref('')

@@ -26,7 +30,9 @@ applyDocTitle('标签')
 </script>

 <template>
-  <div class="shell">
+  <YohakuTags v-if="isVivid" :tags="tags" />
+
+  <div v-else class="shell">
    <div class="layout">
      <LeftNav />