更友好的跳转日期 #256；修复聊天记录显示不完整 #254；修复聊天 tab 对话页面“向下滚动查看更新消息”失效 #253

2026-03-24 23:06:51 +00:00 · 2026-02-15 11:44:23 +08:00
parent 4f0af3d0cb
commit 6394384be0
10 changed files with 256 additions and 19 deletions
--- a/src/components/JumpToDateDialog.scss
+++ b/src/components/JumpToDateDialog.scss
@@ -100,6 +100,33 @@
 }

 .calendar-grid {
+    position: relative;
+
+    &.loading {
+
+        .weekdays,
+        .days {
+            pointer-events: none;
+        }
+    }
+
+    .calendar-loading {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        color: var(--text-secondary);
+        font-size: 13px;
+
+        .spin {
+            color: var(--primary);
+            animation: spin 1s linear infinite;
+        }
+    }
+
    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
@@ -129,12 +156,13 @@
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
+            position: relative;

            &.empty {
                cursor: default;
            }

-            &:not(.empty):hover {
+            &:not(.empty):not(.no-message):hover {
                background: var(--bg-hover);
            }

@@ -149,10 +177,43 @@
                font-weight: 600;
                background: var(--primary-light);
            }
+
+            // 无消息的日期 - 灰显且不可点击
+            &.no-message {
+                opacity: 0.3;
+                cursor: default;
+                pointer-events: none;
+            }
+
+            // 有消息的日期指示器小圆点
+            .message-dot {
+                position: absolute;
+                bottom: 3px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 4px;
+                height: 4px;
+                border-radius: 50%;
+                background: var(--primary);
+            }
+
+            &.selected .message-dot {
+                background: rgba(255, 255, 255, 0.7);
+            }
        }
    }
 }

+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .quick-options {
    display: flex;
    gap: 8px;
--- a/src/components/JumpToDateDialog.tsx
+++ b/src/components/JumpToDateDialog.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { X, ChevronLeft, ChevronRight, Calendar as CalendarIcon } from 'lucide-react'
+import React, { useState, useMemo } from 'react'
+import { X, ChevronLeft, ChevronRight, Calendar as CalendarIcon, Loader2 } from 'lucide-react'
 import './JumpToDateDialog.scss'

 interface JumpToDateDialogProps {
@@ -7,13 +7,19 @@ interface JumpToDateDialogProps {
    onClose: () => void
    onSelect: (date: Date) => void
    currentDate?: Date
+    /** 有消息的日期集合，格式为 YYYY-MM-DD */
+    messageDates?: Set<string>
+    /** 是否正在加载消息日期 */
+    loadingDates?: boolean
 }

 const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
    isOpen,
    onClose,
    onSelect,
-    currentDate = new Date()
+    currentDate = new Date(),
+    messageDates,
+    loadingDates = false
 }) => {
    const isValidDate = (d: any) => d instanceof Date && !isNaN(d.getTime())
    const [calendarDate, setCalendarDate] = useState(isValidDate(currentDate) ? new Date(currentDate) : new Date())
@@ -49,7 +55,20 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
        return days
    }

+    /**
+     * 判断某天是否有消息
+     */
+    const hasMessage = (day: number): boolean => {
+        if (!messageDates || messageDates.size === 0) return true // 未加载时默认全部可点击
+        const year = calendarDate.getFullYear()
+        const month = calendarDate.getMonth() + 1
+        const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+        return messageDates.has(dateStr)
+    }
+
    const handleDateClick = (day: number) => {
+        // 如果已加载日期数据且该日期无消息，则不可点击
+        if (messageDates && messageDates.size > 0 && !hasMessage(day)) return
        const newDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), day)
        setSelectedDate(newDate)
    }
@@ -72,6 +91,28 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
            calendarDate.getFullYear() === selectedDate.getFullYear()
    }

+    /**
+     * 获取某天的 CSS 类名
+     */
+    const getDayClassName = (day: number | null): string => {
+        if (day === null) return 'day-cell empty'
+
+        const classes = ['day-cell']
+        if (isSelected(day)) classes.push('selected')
+        if (isToday(day)) classes.push('today')
+
+        // 仅在已加载消息日期数据时区分有/无消息
+        if (messageDates && messageDates.size > 0) {
+            if (hasMessage(day)) {
+                classes.push('has-message')
+            } else {
+                classes.push('no-message')
+            }
+        }
+
+        return classes.join(' ')
+    }
+
    const weekdays = ['日', '一', '二', '三', '四', '五', '六']
    const days = generateCalendar()

@@ -107,18 +148,28 @@ const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
                        </button>
                    </div>

