Files
WeChatDataAnalysis/frontend/components/wrapped/shared/WrappedThemeSwitcherModern.vue
2977094657 e9c81caa12 improvement(wrapped-ui): 下线 DOS 主题并优化 Wrapped 多主题体验
- 移除 DOS 主题入口、切换器组件与相关样式逻辑,统一主题为 Modern / GameBoy / Win98。

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

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

- 调整封面标题与预览位移、回复速度卡片滚动行为等细节,提升主题下视觉与交互一致性。
2026-02-07 20:59:03 +08:00

31 lines
796 B
Vue

<template>
<div class="flex items-center gap-2">
<span class="text-xs text-[#00000099]">Theme</span>
<div class="inline-flex rounded-lg border border-[#EDEDED] overflow-hidden">
<button
v-for="t in themes"
:key="t.value"
class="px-3 py-1.5 text-xs wrapped-label transition-colors"
:class="[
theme === t.value
? 'bg-[#07C160] text-white'
: 'bg-white text-[#333] hover:bg-[#F5F5F5]'
]"
@click="setTheme(t.value)"
>
{{ t.label }}
</button>
</div>
</div>
</template>
<script setup>
const { theme, setTheme } = useWrappedTheme()
const themes = [
{ value: 'off', label: 'Modern' },
{ value: 'gameboy', label: 'Game Boy' },
{ value: 'win98', label: 'Win98' }
]
</script>