mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 07:28:37 +08:00
优化消息滚动逻辑
This commit is contained in:
@@ -113,9 +113,29 @@ async function openMessageDialog() {
|
|||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 滚动到底部
|
// 智能滚动到底部(只有用户在底部附近时才滚动)
|
||||||
function scrollMessageToEnd() {
|
function scrollMessageToEnd() {
|
||||||
// 使用更长的延迟确保DOM已更新
|
// 使用更长的延迟确保DOM已更新
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const cardText = document.querySelector('.v-dialog .v-card-text')
|
||||||
|
if (cardText) {
|
||||||
|
const { scrollTop, scrollHeight, clientHeight } = cardText
|
||||||
|
// 计算距离底部的距离
|
||||||
|
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
|
||||||
|
// 如果用户距离底部小于100px,认为用户在底部附近,执行自动滚动
|
||||||
|
if (distanceFromBottom <= 100) {
|
||||||
|
cardText.scrollTop = cardText.scrollHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
}
|
||||||
|
}, 500) // 增加延迟时间
|
||||||
|
}
|
||||||
|
|
||||||
|
// 强制滚动到底部(用于发送消息后)
|
||||||
|
function forceScrollToEnd() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
try {
|
try {
|
||||||
const cardText = document.querySelector('.v-dialog .v-card-text')
|
const cardText = document.querySelector('.v-dialog .v-card-text')
|
||||||
@@ -125,7 +145,7 @@ function scrollMessageToEnd() {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
}
|
}
|
||||||
}, 500) // 增加延迟时间
|
}, 500)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 拼接全部日志url
|
// 拼接全部日志url
|
||||||
@@ -141,7 +161,7 @@ async function sendMessage() {
|
|||||||
await api.post(`message/web?text=${user_message.value}`)
|
await api.post(`message/web?text=${user_message.value}`)
|
||||||
user_message.value = ''
|
user_message.value = ''
|
||||||
sendButtonDisabled.value = false
|
sendButtonDisabled.value = false
|
||||||
scrollMessageToEnd()
|
forceScrollToEnd() // 发送消息后强制滚动到底部
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
}
|
}
|
||||||
@@ -159,7 +179,7 @@ defineExpose({
|
|||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
scrollMessageToEnd()
|
forceScrollToEnd() // 初始化时强制滚动到底部
|
||||||
const shortcut = getQueryValue('shortcut')
|
const shortcut = getQueryValue('shortcut')
|
||||||
if (shortcut) {
|
if (shortcut) {
|
||||||
const found = shortcuts.find(item => item.dialog === shortcut)
|
const found = shortcuts.find(item => item.dialog === shortcut)
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ function startSSEMessager() {
|
|||||||
if (compareTime(object.date, lastTime.value) <= 0) return
|
if (compareTime(object.date, lastTime.value) <= 0) return
|
||||||
messages.value.push(object)
|
messages.value.push(object)
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
emit('scroll')
|
emit('scroll') // 新消息到达时触发智能滚动
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -70,7 +70,7 @@ async function loadMessages({ done }: { done: any }) {
|
|||||||
// 合并数据
|
// 合并数据
|
||||||
messages.value = [...currData.value, ...messages.value]
|
messages.value = [...currData.value, ...messages.value]
|
||||||
if (page.value === 1) {
|
if (page.value === 1) {
|
||||||
// 滚动到底部
|
// 首次加载时滚动到底部
|
||||||
emit('scroll')
|
emit('scroll')
|
||||||
}
|
}
|
||||||
// 页码+1
|
// 页码+1
|
||||||
@@ -97,7 +97,7 @@ function compareTime(time1: string, time2: string) {
|
|||||||
return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
|
return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图片加载完成
|
// 图片加载完成时触发智能滚动
|
||||||
function handleImageLoad() {
|
function handleImageLoad() {
|
||||||
emit('scroll')
|
emit('scroll')
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user