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

<template>
	<view class="message-row-wrap">
		<view v-if="showDateLabel" class="date-separator">
			<view class="date-line" />
			<text class="date-text">{{ dateLabel }}</text>
			<view class="date-line" />
		</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">
					<UserAvatar
						:name="senderName"
						:id="senderId"
						:src="senderAvatar"
						:size="64"
						unit="rpx"
					/>
				</view>
			</view>
			<!-- 中间：气泡 + 时间 -->
			<view class="center" :class="{ isMe: msg.isMe }">
				<!-- 用户通知：与系统通知一致的卡片（绿标题条 + 白底正文 + 蓝边框按钮） -->
				<view
					v-if="msg.contentType === 'USER_NOTIFICATION'"
					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">
					<text v-if="msg.contentType === 'TEXT'" class="bubble-text">{{ msg.content }}</text>
					<image
						v-else-if="msg.contentType === 'IMAGE'"
						class="bubble-img"
						:src="msg.content"
						mode="widthFix"
						@click="onPreviewImage"
					/>
					<view v-else class="bubble-file">
						<text class="file-name">{{ msg.title || '文件' }}</text>
						<text v-if="msg.actionUrl" class="action-btn" @click="onOpenNotificationUrl">立即处理</text>
					</view>
				</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'

const props = defineProps({
	msg: {
		type: Object,
		required: true
	},
	senderName: {
		type: String,
		default: ''
	},
	senderId: { type: String, default: '' },
	senderAvatar: { type: String, default: '' },
	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 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 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 {
	margin-bottom: 28rpx;
}
.date-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	margin-bottom: 24rpx;
}
.date-line {
	flex: 1;
	height: 1rpx;
	background: rgba(148, 163, 184, 0.4);
}
.date-text {
	font-size: 24rpx;
	color: #9ca3af;
	flex-shrink: 0;
	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-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>