yunzhu-im-mobile/components/chat/PrivateMessageBubble.vue

<template>
	<view class="message-row-wrap">
		<view v-if="showDateLabel" class="date-separator">
			<view class="date-line-cell">
				<view class="date-line" />
			</view>
			<view class="date-text-wrap">
				<text class="date-text">{{ dateLabel }}</text>
			</view>
			<view class="date-line-cell">
				<view class="date-line" />
			</view>
		</view>
		<view
			:id="'msg-' + (msg.id || msg.tempId)"
			class="message-row"
			:class="{ isMe: msg.isMe }"
		>
			<!-- 左侧：仅对方头像 -->
			<view class="side-left">
				<view v-if="!msg.isMe" class="avatar-box">
					<SystemAvatar
						v-if="isAppSession && !senderAvatar"
						:name="senderName"
						:size="64"
						unit="rpx"
					/>
					<UserAvatar
						v-else
						:name="senderName"
						:id="senderId"
						:src="senderAvatar"
						:size="64"
						unit="rpx"
					/>
				</view>
			</view>
			<!-- 中间：气泡 + 时间 -->
			<view class="center" :class="{ isMe: msg.isMe }">
				<!-- 用户通知：与系统通知一致的卡片（绿标题条 + 白底正文 + 蓝边框按钮） -->
				<view
					v-if="isUserNotification"
					class="bubble notify-card"
				>
					<view class="notify-header">
						<text class="notify-header-text">{{ msg.title || '通知' }}</text>
					</view>
					<view class="notify-body">
						<text v-if="msg.content" class="notify-content">{{ msg.content }}</text>
					</view>
					<!-- 接收方：可打开 callback；发送方：再次提醒（不展示 action 文案） -->
					<view v-if="!msg.isMe && (msg.actionText || msg.actionUrl)" class="notify-footer">
						<view class="notify-btn" @click="onOpenNotificationUrl">
							<text class="notify-btn-text">{{ msg.actionText || '打开应用' }}</text>
						</view>
					</view>
					<view v-if="msg.isMe && !isTempMessage" class="notify-footer">
						<view
							class="notify-btn"
							:class="{ 'is-disabled': remindLoading }"
							@click="onRemindClick"
						>
							<text class="notify-btn-text">{{ remindLoading ? '发送中...' : '再次提醒' }}</text>
						</view>
					</view>
				</view>
				<view
					v-else
					class="bubble"
					:class="{ 'is-sending': msg.status === 'sending' }"
				>
					<text v-if="msgType === 'TEXT'" class="bubble-text">{{ msg.content }}</text>
					<image
						v-else-if="msgType === 'IMAGE'"
						class="bubble-img"
						:src="msg.content"
						mode="widthFix"
						@click.stop="onPreviewImage"
					/>
					<view
						v-else-if="msgType === 'VIDEO'"
						class="bubble-video-card"
						@click.stop="onOpenVideo"
					>
						<image
							class="bubble-video-icon"
							src="/static/icons/video.svg"
							mode="aspectFit"
						/>
						<view class="bubble-video-meta">
							<text class="bubble-video-title">{{ msg.title || '视频' }}</text>
							<text class="bubble-video-hint">{{ canPlayVideo ? '点击下载并播放' : '暂无法播放' }}</text>
						</view>
					</view>
					<view v-else-if="msgType === 'FILE'" class="bubble-file" @click.stop="onOpenFile">
						<text class="file-name">{{ msg.title || '文件' }}</text>
						<text v-if="msg.actionUrl" class="action-btn" @click.stop="onOpenNotificationUrl">立即处理</text>
						<text v-else-if="canOpenRemoteFile" class="action-btn" @click.stop="onOpenFile">打开</text>
					</view>
					<view v-else class="bubble-file">
						<text class="file-name">{{ msg.title || msg.content || '消息' }}</text>
						<text v-if="msg.actionUrl" class="action-btn" @click.stop="onOpenNotificationUrl">立即处理</text>
					</view>
					<view v-if="msg.isMe && msg.status === 'sending' && uploadProgressText" class="upload-hint">
						<text>{{ uploadProgressText }}</text>
					</view>
				</view>
				<view v-if="msg.isMe && msg.status === 'failed'" class="msg-failed" @click.stop="onRetry">
					<text>发送失败，点击重试</text>
				</view>
				<view class="time-row">
					<text class="bubble-time">{{ timeText }}</text>
				</view>
			</view>
			<!-- 右侧：自己头像 -->
			<view v-if="msg.isMe" class="side-right">
				<view class="avatar-box">
					<UserAvatar
						:name="meName"
						:id="meId"
						:src="meAvatar"
						:size="64"
						unit="rpx"
					/>
				</view>
			</view>
			<view v-else class="side-right placeholder" />
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'
import UserAvatar from '../UserAvatar.vue'
import SystemAvatar from '../SystemAvatar.vue'
import { normalizeMessageContentType } from '../../utils/api'
import { openVideoWithSystemPlayer } from '../../utils/openVideo'

