feat(web): 聊天气泡加轻量 Miuix 液态玻璃(不动底色/文字,不糊观感)
- 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自动获取)进行中, 未触碰
This commit is contained in:
1 parent
aeb9fea64c
commit
6489910f64
2 files changed
+30
-3
No files matched your search
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user