From a054a55ce9803a81dc9a096423f156295008e2e7 Mon Sep 17 00:00:00 2001
From: Aska <Aska@cyrene.local>
Date: Mon, 7 Sep 2026 15:12:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=B0=94=E6=B3=A1=E6=AF=9B?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83=E4=BF=AE=E6=AD=A3=E2=80=94=E2=80=94=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E7=BA=AF=E8=89=B2bg=E8=A6=86=E7=9B=96,=E5=8F=8C?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E9=83=BD=E5=8D=8A=E9=80=8F=E6=98=8E=E9=80=8F?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF,=E8=BE=B9=E7=BA=BF=E5=BC=B1=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 根因: 气泡 className 里 bg-[var(--mu-surface-3)]/bg-[var(--mu-accent)]纯色 覆盖了 .liquid-glass-* 的半透明background → assistant 气泡不透背景(主人看到她的没毛玻璃), border 太亮
- 修: 气泡容器去掉纯色 bg(交给液态玻璃类) → assistant(soft)/用户(accent) 都半透明+backdrop-blur 透背景
- 边线弱化: rim 0.06→0.03/0.04 白, 内高光 0.14→0.07, 去掉 className 亮 border(deep色 theme 尤其明显)
- 目的: 双气泡毛玻璃一致透背景, 边框细腻不刺眼; 文字色不变
- 前端 build 绿
---
 frontend/web/src/components/chat.tsx |  6 +++---
 frontend/web/src/styles/index.css    | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/web/src/components/chat.tsx b/frontend/web/src/components/chat.tsx
index bdf4d06..e012d12 100644
--- a/frontend/web/src/components/chat.tsx
+++ b/frontend/web/src/components/chat.tsx
@@ -176,7 +176,7 @@ function splitParagraphs(content: string): string[] {
  *  with `<action>`/`<narration>` rendered as muted italic via renderContent. */
 function ChatBody({ text, streaming }: { text: string; streaming?: boolean }): React.ReactNode {
   return (
-    <div className="liquid-glass-soft rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)] px-4 py-2.5 text-sm text-[var(--mu-text-hi)] shadow-[var(--mu-shadow-1)]">
+    <div className="liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5 text-sm text-[var(--mu-text-hi)] shadow-[var(--mu-shadow-1)]">
       {text ? (
         <span className="whitespace-pre-wrap">{renderContent(text)}</span>
       ) : streaming ? (
@@ -238,7 +238,7 @@ function UserParaBubble({
 }): React.ReactNode {
   return (
     <div className="mu-rise-in flex flex-col items-end gap-0.5">
-      <div className="liquid-glass-accent max-w-[80%] rounded-[var(--mu-radius-lg)] bg-[var(--mu-accent)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
+      <div className="liquid-glass-accent max-w-[80%] rounded-[var(--mu-radius-lg)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
         {full && message.image ? (
           <img
             src={message.image}
@@ -312,7 +312,7 @@ function UserBubble({ message, mode }: { message: ChatMessage; mode: Mode }): Re
     ) : null;
   return (
     <div className="mu-rise-in flex flex-col items-end gap-0.5">
-      <div className="liquid-glass-accent max-w-[80%] rounded-[var(--mu-radius-lg)] bg-[var(--mu-accent)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
+      <div className="liquid-glass-accent max-w-[80%] rounded-[var(--mu-radius-lg)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
         {message.image ? (
           <img
             src={message.image}
diff --git a/frontend/web/src/styles/index.css b/frontend/web/src/styles/index.css
index 055679a..ec3bb3d 100644
--- a/frontend/web/src/styles/index.css
+++ b/frontend/web/src/styles/index.css
@@ -82,25 +82,25 @@ body {
 .liquid-glass-soft {
   position: relative;
   background:
-    linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%),
+    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 45%),
     color-mix(in srgb, var(--mu-surface-3) 68%, transparent);
   box-shadow:
-    inset 0 1px 0 var(--mu-liquid-rim),
-    inset 0 0 0 1px var(--mu-liquid-rim);
+    inset 0 1px 0 rgba(255,255,255,0.04),
+    inset 0 0 0 1px rgba(255,255,255,0.03);
   backdrop-filter: blur(8px) saturate(1.15);
   -webkit-backdrop-filter: blur(8px) saturate(1.15);
 }
 
 /* 用户气泡的半透明毛玻璃 —— accent 主色压到 ~76%（白字仍可读），
-   透出背景 + blur 柔化；内高光/折射描边保留。 */
+   透出背景 + blur 柔化；内高光/折射描边保留、边线弱(不刺眼)。 */
 .liquid-glass-accent {
   position: relative;
   background:
-    linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%),
+    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 45%),
     linear-gradient(180deg, color-mix(in srgb, var(--mu-accent) 76%, transparent), color-mix(in srgb, var(--mu-accent) 72%, transparent));
   box-shadow:
-    inset 0 1px 0 var(--mu-liquid-rim),
-    inset 0 0 0 1px var(--mu-liquid-rim);
+    inset 0 1px 0 rgba(255,255,255,0.04),
+    inset 0 0 0 1px rgba(255,255,255,0.03);
   backdrop-filter: blur(8px) saturate(1.2);
   -webkit-backdrop-filter: blur(8px) saturate(1.2);
 }