From 6180a8a5152d5686a05bf7acd3d49021025eeab8 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Wed, 24 Jun 2026 11:53:20 +0800
Subject: [PATCH] feat(chat): blur locked image previews

---
 .../chat/components/image-bubble.module.css    | 18 ++++++++++++++++++
 src/app/chat/components/image-bubble.tsx       |  7 ++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

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 (
     <>
       <div
-        className={styles.bubble}
+        className={`${styles.bubble} ${
+          imagePaywalled ? styles.paywalled : ""
+        }`}
         onClick={() => setOpen(true)}
         role="button"
         tabIndex={0}
@@ -56,6 +58,9 @@ export function ImageBubble({
             onError={() => setError(true)}
           />
         )}
+        {!error && imagePaywalled ? (
+          <div className={styles.paywallOverlay} aria-hidden="true" />
+        ) : null}
       </div>
       {open && (
         <FullscreenImageViewer