koishi-plugin-chat-patch 1.0.18 → 1.1.1

package/client/vue/chat-logic.ts

@@ -449,7 +449,7 @@ export function useChatLogic() {
                 isExpanded.value = !isExpanded.value
             }
 
-            const getPreviewText = () => {
+            const getPreviewText = (): { previews: string[]; messageCount: number } => {
                 if (!props.element.children || props.element.children.length === 0) {
                     return {
                         previews: [],
@@ -488,7 +488,7 @@ export function useChatLogic() {
                 }
             }
 
-            const renderForwardedMessage = (message: any, index: number) => {
+            const renderForwardedMessage = (message: any, index: number): any => {
                 const nickname = message.attrs?.nickname || '用户'
                 const userId = message.attrs?.userId || 'unknown'
 
@@ -551,7 +551,7 @@ export function useChatLogic() {
             }
         },
         setup(props) {
-            const renderElement = (element: MessageElement) => {
+            const renderElement = (element: MessageElement): any => {
                 switch (element.type) {
                     case 'text':
                         return h('span', { class: 'message-text-content' }, element.attrs.content || '')
@@ -614,7 +614,7 @@ export function useChatLogic() {
                     case 'p':
                         // 处理段落元素，递归渲染子元素
                         if (element.children && element.children.length > 0) {
-                            const childElements = element.children.map((child, index) =>
+                            const childElements: any[] = element.children.map((child, index) =>
                                 h(MessageElement, {
                                     key: index,
                                     element: child,
@@ -654,6 +654,14 @@ export function useChatLogic() {
     // 存储每个频道的真实消息数量
     const channelMessageCounts = ref<Record<string, number>>({})
 
+    // 存储每个频道的分页状态
+    const channelPagination = ref<Record<string, {
+        offset: number
+        hasMore: boolean
+        loading: boolean
+    }>>({})
+
+    // Config默认值，实际值将从后端获取
     const pluginConfig = ref<{
         maxMessagesPerChannel: number
         keepMessagesOnClear: number
@@ -663,12 +671,14 @@ export function useChatLogic() {
             exactMatch: boolean
         }>
         chatContainerHeight: number
+        clearIndexedDBOnStart: boolean
     }>({
         maxMessagesPerChannel: 1000,
         keepMessagesOnClear: 50,
         loggerinfo: false,
         blockedPlatforms: [],
-        chatContainerHeight: 80
+        chatContainerHeight: 80,
+        clearIndexedDBOnStart: true
     })
 
     // 图片缓存 - IndexedDB
@@ -682,6 +692,8 @@ export function useChatLogic() {
 
     // 内存中的URL缓存
     const imageBlobUrls = ref<Record<string, string>>({})
+    // 正在加载的图片URL锁，防止并发请求
+    const loadingImages = new Map<string, Promise<string | null>>()
 
     // 内存管理配置
     const MAX_MEMORY_USAGE = 100 * 1024 * 1024 // 100MB 最大内存使用量
@@ -736,6 +748,7 @@ export function useChatLogic() {
     const showScrollButton = ref<boolean>(false)
     const isUserScrolling = ref<boolean>(false)
     const isSending = ref<boolean>(false)
+    const isLoadingMore = ref<boolean>(false)
 
     // 拖拽相关状态
     const draggingChannel = ref<string>('')
@@ -1113,9 +1126,13 @@ export function useChatLogic() {
             mobileView.value = 'messages'
         }
 
-        // 先获取历史消息，然后再滚动到底部
+        // 清除该频道的分页状态
+        const channelKey = `${selectedBot.value}:${channelId}`
+        delete channelPagination.value[channelKey]
+
+        // 先获取历史消息（只加载最新的50条）
         if (selectedBot.value) {
-            await loadHistoryMessages(selectedBot.value, channelId)
+            await loadHistoryMessages(selectedBot.value, channelId, 50, 0)
         }
 
         nextTick(() => {
@@ -1366,6 +1383,59 @@ export function useChatLogic() {
                 // 滚动到底部时，重置滚动状态
                 isUserScrolling.value = false
             }
+
+            // 检查是否滚动到顶部，如果是则加载更多消息
+            if (scrollTop <= 10 && selectedBot.value && selectedChannel.value) {
+                loadMoreMessages()
+            }
+        }
+    }
+
+    // 加载更多消息的函数
+    async function loadMoreMessages() {
+        if (!selectedBot.value || !selectedChannel.value) return
+
+        const channelKey = `${selectedBot.value}:${selectedChannel.value}`
+
+        // 检查是否正在加载或没有更多消息
+        const pagination = channelPagination.value[channelKey]
+        if (isLoadingMore.value || (pagination && !pagination.hasMore)) return
+
+        // 更新加载状态
+        if (!channelPagination.value[channelKey]) {
+            channelPagination.value[channelKey] = {
+                offset: 0,
+                hasMore: true,
+                loading: false
+            }
+        }
+
+        // 设置为加载中状态
+        isLoadingMore.value = true
+        channelPagination.value[channelKey].loading = true
+
+        try {
+            // 获取当前offset
+            const currentOffset = pagination?.offset || 0
+
+            // 加载下一批消息（50条）
+            const result = await loadHistoryMessages(selectedBot.value, selectedChannel.value, 50, currentOffset)
+
+            if (result) {
+                // 更新分页状态已在loadHistoryMessages中处理
+            } else {
+                // 加载失败，重置加载状态
+                channelPagination.value[channelKey].loading = false
+            }
+        } catch (error) {
+            console.error('加载更多消息失败:', error)
+            // 加载失败，重置加载状态
+            if (channelPagination.value[channelKey]) {
+                channelPagination.value[channelKey].loading = false
+            }
+        } finally {
+            // 重置加载状态
+            isLoadingMore.value = false
         }
     }
 
@@ -2197,102 +2267,177 @@ export function useChatLogic() {
 
     // 图片缓存管理函数
     async function getCachedImageUrl(channelKey: string, originalUrl: string): Promise<string | null> {
+        // 检查是否正在加载中，如果是则等待加载完成
+        if (loadingImages.has(originalUrl)) {
+            return loadingImages.get(originalUrl) || null
+        }
+
         // 首先检查内存中的blob URL
         const existingBlobUrl = imageBlobUrls.value[originalUrl]
         if (existingBlobUrl) {
             return existingBlobUrl
         }
 
-        // 从IndexedDB获取
-        const cacheItem = await getImageFromDB(originalUrl)
-        if (!cacheItem) return null
+        // 使用立即执行的异步函数来处理加载过程
+        const loadingPromise = (async () => {
+            try {
+                // 再次检查内存中的blob URL（防止在创建Promise期间其他地方已经缓存了）
+                const cachedBlobUrl = imageBlobUrls.value[originalUrl]
+                if (cachedBlobUrl) {
+                    return cachedBlobUrl
+                }
+
+                // 从IndexedDB获取
+                const cacheItem = await getImageFromDB(originalUrl)
+                if (!cacheItem) {
+                    return null
+                }
 
-        // 检查内存使用情况
-        checkAndCleanupMemory()
+                // 检查内存使用情况
+                checkAndCleanupMemory()
 
-        // 创建blob URL并缓存到内存
-        const blobUrl = URL.createObjectURL(cacheItem.blob)
-        imageBlobUrls.value[originalUrl] = blobUrl
+                // 创建blob URL并缓存到内存
+                const blobUrl = URL.createObjectURL(cacheItem.blob)
+                imageBlobUrls.value[originalUrl] = blobUrl
 
-        // 更新内存使用量
-        updateMemoryUsage(estimateBlobSize(cacheItem.blob))
+                // 更新内存使用量
+                updateMemoryUsage(estimateBlobSize(cacheItem.blob))
 
-        // 更新访问时间
-        cacheItem.timestamp = Date.now()
-        await saveImageToDB(cacheItem)
+                // 更新访问时间
+                cacheItem.timestamp = Date.now()
+                await saveImageToDB(cacheItem)
 
-        return blobUrl
+                return blobUrl
+            } catch (error) {
+                console.error('获取缓存图片失败:', error)
+                return null
+            } finally {
+                // 加载完成后从loadingImages中移除
+                loadingImages.delete(originalUrl)
+            }
+        })()
+
+        // 立即添加到loadingImages中，防止并发请求
+        loadingImages.set(originalUrl, loadingPromise)
+
+        // 等待加载完成并返回结果
+        return loadingPromise
     }
 
     async function cacheImage(channelKey: string, originalUrl: string): Promise<string | null> {
-        try {
-            // 检查是否已经缓存
-            const cached = await getCachedImageUrl(channelKey, originalUrl)
-            if (cached) {
-                return cached
-            }
+        // 检查是否正在加载中，如果是则等待加载完成
+        if (loadingImages.has(originalUrl)) {
+            return loadingImages.get(originalUrl) || null
+        }
 
-            // 获取图片数据
-            const result = await (send as any)('fetch-image', { url: originalUrl })
+        // 首先检查内存中的blob URL
+        const existingBlobUrl = imageBlobUrls.value[originalUrl]
+        if (existingBlobUrl) {
+            return existingBlobUrl
+        }
 
-            if (!result.success) {
-                console.error('获取图片失败:', result.error)
-                return null
-            }
+        // 使用立即执行的异步函数来处理加载过程
+        const loadingPromise = (async () => {
+            try {
+                // 再次检查内存中的blob URL（防止在创建Promise期间其他地方已经缓存了）
+                const cachedBlobUrl = imageBlobUrls.value[originalUrl]
+                if (cachedBlobUrl) {
+                    return cachedBlobUrl
+                }
 
-            // 将base64转换为blob
-            const base64Data = result.base64
-            const contentType = result.contentType || 'image/jpeg'
+                // 从IndexedDB获取
+                const cachedItem = await getImageFromDB(originalUrl)
+                if (cachedItem) {
+                    // 检查内存使用情况
+                    checkAndCleanupMemory()
 
-            // 解码base64
-            const byteCharacters = atob(base64Data)
-            const byteNumbers = new Array(byteCharacters.length)
-            for (let i = 0; i < byteCharacters.length; i++) {
-                byteNumbers[i] = byteCharacters.charCodeAt(i)
-            }
-            const byteArray = new Uint8Array(byteNumbers)
+                    // 创建blob URL并缓存到内存
+                    const blobUrl = URL.createObjectURL(cachedItem.blob)
+                    imageBlobUrls.value[originalUrl] = blobUrl
 
-            // 保持原始MIME类型，特别是对于GIF
-            const blob = new Blob([byteArray], { type: contentType })
+                    // 更新内存使用量
+                    updateMemoryUsage(estimateBlobSize(cachedItem.blob))
 
-            // 检查blob大小
-            if (blob.size > MAX_IMAGE_SIZE) {
-                console.warn(`图片过大，跳过缓存: ${(blob.size / 1024 / 1024).toFixed(2)}MB`)
-                return null
-            }
+                    // 更新访问时间
+                    cachedItem.timestamp = Date.now()
+                    await saveImageToDB(cachedItem)
 
-            // 创建缓存项
-            const cacheItem: ImageCacheItem = {
-                url: originalUrl,
-                blob: blob,
-                timestamp: Date.now(),
-                size: blob.size,
-                channelKey: channelKey
-            }
+                    return blobUrl
+                }
 
-            // 保存到IndexedDB
-            const saved = await saveImageToDB(cacheItem)
-            if (!saved) {
-                console.error('保存图片到IndexedDB失败')
-                return null
-            }
+                // 获取图片数据
+                const result = await (send as any)('fetch-image', { url: originalUrl })
 
-            // 检查内存使用情况
-            checkAndCleanupMemory()
+                if (!result.success) {
+                    return null
+                }
 
-            // 创建blob URL并缓存到内存
-            const blobUrl = URL.createObjectURL(blob)
-            imageBlobUrls.value[originalUrl] = blobUrl
+                // 将base64转换为blob
+                const base64Data = result.base64
+                const contentType = result.contentType || 'image/jpeg'
 
-            // 更新内存使用量
-            updateMemoryUsage(estimateBlobSize(blob))
+                // 解码base64
+                const byteCharacters = atob(base64Data)
+                const byteNumbers = new Array(byteCharacters.length)
+                for (let i = 0; i < byteCharacters.length; i++) {
+                    byteNumbers[i] = byteCharacters.charCodeAt(i)
+                }
+                const byteArray = new Uint8Array(byteNumbers)
 
-            return blobUrl
+                // 保持原始MIME类型，特别是对于GIF
+                const blob = new Blob([byteArray], { type: contentType })
 
-        } catch (error) {
-            console.error('缓存图片失败:', error)
-            return null
-        }
+                // 检查blob大小
+                if (blob.size > MAX_IMAGE_SIZE) {
+                    return null
+                }
+
+                // 再次检查内存中是否已经存在（防止并发请求）
+                const concurrentBlobUrl = imageBlobUrls.value[originalUrl]
+                if (concurrentBlobUrl) {
+                    return concurrentBlobUrl
+                }
+
+                // 创建缓存项
+                const cacheItem: ImageCacheItem = {
+                    url: originalUrl,
+                    blob: blob,
+                    timestamp: Date.now(),
+                    size: blob.size,
+                    channelKey: channelKey
+                }
+
+                // 保存到IndexedDB
+                const saved = await saveImageToDB(cacheItem)
+                if (!saved) {
+                    return null
+                }
+
+                // 检查内存使用情况
+                checkAndCleanupMemory()
+
+                // 创建blob URL并缓存到内存
+                const blobUrl = URL.createObjectURL(blob)
+                imageBlobUrls.value[originalUrl] = blobUrl
+
+                // 更新内存使用量
+                updateMemoryUsage(estimateBlobSize(blob))
+
+                return blobUrl
+            } catch (error) {
+                console.error('缓存图片失败:', error)
+                return null
+            } finally {
+                // 加载完成后从loadingImages中移除
+                loadingImages.delete(originalUrl)
+            }
+        })()
+
+        // 立即添加到loadingImages中，防止并发请求
+        loadingImages.set(originalUrl, loadingPromise)
+
+        // 等待加载完成并返回结果
+        return loadingPromise
     }
 
     // 清理频道的所有图片缓存
@@ -2808,13 +2953,21 @@ export function useChatLogic() {
     }
 
     // 获取历史消息
-    async function loadHistoryMessages(botId: string, channelId: string) {
+    async function loadHistoryMessages(botId: string, channelId: string, limit?: number, offset?: number) {
         try {
 
-            const result = await (send as any)('get-history-messages', {
+            const requestData: any = {
                 selfId: botId,
                 channelId: channelId
-            })
+            }
+
+            // 如果提供了分页参数，则添加到请求中
+            if (limit !== undefined) {
+                requestData.limit = limit
+                requestData.offset = offset || 0
+            }
+
+            const result = await (send as any)('get-history-messages', requestData)
 
             if (result.success && result.messages) {
                 const channelKey = `${botId}:${channelId}`
@@ -2834,14 +2987,51 @@ export function useChatLogic() {
                     quote: msg.quote
                 }))
 
-                // 按时间戳排序
-                messages.sort((a, b) => a.timestamp - b.timestamp)
+                // 确保offset有默认值
+                const actualOffset = offset || 0
 
-                // 设置历史消息
-                chatData.value.messages[channelKey] = messages
+                // 如果是分页加载，需要合并到现有消息中
+                if (limit !== undefined) {
+                    // 按时间戳排序
+                    messages.sort((a, b) => a.timestamp - b.timestamp)
+
+                    // 如果是第一页（offset为0），则替换现有消息
+                    if (offset === 0) {
+                        chatData.value.messages[channelKey] = messages
+                        // 初始化分页状态
+                        channelPagination.value[channelKey] = {
+                            offset: messages.length,
+                            hasMore: messages.length >= limit && result.total > messages.length,
+                            loading: false
+                        }
+                    } else {
+                        // 否则是加载更多，需要合并到现有消息的开头（因为是历史消息）
+                        const existingMessages = chatData.value.messages[channelKey] || []
+                        chatData.value.messages[channelKey] = [...messages, ...existingMessages]
+                        // 更新分页状态
+                        const actualOffset = offset || 0
+                        channelPagination.value[channelKey] = {
+                            offset: actualOffset + messages.length,
+                            hasMore: messages.length >= limit && result.total > (actualOffset + messages.length),
+                            loading: false
+                        }
+                    }
+                } else {
+                    // 按时间戳排序
+                    messages.sort((a, b) => a.timestamp - b.timestamp)
+
+                    // 设置历史消息
+                    chatData.value.messages[channelKey] = messages
+                    // 初始化分页状态
+                    channelPagination.value[channelKey] = {
+                        offset: messages.length,
+                        hasMore: false, // 不分页时没有更多消息
+                        loading: false
+                    }
+                }
 
                 // 更新频道消息数量缓存
-                channelMessageCounts.value[channelKey] = messages.length
+                channelMessageCounts.value[channelKey] = result.total || messages.length
 
                 // 触发响应式更新
                 chatData.value = { ...chatData.value }
@@ -3012,6 +3202,20 @@ export function useChatLogic() {
         // 添加点击外部关闭菜单的监听器
         document.addEventListener('click', handleClickOutside)
 
+        // 首先加载插件配置
+        await loadPluginConfig()
+
+        // 检查是否需要清空 IndexedDB
+        if (pluginConfig.value.clearIndexedDBOnStart) {
+            console.log('启动时清空 IndexedDB 缓存...')
+            const clearResult = await clearAllIndexedDBData()
+            if (clearResult) {
+                console.log('IndexedDB 缓存已清空')
+            } else {
+                console.warn('清空 IndexedDB 缓存失败')
+            }
+        }
+
         // 初始化IndexedDB
         const dbInitialized = await initImageDB()
         if (!dbInitialized) {
@@ -3030,9 +3234,6 @@ export function useChatLogic() {
             }, 5 * 60 * 1000)
         }
 
-        // 首先加载插件配置
-        await loadPluginConfig()
-
         // 然后加载历史数据
         await loadChatData()
 
@@ -3120,6 +3321,7 @@ export function useChatLogic() {
         // 响应式数据
         chatData,
         channelMessageCounts,
+        channelPagination,
         pluginConfig,
         selectedBot,
         selectedChannel,
@@ -3140,6 +3342,7 @@ export function useChatLogic() {
         showScrollButton,
         isUserScrolling,
         isSending,
+        isLoadingMore,
         draggingChannel,
         dragStartPos,
         dragCurrentPos,
@@ -3204,11 +3407,13 @@ export function useChatLogic() {
         handleTouchMove,
         handleTouchEnd,
         handleInputFocus,
+        loadMoreMessages,
 
         // 图片缓存相关
         getCachedImageUrl,
         cacheImage,
         clearChannelImageCache,
+        clearAllIndexedDBData,
         getMemoryStats,
         getCacheStats,
 

package/client/vue/index.vue

@@ -66,6 +66,12 @@
       <div v-else class="message-content">
         <!-- 消息历史 -->
         <div class="message-history" ref="messageHistory">
+          <!-- 加载更多指示器 -->
+          <div v-if="isLoadingMore" class="loading-more-indicator">
+            <div class="loading-spinner"></div>
+            <span>加载更多消息中...</span>
+          </div>
+          
           <div v-for="message in currentMessages" :key="message.id"
             :class="['message-item', { 'bot-message': message.isBot }]">
             <div class="message-avatar">
@@ -245,6 +251,7 @@ const {
   showScrollButton,
   isUserScrolling,
   isSending,
+  isLoadingMore,
   draggingChannel,
   dragStartPos,
   dragCurrentPos,

package/client/vue/style.css

@@ -1918,3 +1918,27 @@ body.dragging-bubble-global {
         background-color: rgba(255, 255, 255, .7)
     }
 }
+
+.loading-more-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    color: #6c757d;
+    font-size: 14px;
+}
+
+.loading-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #2196f3;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 8px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}