chat-app/src/components/talk/message/MixedMessage.vue

<script lang="ts" setup>
import { textReplaceEmoji } from '@/utils/emojis'
import { textReplaceLink } from '@/utils/strings'
import { getImageInfo } from '@/utils/functions'
import { ITalkRecordExtraMixed, ITalkRecord } from '@/types/chat'

const props = defineProps<{
  extra: ITalkRecordExtraMixed
  data: ITalkRecord
  maxWidth?: Boolean
}>()

const float = props.data.float

const img = (src: string, width = 200) => {
  const info = getImageInfo(src)

  if (info.width == 0 || info.height == 0) {
    return {
      width: 200,
      height: 200
    }
  }

  if(info.width<300){
    return {
      width: 300,
      height: info.height / (info.width / 300)
    }
  }

  if (info.width < width) {
    return {
      width: info.width,
      height: info.height
    }
  }

  return {
    width: width,
    height: info.height / (info.width / width)
  }
}
</script>

<template>
  <div
    class="im-message-mixed"
    :class="{
      left: float == 'left',
      right: float == 'right',
      maxwidth: maxWidth
    }"
  >
    <pre>
      <template v-for="(item) in extra.items" :key="item.id">

        <template v-if="item.type === 1">
               <span v-html="textReplaceEmoji(textReplaceLink(item.content))" />
        </template>

        <template v-else-if="item.type === 3">
          <div
            style="display: flex; margin: 5px 0;border-radius: 8px;overflow: hidden;"
          >
            <tm-image :src="item.content" :width="img(item.content,450).width" :height="img(item.content,450).height" ></tm-image>
          </div>
        </template>
      </template>
    </pre>
  </div>
</template>

<style lang="less" scoped>
.im-message-mixed {
  min-width: 40rpx;
  min-height: 40rpx;
  padding: 20rpx 18rpx;
  color: #000000;
  background-color: #FFFFFF;
  border-radius: 0;

  &.left{
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 0 16rpx 16rpx 16rpx;
  }

  &.right {
    background-color: #46299D;
    color: #FFFFFF;
    border-radius: 10px 0px 10px 10px;
  }

  &.maxwidth {
    max-width: 70%;
  }

  pre {
    display: flex;
    flex-direction: column;
    white-space: pre-wrap;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 14px;
    padding: 3px 5px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
    line-height: 25px;

    :deep(a) {
      color: #2196f3;
      text-decoration: revert;
    }
  }
}
</style>