feat: 一些更新

src/pages/AnnualReportWindow.scss

@@ -1279,3 +1279,134 @@
   color: var(--ar-text-sub) !important;
   text-align: center;
 }
+// 曾经的好朋友 视觉效果
+.lost-friend-visual {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    margin: 64px auto 48px;
+    position: relative;
+    max-width: 480px;
+
+    .avatar-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        z-index: 2;
+
+        .avatar-label {
+            font-size: 13px;
+            color: var(--ar-text-sub);
+            font-weight: 500;
+            opacity: 0.6;
+        }
+
+        &.sender {
+            animation: fadeInRight 1s ease-out backwards;
+        }
+
+        &.receiver {
+            animation: fadeInLeft 1s ease-out backwards;
+        }
+    }
+
+    .fading-line {
+        position: relative;
+        flex: 1;
+        height: 2px;
+        min-width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .line-path {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to right,
+                    var(--ar-primary) 0%,
+                    rgba(var(--ar-primary-rgb), 0.4) 50%,
+                    rgba(var(--ar-primary-rgb), 0.05) 100%);
+            border-radius: 2px;
+        }
+
+        .line-glow {
+            position: absolute;
+            inset: -4px 0;
+            background: linear-gradient(to right,
+                    rgba(var(--ar-primary-rgb), 0.2) 0%,
+                    transparent 100%);
+            filter: blur(8px);
+            pointer-events: none;
+        }
+
+        .flow-particle {
+            position: absolute;
+            width: 40px;
+            height: 2px;
+            background: linear-gradient(to right, transparent, var(--ar-primary), transparent);
+            border-radius: 2px;
+            opacity: 0;
+            animation: flowAcross 4s infinite linear;
+        }
+    }
+}
+
+.hero-desc.fading {
+    opacity: 0.7;
+    font-style: italic;
+    font-size: 16px;
+    margin-top: 32px;
+    line-height: 1.8;
+    letter-spacing: 0.05em;
+    animation: fadeIn 1.5s ease-out 0.5s backwards;
+}
+
+@keyframes flowAcross {
+    0% {
+        left: -20%;
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+
+    90% {
+        opacity: 0.1;
+    }
+
+    100% {
+        left: 120%;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

src/pages/AnnualReportWindow.tsx

@@ -71,6 +71,20 @@ interface AnnualReportData {
   socialInitiative?: { initiatedChats: number; receivedChats: number; initiativeRate: number } | null
   responseSpeed?: { avgResponseTime: number; fastestFriend: string; fastestTime: number } | null
   topPhrases?: { phrase: string; count: number }[]
+  snsStats?: {
+    totalPosts: number
+    typeCounts?: Record<string, number>
+    topLikers: { username: string; displayName: string; avatarUrl?: string; count: number }[]
+    topLiked: { username: string; displayName: string; avatarUrl?: string; count: number }[]
+  }
+  lostFriend: {
+    username: string
+    displayName: string
+    avatarUrl?: string
+    earlyCount: number
+    lateCount: number
+    periodDesc: string
+  } | null
 }
 
 interface SectionInfo {
@@ -274,6 +288,8 @@ function AnnualReportWindow() {
     responseSpeed: useRef<HTMLElement>(null),
     topPhrases: useRef<HTMLElement>(null),
     ranking: useRef<HTMLElement>(null),
+    sns: useRef<HTMLElement>(null),
+    lostFriend: useRef<HTMLElement>(null),
     ending: useRef<HTMLElement>(null),
   }
 
@@ -373,10 +389,16 @@ function AnnualReportWindow() {
     if (reportData.responseSpeed) {
       sections.push({ id: 'responseSpeed', name: '回应速度', ref: sectionRefs.responseSpeed })
     }
+    if (reportData.lostFriend) {
+      sections.push({ id: 'lostFriend', name: '曾经的好朋友', ref: sectionRefs.lostFriend })
+    }
     if (reportData.topPhrases && reportData.topPhrases.length > 0) {
       sections.push({ id: 'topPhrases', name: '年度常用语', ref: sectionRefs.topPhrases })
     }
     sections.push({ id: 'ranking', name: '好友排行', ref: sectionRefs.ranking })
+    if (reportData.snsStats && reportData.snsStats.totalPosts > 0) {
+      sections.push({ id: 'sns', name: '朋友圈', ref: sectionRefs.sns })
+    }
     sections.push({ id: 'ending', name: '尾声', ref: sectionRefs.ending })
     return sections
   }
@@ -741,7 +763,7 @@ function AnnualReportWindow() {
     )
   }
 
-  const { year, totalMessages, totalFriends, coreFriends, monthlyTopFriends, peakDay, longestStreak, activityHeatmap, midnightKing, selfAvatarUrl, mutualFriend, socialInitiative, responseSpeed, topPhrases } = reportData
+  const { year, totalMessages, totalFriends, coreFriends, monthlyTopFriends, peakDay, longestStreak, activityHeatmap, midnightKing, selfAvatarUrl, mutualFriend, socialInitiative, responseSpeed, topPhrases, lostFriend } = reportData
   const topFriend = coreFriends[0]
   const mostActive = getMostActiveTime(activityHeatmap.data)
   const socialStoryName = topFriend?.displayName || '好友'
@@ -1024,6 +1046,41 @@ function AnnualReportWindow() {
             </section>
           )}
 
+          {/* 曾经的好朋友 */}
+          {lostFriend && (
+            <section className="section" ref={sectionRefs.lostFriend}>
+              <div className="label-text">曾经的好朋友</div>
+              <h2 className="hero-title">{lostFriend.displayName}</h2>
+              <div className="big-stat">
+                <span className="stat-num">{formatNumber(lostFriend.earlyCount)}</span>
+                <span className="stat-unit">条消息</span>
+              </div>
+              <p className="hero-desc">
+                在 <span className="hl">{lostFriend.periodDesc}</span>
+                <br />你们曾有聊不完的话题
+              </p>
+              <div className="lost-friend-visual">
+                <div className="avatar-group sender">
+                  <Avatar url={lostFriend.avatarUrl} name={lostFriend.displayName} size="lg" />
+                  <span className="avatar-label">TA</span>
+                </div>
+                <div className="fading-line">
+                  <div className="line-path" />
+                  <div className="line-glow" />
+                  <div className="flow-particle" />
+                </div>
+                <div className="avatar-group receiver">
+                  <Avatar url={selfAvatarUrl} name="我" size="lg" />
+                  <span className="avatar-label">我</span>
+                </div>
+              </div>
+              <p className="hero-desc fading">
+                人类发明后悔
+                <br />来证明拥有的珍贵
+              </p>
+            </section>
+          )}
+
           {/* 年度常用语 - 词云 */}
           {topPhrases && topPhrases.length > 0 && (
             <section className="section" ref={sectionRefs.topPhrases}>
@@ -1041,6 +1098,57 @@ function AnnualReportWindow() {
             </section>
           )}
 
+          {/* 朋友圈 */}
+          {reportData.snsStats && reportData.snsStats.totalPosts > 0 && (
+            <section className="section" ref={sectionRefs.sns}>
+              <div className="label-text">朋友圈</div>
+              <h2 className="hero-title">记录生活时刻</h2>
+              <p className="hero-desc">
+                这一年，你发布了
+              </p>
+              <div className="big-stat">
+                <span className="stat-num">{reportData.snsStats.totalPosts}</span>
+                <span className="stat-unit">条朋友圈</span>
+              </div>
+
+              <div className="sns-stats-container" style={{ display: 'flex', gap: '60px', marginTop: '40px', justifyContent: 'center' }}>
+                {reportData.snsStats.topLikers.length > 0 && (
+                  <div className="sns-sub-stat" style={{ textAlign: 'left' }}>
+                    <h3 className="sub-title" style={{ fontSize: '18px', marginBottom: '16px', opacity: 0.8, borderBottom: '1px solid currentColor', paddingBottom: '8px' }}>更关心你的Ta</h3>
+                    <div className="mini-ranking">
+                      {reportData.snsStats.topLikers.slice(0, 3).map((u, i) => (
+                        <div key={i} className="mini-rank-item" style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px' }}>
+                          <Avatar url={u.avatarUrl} name={u.displayName} size="sm" />
+                          <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <span className="name" style={{ fontSize: '15px', fontWeight: 500, maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{u.displayName}</span>
+                          </div>
+                          <span className="count hl" style={{ fontSize: '14px', marginLeft: 'auto' }}>{u.count}赞</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {reportData.snsStats.topLiked.length > 0 && (
+                  <div className="sns-sub-stat" style={{ textAlign: 'left' }}>
+                    <h3 className="sub-title" style={{ fontSize: '18px', marginBottom: '16px', opacity: 0.8, borderBottom: '1px solid currentColor', paddingBottom: '8px' }}>你最关心的Ta</h3>
+                    <div className="mini-ranking">
+                      {reportData.snsStats.topLiked.slice(0, 3).map((u, i) => (
+                        <div key={i} className="mini-rank-item" style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px' }}>
+                          <Avatar url={u.avatarUrl} name={u.displayName} size="sm" />
+                          <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <span className="name" style={{ fontSize: '15px', fontWeight: 500, maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{u.displayName}</span>
+                          </div>
+                          <span className="count hl" style={{ fontSize: '14px', marginLeft: 'auto' }}>{u.count}赞</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </section>
+          )}
+
           {/* 好友排行 */}
           <section className="section" ref={sectionRefs.ranking}>
             <div className="label-text">好友排行</div>

src/pages/SnsPage.scss

@@ -547,10 +547,41 @@
         .sns-content-wrapper {
             flex: 1;
             display: flex;
+            flex-direction: column;
             overflow: hidden;
             position: relative;
         }
 
+        .sns-notice-banner {
+            margin: 16px 24px 0 24px;
+            padding: 10px 16px;
+            background: rgba(var(--accent-color-rgb), 0.08);
+            border-radius: 10px;
+            border: 1px solid rgba(var(--accent-color-rgb), 0.2);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--accent-color);
+            font-size: 13px;
+            font-weight: 500;
+            animation: banner-slide-down 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+            svg {
+                flex-shrink: 0;
+            }
+        }
+
+        @keyframes banner-slide-down {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
 
         .sns-content {
             flex: 1;

src/pages/SnsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
-import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon, Zap, Download, ChevronRight } from 'lucide-react'
+import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon, Zap, Download, ChevronRight, AlertTriangle } from 'lucide-react'
 import { Avatar } from '../components/Avatar'
 import { ImagePreview } from '../components/ImagePreview'
 import JumpToDateDialog from '../components/JumpToDateDialog'
@@ -412,6 +412,10 @@ export default function SnsPage() {
                     </div>
 
                     <div className="sns-content-wrapper">
+                        <div className="sns-notice-banner">
+                            <AlertTriangle size={16} />
+                            <span>由于技术限制，当前无法解密显示部分图片与视频等加密资源文件</span>
+                        </div>
                         <div className="sns-content custom-scrollbar" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
                             <div className="posts-list">
                                 {loadingNewer && (