发布 0.1.0:通知渠道、告警规则与多项体验修复

src/composables/useThemeRipple.ts

@@ -0,0 +1,61 @@
+import { nextTick } from 'vue'
+
+import { useAppStore } from '@/stores/app'
+
+/** 扩散揭示时长;与 main.css 中 view-transition 的默认动画禁用配套 */
+const RIPPLE_DURATION = 560
+
+/** 进行中标志:扩散未结束时忽略再次触发,防止打断上一个 transition 造成瞬跳闪烁 */
+let rippling = false
+
+/** 明暗主题切换,新主题以触发元素为圆心向外扩散揭示(View Transitions);
+ *  浏览器不支持或用户偏好减少动效时退化为直接切换 */
+export function useThemeRipple() {
+  const app = useAppStore()
+
+  async function toggleDarkFrom(e: MouseEvent) {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (typeof document.startViewTransition !== 'function' || reduced) {
+      app.toggleDark()
+      return
+    }
+    if (rippling) return
+    rippling = true
+    const { x, y } = originOf(e)
+    // 回调内等 nextTick:html.dark 由 store watcher 刷新,须在快照回调结束前落地。
+    // theme-switching 禁掉页面自身的颜色 transition:::view-transition-new(root)
+    // 是新 DOM 的实时替身,组件残留的渐变会在扩散圆内继续播放,观感即闪烁。
+    const transition = document.startViewTransition(async () => {
+      document.documentElement.classList.add('theme-switching')
+      app.toggleDark()
+      await nextTick()
+    })
+    try {
+      await transition.ready
+      const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+      document.documentElement.animate(
+        { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] },
+        { duration: RIPPLE_DURATION, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' },
+      )
+    } finally {
+      void transition.finished.finally(() => {
+        document.documentElement.classList.remove('theme-switching')
+        rippling = false
+      })
+    }
+  }
+
+  return { toggleDarkFrom }
+}
+
+/** 扩散圆心:优先触发元素几何中心(键盘触发 clientX/Y 为 0 也稳),兜底点击坐标 */
+function originOf(e: MouseEvent): { x: number; y: number } {
+  const el = e.currentTarget
+  if (el instanceof Element) {
+    const rect = el.getBoundingClientRect()
+    if (rect.width || rect.height) {
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+    }
+  }
+  return { x: e.clientX, y: e.clientY }
+}