交互：表情面板 + 短文快发盒 + 双 UI 手机导航重做 + 社交链接与统计脚本接入

评论表情 - 发布 / 回复 / 编辑三处输入框挂上表情面板（EmojiPicker + emoji.js）：「表情 / 颜文字」两个 tab，光标处插入（insertAtCursor，未聚焦追加到末尾），面板自己管点外 / Esc 收起 - 操作钮 ✎ ✕ ↩ 圆图标改文字钮（回复 / 编辑 / 删除），删除悬停给红，补 focus-visible；编辑态去掉「正在改定此评：」交给 placeholder 双 UI 手机导航（参考 innei.in 的底部胶囊 + 上拉菜单） - 余白：顶栏手机端整条退场，底部悬浮 dock（品牌 + NavBurger 汉堡），点开上拉毛玻璃菜单：mono 序号 01-05 + 中文大字 + 英文小字，当前项强调色 + 左缘短杠，逐项错峰 45ms 入场；dock 在菜单之下原位变 ✕ - classic：顶栏 brand 居中（三列网格）+ NavBurger + 下拉纸片；下滑隐藏上滑唤回——上滑要累计 40px 才算数（页面高度稳定时浏览器会回弹几十像素，那种「假上滑」不拉回顶栏）；首页 .sticky-head 用 var(--topbar-h) 跟随顶栏一起滑 - NavBurger 两套 UI 共用；经典手机 FAB 避开右下角主题浮钮 sticky 失效修复 - body overflow-x:hidden 把 body 变成滚动容器，页内所有 position:sticky 全部失明（首页筛选条吸顶从来没生效过）→ 改 overflow-x:clip，只裁剪不建滚动容器 - 余白手机端 .article-layout 裸 1fr 的自动最小尺寸是 min-content，长 token 把整列顶到 592px 横向溢出 → minmax(0,1fr) + overflow-wrap 短文快发盒（QuickShort，Twitter 式） - 时间线顶部内联发布盒：头像 + 输入框 + 发布（Ctrl/⌘+Enter），手机收进右下角 FAB + 上拉 sheet；只有管理员会话在场才渲染（/api/admin/me 探测），发布走真实 createPost(kind:short)——标题 / slug / 阅读时长后端自动生成。读者社交登录是阶段二产物，后端就绪前访客无法登录，所以天然只有站主可见；要放开给读者发，换探测和发布接口即可 - 经典 FAB 避开右下角主题浮钮（bottom 72），余白贴安全区（bottom 20）社交链接 + 统计脚本接入 - Settings 的 social_links 前台两处渲染：经典左栏「常读标签」区域改为「社交账号」图标行（url 域名推导图标：GitHub / Telegram / X / 邮箱信封，认不出显示名称文字），右栏卡片下方 Twitter 式页脚小字区三排（导航行 / 社交图标行 / 项目源码 + 版权行）——项目源码是固定入口（本站 git remote），与版权同为固定元素，后台配置挤不掉 - Settings 加 custom_js：后台贴完整 <script> 片段（GA / Plausible / Umami），DOMParser 解析后逐个重建 script 节点插进 head（innerHTML 塞的 script 不会执行）；公开页每页注入一次，/admin 不注入；站主自己的代码不做清洗（洗 JS 只会把统计脚本洗坏） - 订阅卡删掉：RSS 入口在页脚小字里，一张卡只为一个链接不值得杂项 - vite dev 加 --host：手机连局域网直接评审 - 评论 mock 的状态浮层窄屏上移，给底部 dock 让位 - 经典页脚在 12px 页边距下的排版对齐验证 - 后端 go test 全绿；前端构建通过 - 浏览器逐状态过目：双 UI × 亮暗 × 桌面/手机；表情插入 / 短文发布真实入库（测试内容已删）/ dock 与 sheet 开合 / FAB 与主题浮钮不重叠 / 顶栏隐藏与筛选条跟随同步
2026-09-27 03:35:28 +08:00
parent 5dfa1550fb
commit bc1b0ccce3
23 changed files with 1381 additions and 129 deletions
@@ -1,18 +1,127 @@
 <script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
 import { site } from '../site'
