diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index 832bed6..3262f05 100644
--- a/components/message/chat/chat-layout.vue
+++ b/components/message/chat/chat-layout.vue
@@ -57,8 +57,9 @@
 			<slot name="bottom">
 				<view class="bottom-container flex-align-center" v-show="!sortMode">
 					<image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
-						:src="`/static/image/phone-message/${phone}/chat-left.png`"
-						@click="phone === 'oppo' ? chooseImage() : null"></image>
+						:src="`/static/image/phone-message/${phone}/chat-left.png`" @click="chooseImage()"></image>
+					<image v-if="phone == 'vivo'" class="add-img shrink-0"
+						src="/static/image/phone-message/vivo/add.png" @click="chooseImage()"></image>
 					<image v-if="phone == 'huawei'" class="add-img shrink-0"
 						:src="`/static/image/phone-message/huawei/emoji.png`"></image>
 					<view class="search-box flex-1 flex-align-center">
@@ -91,7 +92,7 @@
 							@click="sendMessage">
 						</image>
 						<image v-if="phone == 'huawei'" class="right-icon"
-							src="/static/image/phone-message/huawei/chat-add.png">
+							src="/static/image/phone-message/huawei/chat-add.png" @click="chooseImage()">
 						</image>
 						<image v-if="phone == 'huawei'" class="right-icon m-l-34"
 							:src="`/static/image/phone-message/huawei/${isSend ? 'send' : 'unsend'}.png`"
@@ -108,472 +109,773 @@
 	</view>
 </template>
 <script setup>
-	import {
-		reactive,
-		onMounted,
-		computed,
-		toRefs
-	} from 'vue'
-	import {
-		dateUtil,
-		util
-	} from '@/utils/common.js';
-	const props = defineProps({
-		// 手机品牌
-		phone: {
-			type: String,
-			default: 'iphone'
-		},
-		chatInfo: {
-			type: Object,
-			default: () => ({
-				unRead: false,
-				noNotice: false,
-				img: "",
-				title: "淘宝通知",
-				content: "您关注的商品降价啦，快来抢购吧！",
-				time: "2026-02-20 20:55:12"
-			})
-		},
-		// 是否处于拖拽排序模式
-		sortMode: {
-			type: Boolean,
-			default: false
-		},
-		number: {
-			type: Number,
-			default: 0
-		}
-	})
-
-	const data = reactive({
-		statusBarHeight: 0,
-		topBoxHeight: 0,
-		bottomBoxHeight: 0,
-		isSend: false,
-		content: "",
-		simIndex: 1,
-		scrollTop: 0,
-		keyboardHeight: 0,
-		lastClickTime: 0
-	})
-
-	let {
-		isSend,
-		content,
-		simIndex,
-		scrollTop
-	} = toRefs(data)
-
-	const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
-	const onInput = (e) => {
-		content.value = e.detail.html
-		const htmlStr = (content.value || '').trim()
-		if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
-			isSend.value = false
-		} else {
-			isSend.value = true
-		}
-		setTimeout(() => {
-			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-				if (rect) {
-					data.bottomBoxHeight = rect.height;
-				}
-			}).exec();
-		}, 50);
-	}
-
-
-
-	/**
-	 * 切换sim卡
-	 */
-	const changeSim = () => {
-		simIndex.value = simIndex.value == 1 ? 2 : 1
-	}
-
-	/**
-	 * 发送消息
-	 */
-	const sendMessage = () => {
-		if (!isSend.value) return
-		const date = dateUtil.now("YYYY-MM-DD HH:mm")
-		const params = {
-			content: `<p>${content.value}</p>`,
-			simIndex: simIndex.value,
-			time: date,
-			isMe: true
-		}
-		emit('send', params)
-		data.content = ""
-		data.isSend = false
-
-		// 清空 editor 中输入的值
-		uni.createSelectorQuery().select('#chat-layout-editor').context((res) => {
-			if (res && res.context) {
-				res.context.clear()
-			}
-			data.isSend = false
-		}).exec()
-
-		// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
-		setTimeout(() => {
-			data.scrollTop = 99999 + Math.random();
-			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-				if (rect) {
-					data.bottomBoxHeight = rect.height;
-				}
-			}).exec();
-			data.isSend = false
-		}, 100);
-		data.isSend = false
-	}
-
-	/**
-	 * 处理 center-box 点击事件，检测双击并区分左右
-	 */
-	const handleBoxClick = (e) => {
-		const now = Date.now();
-		const clickInterval = now - data.lastClickTime;
-
-		// 如果两次点击间隔在 300ms 以内，视为双击
-		if (clickInterval > 0 && clickInterval < 300) {
-			// 获取点击位置的 X 坐标
-			const clientX = e.detail.x || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
-
-			// 获取屏幕宽度来区分左右
-			const systemInfo = uni.getSystemInfoSync();
-			const halfWidth = systemInfo.screenWidth / 2;
-
-			if (clientX < halfWidth) {
-				console.log('双击左侧');
-				emit('dblclick-left');
-			} else {
-				console.log('双击右侧');
-				emit('dblclick-right');
-			}
-
-			// 成功触发双击后重置时间，防止连续三次点击触发两次双击
-			data.lastClickTime = 0;
-		} else {
-			data.lastClickTime = now;
-		}
-	}
-
-
-	const handleTitleClick = () => {
-		emit('title-click');
-	}
-
-
-	// 处理标题显示
-	const displayTitle = computed(() => {
-		let title = props.chatInfo.title || '';
-		if (props.phone === 'oppo') {
-			const noSpace = title.replace(/\s+/g, '');
-			if (/^\d{11}$/.test(noSpace)) {
-				return noSpace.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
-			}
-		}
-		return title;
-	})
-
-	// 展示文字信息
-	const showInfo = computed(() => {
-		let placeholder
-		switch (props.phone) {
-			case "iphone":
-				placeholder = '信息 · 短信'
-				break;
-			case "mi":
-				placeholder = '短信'
-				break;
-			case "oppo":
-				placeholder = '5G 消息'
-				break;
-			case "huawei":
-				placeholder = '短信/彩信'
-				break;
-			case "vivo":
-				placeholder = '输入内容'
-				break;
-			default:
-				break;
-		}
-		return {
-			placeholder
-		}
-	})
-
-	/**
-	 * 选择图片并发送
-	 */
-	const chooseImage = () => {
-		uni.chooseImage({
-			count: 1, // 仅选一张
-			sizeType: ['original', 'compressed'], // 原图或压缩图
-			sourceType: ['album', 'camera'], // 从相册选择或拍照
-			success: (res) => {
-				const tempFilePaths = res.tempFilePaths;
-				if (tempFilePaths.length > 0) {
-					const tempPath = tempFilePaths[0];
-
-					const processImage = (finalPath) => {
-						// 获取图片信息，计算横竖向及相应宽高
-						uni.getImageInfo({
-							src: finalPath,
-							success: (image) => {
-								let w = image.width;
-								let h = image.height;
-
-								// 根据 EXIF 方向修正实际视觉宽高
-								if (image.orientation && ['left', 'right', 'left-mirrored',
-										'right-mirrored'
-									].includes(image.orientation)) {
-									w = image.height;
-									h = image.width;
-								}
-
-								const isHorizontal = w >= h;
-								const width = isHorizontal ? '368rpx' : '274rpx';
-								const height = isHorizontal ? '274rpx' : '368rpx';
-
-								const date = dateUtil.now("YYYY-MM-DD HH:mm")
-								// 封装成HTML的img标签作为消息内容
-								const content =
-									`<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
-								const params = {
-									content: content,
-									imgUrl: finalPath,
-									type: 'image',
-									imgWidth: width,
-									imgHeight: height,
-									simIndex: simIndex.value,
-									time: date,
-									isMe: true
-								}
-								emit('send', params)
-
-								// 延迟拉动到底部
-								setTimeout(() => {
-									data.scrollTop = 99999 + Math.random();
-									uni.createSelectorQuery().select('.bottom-box')
-										.boundingClientRect(rect => {
-											if (rect) {
-												data.bottomBoxHeight = rect
-													.height;
-											}
-										}).exec();
-								}, 100);
-							}
-						})
-					};
-
-					// #ifdef APP-PLUS
-					uni.saveFile({
-						tempFilePath: tempPath,
-						success: (saveRes) => {
-							processImage(saveRes.savedFilePath);
-						},
-						fail: () => {
-							processImage(tempPath);
-						}
-					});
-					// #endif
-					// #ifndef APP-PLUS
-					processImage(tempPath);
-					// #endif
-				}
-			}
+import {
+	reactive,
+	onMounted,
+	computed,
+	toRefs
+} from 'vue'
+import {
+	dateUtil,
+	util
+} from '@/utils/common.js';
+const props = defineProps({
+	// 手机品牌
+	phone: {
+		type: String,
+		default: 'iphone'
+	},
+	chatInfo: {
+		type: Object,
+		default: () => ({
+			unRead: false,
+			noNotice: false,
+			img: "",
+			title: "淘宝通知",
+			content: "您关注的商品降价啦，快来抢购吧！",
+			time: "2026-02-20 20:55:12"
 		})
+	},
+	// 是否处于拖拽排序模式
+	sortMode: {
+		type: Boolean,
+		default: false
+	},
+	number: {
+		type: Number,
+		default: 0
 	}
+})
 
-	onMounted(() => {
-		// 同步获取系统信息
+const data = reactive({
+	statusBarHeight: 0,
+	topBoxHeight: 0,
+	bottomBoxHeight: 0,
+	isSend: false,
+	content: "",
+	simIndex: 1,
+	scrollTop: 0,
+	keyboardHeight: 0,
+	lastClickTime: 0
+})
+
+let {
+	isSend,
+	content,
+	simIndex,
+	scrollTop
+} = toRefs(data)
+
+const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
+const onInput = (e) => {
+	content.value = e.detail.html
+	const htmlStr = (content.value || '').trim()
+	if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
+		isSend.value = false
+	} else {
+		isSend.value = true
+	}
+	setTimeout(() => {
+		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+			if (rect) {
+				data.bottomBoxHeight = rect.height;
+			}
+		}).exec();
+	}, 50);
+}
+
+
+
+/**
+ * 切换sim卡
+ */
+const changeSim = () => {
+	simIndex.value = simIndex.value == 1 ? 2 : 1
+}
+
+/**
+ * 发送消息
+ */
+const sendMessage = () => {
+	if (!isSend.value) return
+	const date = dateUtil.now("YYYY-MM-DD HH:mm")
+	const params = {
+		content: `<p>${content.value}</p>`,
+		simIndex: simIndex.value,
+		time: date,
+		isMe: true
+	}
+	emit('send', params)
+	data.content = ""
+	data.isSend = false
+
+	// 清空 editor 中输入的值
+	uni.createSelectorQuery().select('#chat-layout-editor').context((res) => {
+		if (res && res.context) {
+			res.context.clear()
+		}
+		data.isSend = false
+	}).exec()
+
+	// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+	setTimeout(() => {
+		data.scrollTop = 99999 + Math.random();
+		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+			if (rect) {
+				data.bottomBoxHeight = rect.height;
+			}
+		}).exec();
+		data.isSend = false
+	}, 100);
+	data.isSend = false
+}
+
+/**
+ * 处理 center-box 点击事件，检测双击并区分左右
+ */
+const handleBoxClick = (e) => {
+	const now = Date.now();
+	const clickInterval = now - data.lastClickTime;
+
+	// 如果两次点击间隔在 300ms 以内，视为双击
+	if (clickInterval > 0 && clickInterval < 300) {
+		// 获取点击位置的 X 坐标
+		const clientX = e.detail.x || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
+
+		// 获取屏幕宽度来区分左右
 		const systemInfo = uni.getSystemInfoSync();
-		data.statusBarHeight = systemInfo.statusBarHeight || 0;
+		const halfWidth = systemInfo.screenWidth / 2;
 
-		// 动态获取 top-box 和 bottom-box 高度
-		setTimeout(() => {
-			uni.createSelectorQuery().select('.top-box').boundingClientRect(rect => {
-				if (rect) {
-					data.topBoxHeight = rect.height;
-				}
-			}).exec();
-			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-				if (rect) {
-					data.bottomBoxHeight = rect.height;
-				}
-			}).exec();
-		}, 50);
+		if (clientX < halfWidth) {
+			console.log('双击左侧');
+			emit('dblclick-left');
+		} else {
+			console.log('双击右侧');
+			emit('dblclick-right');
+		}
 
-		// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
-		setTimeout(() => {
-			data.scrollTop = 99999 + Math.random();
-			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-				if (rect) {
-					data.bottomBoxHeight = rect.height;
-				}
-			}).exec();
-		}, 300);
+		// 成功触发双击后重置时间，防止连续三次点击触发两次双击
+		data.lastClickTime = 0;
+	} else {
+		data.lastClickTime = now;
+	}
+}
 
+
+const handleTitleClick = () => {
+	emit('title-click');
+}
+
+
+// 处理标题显示
+const displayTitle = computed(() => {
+	let title = props.chatInfo.title || '';
+	if (props.phone === 'oppo') {
+		const noSpace = title.replace(/\s+/g, '');
+		if (/^\d{11}$/.test(noSpace)) {
+			return noSpace.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
+		}
+	}
+	return title;
+})
+
+// 展示文字信息
+const showInfo = computed(() => {
+	let placeholder
+	switch (props.phone) {
+		case "iphone":
+			placeholder = '信息 · 短信'
+			break;
+		case "mi":
+			placeholder = '短信'
+			break;
+		case "oppo":
+			placeholder = '5G 消息'
+			break;
+		case "huawei":
+			placeholder = '短信/彩信'
+			break;
+		case "vivo":
+			placeholder = '输入内容'
+			break;
+		default:
+			break;
+	}
+	return {
+		placeholder
+	}
+})
+
+/**
+ * 选择图片并发送
+ */
+const chooseImage = () => {
+	uni.chooseImage({
+		count: 1, // 仅选一张
+		sizeType: ['original', 'compressed'], // 原图或压缩图
+		sourceType: ['album', 'camera'], // 从相册选择或拍照
+		success: (res) => {
+			const tempFilePaths = res.tempFilePaths;
+			if (tempFilePaths.length > 0) {
+				const tempPath = tempFilePaths[0];
+
+				const processImage = (finalPath) => {
+					// 获取图片信息，计算横竖向及相应宽高
+					uni.getImageInfo({
+						src: finalPath,
+						success: (image) => {
+							let w = image.width;
+							let h = image.height;
+
+							// 根据 EXIF 方向修正实际视觉宽高
+							if (image.orientation && ['left', 'right', 'left-mirrored',
+								'right-mirrored'
+							].includes(image.orientation)) {
+								w = image.height;
+								h = image.width;
+							}
+
+							const isHorizontal = w >= h;
+							const width = isHorizontal ? '368rpx' : '274rpx';
+							const height = isHorizontal ? '274rpx' : '368rpx';
+
+							const date = dateUtil.now("YYYY-MM-DD HH:mm")
+							// 封装成HTML的img标签作为消息内容
+							const content =
+								`<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
+							const params = {
+								content: content,
+								imgUrl: finalPath,
+								type: 'image',
+								imgWidth: width,
+								imgHeight: height,
+								simIndex: simIndex.value,
+								time: date,
+								isMe: true
+							}
+							emit('send', params)
+
+							// 延迟拉动到底部
+							setTimeout(() => {
+								data.scrollTop = 99999 + Math.random();
+								uni.createSelectorQuery().select('.bottom-box')
+									.boundingClientRect(rect => {
+										if (rect) {
+											data.bottomBoxHeight = rect
+												.height;
+										}
+									}).exec();
+							}, 100);
+						}
+					})
+				};
+
+				// #ifdef APP-PLUS
+				uni.saveFile({
+					tempFilePath: tempPath,
+					success: (saveRes) => {
+						processImage(saveRes.savedFilePath);
+					},
+					fail: () => {
+						processImage(tempPath);
+					}
+				});
+				// #endif
+				// #ifndef APP-PLUS
+				processImage(tempPath);
+				// #endif
+			}
+		}
 	})
+}
+
+onMounted(() => {
+	// 同步获取系统信息
+	const systemInfo = uni.getSystemInfoSync();
+	data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+	// 动态获取 top-box 和 bottom-box 高度
+	setTimeout(() => {
+		uni.createSelectorQuery().select('.top-box').boundingClientRect(rect => {
+			if (rect) {
+				data.topBoxHeight = rect.height;
+			}
+		}).exec();
+		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+			if (rect) {
+				data.bottomBoxHeight = rect.height;
+			}
+		}).exec();
+	}, 50);
+
+	// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+	setTimeout(() => {
+		data.scrollTop = 99999 + Math.random();
+		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+			if (rect) {
+				data.bottomBoxHeight = rect.height;
+			}
+		}).exec();
+	}, 300);
+
+})
 </script>
 <style>
