新的提交

src/pages/AnnualReportPage.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Calendar, Loader2, Sparkles } from 'lucide-react'
+import './AnnualReportPage.scss'
+
+function AnnualReportPage() {
+  const navigate = useNavigate()
+  const [availableYears, setAvailableYears] = useState<number[]>([])
+  const [selectedYear, setSelectedYear] = useState<number | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [loadError, setLoadError] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadAvailableYears()
+  }, [])
+
+  const loadAvailableYears = async () => {
+    setIsLoading(true)
+    setLoadError(null)
+    try {
+      const result = await window.electronAPI.annualReport.getAvailableYears()
+      if (result.success && result.data && result.data.length > 0) {
+        setAvailableYears(result.data)
+        setSelectedYear(result.data[0])
+      } else if (!result.success) {
+        setLoadError(result.error || '加载年度数据失败')
+      }
+    } catch (e) {
+      console.error(e)
+      setLoadError(String(e))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleGenerateReport = async () => {
+    if (!selectedYear) return
+    setIsGenerating(true)
+    try {
+      navigate(`/annual-report/view?year=${selectedYear}`)
+    } catch (e) {
+      console.error('生成报告失败:', e)
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="annual-report-page">
+        <Loader2 size={32} className="spin" style={{ color: 'var(--text-tertiary)' }} />
+        <p style={{ color: 'var(--text-tertiary)', marginTop: 16 }}>正在加载年份数据...</p>
+      </div>
+    )
+  }
+
+  if (availableYears.length === 0) {
+    return (
+      <div className="annual-report-page">
+        <Calendar size={64} style={{ color: 'var(--text-tertiary)', opacity: 0.5 }} />
+        <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--text-primary)', margin: '16px 0 8px' }}>暂无聊天记录</h2>
+        <p style={{ color: 'var(--text-tertiary)', margin: 0 }}>
+          {loadError || '请先解密数据库后再生成年度报告'}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="annual-report-page">
+      <Sparkles size={32} className="header-icon" />
+      <h1 className="page-title">年度报告</h1>
+      <p className="page-desc">选择年份，生成你的微信聊天年度回顾</p>
+
+      <div className="year-grid">
+        {availableYears.map(year => (
+          <div
+            key={year}
+            className={`year-card ${selectedYear === year ? 'selected' : ''}`}
+            onClick={() => setSelectedYear(year)}
+          >
+            <span className="year-number">{year}</span>
+            <span className="year-label">年</span>
+          </div>
+        ))}
+      </div>
+
+      <button
+        className="generate-btn"
+        onClick={handleGenerateReport}
+        disabled={!selectedYear || isGenerating}
+      >
+        {isGenerating ? (
+          <>
+            <Loader2 size={20} className="spin" />
+            <span>正在生成...</span>
+          </>
+        ) : (
+          <>
+            <Sparkles size={20} />
+            <span>生成 {selectedYear} 年度报告</span>
+          </>
+        )}
+      </button>
+    </div>
+  )
+}
+
+export default AnnualReportPage