+import NavBurger from './NavBurger.vue'
+
+// 手机端导航。原来把 5 个链接平铺在顶栏里：375px 挤成一排小字，
+// 触点只有十几像素高，320px 的屏还会折行。改成 brand + 汉堡钮，
+// 点开一片下拉「纸片」（不是全屏——classic 的性格是轻，浮一层纸就够）。
+// 主题切换不走这里：App.vue 的浮动 ThemeSwitcher 只在窄屏出现，职责不重。
+// 桌面（>780px）整个顶栏不存在，导航走左栏。
+
+const route = useRoute()
+const open = ref(false)
+const hidden = ref(false)
+const burger = ref(null)
+
+const links = [
+  { to: '/', label: '首页' },
+  { to: '/archive', label: '归档' },
+  { to: '/tags', label: '标签' },
+  { to: '/projects', label: '作品' },
+  { to: '/about', label: '关于' }
+]
+
+function isOn(l) {
+  return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
+}
+
+// 下滑藏顶栏、上滑唤回。dead zone 滤掉手指微抖；滚回页首（没滚出顶栏多远）
+// 或菜单开着时强制显示 —— 纸片锚在顶栏下面，顶栏藏了纸片会悬空。
+// 上滑唤回要累计上移 40px 才算数：页面加载后字体/内容稳定时高度会收缩，
+// 浏览器把滚动位置回弹几十像素，那种「假上滑」不该把顶栏拉回来。
+let lastY = typeof window === 'undefined' ? 0 : window.scrollY
+let hideY = 0
+function onScroll() {
+  const y = window.scrollY
+  if (open.value || y <= 80) {
+    hidden.value = false
+    lastY = y
+    return
+  }
+  const delta = y - lastY
+  lastY = y
+  if (delta > 4) {
+    hidden.value = true
+    hideY = y
+  } else if (delta < -4 && hideY - y > 40) {
+    hidden.value = false
+  }
+}
+
+function toggle() {
+  open.value ? close() : (open.value = true)
+}
+function close() {
+  open.value = false
+  const b = burger.value?.$el || burger.value
+  nextTick(() => b?.focus?.({ preventScroll: true }))
+}
+function onKey(e) {
+  if (e.key === 'Escape') close()
+}
+// 点顶栏和纸片以外的地方收起（scrim 也兜了一层）
+function onDocDown(e) {
+  if (open.value && !e.target.closest?.('.topbar')) close()
+}
+// 点了链接 → 路由变了 → 收起
+watch(() => route.fullPath, () => { open.value = false })
+// 顶栏藏没藏广播到 <html>：首页的 sticky-head（标题 + 内容切换 tabs）吸顶
+// 偏移用的是 var(--topbar-h)，这里翻成 0 它就跟着顶栏一起滑上去
+watch(hidden, (v) => {
+  document.documentElement.classList.toggle('topbar-hidden', v)
+})
+
+// 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
+const mqWide = window.matchMedia('(min-width: 781px)')
+function onWide(e) { if (e.matches) open.value = false }
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll, { passive: true })
+  window.addEventListener('keydown', onKey)
+  document.addEventListener('pointerdown', onDocDown, true)
+  mqWide.addEventListener('change', onWide)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll)
+  window.removeEventListener('keydown', onKey)
+  document.removeEventListener('pointerdown', onDocDown, true)
+  mqWide.removeEventListener('change', onWide)
+  document.documentElement.classList.remove('topbar-hidden')
+})
 </script>

 <template>
-  <!-- 窄屏时左栏收起，导航回到顶部 -->
-  <header class="topbar">
+  <!-- 窄屏时左栏收起，导航回到顶部；下滑隐藏、上滑唤回 -->
+  <header class="topbar" :class="{ hidden }">
    <RouterLink to="/" class="brand">{{ site.site_title || 'ONE' }}</RouterLink>
