diff --git a/src/views/ai/chat/MessageLoading.vue b/src/views/ai/chat/MessageLoading.vue new file mode 100644 index 00000000..f3198cbd --- /dev/null +++ b/src/views/ai/chat/MessageLoading.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue index 844be9ab..a0cc5bc7 100644 --- a/src/views/ai/chat/index.vue +++ b/src/views/ai/chat/index.vue @@ -35,8 +35,9 @@
- - + + +
@@ -90,6 +91,7 @@ import Conversation from './Conversation.vue' import Message from './Message.vue' import ChatEmpty from './ChatEmpty.vue' +import MessageLoading from './MessageLoading.vue' import {ChatMessageApi, ChatMessageVO} from '@/api/ai/chat/message' import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation' import {useClipboard} from '@vueuse/core' @@ -112,6 +114,11 @@ const displayedText = ref(''); const textSpeed = ref(50); // Typing speed in milliseconds const textRoleRunning = ref(false); // Typing speed in milliseconds +// chat message 列表 +const list = ref([]) // 列表的数据 +const listLoading = ref(false) // 是否加载中 +const listLoadingTime = ref() // time定时器,如果加载速度很快,就不进入加载中 + // 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方) const messageRef = ref() const isComposing = ref(false) // 判断用户是否在输入 @@ -177,8 +184,6 @@ const textRoll = async () => { } }; -/** chat message 列表 */ -const list = ref([]) // 列表的数据 // ============ 处理对话滚动 ============== @@ -354,6 +359,10 @@ const stopStream = async () => { */ const getMessageList = async () => { try { + // time 定时器,如果加载速度很快,就不进入加载中 + listLoadingTime.value = setTimeout(() => { + listLoading.value = true + }, 60) if (activeConversationId.value === null) { return } @@ -365,6 +374,12 @@ const getMessageList = async () => { scrollToBottom() }) } finally { + // time 定时器,如果加载速度很快,就不进入加载中 + if (listLoadingTime.value) { + clearTimeout(listLoadingTime.value) + } + // 加载结束 + listLoading.value = false } }