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): 优化 GameBoy/DOS 主题布局并增强键盘可视化

Browse Source 
- slide 模式在 GameBoy/DOS 下采用更紧凑的标题字号与间距\n- MessageChars 键盘增加 GameBoy 风格外观与功能键样式
This commit is contained in:
2977094657
2026-02-03 16:32:12 +08:00
parent 175ed20a5f
commit bdd89c681a
2 changed files with 147 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/components/wrapped/shared/WrappedCardShell.vue
View File

@@ -54,17 +54,19 @@
<template v-else>
<div class="flex items-start justify-between gap-4">
<div>
<h2 class="wrapped-title text-2xl sm:text-3xl text-[#000000e6]">{{ title }}</h2>
<slot name="narrative">
<p v-if="narrative" class="mt-3 wrapped-body text-sm sm:text-base text-[#7F7F7F] max-w-2xl whitespace-pre-wrap">
{{ narrative }}
</p>
</slot>
<h2 class="wrapped-title text-[#000000e6]" :class="slideTitleClass">{{ title }}</h2>
<div :class="slideNarrativeWrapClass">
<slot name="narrative">
<p v-if="narrative" class="mt-3 wrapped-body text-sm sm:text-base text-[#7F7F7F] max-w-2xl whitespace-pre-wrap">
{{ narrative }}
</p>
</slot>
</div>
</div>
<slot name="badge" />
</div>
<div class="mt-6 sm:mt-8 flex-1 flex items-center">
<div class="flex-1 flex items-center" :class="slideContentWrapClass">
<div class="w-full">
<slot />
</div>
@@ -84,11 +86,27 @@ defineProps({
const { theme } = useWrappedTheme()
const isWin98 = computed(() => theme.value === 'win98')
const isGameboy = computed(() => theme.value === 'gameboy')
const isDos = computed(() => theme.value === 'dos')
const isCompactSlide = computed(() => isGameboy.value || isDos.value)
const slideTitleClass = computed(() => (
isCompactSlide.value ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl'
))
// Keep as a computed so we can tune per-theme spacing later without touching template.
const slideNarrativeWrapClass = computed(() => '')
const slideContentWrapClass = computed(() => (
isCompactSlide.value ? 'mt-4 sm:mt-5' : 'mt-6 sm:mt-8'
))
const slideContainerClass = computed(() => (
isWin98.value
? 'relative h-full max-w-5xl mx-auto px-6 pt-2 pb-4 sm:px-8 sm:pt-3 sm:pb-6 flex flex-col'
: 'relative h-full max-w-5xl mx-auto px-6 py-10 sm:px-8 sm:py-12 flex flex-col'
: (isCompactSlide.value
? 'relative h-full max-w-5xl mx-auto px-6 pt-5 pb-6 sm:px-8 sm:pt-6 sm:pb-7 flex flex-col'
: 'relative h-full max-w-5xl mx-auto px-6 py-10 sm:px-8 sm:py-12 flex flex-col')
))
</script>