feat(frontend): ai写的非常amazing的妄想症主题，dsv4有点过度发挥了()

web/frontend/src/composables/useTheme.ts

@@ -1,23 +1,85 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
-const STORAGE_KEY = 'gb-theme'
+/** 明暗模式的存储键 */
+const DARK_STORAGE_KEY = 'gb-theme'
+/** 外观皮肤（主题）的存储键 */
+const SKIN_STORAGE_KEY = 'gb-skin'
+
+/**
+ * 可选皮肤：
+ * - default：原有的晴空配色
+ * - paranoia：致敬《妄想症 Paranoia》系列曲的外观主题
+ */
+export type ThemeSkin = 'default' | 'paranoia'
+
+export interface SkinOption {
+  id: ThemeSkin
+  /** 皮肤名 */
+  name: string
+  /** 一句话说明 */
+  sub: string
+  /** 预览用的色板 */
+  swatches: string[]
+}
+
+export const skinOptions: SkinOption[] = [
+  {
+    id: 'default',
+    name: '晴空',
+    sub: 'goodBaby 默认外观',
+    swatches: ['#66ccff', '#3fa9e0', '#232630'],
+  },
+  {
+    id: 'paranoia',
+    name: '妄想症',
+    sub: 'Paranoia · 九重档案',
+    swatches: ['#e0245e', '#7ee8e0', '#f2d16b'],
+  },
+]
 
 /** 全局共享的主题状态，模块级单例，任何组件读到的都是同一份 */
 const isDark = ref(false)
+const skin = ref<ThemeSkin>('default')
+const isParanoia = computed(() => skin.value === 'paranoia')
 
-/** 把主题应用到 <html> 上 */
-function applyTheme(dark: boolean) {
+function readStorage(key: string): string | null {
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    // 隐私模式 / 禁用存储时静默降级为「本次会话内有效」
+    return null
+  }
+}
+
+function writeStorage(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value)
+  } catch {
+    // 同上
+  }
+}
+
+/** 把明暗模式应用到 <html> 上 */
+function applyDark(dark: boolean) {
   document.documentElement.classList.toggle('dark', dark)
   isDark.value = dark
 }
 
