From 8fb15861fe1d2259e8dbbd0e4f67741a84cb65ce Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Thu, 1 Oct 2026 15:22:00 +0800
Subject: [PATCH] =?UTF-8?q?vivid=20=E6=89=8B=E6=9C=BA=E7=AB=AF=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=87=8D=E5=81=9A=EF=BC=9A=E5=BA=95=E9=83=A8=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E6=A0=87=E7=AD=BE=E6=A0=8F=E4=B8=80=E6=AC=A1=E7=9B=B4?=
 =?UTF-8?q?=E8=BE=BE=EF=BC=8C=E6=9B=BF=E6=8E=89=20dock=20+=20=E6=B1=89?=
 =?UTF-8?q?=E5=A0=A1=20+=20=E4=B8=8A=E6=8B=89=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 五栏目平铺常驻拇指区，当前项分段高亮（与首页工具条分段控件同语言），
  44px 触达高度 + :active 缩放反馈，safe-area 适配保留
- 去掉菜单里的 01-05 编号、逐行分隔线与站点描述，导航只做导航
- 明暗切换：手机端挪到页脚 foot-nav 末尾的 ◐（≤720px 显示），
  桌面仍走顶栏主题键；QuickShort 的 FAB 底部给标签栏让位
---
 frontend/src/ui/yohaku/YohakuFoot.vue |   9 ++
 frontend/src/ui/yohaku/YohakuTop.vue  | 122 +++++---------------------
 frontend/src/ui/yohaku/chrome.css     | 121 +++++++++----------------
 3 files changed, 73 insertions(+), 179 deletions(-)

