feat: 去掉了打字机效果

This commit is contained in:
2025-10-30 19:39:47 +08:00
parent 2b9afb936e
commit 562ed98267
2 changed files with 39 additions and 122 deletions

View File

@@ -3,6 +3,7 @@
flex-direction: column; flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度 max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开 overflow-x: hidden; // ✅ 防止横向撑开
padding-bottom: 12px;
.chat-ai { .chat-ai {
margin: 6px 0; margin: 6px 0;

View File

@@ -153,7 +153,6 @@ import {
recentConversation, recentConversation,
} from "@/request/api/ConversationApi"; } from "@/request/api/ConversationApi";
import WebSocketManager from "@/utils/WebSocketManager"; import WebSocketManager from "@/utils/WebSocketManager";
import TypewriterManager from "@/utils/TypewriterManager";
import { IdUtils } from "@/utils"; import { IdUtils } from "@/utils";
import { checkToken } from "@/hooks/useGoLogin"; import { checkToken } from "@/hooks/useGoLogin";
import { useAppStore } from "@/store"; import { useAppStore } from "@/store";
@@ -199,8 +198,7 @@ let commonType = "";
let webSocketManager = null; let webSocketManager = null;
/// WebSocket 连接状态 /// WebSocket 连接状态
let webSocketConnectStatus = false; let webSocketConnectStatus = false;
// 打字机管理器
let typewriterManager = null;
// 当前会话的消息ID用于保持发送和终止的messageId一致 // 当前会话的消息ID用于保持发送和终止的messageId一致
let currentSessionMessageId = null; let currentSessionMessageId = null;
@@ -352,7 +350,6 @@ const initHandler = () => {
if (!appStore.hasToken) return; if (!appStore.hasToken) return;
loadRecentConversation(); loadRecentConversation();
///loadConversationMsgList(); ///loadConversationMsgList();
initTypewriterManager();
initWebSocket(); initWebSocket();
}; };
@@ -434,10 +431,6 @@ const initWebSocket = () => {
webSocketConnectStatus = false; webSocketConnectStatus = false;
// 停止当前会话 // 停止当前会话
isSessionActive.value = false; isSessionActive.value = false;
// 停止打字机效果
if (typewriterManager) {
typewriterManager.stopTypewriter();
}
}, },
// 错误回调 // 错误回调
@@ -482,32 +475,20 @@ const handleWebSocketMessage = (data) => {
data.content = String(data.content); data.content = String(data.content);
} }
// 处理content分片内容 // 直接拼接内容到AI消息
if (data.content) { if (data.content) {
// 使用打字机管理器添加内容 if (chatMsgList.value[aiMsgIndex].isLoading) {
if (typewriterManager) { chatMsgList.value[aiMsgIndex].msg = "";
typewriterManager.addContent(data.content);
} }
chatMsgList.value[aiMsgIndex].msg += data.content;
// 确保新内容到达时页面保持在底部 chatMsgList.value[aiMsgIndex].isLoading = false;
setTimeoutScrollToBottom(); nextTick(() => scrollToBottom());
} }
// 处理完成状态 // 处理完成状态
if (data.finish) { if (data.finish) {
// 等待打字机完成后处理其他数据
const waitForTypingComplete = () => {
const status = typewriterManager
? typewriterManager.getStatus()
: { isTyping: false };
if (status.isTyping) {
setTimeout(waitForTypingComplete, 50);
return;
}
const msg = chatMsgList.value[aiMsgIndex].msg; const msg = chatMsgList.value[aiMsgIndex].msg;
console.log("全量消息内容:", msg); if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
if (!msg || msg === "加载中" || msg.startsWith("加载中")) {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试"; chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
chatMsgList.value[aiMsgIndex].isLoading = false; chatMsgList.value[aiMsgIndex].isLoading = false;
if (data.toolCall) { if (data.toolCall) {
@@ -527,56 +508,11 @@ const handleWebSocketMessage = (data) => {
// 重置会话状态 // 重置会话状态
isSessionActive.value = false; isSessionActive.value = false;
};
waitForTypingComplete();
} }
}; };
// 初始化打字机管理器
const initTypewriterManager = () => {
if (typewriterManager) {
typewriterManager.destroy();
}
typewriterManager = new TypewriterManager({
typingSpeed: 10,
cursorText: "",
});
// 设置回调函数
typewriterManager.setCallbacks({
// 每个字符打字时的回调
onCharacterTyped: (displayedContent) => {
scrollToBottom();
},
// 内容更新时的回调
onContentUpdate: (content) => {
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
chatMsgList.value[aiMsgIndex].isLoading = false;
chatMsgList.value[aiMsgIndex].msg = content;
}
},
// 打字完成时的回调
onTypingComplete: (finalContent) => {
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
chatMsgList.value[aiMsgIndex].isLoading = false;
chatMsgList.value[aiMsgIndex].msg = finalContent;
}
// 打字完成后最后一次滚动到底部
setTimeoutScrollToBottom();
},
});
};
// 重置消息状态 // 重置消息状态
const resetMessageState = () => { const resetMessageState = () => {};
if (typewriterManager) {
typewriterManager.reset();
}
};
// 初始化数据 首次数据加载的时候 // 初始化数据 首次数据加载的时候
const initData = () => { const initData = () => {
@@ -692,40 +628,26 @@ const stopRequest = () => {
// 发送中断消息给服务器 (messageType=2) // 发送中断消息给服务器 (messageType=2)
sendWebSocketMessage(2, "stop_request", { silent: true }); sendWebSocketMessage(2, "stop_request", { silent: true });
// 停止打字机效果并保留当前内容 // 直接将AI消息状态设为停止
if (typewriterManager) {
// 获取当前已显示的内容
const currentStatus = typewriterManager.getStatus();
const currentDisplayedContent = currentStatus.displayedContent;
// 使用新的方法停止并保留当前内容
typewriterManager.stopAndKeepCurrent();
// 更新最后一条AI消息的状态
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
if ( if (
chatMsgList.value[aiMsgIndex] && chatMsgList.value[aiMsgIndex] &&
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI
) { ) {
chatMsgList.value[aiMsgIndex].isLoading = false; chatMsgList.value[aiMsgIndex].isLoading = false;
// 如果有已显示的内容,使用已显示的内容,否则显示停止消息
if ( if (
currentDisplayedContent && chatMsgList.value[aiMsgIndex].msg &&
currentDisplayedContent.trim() && chatMsgList.value[aiMsgIndex].msg.trim() &&
!currentDisplayedContent.startsWith("加载中") !chatMsgList.value[aiMsgIndex].msg.startsWith("加载中")
) { ) {
chatMsgList.value[aiMsgIndex].msg = currentDisplayedContent; // 保留已显示内容
} else { } else {
chatMsgList.value[aiMsgIndex].msg = "请求已停止"; chatMsgList.value[aiMsgIndex].msg = "请求已停止";
} }
} }
}
// 重置会话状态(但不重置消息状态,保留已显示内容) // 重置会话状态
isSessionActive.value = false; isSessionActive.value = false;
console.log("请求已停止,状态已重置");
setTimeoutScrollToBottom(); setTimeoutScrollToBottom();
}; };
@@ -748,12 +670,6 @@ const resetConfig = () => {
webSocketConnectStatus = false; webSocketConnectStatus = false;
} }
// 清理打字机管理器
if (typewriterManager) {
typewriterManager.destroy();
typewriterManager = null;
}
// 重置消息状态 // 重置消息状态
resetMessageState(); resetMessageState();