更新

electron/services/dualReportService.ts

@@ -6,6 +6,9 @@ export interface DualReportMessage {
   isSentByMe: boolean
   createTime: number
   createTimeStr: string
+  localType?: number
+  emojiMd5?: string
+  emojiCdnUrl?: string
 }
 
 export interface DualReportFirstChat {
@@ -14,6 +17,9 @@ export interface DualReportFirstChat {
   content: string
   isSentByMe: boolean
   senderUsername?: string
+  localType?: number
+  emojiMd5?: string
+  emojiCdnUrl?: string
 }
 
 export interface DualReportStats {
@@ -46,6 +52,9 @@ export interface DualReportData {
     isSentByMe: boolean
     friendName: string
     firstThreeMessages: DualReportMessage[]
+    localType?: number
+    emojiMd5?: string
+    emojiCdnUrl?: string
   } | null
   stats: DualReportStats
   topPhrases: Array<{ phrase: string; count: number }>
@@ -526,55 +535,105 @@ class DualReportService {
       }
 
       this.reportProgress('获取首条聊天记录...', 15, onProgress)
-      const firstRows = await this.getFirstMessages(friendUsername, 3, 0, 0)
+      const firstRows = await this.getFirstMessages(friendUsername, 10, 0, 0)
       let firstChat: DualReportFirstChat | null = null
       if (firstRows.length > 0) {
         const row = firstRows[0]
         const createTime = parseInt(row.create_time || '0', 10) * 1000
-        const content = this.decodeMessageContent(row.message_content, row.compress_content)
+        const rawContent = this.decodeMessageContent(row.message_content, row.compress_content)
+        const localType = this.getRowInt(row, ['local_type', 'localType', 'type', 'msg_type', 'msgType'], 0)
+        let emojiMd5: string | undefined
+        let emojiCdnUrl: string | undefined
+        if (localType === 47) {
+          const stripped = this.stripEmojiOwnerPrefix(rawContent)
+          emojiMd5 = this.normalizeEmojiMd5(this.coerceString(this.getRecordField(row, ['emoji_md5', 'emojiMd5', 'md5']))) || this.extractEmojiMd5(stripped)
+          emojiCdnUrl = this.normalizeEmojiUrl(this.coerceString(this.getRecordField(row, ['emoji_cdn_url', 'emojiCdnUrl', 'cdnurl']))) || this.extractEmojiUrl(stripped)
+        }
+
         firstChat = {
           createTime,
           createTimeStr: this.formatDateTime(createTime),
-          content: String(content || ''),
+          content: String(rawContent || ''),
           isSentByMe: this.resolveIsSent(row, rawWxid, cleanedWxid),
-          senderUsername: row.sender_username || row.sender
+          senderUsername: row.sender_username || row.sender,
+          localType,
+          emojiMd5,
+          emojiCdnUrl
         }
       }
       const firstChatMessages: DualReportMessage[] = firstRows.map((row) => {
         const msgTime = parseInt(row.create_time || '0', 10) * 1000
-        const msgContent = this.decodeMessageContent(row.message_content, row.compress_content)
+        const rawContent = this.decodeMessageContent(row.message_content, row.compress_content)
+        const localType = this.getRowInt(row, ['local_type', 'localType', 'type', 'msg_type', 'msgType'], 0)
+        let emojiMd5: string | undefined
+        let emojiCdnUrl: string | undefined
+        if (localType === 47) {
+          const stripped = this.stripEmojiOwnerPrefix(rawContent)
+          emojiMd5 = this.normalizeEmojiMd5(this.coerceString(this.getRecordField(row, ['emoji_md5', 'emojiMd5', 'md5']))) || this.extractEmojiMd5(stripped)
+          emojiCdnUrl = this.normalizeEmojiUrl(this.coerceString(this.getRecordField(row, ['emoji_cdn_url', 'emojiCdnUrl', 'cdnurl']))) || this.extractEmojiUrl(stripped)
+        }
+
         return {
-          content: String(msgContent || ''),
+          content: String(rawContent || ''),
           isSentByMe: this.resolveIsSent(row, rawWxid, cleanedWxid),
           createTime: msgTime,
-          createTimeStr: this.formatDateTime(msgTime)
+          createTimeStr: this.formatDateTime(msgTime),
+          localType,
+          emojiMd5,
+          emojiCdnUrl
         }
       })
 
       let yearFirstChat: DualReportData['yearFirstChat'] = null
       if (!isAllTime) {
         this.reportProgress('获取今年首次聊天...', 20, onProgress)
-        const firstYearRows = await this.getFirstMessages(friendUsername, 3, startTime, endTime)
+        const firstYearRows = await this.getFirstMessages(friendUsername, 10, startTime, endTime)
         if (firstYearRows.length > 0) {
           const firstRow = firstYearRows[0]
           const createTime = parseInt(firstRow.create_time || '0', 10) * 1000
           const firstThreeMessages: DualReportMessage[] = firstYearRows.map((row) => {
             const msgTime = parseInt(row.create_time || '0', 10) * 1000
-            const msgContent = this.decodeMessageContent(row.message_content, row.compress_content)
+            const rawContent = this.decodeMessageContent(row.message_content, row.compress_content)
+            const localType = this.getRowInt(row, ['local_type', 'localType', 'type', 'msg_type', 'msgType'], 0)
+            let emojiMd5: string | undefined
+            let emojiCdnUrl: string | undefined
+            if (localType === 47) {
+              const stripped = this.stripEmojiOwnerPrefix(rawContent)
+              emojiMd5 = this.normalizeEmojiMd5(this.coerceString(this.getRecordField(row, ['emoji_md5', 'emojiMd5', 'md5']))) || this.extractEmojiMd5(stripped)
+              emojiCdnUrl = this.normalizeEmojiUrl(this.coerceString(this.getRecordField(row, ['emoji_cdn_url', 'emojiCdnUrl', 'cdnurl']))) || this.extractEmojiUrl(stripped)
+            }
+
             return {
-              content: String(msgContent || ''),
+              content: String(rawContent || ''),
               isSentByMe: this.resolveIsSent(row, rawWxid, cleanedWxid),
               createTime: msgTime,
-              createTimeStr: this.formatDateTime(msgTime)
+              createTimeStr: this.formatDateTime(msgTime),
+              localType,
+              emojiMd5,
+              emojiCdnUrl
             }
           })
+          const firstRowYear = firstYearRows[0]
+          const rawContentYear = this.decodeMessageContent(firstRowYear.message_content, firstRowYear.compress_content)
+          const localTypeYear = this.getRowInt(firstRowYear, ['local_type', 'localType', 'type', 'msg_type', 'msgType'], 0)
+          let emojiMd5Year: string | undefined
+          let emojiCdnUrlYear: string | undefined
+          if (localTypeYear === 47) {
+            const stripped = this.stripEmojiOwnerPrefix(rawContentYear)
+            emojiMd5Year = this.normalizeEmojiMd5(this.coerceString(this.getRecordField(firstRowYear, ['emoji_md5', 'emojiMd5', 'md5']))) || this.extractEmojiMd5(stripped)
+            emojiCdnUrlYear = this.normalizeEmojiUrl(this.coerceString(this.getRecordField(firstRowYear, ['emoji_cdn_url', 'emojiCdnUrl', 'cdnurl']))) || this.extractEmojiUrl(stripped)
+          }
+
           yearFirstChat = {
             createTime,
             createTimeStr: this.formatDateTime(createTime),
-            content: String(this.decodeMessageContent(firstRow.message_content, firstRow.compress_content) || ''),
+            content: String(rawContentYear || ''),
-            isSentByMe: this.resolveIsSent(firstRow, rawWxid, cleanedWxid),
+            isSentByMe: this.resolveIsSent(firstRowYear, rawWxid, cleanedWxid),
             friendName,
-            firstThreeMessages
+            firstThreeMessages,
+            localType: localTypeYear,
+            emojiMd5: emojiMd5Year,
+            emojiCdnUrl: emojiCdnUrlYear
           }
         }
       }
@@ -660,7 +719,6 @@ class DualReportService {
         count: p.count
       }))
 
