From d08ae85cd4eec4222bcd66bf48c9ca5860f44cb3 Mon Sep 17 00:00:00 2001
From: snowy-yang <102860110+snowy-yang@users.noreply.github.com>
Date: Sun, 27 Sep 2026 09:19:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=E7=BE=8E=E5=8C=96?=
 =?UTF-8?q?=E5=B1=82=20v11=E2=80=94=E2=80=94=E5=93=81=E7=89=8C=E6=B0=9B?=
 =?UTF-8?q?=E5=9B=B4=20+=20Tab=20=E8=8D=AF=E4=B8=B8=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为什么：页面经 v4-v10 十层打磨后整体已精致，但截图复看仍有四处寡淡——
纯文字下划线 Tab 缺乏点击感、背景氛围是中性灰与品牌无关、卡片顶边
平、账号区与音质区无分隔。

改动（全部为 CSS 叠加覆盖，不动类名/结构/JS 契约）：
- Tab 药丸化：hover 软底 + active 主色片 + 按压回弹，::after 下划线隐藏；
  用 .tabs .tab 权重压过基础层与 v10 超小屏规则
- 背景氛围替换为品牌红 + 主题蓝双色辉光（明暗两套参数）
- 卡片顶部内高光，浅色主题更挺括
- 账号栏补下分隔线，与音质栏边框上下呼应
- 主按钮补顶部高光渐变（对齐 success/danger 既有处理）
- 页脚字距微调；空状态浮动动画 v4 已有，不重复

golden：index 快照按 docstring 约定同步刷新（sha256/len），
仅 2 行值变更。门禁：ruff/pyright 0-0，pytest 294 全绿；
浏览器实测明暗两主题 + Tab 切换正常。
---
 templates/index.html        | 48 +++++++++++++++++++++++++++++++++++++
 tests/golden/responses.json |  4 ++--
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7bd7a16..b14aeb0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1729,6 +1729,54 @@
             .card, .uc-card, .admin-side, .modal, .drawer { forced-color-adjust: auto; }
         }
 
+        /* ============================================================
+           美化层 v11（2026-09-27 品牌氛围 + Tab 药丸化）
+           延续 v4-v10 原则：叠加式覆盖，不动布局结构 / 类名 / JS 契约。
+           ============================================================ */
+
+        /* ---------- 背景氛围：品牌红 + 主题蓝 双色辉光（替换 v4 灰调氛围） ---------- */
+        body {
+            background-image:
+                radial-gradient(1100px 480px at 10% -8%, rgba(236, 65, 65, 0.05), transparent 60%),
+                radial-gradient(950px 460px at 104% -4%, rgba(22, 119, 255, 0.055), transparent 58%);
+        }
+        html.dark body {
+            background-image:
+                radial-gradient(1100px 480px at 10% -8%, rgba(236, 65, 65, 0.07), transparent 60%),
+                radial-gradient(950px 460px at 104% -4%, rgba(22, 104, 220, 0.09), transparent 58%);
+        }
+
+        /* ---------- 卡片：顶部内高光，浅色主题更挺括 ---------- */
+        .card { box-shadow: var(--color-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.65); }
+        html.dark .card { box-shadow: var(--color-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
+
+        /* ---------- 账号栏与音质栏之间补一条分隔线（音质栏自带下边框，上下呼应） ---------- */
+        .account-bar { border-bottom: 1px solid var(--color-border-split); }
+
+        /* ---------- Tab 药丸化：下划线 → 软色块，hover 有底、active 有片 ----------
+           用 .tabs .tab 权重（0-2-0）压过基础层 .tab 与 v10 超小屏的同权重规则；
+           ::after 下划线整体隐藏，active 态由药丸底色表达 */
+        .tabs .tab {
+            padding: 8px 16px;
+            margin-right: 6px;
+            border-radius: 999px;
+            transition: color 0.2s, background 0.2s, transform 0.15s;
+        }
+        .tabs .tab:hover { background: var(--color-fill); }
+        .tabs .tab:active { transform: scale(0.96); }
+        .tabs .tab.active { background: var(--color-primary-bg); }
+        .tabs .tab::after { display: none; }
+
+        /* ---------- 主按钮：与 success/danger 一致的顶部高光渐变 ---------- */
+        .btn-primary {
+            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
+        }
+
+        /* ---------- 空状态图标：v4 层已有 floatY 浮动，此处不再重复 ---------- */
+
+        /* ---------- 页脚字距 ---------- */
+        .footer { letter-spacing: 0.3px; }
+
     </style>
 </head>
 <body>
diff --git a/tests/golden/responses.json b/tests/golden/responses.json
index a3b54a2..736d257 100644
--- a/tests/golden/responses.json
+++ b/tests/golden/responses.json
@@ -534,7 +534,7 @@
   "payload": null,
   "status": 200,
   "body": null,
-  "html_len": 464333,
-  "html_sha256": "0596d87ccbe8e7b5a19494c5d1ab1fd11bc95b82665ddc600ba90e4f2f790b06"
+  "html_len": 466913,
+  "html_sha256": "78cbb4b1f627700c0537840d20e2ebb5bd344efe05a309bef541cfaf63efb493"
  }
 ]
\ No newline at end of file