const props = defineProps({
	msg: {
		type: Object,
		required: true
	},
	senderName: {
		type: String,
		default: ''
	},
	senderId: { type: String, default: '' },
	senderAvatar: { type: String, default: '' },
	/** 应用/系统会话：无自定义头像时用 SystemAvatar，与消息列表、应用中心渐变一致 */
	isAppSession: { type: Boolean, default: false },
	meName: { type: String, default: '我' },
	meId: { type: String, default: '' },
	meAvatar: { type: String, default: '' },
	showDateLabel: {
		type: Boolean,
		default: false
	},
	/** 当前消息是否正在「再次提醒」发送中（用于按钮 loading / 防连点） */
	remindLoading: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['preview-image', 'open-notification-url', 'retry', 'remind-user-notification'])

const isUserNotification = computed(
	() => normalizeMessageContentType(props.msg.contentType) === 'USER_NOTIFICATION'
)

const msgType = computed(() => normalizeMessageContentType(props.msg.contentType))

const canOpenRemoteFile = computed(() => {
	const c = props.msg.content
	return !!(c && /^https?:\/\//i.test(String(c)))
})

/** 可下载并系统播放：远程 URL，或发送中/本地的临时路径 */
const canPlayVideo = computed(() => {
	const c = props.msg.content
	if (!c) return false
	const s = String(c)
	if (/^https?:\/\//i.test(s)) return true
	if (props.msg.tempId || props.msg.status === 'sending') return true
	if (s.startsWith('/') || s.startsWith('file:') || /^[a-zA-Z]:\\/.test(s)) return true
	return false
})

const uploadProgressText = computed(() => {
	const m = props.msg
	if (m.status !== 'sending') return ''
	if (m.uploadProgress != null && m.uploadProgress > 0 && m.uploadProgress < 1) {
		return '上传中 ' + Math.round(m.uploadProgress * 100) + '%'
	}
	return '发送中…'
})

const isTempMessage = computed(() => {
	const m = props.msg
	return !!(m.tempId || (m.id != null && String(m.id).startsWith('temp-')))
})

const dateLabel = computed(() => {
	const t = props.msg.createdAt
	if (!t) return ''
	const d = new Date(t)
	return (d.getMonth() + 1) + '月' + d.getDate() + '日'
})

const timeText = computed(() => {
	const t = props.msg.createdAt
	if (!t) return ''
	const d = new Date(t)
	const h = d.getHours()
	const m = String(d.getMinutes()).padStart(2, '0')
	const month = d.getMonth() + 1
	const day = d.getDate()
	return month + '月' + day + '日 ' + h + ':' + m
})

function onPreviewImage() {
	if (props.msg.content) emit('preview-image', props.msg.content)
}

function onOpenVideo() {
	if (!canPlayVideo.value) {
		uni.showToast({ title: '暂无法播放', icon: 'none' })
		return
	}
	openVideoWithSystemPlayer(props.msg.content)
}

function onOpenFile() {
	const url = props.msg.content
	if (!url) return
	if (/^https?:\/\//i.test(String(url))) {
		uni.showLoading({ title: '加载中', mask: true })
		uni.downloadFile({
			url: String(url),
			success: (res) => {
				if (res.statusCode === 200 && res.tempFilePath) {
					uni.openDocument({
						filePath: res.tempFilePath,
						fail: () => {
							uni.showToast({ title: '无法打开此文件', icon: 'none' })
						}
					})
				} else {
					uni.showToast({ title: '下载失败', icon: 'none' })
				}
			},
			fail: () => {
				uni.showToast({ title: '下载失败', icon: 'none' })
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	} else {
		uni.showToast({ title: '暂无法预览', icon: 'none' })
	}
}

function onOpenNotificationUrl() {
	emit('open-notification-url', props.msg)
}

function onRemindClick() {
	if (props.remindLoading) return
	emit('remind-user-notification', props.msg)
}

function onRetry() {
	if (props.msg.status === 'failed') emit('retry', props.msg)
}
</script>

<style scoped>
.message-row-wrap {
	width: 100%;
	margin-bottom: 28rpx;
}
.date-separator {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 24rpx;
}
.date-line-cell {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	align-items: center;
}
.date-line {
	width: 100%;
	height: 1rpx;
	background: rgba(148, 163, 184, 0.4);
}
.date-text-wrap {
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0 20rpx;
}
.date-text {
	font-size: 24rpx;
	color: #9ca3af;
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(15, 23, 42, 0.04);
}
.message-row {
	display: flex;
	align-items: flex-start;
	max-width: 100%;
	overflow: hidden;
}
.message-row.isMe {
	justify-content: flex-end;
}
.side-left {
	flex-shrink: 0;
	width: 72rpx;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-right: 12rpx;
}
.message-row.isMe .side-left {
	order: 1;
	width: 40rpx;
	margin-right: 0;
	margin-left: 12rpx;
}
.avatar-box {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 78%;
}
.center.isMe {
	align-items: flex-end;
}
.bubble {
	max-width: 100%;
	min-width: 88rpx;
	padding: 22rpx 26rpx;
	border-radius: 22rpx;
	background: #e5e7eb;
	box-shadow: 0 4rpx 10rpx rgba(15, 23, 42, 0.06);
}
.bubble.notify-card {
	width: 100%;
	max-width: 560rpx;
	min-width: 0;
	padding: 0;
	border-radius: 18rpx;
	background: #ffffff;
	overflow: hidden;
}
.message-row.isMe .bubble {
	background: #259653;
}
.message-row.isMe .bubble.notify-card {
	background: #ffffff;
}
.bubble-text {
	font-size: 28rpx;
	color: #111827;
	word-break: break-all;
	line-height: 1.5;
}
.message-row.isMe .bubble-text {
	color: #f9fafb;
}
.bubble-img {
	max-width: 420rpx;
	border-radius: 16rpx;
	display: block;
	box-shadow: 0 4rpx 10rpx rgba(15, 23, 42, 0.06);
}
.bubble-video-card {
	display: flex;
	align-items: center;
	gap: 20rpx;
	max-width: 420rpx;
	min-height: 100rpx;
	overflow: hidden;
}
.bubble-video-icon {
	width: 72rpx;
	height: 72rpx;
	flex-shrink: 0;
	opacity: 0.95;
}
.bubble-video-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}
.bubble-video-title {
	font-size: 28rpx;
	color: #111827;
	word-break: break-all;
}
.message-row.isMe .bubble-video-title {
	color: #f9fafb;
}
.bubble-video-hint {
	font-size: 24rpx;
	color: #6b7280;
}
.message-row.isMe .bubble-video-hint {
	color: rgba(249, 250, 251, 0.75);
}
.bubble.is-sending {
	opacity: 0.92;
}
.upload-hint {
	margin-top: 12rpx;
	font-size: 22rpx;
	color: #9ca3af;
}
.message-row.isMe .upload-hint {
	color: rgba(249, 250, 251, 0.85);
}
.msg-failed {
	margin-top: 6rpx;
	font-size: 26rpx;
	color: #fecaca;
}
.bubble-file .file-name {
	display: block;
	font-size: 28rpx;
	color: #111827;
}
.message-row.isMe .bubble-file .file-name {
	color: #f9fafb;
}
.action-btn {
	display: inline-block;
	margin-top: 12rpx;
	font-size: 26rpx;
	color: #259653;
}
.notify-header {
	background-color: #bbf7d0;
	padding: 16rpx 20rpx;
}
.notify-header-text {
	font-size: 26rpx;
	color: #166534;
	font-weight: 600;
}
.notify-body {
	padding: 20rpx 20rpx 8rpx;
}
.notify-content {
	font-size: 26rpx;
	color: #111827;
	line-height: 1.5;
	word-break: break-all;
}
.notify-footer {
	padding: 12rpx 20rpx 20rpx;
}
.notify-btn {
	width: 100%;
	height: 72rpx;
	border-radius: 12rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #1677ff;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.notify-btn-text {
	font-size: 28rpx;
	color: #1677ff;
}
.notify-btn.is-disabled {
	opacity: 0.65;
	pointer-events: none;
}
.side-right {
	flex-shrink: 0;
	width: 72rpx;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-left: 12rpx;
}
.message-row.isMe .side-right {
	width: auto;
	max-width: 120rpx;
}
.side-right.placeholder {
	width: 0;
	max-width: 0;
	margin-left: 0;
}
.time-row {
	margin-top: 6rpx;
	max-width: 100%;
}
.bubble-time {
	font-size: 22rpx;
	color: #9ca3af;
}
</style>