From 9585a0295981ab8e11e8c3a11ffc805d6198b316 Mon Sep 17 00:00:00 2001
From: xuncha <1658671838@qq.com>
Date: Wed, 25 Feb 2026 17:59:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=80=8F=E6=98=8E=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ChatPage.scss | 49 ++++++++++++++++++++++++++++++-----------
 src/styles/main.scss    | 22 ++++++++++++++++++
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/pages/ChatPage.scss b/src/pages/ChatPage.scss
index d44b3fd..abd6368 100644
--- a/src/pages/ChatPage.scss
+++ b/src/pages/ChatPage.scss
@@ -1041,7 +1041,7 @@
 // 链接卡片消息样式
 .link-message {
   width: 280px;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
@@ -1167,15 +1167,24 @@
 
 // 适配发送出去的消息中的链接卡片
 .message-bubble.sent .link-message {
-  background: var(--card-bg);
-  border: 1px solid var(--border-color);
+  background: var(--sent-card-bg);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+
+  &:hover {
+    background: var(--primary-hover);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
 
   .link-title {
-    color: var(--text-primary);
+    color: white;
   }
 
   .link-desc {
-    color: var(--text-secondary);
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .appmsg-url-line {
+    color: rgba(255, 255, 255, 0.6);
   }
 }
 
@@ -1258,7 +1267,7 @@
 // 视频号卡片
 .channel-video-card {
   width: 200px;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--border-color);
@@ -1403,7 +1412,7 @@
 // 位置消息卡片
 .location-message {
   width: 240px;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   overflow: hidden;
@@ -1847,6 +1856,20 @@
   }
 }
 
+// 卡片类消息：气泡变透明，让卡片自己做视觉容器
+.message-bubble .bubble-content:has(.link-message),
+.message-bubble .bubble-content:has(.card-message),
+.message-bubble .bubble-content:has(.chat-record-message),
+.message-bubble .bubble-content:has(.official-message),
+.message-bubble .bubble-content:has(.channel-video-card),
+.message-bubble .bubble-content:has(.location-message) {
+  background: transparent !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
 .emoji-image {
   max-width: 120px;
   max-height: 120px;
@@ -2823,7 +2846,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   min-width: 200px;
@@ -2859,7 +2882,7 @@
 
 // 聊天记录消息 (合并转发)
 .chat-record-message {
-  background: var(--card-bg) !important;
+  background: var(--card-inner-bg) !important;
   border: 1px solid var(--border-color) !important;
   transition: opacity 0.2s ease;
   cursor: pointer;
@@ -3108,7 +3131,7 @@
   .chat-record-message,
   .miniapp-message,
   .appmsg-rich-card {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--sent-card-bg);
 
     .card-name,
     .miniapp-title,
@@ -3619,7 +3642,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   cursor: pointer;
@@ -3674,7 +3697,7 @@
 
 // 聊天记录消息外观
 .chat-record-message {
-  background: var(--card-bg) !important;
+  background: var(--card-inner-bg) !important;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
@@ -3713,7 +3736,7 @@
 .official-message {
   display: flex;
   flex-direction: column;
-  background: var(--card-bg);
+  background: var(--card-inner-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 88324e6..9f81ffd 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -37,6 +37,8 @@
 
   // 卡片背景
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #FAFAF7;
+  --sent-card-bg: var(--primary);
 }
 
 // ==================== 浅色主题 ====================
@@ -59,6 +61,8 @@
   --bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
   --primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #FAFAF7;
+  --sent-card-bg: var(--primary);
 }
 
 // 刚玉蓝主题
@@ -79,6 +83,8 @@
   --bg-gradient: linear-gradient(135deg, #E8EEF0 0%, #D8E4E8 100%);
   --primary-gradient: linear-gradient(135deg, #4A6670 0%, #5A7A86 100%);
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #F8FAFB;
+  --sent-card-bg: var(--primary);
 }
 
 // 冰猕猴桃汁绿主题
@@ -99,6 +105,8 @@
   --bg-gradient: linear-gradient(135deg, #E8F0E4 0%, #D8E8D0 100%);
   --primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #8AAA6C 100%);
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #F8FBF6;
+  --sent-card-bg: var(--primary);
 }
 
 // 辛辣红主题
@@ -119,6 +127,8 @@
   --bg-gradient: linear-gradient(135deg, #F0E8E8 0%, #E8D8D8 100%);
   --primary-gradient: linear-gradient(135deg, #8B4049 0%, #A05058 100%);
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #FAF8F8;
+  --sent-card-bg: var(--primary);
 }
 
 // 明水鸭色主题
@@ -139,6 +149,8 @@
   --bg-gradient: linear-gradient(135deg, #E4F0F0 0%, #D4E8E8 100%);
   --primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #6A9A9A 100%);
   --card-bg: rgba(255, 255, 255, 0.7);
+  --card-inner-bg: #F6FBFB;
+  --sent-card-bg: var(--primary);
 }
 
 // ==================== 深色主题 ====================
@@ -160,6 +172,8 @@
   --bg-gradient: linear-gradient(135deg, #1a1816 0%, #252220 100%);
   --primary-gradient: linear-gradient(135deg, #8B7355 0%, #C9A86C 100%);
   --card-bg: rgba(40, 36, 32, 0.9);
+  --card-inner-bg: #27231F;
+  --sent-card-bg: var(--primary);
 }
 
 // 刚玉蓝 - 深色
@@ -179,6 +193,8 @@
   --bg-gradient: linear-gradient(135deg, #141a1c 0%, #1e282c 100%);
   --primary-gradient: linear-gradient(135deg, #4A6670 0%, #6A9AAA 100%);
   --card-bg: rgba(30, 40, 44, 0.9);
+  --card-inner-bg: #1D272A;
+  --sent-card-bg: var(--primary);
 }
 
 // 冰猕猴桃汁绿 - 深色
@@ -198,6 +214,8 @@
   --bg-gradient: linear-gradient(135deg, #161a14 0%, #222a1e 100%);
   --primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #9ABA7C 100%);
   --card-bg: rgba(34, 42, 30, 0.9);
+  --card-inner-bg: #21281D;
+  --sent-card-bg: var(--primary);
 }
 
 // 辛辣红 - 深色
@@ -217,6 +235,8 @@
   --bg-gradient: linear-gradient(135deg, #1a1416 0%, #2a2022 100%);
   --primary-gradient: linear-gradient(135deg, #8B4049 0%, #C06068 100%);
   --card-bg: rgba(42, 32, 34, 0.9);
+  --card-inner-bg: #281F21;
+  --sent-card-bg: var(--primary);
 }
 
 // 明水鸭色 - 深色
@@ -236,6 +256,8 @@
   --bg-gradient: linear-gradient(135deg, #121a1a 0%, #1c2a2a 100%);
   --primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #7ABAAA 100%);
   --card-bg: rgba(28, 42, 42, 0.9);
+  --card-inner-bg: #1B2828;
+  --sent-card-bg: var(--primary);
 }
 
 // 重置样式