auto scroll
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
|
||||
import {
|
||||
Plus, Search, Trash2, Send, User, Type, ChevronDown, Check,
|
||||
MessageSquare, Loader2, Copy,
|
||||
@@ -51,6 +51,25 @@ const activeSession = computed(() =>
|
||||
settings.chatSessions.find(s => s.id === settings.activeSessionId) || null
|
||||
);
|
||||
|
||||
const scrollToBottom = async (smooth = true) => {
|
||||
await nextTick();
|
||||
if (messageContainer.value) {
|
||||
messageContainer.value.scrollTo({
|
||||
top: messageContainer.value.scrollHeight,
|
||||
behavior: smooth ? 'smooth' : 'auto'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Watch for session switch
|
||||
watch(() => settings.activeSessionId, async (newVal) => {
|
||||
if (newVal) {
|
||||
// 切换会话时,先立即滚动到底部(非平滑),然后再等 DOM 渲染完成后尝试平滑滚动确保到位
|
||||
await scrollToBottom(false);
|
||||
setTimeout(() => scrollToBottom(true), 100);
|
||||
}
|
||||
});
|
||||
|
||||
const filteredSessions = computed(() => {
|
||||
if (!searchQuery.value.trim()) return settings.chatSessions;
|
||||
const q = searchQuery.value.toLowerCase();
|
||||
@@ -77,16 +96,6 @@ const handleCreateSession = () => {
|
||||
settings.activeSessionId = id;
|
||||
};
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick();
|
||||
if (messageContainer.value) {
|
||||
messageContainer.value.scrollTo({
|
||||
top: messageContainer.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let unlisten: (() => void) | null = null;
|
||||
onMounted(async () => {
|
||||
unlisten = await listen<string>('translation-chunk', (event) => {
|
||||
|
||||
Reference in New Issue
Block a user