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-06 16:55:37 +08:00
parent 23a03d0ed3
commit 6bb7f37276
3 changed files with 178 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
pages/Chat/Chat.vue
View File

@@ -122,7 +122,7 @@
<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">
:upper-threshold="50" :scroll-with-animation="scrollAnimationEnabled && !isThinking" @scroll="onScroll" @scrolltoupper="onScrollToUpper">
<!-- 加载更多提示 -->
<view v-if="(ChatType === 0 && isAILoadingMore) || (ChatType === 1 && isFriendLoadingMore) || (ChatType === 2 && isGroupLoadingMore)" class="load-more-tip">
<text>加载更多消息...</text>
@@ -1687,13 +1687,14 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
const scrollToView = ref('')
const bottomToggle = ref(false)
const scrollAnimationEnabled = ref(true) // 控制 scroll-with-animation，加载更多时关闭避免可见滑动
// 加载状态和分页相关变量
const isLoadingMore = ref(false) // 是否正在加载更多
const isAILoadingMore = ref(false) // AI 会话是否正在加载更多（滚动到顶部触发）
const aiPageNumber = ref(0) // AI 会话当前服务端页码（0-based）
const hasMoreAIMessages = ref(true) // AI 会话是否还有更多消息可加载
const currentPage = ref(1) // 当前页码（如果后端支持分页）
const pageSize = 200;
const pageSize = 20;
// 好友消息分页
const isFriendLoadingMore = ref(false) // 好友会话是否正在加载更多
@@ -1819,7 +1820,10 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
// 定位滚动：原本第一条消息（old index 0）现在在 index = olderMessages.length 处
await nextTick()
scrollAnimationEnabled.value = false // 关闭动画，无感定位
scrollToView.value = 'msg-' + olderMessages.length
await nextTick()
scrollAnimationEnabled.value = true
} else {
// 只有 API 返回空时才确认没有更多
hasMoreAIMessages.value = false
@@ -1845,7 +1849,10 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
allmessages.value = [...olderMessages, ...allmessages.value]
// 定位滚动
await nextTick()
scrollAnimationEnabled.value = false
scrollToView.value = 'msg-' + olderMessages.length
await nextTick()
scrollAnimationEnabled.value = true
} else {
hasMoreFriendMessages.value = false
}
@@ -1870,7 +1877,10 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
allmessages.value = [...olderMessages, ...allmessages.value]
// 定位滚动
await nextTick()
scrollAnimationEnabled.value = false
scrollToView.value = 'msg-' + olderMessages.length
await nextTick()
scrollAnimationEnabled.value = true
} else {
hasMoreGroupMessages.value = false
}
@@ -2032,43 +2042,117 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
<!-- v-html 渲染的 markdown 内容无法被 scoped 样式命中，需非 scoped 样式块 -->
<style lang="scss">
// /* 气泡内容字体：确保 v-html 渲染的 markdown 内容使用系统字体栈 */
// .chat-content {
// // font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
// // 'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
// // font-weight: 400;
// font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
// 'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif !important;
// font-size: 16px !important;
// font-weight: 600 !important;
// line-height: 1.6;
// margin: 8rpx 0;
// h1 {
// font-size: 42rpx;
// line-height: 1.4;
// margin: 16rpx 0 10rpx;
// }
// h2 {
// font-size: 38rpx;
// line-height: 1.4;
// margin: 14rpx 0 8rpx;
// }
// h3 {
// font-size: 36rpx;
// line-height: 1.4;
// margin: 12rpx 0 8rpx;
// }
// h4,
// h5,
// h6 {
// font-size: 34rpx;
// line-height: 1.5;
// margin: 10rpx 0 6rpx;
// }
// /* 普通正文 */
// p,
// text,
// span {
// font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
// 'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif !important;
// font-size: 38rpx !important;
// font-weight: 400 !important;
// line-height: 1.6;
// margin: 8rpx 0;
// }
// /* 粗体和斜体样式 */
// strong,
// b {
// font-weight: 600 !important;
// }
// em,
// i {
// font-style: italic !important;
// }
/* 气泡内容字体：确保 v-html 渲染的 markdown 内容使用系统字体栈 */
.chat-content {
// font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
// 'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
// font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.6;
margin: 8rpx 0;
font-size: 30rpx !important;
line-height: 48rpx !important;
margin: 8rpx 0 !important;
h1 {
font-size: 42rpx;
line-height: 1.4;
margin: 16rpx 0 10rpx;
font-size: 34rpx !important;
font-weight: 600 !important;
line-height: 56rpx !important;
margin: 22rpx 0 14rpx !important;
}
h2 {
font-size: 38rpx;
line-height: 1.4;
margin: 14rpx 0 8rpx;
font-size: 32rpx !important;
font-weight: 600 !important;
line-height: 52rpx !important;
margin: 18rpx 0 10rpx !important;
}
h3 {
font-size: 36rpx;
line-height: 1.4;
margin: 12rpx 0 8rpx;
font-size: 30rpx !important;
font-weight: 600 !important;
line-height: 48rpx !important;
margin: 14rpx 0 6rpx !important;
}
h4 {
font-size: 28rpx !important;
font-weight: 600 !important;
line-height: 48rpx !important;
margin: 14rpx 0 6rpx !important;
}
h5 {
font-size: 26rpx !important;
font-weight: 600 !important;
line-height: 44rpx !important;
margin: 10rpx 0 4rpx !important;
}
h4,
h5,
h6 {
font-size: 34rpx;
line-height: 1.5;
margin: 10rpx 0 6rpx;
font-size: 24rpx !important;
font-weight: 600 !important;
line-height: 40rpx !important;
margin: 10rpx 0 4rpx !important;
}
/* 普通正文 */
@@ -2077,10 +2161,9 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
span {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'MiSans',
'Source Han Sans CN', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif !important;
font-size: 38rpx !important;
font-weight: 400 !important;
line-height: 1.6;
margin: 8rpx 0;
font-size: 30rpx !important;
line-height: 48rpx !important;
margin: 8rpx 0 !important;
}
/* 粗体和斜体样式 */
@@ -2094,6 +2177,9 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
font-style: italic !important;
}
/* 气泡内的内联链接（替代 <a> 标签，点击由 JS 拦截处理） */
.chat-inline-link {
color: #3b86ff !important;

34
unpackage/dist/dev/app-plus/app-service.js vendored
View File

@@ -5800,7 +5800,7 @@ This will fail in production.`);
}
});
}
const pageSize$1 = 200;
const pageSize$1 = 20;
const groupSize = 100;
const _sfc_main$a = {
__name: "Chat",
@@ -6895,6 +6895,7 @@ This will fail in production.`);
const allmessages = vue.ref([]);
const scrollToView = vue.ref("");
const bottomToggle = vue.ref(false);
const scrollAnimationEnabled = vue.ref(true);
const isLoadingMore = vue.ref(false);
const isAILoadingMore = vue.ref(false);
const aiPageNumber = vue.ref(0);
@@ -6947,12 +6948,12 @@ This will fail in production.`);
hasMoreGroupMessages.value = true;
const rawMessages = await getGroupMessages(currentSessionId.value, pageSize$1, 0) || [];
allmessages.value = rawMessages;
formatAppLog("log", "at pages/Chat/Chat.vue:1760", "群聊消息：", allmessages.value);
formatAppLog("log", "at pages/Chat/Chat.vue:1761", "群聊消息：", allmessages.value);
const memberList = await getGroupMemberList(currentSessionId.value);
formatAppLog("log", "at pages/Chat/Chat.vue:1763", "获取到的群成员列表：", memberList);
formatAppLog("log", "at pages/Chat/Chat.vue:1764", "获取到的群成员列表：", memberList);
if (memberList && memberList.length) {
groupMemberList.value = await takeGroupMemberAvatar(memberList);
formatAppLog("log", "at pages/Chat/Chat.vue:1766", "群成员列表（带头像）：", groupMemberList.value);
formatAppLog("log", "at pages/Chat/Chat.vue:1767", "群成员列表（带头像）：", groupMemberList.value);
} else {
groupMemberList.value = [];
}
@@ -6986,12 +6987,15 @@ This will fail in production.`);
aiPageNumber.value = nextPage;
allmessages.value = [...olderMessages, ...allmessages.value];
await vue.nextTick();
scrollAnimationEnabled.value = false;
scrollToView.value = "msg-" + olderMessages.length;
await vue.nextTick();
scrollAnimationEnabled.value = true;
} else {
hasMoreAIMessages.value = false;
}
} catch (e2) {
formatAppLog("error", "at pages/Chat/Chat.vue:1828", "加载更多消息失败:", e2);
formatAppLog("error", "at pages/Chat/Chat.vue:1832", "加载更多消息失败:", e2);
uni.showToast({ title: "加载更多失败", icon: "none" });
} finally {
isAILoadingMore.value = false;
@@ -7008,12 +7012,15 @@ This will fail in production.`);
friendPageNumber.value = nextPage;
allmessages.value = [...olderMessages, ...allmessages.value];
await vue.nextTick();
scrollAnimationEnabled.value = false;
scrollToView.value = "msg-" + olderMessages.length;
await vue.nextTick();
scrollAnimationEnabled.value = true;
} else {
hasMoreFriendMessages.value = false;
}
} catch (e2) {
formatAppLog("error", "at pages/Chat/Chat.vue:1853", "加载更多好友消息失败:", e2);
formatAppLog("error", "at pages/Chat/Chat.vue:1860", "加载更多好友消息失败:", e2);
uni.showToast({ title: "加载更多失败", icon: "none" });
} finally {
isFriendLoadingMore.value = false;
@@ -7030,12 +7037,15 @@ This will fail in production.`);
groupPageNumber.value = nextPage;
allmessages.value = [...olderMessages, ...allmessages.value];
await vue.nextTick();
scrollAnimationEnabled.value = false;
scrollToView.value = "msg-" + olderMessages.length;
await vue.nextTick();
scrollAnimationEnabled.value = true;
} else {
hasMoreGroupMessages.value = false;
}
} catch (e2) {
formatAppLog("error", "at pages/Chat/Chat.vue:1878", "加载更多群聊消息失败:", e2);
formatAppLog("error", "at pages/Chat/Chat.vue:1888", "加载更多群聊消息失败:", e2);
uni.showToast({ title: "加载更多失败", icon: "none" });
} finally {
isGroupLoadingMore.value = false;
@@ -7051,9 +7061,9 @@ This will fail in production.`);
}
};
vue.watch(() => friendSocketStore.MessageReceived, (newId) => {
formatAppLog("log", "at pages/Chat/Chat.vue:1899", "收到了好友消息");
formatAppLog("log", "at pages/Chat/Chat.vue:1909", "收到了好友消息");
if (newId) {
formatAppLog("log", "at pages/Chat/Chat.vue:1901", "ChatType:", ChatType.value);
formatAppLog("log", "at pages/Chat/Chat.vue:1911", "ChatType:", ChatType.value);
switch (ChatType.value) {
case 0:
takeConversationMessages();
@@ -7068,7 +7078,7 @@ This will fail in production.`);
friendSocketStore.MessageReceived = false;
break;
default:
formatAppLog("log", "at pages/Chat/Chat.vue:1917", "default 分支");
formatAppLog("log", "at pages/Chat/Chat.vue:1927", "default 分支");
friendSocketStore.MessageReceived = false;
break;
}
@@ -7162,7 +7172,7 @@ This will fail in production.`);
return downloadToastTimer;
}, set downloadToastTimer(v) {
downloadToastTimer = v;
}, showDownloadToast, hideDownloadToast, openLink, downloadAndHandle, sendMessage, sendFriendMessage, sendGroupMessage, sendAIMessage, stopConversation, textMessage, UserConversations, currentSessionId, userToken, UserId, UserAvatar, UserData, takeUserInfo, takeUserConversations, FriendInfoList, takeFriendList, takeTalkUserAvatar, takeUserAvatar, GroupList, takeGroupList, groupMemberList, takeGroupMemberAvatar, getGroupMemberAvatarById, allmessages, scrollToView, bottomToggle, isLoadingMore, isAILoadingMore, aiPageNumber, hasMoreAIMessages, currentPage, pageSize: pageSize$1, isFriendLoadingMore, friendPageNumber, hasMoreFriendMessages, isGroupLoadingMore, groupPageNumber, hasMoreGroupMessages, groupSize, currentMessages, takeConversationMessages, takeFriendMessages, takeGroupMessages, onScrollToUpper, loadMoreAIMessages, loadMoreFriendMessages, loadMoreGroupMessages, onScroll, scrollToBottom, computed: vue.computed, getCurrentInstance: vue.getCurrentInstance, nextTick: vue.nextTick, onMounted: vue.onMounted, ref: vue.ref, watch: vue.watch, get onLoad() {
}, showDownloadToast, hideDownloadToast, openLink, downloadAndHandle, sendMessage, sendFriendMessage, sendGroupMessage, sendAIMessage, stopConversation, textMessage, UserConversations, currentSessionId, userToken, UserId, UserAvatar, UserData, takeUserInfo, takeUserConversations, FriendInfoList, takeFriendList, takeTalkUserAvatar, takeUserAvatar, GroupList, takeGroupList, groupMemberList, takeGroupMemberAvatar, getGroupMemberAvatarById, allmessages, scrollToView, bottomToggle, scrollAnimationEnabled, isLoadingMore, isAILoadingMore, aiPageNumber, hasMoreAIMessages, currentPage, pageSize: pageSize$1, isFriendLoadingMore, friendPageNumber, hasMoreFriendMessages, isGroupLoadingMore, groupPageNumber, hasMoreGroupMessages, groupSize, currentMessages, takeConversationMessages, takeFriendMessages, takeGroupMessages, onScrollToUpper, loadMoreAIMessages, loadMoreFriendMessages, loadMoreGroupMessages, onScroll, scrollToBottom, computed: vue.computed, getCurrentInstance: vue.getCurrentInstance, nextTick: vue.nextTick, onMounted: vue.onMounted, ref: vue.ref, watch: vue.watch, get onLoad() {
return onLoad;
}, get onShow() {
return onShow;
@@ -7492,7 +7502,7 @@ This will fail in production.`);
"scroll-y": "",
"scroll-into-view": $setup.scrollToView,
"upper-threshold": 50,
"scroll-with-animation": !$setup.isThinking,
"scroll-with-animation": $setup.scrollAnimationEnabled && !$setup.isThinking,
onScroll: $setup.onScroll,
onScrolltoupper: $setup.onScrollToUpper
}, [

56
unpackage/dist/dev/app-plus/pages/Chat/Chat.css vendored
View File

@@ -1877,45 +1877,57 @@ to { opacity: 1; transform: translateY(0);
/* 气泡内容字体：确保 v-html 渲染的 markdown 内容使用系统字体栈 */
.chat-content {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans", "MiSans", "Source Han Sans CN", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.6;
margin: 0.25rem 0;
font-size: 0.9375rem !important;
line-height: 1.5rem !important;
margin: 0.25rem 0 !important;
/* 普通正文 */
/* 粗体和斜体样式 */
/* 气泡内的内联链接（替代 <a> 标签，点击由 JS 拦截处理） */
/* 可下载文件链接 → 按钮卡片样式 */
}
.chat-content h1 {
font-size: 1.3125rem;
line-height: 1.4;
margin: 0.5rem 0 0.3125rem;
font-size: 1.0625rem !important;
font-weight: 600 !important;
line-height: 1.75rem !important;
margin: 0.6875rem 0 0.4375rem !important;
}
.chat-content h2 {
font-size: 1.1875rem;
line-height: 1.4;
margin: 0.4375rem 0 0.25rem;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.625rem !important;
margin: 0.5625rem 0 0.3125rem !important;
}
.chat-content h3 {
font-size: 1.125rem;
line-height: 1.4;
margin: 0.375rem 0 0.25rem;
font-size: 0.9375rem !important;
font-weight: 600 !important;
line-height: 1.5rem !important;
margin: 0.4375rem 0 0.1875rem !important;
}
.chat-content h4 {
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 1.5rem !important;
margin: 0.4375rem 0 0.1875rem !important;
}
.chat-content h5 {
font-size: 0.8125rem !important;
font-weight: 600 !important;
line-height: 1.375rem !important;
margin: 0.3125rem 0 0.125rem !important;
}
.chat-content h4,
.chat-content h5,
.chat-content h6 {
font-size: 1.0625rem;
line-height: 1.5;
margin: 0.3125rem 0 0.1875rem;
font-size: 0.75rem !important;
font-weight: 600 !important;
line-height: 1.25rem !important;
margin: 0.3125rem 0 0.125rem !important;
}
.chat-content p,
.chat-content uni-text,
.chat-content span {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans", "MiSans", "Source Han Sans CN", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif !important;
font-size: 1.1875rem !important;
font-weight: 400 !important;
line-height: 1.6;
margin: 0.25rem 0;
font-size: 0.9375rem !important;
line-height: 1.5rem !important;
margin: 0.25rem 0 !important;
}
.chat-content strong,
.chat-content b {