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

@@ -19,25 +19,6 @@
</div>
</div>
<!-- DOS 风格 -->
<div v-else-if="theme === 'dos'" class="year-dos">
<span class="dos-prompt">C:\WRAPPED&gt;</span>
<span class="dos-label">YEAR:</span>
<button
class="dos-arrow"
:disabled="!canGoPrev"
@click="prevYear"
aria-label="Previous year"
>[-]</button>
<span class="dos-value">{{ modelValue }}</span>
<button
class="dos-arrow"
:disabled="!canGoNext"
@click="nextYear"
aria-label="Next year"
>[+]</button>
</div>
<!-- Win98 风格 -->
<div v-else-if="theme === 'win98'" class="year-win98">
<div class="win98-year-box">
@@ -209,57 +190,6 @@ onBeforeUnmount(() => {
letter-spacing: 2px;
}
/* ========== DOS 风格 ========== */
.year-dos {
font-family: 'Courier New', 'Consolas', monospace;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
color: #33ff33;
text-shadow: 0 0 5px #33ff33;
}
.dos-prompt {
color: #1a5c1a;
}
.dos-label {
color: #33ff33;
}
.dos-arrow {
background: transparent;
border: none;
color: #33ff33;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0 2px;
text-shadow: 0 0 5px #33ff33;
transition: color 0.1s;
}
.dos-arrow:hover:not(:disabled) {
color: #66ff66;
text-shadow: 0 0 8px #66ff66;
}
.dos-arrow:disabled {
color: #1a5c1a;
cursor: not-allowed;
text-shadow: none;
}
.dos-value {
background: #0a1a0a;
padding: 2px 6px;
border: 1px solid #1a5c1a;
letter-spacing: 1px;
min-width: 50px;
text-align: center;
}
/* ========== Win98 风格 ========== */
.year-win98 {
font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", "Segoe UI", sans-serif;