10/15

1. 工作人员账号添加

src/views/system/conversation/compontents/MessageList/AgentMessage.vue

@@ -8,20 +8,23 @@
         <span class="time">{{ time }}</span>
       </div>
       <!-- 文本消息 -->
-      <div v-if="type === 'text'" class="bubble" v-html="content"></div>
+      <div v-if="type === 'text'" class="bubble text-bubble" v-html="content"></div>
       <!-- 图片消息 -->
       <div v-else-if="type === 'image'" class="bubble img-bubble">
-        <img :src="content" class="chat-img" @click="$emit('preview', content)"/>
+        <el-image :preview-src-list="[url]" :src="url" class="chat-img" @click="$emit('preview', url)"/>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-defineProps({
+import avatar from '@/assets/images/avatar.png'
+
+const props = defineProps({
   name: {type: String, default: '客服'},
-  avatar: {type: String, default: ''},
-  content: {type: String, required: true},
+  avatar: {type: String, default: avatar},
+  content: {type: String, default: ''},
+  url: {type: String, default: ''},
   type: {type: String as () => 'text' | 'image', default: 'text'},
   tag: {type: String, default: '人工客服'},
   time: {type: String, default: ''}
@@ -83,13 +86,17 @@ defineEmits(['preview'])
   color: rgba(31, 41, 55, 1);
 }
 
+.text-bubble {
+  display: inline-block;
+  word-break: break-all;
+}
+
 .img-bubble {
   padding: 4px;
 }
 
 .chat-img {
   max-width: 200px;
-  max-height: 200px;
   border-radius: 8px;
   display: block;
 }