chuan/WeChatDataAnalysis
1
0
Fork 0
mirror of https://github.com/LifeArchiveProject/WeChatDataAnalysis.git synced 2026-02-19 22:30:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement(wrapped-ui): 移除 VHS 主题并优化 DOS/CRT 视觉效果

Browse Source 
- 主题系统收敛为 Modern/Game Boy/DOS（快捷键改为 F1-F3）
- 删除 VHS 切换器与相关样式（卡片/控件/年份选择/图表等）
- DOS 主题统一使用像素字体，减弱发光强度并细化扫描线/闪烁参数
- DOS 闪烁光标改由 WrappedCRTOverlay 渲染，避免全局样式副作用
- 移除热力图 vhs 配色分支
This commit is contained in:
2977094657
2026-02-01 19:27:51 +08:00
parent 52ada9da64
commit 7ce6abecca
17 changed files with 81 additions and 942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/components/wrapped/shared/WrappedCRTOverlay.vue
View File

@@ -1,62 +1,38 @@
<template>
<!-- CRT/VHS 滤镜叠加层 - 根据主题切换效果 -->
<!-- CRT 滤镜叠加层 - 复古主题使用 -->
<div class="absolute inset-0 pointer-events-none select-none z-30" aria-hidden="true">
<!-- Game Boy / DOS: 扫描线层 -->
<div v-if="theme !== 'vhs'" class="absolute inset-0 crt-scanlines"></div>
<!-- Game Boy / DOS: RGB 子像素层 -->
<div v-if="theme !== 'vhs'" class="absolute inset-0 crt-rgb-pixels"></div>
<!-- Game Boy / DOS: 闪烁层 -->
<div v-if="theme !== 'vhs'" class="absolute inset-0 crt-flicker"></div>
<!-- 共享: 暗角层 -->
<!-- 扫描线 / RGB 子像素 / 闪烁 / 暗角 / 曲率 -->
<div class="absolute inset-0 crt-scanlines"></div>
<div class="absolute inset-0 crt-rgb-pixels"></div>
<div class="absolute inset-0 crt-flicker"></div>
<div class="absolute inset-0 crt-vignette"></div>
<div class="absolute inset-0 crt-curvature"></div>
<!-- Game Boy / DOS: 屏幕曲率层 -->
<div v-if="theme !== 'vhs'" class="absolute inset-0 crt-curvature"></div>
<!-- VHS: 跟踪线效果 -->
<div v-if="theme === 'vhs'" class="vhs-tracking"></div>
<!-- VHS: REC 指示器 -->
<div v-if="theme === 'vhs'" class="vhs-rec">REC</div>
<!-- VHS: 时间戳 -->
<div v-if="theme === 'vhs'" class="vhs-timestamp">{{ vhsTimestamp }}</div>
<!-- DOS: 语义化光标 -->
<div v-if="theme === 'dos'" class="dos-cursor">█</div>
</div>
</template>
<script setup>
// CRT/VHS 滤镜叠加层组件
// 根据当前主题切换不同的视觉效果
const { theme } = useWrappedTheme()
</script>
// VHS 时间戳（实时更新）
const vhsTimestamp = ref('')
const updateTimestamp = () => {
const now = new Date()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const year = now.getFullYear()
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
vhsTimestamp.value = `${month}/${day}/${year} ${hours}:${minutes}:${seconds}`
<style scoped>
/* DOS 语义化光标 */
.dos-cursor {
position: fixed;
bottom: 20px;
right: 20px;
color: #33ff33;
font-size: 1.5rem;
font-family: var(--font-pixel-10), 'Courier New', monospace;
text-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
animation: dos-cursor-blink 530ms steps(1) infinite;
z-index: 100;
}
let timestampInterval = null
onMounted(() => {
updateTimestamp()
timestampInterval = setInterval(updateTimestamp, 1000)
})
onUnmounted(() => {
if (timestampInterval) {
clearInterval(timestampInterval)
}
})
</script>
@keyframes dos-cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
</style>