From bc1b0ccce3667b70439178383a3e026d6bc41a7d Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sun, 27 Sep 2026 03:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E4=BA=92=EF=BC=9A=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20+=20=E7=9F=AD=E6=96=87=E5=BF=AB=E5=8F=91?=
 =?UTF-8?q?=E7=9B=92=20+=20=E5=8F=8C=20UI=20=E6=89=8B=E6=9C=BA=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=87=8D=E5=81=9A=20+=20=E7=A4=BE=E4=BA=A4=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=E4=B8=8E=E7=BB=9F=E8=AE=A1=E8=84=9A=E6=9C=AC=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

评论表情
- 发布 / 回复 / 编辑三处输入框挂上表情面板（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 与主题浮钮不重叠 /
  顶栏隐藏与筛选条跟随同步
---
 frontend/src/App.vue                          |   1 +
 frontend/src/admin/SettingsView.vue           |  62 ++++
 frontend/src/components/LeftNav.vue           |  76 +++--
 frontend/src/components/NavBurger.vue         |  73 ++++
 frontend/src/components/QuickShort.vue        | 319 ++++++++++++++++++
 frontend/src/components/RightRail.vue         | 136 +++++++-
 frontend/src/components/TopBar.vue            | 241 ++++++++++++-
 .../src/components/comments/CommentItem.vue   |  54 ++-
 .../components/comments/CommentSection.vue    |  24 +-
 .../src/components/comments/EmojiPicker.vue   |  67 ++++
 frontend/src/components/comments/emoji.js     |  58 ++++
 frontend/src/customJs.js                      |  43 +++
 frontend/src/main.ts                          |   3 +
 frontend/src/mocks/comments.js                |   7 +
 frontend/src/site.js                          |   5 +
 frontend/src/socialIcons.js                   |  20 ++
 frontend/src/styles.css                       |  54 ++-
 frontend/src/ui/yohaku/YohakuHome.vue         |   3 +
 frontend/src/ui/yohaku/YohakuTop.vue          |  81 +++--
 frontend/src/ui/yohaku/chrome.css             | 124 +++++--
 frontend/src/ui/yohaku/comments.css           |   7 +
 frontend/src/utils.js                         |  21 ++
 frontend/src/views/HomeView.vue               |  31 +-
 23 files changed, 1381 insertions(+), 129 deletions(-)
 create mode 100644 frontend/src/components/NavBurger.vue
 create mode 100644 frontend/src/components/QuickShort.vue
 create mode 100644 frontend/src/components/comments/EmojiPicker.vue
 create mode 100644 frontend/src/components/comments/emoji.js
 create mode 100644 frontend/src/customJs.js
 create mode 100644 frontend/src/socialIcons.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 79eb0a0..234bb17 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -35,6 +35,7 @@ watch(
   <TopBar v-else-if="!isAdmin" />
   <RouterView />
   <YohakuFoot v-if="isVivid" />
+  <!-- classic 的页脚信息在 RightRail 卡片下方的小字区（Twitter 式侧栏页脚） -->
   <!-- 桌面端：左栏底部放 inline 形态；窄屏：左栏收起，浮动按钮兜底。
        vivid 的顶部导航自带切换器，浮动那个就不重复出现了。 -->
   <ThemeSwitcher v-if="!isVivid" variant="floating" class="theme-floating-only" />
diff --git a/frontend/src/admin/SettingsView.vue b/frontend/src/admin/SettingsView.vue
index 840bbc2..26d1555 100644
--- a/frontend/src/admin/SettingsView.vue
+++ b/frontend/src/admin/SettingsView.vue
@@ -11,6 +11,30 @@ const error = ref('')
 const saving = ref(false)
 const savedAt = ref('')
 
+// ---------- 社交链接（settings.social_links <-> 多行文本） ----------
+// 文本框里每行一条「名称 | 链接」；数组存后端，文本框给人编辑。
+const socialText = ref('')
+
+function socialToText(ls) {
+  return (Array.isArray(ls) ? ls : [])
+    .filter((l) => l && l.label && l.url)
+    .map((l) => `${l.label} | ${l.url}`)
+    .join('\n')
+}
+
+function textToSocial(text) {
+  return String(text || '')
+    .split('\n')
+    .map((line) => {
+      const i = line.indexOf('|')
+      if (i < 0) return null
+      const label = line.slice(0, i).trim()
+      const url = line.slice(i + 1).trim()
+      return label && url ? { label, url } : null
+    })
+    .filter(Boolean)
+}
+
 // 这里只能选亮色皮肤（paper / sage / rose）。暗色端固定 ink，由访客在前台
 // 右下角 ThemeSwitcher 切到「深色」或「自动 + 系统暗」时启用。
 const lightSkins = [
@@ -122,6 +146,7 @@ async function load() {
     if (!UI_CONSTANTS.UIS.includes(settings.value.ui_id)) {
       settings.value.ui_id = UI_CONSTANTS.DEFAULT
     }
+    socialText.value = socialToText(settings.value.social_links)
     // 服务端保证非 null，这里再兜一层，并预建分区键，
     // 这样 v-model 绑定的文本框一开始就有值可写。
     if (!settings.value.custom_css || typeof settings.value.custom_css !== 'object') {
@@ -145,8 +170,10 @@ async function save() {
   saving.value = true
   error.value = ''
   try {
+    settings.value.social_links = textToSocial(socialText.value)
     const s = await adminApi.saveSettings(settings.value)
     settings.value = s
+    socialText.value = socialToText(s.social_links)
     // 保存后服务端会丢掉空的/超长的分区，重新补齐本地键，免得输入框失焦
     if (!settings.value.custom_css || typeof settings.value.custom_css !== 'object') {
       settings.value.custom_css = {}
@@ -355,6 +382,34 @@ async function save() {
             <label>ICP 备案号</label>
             <input v-model="settings.icp" class="input" spellcheck="false" placeholder="如 京 ICP 备 12345678 号" />
           </div>
+          <div class="field">
+            <label>社交链接（每行一条：名称 | 链接）</label>
+            <textarea
+              v-model="socialText"
+              class="input"
+              rows="4"
+              spellcheck="false"
+              placeholder="GitHub | https://github.com/yourname&#10;邮箱 | mailto:you@example.com"
+            ></textarea>
+            <p class="field-hint">
+              显示在经典版左栏「社交账号」和右栏页脚小字区。链接按域名自动配图标
+              （GitHub / Telegram / X / 邮箱等），没有图标的显示名称文字。
+            </p>
+          </div>
+          <div class="field">
+            <label>自定义 JS 代码（统计脚本等）</label>
+            <textarea
+              v-model="settings.custom_js"
+              class="input"
+              rows="6"
+              spellcheck="false"
+              placeholder="<script async src=&quot;https://www.googletagmanager.com/gtag/js?id=G-XXXX&quot;></script>&#10;<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments)} gtag('js', new Date()); gtag('config', 'G-XXXX');<\/script>"
+            ></textarea>
+            <p class="field-hint">
+              贴完整的 &lt;script&gt; 片段（Google Analytics / Plausible / Umami 等），
+              会在前台每个页面的 &lt;head&gt; 里执行，后台不注入。保存后刷新前台生效。
+            </p>
+          </div>
         </div>
 
         <div style="display: flex; align-items: center; gap: 12px; margin-top: 14px;">
@@ -433,4 +488,11 @@ async function save() {
   font-size: 12px;
   color: var(--admin-muted);
 }
+
+.field-hint {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--admin-muted);
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/LeftNav.vue b/frontend/src/components/LeftNav.vue
index 0480320..37a8975 100644
--- a/frontend/src/components/LeftNav.vue
+++ b/frontend/src/components/LeftNav.vue
@@ -1,24 +1,14 @@
 <script setup>
+import { computed } from 'vue'
 import { site } from '../site'
-import { publicApi } from '../api'
-import { computed, onMounted, ref } from 'vue'
+import { socialIcon } from '../socialIcons'
 import ThemeSwitcher from './ThemeSwitcher.vue'
 
-// vivid 用顶部导航（VividNav）代替左栏。这里直接不渲染，顺带省掉一次
-// 标签请求 —— 视图本身不用知道 UI 版本。
+// vivid 用顶部导航（VividNav）代替左栏。这里直接不渲染。
 const isVivid = computed(() => site.ui_id === 'vivid')
 
-const tags = ref([])
-
-onMounted(async () => {
-  if (isVivid.value) return
-  try {
-    const data = await publicApi.tags()
-    tags.value = (data.tags || []).slice(0, 8)
-  } catch (e) {
-    tags.value = []
-  }
-})
+// 社交 / 源码链接（后台「高级 → 社交链接」填写）；url 必填，空的丢弃
+const social = computed(() => (site.social_links || []).filter((s) => s && s.url))
 </script>
 
 <template>
@@ -48,12 +38,23 @@ onMounted(async () => {
         </RouterLink>
       </nav>
 
-      <div v-if="tags.length" class="tagbox">
-        <p class="eyebrow">常读标签</p>
-        <div class="tags">
-          <RouterLink v-for="t in tags" :key="t.id" :to="`/tag/${t.slug}`" class="tag-chip">
-            {{ t.name }}
-          </RouterLink>
+      <!-- 社交账号（后台「高级 → 社交链接」填写）：已知域名给图标，认不出显示名称 -->
+      <div v-if="social.length" class="social-box">
+        <p class="eyebrow">社交账号</p>
+        <div class="social-row">
+          <a
+            v-for="s in social"
+            :key="s.label + s.url"
+            class="social-link"
+            :href="s.url"
+            :title="s.label"
+            :aria-label="s.label"
+            :target="s.url.startsWith('http') ? '_blank' : undefined"
+            :rel="s.url.startsWith('http') ? 'noopener' : undefined"
+          >
+            <svg v-if="socialIcon(s.url)" viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(s.url)" /></svg>
+            <span v-else>{{ s.label }}</span>
+          </a>
         </div>
       </div>
 
@@ -142,18 +143,45 @@ onMounted(async () => {
   color: var(--accent);
 }
 
-.tagbox {
+.social-box {
   border-top: 1px solid var(--line);
   padding-top: 14px;
 }
 
-.tags {
+.social-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 4px;
   margin-top: 8px;
 }
 
+.social-link {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 30px;
+  border-radius: 6px;
+  color: var(--muted);
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.social-link:hover {
+  color: var(--accent);
+  background: var(--paper-sunken);
+}
+
+/* 认不出的域名没有图标，回落成名称文字 */
+.social-link span {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.social-link svg {
+  width: 17px;
+  height: 17px;
+  fill: currentColor;
+}
+
 .theme-box {
   border-top: 1px solid var(--line);
   padding-top: 14px;
diff --git a/frontend/src/components/NavBurger.vue b/frontend/src/components/NavBurger.vue
new file mode 100644
index 0000000..56d3005
--- /dev/null
+++ b/frontend/src/components/NavBurger.vue
@@ -0,0 +1,73 @@
+<script setup>
+// 两套 UI 共用的菜单开合钮：两条横线，open 时并成 ✕。颜色走 token
+// （--ink-soft / --accent 在 classic 和 vivid 里都有定义），尺寸 40px、
+// 触屏 44px。菜单开合的其余行为（锁滚动、Esc、路由收起）归各个顶栏管。
+defineProps({
+  open: { type: Boolean, default: false }
+})
+defineEmits(['toggle'])
+</script>
+
+<template>
+  <button
+    class="nav-burger"
+    type="button"
+    :class="{ open }"
+    :aria-expanded="open"
+    @click="$emit('toggle')"
+  >
+    <i /><i />
+  </button>
+</template>
+
+<style scoped>
+.nav-burger {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.nav-burger i {
+  display: block;
+  width: 17px;
+  height: 1.6px;
+  margin: 0 auto;
+  border-radius: 2px;
+  background: var(--ink-soft);
+  transition: transform 0.3s var(--ease, ease), background-color 0.2s;
+}
+
+.nav-burger:hover i {
+  background: var(--accent);
+}
+
+/* 两条线向中间并拢旋转成 ✕：位移 = (线高 + gap) / 2 */
+.nav-burger.open i:nth-child(1) {
+  transform: translateY(3.3px) rotate(45deg);
+}
+.nav-burger.open i:nth-child(2) {
+  transform: translateY(-3.3px) rotate(-45deg);
+}
+
+@media (pointer: coarse) {
+  .nav-burger {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-burger i {
+    transition: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/QuickShort.vue b/frontend/src/components/QuickShort.vue
new file mode 100644
index 0000000..cef938d
--- /dev/null
+++ b/frontend/src/components/QuickShort.vue
@@ -0,0 +1,319 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { adminApi } from '../api'
+
+// Twitter 式短文发布盒，挂在时间线顶部。
+//
+// 只有管理员会话在场才渲染（adminApi.me 探测）：发布走真实的
+// adminApi.createPost（kind: short —— 后端自动生成标题 / slug / 阅读时长）。
+// 读者侧的社交登录是评论区阶段二的产物，后端就绪前访客本来就无法
+// 「登录」，所以这里天然只有站主能看到；以后要放开给读者发，把探测和
+// 发布接口换成读者体系的即可，UI 不用动。
+//
+// 桌面（>640px）：内联在时间线顶部；手机：右下角 FAB，点开底部上拉 sheet。
+// 两份 textarea 共享同一个 draft（v-model 同源），媒体查询切换可见性。
+// 发布后 emit('published')，由宿主刷新时间线。
+
+const emit = defineEmits(['published'])
+
+const shown = ref(false)
+const userName = ref('')
+const draft = ref('')
+const publishing = ref(false)
+const error = ref('')
+const sheetOpen = ref(false)
+
+const initial = computed(() => (userName.value || 'O').trim().slice(0, 1).toUpperCase())
+const canPost = computed(() => draft.value.trim().length > 0 && !publishing.value)
+
+onMounted(async () => {
+  try {
+    const d = await adminApi.me()
+    if (d.user) {
+      userName.value = String(d.user)
+      shown.value = true
+    }
+  } catch {
+    shown.value = false
+  }
+})
+
+// 系统会话过期（发布 401）时提示重新登录
+const expired = ref(false)
+
+function onKey(e) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') publish()
+}
+
+async function publish() {
+  if (!canPost.value) return
+  publishing.value = true
+  error.value = ''
+  try {
+    await adminApi.createPost({
+      kind: 'short',
+      content_md: draft.value.trim(),
+      status: 'published'
+    })
+    draft.value = ''
+    sheetOpen.value = false
+    emit('published')
+  } catch (e) {
+    if (String(e.message).includes('401') || String(e.message).includes('Unauthorized')) {
+      expired.value = true
+      error.value = '登录已过期，刷新页面重新登录后再发。'
+    } else {
+      error.value = e.message || '发布失败'
+    }
+  } finally {
+    publishing.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="shown" class="qs-root">
+    <!-- 桌面：内联 -->
+    <div class="qs-inline">
+      <div class="qs-card">
+        <span class="qs-av">{{ initial }}</span>
+        <div class="qs-body">
+          <textarea v-model="draft" class="qs-input" rows="2" placeholder="记点短的…" @keydown="onKey" />
+          <div class="qs-acts">
+            <span v-if="error" class="qs-err">{{ error }}</span>
+            <span v-else class="qs-tip">Ctrl / ⌘ + Enter 发布</span>
+            <button type="button" class="qs-send" :disabled="!canPost" @click="publish">
+              {{ publishing ? '发布中…' : '发布' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 手机：FAB + 上拉 sheet -->
+    <button type="button" class="qs-fab" aria-label="写短文" @click="sheetOpen = true">＋</button>
+
+    <Transition name="qs-sheet">
+      <div v-if="sheetOpen" class="qs-overlay">
+        <div class="qs-scrim" @click="sheetOpen = false" />
+        <div class="qs-sheet">
+          <div class="qs-sheet-head">
+            <span>写短文</span>
+            <button type="button" class="qs-close" aria-label="关闭" @click="sheetOpen = false">✕</button>
+          </div>
+          <textarea v-model="draft" class="qs-input" rows="4" placeholder="记点短的…" @keydown="onKey" />
+          <div class="qs-acts">
+            <span v-if="error" class="qs-err">{{ error }}</span>
+            <span v-else class="qs-tip">Ctrl / ⌘ + Enter 发布</span>
+            <button type="button" class="qs-send" :disabled="!canPost" @click="publish">
+              {{ publishing ? '发布中…' : '发布' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.qs-inline {
+  margin: 0 0 10px;
+}
+
+.qs-card {
+  display: flex;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--card);
+}
+
+.qs-av {
+  flex: none;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent);
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.qs-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.qs-input {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: none;
+  resize: vertical;
+  font: inherit;
+  font-size: 14.5px;
+  line-height: 1.7;
+  color: var(--ink);
+  min-height: 44px;
+  padding: 4px 0;
+}
+
+.qs-input:focus {
+  outline: none;
+}
+
+.qs-acts {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.qs-tip {
+  font-size: 12px;
+  color: var(--faint);
+  margin-right: auto;
+}
+
+.qs-err {
+  font-size: 12.5px;
+  color: #a64953;
+  margin-right: auto;
+}
+
+.qs-send {
+  flex: none;
+  padding: 6px 18px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.qs-send:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* 手机：FAB 常驻右下，点开上拉 sheet */
+.qs-fab {
+  display: none;
+  position: fixed;
+  right: 16px;
+  bottom: 72px;
+  z-index: 80;
+  width: 52px;
+  height: 52px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  font-size: 24px;
+  line-height: 1;
+  box-shadow: 0 10px 30px -8px rgba(28, 28, 30, 0.45);
+  cursor: pointer;
+}
+
+.qs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+}
+
+.qs-scrim {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, #000 32%, transparent);
+}
+
+.qs-sheet {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: max(10px, env(safe-area-inset-bottom));
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: var(--card);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.qs-sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--ink);
+}
+
+.qs-close {
+  border: 0;
+  background: none;
+  color: var(--muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px 6px;
+}
+
+@media (max-width: 640px) {
+  .qs-inline {
+    display: none;
+  }
+
+  .qs-fab {
+    display: grid;
+    place-items: center;
+  }
+}
+
+@media (min-width: 641px) {
+  .qs-overlay {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qs-sheet-enter-active,
+  .qs-sheet-leave-active {
+    transition: none;
+  }
+}
+</style>
+
+<style scoped>
+/* sheet 过渡（进：从底部长出来；出：沉回去） */
+.qs-sheet-enter-active {
+  transition: opacity 0.25s ease;
+}
+.qs-sheet-enter-active .qs-sheet {
+  transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.3s ease;
+}
+.qs-sheet-enter-from {
+  opacity: 0;
+}
+.qs-sheet-enter-from .qs-sheet {
+  transform: translateY(48px);
+  opacity: 0;
+}
+.qs-sheet-leave-active {
+  transition: opacity 0.18s ease;
+}
+.qs-sheet-leave-active .qs-sheet {
+  transition: transform 0.18s ease;
+}
+.qs-sheet-leave-to {
+  opacity: 0;
+}
+.qs-sheet-leave-to .qs-sheet {
+  transform: translateY(40px);
+}
+</style>
diff --git a/frontend/src/components/RightRail.vue b/frontend/src/components/RightRail.vue
index a74b9c6..fc8fb52 100644
--- a/frontend/src/components/RightRail.vue
+++ b/frontend/src/components/RightRail.vue
@@ -2,11 +2,28 @@
 import { computed, onMounted, ref } from 'vue'
 import { publicApi } from '../api'
 import { site } from '../site'
+import { socialIcon } from '../socialIcons'
 import { relativeDate } from '../utils'
 
 // vivid 是单栏布局，右栏整体不渲染（省掉 latest/tags 两次请求）。
 const isVivid = computed(() => site.ui_id === 'vivid')
 
+// 项目源码仓库是固定入口（本站 git remote），不来自后台配置 —— 和版权一样
+// 固定渲染在自己的那排；后台填的社交账号单独一排，URL 撞车的去重。
+const PROJECT_REPO = 'https://git.gopher.ink/mirrors2/ONE'
+
+// 社交 / 源码链接（后台「高级 → 社交链接」填写）；url 必填，空的丢弃。
+// 有图标的（按域名推导）渲染成单色图标，认不出的显示名称文字。
+const social = computed(() => (site.social_links || []).filter((s) => s && s.url && s.url !== PROJECT_REPO))
+
+const links = [
+  { to: '/', label: '首页' },
+  { to: '/archive', label: '归档' },
+  { to: '/tags', label: '标签' },
+  { to: '/projects', label: '作品' },
+  { to: '/about', label: '关于' }
+]
+
 const latest = ref([])
 const tags = ref([])
 
@@ -55,11 +72,46 @@ onMounted(async () => {
       </div>
     </section>
 
-    <section class="card">
-      <p class="eyebrow">订阅</p>
-      <p class="bio">用 RSS 阅读器跟进更新。</p>
-      <a class="pill pill-ghost" href="/rss.xml">RSS / feed.xml</a>
-    </section>
+    <!-- 订阅卡删掉了：RSS 入口在下方页脚小字里，一张卡片只为一个链接不值得 -->
+
+    <!-- 页脚信息（Twitter 式：右栏卡片下方的小字区）。通栏 ClassicFoot
+         已删：右栏在窄屏会堆到信息流下方，卡片之后正好接页脚小字，
+         所有宽度都不缺位。 -->
+    <footer class="rail-foot">
+      <nav class="foot-links" aria-label="页脚导航">
+        <template v-for="(l, i) in links" :key="l.to">
+          <span v-if="i" class="dot">·</span>
+          <RouterLink :to="l.to">{{ l.label }}</RouterLink>
+        </template>
+        <span class="dot">·</span>
+        <a href="/rss.xml">RSS</a>
+      </nav>
+      <!-- 后台填的社交账号：单独一排 -->
+      <div v-if="social.length" class="social-row">
+        <a
+          v-for="s in social"
+          :key="s.label + s.url"
+          class="social-icon"
+          :href="s.url"
+          :title="s.label"
+          :aria-label="s.label"
+          :target="s.url.startsWith('http') ? '_blank' : undefined"
+          :rel="s.url.startsWith('http') ? 'noopener' : undefined"
+        >
+          <svg v-if="socialIcon(s.url)" viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(s.url)" /></svg>
+          <span v-else>{{ s.label }}</span>
+        </a>
+      </div>
+      <!-- 项目信息：固定的源码图标 + 版权，永远在 -->
+      <div class="foot-meta">
+        <a class="social-icon" :href="PROJECT_REPO" title="项目源码" aria-label="项目源码" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(PROJECT_REPO)" /></svg>
+        </a>
+        <span class="copyright">
+          {{ site.footer_note }}<template v-if="site.icp"> · {{ site.icp }}</template>
+        </span>
+      </div>
+    </footer>
   </aside>
 </template>
 
@@ -142,4 +194,78 @@ onMounted(async () => {
   color: var(--faint);
   font-size: 11px;
 }
+
+/* 页脚小字区：无卡片边框，Twitter 式侧栏页脚。classic 的页脚信息只在这里
+   出现（通栏 ClassicFoot 已删）：右栏在窄屏会堆到信息流下方，卡片之后
+   正好接页脚小字，所有宽度都不缺位。 */
+.rail-foot {
+  padding: 4px 6px 0;
+  font-size: 12px;
+  line-height: 1.9;
+  color: var(--faint);
+}
+
+.foot-links a {
+  color: var(--faint);
+  transition: color 0.15s;
+}
+
+.foot-links a:hover {
+  color: var(--accent);
+}
+
+.dot {
+  margin: 0 4px;
+  opacity: 0.6;
+}
+
+/* 图标 + 版权同排：源码等入口是单色小图标，hover 才亮成强调色 */
+.social-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.foot-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* 项目信息行和上面的社交账号排拉开一截：它们是两类信息 */
+  margin-top: 16px;
+}
+
+.social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 3px;
+  border-radius: 6px;
+  color: var(--faint);
+  font-size: 12px;
+  transition: color 0.15s;
+}
+
+.social-icon:hover {
+  color: var(--accent);
+}
+
+.social-icon svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.copyright {
+  color: var(--faint);
+}
+
+/* 窄屏：底部留白加高，右下角浮动主题钮压不到页脚小字 */
+@media (max-width: 780px) {
+  .rail-right {
+    padding-bottom: 96px;
+  }
+}
 </style>
diff --git a/frontend/src/components/TopBar.vue b/frontend/src/components/TopBar.vue
index 108b7e2..211350d 100644
--- a/frontend/src/components/TopBar.vue
+++ b/frontend/src/components/TopBar.vue
@@ -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>
diff --git a/frontend/src/components/comments/CommentItem.vue b/frontend/src/components/comments/CommentItem.vue
index 27607a1..3bb4094 100644
--- a/frontend/src/components/comments/CommentItem.vue
+++ b/frontend/src/components/comments/CommentItem.vue
@@ -1,7 +1,9 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { reader } from '../../reader'
+import { insertAtCursor, placeCursor } from '../../utils'
 import CommentMarkdown from './CommentMarkdown.vue'
+import EmojiPicker from './EmojiPicker.vue'
 import { BRANDS, PROVIDER_LABEL } from './brands'
 import { relativeDate } from '../../utils'
 
@@ -52,6 +54,27 @@ const editing = computed(() => s.editing && s.editing.id === props.c.id)
 const replyDraft = ref('')
 const editDraft = ref('')
 
+// 表情 / 颜文字：回复框和编辑框各挂一个面板，插入到各自的光标处
+const replyEl = ref(null)
+const editEl = ref(null)
+const replyEmoji = ref(false)
+const editEmoji = ref(false)
+function pickReply(text) {
+  const r = insertAtCursor(replyEl.value, replyDraft.value, text)
+  replyDraft.value = r.value
+  nextTick(() => placeCursor(replyEl.value, r.pos))
+}
+function pickEdit(text) {
+  const r = insertAtCursor(editEl.value, editDraft.value, text)
+  editDraft.value = r.value
+  nextTick(() => placeCursor(editEl.value, r.pos))
+}
+function onCancel() {
+  replyEmoji.value = false
+  editEmoji.value = false
+  props.api.cancel()
+}
+
 function startReply() {
   replyDraft.value = ''
   props.api.startReply(props.c)
@@ -66,13 +89,15 @@ async function onReply() {
   const ok = await props.api.submit(text, props.c)
   if (ok) {
     replyDraft.value = ''
+    replyEmoji.value = false
     props.api.cancel()
   }
 }
 async function onSave() {
   const text = editDraft.value.trim()
   if (!text) return
-  await props.api.saveEdit(props.c, text)
+  const ok = await props.api.saveEdit(props.c, text)
+  if (ok) editEmoji.value = false
 }
 async function onRemove() {
   if (!window.confirm('删掉这条评论？')) return
@@ -132,16 +157,25 @@ function replyNameOf(r) {
 
       <!-- 编辑态：把正文换成输入框 -->
       <div v-if="editing" class="cm-field cm-field-inline">
-        <textarea v-model="editDraft" class="cm-input" rows="3" :maxlength="maxLen"
+        <textarea ref="editEl" v-model="editDraft" class="cm-input" rows="3" :maxlength="maxLen"
           placeholder="编辑这条评论…" aria-label="编辑评论" />
         <div class="cm-bar">
           <span class="cm-bar-l" />
           <span class="cm-bar-r">
-            <button type="button" class="cm-link" @click="api.cancel">取消</button>
+            <button
+              type="button"
+              class="cm-emoji-btn"
+              :class="{ on: editEmoji }"
+              aria-label="插入表情"
+              title="表情"
+              @click="editEmoji = !editEmoji"
+            >😊</button>
+            <button type="button" class="cm-link" @click="onCancel">取消</button>
             <button type="button" class="cm-send" :disabled="!editDraft.trim() || s.submitting" @click="onSave">
               {{ s.submitting ? '保存中…' : '保存' }}
             </button>
           </span>
+          <EmojiPicker v-if="editEmoji" @pick="pickEdit" @close="editEmoji = false" />
         </div>
       </div>
 
@@ -164,6 +198,7 @@ function replyNameOf(r) {
       <!-- 回复框 -->
       <div v-if="replying" class="cm-field cm-field-inline">
         <textarea
+          ref="replyEl"
           v-model="replyDraft"
           class="cm-input"
           rows="3"
@@ -174,11 +209,20 @@ function replyNameOf(r) {
         <div class="cm-bar">
           <span class="cm-bar-l">回应 <b>{{ name }}</b></span>
           <span class="cm-bar-r">
-            <button type="button" class="cm-link" @click="api.cancel">取消</button>
+            <button
+              type="button"
+              class="cm-emoji-btn"
+              :class="{ on: replyEmoji }"
+              aria-label="插入表情"
+              title="表情"
+              @click="replyEmoji = !replyEmoji"
+            >😊</button>
+            <button type="button" class="cm-link" @click="onCancel">取消</button>
             <button type="button" class="cm-send" :disabled="!replyDraft.trim() || s.submitting" @click="onReply">
               {{ s.submitting ? '发送中…' : '发送' }}
             </button>
           </span>
+          <EmojiPicker v-if="replyEmoji" @pick="pickReply" @close="replyEmoji = false" />
         </div>
       </div>
 
diff --git a/frontend/src/components/comments/CommentSection.vue b/frontend/src/components/comments/CommentSection.vue
index 6a2f105..af70db6 100644
--- a/frontend/src/components/comments/CommentSection.vue
+++ b/frontend/src/components/comments/CommentSection.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { site } from '../../site'
 import { reader, loadReader, signIn, signOut } from '../../reader'
 import { readerApi } from '../../api'
 import { useComments } from '../../composables/useComments'
+import { insertAtCursor, placeCursor } from '../../utils'
 import CommentItem from './CommentItem.vue'
+import EmojiPicker from './EmojiPicker.vue'
 import { BRANDS } from './brands'
 
 // 文章评论区。classic 和 vivid 共用这一份 DOM —— 两边只是 CSS 不同
@@ -35,11 +37,21 @@ const MAX_LEN = 500
 const draft = ref('')
 const canSend = computed(() => draft.value.trim().length > 0 && !s.submitting && draft.value.length <= MAX_LEN)
 
+// 表情 / 颜文字：面板挂在工具条上方，插入到光标处
+const draftEl = ref(null)
+const emojiOpen = ref(false)
+function pickEmoji(text) {
+  const r = insertAtCursor(draftEl.value, draft.value, text)
+  draft.value = r.value
+  nextTick(() => placeCursor(draftEl.value, r.pos))
+}
+
 async function onSend() {
   if (!canSend.value) return
   const ok = await submit(draft.value.trim(), s.replyTo)
   if (ok) {
     draft.value = ''
+    emojiOpen.value = false
     cancel()
   }
 }
@@ -136,6 +148,7 @@ onMounted(() => {
       </div>
       <div class="cm-field">
         <textarea
+          ref="draftEl"
           v-model="draft"
           class="cm-input"
           rows="3"
@@ -149,11 +162,20 @@ onMounted(() => {
             <button type="button" class="cm-link" @click="signOut">退出</button>
           </span>
           <span class="cm-bar-r">
+            <button
+              type="button"
+              class="cm-emoji-btn"
+              :class="{ on: emojiOpen }"
+              aria-label="插入表情"
+              title="表情"
+              @click="emojiOpen = !emojiOpen"
+            >😊</button>
             <span class="cm-len" :class="{ over: draft.length > MAX_LEN }">{{ draft.length }}/{{ MAX_LEN }}</span>
             <button type="button" class="cm-send" :disabled="!canSend" @click="onSend">
               {{ s.submitting ? '发送中…' : '发送' }}
             </button>
           </span>
+          <EmojiPicker v-if="emojiOpen" @pick="pickEmoji" @close="emojiOpen = false" />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/comments/EmojiPicker.vue b/frontend/src/components/comments/EmojiPicker.vue
new file mode 100644
index 0000000..d287876
--- /dev/null
+++ b/frontend/src/components/comments/EmojiPicker.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { EMOJI_GROUPS, KAOMOJI } from './emoji'
+
+// 表情 / 颜文字选择面板。挂在输入区工具条上（宿主的 .cm-bar 要 position:relative），
+// 面板绝对定位在条上方盖住输入框。点选只往上抛 pick，插到光标还是追加由宿主定；
+// 自己负责点外面 / Esc 收起。工具条按钮本身不在面板里，outside 判定要放过它，
+// 否则「点按钮收起」会变成 pointerdown 先收、click 再开，永远关不上。
+const emit = defineEmits(['pick', 'close'])
+
+const tab = ref('emoji')
+const el = ref(null)
+
+function onDocDown(e) {
+  if (el.value && !el.value.contains(e.target) && !e.target.closest?.('.cm-emoji-btn')) {
+    emit('close')
+  }
+}
+function onKey(e) {
+  if (e.key === 'Escape') emit('close')
+}
+onMounted(() => {
+  // 默认朝上弹；工具条离视口顶太近放不下时翻到下方（手机键盘压小视口时常见）
+  const space = el.value.parentElement.getBoundingClientRect().top
+  if (space < el.value.offsetHeight + 16) el.value.classList.add('is-below')
+  document.addEventListener('pointerdown', onDocDown, true)
+  document.addEventListener('keydown', onKey)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocDown, true)
+  document.removeEventListener('keydown', onKey)
+})
+</script>
+
+<template>
+  <div ref="el" class="cm-emoji" role="group" aria-label="插入表情或颜文字">
+    <div class="cm-emoji-tabs" role="tablist" aria-label="表情类型">
+      <button type="button" role="tab" :aria-selected="tab === 'emoji'" :class="{ on: tab === 'emoji' }" @click="tab = 'emoji'">表情</button>
+      <button type="button" role="tab" :aria-selected="tab === 'kaomoji'" :class="{ on: tab === 'kaomoji' }" @click="tab = 'kaomoji'">颜文字</button>
+    </div>
+
+    <div v-if="tab === 'emoji'" class="cm-emoji-grid">
+      <template v-for="g in EMOJI_GROUPS" :key="g.label">
+        <span class="cm-emoji-cat">{{ g.label }}</span>
+        <button
+          v-for="e in g.items"
+          :key="e"
+          type="button"
+          class="cm-emoji-item"
+          :aria-label="`插入 ${e}`"
+          @click="emit('pick', e)"
+        >{{ e }}</button>
+      </template>
+    </div>
+
+    <div v-else class="cm-emoji-list">
+      <button
+        v-for="k in KAOMOJI"
+        :key="k"
+        type="button"
+        class="cm-emoji-item cm-kao"
+        :aria-label="`插入 ${k}`"
+        @click="emit('pick', k)"
+      >{{ k }}</button>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/comments/emoji.js b/frontend/src/components/comments/emoji.js
new file mode 100644
index 0000000..bcbc848
--- /dev/null
+++ b/frontend/src/components/comments/emoji.js
@@ -0,0 +1,58 @@
+// 评论表情选择的数据（仅前端用，后端只存 Markdown 文本，emoji 就是普通字符）。
+// emoji 手挑常用的一百来个，分组只是为了在面板里好找；颜文字选能打的经典款。
+// 刻意不引第三方 emoji 库：面板是静态数据 + 两列 tab，一个依赖都不值得加。
+
+export const EMOJI_GROUPS = [
+  {
+    label: '笑脸',
+    items: [
+      '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
+      '😊', '😇', '🙂', '😉', '😍', '🥰', '😘', '😗',
+      '😙', '😚', '😋', '😜', '🤪', '🤨', '🧐', '🤓'
+    ]
+  },
+  {
+    label: '心情',
+    items: [
+      '😎', '🥳', '😏', '😒', '😞', '😔', '😟', '😕',
+      '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢',
+      '😭', '😤', '😠', '😡', '🤬', '😱', '😨', '😰'
+    ]
+  },
+  {
+    label: '状态',
+    items: [
+      '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬',
+      '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴',
+      '🤤', '😪', '😵', '🤐', '🤢', '🤮', '🤧', '🤒'
+    ]
+  },
+  {
+    label: '手势',
+    items: [
+      '👍', '👎', '👊', '✊', '🤛', '🤜', '✌️', '🤞',
+      '🤟', '🤘', '🤙', '👌', '🤌', '👈', '👉', '👆',
+      '👇', '☝️', '✋', '🤚', '🖐️', '🖖', '👋', '🤝'
+    ]
+  },
+  {
+    label: '其他',
+    items: [
+      '🙏', '💪', '👀', '🧠', '❤️', '🧡', '💛', '💚',
+      '💙', '💜', '🖤', '🤍', '💯', '💢', '💥', '💫',
+      '💦', '💨', '🎉', '🎊', '🎁', '🌸', '🌙', '⭐',
+      '✨', '🔥', '💡', '📚', '✏️', '🎮', '🎵', '🚀'
+    ]
+  }
+]
+
+// 颜文字一行一个；反斜杠记得转义
+export const KAOMOJI = [
+  '(｡◕‿◕｡)', 'ヾ(≧▽≦*)o', '(＾▽＾)', '(￣▽￣)', '(*^▽^*)', 'o(≧∇≦)o',
+  '٩(๑❛ᴗ❛๑)۶', '✧(≖ ◡ ≖✿)', '(๑•̀ㅂ•́)و✧', '( •̀ᴗ•́ )و ̑̑', '( ¬‿¬)', '( ˘▽˘ )っ♨',
+  '(´,,•ω•,,)♡', '(｡•́‿•̀｡)', '(๑•́ ₃ •̀๑)', '♡(˃͈ દ ˂͈ ༶ )', '(´･ω･`)', '(・ω・)',
+  '¯\\_(ツ)_/¯', '┐(´д`)┌', '╮(╯▽╰)╭', '(￣_￣|||)', 'o_O', '( ^_^ )',
+  '(╥﹏╥)', '(ㄒoㄒ)', 'ಥ_ಥ', '(ToT)', 'QAQ', 'T_T',
+  '(╯°□°）╯︵ ┻━┻', '(╬ Ò﹏Ó)', '┬─┬ ノ( ゜-゜ノ)', 'orz', '_(:з」∠)_', 'ᕕ( ᐛ )ᕗ',
+  '(っ˘̩╭╮˘̩)っ', '(ง •_•)ง'
+]
diff --git a/frontend/src/customJs.js b/frontend/src/customJs.js
new file mode 100644
index 0000000..3b84ea9
--- /dev/null
+++ b/frontend/src/customJs.js
@@ -0,0 +1,43 @@
+import { site } from './site'
+
+// 站主自定义 JS 的注入管线（Google Analytics / Plausible / Umami 这类统计脚本）。
+//
+// 后台贴的是完整的 <script> 片段（外链 + 内联都可能，GA4 就是两个一起）。
+// 用 DOMParser 解析后逐个「重建」成新的 script 节点再插进 head —— 直接
+// innerHTML 塞进去的 script 标签不会执行，必须重建才会跑。
+//
+// 只在公开页面注入一次，/admin 不注入（后台流量不该进统计）。
+// 已经执行过的脚本是收不回来的：从公开页跳进后台时它们继续跑，这是
+// 注入式统计的天然限制，不做额外处理。
+//
+// 安全：站主 = 管理员 = 能改源码的人，custom_js 就是他们自己的代码，
+// 和 custom_css 同一信任级别，不做任何清洗（洗 JS 只会把统计脚本洗坏）。
+
+let injected = false
+
+function injectOnce() {
+  if (injected) return
+  const code = (site.custom_js || '').trim()
+  if (!code) return
+  const doc = new DOMParser().parseFromString(code, 'text/html')
+  const scripts = doc.querySelectorAll('script')
+  for (const old of scripts) {
+    const el = document.createElement('script')
+    for (const attr of old.attributes) el.setAttribute(attr.name, attr.value)
+    el.textContent = old.textContent
+    document.head.appendChild(el)
+  }
+  if (scripts.length) injected = true
+}
+
+export function refreshCustomJs(route) {
+  const isAdmin = !!(route && route.path && route.path.startsWith('/admin'))
+  if (!isAdmin) injectOnce()
+}
+
+// 只挂 afterEach：首次导航完成也会触发它，所以公开页的首次加载就能注入。
+// 不在安装时直接注入 —— 那一刻路由还没解析完（currentRoute 是 "/"），
+// 直接打开 /admin 会被误判成公开页。
+export function installCustomJs(router) {
+  router.afterEach((to) => refreshCustomJs(to))
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 99e2b71..8b67861 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import { router } from './router'
 import { loadSite } from './site'
 import { installCustomCss } from './customCss'
+import { installCustomJs } from './customJs'
 import './styles.css'
 // vivid（余白）是第二套 UI，全部规则都以 html[data-ui="vivid"] 前缀收敛；
 // 必须排在 styles.css 之后，才能在同特指度时按源码顺序取胜。
@@ -21,6 +22,8 @@ import './ui/yohaku/mobile.css'
 
 loadSite().then(async () => {
   installCustomCss(router)
+  // 站主自定义 JS（统计脚本）：公开页注入一次，后台不注入
+  installCustomJs(router)
   // 评论区的 dev mock：只有 dev 且带 ?mock 时才会被下载。
   // import.meta.env.DEV 在 build 时被替换成 false，整个分支连同这个动态 chunk
   // 一起被 rollup 丢掉（产物里 grep __COMMENT_MOCK__ 应为空）。
diff --git a/frontend/src/mocks/comments.js b/frontend/src/mocks/comments.js
index 67f4619..8b5aca7 100644
--- a/frontend/src/mocks/comments.js
+++ b/frontend/src/mocks/comments.js
@@ -200,6 +200,13 @@ function mountSwitcher(current) {
       'font:12px/1.6 ui-sans-serif,system-ui;color:#111;background:rgba(255,255,255,.94);' +
       'border:1px solid #ddd;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.16)'
   )
+  // 窄屏上浮到 dock 之上：dock（底部居中悬浮胶囊）会跟右下角的浮层打架
+  const mqNarrow = window.matchMedia('(max-width: 720px)')
+  const lift = () => {
+    box.style.bottom = mqNarrow.matches ? '84px' : '12px'
+  }
+  mqNarrow.addEventListener('change', lift)
+  lift()
   const title = document.createElement('div')
   title.textContent = '评论 mock 状态'
   title.setAttribute('style', 'font-weight:700;margin-bottom:6px')
diff --git a/frontend/src/site.js b/frontend/src/site.js
index 669a5d5..e349f34 100644
--- a/frontend/src/site.js
+++ b/frontend/src/site.js
@@ -83,6 +83,9 @@ export const site = reactive({
   author_bio: '写点长的，也写点短的。',
   footer_note: '© ONE · 一个博客',
   icp: '',
+  // 社交 / 源码链接（后台「高级 → 社交链接」填写），[{ label, url }]，
+  // 图标由前端按 url 域名推导（socialIcons.js）
+  social_links: [],
   posts_per_page: 10,
   light_skin_id: 'paper',
   // theme_id 是老字段，保留读取兼容用；新代码不要再写。
@@ -91,6 +94,8 @@ export const site = reactive({
   ui_id: readUICache(),
   // 按分区存放的站主自定义 CSS（仅 vivid 生效，且不在 /admin 注入）
   custom_css: {},
+  // 站主自定义 JS（统计脚本等），公开页注入一次，/admin 不注入
+  custom_js: '',
   themeMode: readMode(),
   loaded: false
 })
diff --git a/frontend/src/socialIcons.js b/frontend/src/socialIcons.js
new file mode 100644
index 0000000..7177f0a
--- /dev/null
+++ b/frontend/src/socialIcons.js
@@ -0,0 +1,20 @@
+// 社交链接的图标映射。后台只填 label + url，图标由 url 域名 / 协议推导：
+// 已知域名给 Simple Icons 的单色 24×24 路径（currentColor 上色），
+// 认不出的给空串，调用方回落成文字（label）。
+import { BRANDS } from './components/comments/brands'
+
+// 邮箱信封（Material Icons email）与 X（Simple Icons），brands.js 还没有的两种
+const EMAIL =
+  'M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6l8 5 8-5v6zm0-8-8 5-8-5V6l8 5 8-5v2z'
+const X = 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'
+
+export function socialIcon(url) {
+  const u = (url || '').toLowerCase()
+  if (u.startsWith('mailto:')) return EMAIL
+  if (u.includes('github.com')) return BRANDS.github
+  if (u.includes('t.me') || u.includes('telegram')) return BRANDS.telegram
+  if (u.includes('x.com') || u.includes('twitter.com')) return X
+  // 自建 git 服务（git.gopher.ink 之类）也算 git 家族，套 octocat
+  if (u.includes('git')) return BRANDS.github
+  return ''
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3729949..b33c41a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -96,8 +96,10 @@ body {background: var(--paper);
   line-height: var(--lh);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  /* 移动端不留横向滚动 */
-  overflow-x: hidden;}
+  /* 移动端不留横向滚动。用 clip 不用 hidden：hidden 会把 body 变成滚动容器
+     （overflow-y 坍缩成 auto），页内所有 position:sticky 就此失明——
+     首页筛选条吸顶失效就是它干的。clip 只裁剪、不建滚动容器。 */
+  overflow-x: clip;}
 a {color: inherit;
   text-decoration: none;}
 @media (hover: hover) and (pointer: fine) {
@@ -134,6 +136,14 @@ h1, h2, h3, h4 {font-family: var(--serif);
      正文和评论共用同一条左缘（文章 .wrap 的侧边距在 PostView.vue 里归零） */
   .shell {padding: 0 12px;}
 }
+
+/* 顶栏实际高度（9+9 内边距 + 汉堡 40/44 + 1px 边框），首页 .sticky-head 的
+   吸顶偏移用它；TopBar 隐藏时把 html.topbar-hidden 翻上来，偏移归 0 跟着滑走 */
+:root {--topbar-h: 59px;}
+@media (pointer: coarse) {
+  :root {--topbar-h: 63px;}
+}
+html.topbar-hidden {--topbar-h: 0px;}
 .eyebrow {font-size: 12px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
@@ -1152,7 +1162,7 @@ a,
   transition: border-color .2s;}
 .cm-input:focus {outline: none;}
 .cm-field:focus-within .cm-input {border-bottom-color: var(--accent);}
-.cm-bar {display: flex;align-items: center;justify-content: space-between;gap: 10px;
+.cm-bar {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 10px;
   padding: 8px 0 0;font-size: 12.5px;color: var(--muted);}
 .cm-bar-l {display: flex;align-items: center;gap: 8px;min-width: 0;
   overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
@@ -1169,6 +1179,42 @@ a,
 .cm-send:disabled {opacity: .4;cursor: default;}
 .cm-err {margin: 14px 0 0;font-size: 13px;color: #a64953;}
 
+/* 表情 / 颜文字：触发钮在工具条上，面板从条上方弹出、盖住输入框。
+   右锚点 —— 工具条右缘离屏边最近，面板往左伸才不出屏（手机上也成立） */
+.cm-emoji-btn {display: grid;place-items: center;width: 30px;height: 30px;
+  border: 0;border-radius: 8px;background: none;font-size: 17px;line-height: 1;
+  cursor: pointer;opacity: .72;transition: opacity .2s,background-color .2s;}
+.cm-emoji-btn:hover, .cm-emoji-btn.on {opacity: 1;background: var(--accent-soft);}
+.cm-emoji {position: absolute;right: 0;bottom: calc(100% + 8px);z-index: 30;
+  width: min(320px, calc(100vw - 24px));
+  padding: 10px;border: 1px solid var(--line);border-radius: 12px;
+  background: var(--card);color: var(--ink);
+  box-shadow: 0 12px 40px -16px rgba(28, 28, 30, .3);
+  animation: cmEmojiIn .18s cubic-bezier(.22,.61,.36,1) both;}
+/* 上方放不下（打开时量过）翻到工具条下方 */
+.cm-emoji.is-below {bottom: auto;top: calc(100% + 8px);}
+@keyframes cmEmojiIn {from {opacity: 0;transform: translateY(4px)}}
+@media (prefers-reduced-motion: reduce) {
+  .cm-emoji {animation: none;}
+}
+.cm-emoji-tabs {display: flex;gap: 2px;margin-bottom: 8px;}
+.cm-emoji-tabs button {padding: 3px 10px;border: 0;border-radius: 999px;background: none;
+  color: var(--muted);font-size: 12px;font-weight: 600;cursor: pointer;}
+.cm-emoji-tabs button.on {color: var(--accent);background: var(--accent-soft);}
+/* 网格自动填列：面板宽度随屏变化时列数自己跟 */
+.cm-emoji-grid, .cm-emoji-list {max-height: 224px;overflow-y: auto;
+  scrollbar-width: thin;scrollbar-color: var(--line) transparent;}
+.cm-emoji-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));gap: 2px;}
+.cm-emoji-cat {grid-column: 1 / -1;padding: 5px 2px 1px;font-size: 11px;color: var(--faint);}
+.cm-emoji-item {display: grid;place-items: center;border: 0;border-radius: 8px;
+  background: none;color: var(--ink);font-size: 19px;line-height: 1;cursor: pointer;
+  transition: background-color .15s,transform .3s;}
+.cm-emoji-item:hover {background: var(--accent-soft);}
+.cm-emoji-item:active {transform: scale(.88);}
+/* 颜文字是文本：不进方块格子，一行一个胶囊 */
+.cm-emoji-list {display: flex;flex-wrap: wrap;gap: 4px;align-content: flex-start;}
+.cm-kao {width: auto;aspect-ratio: auto;padding: 5px 9px;font-size: 13px;font-weight: 600;}
+
 /* 列表：条与条之间靠留白分隔，不画线不画盒 */
 .cm-list {display: flex;flex-direction: column;gap: 28px;
   margin: 26px 0 0;padding: 0;list-style: none;}
@@ -1289,6 +1335,7 @@ a.cm-name-a:hover {color: var(--accent);}
   .cm-replies .cm-av {width: 24px;height: 24px;font-size: 10.5px;}
   .cm-act {padding: 8px 10px;}
   .cm-act:first-child {margin-left: -10px;}
+  .cm-emoji-btn {width: 36px;height: 36px;}
   .cm-sort button {min-height: 44px;}
   .cm-provider {width: 44px;height: 44px;}
   .cm-compose {gap: 10px;}
@@ -1300,6 +1347,7 @@ a.cm-name-a:hover {color: var(--accent);}
 @media (pointer: coarse) {
   .cm-provider {width: 44px;height: 44px;}
   .cm-act {padding: 8px 10px;}
+  .cm-emoji-btn {width: 36px;height: 36px;}
   .cm-link {padding: 8px 2px;}
   .cm-more-r {padding: 10px 0;}
   .cm-input {font-size: 16px;}
diff --git a/frontend/src/ui/yohaku/YohakuHome.vue b/frontend/src/ui/yohaku/YohakuHome.vue
index 36a1cff..8fe4dca 100644
--- a/frontend/src/ui/yohaku/YohakuHome.vue
+++ b/frontend/src/ui/yohaku/YohakuHome.vue
@@ -50,6 +50,9 @@ const emit = defineEmits(['update:kind', 'update:tag', 'update:query', 'go'])
       @update:query="emit('update:query', $event)"
     />
 
+    <!-- 短文快发盒（HomeView 传入；只有管理员会话在场才渲染） -->
+    <slot name="compose" />
+
     <YohakuFeed :items="items" />
 
     <div v-if="!items.length" class="empty">
diff --git a/frontend/src/ui/yohaku/YohakuTop.vue b/frontend/src/ui/yohaku/YohakuTop.vue
index d242ccc..84da61a 100644
--- a/frontend/src/ui/yohaku/YohakuTop.vue
+++ b/frontend/src/ui/yohaku/YohakuTop.vue
@@ -2,13 +2,16 @@
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { site } from '../../site'
+import NavBurger from '../../components/NavBurger.vue'
 
 // 余白顶栏。对应设计稿的 <header class="top">：品牌 / 导航 / 操作三块，
 // 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
 // 样式在 ui/yohaku/chrome.css，选择器已收敛到 html[data-ui="vivid"] 下。
 //
 // 窄屏例外：设计稿在窄屏把导航整个 display:none 掉了，手机上会没有任何导航入口。
-// 这里补一个 ☰ + 全屏菜单（chrome.css 的 .menu / .menu-btn）。
+// 这里补一个汉堡钮 + 全屏菜单（chrome.css 的 .menu）。菜单 z-index 压在顶栏
+// 之下：顶栏（品牌 + 汉堡）浮在菜单上不消失，汉堡原位并成 ✕，不再需要一个
+// 重复的菜单头。
 
 const route = useRoute()
 const scrolled = ref(false)
@@ -35,6 +38,9 @@ function onScroll() {
   scrolled.value = (window.scrollY || 0) > 8
 }
 
+function toggleMenu() {
+  menuOpen.value ? closeMenu() : openMenu()
+}
 function openMenu() {
   menuOpen.value = true
   // 焦点交给对话框本身（aria-modal 承诺过），Tab 第一下才落到「时间线」。
@@ -44,7 +50,8 @@ function openMenu() {
 }
 function closeMenu() {
   menuOpen.value = false
-  nextTick(() => burger.value?.focus({ preventScroll: true }))
+  const b = burger.value?.$el || burger.value
+  nextTick(() => b?.focus?.({ preventScroll: true }))
 }
 
 // 菜单铺满全屏时锁住底层滚动（iOS 上不锁背景会跟着手指滑）
@@ -100,53 +107,57 @@ function toggleTheme() {
       </nav>
       <div class="top-acts">
         <button class="icon-btn theme-btn" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
-        <button
-          ref="burger"
-          class="icon-btn menu-btn"
-          type="button"
-          aria-label="打开菜单"
-          aria-controls="v-menu"
-          :aria-expanded="menuOpen"
-          @click="openMenu"
-        >☰</button>
       </div>
     </div>
   </header>
 
-  <!-- 窄屏全屏菜单。必须待在 .top 外面：.top 有 backdrop-filter，
-       会给 position:fixed 的后代当包含块，铺不满屏。 -->
+  <!-- 窄屏：底部悬浮 dock（品牌 + 汉堡），常驻拇指区。桌面 display:none。
+       必须待在 .top 外面：.top 有 backdrop-filter，会给 fixed 后代当包含块。 -->
+  <div class="dock">
+    <RouterLink class="dock-brand" to="/">
+      <span class="av">{{ initial() }}</span>
+      <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"
+      class="menu-root"
       role="dialog"
       aria-modal="true"
       aria-label="站点导航"
       tabindex="-1"
-      @click.self="closeMenu"
     >
-      <div class="menu-head">
-        <span class="m-brand">
-          <span class="av">{{ initial() }}</span>
-          <span>{{ title() }}</span>
-        </span>
-        <button class="icon-btn" type="button" aria-label="关闭菜单" @click="closeMenu">✕</button>
-      </div>
-      <nav class="menu-in">
-        <RouterLink
-          v-for="l in links"
-          :key="l.to"
-          :to="l.to"
-          :class="{ on: isOn(l) }"
-        >
-          <span>{{ l.label }}</span>
-          <em>{{ l.en }}</em>
-        </RouterLink>
-      </nav>
-      <div class="menu-foot">
-        <button class="chip" type="button" @click="toggleTheme">◐ 切换明暗</button>
+      <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>
diff --git a/frontend/src/ui/yohaku/chrome.css b/frontend/src/ui/yohaku/chrome.css
index ad676e7..cbb9072 100644
--- a/frontend/src/ui/yohaku/chrome.css
+++ b/frontend/src/ui/yohaku/chrome.css
@@ -15,13 +15,13 @@ html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
 @media (hover: hover) and (pointer: fine) {
   html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
 }
-/* .m-brand 是全屏菜单里那个同款标头（菜单铺满屏后顶栏被盖住，得有个续接） */
-html[data-ui='vivid'] :is(.brand, .m-brand) .av {width:30px;height:30px;border-radius:50%;
+/* .av 品牌标记：顶栏一枚，菜单里那枚随菜单头一起撤了（顶栏浮在菜单上） */
+html[data-ui='vivid'] .brand .av {width:30px;height:30px;border-radius:50%;
   background:linear-gradient(135deg,var(--accent),var(--accent-deep));
   display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
   box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
   position:relative;}
-html[data-ui='vivid'] :is(.brand, .m-brand) .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
+html[data-ui='vivid'] .brand .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
   width:9px;height:9px;border-radius:50%;
   background:#34c759;border:2px solid var(--paper);}
 html[data-ui='vivid'] .nav {display:flex;gap:2px;flex:1;justify-content:center}
@@ -50,56 +50,108 @@ html[data-ui='vivid'] .icon-btn {width:36px;height:36px;border-radius:50%;
    写在后面会把 .menu-btn {display:grid} 压掉。 */
 html[data-ui='vivid'] .menu-btn {display:none}
 @media (max-width:720px) {
-  /* 设计稿在窄屏把导航整个藏了 / 早先的做法是品牌行下方再摊一条横向滚动行，
-     5 个中文项挤成一条平铺，读起来很碎。改成收进 ☰ 全屏菜单。 */
-  html[data-ui='vivid'] .nav {display:none}
-  html[data-ui='vivid'] .menu-btn {display:grid}
-  /* 主题切换收进 ☰（菜单底部那枚）—— 顶栏和菜单各一个就是重复。
-     桌面没有 ☰，所以只在窄屏藏：那枚 ◐ 是设计稿顶栏自带的，留着。 */
-  html[data-ui='vivid'] .theme-btn {display:none}
-  /* 浏览器标题栏已经在显示站点名，品牌文字在手机上是重复的 —— 只留头像标记 */
-  html[data-ui='vivid'] .brand > span:last-child {display:none}
-  /* .nav 原来是 flex:1（把品牌顶左、操作顶右），它一藏起来就得自己撑开 */
-  html[data-ui='vivid'] .top-in {justify-content:space-between;gap:12px;padding:0 16px}
+  /* 顶栏整条在手机上退场：品牌和导航都挪到底部悬浮 dock（参考 innei.in 的
+     底部胶囊），内容区一寸顶栏都不占。桌面照旧走内联导航。
+     dock 的 display:flex 在下面 .dock 基准规则之后 —— 同特指度后导入者赢，
+     写在前面会被 display:none 压掉（chrome.css 老坑）。 */
+  html[data-ui='vivid'] .top {display:none}
 }
 
-/* ---- 窄屏全屏菜单 ---- */
-html[data-ui='vivid'] .m-brand {display:flex;align-items:center;gap:10px;
-  font-weight:700;font-size:15px;letter-spacing:.02em;}
-html[data-ui='vivid'] .menu {position:fixed;inset:0;z-index:150;
-  background:var(--paper);
+/* ---- 窄屏：底部悬浮 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;
+  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;gap:9px;
+  font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);}
+/* 窄屏才把 dock 摆出来；这条必须压在基准规则（display:none）之后 */
+@media (max-width:720px) {
+  html[data-ui='vivid'] .dock {display:flex}
+}
+html[data-ui='vivid'] :is(.brand, .dock-brand) .av {width:30px;height:30px;border-radius:50%;
+  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
+  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
+  box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
+  position:relative;}
+html[data-ui='vivid'] :is(.brand, .dock-brand) .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
+  width:9px;height:9px;border-radius:50%;
+  background:#34c759;border:2px solid var(--paper);}
+
+/* 上拉菜单：圆角毛玻璃贴着 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:0 max(18px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));
-  overscroll-behavior:contain;}
+  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-head {height:56px;flex:none;   /* 对齐顶栏高度，关掉时视觉不跳 */
-  display:flex;align-items:center;justify-content:space-between;}
 html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
-  padding-top:10px;overflow-y:auto;}
-html[data-ui='vivid'] .menu-in a {display:flex;align-items:baseline;gap:12px;
-  padding:16px 2px;font-size:26px;font-weight:800;letter-spacing:-.02em;
+  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);}
-html[data-ui='vivid'] .menu-in a.on,
+  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:18px}
-/* 进：整块淡入 + 菜单项轻推上来；出：只淡出（避免收起时还要等位移） */
-html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .26s var(--ease)}
-html[data-ui='vivid'] .v-menu-enter-active .menu-in {transition:transform .5s var(--spring),opacity .4s var(--ease)}
+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-in {transform:translateY(12px);opacity:0}
-html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .18s var(--ease)}
+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-in {transition-delay:0s !important}
+  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 的主题键在菜单里），贴到安全区 */
+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'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
   background:transparent;pointer-events:none;}
 html[data-ui='vivid'] .progress i {display:block;height:100%;width:0%;
diff --git a/frontend/src/ui/yohaku/comments.css b/frontend/src/ui/yohaku/comments.css
index f5d4bb8..be05f26 100644
--- a/frontend/src/ui/yohaku/comments.css
+++ b/frontend/src/ui/yohaku/comments.css
@@ -38,6 +38,13 @@ html[data-ui='vivid'] .cm-send {background: var(--accent);color: #fff;
 }
 html[data-ui='vivid'] .cm-send:active {transform: scale(.97);}
 
+/* 表情面板：基础版的暗色靠 token 别名天然成立，vivid 只把阴影换成自己的档位 */
+html[data-ui='vivid'] .cm-emoji {border-color: var(--line);box-shadow: var(--shadow-lg);}
+html[data-ui='vivid'] .cm-emoji-btn {border-radius: 8px;transition: opacity .3s var(--spring),background-color .3s,transform .5s var(--spring);}
+@media (hover: hover) and (pointer: fine) {
+  html[data-ui='vivid'] .cm-emoji-btn:hover {transform: scale(1.08);}
+}
+
 /* 列表 */
 html[data-ui='vivid'] .cm-list {gap: 24px;}
 html[data-ui='vivid'] .cm-av {width: 36px;height: 36px;background: var(--accent-soft);color: var(--accent);}
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 7475b71..7ce6e1a 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -65,3 +65,24 @@ export function minutesLabel(post) {
   if (post.kind === 'short') return '短文'
   return `${post.reading_minutes || 1} 分钟`
 }
+
+// 把 text 插进 textarea 光标处（没聚焦过就追加到末尾），返回新值和插入后的
+// 光标位。光标重定位要在赋值后的 nextTick 里做（DOM 更新完 setSelectionRange
+// 才不会被打断），所以这里只算，不动 DOM：
+//   const r = insertAtCursor(ta, draft.value, text); draft.value = r.value
+//   nextTick(() => placeCursor(ta, r.pos))
+export function insertAtCursor(ta, value, text) {
+  const focused = !!ta && document.activeElement === ta && typeof ta.selectionStart === 'number'
+  const pos = focused ? ta.selectionStart : value.length
+  return { value: value.slice(0, pos) + text + value.slice(pos), pos: pos + text.length }
+}
+
+export function placeCursor(ta, pos) {
+  if (!ta) return
+  ta.focus()
+  try {
+    ta.setSelectionRange(pos, pos)
+  } catch (_) {
+    /* 个别输入类型不支持 setSelectionRange，忽略 */
+  }
+}
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index cfd8293..0a6aa98 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -4,6 +4,7 @@ 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 QuickShort from '../components/QuickShort.vue'
 import YohakuHome from '../ui/yohaku/YohakuHome.vue'
 import { publicApi } from '../api'
 import { site, applyDocTitle } from '../site'
@@ -107,6 +108,15 @@ function setKind(value) {
   router.push({ path: '/', query: { ...(value ? { kind: value } : {}), ...(tag.value ? { tag: tag.value } : {}) } })
 }
 
+// 短文发布成功：回到第一页让新内容立刻可见（路由变化会自动触发重载）
+function onPublished() {
+  if (page.value !== 1) {
+    router.replace({ path: '/', query: { ...route.query, page: 1 } })
+  } else {
+    load()
+  }
+}
+
 const pageCount = computed(() => Math.max(1, Math.ceil(total.value / size.value)))
 
 const heading = computed(() => {
@@ -139,7 +149,11 @@ applyDocTitle('')
     @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 } })"
-  />
+  >
+    <template #compose>
+      <QuickShort @published="onPublished" />
+    </template>
+  </YohakuHome>
 
   <div v-else class="shell">
     <div class="layout">
@@ -164,6 +178,9 @@ applyDocTitle('')
           </nav>
         </header>
 
+        <!-- 短文快发盒：只有管理员会话在场才渲染（见 QuickShort） -->
+        <QuickShort @published="onPublished" />
+
         <div v-if="loading" class="loading">载入中…</div>
         <div v-else-if="error" class="empty">{{ error }}（后端是否已启动？）</div>
         <div v-else-if="!items.length" class="empty">
@@ -296,9 +313,17 @@ applyDocTitle('')
     border-left: 0;
     border-right: 0;
   }
-  /* 移动端 TopBar 也吸顶（高 54px），标题栏贴其下方 */
+  /* 移动端 TopBar 也吸顶，标题栏贴其下方（高度在 styles.css 的 --topbar-h）。
+     TopBar 下滑隐藏时把 html.topbar-hidden 翻上来，偏移归 0，两层同曲线一起滑 */
   .sticky-head {
-    top: 54px;
+    top: var(--topbar-h, 54px);
+    transition: top 0.32s var(--ease, ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sticky-head {
+      transition: none;
+    }
   }
 }
 </style>