auto scroll
This commit is contained in:
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user