root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【解决todo】AI 对话前后，增加加载中页面

Browse Source
This commit is contained in:
cherishsince 2024-05-21 13:56:11 +08:00
parent 8ca3d26cbb
commit 8b0d598d8a
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/ai/chat/MessageLoading.vue Normal file
View File

@ -0,0 +1,15 @@
<!-- message 加载页面 -->
<template>
<div class="message-loading" >
<el-skeleton animated />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.message-loading {
padding: 30px 30px;
}
</style>

23
src/views/ai/chat/index.vue
View File

@ -35,8 +35,9 @@
<el-main class="main-container" >
<div >
<div class="message-container" >
<Message v-if="list.length > 0" ref="messageRef" :list="list" @on-delete-success="handlerMessageDelete" />
<ChatEmpty v-if="list.length === 0" @on-prompt="doSend"/>
<MessageLoading v-if="listLoading" />
<Message v-if="!listLoading && list.length > 0" ref="messageRef" :list="list" @on-delete-success="handlerMessageDelete" />
<ChatEmpty v-if="!listLoading && list.length === 0" @on-prompt="doSend"/>
</div>
</div>
</el-main>
@ -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<number>(50); // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false); // Typing speed in milliseconds
// chat message 列表
const list = ref<ChatMessageVO[]>([]) // 列表的数据
const listLoading = ref<boolean>(false) // 是否加载中
const listLoadingTime = ref<any>() // time定时器，如果加载速度很快，就不进入加载中
// 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
const messageRef = ref()
const isComposing = ref(false) // 判断用户是否在输入
@ -177,8 +184,6 @@ const textRoll = async () => {
}
};
/** chat message 列表 */
const list = ref<ChatMessageVO[]>([]) // 列表的数据
// ============ 处理对话滚动 ==============
@ -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
}
}