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,5 +1,5 @@
<template>
<!-- Shared backdrop for all "Wrapped" slides (keeps cover + cards visually consistent). -->
<!-- Shared backdrop for modern/gameboy "Wrapped" slides (keeps cover + cards visually consistent). -->
<div v-if="theme !== 'win98'" class="absolute inset-0 pointer-events-none select-none z-0" aria-hidden="true">
<!-- Soft color blobs (brand + warm highlights) -->
<div class="absolute -top-24 -left-24 w-80 h-80 bg-[#07C160] opacity-[0.08] rounded-full blur-3xl"></div>
@@ -11,8 +11,17 @@
class="absolute inset-0 bg-[linear-gradient(rgba(7,193,96,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(7,193,96,0.05)_1px,transparent_1px)] bg-[size:52px_52px] opacity-[0.28]"
></div>
<!-- Grain/noise: enhanced with dynamic jitter for CRT feel -->
<div class="absolute inset-0 wrapped-noise-enhanced opacity-[0.08]"></div>
<!-- Grain/noise: gameboy 使用动态 canvas 噪点其它主题沿用现有纹理 -->
<WrappedGameboyDither
v-if="theme === 'gameboy'"
class="opacity-[0.3]"
style="filter: contrast(1.16)"
:pattern-refresh-interval="1"
:pattern-alpha="56"
mix-blend-mode="overlay"
:pattern-size="256"
/>
<div v-else class="absolute inset-0 wrapped-noise-enhanced opacity-[0.08]"></div>
<!-- Gentle vignette so typography stays readable on textured bg -->
<div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white/50 to-transparent"></div>