Merge branch 'dev' into feat-chatlab
This commit is contained in:
32 files changed
+3076
-2540
No files matched your search
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
+1010
-1341
@@ -1,163 +1,987 @@
|
||||
@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 {
|
||||
// 使用全局主题变量，带回退值
|
||||
--ar-primary: var(--primary, #07C160);
|
||||
--ar-primary-rgb: var(--primary-rgb, 7, 193, 96);
|
||||
--ar-accent: var(--accent, #F2AA00);
|
||||
--ar-accent-rgb: 242, 170, 0;
|
||||
--ar-text-main: var(--text-primary, #222222);
|
||||
--ar-text-sub: var(--text-secondary, #555555);
|
||||
--ar-bg-color: var(--bg-primary, #F9F8F6);
|
||||
--ar-card-bg: var(--bg-secondary, rgba(255, 255, 255, 0.5));
|
||||
--ar-card-bg-hover: var(--bg-tertiary, rgba(255, 255, 255, 0.8));
|
||||
--ar-rank-bg: var(--bg-secondary, #f0f0f0);
|
||||
--ar-rank-color: var(--text-secondary, #666);
|
||||
--c-bg: #050505;
|
||||
--c-bg-deep: #090909;
|
||||
--c-text: #F2F2F0;
|
||||
--c-text-bright: #FAFAF8;
|
||||
--c-text-soft: rgba(250, 250, 248, 0.84);
|
||||
--c-text-muted: rgba(250, 250, 248, 0.58);
|
||||
--c-text-faint: rgba(250, 250, 248, 0.42);
|
||||
--c-gold: #B8945A;
|
||||
--c-gold-strong: #C8AA72;
|
||||
--c-gold-rgb: 184, 148, 90;
|
||||
--c-paper: #ECE8DF;
|
||||
--c-paper-ink: #1A1710;
|
||||
--c-paper-muted: #6E6757;
|
||||
/* 顶级平滑缓动曲线 */
|
||||
--ease-epic: cubic-bezier(0.76, 0, 0.24, 1);
|
||||
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
|
||||
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--chat-pattern);
|
||||
background-color: var(--ar-bg-color);
|
||||
// overflow-y: auto; // Moved to .report-scroll-view
|
||||
overflow: hidden; // Contain everything
|
||||
position: relative;
|
||||
-webkit-app-region: no-drag; // 确保主容器不可拖动
|
||||
|
||||
// 隐藏滚动条
|
||||
/* scrollbar-width: none; */
|
||||
// Moved
|
||||
/* -ms-overflow-style: none; */
|
||||
}
|
||||
|
||||
.report-scroll-view {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
|
||||
// 隐藏滚动条
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 背景装饰圆点 - 毛玻璃效果
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-color: var(--c-bg);
|
||||
color: var(--c-text);
|
||||
font-family: 'InterLocal', 'NotoSerifSCLocal', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--ar-primary-rgb), 0.03);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
&.c1 {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
top: -80px;
|
||||
right: -60px;
|
||||
animation: float1 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.c2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: 15%;
|
||||
left: -70px;
|
||||
animation: float2 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.c3 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
top: 45%;
|
||||
right: -40px;
|
||||
animation: float3 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.c4 {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
top: 25%;
|
||||
left: 8%;
|
||||
animation: float1 22s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
&.c5 {
|
||||
width: 60px;
|
||||
overscroll-behavior: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
-webkit-app-region: no-drag; // 默认不可拖拽，给特定区域开放
|
||||
|
||||
// 顶部拖动控制条与关闭按钮
|
||||
.top-controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
bottom: 25%;
|
||||
right: 12%;
|
||||
animation: float2 15s ease-in-out infinite reverse;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
z-index: 10000;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
@keyframes float1 {
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--c-gold-rgb), 0.14);
|
||||
border: 1px solid rgba(var(--c-gold-rgb), 0.34);
|
||||
color: var(--c-text-soft);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
-webkit-app-region: no-drag;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
&:hover {
|
||||
background: rgba(var(--c-gold-rgb), 0.24);
|
||||
color: var(--c-text-bright);
|
||||
box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.24);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float2 {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
&[data-scene="10"] .top-controls .close-btn {
|
||||
background: rgba(26, 20, 9, 0.08);
|
||||
border-color: rgba(75, 58, 27, 0.28);
|
||||
color: rgba(38, 29, 12, 0.72);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(12px, -12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float3 {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
&[data-scene="10"] .top-controls .close-btn:hover {
|
||||
background: rgba(30, 23, 10, 0.16);
|
||||
color: #171006;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-8px, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
.annual-report-window {
|
||||
|
||||
// 所有子元素默认不可拖动
|
||||
* {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
// 背景渐变灯光
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
.p0-bg-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle 500px at 0% 0%, rgba(7, 193, 96, 0.06), transparent),
|
||||
radial-gradient(circle 500px at 100% 0%, rgba(242, 170, 0, 0.05), transparent),
|
||||
radial-gradient(circle 500px at 0% 100%, rgba(242, 170, 0, 0.05), transparent),
|
||||
radial-gradient(circle 500px at 100% 100%, rgba(7, 193, 96, 0.06), transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
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(var(--c-gold-rgb), 0.12) 0%, rgba(var(--c-gold-rgb), 0.03) 36%, rgba(255, 255, 255, 0.02) 50%, transparent 72%);
|
||||
}
|
||||
|
||||
/* 细微的电影噪点 */
|
||||
.film-grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
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');
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
标志性组件的演化
|
||||
========================================= */
|
||||
#memory-core {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 1.5s var(--ease-epic);
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
background: var(--c-gold-strong);
|
||||
}
|
||||
|
||||
/* S0: 年份下方引线（保留后续场景形变） */
|
||||
&[data-scene="0"] #memory-core {
|
||||
top: 84vh;
|
||||
left: 50vw;
|
||||
width: clamp(120px, 16vw, 220px);
|
||||
height: 1px;
|
||||
border-radius: 999px;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.48);
|
||||
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;
|
||||
left: 50vw;
|
||||
width: 200vw;
|
||||
height: 60vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0.15;
|
||||
box-shadow: none;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
/* S2: 凌晨微光 */
|
||||
&[data-scene="2"] #memory-core {
|
||||
top: 45vh;
|
||||
left: 50vw;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.08;
|
||||
box-shadow: none;
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
/* S3: 竖直时间引线 (内容线段，可被 S4 过渡形变) */
|
||||
&[data-scene="3"] #memory-core {
|
||||
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: var(--c-gold);
|
||||
opacity: 0.55;
|
||||
box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.38);
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
/* S4: 内容横线 (由 S3 竖线平滑形变过来) */
|
||||
&[data-scene="4"] #memory-core {
|
||||
top: 55vh;
|
||||
left: 50vw;
|
||||
width: 80vw;
|
||||
height: 1px;
|
||||
border-radius: 0;
|
||||
background: rgba(var(--c-gold-rgb), 0.88);
|
||||
opacity: 0.35;
|
||||
box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.28);
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
/* S5: MUTUAL RESONANCE (底部弥散的主氛围光源) */
|
||||
&[data-scene="5"] #memory-core {
|
||||
top: 100vh;
|
||||
left: 50vw;
|
||||
width: 150vw;
|
||||
height: 80vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0.04;
|
||||
box-shadow: none;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
/* S6: SOCIAL KINETICS (大字背后的脉冲环境背光) */
|
||||
&[data-scene="6"] #memory-core {
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0.03;
|
||||
box-shadow: none;
|
||||
filter: blur(100px);
|
||||
animation: corePulse 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes corePulse {
|
||||
0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.02; }
|
||||
100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.05; }
|
||||
}
|
||||
|
||||
/* S7: THE SPARK (顶部的倾斜透射光束感) */
|
||||
&[data-scene="7"] #memory-core {
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
width: 120vw;
|
||||
height: 100vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0.05;
|
||||
box-shadow: none;
|
||||
filter: blur(90px);
|
||||
transform: translate(-50%, -50%) rotate(-15deg);
|
||||
}
|
||||
|
||||
/* S8: FADING SIGNALS (迷雾) */
|
||||
&[data-scene="8"] #memory-core {
|
||||
top: 50vh;
|
||||
left: 50vw;
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
border-radius: 50%;
|
||||
opacity: 0.05;
|
||||
box-shadow: none;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
/* S9: LEXICON (大气) */
|
||||
&[data-scene="9"] #memory-core {
|
||||
top: -20vh;
|
||||
left: -20vw;
|
||||
width: 150vw;
|
||||
height: 150vw;
|
||||
border-radius: 50%;
|
||||
opacity: 0.08;
|
||||
box-shadow: none;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
/* S10: EXTRACTION */
|
||||
&[data-scene="10"] #memory-core {
|
||||
top: 50vh;
|
||||
left: 50vw;
|
||||
width: 250vmax;
|
||||
height: 250vmax;
|
||||
border-radius: 50%;
|
||||
background: var(--c-paper); /* Explodes into warm bright color smoothly */
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
filter: blur(0px);
|
||||
transition: all 1s cubic-bezier(0.8, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
场景控制系统 & 遮罩出场动画
|
||||
========================================= */
|
||||
.scene {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scene.active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: 'NotoSerifSCLocal', 'CormorantGaramondLocal', serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'SpaceMonoLocal', 'NotoSerifSCLocal', monospace;
|
||||
}
|
||||
|
||||
.num-display {
|
||||
font-family: 'InterLocal', -apple-system, sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* 通用文案样式放大 */
|
||||
.en-tag {
|
||||
position: absolute;
|
||||
top: 6vh;
|
||||
left: 4vw;
|
||||
font-size: clamp(0.9rem, 1.05vw, 1.05rem);
|
||||
color: var(--c-text-soft);
|
||||
letter-spacing: 0.28em;
|
||||
font-weight: 500;
|
||||
text-rendering: optimizeLegibility;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.8;
|
||||
color: var(--c-text);
|
||||
margin-top: 35vh;
|
||||
}
|
||||
|
||||
/* Mask Reveal 动画 */
|
||||
.reveal-wrap {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal-inner {
|
||||
transform: translateY(110%);
|
||||
transition: transform 1.2s var(--ease-epic), opacity 1.2s var(--ease-epic);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scene.active .reveal-inner {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scene.prev .reveal-inner {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.scene.next .reveal-inner {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.delay-2 {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.delay-3 {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
/* 场景排版 */
|
||||
#scene-0 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#scene-0 .scene0-cn-tag {
|
||||
letter-spacing: 0.22em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#scene-0 .title-year {
|
||||
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);
|
||||
max-width: 90vw;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#scene-0 .title-year--numeric {
|
||||
font-size: clamp(6.8rem, 21vw, 18rem);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
#scene-0 .title-year--text {
|
||||
font-size: clamp(4.8rem, 14vw, 10rem);
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
#scene-0 .title-year--text-long {
|
||||
font-size: clamp(3.8rem, 10.5vw, 7.5rem);
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
#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: var(--c-text-soft);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
#scene-1 .title-data {
|
||||
font-size: clamp(5.5rem, 16vw, 13rem);
|
||||
font-family: 'InterLocal';
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
|
||||
#scene-2 {
|
||||
padding: 0 10vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#scene-2 .title-time {
|
||||
font-size: clamp(4.5rem, 12vw, 9rem);
|
||||
line-height: 1;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#scene-2 .desc-text {
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
#scene-3 {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 8vw;
|
||||
}
|
||||
|
||||
#scene-3 .en-tag {
|
||||
left: 4vw;
|
||||
top: 6vh;
|
||||
}
|
||||
|
||||
#scene-3 .s3-layout {
|
||||
position: absolute;
|
||||
top: 20vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(880px, 72vw);
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(4vh, 5vh, 7vh);
|
||||
padding-left: clamp(52px, 7vw, 108px);
|
||||
}
|
||||
|
||||
#scene-3 .s3-subtitle-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#scene-3 .s3-subtitle {
|
||||
font-size: clamp(1rem, 1.25vw, 1.15rem);
|
||||
color: var(--c-text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
#scene-3 .contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(3.2vh, 4vh, 5.5vh);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#scene-3 .s3-row-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#scene-3 .c-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) max-content;
|
||||
align-items: end;
|
||||
column-gap: clamp(36px, 8vw, 140px);
|
||||
width: 100%;
|
||||
min-height: clamp(58px, 8vh, 88px);
|
||||
}
|
||||
|
||||
#scene-3 .c-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#scene-3 .c-name {
|
||||
font-size: clamp(2rem, 4.3vw, 3.2rem);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: min(56vw, 460px);
|
||||
}
|
||||
|
||||
#scene-3 .c-sub {
|
||||
font-size: 0.68rem;
|
||||
color: var(--c-text-muted);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
#scene-3 .c-count {
|
||||
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 .s3-layout {
|
||||
width: min(820px, 76vw);
|
||||
padding-left: clamp(44px, 6vw, 92px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#scene-3 .s3-layout {
|
||||
top: 18.5vh;
|
||||
width: min(760px, 86vw);
|
||||
padding-left: clamp(30px, 5vw, 60px);
|
||||
}
|
||||
|
||||
#scene-3 .c-name {
|
||||
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(var(--c-gold-rgb), 0.88);
|
||||
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: var(--c-text-soft);
|
||||
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: var(--c-gold-strong);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#scene-8 .s8-quote {
|
||||
max-width: 32ch;
|
||||
font-size: clamp(0.98rem, 1.12vw, 1.1rem);
|
||||
color: var(--c-text-muted);
|
||||
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(var(--c-gold-rgb), 0.34);
|
||||
background: linear-gradient(135deg, rgba(var(--c-gold-rgb), 0.16), rgba(var(--c-gold-rgb), 0.04));
|
||||
font-size: clamp(0.95rem, 1.05vw, 1.08rem);
|
||||
line-height: 2;
|
||||
color: var(--c-text-soft);
|
||||
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(var(--c-gold-rgb), 0.7), rgba(var(--c-gold-rgb), 0.08));
|
||||
}
|
||||
|
||||
#scene-8 .s8-empty-wrap {
|
||||
display: block;
|
||||
width: min(760px, 78vw);
|
||||
margin-top: 24vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#scene-8 .s8-empty-text {
|
||||
color: var(--c-text);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* S4 宇宙 (彻底修复穿模 BUG) */
|
||||
#scene-4 {
|
||||
color: var(--c-text-bright);
|
||||
}
|
||||
|
||||
#scene-4 .en-tag {
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
.word-burst {
|
||||
position: absolute;
|
||||
font-family: 'NotoSerifSCLocal';
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
opacity: 0;
|
||||
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.2);
|
||||
}
|
||||
|
||||
/* 仅在 S9 显影 */
|
||||
&[data-scene="9"] .word-burst {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: var(--target-op, 1);
|
||||
}
|
||||
|
||||
.float-el {
|
||||
display: inline-block;
|
||||
animation: floatWord 4s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes floatWord {
|
||||
0% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
position: absolute;
|
||||
bottom: 8vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 1s 0.8s;
|
||||
}
|
||||
|
||||
&[data-scene="10"] .btn-wrap {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 3rem;
|
||||
color: var(--c-gold-strong);
|
||||
background: #111111;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s var(--ease-out);
|
||||
margin-top: 3vh;
|
||||
font-family: 'SpaceMonoLocal';
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
border: 1px solid rgba(var(--c-gold-rgb), 0.36);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.05);
|
||||
background: #1d1d1d;
|
||||
box-shadow: 0 10px 24px rgba(var(--c-gold-rgb), 0.24);
|
||||
}
|
||||
|
||||
/* 导航系统 */
|
||||
.pagination {
|
||||
position: absolute;
|
||||
right: 4vw;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
.dot-nav {
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
background: rgba(var(--c-gold-rgb), 0.22);
|
||||
transition: all 0.4s var(--ease-out);
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dot-nav:hover {
|
||||
background: rgba(var(--c-gold-rgb), 0.56);
|
||||
}
|
||||
|
||||
.dot-nav.active {
|
||||
background: var(--c-gold-strong);
|
||||
height: 32px;
|
||||
box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.52);
|
||||
}
|
||||
|
||||
.swipe-hint {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: 'SpaceMonoLocal';
|
||||
font-size: clamp(0.74rem, 0.9vw, 0.9rem);
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--c-text-muted);
|
||||
font-weight: 500;
|
||||
text-rendering: geometricPrecision;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&[data-scene="0"] .swipe-hint {
|
||||
opacity: 0.6;
|
||||
animation: hintPulse 2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes hintPulse {
|
||||
0% {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
&.loading,
|
||||
&.error {
|
||||
display: flex;
|
||||
@@ -165,7 +989,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
color: var(--ar-text-sub);
|
||||
color: var(--c-text-muted);
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
@@ -173,10 +997,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%;
|
||||
@@ -186,13 +1013,13 @@
|
||||
|
||||
.ring-bg {
|
||||
fill: none;
|
||||
stroke: rgba(0, 0, 0, 0.08);
|
||||
stroke: rgba(var(--c-gold-rgb), 0.2);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.ring-progress {
|
||||
fill: none;
|
||||
stroke: var(--ar-primary);
|
||||
stroke: var(--c-gold-strong);
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 264;
|
||||
@@ -206,1216 +1033,58 @@
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-primary);
|
||||
color: var(--c-text-bright);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-stage {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-main);
|
||||
color: var(--c-gold-strong);
|
||||
margin-top: 24px;
|
||||
animation: loadingTextEnter 0.52s var(--ease-out) both;
|
||||
animation-delay: 0.06s;
|
||||
}
|
||||
|
||||
.loading-hint {
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-sub);
|
||||
color: var(--c-text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 32px 5% 60px;
|
||||
padding-top: 48px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.exporting-snapshot *::selection {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.exporting-snapshot * {
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.exporting-snapshot {
|
||||
|
||||
.hero-title,
|
||||
.label-text,
|
||||
.hero-desc,
|
||||
.stat-num,
|
||||
.stat-unit,
|
||||
.hl,
|
||||
.gold {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.deco-circle {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--ar-text-sub);
|
||||
margin-bottom: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(28px, 5vw, 44px);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 16px;
|
||||
color: var(--ar-text-main);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: var(--ar-text-sub);
|
||||
max-width: 500px;
|
||||
|
||||
&.active-time {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.big-stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: clamp(40px, 8vw, 64px);
|
||||
font-weight: 700;
|
||||
color: var(--ar-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 18px;
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--ar-accent);
|
||||
margin: 24px 0;
|
||||
border: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: var(--ar-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gold {
|
||||
color: var(--ar-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 头像组件
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.md {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 20px;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 6px 20px rgba(7, 193, 96, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 月度好友环形布局
|
||||
.monthly-orbit {
|
||||
--radius: 180px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: 500px;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
|
||||
.monthly-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.monthly-item {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc(-1 * var(--radius))) rotate(calc(var(--i) * -30deg));
|
||||
z-index: 1;
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.month-label {
|
||||
font-size: 11px;
|
||||
color: var(--ar-text-sub);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.month-name {
|
||||
font-size: 11px;
|
||||
color: var(--ar-text-sub);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 热力图
|
||||
.heatmap-wrapper {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heatmap-header {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
gap: 3px;
|
||||
margin-bottom: 6px;
|
||||
color: var(--ar-text-sub);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.time-labels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(24, 1fr);
|
||||
gap: 3px;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.heatmap {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.heatmap-week-col {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
gap: 3px;
|
||||
font-size: 10px;
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
.week-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heatmap-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(24, 1fr);
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.h-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 2px;
|
||||
min-height: 10px;
|
||||
transition: transform 0.15s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 好友列表
|
||||
.friend-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--ar-card-bg-hover);
|
||||
}
|
||||
|
||||
.rank {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--ar-rank-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-rank-color);
|
||||
flex-shrink: 0;
|
||||
|
||||
&.top {
|
||||
background: linear-gradient(135deg, #ffd700, #ffb800);
|
||||
color: #fff;
|
||||
animation: loadingTextEnter 0.52s var(--ease-out) both;
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
.percent {
|
||||
font-size: 13px;
|
||||
color: var(--ar-primary);
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 领奖台布局
|
||||
.podium {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.podium-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 3px solid var(--ar-card-bg);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.first {
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.crown {
|
||||
font-size: 28px;
|
||||
margin-bottom: -8px;
|
||||
animation: crownBounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.podium-stand {
|
||||
height: 100px;
|
||||
background: linear-gradient(180deg, #ffd700, #ffb800);
|
||||
}
|
||||
}
|
||||
|
||||
&.second {
|
||||
.podium-stand {
|
||||
height: 70px;
|
||||
background: linear-gradient(180deg, #e0e0e0, #c0c0c0);
|
||||
}
|
||||
}
|
||||
|
||||
&.third {
|
||||
.podium-stand {
|
||||
height: 50px;
|
||||
background: linear-gradient(180deg, #cd9b6a, #b87333);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.podium-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-main);
|
||||
max-width: 90px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.podium-count {
|
||||
font-size: 11px;
|
||||
color: var(--ar-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.podium-stand {
|
||||
width: 90px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.podium-rank {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@keyframes crownBounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// 第4-5名列表
|
||||
.runner-up-list {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.runner-up-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 10px;
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.runner-up-rank {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--ar-rank-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-rank-color);
|
||||
}
|
||||
|
||||
.runner-up-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--ar-text-main);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.runner-up-count {
|
||||
font-size: 12px;
|
||||
color: var(--ar-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 结尾
|
||||
.ending {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ending-year {
|
||||
font-size: 100px;
|
||||
font-weight: 700;
|
||||
color: var(--ar-primary);
|
||||
opacity: 0.1;
|
||||
margin-top: 30px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ending-brand {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--ar-text-sub);
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 双向奔赴 - 新样式
|
||||
.mutual-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin: 40px 0 24px;
|
||||
}
|
||||
|
||||
.mutual-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&.friend {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.mutual-arrow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.arrow-count {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-primary);
|
||||
}
|
||||
|
||||
.arrow-line {
|
||||
font-size: 20px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
.arrow-count {
|
||||
color: var(--ar-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mutual-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 20px;
|
||||
|
||||
.mutual-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.mutual-ratio {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ar-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.mutual-name-tag {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-main);
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// 常用语列表
|
||||
.phrase-list {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.phrase-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.phrase-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--ar-text-main);
|
||||
}
|
||||
|
||||
.phrase-count {
|
||||
font-size: 14px;
|
||||
color: var(--ar-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 顶部拖动区域
|
||||
.drag-region {
|
||||
position: absolute; // Changed from fixed
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0; // Changed from right: 138px (since it's now inside the window container)
|
||||
height: 32px;
|
||||
-webkit-app-region: drag !important;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
// 浮动操作按钮
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 64px;
|
||||
right: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
z-index: 99;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.fab-main {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--ar-primary);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.4);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
order: 99;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 24px rgba(7, 193, 96, 0.5);
|
||||
}
|
||||
|
||||
.fab-container.open & {
|
||||
transform: rotate(45deg);
|
||||
background: var(--ar-text-sub);
|
||||
}
|
||||
}
|
||||
|
||||
.fab-item {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--ar-card-bg);
|
||||
color: var(--ar-text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translateY(20px);
|
||||
pointer-events: none;
|
||||
|
||||
.fab-container.open & {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
pointer-events: auto;
|
||||
|
||||
&:nth-child(1) {
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--ar-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出遮罩和弹窗
|
||||
.export-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出进度弹窗
|
||||
.export-progress-modal {
|
||||
background: var(--bg-primary, #fff);
|
||||
padding: 40px 48px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.export-spinner {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.spinner-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 3px solid rgba(0, 0, 0, 0.08);
|
||||
border-top-color: var(--ar-primary);
|
||||
border-radius: 50%;
|
||||
animation: spinRing 1s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-icon {
|
||||
color: var(--ar-primary);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinRing {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.export-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-main);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.export-status {
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-sub);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.export-modal {
|
||||
background: var(--bg-primary, #fff);
|
||||
padding: 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||
min-width: 280px;
|
||||
color: var(--ar-text-main);
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
&.section-selector {
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--ar-text-sub);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
padding: 20px 24px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
position: relative;
|
||||
padding: 16px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--ar-card-bg);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--ar-card-bg-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--ar-primary);
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
}
|
||||
|
||||
.card-check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--ar-primary);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&.selected .card-check {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
|
||||
.select-all-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-sub);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: var(--ar-primary);
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 词云样式
|
||||
.word-cloud-wrapper {
|
||||
margin: 24px auto 0;
|
||||
padding: 0;
|
||||
max-width: 520px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
--cloud-scale: clamp(0.72, 80vw / 520, 1);
|
||||
}
|
||||
|
||||
.word-cloud-inner {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
transform: scale(var(--cloud-scale));
|
||||
transform-origin: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -6%;
|
||||
background:
|
||||
radial-gradient(circle at 35% 45%, rgba(7, 193, 96, 0.12), transparent 55%),
|
||||
radial-gradient(circle at 65% 50%, rgba(242, 170, 0, 0.1), transparent 58%),
|
||||
radial-gradient(circle at 50% 65%, rgba(0, 0, 0, 0.04), transparent 60%);
|
||||
filter: blur(18px);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.word-tag {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
cursor: default;
|
||||
color: var(--ar-text-main);
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
animation: wordPopIn 0.55s ease forwards;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
|
||||
&:hover {
|
||||
transform: translate(-50%, -50%) scale(1.08);
|
||||
color: var(--ar-primary);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wordPopIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.6);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: var(--final-opacity, 1);
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.word-cloud-note {
|
||||
margin-top: 24px;
|
||||
font-size: 14px !important;
|
||||
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;
|
||||
@keyframes loadingPageEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
animation: flowAcross 4s infinite linear;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
+822
-855
@@ -1,14 +1,12 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Loader2, Download, Image, Check, X, SlidersHorizontal } from 'lucide-react'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { useThemeStore } from '../stores/themeStore'
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { X } from 'lucide-react'
|
||||
import {
|
||||
finishBackgroundTask,
|
||||
isBackgroundTaskCancelRequested,
|
||||
registerBackgroundTask,
|
||||
updateBackgroundTask
|
||||
} from '../services/backgroundTaskMonitor'
|
||||
import { drawPatternBackground } from '../utils/reportExport'
|
||||
import './AnnualReportWindow.scss'
|
||||
|
||||
interface TopContact {
|
||||
@@ -39,7 +37,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?: {
|
||||
@@ -58,67 +62,71 @@ interface AnnualReportData {
|
||||
} | null
|
||||
}
|
||||
|
||||
interface SectionInfo {
|
||||
id: string
|
||||
name: string
|
||||
ref: React.RefObject<HTMLElement | null>
|
||||
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
|
||||
return
|
||||
}
|
||||
if (decodedRef.current) return
|
||||
decodedRef.current = true
|
||||
|
||||
const chars = '018X-/#*'
|
||||
let iter = 0
|
||||
const inv = setInterval(() => {
|
||||
setDisplay(strVal.split('').map((c, i) => {
|
||||
if (c === ',' || c === ' ' || c === ':') return c
|
||||
if (i < iter) return strVal[i]
|
||||
return chars[Math.floor(Math.random() * chars.length)]
|
||||
}).join(''))
|
||||
|
||||
if (iter >= strVal.length) {
|
||||
clearInterval(inv)
|
||||
setDisplay(strVal)
|
||||
}
|
||||
iter += 1 / 3
|
||||
}, 35)
|
||||
|
||||
return () => clearInterval(inv)
|
||||
}, [active, strVal])
|
||||
|
||||
return <>{display.length > 0 ? display : value}</>
|
||||
}
|
||||
|
||||
// 头像组件
|
||||
const Avatar = ({ url, name, size = 'md' }: { url?: string; name: string; size?: 'sm' | 'md' | 'lg' }) => {
|
||||
const [imgError, setImgError] = useState(false)
|
||||
const initial = name?.[0] || '友'
|
||||
|
||||
return (
|
||||
<div className={`avatar ${size}`}>
|
||||
{url && !imgError ? (
|
||||
<img src={url} alt="" onError={() => setImgError(true)} crossOrigin="anonymous" />
|
||||
) : (
|
||||
<span>{initial}</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
import Heatmap from '../components/ReportHeatmap'
|
||||
import WordCloud from '../components/ReportWordCloud'
|
||||
|
||||
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)
|
||||
const [isExporting, setIsExporting] = useState(false)
|
||||
const [exportProgress, setExportProgress] = useState('')
|
||||
const [showExportModal, setShowExportModal] = useState(false)
|
||||
const [selectedSections, setSelectedSections] = useState<Set<string>>(new Set())
|
||||
const [fabOpen, setFabOpen] = useState(false)
|
||||
const [loadingProgress, setLoadingProgress] = useState(0)
|
||||
const [loadingStage, setLoadingStage] = useState('正在初始化...')
|
||||
const [exportMode, setExportMode] = useState<'separate' | 'long'>('separate')
|
||||
|
||||
const { currentTheme, themeMode } = useThemeStore()
|
||||
|
||||
// Section refs
|
||||
const sectionRefs = {
|
||||
cover: useRef<HTMLElement>(null),
|
||||
overview: useRef<HTMLElement>(null),
|
||||
bestFriend: useRef<HTMLElement>(null),
|
||||
monthlyFriends: useRef<HTMLElement>(null),
|
||||
mutualFriend: useRef<HTMLElement>(null),
|
||||
socialInitiative: useRef<HTMLElement>(null),
|
||||
peakDay: useRef<HTMLElement>(null),
|
||||
streak: useRef<HTMLElement>(null),
|
||||
heatmap: useRef<HTMLElement>(null),
|
||||
midnightKing: useRef<HTMLElement>(null),
|
||||
responseSpeed: useRef<HTMLElement>(null),
|
||||
topPhrases: useRef<HTMLElement>(null),
|
||||
ranking: useRef<HTMLElement>(null),
|
||||
sns: useRef<HTMLElement>(null),
|
||||
lostFriend: useRef<HTMLElement>(null),
|
||||
ending: useRef<HTMLElement>(null),
|
||||
}
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
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')
|
||||
const [isExtracting, setIsExtracting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.hash.split('?')[1] || '')
|
||||
@@ -132,7 +140,7 @@ function AnnualReportWindow() {
|
||||
const taskId = registerBackgroundTask({
|
||||
sourcePage: 'annualReport',
|
||||
title: '年度报告生成',
|
||||
detail: `正在生成 ${formatYearLabel(year)} 年度报告`,
|
||||
detail: `正在生成 ${year === 0 ? '历史以来' : year + '年'} 年度报告`,
|
||||
progressText: '初始化',
|
||||
cancelable: true
|
||||
})
|
||||
@@ -188,401 +196,311 @@ function AnnualReportWindow() {
|
||||
}
|
||||
}
|
||||
|
||||
const formatNumber = (num: number) => num.toLocaleString()
|
||||
// Handle Scroll and touch events
|
||||
const goToScene = useCallback((index: number) => {
|
||||
if (isAnimating || index === currentScene || index < 0 || index >= TOTAL_SCENES) return
|
||||
|
||||
const getMostActiveTime = (data: number[][]) => {
|
||||
let maxHour = 0, maxWeekday = 0, maxVal = 0
|
||||
data.forEach((row, w) => {
|
||||
row.forEach((val, h) => {
|
||||
if (val > maxVal) { maxVal = val; maxHour = h; maxWeekday = w }
|
||||
})
|
||||
setIsAnimating(true)
|
||||
setCurrentScene(index)
|
||||
|
||||
setTimeout(() => {
|
||||
setIsAnimating(false)
|
||||
}, 1500)
|
||||
}, [currentScene, isAnimating, TOTAL_SCENES])
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading || error || !reportData) return
|
||||
|
||||
let touchStartY = 0
|
||||
let lastWheelTime = 0
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
const now = Date.now()
|
||||
if (now - lastWheelTime < 1000) return // Throttle wheel events
|
||||
|
||||
if (Math.abs(e.deltaY) > 30) {
|
||||
lastWheelTime = now
|
||||
goToScene(e.deltaY > 0 ? currentScene + 1 : currentScene - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTouchStart = (e: TouchEvent) => {
|
||||
touchStartY = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchMove = (e: TouchEvent) => {
|
||||
e.preventDefault() // prevent native scroll
|
||||
}
|
||||
|
||||
const handleTouchEnd = (e: TouchEvent) => {
|
||||
const deltaY = touchStartY - e.changedTouches[0].clientY
|
||||
if (deltaY > 40) goToScene(currentScene + 1)
|
||||
else if (deltaY < -40) goToScene(currentScene - 1)
|
||||
}
|
||||
|
||||
window.addEventListener('wheel', handleWheel, { passive: false })
|
||||
window.addEventListener('touchstart', handleTouchStart, { passive: false })
|
||||
window.addEventListener('touchmove', handleTouchMove, { passive: false })
|
||||
window.addEventListener('touchend', handleTouchEnd)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('wheel', handleWheel)
|
||||
window.removeEventListener('touchstart', handleTouchStart)
|
||||
window.removeEventListener('touchmove', handleTouchMove)
|
||||
window.removeEventListener('touchend', handleTouchEnd)
|
||||
}
|
||||
}, [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 weekdayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
return { weekday: weekdayNames[maxWeekday], hour: maxHour }
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
if (seconds < 60) return `${seconds}秒`
|
||||
if (seconds < 3600) return `${Math.round(seconds / 60)}分钟`
|
||||
return `${Math.round(seconds / 3600)}小时`
|
||||
}
|
||||
|
||||
const formatYearLabel = (value: number, withSuffix: boolean = true) => {
|
||||
if (value === 0) return '历史以来'
|
||||
return withSuffix ? `${value}年` : `${value}`
|
||||
}
|
||||
|
||||
// 获取可用的板块列表
|
||||
const getAvailableSections = (): SectionInfo[] => {
|
||||
if (!reportData) return []
|
||||
const sections: SectionInfo[] = [
|
||||
{ id: 'cover', name: '封面', ref: sectionRefs.cover },
|
||||
{ id: 'overview', name: '年度概览', ref: sectionRefs.overview },
|
||||
]
|
||||
if (reportData.coreFriends[0]) {
|
||||
sections.push({ id: 'bestFriend', name: '年度挚友', ref: sectionRefs.bestFriend })
|
||||
}
|
||||
sections.push({ id: 'monthlyFriends', name: '月度好友', ref: sectionRefs.monthlyFriends })
|
||||
if (reportData.mutualFriend) {
|
||||
sections.push({ id: 'mutualFriend', name: '双向奔赴', ref: sectionRefs.mutualFriend })
|
||||
}
|
||||
if (reportData.socialInitiative) {
|
||||
sections.push({ id: 'socialInitiative', name: '社交主动性', ref: sectionRefs.socialInitiative })
|
||||
}
|
||||
if (reportData.peakDay) {
|
||||
sections.push({ id: 'peakDay', name: '巅峰时刻', ref: sectionRefs.peakDay })
|
||||
}
|
||||
if (reportData.longestStreak) {
|
||||
sections.push({ id: 'streak', name: '聊天火花', ref: sectionRefs.streak })
|
||||
}
|
||||
sections.push({ id: 'heatmap', name: '作息规律', ref: sectionRefs.heatmap })
|
||||
if (reportData.midnightKing) {
|
||||
sections.push({ id: 'midnightKing', name: '深夜好友', ref: sectionRefs.midnightKing })
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
// 导出单个板块 - 统一 16:9 尺寸
|
||||
const exportSection = async (section: SectionInfo): Promise<{ name: string; data: string } | null> => {
|
||||
const element = section.ref.current
|
||||
if (!element) {
|
||||
return null
|
||||
const initParticles = () => {
|
||||
const count = Math.max(36, Math.floor((canvas.width * canvas.height) / 15000))
|
||||
particles = Array.from({ length: count }, () => buildParticle())
|
||||
}
|
||||
|
||||
// 固定输出尺寸 1920x1080 (16:9)
|
||||
const OUTPUT_WIDTH = 1920
|
||||
const OUTPUT_HEIGHT = 1080
|
||||
|
||||
try {
|
||||
const selection = window.getSelection()
|
||||
if (selection && selection.rangeCount > 0) selection.removeAllRanges()
|
||||
const activeEl = document.activeElement as HTMLElement | null
|
||||
activeEl?.blur?.()
|
||||
document.body.classList.add('exporting-snapshot')
|
||||
document.documentElement.classList.add('exporting-snapshot')
|
||||
|
||||
const originalStyle = element.style.cssText
|
||||
element.style.minHeight = 'auto'
|
||||
element.style.padding = '40px 20px'
|
||||
element.style.background = 'transparent'
|
||||
element.style.backgroundColor = 'transparent'
|
||||
element.style.boxShadow = 'none'
|
||||
|
||||
// 修复词云
|
||||
const wordCloudInner = element.querySelector('.word-cloud-inner') as HTMLElement
|
||||
const wordTags = element.querySelectorAll('.word-tag') as NodeListOf<HTMLElement>
|
||||
let wordCloudOriginalStyle = ''
|
||||
const wordTagOriginalStyles: string[] = []
|
||||
|
||||
if (wordCloudInner) {
|
||||
wordCloudOriginalStyle = wordCloudInner.style.cssText
|
||||
wordCloudInner.style.transform = 'none'
|
||||
}
|
||||
|
||||
wordTags.forEach((tag, i) => {
|
||||
wordTagOriginalStyles[i] = tag.style.cssText
|
||||
tag.style.opacity = String(tag.style.getPropertyValue('--final-opacity') || '1')
|
||||
tag.style.animation = 'none'
|
||||
})
|
||||
|
||||
await new Promise(r => setTimeout(r, 50))
|
||||
|
||||
const computedStyle = getComputedStyle(document.documentElement)
|
||||
const bgColor = computedStyle.getPropertyValue('--bg-primary').trim() || '#F9F8F6'
|
||||
|
||||
const canvas = await html2canvas(element, {
|
||||
backgroundColor: 'transparent', // 透明背景，让 SVG 图案显示
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
logging: false,
|
||||
onclone: (clonedDoc) => {
|
||||
clonedDoc.body.classList.add('exporting-snapshot')
|
||||
clonedDoc.documentElement.classList.add('exporting-snapshot')
|
||||
clonedDoc.getSelection?.()?.removeAllRanges()
|
||||
},
|
||||
})
|
||||
|
||||
// 恢复样式
|
||||
element.style.cssText = originalStyle
|
||||
if (wordCloudInner) {
|
||||
wordCloudInner.style.cssText = wordCloudOriginalStyle
|
||||
}
|
||||
wordTags.forEach((tag, i) => {
|
||||
tag.style.cssText = wordTagOriginalStyles[i]
|
||||
})
|
||||
document.body.classList.remove('exporting-snapshot')
|
||||
document.documentElement.classList.remove('exporting-snapshot')
|
||||
|
||||
// 创建固定 16:9 尺寸的画布
|
||||
const outputCanvas = document.createElement('canvas')
|
||||
outputCanvas.width = OUTPUT_WIDTH
|
||||
outputCanvas.height = OUTPUT_HEIGHT
|
||||
const ctx = outputCanvas.getContext('2d')!
|
||||
|
||||
// 绘制带 SVG 图案的背景
|
||||
const isDark = themeMode === 'dark'
|
||||
await drawPatternBackground(ctx, OUTPUT_WIDTH, OUTPUT_HEIGHT, bgColor, isDark)
|
||||
|
||||
// 边距 (留出更多空白)
|
||||
const PADDING = 80
|
||||
const contentWidth = OUTPUT_WIDTH - PADDING * 2
|
||||
const contentHeight = OUTPUT_HEIGHT - PADDING * 2
|
||||
|
||||
// 计算缩放和居中位置
|
||||
const srcRatio = canvas.width / canvas.height
|
||||
const dstRatio = contentWidth / contentHeight
|
||||
let drawWidth: number, drawHeight: number, drawX: number, drawY: number
|
||||
|
||||
if (srcRatio > dstRatio) {
|
||||
// 源图更宽，以宽度为准
|
||||
drawWidth = contentWidth
|
||||
drawHeight = contentWidth / srcRatio
|
||||
drawX = PADDING
|
||||
drawY = PADDING + (contentHeight - drawHeight) / 2
|
||||
} else {
|
||||
// 源图更高，以高度为准
|
||||
drawHeight = contentHeight
|
||||
drawWidth = contentHeight * srcRatio
|
||||
drawX = PADDING + (contentWidth - drawWidth) / 2
|
||||
drawY = PADDING
|
||||
}
|
||||
|
||||
ctx.drawImage(canvas, drawX, drawY, drawWidth, drawHeight)
|
||||
|
||||
return { name: section.name, data: outputCanvas.toDataURL('image/png') }
|
||||
} catch (e) {
|
||||
document.body.classList.remove('exporting-snapshot')
|
||||
return null
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
initParticles()
|
||||
}
|
||||
}
|
||||
|
||||
// 导出整个报告为长图
|
||||
const exportFullReport = async (filterIds?: Set<string>) => {
|
||||
if (!containerRef.current) {
|
||||
return
|
||||
}
|
||||
setIsExporting(true)
|
||||
setExportProgress('正在生成长图...')
|
||||
const animate = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
try {
|
||||
const selection = window.getSelection()
|
||||
if (selection && selection.rangeCount > 0) selection.removeAllRanges()
|
||||
const activeEl = document.activeElement as HTMLElement | null
|
||||
activeEl?.blur?.()
|
||||
document.body.classList.add('exporting-snapshot')
|
||||
document.documentElement.classList.add('exporting-snapshot')
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
const p = particles[i]
|
||||
p.x += p.vx
|
||||
p.y += p.vy
|
||||
|
||||
const container = containerRef.current
|
||||
const sections = container.querySelectorAll('.section')
|
||||
const originalStyles: string[] = []
|
||||
if (p.x < 0 || p.x > canvas.width) p.vx *= -1
|
||||
if (p.y < 0 || p.y > canvas.height) p.vy *= -1
|
||||
|
||||
sections.forEach((section, i) => {
|
||||
const el = section as HTMLElement
|
||||
originalStyles[i] = el.style.cssText
|
||||
el.style.minHeight = 'auto'
|
||||
el.style.padding = '40px 0'
|
||||
})
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
|
||||
const particleAlpha = p.alpha * (i % 4 === 0 ? 0.95 : 0.72)
|
||||
ctx.fillStyle = i % 4 === 0
|
||||
? `rgba(184, 148, 90, ${particleAlpha})`
|
||||
: `rgba(255, 255, 255, ${particleAlpha})`
|
||||
ctx.fill()
|
||||
|
||||
// 如果有筛选，隐藏未选中的板块
|
||||
if (filterIds) {
|
||||
const available = getAvailableSections()
|
||||
available.forEach(s => {
|
||||
if (!filterIds.has(s.id) && s.ref.current) {
|
||||
s.ref.current.style.display = 'none'
|
||||
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 = i % 3 === 0
|
||||
? `rgba(184, 148, 90, ${lineAlpha * 0.8})`
|
||||
: `rgba(255, 255, 255, ${lineAlpha * 0.72})`
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.stroke()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 修复词云导出问题
|
||||
const wordCloudInner = container.querySelector('.word-cloud-inner') as HTMLElement
|
||||
const wordTags = container.querySelectorAll('.word-tag') as NodeListOf<HTMLElement>
|
||||
let wordCloudOriginalStyle = ''
|
||||
const wordTagOriginalStyles: string[] = []
|
||||
|
||||
if (wordCloudInner) {
|
||||
wordCloudOriginalStyle = wordCloudInner.style.cssText
|
||||
wordCloudInner.style.transform = 'none'
|
||||
}
|
||||
|
||||
wordTags.forEach((tag, i) => {
|
||||
wordTagOriginalStyles[i] = tag.style.cssText
|
||||
tag.style.opacity = String(tag.style.getPropertyValue('--final-opacity') || '1')
|
||||
tag.style.animation = 'none'
|
||||
})
|
||||
|
||||
// 等待样式生效
|
||||
await new Promise(r => setTimeout(r, 100))
|
||||
|
||||
// 获取计算后的背景色
|
||||
const computedStyle = getComputedStyle(document.documentElement)
|
||||
const bgColor = computedStyle.getPropertyValue('--bg-primary').trim() || '#F9F8F6'
|
||||
|
||||
const canvas = await html2canvas(container, {
|
||||
backgroundColor: 'transparent', // 透明背景
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
logging: false,
|
||||
onclone: (clonedDoc) => {
|
||||
clonedDoc.body.classList.add('exporting-snapshot')
|
||||
clonedDoc.documentElement.classList.add('exporting-snapshot')
|
||||
clonedDoc.getSelection?.()?.removeAllRanges()
|
||||
},
|
||||
})
|
||||
|
||||
// 恢复原始样式
|
||||
sections.forEach((section, i) => {
|
||||
const el = section as HTMLElement
|
||||
el.style.cssText = originalStyles[i]
|
||||
})
|
||||
|
||||
if (wordCloudInner) {
|
||||
wordCloudInner.style.cssText = wordCloudOriginalStyle
|
||||
}
|
||||
|
||||
wordTags.forEach((tag, i) => {
|
||||
tag.style.cssText = wordTagOriginalStyles[i]
|
||||
})
|
||||
document.body.classList.remove('exporting-snapshot')
|
||||
document.documentElement.classList.remove('exporting-snapshot')
|
||||
|
||||
// 创建带 SVG 图案背景的输出画布
|
||||
const outputCanvas = document.createElement('canvas')
|
||||
outputCanvas.width = canvas.width
|
||||
outputCanvas.height = canvas.height
|
||||
const ctx = outputCanvas.getContext('2d')!
|
||||
|
||||
// 绘制 SVG 图案背景
|
||||
const isDark = themeMode === 'dark'
|
||||
await drawPatternBackground(ctx, canvas.width, canvas.height, bgColor, isDark)
|
||||
|
||||
// 绘制内容
|
||||
ctx.drawImage(canvas, 0, 0)
|
||||
|
||||
const dataUrl = outputCanvas.toDataURL('image/png')
|
||||
const link = document.createElement('a')
|
||||
const yearFilePrefix = reportData ? formatYearLabel(reportData.year, false) : ''
|
||||
link.download = `${yearFilePrefix}年度报告${filterIds ? '_自定义' : ''}.png`
|
||||
link.href = dataUrl
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
} catch (e) {
|
||||
alert('导出失败: ' + String(e))
|
||||
} finally {
|
||||
document.body.classList.remove('exporting-snapshot')
|
||||
document.documentElement.classList.remove('exporting-snapshot')
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
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'
|
||||
return 'scene next'
|
||||
}
|
||||
|
||||
// 导出选中的板块
|
||||
const exportSelectedSections = async () => {
|
||||
const sections = getAvailableSections().filter(s => selectedSections.has(s.id))
|
||||
if (sections.length === 0) {
|
||||
alert('请至少选择一个板块')
|
||||
return
|
||||
const handleClose = () => {
|
||||
navigate('/home')
|
||||
}
|
||||
|
||||
const formatFileYearLabel = (year: number) => (year === 0 ? '历史以来' : String(year))
|
||||
|
||||
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
const waitForNextPaint = () => new Promise<void>((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => resolve())
|
||||
})
|
||||
})
|
||||
const captureSceneDataUrl = async (): Promise<string> => {
|
||||
const captureFn = window.electronAPI.annualReport.captureCurrentWindow
|
||||
if (typeof captureFn !== 'function') {
|
||||
throw new Error('当前版本未启用原生截图接口，请重启应用后重试')
|
||||
}
|
||||
|
||||
if (exportMode === 'long') {
|
||||
setShowExportModal(false)
|
||||
await exportFullReport(selectedSections)
|
||||
setSelectedSections(new Set())
|
||||
return
|
||||
const captureResult = await captureFn()
|
||||
if (!captureResult.success || !captureResult.dataUrl) {
|
||||
throw new Error(captureResult.error || '原生截图失败')
|
||||
}
|
||||
return captureResult.dataUrl
|
||||
}
|
||||
|
||||
setIsExporting(true)
|
||||
setShowExportModal(false)
|
||||
|
||||
const exportedImages: { name: string; data: string }[] = []
|
||||
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const section = sections[i]
|
||||
setExportProgress(`正在导出: ${section.name} (${i + 1}/${sections.length})`)
|
||||
|
||||
const result = await exportSection(section)
|
||||
if (result) {
|
||||
exportedImages.push(result)
|
||||
}
|
||||
}
|
||||
|
||||
if (exportedImages.length === 0) {
|
||||
alert('导出失败')
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
return
|
||||
}
|
||||
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]) {
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
return
|
||||
}
|
||||
if (dirResult.canceled || !dirResult.filePaths?.[0]) return
|
||||
|
||||
setExportProgress('正在写入文件...')
|
||||
const yearFilePrefix = reportData ? formatYearLabel(reportData.year, false) : ''
|
||||
const exportResult = await window.electronAPI.annualReport.exportImages({
|
||||
baseDir: dirResult.filePaths[0],
|
||||
folderName: `${yearFilePrefix}年度报告_分模块`,
|
||||
images: exportedImages.map((img) => ({
|
||||
name: `${yearFilePrefix}年度报告_${img.name}.png`,
|
||||
dataUrl: img.data
|
||||
}))
|
||||
})
|
||||
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'
|
||||
]
|
||||
|
||||
if (!exportResult.success) {
|
||||
alert('导出失败: ' + (exportResult.error || '未知错误'))
|
||||
}
|
||||
setIsExtracting(true)
|
||||
setButtonText('EXTRACTING...')
|
||||
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
setSelectedSections(new Set())
|
||||
}
|
||||
try {
|
||||
const images: Array<{ name: string; dataUrl: string }> = []
|
||||
root.classList.add('exporting-scenes')
|
||||
await waitForNextPaint()
|
||||
await wait(120)
|
||||
// 预检：强制验证主进程已注册原生截图 handler，确保导出链路不是旧逻辑。
|
||||
await captureSceneDataUrl()
|
||||
|
||||
// 切换板块选择
|
||||
const toggleSection = (id: string) => {
|
||||
const newSet = new Set(selectedSections)
|
||||
if (newSet.has(id)) {
|
||||
newSet.delete(id)
|
||||
} else {
|
||||
newSet.add(id)
|
||||
}
|
||||
setSelectedSections(newSet)
|
||||
}
|
||||
for (let i = 0; i < TOTAL_SCENES; i++) {
|
||||
setCurrentScene(i)
|
||||
setButtonText(`EXTRACTING ${i + 1}/${TOTAL_SCENES}`)
|
||||
await waitForNextPaint()
|
||||
await wait(1700)
|
||||
|
||||
// 全选/取消全选
|
||||
const toggleAll = () => {
|
||||
const sections = getAvailableSections()
|
||||
if (selectedSections.size === sections.length) {
|
||||
setSelectedSections(new Set())
|
||||
} else {
|
||||
setSelectedSections(new Set(sections.map(s => s.id)))
|
||||
images.push({
|
||||
name: `P${String(i).padStart(2, '0')}_${sceneNames[i] || `SCENE_${i}`}.png`,
|
||||
dataUrl: await captureSceneDataUrl()
|
||||
})
|
||||
}
|
||||
|
||||
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)
|
||||
}, 2200)
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="annual-report-window loading">
|
||||
<div className="top-controls">
|
||||
<button className="close-btn" onClick={handleClose}><X size={16} /></button>
|
||||
</div>
|
||||
<div className="loading-ring">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle className="ring-bg" cx="50" cy="50" r="42" />
|
||||
@@ -600,467 +518,516 @@ function AnnualReportWindow() {
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
if (error || !reportData) {
|
||||
return (
|
||||
<div className="annual-report-window error">
|
||||
<p>生成报告失败: {error}</p>
|
||||
<div className="top-controls">
|
||||
<button className="close-btn" onClick={handleClose}><X size={16} /></button>
|
||||
</div>
|
||||
<p>{error ? `生成报告失败: ${error}` : '暂无数据'}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!reportData) {
|
||||
return (
|
||||
<div className="annual-report-window error">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 || '好友'
|
||||
const yearTitle = formatYearLabel(year, true)
|
||||
const yearTitleShort = formatYearLabel(year, false)
|
||||
const monthlyTitle = year === 0 ? '历史以来月度好友' : `${year}年月度好友`
|
||||
const phrasesTitle = year === 0 ? '你在历史以来的常用语' : `你在${year}年的年度常用语`
|
||||
const yearTitle = reportData.year === 0 ? '历史以来' : String(reportData.year)
|
||||
const finalYearLabel = reportData.year === 0 ? 'ALL YEARS' : String(reportData.year)
|
||||
const compactYearTitle = yearTitle.replace(/\s+/g, '')
|
||||
const isNumericYearTitle = /^\d+$/.test(compactYearTitle)
|
||||
const yearTitleVariantClass = isNumericYearTitle
|
||||
? 'title-year--numeric'
|
||||
: compactYearTitle.length >= 5
|
||||
? 'title-year--text-long'
|
||||
: 'title-year--text'
|
||||
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 COLOR = {
|
||||
accentGold: 'var(--c-gold-strong)',
|
||||
accentSoft: 'rgba(var(--c-gold-rgb), 0.58)',
|
||||
accentMuted: 'rgba(var(--c-gold-rgb), 0.48)',
|
||||
textStrong: 'var(--c-text-bright)',
|
||||
textSoft: 'var(--c-text-soft)',
|
||||
textMuted: 'var(--c-text-muted)',
|
||||
textFaint: 'var(--c-text-faint)',
|
||||
paperInk: 'var(--c-paper-ink)',
|
||||
paperMuted: 'var(--c-paper-muted)'
|
||||
} as const
|
||||
|
||||
return (
|
||||
<div className="annual-report-window">
|
||||
<div className="drag-region" />
|
||||
|
||||
{/* 背景装饰 */}
|
||||
<div className="bg-decoration">
|
||||
<div className="deco-circle c1" />
|
||||
<div className="deco-circle c2" />
|
||||
<div className="deco-circle c3" />
|
||||
<div className="deco-circle c4" />
|
||||
<div className="deco-circle c5" />
|
||||
<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={`fab-container ${fabOpen ? 'open' : ''}`}>
|
||||
<button className="fab-item" onClick={() => { setFabOpen(false); setExportMode('separate'); setShowExportModal(true) }} title="分模块导出">
|
||||
<Image size={18} />
|
||||
</button>
|
||||
<button className="fab-item" onClick={() => { setFabOpen(false); setExportMode('long'); setShowExportModal(true) }} title="自定义导出长图">
|
||||
<SlidersHorizontal size={18} />
|
||||
</button>
|
||||
<button className="fab-item" onClick={() => { setFabOpen(false); exportFullReport() }} title="导出长图">
|
||||
<Download size={18} />
|
||||
</button>
|
||||
<button className="fab-main" onClick={() => setFabOpen(!fabOpen)}>
|
||||
{fabOpen ? <X size={22} /> : <Download size={22} />}
|
||||
</button>
|
||||
<div className="p0-bg-layer">
|
||||
<canvas ref={p0CanvasRef} className="p0-particle-canvas" />
|
||||
<div className="p0-center-glow" />
|
||||
</div>
|
||||
|
||||
<div className="film-grain"></div>
|
||||
|
||||
<div id="memory-core"></div>
|
||||
|
||||
<div className="pagination">
|
||||
{Array.from({ length: TOTAL_SCENES }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`dot-nav ${currentScene === i ? 'active' : ''}`}
|
||||
onClick={() => goToScene(i)}
|
||||
/>
|
||||
))}
|
||||
</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 serif scene0-cn-tag">一切的起点</div>
|
||||
</div>
|
||||
<div className="reveal-wrap title-year-wrap">
|
||||
<div className={`reveal-inner serif title-year ${yearTitleVariantClass} delay-1`}>{yearTitle}</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text p0-desc">
|
||||
<div className="reveal-inner serif delay-2 p0-desc-inner">那些被岁月悄悄掩埋的对话<br/>原来都在这里，等待一个春天。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 导出进度 */}
|
||||
{isExporting && (
|
||||
<div className="export-overlay">
|
||||
<div className="export-progress-modal">
|
||||
<div className="export-spinner">
|
||||
<div className="spinner-ring"></div>
|
||||
<Download size={24} className="spinner-icon" />
|
||||
</div>
|
||||
<p className="export-title">正在导出</p>
|
||||
<p className="export-status">{exportProgress}</p>
|
||||
{/* S1: VOLUME */}
|
||||
<div className={getSceneClass(1)} id="scene-1">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner serif scene0-cn-tag">消息报告</div>
|
||||
</div>
|
||||
<div className="reveal-wrap">
|
||||
<div className="reveal-inner title-data delay-1 num-display">
|
||||
<DecodeText value={reportData.totalMessages.toLocaleString()} active={currentScene === 1} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="reveal-wrap desc-text">
|
||||
<div className="reveal-inner serif delay-2">
|
||||
这一年，你说出了 <strong className="num-display" style={{ color: COLOR.accentGold }}>{reportData.totalMessages.toLocaleString()}</strong> 句话。<br/>无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 模块选择弹窗 */}
|
||||
{showExportModal && (
|
||||
<div className="export-overlay" onClick={() => setShowExportModal(false)}>
|
||||
<div className="export-modal section-selector" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>{exportMode === 'long' ? '自定义导出长图' : '选择要导出的板块'}</h3>
|
||||
<button className="close-btn" onClick={() => setShowExportModal(false)}>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="section-grid">
|
||||
{getAvailableSections().map(section => (
|
||||
<div
|
||||
key={section.id}
|
||||
className={`section-card ${selectedSections.has(section.id) ? 'selected' : ''}`}
|
||||
onClick={() => toggleSection(section.id)}
|
||||
>
|
||||
<div className="card-check">
|
||||
{selectedSections.has(section.id) && <Check size={14} />}
|
||||
{/* S2: NOCTURNE */}
|
||||
<div className={getSceneClass(2)} id="scene-2">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner serif scene0-cn-tag">深夜</div>
|
||||
</div>
|
||||
<div className="reveal-wrap">
|
||||
<div className="reveal-inner serif title-time delay-1">
|
||||
{reportData.midnightKing ? reportData.midnightKing.displayName : '00:00'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="reveal-wrap">
|
||||
<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">
|
||||
梦境之外，你与{reportData.midnightKing ? reportData.midnightKing.displayName : '00:00'}共同醒着度过了许多个夜晚<br/>
|
||||
“曾有<strong className="num-display" style={{ color: COLOR.accentGold, margin: '0 10px', fontSize: '1.5rem' }}>
|
||||
<DecodeText value={(reportData.midnightKing?.count || 0).toLocaleString()} active={currentScene === 2} />
|
||||
</strong>条消息在那些无人知晓的夜里，代替星光照亮了彼此”
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* S3: GRAVITY CENTERS */}
|
||||
<div className={getSceneClass(3)} id="scene-3">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner serif scene0-cn-tag">聊天排行</div>
|
||||
</div>
|
||||
|
||||
<div className="s3-layout" ref={s3LayoutRef}>
|
||||
<div className="reveal-wrap s3-subtitle-wrap">
|
||||
<div className="reveal-inner serif delay-1 s3-subtitle">漫长的岁月里，是他们，让你的时间有了实实在在的重量。</div>
|
||||
</div>
|
||||
|
||||
<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}`}>
|
||||
<div className="c-info">
|
||||
<div className="serif c-name" style={{ color: i === 0 ? COLOR.accentGold : i === 1 ? COLOR.textStrong : COLOR.textMuted }}>
|
||||
{f.displayName}
|
||||
</div>
|
||||
<div className="mono c-sub num-display">TOP {i + 1}</div>
|
||||
</div>
|
||||
<div className="c-count num-display" style={{ color: i === 0 ? COLOR.accentGold : COLOR.textSoft }}>
|
||||
{f.messageCount.toLocaleString()}
|
||||
</div>
|
||||
<span>{section.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{topFriends.length === 0 && (
|
||||
<div className="reveal-wrap s3-row-wrap">
|
||||
<div className="reveal-inner c-item delay-1">
|
||||
<div className="c-info">
|
||||
<div className="serif c-name" style={{ color: COLOR.textSoft }}>暂无记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 serif scene0-cn-tag">时间的长河</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: COLOR.textMuted, fontSize: '1.2rem', letterSpacing: '0.1em' }}>十二个月的更迭，就像走过了一万个冬天<br />时间在变，但好在总有人陪在身边。</div>
|
||||
</div>
|
||||
|
||||
{reportData.monthlyTopFriends.length > 0 ? (
|
||||
<div style={{ position: 'absolute', top: '55vh', left: '10vw', width: '80vw', height: '1px', background: 'transparent' }}>
|
||||
{reportData.monthlyTopFriends.map((m, i) => {
|
||||
const leftPos = (i / 11) * 100; // 0% to 100%
|
||||
const isTop = i % 2 === 0; // Alternate up and down to prevent crowding
|
||||
const isRightSide = i >= 6; // Center-focus alignment logic
|
||||
|
||||
// Pseudo-random organic height variation for audio-wave feel (from 8vh to 18vh)
|
||||
const heightVariation = 12 + (Math.sin(i * 1.5) * 6);
|
||||
|
||||
const alignStyle = isRightSide ? { right: '10px', alignItems: 'flex-end', textAlign: 'right' as const } : { left: '10px', alignItems: 'flex-start', textAlign: 'left' as const };
|
||||
|
||||
return (
|
||||
<div key={m.month} className="reveal-wrap float-el" style={{ position: 'absolute', left: `${leftPos}%`, top: 0, width: '1px', height: '1px', overflow: 'visible', animationDelay: `${-(i%4)*0.5}s` }}>
|
||||
|
||||
{/* The connecting thread (gradient fades away from center line) */}
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{
|
||||
position: 'absolute',
|
||||
left: '-0px',
|
||||
top: isTop ? `-${heightVariation}vh` : '0px',
|
||||
width: '1px',
|
||||
height: `${heightVariation}vh`,
|
||||
background: isTop
|
||||
? 'linear-gradient(to top, rgba(184,148,90,0.34), transparent)'
|
||||
: 'linear-gradient(to bottom, rgba(184,148,90,0.34), transparent)'
|
||||
}} />
|
||||
|
||||
{/* Center Glowing Dot */}
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{ position: 'absolute', left: '-2.5px', top: '-2.5px', width: '6px', height: '6px', borderRadius: '50%', background: 'rgba(184,148,90,0.72)', boxShadow: '0 0 10px rgba(184,148,90,0.34)' }} />
|
||||
|
||||
{/* Text Payload */}
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{
|
||||
position: 'absolute',
|
||||
...alignStyle,
|
||||
top: isTop ? `-${heightVariation + 2}vh` : `${heightVariation}vh`,
|
||||
transform: 'translateY(-50%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '20vw' // ample space to avoid wrapping
|
||||
}}>
|
||||
<div className="mono num-display" style={{ fontSize: '0.9rem', color: COLOR.textFaint, marginBottom: '4px', letterSpacing: '0.1em' }}>
|
||||
{m.month.toString().padStart(2, '0')}
|
||||
</div>
|
||||
<div className="serif" style={{ fontSize: 'clamp(1rem, 2vw, 1.4rem)', color: COLOR.textStrong, letterSpacing: '0.05em' }}>
|
||||
{m.displayName}
|
||||
</div>
|
||||
<div className="mono num-display" style={{ fontSize: '0.65rem', color: COLOR.textMuted, marginTop: '4px', letterSpacing: '0.1em' }}>
|
||||
{m.messageCount.toLocaleString()} M
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '50vh', left: '50vw', transform: 'translate(-50%, -50%)' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{ color: COLOR.textSoft }}>暂无记忆声纹</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S5: MUTUAL RESONANCE (Mutual friend) */}
|
||||
<div className={getSceneClass(5)} id="scene-5">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner serif scene0-cn-tag">回应的艺术</div>
|
||||
</div>
|
||||
{reportData.mutualFriend ? (
|
||||
<>
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '20vh' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{ fontSize: 'clamp(3rem, 7vw, 4rem)', color: COLOR.accentGold, letterSpacing: '0.05em' }}>
|
||||
{reportData.mutualFriend.displayName}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button className="select-all-btn" onClick={toggleAll}>
|
||||
{selectedSections.size === getAvailableSections().length ? '取消全选' : '全选'}
|
||||
</button>
|
||||
<button
|
||||
className="confirm-btn"
|
||||
onClick={exportSelectedSections}
|
||||
disabled={selectedSections.size === 0}
|
||||
>
|
||||
{exportMode === 'long' ? '生成长图' : '导出'} {selectedSections.size > 0 ? `(${selectedSections.size})` : ''}
|
||||
</button>
|
||||
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', left: '15vw' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>发出</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: COLOR.accentGold, 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 serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>收到</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: COLOR.accentGold, 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: COLOR.accentGold, fontSize: '1.5rem' }}>{reportData.mutualFriend.ratio}</strong> 的平衡率
|
||||
<br/>
|
||||
<span style={{ fontSize: '1rem', color: COLOR.textMuted, 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/>请相信，分别和孤独总会迎来终结，你终会遇到那个懂你的TA。</div></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S6: SOCIAL KINETICS */}
|
||||
<div className={getSceneClass(6)} id="scene-6">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<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 serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>我的主动性</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(4.5rem, 8vw, 7rem)', color: COLOR.accentGold, lineHeight: '1', margin: '2vh 0' }}>
|
||||
{reportData.socialInitiative.initiativeRate}%
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: COLOR.textSoft, lineHeight: '1.8' }}>
|
||||
<div style={{ fontSize: '1.3rem', color: COLOR.textStrong, marginBottom: '0.6vh' }}>
|
||||
你的聊天开场大多由你发起。
|
||||
</div>
|
||||
{reportData.socialInitiative.topInitiatedFriend && (reportData.socialInitiative.topInitiatedCount || 0) > 0 ? (
|
||||
<div style={{ marginBottom: '0.6vh' }}>
|
||||
其中<strong style={{ color: COLOR.accentGold }}>{reportData.socialInitiative.topInitiatedFriend}</strong>是你最常联系的人，
|
||||
有<strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.2rem', margin: '0 4px' }}>{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}</strong>次，是你先忍不住敲响了对方的门
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginBottom: '0.6vh' }}>
|
||||
你主动发起了<strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.2rem', margin: '0 4px' }}>{reportData.socialInitiative.initiatedChats.toLocaleString()}</strong>次联络。
|
||||
</div>
|
||||
)}
|
||||
<span style={{ fontSize: '0.9rem', color: COLOR.textMuted }}>想见一个人的心，总是走在时间的前面。</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{reportData.responseSpeed && (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', bottom: '22vh', right: '15vw', width: '38vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em' }}>回应速度</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(3.5rem, 6vw, 5rem)', color: COLOR.accentSoft, 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: COLOR.textSoft, lineHeight: '1.8' }}>
|
||||
<strong style={{ color: COLOR.accentGold }}>{reportData.responseSpeed.fastestFriend}</strong> 回你的消息总是很快。<br/>
|
||||
<span style={{ fontSize: '0.9rem', color: COLOR.textMuted }}>这世上最让人安心的默契，莫过于一句 "我在"。</span>
|
||||
</div>
|
||||
</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 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 serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em', marginBottom: '2vh' }}>最长连续聊天</div>
|
||||
<div className="reveal-inner serif delay-2" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: COLOR.accentGold, letterSpacing: '0.02em' }}>
|
||||
{reportData.longestStreak.friendName}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: COLOR.textSoft, marginTop: '2vh' }}>
|
||||
你们曾连续 <strong className="num-display" style={{ color: COLOR.accentGold, 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 serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em', marginBottom: '2vh' }}>最热烈的一天</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', color: COLOR.accentGold, letterSpacing: '0.02em' }}>
|
||||
{reportData.peakDay.date}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: COLOR.textSoft, marginTop: '2vh' }}>
|
||||
“这一天，你们留下了 <strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.8rem' }}>{reportData.peakDay.messageCount}</strong> 句话。<br/>好像要把积攒了很久的想念，一天全都说完。”
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!reportData.longestStreak && !reportData.peakDay && (
|
||||
<div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">没有激起过火花。</div></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S8: FADING SIGNALS */}
|
||||
<div className={getSceneClass(8)} id="scene-8">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner serif scene0-cn-tag">曾经的好友</div>
|
||||
</div>
|
||||
{reportData.lostFriend ? (
|
||||
<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 s8-letter-wrap">
|
||||
<div className="reveal-inner serif delay-4 s8-letter">
|
||||
所有的离散，或许都只是一场漫长的越冬。飞鸟要越过一万座雪山，才能带来春天的第一行回信；树木要褪去一万次枯叶，才能记住风的形状。如果时间注定要把我们推向不同的象限，那就在记忆的最深处建一座灯塔。哪怕要熬过几千个无法见面的黄昏，也要相信，总有一次日出的晨光，是为了照亮我们重逢的归途。
|
||||
</div>
|
||||
</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 serif scene0-cn-tag">我的词云</div>
|
||||
</div>
|
||||
|
||||
{reportData.topPhrases && reportData.topPhrases.slice(0, 12).map((phrase, i) => {
|
||||
// 12 precisely tuned absolute coordinates for the ultimate organic scatter without overlapping
|
||||
const demoStyles = [
|
||||
{ left: '25vw', top: '25vh', fontSize: 'clamp(3rem, 7vw, 5rem)', color: 'rgba(250,250,248,0.96)', delay: '0.1s', floatDelay: '0s', targetOp: 0.96 },
|
||||
{ left: '72vw', top: '30vh', fontSize: 'clamp(2rem, 5vw, 4rem)', color: 'rgba(250,250,248,0.78)', delay: '0.2s', floatDelay: '-1s', targetOp: 0.78 },
|
||||
{ left: '15vw', top: '55vh', fontSize: 'clamp(2.5rem, 6vw, 4.5rem)', color: 'rgba(200,170,120,0.72)', delay: '0.3s', floatDelay: '-2.5s', targetOp: 0.72 },
|
||||
{ left: '78vw', top: '60vh', fontSize: 'clamp(1.5rem, 3.5vw, 3rem)', color: 'rgba(250,250,248,0.62)', delay: '0.4s', floatDelay: '-1.5s', targetOp: 0.62 },
|
||||
{ left: '45vw', top: '75vh', fontSize: 'clamp(1.2rem, 3vw, 2.5rem)', color: 'rgba(200,170,120,0.58)', delay: '0.5s', floatDelay: '-3s', targetOp: 0.58 },
|
||||
{ left: '55vw', top: '15vh', fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', color: 'rgba(250,250,248,0.52)', delay: '0.6s', floatDelay: '-0.5s', targetOp: 0.52 },
|
||||
{ left: '12vw', top: '80vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(250,250,248,0.42)', delay: '0.7s', floatDelay: '-1.2s', targetOp: 0.42 },
|
||||
{ left: '35vw', top: '45vh', fontSize: 'clamp(2.2rem, 5vw, 4rem)', color: 'rgba(250,250,248,0.82)', delay: '0.8s', floatDelay: '-0.8s', targetOp: 0.82 },
|
||||
{ left: '85vw', top: '82vh', fontSize: 'clamp(0.9rem, 1.5vw, 1.5rem)', color: 'rgba(200,170,120,0.34)', delay: '0.9s', floatDelay: '-2.1s', targetOp: 0.34 },
|
||||
{ left: '60vw', top: '50vh', fontSize: 'clamp(1.8rem, 4vw, 3.5rem)', color: 'rgba(250,250,248,0.64)', delay: '1s', floatDelay: '-0.3s', targetOp: 0.64 },
|
||||
{ left: '45vw', top: '35vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(250,250,248,0.38)', delay: '1.1s', floatDelay: '-1.8s', targetOp: 0.38 },
|
||||
{ left: '30vw', top: '65vh', fontSize: 'clamp(1.4rem, 2.5vw, 2.2rem)', color: 'rgba(200,170,120,0.46)', delay: '1.2s', floatDelay: '-2.7s', targetOp: 0.46 },
|
||||
];
|
||||
const st = demoStyles[i];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={phrase.phrase + i}
|
||||
className="word-burst"
|
||||
style={{
|
||||
left: st.left,
|
||||
top: st.top,
|
||||
fontSize: st.fontSize,
|
||||
color: st.color,
|
||||
transitionDelay: st.delay,
|
||||
'--target-op': st.targetOp
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<span className="float-el" style={{ animationDelay: st.floatDelay }}>{phrase.phrase}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{(!reportData.topPhrases || reportData.topPhrases.length === 0) && (
|
||||
<div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">词汇量太少，无法形成星云。</div></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S10: EXTRACTION (白色反色结束页 / Data Receipt) */}
|
||||
<div className={getSceneClass(10)} id="scene-10" style={{ color: COLOR.paperInk }}>
|
||||
<div className="reveal-wrap en-tag" style={{ zIndex: 20 }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag" style={{ color: COLOR.paperMuted }}>旅程的终点</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: COLOR.paperInk, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
{finalYearLabel}
|
||||
</div>
|
||||
<div className="mono" style={{ fontSize: '0.8rem', color: COLOR.paperMuted, letterSpacing: '0.4em' }}>
|
||||
TRANSMISSION COMPLETE
|
||||
</div>
|
||||
|
||||
{/* Core Stats Row */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '6vh', borderTop: '1px solid rgba(110, 89, 46, 0.35)', borderBottom: '1px solid rgba(110, 89, 46, 0.35)', padding: '4vh 0' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>朋友圈发帖</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>{endingPostCount.toLocaleString()}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>被动开场</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>{endingReceivedChats.toLocaleString()}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>你最爱说</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>“{endingTopPhrase}”</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="serif" style={{ fontSize: '1.2rem', color: 'rgba(34, 28, 16, 0.82)', marginTop: '4vh', letterSpacing: '0.05em' }}>
|
||||
“故事的最后，我们把这一切悄悄还给岁月<br/>只要这些文字还在，所有的离别，就都只是一场短暂的缺席。”
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="report-scroll-view">
|
||||
<div className="report-container" ref={containerRef}>
|
||||
|
||||
{/* 封面 */}
|
||||
<section className="section" ref={sectionRefs.cover}>
|
||||
<div className="label-text">WEFLOW · ANNUAL REPORT</div>
|
||||
<h1 className="hero-title">{yearTitle}<br />微信聊天报告</h1>
|
||||
<hr className="divider" />
|
||||
<p className="hero-desc">每一条消息背后<br />都藏着一段独特的故事</p>
|
||||
</section>
|
||||
|
||||
{/* 年度概览 */}
|
||||
<section className="section" ref={sectionRefs.overview}>
|
||||
<div className="label-text">年度概览</div>
|
||||
<h2 className="hero-title">你和你的朋友们<br />互相发过</h2>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{formatNumber(totalMessages)}</span>
|
||||
<span className="stat-unit">条消息</span>
|
||||
<div className="btn-wrap" style={{ zIndex: 20, bottom: '8vh' }}>
|
||||
<div className="serif reveal-wrap" style={{ marginBottom: '20px' }}>
|
||||
<div
|
||||
className="reveal-inner delay-2"
|
||||
style={{
|
||||
fontSize: 'clamp(0.9rem, 1.15vw, 1.02rem)',
|
||||
color: COLOR.paperMuted,
|
||||
lineHeight: 1.95,
|
||||
letterSpacing: '0.03em',
|
||||
maxWidth: 'min(980px, 78vw)',
|
||||
textAlign: 'center',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
数据数得清一万句落笔的寒暄，却度量不出一个默契的眼神。<br/>在这片由数字构建的大海里，热烈的回应未必是感情的全部轮廓。<br/>真正的爱与羁绊，从来都不在跳动的屏幕里，而在无法被量化的现实。
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
在这段时光里，你与 <span className="hl">{formatNumber(totalFriends)}</span> 位好友交换过喜怒哀乐。
|
||||
<br />每一个对话，都是一段故事的开始。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 年度挚友 */}
|
||||
{topFriend && (
|
||||
<section className="section" ref={sectionRefs.bestFriend}>
|
||||
<div className="label-text">年度挚友</div>
|
||||
<h2 className="hero-title">{topFriend.displayName}</h2>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{formatNumber(topFriend.messageCount)}</span>
|
||||
<span className="stat-unit">条消息</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
你发出 <span className="hl">{formatNumber(topFriend.sentCount)}</span> 条 ·
|
||||
TA发来 <span className="hl">{formatNumber(topFriend.receivedCount)}</span> 条
|
||||
</p>
|
||||
<br />
|
||||
<p className="hero-desc">
|
||||
在一起，就可以
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 月度好友 */}
|
||||
<section className="section" ref={sectionRefs.monthlyFriends}>
|
||||
<div className="label-text">月度好友</div>
|
||||
<h2 className="hero-title">{monthlyTitle}</h2>
|
||||
<p className="hero-desc">根据12个月的聊天习惯</p>
|
||||
<div className="monthly-orbit">
|
||||
{monthlyTopFriends.map((m, i) => (
|
||||
<div key={m.month} className="monthly-item" style={{ '--i': i } as React.CSSProperties}>
|
||||
<div className="month-label">{m.month}月</div>
|
||||
<Avatar url={m.avatarUrl} name={m.displayName} size="sm" />
|
||||
<div className="month-name">{m.displayName}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="monthly-center">
|
||||
<Avatar url={selfAvatarUrl} name="我" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="hero-desc">你只管说<br />我一直在</p>
|
||||
</section>
|
||||
|
||||
{/* 双向奔赴 */}
|
||||
{mutualFriend && (
|
||||
<section className="section" ref={sectionRefs.mutualFriend}>
|
||||
<div className="label-text">双向奔赴</div>
|
||||
<h2 className="hero-title">默契与平衡</h2>
|
||||
<div className="mutual-visual">
|
||||
<div className="mutual-side you">
|
||||
<Avatar url={selfAvatarUrl} name="我" size="lg" />
|
||||
<div className="mutual-arrow">
|
||||
<span className="arrow-count">{formatNumber(mutualFriend.sentCount)}</span>
|
||||
<div className="arrow-line">→</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mutual-center">
|
||||
<div className="mutual-icon">🤝</div>
|
||||
<div className="mutual-ratio">{mutualFriend.ratio}</div>
|
||||
</div>
|
||||
<div className="mutual-side friend">
|
||||
<div className="mutual-arrow reverse">
|
||||
<span className="arrow-count">{formatNumber(mutualFriend.receivedCount)}</span>
|
||||
<div className="arrow-line">←</div>
|
||||
</div>
|
||||
<Avatar url={mutualFriend.avatarUrl} name={mutualFriend.displayName} size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mutual-name-tag">{mutualFriend.displayName}</div>
|
||||
<p className="hero-desc">
|
||||
你们的互动比例接近 <span className="hl">{mutualFriend.ratio}</span>。
|
||||
<br />你来我往，势均力敌。
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 社交主动性 */}
|
||||
{socialInitiative && (
|
||||
<section className="section" ref={sectionRefs.socialInitiative}>
|
||||
<div className="label-text">社交主动性</div>
|
||||
<h2 className="hero-title">主动才有故事</h2>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{socialInitiative.initiativeRate}%</span>
|
||||
<span className="stat-unit">的对话由你发起</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
面对 <span className="hl">{socialStoryName}</span> 的时候，你总是那个先开口的人。
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 巅峰时刻 */}
|
||||
{peakDay && (
|
||||
<section className="section" ref={sectionRefs.peakDay}>
|
||||
<div className="label-text">巅峰时刻</div>
|
||||
<h2 className="hero-title">{peakDay.date}</h2>
|
||||
<p className="hero-desc">一天里你一共发了</p>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{formatNumber(peakDay.messageCount)}</span>
|
||||
<span className="stat-unit">条消息</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
在这个快节奏的世界，有人正陪在你身边听你慢慢地讲
|
||||
<br />那天，你和 <span className="hl">{peakDay.topFriend || '好友'}</span> 的 {formatNumber(peakDay.topFriendCount || 0)} 条消息见证着这一切
|
||||
<br />有些话，只想对你说
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 聊天火花 */}
|
||||
{longestStreak && (
|
||||
<section className="section" ref={sectionRefs.streak}>
|
||||
<div className="label-text">持之以恒</div>
|
||||
<h2 className="hero-title">聊天火花</h2>
|
||||
<p className="hero-desc">与 <span className="hl">{longestStreak.friendName}</span> 持续了</p>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{longestStreak.days}</span>
|
||||
<span className="stat-unit">天</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
从 {longestStreak.startDate} 到 {longestStreak.endDate}
|
||||
</p>
|
||||
<p className="hero-desc">陪伴，是最长情的告白</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 作息规律 */}
|
||||
<section className="section" ref={sectionRefs.heatmap}>
|
||||
<div className="label-text">作息规律</div>
|
||||
<h2 className="hero-title">时间的痕迹</h2>
|
||||
<p className="hero-desc active-time">
|
||||
在 <span className="hl">{mostActive.weekday} {String(mostActive.hour).padStart(2, '0')}:00</span> 最活跃
|
||||
</p>
|
||||
<Heatmap data={activityHeatmap.data} />
|
||||
</section>
|
||||
|
||||
{/* 深夜好友 */}
|
||||
{midnightKing && (
|
||||
<section className="section" ref={sectionRefs.midnightKing}>
|
||||
<div className="label-text">深夜好友</div>
|
||||
<h2 className="hero-title">月光下的你</h2>
|
||||
<p className="hero-desc">在这一年你留下了</p>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{midnightKing.count}</span>
|
||||
<span className="stat-unit">条深夜的消息</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
其中 <span className="hl">{midnightKing.displayName}</span> 常常在深夜中陪着你胡思乱想。
|
||||
<br />你和Ta的对话占你深夜期间聊天的 <span className="gold">{midnightKing.percentage}%</span>。
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 回应速度 */}
|
||||
{responseSpeed && (
|
||||
<section className="section" ref={sectionRefs.responseSpeed}>
|
||||
<div className="label-text">回应速度</div>
|
||||
<h2 className="hero-title">念念不忘，必有回响</h2>
|
||||
<div className="big-stat">
|
||||
<span className="stat-num">{formatTime(responseSpeed.avgResponseTime)}</span>
|
||||
<span className="stat-unit">是你的平均回复时间</span>
|
||||
</div>
|
||||
<p className="hero-desc">
|
||||
你回复 <span className="hl">{responseSpeed.fastestFriend}</span> 最快
|
||||
<br />平均只需 <span className="gold">{formatTime(responseSpeed.fastestTime)}</span>
|
||||
</p>
|
||||
</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}>
|
||||
<div className="label-text">年度常用语</div>
|
||||
<h2 className="hero-title">{phrasesTitle}</h2>
|
||||
<p className="hero-desc">
|
||||
这一年，你说得最多的是：
|
||||
<br />
|
||||
<span className="hl" style={{ fontSize: '20px' }}>
|
||||
{topPhrases.slice(0, 3).map(p => p.phrase).join('、')}
|
||||
</span>
|
||||
</p>
|
||||
<WordCloud words={topPhrases} />
|
||||
<p className="hero-desc word-cloud-note">颜色越深代表出现频率越高</p>
|
||||
</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>
|
||||
<h2 className="hero-title">聊得最多的人</h2>
|
||||
|
||||
{/* 领奖台 - 前三名 */}
|
||||
<div className="podium">
|
||||
{/* 第二名 - 左边 */}
|
||||
{coreFriends[1] && (
|
||||
<div className="podium-item second">
|
||||
<Avatar url={coreFriends[1].avatarUrl} name={coreFriends[1].displayName} size="lg" />
|
||||
<div className="podium-name">{coreFriends[1].displayName}</div>
|
||||
<div className="podium-count">{formatNumber(coreFriends[1].messageCount)} 条</div>
|
||||
<div className="podium-stand">
|
||||
<span className="podium-rank">2</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 第一名 - 中间最高 */}
|
||||
{coreFriends[0] && (
|
||||
<div className="podium-item first">
|
||||
<div className="crown">👑</div>
|
||||
<Avatar url={coreFriends[0].avatarUrl} name={coreFriends[0].displayName} size="lg" />
|
||||
<div className="podium-name">{coreFriends[0].displayName}</div>
|
||||
<div className="podium-count">{formatNumber(coreFriends[0].messageCount)} 条</div>
|
||||
<div className="podium-stand">
|
||||
<span className="podium-rank">1</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 第三名 - 右边 */}
|
||||
{coreFriends[2] && (
|
||||
<div className="podium-item third">
|
||||
<Avatar url={coreFriends[2].avatarUrl} name={coreFriends[2].displayName} size="lg" />
|
||||
<div className="podium-name">{coreFriends[2].displayName}</div>
|
||||
<div className="podium-count">{formatNumber(coreFriends[2].messageCount)} 条</div>
|
||||
<div className="podium-stand">
|
||||
<span className="podium-rank">3</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 结尾 */}
|
||||
<section className="section ending" ref={sectionRefs.ending}>
|
||||
<h2 className="hero-title">尾声</h2>
|
||||
<p className="hero-desc">
|
||||
我们总是在向前走
|
||||
<br />却很少有机会回头看看
|
||||
<br />如果这份报告让你有所触动，不妨把它分享给你在意的人
|
||||
<br />愿新的一年，
|
||||
<br />所有期待，皆有回声。
|
||||
</p>
|
||||
<div className="ending-year">{yearTitleShort}</div>
|
||||
<div className="ending-brand">WEFLOW</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="reveal-wrap">
|
||||
<button
|
||||
className="btn num-display reveal-inner delay-3"
|
||||
onClick={handleExtract}
|
||||
disabled={isExtracting}
|
||||
style={{
|
||||
background: isExtracting ? '#CDC4B0' : (buttonText === 'SAVED TO DEVICE' ? '#1A140A' : '#101010'),
|
||||
color: 'var(--c-gold-strong)',
|
||||
fontSize: '0.85rem',
|
||||
border: '1px solid rgba(var(--c-gold-rgb), 0.45)',
|
||||
minWidth: '200px'
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1898,6 +1898,9 @@ const TaskCenterModal = memo(function TaskCenterModal({
|
||||
const mediaCacheMetricLabel = mediaCacheTotal > 0
|
||||
? `缓存命中 ${mediaCacheHitFiles}/${mediaCacheTotal}`
|
||||
: ''
|
||||
const mediaMissMetricLabel = mediaCacheMissFiles > 0
|
||||
? `未导出 ${mediaCacheMissFiles} 个文件/媒体`
|
||||
: ''
|
||||
const mediaDedupMetricLabel = mediaDedupReuseFiles > 0
|
||||
? `复用 ${mediaDedupReuseFiles}`
|
||||
: ''
|
||||
@@ -1958,6 +1961,7 @@ const TaskCenterModal = memo(function TaskCenterModal({
|
||||
{phaseMetricLabel ? ` · ${phaseMetricLabel}` : ''}
|
||||
{mediaLiveMetricLabel ? ` · ${mediaLiveMetricLabel}` : ''}
|
||||
{mediaCacheMetricLabel ? ` · ${mediaCacheMetricLabel}` : ''}
|
||||
{mediaMissMetricLabel ? ` · ${mediaMissMetricLabel}` : ''}
|
||||
{mediaDedupMetricLabel ? ` · ${mediaDedupMetricLabel}` : ''}
|
||||
{task.status === 'running' && currentSessionRatio !== null
|
||||
? `（当前会话 ${Math.round(currentSessionRatio * 100)}%）`
|
||||
|
||||
+151
-98
@@ -75,6 +75,7 @@ interface WxidOption {
|
||||
type SessionFilterType = configService.MessagePushSessionType
|
||||
type SessionFilterTypeValue = 'all' | SessionFilterType
|
||||
type SessionFilterMode = 'all' | 'whitelist' | 'blacklist'
|
||||
type InsightSessionFilterTypeValue = 'all' | 'private' | 'group' | 'official'
|
||||
|
||||
interface SessionFilterOption {
|
||||
username: string
|
||||
@@ -91,6 +92,13 @@ const sessionFilterTypeOptions: Array<{ value: SessionFilterTypeValue; label: st
|
||||
{ value: 'other', label: '其他/非好友' }
|
||||
]
|
||||
|
||||
const insightFilterTypeOptions: Array<{ value: InsightSessionFilterTypeValue; label: string }> = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'private', label: '私聊' },
|
||||
{ value: 'group', label: '群聊' },
|
||||
{ value: 'official', label: '订阅号/服务号' }
|
||||
]
|
||||
|
||||
interface SettingsPageProps {
|
||||
onClose?: () => void
|
||||
}
|
||||
@@ -194,6 +202,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
const [filterModeDropdownOpen, setFilterModeDropdownOpen] = useState(false)
|
||||
const [positionDropdownOpen, setPositionDropdownOpen] = useState(false)
|
||||
const [closeBehaviorDropdownOpen, setCloseBehaviorDropdownOpen] = useState(false)
|
||||
const [insightFilterModeDropdownOpen, setInsightFilterModeDropdownOpen] = useState(false)
|
||||
|
||||
const [wordCloudExcludeWords, setWordCloudExcludeWords] = useState<string[]>([])
|
||||
const [excludeWordsInput, setExcludeWordsInput] = useState('')
|
||||
@@ -275,8 +284,9 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
const [showInsightApiKey, setShowInsightApiKey] = useState(false)
|
||||
const [isTriggeringInsightTest, setIsTriggeringInsightTest] = useState(false)
|
||||
const [insightTriggerResult, setInsightTriggerResult] = useState<{ success: boolean; message: string } | null>(null)
|
||||
const [aiInsightWhitelistEnabled, setAiInsightWhitelistEnabled] = useState(false)
|
||||
const [aiInsightWhitelist, setAiInsightWhitelist] = useState<Set<string>>(new Set())
|
||||
const [aiInsightFilterMode, setAiInsightFilterMode] = useState<configService.AiInsightFilterMode>('whitelist')
|
||||
const [aiInsightFilterList, setAiInsightFilterList] = useState<Set<string>>(new Set())
|
||||
const [insightFilterType, setInsightFilterType] = useState<InsightSessionFilterTypeValue>('all')
|
||||
const [insightWhitelistSearch, setInsightWhitelistSearch] = useState('')
|
||||
const [aiInsightCooldownMinutes, setAiInsightCooldownMinutes] = useState(120)
|
||||
const [aiInsightScanIntervalHours, setAiInsightScanIntervalHours] = useState(4)
|
||||
@@ -397,15 +407,16 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
setPositionDropdownOpen(false)
|
||||
setCloseBehaviorDropdownOpen(false)
|
||||
setMessagePushFilterDropdownOpen(false)
|
||||
setInsightFilterModeDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
if (filterModeDropdownOpen || positionDropdownOpen || closeBehaviorDropdownOpen || messagePushFilterDropdownOpen) {
|
||||
if (filterModeDropdownOpen || positionDropdownOpen || closeBehaviorDropdownOpen || messagePushFilterDropdownOpen || insightFilterModeDropdownOpen) {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
}, [closeBehaviorDropdownOpen, filterModeDropdownOpen, messagePushFilterDropdownOpen, positionDropdownOpen])
|
||||
}, [closeBehaviorDropdownOpen, filterModeDropdownOpen, insightFilterModeDropdownOpen, messagePushFilterDropdownOpen, positionDropdownOpen])
|
||||
|
||||
|
||||
const loadConfig = async () => {
|
||||
@@ -531,8 +542,8 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
const savedAiModelApiMaxTokens = await configService.getAiModelApiMaxTokens()
|
||||
const savedAiInsightSilenceDays = await configService.getAiInsightSilenceDays()
|
||||
const savedAiInsightAllowContext = await configService.getAiInsightAllowContext()
|
||||
const savedAiInsightWhitelistEnabled = await configService.getAiInsightWhitelistEnabled()
|
||||
const savedAiInsightWhitelist = await configService.getAiInsightWhitelist()
|
||||
const savedAiInsightFilterMode = await configService.getAiInsightFilterMode()
|
||||
const savedAiInsightFilterList = await configService.getAiInsightFilterList()
|
||||
const savedAiInsightCooldownMinutes = await configService.getAiInsightCooldownMinutes()
|
||||
const savedAiInsightScanIntervalHours = await configService.getAiInsightScanIntervalHours()
|
||||
const savedAiInsightContextCount = await configService.getAiInsightContextCount()
|
||||
@@ -555,8 +566,8 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
setAiModelApiMaxTokens(savedAiModelApiMaxTokens)
|
||||
setAiInsightSilenceDays(savedAiInsightSilenceDays)
|
||||
setAiInsightAllowContext(savedAiInsightAllowContext)
|
||||
setAiInsightWhitelistEnabled(savedAiInsightWhitelistEnabled)
|
||||
setAiInsightWhitelist(new Set(savedAiInsightWhitelist))
|
||||
setAiInsightFilterMode(savedAiInsightFilterMode)
|
||||
setAiInsightFilterList(new Set(savedAiInsightFilterList))
|
||||
setAiInsightCooldownMinutes(savedAiInsightCooldownMinutes)
|
||||
setAiInsightScanIntervalHours(savedAiInsightScanIntervalHours)
|
||||
setAiInsightContextCount(savedAiInsightContextCount)
|
||||
@@ -3390,98 +3401,129 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
{/* 对话白名单 */}
|
||||
{/* 对话过滤名单 */}
|
||||
{(() => {
|
||||
const sortedSessions = [...chatSessions].sort((a, b) => (b.sortTimestamp || 0) - (a.sortTimestamp || 0))
|
||||
const selectableSessions = sessionFilterOptions.filter((session) =>
|
||||
session.type === 'private' || session.type === 'group' || session.type === 'official'
|
||||
)
|
||||
const keyword = insightWhitelistSearch.trim().toLowerCase()
|
||||
const filteredSessions = sortedSessions.filter((s) => {
|
||||
const id = s.username?.trim() || ''
|
||||
if (!id || id.endsWith('@chatroom') || id.toLowerCase().includes('placeholder')) return false
|
||||
const filteredSessions = selectableSessions.filter((session) => {
|
||||
if (insightFilterType !== 'all' && session.type !== insightFilterType) return false
|
||||
const id = session.username?.trim() || ''
|
||||
if (!id || id.toLowerCase().includes('placeholder')) return false
|
||||
if (!keyword) return true
|
||||
return (
|
||||
String(s.displayName || '').toLowerCase().includes(keyword) ||
|
||||
String(session.displayName || '').toLowerCase().includes(keyword) ||
|
||||
id.toLowerCase().includes(keyword)
|
||||
)
|
||||
})
|
||||
const filteredIds = filteredSessions.map((s) => s.username)
|
||||
const selectedCount = aiInsightWhitelist.size
|
||||
const selectedInFilteredCount = filteredIds.filter((id) => aiInsightWhitelist.has(id)).length
|
||||
const filteredIds = filteredSessions.map((session) => session.username)
|
||||
const selectedCount = aiInsightFilterList.size
|
||||
const selectedInFilteredCount = filteredIds.filter((id) => aiInsightFilterList.has(id)).length
|
||||
const allFilteredSelected = filteredIds.length > 0 && selectedInFilteredCount === filteredIds.length
|
||||
|
||||
const toggleSession = (id: string) => {
|
||||
setAiInsightWhitelist((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
const saveFilterList = async (next: Set<string>) => {
|
||||
await configService.setAiInsightFilterList(Array.from(next))
|
||||
}
|
||||
|
||||
const saveWhitelist = async (next: Set<string>) => {
|
||||
await configService.setAiInsightWhitelist(Array.from(next))
|
||||
const saveFilterMode = async (mode: configService.AiInsightFilterMode) => {
|
||||
setAiInsightFilterMode(mode)
|
||||
setInsightFilterModeDropdownOpen(false)
|
||||
await configService.setAiInsightFilterMode(mode)
|
||||
showMessage(mode === 'whitelist' ? '已切换为白名单模式' : '已切换为黑名单模式', true)
|
||||
}
|
||||
|
||||
const selectAllFiltered = () => {
|
||||
setAiInsightWhitelist((prev) => {
|
||||
setAiInsightFilterList((prev) => {
|
||||
const next = new Set(prev)
|
||||
for (const id of filteredIds) next.add(id)
|
||||
void saveWhitelist(next)
|
||||
void saveFilterList(next)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const clearSelection = () => {
|
||||
const next = new Set<string>()
|
||||
setAiInsightWhitelist(next)
|
||||
void saveWhitelist(next)
|
||||
setAiInsightFilterList(next)
|
||||
void saveFilterList(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="anti-revoke-tab insight-social-tab">
|
||||
<div className="anti-revoke-hero">
|
||||
<div className="anti-revoke-hero-main">
|
||||
<h3>对话白名单</h3>
|
||||
<h3>对话黑白名单</h3>
|
||||
<p>
|
||||
开启后，AI 见解仅对勾选的私聊对话生效，未勾选的对话将被完全忽略。关闭时对所有私聊均生效。中间可填写微博 UID。
|
||||
白名单模式下仅对已选会话触发见解；黑名单模式下会跳过已选会话。默认白名单且不选择任何会话。支持私聊、群聊、订阅号/服务号分类筛选后批量选择。
|
||||
</p>
|
||||
</div>
|
||||
<div className="anti-revoke-metrics">
|
||||
<div className="anti-revoke-metric is-total">
|
||||
<span className="label">私聊总数</span>
|
||||
<span className="value">{filteredIds.length + (keyword ? 0 : 0)}</span>
|
||||
<span className="label">可选会话总数</span>
|
||||
<span className="value">{selectableSessions.length}</span>
|
||||
</div>
|
||||
<div className="anti-revoke-metric is-installed">
|
||||
<span className="label">已选中</span>
|
||||
<span className="label">已加入名单</span>
|
||||
<span className="value">{selectedCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="log-toggle-line" style={{ marginBottom: 12 }}>
|
||||
<span className="log-status" style={{ fontWeight: 600 }}>
|
||||
{aiInsightWhitelistEnabled ? '白名单已启用（仅对勾选对话生效）' : '白名单未启用（对所有私聊生效）'}
|
||||
</span>
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={aiInsightWhitelistEnabled}
|
||||
onChange={async (e) => {
|
||||
const val = e.target.checked
|
||||
setAiInsightWhitelistEnabled(val)
|
||||
await configService.setAiInsightWhitelistEnabled(val)
|
||||
}}
|
||||
/>
|
||||
<span className="switch-slider" />
|
||||
</label>
|
||||
<div className="form-group" style={{ marginBottom: 12 }}>
|
||||
<div className="log-toggle-line">
|
||||
<span className="log-status" style={{ fontWeight: 600 }}>
|
||||
{aiInsightFilterMode === 'whitelist'
|
||||
? '白名单模式（仅对名单内会话生效）'
|
||||
: '黑名单模式（名单内会话将被忽略）'}
|
||||
</span>
|
||||
<div className="custom-select" style={{ minWidth: 210 }}>
|
||||
<div
|
||||
className={`custom-select-trigger ${insightFilterModeDropdownOpen ? 'open' : ''}`}
|
||||
onClick={() => setInsightFilterModeDropdownOpen(!insightFilterModeDropdownOpen)}
|
||||
>
|
||||
<span className="custom-select-value">
|
||||
{aiInsightFilterMode === 'whitelist' ? '白名单模式' : '黑名单模式'}
|
||||
</span>
|
||||
<ChevronDown size={14} className={`custom-select-arrow ${insightFilterModeDropdownOpen ? 'rotate' : ''}`} />
|
||||
</div>
|
||||
<div className={`custom-select-dropdown ${insightFilterModeDropdownOpen ? 'open' : ''}`}>
|
||||
{[
|
||||
{ value: 'whitelist', label: '白名单模式' },
|
||||
{ value: 'blacklist', label: '黑名单模式' }
|
||||
].map(option => (
|
||||
<div
|
||||
key={option.value}
|
||||
className={`custom-select-option ${aiInsightFilterMode === option.value ? 'selected' : ''}`}
|
||||
onClick={() => { void saveFilterMode(option.value as configService.AiInsightFilterMode) }}
|
||||
>
|
||||
{option.label}
|
||||
{aiInsightFilterMode === option.value && <Check size={14} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="anti-revoke-control-card">
|
||||
<div className="push-filter-type-tabs" style={{ marginBottom: 10 }}>
|
||||
{insightFilterTypeOptions.map(option => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
className={`push-filter-type-tab ${insightFilterType === option.value ? 'active' : ''}`}
|
||||
onClick={() => setInsightFilterType(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="anti-revoke-toolbar">
|
||||
<div className="filter-search-box anti-revoke-search">
|
||||
<Search size={14} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索私聊对话..."
|
||||
placeholder="搜索对话..."
|
||||
value={insightWhitelistSearch}
|
||||
onChange={(e) => setInsightWhitelistSearch(e.target.value)}
|
||||
/>
|
||||
@@ -3517,7 +3559,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
<div className="anti-revoke-list">
|
||||
{filteredSessions.length === 0 ? (
|
||||
<div className="anti-revoke-empty">
|
||||
{insightWhitelistSearch ? '没有匹配的对话' : '暂无私聊对话'}
|
||||
{insightWhitelistSearch || insightFilterType !== 'all' ? '没有匹配的对话' : '暂无可选对话'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -3527,7 +3569,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
<span>状态</span>
|
||||
</div>
|
||||
{filteredSessions.map((session) => {
|
||||
const isSelected = aiInsightWhitelist.has(session.username)
|
||||
const isSelected = aiInsightFilterList.has(session.username)
|
||||
const weiboBinding = aiInsightWeiboBindings[session.username]
|
||||
const weiboDraftValue = getWeiboBindingDraftValue(session.username)
|
||||
const isBindingLoading = weiboBindingLoadingSessionId === session.username
|
||||
@@ -3543,11 +3585,11 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={async () => {
|
||||
setAiInsightWhitelist((prev) => {
|
||||
setAiInsightFilterList((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(session.username)) next.delete(session.username)
|
||||
else next.add(session.username)
|
||||
void configService.setAiInsightWhitelist(Array.from(next))
|
||||
void configService.setAiInsightFilterList(Array.from(next))
|
||||
return next
|
||||
})
|
||||
}}
|
||||
@@ -3563,54 +3605,65 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
/>
|
||||
<div className="anti-revoke-row-text">
|
||||
<span className="name">{session.displayName || session.username}</span>
|
||||
<span className="desc">{getSessionFilterTypeLabel(session.type)}</span>
|
||||
</div>
|
||||
</label>
|
||||
<div className="insight-social-binding-cell">
|
||||
<div className="insight-social-binding-input-wrap">
|
||||
<span className="binding-platform-chip">微博</span>
|
||||
<input
|
||||
type="text"
|
||||
className="insight-social-binding-input"
|
||||
value={weiboDraftValue}
|
||||
placeholder="填写数字 UID"
|
||||
onChange={(e) => updateWeiboBindingDraft(session.username, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="insight-social-binding-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={() => void handleSaveWeiboBinding(session.username, session.displayName || session.username)}
|
||||
disabled={isBindingLoading || !weiboDraftValue.trim()}
|
||||
>
|
||||
{isBindingLoading ? '绑定中...' : (weiboBinding ? '更新' : '绑定')}
|
||||
</button>
|
||||
{weiboBinding && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={() => void handleClearWeiboBinding(session.username)}
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="insight-social-binding-feedback">
|
||||
{weiboBindingError ? (
|
||||
<span className="binding-feedback error">{weiboBindingError}</span>
|
||||
) : weiboBinding?.screenName ? (
|
||||
<span className="binding-feedback">@{weiboBinding.screenName}</span>
|
||||
) : weiboBinding?.uid ? (
|
||||
<span className="binding-feedback">已绑定 UID：{weiboBinding.uid}</span>
|
||||
) : (
|
||||
<span className="binding-feedback muted">仅支持手动填写数字 UID</span>
|
||||
)}
|
||||
</div>
|
||||
{session.type === 'private' ? (
|
||||
<>
|
||||
<div className="insight-social-binding-input-wrap">
|
||||
<span className="binding-platform-chip">微博</span>
|
||||
<input
|
||||
type="text"
|
||||
className="insight-social-binding-input"
|
||||
value={weiboDraftValue}
|
||||
placeholder="填写数字 UID"
|
||||
onChange={(e) => updateWeiboBindingDraft(session.username, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="insight-social-binding-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={() => void handleSaveWeiboBinding(session.username, session.displayName || session.username)}
|
||||
disabled={isBindingLoading || !weiboDraftValue.trim()}
|
||||
>
|
||||
{isBindingLoading ? '绑定中...' : (weiboBinding ? '更新' : '绑定')}
|
||||
</button>
|
||||
{weiboBinding && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={() => void handleClearWeiboBinding(session.username)}
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="insight-social-binding-feedback">
|
||||
{weiboBindingError ? (
|
||||
<span className="binding-feedback error">{weiboBindingError}</span>
|
||||
) : weiboBinding?.screenName ? (
|
||||
<span className="binding-feedback">@{weiboBinding.screenName}</span>
|
||||
) : weiboBinding?.uid ? (
|
||||
<span className="binding-feedback">已绑定 UID：{weiboBinding.uid}</span>
|
||||
) : (
|
||||
<span className="binding-feedback muted">仅支持手动填写数字 UID</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="insight-social-binding-feedback">
|
||||
<span className="binding-feedback muted">仅私聊支持微博绑定</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="anti-revoke-row-status">
|
||||
<span className={`status-badge ${isSelected ? 'installed' : 'not-installed'}`}>
|
||||
<i className="status-dot" aria-hidden="true" />
|
||||
{isSelected ? '已加入' : '未加入'}
|
||||
{isSelected
|
||||
? (aiInsightFilterMode === 'whitelist' ? '已允许' : '已屏蔽')
|
||||
: (aiInsightFilterMode === 'whitelist' ? '未允许' : '允许')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3631,7 +3684,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
|
||||
<div className="api-docs">
|
||||
<div className="api-item">
|
||||
<p className="api-desc" style={{ lineHeight: 1.7 }}>
|
||||
<strong>触发方式一：活跃会话分析</strong> — 每当微信数据库变化（即你收到新消息）时，经过 500ms 防抖后，对最近活跃的私聊会话进行分析。<br />
|
||||
<strong>触发方式一：活跃会话分析</strong> — 每当微信数据库变化（即你收到新消息）时，经过 500ms 防抖后，对符合黑白名单规则的活跃会话进行分析。<br />
|
||||
<strong>触发方式二：沉默扫描</strong> — 每 4 小时独立扫描一次，对超过阈值天数无消息的联系人发出提醒。<br />
|
||||
<strong>时间观念</strong> — 每次调用时，AI 会收到今天已向该联系人和全局发出过多少次见解，由 AI 自行决定是否需要克制。<br />
|
||||
<strong>隐私</strong> — 所有分析请求均直接从你的电脑发往你填写的 API 地址，不经过任何 WeFlow 服务器。
|
||||
|
||||
Reference in new issue
Block a user