文章排版四件套（参考 xLog）：盘古之白 + 表格圆角斑马纹 + 代码块封顶与复制按钮 + 标题悬停锚点

- PanguHTML：CJK 与拉丁/数字间补空格，标签原样保留、code/pre 内文本不动；详情/时间线短文/RSS 描述三个出口生效（带单测）
- 表格改圆角容器 + tbody 斑马纹 + 纵向大留白（classic/vivid 双主题）
- pre max-height 30.5em 封顶内部滚动；enhanceProse 注入悬停复制按钮（App 全局委托），按下有 2px 物理感
- 带 id 的 h2-h4 悬停浮现 # 锚点，点击跳转
- 中文字体栈此前已配（PingFang SC 等），无需改动

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import TopBar from './components/TopBar.vue'
 import ThemeSwitcher from './components/ThemeSwitcher.vue'
@@ -9,6 +9,31 @@ import YohakuFoot from './ui/yohaku/YohakuFoot.vue'
 import { site, setAdminScope } from './site'
 
 const route = useRoute()
+
+// 正文代码块复制按钮（事件委托：复制按钮是 enhanceProse 注入的静态 HTML）
+function onCopyClick(e) {
+  const btn = e.target.closest?.('.pre-copy')
+  if (!btn) return
+  const pre = btn.closest('.pre-wrap')?.querySelector('pre')
+  if (!pre) return
+  navigator.clipboard
+    .writeText(pre.innerText.replace(/\n$/, ''))
+    .then(() => {
+      btn.textContent = '已复制'
+      btn.classList.add('done')
+      setTimeout(() => {
+        btn.textContent = '复制'
+        btn.classList.remove('done')
+      }, 1600)
+    })
+    .catch(() => {
+      btn.textContent = '复制失败'
+      setTimeout(() => (btn.textContent = '复制'), 1600)
+    })
+}
+onMounted(() => document.addEventListener('click', onCopyClick))
+onBeforeUnmount(() => document.removeEventListener('click', onCopyClick))
+
 const isAdmin = computed(() => route.path.startsWith('/admin'))
 // vivid 只在公开前台生效：后台永远走 classic 那套（--admin-* token + 原 data-ui/data-theme），
 // 不受 ui_id 影响。vivid.css 会命中 .btn / .input 这类全局类，后台表单正在用，