同步ui

src/pages/DualReportWindow.scss

@@ -1,220 +1,130 @@
-.dual-report-window {
-  color: var(--text-primary);
-  padding: 32px 24px 60px;
-  background: var(--bg-primary);
-}
-
-.dual-report-window.loading,
-.dual-report-window.error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  gap: 12px;
-  color: var(--text-tertiary);
-}
-
-.dual-section {
-  background: var(--card-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 20px;
-  padding: 24px;
-  margin: 16px auto;
-  max-width: 900px;
-}
-
-.dual-section.cover {
-  text-align: center;
-  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, var(--card-bg) 100%);
-
-  .label {
-    font-size: 12px;
-    letter-spacing: 2px;
-    color: var(--text-tertiary);
-    margin-bottom: 12px;
-  }
-
-  h1 {
-    margin: 0 0 12px;
-    font-size: 36px;
-  }
-
-  p {
-    margin: 0;
-    color: var(--text-secondary);
-  }
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 16px;
-}
-
-.info-card {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  font-size: 14px;
-}
-
-.info-label {
-  color: var(--text-tertiary);
-}
-
-.info-value {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-.info-empty {
-  color: var(--text-tertiary);
-}
-
-.message-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-.message-item {
-  padding: 10px 12px;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--primary) 6%, transparent);
-
-  &.received {
-    background: color-mix(in srgb, var(--border-color) 35%, transparent);
-  }
-}
-
-.message-meta {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  margin-bottom: 6px;
-}
-
-.message-content {
-  font-size: 14px;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.stat-card {
-  background: color-mix(in srgb, var(--primary) 6%, transparent);
-  border-radius: 12px;
-  padding: 14px;
-  text-align: center;
-
-  .stat-value {
-    font-size: 20px;
+.annual-report-window.dual-report-window {
+  .dual-names {
+    font-size: clamp(24px, 4vw, 40px);
     font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 8px 0 16px;
+    color: var(--ar-text-main);
+
+    .amp {
+      color: var(--ar-primary);
+    }
   }
 
-  .stat-label {
+  .dual-info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-top: 16px;
+  }
+
+  .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 {
+      grid-column: 1 / -1;
+    }
+
+    .info-label {
+      font-size: 12px;
+      color: var(--ar-text-sub);
+      margin-bottom: 8px;
+    }
+
+    .info-value {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--ar-text-main);
+    }
+  }
+
+  .dual-message-list {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .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);
+      margin-bottom: 6px;
+    }
+
+    .message-content {
+      font-size: 14px;
+      color: var(--ar-text-main);
+    }
+  }
+
+  .dual-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 16px;
+    margin: 20px 0 24px;
+  }
+
+  .dual-stat-card {
+    background: var(--ar-card-bg);
+    border-radius: 16px;
+    padding: 18px;
+    text-align: center;
+  }
+
+  .emoji-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+  }
+
+  .emoji-card {
+    border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.08));
+    border-radius: 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    background: var(--ar-card-bg);
+
+    img {
+      width: 64px;
+      height: 64px;
+      object-fit: contain;
+    }
+  }
+
+  .emoji-title {
     font-size: 12px;
-    color: var(--text-tertiary);
-    margin-top: 4px;
+    color: var(--ar-text-sub);
+  }
+
+  .emoji-placeholder {
+    font-size: 12px;
+    color: var(--ar-text-sub);
+    word-break: break-all;
+    text-align: center;
+  }
+
+  .word-cloud-empty {
+    color: var(--ar-text-sub);
+    font-size: 14px;
+    text-align: center;
+    padding: 24px 0;
   }
 }