-                    <div className="calendar-grid">
-                        <div className="weekdays">
+                    <div className={`calendar-grid ${loadingDates ? 'loading' : ''}`}>
+                        {loadingDates && (
+                            <div className="calendar-loading">
+                                <Loader2 size={20} className="spin" />
+                                <span>正在加载...</span>
+                            </div>
+                        )}
+                        <div className="weekdays" style={{ visibility: loadingDates ? 'hidden' : 'visible' }}>
                            {weekdays.map(d => <div key={d} className="weekday">{d}</div>)}
                        </div>
-                        <div className="days">
+                        <div className="days" style={{ visibility: loadingDates ? 'hidden' : 'visible' }}>
                            {days.map((day, i) => (
                                <div
                                    key={i}
-                                    className={`day-cell ${day === null ? 'empty' : ''} ${day !== null && isSelected(day) ? 'selected' : ''} ${day !== null && isToday(day) ? 'today' : ''}`}
+                                    className={getDayClassName(day)}
+                                    style={{ visibility: loadingDates ? 'hidden' : 'visible' }}
                                    onClick={() => day !== null && handleDateClick(day)}
                                >
                                    {day}
+                                    {day !== null && messageDates && messageDates.size > 0 && hasMessage(day) && (
+                                        <span className="message-dot" />
+                                    )}
                                </div>
                            ))}
                        </div>
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -164,6 +164,9 @@ function ChatPage(_props: ChatPageProps) {
  const [jumpStartTime, setJumpStartTime] = useState(0)
  const [jumpEndTime, setJumpEndTime] = useState(0)
  const [showJumpDialog, setShowJumpDialog] = useState(false)
+  const [messageDates, setMessageDates] = useState<Set<string>>(new Set())
+  const [loadingDates, setLoadingDates] = useState(false)
+  const messageDatesCache = useRef<Map<string, Set<string>>>(new Map())
  const [myAvatarUrl, setMyAvatarUrl] = useState<string | undefined>(undefined)
  const [myWxid, setMyWxid] = useState<string | undefined>(undefined)
  const [showScrollToBottom, setShowScrollToBottom] = useState(false)
@@ -680,12 +683,32 @@ function ChatPage(_props: ChatPageProps) {



+  // 动态游标批量大小控制
+  const currentBatchSizeRef = useRef(50)
+
  // 加载消息
  const loadMessages = async (sessionId: string, offset = 0, startTime = 0, endTime = 0) => {
    const listEl = messageListRef.current
    const session = sessionMapRef.current.get(sessionId)
    const unreadCount = session?.unreadCount ?? 0
-    const messageLimit = offset === 0 && unreadCount > 99 ? 30 : 50
+
+    let messageLimit = 50
+
+    if (offset === 0) {
+      // 初始加载：重置批量大小
+      currentBatchSizeRef.current = 50
+      // 首屏优化：消息过多时限制数量
+      messageLimit = unreadCount > 99 ? 30 : 50
+    } else {
+      // 滚动加载：动态递增 (50 -> 100 -> 200)
+      if (currentBatchSizeRef.current < 100) {
+        currentBatchSizeRef.current = 100
+      } else {
+        currentBatchSizeRef.current = 200
+      }
+      messageLimit = currentBatchSizeRef.current
+    }
+

    if (offset === 0) {
      setLoadingMessages(true)
@@ -1523,7 +1546,31 @@ function ChatPage(_props: ChatPageProps) {
                </button>
                <button
                  className="icon-btn jump-to-time-btn"
-                  onClick={() => setShowJumpDialog(true)}
+                  onClick={async () => {
+                    setShowJumpDialog(true)
+                    if (!currentSessionId) return
+                    // 检查缓存
+                    const cached = messageDatesCache.current.get(currentSessionId)
+                    if (cached) {
+                      setMessageDates(cached)
+                      return
+                    }
+                    // 获取消息日期
+                    setMessageDates(new Set()) // 清除旧数据
+                    setLoadingDates(true)
+                    try {
+                      const result = await (window as any).electronAPI.chat.getMessageDates(currentSessionId)
+                      if (result?.success && result.dates) {
+                        const dateSet = new Set<string>(result.dates)
+                        setMessageDates(dateSet)
+                        messageDatesCache.current.set(currentSessionId, dateSet)
+                      }
+                    } catch (e) {
+                      console.error('获取消息日期失败:', e)
+                    } finally {
+                      setLoadingDates(false)
+                    }
+                  }}
                  title="跳转到指定时间"
                >
                  <Calendar size={18} />
@@ -1539,6 +1586,8 @@ function ChatPage(_props: ChatPageProps) {
                    setJumpEndTime(end)
                    loadMessages(currentSessionId, 0, 0, end)
                  }}
+                  messageDates={messageDates}
+                  loadingDates={loadingDates}
                />
                <button
                  className="icon-btn refresh-messages-btn"