fix: add forceReopen retry logic for openMessageCursorLite

- 新增 analyticsConsent state 追踪用户同意状态
- initCloudControl() 仅在用户明确同意后执行
- recordPage() 同样受 analyticsConsent 守卫
- handleAnalyticsAllow 同步更新 state，用户同意后立即生效

Fixes #589

.gitignore

@@ -70,4 +70,5 @@ resources/wx_send
 概述.md
 pnpm-lock.yaml
 /pnpm-workspace.yaml
-wechat-research-site
+wechat-research-site
+.codex

electron/services/cloudControlService.ts

@@ -15,15 +15,31 @@ class CloudControlService {
   private timer: NodeJS.Timeout | null = null
   private pages: Set<string> = new Set()
   private platformVersionCache: string | null = null
+  private pendingReports: UsageStats[] = []
+  private flushInProgress = false
+  private retryDelayMs = 5_000
+  private consecutiveFailures = 0
+  private circuitOpenedAt = 0
+  private nextDelayOverrideMs: number | null = null
+  private initialized = false
+
+  private static readonly BASE_FLUSH_MS = 300_000
+  private static readonly JITTER_MS = 30_000
+  private static readonly MAX_BUFFER_REPORTS = 200
+  private static readonly MAX_BATCH_REPORTS = 20
+  private static readonly MAX_RETRY_MS = 120_000
+  private static readonly CIRCUIT_FAIL_THRESHOLD = 5
+  private static readonly CIRCUIT_COOLDOWN_MS = 120_000
 
   async init() {
+    if (this.initialized) return
+    this.initialized = true
     this.deviceId = this.getDeviceId()
     await wcdbService.cloudInit(300)
-    await this.reportOnline()
-
-    this.timer = setInterval(() => {
-      this.reportOnline()
-    }, 300000)
+    this.enqueueCurrentReport()
+    await this.flushQueue(true)
+    this.scheduleNextFlush(this.nextDelayOverrideMs ?? undefined)
+    this.nextDelayOverrideMs = null
   }
 
   private getDeviceId(): string {
@@ -33,8 +49,8 @@ class CloudControlService {
     return crypto.createHash('md5').update(machineId).digest('hex')
   }
 
-  private async reportOnline() {
-    const data: UsageStats = {
+  private buildCurrentReport(): UsageStats {
+    return {
       appVersion: app.getVersion(),
       platform: this.getPlatformVersion(),
       deviceId: this.deviceId,
@@ -42,11 +58,69 @@ class CloudControlService {
       online: true,
       pages: Array.from(this.pages)
     }
+  }
 
-    await wcdbService.cloudReport(JSON.stringify(data))
+  private enqueueCurrentReport() {
+    const report = this.buildCurrentReport()
+    this.pendingReports.push(report)
+    if (this.pendingReports.length > CloudControlService.MAX_BUFFER_REPORTS) {
+      this.pendingReports.splice(0, this.pendingReports.length - CloudControlService.MAX_BUFFER_REPORTS)
+    }
     this.pages.clear()
   }
 
+  private isCircuitOpen(nowMs: number): boolean {
+    if (this.circuitOpenedAt <= 0) return false
+    return nowMs-this.circuitOpenedAt < CloudControlService.CIRCUIT_COOLDOWN_MS
+  }
+
+  private scheduleNextFlush(delayMs?: number) {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    const jitter = Math.floor(Math.random() * CloudControlService.JITTER_MS)
+    const nextDelay = Math.max(1_000, Number(delayMs) > 0 ? Number(delayMs) : CloudControlService.BASE_FLUSH_MS + jitter)
+    this.timer = setTimeout(() => {
+      this.enqueueCurrentReport()
+      this.flushQueue(false).finally(() => {
+        this.scheduleNextFlush(this.nextDelayOverrideMs ?? undefined)
+        this.nextDelayOverrideMs = null
+      })
+    }, nextDelay)
+  }
+
+  private async flushQueue(force: boolean) {
+    if (this.flushInProgress) return
+    if (this.pendingReports.length === 0) return
+    const now = Date.now()
+    if (!force && this.isCircuitOpen(now)) {
+      return
+    }
+    this.flushInProgress = true
+    try {
+      while (this.pendingReports.length > 0) {
+        const batch = this.pendingReports.slice(0, CloudControlService.MAX_BATCH_REPORTS)
+        const result = await wcdbService.cloudReport(JSON.stringify(batch))
+        if (!result || result.success !== true) {
+          this.consecutiveFailures += 1
+          this.retryDelayMs = Math.min(CloudControlService.MAX_RETRY_MS, this.retryDelayMs * 2)
+          if (this.consecutiveFailures >= CloudControlService.CIRCUIT_FAIL_THRESHOLD) {
+            this.circuitOpenedAt = Date.now()
+          }
+          this.nextDelayOverrideMs = this.retryDelayMs
+          return
+        }
+        this.pendingReports.splice(0, batch.length)
+        this.consecutiveFailures = 0
+        this.retryDelayMs = 5_000
+        this.circuitOpenedAt = 0
+      }
+    } finally {
+      this.flushInProgress = false
+    }
+  }
+
   private getPlatformVersion(): string {
     if (this.platformVersionCache) {
       return this.platformVersionCache
@@ -146,9 +220,16 @@ class CloudControlService {
 
   stop() {
     if (this.timer) {
-      clearInterval(this.timer)
+      clearTimeout(this.timer)
       this.timer = null
     }
+    this.pendingReports = []
+    this.flushInProgress = false
+    this.retryDelayMs = 5_000
+    this.consecutiveFailures = 0
+    this.circuitOpenedAt = 0
+    this.nextDelayOverrideMs = null
+    this.initialized = false
     wcdbService.cloudStop()
   }
 
@@ -158,4 +239,3 @@ class CloudControlService {
 }
 
 export const cloudControlService = new CloudControlService()
-

electron/services/wcdbCore.ts

@@ -2681,7 +2681,7 @@ export class WcdbCore {
     }
     try {
       const outCursor = [0]
-      const result = this.wcdbOpenMessageCursorLite(
+      let result = this.wcdbOpenMessageCursorLite(
         this.handle,
         sessionId,
         batchSize,
@@ -2690,6 +2690,29 @@ export class WcdbCore {
         endTimestamp,
         outCursor
       )
+
+      // result=-3 表示 WCDB_STATUS_NO_MESSAGE_DB：消息数据库缓存为空
+      // 自动强制重连并重试一次
+      if (result === -3 && outCursor[0] <= 0) {
+        this.writeLog('openMessageCursorLite: result=-3 (no message db), attempting forceReopen...', true)
+        const reopened = await this.forceReopen()
+        if (reopened && this.handle !== null) {
+          outCursor[0] = 0
+          result = this.wcdbOpenMessageCursorLite(
+            this.handle,
+            sessionId,
+            batchSize,
+            ascending ? 1 : 0,
+            beginTimestamp,
+            endTimestamp,
+            outCursor
+          )
+          this.writeLog(`openMessageCursorLite retry after forceReopen: result=${result} cursor=${outCursor[0]}`, true)
+        } else {
+          this.writeLog('openMessageCursorLite forceReopen failed, giving up', true)
+        }
+      }
+
       if (result !== 0 || outCursor[0] <= 0) {
         await this.printLogs(true)
         this.writeLog(

package-lock.json

@@ -3040,9 +3040,9 @@
       }
     },
     "node_modules/@xmldom/xmldom": {
-      "version": "0.8.12",
-      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.12.tgz",
-      "integrity": "sha512-9k/gHF6n/pAi/9tqr3m3aqkuiNosYTurLLUtc7xQ9sxB/wm7WPygCv8GYa6mS0fLJEHhqMC1ATYhz++U/lRHqg==",
+      "version": "0.8.11",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+      "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9072,9 +9072,6 @@
         "sherpa-onnx-win-x64": "^1.12.23"
       }
     },
-    "node_modules/sherpa-onnx-node/node_modules/sherpa-onnx-darwin-x64": {
-      "optional": true
-    },
     "node_modules/sherpa-onnx-win-ia32": {
       "version": "1.12.23",
       "resolved": "https://registry.npmmirror.com/sherpa-onnx-win-ia32/-/sherpa-onnx-win-ia32-1.12.23.tgz",

package.json

@@ -194,6 +194,6 @@
     "picomatch": "^4.0.4",
     "tar": "^7.5.13",
     "immutable": "^5.1.5",
-    "ajv": ">=6.14.0"
+    "ajv": "^6.14.0"
   }
 }

src/App.tsx

@@ -103,6 +103,7 @@ function App() {
 
   // 数据收集同意状态
   const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false)
+  const [analyticsConsent, setAnalyticsConsent] = useState<boolean | null>(null)
 
   const [showWaylandWarning, setShowWaylandWarning] = useState(false)
 
@@ -252,6 +253,7 @@ function App() {
           // 协议已同意，检查数据收集同意状态
           const consent = await configService.getAnalyticsConsent()
           const denyCount = await configService.getAnalyticsDenyCount()
+          setAnalyticsConsent(consent)
           // 如果未设置同意状态且拒绝次数小于2次，显示弹窗
           if (consent === null && denyCount < 2) {
             setShowAnalyticsConsent(true)
@@ -266,18 +268,21 @@ function App() {
     checkAgreement()
   }, [])
 
-  // 初始化数据收集
+  // 初始化数据收集（仅在用户同意后）
   useEffect(() => {
-    cloudControl.initCloudControl()
-  }, [])
+    if (analyticsConsent === true) {
+      cloudControl.initCloudControl()
+    }
+  }, [analyticsConsent])
 
-  // 记录页面访问
+  // 记录页面访问（仅在用户同意后）
   useEffect(() => {
+    if (analyticsConsent !== true) return
     const path = location.pathname
     if (path && path !== '/') {
       cloudControl.recordPage(path)
     }
-  }, [location.pathname])
+  }, [location.pathname, analyticsConsent])
 
   const handleAgree = async () => {
     if (!agreementChecked) return
@@ -296,6 +301,7 @@ function App() {
 
   const handleAnalyticsAllow = async () => {
     await configService.setAnalyticsConsent(true)
+    setAnalyticsConsent(true)
     setShowAnalyticsConsent(false)
   }
 

src/components/JumpToDateDialog.scss

@@ -75,6 +75,8 @@
             font-size: 15px;
             font-weight: 600;
             color: var(--text-primary);
+            border: none;
+            background: transparent;
 
             &.clickable {
                 cursor: pointer;
@@ -172,6 +174,33 @@
                 }
             }
         }
+
+        .year-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 6px;
+
+            .year-btn {
+                padding: 10px 0;
+                border: none;
+                background: transparent;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 13px;
+                color: var(--text-secondary);
+                transition: all 0.15s;
+
+                &:hover {
+                    background: var(--bg-hover);
+                    color: var(--text-primary);
+                }
+
+                &.active {
+                    background: var(--primary);
+                    color: #fff;
+                }
+            }
+        }
     }
 }
 
@@ -372,4 +401,4 @@
         opacity: 1;
         transform: translateY(0);
     }
-}
+}

