uni-ai-msg.vue

<template>
	<view class="msg-item">
		<view class="create_time-box">
			<uni-dateformat class="create_time" :date="msg.create_time" format="MM/dd hh:mm:ss"></uni-dateformat>
		</view>
		<view :class="{reverse:!msg.isAi}">
			<view class="userInfo">
				<image class="avatar" :src="msg.isAi?'../../static/uni-ai.png':'../../static/avatar.png'" mode="widthFix"></image>
			</view>
			<view class="content">
				
				<view class="rich-text-box" :class="{'show-cursor':showCursor}" ref="rich-text-box">
					<rich-text v-if="nodes&&nodes.length" space="nbsp" :nodes="nodes"></rich-text>
				
					<!-- #ifdef H5 -->
					<view class="copy-box" :style="{left,top}">
						<text class="copy" @click="copy">复制</text>
					</view>
					<!-- #endif -->
				</view>
				
				
				<view v-if="msgIndex == msgIndexList.length-1 && adpid && msg.insufficientScore">
					<uni-ad-rewarded-video :adpid="adpid" @onAdClose="onAdClose"></uni-ad-rewarded-video>
				</view>
			</view>
			<uni-icons v-if="msgIndex == msgIndexList.length-1 && !msg.isAi && msg.state != 100 && msgStateIcon(msg)"
				@click="msg.state == -100 ? retriesSendMsg() : ''" :color="msg.state===0?'#999':'#d22'"
				:type="msgStateIcon(msg)" class="msgStateIcon">
			</uni-icons>
		</view>
	</view>
</template>

<script>
	import {msgList} from '@/pages/chat/msgList.js';
	
	// 引入markdown-it库
	import MarkdownIt from '@/lib/markdown-it.min.js';

	// hljs是由 Highlight.js 经兼容性修改后的文件，请勿直接升级。否则会造成uni-app-vue3-Android下有兼容问题
	import hljs from "@/lib/highlight/highlight-uni.min.js";

	// 引入html-parser.js库
	import parseHtml from '@/lib/html-parser.js'; 

	// console.log('hljs--',hljs);
	// console.log('hljs--',hljs.getLanguage('js'));

	// 初始化 MarkdownIt库
	const markdownIt = MarkdownIt({
		// 在源码中启用 HTML 标签
		html: true,
		// 如果结果以 <pre ... 开头，内部包装器则会跳过。
		highlight: function(str, lang) {
			// if (lang && hljs.getLanguage(lang)) {
			// 	console.error('lang', lang)
			// 	try {
			// 		return '<pre class="hljs" style="padding: 5px 8px;margin: 5px 0;overflow: auto;"><code>' +
			// 			hljs.highlight('lang', str, true).value +
			// 			'</code></pre>';
			// 	} catch (__) {}
			// }

			try {
				return '<pre class="hljs" style="padding: 5px 8px;margin: 5px 0;overflow: auto;"><code>' +
					hljs.highlightAuto(str).value +
					'</code></pre>';
			} catch (__) {}

			return '<pre class="hljs" style="padding: 5px 8px;margin: 5px 0;overflow: auto;"><code>' +
				markdownIt.utils.escapeHtml(str) + '</code></pre>';
		}
	})
	
	export default {
		name: "msg",
		data() {
			return {
				// 悬浮的复制按钮的左边距
				left: "-100px",
				// 悬浮的复制按钮的上边距
				top: "-100px",
				msg:{
					content:""
				},
				msgIndexList:0
			};
		},
		mounted() {
			// #ifdef H5
			// web端限制不选中文字时出现系统右键菜单
			let richTextBox = this.$refs['rich-text-box']
			if (richTextBox) {
				// 监听鼠标右键事件
				richTextBox.$el.addEventListener('contextmenu', (e) => {
					// 判断是否选中了文字内容，如果没有则限制系统默认行为（禁止弹出右键菜单）
					if (!document.getSelection().toString()) {
						// console.log(e);
						// 设置悬浮的复制按钮的坐标值
						this.top = e.y + 'px'
						this.left = e.x + 'px'

						// console.log(e.x);
						// console.log(e.y);
						// 禁止系统默认行为（禁止弹出右键菜单）
						e.preventDefault()
					}
				})
			}
			// 监听全局点击事件，隐藏悬浮的复制按钮的坐标
			document.addEventListener('click', () => {
				this.left = "-100px"
			})
			// #endif
		},
		created() {
			this.msg = msgList[this.msgIndex]
		},
		props: {
			// // 传入的markdown内容
			// md: {
			// 	type: String,
			// 	default () {
			// 		return ''
			// 	}
			// },
			// 是否显示鼠标闪烁的效果
			showCursor: {
				type: [Boolean, Number],
				default () {
					return false
				}
			},
			msgIndex:{
				type: Number,
				default () {
					return false
				}
			}
		},
		computed: {
			md(){
				return this.msg.content
			},
			nodes() {
				let htmlString = ''
				// 修改转换结果的htmlString值 用于正确给界面增加鼠标闪烁的效果
				// 判断markdown中代码块标识符的数量是否为偶数
				if(this.md.split("```").length%2){
					htmlString = markdownIt.render(this.md + ' \n <span class="cursor">|</span>');
				}else{
					htmlString = markdownIt.render(this.md) + ' \n <span class="cursor">|</span>';
				}
				
				// #ifndef APP-NVUE
				return htmlString
				// #endif
				
				// nvue模式下将htmlString转成htmlArray，其他情况rich-text内部转
				// 注：本示例项目还没使用nvue编译
				
				// #ifdef APP-NVUE
				return parseHtml(htmlString)
				// #endif
			}
		},
		methods: {
			// #ifdef H5
			// 复制文本内容到系统剪切板
			copy() {
				uni.setClipboardData({
					data: this.md,
					showToast: false,
				})
				// 设置悬浮的复制按钮的坐标值，使其隐藏
				this.left = "-100px"
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	view,
	textarea,
	button,
	.page {
		display: flex;
		box-sizing: border-box;
	}
	/* #endif */
	
	.userInfo {
		flex-direction: column;
	}
	
	.msg-item {
		position: relative;
		width: 750rpx;
		flex-direction: column;
		padding: 0 15px;
		padding-bottom: 15px;
	}
	
	.msgStateIcon {
		position: relative;
		top: 5px;
		right: 5px;
		align-self: center;
	}
	
	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 2px;
	}
	
	.create_time {
		font-size: 12px;
		padding: 5px 0;
		padding-top: 0;
		color: #aaa;
		text-align: center;
		width: 750rpx;
		/* #ifdef MP */
		display: flex;
		/* #endif */
		justify-content: center;
	}
	
	.content {
		/* #ifndef APP-NVUE */
		max-width: 550rpx;
		/* #endif */
		background-color: #FFF;
		border-radius: 5px;
		padding: 12px 10px;
		margin-left: 10px;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		user-select: text;
		cursor: text;
		/* #endif */
	}
	
	/* #ifndef APP-NVUE */
	.content {
		display: inline;
	}
	
	.content ::v-deep rich-text {
		max-width: 550rpx;
		overflow: auto;
	}
	
	/* #endif */
	
	/* #ifdef H5 */
	.content * {
		display: inline;
	}
	
	/* #endif */
	
	.reverse {
		flex-direction: row-reverse;
	}
	
	.reverse .content {
		margin-left: 0;
		margin-right: 10px;
	}
	
	.reverse-align {
		align-items: flex-end;
	}


	
	/* #ifndef VUE3 && APP-PLUS */
	@import "@/components/uni-ai-msg/uni-ai-msg.scss";
	/* #endif */
</style>