auto scroll

This commit is contained in:
Julian Freeman
2026-04-03 19:22:56 -04:00
parent 136a5c186c
commit 2a940534f2

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'; import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
import { import {
Plus, Search, Trash2, Send, User, Type, ChevronDown, Check, Plus, Search, Trash2, Send, User, Type, ChevronDown, Check,
MessageSquare, Loader2, Copy, MessageSquare, Loader2, Copy,
@@ -51,6 +51,25 @@ const activeSession = computed(() =>
settings.chatSessions.find(s => s.id === settings.activeSessionId) || null 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(() => { const filteredSessions = computed(() => {
if (!searchQuery.value.trim()) return settings.chatSessions; if (!searchQuery.value.trim()) return settings.chatSessions;
const q = searchQuery.value.toLowerCase(); const q = searchQuery.value.toLowerCase();
@@ -77,16 +96,6 @@ const handleCreateSession = () => {
settings.activeSessionId = id; 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; let unlisten: (() => void) | null = null;
onMounted(async () => { onMounted(async () => {
unlisten = await listen<string>('translation-chunk', (event) => { unlisten = await listen<string>('translation-chunk', (event) => {