-    <nav class="links">
-      <RouterLink to="/">首页</RouterLink>
-      <RouterLink to="/archive">归档</RouterLink>
-      <RouterLink to="/tags">标签</RouterLink>
-      <RouterLink to="/projects">作品</RouterLink>
-      <RouterLink to="/about">关于</RouterLink>
-    </nav>
+    <NavBurger
+      ref="burger"
+      class="burger"
+      :open="open"
+      aria-controls="c-menu"
+      :aria-label="open ? '关闭菜单' : '打开菜单'"
+      @toggle="toggle"
+    />
+
+    <!-- 半透明幕布：垫在顶栏（z 20）之下、页面内容之上，点它收起 -->
+    <Transition name="c-scrim">
+      <div v-if="open" class="scrim" @click="close" />
+    </Transition>
+
+    <Transition name="c-sheet">
+      <div v-if="open" id="c-menu" class="sheet">
+        <nav class="links" aria-label="站点导航">
+          <RouterLink
+            v-for="l in links"
+            :key="l.to"
+            :to="l.to"
+            :class="{ on: isOn(l) }"
+          >{{ l.label }}</RouterLink>
+        </nav>
+      </div>
+    </Transition>
  </header>
 </template>

@@ -23,16 +132,28 @@ import { site } from '../site'

@media (max-width: 780px) {
  .topbar {
-    display: flex;
-    align-items: baseline;
-    gap: 14px;
+    /* 三列网格：brand 落在正中列居中，汉堡钉死右列；下滑整条上移隐藏 */
+    display: grid;
+    grid-template-columns: 44px 1fr 44px;
+    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
-    padding: 10px 18px;
+    padding: 9px 12px;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    backdrop-filter: blur(10px) saturate(160%);
    border-bottom: 1px solid var(--line);
+    transition: transform 0.32s var(--ease, ease);
+  }
+
+  .topbar.hidden {
+    transform: translateY(-110%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .topbar {
+      transition: none;
+    }
  }

  @media (prefers-reduced-transparency: reduce) {
@@ -43,19 +164,105 @@ import { site } from '../site'
  }

  .brand {
+    grid-column: 2;
+    justify-self: center;
    font-family: var(--serif);
    font-size: 17px;
+    color: var(--ink);
+  }
+
+  .burger {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  /* 幕布在自己的顶栏层叠上下文里，z -1 垫在 brand / 汉堡 / 纸片下面，
+     但整个上下文（z 20）仍盖过页面内容 */
+  .scrim {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: color-mix(in srgb, var(--ink) 24%, transparent);
+  }
+
+  /* 浮动纸片：贴着顶栏下方悬一层，和右栏卡片同一套「纸」的语言 */
+  .sheet {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 8px;
+    right: 8px;
+    padding: 6px;
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--paper) 96%, transparent);
+    backdrop-filter: blur(20px) saturate(160%);
+    box-shadow: 0 18px 50px -18px rgba(28, 28, 30, 0.35);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .sheet {
+      background: var(--paper);
+      backdrop-filter: none;
+    }
  }

  .links {
    display: flex;
-    gap: 12px;
-    font-size: 13px;
-    color: var(--muted);
+    flex-direction: column;
+    padding: 2px;
  }

-  .links a.router-link-exact-active {
+  .links a {
+    display: block;
+    padding: 12px 14px;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 600;
+    text-align: center;
+    color: var(--ink-soft);
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  .links a.on {
    color: var(--accent);
+    background: var(--accent-soft);
+  }
+
+  .links a:active {
+    color: var(--accent);
+    background: var(--accent-soft);
+  }
+
+  .c-sheet-enter-active {
+    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1.2, 0.36, 1);
+  }
+  .c-sheet-enter-from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+  .c-sheet-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+  .c-sheet-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  .c-scrim-enter-active,
+  .c-scrim-leave-active {
+    transition: opacity 0.25s ease;
+  }
+  .c-scrim-enter-from,
+  .c-scrim-leave-to {
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .c-sheet-enter-active,
+    .c-sheet-leave-active,
+    .c-scrim-enter-active,
+    .c-scrim-leave-active {
+      transition: none;
+    }
  }
 }
 </style>