hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

不够无敌炸裂的更新

Browse Source
This commit is contained in:
cc
2026-02-08 21:27:25 +08:00
parent 2389aaf314
commit e28ef9b783
13 changed files with 958 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
src/pages/AnnualReportWindow.scss
View File

@@ -43,7 +43,7 @@
// 背景装饰圆点 - 毛玻璃效果
.bg-decoration {
position: absolute; // Changed from fixed
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
@@ -53,10 +53,10 @@
.deco-circle {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.03);
background: color-mix(in srgb, var(--primary) 3%, transparent);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
&.c1 {
width: 280px;
@@ -243,6 +243,7 @@
}
.exporting-snapshot {
.hero-title,
.label-text,
.hero-desc,
@@ -1279,134 +1280,135 @@
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;
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;
}
.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;
}
.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;
}
.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;
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;
}
0% {
left: -20%;
opacity: 0;
}
10% {
opacity: 0.8;
}
10% {
opacity: 0.8;
}
50% {
opacity: 0.4;
}
50% {
opacity: 0.4;
}
90% {
opacity: 0.1;
}
90% {
opacity: 0.1;
}
100% {
left: 120%;
opacity: 0;
}
100% {
left: 120%;
opacity: 0;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(20px);
}
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
to {
opacity: 1;
transform: translateX(0);
}
}

144
src/pages/AnnualReportWindow.tsx
View File

