github-mirrors/WeFlow
1
0
Fork 0
mirror of https://fastgit.cc/github.com/hicccc77/WeFlow synced 2026-04-20 21:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

年度报告优化

Browse Source
This commit is contained in:
cc
2026-04-19 18:34:41 +08:00
parent 4de4a74eca
commit ef2bbe5c22
12 changed files with 982 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
electron/services/annualReportService.ts
View File

@@ -59,6 +59,8 @@ export interface AnnualReportData {
initiatedChats: number
receivedChats: number
initiativeRate: number
topInitiatedFriend?: string
topInitiatedCount?: number
} | null
responseSpeed: {
avgResponseTime: number
@@ -1346,16 +1348,27 @@ class AnnualReportService {
let socialInitiative: AnnualReportData['socialInitiative'] = null
let totalInitiated = 0
let totalReceived = 0
for (const stats of conversationStarts.values()) {
let topInitiatedSessionId = ''
let topInitiatedCount = 0
for (const [sessionId, stats] of conversationStarts.entries()) {
totalInitiated += stats.initiated
totalReceived += stats.received
if (stats.initiated > topInitiatedCount) {
topInitiatedCount = stats.initiated
topInitiatedSessionId = sessionId
}
}
const totalConversations = totalInitiated + totalReceived
if (totalConversations > 0) {
const topInitiatedInfo = topInitiatedSessionId ? contactInfoMap.get(topInitiatedSessionId) : null
socialInitiative = {
initiatedChats: totalInitiated,
receivedChats: totalReceived,
initiativeRate: Math.round((totalInitiated / totalConversations) * 1000) / 10
initiativeRate: Math.round((totalInitiated / totalConversations) * 1000) / 10,
topInitiatedFriend: topInitiatedCount > 0
? (topInitiatedInfo?.displayName || topInitiatedSessionId)
: undefined,
topInitiatedCount: topInitiatedCount > 0 ? topInitiatedCount : undefined
}
}

BIN
resources/fonts/annual-report/CormorantGaramond-Var.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/annual-report/Inter-Var.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/annual-report/NotoSerifSC-Var.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/annual-report/PlayfairDisplay-Var.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/annual-report/SpaceMono-Bold.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/annual-report/SpaceMono-Regular.ttf Normal file
View File

Binary file not shown.

82
src/pages/AnnualReportPage.scss
View File

@@ -1,4 +1,5 @@
.annual-report-page {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
@@ -8,6 +9,11 @@
padding: 40px 24px;
}
.annual-report-page.report-route-transitioning > :not(.report-launch-overlay) {
animation: report-page-exit 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
pointer-events: none;
}
.header-icon {
color: var(--primary);
margin-bottom: 16px;
@@ -199,6 +205,11 @@
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
&.disabled {
pointer-events: none;
opacity: 0.72;
}
&.selected {
border-color: var(--primary);
background: var(--primary-light);
@@ -251,6 +262,10 @@
cursor: not-allowed;
}
&.is-pending {
pointer-events: none;
}
&.secondary {
background: var(--card-bg);
color: var(--text-primary);
@@ -259,6 +274,40 @@
}
}
.report-launch-overlay {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
backdrop-filter: blur(8px);
animation: report-launch-overlay-in 420ms ease-out both;
}
.launch-core {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
color: var(--text-primary);
animation: report-launch-core-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.launch-title {
margin: 4px 0 0;
font-size: 18px;
font-weight: 650;
}
.launch-subtitle {
margin: 0;
font-size: 13px;
color: var(--text-tertiary);
}
.spin {
animation: spin 1s linear infinite;
}
@@ -271,3 +320,36 @@
@keyframes dot-ellipsis {
to { width: 1.4em; }
}
@keyframes report-page-exit {
from {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
to {
opacity: 0;
filter: blur(8px);
transform: scale(0.985);
}
}
@keyframes report-launch-overlay-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes report-launch-core-in {
from {
opacity: 0;
transform: translateY(18px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

81
src/pages/AnnualReportPage.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'
import { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Calendar, Loader2, Sparkles, Users } from 'lucide-react'
import {
@@ -25,6 +25,8 @@ type YearsLoadPayload = {
nativeTimedOut?: boolean
}
const REPORT_LAUNCH_DELAY_MS = 420
const formatLoadElapsed = (ms: number) => {
const totalSeconds = Math.max(0, ms) / 1000
if (totalSeconds < 60) return `${totalSeconds.toFixed(1)}s`
@@ -50,7 +52,10 @@ function AnnualReportPage() {
const [hasSwitchedStrategy, setHasSwitchedStrategy] = useState(false)
const [nativeTimedOut, setNativeTimedOut] = useState(false)
const [isGenerating, setIsGenerating] = useState(false)
const [isRouteTransitioning, setIsRouteTransitioning] = useState(false)
const [launchingYearLabel, setLaunchingYearLabel] = useState('')
const [loadError, setLoadError] = useState<string | null>(null)
const launchTimerRef = useRef<number | null>(null)
useEffect(() => {
let disposed = false
@@ -186,21 +191,37 @@ function AnnualReportPage() {
}
}, [])
const handleGenerateReport = async () => {
if (selectedYear === null) return
setIsGenerating(true)
try {
const yearParam = selectedYear === 'all' ? 0 : selectedYear
navigate(`/annual-report/view?year=${yearParam}`)
} catch (e) {
console.error('生成报告失败:', e)
} finally {
setIsGenerating(false)
useEffect(() => {
return () => {
if (launchTimerRef.current !== null) {
window.clearTimeout(launchTimerRef.current)
}
}
}, [])
const handleGenerateReport = () => {
if (selectedYear === null || isRouteTransitioning) return
const yearParam = selectedYear === 'all' ? 0 : selectedYear
const yearLabel = selectedYear === 'all' ? '全部时间' : `${selectedYear}年`
setIsGenerating(true)
setIsRouteTransitioning(true)
setLaunchingYearLabel(yearLabel)
if (launchTimerRef.current !== null) {
window.clearTimeout(launchTimerRef.current)
}
launchTimerRef.current = window.setTimeout(() => {
try {
navigate(`/annual-report/view?year=${yearParam}`)
} catch (e) {
console.error('生成报告失败:', e)
setIsGenerating(false)
setIsRouteTransitioning(false)
}
}, REPORT_LAUNCH_DELAY_MS)
}
const handleGenerateDualReport = () => {
if (selectedPairYear === null) return
if (selectedPairYear === null || isRouteTransitioning) return
const yearParam = selectedPairYear === 'all' ? 0 : selectedPairYear
navigate(`/dual-report?year=${yearParam}`)
}
@@ -251,7 +272,7 @@ function AnnualReportPage() {
)
return (
<div className="annual-report-page">
<div className={`annual-report-page ${isRouteTransitioning ? 'report-route-transitioning' : ''}`}>
<Sparkles size={32} className="header-icon" />
<h1 className="page-title">年度报告</h1>
<p className="page-desc">选择年份，回顾你在微信里的点点滴滴</p>
@@ -270,8 +291,11 @@ function AnnualReportPage() {
{yearOptions.map(option => (
<div
key={option}
className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedYear === option ? 'selected' : ''}`}
onClick={() => setSelectedYear(option)}
className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedYear === option ? 'selected' : ''} ${isRouteTransitioning ? 'disabled' : ''}`}
onClick={() => {
if (isRouteTransitioning) return
setSelectedYear(option)
}}
>
<span className="year-number">{option === 'all' ? '全部' : option}</span>
<span className="year-label">{option === 'all' ? '时间' : '年'}</span>
@@ -281,14 +305,14 @@ function AnnualReportPage() {
</div>
<button
className="generate-btn"
className={`generate-btn ${isRouteTransitioning ? 'is-pending' : ''}`}
onClick={handleGenerateReport}
disabled={!selectedYear || isGenerating}
disabled={!selectedYear || isGenerating || isRouteTransitioning}
>
{isGenerating ? (
<>
<Loader2 size={20} className="spin" />
<span>正在生成...</span>
<span>{isRouteTransitioning ? '正在进入报告...' : '正在生成...'}</span>
</>
) : (
<>
@@ -316,8 +340,11 @@ function AnnualReportPage() {
{yearOptions.map(option => (
<div
key={`pair-${option}`}
className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedPairYear === option ? 'selected' : ''}`}
onClick={() => setSelectedPairYear(option)}
className={`year-card ${option === 'all' ? 'all-time' : ''} ${selectedPairYear === option ? 'selected' : ''} ${isRouteTransitioning ? 'disabled' : ''}`}
onClick={() => {
if (isRouteTransitioning) return
setSelectedPairYear(option)
}}
>
<span className="year-number">{option === 'all' ? '全部' : option}</span>
<span className="year-label">{option === 'all' ? '时间' : '年'}</span>
@@ -327,9 +354,9 @@ function AnnualReportPage() {
</div>
<button
className="generate-btn secondary"
className={`generate-btn secondary ${isRouteTransitioning ? 'is-pending' : ''}`}
onClick={handleGenerateDualReport}
disabled={!selectedPairYear}
disabled={!selectedPairYear || isRouteTransitioning}
>
<Users size={20} />
<span>选择好友并生成报告</span>
@@ -337,6 +364,16 @@ function AnnualReportPage() {
<p className="section-hint">从聊天排行中选择好友生成双人报告</p>
</section>
</div>
{isRouteTransitioning && (
<div className="report-launch-overlay" role="status" aria-live="polite">
<div className="launch-core">
<Loader2 size={30} className="spin" />
<p className="launch-title">正在进入{launchingYearLabel}年度报告</p>
<p className="launch-subtitle">正在整理你的聊天记忆...</p>
</div>
</div>
)}
</div>
)
}

544
src/pages/AnnualReportWindow.scss
View File

@@ -1,4 +1,50 @@
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@200;300;400;500;700&family=Space+Mono:wght@400;700&display=swap');
@font-face {
font-family: 'InterLocal';
src: url('../../resources/fonts/annual-report/Inter-Var.ttf') format('truetype');
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: 'PlayfairDisplayLocal';
src: url('../../resources/fonts/annual-report/PlayfairDisplay-Var.ttf') format('truetype');
font-style: normal;
font-weight: 400 900;
font-display: swap;
}
@font-face {
font-family: 'CormorantGaramondLocal';
src: url('../../resources/fonts/annual-report/CormorantGaramond-Var.ttf') format('truetype');
font-style: normal;
font-weight: 300 700;
font-display: swap;
}
@font-face {
font-family: 'NotoSerifSCLocal';
src: url('../../resources/fonts/annual-report/NotoSerifSC-Var.ttf') format('truetype');
font-style: normal;
font-weight: 200 900;
font-display: swap;
}
@font-face {
font-family: 'SpaceMonoLocal';
src: url('../../resources/fonts/annual-report/SpaceMono-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'SpaceMonoLocal';
src: url('../../resources/fonts/annual-report/SpaceMono-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
.annual-report-window {
--c-bg: #050505;
@@ -10,7 +56,7 @@
background-color: var(--c-bg);
color: var(--c-text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family: 'InterLocal', 'NotoSerifSCLocal', -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
overflow: hidden;
overscroll-behavior: none;
@@ -55,12 +101,54 @@
}
}
&[data-scene="10"] .top-controls .close-btn {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.22);
color: rgba(0, 0, 0, 0.68);
}
&[data-scene="10"] .top-controls .close-btn:hover {
background: rgba(0, 0, 0, 0.14);
color: #000;
}
.p0-bg-layer {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 1.1s var(--ease-out);
}
&[data-scene="0"] .p0-bg-layer {
opacity: 1;
}
&[data-scene="1"] .p0-bg-layer {
opacity: 0.16;
}
.p0-particle-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.48;
}
.p0-center-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 38%, transparent 70%);
}
/* 细微的电影噪点 */
.film-grain {
position: absolute;
inset: 0;
z-index: 9999;
opacity: 0.04;
opacity: 0.018;
pointer-events: none;
mix-blend-mode: overlay;
background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
@@ -78,18 +166,25 @@
background: #fff; /* FORCE SOLID WHITE CORE */
}
/* S0: 记忆奇点 */
/* S0: 年份下方引线（保留后续场景形变） */
&[data-scene="0"] #memory-core {
top: 40vh;
top: 84vh;
left: 50vw;
width: 8px;
height: 8px;
border-radius: 50%;
width: clamp(120px, 16vw, 220px);
height: 1px;
border-radius: 999px;
opacity: 1;
box-shadow: 0 0 20px #fff, 0 0 40px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
filter: blur(0px);
}
@media (max-width: 1024px) {
&[data-scene="0"] #memory-core {
top: 81vh;
width: clamp(96px, 22vw, 180px);
}
}
/* S1: 深海地平线底光 */
&[data-scene="1"] #memory-core {
top: 100vh;
@@ -116,14 +211,14 @@
/* S3: 竖直时间引线 (内容线段，可被 S4 过渡形变) */
&[data-scene="3"] #memory-core {
top: 55vh;
left: 20vw;
width: 2px;
height: 50vh;
border-radius: 2px;
top: var(--s3-line-top, 48vh);
left: var(--s3-line-left, calc(50vw - min(36vw, 440px) + 12px));
width: 1px;
height: var(--s3-line-height, clamp(240px, 34vh, 320px));
border-radius: 1px;
background: #fff;
opacity: 0.6;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
opacity: 0.55;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
filter: blur(0px);
}
@@ -241,15 +336,15 @@
}
.serif {
font-family: 'Noto Serif SC', 'Cormorant Garamond', serif;
font-family: 'NotoSerifSCLocal', 'CormorantGaramondLocal', serif;
}
.mono {
font-family: 'Space Mono', monospace;
font-family: 'SpaceMonoLocal', 'NotoSerifSCLocal', monospace;
}
.num-display {
font-family: 'Inter', -apple-system, sans-serif;
font-family: 'InterLocal', -apple-system, sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: -0.02em;
@@ -260,9 +355,11 @@
position: absolute;
top: 6vh;
left: 4vw;
font-size: 0.8rem;
color: var(--c-text-muted);
letter-spacing: 0.4em;
font-size: clamp(0.9rem, 1.05vw, 1.05rem);
color: rgba(255, 255, 255, 0.66);
letter-spacing: 0.28em;
font-weight: 500;
text-rendering: optimizeLegibility;
z-index: 10;
}
@@ -303,6 +400,13 @@
transition: all 0.6s ease;
}
&.exporting-scenes .top-controls,
&.exporting-scenes .pagination,
&.exporting-scenes .swipe-hint {
opacity: 0 !important;
visibility: hidden !important;
}
.delay-1 {
transition-delay: 0.1s;
}
@@ -316,18 +420,42 @@
}
/* 场景排版 */
#scene-0 {
text-align: center;
}
#scene-0 .scene0-cn-tag {
letter-spacing: 0.22em;
font-weight: 500;
}
#scene-0 .title-year {
font-family: 'Didot', 'Bodoni MT', 'Cinzel', 'Playfair Display', serif;
font-size: clamp(6rem, 18vw, 15rem);
line-height: 1.15;
letter-spacing: -0.05em;
margin-top: 15vh;
padding-bottom: 2vh;
font-family: 'PlayfairDisplayLocal', 'CormorantGaramondLocal', serif;
font-size: clamp(6.8rem, 21vw, 18rem);
line-height: 1.02;
letter-spacing: -0.04em;
margin-top: 10vh;
text-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
#scene-0 .title-year-wrap {
padding: clamp(6px, 0.8vh, 14px) 0;
}
#scene-0 .p0-desc {
margin-top: clamp(9vh, 11vh, 13vh);
}
#scene-0 .p0-desc-inner {
font-size: clamp(1rem, 1.35vw, 1.2rem);
line-height: 2;
color: rgba(255, 255, 255, 0.78);
letter-spacing: 0.08em;
}
#scene-1 .title-data {
font-size: clamp(5.5rem, 16vw, 13rem);
font-family: 'Inter';
font-family: 'InterLocal';
font-weight: 300;
letter-spacing: -0.05em;
line-height: 1;
@@ -350,26 +478,27 @@
}
#scene-3 {
align-items: stretch;
align-items: center;
justify-content: flex-start;
padding: 0;
padding: 0 8vw;
}
#scene-3 .en-tag {
left: 25vw;
transform: none;
top: 9vh;
left: 4vw;
top: 6vh;
}
#scene-3 .s3-layout {
position: absolute;
top: 21vh;
left: 25vw;
right: 12vw;
max-width: min(780px, 62vw);
top: 20vh;
left: 50%;
transform: translateX(-50%);
width: min(880px, 72vw);
max-width: 100%;
display: flex;
flex-direction: column;
gap: clamp(5vh, 7vh, 9vh);
gap: clamp(4vh, 5vh, 7vh);
padding-left: clamp(52px, 7vw, 108px);
}
#scene-3 .s3-subtitle-wrap {
@@ -378,15 +507,16 @@
}
#scene-3 .s3-subtitle {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-size: clamp(1rem, 1.25vw, 1.15rem);
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.05em;
line-height: 1.7;
}
#scene-3 .contact-list {
display: flex;
flex-direction: column;
gap: clamp(3.5vh, 4.5vh, 6vh);
gap: clamp(3.2vh, 4vh, 5.5vh);
margin-top: 0;
width: 100%;
max-width: none;
@@ -398,62 +528,284 @@
}
#scene-3 .c-item {
display: flex;
align-items: center;
justify-content: space-between;
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: end;
column-gap: clamp(36px, 8vw, 140px);
width: 100%;
min-height: clamp(54px, 7.5vh, 80px);
min-height: clamp(58px, 8vh, 88px);
}
#scene-3 .c-info {
display: flex;
flex-direction: column;
gap: 5px;
gap: 6px;
min-width: 0;
}
#scene-3 .c-name {
font-size: 2rem;
font-size: clamp(2rem, 4.3vw, 3.2rem);
line-height: 1;
letter-spacing: 0.05em;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(56vw, 460px);
}
#scene-3 .c-sub {
font-size: 0.65rem;
font-size: 0.68rem;
color: var(--c-text-muted);
letter-spacing: 0.08em;
}
#scene-3 .c-count {
font-size: 1.2rem;
font-family: 'Space Mono';
font-size: clamp(1.4rem, 2.2vw, 2rem);
font-family: 'SpaceMonoLocal';
line-height: 1;
text-align: right;
min-width: 7ch;
}
@media (max-width: 1280px) {
#scene-3 .en-tag {
left: 22vw;
}
#scene-3 .s3-layout {
left: 22vw;
right: 10vw;
max-width: min(760px, 68vw);
width: min(820px, 76vw);
padding-left: clamp(44px, 6vw, 92px);
}
}
@media (max-width: 1024px) {
#scene-3 .en-tag {
left: 16vw;
top: 8vh;
}
#scene-3 .s3-layout {
top: 19vh;
left: 16vw;
right: 8vw;
max-width: none;
top: 18.5vh;
width: min(760px, 86vw);
padding-left: clamp(30px, 5vw, 60px);
}
#scene-3 .c-name {
font-size: 1.8rem;
font-size: clamp(1.65rem, 5.2vw, 2.4rem);
}
#scene-3 .c-count {
font-size: clamp(1.2rem, 2.8vw, 1.75rem);
}
}
@media (max-width: 760px) {
#scene-3 .s3-layout {
top: 17.5vh;
gap: clamp(3vh, 4.5vh, 5vh);
width: 90vw;
padding-left: 26px;
}
#scene-3 .contact-list {
gap: clamp(2.8vh, 3.4vh, 4vh);
}
#scene-3 .c-item {
column-gap: 24px;
min-height: 52px;
}
#scene-3 .c-sub {
font-size: 0.62rem;
}
}
#scene-8 {
align-items: flex-start;
justify-content: flex-start;
padding: 0 6vw;
}
#scene-8 .s8-layout {
position: absolute;
top: 18vh;
left: 50%;
transform: translateX(-50%);
width: min(1240px, 86vw);
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
column-gap: clamp(34px, 4.8vw, 84px);
align-items: start;
}
#scene-8 .s8-left {
display: flex;
flex-direction: column;
gap: clamp(2.5vh, 3.2vh, 4vh);
padding-top: clamp(8vh, 9vh, 11vh);
}
#scene-8 .s8-name-wrap,
#scene-8 .s8-summary-wrap,
#scene-8 .s8-quote-wrap,
#scene-8 .s8-letter-wrap {
display: block;
width: 100%;
}
#scene-8 .s8-name {
font-size: clamp(3.2rem, 7.4vw, 5.6rem);
color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.08em;
line-height: 1.05;
}
#scene-8 .s8-summary {
max-width: 34ch;
font-size: clamp(1.06rem, 1.35vw, 1.35rem);
color: rgba(255, 255, 255, 0.62);
line-height: 1.95;
letter-spacing: 0.02em;
}
#scene-8 .s8-summary-count {
margin: 0 8px;
font-size: clamp(1.35rem, 2vw, 1.75rem);
color: #d8d8d8;
white-space: nowrap;
}
#scene-8 .s8-quote {
max-width: 32ch;
font-size: clamp(0.98rem, 1.12vw, 1.1rem);
color: rgba(255, 255, 255, 0.5);
line-height: 1.9;
}
#scene-8 .s8-letter-wrap {
margin-top: clamp(3vh, 4vh, 5.5vh);
}
#scene-8 .s8-letter {
position: relative;
padding: clamp(24px, 3.2vh, 38px) clamp(20px, 2.6vw, 34px) clamp(24px, 3.2vh, 38px) clamp(30px, 3.2vw, 44px);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
font-size: clamp(0.95rem, 1.05vw, 1.08rem);
line-height: 2;
color: rgba(255, 255, 255, 0.72);
text-align: left;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
#scene-8 .s8-letter::before {
content: '';
position: absolute;
top: 20px;
left: 14px;
width: 2px;
height: calc(100% - 40px);
border-radius: 2px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06));
}
#scene-8 .s8-empty-wrap {
display: block;
width: min(760px, 78vw);
margin-top: 24vh;
text-align: center;
}
#scene-8 .s8-empty-text {
color: rgba(255, 255, 255, 0.74);
line-height: 2;
}
@media (max-width: 1280px) {
#scene-8 .s8-layout {
width: min(1120px, 88vw);
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
column-gap: clamp(28px, 4vw, 56px);
}
#scene-8 .s8-left {
padding-top: clamp(6vh, 8vh, 9vh);
}
}
@media (max-width: 1024px) {
#scene-8 .s8-layout {
top: 16vh;
width: min(900px, 90vw);
grid-template-columns: 1fr;
row-gap: clamp(3vh, 3.5vh, 4.5vh);
}
#scene-8 .s8-left {
padding-top: 0;
gap: clamp(1.6vh, 2.2vh, 2.8vh);
}
#scene-8 .s8-name {
font-size: clamp(2.4rem, 8.4vw, 4.2rem);
letter-spacing: 0.06em;
}
#scene-8 .s8-summary,
#scene-8 .s8-quote {
max-width: none;
}
#scene-8 .s8-letter-wrap {
margin-top: 0;
}
#scene-8 .s8-letter {
font-size: clamp(0.9rem, 1.9vw, 1rem);
line-height: 1.95;
}
}
@media (max-width: 760px) {
#scene-8 .s8-layout {
top: 14.5vh;
width: 92vw;
row-gap: clamp(2.2vh, 3vh, 3.8vh);
}
#scene-8 .s8-name {
font-size: clamp(2rem, 10vw, 3rem);
}
#scene-8 .s8-summary {
font-size: clamp(0.92rem, 3.9vw, 1rem);
line-height: 1.85;
}
#scene-8 .s8-summary-count {
margin: 0 6px;
font-size: clamp(1.1rem, 4.8vw, 1.35rem);
}
#scene-8 .s8-quote {
font-size: clamp(0.86rem, 3.5vw, 0.95rem);
line-height: 1.8;
}
#scene-8 .s8-letter {
border-radius: 14px;
padding: 16px 16px 16px 24px;
font-size: clamp(0.82rem, 3.4vw, 0.9rem);
line-height: 1.82;
}
#scene-8 .s8-letter::before {
top: 16px;
left: 11px;
height: calc(100% - 32px);
}
#scene-8 .s8-empty-wrap {
width: 88vw;
margin-top: 23vh;
}
#scene-8 .s8-empty-text {
font-size: 1rem;
line-height: 1.9;
}
}
@@ -468,7 +820,7 @@
.word-burst {
position: absolute;
font-family: 'Noto Serif SC';
font-family: 'NotoSerifSCLocal';
font-weight: 500;
white-space: nowrap;
transform: translate(-50%, -50%) scale(0.8);
@@ -523,7 +875,7 @@
cursor: pointer;
transition: all 0.4s var(--ease-out);
margin-top: 3vh;
font-family: 'Space Mono';
font-family: 'SpaceMonoLocal';
font-size: 0.75rem;
letter-spacing: 0.15em;
border: none;
@@ -573,14 +925,16 @@
bottom: 5vh;
left: 50%;
transform: translateX(-50%);
font-family: 'Space Mono';
font-size: 0.6rem;
letter-spacing: 0.4em;
color: var(--c-text-muted);
font-family: 'SpaceMonoLocal';
font-size: clamp(0.74rem, 0.9vw, 0.9rem);
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.56);
font-weight: 500;
text-rendering: geometricPrecision;
z-index: 100;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
mix-blend-mode: difference;
}
&[data-scene="0"] .swipe-hint {
@@ -613,10 +967,13 @@
}
&.loading {
animation: loadingPageEnter 0.46s var(--ease-out) both;
.loading-ring {
position: relative;
width: 160px;
height: 160px;
animation: loadingRingEnter 0.52s var(--ease-epic) both;
svg {
width: 100%;
@@ -655,12 +1012,49 @@
font-weight: 600;
color: #fff;
margin-top: 24px;
animation: loadingTextEnter 0.52s var(--ease-out) both;
animation-delay: 0.06s;
}
.loading-hint {
font-size: 14px;
color: var(--c-text-muted);
margin-top: 4px;
animation: loadingTextEnter 0.52s var(--ease-out) both;
animation-delay: 0.12s;
}
}
@keyframes loadingPageEnter {
from {
opacity: 0;
filter: blur(12px);
}
to {
opacity: 1;
filter: blur(0);
}
}
@keyframes loadingRingEnter {
from {
opacity: 0;
transform: translateY(12px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes loadingTextEnter {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}

437
src/pages/AnnualReportWindow.tsx
View File

@@ -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">

2
src/types/electron.d.ts vendored
View File

@@ -849,6 +849,8 @@ export interface ElectronAPI {
initiatedChats: number
receivedChats: number
initiativeRate: number
topInitiatedFriend?: string
topInitiatedCount?: number
} | null
responseSpeed: {
avgResponseTime: number