zhusenlin/Yi.Admin
1
0
Fork 0
mirror of https://gitee.com/ccnetcore/Yi synced 2026-03-11 20:19:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 对话底部加载动画位置上移

Browse Source
This commit is contained in:
Gsh
2026-02-14 20:43:41 +08:00
parent 10d52c2b76
commit 993c0fa95d
1 changed files with 182 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
View File

@@ -2,20 +2,22 @@
<script setup lang="ts">
import type { AnyObject } from 'typescript-api-pro';
import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
import { Loading, Bottom } from '@element-plus/icons-vue';
import type { MessageItem as MessageItemType } from '@/composables/chat';
import type { UnifiedMessage } from '@/utils/apiFormatConverter';
import { Bottom, Loading } from '@element-plus/icons-vue';
import { ElIcon, ElMessage } from 'element-plus';
import { useHookFetch } from 'hook-fetch/vue';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { Sender } from 'vue-element-plus-x';
import { useRoute } from 'vue-router';
import { deleteMessages, unifiedSend } from '@/api';
import { useFilePaste } from '@/composables/chat';
import { ChatHeader, DeleteModeToolbar, MessageItem } from '@/pages/chat/components';
import { useChatStore, useUserStore } from '@/stores';
import { useFilesStore } from '@/stores/modules/files';
import { useModelStore } from '@/stores/modules/model';
import { useSessionStore } from '@/stores/modules/session';
import { convertToApiFormat, parseStreamChunk, type UnifiedMessage } from '@/utils/apiFormatConverter';
import { useFilePaste, type MessageItem as MessageItemType } from '@/composables/chat';
import { convertToApiFormat, parseStreamChunk } from '@/utils/apiFormatConverter';
import '@/styles/github-markdown.css';
import '@/styles/yixin-markdown.scss';
@@ -77,7 +79,7 @@ const { handlePaste } = useFilePaste({
});
return total;
},
addFiles: (files) => filesStore.setFilesList([...filesStore.filesList, ...files]),
addFiles: files => filesStore.setFilesList([...filesStore.filesList, ...files]),
});
// 创建统一发送请求的包装函数
@@ -162,14 +164,15 @@ function checkIfAtBottom() {
* 智能滚动到底部（仅在用户已在底部时滚动）
*/
function smartScrollToBottom(force = false) {
if (!scrollContainer.value) return;
if (!scrollContainer.value)
return;
// 强制滚动或用户已在底部时才滚动
if (force || isUserAtBottom.value) {
const targetScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight;
scrollContainer.value.scrollTo({
top: targetScroll,
behavior: 'smooth'
behavior: 'smooth',
});
isUserAtBottom.value = true;
}
@@ -242,8 +245,10 @@ function handleDataChunk(chunk: AnyObject) {
const thinkStart = parsed.content.includes('<think>');
const thinkEnd = parsed.content.includes('</think>');
if (thinkStart) isThinking = true;
if (thinkEnd) isThinking = false;
if (thinkStart)
isThinking = true;
if (thinkEnd)
isThinking = false;
if (isThinking) {
latest.thinkingStatus = 'thinking';
@@ -251,7 +256,8 @@ function handleDataChunk(chunk: AnyObject) {
latest.thinlCollapse = true;
latest.reasoning_content += parsed.content.replace('<think>', '').replace('</think>', '');
nextTick(() => smartScrollToBottom());
} else {
}
else {
latest.thinkingStatus = 'end';
latest.loading = false;
latest.content += parsed.content;
@@ -259,7 +265,8 @@ function handleDataChunk(chunk: AnyObject) {
nextTick(() => smartScrollToBottom());
}
}
} catch (err) {
}
catch (err) {
console.error('解析数据时出错:', err);
}
}
@@ -268,7 +275,8 @@ function handleDataChunk(chunk: AnyObject) {
* 发送消息并处理流式响应
*/
async function startSSE(chatContent: string) {
if (isSending.value) return;
if (isSending.value)
return;
// 检查是否有未上传完成的文件
const hasUnuploadedFiles = filesStore.filesList.some(f => !f.isUploaded);
@@ -315,13 +323,16 @@ async function startSSE(chatContent: string) {
modelId: modelStore.currentModelInfo.modelId ?? '',
sessionId,
})) {
console.log('111');
handleDataChunk(chunk.result as AnyObject);
}
} catch (err: any) {
}
catch (err: any) {
if (err.name !== 'AbortError') {
console.error('Fetch error:', err);
}
} finally {
}
finally {
finishSending();
}
}
@@ -350,7 +361,8 @@ function buildMessagesContent(imageFiles: any[], textFiles: any[]) {
fileContent += `<FILE_NAME>${fileItem.name}</FILE_NAME>\n`;
fileContent += `<FILE_CONTENT>\n${fileItem.fileContent}\n</FILE_CONTENT>\n`;
fileContent += `</ATTACHMENT_FILE>\n`;
if (idx < textFiles.length - 1) fileContent += '\n';
if (idx < textFiles.length - 1)
fileContent += '\n';
});
contentArray.push({ type: 'text', text: fileContent });
}
@@ -368,7 +380,8 @@ function buildMessagesContent(imageFiles: any[], textFiles: any[]) {
baseMessage.content = contentArray.length > 1 || imageFiles.length > 0 || textFiles.length > 0
? contentArray
: item.content;
} else {
}
else {
baseMessage.content = (item.role === 'ai' || item.role === 'assistant') && item.content.length > 10000
? `${item.content.substring(0, 10000)}...（内容过长，已省略）`
: item.content;
@@ -451,11 +464,13 @@ function exitDeleteMode() {
}
function toggleMessageSelection(item: MessageItemType) {
if (!item.id) return;
if (!item.id)
return;
const index = selectedMessageIds.value.indexOf(item.id);
if (index > -1) {
selectedMessageIds.value.splice(index, 1);
} else {
}
else {
selectedMessageIds.value.push(item.id);
}
}
@@ -475,7 +490,8 @@ async function confirmDelete() {
}
bubbleItems.value = bubbleItems.value.filter((item) => {
if (item.id === undefined) return true;
if (item.id === undefined)
return true;
return !savedIds.includes(item.id) && !tempIds.includes(item.id as number);
});
@@ -486,7 +502,8 @@ async function confirmDelete() {
ElMessage.success('删除成功');
exitDeleteMode();
} catch (error) {
}
catch (error) {
ElMessage.error('删除失败');
}
}
@@ -504,10 +521,12 @@ function cancelEdit() {
}
async function submitEditMessage(item: MessageItemType) {
if (isSending.value || !editingContent.value.trim()) return;
if (isSending.value || !editingContent.value.trim())
return;
const itemIndex = bubbleItems.value.findIndex(msg => msg.key === item.key);
if (itemIndex === -1) return;
if (itemIndex === -1)
return;
const messageId = item.id;
const newContent = editingContent.value.trim();
@@ -520,7 +539,8 @@ async function submitEditMessage(item: MessageItemType) {
bubbleItems.value = bubbleItems.value.slice(0, itemIndex);
await startSSE(newContent);
} catch (error) {
}
catch (error) {
ElMessage.error('编辑失败');
}
}
@@ -534,10 +554,12 @@ function copy(item: MessageItemType) {
}
async function regenerateMessage(item: MessageItemType) {
if (isSending.value) return;
if (isSending.value)
return;
const itemIndex = bubbleItems.value.findIndex(msg => msg.key === item.key);
if (itemIndex === -1) return;
if (itemIndex === -1)
return;
// 找到对应的用户消息
let targetUserMessageIndex = -1;
@@ -563,7 +585,8 @@ async function regenerateMessage(item: MessageItemType) {
bubbleItems.value = bubbleItems.value.slice(0, targetUserMessageIndex);
await startSSE(targetUserMessage.content || '');
} catch (error) {
}
catch (error) {
ElMessage.error('重新生成失败');
}
}
@@ -579,7 +602,8 @@ watch(
nextTick(() => {
if (val > 0) {
senderRef.value?.openHeader();
} else {
}
else {
senderRef.value?.closeHeader();
}
});
@@ -589,6 +613,23 @@ watch(
// 生命周期
onMounted(() => {
document.addEventListener('paste', handlePaste);
// 获取 BubbleList 内部的滚动容器
nextTick(() => {
if (bubbleListRef.value?.$el) {
// 尝试获取 BubbleList 内部的滚动容器
const innerContainer = bubbleListRef.value.$el.querySelector('[style*="overflow"]');
if (innerContainer) {
scrollContainer.value = innerContainer;
scrollContainer.value.addEventListener('scroll', handleScroll);
}
else {
// 如果找不到内部容器，使用 BubbleList 的根元素
scrollContainer.value = bubbleListRef.value.$el;
scrollContainer.value.addEventListener('scroll', handleScroll);
}
}
});
});
onUnmounted(() => {
@@ -597,6 +638,10 @@ onUnmounted(() => {
if (scrollUpdateTimer !== null) {
clearTimeout(scrollUpdateTimer);
}
// 移除滚动事件监听
if (scrollContainer.value) {
scrollContainer.value.removeEventListener('scroll', handleScroll);
}
});
</script>
@@ -616,33 +661,33 @@ onUnmounted(() => {
/>
<!-- 消息列表 -->
<div ref="scrollContainer" class="chat-with-id__messages-wrapper" @scroll="handleScroll">
<div class="chat-with-id__messages-wrapper">
<BubbleList
ref="bubbleListRef"
:list="bubbleItems"
max-height="calc(100vh - 240px)"
:class="{ 'delete-mode': isDeleteMode }"
>
<template #content="{ item }">
<MessageItem
:item="item"
:is-delete-mode="isDeleteMode"
:is-editing="editingMessageKey === item.key"
:edit-content="editingContent"
:is-sending="isSending"
:is-selected="item.id ? selectedMessageIds.includes(item.id) : false"
@toggle-selection="toggleMessageSelection"
@edit="startEditMessage"
@cancel-edit="cancelEdit"
@submit-edit="submitEditMessage"
@update:edit-content="editingContent = $event"
@copy="copy"
@regenerate="regenerateMessage"
@delete="enterDeleteMode"
@image-preview="handleImagePreview"
/>
</template>
</BubbleList>
<template #content="{ item }">
<MessageItem
:item="item"
:is-delete-mode="isDeleteMode"
:is-editing="editingMessageKey === item.key"
:edit-content="editingContent"
:is-sending="isSending"
:is-selected="item.id ? selectedMessageIds.includes(item.id) : false"
@toggle-selection="toggleMessageSelection"
@edit="startEditMessage"
@cancel-edit="cancelEdit"
@submit-edit="submitEditMessage"
@update:edit-content="editingContent = $event"
@copy="copy"
@regenerate="regenerateMessage"
@delete="enterDeleteMode"
@image-preview="handleImagePreview"
/>
</template>
</BubbleList>
<!-- 滚动到底部按钮 -->
<Transition name="scroll-btn-fade">
@@ -775,34 +820,7 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
// 平滑滚动
scroll-behavior: smooth;
// Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 3px;
transition: background 0.2s ease;
&:hover {
background: rgba(144, 147, 153, 0.5);
}
}
// Firefox 滚动条样式
scrollbar-width: thin;
scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
overflow: hidden; // 移除滚动，让 BubbleList 内部处理
}
// ==================== 滚动到底部按钮 ====================
@@ -847,11 +865,95 @@ onUnmounted(() => {
}
}
// 气泡列表基础样式覆盖
// 气泡列表基础样式覆盖 - 细滚动条一直显示
:deep(.el-bubble-list) {
padding-top: 0;
}
// ==================== 细滚动条样式 ====================
// 对所有可能的滚动容器应用细滚动条样式
:deep(*) {
// 匹配具有overflow样式的元素
&[style*="overflow"],
&[style*="overflow: auto"],
&[style*="overflow-y: auto"],
&[style*="overflow: scroll"],
&[style*="overflow-y: scroll"] {
// Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 3px;
transition: background 0.2s ease;
&:hover {
background: rgba(144, 147, 153, 0.5);
}
}
// Firefox 滚动条样式
scrollbar-width: thin;
scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
}
}
// 同时对 .el-bubble-list 的子元素应用滚动条样式
:deep(.el-bubble-list) {
// Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 3px;
transition: background 0.2s ease;
&:hover {
background: rgba(144, 147, 153, 0.5);
}
}
// Firefox 滚动条样式
scrollbar-width: thin;
scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
// 对所有子元素也应用滚动条样式
* {
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 3px;
transition: background 0.2s ease;
&:hover {
background: rgba(144, 147, 153, 0.5);
}
}
scrollbar-width: thin;
scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
}
}
:deep(.el-bubble) {
padding: 0;
width: 100% !important;
@@ -920,4 +1022,8 @@ onUnmounted(() => {
opacity: 0;
transform: translateY(10px);
}
// 对话列表底部三个点加载动画
:deep(.el-bubble-loading-wrap ){
height: 50px;
}
</style>