mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
更新
This commit is contained in:
cc
@@ -31,9 +31,6 @@
|
||||
}
|
||||
|
||||
.dual-info-card {
|
||||
background: var(--ar-card-bg);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
|
||||
&.full {
|
||||
@@ -61,14 +58,8 @@
|
||||
}
|
||||
|
||||
.dual-message {
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
|
||||
&.received {
|
||||
background: var(--ar-card-bg-hover);
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
font-size: 12px;
|
||||
color: var(--ar-text-sub);
|
||||
@@ -82,14 +73,11 @@
|
||||
}
|
||||
|
||||
.first-chat-scene {
|
||||
background: color-mix(in srgb, var(--ar-card-bg) 92%, #fff 8%);
|
||||
border-radius: 16px;
|
||||
padding: 18px 16px 16px;
|
||||
color: var(--ar-text-main);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.first-chat-scene::before {
|
||||
@@ -121,11 +109,50 @@
|
||||
|
||||
.scene-message {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
width: 100%;
|
||||
|
||||
&.sent {
|
||||
&.system {
|
||||
margin: 16px 0;
|
||||
|
||||
.system-msg-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.scene-meta {
|
||||
font-size: 10px;
|
||||
opacity: 0.65;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scene-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.sent .scene-body {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.received .scene-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,36 +190,42 @@
|
||||
}
|
||||
|
||||
.scene-bubble {
|
||||
background: color-mix(in srgb, var(--ar-card-bg-hover) 90%, #fff 10%);
|
||||
color: var(--ar-text-main);
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
min-width: 68px;
|
||||
min-width: 40px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
|
||||
.scene-message.sent .scene-bubble {
|
||||
background: color-mix(in srgb, var(--primary) 12%, var(--ar-card-bg-hover));
|
||||
border-color: color-mix(in srgb, var(--primary) 26%, var(--bg-tertiary, rgba(0, 0, 0, 0.06)));
|
||||
}
|
||||
|
||||
.scene-meta {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-tertiary);
|
||||
&.no-bubble {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scene-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
line-height: 1.5;
|
||||
font-size: clamp(14px, 1.8vw, 16px);
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-break: auto;
|
||||
|
||||
.report-emoji-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 2px 0;
|
||||
|
||||
.report-emoji-img {
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scene-avatar.fallback {
|
||||
@@ -209,29 +242,47 @@
|
||||
}
|
||||
|
||||
.dual-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(140px, 1fr));
|
||||
gap: 14px;
|
||||
margin: 20px -28px 24px;
|
||||
padding: 0 28px;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: clamp(60px, 10vw, 120px);
|
||||
margin: 48px 0 32px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
&.bottom {
|
||||
margin-top: 0;
|
||||
margin-bottom: 48px;
|
||||
gap: clamp(40px, 6vw, 80px);
|
||||
}
|
||||
}
|
||||
|
||||
.dual-stat-card {
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 14px;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: clamp(20px, 2.8vw, 30px);
|
||||
font-size: clamp(36px, 6vw, 64px);
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ar-primary);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
&.small {
|
||||
font-size: clamp(24px, 4vw, 40px);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dual-stat-card.long .stat-num {
|
||||
@@ -247,15 +298,12 @@
|
||||
}
|
||||
|
||||
.emoji-card {
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.08));
|
||||
border-radius: 16px;
|
||||
padding: 18px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--ar-card-bg);
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
@@ -283,257 +331,564 @@
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
// --- New Initiative Section (Tug of War) ---
|
||||
.initiative-container {
|
||||
padding: 0 20px;
|
||||
padding: 32px 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.initiative-bar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
background: var(--ar-card-bg);
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
padding: 24px 0;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.initiative-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 60px;
|
||||
gap: 12px;
|
||||
min-width: 80px;
|
||||
z-index: 2;
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
background: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: var(--ar-text-sub);
|
||||
font-size: 14px;
|
||||
border: 2px solid var(--ar-card-bg);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
font-size: 16px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
opacity: 0.4;
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
.percent {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-main);
|
||||
opacity: 0.85;
|
||||
font-weight: 600;
|
||||
font-weight: 800;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.initiative-progress {
|
||||
flex: 1;
|
||||
height: 12px;
|
||||
background: var(--bg-tertiary, #eee);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: 1px; // 线条样式
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bar-segment {
|
||||
height: 100%;
|
||||
transition: width 1s ease-out;
|
||||
.line-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 20%,
|
||||
rgba(255, 255, 255, 0.1) 80%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
&.left {
|
||||
background: var(--ar-primary);
|
||||
}
|
||||
.initiative-indicator {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: left 1.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow:
|
||||
0 0 10px #fff,
|
||||
0 0 20px rgba(255, 255, 255, 0.5),
|
||||
0 0 30px var(--ar-primary);
|
||||
z-index: 3;
|
||||
|
||||
&.right {
|
||||
background: var(--ar-accent);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.initiative-ratio {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--ar-text-main);
|
||||
text-align: center;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.initiative-desc {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--ar-text-sub);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
|
||||
// --- New Response Speed Section (Grid + Icons) ---
|
||||
.response-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.response-card {
|
||||
background: var(--ar-card-bg);
|
||||
border-radius: 18px;
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--ar-card-bg-hover);
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
color: var(--ar-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
|
||||
svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fastest .icon-box {
|
||||
background: rgba(242, 170, 0, 0.08);
|
||||
color: var(--ar-accent);
|
||||
}
|
||||
|
||||
&.sample .icon-box {
|
||||
background: rgba(16, 174, 255, 0.08);
|
||||
color: #10AEFF;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
color: var(--ar-text-sub);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--ar-text-main);
|
||||
line-height: 1;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ar-text-sub);
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.response-note {
|
||||
margin-top: 14px;
|
||||
max-width: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-sub);
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.6;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- New Streak Section (Flame) ---
|
||||
.streak-container {
|
||||
.response-pulse-container {
|
||||
width: 100%;
|
||||
padding: 80px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pulse-visual {
|
||||
position: relative;
|
||||
width: 420px;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pulse-hub {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 75%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.6;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 54px;
|
||||
font-weight: 950;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-node {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 4;
|
||||
animation: floatNode 4s ease-in-out infinite;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
transform: translateX(15%);
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.5;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--ar-text-main);
|
||||
opacity: 0.95;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
margin-left: 2px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50%;
|
||||
animation: ripplePulse 8s linear infinite;
|
||||
pointer-events: none;
|
||||
|
||||
&.one {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&.two {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
&.three {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripplePulse {
|
||||
0% {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatNode {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
|
||||
.response-note {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.5;
|
||||
margin-top: 32px;
|
||||
font-style: italic;
|
||||
max-width: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.streak-spark-visual.premium {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
overflow: visible;
|
||||
|
||||
.spark-ambient-glow {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
height: 480px;
|
||||
background: radial-gradient(circle at center, rgba(242, 170, 0, 0.04) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spark-core-wrapper {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
animation: flameSway 6s ease-in-out infinite;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.spark-flame-outer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(ellipse at 50% 85%, rgba(242, 170, 0, 0.15) 0%, transparent 75%);
|
||||
border-radius: 50% 50% 20% 20% / 80% 80% 30% 30%;
|
||||
filter: blur(25px);
|
||||
animation: flickerOuter 4s infinite alternate;
|
||||
}
|
||||
|
||||
.spark-flame-inner {
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
background: radial-gradient(ellipse at 50% 90%, rgba(255, 215, 0, 0.2) 0%, transparent 80%);
|
||||
border-radius: 50% 50% 30% 30% / 85% 85% 25% 25%;
|
||||
filter: blur(12px);
|
||||
animation: flickerInner 3s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.spark-core {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.spark-days {
|
||||
font-size: 84px;
|
||||
font-weight: 800;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
text-shadow:
|
||||
0 0 15px rgba(255, 255, 255, 0.4),
|
||||
0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.spark-label {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 6px;
|
||||
margin-top: 12px;
|
||||
text-indent: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-flame {
|
||||
font-size: 72px;
|
||||
margin-bottom: 6px;
|
||||
filter: drop-shadow(0 4px 12px rgba(242, 170, 0, 0.3));
|
||||
animation: flamePulse 2s ease-in-out infinite;
|
||||
transform-origin: center bottom;
|
||||
.streak-bridge.premium {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
margin-top: -20px;
|
||||
z-index: 20;
|
||||
|
||||
.bridge-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.6;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-orb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px var(--ar-accent);
|
||||
border: 1px solid rgba(252, 170, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.bridge-line {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.line-string {
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(242, 170, 0, 0) 0%,
|
||||
rgba(242, 170, 0, 0.6) 20%,
|
||||
rgba(242, 170, 0, 0.6) 80%,
|
||||
rgba(242, 170, 0, 0) 100%);
|
||||
mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
|
||||
}
|
||||
|
||||
.line-glow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: radial-gradient(ellipse at center, rgba(242, 170, 0, 0.2) 0%, transparent 80%);
|
||||
filter: blur(4px);
|
||||
animation: sparkFlicker 2s infinite alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flamePulse {
|
||||
.spark-ember {
|
||||
position: absolute;
|
||||
background: #FFD700;
|
||||
border-radius: 50%;
|
||||
filter: blur(0.5px);
|
||||
box-shadow: 0 0 6px #F2AA00;
|
||||
opacity: 0;
|
||||
z-index: 4;
|
||||
|
||||
&.one {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
left: 46%;
|
||||
animation: emberRise 5s infinite 0s;
|
||||
}
|
||||
|
||||
&.two {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
left: 53%;
|
||||
animation: emberRise 4s infinite 1.2s;
|
||||
}
|
||||
|
||||
&.three {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
left: 50%;
|
||||
animation: emberRise 6s infinite 2.5s;
|
||||
}
|
||||
|
||||
&.four {
|
||||
width: 2.5px;
|
||||
height: 2.5px;
|
||||
left: 48%;
|
||||
animation: emberRise 5.5s infinite 3.8s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flameSway {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-1deg) skewX(-1deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(1.5deg) skewX(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flickerOuter {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.15;
|
||||
filter: blur(25px);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.25;
|
||||
filter: blur(30px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flickerInner {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 4px 12px rgba(242, 170, 0, 0.3));
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 6px 16px rgba(242, 170, 0, 0.5));
|
||||
transform: scale(1.08);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-days {
|
||||
font-size: 90px;
|
||||
font-weight: 800;
|
||||
color: var(--ar-text-main);
|
||||
line-height: 0.9;
|
||||
margin: 10px 0 20px;
|
||||
text-align: center;
|
||||
@keyframes emberRise {
|
||||
0% {
|
||||
transform: translateY(100px) scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--ar-text-sub);
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-260px) scale(0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-range {
|
||||
background: var(--ar-card-bg);
|
||||
padding: 8px 20px;
|
||||
border-radius: 100px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ar-text-sub);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05));
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
@keyframes sparkFlicker {
|
||||
|
||||
.emoji-count {
|
||||
font-size: 12px;
|
||||
color: var(--ar-text-sub);
|
||||
opacity: 0.85;
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.9;
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
opacity: 1;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.response-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
.pulse-visual {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.scene-avatar {
|
||||
@@ -551,4 +906,4 @@
|
||||
min-width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Clock, Zap, MessageCircle, MessageSquare, Type, Image as ImageIcon, Mic, Smile } from 'lucide-react'
|
||||
import ReportHeatmap from '../components/ReportHeatmap'
|
||||
import ReportWordCloud from '../components/ReportWordCloud'
|
||||
import './AnnualReportWindow.scss'
|
||||
@@ -10,6 +9,9 @@ interface DualReportMessage {
|
||||
isSentByMe: boolean
|
||||
createTime: number
|
||||
createTimeStr: string
|
||||
localType?: number
|
||||
emojiMd5?: string
|
||||
emojiCdnUrl?: string
|
||||
}
|
||||
|
||||
interface DualReportData {
|
||||
@@ -25,6 +27,9 @@ interface DualReportData {
|
||||
content: string
|
||||
isSentByMe: boolean
|
||||
senderUsername?: string
|
||||
localType?: number
|
||||
emojiMd5?: string
|
||||
emojiCdnUrl?: string
|
||||
} | null
|
||||
firstChatMessages?: DualReportMessage[]
|
||||
yearFirstChat?: {
|
||||
@@ -34,6 +39,9 @@ interface DualReportData {
|
||||
isSentByMe: boolean
|
||||
friendName: string
|
||||
firstThreeMessages: DualReportMessage[]
|
||||
localType?: number
|
||||
emojiMd5?: string
|
||||
emojiCdnUrl?: string
|
||||
} | null
|
||||
stats: {
|
||||
totalMessages: number
|
||||
@@ -51,7 +59,7 @@ interface DualReportData {
|
||||
topPhrases: Array<{ phrase: string; count: number }>
|
||||
heatmap?: number[][]
|
||||
initiative?: { initiated: number; received: number }
|
||||
response?: { avg: number; fastest: number; count: number }
|
||||
response?: { avg: number; fastest: number; slowest: number; count: number }
|
||||
monthly?: Record<string, number>
|
||||
streak?: { days: number; startDate: string; endDate: string }
|
||||
}
|
||||
@@ -188,11 +196,11 @@ function DualReportWindow() {
|
||||
const initiatedPercent = initiativeTotal > 0 ? (reportData.initiative!.initiated / initiativeTotal) * 100 : 0
|
||||
const receivedPercent = initiativeTotal > 0 ? (reportData.initiative!.received / initiativeTotal) * 100 : 0
|
||||
const statItems = [
|
||||
{ label: '总消息数', value: stats.totalMessages, icon: MessageSquare, color: '#07C160' },
|
||||
{ label: '总字数', value: stats.totalWords, icon: Type, color: '#10AEFF' },
|
||||
{ label: '图片', value: stats.imageCount, icon: ImageIcon, color: '#FFC300' },
|
||||
{ label: '语音', value: stats.voiceCount, icon: Mic, color: '#FA5151' },
|
||||
{ label: '表情', value: stats.emojiCount, icon: Smile, color: '#FA9D3B' },
|
||||
{ label: '总消息数', value: stats.totalMessages, color: '#07C160' },
|
||||
{ label: '总字数', value: stats.totalWords, color: '#10AEFF' },
|
||||
{ label: '图片', value: stats.imageCount, color: '#FFC300' },
|
||||
{ label: '语音', value: stats.voiceCount, color: '#FA5151' },
|
||||
{ label: '表情', value: stats.emojiCount, color: '#FA9D3B' },
|
||||
]
|
||||
|
||||
const decodeEntities = (text: string) => (
|
||||
@@ -204,6 +212,20 @@ function DualReportWindow() {
|
||||
.replace(/'/g, "'")
|
||||
)
|
||||
|
||||
const filterDisplayMessages = (messages: DualReportMessage[], maxActual: number = 3) => {
|
||||
let actualCount = 0
|
||||
const result: DualReportMessage[] = []
|
||||
for (const msg of messages) {
|
||||
const isSystem = msg.localType === 10000 || msg.localType === 10002
|
||||
if (!isSystem) {
|
||||
if (actualCount >= maxActual) break
|
||||
actualCount++
|
||||
}
|
||||
result.push(msg)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const stripCdata = (text: string) => text.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, '$1')
|
||||
const compactMessageText = (text: string) => (
|
||||
text
|
||||
@@ -225,7 +247,18 @@ function DualReportWindow() {
|
||||
return ''
|
||||
}
|
||||
|
||||
const formatMessageContent = (content?: string) => {
|
||||
const formatMessageContent = (content?: string, localType?: number) => {
|
||||
const isSystemMsg = localType === 10000 || localType === 10002
|
||||
if (!isSystemMsg) {
|
||||
if (localType === 3) return '[图片]'
|
||||
if (localType === 34) return '[语音]'
|
||||
if (localType === 43) return '[视频]'
|
||||
if (localType === 47) return '[表情]'
|
||||
if (localType === 42) return '[名片]'
|
||||
if (localType === 48) return '[位置]'
|
||||
if (localType === 49) return '[链接/文件]'
|
||||
}
|
||||
|
||||
const raw = compactMessageText(String(content || '').trim())
|
||||
if (!raw) return '（空）'
|
||||
|
||||
@@ -251,7 +284,25 @@ function DualReportWindow() {
|
||||
return compactMessageText(decodeEntities(stripped))
|
||||
}
|
||||
|
||||
return '（多媒体/卡片消息）'
|
||||
return '[多媒体消息]'
|
||||
}
|
||||
|
||||
const ReportMessageItem = ({ msg }: { msg: DualReportMessage }) => {
|
||||
if (msg.localType === 47 && (msg.emojiMd5 || msg.emojiCdnUrl)) {
|
||||
const emojiUrl = msg.emojiCdnUrl || (msg.emojiMd5 ? `https://emoji.qpic.cn/wx_emoji/${msg.emojiMd5}/0` : '')
|
||||
if (emojiUrl) {
|
||||
return (
|
||||
<div className="report-emoji-container">
|
||||
<img src={emojiUrl} alt="表情" className="report-emoji-img" onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
(e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
|
||||
}} />
|
||||
<span style={{ display: 'none' }}>[表情]</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return <span>{formatMessageContent(msg.content, msg.localType)}</span>
|
||||
}
|
||||
const formatFullDate = (timestamp: number) => {
|
||||
const d = new Date(timestamp)
|
||||
@@ -300,6 +351,50 @@ function DualReportWindow() {
|
||||
return <div className="scene-avatar fallback">{getSceneAvatarFallback(isSentByMe)}</div>
|
||||
}
|
||||
|
||||
const renderMessageList = (messages: DualReportMessage[]) => {
|
||||
const displayMsgs = filterDisplayMessages(messages)
|
||||
let lastTime = 0
|
||||
const TIME_THRESHOLD = 5 * 60 * 1000 // 5 分钟
|
||||
|
||||
return displayMsgs.map((msg, idx) => {
|
||||
const isSystem = msg.localType === 10000 || msg.localType === 10002
|
||||
const showTime = idx === 0 || (msg.createTime - lastTime > TIME_THRESHOLD)
|
||||
lastTime = msg.createTime
|
||||
|
||||
if (isSystem) {
|
||||
return (
|
||||
<div key={idx} className="scene-message system">
|
||||
{showTime && (
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
</div>
|
||||
)}
|
||||
<div className="system-msg-content">
|
||||
<ReportMessageItem msg={msg} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
|
||||
{showTime && (
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
</div>
|
||||
)}
|
||||
<div className="scene-body">
|
||||
{renderSceneAvatar(msg.isSentByMe)}
|
||||
<div className="scene-content-wrapper">
|
||||
<div className={`scene-bubble ${msg.localType === 47 ? 'no-bubble' : ''}`}>
|
||||
<div className="scene-content"><ReportMessageItem msg={msg} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="annual-report-window dual-report-window">
|
||||
<div className="drag-region" />
|
||||
@@ -335,24 +430,12 @@ function DualReportWindow() {
|
||||
<div className="scene-subtitle">{formatFullDate(firstChat.createTime).split(' ')[0]}</div>
|
||||
{firstChatMessages.length > 0 ? (
|
||||
<div className="scene-messages">
|
||||
{firstChatMessages.map((msg, idx) => (
|
||||
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
|
||||
{renderSceneAvatar(msg.isSentByMe)}
|
||||
<div className="scene-content-wrapper">
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
</div>
|
||||
<div className="scene-bubble">
|
||||
<div className="scene-content">{formatMessageContent(msg.content)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{renderMessageList(firstChatMessages)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="hero-desc" style={{ textAlign: 'center' }}>暂无消息详情</div>
|
||||
)}
|
||||
<div className="scene-footer" style={{ marginTop: '20px', textAlign: 'center', fontSize: '12px', opacity: 0.6 }}>
|
||||
<div className="scene-footer" style={{ marginTop: '20px', textAlign: 'center', fontSize: '14px', opacity: 0.6 }}>
|
||||
距离今天已经 {daysSince} 天
|
||||
</div>
|
||||
</div>
|
||||
@@ -361,7 +444,7 @@ function DualReportWindow() {
|
||||
)}
|
||||
</section>
|
||||
|
||||
{yearFirstChat ? (
|
||||
{yearFirstChat && (!firstChat || yearFirstChat.createTime !== firstChat.createTime) ? (
|
||||
<section className="section">
|
||||
<div className="label-text">第一段对话</div>
|
||||
<h2 className="hero-title">
|
||||
@@ -371,19 +454,7 @@ function DualReportWindow() {
|
||||
<div className="scene-title">久别重逢</div>
|
||||
<div className="scene-subtitle">{formatFullDate(yearFirstChat.createTime).split(' ')[0]}</div>
|
||||
<div className="scene-messages">
|
||||
{yearFirstChat.firstThreeMessages.map((msg, idx) => (
|
||||
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
|
||||
{renderSceneAvatar(msg.isSentByMe)}
|
||||
<div className="scene-content-wrapper">
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
</div>
|
||||
<div className="scene-bubble">
|
||||
<div className="scene-content">{formatMessageContent(msg.content)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{renderMessageList(yearFirstChat.firstThreeMessages)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -395,7 +466,7 @@ function DualReportWindow() {
|
||||
<h2 className="hero-title">作息规律</h2>
|
||||
{mostActive && (
|
||||
<p className="hero-desc active-time dual-active-time">
|
||||
{'\u5728'} <span className="hl">{mostActive.weekday} {String(mostActive.hour).padStart(2, '0')}:00</span> {'\u6700\u6d3b\u8dc3\uff08'}{mostActive.value}{'\u6761\uff09'}
|
||||
在 <span className="hl">{mostActive.weekday} {String(mostActive.hour).padStart(2, '0')}:00</span> 最活跃（{mostActive.value}条）
|
||||
</p>
|
||||
)}
|
||||
<ReportHeatmap data={reportData.heatmap} />
|
||||
@@ -407,81 +478,107 @@ function DualReportWindow() {
|
||||
<div className="label-text">主动性</div>
|
||||
<h2 className="hero-title">情感的天平</h2>
|
||||
<div className="initiative-container">
|
||||
<div className="initiative-desc">
|
||||
{reportData.initiative.initiated > reportData.initiative.received ? '每一个话题都是你对TA的在意' : 'TA总是那个率先打破沉默的人'}
|
||||
</div>
|
||||
<div className="initiative-bar-wrapper">
|
||||
<div className="initiative-side">
|
||||
<div className="avatar-placeholder">
|
||||
{reportData.selfAvatarUrl ? <img src={reportData.selfAvatarUrl} alt="me-avatar" /> : '\u6211'}
|
||||
{reportData.selfAvatarUrl ? <img src={reportData.selfAvatarUrl} alt="me-avatar" /> : '我'}
|
||||
</div>
|
||||
<div className="count">{reportData.initiative.initiated}{'\u6b21'}</div>
|
||||
<div className="count">{reportData.initiative.initiated}次</div>
|
||||
<div className="percent">{initiatedPercent.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="initiative-progress">
|
||||
<div className="line-bg" />
|
||||
<div
|
||||
className="bar-segment left"
|
||||
style={{ width: `${initiatedPercent}%` }}
|
||||
/>
|
||||
<div
|
||||
className="bar-segment right"
|
||||
style={{ width: `${receivedPercent}%` }}
|
||||
className="initiative-indicator"
|
||||
style={{ left: `${initiatedPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="initiative-side">
|
||||
<div className="avatar-placeholder">
|
||||
{reportData.friendAvatarUrl ? <img src={reportData.friendAvatarUrl} alt="friend-avatar" /> : reportData.friendName.substring(0, 1)}
|
||||
</div>
|
||||
<div className="count">{reportData.initiative.received}{'\u6b21'}</div>
|
||||
<div className="count">{reportData.initiative.received}次</div>
|
||||
<div className="percent">{receivedPercent.toFixed(1)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="initiative-desc">
|
||||
{reportData.initiative.initiated > reportData.initiative.received ? '每一个话题都是你对TA的在意' : 'TA总是那个率先打破沉默的人'}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{reportData.response && (
|
||||
<section className="section">
|
||||
<div className="label-text">回复速度</div>
|
||||
<h2 className="hero-title">{'\u79d2\u56de\uff0c\u662f\u56e0\u4e3a\u5728\u4e4e'}</h2>
|
||||
<div className="response-grid">
|
||||
<div className="response-card">
|
||||
<div className="icon-box">
|
||||
<Clock size={24} />
|
||||
<div className="label-text">回应速度</div>
|
||||
<h2 className="hero-title">你说，我在</h2>
|
||||
<div className="response-pulse-container">
|
||||
<div className="pulse-visual">
|
||||
<div className="pulse-ripple one" />
|
||||
<div className="pulse-ripple two" />
|
||||
<div className="pulse-ripple three" />
|
||||
|
||||
<div className="pulse-node left">
|
||||
<div className="label">最快回复</div>
|
||||
<div className="value">{reportData.response.fastest}<span>秒</span></div>
|
||||
</div>
|
||||
<div className="label">{'\u5e73\u5747\u56de\u590d'}</div>
|
||||
<div className="value">{Math.round(reportData.response.avg / 60)}<span>{'\u5206'}</span></div>
|
||||
</div>
|
||||
<div className="response-card fastest">
|
||||
<div className="icon-box">
|
||||
<Zap size={24} />
|
||||
|
||||
<div className="pulse-hub">
|
||||
<div className="label">平均回复</div>
|
||||
<div className="value">{Math.round(reportData.response.avg / 60)}<span>分</span></div>
|
||||
</div>
|
||||
<div className="label">{'\u6700\u5feb\u56de\u590d'}</div>
|
||||
<div className="value">{reportData.response.fastest}<span>{'\u79d2'}</span></div>
|
||||
</div>
|
||||
<div className="response-card sample">
|
||||
<div className="icon-box">
|
||||
<MessageCircle size={24} />
|
||||
|
||||
<div className="pulse-node right">
|
||||
<div className="label">最慢回复</div>
|
||||
<div className="value">
|
||||
{reportData.response.slowest > 3600
|
||||
? (reportData.response.slowest / 3600).toFixed(1)
|
||||
: Math.round(reportData.response.slowest / 60)}
|
||||
<span>{reportData.response.slowest > 3600 ? '时' : '分'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="label">{'\u7edf\u8ba1\u6837\u672c'}</div>
|
||||
<div className="value">{reportData.response.count}<span>{'\u6b21'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="hero-desc response-note">
|
||||
{`\u5171\u7edf\u8ba1 ${reportData.response.count} \u6b21\u6709\u6548\u56de\u590d\uff0c\u5e73\u5747\u7ea6 ${responseAvgMinutes} \u5206\u949f\uff0c\u6700\u5feb ${reportData.response.fastest} \u79d2\u3002`}
|
||||
{`在 ${reportData.response.count} 次互动中，平均约 ${responseAvgMinutes} 分钟，最快 ${reportData.response.fastest} 秒。`}
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{reportData.streak && (
|
||||
<section className="section">
|
||||
<div className="label-text">{'\u804a\u5929\u706b\u82b1'}</div>
|
||||
<h2 className="hero-title">{'\u6700\u957f\u8fde\u7eed\u804a\u5929'}</h2>
|
||||
<div className="streak-container">
|
||||
<div className="streak-flame">{'\uD83D\uDD25'}</div>
|
||||
<div className="streak-days">{reportData.streak.days}<span>{'\u5929'}</span></div>
|
||||
<div className="streak-range">
|
||||
{reportData.streak.startDate} ~ {reportData.streak.endDate}
|
||||
<div className="label-text">聊天火花</div>
|
||||
<h2 className="hero-title">最长连续聊天</h2>
|
||||
<div className="streak-spark-visual premium">
|
||||
<div className="spark-ambient-glow" />
|
||||
|
||||
<div className="spark-ember one" />
|
||||
<div className="spark-ember two" />
|
||||
<div className="spark-ember three" />
|
||||
<div className="spark-ember four" />
|
||||
|
||||
<div className="spark-core-wrapper">
|
||||
<div className="spark-flame-outer" />
|
||||
<div className="spark-flame-inner" />
|
||||
<div className="spark-core">
|
||||
<div className="spark-days">{reportData.streak.days}</div>
|
||||
<div className="spark-label">DAYS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="streak-bridge premium">
|
||||
<div className="bridge-date start">
|
||||
<div className="date-orb" />
|
||||
<span>{reportData.streak.startDate}</span>
|
||||
</div>
|
||||
<div className="bridge-line">
|
||||
<div className="line-glow" />
|
||||
<div className="line-string" />
|
||||
</div>
|
||||
<div className="bridge-date end">
|
||||
<span>{reportData.streak.endDate}</span>
|
||||
<div className="date-orb" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -497,50 +594,48 @@ function DualReportWindow() {
|
||||
<div className="label-text">年度统计</div>
|
||||
<h2 className="hero-title">{yearTitle}数据概览</h2>
|
||||
<div className="dual-stat-grid">
|
||||
{statItems.map((item) => {
|
||||
const valueText = item.value.toLocaleString()
|
||||
const isLong = valueText.length > 7
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<div key={item.label} className={`dual-stat-card ${isLong ? 'long' : ''}`} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
||||
<div className="stat-icon" style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '12px',
|
||||
background: `${item.color}15`,
|
||||
color: item.color,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '4px'
|
||||
}}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
<div className="stat-num">{valueText}</div>
|
||||
<div className="stat-unit">{item.label}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{statItems.slice(0, 2).map((item) => (
|
||||
<div key={item.label} className="dual-stat-card">
|
||||
<div className="stat-num">{item.value.toLocaleString()}</div>
|
||||
<div className="stat-unit">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="dual-stat-grid bottom">
|
||||
{statItems.slice(2).map((item) => (
|
||||
<div key={item.label} className="dual-stat-card">
|
||||
<div className="stat-num small">{item.value.toLocaleString()}</div>
|
||||
<div className="stat-unit">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="emoji-row">
|
||||
<div className="emoji-card">
|
||||
<div className="emoji-title">我常用的表情</div>
|
||||
{myEmojiUrl ? (
|
||||
<img src={myEmojiUrl} alt="my-emoji" />
|
||||
) : (
|
||||
<div className="emoji-placeholder">{stats.myTopEmojiMd5 || '暂无'}</div>
|
||||
)}
|
||||
<div className="emoji-count">{stats.myTopEmojiCount ? `${stats.myTopEmojiCount}\u6b21` : '\u6682\u65e0\u7edf\u8ba1'}</div>
|
||||
<img src={myEmojiUrl} alt="my-emoji" onError={(e) => {
|
||||
(e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}} />
|
||||
) : null}
|
||||
<div className="emoji-placeholder" style={myEmojiUrl ? { display: 'none' } : undefined}>
|
||||
{stats.myTopEmojiMd5 || '暂无'}
|
||||
</div>
|
||||
<div className="emoji-count">{stats.myTopEmojiCount ? `${stats.myTopEmojiCount}次` : '暂无统计'}</div>
|
||||
</div>
|
||||
<div className="emoji-card">
|
||||
<div className="emoji-title">{reportData.friendName}常用的表情</div>
|
||||
{friendEmojiUrl ? (
|
||||
<img src={friendEmojiUrl} alt="friend-emoji" />
|
||||
) : (
|
||||
<div className="emoji-placeholder">{stats.friendTopEmojiMd5 || '暂无'}</div>
|
||||
)}
|
||||
<div className="emoji-count">{stats.friendTopEmojiCount ? `${stats.friendTopEmojiCount}\u6b21` : '\u6682\u65e0\u7edf\u8ba1'}</div>
|
||||
<img src={friendEmojiUrl} alt="friend-emoji" onError={(e) => {
|
||||
(e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style');
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}} />
|
||||
) : null}
|
||||
<div className="emoji-placeholder" style={friendEmojiUrl ? { display: 'none' } : undefined}>
|
||||
{stats.friendTopEmojiMd5 || '暂无'}
|
||||
</div>
|
||||
<div className="emoji-count">{stats.friendTopEmojiCount ? `${stats.friendTopEmojiCount}次` : '暂无统计'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user