-	@import '@/common/main.css';
+@import '@/common/main.css';
 </style>
 <style lang="less" scoped>
-	.page-container {
-		width: 100vw;
-		height: 100vh;
-		background-color: #fff;
+.page-container {
+	width: 100vw;
+	height: 100vh;
+	background-color: #fff;
+}
+
+.m-l-34 {
+	margin-left: 34rpx;
+}
+
+.m-l-50 {
+	margin-left: 50rpx;
+}
+
+.center-box {
+	overflow: hidden;
+	// overflow-y: scroll;
+	// padding-bottom: 12px;
+}
+
+.fixed-bottom-box {
+	position: fixed;
+	width: 100%;
+	background: #fff;
+	bottom: 0;
+	left: 0;
+}
+
+
+.fixed-top-box {
+	position: fixed;
+	width: 100%;
+	z-index: 9;
+	left: 0;
+	top: 0;
+}
+
+//苹果样式
+.iphone-style {
+	.circle {
+		border-radius: 50% !important;
 	}
 
-	.m-l-34 {
-		margin-left: 34rpx;
+	.square {
+		border-radius: 16rpx !important;
 	}
 
-	.m-l-50 {
-		margin-left: 50rpx;
+	.status-placeholder {
+		background-color: #F7F7F7;
 	}
 
-	.center-box {
-		overflow: hidden;
-		// overflow-y: scroll;
-		// padding-bottom: 12px;
-	}
+	.top-box {
 
-	.fixed-bottom-box {
-		position: fixed;
-		width: 100%;
-		background: #fff;
-		bottom: 0;
-		left: 0;
-	}
-
-
-	.fixed-top-box {
-		position: fixed;
-		width: 100%;
-		z-index: 9;
-		left: 0;
-		top: 0;
-	}
-
-	//苹果样式
-	.iphone-style {
-		.circle {
-			border-radius: 50% !important;
-		}
-
-		.square {
-			border-radius: 16rpx !important;
-		}
-
-		.status-placeholder {
+		.top-container {
+			padding: 32rpx 24rpx 20rpx;
 			background-color: #F7F7F7;
-		}
+			box-shadow: inset 0 -0.3px 0 0 #B5B5B5;
 
-		.top-box {
+			.left {
+				width: 180rpx;
 
-			.top-container {
-				padding: 32rpx 24rpx 20rpx;
-				background-color: #F7F7F7;
-				box-shadow: inset 0 -0.3px 0 0 #B5B5B5;
-
-				.left {
-					width: 180rpx;
-
-					image {
-						width: 40rpx;
-						height: 40rpx;
-					}
-
-					.number-box {
-						height: 36rpx;
-						min-width: 36rpx;
-						text-align: center;
-						font-size: 12px;
-						line-height: 24rpx;
-						padding: 6rpx 10rpx;
-						border-radius: 18rpx;
-						color: #fff;
-						background-color: #0276FF;
-						margin-left: 4rpx;
-						flex-shrink: 0;
-					}
+				image {
+					width: 40rpx;
+					height: 40rpx;
 				}
 
-				.center {
-					height: 96rpx;
-
-					.img {
-						width: 96rpx;
-						height: 96rpx;
-						border-radius: 50%;
-					}
-				}
-
-				.right {
-					width: 180rpx;
-
-				}
-
-				.text-box {
-					margin-top: 10rpx;
-					height: 20rpx;
-
-					.title {
-						text-align: center;
-						max-width: 400rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						font-size: 20rpx;
-						color: #1A1A1A;
-						left: 20rpx;
-						margin-right: 6rpx;
-						font-weight: 500;
-					}
+				.number-box {
+					height: 36rpx;
+					min-width: 36rpx;
+					text-align: center;
+					font-size: 12px;
+					line-height: 24rpx;
+					padding: 6rpx 10rpx;
+					border-radius: 18rpx;
+					color: #fff;
+					background-color: #0276FF;
+					margin-left: 4rpx;
+					flex-shrink: 0;
 				}
 			}
 
+			.center {
+				height: 96rpx;
 
+				.img {
+					width: 96rpx;
+					height: 96rpx;
+					border-radius: 50%;
+				}
+			}
+
+			.right {
+				width: 180rpx;
+
+			}
+
+			.text-box {
+				margin-top: 10rpx;
+				height: 20rpx;
+
+				.title {
+					text-align: center;
+					max-width: 400rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: 20rpx;
+					color: #1A1A1A;
+					left: 20rpx;
+					margin-right: 6rpx;
+					font-weight: 500;
+				}
+			}
 		}
 
 
+	}
 
-		.bottom-box {
-			padding-bottom: 10rpx;
+
+
+	.bottom-box {
+		padding-bottom: 10rpx;
+	}
+
+	.safe-area {
+		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+	}
+
+	.bottom-container {
+		padding: 10rpx 28rpx 0;
+
+		.add-img {
+			width: 66rpx;
+			height: 66rpx;
+			margin-right: 24rpx;
 		}
 
-		.safe-area {
-			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
-			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+		.search-box {
+			min-height: 70rpx;
+			border-radius: 35rpx 35rpx 35rpx 35rpx;
+			border: 2rpx solid #DFDFDF;
+			padding: 8rpx 26rpx;
+
+			::v-deep .ql-container {
+				// height: 100%;
+				min-height: 48rpx !important;
+				font-size: 32rpx;
+			}
+
+			::v-deep .ql-blank::before {
+				color: #C3C3C3;
+				font-size: 32rpx;
+				line-height: inherit;
+				font-style: normal;
+			}
+
+			.input {
+				height: 100%;
+				width: auto;
+				min-height: 46rpx;
+				max-height: 160rpx;
+				overflow: hidden;
+				overflow-y: scroll;
+				// min-height: 48rpx !important;
+			}
+
+			.right-icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-left: 20rpx;
+			}
+
+			.right-send-icon {
+				width: 52rpx;
+				height: 52rpx;
+				margin-left: 20rpx;
+			}
 		}
 
+	}
+}
+
+//小米样式
+.mi-style {
+	background-color: #F7F7F7 !important;
+
+	.top-box {
+
+		.top-container {
+			padding: 0 20rpx 0 52rpx;
+			background-color: #F7F7F7;
+			height: 88rpx;
+
+			.left {
+				width: 80rpx;
+
+				image {
+					width: 48rpx;
+					height: 48rpx;
+				}
+
+				.number-box {
+					height: 36rpx;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					padding: 6rpx 10rpx;
+					border-radius: 18rpx;
+					color: #fff;
+					background-color: #0276FF;
+					margin-left: 4rpx;
+				}
+			}
+
+			.center {
+				flex: 1;
+				display: flex;
+				align-items: center;
+
+				.title {
+					flex: 1;
+					display: block;
+					font-size: 36rpx;
+					color: #1A1A1A;
+					font-weight: 500;
+					width: 20px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					margin-right: 10rpx;
+				}
+			}
+
+			.right {
+				width: 80rpx;
+				text-align: right;
+
+				.img {
+					width: 48rpx;
+					height: 48rpx;
+				}
+
+			}
+
+			.text-box {
+				.title {
+					font-size: 20rpx;
+					color: #1A1A1A;
+					left: 20rpx;
+					margin-right: 6rpx;
+				}
+			}
+		}
+
+
+	}
+
+	.bottom-box {
+		padding-bottom: 20rpx;
+	}
+
+	.safe-area {
+		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	}
+
+	.bottom-box {
+
 		.bottom-container {
-			padding: 10rpx 28rpx 0;
+			padding: 20rpx 28rpx 0;
+
 
 			.add-img {
-				width: 66rpx;
-				height: 66rpx;
-				margin-right: 24rpx;
+				width: 72rpx;
+				height: 72rpx;
 			}
 
 			.search-box {
-				min-height: 70rpx;
-				border-radius: 35rpx 35rpx 35rpx 35rpx;
-				border: 2rpx solid #DFDFDF;
-				padding: 8rpx 26rpx;
+				min-height: 96rpx;
+				border-radius: 28rpx;
+				padding: 12rpx 42rpx;
+				margin: 0 20rpx;
+				background-color: #E8E8E8;
 
 				::v-deep .ql-container {
-					// height: 100%;
-					min-height: 48rpx !important;
-					font-size: 32rpx;
+					height: 100%;
+					min-height: auto;
 				}
 
 				::v-deep .ql-blank::before {
-					color: #C3C3C3;
+					color: #8B8B8B;
+					font-size: 30rpx;
+					line-height: inherit;
+					font-style: normal;
+				}
+
+				.input {
+					height: 100%;
+					width: auto;
+					min-height: 46rpx;
+					max-height: 160rpx;
+					overflow: hidden;
+					overflow-y: scroll;
+				}
+
+				.right-icon {
+					width: 32rpx;
+					height: 32rpx;
+					margin-left: 20rpx;
+				}
+			}
+
+			.right-icon {
+				width: 72rpx;
+				height: 72rpx;
+			}
+		}
+	}
+
+}
+
+//oppo样式
+.oppo-style {
+	background-color: #F0F1F3 !important;
+
+	.top-box {
+
+		.top-container::after {
+			position: absolute;
+			content: '';
+			width: 100%;
+			height: 1px;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background-color: #D0D1D3;
+			transform: scaleY(0.3);
+		}
+
+		.top-container {
+			position: relative;
+			padding: 0 52rpx;
+			background-color: #F0F1F3;
+			height: 98rpx;
+			padding-top: 6rpx;
+			padding-bottom: 12rpx;
+
+			.left {
+
+				image {
+					width: 48rpx;
+					height: 48rpx;
+				}
+
+				.number-box {
+					height: 36rpx;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					padding: 6rpx 10rpx;
+					border-radius: 18rpx;
+					color: #fff;
+					background-color: #0276FF;
+					margin-left: 4rpx;
+				}
+			}
+
+			.center {
+				flex: 1;
+				width: 20%;
+				height: 100%;
+				margin: 0 18rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.title {
+					width: 100%;
+					font-size: 36rpx;
+					color: #1A1A1A;
+					font-weight: 500;
+					line-height: 36rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					margin-right: 10rpx;
+				}
+
+				.second-text {
+					color: #6F6F6F;
+					font-size: 28rpx;
+					line-height: 28rpx;
+					margin-top: 14rpx;
+				}
+			}
+
+			.right {
+				text-align: right;
+
+				.img {
+					width: 48rpx;
+					height: 48rpx;
+				}
+
+			}
+
+			.text-box {
+				.title {
+					font-size: 20rpx;
+					color: #1A1A1A;
+					left: 20rpx;
+					margin-right: 6rpx;
+				}
+			}
+		}
+
+
+	}
+
+	.bottom-box {
+		padding-bottom: 10rpx;
+	}
+
+	.safe-area {
+		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+	}
+
+
+	.bottom-box {
+		background-color: #FAFAFA;
+
+		.bottom-container {
+			padding: 16rpx 32rpx 0;
+
+			.add-img {
+				width: 84rpx;
+				height: 84rpx;
+			}
+
+			.search-box {
+				min-height: 84rpx;
+				border-radius: 42rpx;
+				margin: 0 16rpx;
+				background-color: #E6E6E6;
+				padding: 12rpx 38rpx;
+
+				::v-deep .ql-container {
+					height: 100%;
+					min-height: auto;
+				}
+
+				::v-deep .ql-blank::before {
+					color: #6C6C6E;
 					font-size: 32rpx;
 					line-height: inherit;
 					font-style: normal;
@@ -586,125 +888,160 @@
 					max-height: 160rpx;
 					overflow: hidden;
 					overflow-y: scroll;
-					// min-height: 48rpx !important;
+					caret-color: #1ABA11;
 				}
 
 				.right-icon {
 					width: 32rpx;
-					height: 32rpx;
-					margin-left: 20rpx;
-				}
-
-				.right-send-icon {
-					width: 52rpx;
-					height: 52rpx;
-					margin-left: 20rpx;
+					height: 40rpx;
+					margin-right: 14rpx;
 				}
 			}
 
+			.right-icon {
+				width: 84rpx;
+				height: 84rpx;
+			}
 		}
 	}
 
-	//小米样式
-	.mi-style {
-		background-color: #F7F7F7 !important;
+}
 
-		.top-box {
+//华为样式
+.huawei-style {
+	background-color: #F1F5F8 !important;
 
-			.top-container {
-				padding: 0 20rpx 0 52rpx;
-				background-color: #F7F7F7;
-				height: 88rpx;
+	.top-box {
 
-				.left {
-					width: 80rpx;
+		.top-container {
+			padding: 0 32rpx;
+			background-color: #F1F5F8;
+			height: 88rpx;
 
-					image {
-						width: 48rpx;
-						height: 48rpx;
-					}
+			.left {
 
-					.number-box {
-						height: 36rpx;
-						font-size: 24rpx;
-						line-height: 24rpx;
-						padding: 6rpx 10rpx;
-						border-radius: 18rpx;
-						color: #fff;
-						background-color: #0276FF;
-						margin-left: 4rpx;
-					}
+				image {
+					width: 76rpx;
+					height: 76rpx;
 				}
 
-				.center {
-					flex: 1;
-					display: flex;
-					align-items: center;
-
-					.title {
-						flex: 1;
-						display: block;
-						font-size: 36rpx;
-						color: #1A1A1A;
-						font-weight: 500;
-						width: 20px;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						margin-right: 10rpx;
-					}
-				}
-
-				.right {
-					width: 80rpx;
-					text-align: right;
-
-					.img {
-						width: 48rpx;
-						height: 48rpx;
-					}
-
-				}
-
-				.text-box {
-					.title {
-						font-size: 20rpx;
-						color: #1A1A1A;
-						left: 20rpx;
-						margin-right: 6rpx;
-					}
+				.number-box {
+					height: 36rpx;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					padding: 6rpx 10rpx;
+					border-radius: 18rpx;
+					color: #fff;
+					background-color: #0276FF;
+					margin-left: 4rpx;
 				}
 			}
 
+			.center {
+				flex: 1;
+				width: 20%;
+				height: 100%;
+				margin: 0 16rpx;
+				display: flex;
+				align-items: center;
+				overflow: hidden;
 
-		}
+				.img {
+					width: 72rpx;
+					height: 72rpx;
+					flex-shrink: 0;
+					margin-right: 18rpx;
+					border-radius: 50%;
+				}
 
-		.bottom-box {
-			padding-bottom: 20rpx;
-		}
+				.title {
+					font-size: 40rpx;
+					color: #1A1A1A;
+					font-weight: 500;
+					line-height: 40rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					margin-right: 10rpx;
+				}
 
-		.safe-area {
-			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-		}
+				.second-text {
+					color: #6F6F6F;
+					font-size: 28rpx;
+					line-height: 28rpx;
+					margin-top: 14rpx;
+				}
+			}
 
-		.bottom-box {
+			.right {
+				text-align: right;
 
-			.bottom-container {
-				padding: 20rpx 28rpx 0;
-
-
-				.add-img {
+				.img {
 					width: 72rpx;
 					height: 72rpx;
 				}
 
-				.search-box {
-					min-height: 96rpx;
-					border-radius: 28rpx;
-					padding: 12rpx 42rpx;
-					margin: 0 20rpx;
-					background-color: #E8E8E8;
+			}
+
+			.text-box {
+				.title {
+					font-size: 20rpx;
+					color: #1A1A1A;
+					left: 20rpx;
+					margin-right: 6rpx;
+				}
+			}
+		}
+
+
+	}
+
+	.bottom-box {
+		padding-bottom: 12rpx;
+	}
+
+	.safe-area {
+		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
+	}
+
+	.bottom-box {
+		background-color: #FFFFFF;
+
+		.bottom-container {
+			padding: 12rpx 32rpx 0;
+
+			.add-img {
+				width: 44rpx;
+				height: 44rpx;
+			}
+
+			.search-box {
+				min-height: 76rpx;
+				border-radius: 42rpx;
+				padding: 10rpx 28rpx;
+				margin: 0 30rpx;
+				background-color: #F4F4F4;
+
+				.ka {
+					width: 44rpx;
+					height: 44rpx;
+				}
+
+				.down {
+					width: 24rpx;
+					height: 24rpx;
+					margin-left: 10rpx;
+				}
+
+				.input {
+					height: 100%;
+					width: auto;
+					min-height: 46rpx;
+					max-height: 160rpx;
+					overflow: hidden;
+					overflow-y: scroll;
+					margin-left: 32rpx;
 
 					::v-deep .ql-container {
 						height: 100%;
@@ -712,161 +1049,131 @@
 					}
 
 					::v-deep .ql-blank::before {
-						color: #8B8B8B;
+						color: #606060;
 						font-size: 30rpx;
 						line-height: inherit;
 						font-style: normal;
 					}
-
-					.input {
-						height: 100%;
-						width: auto;
-						min-height: 46rpx;
-						max-height: 160rpx;
-						overflow: hidden;
-						overflow-y: scroll;
-					}
-
-					.right-icon {
-						width: 32rpx;
-						height: 32rpx;
-						margin-left: 20rpx;
-					}
 				}
 
 				.right-icon {
-					width: 72rpx;
-					height: 72rpx;
+					width: 32rpx;
+					height: 40rpx;
+					margin-right: 14rpx;
+				}
+			}
+
+			.right-icon {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
+	}
+
+}
+
+
+//vivo样式
+.vivo-style {
+	background-color: #F6F6F6 !important;
+
+	.top-box {
+
+		.top-container {
+			padding: 66rpx 52rpx 20rpx 42rpx;
+			background-color: #F6F6F6;
+
+			.left {
+
+				image {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+
+			.center {
+				flex: 1;
+				width: 20%;
+				height: 100%;
+				margin: 0 18rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				overflow: hidden;
+
+				.title {
+					font-size: 34rpx;
+					color: #1A1A1A;
+					font-weight: 500;
+					line-height: 34rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					margin-right: 10rpx;
+				}
+			}
+
+			.right {
+				text-align: right;
+
+				.img {
+					width: 44rpx;
+					height: 44rpx;
+				}
+
+			}
+
+			.text-box {
+				.title {
+					font-size: 20rpx;
+					color: #1A1A1A;
+					left: 20rpx;
+					margin-right: 6rpx;
 				}
 			}
 		}
 
+
 	}
 
-	//oppo样式
-	.oppo-style {
-		background-color: #F0F1F3 !important;
+	.bottom-box {
+		padding-bottom: 20rpx;
+	}
 
-		.top-box {
+	.safe-area {
+		padding-bottom: 20rpx;
+		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	}
 
-			.top-container::after {
-				position: absolute;
-				content: '';
-				width: 100%;
-				height: 1px;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				background-color: #D0D1D3;
-				transform: scaleY(0.3);
-			}
+	.bottom-box {
+		background-color: #fff;
 
-			.top-container {
-				position: relative;
-				padding: 0 52rpx;
-				background-color: #F0F1F3;
-				height: 98rpx;
-				padding-top: 6rpx;
-				padding-bottom: 12rpx;
 
-				.left {
+		.add-img {
+			width: 36rpx;
+			height: 36rpx;
+			margin-right: 40rpx;
+		}
 
-					image {
-						width: 48rpx;
-						height: 48rpx;
-					}
 
-					.number-box {
-						height: 36rpx;
-						font-size: 24rpx;
-						line-height: 24rpx;
-						padding: 6rpx 10rpx;
-						border-radius: 18rpx;
-						color: #fff;
-						background-color: #0276FF;
-						margin-left: 4rpx;
-					}
-				}
+		.bottom-container {
+			padding: 20rpx 48rpx 0 56rpx;
 
-				.center {
-					flex: 1;
-					width: 20%;
+			.search-box {
+				min-height: 64rpx;
+				border-radius: 16rpx;
+				padding: 8rpx 18rpx;
+				margin-right: 42rpx;
+				background-color: #F2F2F2;
+
+				.input {
 					height: 100%;
-					margin: 0 18rpx;
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-
-					.title {
-						width: 100%;
-						font-size: 36rpx;
-						color: #1A1A1A;
-						font-weight: 500;
-						line-height: 36rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						margin-right: 10rpx;
-					}
-
-					.second-text {
-						color: #6F6F6F;
-						font-size: 28rpx;
-						line-height: 28rpx;
-						margin-top: 14rpx;
-					}
-				}
-
-				.right {
-					text-align: right;
-
-					.img {
-						width: 48rpx;
-						height: 48rpx;
-					}
-
-				}
-
-				.text-box {
-					.title {
-						font-size: 20rpx;
-						color: #1A1A1A;
-						left: 20rpx;
-						margin-right: 6rpx;
-					}
-				}
-			}
-
-
-		}
-
-		.bottom-box {
-			padding-bottom: 10rpx;
-		}
-
-		.safe-area {
-			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
-			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
-		}
-
-
-		.bottom-box {
-			background-color: #FAFAFA;
-
-			.bottom-container {
-				padding: 16rpx 32rpx 0;
-
-				.add-img {
-					width: 84rpx;
-					height: 84rpx;
-				}
-
-				.search-box {
-					min-height: 84rpx;
-					border-radius: 42rpx;
-					margin: 0 16rpx;
-					background-color: #E6E6E6;
-					padding: 12rpx 38rpx;
+					width: auto;
+					min-height: 46rpx;
+					max-height: 160rpx;
+					overflow: hidden;
+					overflow-y: scroll;
 
 					::v-deep .ql-container {
 						height: 100%;
@@ -874,328 +1181,30 @@
 					}
 
 					::v-deep .ql-blank::before {
-						color: #6C6C6E;
-						font-size: 32rpx;
+						color: #C8C8C8;
+						font-size: 30rpx;
 						line-height: inherit;
 						font-style: normal;
 					}
-
-					.input {
-						height: 100%;
-						width: auto;
-						min-height: 46rpx;
-						max-height: 160rpx;
-						overflow: hidden;
-						overflow-y: scroll;
-						caret-color: #1ABA11;
-					}
-
-					.right-icon {
-						width: 32rpx;
-						height: 40rpx;
-						margin-right: 14rpx;
-					}
-				}
-
-				.right-icon {
-					width: 84rpx;
-					height: 84rpx;
 				}
 			}
-		}
 
+			.send-text {
+
+				color: #9CC9FF;
+				font-size: 34rpx;
+			}
+
+			.send-text-active {
+				color: #0078FE;
+			}
+		}
 	}
 
-	//华为样式
-	.huawei-style {
-		background-color: #F1F5F8 !important;
+}
 
-		.top-box {
-
-			.top-container {
-				padding: 0 32rpx;
-				background-color: #F1F5F8;
-				height: 88rpx;
-
-				.left {
-
-					image {
-						width: 76rpx;
-						height: 76rpx;
-					}
-
-					.number-box {
-						height: 36rpx;
-						font-size: 24rpx;
-						line-height: 24rpx;
-						padding: 6rpx 10rpx;
-						border-radius: 18rpx;
-						color: #fff;
-						background-color: #0276FF;
-						margin-left: 4rpx;
-					}
-				}
-
-				.center {
-					flex: 1;
-					width: 20%;
-					height: 100%;
-					margin: 0 16rpx;
-					display: flex;
-					align-items: center;
-					overflow: hidden;
-
-					.img {
-						width: 72rpx;
-						height: 72rpx;
-						flex-shrink: 0;
-						margin-right: 18rpx;
-						border-radius: 50%;
-					}
-
-					.title {
-						font-size: 40rpx;
-						color: #1A1A1A;
-						font-weight: 500;
-						line-height: 40rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						margin-right: 10rpx;
-					}
-
-					.second-text {
-						color: #6F6F6F;
-						font-size: 28rpx;
-						line-height: 28rpx;
-						margin-top: 14rpx;
-					}
-				}
-
-				.right {
-					text-align: right;
-
-					.img {
-						width: 72rpx;
-						height: 72rpx;
-					}
-
-				}
-
-				.text-box {
-					.title {
-						font-size: 20rpx;
-						color: #1A1A1A;
-						left: 20rpx;
-						margin-right: 6rpx;
-					}
-				}
-			}
-
-
-		}
-
-		.bottom-box {
-			padding-bottom: 12rpx;
-		}
-
-		.safe-area {
-			padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
-			padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
-		}
-
-		.bottom-box {
-			background-color: #FFFFFF;
-
-			.bottom-container {
-				padding: 12rpx 32rpx 0;
-
-				.add-img {
-					width: 44rpx;
-					height: 44rpx;
-				}
-
-				.search-box {
-					min-height: 76rpx;
-					border-radius: 42rpx;
-					padding: 10rpx 28rpx;
-					margin: 0 30rpx;
-					background-color: #F4F4F4;
-
-					.ka {
-						width: 44rpx;
-						height: 44rpx;
-					}
-
-					.down {
-						width: 24rpx;
-						height: 24rpx;
-						margin-left: 10rpx;
-					}
-
-					.input {
-						height: 100%;
-						width: auto;
-						min-height: 46rpx;
-						max-height: 160rpx;
-						overflow: hidden;
-						overflow-y: scroll;
-						margin-left: 32rpx;
-
-						::v-deep .ql-container {
-							height: 100%;
-							min-height: auto;
-						}
-
-						::v-deep .ql-blank::before {
-							color: #606060;
-							font-size: 30rpx;
-							line-height: inherit;
-							font-style: normal;
-						}
-					}
-
-					.right-icon {
-						width: 32rpx;
-						height: 40rpx;
-						margin-right: 14rpx;
-					}
-				}
-
-				.right-icon {
-					width: 44rpx;
-					height: 44rpx;
-				}
-			}
-		}
-
-	}
-
-
-	//vivo样式
-	.vivo-style {
-		background-color: #F6F6F6 !important;
-
-		.top-box {
-
-			.top-container {
-				padding: 66rpx 52rpx 20rpx 42rpx;
-				background-color: #F6F6F6;
-
-				.left {
-
-					image {
-						width: 40rpx;
-						height: 40rpx;
-					}
-				}
-
-				.center {
-					flex: 1;
-					width: 20%;
-					height: 100%;
-					margin: 0 18rpx;
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					overflow: hidden;
-
-					.title {
-						font-size: 34rpx;
-						color: #1A1A1A;
-						font-weight: 500;
-						line-height: 34rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						margin-right: 10rpx;
-					}
-				}
-
-				.right {
-					text-align: right;
-
-					.img {
-						width: 44rpx;
-						height: 44rpx;
-					}
-
-				}
-
-				.text-box {
-					.title {
-						font-size: 20rpx;
-						color: #1A1A1A;
-						left: 20rpx;
-						margin-right: 6rpx;
-					}
-				}
-			}
-
-
-		}
-
-		.bottom-box {
-			padding-bottom: 20rpx;
-		}
-
-		.safe-area {
-			padding-bottom: 20rpx;
-			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-		}
-
-		.bottom-box {
-			background-color: #fff;
-
-			.bottom-container {
-				padding: 20rpx 48rpx 0;
-
-				.search-box {
-					min-height: 64rpx;
-					border-radius: 16rpx;
-					padding: 8rpx 18rpx;
-					margin-right: 42rpx;
-					background-color: #F2F2F2;
-
-					.input {
-						height: 100%;
-						width: auto;
-						min-height: 46rpx;
-						max-height: 160rpx;
-						overflow: hidden;
-						overflow-y: scroll;
-
-						::v-deep .ql-container {
-							height: 100%;
-							min-height: auto;
-						}
-
-						::v-deep .ql-blank::before {
-							color: #C8C8C8;
-							font-size: 30rpx;
-							line-height: inherit;
-							font-style: normal;
-						}
-					}
-				}
-
-				.send-text {
-
-					color: #9CC9FF;
-					font-size: 34rpx;
-				}
-
-				.send-text-active {
-					color: #0078FE;
-				}
-			}
-		}
-
-	}
-
-	.bottom-placeholder {
-		margin-top: env(safe-area-inset-bottom);
-		margin-top: constant(safe-area-inset-bottom);
-	}
+// .bottom-placeholder {
+// 	margin-top: env(safe-area-inset-bottom);
+// 	margin-top: constant(safe-area-inset-bottom);
+// }
 </style>
\ No newline at end of file
diff --git a/components/message/chat/chat-list.vue b/components/message/chat/chat-list.vue
index 6ead8b4..c1b6806 100644
--- a/components/message/chat/chat-list.vue
+++ b/components/message/chat/chat-list.vue
@@ -34,24 +34,45 @@
                     </image>
                 </view>
                 <view class="chat-box" :id="'msg-' + index" :class="{
-                    'tail-right': shouldApplyTailRight(index) && !isImageMsg(message),
+                    'tail-right': (shouldApplyTailRight(index) || isLastMeMessage(index)) && !isImageMsg(message),
                     'tail-left': shouldApplyTailLeft(index) && !isImageMsg(message),
+                    'image-tail-left': shouldApplyTailLeft(index) && isImageMsg(message),
                     'delivered': isLastMeMessage(index)
                 }" @longpress="!sortMode && onMessageLongPress(index, message)">
                     <text v-if="message.isMe && phone == 'mi'" class="send-text">送达</text>
+
                     <view class="chat-bubble" :class="{ 'image-bubble': isImageMsg(message) }">
-                        <image v-if="isImageMsg(message)" :src="getImageSrc(message)" mode="aspectFill"
-                            class="chat-image" :style="getImageStyle(message)" @tap.stop="handleImageClick(message)">
-                        </image>
+                        <view v-if="isImageMsg(message)" class="image-wrap" :class="{
+                            'image-wrap-left': phone == 'iphone' && shouldApplyTailLeft(index) && isImageMsg(message),
+                            'image-wrap-right': phone == 'iphone' && shouldApplyTailRight(index) && isImageMsg(message)
+                        }">
+                            <image :src="getImageSrc(message)" :mode="getImageMode(message, phone)"
+                                class="chat-image" :class="{
+                                    'chat-image-left': phone == 'iphone' && shouldApplyTailLeft(index) && isImageMsg(message),
+                                    'chat-image-right': phone == 'iphone' && shouldApplyTailRight(index) && isImageMsg(message)
+                                }" :style="phone == 'iphone' ? '' : getImageStyle(message)"
+                                @tap.stop="handleImageClick(message)">
+                            </image>
+                            <image v-if="phone == 'iphone'" :class="{
+                                'mask-left-bottom': phone == 'iphone' && shouldApplyTailLeft(index) && isImageMsg(message),
+                                'mask-right-bottom': phone == 'iphone' && shouldApplyTailRight(index) && isImageMsg(message)
+                            }" style="width: 46rpx;height:10rpx;"
+                                src="/static/image/phone-message/iphone/iphone-mask.png"></image>
+                        </view>
                         <rich-text v-else :nodes="formatMessageContent(message.content, message.isMe)"></rich-text>
                     </view>
+                    <image v-if="shouldApplyTailLeft(index) && isImageMsg(message) && phone == 'iphone'"
+                        style="width: 68rpx;height: 68rpx;" src="/static/image/phone-message/iphone/save.png">
+                    </image>
+                    <!-- <text v-if="message.isMe && phone == 'iphone' && isLastMeMessage(index)"
+                        class="send-text">已送达</text> -->
                 </view>
                 <view v-if="phone == 'huawei'" class="second-info">
                     <text>{{ formatHuaweiBottomTime(message.time) }}</text>
                     <image :src="`/static/image/phone-message/huawei/chat-ka${message.simIndex}.png`"></image>
                 </view>
                 <view v-if="(phone == 'oppo' || phone == 'vivo') && message.isMe" class="second-info">
-                    <text v-if="message.isMe" class="delivered">已送达</text>
+                    <text v-if="message.isMe" class="delivered">{{ phone == 'vivo' ? '已发送' : '已送达' }}</text>
                 </view>
             </view>
         </view>
@@ -68,6 +89,7 @@ const handleImageClick = (message) => {
     if (!src) return;
 
     const allImages = [];
+    const allTimes = [];
     let clickIndex = 0;
 
     displayList.value.forEach(msg => {
@@ -78,12 +100,13 @@ const handleImageClick = (message) => {
                     clickIndex = allImages.length;
                 }
                 allImages.push(imgSrc);
+                allTimes.push(msg.time);
             }
         }
     });
 
-    if (props.phone === 'oppo') {
-        emit('previewImage', { images: allImages, index: clickIndex });
+    if (props.phone === 'oppo' || props.phone === 'mi') {
+        emit('previewImage', { images: allImages, index: clickIndex, times: allTimes });
     } else {
         uni.previewImage({ urls: allImages, current: clickIndex });
     }
@@ -136,9 +159,9 @@ let sortItemRects = []
 watch(() => props.sortMode, (val) => {
     if (val) {
         let list = props.messageList;
-        if (props.phone !== 'oppo') {
-            list = list.filter(msg => !isImageMsg(msg));
-        }
+        // if (props.phone !== 'oppo') {
+        //     list = list.filter(msg => !isImageMsg(msg));
+        // }
         localSortList.value = list.map(item => ({ ...item }))
     } else {
         dragIndex.value = -1
@@ -154,9 +177,9 @@ const displayList = computed(() => {
     if (props.sortMode) return localSortList.value
 
     let list = props.messageList;
-    if (props.phone !== 'oppo') {
-        list = list.filter(msg => !isImageMsg(msg));
-    }
+    // if (props.phone !== 'oppo') {
+    //     list = list.filter(msg => !isImageMsg(msg));
+    // }
     return list;
 })
 
@@ -200,12 +223,8 @@ const shouldApplyTailRight = (index) => {
     // 条件 c: 下一条消息 isMe == false (也就是被打断了)
     if (!nextMsg.isMe) return true;
 
-    // 条件 a: 下一条消息间隔三分钟以上 (180000 毫秒) - 时间分割线导致当前段落结束
-    const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
-    const nextMsgTime = new Date(nextMsg.time.replace(/-/g, '/')).getTime();
-    if (!isNaN(currentMsgTime) && !isNaN(nextMsgTime) && (nextMsgTime - currentMsgTime > 180000)) {
-        return true;
-    }
+    // 如果下一条消息上方显示了时间，则当前消息就是这一段的最后一条，应该有尾巴！
+    if (shouldShowTime(index + 1)) return true;
 
     // 其他情况（连绵不断的连发，中间没超时间也没被对方打断），则隐藏中间环节气泡尾巴
     return false;
@@ -224,21 +243,11 @@ const shouldApplyTailLeft = (index) => {
     // 条件 c: 下一条消息 isMe == true
     if (nextMsg.isMe) return true;
 
-    // 条件 a: 下一条消息间隔三分钟以上 (180000 毫秒)
-    const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
-    const nextMsgTime = new Date(nextMsg.time.replace(/-/g, '/')).getTime();
-    if (!isNaN(currentMsgTime) && !isNaN(nextMsgTime) && (nextMsgTime - currentMsgTime > 180000)) {
-        return true;
-    }
+    // 如果下一条消息上方显示了时间，则当前消息就是这一段的最后一条，应该有尾巴！
+    if (shouldShowTime(index + 1)) return true;
 
-    // 条件 b: 这是最后一条 isMe == false 的消息
-    for (let i = index + 1; i < displayList.value.length; i++) {
-        if (!displayList.value[i].isMe) {
-            return false; // 往后还有不是自己发的消息，所以当前并非最后一条 isMe==false
-        }
-    }
-
-    return true;
+    // 否则说明后面还有相连的对方消息，不用加尾巴
+    return false;
 }
 
 // 获取格式化后的聊天时间显示
@@ -392,9 +401,55 @@ const getImageSrc = (message) => {
     return '';
 }
 
+// 获取图片渲染模式
+const getImageMode = (message, phone) => {
+    if (phone === 'iphone') return 'widthFix';
+    if (phone === 'huawei') {
+        const w = parseInt(message.imgWidth);
+        const h = parseInt(message.imgHeight);
+        if (!isNaN(w) && !isNaN(h)) {
+            if (h > w) return 'heightFix';
+            return 'widthFix';
+        }
+        return 'widthFix';
+    }
+    return 'aspectFill';
+}
+
 // 提取并应用图片的特定宽高
 const getImageStyle = (message) => {
     if (message.imgWidth && message.imgHeight) {
+        if (props.phone === 'mi') {
+            const w = parseInt(message.imgWidth);
+            const h = parseInt(message.imgHeight);
+            if (!isNaN(w) && !isNaN(h)) {
+                if (h > w) {
+                    return { width: '214rpx', height: '256rpx' };
+                } else {
+                    return { width: '256rpx', height: '214rpx' };
+                }
+            }
+        } else if (props.phone === 'vivo') {
+            const w = parseInt(message.imgWidth);
+            const h = parseInt(message.imgHeight);
+            if (!isNaN(w) && !isNaN(h)) {
+                if (h > w) {
+                    return { width: '284rpx', height: '400rpx' };
+                } else {
+                    return { width: '400rpx', height: '284rpx' };
+                }
+            }
+        } else if (props.phone === 'huawei') {
+            const w = parseInt(message.imgWidth);
+            const h = parseInt(message.imgHeight);
+            if (!isNaN(w) && !isNaN(h)) {
+                if (h > w) {
+                    return { height: '500rpx', 'max-height': '500rpx' };
+                } else {
+                    return { width: '500rpx', 'max-width': '500rpx' };
+                }
+            }
+        }
         return {
             width: message.imgWidth,
             height: message.imgHeight
@@ -550,7 +605,7 @@ const onSortTouchEnd = () => {
     background-color: transparent !important;
     padding: 0 !important;
     border: none !important;
-    border-radius: 16rpx !important;
+    // border-radius: 16rpx !important;
     overflow: hidden;
 }
 
@@ -597,6 +652,85 @@ const onSortTouchEnd = () => {
             margin: 4rpx 30rpx 0;
             word-break: break-all;
         }
+
+        .image-bubble {
+            border-radius: 0 !important;
+            margin-left: 10rpx;
+        }
+
+        .image-wrap-left {
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                z-index: 10;
+                top: 0;
+                left: 10px;
+                width: 17px;
+                height: 17px;
+                /* 使用径向渐变画出反向圆角：中心点在右下角，34rpx以内透明，以外纯白 */
+                background: radial-gradient(circle at bottom right, transparent 16.5px, #FFFFFF 17px);
+            }
+
+
+            &::after {
+                content: "";
+                position: absolute;
+                z-index: 10;
+                height: 100%;
+                width: 10px;
+                background-color: #FFFFFF !important;
+                left: 0px;
+                top: 0;
+                bottom: 0;
+                border-radius: 0 0 10px 0;
+            }
+        }
+
+        .image-wrap-right {
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                z-index: 10;
+                top: 0;
+                right: 10px;
+                width: 17px;
+                height: 17px;
+                /* 使用径向渐变画出反向圆角：中心点在右下角，34rpx以内透明，以外纯白 */
+                background: radial-gradient(circle at bottom left, transparent 16.5px, #FFFFFF 17px);
+            }
+
+
+            &::after {
+                content: "";
+                position: absolute;
+                z-index: 10;
+                height: 100%;
+                width: 10px;
+                background-color: #FFFFFF !important;
+                right: 0px;
+                top: 0;
+                bottom: 0;
+                border-radius: 0 0 0 10px;
+            }
+        }
+
+
+        .mask-left-bottom {
+            position: absolute;
+            left: 7px;
+            bottom: 0px;
+        }
+
+        .mask-right-bottom {
+            position: absolute;
+            right: 7px;
+            bottom: 0px;
+            transform: scaleX(-1);
+        }
     }
 
 
@@ -615,6 +749,14 @@ const onSortTouchEnd = () => {
         position: relative;
     }
 
+    .image-tail-left {
+        align-items: center;
+
+        ::v-deep.image-bubble {
+            margin-right: 24rpx !important;
+        }
+    }
+
     .tail-left::after {
         position: absolute;
         left: 18rpx;
@@ -630,6 +772,23 @@ const onSortTouchEnd = () => {
         position: relative;
     }
 
+    .delivered {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        position: relative;
+        margin-bottom: 70rpx;
+
+        .send-text {
+            margin-right: 32rpx;
+            font-weight: 400;
+            font-size: 20rpx;
+            color: #8B8B8B;
+            line-height: 20rpx;
+            margin-top: 12rpx;
+        }
+    }
+
     .delivered::before {
         position: absolute;
         right: 18rpx;
@@ -651,10 +810,28 @@ const onSortTouchEnd = () => {
         width: 28rpx;
         height: 36rpx;
     }
+
+    .chat-image {
+        width: 516rpx;
+        max-width: 516rpx !important;
+
+    }
+
+    .chat-image-left {
+        border-radius: 0 34rpx 34rpx 0;
+    }
+
+    .chat-image-right {
+        border-radius: 34rpx 0 0 34rpx;
+    }
 }
 
 // 小米样式
 .mi-style {
+    .chat-image {
+        border-radius: 40rpx;
+    }
+
     .top-text {
         text-align: center;
         font-size: 20rpx;
@@ -888,6 +1065,10 @@ const onSortTouchEnd = () => {
         margin-top: 24rpx !important;
     }
 
+    .chat-image {
+        border-radius: 32rpx;
+    }
+
     .time {
         color: #ACACAC;
         font-size: 24rpx;
diff --git a/components/message/chat/image-preview.vue b/components/message/chat/image-preview.vue
index d11af33..ea9fc8d 100644
--- a/components/message/chat/image-preview.vue
+++ b/components/message/chat/image-preview.vue
@@ -1,20 +1,51 @@
 <template>
-    <view class="preview-container" v-if="show">
-        <view class="header" @tap.stop :style="{ 'padding-top': statusBarHeight }">
-            <image class="icon-back" src="/static/image/phone-message/oppo/back-white.png" @tap="close"></image>
-            <image class="icon-download" src="/static/image/phone-message/oppo/save-white.png"></image>
-        </view>
-        <!-- 图片显示 -->
-        <swiper class="preview-swiper" :current="current" @change="onChange">
-            <swiper-item v-for="(imgSrc, index) in images" :key="index">
-                <image class="preview-img" :src="imgSrc" mode="aspectFit"></image>
-            </swiper-item>
-        </swiper>
+    <view class="preview-container" :class="phone === 'mi' ? 'mi-bg' : 'oppo-bg'" v-if="show">
+        <template v-if="phone === 'oppo' || !phone || phone === 'iphone' || phone === 'huawei' || phone === 'vivo'">
+            <view class="header" @tap.stop :style="{ 'padding-top': statusBarHeight }">
+                <image class="icon-back" src="/static/image/phone-message/oppo/back-white.png" @tap="close"></image>
+                <image class="icon-download" src="/static/image/phone-message/oppo/save-white.png"></image>
+            </view>
+            <!-- 图片显示 -->
+            <swiper class="preview-swiper" :current="current" @change="onChange">
+                <swiper-item v-for="(imgSrc, index) in images" :key="index">
+                    <image class="preview-img" :src="imgSrc" mode="aspectFit"></image>
+                </swiper-item>
+            </swiper>
+        </template>
+
+        <template v-else-if="phone === 'mi'">
+            <view class="mi-header" @tap.stop :style="{ 'padding-top': statusBarHeight }">
+                <!-- 复用现有返回图标并通过滤镜反色 -->
+                <image class="mi-icon-back" src="/static/image/phone-message/oppo/back-white.png" @tap="close"></image>
+                <view class="mi-header-center">
+                    <view class="mi-date">{{ currentFormatDate }}</view>
+                    <view class="mi-time">{{ currentFormatTime }}</view>
+                </view>
+                <view class="mi-icon-right"></view> <!-- 占位符以居中 -->
+            </view>
+            <swiper class="preview-swiper mi-swiper" :current="current" @change="onChange">
+                <swiper-item v-for="(imgSrc, index) in images" :key="index">
+                    <view class="mi-img-container">
+                        <image class="mi-preview-img" :src="imgSrc" mode="aspectFill"></image>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="mi-footer">
+                <view class="mi-footer-item">
+                    <image class="mi-footer-icon" src="/static/image/phone-message/mi/baocun.png"></image>
+                    <view class="mi-footer-text">保存</view>
+                </view>
+                <view class="mi-footer-item">
+                    <view class="mi-more-icon">⋯</view>
+                    <view class="mi-footer-text">更多</view>
+                </view>
+            </view>
+        </template>
     </view>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 
 const statusBarHeight = (uni.getSystemInfoSync().statusBarHeight || 44) + 'px';
 
@@ -24,9 +55,17 @@ const props = defineProps({
         type: Array,
         default: () => []
     },
+    times: {
+        type: Array,
+        default: () => []
+    },
     currentIndex: {
         type: Number,
         default: 0
+    },
+    phone: {
+        type: String,
+        default: ''
     }
 });
 const emit = defineEmits(['update:show']);
@@ -41,6 +80,53 @@ const onChange = (e) => {
     current.value = e.detail.current;
 };
 
+const currentFormatDate = computed(() => {
+    if (props.times && props.times.length > current.value) {
+        const timeVal = props.times[current.value];
+        if (timeVal) {
+            if (typeof timeVal === 'string' && timeVal.includes('-')) {
+                const parts = timeVal.split(' ');
+                if (parts.length > 0) {
+                    const dateParts = parts[0].split('-');
+                    if (dateParts.length === 3) {
+                        return `${dateParts[0]}年${parseInt(dateParts[1])}月${parseInt(dateParts[2])}日`;
+                    }
+                }
+            }
+            // Fallback
+            const safeTimeStr = String(timeVal).replace(/-/g, '/');
+            const d = new Date(safeTimeStr);
+            if (!isNaN(d.getTime())) {
+                return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
+            }
+        }
+    }
+    return '';
+});
+
+const currentFormatTime = computed(() => {
+    if (props.times && props.times.length > current.value) {
+        const timeVal = props.times[current.value];
+        if (timeVal) {
+            if (typeof timeVal === 'string' && timeVal.includes(':')) {
+                const parts = timeVal.split(' ');
+                if (parts.length > 1) {
+                    return parts[1];
+                }
+            }
+            // Fallback
+            const safeTimeStr = String(timeVal).replace(/-/g, '/');
+            const d = new Date(safeTimeStr);
+            if (!isNaN(d.getTime())) {
+                const h = d.getHours().toString().padStart(2, '0');
+                const m = d.getMinutes().toString().padStart(2, '0');
+                return `${h}:${m}`;
+            }
+        }
+    }
+    return '';
+});
+
 const close = () => {
     emit('update:show', false);
 };
@@ -75,12 +161,19 @@ const close = () => {
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: #000000;
     z-index: 999999;
     display: flex;
     flex-direction: column;
 }
 
+.oppo-bg {
+    background-color: #000000;
+}
+
+.mi-bg {
+    background-color: #FFFFFF;
+}
+
 .header {
     box-sizing: content-box;
     width: 100%;
@@ -122,4 +215,113 @@ const close = () => {
     height: 100%;
     display: block;
 }
+
+/* ================= 小米样式 ================= */
+.mi-header {
+    box-sizing: content-box;
+    width: 100%;
+    height: 98rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: #FFFFFF;
+}
+
+.mi-icon-back {
+    width: 48rpx;
+    height: 48rpx;
+    margin: 0 34rpx;
+    filter: invert(1);
+    /* 白变黑 */
+}
+
+.mi-icon-right {
+    width: 48rpx;
+    height: 48rpx;
+    margin: 0 34rpx;
+}
+
+.mi-header-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mi-date {
+    font-size: 32rpx;
+    color: #333333;
+    font-weight: 500;
+}
+
+.mi-time {
+    font-size: 24rpx;
+    color: #999999;
+    margin-top: 4rpx;
+}
+
+.mi-swiper {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+}
+
+.mi-img-container {
+    width: 100vw;
+    height: 100vw;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.mi-preview-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.mi-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 160rpx;
+    background-color: #FFFFFF;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    padding-top: 20rpx;
+    z-index: 2;
+}
+
+.mi-footer-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mi-footer-icon {
+    width: 48rpx;
+    height: 48rpx;
+    margin-bottom: 8rpx;
+}
+
+.mi-more-icon {
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 38rpx;
+    font-size: 40rpx;
+    text-align: center;
+    color: #000;
+    margin-bottom: 8rpx;
+    font-weight: bold;
+}
+
+.mi-footer-text {
+    font-size: 24rpx;
+    color: #666666;
+}
 </style>
diff --git a/components/message/list/list.vue b/components/message/list/list.vue
index c7fa821..b42992f 100644
--- a/components/message/list/list.vue
+++ b/components/message/list/list.vue
@@ -21,14 +21,25 @@
                                 <view class="title-box flex-between">
                                     <text class="title">{{ displayTitle(item.title) }}</text>
                                     <text class="time">{{ formatDate(getLastMessage(item.chatList)?.time || item.time)
-                                    }}</text>
+                                        }}</text>
                                 </view>
                                 <view class="content">
                                     <view v-if="isImageMsg(getLastMessage(item.chatList))"
                                         class="flex flex-align-center">
-                                        <image style="width: 24rpx;height: 24rpx;margin-right: 16rpx;"
-                                            src="/static/image/phone-message/oppo/link.png"></image>
-                                        <text>[图片]</text>
+                                        <template v-if="phone === 'iphone'">
+                                            <text>附件: 1张照片</text>
+                                        </template>
+                                        <template v-else-if="phone === 'huawei'">
+                                            <text>您的好友给您发了一个图片</text>
+                                        </template>
+                                        <template v-else-if="phone == 'oppo'">
+                                            <image style="width: 24rpx;height: 24rpx;margin-right: 16rpx;"
+                                                src="/static/image/phone-message/oppo/link.png"></image>
+                                            <text>[图片]</text>
+                                        </template>
+                                        <template v-else>
+                                            <text>[图片]</text>
+                                        </template>
                                     </view>
                                     <rich-text v-else :nodes="getLastMessage(item.chatList)?.content || ''"></rich-text>
                                 </view>
@@ -37,7 +48,8 @@
                                 <image v-if="phone == 'iphone'" src="/static/image/phone-message/iphone/right.png">
                                 </image>
                                 <image v-if="item.noNotice && phone == 'iphone'" class="m-t-8"
-                                    src="/static/image/phone-message/iphone/notice.png"></image>
+                                    src="/static/image/phone-message/iphone/notice.png">
+                                </image>
                             </view>
                         </view>
                     </view>
@@ -133,20 +145,11 @@ const isImageMsg = (message) => {
 }
 
 /**
- * 获取最新一条有效消息（非 oppo 屏蔽图片消息）
+ * 获取最新一条有效消息
  */
 const getLastMessage = (chatList) => {
     if (!chatList || chatList.length === 0) return null;
-    if (props.phone === 'oppo') {
-        return chatList[chatList.length - 1];
-    }
-    // 非 oppo 机型，倒序查找最后一条非图片消息
-    for (let i = chatList.length - 1; i >= 0; i--) {
-        if (!isImageMsg(chatList[i])) {
-            return chatList[i];
-        }
-    }
-    return null;
+    return chatList[chatList.length - 1];
 }
 
 /**
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
index 74ee59b..eb77906 100644
--- a/pages/message/chat-page/chat-page.vue
+++ b/pages/message/chat-page/chat-page.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
 	<!-- 水印 -->
 	<view v-if="$isVip()">
 		<watermark dark="light" source="uni_alipay_other_message" />
@@ -88,7 +88,14 @@
 					<view class="edit-row">
 						<text class="edit-label">内容：</text>
 					</view>
-					<editor id="editor" class="edit-textarea" placeholder="请输入消息内容..." @ready="onEditorReady">
+					<template v-if="editingMessage && editingMessage.type === 'image'">
+						<view class="edit-image-replace-box" @tap="replaceEditImage">
+							<image :src="editingNewImg || editingMessage.imgUrl" mode="aspectFit" class="replace-img">
+							</image>
+							<view class="replace-tip">点击替换图片</view>
+						</view>
+					</template>
+					<editor v-else id="editor" class="edit-textarea" placeholder="请输入消息内容..." @ready="onEditorReady">
 					</editor>
 				</view>
 				<view class="edit-footer">
@@ -161,7 +168,8 @@
 				</view>
 			</view>
 		</view>
-		<ImagePreview v-model:show="showPreview" :images="previewImages" :currentIndex="previewIndex" />
+		<ImagePreview v-model:show="showPreview" :images="previewImages" :times="previewTimes"
+			:currentIndex="previewIndex" :phone="data.phone" />
 	</view>
 </template>
 
@@ -199,13 +207,26 @@ const selectedMessage = ref(null)
 
 const showEditPopup = ref(false)
 const editingMessage = ref(null)
+const editingNewImg = ref("")
+const replaceEditImage = () => {
+	uni.chooseImage({
+		count: 1,
+		success: (res) => {
+			if (res.tempFilePaths && res.tempFilePaths.length > 0) {
+				editingNewImg.value = res.tempFilePaths[0];
+			}
+		}
+	})
+}
 const showPreview = ref(false)
 const previewImages = ref([])
+const previewTimes = ref([])
 const previewIndex = ref(0)
 
 const handlePreviewImage = (data) => {
 	previewImages.value = data.images
 	previewIndex.value = data.index
+	previewTimes.value = data.times || []
 	showPreview.value = true
 }
 
@@ -251,7 +272,7 @@ const saveChatList = () => {
 const onEditorReady = () => {
 	uni.createSelectorQuery().select('#editor').context((res) => {
 		editorCtx = res.context
-		if (editingMessage.value && editingMessage.value.content) {
+		if (editingMessage.value && editingMessage.value.content && editingMessage.value.type !== 'image') {
 			editorCtx.setContents({
 				html: editingMessage.value.content
 			})
@@ -296,6 +317,7 @@ const closeActionPopup = () => {
  */
 const handleEdit = () => {
 	editingMessage.value = selectedMessage.value;
+	editingNewImg.value = "";
 	editingTime.value = selectedMessage.value.time || "";
 	// 拆分日期和时刻部分
 	const parts = (selectedMessage.value.time || "").split(' ')
@@ -308,7 +330,7 @@ const handleEdit = () => {
 	closeActionPopup();
 
 	// 如果已经初始化过了直接赋值
-	if (editorCtx) {
+	if (editorCtx && editingMessage.value.type !== 'image') {
 		setTimeout(() => {
 			editorCtx.setContents({
 				html: editingMessage.value.content
@@ -320,6 +342,7 @@ const handleEdit = () => {
 const closeEditPopup = () => {
 	showEditPopup.value = false;
 	editingMessage.value = null;
+	editingNewImg.value = "";
 }
 
 /**
@@ -346,32 +369,121 @@ const onSimKaChange = (value) => {
 	editingSimKa.value = value
 }
 
-const confirmEdit = () => {
-	if (editingMessage.value && editorCtx) {
-		editorCtx.getContents({
-			success: (res) => {
-				const index = messageList.value.findIndex(item => item.id === editingMessage.value.id)
-				if (index > -1) {
-					messageList.value[index].content = res.html;
-					messageList.value[index].time = editingTime.value;
-					// 保存 timeMode: 'auto'|'show'|'hide'
-					if (editingTimeMode.value === 'auto') {
-						delete messageList.value[index].timeMode;
-					} else {
-						messageList.value[index].timeMode = editingTimeMode.value;
-					}
-					// 兼容旧 hideTime 字段：一并清除
-					delete messageList.value[index].hideTime;
-					if (editingSimKa.value) {
-						messageList.value[index].simIndex = Number(editingSimKa.value);
-					} else {
-						delete messageList.value[index].simIndex;
+const confirmEdit = async () => {
+	if (editingMessage.value) {
+		const index = messageList.value.findIndex(item => item.id === editingMessage.value.id)
+		if (index > -1) {
+			if (editingMessage.value.type === 'image') {
+				let finalImgPath = editingMessage.value.imgUrl;
+				let oldImgUrl = '';
+
+				if (editingNewImg.value) {
+					try {
+						// #ifdef APP-PLUS
+						const saveRes = await new Promise((resolve, reject) => {
+							uni.saveFile({
+								tempFilePath: editingNewImg.value,
+								success: resolve,
+								fail: reject
+							});
+						});
+						finalImgPath = saveRes.savedFilePath;
+						// #endif
+						// #ifndef APP-PLUS
+						finalImgPath = editingNewImg.value;
+						// #endif
+
+						oldImgUrl = messageList.value[index].imgUrl;
+
+						const imgInfo = await new Promise((resolve, reject) => {
+							uni.getImageInfo({
+								src: finalImgPath,
+								success: resolve,
+								fail: reject
+							});
+						});
+						let w = imgInfo.width;
+						let h = imgInfo.height;
+						let width = '100%';
+						let height = 'auto';
+						if (w && h) {
+							if (w > h) {
+								let scale = w / 200;
+								width = '200px';
+								height = (h / scale) + 'px';
+							} else {
+								let scale = h / 200;
+								height = '200px';
+								width = (w / scale) + 'px';
+							}
+						}
+
+						const newHtml = `<img src="${finalImgPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
+						messageList.value[index].content = newHtml;
+						messageList.value[index].imgUrl = finalImgPath;
+						messageList.value[index].imgWidth = width;
+						messageList.value[index].imgHeight = height;
+					} catch (e) {
+						console.error('保存替换图片失败', e);
+						uni.showToast({ title: '保存图片失败', icon: 'none' });
+						return;
 					}
 				}
+
+				messageList.value[index].time = editingTime.value;
+				if (editingTimeMode.value === 'auto') {
+					delete messageList.value[index].timeMode;
+				} else {
+					messageList.value[index].timeMode = editingTimeMode.value;
+				}
+				delete messageList.value[index].hideTime;
+				if (editingSimKa.value) {
+					messageList.value[index].simIndex = Number(editingSimKa.value);
+				} else {
+					delete messageList.value[index].simIndex;
+				}
+
 				closeEditPopup();
 				saveChatList();
+
+				if (oldImgUrl && oldImgUrl.includes('_doc/')) {
+					// #ifdef APP-PLUS
+					uni.removeSavedFile({
+						filePath: oldImgUrl,
+						success: () => console.log('替换旧图片，删除成功:', oldImgUrl),
+						fail: (err) => console.warn('替换旧图片，删除失败:', oldImgUrl, err)
+					})
+					// #endif
+				}
+				return;
 			}
-		})
+
+			if (editorCtx) {
+				editorCtx.getContents({
+					success: (res) => {
+						messageList.value[index].content = res.html;
+						messageList.value[index].time = editingTime.value;
+						// 保存 timeMode: 'auto'|'show'|'hide'
+						if (editingTimeMode.value === 'auto') {
+							delete messageList.value[index].timeMode;
+						} else {
+							messageList.value[index].timeMode = editingTimeMode.value;
+						}
+						// 兼容旧 hideTime 字段：一并清除
+						delete messageList.value[index].hideTime;
+						if (editingSimKa.value) {
+							messageList.value[index].simIndex = Number(editingSimKa.value);
+						} else {
+							delete messageList.value[index].simIndex;
+						}
+						closeEditPopup();
+						saveChatList();
+					}
+				})
+			} else {
+				closeEditPopup();
+			}
+		}
 	} else {
 		closeEditPopup();
 	}
@@ -1052,4 +1164,28 @@ const confirmAdd = async () => {
 	padding-bottom: 2rpx;
 	z-index: 2;
 }
+
+.edit-image-replace-box {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #f7f7f7;
+	border-radius: 12rpx;
+	padding: 20rpx;
+	margin-bottom: 20rpx;
+	min-height: 200rpx;
+}
+
+.replace-img {
+	max-width: 100%;
+	max-height: 300rpx;
+}
+
+.replace-tip {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #007AFF;
+}
 </style>
+
diff --git a/static/image/phone-message/iphone/iphone-mask.png b/static/image/phone-message/iphone/iphone-mask.png
new file mode 100644
index 0000000..41857e6
Binary files /dev/null and b/static/image/phone-message/iphone/iphone-mask.png differ
diff --git a/static/image/phone-message/iphone/save.png b/static/image/phone-message/iphone/save.png
new file mode 100644
index 0000000..e55af2c
Binary files /dev/null and b/static/image/phone-message/iphone/save.png differ
diff --git a/static/image/phone-message/mi/baocun.png b/static/image/phone-message/mi/baocun.png
new file mode 100644
index 0000000..7a88c6d
Binary files /dev/null and b/static/image/phone-message/mi/baocun.png differ
diff --git a/static/image/phone-message/mi/fanhui.png b/static/image/phone-message/mi/fanhui.png
new file mode 100644
index 0000000..3fb62cb
Binary files /dev/null and b/static/image/phone-message/mi/fanhui.png differ
diff --git a/static/image/phone-message/mi/gengduo.png b/static/image/phone-message/mi/gengduo.png
new file mode 100644
index 0000000..c257ce6
Binary files /dev/null and b/static/image/phone-message/mi/gengduo.png differ
diff --git a/static/image/phone-message/mi/xuanzhaun.png b/static/image/phone-message/mi/xuanzhaun.png
new file mode 100644
index 0000000..66267fa
Binary files /dev/null and b/static/image/phone-message/mi/xuanzhaun.png differ