diff --git a/frontend/src/ui/yohaku/YohakuFoot.vue b/frontend/src/ui/yohaku/YohakuFoot.vue
index 32ae14a..65ec27d 100644
--- a/frontend/src/ui/yohaku/YohakuFoot.vue
+++ b/frontend/src/ui/yohaku/YohakuFoot.vue
@@ -15,6 +15,13 @@ const social = (site.social_links || []).filter((s) => s && s.url && s.url !== P
 // 按站主要求去掉了（它只标识当前主题名，本站没有多套主题，属于纯装饰，
 // 而且固定在底部会挡住内容）。对应的 .switch 样式也一并从
 // chrome.css / pages.css 里删除，避免留下死规则。
+//
+// 手机端顶栏退场后，明暗切换没有了常驻入口：页脚这枚 ◐ 补位
+// （chrome.css 里 ≤720px 才显示，桌面仍走顶栏的主题键）。
+function toggleTheme() {
+  const dark = document.documentElement.getAttribute('data-theme') === 'vivid-dark'
+  site.themeMode = dark ? 'light' : 'dark'
+}
 
 const links = [
   { to: '/', label: '时间线' },
@@ -49,6 +56,8 @@ const links = [
       </template>
       <span class="sep">·</span>
       <a href="/rss.xml">RSS</a>
+      <span class="sep theme-sep">·</span>
+      <button class="theme-toggle" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
     </div>
     <!-- 项目信息：固定的源码入口 + 版权，压在最后。和上面那排社交账号分开——
          它是代码仓库入口，不是站主的社交身份（顺序同 classic 的 RightRail） -->
diff --git a/frontend/src/ui/yohaku/YohakuTop.vue b/frontend/src/ui/yohaku/YohakuTop.vue
index 5a7f719..d52d028 100644
--- a/frontend/src/ui/yohaku/YohakuTop.vue
+++ b/frontend/src/ui/yohaku/YohakuTop.vue
@@ -1,31 +1,26 @@
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { site } from '../../site'
-import NavBurger from '../../components/NavBurger.vue'
 import AuthorAvatar from '../../components/AuthorAvatar.vue'
 
 // 余白顶栏。对应设计稿的 <header class="top">：品牌 / 导航 / 操作三块，
 // 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
 // 样式在 ui/yohaku/chrome.css，选择器已收敛到 html[data-ui="vivid"] 下。
 //
-// 窄屏例外：设计稿在窄屏把导航整个 display:none 掉了，手机上会没有任何导航入口。
-// 这里补一个汉堡钮 + 全屏菜单（chrome.css 的 .menu）。菜单 z-index 压在顶栏
-// 之下：顶栏（品牌 + 汉堡）浮在菜单上不消失，汉堡原位并成 ✕，不再需要一个
-// 重复的菜单头。
+// 窄屏例外：顶栏整条退场，导航收进底部玻璃标签栏（.v-tabbar，chrome.css）——
+// 五个栏目一次点击直达，不再需要汉堡 + 上拉菜单。明暗切换在手机上挪到页脚
+// （YohakuFoot 的 .theme-toggle），桌面仍走顶栏这枚 ◐。
 
 const route = useRoute()
 const scrolled = ref(false)
-const menuOpen = ref(false)
-const burger = ref(null)
-const menuEl = ref(null)
 
 const links = [
-  { to: '/', label: '时间线', en: 'Timeline' },
-  { to: '/archive', label: '归档', en: 'Archive' },
-  { to: '/tags', label: '标签', en: 'Tags' },
-  { to: '/projects', label: '作品', en: 'Projects' },
-  { to: '/about', label: '关于', en: 'About' }
+  { to: '/', label: '时间线' },
+  { to: '/archive', label: '归档' },
+  { to: '/tags', label: '标签' },
+  { to: '/projects', label: '作品' },
+  { to: '/about', label: '关于' }
 ]
 
 const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE'
@@ -38,50 +33,15 @@ function onScroll() {
   scrolled.value = (window.scrollY || 0) > 8
 }
 
-function toggleMenu() {
-  menuOpen.value ? closeMenu() : openMenu()
-}
-function openMenu() {
-  menuOpen.value = true
-  // 焦点交给对话框本身（aria-modal 承诺过），Tab 第一下才落到「时间线」。
-  // 不直接 focus 第一个链接：即使 touch 上不长出焦点环，也会让首项看起来「被选中」，
-  // 和 .on 的高亮抢意思。preventScroll 防止 iOS 顺手滚背景。
-  nextTick(() => menuEl.value?.focus({ preventScroll: true }))
-}
-function closeMenu() {
-  menuOpen.value = false
-  const b = burger.value?.$el || burger.value
-  nextTick(() => b?.focus?.({ preventScroll: true }))
-}
-
-// 菜单铺满全屏时锁住底层滚动（iOS 上不锁背景会跟着手指滑）
-watch(menuOpen, (v) => { document.body.style.overflow = v ? 'hidden' : '' })
-// 点了链接 → 路由变了 → 菜单收起
-watch(() => route.fullPath, () => { menuOpen.value = false })
-
-function onKey(e) {
-  if (e.key === 'Escape') closeMenu()
-}
-
-// 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
-const mqWide = window.matchMedia('(min-width: 721px)')
-function onWide(e) { if (e.matches) menuOpen.value = false }
-
 onMounted(() => {
   window.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('keydown', onKey)
-  mqWide.addEventListener('change', onWide)
   onScroll()
 })
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', onScroll)
-  window.removeEventListener('keydown', onKey)
-  mqWide.removeEventListener('change', onWide)
-  document.body.style.overflow = ''
-  menuOpen.value = false
 })
 
-// 设计稿里主题键是 ◐ / ◑：亮色时显示 ◐（点它去暗），暗色时显示 ◑。
+// 设计稿里主题键是 ◐：亮色时显示（点它去暗），暗色时切回亮色。
 function toggleTheme() {
   // site.themeMode 是站点级偏好（auto / light / dark），site.js 里有 watcher 负责落盘与写 data-theme。
   // 这里直接改它，不自己碰 document ： 单一数据源。
@@ -111,54 +71,16 @@ function toggleTheme() {
     </div>
   </header>
 
-  <!-- 窄屏：底部悬浮 dock（站名 + 汉堡），常驻拇指区。桌面 display:none。
-       必须待在 .top 外面：.top 有 backdrop-filter，会给 fixed 后代当包含块。
-       站标「一横」不在这里出现——手机上导航只要文字和按钮，圆标只留桌面顶栏。 -->
-  <div class="dock">
-    <RouterLink class="dock-brand" to="/">
-      <span>{{ title() }}</span>
-    </RouterLink>
-    <NavBurger
-      ref="burger"
-      :open="menuOpen"
-      aria-controls="v-menu"
-      :aria-label="menuOpen ? '关闭菜单' : '打开菜单'"
-      @toggle="toggleMenu"
-    />
-  </div>
-
-  <!-- 窄屏上拉菜单：scrim + 圆角毛玻璃 sheet，从 dock 上方长出来 -->
-  <Transition name="v-menu">
-    <div
-      v-if="menuOpen"
-      id="v-menu"
-      ref="menuEl"
-      class="menu-root"
-      role="dialog"
-      aria-modal="true"
-      aria-label="站点导航"
-      tabindex="-1"
-    >
-      <div class="scrim" @click="closeMenu" />
-      <div class="menu">
-        <nav class="menu-in" aria-label="站点导航">
-          <RouterLink
-            v-for="(l, i) in links"
-            :key="l.to"
-            :to="l.to"
-            :class="{ on: isOn(l) }"
-            :style="{ '--i': i }"
-          >
-            <span class="idx">{{ String(i + 1).padStart(2, '0') }}</span>
-            <span class="zh">{{ l.label }}</span>
-            <em>{{ l.en }}</em>
-          </RouterLink>
-        </nav>
-        <div class="menu-foot">
-          <button class="chip" type="button" @click="toggleTheme">◐ 切换明暗</button>
-          <p v-if="site.site_desc" class="m-desc">{{ site.site_desc }}</p>
-        </div>
-      </div>
-    </div>
-  </Transition>
+  <!-- 窄屏：底部玻璃标签栏。五个栏目平铺一次直达，当前项用分段高亮
+       （与首页工具条「全部 / 长文 / 短文」的分段控件同一语言）。
+       必须待在 .top 外面：.top 有 backdrop-filter，会给 fixed 后代当包含块。 -->
+  <nav class="v-tabbar" aria-label="站点导航">
+    <RouterLink
+      v-for="l in links"
+      :key="l.to"
+      :to="l.to"
+      :class="{ on: isOn(l) }"
+      :aria-current="isOn(l) ? 'page' : undefined"
+    >{{ l.label }}</RouterLink>
+  </nav>
 </template>
diff --git a/frontend/src/ui/yohaku/chrome.css b/frontend/src/ui/yohaku/chrome.css
index d685e16..d999645 100644
--- a/frontend/src/ui/yohaku/chrome.css
+++ b/frontend/src/ui/yohaku/chrome.css
@@ -50,98 +50,46 @@ html[data-ui='vivid'] .menu-btn {display:none}
   html[data-ui='vivid'] .top {display:none}
 }
 
-/* ---- 窄屏：底部悬浮 dock + 上拉菜单 ----
-   dock 常驻拇指区（品牌 + 汉堡），点开一片从底部长出来的圆角毛玻璃菜单。 */
-html[data-ui='vivid'] .dock {position:fixed;z-index:90;
-  left:50%;bottom:max(14px, env(safe-area-inset-bottom));transform:translateX(-50%);
-  display:none;align-items:center;gap:10px;
-  padding:6px 8px 6px 14px;border-radius:999px;
+/* ---- 窄屏：底部玻璃标签栏 ----
+   五个栏目平铺常驻拇指区，一次点击直达（替代旧的 dock + 汉堡 + 上拉菜单，
+   那套要两跳才能到目标页）。分段高亮与首页工具条「全部 / 长文 / 短文」
+   的分段控件同一语言；玻璃配方沿用原 dock（card 82% + blur 20px）。 */
+html[data-ui='vivid'] .v-tabbar {position:fixed;z-index:90;
+  left:max(10px, env(safe-area-inset-left));
+  right:max(10px, env(safe-area-inset-right));
+  bottom:max(10px, env(safe-area-inset-bottom));
+  display:none;align-items:stretch;gap:2px;
+  padding:4px;border-radius:999px;
   border:1px solid var(--line);
   background:color-mix(in srgb,var(--card) 82%,transparent);
   backdrop-filter:blur(20px) saturate(1.5);
   -webkit-backdrop-filter:blur(20px) saturate(1.5);
   box-shadow:var(--shadow-lg);}
-html[data-ui='vivid'] .dock-brand {display:flex;align-items:center;
-  font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);}
-/* 窄屏才把 dock 摆出来；这条必须压在基准规则（display:none）之后 */
+/* 窄屏才把标签栏摆出来；这条必须压在基准规则（display:none）之后 */
 @media (max-width:720px) {
-  html[data-ui='vivid'] .dock {display:flex}
+  html[data-ui='vivid'] .v-tabbar {display:flex}
 }
+html[data-ui='vivid'] .v-tabbar a {flex:1;display:flex;align-items:center;justify-content:center;
+  min-height:44px;padding:0 2px;border-radius:999px;
+  font-size:13px;font-weight:600;letter-spacing:.02em;
+  color:var(--soft);
+  transition:color .25s var(--ease),background-color .25s var(--ease),transform 120ms ease-out;}
+/* 按下即有物理反馈（触屏没有 hover，:active 就是全部） */
+html[data-ui='vivid'] .v-tabbar a:active {transform:scale(.94);color:var(--accent)}
+html[data-ui='vivid'] .v-tabbar a.on {color:var(--accent);font-weight:700;
+  background:color-mix(in srgb,var(--accent) 11%,transparent);}
+/* 未配强调色的浅色主题回落：高亮底太浅时靠字重与颜色也分得清 */
+
 /* 品牌位只管尺寸：头像本身已裁成圆（AuthorAvatar 的 img），外面不加光环、
    右下角也不加在线点——顶栏要的就是一张干净的圆头像。color 供 LogoMark
-   回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机 dock 里已经不放
-   站标（YohakuTop 的 dock 分支），选择器不需要 :is() 兼顾两边。 */
+   回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机标签栏里没有品牌位，
+   选择器不需要 :is() 兼顾两边。 */
 html[data-ui='vivid'] .brand .av {width:30px;height:30px;flex:none;
   color:var(--ink);}
-
-/* 上拉菜单：圆角毛玻璃贴着 dock 上方长出来，最高 70vh，内容多就内部滚 */
-html[data-ui='vivid'] .menu-root {position:fixed;inset:0;z-index:110;}
-html[data-ui='vivid'] .menu-root .scrim {position:absolute;inset:0;
-  background:color-mix(in srgb,var(--ink) 32%,transparent);}
-html[data-ui='vivid'] .menu {position:absolute;left:10px;right:10px;
-  bottom:max(10px, env(safe-area-inset-bottom));
-  border-radius:26px;
-  background:color-mix(in srgb,var(--card) 92%,transparent);
-  backdrop-filter:blur(28px) saturate(1.6);
-  -webkit-backdrop-filter:blur(28px) saturate(1.6);
-  border:1px solid var(--line);
-  box-shadow:var(--shadow-lg);
-  display:flex;flex-direction:column;
-  padding:10px 22px max(14px, env(safe-area-inset-bottom));
-  overscroll-behavior:contain;
-  max-height:min(70vh, 560px);}
-html[data-ui='vivid'] .menu:focus {outline:none}
-html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
-  justify-content:flex-start;
-  padding-top:6px;overflow-y:auto;
-  scrollbar-width:none;}
-html[data-ui='vivid'] .menu-in a {position:relative;display:flex;align-items:baseline;gap:14px;
-  padding:15px 2px;font-size:25px;font-weight:800;letter-spacing:-.02em;
-  line-height:1.25;color:var(--soft);
-  border-bottom:1px solid var(--line);
-  transition:color .3s var(--ease);
-  /* 逐项入场：--i 由模板按序号写进 style，错峰 45ms */
-  animation:mItem .55s var(--spring) both;
-  animation-delay:calc(var(--i, 0) * 45ms);}
-@keyframes mItem {from {opacity:0;transform:translateY(14px)}}
-html[data-ui='vivid'] .menu-in a:last-child {border-bottom:0}
-html[data-ui='vivid'] .menu-in a .idx {font-family:var(--mono);font-size:11px;font-weight:700;
-  color:var(--muted);letter-spacing:.06em;
-  transition:color .3s var(--ease);}
-html[data-ui='vivid'] .menu-in a em {font-style:normal;font-size:11px;font-weight:700;
-  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto;
-  transition:color .3s var(--ease);}
-html[data-ui='vivid'] .menu-in a.on {color:var(--accent)}
-html[data-ui='vivid'] .menu-in a.on .idx,
-html[data-ui='vivid'] .menu-in a.on em {color:var(--accent)}
-/* 当前项的左缘短杠：菜单内边距 22px，杠落在离屏边 10px 处 */
-html[data-ui='vivid'] .menu-in a.on::before {content:"";position:absolute;left:-14px;top:50%;
-  width:3px;height:18px;border-radius:2px;background:var(--accent);
-  transform:translateY(-50%);}
-html[data-ui='vivid'] .menu-in a:active {color:var(--accent)}
-html[data-ui='vivid'] .menu-foot {flex:none;padding-top:16px;
-  display:flex;align-items:center;justify-content:space-between;gap:12px;}
-html[data-ui='vivid'] .menu-foot .m-desc {margin:0;font-size:12px;line-height:1.7;
-  color:var(--muted);text-align:right;}
-/* 进：scrim 淡入 + 菜单从底部长出来 + 项逐项推上来；出：整块沉回去 */
-html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .3s var(--ease)}
-html[data-ui='vivid'] .v-menu-enter-active .menu {transition:transform .55s var(--spring),opacity .35s var(--ease)}
-html[data-ui='vivid'] .v-menu-enter-from {opacity:0}
-html[data-ui='vivid'] .v-menu-enter-from .menu {transform:translateY(56px);opacity:0}
-html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .22s var(--ease)}
-html[data-ui='vivid'] .v-menu-leave-active .menu {transition:transform .22s var(--ease)}
-html[data-ui='vivid'] .v-menu-leave-to {opacity:0}
-html[data-ui='vivid'] .v-menu-leave-to .menu {transform:translateY(48px)}
-/* 全局 reduce-motion 只把 duration 压扁，delay 会留下来 → 单独清掉 */
-@media (prefers-reduced-motion: reduce) {
-  html[data-ui='vivid'] .v-menu-enter-active,
-  html[data-ui='vivid'] .v-menu-enter-active .menu {transition-delay:0s !important}
-  html[data-ui='vivid'] .menu-in a {animation:none}
-}
 /* 短文快发盒（QuickShort）的 vivid 差异：圆角跟自己的半径档走，
-   FAB 不用给经典版的主题浮钮让位（vivid 的主题键在菜单里），贴到安全区 */
+   FAB 底部给标签栏让位（栏高 = 44 触达 + 8 内边距 + 2 描边 ≈ 54px） */
 html[data-ui='vivid'] .qs-card {border-radius:14px;}