src/components/JumpToDateDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState } from 'react'
 import { X, ChevronLeft, ChevronRight, Calendar as CalendarIcon, Loader2 } from 'lucide-react'
 import './JumpToDateDialog.scss'
 
@@ -21,10 +21,15 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
     messageDates,
     loadingDates = false
 }) => {
+    type CalendarViewMode = 'day' | 'month' | 'year'
+    const getYearPageStart = (year: number): number => Math.floor(year / 12) * 12
     const isValidDate = (d: any) => d instanceof Date && !isNaN(d.getTime())
     const [calendarDate, setCalendarDate] = useState(isValidDate(currentDate) ? new Date(currentDate) : new Date())
     const [selectedDate, setSelectedDate] = useState(new Date(currentDate))
-    const [showYearMonthPicker, setShowYearMonthPicker] = useState(false)
+    const [viewMode, setViewMode] = useState<CalendarViewMode>('day')
+    const [yearPageStart, setYearPageStart] = useState<number>(
+        getYearPageStart((isValidDate(currentDate) ? new Date(currentDate) : new Date()).getFullYear())
+    )
 
     if (!isOpen) return null
 
@@ -116,6 +121,57 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
 
     const weekdays = ['日', '一', '二', '三', '四', '五', '六']
     const days = generateCalendar()
+    const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+
+    const updateCalendarDate = (nextDate: Date) => {
+        setCalendarDate(nextDate)
+    }
+
+    const openMonthView = () => setViewMode('month')
+    const openYearView = () => {
+        setYearPageStart(getYearPageStart(calendarDate.getFullYear()))
+        setViewMode('year')
+    }
+
+    const handleTitleClick = () => {
+        if (viewMode === 'day') {
+            openMonthView()
+            return
+        }
+        if (viewMode === 'month') {
+            openYearView()
+        }
+    }
+
+    const handlePrev = () => {
+        if (viewMode === 'day') {
+            updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))
+            return
+        }
+        if (viewMode === 'month') {
+            updateCalendarDate(new Date(calendarDate.getFullYear() - 1, calendarDate.getMonth(), 1))
+            return
+        }
+        setYearPageStart((prev) => prev - 12)
+    }
+
+    const handleNext = () => {
+        if (viewMode === 'day') {
+            updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))
+            return
+        }
+        if (viewMode === 'month') {
+            updateCalendarDate(new Date(calendarDate.getFullYear() + 1, calendarDate.getMonth(), 1))
+            return
+        }
+        setYearPageStart((prev) => prev + 12)
+    }
+
+    const navTitle = viewMode === 'day'
+        ? `${calendarDate.getFullYear()}年${calendarDate.getMonth() + 1}月`
+        : viewMode === 'month'
+            ? `${calendarDate.getFullYear()}年`
+            : `${yearPageStart}年 - ${yearPageStart + 11}年`
 
     return (
         <div className="jump-date-overlay" onClick={onClose}>
@@ -134,45 +190,57 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
                     <div className="calendar-nav">
                         <button
                             className="nav-btn"
-                            onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))}
+                            onClick={handlePrev}
                         >
                             <ChevronLeft size={18} />
                         </button>
