Merge: 解决冲突 - 保留链接消息和视频消息样式，合并 rawContent 和 content 字段

src/pages/ChatPage.scss

@@ -1,4 +1,4 @@
-.chat-page {
+.chat-page {
   display: flex;
   height: 100%;
   gap: 16px;
@@ -2079,90 +2079,83 @@
   }
 }
 
-/* 链接消息样式 (Link Card/App Message) */
-.link-message {
-  background: var(--card-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 12px;
-  width: 280px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+// 视频消息样式
+.video-thumb-wrapper {
+  position: relative;
+  max-width: 300px;
+  min-width: 200px;
+  border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  background: var(--bg-tertiary);
+  transition: transform 0.2s;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    border-color: var(--primary-light);
+    transform: scale(1.02);
+
+    .video-play-button {
+      opacity: 1;
+      transform: scale(1.1);
+    }
   }
 
-  .link-header {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
+  .video-thumb {
+    width: 100%;
+    height: auto;
+    display: block;
   }
 
-  .link-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .link-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 4px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    line-clamp: 2;
-    overflow: hidden;
-    line-height: 1.4;
-  }
-
-  .link-desc {
-    font-size: 12px;
-    color: var(--text-secondary);
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    line-clamp: 2;
-    overflow: hidden;
-    line-height: 1.4;
-  }
-
-  .link-icon {
-    width: 40px;
-    height: 40px;
-    background: var(--bg-tertiary);
-    border-radius: 4px;
+  .video-thumb-placeholder {
+    width: 100%;
+    aspect-ratio: 16/9;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: var(--bg-hover);
     color: var(--text-tertiary);
-    flex-shrink: 0;
 
     svg {
-      opacity: 0.6;
+      width: 32px;
+      height: 32px;
     }
   }
+
+  .video-play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0.9;
+    transition: all 0.2s;
+    color: #fff;
+    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
+  }
 }
 
-/* 适配发送方的背景，使其从气泡颜色中脱离出来，看起来像个独立的卡片 */
-.message-bubble.sent .link-message {
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+.video-placeholder,
+.video-loading,
+.video-unavailable {
+  min-width: 120px;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--bg-tertiary);
+  color: var(--text-tertiary);
+  font-size: 13px;
 
-  .link-title {
-    color: #333;
+  svg {
+    width: 24px;
+    height: 24px;
   }
+}
 
-  .link-desc {
-    color: #666;
-  }
-
-  .link-icon {
-    background: #f5f5f5;
+.video-loading {
+  .spin {
+    animation: spin 1s linear infinite;
   }
 }