YiLin/phone-app------test1-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

好友，群聊分页加载

Browse Source
This commit is contained in:
YiLin
2026-08-05 14:51:15 +08:00
parent e0d7f93c80
commit fb421cd021
4 changed files with 426 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/Chat/Chat.vue
View File

@@ -123,10 +123,10 @@
<view class="main-chat">
<scroll-view class="chat-messages" direction="vertical" scroll-y :scroll-into-view="scrollToView"
:upper-threshold="50" :scroll-with-animation="!isThinking" @scroll="onScroll" @scrolltoupper="onScrollToUpper">
<!-- 加载更多提示（AI 会话） -->
<view v-if="ChatType === 0 && isAILoadingMore" class="load-more-tip">
<text>加载更多消息...</text>
</view>
<!-- 加载更多提示 -->
<view v-if="(ChatType === 0 && isAILoadingMore) || (ChatType === 1 && isFriendLoadingMore) || (ChatType === 2 && isGroupLoadingMore)" class="load-more-tip">
<text>加载更多消息...</text>
</view>
<!-- 消息加载中弹窗（仅会话变化时显示） -->
<view v-if="isLoadingMessages" class="messages-loading-overlay">
<view class="messages-loading-card">
@@ -1694,6 +1694,17 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
const hasMoreAIMessages = ref(true) // AI 会话是否还有更多消息可加载
const currentPage = ref(1) // 当前页码（如果后端支持分页）
const pageSize = 200;
// 好友消息分页
const isFriendLoadingMore = ref(false) // 好友会话是否正在加载更多
const friendPageNumber = ref(1) // 好友消息当前页码（1-based）
const hasMoreFriendMessages = ref(true) // 好友会话是否还有更多消息
// 群聊消息分页
const isGroupLoadingMore = ref(false) // 群聊会话是否正在加载更多
const groupPageNumber = ref(1) // 群聊消息当前页码（1-based）
const hasMoreGroupMessages = ref(true) // 群聊会话是否还有更多消息
const groupSize = 100;
// 计算属性：自动根据 allmessages 和 currentPage 计算显示消息
const currentMessages = computed(() => {
// return allmessages.value.slice(-pageInfoNumber);
@@ -1725,7 +1736,10 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
}
const takeFriendMessages = async () => {
try {
allmessages.value = await getFriendMessages(currentSessionId.value) || [];
friendPageNumber.value = 1
hasMoreFriendMessages.value = true
const rawMessages = await getFriendMessages(currentSessionId.value, pageSize, 0) || [];
allmessages.value = rawMessages
// console.log("好友消息：", JSON.stringify(allmessages.value));
// 数据获取后执行滚动
scrollToBottom();
@@ -1740,7 +1754,10 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
}
const takeGroupMessages = async () => {
try {
allmessages.value = await getGroupMessages(currentSessionId.value) || [];
groupPageNumber.value = 1
hasMoreGroupMessages.value = true
const rawMessages = await getGroupMessages(currentSessionId.value, pageSize, 0) || [];
allmessages.value = rawMessages
console.log("群聊消息：", allmessages.value);
// 获取群成员列表并获取头像
const memberList = await getGroupMemberList(currentSessionId.value)
@@ -1778,10 +1795,14 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
// // currentMessages.value = allmessages.value.slice(-pageInfoNumber);
// }
// 滚动到顶部时加载更多 AI 消息
// 滚动到顶部时加载更多消息（根据 ChatType 分发）
const onScrollToUpper = async () => {
if (ChatType.value === 0) {
await loadMoreAIMessages()
} else if (ChatType.value === 1) {
await loadMoreFriendMessages()
} else if (ChatType.value === 2) {
await loadMoreGroupMessages()
}
}
@@ -1812,6 +1833,56 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
}
}
// 加载更多好友历史消息（上一页），并定位到原第一条消息
const loadMoreFriendMessages = async () => {
if (isFriendLoadingMore.value || !hasMoreFriendMessages.value || !currentSessionId.value) return
isFriendLoadingMore.value = true
try {
const nextPage = friendPageNumber.value + 1
const olderMessages = await getFriendMessages(currentSessionId.value, pageSize, nextPage)
if (olderMessages && olderMessages.length > 0) {
friendPageNumber.value = nextPage
allmessages.value = [...olderMessages, ...allmessages.value]
// 定位滚动
await nextTick()
scrollToView.value = 'msg-' + olderMessages.length
} else {
hasMoreFriendMessages.value = false
}
} catch (e) {
console.error('加载更多好友消息失败:', e)
uni.showToast({ title: '加载更多失败', icon: 'none' })
} finally {
isFriendLoadingMore.value = false
}
}
// 加载更多群聊历史消息（上一页），并定位到原第一条消息
const loadMoreGroupMessages = async () => {
if (isGroupLoadingMore.value || !hasMoreGroupMessages.value || !currentSessionId.value) return
isGroupLoadingMore.value = true
try {
const nextPage = groupPageNumber.value + 1
const olderMessages = await getGroupMessages(currentSessionId.value, pageSize, nextPage)
if (olderMessages && olderMessages.length > 0) {
groupPageNumber.value = nextPage
allmessages.value = [...olderMessages, ...allmessages.value]
// 定位滚动
await nextTick()
scrollToView.value = 'msg-' + olderMessages.length
} else {
hasMoreGroupMessages.value = false
}
} catch (e) {
console.error('加载更多群聊消息失败:', e)
uni.showToast({ title: '加载更多失败', icon: 'none' })
} finally {
isGroupLoadingMore.value = false
}
}
// 监听滚动
const onScroll = (e) => {}
// 滑动到底部

122
pages/text/text.vue
View File

@@ -66,7 +66,11 @@
</view>
<view class="main-chat">
<scroll-view class="chat-messages" direction="vertical" scroll-y :scroll-into-view="scrollToView"
:upper-threshold="0" :scroll-with-animation="true" @scroll="onScroll">
:upper-threshold="50" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper">
<!-- 加载更多提示 -->
<view v-if="(ChatType === 0 && isAILoadingMore) || (ChatType === 1 && isFriendLoadingMore) || (ChatType === 2 && isGroupLoadingMore)" class="load-more-tip">
<text>加载更多消息...</text>
</view>
<!-- 与AI的对话内容展示 -->
<template v-for="(message, index) in currentMessages" :key="index">
<view v-if="ChatType === 0 && message.role !== 'tool'" class="chat-message" :id="'msg-' + index"
@@ -1317,6 +1321,22 @@ import { openFile as openFileNative } from '@/utils/fileOpener.js'
// 加载状态和分页相关变量
const isLoadingMore = ref(false) // 是否正在加载更多
const currentPage = ref(1) // 当前页码（如果后端支持分页）
const pageSize = 200;
// AI 消息分页
const isAILoadingMore = ref(false)
const aiPageNumber = ref(0) // AI 会话当前服务端页码（0-based）
const hasMoreAIMessages = ref(true)
// 好友消息分页
const isFriendLoadingMore = ref(false)
const friendPageNumber = ref(1) // 好友消息当前页码（1-based）
const hasMoreFriendMessages = ref(true)
// 群聊消息分页
const isGroupLoadingMore = ref(false)
const groupPageNumber = ref(1) // 群聊消息当前页码（1-based）
const hasMoreGroupMessages = ref(true)
// 计算属性：自动根据 allmessages 和 currentPage 计算显示消息
const currentMessages = computed(() => {
// return allmessages.value.slice(-pageInfoNumber);
@@ -1327,9 +1347,11 @@ import { openFile as openFileNative } from '@/utils/fileOpener.js'
// 获取对话消息
const takeConversationMessages = async () => {
try {
allmessages.value = await getConversationMessages(userToken.value, currentSessionId.value) || [];
aiPageNumber.value = 0
hasMoreAIMessages.value = true
const rawMessages = await getConversationMessages(userToken.value, currentSessionId.value, pageSize, 0) || [];
allmessages.value = rawMessages
// console.log("获取到的所有消息：", JSON.stringify(allmessages.value) );
// currentMessages.value = allmessages.value.slice(-pageInfoNumber);
// 数据获取后执行滚动
scrollToBottom();
} catch (error) {
@@ -1341,7 +1363,10 @@ import { openFile as openFileNative } from '@/utils/fileOpener.js'
}
const takeFriendMessages = async () => {
try {
allmessages.value = await getFriendMessages(currentSessionId.value) || [];
friendPageNumber.value = 1
hasMoreFriendMessages.value = true
const rawMessages = await getFriendMessages(currentSessionId.value, 1) || [];
allmessages.value = rawMessages
// console.log("好友消息：", JSON.stringify(allmessages.value));
// 数据获取后执行滚动
scrollToBottom();
@@ -1354,7 +1379,10 @@ import { openFile as openFileNative } from '@/utils/fileOpener.js'
}
const takeGroupMessages = async () => {
try {
allmessages.value = await getGroupMessages(currentSessionId.value) || [];
groupPageNumber.value = 1
hasMoreGroupMessages.value = true
const rawMessages = await getGroupMessages(currentSessionId.value, 1) || [];
allmessages.value = rawMessages
console.log("群聊消息：", allmessages.value);
// 获取群成员列表并获取头像
const memberList = await getGroupMemberList(currentSessionId.value)
@@ -1394,6 +1422,90 @@ import { openFile as openFileNative } from '@/utils/fileOpener.js'
// 监听滚动
const onScroll = (e) => {}
// 滚动到顶部时加载更多消息（根据 ChatType 分发）
const onScrollToUpper = async () => {
if (ChatType.value === 0) {
await loadMoreAIMessages()
} else if (ChatType.value === 1) {
await loadMoreFriendMessages()
} else if (ChatType.value === 2) {
await loadMoreGroupMessages()
}
}
// 加载更多 AI 历史消息（上一页），并定位到原第一条消息
const loadMoreAIMessages = async () => {
if (isAILoadingMore.value || !hasMoreAIMessages.value || !currentSessionId.value) return
isAILoadingMore.value = true
try {
const nextPage = aiPageNumber.value + 1
const olderMessages = await getConversationMessages(userToken.value, currentSessionId.value, pageSize, nextPage)
if (olderMessages && olderMessages.length > 0) {
aiPageNumber.value = nextPage
allmessages.value = [...olderMessages, ...allmessages.value]
await nextTick()
scrollToView.value = 'msg-' + olderMessages.length
} else {
hasMoreAIMessages.value = false
}
} catch (e) {
console.error('加载更多AI消息失败:', e)
uni.showToast({ title: '加载更多失败', icon: 'none' })
} finally {
isAILoadingMore.value = false
}
}
// 加载更多好友历史消息（上一页），并定位到原第一条消息
const loadMoreFriendMessages = async () => {
if (isFriendLoadingMore.value || !hasMoreFriendMessages.value || !currentSessionId.value) return
isFriendLoadingMore.value = true
try {
const nextPage = friendPageNumber.value + 1
const olderMessages = await getFriendMessages(currentSessionId.value, nextPage)
if (olderMessages && olderMessages.length > 0) {
friendPageNumber.value = nextPage
allmessages.value = [...olderMessages, ...allmessages.value]
await nextTick()
scrollToView.value = 'msg-' + olderMessages.length
} else {
hasMoreFriendMessages.value = false
}
} catch (e) {
console.error('加载更多好友消息失败:', e)
uni.showToast({ title: '加载更多失败', icon: 'none' })
} finally {
isFriendLoadingMore.value = false
}
}
// 加载更多群聊历史消息（上一页），并定位到原第一条消息
const loadMoreGroupMessages = async () => {
if (isGroupLoadingMore.value || !hasMoreGroupMessages.value || !currentSessionId.value) return
isGroupLoadingMore.value = true
try {
const nextPage = groupPageNumber.value + 1
const olderMessages = await getGroupMessages(currentSessionId.value, nextPage)
if (olderMessages && olderMessages.length > 0) {
groupPageNumber.value = nextPage
allmessages.value = [...olderMessages, ...allmessages.value]
await nextTick()
scrollToView.value = 'msg-' + olderMessages.length
} else {
hasMoreGroupMessages.value = false
}
} catch (e) {
console.error('加载更多群聊消息失败:', e)
uni.showToast({ title: '加载更多失败', icon: 'none' })
} finally {
isGroupLoadingMore.value = false
}
}
// 滑动到底部
const scrollToBottom = async () => {
await nextTick();