diff --git a/src/app/chat/components/image-bubble.module.css b/src/app/chat/components/image-bubble.module.css index 170c833a..fe53c2be 100644 --- a/src/app/chat/components/image-bubble.module.css +++ b/src/app/chat/components/image-bubble.module.css @@ -1,6 +1,7 @@ /* ImageBubble 图片气泡样式 */ .bubble { + position: relative; max-width: 220px; max-height: 220px; border-radius: var(--radius-lg, 12px); @@ -17,6 +18,23 @@ object-fit: cover; } +.paywalled .image { + filter: blur(8px); + transform: scale(1.04); +} + +.paywallOverlay { + position: absolute; + inset: 0; + background: + linear-gradient( + 180deg, + rgba(255, 255, 255, 0.04) 0%, + rgba(255, 255, 255, 0.14) 100% + ); + pointer-events: none; +} + .errorFallback { display: flex; align-items: center; diff --git a/src/app/chat/components/image-bubble.tsx b/src/app/chat/components/image-bubble.tsx index d49dbc44..bb093830 100644 --- a/src/app/chat/components/image-bubble.tsx +++ b/src/app/chat/components/image-bubble.tsx @@ -32,7 +32,9 @@ export function ImageBubble({ return ( <>