【代码优化】AI：聊天对话 index.vue 代码梳理 30%

Author: YunaiV

src/api/ai/chat/message/index.ts

@@ -30,7 +30,7 @@ export const ChatMessageApi = {
 
   // 发送 Stream 消息
   // 为什么不用 axios 呢？因为它不支持 SSE 调用
-  sendStream: async (
+  sendChatMessageStream: async (
     conversationId: number,
     content: string,
     ctrl,
@@ -60,11 +60,11 @@ export const ChatMessageApi = {
   },
 
   // 删除消息
-  delete: async (id: string) => {
+  deleteChatMessage: async (id: string) => {
     return await request.delete({ url: `/ai/chat/message/delete?id=${id}` })
   },
 
-  // 删除消息 - 对话所有消息
+  // 删除指定对话的消息
   deleteByConversationId: async (conversationId: number) => {
     return await request.delete({
       url: `/ai/chat/message/delete-by-conversation-id?conversationId=${conversationId}`

src/views/ai/chat/index/components/conversation/ConversationList.vue

@@ -98,7 +98,7 @@
 <script setup lang="ts">
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 import { ref } from 'vue'
-import Role from '../../role/index.vue'
+import Role from '../role/index.vue'
 import { Bottom, Top } from '@element-plus/icons-vue'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 

src/views/ai/chat/index/Message.vue renamed to src/views/ai/chat/index/components/message/MessageList.vue

@@ -17,7 +17,7 @@
             <el-button class="btn-cus" link @click="noCopy(item.content)">
               <img class="btn-image" src="@/assets/ai/copy.svg" />
             </el-button>
-            <el-button class="btn-cus" link @click="onDelete(item.id)">
+            <el-button v-if="item.id > 0" class="btn-cus" link @click="onDelete(item.id)">
               <img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px" />
             </el-button>
           </div>
@@ -70,7 +70,7 @@ import { useClipboard } from '@vueuse/core'
 import { PropType } from 'vue'
 import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
 import { ChatConversationVO } from '@/api/ai/chat/conversation'
-import {useUserStore} from '@/store/modules/user';
+import { useUserStore } from '@/store/modules/user'
 import userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
@@ -138,7 +138,7 @@ const noCopy = async (content) => {
  */
 const onDelete = async (id) => {
   // 删除 message
-  await ChatMessageApi.delete(id)
+  await ChatMessageApi.deleteChatMessage(id)
   ElMessage({
     message: '删除成功!',
     type: 'success'

src/views/ai/chat/index/ChatEmpty.vue renamed to src/views/ai/chat/index/components/message/MessageListEmpty.vue

@@ -1,4 +1,4 @@
-<!-- message 新增对话 -->
+<!-- 无聊天对话时，在 message 区域，可以新增对话 -->
 <template>
   <div class="new-chat">
     <div class="box-center">
@@ -11,14 +11,13 @@
 </template>
 
 <script setup lang="ts">
-// 定义钩子
-const emits = defineEmits(['onNewChat'])
+const emits = defineEmits(['onNewConversation'])
 
 /**
- * 新建 chat
+ * 新建 conversation 聊天对话
  */
-const handlerNewChat = async () => {
-  await emits('onNewChat')
+const handlerNewChat = () => {
+  emits('onNewConversation')
 }
 </script>
 <style scoped lang="scss">

src/views/ai/chat/index/MessageLoading.vue renamed to src/views/ai/chat/index/components/message/MessageLoading.vue

@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import Header from './../components/Header.vue'
+import Header from '../Header.vue'
 import RoleList from './RoleList.vue'
 import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
 import RoleCategoryList from './RoleCategoryList.vue'