-
-.emoji-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-}
-
-.emoji-card {
-  border: 1px solid var(--border-color);
-  border-radius: 14px;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 64px;
-    height: 64px;
-    object-fit: contain;
-  }
-}
-
-.emoji-title {
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-.emoji-placeholder {
-  font-size: 12px;
-  color: var(--text-secondary);
-  word-break: break-all;
-  text-align: center;
-}
-
-.word-cloud-wrapper {
-  position: relative;
-  width: 100%;
-  padding-top: 80%;
-  background: color-mix(in srgb, var(--primary) 4%, transparent);
-  border-radius: 18px;
-  overflow: hidden;
-}
-
-.word-cloud-inner {
-  position: absolute;
-  inset: 0;
-}
-
-.word-tag {
-  position: absolute;
-  font-weight: 600;
-  color: var(--text-primary);
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  animation: fadeUp 0.8s ease forwards;
-}
-
-.word-cloud-empty {
-  color: var(--text-tertiary);
-  font-size: 14px;
-  text-align: center;
-  padding: 40px 0;
-}
-
-.progress {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.stage {
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-.spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes fadeUp {
-  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px); }
-  to { opacity: var(--final-opacity, 1); transform: translate(-50%, -50%) translateY(0); }
-}

src/pages/DualReportWindow.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type CSSProperties } from 'react'
-import { Loader2 } from 'lucide-react'
+import './AnnualReportWindow.scss'
 import './DualReportWindow.scss'
 
 interface DualReportMessage {
@@ -11,7 +11,7 @@ interface DualReportMessage {
 
 interface DualReportData {
   year: number
-  myName: string
+  selfName: string
   friendUsername: string
   friendName: string
   firstChat: {
@@ -21,7 +21,7 @@ interface DualReportData {
     isSentByMe: boolean
     senderUsername?: string
   } | null
-  thisYearFirstChat?: {
+  yearFirstChat?: {
     createTime: number
     createTimeStr: string
     content: string
@@ -29,7 +29,7 @@ interface DualReportData {
     friendName: string
     firstThreeMessages: DualReportMessage[]
   } | null
-  yearlyStats: {
+  stats: {
     totalMessages: number
     totalWords: number
     imageCount: number
@@ -40,19 +40,16 @@ interface DualReportData {
     myTopEmojiUrl?: string
     friendTopEmojiUrl?: string
   }
-  wordCloud: {
-    words: Array<{ phrase: string; count: number }>
-    totalWords: number
-    totalMessages: number
-  }
+  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 maxCount = words.length > 0 ? words[0].count : 1
-  const topWords = words.slice(0, 32)
+  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) => {
@@ -205,7 +202,7 @@ function DualReportWindow() {
   useEffect(() => {
     const loadEmojis = async () => {
       if (!reportData) return
-      const stats = reportData.yearlyStats
+      const stats = reportData.stats
       if (stats.myTopEmojiUrl) {
         const res = await window.electronAPI.chat.downloadEmoji(stats.myTopEmojiUrl, stats.myTopEmojiMd5)
         if (res.success && res.localPath) {
@@ -224,25 +221,35 @@ function DualReportWindow() {
 
   if (isLoading) {
     return (
-      <div className="dual-report-window loading">
-        <Loader2 size={36} className="spin" />
-        <div className="progress">{loadingProgress}%</div>
-        <div className="stage">{loadingStage}</div>
+      <div className="annual-report-window loading">
+        <div className="loading-ring">
+          <svg viewBox="0 0 100 100">
+            <circle className="ring-bg" cx="50" cy="50" r="42" />
+            <circle
+              className="ring-progress"
+              cx="50" cy="50" r="42"
+              style={{ strokeDashoffset: 264 - (264 * loadingProgress / 100) }}
+            />
+          </svg>
+          <span className="ring-text">{loadingProgress}%</span>
+        </div>
+        <p className="loading-stage">{loadingStage}</p>
+        <p className="loading-hint">进行中</p>
       </div>
     )
   }
 
   if (error) {
     return (
-      <div className="dual-report-window error">
-        <p>生成报告失败：{error}</p>
+      <div className="annual-report-window error">
+        <p>生成报告失败: {error}</p>
       </div>
     )
   }
 
   if (!reportData) {
     return (
-      <div className="dual-report-window error">
+      <div className="annual-report-window error">
         <p>暂无数据</p>
       </div>
     )
@@ -253,112 +260,142 @@ function DualReportWindow() {
   const daysSince = firstChat
     ? Math.max(0, Math.floor((Date.now() - firstChat.createTime) / 86400000))
     : null
-  const thisYearFirstChat = reportData.thisYearFirstChat
-  const stats = reportData.yearlyStats
+  const yearFirstChat = reportData.yearFirstChat
+  const stats = reportData.stats
 
   return (
-    <div className="dual-report-window">
-      <section className="dual-section cover">
-        <div className="label">DUAL REPORT</div>
-        <h1>{reportData.myName} &amp; {reportData.friendName}</h1>
-        <p>让我们一起回顾这段独一无二的对话</p>
-      </section>
+    <div className="annual-report-window dual-report-window">
+      <div className="drag-region" />
 
-      <section className="dual-section">
-        <div className="section-title">首次聊天</div>
-        {firstChat ? (
-          <div className="info-card">
-            <div className="info-row">
-              <span className="info-label">第一次聊天时间</span>
-              <span className="info-value">{firstChat.createTimeStr}</span>
-            </div>
-            <div className="info-row">
-              <span className="info-label">距今天数</span>
-              <span className="info-value">{daysSince} 天</span>
-            </div>
-            <div className="info-row">
-              <span className="info-label">首条消息</span>
-              <span className="info-value">{firstChat.content || '（空）'}</span>
-            </div>
-          </div>
-        ) : (
-          <div className="info-empty">暂无首条消息</div>
-        )}
-      </section>
+      <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>
 
-      {thisYearFirstChat ? (
-        <section className="dual-section">
-          <div className="section-title">今年首次聊天</div>
-          <div className="info-card">
-            <div className="info-row">
-              <span className="info-label">首次时间</span>
-              <span className="info-value">{thisYearFirstChat.createTimeStr}</span>
+      <div className="report-scroll-view">
+        <div className="report-container">
+          <section className="section">
+            <div className="label-text">WEFLOW · DUAL REPORT</div>
+            <h1 className="hero-title">{yearTitle}<br />双人聊天报告</h1>
+            <hr className="divider" />
+            <div className="dual-names">
+              <span>{reportData.selfName}</span>
+              <span className="amp">&amp;</span>
+              <span>{reportData.friendName}</span>
             </div>
-            <div className="info-row">
-              <span className="info-label">发起者</span>
-              <span className="info-value">{thisYearFirstChat.isSentByMe ? reportData.myName : reportData.friendName}</span>
-            </div>
-            <div className="message-list">
-              {thisYearFirstChat.firstThreeMessages.map((msg, idx) => (
-                <div key={idx} className={`message-item ${msg.isSentByMe ? 'sent' : 'received'}`}>
-                  <div className="message-meta">{msg.isSentByMe ? reportData.myName : reportData.friendName} · {msg.createTimeStr}</div>
-                  <div className="message-content">{msg.content || '（空）'}</div>
+            <p className="hero-desc">每一次对话都值得被珍藏</p>
+          </section>
+
+          <section className="section">
+            <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">{firstChat.createTimeStr}</div>
                 </div>
-              ))}
+                <div className="dual-info-card">
+                  <div className="info-label">距今天数</div>
+                  <div className="info-value">{daysSince} 天</div>
+                </div>
+                <div className="dual-info-card full">
+                  <div className="info-label">首条消息</div>
+                  <div className="info-value">{firstChat.content || '（空）'}</div>
+                </div>
+              </div>
+            ) : (
+              <p className="hero-desc">暂无首条消息</p>
+            )}
+          </section>
+
+          {yearFirstChat ? (
+            <section className="section">
+              <div className="label-text">今年首次聊天</div>
+              <h2 className="hero-title">新一年的开场</h2>
+              <div className="dual-info-grid">
+                <div className="dual-info-card">
+                  <div className="info-label">首次时间</div>
+                  <div className="info-value">{yearFirstChat.createTimeStr}</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} · {msg.createTimeStr}</div>
+                    <div className="message-content">{msg.content || '（空）'}</div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          ) : null}
+
+          <section className="section">
+            <div className="label-text">常用语</div>
+            <h2 className="hero-title">{yearTitle}常用语</h2>
+            <WordCloud words={reportData.topPhrases} />
+          </section>
+
+          <section className="section">
+            <div className="label-text">年度统计</div>
+            <h2 className="hero-title">{yearTitle}数据概览</h2>
+            <div className="dual-stat-grid">
+              <div className="dual-stat-card">
+                <div className="stat-num">{stats.totalMessages.toLocaleString()}</div>
+                <div className="stat-unit">总消息数</div>
+              </div>
+              <div className="dual-stat-card">
+                <div className="stat-num">{stats.totalWords.toLocaleString()}</div>
+                <div className="stat-unit">总字数</div>
+              </div>
+              <div className="dual-stat-card">
+                <div className="stat-num">{stats.imageCount.toLocaleString()}</div>
+                <div className="stat-unit">图片</div>
+              </div>
+              <div className="dual-stat-card">
+                <div className="stat-num">{stats.voiceCount.toLocaleString()}</div>
+                <div className="stat-unit">语音</div>
+              </div>
+              <div className="dual-stat-card">
+                <div className="stat-num">{stats.emojiCount.toLocaleString()}</div>
+                <div className="stat-unit">表情</div>
+              </div>
             </div>
-          </div>
-        </section>
-      ) : null}
 
-      <section className="dual-section">
-        <div className="section-title">{yearTitle}常用语</div>
-        <WordCloud words={reportData.wordCloud.words} />
-      </section>
+            <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>
+              <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>
+            </div>
+          </section>
 
-      <section className="dual-section">
-        <div className="section-title">{yearTitle}统计</div>
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-value">{stats.totalMessages.toLocaleString()}</div>
-            <div className="stat-label">总消息数</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{stats.totalWords.toLocaleString()}</div>
-            <div className="stat-label">总字数</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{stats.imageCount.toLocaleString()}</div>
-            <div className="stat-label">图片</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{stats.voiceCount.toLocaleString()}</div>
-            <div className="stat-label">语音</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{stats.emojiCount.toLocaleString()}</div>
-            <div className="stat-label">表情</div>
-          </div>
+          <section className="section">
+            <div className="label-text">尾声</div>
+            <h2 className="hero-title">谢谢你一直在</h2>
+            <p className="hero-desc">愿我们继续把故事写下去</p>
+          </section>
         </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>
-          <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>
-        </div>
-      </section>
+      </div>
     </div>
   )
 }