交互：表情面板 + 短文快发盒 + 双 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 与主题浮钮不重叠 /
  顶栏隐藏与筛选条跟随同步

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>
 

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>

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>

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', '_(:з」∠)_', 'ᕕ( ᐛ )ᕗ',
+  '(っ˘̩╭╮˘̩)っ', '(ง •_•)ง'
+]