年度报告优化

2026-04-22 15:09:04 +00:00 · 2026-04-19 18:34:41 +08:00
parent 4de4a74eca
commit ef2bbe5c22
12 changed files with 982 additions and 181 deletions
--- a/src/pages/AnnualReportWindow.tsx
+++ b/src/pages/AnnualReportWindow.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { X } from 'lucide-react'
+import html2canvas from 'html2canvas'
 import {
  finishBackgroundTask,
  isBackgroundTaskCancelRequested,
@@ -37,7 +38,13 @@ interface AnnualReportData {
  midnightKing: { displayName: string; count: number; percentage: number } | null
  selfAvatarUrl?: string
  mutualFriend?: { displayName: string; avatarUrl?: string; sentCount: number; receivedCount: number; ratio: number } | null
-  socialInitiative?: { initiatedChats: number; receivedChats: number; initiativeRate: number } | null
+  socialInitiative?: {
+    initiatedChats: number
+    receivedChats: number
+    initiativeRate: number
+    topInitiatedFriend?: string
+    topInitiatedCount?: number
+  } | null
  responseSpeed?: { avgResponseTime: number; fastestFriend: string; fastestTime: number } | null
  topPhrases?: { phrase: string; count: number }[]
  snsStats?: {
@@ -56,11 +63,21 @@ interface AnnualReportData {
  } | null
 }

-const DecodeText = ({ value, active }: { value: string | number, active: boolean }) => {
-  const [display, setDisplay] = useState('000')
+const DecodeText = ({
+  value,
+  active
+}: {
+  value: string | number
+  active: boolean
+}) => {
  const strVal = String(value)
+  const [display, setDisplay] = useState(strVal)
  const decodedRef = useRef(false)

+  useEffect(() => {
+    setDisplay(strVal)
+  }, [strVal])
+
  useEffect(() => {
    if (!active) {
      decodedRef.current = false
@@ -93,6 +110,7 @@ const DecodeText = ({ value, active }: { value: string | number, active: boolean

 function AnnualReportWindow() {
  const navigate = useNavigate()
+  const containerRef = useRef<HTMLDivElement | null>(null)
  const [reportData, setReportData] = useState<AnnualReportData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
@@ -102,6 +120,10 @@ function AnnualReportWindow() {
  const TOTAL_SCENES = 11
  const [currentScene, setCurrentScene] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
+  const p0CanvasRef = useRef<HTMLCanvasElement | null>(null)
+  const s3LayoutRef = useRef<HTMLDivElement | null>(null)
+  const s3ListRef = useRef<HTMLDivElement | null>(null)
+  const [s3LineVars, setS3LineVars] = useState<React.CSSProperties>({})
  
  // 提取长图逻辑变量
  const [buttonText, setButtonText] = useState('EXTRACT RECORD')
@@ -230,6 +252,139 @@ function AnnualReportWindow() {
    }
  }, [currentScene, isLoading, error, reportData, goToScene])

+  useEffect(() => {
+    if (isLoading || error || !reportData || currentScene !== 0) return
+
+    const canvas = p0CanvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    let rafId = 0
+    let particles: Array<{
+      x: number
+      y: number
+      vx: number
+      vy: number
+      size: number
+      alpha: number
+    }> = []
+
+    const buildParticle = () => ({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      vx: (Math.random() - 0.5) * 0.3,
+      vy: (Math.random() - 0.5) * 0.3,
+      size: Math.random() * 1.5 + 0.5,
+      alpha: Math.random() * 0.5 + 0.1
+    })
+
+    const initParticles = () => {
+      const count = Math.max(36, Math.floor((canvas.width * canvas.height) / 15000))
+      particles = Array.from({ length: count }, () => buildParticle())
+    }
+
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth
+      canvas.height = window.innerHeight
+      initParticles()
+    }
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i]
+        p.x += p.vx
+        p.y += p.vy
+
+        if (p.x < 0 || p.x > canvas.width) p.vx *= -1
+        if (p.y < 0 || p.y > canvas.height) p.vy *= -1
+
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha})`
+        ctx.fill()
+
+        for (let j = i + 1; j < particles.length; j++) {
+          const q = particles[j]
+          const dx = p.x - q.x
+          const dy = p.y - q.y
+          const distance = Math.sqrt(dx * dx + dy * dy)
+
+          if (distance < 150) {
+            const lineAlpha = (1 - distance / 150) * 0.15
+            ctx.beginPath()
+            ctx.moveTo(p.x, p.y)
+            ctx.lineTo(q.x, q.y)
+            ctx.strokeStyle = `rgba(255, 255, 255, ${lineAlpha})`
+            ctx.lineWidth = 0.5
+            ctx.stroke()
+          }
+        }
+      }
+
+      rafId = requestAnimationFrame(animate)
+    }
+
+    resizeCanvas()
+    window.addEventListener('resize', resizeCanvas)
+    animate()
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas)
+      cancelAnimationFrame(rafId)
+    }
+  }, [isLoading, error, reportData, currentScene])
+
+  useEffect(() => {
+    if (isLoading || error || !reportData) return
+
+    let rafId = 0
+
+    const updateS3Line = () => {
+      cancelAnimationFrame(rafId)
+      rafId = requestAnimationFrame(() => {
+        const root = document.querySelector('.annual-report-window') as HTMLElement | null
+        const layout = s3LayoutRef.current
+        const list = s3ListRef.current
+        if (!root || !layout || !list) return
+
+        const rootRect = root.getBoundingClientRect()
+        const layoutRect = layout.getBoundingClientRect()
+        const listRect = list.getBoundingClientRect()
+        if (listRect.height <= 0 || layoutRect.width <= 0) return
+
+        const leftOffset = Math.max(8, Math.min(16, layoutRect.width * 0.018))
+        const lineLeft = layoutRect.left - rootRect.left + leftOffset
+        const lineCenterTop = listRect.top - rootRect.top + listRect.height / 2
+
+        setS3LineVars({
+          ['--s3-line-left' as '--s3-line-left']: `${lineLeft}px`,
+          ['--s3-line-top' as '--s3-line-top']: `${lineCenterTop}px`,
+          ['--s3-line-height' as '--s3-line-height']: `${listRect.height}px`
+        } as React.CSSProperties)
+      })
+    }
+
+    updateS3Line()
+    window.addEventListener('resize', updateS3Line)
+
+    const resizeObserver = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(() => updateS3Line())
+      : null
+
+    if (resizeObserver) {
+      if (s3LayoutRef.current) resizeObserver.observe(s3LayoutRef.current)
+      if (s3ListRef.current) resizeObserver.observe(s3ListRef.current)
+    }
+
+    return () => {
+      cancelAnimationFrame(rafId)
+      window.removeEventListener('resize', updateS3Line)
+      resizeObserver?.disconnect()
+    }
+  }, [isLoading, error, reportData, currentScene])
+
  const getSceneClass = (index: number) => {
    if (index === currentScene) return 'scene active'
    if (index < currentScene) return 'scene prev'
@@ -240,23 +395,89 @@ function AnnualReportWindow() {
    navigate('/home')
  }

-  const handleExtract = () => {
-    if (isExtracting) return
+  const formatFileYearLabel = (year: number) => (year === 0 ? '历史以来' : String(year))
+
+  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+  const handleExtract = async () => {
+    if (isExtracting || !reportData || !containerRef.current) return
+
+    const dirResult = await window.electronAPI.dialog.openDirectory({
+      title: '选择导出文件夹',
+      properties: ['openDirectory', 'createDirectory']
+    })
+    if (dirResult.canceled || !dirResult.filePaths?.[0]) return
+
+    const root = containerRef.current
+    const previousScene = currentScene
+    const sceneNames = [
+      'THE_ARCHIVE',
+      'VOLUME',
+      'NOCTURNE',
+      'GRAVITY_CENTERS',
+      'TIME_WAVEFORM',
+      'MUTUAL_RESONANCE',
+      'SOCIAL_KINETICS',
+      'THE_SPARK',
+      'FADING_SIGNALS',
+      'LEXICON',
+      'EXTRACTION'
+    ]
+
    setIsExtracting(true)
    setButtonText('EXTRACTING...')
-    setTimeout(() => {
+
+    try {
+      const images: Array<{ name: string; dataUrl: string }> = []
+      root.classList.add('exporting-scenes')
+
+      for (let i = 0; i < TOTAL_SCENES; i++) {
+        setCurrentScene(i)
+        setButtonText(`EXTRACTING ${i + 1}/${TOTAL_SCENES}`)
+        await wait(2000)
+
+        const canvas = await html2canvas(root, {
+          backgroundColor: '#050505',
+          scale: 2,
+          useCORS: true,
+          allowTaint: true,
+          logging: false,
+          onclone: (clonedDoc) => {
+            clonedDoc.querySelector('.annual-report-window')?.classList.add('exporting-scenes')
+          }
+        })
+
+        images.push({
+          name: `P${String(i).padStart(2, '0')}_${sceneNames[i] || `SCENE_${i}`}.png`,
+          dataUrl: canvas.toDataURL('image/png')
+        })
+      }
+
+      const yearFilePrefix = formatFileYearLabel(reportData.year)
+      const exportResult = await window.electronAPI.annualReport.exportImages({
+        baseDir: dirResult.filePaths[0],
+        folderName: `${yearFilePrefix}年度报告_分页面`,
+        images
+      })
+
+      if (!exportResult.success) {
+        throw new Error(exportResult.error || '导出失败')
+      }
+
      setButtonText('SAVED TO DEVICE')
+    } catch (e) {
+      alert(`导出失败: ${String(e)}`)
+      setButtonText('EXTRACT RECORD')
+    } finally {
+      root.classList.remove('exporting-scenes')
+      setCurrentScene(previousScene)
+      await wait(80)
+
      setTimeout(() => {
        setButtonText('EXTRACT RECORD')
        setIsExtracting(false)
-      }, 3000)
-    }, 1200)
-    
-    // Fallback: Notify user that full export is disabled in cinematic mode
-    // You could wire this up to html2canvas of the current visible screen if needed.
-    setTimeout(() => {
-      alert("提示：当前使用 cinematic 模式，全尺寸长图导出已被替换为当前屏幕快照。\n若需导出长列表报告，请在设置中切换回旧版视图。")
-    }, 1500)
+      }, 2200)
+    }
  }

  if (isLoading) {
@@ -294,13 +515,23 @@ function AnnualReportWindow() {
  }

  const yearTitle = reportData.year === 0 ? '历史以来' : String(reportData.year)
+  const finalYearLabel = reportData.year === 0 ? 'ALL YEARS' : String(reportData.year)
  const topFriends = reportData.coreFriends.slice(0, 3)
+  const endingPostCount = reportData.snsStats?.totalPosts ?? 0
+  const endingReceivedChats = reportData.socialInitiative?.receivedChats ?? 0
+  const endingTopPhrase = reportData.topPhrases?.[0]?.phrase || ''
+  const endingTopPhraseCount = reportData.topPhrases?.[0]?.count ?? 0

  return (
-    <div className="annual-report-window" data-scene={currentScene}>
+    <div className="annual-report-window" data-scene={currentScene} style={s3LineVars} ref={containerRef}>
      <div className="top-controls">
        <button className="close-btn" title="关闭页面" onClick={handleClose}><X size={16} /></button>
      </div>
+
+      <div className="p0-bg-layer">
+        <canvas ref={p0CanvasRef} className="p0-particle-canvas" />
+        <div className="p0-center-glow" />
+      </div>
      
      <div className="film-grain"></div>
      
@@ -316,25 +547,25 @@ function AnnualReportWindow() {
        ))}
      </div>
      
-      <div className="swipe-hint">SCROLL OR SWIPE</div>
+      <div className="swipe-hint">向下滑动以继续</div>

      {/* S0: THE ARCHIVE */}
      <div className={getSceneClass(0)} id="scene-0">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">THE ARCHIVE</div>
+          <div className="reveal-inner serif scene0-cn-tag">一切的起点</div>
        </div>
-        <div className="reveal-wrap">
+        <div className="reveal-wrap title-year-wrap">
          <div className="reveal-inner serif title-year delay-1">{yearTitle}</div>
        </div>
-        <div className="reveal-wrap desc-text" style={{ marginTop: '6vh' }}>
-          <div className="reveal-inner serif delay-2">记忆是散落的碎片。<br/>而数据，是贯穿它们的流线。</div>
+        <div className="reveal-wrap desc-text p0-desc">
+          <div className="reveal-inner serif delay-2 p0-desc-inner">那些被岁月悄悄掩埋的对话<br/>原来都在这里，等待一个春天。</div>
        </div>
      </div>

      {/* S1: VOLUME */}
      <div className={getSceneClass(1)} id="scene-1">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">VOLUME</div>
+          <div className="reveal-inner serif scene0-cn-tag">消息报告</div>
        </div>
        <div className="reveal-wrap">
          <div className="reveal-inner title-data delay-1 num-display">
@@ -343,7 +574,7 @@ function AnnualReportWindow() {
        </div>
        <div className="reveal-wrap desc-text">
          <div className="reveal-inner serif delay-2">
-            这是你在这一段时间的发声总数。<br/>在这片数据深海，你曾向世界抛出 <strong className="num-display" style={{color: '#fff'}}>{reportData.totalMessages.toLocaleString()}</strong> 个锚点。
+            这一年，你说出了 <strong className="num-display" style={{color: '#fff'}}>{reportData.totalMessages.toLocaleString()}</strong> 句话。<br/>无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。
          </div>
        </div>
      </div>
@@ -351,7 +582,7 @@ function AnnualReportWindow() {
      {/* S2: NOCTURNE */}
      <div className={getSceneClass(2)} id="scene-2">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">NOCTURNE</div>
+          <div className="reveal-inner serif scene0-cn-tag">深夜</div>
        </div>
        <div className="reveal-wrap">
          <div className="reveal-inner serif title-time delay-1">
@@ -359,18 +590,17 @@ function AnnualReportWindow() {
          </div>
        </div>
        <div className="reveal-wrap">
-          <div className="reveal-inner mono delay-1" style={{ fontSize: '1rem', color: 'var(--c-text-muted)', margin: '1vh 0' }}>
-            NIGHT
+          <br/>
+          <div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '1rem', color: 'var(--c-text-muted)', margin: '1vh 0' }}>
+            在深夜陪你聊天最多的人
          </div>
        </div>
        <div className="reveal-wrap desc-text">
          <div className="reveal-inner serif delay-2">
-            白天的你属于喧嚣。<br/>
-            但在夜色中，你与深夜之王交换了 
-            <strong className="num-display" style={{color: '#fff', margin: '0 10px', fontSize: '1.5rem'}}>
+            梦境之外，你与{reportData.midnightKing ? reportData.midnightKing.displayName : '00:00'}共同醒着度过了许多个夜晚<br/>
+            “曾有<strong className="num-display" style={{color: '#fff', margin: '0 10px', fontSize: '1.5rem'}}>
               <DecodeText value={(reportData.midnightKing?.count || 0).toLocaleString()} active={currentScene === 2} />
-            </strong> 
-            次脆弱的清醒。
+            </strong>条消息在那些无人知晓的夜里，代替星光照亮了彼此”
          </div>
        </div>
      </div>
@@ -378,15 +608,15 @@ function AnnualReportWindow() {
      {/* S3: GRAVITY CENTERS */}
      <div className={getSceneClass(3)} id="scene-3">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">GRAVITY CENTERS</div>
+          <div className="reveal-inner serif scene0-cn-tag">聊天排行</div>
        </div>

-        <div className="s3-layout">
+        <div className="s3-layout" ref={s3LayoutRef}>
          <div className="reveal-wrap s3-subtitle-wrap">
-            <div className="reveal-inner serif delay-1 s3-subtitle">那些改变你时间流速的引力中心。</div>
+            <div className="reveal-inner serif delay-1 s3-subtitle">漫长的岁月里，是他们，让你的时间有了实实在在的重量。</div>
          </div>

-          <div className="contact-list">
+          <div className="contact-list" ref={s3ListRef}>
            {topFriends.map((f, i) => (
              <div className="reveal-wrap s3-row-wrap" key={f.username}>
                <div className={`reveal-inner c-item delay-${i + 1}`}>
@@ -394,7 +624,7 @@ function AnnualReportWindow() {
                    <div className="serif c-name" style={{ color: i === 0 ? '#fff' : i === 1 ? '#bbb' : '#666' }}>
                      {f.displayName}
                    </div>
-                    <div className="mono c-sub">FILE TRANSFER</div>
+                    <div className="mono c-sub num-display">TOP {i + 1}</div>
                  </div>
                  <div className="c-count num-display" style={{ color: i === 0 ? '#fff' : '#888' }}>
                    {f.messageCount.toLocaleString()}
@@ -418,10 +648,10 @@ function AnnualReportWindow() {
      {/* S4: TIME WAVEFORM (Audio/Heartbeat timeline visual) */}
      <div className={getSceneClass(4)} id="scene-4">
        <div className="reveal-wrap en-tag" style={{ zIndex: 10 }}>
-          <div className="reveal-inner mono">TIME WAVEFORM</div>
+          <div className="reveal-inner serif scene0-cn-tag">TIME WAVEFORM</div>
        </div>
        <div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '15vh', left: '50vw', transform: 'translateX(-50%)', textAlign: 'center', zIndex: 10, marginTop: 0, width: '100%' }}>
-          <div className="reveal-inner serif delay-1" style={{color: 'rgba(255,255,255,0.6)', fontSize: '1.2rem', letterSpacing: '0.1em'}}>十二簇记忆的声纹，<br />每一次波缓都有回响。</div>
+          <div className="reveal-inner serif delay-1" style={{color: 'rgba(255,255,255,0.6)', fontSize: '1.2rem', letterSpacing: '0.1em'}}>十二个月的更迭，就像走过了一万个冬天<br />时间在变，但好在总有人陪在身边。</div>
        </div>

        {reportData.monthlyTopFriends.length > 0 ? (
@@ -487,7 +717,7 @@ function AnnualReportWindow() {
      {/* S5: MUTUAL RESONANCE (Mutual friend) */}
      <div className={getSceneClass(5)} id="scene-5">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">MUTUAL RESONANCE</div>
+          <div className="reveal-inner serif scene0-cn-tag">回应的艺术</div>
        </div>
        {reportData.mutualFriend ? (
          <>
@@ -498,89 +728,102 @@ function AnnualReportWindow() {
            </div>
            
            <div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', left: '15vw' }}>
-               <div className="reveal-inner mono delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>SEND</div>
+               <div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>发出</div>
               <div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.sentCount.toLocaleString()} active={currentScene === 5} /></div>
            </div>
            <div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', right: '15vw', textAlign: 'right' }}>
-               <div className="reveal-inner mono delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>RECEIVE</div>
+               <div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>收到</div>
               <div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.receivedCount.toLocaleString()} active={currentScene === 5} /></div>
            </div>

            <div className="reveal-wrap desc-text" style={{ position: 'absolute', bottom: '20vh' }}>
              <div className="reveal-inner serif delay-3">
-                平衡率高达 <strong className="num-display" style={{color: '#fff', fontSize: '1.5rem'}}>{reportData.mutualFriend.ratio}</strong>
-                <br/><span style={{ fontSize: '1rem', color: 'rgba(255,255,255,0.5)', marginTop: '15px', display: 'block' }}>最完美的双向奔赴。</span>
+                你们之间收发的消息高达 <strong className="num-display" style={{color: '#fff', fontSize: '1.5rem'}}>{reportData.mutualFriend.ratio}</strong> 的平衡率
+                <br/>
+                <span style={{ fontSize: '1rem', color: 'rgba(255,255,255,0.5)', marginTop: '15px', display: 'block' }}>“你抛出的每一句话，都落在了对方的心里。<br/>所谓重逢，就是我走向你的时候，你也在走向我。”</span>
              </div>
            </div>
          </>
        ) : (
-          <div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">今年依然在独自发出回声。<br/>没有找到绝对平衡的双向奔赴。</div></div>
+          <div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">今年似乎独自咽下了很多话。<br/>请相信，分别和孤独总会迎来终结，你终会遇到那个懂你的TA。</div></div>
        )}
      </div>

      {/* S6: SOCIAL KINETICS */}
      <div className={getSceneClass(6)} id="scene-6">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">SOCIAL KINETICS</div>
+          <div className="reveal-inner serif scene0-cn-tag">我的风格</div>
        </div>
        {reportData.socialInitiative || reportData.responseSpeed ? (
          <div style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
              {reportData.socialInitiative && (
                <div className="reveal-wrap" style={{ position: 'absolute', top: '28vh', left: '15vw', width: '38vw', textAlign: 'left' }}>
-                  <div className="reveal-inner mono delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>INITIATIVE</div>
+                  <div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>我的主动性</div>
                  <div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(4.5rem, 8vw, 7rem)', color: '#fff', lineHeight: '1', margin: '2vh 0' }}>
-                     {reportData.socialInitiative.initiativeRate}%
+                    {reportData.socialInitiative.initiativeRate}%
                  </div>
                  <div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
-                    占据了绝对的主导。你主动发起了 <strong className="num-display" style={{color: '#fff', fontSize: '1.4rem'}}><DecodeText value={reportData.socialInitiative.initiatedChats} active={currentScene === 6} /></strong> 次联络。<br/>
-                    <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>社交关系的齿轮，全靠你来转动。</span>
+                    <div style={{ fontSize: '1.3rem', color: 'rgba(255,255,255,0.92)', marginBottom: '0.6vh' }}>
+                      你的聊天开场大多由你发起。
+                    </div>
+                    {reportData.socialInitiative.topInitiatedFriend && (reportData.socialInitiative.topInitiatedCount || 0) > 0 ? (
+                      <div style={{ marginBottom: '0.6vh' }}>
+                        其中<strong style={{color: '#fff'}}>{reportData.socialInitiative.topInitiatedFriend}</strong>是你最常联系的人，
+                        有<strong className="num-display" style={{color: '#fff', fontSize: '1.2rem', margin: '0 4px'}}>{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}</strong>次，是你先忍不住敲响了对方的门
+                      </div>
+                    ) : (
+                      <div style={{ marginBottom: '0.6vh' }}>
+                        你主动发起了<strong className="num-display" style={{color: '#fff', fontSize: '1.2rem', margin: '0 4px'}}>{reportData.socialInitiative.initiatedChats.toLocaleString()}</strong>次联络。
+                      </div>
+                    )}
+                    <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>想见一个人的心，总是走在时间的前面。</span>
                  </div>
                </div>
              )}
              {reportData.responseSpeed && (
                <div className="reveal-wrap" style={{ position: 'absolute', bottom: '22vh', right: '15vw', width: '38vw', textAlign: 'right' }}>
-                  <div className="reveal-inner mono delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em' }}>RESONANCE</div>
+                  <div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em' }}>回应速度</div>
                  <div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(3.5rem, 6vw, 5rem)', color: '#ccc', lineHeight: '1', margin: '2vh 0' }}>
                    <DecodeText value={reportData.responseSpeed.fastestTime} active={currentScene === 6} />S
                  </div>
                  <div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
-                    来自 <strong style={{color: '#fff'}}>{reportData.responseSpeed.fastestFriend}</strong> 的极速响应区。<br/>
-                    <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>在发出信号的瞬间，就得到了回响。</span>
+                    <strong style={{color: '#fff'}}>{reportData.responseSpeed.fastestFriend}</strong> 回你的消息总是很快。<br/>
+                    <span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>这世上最让人安心的默契，莫过于一句 "我在"。</span>
                  </div>
                </div>
              )}
          </div>
        ) : (
-           <div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">暂无波动的引力场。</div></div>
+           <div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">暂无数据。</div></div>
        )}
      </div>

      {/* S7: THE SPARK */}
      <div className={getSceneClass(7)} id="scene-7">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">THE SPARK</div>
+          <div className="reveal-inner serif scene0-cn-tag">聊天火花</div>
        </div>
        
        {reportData.longestStreak ? (
           <div className="reveal-wrap" style={{ position: 'absolute', top: '35vh', left: '15vw', textAlign: 'left' }}>
-             <div className="reveal-inner mono delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>LONGEST STREAK</div>
+             <div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>最长连续聊天</div>
             <div className="reveal-inner serif delay-2" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#fff', letterSpacing: '0.02em' }}>
                {reportData.longestStreak.friendName}
             </div>
             <div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
-                沉浸式连环漫游 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}><DecodeText value={reportData.longestStreak.days} active={currentScene === 7} /></strong> 天。
+                你们曾连续 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}><DecodeText value={reportData.longestStreak.days} active={currentScene === 7} /></strong> 天，聊到忘记了时间,<br/>那些舍不得说再见的日夜，连成了最漫长的春天。
             </div>
           </div>
        ) : null}

        {reportData.peakDay ? (
           <div className="reveal-wrap" style={{ position: 'absolute', bottom: '30vh', right: '15vw', textAlign: 'right' }}>
-             <div className="reveal-inner mono delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>PEAK DAY</div>
+             <div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>最热烈的一天</div>
             <div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', color: '#fff', letterSpacing: '0.02em' }}>
                {reportData.peakDay.date}
             </div>
             <div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
-                单日巅峰爆发 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}>{reportData.peakDay.messageCount}</strong> 次碰撞。
+                “这一天，你们留下了 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}>{reportData.peakDay.messageCount}</strong> 句话。<br/>好像要把积攒了很久的想念，一天全都说完。”
             </div>
           </div>
        ) : null}
@@ -593,32 +836,51 @@ function AnnualReportWindow() {
      {/* S8: FADING SIGNALS */}
      <div className={getSceneClass(8)} id="scene-8">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">FADING SIGNALS</div>
+          <div className="reveal-inner serif scene0-cn-tag">曾经的好友</div>
        </div>
        {reportData.lostFriend ? (
-          <>
-            <div className="reveal-wrap" style={{ position: 'absolute', top: '35vh' }}>
-              <div className="reveal-inner serif delay-1" style={{ fontSize: 'clamp(3.5rem, 9vw, 6rem)', color: 'rgba(255,255,255,0.7)', letterSpacing: '0.1em' }}>
-                 {reportData.lostFriend.displayName}
+          <div className="s8-layout">
+            <div className="s8-left">
+              <div className="reveal-wrap s8-name-wrap">
+                <div className="reveal-inner serif delay-1 s8-name">
+                  {reportData.lostFriend.displayName}
+                </div>
+              </div>
+              <div className="reveal-wrap s8-summary-wrap">
+                <div className="reveal-inner serif delay-2 s8-summary">
+                  后来，你们的交集停留在{reportData.lostFriend.periodDesc}这短短的
+                  <span className="num-display s8-summary-count">
+                    <DecodeText value={reportData.lostFriend.lateCount.toLocaleString()} active={currentScene === 8} />
+                  </span>
+                  句话里。
+                </div>
+              </div>
+              <div className="reveal-wrap s8-quote-wrap">
+                <div className="reveal-inner serif delay-3 s8-quote">
+                  “我一直相信我们能够再次相见，相信分别的日子总会迎来终结。”
+                </div>
              </div>
            </div>
-            <div className="reveal-wrap desc-text" style={{ position: 'absolute', bottom: '25vh' }}>
-              <div className="reveal-inner serif delay-2" style={{ color: 'rgba(255,255,255,0.5)', fontSize: '1.2rem', lineHeight: '2' }}>
-                有些信号，逐渐沉入了深海。<br/>
-                曾经热络的交互，在 {reportData.lostFriend.periodDesc} 之后，<br/>
-                断崖般地降至 <span className="num-display" style={{color: '#ccc', fontSize: '1.4rem'}}><DecodeText value={reportData.lostFriend.lateCount} active={currentScene === 8} /></span> 条。
+            <div className="reveal-wrap s8-letter-wrap">
+              <div className="reveal-inner serif delay-4 s8-letter">
+                所有的离散，或许都只是一场漫长的越冬。飞鸟要越过一万座雪山，才能带来春天的第一行回信；树木要褪去一万次枯叶，才能记住风的形状。如果时间注定要把我们推向不同的象限，那就在记忆的最深处建一座灯塔。哪怕要熬过几千个无法见面的黄昏，也要相信，总有一次日出的晨光，是为了照亮我们重逢的归途。
              </div>
            </div>
-          </>
+          </div>
        ) : (
-          <div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">没有走散的信号，<br/>所有重要的人都还在。</div></div>
+          <div className="reveal-wrap desc-text s8-empty-wrap">
+            <div className="reveal-inner serif delay-1 s8-empty-text">
+              缘分温柔地眷顾着你。<br/>
+              这一年，所有重要的人都在，没有一次无疾而终的告别。<br/>
+            </div>
+          </div>
        )}
      </div>

      {/* S9: LEXICON & ARCHIVE */}
      <div className={getSceneClass(9)} id="scene-9">
        <div className="reveal-wrap en-tag">
-          <div className="reveal-inner mono">LEXICON</div>
+          <div className="reveal-inner serif scene0-cn-tag">我的词云</div>
        </div>

        {reportData.topPhrases && reportData.topPhrases.slice(0, 12).map((phrase, i) => {
@@ -664,14 +926,14 @@ function AnnualReportWindow() {
      {/* S10: EXTRACTION (白色反色结束页 / Data Receipt) */}
      <div className={getSceneClass(10)} id="scene-10" style={{ color: '#000' }}>
        <div className="reveal-wrap en-tag" style={{ zIndex: 20 }}>
-          <div className="reveal-inner mono" style={{color: '#999'}}>END OF TRANSMISSION</div>
+          <div className="reveal-inner serif scene0-cn-tag" style={{color: '#999'}}>旅程的终点</div>
        </div>
        
        {/* The Final Summary Receipt / Dashboard */}
        <div className="reveal-wrap" style={{ position: 'absolute', top: '45vh', left: '50vw', transform: 'translate(-50%, -50%)', width: '60vw', textAlign: 'center', zIndex: 20 }}>
          <div className="reveal-inner delay-1" style={{ display: 'flex', flexDirection: 'column', gap: '3vh' }}>
            <div className="mono num-display" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#000', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
-              2024
+              {finalYearLabel}
            </div>
            <div className="mono" style={{ fontSize: '0.8rem', color: '#666', letterSpacing: '0.4em' }}>
              TRANSMISSION COMPLETE
@@ -680,29 +942,40 @@ function AnnualReportWindow() {
            {/* Core Stats Row */}
            <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '6vh', borderTop: '1px solid #ccc', borderBottom: '1px solid #ccc', padding: '4vh 0' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>RESONANCES</div>
-                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.totalMessages.toLocaleString()}</div>
+                <div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>朋友圈发帖</div>
+                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{endingPostCount.toLocaleString()}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>CONNECTIONS</div>
-                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.coreFriends.length}</div>
+                <div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>被动开场</div>
+                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{endingReceivedChats.toLocaleString()}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>LONGEST STREAK</div>
-                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.longestStreak?.days || 0}</div>
+                <div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>你最爱说</div>
+                <div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>“{endingTopPhrase}”</div>
              </div>
            </div>
            
            <div className="serif" style={{ fontSize: '1.2rem', color: '#444', marginTop: '4vh', letterSpacing: '0.05em' }}>
-              “在这片完全属于你的净土，存写下了光阴的无尽长河。”
+              “故事的最后，我们把这一切悄悄还给岁月<br/>只要这些文字还在，所有的离别，就都只是一场短暂的缺席。”
            </div>
          </div>
        </div>

        <div className="btn-wrap" style={{ zIndex: 20, bottom: '8vh' }}>
-          <div className="mono reveal-wrap" style={{ marginBottom: '20px' }}>
-            <div className="reveal-inner delay-2" style={{ fontSize: '0.7rem', color: '#999', lineHeight: 2, letterSpacing: '0.3em' }}>
-              100% LOCAL COMPUTING.<br/>YOUR DATA IS YOURS.
+          <div className="serif reveal-wrap" style={{ marginBottom: '20px' }}>
+            <div
+              className="reveal-inner delay-2"
+              style={{
+                fontSize: 'clamp(0.9rem, 1.15vw, 1.02rem)',
+                color: '#5F5F5F',
+                lineHeight: 1.95,
+                letterSpacing: '0.03em',
+                maxWidth: 'min(980px, 78vw)',
+                textAlign: 'center',
+                fontWeight: 500
+              }}
+            >
+              数据数得清一万句落笔的寒暄，却度量不出一个默契的眼神。<br/>在这片由数字构建的大海里，热烈的回应未必是感情的全部轮廓。<br/>真正的爱与羁绊，从来都不在跳动的屏幕里，而在无法被量化的现实。
            </div>
          </div>
          <div className="reveal-wrap">