From d5d64b2b50dd53e3bbeb99ecbf6b86be65e0ae38 Mon Sep 17 00:00:00 2001
From: Jason <jasonzhu081207@gmail.com>
Date: Mon, 11 May 2026 22:57:25 +0800
Subject: [PATCH] fix: Reply Style

---
 src/pages/ChatPage.scss     | 16 ++++----
 src/pages/SettingsPage.scss | 74 +++++++++++++++++++++++++++++--------
 src/pages/SettingsPage.tsx  | 26 ++++++++++---
 3 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/src/pages/ChatPage.scss b/src/pages/ChatPage.scss
index 9730e6b..ba8c70b 100644
--- a/src/pages/ChatPage.scss
+++ b/src/pages/ChatPage.scss
@@ -2482,7 +2482,7 @@
     padding: 2px 6px 2px 4px;
     border-radius: 8px;
     background: transparent;
-    opacity: 0.42;
+    opacity: 0.68;
     transition: opacity 0.35s ease, background-color 0.35s ease;
     user-select: none;
     max-width: 100%;
@@ -2507,7 +2507,7 @@
     width: 13px;
     height: 13px;
     color: var(--primary);
-    opacity: 0.7;
+    opacity: 0.86;
     flex-shrink: 0;
     transition: opacity 0.3s ease;
   }
@@ -2538,7 +2538,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    opacity: 0.7;
+    opacity: 0.92;
 
     // Hide inline emoji images in anchor excerpt
     .inline-emoji {
@@ -2599,7 +2599,7 @@
     font-size: 12.5px;
     line-height: 1.5;
     color: var(--text-secondary);
-    opacity: 0.82;
+    opacity: 0.94;
     padding-left: 6px;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -2623,19 +2623,19 @@
   }
 
   .reply-anchor-name {
-    color: color-mix(in srgb, var(--on-primary) 92%, var(--primary));
+    color: color-mix(in srgb, var(--on-primary) 96%, var(--primary));
   }
 
   .reply-anchor-excerpt {
-    color: color-mix(in srgb, var(--on-primary) 72%, var(--primary));
+    color: color-mix(in srgb, var(--on-primary) 86%, var(--primary));
   }
 
   .reply-anchor-sep {
-    color: color-mix(in srgb, var(--on-primary) 50%, var(--primary));
+    color: color-mix(in srgb, var(--on-primary) 68%, var(--primary));
   }
 
   .reply-anchor-icon {
-    color: color-mix(in srgb, var(--on-primary) 80%, var(--primary));
+    color: color-mix(in srgb, var(--on-primary) 90%, var(--primary));
   }
 
   &:hover .reply-anchor {
diff --git a/src/pages/SettingsPage.scss b/src/pages/SettingsPage.scss
index 2645f2e..363b04a 100644
--- a/src/pages/SettingsPage.scss
+++ b/src/pages/SettingsPage.scss
@@ -1128,8 +1128,9 @@
 .quote-layout-preview-shell {
   background: var(--bg-secondary);
   border-radius: 8px;
-  padding: 12px;
+  padding: 16px;
   border: 1px solid var(--border-color);
+  overflow: hidden;
 }
 
 .quote-layout-preview-chat {
@@ -1137,32 +1138,75 @@
   justify-content: flex-end;
 }
 
-.message-bubble {
-  max-width: 80%;
+.quote-layout-preview-chat .message-bubble {
+  max-width: 82%;
 }
 
-.bubble-content {
+.quote-layout-preview-chat .bubble-content {
   background: var(--primary);
   color: var(--on-primary);
-  border-radius: 12px;
+  border-radius: 18px;
   padding: 10px 12px;
   font-size: 13px;
+  line-height: 1.5;
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
 }
 
-.quote-layout-top .quoted-message { margin-bottom: 6px; }
-.quote-layout-bottom .quoted-message { margin-top: 6px; }
+.quote-layout-top .ambient-reply-wrapper { margin-bottom: 4px; }
+.quote-layout-bottom .ambient-reply-wrapper { margin-top: 4px; margin-bottom: 0; }
 
-.quoted-message {
-  background: rgba(0,0,0,0.15);
-  border-left: 2px solid rgba(255,255,255,0.4);
-  padding: 4px 8px;
-  border-radius: 4px;
+.quote-layout-preview-chat .ambient-reply-wrapper {
+  position: relative;
+  cursor: default;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.quote-layout-preview-chat .reply-anchor {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 2px 6px 2px 4px;
+  border-radius: 8px;
+  background: transparent;
+  user-select: none;
+  overflow: hidden;
+}
+
+.quote-layout-preview-chat .reply-anchor-icon {
+  width: 13px;
+  height: 13px;
+  color: color-mix(in srgb, var(--on-primary) 84%, var(--primary));
+  opacity: 0.78;
+  flex-shrink: 0;
+}
+
+.quote-layout-preview-chat .reply-anchor-name {
   font-size: 12px;
-  
-  .quoted-sender { font-weight: 500; margin-right: 4px; &::after { content: ':'; } }
-  .quoted-text { opacity: 0.9; }
+  font-weight: 500;
+  color: color-mix(in srgb, var(--on-primary) 92%, var(--primary));
+  flex-shrink: 0;
+}
+
+.quote-layout-preview-chat .reply-anchor-sep {
+  font-size: 10px;
+  color: color-mix(in srgb, var(--on-primary) 58%, var(--primary));
+  flex-shrink: 0;
+}
+
+.quote-layout-preview-chat .reply-anchor-excerpt {
+  min-width: 0;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: color-mix(in srgb, var(--on-primary) 78%, var(--primary));
 }
 
 @media (max-width: 760px) {
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index b15ad52..ddd274b 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -1711,16 +1711,30 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
                         {isQuoteBottom ? (
                           <>
                             <div className="message-text">拍得真不错!</div>
-                            <div className="quoted-message">
-                              <span className="quoted-sender">张三</span>
-                              <span className="quoted-text">那天去爬山的照片...</span>
+                            <div className="ambient-reply-wrapper">
+                              <div className="reply-anchor">
+                                <svg className="reply-anchor-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                  <polyline points="9 14 4 9 9 4" />
+                                  <path d="M20 20v-7a4 4 0 0 0-4-4H4" />
+                                </svg>
+                                <span className="reply-anchor-name">张三</span>
+                                <span className="reply-anchor-sep">&middot;</span>
+                                <span className="reply-anchor-excerpt">那天去爬山的照片...</span>
+                              </div>
                             </div>
                           </>
                         ) : (
                           <>
-                            <div className="quoted-message">
-                              <span className="quoted-sender">张三</span>
-                              <span className="quoted-text">那天去爬山的照片...</span>
+                            <div className="ambient-reply-wrapper">
+                              <div className="reply-anchor">
+                                <svg className="reply-anchor-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                  <polyline points="9 14 4 9 9 4" />
+                                  <path d="M20 20v-7a4 4 0 0 0-4-4H4" />
+                                </svg>
+                                <span className="reply-anchor-name">张三</span>
+                                <span className="reply-anchor-sep">&middot;</span>
+                                <span className="reply-anchor-excerpt">那天去爬山的照片...</span>
+                              </div>
                             </div>
                             <div className="message-text">拍得真不错!</div>
                           </>