From a3338e1cf38fbae9c7c310b39252ba4fb2aa55ca Mon Sep 17 00:00:00 2001
From: JustMe <mr.toing@outlook.com>
Date: Fri, 9 Oct 2026 04:57:01 +0800
Subject: [PATCH] fix(display): background quality as a three-way choice
 (blurred, sharp, original) [CI]

---
 web/display/src/AppearancePanel.tsx | 31 ++++++++++++++++++++--------
 web/display/src/display.css         | 32 +++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/web/display/src/AppearancePanel.tsx b/web/display/src/AppearancePanel.tsx
index dbdc8a0..cfc16ae 100644
--- a/web/display/src/AppearancePanel.tsx
+++ b/web/display/src/AppearancePanel.tsx
@@ -38,6 +38,14 @@ const BACKGROUND_SLIDERS: Slider[] = [
 ]
 
 const WEATHER_KEYS: (keyof AppearanceSettings)[] = ['enabled', 'density', 'speed', 'wind', 'size', 'blur', 'opacity', 'bullet', 'mouse']
+type Quality = 'blur' | 'sharp' | 'original'
+
+const QUALITY_OPTIONS: { value: Quality; label: string; hint: string }[] = [
+  { value: 'blur', label: '模糊', hint: '预先模糊过的图，最小（约 200–400KB）' },
+  { value: 'sharp', label: '清晰', hint: '不模糊，压缩过的图（约 200–400KB）' },
+  { value: 'original', label: '原图', hint: '不模糊，没压缩的原图（每张约 0.3–2MB，PNG 的更大）' },
+]
+
 const BACKGROUND_KEYS: (keyof AppearanceSettings)[] = ['photo', 'bgBlurred', 'bgBlur', 'bgOriginal', 'sway', 'parallax', 'bgVeil']
 
 function SliderRow({ slider, settings, disabled }: { slider: Slider; settings: AppearanceSettings; disabled?: boolean }) {
@@ -89,6 +97,9 @@ export function AppearancePanel() {
     }
   }, [open])
 
+  // 画质：模糊 / 清晰（不模糊，压缩）/ 原图（不模糊，没压缩）
+  const quality: Quality = settings.bgBlurred ? 'blur' : settings.bgOriginal ? 'original' : 'sharp'
+  const setQuality = (value: Quality) => setAppearance({ bgBlurred: value === 'blur', bgOriginal: value === 'original' })
   const keys = tab === 'weather' ? WEATHER_KEYS : BACKGROUND_KEYS
   const changed = keys.some((name) => settings[name] !== APPEARANCE_DEFAULTS[name])
 
@@ -128,15 +139,17 @@ export function AppearancePanel() {
                 </div>
               </div>
             ))}
-            <SwitchRow label="背景模糊" hint="关掉就换成不模糊的图" checked={settings.bgBlurred} onChange={(bgBlurred) => setAppearance({ bgBlurred })} />
-            <SliderRow slider={BACKGROUND_SLIDERS[0]} settings={settings} disabled={!settings.bgBlurred} />
-            <SwitchRow
-              label="不压缩"
-              hint="背景模糊关着时：开是加载没压缩的原图（每张约 2MB），关是压缩过的（不到 300KB）"
-              checked={settings.bgOriginal}
-              disabled={settings.bgBlurred}
-              onChange={(bgOriginal) => setAppearance({ bgOriginal })}
-            />
+            <div className="appearance-row appearance-row-segment" role="group" aria-label="背景画质">
+              <span>画质</span>
+              <div className="appearance-segment">
+                {QUALITY_OPTIONS.map(({ value, label, hint }) => (
+                  <button key={value} type="button" title={hint} aria-pressed={quality === value} onClick={() => setQuality(value)}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <SliderRow slider={BACKGROUND_SLIDERS[0]} settings={settings} disabled={quality !== 'blur'} />
             <SwitchRow label="背景晃动" hint="关掉就不跟着鼠标晃" checked={settings.sway} onChange={(sway) => setAppearance({ sway })} />
             <SliderRow slider={BACKGROUND_SLIDERS[1]} settings={settings} disabled={!settings.sway} />
             <SliderRow slider={BACKGROUND_SLIDERS[2]} settings={settings} />
diff --git a/web/display/src/display.css b/web/display/src/display.css
index 563f9cf..ce40698 100644
--- a/web/display/src/display.css
+++ b/web/display/src/display.css
@@ -1629,6 +1629,38 @@ input {
   transform: translateX(14px);
 }
 
+.appearance-row-segment {
+  grid-template-columns: 52px 1fr;
+}
+
+/* 三选一：连在一起的三个按钮，选中的那个是实心的 */
+.appearance-segment {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 2px;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--app-ink) 8%, transparent);
+}
+
+.appearance-segment button {
+  padding: 3px 0;
+  border: 0;
+  border-radius: var(--r-pill);
+  color: var(--app-ink-muted);
+  background: none;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.appearance-segment button[aria-pressed='true'] {
+  color: var(--app-ink);
+  font-weight: 600;
+  background: var(--app-card);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--glass-shade) 25%, transparent);
+}
+
 .appearance-reset {
   margin-top: 12px;
   width: 100%;