improvement(wrapped-ui): 下线 DOS 主题并优化 Wrapped 多主题体验

- 移除 DOS 主题入口、切换器组件与相关样式逻辑,统一主题为 Modern / GameBoy / Win98。

- 新增 WrappedGameboyDither 组件,并在背景与 CRT 叠加层中引入 GameBoy 噪点效果。

- 优化 wrapped 页面视口高度与背景同步逻辑(含 ResizeObserver 与 100dvh 适配),提升桌面容器显示稳定性。

- 调整封面标题与预览位移、回复速度卡片滚动行为等细节,提升主题下视觉与交互一致性。
This commit is contained in:
2977094657
2026-02-07 20:59:03 +08:00
parent 017ec6d089
commit e9c81caa12
15 changed files with 192 additions and 296 deletions

View File

@@ -1,11 +1,11 @@
/**
* 年度总结页面主题管理 composable
* 支持三种主题modern现代、gameboyGame BoydosDOS终端
* 支持三种主题modern现代、gameboyGame Boywin98Windows 98
*/
const STORAGE_KEY = 'wrapped-theme'
const VALID_THEMES = ['off', 'gameboy', 'dos', 'win98']
const RETRO_THEMES = new Set(['gameboy', 'dos'])
const VALID_THEMES = ['off', 'gameboy', 'win98']
const RETRO_THEMES = new Set(['gameboy'])
// 全局响应式状态(跨组件共享)
const theme = ref('off')
@@ -15,19 +15,12 @@ let keyboardInitialized = false
export function useWrappedTheme() {
// 初始化:从 localStorage 读取(仅执行一次)
const initTheme = () => {
if (initialized) return
if (import.meta.client) {
const saved = localStorage.getItem(STORAGE_KEY)
if (saved && VALID_THEMES.includes(saved)) {
theme.value = saved
}
initialized = true
if (initialized || !import.meta.client) return
const saved = localStorage.getItem(STORAGE_KEY)
if (saved && VALID_THEMES.includes(saved)) {
theme.value = saved
}
}
// 立即初始化(客户端)
if (import.meta.client) {
initTheme()
initialized = true
}
// 设置主题
@@ -66,7 +59,6 @@ export function useWrappedTheme() {
const names = {
off: 'Modern',
gameboy: 'Game Boy',
dos: 'DOS Terminal',
win98: 'Windows 98'
}
return names[theme.value] || 'Modern'
@@ -91,9 +83,6 @@ export function useWrappedTheme() {
e.preventDefault()
setTheme('gameboy')
} else if (e.key === 'F3') {
e.preventDefault()
setTheme('dos')
} else if (e.key === 'F4') {
e.preventDefault()
setTheme('win98')
}
@@ -102,10 +91,11 @@ export function useWrappedTheme() {
window.addEventListener('keydown', handleKeydown)
}
// 自动初始化键盘快捷键
if (import.meta.client) {
// 客户端挂载后再初始化:避免 SSR 与首帧 hydration 不一致
onMounted(() => {
initTheme()
initKeyboardShortcuts()
}
})
return {
theme: readonly(theme),