fix: prevent theme toggle crash on rapid clicks

Add a transition lock to toggleTheme so that consecutive clicks during
the view-transition animation are ignored, avoiding stacked GPU-heavy
clip-path animations and redundant ECharts instance recreation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
zyycn
2026-07-02 01:06:31 +08:00
co-authored by Claude Opus 4.8
parent 4c43680786
commit ffd3a13b18
+5
View File
@@ -25,6 +25,7 @@ export const useUiStore = defineStore(
let themeApplied = false
let themeTransitionOrigin: ThemeTransitionOrigin | undefined
let themeTransitionRequested = false
let themeTransitioning = false
const { start: startFallbackTransitionTimer, stop: stopFallbackTransitionTimer } = useTimeoutFn(
() => {
document.documentElement.classList.remove('theme-fallback-transition')
@@ -82,6 +83,8 @@ export const useUiStore = defineStore(
return
}
themeTransitioning = true
const origin = themeTransitionOrigin ?? {
x: window.innerWidth - 44,
y: 44,
@@ -120,6 +123,7 @@ export const useUiStore = defineStore(
)
})
transition.finished.finally(() => {
themeTransitioning = false
requestAnimationFrame(() => {
document.documentElement.classList.remove('theme-view-transition-reverse')
})
@@ -144,6 +148,7 @@ export const useUiStore = defineStore(
}
function toggleTheme(event?: MouseEvent) {
if (themeTransitioning) return
if (event) {
themeTransitionOrigin = {
x: event.clientX,