@@ -109,148 +109,8 @@ const Avatar = ({ url, name, size = 'md' }: { url?: string; name: string; size?:
)
}
// 热力图组件
const Heatmap = ({ data }: { data: number[][] }) => {
const maxHeat = Math.max(...data.flat())
const weekLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
return (
<div className="heatmap-wrapper">
<div className="heatmap-header">
<div></div>
<div className="time-labels">
{[0, 6, 12, 18].map(h => (
<span key={h} style={{ gridColumn: h + 1 }}>{h}</span>
))}
</div>
</div>
<div className="heatmap">
<div className="heatmap-week-col">
{weekLabels.map(w => <div key={w} className="week-label">{w}</div>)}
</div>
<div className="heatmap-grid">
{data.map((row, wi) =>
row.map((val, hi) => {
const alpha = maxHeat > 0 ? (val / maxHeat * 0.85 + 0.1).toFixed(2) : '0.1'
return (
<div
key={`${wi}-${hi}`}
className="h-cell"
style={{ background: `rgba(7, 193, 96, ${alpha})` }}
title={`${weekLabels[wi]} ${hi}:00 - ${val}条`}
/>
)
})
)}
</div>
</div>
</div>
)
}
// 词云组件
const WordCloud = ({ words }: { words: { phrase: string; count: number }[] }) => {
const maxCount = words.length > 0 ? words[0].count : 1
const topWords = words.slice(0, 32)
const baseSize = 520
// 使用确定性随机数生成器
const seededRandom = (seed: number) => {
const x = Math.sin(seed) * 10000
return x - Math.floor(x)
}
// 计算词云位置
const placedItems: { x: number; y: number; w: number; h: number }[] = []
const canPlace = (x: number, y: number, w: number, h: number): boolean => {
const halfW = w / 2
const halfH = h / 2
const dx = x - 50
const dy = y - 50
const dist = Math.sqrt(dx * dx + dy * dy)
const maxR = 49 - Math.max(halfW, halfH)
if (dist > maxR) return false
const pad = 1.8
for (const p of placedItems) {
if ((x - halfW - pad) < (p.x + p.w / 2) &&
(x + halfW + pad) > (p.x - p.w / 2) &&
(y - halfH - pad) < (p.y + p.h / 2) &&
(y + halfH + pad) > (p.y - p.h / 2)) {
return false
}
}
return true
}
const wordItems = topWords.map((item, i) => {
const ratio = item.count / maxCount
const fontSize = Math.round(12 + Math.pow(ratio, 0.65) * 20)
const opacity = Math.min(1, Math.max(0.35, 0.35 + ratio * 0.65))
const delay = (i * 0.04).toFixed(2)
// 计算词语宽度
const charCount = Math.max(1, item.phrase.length)
const hasCjk = /[\u4e00-\u9fff]/.test(item.phrase)
const hasLatin = /[A-Za-z0-9]/.test(item.phrase)
const widthFactor = hasCjk && hasLatin ? 0.85 : hasCjk ? 0.98 : 0.6
const widthPx = fontSize * (charCount * widthFactor)
const heightPx = fontSize * 1.1
const widthPct = (widthPx / baseSize) * 100
const heightPct = (heightPx / baseSize) * 100
// 寻找位置
let x = 50, y = 50
let placedOk = false
const tries = i === 0 ? 1 : 420
for (let t = 0; t < tries; t++) {
if (i === 0) {
x = 50
y = 50
} else {
const idx = i + t * 0.28
const radius = Math.sqrt(idx) * 7.6 + (seededRandom(i * 1000 + t) * 1.2 - 0.6)
const angle = idx * 2.399963 + seededRandom(i * 2000 + t) * 0.35
x = 50 + radius * Math.cos(angle)
y = 50 + radius * Math.sin(angle)
}
if (canPlace(x, y, widthPct, heightPct)) {
placedOk = true
break
}
}
if (!placedOk) return null
placedItems.push({ x, y, w: widthPct, h: heightPct })
return (
<span
key={i}
className="word-tag"
style={{
'--final-opacity': opacity,
left: `${x.toFixed(2)}%`,
top: `${y.toFixed(2)}%`,
fontSize: `${fontSize}px`,
animationDelay: `${delay}s`,
} as React.CSSProperties}
title={`${item.phrase} (出现 ${item.count} 次)`}
>
{item.phrase}
</span>
)
}).filter(Boolean)
return (
<div className="word-cloud-wrapper">
<div className="word-cloud-inner">
{wordItems}
</div>
</div>
)
}
import Heatmap from '../components/ReportHeatmap'
import WordCloud from '../components/ReportWordCloud'
function AnnualReportWindow() {
const [reportData, setReportData] = useState<AnnualReportData | null>(null)

38
src/pages/DualReportPage.scss
View File

@@ -132,26 +132,43 @@
.info {
display: flex;
flex-direction: column;
gap: 4px;
gap: 2px;
min-width: 0; // 允许 flex 子项缩小，配合 ellipsis
.name {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sub {
font-size: 12px;
color: var(--text-tertiary);
color: var(--text-secondary); // 从 tertiary 改为 secondary 以增强对比度
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.8;
}
}
.meta {
text-align: right;
font-size: 12px;
color: var(--text-tertiary);
color: var(--text-secondary); // 改为 secondary
flex-shrink: 0;
.count {
font-weight: 600;
color: var(--text-primary);
font-size: 14px;
font-weight: 700;
color: var(--primary); // 使用主题色更醒目
margin-bottom: 2px;
}
.hint {
opacity: 0.7;
}
}
@@ -166,6 +183,11 @@
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

255
src/pages/DualReportWindow.scss
View File

@@ -8,6 +8,7 @@
font-size: clamp(26px, 5vw, 44px);
white-space: normal;
}
.dual-names {
font-size: clamp(24px, 4vw, 40px);
font-weight: 700;
@@ -81,13 +82,17 @@
}
.first-chat-scene {
background: linear-gradient(180deg, #8f5b85 0%, #e38aa0 50%, #f6d0c8 100%);
background: linear-gradient(180deg,
color-mix(in srgb, var(--primary) 60%, #000) 0%,
color-mix(in srgb, var(--primary) 40%, #fff) 50%,
var(--ar-bg-color) 100%);
border-radius: 20px;
padding: 28px 24px 24px;
color: #fff;
color: var(--text-primary);
position: relative;
overflow: hidden;
margin-top: 16px;
border: 1px solid var(--border-color);
}
.first-chat-scene::before {
@@ -95,9 +100,9 @@
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.15), transparent 35%),
radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.12), transparent 45%);
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 40%),
radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 35%),
radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 45%);
opacity: 0.6;
pointer-events: none;
}
@@ -107,6 +112,7 @@
font-weight: 700;
text-align: center;
margin-bottom: 8px;
color: var(--text-primary);
}
.scene-subtitle {
@@ -114,7 +120,8 @@
font-weight: 500;
text-align: center;
margin-bottom: 20px;
opacity: 0.95;
opacity: 0.9;
color: var(--text-secondary);
}
.scene-messages {
@@ -137,32 +144,34 @@
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.25);
background: var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
color: var(--primary);
}
.scene-bubble {
background: rgba(255, 255, 255, 0.85);
color: #5a4d5e;
background: var(--bg-secondary);
color: var(--text-primary);
padding: 10px 14px;
border-radius: 14px;
max-width: 60%;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.scene-message.sent .scene-bubble {
background: rgba(255, 224, 168, 0.9);
color: #4a3a2f;
background: color-mix(in srgb, var(--primary) 15%, var(--bg-secondary));
border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
}
.scene-meta {
font-size: 11px;
opacity: 0.7;
margin-bottom: 4px;
color: var(--text-tertiary);
}
.scene-content {
@@ -172,8 +181,8 @@
}
.scene-message.sent .scene-avatar {
background: rgba(255, 224, 168, 0.9);
color: #4a3a2f;
background: var(--primary);
color: #fff;
}
.dual-stat-grid {
@@ -250,4 +259,218 @@
text-align: center;
padding: 24px 0;
}
}
// --- New Initiative Section (Tug of War) ---
.initiative-container {
padding: 0 20px;
}
.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);
}
.initiative-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 60px;
.avatar-placeholder {
width: 44px;
height: 44px;
border-radius: 50%;
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);
}
.count {
font-size: 13px;
font-weight: 600;
color: var(--ar-text-sub);
}
}
.initiative-progress {
flex: 1;
height: 12px;
background: var(--bg-tertiary, #eee);
border-radius: 6px;
overflow: hidden;
display: flex;
position: relative;
.bar-segment {
height: 100%;
transition: width 1s ease-out;
&.left {
background: var(--ar-primary);
}
&.right {
background: var(--ar-accent);
}
}
}
.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: 1fr 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);
}
.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;
}
}
}
// --- New Streak Section (Flame) ---
.streak-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 32px;
position: relative;
padding-bottom: 20px;
}
.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;
}
@keyframes flamePulse {
0%,
100% {
transform: scale(1);
filter: drop-shadow(0 4px 12px rgba(242, 170, 0, 0.3));
}
50% {
transform: scale(1.05);
filter: drop-shadow(0 6px 16px rgba(242, 170, 0, 0.5));
}
}
.streak-days {
font-size: 90px;
font-weight: 800;
color: var(--ar-text-main);
line-height: 0.9;
margin: 10px 0 20px;
text-align: center;
span {
font-size: 24px;
font-weight: 600;
color: var(--ar-text-sub);
margin-left: 6px;
vertical-align: middle;
}
}
.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);
}
}

