From 6489910f642247121ca852cdd4f56dd82fc28df0 Mon Sep 17 00:00:00 2001
From: Aska <Aska@cyrene.local>
Date: Mon, 7 Sep 2026 15:09:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E8=81=8A=E5=A4=A9=E6=B0=94?=
 =?UTF-8?q?=E6=B3=A1=E5=8A=A0=E8=BD=BB=E9=87=8F=20Miuix=20=E6=B6=B2?=
 =?UTF-8?q?=E6=80=81=E7=8E=BB=E7=92=83(=E4=B8=8D=E5=8A=A8=E5=BA=95?=
 =?UTF-8?q?=E8=89=B2/=E6=96=87=E5=AD=97,=E4=B8=8D=E7=B3=8A=E8=A7=82?=
 =?UTF-8?q?=E6=84=9F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.css 加 .liquid-glass-soft(assistant: surface-3 底+内高光+折射描边+极轻blur) + .liquid-glass-accent(用户: accent 主色+内高光+折射描边,不加blur保留白字可读)
- chat.tsx: ChatBody(她)/UserParaBubble+UserBubble(你) 气泡容器加对应轻玻璃类
- 设计原则: 只叠'内高光+折射'精髓(inset rim), 不用厚重blur/shadow, 保文字观感; 与现有 .liquid-glass(重) 区分
- 修: 之前气泡纯 surface/accent 平面; 前端 build 绿
注: 工作树中 kook identity.go/admin.go 是 agent-116(KOOK自动获取)进行中, 未触碰
---
 frontend/web/src/components/chat.tsx |  6 +++---
 frontend/web/src/styles/index.css    | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/web/src/components/chat.tsx b/frontend/web/src/components/chat.tsx
index 54384fb..bdf4d06 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="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)] 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)]">
       {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="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)] bg-[var(--mu-accent)] 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="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)] bg-[var(--mu-accent)] 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 ed8761b..ef21aee 100644
--- a/frontend/web/src/styles/index.css
+++ b/frontend/web/src/styles/index.css
@@ -76,6 +76,33 @@ body {
   box-shadow: var(--mu-shadow-3), inset 0 1px 0 var(--mu-liquid-rim);
 }
 
+/* 轻量液态玻璃 —— 用于聊天气泡：只在表面叠一层很淡的内高光 + 细折射描边 +
+   极轻 backdrop blur，不改变底色/文字色，避免过度玻璃化影响文字观感。
+   （对比 .liquid-glass：去掉厚重 blur/shadow，保留液态玻璃的"内高光+折射"精髓） */
+.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);
+  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);
+}
+
+/* 用户气泡的轻液态玻璃 —— 保留 accent 主色（白字可读），只叠内高光 + 折射描边，
+   不模糊背景/不改主色，避免 accent 上玻璃化后变暗/糊。 */
+.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));
+  box-shadow:
+    inset 0 1px 0 var(--mu-liquid-rim),
+    inset 0 0 0 1px var(--mu-liquid-rim);
+}
+
 /* Smooth Corner 优先：全局圆角走 token（k=0.55 近似值），落地在组件里用 rounded-smooth */
 * {
   border-radius: var(--mu-radius);