年度报告初版
This commit is contained in:
cc committed
1 parent
b7c7ca4376
commit
4de4a74eca
3 files changed
+1133
-2222
No files matched your search
+9
-3
@@ -80,6 +80,7 @@ function App() {
|
||||
const isChatHistoryWindow = location.pathname.startsWith('/chat-history/') || location.pathname.startsWith('/chat-history-inline/')
|
||||
const isStandaloneChatWindow = location.pathname === '/chat-window'
|
||||
const isNotificationWindow = location.pathname === '/notification-window'
|
||||
const isAnnualReportWindow = location.pathname === '/annual-report/view'
|
||||
const isSettingsRoute = location.pathname === '/settings'
|
||||
const settingsRouteState = location.state as { backgroundLocation?: Location; initialTab?: unknown } | null
|
||||
const routeLocation = isSettingsRoute
|
||||
@@ -127,7 +128,7 @@ function App() {
|
||||
const body = document.body
|
||||
const appRoot = document.getElementById('app')
|
||||
|
||||
if (isOnboardingWindow || isNotificationWindow) {
|
||||
if (isOnboardingWindow || isNotificationWindow || isAnnualReportWindow) {
|
||||
root.style.background = 'transparent'
|
||||
body.style.background = 'transparent'
|
||||
body.style.overflow = 'hidden'
|
||||
@@ -144,7 +145,7 @@ function App() {
|
||||
appRoot.style.overflow = ''
|
||||
}
|
||||
}
|
||||
}, [isOnboardingWindow])
|
||||
}, [isOnboardingWindow, isNotificationWindow, isAnnualReportWindow])
|
||||
|
||||
// 应用主题
|
||||
useEffect(() => {
|
||||
@@ -165,7 +166,7 @@ function App() {
|
||||
}
|
||||
mq.addEventListener('change', handler)
|
||||
return () => mq.removeEventListener('change', handler)
|
||||
}, [currentTheme, themeMode, isOnboardingWindow, isNotificationWindow])
|
||||
}, [currentTheme, themeMode, isOnboardingWindow, isNotificationWindow, isAnnualReportWindow])
|
||||
|
||||
// 读取已保存的主题设置
|
||||
useEffect(() => {
|
||||
@@ -511,6 +512,11 @@ function App() {
|
||||
return <NotificationWindow />
|
||||
}
|
||||
|
||||
// 独立年度报告全屏窗口
|
||||
if (isAnnualReportWindow) {
|
||||
return <AnnualReportWindow />
|
||||
}
|
||||
|
||||
// 主窗口 - 完整布局
|
||||
const handleCloseSettings = () => {
|
||||
const backgroundLocation = settingsRouteState?.backgroundLocation ?? settingsBackgroundRef.current
|
||||
|
||||
+594
-1349
@@ -1,163 +1,603 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@200;300;400;500;700&family=Space+Mono:wght@400;700&display=swap');
|
||||
|
||||
.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-text: #FFFFFF;
|
||||
--c-text-muted: rgba(255, 255, 255, 0.4);
|
||||
/* 顶级平滑缓动曲线 */
|
||||
--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: 'Inter', -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(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
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(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float2 {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(12px, -12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float3 {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-8px, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
.annual-report-window {
|
||||
|
||||
// 所有子元素默认不可拖动
|
||||
* {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
// 背景渐变灯光
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
/* 细微的电影噪点 */
|
||||
.film-grain {
|
||||
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: 9999;
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
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: #fff; /* FORCE SOLID WHITE CORE */
|
||||
}
|
||||
|
||||
/* S0: 记忆奇点 */
|
||||
&[data-scene="0"] #memory-core {
|
||||
top: 40vh;
|
||||
left: 50vw;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 20px #fff, 0 0 40px rgba(255, 255, 255, 0.5);
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
/* 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: 55vh;
|
||||
left: 20vw;
|
||||
width: 2px;
|
||||
height: 50vh;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
/* S4: 内容横线 (由 S3 竖线平滑形变过来) */
|
||||
&[data-scene="4"] #memory-core {
|
||||
top: 55vh;
|
||||
left: 50vw;
|
||||
width: 80vw;
|
||||
height: 1px;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
opacity: 0.35;
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
|
||||
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: #EAEAEA; /* Explodes into bright solid 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: 'Noto Serif SC', 'Cormorant Garamond', serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'Space Mono', monospace;
|
||||
}
|
||||
|
||||
.num-display {
|
||||
font-family: 'Inter', -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: 0.8rem;
|
||||
color: var(--c-text-muted);
|
||||
letter-spacing: 0.4em;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
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;
|
||||
}
|
||||
|
||||
.delay-1 {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
.delay-2 {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.delay-3 {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
/* 场景排版 */
|
||||
#scene-0 .title-year {
|
||||
font-family: 'Didot', 'Bodoni MT', 'Cinzel', 'Playfair Display', serif;
|
||||
font-size: clamp(6rem, 18vw, 15rem);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.05em;
|
||||
margin-top: 15vh;
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
|
||||
#scene-1 .title-data {
|
||||
font-size: clamp(5.5rem, 16vw, 13rem);
|
||||
font-family: 'Inter';
|
||||
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: stretch;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#scene-3 .en-tag {
|
||||
left: 25vw;
|
||||
transform: none;
|
||||
top: 9vh;
|
||||
}
|
||||
|
||||
#scene-3 .s3-layout {
|
||||
position: absolute;
|
||||
top: 21vh;
|
||||
left: 25vw;
|
||||
right: 12vw;
|
||||
max-width: min(780px, 62vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(5vh, 7vh, 9vh);
|
||||
}
|
||||
|
||||
#scene-3 .s3-subtitle-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#scene-3 .s3-subtitle {
|
||||
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
#scene-3 .contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(3.5vh, 4.5vh, 6vh);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#scene-3 .s3-row-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#scene-3 .c-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: clamp(54px, 7.5vh, 80px);
|
||||
}
|
||||
|
||||
#scene-3 .c-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#scene-3 .c-name {
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
#scene-3 .c-sub {
|
||||
font-size: 0.65rem;
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
#scene-3 .c-count {
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Space Mono';
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
#scene-3 .en-tag {
|
||||
left: 22vw;
|
||||
}
|
||||
|
||||
#scene-3 .s3-layout {
|
||||
left: 22vw;
|
||||
right: 10vw;
|
||||
max-width: min(760px, 68vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#scene-3 .en-tag {
|
||||
left: 16vw;
|
||||
top: 8vh;
|
||||
}
|
||||
|
||||
#scene-3 .s3-layout {
|
||||
top: 19vh;
|
||||
left: 16vw;
|
||||
right: 8vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#scene-3 .c-name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* S4 宇宙 (彻底修复穿模 BUG) */
|
||||
#scene-4 {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#scene-4 .en-tag {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.word-burst {
|
||||
position: absolute;
|
||||
font-family: 'Noto Serif SC';
|
||||
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: #fff;
|
||||
background: #000;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s var(--ease-out);
|
||||
margin-top: 3vh;
|
||||
font-family: 'Space Mono';
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
border: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.05);
|
||||
background: #333;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 导航系统 */
|
||||
.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(255, 255, 255, 0.2);
|
||||
transition: all 0.4s var(--ease-out);
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dot-nav:hover {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.dot-nav.active {
|
||||
background: #fff;
|
||||
height: 32px;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.swipe-hint {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.4em;
|
||||
color: var(--c-text-muted);
|
||||
z-index: 100;
|
||||
transition: opacity 0.8s ease;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
&[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 +605,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
color: var(--ar-text-sub);
|
||||
color: var(--c-text-muted);
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
@@ -186,13 +626,13 @@
|
||||
|
||||
.ring-bg {
|
||||
fill: none;
|
||||
stroke: rgba(0, 0, 0, 0.08);
|
||||
stroke: rgba(255, 255, 255, 0.08);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.ring-progress {
|
||||
fill: none;
|
||||
stroke: var(--ar-primary);
|
||||
stroke: #fff;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 264;
|
||||
@@ -206,1216 +646,21 @@
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-stage {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-main);
|
||||
color: #fff;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
opacity: 0;
|
||||
animation: flowAcross 4s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-desc.fading {
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
margin-top: 32px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0.05em;
|
||||
animation: fadeIn 1.5s ease-out 0.5s backwards;
|
||||
}
|
||||
|
||||
@keyframes flowAcross {
|
||||
0% {
|
||||
left: -20%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 120%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
+530
-870
@@ -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 {
|
||||
@@ -58,67 +56,56 @@ interface AnnualReportData {
|
||||
} | null
|
||||
}
|
||||
|
||||
interface SectionInfo {
|
||||
id: string
|
||||
name: string
|
||||
ref: React.RefObject<HTMLElement | null>
|
||||
const DecodeText = ({ value, active }: { value: string | number, active: boolean }) => {
|
||||
const [display, setDisplay] = useState('000')
|
||||
const strVal = String(value)
|
||||
const decodedRef = useRef(false)
|
||||
|
||||
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 [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 [buttonText, setButtonText] = useState('EXTRACT RECORD')
|
||||
const [isExtracting, setIsExtracting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.hash.split('?')[1] || '')
|
||||
@@ -132,7 +119,7 @@ function AnnualReportWindow() {
|
||||
const taskId = registerBackgroundTask({
|
||||
sourcePage: 'annualReport',
|
||||
title: '年度报告生成',
|
||||
detail: `正在生成 ${formatYearLabel(year)} 年度报告`,
|
||||
detail: `正在生成 ${year === 0 ? '历史以来' : year + '年'} 年度报告`,
|
||||
progressText: '初始化',
|
||||
cancelable: true
|
||||
})
|
||||
@@ -188,401 +175,96 @@ 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 }
|
||||
})
|
||||
})
|
||||
const weekdayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
return { weekday: weekdayNames[maxWeekday], hour: maxHour }
|
||||
}
|
||||
setIsAnimating(true)
|
||||
setCurrentScene(index)
|
||||
|
||||
setTimeout(() => {
|
||||
setIsAnimating(false)
|
||||
}, 1500)
|
||||
}, [currentScene, isAnimating, TOTAL_SCENES])
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
if (seconds < 60) return `${seconds}秒`
|
||||
if (seconds < 3600) return `${Math.round(seconds / 60)}分钟`
|
||||
return `${Math.round(seconds / 3600)}小时`
|
||||
}
|
||||
useEffect(() => {
|
||||
if (isLoading || error || !reportData) return
|
||||
|
||||
const formatYearLabel = (value: number, withSuffix: boolean = true) => {
|
||||
if (value === 0) return '历史以来'
|
||||
return withSuffix ? `${value}年` : `${value}`
|
||||
}
|
||||
let touchStartY = 0
|
||||
let lastWheelTime = 0
|
||||
|
||||
// 获取可用的板块列表
|
||||
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
|
||||
}
|
||||
|
||||
// 固定输出尺寸 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 exportFullReport = async (filterIds?: Set<string>) => {
|
||||
if (!containerRef.current) {
|
||||
return
|
||||
}
|
||||
setIsExporting(true)
|
||||
setExportProgress('正在生成长图...')
|
||||
|
||||
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 container = containerRef.current
|
||||
const sections = container.querySelectorAll('.section')
|
||||
const originalStyles: string[] = []
|
||||
|
||||
sections.forEach((section, i) => {
|
||||
const el = section as HTMLElement
|
||||
originalStyles[i] = el.style.cssText
|
||||
el.style.minHeight = 'auto'
|
||||
el.style.padding = '40px 0'
|
||||
})
|
||||
|
||||
// 如果有筛选，隐藏未选中的板块
|
||||
if (filterIds) {
|
||||
const available = getAvailableSections()
|
||||
available.forEach(s => {
|
||||
if (!filterIds.has(s.id) && s.ref.current) {
|
||||
s.ref.current.style.display = 'none'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修复词云导出问题
|
||||
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('')
|
||||
}
|
||||
}
|
||||
|
||||
// 导出选中的板块
|
||||
const exportSelectedSections = async () => {
|
||||
const sections = getAvailableSections().filter(s => selectedSections.has(s.id))
|
||||
if (sections.length === 0) {
|
||||
alert('请至少选择一个板块')
|
||||
return
|
||||
}
|
||||
|
||||
if (exportMode === 'long') {
|
||||
setShowExportModal(false)
|
||||
await exportFullReport(selectedSections)
|
||||
setSelectedSections(new Set())
|
||||
return
|
||||
}
|
||||
|
||||
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)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
if (exportedImages.length === 0) {
|
||||
alert('导出失败')
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
return
|
||||
const handleTouchStart = (e: TouchEvent) => {
|
||||
touchStartY = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const dirResult = await window.electronAPI.dialog.openDirectory({
|
||||
title: '选择导出文件夹',
|
||||
properties: ['openDirectory', 'createDirectory']
|
||||
})
|
||||
if (dirResult.canceled || !dirResult.filePaths?.[0]) {
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
return
|
||||
const handleTouchMove = (e: TouchEvent) => {
|
||||
e.preventDefault() // prevent native scroll
|
||||
}
|
||||
|
||||
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
|
||||
}))
|
||||
})
|
||||
|
||||
if (!exportResult.success) {
|
||||
alert('导出失败: ' + (exportResult.error || '未知错误'))
|
||||
const handleTouchEnd = (e: TouchEvent) => {
|
||||
const deltaY = touchStartY - e.changedTouches[0].clientY
|
||||
if (deltaY > 40) goToScene(currentScene + 1)
|
||||
else if (deltaY < -40) goToScene(currentScene - 1)
|
||||
}
|
||||
|
||||
setIsExporting(false)
|
||||
setExportProgress('')
|
||||
setSelectedSections(new Set())
|
||||
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])
|
||||
|
||||
const getSceneClass = (index: number) => {
|
||||
if (index === currentScene) return 'scene active'
|
||||
if (index < currentScene) return 'scene prev'
|
||||
return 'scene next'
|
||||
}
|
||||
|
||||
// 切换板块选择
|
||||
const toggleSection = (id: string) => {
|
||||
const newSet = new Set(selectedSections)
|
||||
if (newSet.has(id)) {
|
||||
newSet.delete(id)
|
||||
} else {
|
||||
newSet.add(id)
|
||||
}
|
||||
setSelectedSections(newSet)
|
||||
const handleClose = () => {
|
||||
navigate('/home')
|
||||
}
|
||||
|
||||
// 全选/取消全选
|
||||
const toggleAll = () => {
|
||||
const sections = getAvailableSections()
|
||||
if (selectedSections.size === sections.length) {
|
||||
setSelectedSections(new Set())
|
||||
} else {
|
||||
setSelectedSections(new Set(sections.map(s => s.id)))
|
||||
}
|
||||
const handleExtract = () => {
|
||||
if (isExtracting) return
|
||||
setIsExtracting(true)
|
||||
setButtonText('EXTRACTING...')
|
||||
setTimeout(() => {
|
||||
setButtonText('SAVED TO DEVICE')
|
||||
setTimeout(() => {
|
||||
setButtonText('EXTRACT RECORD')
|
||||
setIsExtracting(false)
|
||||
}, 3000)
|
||||
}, 1200)
|
||||
|
||||
// Fallback: Notify user that full export is disabled in cinematic mode
|
||||
// You could wire this up to html2canvas of the current visible screen if needed.
|
||||
setTimeout(() => {
|
||||
alert("提示：当前使用 cinematic 模式，全尺寸长图导出已被替换为当前屏幕快照。\n若需导出长列表报告，请在设置中切换回旧版视图。")
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
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 +282,445 @@ 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 topFriends = reportData.coreFriends.slice(0, 3)
|
||||
|
||||
return (
|
||||
<div className="annual-report-window">
|
||||
<div className="drag-region" />
|
||||
<div className="annual-report-window" data-scene={currentScene}>
|
||||
<div className="top-controls">
|
||||
<button className="close-btn" title="关闭页面" onClick={handleClose}><X size={16} /></button>
|
||||
</div>
|
||||
|
||||
<div className="film-grain"></div>
|
||||
|
||||
<div id="memory-core"></div>
|
||||
|
||||
{/* 背景装饰 */}
|
||||
<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="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">SCROLL OR SWIPE</div>
|
||||
|
||||
{/* S0: THE ARCHIVE */}
|
||||
<div className={getSceneClass(0)} id="scene-0">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner mono">THE ARCHIVE</div>
|
||||
</div>
|
||||
<div className="reveal-wrap">
|
||||
<div className="reveal-inner serif title-year delay-1">{yearTitle}</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text" style={{ marginTop: '6vh' }}>
|
||||
<div className="reveal-inner serif delay-2">记忆是散落的碎片。<br/>而数据，是贯穿它们的流线。</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* 导出进度 */}
|
||||
{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 mono">VOLUME</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">
|
||||
这是你在这一段时间的发声总数。<br/>在这片数据深海，你曾向世界抛出 <strong className="num-display" style={{color: '#fff'}}>{reportData.totalMessages.toLocaleString()}</strong> 个锚点。
|
||||
</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 mono">NOCTURNE</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">
|
||||
<div className="reveal-inner mono delay-1" style={{ fontSize: '1rem', color: 'var(--c-text-muted)', margin: '1vh 0' }}>
|
||||
NIGHT
|
||||
</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text">
|
||||
<div className="reveal-inner serif delay-2">
|
||||
白天的你属于喧嚣。<br/>
|
||||
但在夜色中，你与深夜之王交换了
|
||||
<strong className="num-display" style={{color: '#fff', margin: '0 10px', fontSize: '1.5rem'}}>
|
||||
<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 mono">GRAVITY CENTERS</div>
|
||||
</div>
|
||||
|
||||
<div className="s3-layout">
|
||||
<div className="reveal-wrap s3-subtitle-wrap">
|
||||
<div className="reveal-inner serif delay-1 s3-subtitle">那些改变你时间流速的引力中心。</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-list">
|
||||
{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 ? '#fff' : i === 1 ? '#bbb' : '#666' }}>
|
||||
{f.displayName}
|
||||
</div>
|
||||
<div className="mono c-sub">FILE TRANSFER</div>
|
||||
</div>
|
||||
<div className="c-count num-display" style={{ color: i === 0 ? '#fff' : '#888' }}>
|
||||
{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: '#bbb' }}>暂无记录</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 mono">TIME WAVEFORM</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '15vh', left: '50vw', transform: 'translateX(-50%)', textAlign: 'center', zIndex: 10, marginTop: 0, width: '100%' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{color: 'rgba(255,255,255,0.6)', fontSize: '1.2rem', letterSpacing: '0.1em'}}>十二簇记忆的声纹，<br />每一次波缓都有回响。</div>
|
||||
</div>
|
||||
|
||||
{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(255,255,255,0.3), transparent)' : 'linear-gradient(to bottom, rgba(255,255,255,0.3), 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(255,255,255,0.8)', boxShadow: '0 0 10px rgba(255,255,255,0.5)' }} />
|
||||
|
||||
{/* 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: 'rgba(255,255,255,0.4)', marginBottom: '4px', letterSpacing: '0.1em' }}>
|
||||
{m.month.toString().padStart(2, '0')}
|
||||
</div>
|
||||
<div className="serif" style={{ fontSize: 'clamp(1rem, 2vw, 1.4rem)', color: '#fff', letterSpacing: '0.05em' }}>
|
||||
{m.displayName}
|
||||
</div>
|
||||
<div className="mono num-display" style={{ fontSize: '0.65rem', color: 'rgba(255,255,255,0.5)', 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: '#bbb'}}>暂无记忆声纹</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 mono">MUTUAL RESONANCE</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: '#fff', 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 mono delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>SEND</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.sentCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
</div>
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', right: '15vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner mono delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>RECEIVE</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.receivedCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
</div>
|
||||
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', bottom: '20vh' }}>
|
||||
<div className="reveal-inner serif delay-3">
|
||||
平衡率高达 <strong className="num-display" style={{color: '#fff', fontSize: '1.5rem'}}>{reportData.mutualFriend.ratio}</strong>
|
||||
<br/><span style={{ fontSize: '1rem', color: 'rgba(255,255,255,0.5)', marginTop: '15px', display: 'block' }}>最完美的双向奔赴。</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">今年依然在独自发出回声。<br/>没有找到绝对平衡的双向奔赴。</div></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S6: SOCIAL KINETICS */}
|
||||
<div className={getSceneClass(6)} id="scene-6">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner mono">SOCIAL KINETICS</div>
|
||||
</div>
|
||||
{reportData.socialInitiative || reportData.responseSpeed ? (
|
||||
<div style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
|
||||
{reportData.socialInitiative && (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '28vh', left: '15vw', width: '38vw', textAlign: 'left' }}>
|
||||
<div className="reveal-inner mono delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>INITIATIVE</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(4.5rem, 8vw, 7rem)', color: '#fff', lineHeight: '1', margin: '2vh 0' }}>
|
||||
{reportData.socialInitiative.initiativeRate}%
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
占据了绝对的主导。你主动发起了 <strong className="num-display" style={{color: '#fff', fontSize: '1.4rem'}}><DecodeText value={reportData.socialInitiative.initiatedChats} active={currentScene === 6} /></strong> 次联络。<br/>
|
||||
<span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>社交关系的齿轮，全靠你来转动。</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{reportData.responseSpeed && (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', bottom: '22vh', right: '15vw', width: '38vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner mono delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em' }}>RESONANCE</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(3.5rem, 6vw, 5rem)', color: '#ccc', lineHeight: '1', margin: '2vh 0' }}>
|
||||
<DecodeText value={reportData.responseSpeed.fastestTime} active={currentScene === 6} />S
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
来自 <strong style={{color: '#fff'}}>{reportData.responseSpeed.fastestFriend}</strong> 的极速响应区。<br/>
|
||||
<span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>在发出信号的瞬间，就得到了回响。</span>
|
||||
</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 mono">THE SPARK</div>
|
||||
</div>
|
||||
|
||||
{reportData.longestStreak ? (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '35vh', left: '15vw', textAlign: 'left' }}>
|
||||
<div className="reveal-inner mono delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>LONGEST STREAK</div>
|
||||
<div className="reveal-inner serif delay-2" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#fff', letterSpacing: '0.02em' }}>
|
||||
{reportData.longestStreak.friendName}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
|
||||
沉浸式连环漫游 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}><DecodeText value={reportData.longestStreak.days} active={currentScene === 7} /></strong> 天。
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{reportData.peakDay ? (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', bottom: '30vh', right: '15vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner mono delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>PEAK DAY</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', color: '#fff', letterSpacing: '0.02em' }}>
|
||||
{reportData.peakDay.date}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
|
||||
单日巅峰爆发 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}>{reportData.peakDay.messageCount}</strong> 次碰撞。
|
||||
</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 mono">FADING SIGNALS</div>
|
||||
</div>
|
||||
{reportData.lostFriend ? (
|
||||
<>
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '35vh' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{ fontSize: 'clamp(3.5rem, 9vw, 6rem)', color: 'rgba(255,255,255,0.7)', letterSpacing: '0.1em' }}>
|
||||
{reportData.lostFriend.displayName}
|
||||
</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', bottom: '25vh' }}>
|
||||
<div className="reveal-inner serif delay-2" style={{ color: 'rgba(255,255,255,0.5)', fontSize: '1.2rem', lineHeight: '2' }}>
|
||||
有些信号，逐渐沉入了深海。<br/>
|
||||
曾经热络的交互，在 {reportData.lostFriend.periodDesc} 之后，<br/>
|
||||
断崖般地降至 <span className="num-display" style={{color: '#ccc', fontSize: '1.4rem'}}><DecodeText value={reportData.lostFriend.lateCount} active={currentScene === 8} /></span> 条。
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="reveal-wrap desc-text" style={{ marginTop: '25vh' }}><div className="reveal-inner serif delay-1">没有走散的信号，<br/>所有重要的人都还在。</div></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* S9: LEXICON & ARCHIVE */}
|
||||
<div className={getSceneClass(9)} id="scene-9">
|
||||
<div className="reveal-wrap en-tag">
|
||||
<div className="reveal-inner mono">LEXICON</div>
|
||||
</div>
|
||||
|
||||
{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(255,255,255,1)', delay: '0.1s', floatDelay: '0s', targetOp: 1 },
|
||||
{ left: '72vw', top: '30vh', fontSize: 'clamp(2rem, 5vw, 4rem)', color: 'rgba(255,255,255,0.8)', delay: '0.2s', floatDelay: '-1s', targetOp: 0.8 },
|
||||
{ left: '15vw', top: '55vh', fontSize: 'clamp(2.5rem, 6vw, 4.5rem)', color: 'rgba(255,255,255,0.9)', delay: '0.3s', floatDelay: '-2.5s', targetOp: 0.9 },
|
||||
{ left: '78vw', top: '60vh', fontSize: 'clamp(1.5rem, 3.5vw, 3rem)', color: 'rgba(255,255,255,0.6)', delay: '0.4s', floatDelay: '-1.5s', targetOp: 0.6 },
|
||||
{ left: '45vw', top: '75vh', fontSize: 'clamp(1.2rem, 3vw, 2.5rem)', color: 'rgba(255,255,255,0.7)', delay: '0.5s', floatDelay: '-3s', targetOp: 0.7 },
|
||||
{ left: '55vw', top: '15vh', fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', color: 'rgba(255,255,255,0.5)', delay: '0.6s', floatDelay: '-0.5s', targetOp: 0.5 },
|
||||
{ left: '12vw', top: '80vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(255,255,255,0.4)', delay: '0.7s', floatDelay: '-1.2s', targetOp: 0.4 },
|
||||
{ left: '35vw', top: '45vh', fontSize: 'clamp(2.2rem, 5vw, 4rem)', color: 'rgba(255,255,255,0.85)', delay: '0.8s', floatDelay: '-0.8s', targetOp: 0.85 },
|
||||
{ left: '85vw', top: '82vh', fontSize: 'clamp(0.9rem, 1.5vw, 1.5rem)', color: 'rgba(255,255,255,0.3)', delay: '0.9s', floatDelay: '-2.1s', targetOp: 0.3 },
|
||||
{ left: '60vw', top: '50vh', fontSize: 'clamp(1.8rem, 4vw, 3.5rem)', color: 'rgba(255,255,255,0.65)', delay: '1s', floatDelay: '-0.3s', targetOp: 0.65 },
|
||||
{ left: '45vw', top: '35vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(255,255,255,0.35)', delay: '1.1s', floatDelay: '-1.8s', targetOp: 0.35 },
|
||||
{ left: '30vw', top: '65vh', fontSize: 'clamp(1.4rem, 2.5vw, 2.2rem)', color: 'rgba(255,255,255,0.55)', delay: '1.2s', floatDelay: '-2.7s', targetOp: 0.55 },
|
||||
];
|
||||
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: '#000' }}>
|
||||
<div className="reveal-wrap en-tag" style={{ zIndex: 20 }}>
|
||||
<div className="reveal-inner mono" style={{color: '#999'}}>END OF TRANSMISSION</div>
|
||||
</div>
|
||||
|
||||
{/* The Final Summary Receipt / Dashboard */}
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '45vh', left: '50vw', transform: 'translate(-50%, -50%)', width: '60vw', textAlign: 'center', zIndex: 20 }}>
|
||||
<div className="reveal-inner delay-1" style={{ display: 'flex', flexDirection: 'column', gap: '3vh' }}>
|
||||
<div className="mono num-display" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#000', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
2024
|
||||
</div>
|
||||
<div className="mono" style={{ fontSize: '0.8rem', color: '#666', letterSpacing: '0.4em' }}>
|
||||
TRANSMISSION COMPLETE
|
||||
</div>
|
||||
|
||||
{/* Core Stats Row */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '6vh', borderTop: '1px solid #ccc', borderBottom: '1px solid #ccc', padding: '4vh 0' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>RESONANCES</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.totalMessages.toLocaleString()}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>CONNECTIONS</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.coreFriends.length}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="mono" style={{ fontSize: '0.65rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>LONGEST STREAK</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{reportData.longestStreak?.days || 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="serif" style={{ fontSize: '1.2rem', color: '#444', marginTop: '4vh', letterSpacing: '0.05em' }}>
|
||||
“在这片完全属于你的净土，存写下了光阴的无尽长河。”
|
||||
</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="mono reveal-wrap" style={{ marginBottom: '20px' }}>
|
||||
<div className="reveal-inner delay-2" style={{ fontSize: '0.7rem', color: '#999', lineHeight: 2, letterSpacing: '0.3em' }}>
|
||||
100% LOCAL COMPUTING.<br/>YOUR DATA IS YOURS.
|
||||
</div>
|
||||
<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 ? '#ddd' : (buttonText === 'SAVED TO DEVICE' ? '#000' : '#000'),
|
||||
color: '#fff',
|
||||
fontSize: '0.85rem',
|
||||
border: 'none',
|
||||
minWidth: '200px'
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user