im-ui-mobile 0.0.98 → 0.1.0

package/components/im-message-item/im-message-item.vue

@@ -1,556 +1,556 @@
-<template>
-	<view class="message-item">
-		<view class="message-tip" v-if="msgInfo.type == MESSAGE_TYPE.TIP_TEXT">
-			{{ msgInfo.content }}
-		</view>
-		<view class="message-tip" v-else-if="msgInfo.type == MESSAGE_TYPE.TIP_TIME">
-			{{ $datetime.toTimeText(msgInfo.sendTime) }}
-		</view>
-		<view class="message-normal" v-else-if="isNormal" :class="{ 'message-mine': msgInfo.selfSend }">
-			<im-avatar class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="avatar"
-				:name="showName" size="small" />
-			<view class="content">
-				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="top">
-					<text>{{ showName }}</text>
-				</view>
-				<view class="bottom">
-					<view class="message-content-wrapper">
-						<view v-if="msgInfo.type == MESSAGE_TYPE.TEXT">
-							<im-context-menu :items="menuItems" @select="onSelectMenu">
-								<!-- up-parse支持点击a标签,但是不支持显示emo表情，也不支持换行 -->
-								<up-parse
-									v-if="$url.containUrl(msgInfo.content) && !emoji.containEmoji(msgInfo.content)"
-									class="message-text" :showImgMenu="false" :content="nodesText" />
-								<!-- rich-text支持显示emo表情以及消息换行，但是不支持点击a标签 -->
-								<rich-text v-else class="message-text" :nodes="nodesText" />
-							</im-context-menu>
-						</view>
-						<view class="message-image" v-else-if="msgInfo.type == MESSAGE_TYPE.IMAGE">
-							<im-context-menu :items="menuItems" @select="onSelectMenu">
-								<view class="image-box">
-									<image class="send-image" :style="imageStyle" mode="aspectFill"
-										:src="contentData.thumbUrl" lazy-load="true" @click.stop="onShowFullImage()">
-									</image>
-									<im-loading v-if="sending"></im-loading>
-								</view>
-							</im-context-menu>
-						</view>
-						<view class="message-file" v-else-if="msgInfo.type == MESSAGE_TYPE.FILE">
-							<im-context-menu :items="menuItems" @select="onSelectMenu">
-								<view class="file-box">
-									<view class="file-info" style="overflow: hidden;">
-										<u-link class="file-name" :under-line="true" color="#007BFF"
-											:href="contentData.url" :text="contentData.name"></u-link>
-										<view class="file-size">{{ fileSize }}</view>
-									</view>
-									<view class="file-icon iconfont icon-file"></view>
-									<im-loading v-if="sending"></im-loading>
-								</view>
-							</im-context-menu>
-						</view>
-						<im-context-menu v-else-if="msgInfo.type == MESSAGE_TYPE.AUDIO" :items="menuItems"
-							@select="onSelectMenu">
-							<view class="message-audio message-text" @click="onPlayAudio()">
-								<text class="iconfont icon-voice-play"></text>
-								<text class="chat-audio-text">{{ contentData.duration + '"' }}</text>
-								<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
-								<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
-							</view>
-						</im-context-menu>
-						<im-context-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
-							<view class="chat-realtime message-text" @click="$emit('call')">
-								<text v-if="msgInfo.type == MESSAGE_TYPE.ACT_RT_VOICE"
-									class="iconfont icon-chat-voice"></text>
-								<text v-if="msgInfo.type == MESSAGE_TYPE.ACT_RT_VIDEO"
-									class="iconfont icon-chat-video"></text>
-								<text>{{ msgInfo.content }}</text>
-							</view>
-						</im-context-menu>
-						<view v-if="sending && isTextMessage" class="sending">
-							<im-loading :size="40" icon-color="#656adf" :mask="false"></im-loading>
-						</view>
-						<view v-else-if="sendFail" @click="onSendFail"
-							class="send-fail iconfont icon-warning-circle-fill"></view>
-					</view>
-					<view class="message-status" v-if="!isAction && msgInfo.selfSend && !msgInfo.groupId">
-						<text class="chat-readed" v-if="msgInfo.status == MESSAGE_STATUS.READED">已读</text>
-						<text class="chat-unread" v-else>未读</text>
-					</view>
-					<view class="chat-receipt" v-if="msgInfo.receipt" @click="onShowReadedBox">
-						<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
-						<text v-else>{{ msgInfo.readedCount }}人已读</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<im-read-receipt ref="chatGroupReaded" :groupMembers="groupMembers as any[]" :msgInfo="msgInfo" />
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImReadReceipt from '../im-read-receipt/im-read-receipt.vue'
-import ImContextMenu from '../im-context-menu/im-context-menu.vue'
-import { MESSAGE_TYPE, MESSAGE_STATUS, datetime, dom, url, messageType, emoji } from '../../index'
-
-interface Props {
-	avatar?: string;
-	showName: string;
-	msgInfo: any;
-	groupMembers?: any[];
-}
-
-interface Emits {
-	(e: 'call'): void;
-	(e: 'longPressHead'): void;
-	(e: 'resend', msgInfo: any): void;
-	(e: 'audioStateChange', state: string, msgInfo: any): void;
-	(e: 'copy', msgInfo: any): void;
-	(e: 'recall', msgInfo: any): void;
-	(e: 'delete', msgInfo: any): void;
-	(e: 'download', msgInfo: any): void;
-}
-
-const $url = url
-const $datetime = datetime
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const audioPlayState = ref('STOP');
-const innerAudioContext = ref<UniApp.InnerAudioContext | null>(null);
-const menu = ref({
-	show: false,
-	style: ""
-});
-
-const onSendFail = () => {
-	emit("resend", props.msgInfo);
-};
-
-const onPlayAudio = () => {
-	// 初始化音频播放器
-	if (!innerAudioContext.value) {
-		innerAudioContext.value = uni.createInnerAudioContext();
-		const url = contentData.value.url;
-		innerAudioContext.value.src = url;
-		innerAudioContext.value.onEnded(() => {
-			console.log('停止');
-			audioPlayState.value = "STOP";
-			emitAudioState();
-		});
-		innerAudioContext.value.onError(() => {
-			audioPlayState.value = "STOP";
-			console.log("播放音频出错");
-			emitAudioState();
-		});
-	}
-
-	if (audioPlayState.value === 'STOP') {
-		innerAudioContext.value.play();
-		audioPlayState.value = "PLAYING";
-	} else if (audioPlayState.value === 'PLAYING') {
-		innerAudioContext.value.pause();
-		audioPlayState.value = "PAUSE";
-	} else if (audioPlayState.value === 'PAUSE') {
-		innerAudioContext.value.play();
-		audioPlayState.value = "PLAYING";
-	}
-	emitAudioState();
-};
-
-const onSelectMenu = (item: any) => {
-	emit(item.key.toLowerCase() as any, props.msgInfo);
-	menu.value.show = false;
-};
-
-const onShowFullImage = () => {
-	const imageUrl = contentData.value.originUrl;
-	uni.previewImage({
-		urls: [imageUrl]
-	});
-};
-
-const onShowReadedBox = () => {
-	// this.$refs.chatGroupReaded.open();
-};
-
-const emitAudioState = () => {
-	emit("audioStateChange", audioPlayState.value, props.msgInfo);
-};
-
-const stopPlayAudio = () => {
-	if (innerAudioContext.value) {
-		innerAudioContext.value.stop();
-		innerAudioContext.value = null;
-		audioPlayState.value = "STOP";
-	}
-};
-
-const sending = computed(() => {
-	return props.msgInfo.status === MESSAGE_STATUS.SENDING;
-});
-
-const sendFail = computed(() => {
-	return props.msgInfo.status === MESSAGE_STATUS.FAILED;
-});
-
-const contentData = computed(() => {
-	return JSON.parse(props.msgInfo.content);
-});
-
-const fileSize = computed(() => {
-	const size = contentData.value.size;
-	if (size > 1024 * 1024) {
-		return Math.round(size / 1024 / 1024) + "M";
-	}
-	if (size > 1024) {
-		return Math.round(size / 1024) + "KB";
-	}
-	return size + "B";
-});
-
-const menuItems = computed(() => {
-	const items = [];
-	if (props.msgInfo.type === MESSAGE_TYPE.TEXT) {
-		items.push({
-			key: 'COPY',
-			name: '复制',
-			icon: 'bars'
-		});
-	}
-	if (props.msgInfo.selfSend && props.msgInfo.id > 0) {
-		items.push({
-			key: 'RECALL',
-			name: '撤回',
-			icon: 'refreshempty'
-		});
-	}
-	items.push({
-		key: 'DELETE',
-		name: '删除',
-		icon: 'trash',
-		color: '#e64e4e'
-	});
-	if (props.msgInfo.type === MESSAGE_TYPE.FILE) {
-		items.push({
-			key: 'DOWNLOAD',
-			name: '下载并打开',
-			icon: 'download'
-		});
-	}
-	return items;
-});
-
-const isTextMessage = computed(() => {
-	return props.msgInfo.type === MESSAGE_TYPE.TEXT;
-});
-
-const isAction = computed(() => {
-	return messageType.isAction(props.msgInfo.type);
-});
-
-const isNormal = computed(() => {
-	const type = props.msgInfo.type;
-	return messageType.isNormal(type) || messageType.isAction(type);
-});
-
-const nodesText = computed(() => {
-	const color = props.msgInfo.selfSend ? 'white' : '';
-	let text = dom.html2Escape(props.msgInfo.content);
-	text = url.replaceURLWithHTMLLinks(text, color);
-	return emoji.transform(text, 'emoji-normal');
-});
-
-const imageStyle = computed(() => {
-	const systemInfo = uni.getWindowInfo();
-	const maxSize = systemInfo.windowWidth * 0.6;
-	const minSize = systemInfo.windowWidth * 0.2;
-	const width = contentData.value.width;
-	const height = contentData.value.height;
-
-	if (width && height) {
-		const ratio = Math.min(width, height) / Math.max(width, height);
-		const w = Math.max(width > height ? maxSize : ratio * maxSize, minSize);
-		const h = Math.max(width > height ? ratio * maxSize : maxSize, minSize);
-		return `width: ${w}px;height:${h}px;`;
-	} else {
-		// 兼容历史版本，历史数据没有记录宽高
-		return `max-width: ${maxSize}px;min-width:100px;max-height: ${maxSize}px;min-height:100px;`;
-	}
-});
-</script>
-
-<style scoped lang="scss">
-.message-item {
-	padding: 2rpx 20rpx;
-
-	.message-tip {
-		line-height: 60rpx;
-		text-align: center;
-		color: $im-text-color-lighter;
-		font-size: $im-font-size-smaller-extra;
-		padding: 10rpx;
-	}
-
-	.message-normal {
-		position: relative;
-		margin-bottom: 22rpx;
-		padding-left: 110rpx;
-		min-height: 80rpx;
-
-		.avatar {
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-
-		.content {
-			text-align: left;
-
-			.top {
-				display: flex;
-				flex-wrap: nowrap;
-				color: $im-text-color-lighter;
-				font-size: $im-font-size-smaller;
-				line-height: $im-font-size-smaller;
-				height: $im-font-size-smaller;
-			}
-
-			.bottom {
-				display: inline-block;
-				padding-right: 80rpx;
-				margin-top: 5rpx;
-
-				.message-content-wrapper {
-					position: relative;
-					display: flex;
-					align-items: center;
-
-					.sending {
-						position: relative;
-						margin: 0 6rpx;
-
-						.icon-loading {
-							color: $im-color-primary;
-						}
-					}
-
-					.send-fail {
-						color: #e60c0c;
-						font-size: 50rpx;
-						margin: 0 5rpx;
-					}
-
-					.message-text {
-						position: relative;
-						line-height: 1.6;
-						margin-top: 10rpx;
-						padding: 16rpx 24rpx;
-						background-color: $im-bg;
-						border-radius: 20rpx;
-						color: $im-text-color;
-						font-size: $im-font-size;
-						text-align: left;
-						display: block;
-						word-break: break-word;
-						white-space: pre-line;
-
-						&:after {
-							content: "";
-							position: absolute;
-							left: -20rpx;
-							top: 26rpx;
-							width: 6rpx;
-							height: 6rpx;
-							border-style: solid dashed dashed;
-							border-color: $im-bg transparent transparent;
-							overflow: hidden;
-							border-width: 18rpx;
-						}
-					}
-
-					.message-image {
-						display: flex;
-						flex-wrap: nowrap;
-						flex-direction: row;
-						align-items: center;
-
-						.image-box {
-							position: relative;
-
-							.send-image {
-								cursor: pointer;
-								border-radius: 10rpx;
-								background: $im-bg;
-								border: 6rpx solid $im-color-primary-light-5;
-							}
-						}
-
-						.send-fail {
-							color: $im-color-danger;
-							font-size: $im-font-size;
-							cursor: pointer;
-							margin: 0 20px;
-						}
-					}
-
-					.message-file {
-						display: flex;
-						flex-wrap: nowrap;
-						flex-direction: row;
-						align-items: center;
-						cursor: pointer;
-
-						.file-box {
-							position: relative;
-							display: flex;
-							flex-wrap: nowrap;
-							align-items: center;
-							min-height: 60px;
-							border-radius: 4px;
-							padding: 10px 15px;
-							box-shadow: $im-box-shadow-dark;
-
-							.file-info {
-								flex: 1;
-								height: 100%;
-								text-align: left;
-								font-size: 14px;
-								width: 300rpx;
-
-								.file-name {
-									font-weight: 600;
-									margin-bottom: 15px;
-									word-break: break-all;
-								}
-							}
-
-							.file-icon {
-								font-size: 80rpx;
-								color: #d42e07;
-							}
-						}
-
-						.send-fail {
-							color: #e60c0c;
-							font-size: 50rpx;
-							cursor: pointer;
-							margin: 0 20rpx;
-						}
-					}
-
-					.message-audio {
-						display: flex;
-						align-items: center;
-
-						.chat-audio-text {
-							padding-right: 8px;
-						}
-
-						.icon-voice-play {
-							font-size: 18px;
-							padding-right: 8px;
-						}
-					}
-				}
-
-				.chat-realtime {
-					display: flex;
-					align-items: center;
-
-					.iconfont {
-						font-size: 20px;
-						padding-right: 8px;
-					}
-				}
-
-				.message-status {
-					line-height: $im-font-size-smaller-extra;
-					font-size: $im-font-size-smaller-extra;
-					padding-top: 2rpx;
-
-					.chat-readed {
-						display: block;
-						padding-top: 2rpx;
-						color: $im-text-color-lighter;
-					}
-
-					.chat-unread {
-						color: $im-color-danger;
-					}
-				}
-
-				.chat-receipt {
-					font-size: $im-font-size-smaller;
-					color: $im-text-color-lighter;
-					font-weight: 600;
-
-					.icon-ok {
-						font-size: 20px;
-						color: $im-color-success;
-					}
-				}
-			}
-		}
-
-		&.message-mine {
-			text-align: right;
-			padding-left: 0;
-			padding-right: 110rpx;
-
-			.avatar {
-				left: auto;
-				right: 0;
-			}
-
-			.content {
-				text-align: right;
-
-				.bottom {
-					padding-left: 80rpx;
-					padding-right: 0;
-
-					.message-content-wrapper {
-						flex-direction: row-reverse;
-					}
-
-					.message-text {
-						margin-left: 10px;
-						background-color: $im-color-primary-light-2;
-						color: #fff;
-
-						&:after {
-							left: auto;
-							right: -9px;
-							border-top-color: $im-color-primary-light-2;
-						}
-					}
-
-					.message-audio {
-						flex-direction: row-reverse;
-
-						.chat-audio-text {
-							padding-right: 0;
-							padding-left: 8px;
-						}
-
-						.icon-voice-play {
-							transform: rotateY(180deg);
-						}
-					}
-
-					.chat-realtime {
-						display: flex;
-						flex-direction: row-reverse;
-
-						.iconfont {
-							transform: rotateY(180deg);
-						}
-					}
-				}
-			}
-		}
-	}
-}
+<template>
+	<view class="message-item">
+		<view class="message-tip" v-if="msgInfo.type == MESSAGE_TYPE.TIP_TEXT">
+			{{ msgInfo.content }}
+		</view>
+		<view class="message-tip" v-else-if="msgInfo.type == MESSAGE_TYPE.TIP_TIME">
+			{{ $datetime.toTimeText(msgInfo.sendTime) }}
+		</view>
+		<view class="message-normal" v-else-if="isNormal" :class="{ 'message-mine': msgInfo.selfSend }">
+			<im-avatar class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="avatar"
+				:name="showName" size="small" />
+			<view class="content">
+				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="top">
+					<text>{{ showName }}</text>
+				</view>
+				<view class="bottom">
+					<view class="message-content-wrapper">
+						<view v-if="msgInfo.type == MESSAGE_TYPE.TEXT">
+							<im-context-menu :items="menuItems" @select="onSelectMenu">
+								<!-- up-parse支持点击a标签,但是不支持显示emo表情，也不支持换行 -->
+								<up-parse
+									v-if="$url.containUrl(msgInfo.content) && !emoji.containEmoji(msgInfo.content)"
+									class="message-text" :showImgMenu="false" :content="nodesText" />
+								<!-- rich-text支持显示emo表情以及消息换行，但是不支持点击a标签 -->
+								<rich-text v-else class="message-text" :nodes="nodesText" />
+							</im-context-menu>
+						</view>
+						<view class="message-image" v-else-if="msgInfo.type == MESSAGE_TYPE.IMAGE">
+							<im-context-menu :items="menuItems" @select="onSelectMenu">
+								<view class="image-box">
+									<image class="send-image" :style="imageStyle" mode="aspectFill"
+										:src="contentData.thumbUrl" lazy-load="true" @click.stop="onShowFullImage()">
+									</image>
+									<im-loading v-if="sending"></im-loading>
+								</view>
+							</im-context-menu>
+						</view>
+						<view class="message-file" v-else-if="msgInfo.type == MESSAGE_TYPE.FILE">
+							<im-context-menu :items="menuItems" @select="onSelectMenu">
+								<view class="file-box">
+									<view class="file-info" style="overflow: hidden;">
+										<u-link class="file-name" :under-line="true" color="#007BFF"
+											:href="contentData.url" :text="contentData.name"></u-link>
+										<view class="file-size">{{ fileSize }}</view>
+									</view>
+									<view class="file-icon iconfont icon-file"></view>
+									<im-loading v-if="sending"></im-loading>
+								</view>
+							</im-context-menu>
+						</view>
+						<im-context-menu v-else-if="msgInfo.type == MESSAGE_TYPE.AUDIO" :items="menuItems"
+							@select="onSelectMenu">
+							<view class="message-audio message-text" @click="onPlayAudio()">
+								<text class="iconfont icon-voice-play"></text>
+								<text class="chat-audio-text">{{ contentData.duration + '"' }}</text>
+								<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
+								<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
+							</view>
+						</im-context-menu>
+						<im-context-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
+							<view class="chat-realtime message-text" @click="$emit('call')">
+								<text v-if="msgInfo.type == MESSAGE_TYPE.ACT_RT_VOICE"
+									class="iconfont icon-chat-voice"></text>
+								<text v-if="msgInfo.type == MESSAGE_TYPE.ACT_RT_VIDEO"
+									class="iconfont icon-chat-video"></text>
+								<text>{{ msgInfo.content }}</text>
+							</view>
+						</im-context-menu>
+						<view v-if="sending && isTextMessage" class="sending">
+							<im-loading :size="40" icon-color="#656adf" :mask="false"></im-loading>
+						</view>
+						<view v-else-if="sendFail" @click="onSendFail"
+							class="send-fail iconfont icon-warning-circle-fill"></view>
+					</view>
+					<view class="message-status" v-if="!isAction && msgInfo.selfSend && !msgInfo.groupId">
+						<text class="chat-readed" v-if="msgInfo.status == MESSAGE_STATUS.READED">已读</text>
+						<text class="chat-unread" v-else>未读</text>
+					</view>
+					<view class="chat-receipt" v-if="msgInfo.receipt" @click="onShowReadedBox">
+						<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
+						<text v-else>{{ msgInfo.readedCount }}人已读</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<im-read-receipt ref="chatGroupReaded" :groupMembers="groupMembers as any[]" :msgInfo="msgInfo" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImReadReceipt from '../im-read-receipt/im-read-receipt.vue'
+import ImContextMenu from '../im-context-menu/im-context-menu.vue'
+import { MESSAGE_TYPE, MESSAGE_STATUS, datetime, dom, url, messageType, emoji } from '../../index'
+
+interface Props {
+	avatar?: string;
+	showName: string;
+	msgInfo: any;
+	groupMembers?: any[];
+}
+
+interface Emits {
+	(e: 'call'): void;
+	(e: 'longPressHead'): void;
+	(e: 'resend', msgInfo: any): void;
+	(e: 'audioStateChange', state: string, msgInfo: any): void;
+	(e: 'copy', msgInfo: any): void;
+	(e: 'recall', msgInfo: any): void;
+	(e: 'delete', msgInfo: any): void;
+	(e: 'download', msgInfo: any): void;
+}
+
+const $url = url
+const $datetime = datetime
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const audioPlayState = ref('STOP');
+const innerAudioContext = ref<UniApp.InnerAudioContext | null>(null);
+const menu = ref({
+	show: false,
+	style: ""
+});
+
+const onSendFail = () => {
+	emit("resend", props.msgInfo);
+};
+
+const onPlayAudio = () => {
+	// 初始化音频播放器
+	if (!innerAudioContext.value) {
+		innerAudioContext.value = uni.createInnerAudioContext();
+		const url = contentData.value.url;
+		innerAudioContext.value.src = url;
+		innerAudioContext.value.onEnded(() => {
+			console.log('停止');
+			audioPlayState.value = "STOP";
+			emitAudioState();
+		});
+		innerAudioContext.value.onError(() => {
+			audioPlayState.value = "STOP";
+			console.log("播放音频出错");
+			emitAudioState();
+		});
+	}
+
+	if (audioPlayState.value === 'STOP') {
+		innerAudioContext.value.play();
+		audioPlayState.value = "PLAYING";
+	} else if (audioPlayState.value === 'PLAYING') {
+		innerAudioContext.value.pause();
+		audioPlayState.value = "PAUSE";
+	} else if (audioPlayState.value === 'PAUSE') {
+		innerAudioContext.value.play();
+		audioPlayState.value = "PLAYING";
+	}
+	emitAudioState();
+};
+
+const onSelectMenu = (item: any) => {
+	emit(item.key.toLowerCase() as any, props.msgInfo);
+	menu.value.show = false;
+};
+
+const onShowFullImage = () => {
+	const imageUrl = contentData.value.originUrl;
+	uni.previewImage({
+		urls: [imageUrl]
+	});
+};
+
+const onShowReadedBox = () => {
+	// this.$refs.chatGroupReaded.open();
+};
+
+const emitAudioState = () => {
+	emit("audioStateChange", audioPlayState.value, props.msgInfo);
+};
+
+const stopPlayAudio = () => {
+	if (innerAudioContext.value) {
+		innerAudioContext.value.stop();
+		innerAudioContext.value = null;
+		audioPlayState.value = "STOP";
+	}
+};
+
+const sending = computed(() => {
+	return props.msgInfo.status === MESSAGE_STATUS.SENDING;
+});
+
+const sendFail = computed(() => {
+	return props.msgInfo.status === MESSAGE_STATUS.FAILED;
+});
+
+const contentData = computed(() => {
+	return JSON.parse(props.msgInfo.content);
+});
+
+const fileSize = computed(() => {
+	const size = contentData.value.size;
+	if (size > 1024 * 1024) {
+		return Math.round(size / 1024 / 1024) + "M";
+	}
+	if (size > 1024) {
+		return Math.round(size / 1024) + "KB";
+	}
+	return size + "B";
+});
+
+const menuItems = computed(() => {
+	const items = [];
+	if (props.msgInfo.type === MESSAGE_TYPE.TEXT) {
+		items.push({
+			key: 'COPY',
+			name: '复制',
+			icon: 'bars'
+		});
+	}
+	if (props.msgInfo.selfSend && props.msgInfo.id > 0) {
+		items.push({
+			key: 'RECALL',
+			name: '撤回',
+			icon: 'refreshempty'
+		});
+	}
+	items.push({
+		key: 'DELETE',
+		name: '删除',
+		icon: 'trash',
+		color: '#e64e4e'
+	});
+	if (props.msgInfo.type === MESSAGE_TYPE.FILE) {
+		items.push({
+			key: 'DOWNLOAD',
+			name: '下载并打开',
+			icon: 'download'
+		});
+	}
+	return items;
+});
+
+const isTextMessage = computed(() => {
+	return props.msgInfo.type === MESSAGE_TYPE.TEXT;
+});
+
+const isAction = computed(() => {
+	return messageType.isAction(props.msgInfo.type);
+});
+
+const isNormal = computed(() => {
+	const type = props.msgInfo.type;
+	return messageType.isNormal(type) || messageType.isAction(type);
+});
+
+const nodesText = computed(() => {
+	const color = props.msgInfo.selfSend ? 'white' : '';
+	let text = dom.html2Escape(props.msgInfo.content);
+	text = url.replaceURLWithHTMLLinks(text, color);
+	return emoji.transform(text, 'emoji-normal');
+});
+
+const imageStyle = computed(() => {
+	const systemInfo = uni.getWindowInfo();
+	const maxSize = systemInfo.windowWidth * 0.6;
+	const minSize = systemInfo.windowWidth * 0.2;
+	const width = contentData.value.width;
+	const height = contentData.value.height;
+
+	if (width && height) {
+		const ratio = Math.min(width, height) / Math.max(width, height);
+		const w = Math.max(width > height ? maxSize : ratio * maxSize, minSize);
+		const h = Math.max(width > height ? ratio * maxSize : maxSize, minSize);
+		return `width: ${w}px;height:${h}px;`;
+	} else {
+		// 兼容历史版本，历史数据没有记录宽高
+		return `max-width: ${maxSize}px;min-width:100px;max-height: ${maxSize}px;min-height:100px;`;
+	}
+});
+</script>
+
+<style scoped lang="scss">
+.message-item {
+	padding: 2rpx 20rpx;
+
+	.message-tip {
+		line-height: 60rpx;
+		text-align: center;
+		color: $im-text-color-lighter;
+		font-size: $im-font-size-mini;
+		padding: 10rpx;
+	}
+
+	.message-normal {
+		position: relative;
+		margin-bottom: 22rpx;
+		padding-left: 110rpx;
+		min-height: 80rpx;
+
+		.avatar {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		.content {
+			text-align: left;
+
+			.top {
+				display: flex;
+				flex-wrap: nowrap;
+				color: $im-text-color-lighter;
+				font-size: $im-font-size-small;
+				line-height: $im-font-size-small;
+				height: $im-font-size-small;
+			}
+
+			.bottom {
+				display: inline-block;
+				padding-right: 80rpx;
+				margin-top: 5rpx;
+
+				.message-content-wrapper {
+					position: relative;
+					display: flex;
+					align-items: center;
+
+					.sending {
+						position: relative;
+						margin: 0 6rpx;
+
+						.icon-loading {
+							color: $im-color-primary;
+						}
+					}
+
+					.send-fail {
+						color: #e60c0c;
+						font-size: 50rpx;
+						margin: 0 5rpx;
+					}
+
+					.message-text {
+						position: relative;
+						line-height: 1.6;
+						margin-top: 10rpx;
+						padding: 16rpx 24rpx;
+						background-color: $im-bg;
+						border-radius: 20rpx;
+						color: $im-text-color;
+						font-size: $im-font-size;
+						text-align: left;
+						display: block;
+						word-break: break-word;
+						white-space: pre-line;
+
+						&:after {
+							content: "";
+							position: absolute;
+							left: -20rpx;
+							top: 26rpx;
+							width: 6rpx;
+							height: 6rpx;
+							border-style: solid dashed dashed;
+							border-color: $im-bg transparent transparent;
+							overflow: hidden;
+							border-width: 18rpx;
+						}
+					}
+
+					.message-image {
+						display: flex;
+						flex-wrap: nowrap;
+						flex-direction: row;
+						align-items: center;
+
+						.image-box {
+							position: relative;
+
+							.send-image {
+								cursor: pointer;
+								border-radius: 10rpx;
+								background: $im-bg;
+								border: 6rpx solid $im-color-primary-light-5;
+							}
+						}
+
+						.send-fail {
+							color: $im-color-danger;
+							font-size: $im-font-size;
+							cursor: pointer;
+							margin: 0 20px;
+						}
+					}
+
+					.message-file {
+						display: flex;
+						flex-wrap: nowrap;
+						flex-direction: row;
+						align-items: center;
+						cursor: pointer;
+
+						.file-box {
+							position: relative;
+							display: flex;
+							flex-wrap: nowrap;
+							align-items: center;
+							min-height: 60px;
+							border-radius: 4px;
+							padding: 10px 15px;
+							box-shadow: $im-box-shadow-dark;
+
+							.file-info {
+								flex: 1;
+								height: 100%;
+								text-align: left;
+								font-size: 14px;
+								width: 300rpx;
+
+								.file-name {
+									font-weight: 600;
+									margin-bottom: 15px;
+									word-break: break-all;
+								}
+							}
+
+							.file-icon {
+								font-size: 80rpx;
+								color: #d42e07;
+							}
+						}
+
+						.send-fail {
+							color: #e60c0c;
+							font-size: 50rpx;
+							cursor: pointer;
+							margin: 0 20rpx;
+						}
+					}
+
+					.message-audio {
+						display: flex;
+						align-items: center;
+
+						.chat-audio-text {
+							padding-right: 8px;
+						}
+
+						.icon-voice-play {
+							font-size: 18px;
+							padding-right: 8px;
+						}
+					}
+				}
+
+				.chat-realtime {
+					display: flex;
+					align-items: center;
+
+					.iconfont {
+						font-size: 20px;
+						padding-right: 8px;
+					}
+				}
+
+				.message-status {
+					line-height: $im-font-size-mini;
+					font-size: $im-font-size-mini;
+					padding-top: 2rpx;
+
+					.chat-readed {
+						display: block;
+						padding-top: 2rpx;
+						color: $im-text-color-lighter;
+					}
+
+					.chat-unread {
+						color: $im-color-danger;
+					}
+				}
+
+				.chat-receipt {
+					font-size: $im-font-size-small;
+					color: $im-text-color-lighter;
+					font-weight: 600;
+
+					.icon-ok {
+						font-size: 20px;
+						color: $im-color-success;
+					}
+				}
+			}
+		}
+
+		&.message-mine {
+			text-align: right;
+			padding-left: 0;
+			padding-right: 110rpx;
+
+			.avatar {
+				left: auto;
+				right: 0;
+			}
+
+			.content {
+				text-align: right;
+
+				.bottom {
+					padding-left: 80rpx;
+					padding-right: 0;
+
+					.message-content-wrapper {
+						flex-direction: row-reverse;
+					}
+
+					.message-text {
+						margin-left: 10px;
+						background-color: $im-color-primary-light-2;
+						color: #fff;
+
+						&:after {
+							left: auto;
+							right: -9px;
+							border-top-color: $im-color-primary-light-2;
+						}
+					}
+
+					.message-audio {
+						flex-direction: row-reverse;
+
+						.chat-audio-text {
+							padding-right: 0;
+							padding-left: 8px;
+						}
+
+						.icon-voice-play {
+							transform: rotateY(180deg);
+						}
+					}
+
+					.chat-realtime {
+						display: flex;
+						flex-direction: row-reverse;
+
+						.iconfont {
+							transform: rotateY(180deg);
+						}
+					}
+				}
+			}
+		}
+	}
+}
 </style>