From 4b05f219b9e76e2cd5488e182aa0e26721ac66db Mon Sep 17 00:00:00 2001 From: Aska Date: Mon, 7 Sep 2026 15:10:29 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E8=81=8A=E5=A4=A9=E6=B0=94?= =?UTF-8?q?=E6=B3=A1=E6=94=B9=E5=8D=8A=E9=80=8F=E6=98=8E=E6=AF=9B=E7=8E=BB?= =?UTF-8?q?=E7=92=83=E2=80=94=E2=80=94=E6=B0=94=E6=B3=A1=E8=83=BD=E9=9A=90?= =?UTF-8?q?=E7=BA=A6=E7=9C=8B=E5=88=B0=E5=BA=95=E5=B1=82(chatBackground)?= =?UTF-8?q?=E8=83=8C=E6=99=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .liquid-glass-soft(她)/.liquid-glass-accent(你) 从'94%/96%近不透明+1.5px微blur'改为'68%/76%半透明+8px blur+saturate' - 目的: 气泡半透明+backdrop-blur, 让底层聊天背景透过气泡形成毛玻璃(隐约见背景), 而非纯平面色 - 保留内高光/折射描边(liquid-glass 精髓); 文字色不变(assistant surface3白字/用户 accent 白字), blur 8px 柔化透出背景不糊文字 - 前提: ChatShell 背景层(absolute inset-0)衬在气泡底层, backdrop-filter 生效 - 前端 build 绿 --- frontend/web/src/styles/index.css | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/web/src/styles/index.css b/frontend/web/src/styles/index.css index ef21aee..055679a 100644 --- a/frontend/web/src/styles/index.css +++ b/frontend/web/src/styles/index.css @@ -76,31 +76,33 @@ body { box-shadow: var(--mu-shadow-3), inset 0 1px 0 var(--mu-liquid-rim); } -/* 轻量液态玻璃 —— 用于聊天气泡：只在表面叠一层很淡的内高光 + 细折射描边 + - 极轻 backdrop blur，不改变底色/文字色，避免过度玻璃化影响文字观感。 - （对比 .liquid-glass：去掉厚重 blur/shadow，保留液态玻璃的"内高光+折射"精髓） */ +/* 轻量液态玻璃毛玻璃 —— 聊天气泡：半透明（透出底层背景）+ 内高光/折射描边 + + 适度的 backdrop blur 把透出的背景柔化成毛玻璃。主人要求"气泡能隐约看到背景"。 + 不透明度 ~68%，blur 中等，既透背景又不影响文字可读。 */ .liquid-glass-soft { position: relative; background: linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%), - color-mix(in srgb, var(--mu-surface-3) 94%, transparent); + 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); - backdrop-filter: blur(1.5px) saturate(1.05); - -webkit-backdrop-filter: blur(1.5px) saturate(1.05); + backdrop-filter: blur(8px) saturate(1.15); + -webkit-backdrop-filter: blur(8px) saturate(1.15); } -/* 用户气泡的轻液态玻璃 —— 保留 accent 主色（白字可读），只叠内高光 + 折射描边， - 不模糊背景/不改主色，避免 accent 上玻璃化后变暗/糊。 */ +/* 用户气泡的半透明毛玻璃 —— accent 主色压到 ~76%（白字仍可读）， + 透出背景 + blur 柔化；内高光/折射描边保留。 */ .liquid-glass-accent { position: relative; background: linear-gradient(135deg, var(--mu-liquid-highlight), transparent 45%), - linear-gradient(180deg, color-mix(in srgb, var(--mu-accent) 96%, #ffffff 4%), var(--mu-accent)); + 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); + backdrop-filter: blur(8px) saturate(1.2); + -webkit-backdrop-filter: blur(8px) saturate(1.2); } /* Smooth Corner 优先：全局圆角走 token（k=0.55 近似值），落地在组件里用 rounded-smooth */