流体交互层：按压反馈 + 真半透明材质 + 主题交叉过渡 + 弹层材质化

按 apple-design（Designing Fluid Interfaces）审查落地：
- 全站补 :active 按压缩放反馈（按钮/tab/链接/命令面板/前后栏导航），交互元素加 touch-action
- TopBar、首页标题栏、浮动主题钮改 color-mix 半透明 + blur 真材质，配 reduced-transparency 回退
- 主题切换 250ms 交叉过渡（theme-anim 瞬时类），消除亮度突变
- CommandPalette/ShortcutsPanel 过 <Transition name="pop">：scrim 淡入 + 面板自顶部锚点 scale 进入，退出原路返回
- 首页标题栏收缩由二值跳变改为滚动进度 --sq 连续插值（16–56px）
- reduced-motion 例外：弹层保留短交叉淡入，禁位移与主题过渡
- 触控目标增大（主题钮 40/44px、tab、后台导航项），文章大标题负字距 + 收紧行高

frontend/src/site.js

@@ -64,7 +64,13 @@ export const site = reactive({
 
 // data-theme   → 前台皮肤（paper / sage / rose / ink）
 // data-admin-theme → 后台明暗（light / dark），跟 site.themeMode 同步
-function applyTheme() {
+function applyTheme(animate = false) {
+  // 亮度突变是 Apple 明确点名的反模式：用户主动切换时给一次 250ms 交叉过渡
+  if (animate && typeof document !== 'undefined') {
+    const el = document.documentElement
+    el.classList.add('theme-anim')
+    setTimeout(() => el.classList.remove('theme-anim'), 300)
+  }
   const isDark = site.themeMode === 'dark' || (site.themeMode === 'auto' && systemPrefersDark())
   document.documentElement.setAttribute('data-theme', effectiveTheme(site.themeMode, site.light_skin_id))
   document.documentElement.setAttribute('data-admin-theme', isDark ? 'dark' : 'light')
@@ -95,7 +101,7 @@ export async function loadSite() {
   return site
 }
 
-// 访客切模式 → 落 localStorage + 立刻应用
+// 访客切模式 → 落 localStorage + 立刻应用（带交叉过渡）
 watch(
   () => site.themeMode,
   () => {
@@ -104,7 +110,7 @@ watch(
     } catch (_) {
       /* private mode 等场景静默 */
     }
-    applyTheme()
+    applyTheme(true)
   }
 )