-      // Attach extra stats to the data object (needs interface update if strictly typed, but data is flexible)
       const reportData: DualReportData = {
         year: reportYear,
         selfName: myName,
@@ -673,13 +731,12 @@ class DualReportService {
         yearFirstChat,
         stats,
         topPhrases,
-        // Append new C++ stats
         heatmap: cppData.heatmap,
         initiative: cppData.initiative,
         response: cppData.response,
         monthly: cppData.monthly,
         streak: cppData.streak
-      } as any // Use as any to bypass strict type check for new fields, or update interface
+      } as any
 
       this.reportProgress('双人报告生成完成', 100, onProgress)
       return { success: true, data: reportData }

src/pages/DualReportWindow.scss

@@ -31,9 +31,6 @@
   }
 
   .dual-info-card {
-    background: var(--ar-card-bg);
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
-    border-radius: 14px;
     padding: 16px;
 
     &.full {
@@ -61,14 +58,8 @@
   }
 
   .dual-message {
-    background: var(--ar-card-bg);
-    border-radius: 14px;
     padding: 14px;
 
-    &.received {
-      background: var(--ar-card-bg-hover);
-    }
-
     .message-meta {
       font-size: 12px;
       color: var(--ar-text-sub);
@@ -82,14 +73,11 @@
   }
 
   .first-chat-scene {
-    background: color-mix(in srgb, var(--ar-card-bg) 92%, #fff 8%);
-    border-radius: 16px;
     padding: 18px 16px 16px;
     color: var(--ar-text-main);
     position: relative;
     overflow: hidden;
     margin-top: 16px;
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
   }
 
   .first-chat-scene::before {
@@ -121,11 +109,50 @@
 
   .scene-message {
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
-    gap: 12px;
+    align-items: center;
+    margin-bottom: 32px;
+    width: 100%;
 
-    &.sent {
+    &.system {
+      margin: 16px 0;
+
+      .system-msg-content {
+        background: rgba(255, 255, 255, 0.05);
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.4);
+        text-align: center;
+        max-width: 80%;
+      }
+    }
+
+    .scene-meta {
+      font-size: 10px;
+      opacity: 0.65;
+      margin-bottom: 12px;
+      color: var(--text-tertiary);
+      text-align: center;
+      width: 100%;
+    }
+
+    .scene-body {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      max-width: 100%;
+    }
+
+    &.sent .scene-body {
       flex-direction: row-reverse;
+      justify-content: flex-start;
+    }
+
+    &.received .scene-body {
+      flex-direction: row;
+      justify-content: flex-start;
     }
   }
 
@@ -163,36 +190,42 @@
   }
 
   .scene-bubble {
-    background: color-mix(in srgb, var(--ar-card-bg-hover) 90%, #fff 10%);
     color: var(--ar-text-main);
     padding: 10px 14px;
-    border-radius: 12px;
     width: fit-content;
-    min-width: 68px;
+    min-width: 40px;
     max-width: 100%;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+    background: var(--ar-card-bg);
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
+    border-radius: 12px;
-  }
+    position: relative;
 
-  .scene-message.sent .scene-bubble {
+    &.no-bubble {
-    background: color-mix(in srgb, var(--primary) 12%, var(--ar-card-bg-hover));
+      background: transparent;
-    border-color: color-mix(in srgb, var(--primary) 26%, var(--bg-tertiary, rgba(0, 0, 0, 0.06)));
+      padding: 0;
-  }
+      box-shadow: none;
-
+    }
-  .scene-meta {
-    font-size: 11px;
-    opacity: 0.7;
-    margin-bottom: 4px;
-    color: var(--text-tertiary);
   }
 
   .scene-content {
-    font-size: 14px;
+    line-height: 1.5;
-    line-height: 1.65;
+    font-size: clamp(14px, 1.8vw, 16px);
+    word-break: break-all;
     white-space: pre-wrap;
-    word-break: break-word;
     overflow-wrap: break-word;
     line-break: auto;
+
+    .report-emoji-container {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 2px 0;
+
+      .report-emoji-img {
+        max-width: 120px;
+        max-height: 120px;
+        border-radius: 4px;
+        display: block;
+      }
+    }
   }
 
   .scene-avatar.fallback {
@@ -209,29 +242,47 @@
   }
 
   .dual-stat-grid {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(5, minmax(140px, 1fr));
+    flex-wrap: nowrap;
-    gap: 14px;
+    gap: clamp(60px, 10vw, 120px);
-    margin: 20px -28px 24px;
+    margin: 48px 0 32px;
-    padding: 0 28px;
+    padding: 0;
-    overflow: visible;
+    justify-content: center;
+    align-items: flex-start;
+
+    &.bottom {
+      margin-top: 0;
+      margin-bottom: 48px;
+      gap: clamp(40px, 6vw, 80px);
+    }
   }
 
   .dual-stat-card {
-    background: var(--ar-card-bg);
+    display: flex;
-    border-radius: 14px;
+    flex-direction: column;
-    padding: 14px 12px;
+    align-items: center;
     text-align: center;
+    min-width: 140px;
+    max-width: 280px;
   }
 
   .stat-num {
-    font-size: clamp(20px, 2.8vw, 30px);
+    font-size: clamp(36px, 6vw, 64px);
+    font-weight: 800;
     font-variant-numeric: tabular-nums;
+    color: var(--ar-primary);
+    line-height: 1;
     white-space: nowrap;
+
+    &.small {
+      font-size: clamp(24px, 4vw, 40px);
+    }
   }
 
   .stat-unit {
-    font-size: 12px;
+    font-size: 14px;
+    margin-top: 4px;
+    opacity: 0.8;
   }
 
   .dual-stat-card.long .stat-num {
@@ -247,15 +298,12 @@
   }
 
   .emoji-card {
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.08));
-    border-radius: 16px;
     padding: 18px 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
     justify-content: center;
-    background: var(--ar-card-bg);
 
     img {
       width: 64px;
@@ -283,257 +331,564 @@
     padding: 24px 0;
   }
 
-  // --- New Initiative Section (Tug of War) ---
   .initiative-container {
-    padding: 0 20px;
+    padding: 32px 0;
+    width: 100%;
+    background: transparent;
+    border: none;
   }
 
   .initiative-bar-wrapper {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 32px;
-    margin-top: 24px;
+    width: 100%;
-    background: var(--ar-card-bg);
+    padding: 24px 0;
-    padding: 16px;
+    margin-bottom: 24px;
-    border-radius: 20px;
+    position: relative;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }
 
   .initiative-side {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
+    gap: 12px;
-    min-width: 60px;
+    min-width: 80px;
+    z-index: 2;
 
     .avatar-placeholder {
-      width: 44px;
+      width: 54px;
-      height: 44px;
+      height: 54px;
-      border-radius: 50%;
+      border-radius: 18px;
       background: var(--bg-tertiary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: var(--ar-text-sub);
-      font-size: 14px;
+      font-size: 16px;
-      border: 2px solid var(--ar-card-bg);
+      border: 1.5px solid rgba(255, 255, 255, 0.15);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
 
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        border-radius: 50%;
       }
     }
 
     .count {
-      font-size: 13px;
+      font-size: 11px;
-      font-weight: 600;
+      font-weight: 500;
+      opacity: 0.4;
       color: var(--ar-text-sub);
     }
 
     .percent {
-      font-size: 12px;
+      font-size: 14px;
       color: var(--ar-text-main);
-      opacity: 0.85;
+      font-weight: 800;
-      font-weight: 600;
+      opacity: 0.9;
     }
   }
 
   .initiative-progress {
     flex: 1;
-    height: 12px;
+    height: 1px; // 线条样式
-    background: var(--bg-tertiary, #eee);
-    border-radius: 6px;
-    overflow: hidden;
-    display: flex;
     position: relative;
+    display: flex;
+    align-items: center;
 
-    .bar-segment {
+    .line-bg {
-      height: 100%;
+      position: absolute;
-      transition: width 1s ease-out;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg,
+          transparent 0%,
+          rgba(255, 255, 255, 0.1) 20%,
+          rgba(255, 255, 255, 0.1) 80%,
+          transparent 100%);
+    }
 
-      &.left {
+    .initiative-indicator {
-        background: var(--ar-primary);
+      position: absolute;
-      }
+      width: 8px;
+      height: 8px;
+      background: #fff;
+      border-radius: 50%;
+      transform: translateX(-50%);
+      transition: left 1.5s cubic-bezier(0.16, 1, 0.3, 1);
+      box-shadow:
+        0 0 10px #fff,
+        0 0 20px rgba(255, 255, 255, 0.5),
+        0 0 30px var(--ar-primary);
+      z-index: 3;
 
-      &.right {
+      &::before {
-        background: var(--ar-accent);
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        animation: pulse 2s infinite;
       }
     }
   }
 
-  .initiative-ratio {
-    font-size: 20px;
-    font-weight: 800;
-    color: var(--ar-text-main);
-    text-align: center;
-    margin-bottom: 2px;
-  }
-
   .initiative-desc {
-    text-align: center;
-    font-size: 13px;
-    color: var(--ar-text-sub);
-    margin-top: 12px;
-  }
-
-
-  // --- New Response Speed Section (Grid + Icons) ---
-  .response-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 16px;
-    margin-top: 24px;
-    padding: 0 10px;
-  }
-
-  .response-card {
-    background: var(--ar-card-bg);
-    border-radius: 18px;
-    padding: 24px 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
-    transition: transform 0.2s;
-
-    &:hover {
-      transform: translateY(-2px);
-      background: var(--ar-card-bg-hover);
-    }
-
-    .icon-box {
-      width: 48px;
-      height: 48px;
-      border-radius: 14px;
-      background: rgba(7, 193, 96, 0.08);
-      color: var(--ar-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 4px;
-
-      svg {
-        width: 26px;
-        height: 26px;
-      }
-    }
-
-    &.fastest .icon-box {
-      background: rgba(242, 170, 0, 0.08);
-      color: var(--ar-accent);
-    }
-
-    &.sample .icon-box {
-      background: rgba(16, 174, 255, 0.08);
-      color: #10AEFF;
-    }
-
-    .label {
-      font-size: 13px;
-      color: var(--ar-text-sub);
-      font-weight: 500;
-    }
-
-    .value {
-      font-size: 32px;
-      font-weight: 700;
-      color: var(--ar-text-main);
-      line-height: 1;
-
-      span {
-        font-size: 14px;
-        font-weight: 500;
-        color: var(--ar-text-sub);
-        margin-left: 2px;
-      }
-    }
-  }
-
-  .response-note {
-    margin-top: 14px;
-    max-width: none;
     text-align: center;
     font-size: 14px;
     color: var(--ar-text-sub);
+    letter-spacing: 1px;
+    opacity: 0.6;
+    background: transparent;
+    padding: 0;
+    margin: 0 auto;
+    font-style: italic;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 0.8;
+    }
+
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
   }
 
 
-  // --- New Streak Section (Flame) ---
+  .response-pulse-container {
-  .streak-container {
+    width: 100%;
+    padding: 80px 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .pulse-visual {
+    position: relative;
+    width: 420px;
+    height: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pulse-hub {
+    position: relative;
+    z-index: 5;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 160px;
+    height: 160px;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 75%);
+    border-radius: 50%;
+    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
+
+    .label {
+      font-size: 13px;
+      color: var(--ar-text-sub);
+      opacity: 0.6;
+      margin-bottom: 6px;
+      letter-spacing: 2px;
+    }
+
+    .value {
+      font-size: 54px;
+      font-weight: 950;
+      color: #fff;
+      line-height: 1;
+      text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
+
+      span {
+        font-size: 18px;
+        font-weight: 500;
+        margin-left: 4px;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .pulse-node {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 4;
+    animation: floatNode 4s ease-in-out infinite;
+
+    &.left {
+      left: 0;
+      transform: translateX(-15%);
+    }
+
+    &.right {
+      right: 0;
+      transform: translateX(15%);
+      animation-delay: -2s;
+    }
+
+    .label {
+      font-size: 12px;
+      color: var(--ar-text-sub);
+      opacity: 0.5;
+      margin-bottom: 4px;
+    }
+
+    .value {
+      font-size: 24px;
+      font-weight: 800;
+      color: var(--ar-text-main);
+      opacity: 0.95;
+
+      span {
+        font-size: 13px;
+        margin-left: 2px;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .pulse-ripple {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1.5px solid rgba(255, 255, 255, 0.08);
+    border-radius: 50%;
+    animation: ripplePulse 8s linear infinite;
+    pointer-events: none;
+
+    &.one {
+      animation-delay: 0s;
+    }
+
+    &.two {
+      animation-delay: 2.5s;
+    }
+
+    &.three {
+      animation-delay: 5s;
+    }
+  }
+
+  @keyframes ripplePulse {
+    0% {
+      width: 140px;
+      height: 140px;
+      opacity: 0.5;
+    }
+
+    100% {
+      width: 700px;
+      height: 700px;
+      opacity: 0;
+    }
+  }
+
+  @keyframes floatNode {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-16px);
+    }
+  }
+
+  .response-note {
+    text-align: center;
+    font-size: 14px;
+    color: var(--ar-text-sub);
+    opacity: 0.5;
     margin-top: 32px;
+    font-style: italic;
+    max-width: none;
+    line-height: 1.6;
+  }
+
+  .streak-spark-visual.premium {
+    width: 100%;
+    height: 400px;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    overflow: visible;
+
+    .spark-ambient-glow {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 600px;
+      height: 480px;
+      background: radial-gradient(circle at center, rgba(242, 170, 0, 0.04) 0%, transparent 70%);
+      filter: blur(60px);
+      z-index: 1;
+      pointer-events: none;
+    }
+  }
+
+  .spark-core-wrapper {
+    position: relative;
+    width: 220px;
+    height: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    animation: flameSway 6s ease-in-out infinite;
+    transform-origin: bottom center;
+  }
+
+  .spark-flame-outer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(ellipse at 50% 85%, rgba(242, 170, 0, 0.15) 0%, transparent 75%);
+    border-radius: 50% 50% 20% 20% / 80% 80% 30% 30%;
+    filter: blur(25px);
+    animation: flickerOuter 4s infinite alternate;
+  }
+
+  .spark-flame-inner {
+    position: absolute;
+    bottom: 20%;
+    width: 140px;
+    height: 180px;
+    background: radial-gradient(ellipse at 50% 90%, rgba(255, 215, 0, 0.2) 0%, transparent 80%);
+    border-radius: 50% 50% 30% 30% / 85% 85% 25% 25%;
+    filter: blur(12px);
+    animation: flickerInner 3s infinite alternate-reverse;
+  }
+
+  .spark-core {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     padding-bottom: 20px;
+
+    .spark-days {
+      font-size: 84px;
+      font-weight: 800;
+      color: rgba(255, 255, 255, 0.9);
+      line-height: 1;
+      letter-spacing: -1px;
+      text-shadow:
+        0 0 15px rgba(255, 255, 255, 0.4),
+        0 8px 30px rgba(0, 0, 0, 0.3);
+    }
+
+    .spark-label {
+      font-size: 14px;
+      font-weight: 800;
+      color: rgba(255, 255, 255, 0.4);
+      letter-spacing: 6px;
+      margin-top: 12px;
+      text-indent: 6px;
+    }
   }
 
-  .streak-flame {
+  .streak-bridge.premium {
-    font-size: 72px;
+    width: 100%;
-    margin-bottom: 6px;
+    max-width: 500px;
-    filter: drop-shadow(0 4px 12px rgba(242, 170, 0, 0.3));
+    display: flex;
-    animation: flamePulse 2s ease-in-out infinite;
+    align-items: center;
-    transform-origin: center bottom;
+    gap: 0;
+    margin-top: -20px;
+    z-index: 20;
+
+    .bridge-date {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      width: 100px;
+
+      span {
+        font-size: 13px;
+        color: var(--ar-text-sub);
+        opacity: 0.6;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+        position: absolute;
+        top: 24px;
+        white-space: nowrap;
+      }
+
+      .date-orb {
+        width: 6px;
+        height: 6px;
+        background: #fff;
+        border-radius: 50%;
+        box-shadow: 0 0 12px var(--ar-accent);
+        border: 1px solid rgba(252, 170, 0, 0.5);
+      }
+    }
+
+    .bridge-line {
+      flex: 1;
+      height: 40px;
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      .line-string {
+        width: 100%;
+        height: 1.5px;
+        background: linear-gradient(90deg,
+            rgba(242, 170, 0, 0) 0%,
+            rgba(242, 170, 0, 0.6) 20%,
+            rgba(242, 170, 0, 0.6) 80%,
+            rgba(242, 170, 0, 0) 100%);
+        mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
+      }
+
+      .line-glow {
+        position: absolute;
+        width: 100%;
+        height: 8px;
+        background: radial-gradient(ellipse at center, rgba(242, 170, 0, 0.2) 0%, transparent 80%);
+        filter: blur(4px);
+        animation: sparkFlicker 2s infinite alternate;
+      }
+    }
   }
 
-  @keyframes flamePulse {
+  .spark-ember {
+    position: absolute;
+    background: #FFD700;
+    border-radius: 50%;
+    filter: blur(0.5px);
+    box-shadow: 0 0 6px #F2AA00;
+    opacity: 0;
+    z-index: 4;
+
+    &.one {
+      width: 3px;
+      height: 3px;
+      left: 46%;
+      animation: emberRise 5s infinite 0s;
+    }
+
+    &.two {
+      width: 2px;
+      height: 2px;
+      left: 53%;
+      animation: emberRise 4s infinite 1.2s;
+    }
+
+    &.three {
+      width: 4px;
+      height: 4px;
+      left: 50%;
+      animation: emberRise 6s infinite 2.5s;
+    }
+
+    &.four {
+      width: 2.5px;
+      height: 2.5px;
+      left: 48%;
+      animation: emberRise 5.5s infinite 3.8s;
+    }
+  }
+
+  @keyframes flameSway {
+
+    0%,
+    100% {
+      transform: rotate(-1deg) skewX(-1deg);
+    }
+
+    50% {
+      transform: rotate(1.5deg) skewX(1deg);
+    }
+  }
+
+  @keyframes flickerOuter {
+
+    0%,
+    100% {
+      opacity: 0.15;
+      filter: blur(25px);
+    }
+
+    50% {
+      opacity: 0.25;
+      filter: blur(30px);
+    }
+  }
+
+  @keyframes flickerInner {
 
     0%,
     100% {
       transform: scale(1);
-      filter: drop-shadow(0 4px 12px rgba(242, 170, 0, 0.3));
+      opacity: 0.2;
     }
 
     50% {
-      transform: scale(1.05);
+      transform: scale(1.08);
-      filter: drop-shadow(0 6px 16px rgba(242, 170, 0, 0.5));
+      opacity: 0.3;
     }
   }
 
-  .streak-days {
+  @keyframes emberRise {
-    font-size: 90px;
+    0% {
-    font-weight: 800;
+      transform: translateY(100px) scale(1);
-    color: var(--ar-text-main);
+      opacity: 0;
-    line-height: 0.9;
+    }
-    margin: 10px 0 20px;
-    text-align: center;
 
-    span {
+    20% {
-      font-size: 24px;
+      opacity: 0.8;
-      font-weight: 600;
+    }
-      color: var(--ar-text-sub);
+
-      margin-left: 6px;
+    80% {
-      vertical-align: middle;
+      opacity: 0.3;
+    }
+
+    100% {
+      transform: translateY(-260px) scale(0.4);
+      opacity: 0;
     }
   }
 
-  .streak-range {
+  @keyframes sparkFlicker {
-    background: var(--ar-card-bg);
-    padding: 8px 20px;
-    border-radius: 100px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--ar-text-sub);
-    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-  }
 
-  .emoji-count {
+    0%,
-    font-size: 12px;
+    100% {
-    color: var(--ar-text-sub);
+      transform: scale(1);
-    opacity: 0.85;
+      opacity: 0.9;
+      filter: brightness(1);
+    }
+
+    50% {
+      transform: scale(1.03);
+      opacity: 1;
+      filter: brightness(1.2);
+    }
   }
 
   @media (max-width: 960px) {
-    .response-grid {
+    .pulse-visual {
-      grid-template-columns: 1fr;
+      transform: scale(0.85);
-      padding: 0;
     }
 
     .scene-avatar {
@@ -551,4 +906,4 @@
       min-width: 56px;
     }
   }
-}
+}

src/pages/DualReportWindow.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { Clock, Zap, MessageCircle, MessageSquare, Type, Image as ImageIcon, Mic, Smile } from 'lucide-react'
 import ReportHeatmap from '../components/ReportHeatmap'
 import ReportWordCloud from '../components/ReportWordCloud'
 import './AnnualReportWindow.scss'
@@ -10,6 +9,9 @@ interface DualReportMessage {
   isSentByMe: boolean
   createTime: number
   createTimeStr: string
+  localType?: number
+  emojiMd5?: string
+  emojiCdnUrl?: string
 }
 
 interface DualReportData {
@@ -25,6 +27,9 @@ interface DualReportData {
     content: string
     isSentByMe: boolean
     senderUsername?: string
+    localType?: number
+    emojiMd5?: string
+    emojiCdnUrl?: string
   } | null
   firstChatMessages?: DualReportMessage[]
   yearFirstChat?: {
@@ -34,6 +39,9 @@ interface DualReportData {
     isSentByMe: boolean
     friendName: string
     firstThreeMessages: DualReportMessage[]
+    localType?: number
+    emojiMd5?: string
+    emojiCdnUrl?: string
   } | null
   stats: {
     totalMessages: number
@@ -51,7 +59,7 @@ interface DualReportData {
   topPhrases: Array<{ phrase: string; count: number }>
   heatmap?: number[][]
   initiative?: { initiated: number; received: number }
-  response?: { avg: number; fastest: number; count: number }
+  response?: { avg: number; fastest: number; slowest: number; count: number }
   monthly?: Record<string, number>
   streak?: { days: number; startDate: string; endDate: string }
 }
@@ -188,11 +196,11 @@ function DualReportWindow() {
   const initiatedPercent = initiativeTotal > 0 ? (reportData.initiative!.initiated / initiativeTotal) * 100 : 0
   const receivedPercent = initiativeTotal > 0 ? (reportData.initiative!.received / initiativeTotal) * 100 : 0
   const statItems = [
-    { label: '总消息数', value: stats.totalMessages, icon: MessageSquare, color: '#07C160' },
+    { label: '总消息数', value: stats.totalMessages, color: '#07C160' },
-    { label: '总字数', value: stats.totalWords, icon: Type, color: '#10AEFF' },
+    { label: '总字数', value: stats.totalWords, color: '#10AEFF' },
-    { label: '图片', value: stats.imageCount, icon: ImageIcon, color: '#FFC300' },
+    { label: '图片', value: stats.imageCount, color: '#FFC300' },
-    { label: '语音', value: stats.voiceCount, icon: Mic, color: '#FA5151' },
+    { label: '语音', value: stats.voiceCount, color: '#FA5151' },
-    { label: '表情', value: stats.emojiCount, icon: Smile, color: '#FA9D3B' },
+    { label: '表情', value: stats.emojiCount, color: '#FA9D3B' },
   ]
 
   const decodeEntities = (text: string) => (
@@ -204,6 +212,20 @@ function DualReportWindow() {
       .replace(/&apos;/g, "'")
   )
 
+  const filterDisplayMessages = (messages: DualReportMessage[], maxActual: number = 3) => {
+    let actualCount = 0
+    const result: DualReportMessage[] = []
+    for (const msg of messages) {
+      const isSystem = msg.localType === 10000 || msg.localType === 10002
+      if (!isSystem) {
+        if (actualCount >= maxActual) break
+        actualCount++
+      }
+      result.push(msg)
+    }
+    return result
+  }
+
   const stripCdata = (text: string) => text.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, '$1')
   const compactMessageText = (text: string) => (
     text
@@ -225,7 +247,18 @@ function DualReportWindow() {
     return ''
   }
 
-  const formatMessageContent = (content?: string) => {
+  const formatMessageContent = (content?: string, localType?: number) => {
+    const isSystemMsg = localType === 10000 || localType === 10002
+    if (!isSystemMsg) {
+      if (localType === 3) return '[图片]'
+      if (localType === 34) return '[语音]'
+      if (localType === 43) return '[视频]'
+      if (localType === 47) return '[表情]'
+      if (localType === 42) return '[名片]'
+      if (localType === 48) return '[位置]'
+      if (localType === 49) return '[链接/文件]'
+    }
+
     const raw = compactMessageText(String(content || '').trim())
     if (!raw) return '（空）'
 
@@ -251,7 +284,25 @@ function DualReportWindow() {
       return compactMessageText(decodeEntities(stripped))
     }
 
-    return '（多媒体/卡片消息）'
+    return '[多媒体消息]'
+  }
+
+  const ReportMessageItem = ({ msg }: { msg: DualReportMessage }) => {
+    if (msg.localType === 47 && (msg.emojiMd5 || msg.emojiCdnUrl)) {
+      const emojiUrl = msg.emojiCdnUrl || (msg.emojiMd5 ? `https://emoji.qpic.cn/wx_emoji/${msg.emojiMd5}/0` : '')
+      if (emojiUrl) {
+        return (
+          <div className="report-emoji-container">
+            <img src={emojiUrl} alt="表情" className="report-emoji-img" onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+              (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
+            }} />
+            <span style={{ display: 'none' }}>[表情]</span>
+          </div>
+        )
+      }
+    }
+    return <span>{formatMessageContent(msg.content, msg.localType)}</span>
   }
   const formatFullDate = (timestamp: number) => {
     const d = new Date(timestamp)
@@ -300,6 +351,50 @@ function DualReportWindow() {
     return <div className="scene-avatar fallback">{getSceneAvatarFallback(isSentByMe)}</div>
   }
 
+  const renderMessageList = (messages: DualReportMessage[]) => {
+    const displayMsgs = filterDisplayMessages(messages)
+    let lastTime = 0
+    const TIME_THRESHOLD = 5 * 60 * 1000 // 5 分钟
+
+    return displayMsgs.map((msg, idx) => {
+      const isSystem = msg.localType === 10000 || msg.localType === 10002
+      const showTime = idx === 0 || (msg.createTime - lastTime > TIME_THRESHOLD)
+      lastTime = msg.createTime
+
+      if (isSystem) {
+        return (
+          <div key={idx} className="scene-message system">
+            {showTime && (
+              <div className="scene-meta">
+                {formatFullDate(msg.createTime).split(' ')[1]}
+              </div>
+            )}
+            <div className="system-msg-content">
+              <ReportMessageItem msg={msg} />
+            </div>
+          </div>
+        )
+      }
+      return (
+        <div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
+          {showTime && (
+            <div className="scene-meta">
+              {formatFullDate(msg.createTime).split(' ')[1]}
+            </div>
+          )}
+          <div className="scene-body">
+            {renderSceneAvatar(msg.isSentByMe)}
+            <div className="scene-content-wrapper">
+              <div className={`scene-bubble ${msg.localType === 47 ? 'no-bubble' : ''}`}>
+                <div className="scene-content"><ReportMessageItem msg={msg} /></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    })
+  }
+
   return (
     <div className="annual-report-window dual-report-window">
       <div className="drag-region" />
@@ -335,24 +430,12 @@ function DualReportWindow() {
                 <div className="scene-subtitle">{formatFullDate(firstChat.createTime).split(' ')[0]}</div>
                 {firstChatMessages.length > 0 ? (
                   <div className="scene-messages">
-                    {firstChatMessages.map((msg, idx) => (
+                    {renderMessageList(firstChatMessages)}
-                      <div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
-                        {renderSceneAvatar(msg.isSentByMe)}
-                        <div className="scene-content-wrapper">
-                          <div className="scene-meta">
-                            {formatFullDate(msg.createTime).split(' ')[1]}
-                          </div>
-                          <div className="scene-bubble">
-                            <div className="scene-content">{formatMessageContent(msg.content)}</div>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
                   </div>
                 ) : (
                   <div className="hero-desc" style={{ textAlign: 'center' }}>暂无消息详情</div>
                 )}
-                <div className="scene-footer" style={{ marginTop: '20px', textAlign: 'center', fontSize: '12px', opacity: 0.6 }}>
+                <div className="scene-footer" style={{ marginTop: '20px', textAlign: 'center', fontSize: '14px', opacity: 0.6 }}>
                   距离今天已经 {daysSince} 天
                 </div>
               </div>
@@ -361,7 +444,7 @@ function DualReportWindow() {
             )}
           </section>
 
-          {yearFirstChat ? (
+          {yearFirstChat && (!firstChat || yearFirstChat.createTime !== firstChat.createTime) ? (
             <section className="section">
               <div className="label-text">第一段对话</div>
               <h2 className="hero-title">
@@ -371,19 +454,7 @@ function DualReportWindow() {
                 <div className="scene-title">久别重逢</div>
                 <div className="scene-subtitle">{formatFullDate(yearFirstChat.createTime).split(' ')[0]}</div>
                 <div className="scene-messages">
-                  {yearFirstChat.firstThreeMessages.map((msg, idx) => (
+                  {renderMessageList(yearFirstChat.firstThreeMessages)}
-                    <div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
-                      {renderSceneAvatar(msg.isSentByMe)}
-                      <div className="scene-content-wrapper">
-                        <div className="scene-meta">
-                          {formatFullDate(msg.createTime).split(' ')[1]}
-                        </div>
-                        <div className="scene-bubble">
-                          <div className="scene-content">{formatMessageContent(msg.content)}</div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
                 </div>
               </div>
             </section>
@@ -395,7 +466,7 @@ function DualReportWindow() {
               <h2 className="hero-title">作息规律</h2>
               {mostActive && (
                 <p className="hero-desc active-time dual-active-time">
-                  {'\u5728'} <span className="hl">{mostActive.weekday} {String(mostActive.hour).padStart(2, '0')}:00</span> {'\u6700\u6d3b\u8dc3\uff08'}{mostActive.value}{'\u6761\uff09'}
+                  在 <span className="hl">{mostActive.weekday} {String(mostActive.hour).padStart(2, '0')}:00</span> 最活跃（{mostActive.value}条）
                 </p>
               )}
               <ReportHeatmap data={reportData.heatmap} />
@@ -407,81 +478,107 @@ function DualReportWindow() {
               <div className="label-text">主动性</div>
               <h2 className="hero-title">情感的天平</h2>
               <div className="initiative-container">
-                <div className="initiative-desc">
-                  {reportData.initiative.initiated > reportData.initiative.received ? '每一个话题都是你对TA的在意' : 'TA总是那个率先打破沉默的人'}
-                </div>
                 <div className="initiative-bar-wrapper">
                   <div className="initiative-side">
                     <div className="avatar-placeholder">
-                      {reportData.selfAvatarUrl ? <img src={reportData.selfAvatarUrl} alt="me-avatar" /> : '\u6211'}
+                      {reportData.selfAvatarUrl ? <img src={reportData.selfAvatarUrl} alt="me-avatar" /> : '我'}
                     </div>
-                    <div className="count">{reportData.initiative.initiated}{'\u6b21'}</div>
+                    <div className="count">{reportData.initiative.initiated}次</div>
                     <div className="percent">{initiatedPercent.toFixed(1)}%</div>
                   </div>
                   <div className="initiative-progress">
+                    <div className="line-bg" />
                     <div
-                      className="bar-segment left"
+                      className="initiative-indicator"
-                      style={{ width: `${initiatedPercent}%` }}
+                      style={{ left: `${initiatedPercent}%` }}
-                    />
-                    <div
-                      className="bar-segment right"
-                      style={{ width: `${receivedPercent}%` }}
                     />
                   </div>
                   <div className="initiative-side">
                     <div className="avatar-placeholder">
                       {reportData.friendAvatarUrl ? <img src={reportData.friendAvatarUrl} alt="friend-avatar" /> : reportData.friendName.substring(0, 1)}
                     </div>
-                    <div className="count">{reportData.initiative.received}{'\u6b21'}</div>
+                    <div className="count">{reportData.initiative.received}次</div>
                     <div className="percent">{receivedPercent.toFixed(1)}%</div>
                   </div>
                 </div>
+                <div className="initiative-desc">
+                  {reportData.initiative.initiated > reportData.initiative.received ? '每一个话题都是你对TA的在意' : 'TA总是那个率先打破沉默的人'}
+                </div>
               </div>
             </section>
           )}
 
           {reportData.response && (
             <section className="section">
-              <div className="label-text">回复速度</div>
+              <div className="label-text">回应速度</div>
-              <h2 className="hero-title">{'\u79d2\u56de\uff0c\u662f\u56e0\u4e3a\u5728\u4e4e'}</h2>
+              <h2 className="hero-title">你说，我在</h2>
-              <div className="response-grid">
+              <div className="response-pulse-container">
-                <div className="response-card">
+                <div className="pulse-visual">
-                  <div className="icon-box">
+                  <div className="pulse-ripple one" />
-                    <Clock size={24} />
+                  <div className="pulse-ripple two" />
+                  <div className="pulse-ripple three" />
+
+                  <div className="pulse-node left">
+                    <div className="label">最快回复</div>
+                    <div className="value">{reportData.response.fastest}<span>秒</span></div>
                   </div>
-                  <div className="label">{'\u5e73\u5747\u56de\u590d'}</div>
+
-                  <div className="value">{Math.round(reportData.response.avg / 60)}<span>{'\u5206'}</span></div>
+                  <div className="pulse-hub">
-                </div>
+                    <div className="label">平均回复</div>
-                <div className="response-card fastest">
+                    <div className="value">{Math.round(reportData.response.avg / 60)}<span>分</span></div>
-                  <div className="icon-box">
-                    <Zap size={24} />
                   </div>
-                  <div className="label">{'\u6700\u5feb\u56de\u590d'}</div>
+
-                  <div className="value">{reportData.response.fastest}<span>{'\u79d2'}</span></div>
+                  <div className="pulse-node right">
-                </div>
+                    <div className="label">最慢回复</div>
-                <div className="response-card sample">
+                    <div className="value">
-                  <div className="icon-box">
+                      {reportData.response.slowest > 3600
-                    <MessageCircle size={24} />
+                        ? (reportData.response.slowest / 3600).toFixed(1)
+                        : Math.round(reportData.response.slowest / 60)}
+                      <span>{reportData.response.slowest > 3600 ? '时' : '分'}</span>
+                    </div>
                   </div>
-                  <div className="label">{'\u7edf\u8ba1\u6837\u672c'}</div>
-                  <div className="value">{reportData.response.count}<span>{'\u6b21'}</span></div>
                 </div>
               </div>
               <p className="hero-desc response-note">
-                {`\u5171\u7edf\u8ba1 ${reportData.response.count} \u6b21\u6709\u6548\u56de\u590d\uff0c\u5e73\u5747\u7ea6 ${responseAvgMinutes} \u5206\u949f\uff0c\u6700\u5feb ${reportData.response.fastest} \u79d2\u3002`}
+                {`在 ${reportData.response.count} 次互动中，平均约 ${responseAvgMinutes} 分钟，最快 ${reportData.response.fastest} 秒。`}
               </p>
             </section>
           )}
 
           {reportData.streak && (
             <section className="section">
-              <div className="label-text">{'\u804a\u5929\u706b\u82b1'}</div>
+              <div className="label-text">聊天火花</div>
-              <h2 className="hero-title">{'\u6700\u957f\u8fde\u7eed\u804a\u5929'}</h2>
+              <h2 className="hero-title">最长连续聊天</h2>
-              <div className="streak-container">
+              <div className="streak-spark-visual premium">
-                <div className="streak-flame">{'\uD83D\uDD25'}</div>
+                <div className="spark-ambient-glow" />
-                <div className="streak-days">{reportData.streak.days}<span>{'\u5929'}</span></div>
+
-                <div className="streak-range">
+                <div className="spark-ember one" />
-                  {reportData.streak.startDate} ~ {reportData.streak.endDate}
+                <div className="spark-ember two" />
+                <div className="spark-ember three" />
+                <div className="spark-ember four" />
+
+                <div className="spark-core-wrapper">
+                  <div className="spark-flame-outer" />
+                  <div className="spark-flame-inner" />
+                  <div className="spark-core">
+                    <div className="spark-days">{reportData.streak.days}</div>
+                    <div className="spark-label">DAYS</div>
+                  </div>
+                </div>
+
+                <div className="streak-bridge premium">
+                  <div className="bridge-date start">
+                    <div className="date-orb" />
+                    <span>{reportData.streak.startDate}</span>
+                  </div>
+                  <div className="bridge-line">
+                    <div className="line-glow" />
+                    <div className="line-string" />
+                  </div>
+                  <div className="bridge-date end">
+                    <span>{reportData.streak.endDate}</span>
+                    <div className="date-orb" />
+                  </div>
                 </div>
               </div>
             </section>
@@ -497,50 +594,48 @@ function DualReportWindow() {
             <div className="label-text">年度统计</div>
             <h2 className="hero-title">{yearTitle}数据概览</h2>
             <div className="dual-stat-grid">
-              {statItems.map((item) => {
+              {statItems.slice(0, 2).map((item) => (
-                const valueText = item.value.toLocaleString()
+                <div key={item.label} className="dual-stat-card">
-                const isLong = valueText.length > 7
+                  <div className="stat-num">{item.value.toLocaleString()}</div>
-                const Icon = item.icon
+                  <div className="stat-unit">{item.label}</div>
-                return (
+                </div>
-                  <div key={item.label} className={`dual-stat-card ${isLong ? 'long' : ''}`} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+              ))}
-                    <div className="stat-icon" style={{
+            </div>
-                      width: '40px',
+            <div className="dual-stat-grid bottom">
-                      height: '40px',
+              {statItems.slice(2).map((item) => (
-                      borderRadius: '12px',
+                <div key={item.label} className="dual-stat-card">
-                      background: `${item.color}15`,
+                  <div className="stat-num small">{item.value.toLocaleString()}</div>
-                      color: item.color,
+                  <div className="stat-unit">{item.label}</div>
-                      display: 'flex',
+                </div>
-                      alignItems: 'center',
+              ))}
-                      justifyContent: 'center',
-                      marginBottom: '4px'
-                    }}>
-                      <Icon size={20} />
-                    </div>
-                    <div className="stat-num">{valueText}</div>
-                    <div className="stat-unit">{item.label}</div>
-                  </div>
-                )
-              })}
             </div>
 
             <div className="emoji-row">
               <div className="emoji-card">
                 <div className="emoji-title">我常用的表情</div>
                 {myEmojiUrl ? (
-                  <img src={myEmojiUrl} alt="my-emoji" />
+                  <img src={myEmojiUrl} alt="my-emoji" onError={(e) => {
-                ) : (
+                    (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
-                  <div className="emoji-placeholder">{stats.myTopEmojiMd5 || '暂无'}</div>
+                    (e.target as HTMLImageElement).style.display = 'none';
-                )}
+                  }} />
-                <div className="emoji-count">{stats.myTopEmojiCount ? `${stats.myTopEmojiCount}\u6b21` : '\u6682\u65e0\u7edf\u8ba1'}</div>
+                ) : null}
+                <div className="emoji-placeholder" style={myEmojiUrl ? { display: 'none' } : undefined}>
+                  {stats.myTopEmojiMd5 || '暂无'}
+                </div>
+                <div className="emoji-count">{stats.myTopEmojiCount ? `${stats.myTopEmojiCount}次` : '暂无统计'}</div>
               </div>
               <div className="emoji-card">
                 <div className="emoji-title">{reportData.friendName}常用的表情</div>
                 {friendEmojiUrl ? (
-                  <img src={friendEmojiUrl} alt="friend-emoji" />
+                  <img src={friendEmojiUrl} alt="friend-emoji" onError={(e) => {
-                ) : (
+                    (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
-                  <div className="emoji-placeholder">{stats.friendTopEmojiMd5 || '暂无'}</div>
+                    (e.target as HTMLImageElement).style.display = 'none';
-                )}
+                  }} />
-                <div className="emoji-count">{stats.friendTopEmojiCount ? `${stats.friendTopEmojiCount}\u6b21` : '\u6682\u65e0\u7edf\u8ba1'}</div>
+                ) : null}
+                <div className="emoji-placeholder" style={friendEmojiUrl ? { display: 'none' } : undefined}>
+                  {stats.friendTopEmojiMd5 || '暂无'}
+                </div>
+                <div className="emoji-count">{stats.friendTopEmojiCount ? `${stats.friendTopEmojiCount}次` : '暂无统计'}</div>
               </div>
             </div>
           </section>