fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题

抽取 themeSnapshot 工具模块,异步恢复与跨窗同步时写回 snapshot;HTML 内联脚本与 useLayoutEffect 消除 dark 类首帧闪烁;避免 storage 恢复覆盖用户操作及 setState 嵌套更新。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
雨霖铃
2026-06-19 00:45:52 +08:00
parent 8f9ff27034
commit f0292acbb7
8 changed files with 302 additions and 68 deletions
+41
View File
@@ -0,0 +1,41 @@
import {
applyResolvedThemeClass,
applyThemeFromSnapshot,
getThemeSyncSnapshot,
persistThemeModeSnapshot,
resolveThemeMode,
THEME_MODE_SNAPSHOT_KEY,
} from '@/utils/themeSnapshot';
describe('themeSnapshot', () => {
beforeEach(() => {
localStorage.clear();
document.documentElement.classList.remove('dark');
});
it('应从未知快照值回退到 system', () => {
localStorage.setItem(THEME_MODE_SNAPSHOT_KEY, JSON.stringify('invalid'));
expect(getThemeSyncSnapshot()).toBe('system');
});
it('resolveThemeMode 应解析 system 为当前系统主题', () => {
vi.spyOn(window, 'matchMedia').mockReturnValue({
matches: true,
} as MediaQueryList);
expect(resolveThemeMode('dark')).toBe('dark');
expect(resolveThemeMode('system')).toBe('dark');
});
it('applyThemeFromSnapshot 应根据快照同步 dark 类', () => {
persistThemeModeSnapshot('dark');
applyThemeFromSnapshot();
expect(document.documentElement.classList.contains('dark')).toBe(true);
});
it('applyResolvedThemeClass 移除 dark 时应清理 class', () => {
document.documentElement.classList.add('dark');
applyResolvedThemeClass('light');
expect(document.documentElement.classList.contains('dark')).toBe(false);
});
});