-                        <span className="current-month clickable" onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}>
-                            {calendarDate.getFullYear()}年{calendarDate.getMonth() + 1}月
-                        </span>
+                        <button
+                            className={`current-month ${viewMode === 'year' ? '' : 'clickable'}`.trim()}
+                            onClick={handleTitleClick}
+                            type="button"
+                        >
+                            {navTitle}
+                        </button>
                         <button
                             className="nav-btn"
-                            onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))}
+                            onClick={handleNext}
                         >
                             <ChevronRight size={18} />
                         </button>
                     </div>
 
-                    {showYearMonthPicker ? (
+                    {viewMode === 'month' ? (
                         <div className="year-month-picker">
-                            <div className="year-selector">
-                                <button className="nav-btn" onClick={() => setCalendarDate(new Date(calendarDate.getFullYear() - 1, calendarDate.getMonth(), 1))}>
-                                    <ChevronLeft size={16} />
-                                </button>
-                                <span className="year-label">{calendarDate.getFullYear()}年</span>
-                                <button className="nav-btn" onClick={() => setCalendarDate(new Date(calendarDate.getFullYear() + 1, calendarDate.getMonth(), 1))}>
-                                    <ChevronRight size={16} />
-                                </button>
-                            </div>
                             <div className="month-grid">
-                                {['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'].map((name, i) => (
+                                {monthNames.map((name, i) => (
                                     <button
                                         key={i}
                                         className={`month-btn ${i === calendarDate.getMonth() ? 'active' : ''}`}
                                         onClick={() => {
-                                            setCalendarDate(new Date(calendarDate.getFullYear(), i, 1))
-                                            setShowYearMonthPicker(false)
+                                            updateCalendarDate(new Date(calendarDate.getFullYear(), i, 1))
+                                            setViewMode('day')
                                         }}
                                     >{name}</button>
                                 ))}
                             </div>
                         </div>
+                    ) : viewMode === 'year' ? (
+                        <div className="year-month-picker">
+                            <div className="year-grid">
+                                {Array.from({ length: 12 }, (_, i) => yearPageStart + i).map((year) => (
+                                    <button
+                                        key={year}
+                                        className={`year-btn ${year === calendarDate.getFullYear() ? 'active' : ''}`}
+                                        onClick={() => {
+                                            updateCalendarDate(new Date(year, calendarDate.getMonth(), 1))
+                                            setViewMode('month')
+                                        }}
+                                    >
+                                        {year}年
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
                     ) : (
                     <div className={`calendar-grid ${loadingDates ? 'loading' : ''}`}>
                         {loadingDates && (
@@ -208,18 +276,21 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
                         const d = new Date()
                         setSelectedDate(d)
                         setCalendarDate(new Date(d))
+                        setViewMode('day')
                     }}>今天</button>
                     <button onClick={() => {
                         const d = new Date()
                         d.setDate(d.getDate() - 7)
                         setSelectedDate(d)
                         setCalendarDate(new Date(d))
+                        setViewMode('day')
                     }}>一周前</button>
                     <button onClick={() => {
                         const d = new Date()
                         d.setMonth(d.getMonth() - 1)
                         setSelectedDate(d)
                         setCalendarDate(new Date(d))
+                        setViewMode('day')
                     }}>一月前</button>
                 </div>
 

src/components/JumpToDatePopover.scss

@@ -28,6 +28,20 @@
   font-size: 14px;
   font-weight: 600;
   color: var(--text-primary);
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  padding: 4px 8px;
+}
+
+.jump-date-popover .current-month.clickable {
+  cursor: pointer;
+  transition: all 0.18s ease;
+}
+
+.jump-date-popover .current-month.clickable:hover {
+  color: var(--primary);
+  background: var(--bg-hover);
 }
 
 .jump-date-popover .nav-btn {
@@ -83,6 +97,37 @@
   gap: 4px;
 }
 
+.jump-date-popover .month-grid,
+.jump-date-popover .year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  min-height: 256px;
+}
+
+.jump-date-popover .month-cell,
+.jump-date-popover .year-cell {
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.18s ease;
+}
+
+.jump-date-popover .month-cell:hover,
+.jump-date-popover .year-cell:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.jump-date-popover .month-cell.active,
+.jump-date-popover .year-cell.active {
+  background: var(--primary);
+  color: #fff;
+}
+
 .jump-date-popover .day-cell {
   position: relative;
   border: 1px solid transparent;

src/components/JumpToDatePopover.tsx

@@ -31,14 +31,20 @@ const JumpToDatePopover: React.FC<JumpToDatePopoverProps> = ({
   loadingDates = false,
   loadingDateCounts = false
 }) => {
+  type CalendarViewMode = 'day' | 'month' | 'year'
+  const getYearPageStart = (year: number): number => Math.floor(year / 12) * 12
   const [calendarDate, setCalendarDate] = useState<Date>(new Date(currentDate))
   const [selectedDate, setSelectedDate] = useState<Date>(new Date(currentDate))
+  const [viewMode, setViewMode] = useState<CalendarViewMode>('day')
+  const [yearPageStart, setYearPageStart] = useState<number>(getYearPageStart(new Date(currentDate).getFullYear()))
 
   useEffect(() => {
     if (!isOpen) return
     const normalized = new Date(currentDate)
     setCalendarDate(normalized)
     setSelectedDate(normalized)
+    setViewMode('day')
+    setYearPageStart(getYearPageStart(normalized.getFullYear()))
   }, [isOpen, currentDate])
 
   if (!isOpen) return null
@@ -114,25 +120,78 @@ const JumpToDatePopover: React.FC<JumpToDatePopoverProps> = ({
   const weekdays = ['日', '一', '二', '三', '四', '五', '六']
   const days = generateCalendar()
   const mergedClassName = ['jump-date-popover', className || ''].join(' ').trim()
+
   const updateCalendarDate = (nextDate: Date) => {
     setCalendarDate(nextDate)
     onMonthChange?.(nextDate)
   }
 
+  const openMonthView = () => setViewMode('month')
+  const openYearView = () => {
+    setYearPageStart(getYearPageStart(calendarDate.getFullYear()))
+    setViewMode('year')
+  }
+
+  const handleTitleClick = () => {
+    if (viewMode === 'day') {
+      openMonthView()
+      return
+    }
+    if (viewMode === 'month') {
+      openYearView()
+    }
+  }
+
+  const handlePrev = () => {
+    if (viewMode === 'day') {
+      updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))
+      return
+    }
+    if (viewMode === 'month') {
+      updateCalendarDate(new Date(calendarDate.getFullYear() - 1, calendarDate.getMonth(), 1))
+      return
+    }
+    setYearPageStart((prev) => prev - 12)
+  }
+
+  const handleNext = () => {
+    if (viewMode === 'day') {
+      updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))
+      return
+    }
+    if (viewMode === 'month') {
+      updateCalendarDate(new Date(calendarDate.getFullYear() + 1, calendarDate.getMonth(), 1))
+      return
+    }
+    setYearPageStart((prev) => prev + 12)
+  }
+
+  const navTitle = viewMode === 'day'
+    ? `${calendarDate.getFullYear()}年${calendarDate.getMonth() + 1}月`
+    : viewMode === 'month'
+      ? `${calendarDate.getFullYear()}年`
+      : `${yearPageStart}年 - ${yearPageStart + 11}年`
+
   return (
     <div className={mergedClassName} style={style} role="dialog" aria-label="跳转日期">
       <div className="calendar-nav">
         <button
           className="nav-btn"
-          onClick={() => updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))}
+          onClick={handlePrev}
           aria-label="上一月"
         >
           <ChevronLeft size={16} />
         </button>
-        <span className="current-month">{calendarDate.getFullYear()}年{calendarDate.getMonth() + 1}月</span>
+        <button
+          className={`current-month ${viewMode === 'year' ? '' : 'clickable'}`.trim()}
+          onClick={handleTitleClick}
+          type="button"
+        >
+          {navTitle}
+        </button>
         <button
           className="nav-btn"
-          onClick={() => updateCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))}
+          onClick={handleNext}
           aria-label="下一月"
         >
           <ChevronRight size={16} />
@@ -154,36 +213,74 @@ const JumpToDatePopover: React.FC<JumpToDatePopoverProps> = ({
         )}
       </div>
 
-      <div className="calendar-grid">
-        <div className="weekdays">
-          {weekdays.map(day => (
-            <div key={day} className="weekday">{day}</div>
+      {viewMode === 'day' && (
+        <div className="calendar-grid">
+          <div className="weekdays">
+            {weekdays.map(day => (
+              <div key={day} className="weekday">{day}</div>
+            ))}
+          </div>
+          <div className="days">
+            {days.map((day, index) => {
+              if (day === null) return <div key={index} className="day-cell empty" />
+              const dateKey = toDateKey(day)
+              const hasMessageOnDay = hasMessage(day)
+              const count = Number(messageDateCounts?.[dateKey] || 0)
+              const showCount = count > 0
+              const showCountLoading = hasMessageOnDay && loadingDateCounts && !showCount
+              return (
+                <button
+                  key={index}
+                  className={getDayClassName(day)}
+                  onClick={() => handleDateClick(day)}
+                  disabled={hasLoadedMessageDates && !hasMessageOnDay}
+                  type="button"
+                >
+                  <span className="day-number">{day}</span>
+                  {showCount && <span className="day-count">{count}</span>}
+                  {showCountLoading && <Loader2 size={11} className="day-count-loading spin" />}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {viewMode === 'month' && (
+        <div className="month-grid">
+          {['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].map((name, monthIndex) => (
+            <button
+              key={name}
+              className={`month-cell ${monthIndex === calendarDate.getMonth() ? 'active' : ''}`}
+              onClick={() => {
+                updateCalendarDate(new Date(calendarDate.getFullYear(), monthIndex, 1))
+                setViewMode('day')
+              }}
+              type="button"
+            >
+              {name}
+            </button>
           ))}
         </div>
-        <div className="days">
-          {days.map((day, index) => {
-            if (day === null) return <div key={index} className="day-cell empty" />
-            const dateKey = toDateKey(day)
-            const hasMessageOnDay = hasMessage(day)
-            const count = Number(messageDateCounts?.[dateKey] || 0)
-            const showCount = count > 0
-            const showCountLoading = hasMessageOnDay && loadingDateCounts && !showCount
-            return (
-              <button
-                key={index}
-                className={getDayClassName(day)}
-                onClick={() => handleDateClick(day)}
-                disabled={hasLoadedMessageDates && !hasMessageOnDay}
-                type="button"
-              >
-                <span className="day-number">{day}</span>
-                {showCount && <span className="day-count">{count}</span>}
-                {showCountLoading && <Loader2 size={11} className="day-count-loading spin" />}
-              </button>
-            )
-          })}
+      )}
+
+      {viewMode === 'year' && (
+        <div className="year-grid">
+          {Array.from({ length: 12 }, (_, i) => yearPageStart + i).map((year) => (
+            <button
+              key={year}
+              className={`year-cell ${year === calendarDate.getFullYear() ? 'active' : ''}`}
+              onClick={() => {
+                updateCalendarDate(new Date(year, calendarDate.getMonth(), 1))
+                setViewMode('month')
+              }}
+              type="button"
+            >
+              {year}年
+            </button>
+          ))}
         </div>
-      </div>
+      )}
     </div>
   )
 }