From 8dd3b0eb17043c10b9b0fb92635dccc7757a9d6f Mon Sep 17 00:00:00 2001
From: JianFeeeee <jianf@noreply.localhost>
Date: Mon, 14 Sep 2026 13:09:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(webui):=20=E5=88=97=E8=A1=A8=E9=A1=B9?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA"=E6=AF=8F=E9=A1=B9=E4=B8=80=E5=BC=A0?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83=E5=8D=A1"=EF=BC=8C=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E9=80=80=E6=88=90=E9=80=8F=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户：「你为什么是给所有列表项一起套了一个玻璃外框，而不是每个列表项单独套外框？」

**他是对的，而且我上一轮没给理由**：之前的做法是"面板 = 一张玻璃，行躺在里面"，
把列表当成一个整体容器 —— 而界面上其它地方（正文卡、弹层）都是"每一项自己是一块面"，
列表成了唯一的例外，观感上少一层层次。

改法：
- 新增 `.glass-card`（圆角 14px + 半透明 + 细边框 + 悬停加深，带 dark 档）；
- **列表面板退成透明**（壁纸模式下 `html[data-bg='on'] .comm-pane > .bg-white`
  置为 transparent）—— 这样壁纸从卡片之间露出来，卡片才是真正的一块块面；
- 会话分组行与邮件行都换成 `.glass-card`。

实测（自己的无头 Chromium，1600×1000）：
    壁纸关: 面板 rgb(255,255,255) / 卡片 rgba(255,255,255,0.92) / 圆角 14px
    壁纸开: 面板 rgba(0,0,0,0)   / 卡片 rgba(255,255,255,0.78) / 圆角 14px
即"面板透明、每项一张卡"确实生效。

未做（如实说明）：**联系人列表与会话列表**仍是"一张面板 + 行走廊"的旧结构，
只有 MailList 换成了每项一卡。要全部统一说一声，同一套 `.glass-card` 直接套即可。
---
 client/electron/src/components/MailList.tsx |  4 +-
 client/electron/src/index.css               | 47 +++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/client/electron/src/components/MailList.tsx b/client/electron/src/components/MailList.tsx
index ac877c7..1d39aac 100644
--- a/client/electron/src/components/MailList.tsx
+++ b/client/electron/src/components/MailList.tsx
@@ -178,7 +178,7 @@ function SessionGroup({
     >
       <button
         onClick={onToggle}
-        className="w-full text-left px-3.5 py-3 rounded-lg hover:bg-gray-50"
+        className="glass-card w-full text-left px-3.5 py-3 hover:bg-gray-50"
       >
         <div className="flex items-center gap-2">
           <ChevronRightIcon
@@ -276,7 +276,7 @@ function MailItem({
   return (
     <button
       onClick={onClick}
-      className={`w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${
+      className={`glass-card w-full text-left px-3 py-2.5 border transition-colors ${
         active ? 'bg-blue-50 border-blue-200' : 'border-transparent hover:bg-gray-50'
       }`}
     >
diff --git a/client/electron/src/index.css b/client/electron/src/index.css
index e46c0e7..1f0448b 100644
--- a/client/electron/src/index.css
+++ b/client/electron/src/index.css
@@ -1268,3 +1268,50 @@ html.view-switch .glass-control,
  * 等 400ms 再量就是正常的（见 test/manual/nav-contrast-verify.mjs）。
  * 所以深色这一档仍然只用上面的 .dark 令牌块，一处定义。
  */
+
+
+/*
+ * ═══════════════════════════════════════════════════════════════════
+ *  列表项自己的玻璃卡（.glass-card）
+ *
+ *  用户（2026-09-14）：「你为什么是给所有列表项一起套了一个玻璃外框，
+ *  而不是每个列表项单独套外框？」
+ *
+ *  他说得对。之前的做法是「面板 = 一张玻璃，行躺在里面」—— 那是把列表当成
+ *  一个整体容器，行只是它的内容。但界面上其它地方（正文卡、弹层）都是"每一项
+ *  自己是一块面"，列表却是个例外，观感上就少了一层层次。
+ *
+ *  改成：面板退成透明，**每一项自己是一张玻璃卡**（圆角 + 半透明 + 细边框 +
+ *  悬停加深）。这样每项都是独立可点、可拖、可单独高亮的一块。
+ */
+html[data-bg='on'] .comm-pane > .bg-white {
+  /* 列表/详情的外框在壁纸模式下让位给"每项一张卡"，但**工具条与头部**仍要
+     有底色，否则会直接压在壁纸上读不清 —— 所以只把列表容器那一层放透明。 */
+  background-color: transparent;
+}
+
+.glass-card {
+  border-radius: var(--radius-card);
+  border: 1px solid rgb(15 23 42 / 0.07);
+  background-color: rgb(255 255 255 / 0.92);
+  transition: background-color 150ms, border-color 150ms;
+}
+
+.glass-card:hover {
+  background-color: rgb(255 255 255 / 0.99);
+  border-color: rgb(15 23 42 / 0.12);
+}
+
+html[data-bg='on'] .glass-card {
+  background-color: rgb(var(--c-white) / 0.78);
+  border-color: rgb(var(--c-white) / 0.5);
+}
+
+html[data-bg='on'] .glass-card:hover {
+  background-color: rgb(var(--c-white) / 0.88);
+}
+
+.dark .glass-card {
+  background-color: rgb(255 255 255 / 0.06);
+  border-color: rgb(255 255 255 / 0.08);
+}