fix(web): 气泡毛玻璃修正——去掉纯色bg覆盖,双气泡都半透明透背景,边线弱化
CI / Backend (build / vet / test / cross-compile) (push) Has been cancelled
CI / Frontend (tsc + vite build) (push) Has been cancelled

- 根因: 气泡 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 绿
This commit is contained in:
Aska committed 2026-09-07 15:12:53 +08:00
1 parent 4b05f219b9
commit a054a55ce9
2 files changed
+10 -10

No files matched your search

+3 -3
View File
@@ -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}
+7 -7
View File
@@ -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);
}