|
|
@@ -154,6 +154,8 @@
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
@click.stop="loadLatestMessages"
|
|
|
+ :disabled="isLoadingLatest"
|
|
|
+ :loading="isLoadingLatest"
|
|
|
icon="el-icon-refresh">
|
|
|
加载最新消息
|
|
|
</el-button>
|
|
|
@@ -407,6 +409,8 @@ export default {
|
|
|
isAutoScrollEnabled: true, // 是否启用自动滚动
|
|
|
autoScrollTimer: null, // 自动滚动定时器
|
|
|
showLoadLatestBtn: false, // 是否显示加载最新消息按钮
|
|
|
+ isLoadingLatest: false, // 是否正在加载最新消息
|
|
|
+ scrollDebounceTimer: null, // 滚动防抖定时器
|
|
|
msgParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 30,
|
|
|
@@ -479,10 +483,6 @@ export default {
|
|
|
// 滚动到底部
|
|
|
scrollToBottom(forceScroll = false) {
|
|
|
// 如果自动滚动被禁用且不是强制滚动,则不执行
|
|
|
- console.log("scrollToBottom")
|
|
|
- console.log(!this.isAutoScrollEnabled && !forceScroll)
|
|
|
- console.log(this.$refs.manageRightRef && this.$refs.manageRightRef.wrap)
|
|
|
- console.log(forceScroll || this.isAutoScrollEnabled)
|
|
|
if (!this.isAutoScrollEnabled && !forceScroll) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -503,6 +503,11 @@ export default {
|
|
|
},
|
|
|
// 加载最新消息
|
|
|
loadLatestMessages() {
|
|
|
+ // 如果正在加载,直接返回
|
|
|
+ if (this.isLoadingLatest) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.isLoadingLatest = true;
|
|
|
this.showLoadLatestBtn = false;
|
|
|
// 恢复自动滚动
|
|
|
this.isAutoScrollEnabled = true;
|
|
|
@@ -718,8 +723,6 @@ export default {
|
|
|
}
|
|
|
this.msgList.push(message)
|
|
|
// 如果启用自动滚动,自动滚动到底部
|
|
|
- console.log("handleWsMessage")
|
|
|
- console.log(this.isAutoScrollEnabled)
|
|
|
if (this.isAutoScrollEnabled) {
|
|
|
this.$nextTick(() => {
|
|
|
this.autoScrollTimer = setTimeout(() => {
|
|
|
@@ -1182,6 +1185,9 @@ export default {
|
|
|
// 所有消息加载完成后,根据自动滚动状态决定是否滚动
|
|
|
this.$nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
+ // 重置加载状态
|
|
|
+ this.isLoadingLatest = false;
|
|
|
+
|
|
|
if (this.isAutoScrollEnabled) {
|
|
|
// 如果启用自动滚动,强制滚动到底部并隐藏按钮
|
|
|
this.scrollToBottom(true);
|
|
|
@@ -1195,7 +1201,7 @@ export default {
|
|
|
const maxScrollTop = scrollHeight - clientHeight;
|
|
|
|
|
|
if (currentScrollTop < maxScrollTop - 50) {
|
|
|
- // this.showLoadLatestBtn = true;
|
|
|
+ this.showLoadLatestBtn = true;
|
|
|
} else {
|
|
|
this.showLoadLatestBtn = false;
|
|
|
}
|
|
|
@@ -1208,9 +1214,38 @@ export default {
|
|
|
|
|
|
// 添加滚动监听
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.manageRightRef.wrap.addEventListener("scroll", this.manageRightScroll)
|
|
|
+ if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
|
|
|
+ this.$refs.manageRightRef.wrap.addEventListener("scroll", this.manageRightScroll)
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
+ // 消息滚动监听(带防抖)
|
|
|
+ manageRightScroll() {
|
|
|
+ // 清除之前的防抖定时器
|
|
|
+ if (this.scrollDebounceTimer) {
|
|
|
+ clearTimeout(this.scrollDebounceTimer);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置防抖,300ms内只执行一次
|
|
|
+ this.scrollDebounceTimer = setTimeout(() => {
|
|
|
+ this.saveChatScrollPosition();
|
|
|
+
|
|
|
+ // 检查是否滚动到底部
|
|
|
+ if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
|
|
|
+ const wrap = this.$refs.manageRightRef.wrap;
|
|
|
+ const scrollHeight = wrap.scrollHeight;
|
|
|
+ const clientHeight = wrap.clientHeight;
|
|
|
+ const currentScrollTop = wrap.scrollTop;
|
|
|
+ const maxScrollTop = scrollHeight - clientHeight;
|
|
|
+
|
|
|
+ // 如果滚动到底部(距离底部小于50px),隐藏按钮并恢复自动滚动
|
|
|
+ if (currentScrollTop >= maxScrollTop - 50) {
|
|
|
+ this.showLoadLatestBtn = false;
|
|
|
+ this.isAutoScrollEnabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
loadUserTotals() {
|
|
|
if (!this.liveId) return;
|
|
|
// 假设后端提供一个接口返回总人数(如果没有,可通过首次加载全量数据后统计)
|
|
|
@@ -1427,6 +1462,13 @@ export default {
|
|
|
if (this.autoScrollTimer) {
|
|
|
clearTimeout(this.autoScrollTimer);
|
|
|
}
|
|
|
+ if (this.scrollDebounceTimer) {
|
|
|
+ clearTimeout(this.scrollDebounceTimer);
|
|
|
+ }
|
|
|
+ // 移除滚动监听器
|
|
|
+ if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
|
|
|
+ this.$refs.manageRightRef.wrap.removeEventListener("scroll", this.manageRightScroll);
|
|
|
+ }
|
|
|
},
|
|
|
// 使用 deactivated 和 activated 钩子替代 beforeDestroy 和 destroyed
|
|
|
deactivated() {
|