【优化】AI：对话的 user、role 头像从前端获取

src/views/ai/chat/Conversation.vue

@@ -43,7 +43,7 @@
               :class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'"
             >
               <div class="title-wrapper">
-                <img class="avatar" :src="conversation.roleAvatar"/>
+                <img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg"/>
                 <span class="title">{{ conversation.title }}</span>
               </div>
               <div class="button-wrapper" v-show="hoverConversationId === conversation.id">
@@ -99,6 +99,7 @@ import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversatio
 import {ref} from "vue";
 import Role from "@/views/ai/chat/role/index.vue";
 import {Bottom, Top} from "@element-plus/icons-vue";
+import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 const message = useMessage() // 消息弹窗
 

src/views/ai/chat/Message.vue

 <template>
   <div ref="messageContainer" style="height: 100%; overflow-y: auto; position: relative">
-    <div class="chat-list" v-for="(item, index) in messageList" :key="index">
+    <div class="chat-list" v-for="(item, index) in list" :key="index">
       <!--  靠左 message  -->
       <div class="left-message message-item" v-if="item.type !== 'user'">
         <div class="avatar">
-          <el-avatar :src="item.roleAvatar" />
+          <el-avatar :src="roleAvatar" />
         </div>
         <div class="message">
           <div>
@@ -26,7 +26,7 @@
       <!--  靠右 message  -->
       <div class="right-message message-item" v-if="item.type === 'user'">
         <div class="avatar">
-          <el-avatar :src="item.userAvatar" />
+          <el-avatar :src="userAvatar" />
         </div>
         <div class="message">
           <div>
@@ -70,12 +70,19 @@ 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 userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
+import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 const { copy } = useClipboard() // 初始化 copy 到粘贴板
 // 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
 const messageContainer: any = ref(null)
 const isScrolling = ref(false) //用于判断用户是否在滚动
 
+const userStore = useUserStore()
+const userAvatar = computed(() => userStore.user.avatar ?? userAvatarDefaultImg)
+const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)
+
 // 定义 props
 const props = defineProps({
   conversation: {
@@ -88,20 +95,6 @@ const props = defineProps({
   }
 })
 
-const messageList = computed(() => {
-  if (props.list && props.list.length > 0) {
-    return props.list
-  }
-  if (props.conversation && props.conversation.systemMessage) {
-    return [{
-      id: 0,
-      type: 'system',
-      content: props.conversation.systemMessage
-    }]
-  }
-  return []
-})
-
 // ============ 处理对话滚动 ==============
 
 const scrollToBottom = async (isIgnore?: boolean) => {