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

feat(wrapped-ui): 新增 Win98 主题与桌面化外观

Browse Source 
- 主题系统新增 win98（显示名 Windows 98，快捷键扩展到 F1-F4），并区分 retro(pixel/CRT) 与桌面 GUI 主题
- 年度总结页新增 Win98 桌面背景与底部任务栏（背景色/视口高度适配）
- 封面与卡片 slide 形态支持 Win98 窗口外观（title bar/icon/controls）
- 主题切换器补充 Win98 选项并新增 Win98 专属切换器
- 新增 Win98 图标资源（Start + 桌面图标）
This commit is contained in:
2977094657
2026-02-02 00:04:54 +08:00
parent 7ce6abecca
commit 980f15d0a4
19 changed files with 767 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/components/wrapped/shared/WrappedHero.vue
View File

@@ -9,7 +9,57 @@
<div :class="innerClass">
<template v-if="variant === 'slide'">
<div class="h-full flex flex-col justify-between">
<!-- Win98：封面也做成一个“窗口” -->
<div v-if="isWin98" class="window h-full w-full flex flex-col overflow-hidden">
<div class="title-bar">
<div class="title-bar-text">
<img class="title-bar-icon" src="/assets/images/windows-0.png" alt="" aria-hidden="true" />
<span>WECHAT WRAPPED</span>
</div>
<div class="title-bar-controls" aria-hidden="true">
<button type="button" aria-label="Minimize" tabindex="-1"></button>
<button type="button" aria-label="Maximize" tabindex="-1"></button>
<button type="button" aria-label="Close" tabindex="-1"></button>
</div>
</div>
<div class="window-body flex-1 overflow-hidden">
<div class="h-full flex flex-col justify-between">
<div class="flex items-start justify-between gap-4">
<div class="wrapped-label text-xs text-[#00000080]">
WECHAT WRAPPED
</div>
<div class="wrapped-body text-xs text-[#00000055]">
年度回望
</div>
</div>
<div class="mt-10 sm:mt-14">
<h1 class="wrapped-title text-4xl sm:text-6xl text-[#000000e6] leading-[1.05]">
{{ randomTitle.main }}
<span class="block mt-3 win98-hero-highlight">
{{ randomTitle.highlight }}
</span>
</h1>
<div class="mt-7 sm:mt-9 max-w-2xl">
<p class="wrapped-body text-base sm:text-lg text-[#00000080]">
{{ randomSubtitle }}
</p>
</div>
</div>
<div class="pb-1">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-[#00000066]">
<!-- Intentionally left blank (avoid "feature bullet list" tone on the cover). -->
</div>
</div>
</div>
</div>
</div>
<!-- 其他主题：保持原样 -->
<div v-else class="h-full flex flex-col justify-between">
<div class="flex items-start justify-between gap-4">
<div class="wrapped-label text-xs text-[#00000080]">
WECHAT WRAPPED
@@ -190,6 +240,9 @@ const props = defineProps({
variant: { type: String, default: 'panel' } // 'panel' | 'slide'
})
const { theme } = useWrappedTheme()
const isWin98 = computed(() => theme.value === 'win98')
const yearText = computed(() => `${props.year}年`)
const rootClass = computed(() => {
@@ -199,9 +252,19 @@ const rootClass = computed(() => {
: `${base} rounded-2xl border border-[#EDEDED] bg-white`
})
const innerClass = computed(() => (
props.variant === 'slide'
? 'relative h-full max-w-5xl mx-auto px-6 py-10 sm:px-8 sm:py-12'
: 'relative px-6 py-7 sm:px-8 sm:py-9'
))
const innerClass = computed(() => {
if (props.variant !== 'slide') return 'relative px-6 py-7 sm:px-8 sm:py-9'
if (isWin98.value) return 'relative h-full max-w-5xl mx-auto px-6 pt-2 pb-4 sm:px-8 sm:pt-3 sm:pb-6'
return 'relative h-full max-w-5xl mx-auto px-6 py-10 sm:px-8 sm:py-12'
})
</script>
<style scoped>
/* Win98：封面标题的高亮句做成“选中/标题栏”感觉 */
.win98-hero-highlight {
display: inline-block;
padding: 2px 8px;
background: #000080;
color: #ffffff;
}
</style>