jd_logistics/jd_logistics-app/pages/ai/components/messagesInfo.vue

<template>
<view class="messagesInfo">
  <view 
      v-for="(msg, index) in props.messages" 
      :key="index" 
      :class="['message-item', msg.speakerType==0? 'is-mine' : '']"
    >
      <image v-if="msg.speakerType==1"
        src="/static/img/service/aijiqiren.png" 
        class="message-avatar"
        mode="aspectFill"
      />
      <view class="message-content">
        <view class="typing-indicator" 
        v-if="props.isLoading && msg.speakerType==1 && index== props.messages.length-1"
        >
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
        <!-- 0用户消息1AI消息 -->
        <view v-if="msg.speakerType==0">
          <!-- 0 (文本),1 (图片) -->
          <image v-if="msg.chatType==1"
            :src="msg.msgContent" 
            class="content-image"
            mode="widthFix"
            @load="onImageLoad"
            @error="onImageLoad"
            
          />
          <text v-else>{{ msg.msgContent }}</text>
        </view>
        <zero-markdown-view v-else
          :markdown="msg.msgContent" 
          themeColor="#000000" 
          :aiMode='false' 
        >
        </zero-markdown-view>
        <view v-if="msg.messageTime" class="gray font_size20">{{msg.messageTime}}</view>
        <view v-else-if="msg.speakerType==1 && msg.messageTimeNow" class="gray font_size20 text_align_right">
          {{props.isLoading && index== props.messages.length-1?'':msg.messageTimeNow}}
        </view>
      </view>
      <image v-if="msg.speakerType==0"
        :src="appStore?.userInfo?.userAvatar || appStore.logo || '/static/img/service/user-avatar.png'" 
        class="message-avatar mine-avatar"
        mode="aspectFill"
      />
    </view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
const emit = defineEmits(['imageLoaded'])
const props = defineProps({
  messages: {
    type: Array,
    default: [],
  },
  isLoading: {
    type: Boolean,
    default: false,
  }
});
function onImageLoad() {
  emit('imageLoaded')
}
</script>
<style lang="scss" scoped>
.messagesInfo{
  .content-image{
    width: 200rpx;
  }
    /* 单个消息样式 */
  .message-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
  }

  /* 用户自己发送的消息样式 */
  .is-mine {
    justify-content: flex-end;
  }

  /* 头像样式 */
  .message-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    &.mine-avatar{
      margin-left: 16rpx;
      margin-right: 0;
    }
  }

  /* 消息内容样式 */
  .message-content {
    max-width: 70%;
    min-width: 100rpx;
    padding: 16rpx;
    border-radius: 16rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    position: relative;
  }

  /* 用户自己发送的消息内容样式 */
  .is-mine.message-content {
    background-color: #00c853;
    color: #fff;
  }
    /* 打字指示器（加载动画） */
  .typing-indicator {
    // position: absolute;
    // top: 20rpx;
    // left: 20rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 5rpx 0;
  }
  /* 加载动画关键帧 */
  @keyframes typing {
    0% { transform: scale(0); }
    40% { transform: scale(1); }
    80% { transform: scale(0); }
    100% { transform: scale(0); }
  }

  /* 加载动画的点 */
  .dot {
    width: 12rpx;
    height: 12rpx;
    background-color: #666;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
  }

}
</style>