From bdd89c681af25a47bfb220538032a5955652e49c Mon Sep 17 00:00:00 2001
From: 2977094657 <2977094657@qq.com>
Date: Tue, 3 Feb 2026 16:32:12 +0800
Subject: [PATCH] =?UTF-8?q?improvement(wrapped-ui):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20GameBoy/DOS=20=E4=B8=BB=E9=A2=98=E5=B8=83=E5=B1=80=E5=B9=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E9=94=AE=E7=9B=98=E5=8F=AF=E8=A7=86=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- slide 模式在 GameBoy/DOS 下采用更紧凑的标题字号与间距\n- MessageChars 键盘增加 GameBoy 风格外观与功能键样式
---
 .../wrapped/shared/WrappedCardShell.vue       |  34 +++--
 .../visualizations/MessageCharsChart.vue      | 122 +++++++++++++++++-
 2 files changed, 147 insertions(+), 9 deletions(-)

diff --git a/frontend/components/wrapped/shared/WrappedCardShell.vue b/frontend/components/wrapped/shared/WrappedCardShell.vue
index 837edaf..f209387 100644
--- a/frontend/components/wrapped/shared/WrappedCardShell.vue
+++ b/frontend/components/wrapped/shared/WrappedCardShell.vue
@@ -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>
 
diff --git a/frontend/components/wrapped/visualizations/MessageCharsChart.vue b/frontend/components/wrapped/visualizations/MessageCharsChart.vue
index a947267..507c098 100644
--- a/frontend/components/wrapped/visualizations/MessageCharsChart.vue
+++ b/frontend/components/wrapped/visualizations/MessageCharsChart.vue
@@ -71,7 +71,7 @@
               v-for="key in row"
               :key="key.code + key.label"
               class="kb-key"
-              :class="[`kb-w-${key.w || 1}`, { 'kb-space': key.isSpace }, getKeyClasses(key.code)]"
+              :class="[`kb-w-${key.w || 1}`, { 'kb-space': key.isSpace, 'kb-func': key.isFunc }, getKeyClasses(key.code)]"
               :style="getKeyStyle(key.code)"
             >
               <div class="kb-key-top" :style="getKeyTopStyle(key.code)">
@@ -358,6 +358,9 @@ const getLabelStyle = (code) => {
 /* 键盘外框 */
 .keyboard-outer {
   @apply mt-3 rounded-2xl p-1;
+  /* Needed for ::before/::after overlays (scanlines, speaker grill, etc.) */
+  position: relative;
+  isolation: isolate;
   background: linear-gradient(145deg, #ffffff, #e8e8e8);
   border: 1px solid rgba(0,0,0,0.06);
   box-shadow: 0 8px 24px rgba(0,0,0,0.12);
@@ -1194,6 +1197,123 @@ const getLabelStyle = (code) => {
   z-index: 100;
 }
 
+/* ========== Game Boy 主题 - DMG / WorkBoy 风格外观 ========== */
+/* 设计参考：原版 Game Boy 的“灰机身 + 蓝/洋红点缀”配色，以及社区常见的 DMG 键盘配色（例如 GMK DMG 系列）。 */
+.wrapped-theme-gameboy .keyboard-outer {
+  background: #c4c1bd;
+  box-shadow:
+    0 0 0 4px #2b2b2b,
+    0 0 0 8px #e8e4e2,
+    0 0 0 10px #2b2b2b,
+    inset 0 0 0 2px rgba(255,255,255,0.35);
+}
+
+.wrapped-theme-gameboy .keyboard-inner {
+  background: #d6d2ce;
+  box-shadow:
+    inset 4px 4px 0 #a9a39f,
+    inset -4px -4px 0 #f5f2ee;
+}
+
+/* 顶部信息条做成“屏幕窗” */
+.wrapped-theme-gameboy .keyboard-header {
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border: 2px solid #081820;
+  background: #e0f8d0;
+  box-shadow:
+    inset -2px -2px 0 #88c070,
+    inset 2px 2px 0 #f8f8f8;
+}
+
+/* 左侧指示灯：保留一个“电量灯”，其余隐藏 */
+.wrapped-theme-gameboy .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 0;
+  box-shadow:
+    0 0 0 2px #081820,
+    inset 1px 1px 0 rgba(255,255,255,0.25);
+}
+.wrapped-theme-gameboy .dot-red {
+  background: #9a2257;
+  animation: none !important;
+}
+.wrapped-theme-gameboy .dot-yellow,
+.wrapped-theme-gameboy .dot-green {
+  display: none;
+}
+.wrapped-theme-gameboy .keyboard-dots::after {
+  content: 'BATTERY';
+  margin-left: 6px;
+  font-family: var(--font-pixel-10), 'Courier New', monospace;
+  font-size: 8px;
+  letter-spacing: 1px;
+  color: #081820;
+}
+
+.wrapped-theme-gameboy .keyboard-hint,
+.wrapped-theme-gameboy .keyboard-stats {
+  color: #081820;
+  text-shadow: none;
+}
+
+/* 键盘底板：偏灰，避免整块“全绿”导致像素感过强 */
+.wrapped-theme-gameboy .keyboard-body {
+  background:
+    repeating-linear-gradient(
+      0deg,
+      #bdb8b4 0px, #bdb8b4 2px,
+      #c9c4c0 2px, #c9c4c0 4px
+    );
+  box-shadow:
+    inset 3px 3px 0 #a9a39f,
+    inset -3px -3px 0 #f5f2ee;
+}
+
+/* 功能键给一点“蓝色键帽”点缀（更像 DMG 配色键盘） */
+.wrapped-theme-gameboy .kb-func .kb-key-top {
+  background: #494786 !important;
+  box-shadow:
+    inset -3px -3px 0 #2f2d3a,
+    inset 3px 3px 0 #6a66a2,
+    inset -1px -1px 0 #1b1a22,
+    inset 1px 1px 0 #8a86d0 !important;
+}
+.wrapped-theme-gameboy .kb-func .kb-label,
+.wrapped-theme-gameboy .kb-func .kb-sub {
+  color: #e0f8d0 !important;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
+}
+
+/* “音响孔”点阵 */
+.wrapped-theme-gameboy .keyboard-outer::before {
+  content: '';
+  position: absolute;
+  right: 10px;
+  bottom: 12px;
+  width: 52px;
+  height: 18px;
+  background:
+    radial-gradient(circle, rgba(8, 24, 32, 0.35) 35%, transparent 36%) 0 0 / 6px 6px;
+  opacity: 0.85;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 品牌文字：换成更贴近主题的“WorkBoy”梗 */
+.wrapped-theme-gameboy .keyboard-brand {
+  position: relative;
+  color: transparent;
+  text-shadow: none;
+}
+.wrapped-theme-gameboy .keyboard-brand::before {
+  content: 'WECHAT WORKBOY';
+  color: rgba(8, 24, 32, 0.7);
+  font-family: var(--font-pixel-10), 'Courier New', monospace;
+  letter-spacing: 2px;
+}
+
 /* ========== DOS 终端主题 - 黑底绿字键盘 ========== */
 
 .wrapped-theme-dos .keyboard-outer {