325
src/pages/DualReportWindow.tsx
View File

@@ -1,4 +1,7 @@
import { useEffect, useState, type CSSProperties } from 'react'
import { Clock, Zap, MessageSquare, Type, Image as ImageIcon, Mic, Smile } from 'lucide-react'
import ReportHeatmap from '../components/ReportHeatmap'
import ReportWordCloud from '../components/ReportWordCloud'
import './AnnualReportWindow.scss'
import './DualReportWindow.scss'
@@ -42,109 +45,11 @@ interface DualReportData {
friendTopEmojiUrl?: string
}
topPhrases: Array<{ phrase: string; count: number }>
}
const WordCloud = ({ words }: { words: { phrase: string; count: number }[] }) => {
if (!words || words.length === 0) {
return <div className="word-cloud-empty">暂无高频语句</div>
}
const sortedWords = [...words].sort((a, b) => b.count - a.count)
const maxCount = sortedWords.length > 0 ? sortedWords[0].count : 1
const topWords = sortedWords.slice(0, 32)
const baseSize = 520
const seededRandom = (seed: number) => {
const x = Math.sin(seed) * 10000
return x - Math.floor(x)
}
const placedItems: { x: number; y: number; w: number; h: number }[] = []
const canPlace = (x: number, y: number, w: number, h: number): boolean => {
const halfW = w / 2
const halfH = h / 2
const dx = x - 50
const dy = y - 50
const dist = Math.sqrt(dx * dx + dy * dy)
const maxR = 49 - Math.max(halfW, halfH)
if (dist > maxR) return false
const pad = 1.8
for (const p of placedItems) {
if ((x - halfW - pad) < (p.x + p.w / 2) &&
(x + halfW + pad) > (p.x - p.w / 2) &&
(y - halfH - pad) < (p.y + p.h / 2) &&
(y + halfH + pad) > (p.y - p.h / 2)) {
return false
}
}
return true
}
const wordItems = topWords.map((item, i) => {
const ratio = item.count / maxCount
const fontSize = Math.round(12 + Math.pow(ratio, 0.65) * 20)
const opacity = Math.min(1, Math.max(0.35, 0.35 + ratio * 0.65))
const delay = (i * 0.04).toFixed(2)
const charCount = Math.max(1, item.phrase.length)
const hasCjk = /[\u4e00-\u9fff]/.test(item.phrase)
const hasLatin = /[A-Za-z0-9]/.test(item.phrase)
const widthFactor = hasCjk && hasLatin ? 0.85 : hasCjk ? 0.98 : 0.6
const widthPx = fontSize * (charCount * widthFactor)
const heightPx = fontSize * 1.1
const widthPct = (widthPx / baseSize) * 100
const heightPct = (heightPx / baseSize) * 100
let x = 50, y = 50
let placedOk = false
const tries = i === 0 ? 1 : 420
for (let t = 0; t < tries; t++) {
if (i === 0) {
x = 50
y = 50
} else {
const idx = i + t * 0.28
const radius = Math.sqrt(idx) * 7.6 + (seededRandom(i * 1000 + t) * 1.2 - 0.6)
const angle = idx * 2.399963 + seededRandom(i * 2000 + t) * 0.35
x = 50 + radius * Math.cos(angle)
y = 50 + radius * Math.sin(angle)
}
if (canPlace(x, y, widthPct, heightPct)) {
placedOk = true
break
}
}
if (!placedOk) return null
placedItems.push({ x, y, w: widthPct, h: heightPct })
return (
<span
key={i}
className="word-tag"
style={{
'--final-opacity': opacity,
left: `${x.toFixed(2)}%`,
top: `${y.toFixed(2)}%`,
fontSize: `${fontSize}px`,
animationDelay: `${delay}s`,
} as CSSProperties}
title={`${item.phrase} (出现 ${item.count} 次)`}
>
{item.phrase}
</span>
)
}).filter(Boolean)
return (
<div className="word-cloud-wrapper">
<div className="word-cloud-inner">
{wordItems}
</div>
</div>
)
heatmap?: number[][]
initiative?: { initiated: number; received: number }
response?: { avg: number; fastest: number; count: number }
monthly?: Record<string, number>
streak?: { days: number; startDate: string; endDate: string }
}
function DualReportWindow() {
@@ -274,11 +179,11 @@ function DualReportWindow() {
const yearFirstChat = reportData.yearFirstChat
const stats = reportData.stats
const statItems = [
{ label: '总消息数', value: stats.totalMessages },
{ label: '总字数', value: stats.totalWords },
{ label: '图片', value: stats.imageCount },
{ label: '语音', value: stats.voiceCount },
{ label: '表情', value: stats.emojiCount },
{ 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' },
]
const decodeEntities = (text: string) => (
@@ -307,13 +212,30 @@ function DualReportWindow() {
const formatMessageContent = (content?: string) => {
const raw = String(content || '').trim()
if (!raw) return '（空）'
// 1. 尝试提取 XML 关键字段
const titleMatch = raw.match(/<title>([\s\S]*?)<\/title>/i)
if (titleMatch?.[1]) return decodeEntities(stripCdata(titleMatch[1]).trim())
const descMatch = raw.match(/<des>([\s\S]*?)<\/des>/i)
if (descMatch?.[1]) return decodeEntities(stripCdata(descMatch[1]).trim())
const summaryMatch = raw.match(/<summary>([\s\S]*?)<\/summary>/i)
if (summaryMatch?.[1]) return decodeEntities(stripCdata(summaryMatch[1]).trim())
// 2. 检查是否是 XML 结构
const hasXmlTag = /<\s*[a-zA-Z]+[^>]*>/.test(raw)
const looksLikeXml = /<\?xml|<msg\b|<appmsg\b|<sysmsg\b|<appattach\b|<emoji\b|<img\b|<voip\b/i.test(raw)
|| hasXmlTag
const looksLikeXml = /<\?xml|<msg\b|<appmsg\b|<sysmsg\b|<appattach\b|<emoji\b|<img\b|<voip\b/i.test(raw) || hasXmlTag
if (!looksLikeXml) return raw
const extracted = extractXmlText(raw)
if (!extracted) return '（XML消息）'
return decodeEntities(stripCdata(extracted).trim()) || '（XML消息）'
// 3. 最后的尝试：移除所有 XML 标签，看是否还有有意义的文本
const stripped = raw.replace(/<[^>]+>/g, '').trim()
if (stripped && stripped.length > 0 && stripped.length < 50) {
return decodeEntities(stripped)
}
return '（多媒体/卡片消息）'
}
const formatFullDate = (timestamp: number) => {
const d = new Date(timestamp)
@@ -344,7 +266,7 @@ function DualReportWindow() {
<h1 className="hero-title dual-cover-title">{yearTitle}<br />双人聊天报告</h1>
<hr className="divider" />
<div className="dual-names">
<span>{reportData.selfName}</span>
<span>我</span>
<span className="amp">&amp;</span>
<span>{reportData.friendName}</span>
</div>
@@ -355,33 +277,34 @@ function DualReportWindow() {
<div className="label-text">首次聊天</div>
<h2 className="hero-title">故事的开始</h2>
{firstChat ? (
<>
<div className="dual-info-grid">
<div className="dual-info-card">
<div className="info-label">第一次聊天时间</div>
<div className="info-value">{formatFullDate(firstChat.createTime)}</div>
</div>
<div className="dual-info-card">
<div className="info-label">距今天数</div>
<div className="info-value">{daysSince} 天</div>
</div>
</div>
<div className="first-chat-scene">
<div className="scene-title">第一次遇见</div>
<div className="scene-subtitle">{formatFullDate(firstChat.createTime).split(' ')[0]}</div>
{firstChatMessages.length > 0 ? (
<div className="dual-message-list">
<div className="scene-messages">
{firstChatMessages.map((msg, idx) => (
<div
key={idx}
className={`dual-message ${msg.isSentByMe ? 'sent' : 'received'}`}
>
<div className="message-meta">
{msg.isSentByMe ? reportData.selfName : reportData.friendName} · {formatFullDate(msg.createTime)}
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
<div className="scene-avatar">
{msg.isSentByMe ? '我' : reportData.friendName.substring(0, 1)}
</div>
<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 className="message-content">{formatMessageContent(msg.content)}</div>
</div>
))}
</div>
) : null}
</>
) : (
<div className="hero-desc" style={{ textAlign: 'center' }}>暂无消息详情</div>
)}
<div className="scene-footer" style={{ marginTop: '20px', textAlign: 'center', fontSize: '12px', opacity: 0.6 }}>
距离今天已经 {daysSince} 天
</div>
</div>
) : (
<p className="hero-desc">暂无首条消息</p>
)}
@@ -393,33 +316,111 @@ function DualReportWindow() {
<h2 className="hero-title">
{reportData.year === 0 ? '你们的第一段对话' : `${reportData.year}年的第一段对话`}
</h2>
<div className="dual-info-grid">
<div className="dual-info-card">
<div className="info-label">第一段对话时间</div>
<div className="info-value">{formatFullDate(yearFirstChat.createTime)}</div>
</div>
<div className="dual-info-card">
<div className="info-label">发起者</div>
<div className="info-value">{yearFirstChat.isSentByMe ? reportData.selfName : reportData.friendName}</div>
</div>
</div>
<div className="dual-message-list">
{yearFirstChat.firstThreeMessages.map((msg, idx) => (
<div key={idx} className={`dual-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
<div className="message-meta">
{msg.isSentByMe ? reportData.selfName : reportData.friendName} · {formatFullDate(msg.createTime)}
<div className="first-chat-scene">
<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'}`}>
<div className="scene-avatar">
{msg.isSentByMe ? '我' : reportData.friendName.substring(0, 1)}
</div>
<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>
<div className="message-content">{formatMessageContent(msg.content)}</div>
</div>
))}
))}
</div>
</div>
</section>
) : null}
{reportData.heatmap && (
<section className="section">
<div className="label-text">聊天习惯</div>
<h2 className="hero-title">作息规律</h2>
<ReportHeatmap data={reportData.heatmap} />
</section>
)}
{reportData.initiative && (
<section className="section">
<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">我</div>
<div className="count">{reportData.initiative.initiated}次</div>
</div>
<div className="initiative-progress">
<div
className="bar-segment left"
style={{ width: `${reportData.initiative.initiated / (reportData.initiative.initiated + reportData.initiative.received) * 100}%` }}
/>
<div
className="bar-segment right"
style={{ width: `${reportData.initiative.received / (reportData.initiative.initiated + reportData.initiative.received) * 100}%` }}
/>
</div>
<div className="initiative-side">
<div className="avatar-placeholder">{reportData.friendName.substring(0, 1)}</div>
<div className="count">{reportData.initiative.received}次</div>
</div>
</div>
</div>
</section>
)}
{reportData.response && (
<section className="section">
<div className="label-text">回复速度</div>
<h2 className="hero-title">秒回是并在乎</h2>
<div className="response-grid">
<div className="response-card">
<div className="icon-box">
<Clock size={24} />
</div>
<div className="label">平均回复</div>
<div className="value">{Math.round(reportData.response.avg / 60)}<span>分</span></div>
</div>
<div className="response-card fastest">
<div className="icon-box">
<Zap size={24} />
</div>
<div className="label">最快回复</div>
<div className="value">{reportData.response.fastest}<span>秒</span></div>
</div>
</div>
</section>
)}
{reportData.streak && (
<section className="section">
<div className="label-text">聊天火花</div>
<h2 className="hero-title">最长连续聊天</h2>
<div className="streak-container">
<div className="streak-flame">🔥</div>
<div className="streak-days">{reportData.streak.days}<span>天</span></div>
<div className="streak-range">
{reportData.streak.startDate} ~ {reportData.streak.endDate}
</div>
</div>
</section>
)}
<section className="section">
<div className="label-text">常用语</div>
<h2 className="hero-title">{yearTitle}常用语</h2>
<WordCloud words={reportData.topPhrases} />
<ReportWordCloud words={reportData.topPhrases} />
</section>
<section className="section">
@@ -429,8 +430,22 @@ function DualReportWindow() {
{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' : ''}`}>
<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>