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

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

@@ -2,7 +2,7 @@ import request from '@/config/axios'
 
 
 // AI 聊天对话 VO
 // AI 聊天对话 VO
 export interface ChatConversationVO {
 export interface ChatConversationVO {
-  id: string // ID 编号
+  id: number // ID 编号
   userId: number // 用户编号
   userId: number // 用户编号
   title: string // 对话标题
   title: string // 对话标题
   pinned: boolean // 是否置顶
   pinned: boolean // 是否置顶
@@ -23,7 +23,7 @@ export interface ChatConversationVO {
 // AI 聊天对话 API
 // AI 聊天对话 API
 export const ChatConversationApi = {
 export const ChatConversationApi = {
   // 获得【我的】聊天对话
   // 获得【我的】聊天对话
-  getChatConversationMy: async (id: string) => {
+  getChatConversationMy: async (id: number) => {
     return await request.get({ url: `/ai/chat/conversation/get-my?id=${id}` })
     return await request.get({ url: `/ai/chat/conversation/get-my?id=${id}` })
   },
   },
 
 

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

@@ -19,22 +19,17 @@ export interface ChatMessageVO {
   userAvatar: string // 创建时间
   userAvatar: string // 创建时间
 }
 }
 
 
-export interface ChatMessageSendVO {
-  conversationId: string // 对话编号
-  content: number // 聊天内容
-}
-
 // AI chat 聊天
 // AI chat 聊天
 export const ChatMessageApi = {
 export const ChatMessageApi = {
   // 消息列表
   // 消息列表
-  messageList: async (conversationId: string | null) => {
+  getChatMessageListByConversationId: async (conversationId: number | null) => {
     return await request.get({
     return await request.get({
       url: `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`
       url: `/ai/chat/message/list-by-conversation-id?conversationId=${conversationId}`
     })
     })
   },
   },
 
 
-  // 发送 send stream 消息
-  // TODO axios 可以么？ https://apifox.com/apiskills/how-to-create-axios-stream/
+  // 发送 Stream 消息
+  // 为什么不用 axios 呢？因为它不支持 SSE 调用
   sendStream: async (
   sendStream: async (
     conversationId: number,
     conversationId: number,
     content: string,
     content: string,
@@ -70,7 +65,7 @@ export const ChatMessageApi = {
   },
   },
 
 
   // 删除消息 - 对话所有消息
   // 删除消息 - 对话所有消息
-  deleteByConversationId: async (conversationId: string) => {
+  deleteByConversationId: async (conversationId: number) => {
     return await request.delete({
     return await request.delete({
       url: `/ai/chat/message/delete-by-conversation-id?conversationId=${conversationId}`
       url: `/ai/chat/message/delete-by-conversation-id?conversationId=${conversationId}`
     })
     })

src/views/ai/chat/index/MessageNewChat.vue

 <!-- message 新增对话 -->
 <!-- message 新增对话 -->
 <template>
 <template>
-  <div class="new-chat" >
+  <div class="new-chat">
     <div class="box-center">
     <div class="box-center">
       <div class="tip">点击下方按钮，开始你的对话吧</div>
       <div class="tip">点击下方按钮，开始你的对话吧</div>
-      <div class="btns"><el-button type="primary" round @click="handlerNewChat">新建对话</el-button></div>
+      <div class="btns">
+        <el-button type="primary" round @click="handlerNewChat">新建对话</el-button>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-
 // 定义钩子
 // 定义钩子
 const emits = defineEmits(['onNewChat'])
 const emits = defineEmits(['onNewChat'])
 
 
@@ -19,7 +20,6 @@ const emits = defineEmits(['onNewChat'])
 const handlerNewChat = async () => {
 const handlerNewChat = async () => {
   await emits('onNewChat')
   await emits('onNewChat')
 }
 }
-
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">
 .new-chat {
 .new-chat {

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

@@ -98,7 +98,7 @@
 <script setup lang="ts">
 <script setup lang="ts">
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 import { ref } from 'vue'
 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 { Bottom, Top } from '@element-plus/icons-vue'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 
@@ -398,8 +398,7 @@ onMounted(async () => {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   justify-content: space-between;
   justify-content: space-between;
-  padding: 0 10px;
-  padding-top: 10px;
+  padding: 10px 10px 0;
   overflow: hidden;
   overflow: hidden;
 
 
   .btn-new-conversation {
   .btn-new-conversation {

src/views/ai/chat/index/components/ChatConversationUpdateForm.vue → src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue

@@ -8,7 +8,12 @@
       v-loading="formLoading"
       v-loading="formLoading"
     >
     >
       <el-form-item label="角色设定" prop="systemMessage">
       <el-form-item label="角色设定" prop="systemMessage">
-        <el-input type="textarea" v-model="formData.systemMessage" rows="4" placeholder="请输入角色设定" />
+        <el-input
+          type="textarea"
+          v-model="formData.systemMessage"
+          rows="4"
+          placeholder="请输入角色设定"
+        />
       </el-form-item>
       </el-form-item>
       <el-form-item label="模型" prop="modelId">
       <el-form-item label="模型" prop="modelId">
         <el-select v-model="formData.modelId" placeholder="请选择模型">
         <el-select v-model="formData.modelId" placeholder="请选择模型">
@@ -57,10 +62,9 @@ import { CommonStatusEnum } from '@/utils/constants'
 import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
 
 
-/** AI 聊天角色 表单 */
+/** AI 聊天对话的更新表单 */
 defineOptions({ name: 'ChatConversationUpdateForm' })
 defineOptions({ name: 'ChatConversationUpdateForm' })
 
 
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const message = useMessage() // 消息弹窗
 
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogVisible = ref(false) // 弹窗的是否展示