-html[data-ui='vivid'] .qs-fab {bottom:max(20px, env(safe-area-inset-bottom));}
+html[data-ui='vivid'] .qs-fab {bottom:calc(max(10px, env(safe-area-inset-bottom)) + 60px);}
 
 html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
   background:transparent;pointer-events:none;}
@@ -169,6 +117,21 @@ html[data-ui='vivid'] .foot-social a {color:var(--soft);font-weight:400;
 html[data-ui='vivid'] .foot-social a:hover {color:var(--accent);background:var(--accent-soft);}
 html[data-ui='vivid'] .foot-social svg {width:17px;height:17px;fill:currentColor;}
 html[data-ui='vivid'] .foot-social span {font-size:12px;}
+/* 页脚明暗切换：手机端顶栏退场后这里补位，桌面隐藏（顶栏有主题键）。
+   排在 foot-nav 文字行的末尾，做成和相邻链接同观感的小方块；
+   前面的 · 分隔符跟按钮一起在桌面隐藏，免得尾巴上挂个空点。 */
+html[data-ui='vivid'] .foot .theme-toggle,
+html[data-ui='vivid'] .foot .theme-sep {display:none}
+html[data-ui='vivid'] .foot .theme-toggle {padding:0;width:24px;height:24px;
+  align-items:center;justify-content:center;
+  border:0;border-radius:6px;background:transparent;
+  color:var(--accent);font-size:14px;line-height:1;cursor:pointer;
+  transition:opacity .25s;}
+html[data-ui='vivid'] .foot .theme-toggle:active {opacity:.6}
+@media (max-width:720px) {
+  html[data-ui='vivid'] .foot .theme-toggle {display:inline-flex}
+  html[data-ui='vivid'] .foot .theme-sep {display:inline}
+}
 /* 项目信息行：源码入口 + 版权。刻意不并进 .foot-social——那一排是站主的社交
    身份，源码是仓库入口，混在一起会让人以为它也是一个社交账号。
    放在 .foot a 规则之后：两者特指度相同，靠后者才能压掉默认的强调色。 */