From 6a03b7637efeca0b98c591d2382dcc9f0984fcd9 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 21 May 2024 14:24:21 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91AI=20?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=A2=9E=E5=8A=A0=E5=8A=A0=E8=BD=BD=E4=B8=AD?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/Conversation.vue | 56 ++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/views/ai/chat/Conversation.vue b/src/views/ai/chat/Conversation.vue
index bbdc9f18..5c929a12 100644
--- a/src/views/ai/chat/Conversation.vue
+++ b/src/views/ai/chat/Conversation.vue
@@ -24,7 +24,10 @@
 
       <!-- 左中间：对话列表 -->
       <div class="conversation-list">
-        <!-- TODO @fain：置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
+
+        <el-empty v-if="loading" description="." :v-loading="loading" />
+
+        <!-- TODO done @fain：置顶、聊天记录、一星期钱、30天前，前端对数据重新做一下分组，或者后端接口改一下 -->
         <div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey">
           <div class="conversation-item classify-title" v-if="conversationMap[conversationKey].length">
             <el-text class="mx-1" size="small" tag="b">{{ conversationKey }}</el-text>
@@ -102,6 +105,8 @@ const activeConversationId = ref<string | null>(null) // 选中的对话，默
 const conversationList = ref([] as ChatConversationVO[])  // 对话列表
 const conversationMap = ref<any>({})  // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
 const drawer = ref<boolean>(false) // 角色仓库抽屉
+const loading = ref<boolean>(false) // 加载中
+const loadingTime = ref<any>() // 加载中定时器
 
 // 定义组件 props
 const props = defineProps({
@@ -147,25 +152,38 @@ const handleConversationClick = async (id: string) => {
  * 对话 - 获取列表
  */
 const getChatConversationList = async () => {
-  // 1、获取 对话数据
-  const res = await ChatConversationApi.getChatConversationMyList()
-  // 2、排序
-  res.sort((a, b) => {
-    return b.createTime - a.createTime
-  })
-  conversationList.value = res
-  // 3、默认选中
-  if (!activeId?.value) {
-    await handleConversationClick(res[0].id)
+  try {
+    // 0、加载中
+    loadingTime.value = setTimeout(() => {
+      loading.value = true
+    }, 50)
+    // 1、获取 对话数据
+    const res = await ChatConversationApi.getChatConversationMyList()
+    // 2、排序
+    res.sort((a, b) => {
+      return b.createTime - a.createTime
+    })
+    conversationList.value = res
+    // 3、默认选中
+    if (!activeId?.value) {
+      await handleConversationClick(res[0].id)
+    }
+    // 4、没有 任何对话情况
+    if (conversationList.value.length === 0) {
+      activeConversationId.value = null
+      conversationMap.value = {}
+      return
+    }
+    // 5、对话根据时间分组(置顶、今天、一天前、三天前、七天前、30天前)
+    conversationMap.value = await conversationTimeGroup(conversationList.value)
+  } finally {
+    // 清理定时器
+    if (loadingTime.value) {
+      clearTimeout(loadingTime.value)
+    }
+    // 加载完成
+    loading.value = false
   }
-  // 4、没有 任何对话情况
-  if (conversationList.value.length === 0) {
-    activeConversationId.value = null
-    conversationMap.value = {}
-    return
-  }
-  // 5、对话根据时间分组(置顶、今天、一天前、三天前、七天前、30天前)
-  conversationMap.value = await conversationTimeGroup(conversationList.value)
 }
 
 const conversationTimeGroup = async (list: ChatConversationVO[]) => {