+/** 把皮肤应用到 <html> 上，配色覆盖写在 theme-paranoia.css 里 */
+function applySkin(next: ThemeSkin) {
+  document.documentElement.classList.toggle('paranoia', next === 'paranoia')
+  skin.value = next
+}
+
 /**
  * 在应用启动时调用一次：恢复上次选择，没有记录时跟随系统。
  */
 export function initTheme() {
-  const saved = localStorage.getItem(STORAGE_KEY)
+  const savedDark = readStorage(DARK_STORAGE_KEY)
   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  applyTheme(saved ? saved === 'dark' : prefersDark)
+  applyDark(savedDark ? savedDark === 'dark' : prefersDark)
+
+  applySkin(readStorage(SKIN_STORAGE_KEY) === 'paranoia' ? 'paranoia' : 'default')
 
   // 标记浏览器是否支持圆形揭示，供 CSS 决定要不要退化成淡变
   if (typeof document.startViewTransition !== 'function') {
@@ -26,66 +88,113 @@ export function initTheme() {
 
   // 用户没有手动选择过时，跟随系统变化
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-    if (!localStorage.getItem(STORAGE_KEY)) {
-      applyTheme(e.matches)
+    if (!readStorage(DARK_STORAGE_KEY)) {
+      applyDark(e.matches)
     }
   })
 }
 
+/**
+ * 用一次圆形揭示动画包住外观切换。
+ *
+ * 支持 View Transitions 时以点击处为圆心做圆形揭示；不支持（Firefox / Safari 旧版）
+ * 或用户要求减少动效时直接切换。
+ *
+ * @param mutate 真正改变外观状态的函数
+ * @param event  触发切换的点击事件，用来决定圆心
+ * @param mode   dark/light 沿用原有的进/退方向；skin 需要额外把新画面提到最上层
+ */
+async function reveal(
+  mutate: () => void,
+  event: MouseEvent | undefined,
+  mode: 'dark' | 'light' | 'skin',
+) {
+  const startViewTransition = document.startViewTransition?.bind(document)
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  if (!startViewTransition || reduceMotion) {
+    mutate()
+    return
+  }
+
+  // 换皮肤时新旧画面可能同为暗色，靠这个类强制让新画面浮到上面
+  if (mode === 'skin') {
+    document.documentElement.classList.add('vt-skin')
+  }
+
+  // 从点击点向外扩散；没有事件对象时从右上角（切换按钮所在位置）扩散
+  const x = event?.clientX ?? window.innerWidth - 60
+  const y = event?.clientY ?? 30
+  // 半径取到最远的那个角，保证能覆盖整个视口
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  )
+
+  const transition = startViewTransition(mutate)
+
+  try {
+    await transition.ready
+  } catch {
+    // 浏览器跳过了这次过渡（页面不可见、连续快速点击等）。
+    // 此时外观已由 mutate 应用好，只是没有揭示动画。
+    document.documentElement.classList.remove('vt-skin')
+    return
+  }
+
+  const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+
+  // 切到深色时让新画面扩散进来；切回浅色时让旧画面收缩出去
+  const pseudoElement =
+    mode === 'light' ? '::view-transition-old(root)' : '::view-transition-new(root)'
+
+  document.documentElement.animate(
+    { clipPath: mode === 'light' ? [...clipPath].reverse() : clipPath },
+    {
+      duration: 480,
+      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      pseudoElement,
+    },
+  )
+
+  try {
+    await transition.finished
+  } catch {
+    // finished 在过渡被跳过时也会抛错，忽略即可
+  }
+  document.documentElement.classList.remove('vt-skin')
+}
+
 export function useTheme() {
   /**
    * 切换明暗主题。
-   *
-   * 支持 View Transitions 时，以点击处为圆心做一次圆形揭示动画；
-   * 不支持(Firefox / Safari 旧版)或用户要求减少动效时直接切换。
    */
   async function toggleTheme(event?: MouseEvent) {
     const next = !isDark.value
-    const persist = () => {
-      applyTheme(next)
-      localStorage.setItem(STORAGE_KEY, next ? 'dark' : 'light')
-    }
-
-    // 绑定后再判空，TS 才能正确收窄这个可选 API
-    const startViewTransition = document.startViewTransition?.bind(document)
-    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    if (!startViewTransition || reduceMotion) {
-      persist()
-      return
-    }
-
-    // 以点击点为圆心；没有事件对象时从右上角(切换按钮所在位置)扩散
-    const x = event?.clientX ?? window.innerWidth - 60
-    const y = event?.clientY ?? 30
-    // 半径取到最远的那个角，保证能覆盖整个视口
-    const endRadius = Math.hypot(
-      Math.max(x, window.innerWidth - x),
-      Math.max(y, window.innerHeight - y),
-    )
-
-    const transition = startViewTransition(persist)
-
-    try {
-      await transition.ready
-    } catch {
-      // 浏览器跳过了这次过渡（页面不可见、连续快速点击等）。
-      // 此时主题已经通过 persist() 应用好了，只是没有揭示动画，直接返回。
-      return
-    }
-
-    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-
-    document.documentElement.animate(
-      // 切到深色时让新画面扩散进来；切回浅色时让旧画面收缩出去
-      { clipPath: next ? clipPath : [...clipPath].reverse() },
-      {
-        duration: 480,
-        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        pseudoElement: next ? '::view-transition-new(root)' : '::view-transition-old(root)',
+    await reveal(
+      () => {
+        applyDark(next)
+        writeStorage(DARK_STORAGE_KEY, next ? 'dark' : 'light')
       },
+      event,
+      next ? 'dark' : 'light',
     )
   }
 
-  return { isDark, toggleTheme }
+  /**
+   * 切换外观皮肤。传入点击事件时以点击处为圆心做揭示动画。
+   */
+  async function setSkin(next: ThemeSkin, event?: MouseEvent) {
+    if (next === skin.value) return
+    await reveal(
+      () => {
+        applySkin(next)
+        writeStorage(SKIN_STORAGE_KEY, next)
+      },
+      event,
+      'skin',
+    )
+  }
+
+  return { isDark, isParanoia, skin, toggleTheme, setSkin }
 }