heshanApp/pages_im/pages/conversation/chating/components/MessageItem/TextMessageRender.vue

<template>
  <view class="text_message_container bg_container" :class="[isSender ? 'text_message_container_self' : '']">
    <rich-text :nodes="nodes" class="plain_text"></rich-text>
  </view>
</template>

<script>
import { parseAt, parseLink } from "../../../../../util/imCommon";
import { MessageType } from "@/pages_im/constant/imConstants";
import Parser from "@/uni_modules/uview-plus/components/u-parse/parser.js";

export default {
  name: "TextMessageRender",
  props: {
    message: Object,
    isSender: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getContent() {
      let content = "";
      if (this.message.contentType === MessageType.QuoteMessage) {
        content = this.message.quoteElem.text || "";
      } else if (this.message.contentType === MessageType.AtTextMessage) {
        content = parseAt(this.message.atTextElem) || "";
      } else {
        content = this.message.textElem?.content || "";
        content = parseLink(content);
      }
      // 统一处理换行符为 <br>，确保 rich-text 能正确换行
      return content.replace(/\n/g, ' ');
    },
    nodes() {
        try {
            const content = this.getContent;
            if (!content) return [];
            const parser = new Parser({});
            const nodeList = parser.parse(content);
            return nodeList;
        } catch (e) {
            console.error("RichText parse error:", e);
            return [];
        }
    },
  },
  methods: {
    navigate(link) {
      if (link.innerText.includes("@")) {
        this.$emit("showInfo", link.href);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.plain_text {
  font-size: 20px;
  color: #333;
  line-height: 48rpx;
  /* 确保文本能正常换行且不被截断 */
  word-wrap: break-word;
  word-break: break-all;
}
.bg_container {
    padding: 18rpx 24rpx;
    border-radius: 0rpx 12rpx 12rpx 12rpx;
    background-color: #ffffff;
    max-width: 514rpx;
}
.text_message_container_self {
    border-radius: 12rpx 0 12rpx 12rpx;
    background-color: #95EC69 !important;
}
</style>