完成苹果，华为，小米短信聊天界面ui

components/message/chat/chat-layout.vue

@@ -4,20 +4,38 @@
         <view class="top-box">
             <slot name="top">
                 <view class="top-container">
-                    <view class="flex-align-center flex-justify-between">
+                    <view class="h100 flex-align-center flex-justify-between">
                         <view class="left flex-align-center">
                             <image @click="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
                             </image>
-                            <view class="number-box">256</view>
+                            <view v-if="phone == 'iphone'" class="number-box">256</view>
                         </view>
                         <view class="center">
-                            <image class="img shrink-0"
+                            <image v-if="phone == 'iphone' || phone == 'huawei'" class="img shrink-0"
                                 :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
                             </image>
+                            <text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
+                            <text v-if="phone == 'oppo'" class="second-text">重庆</text>
                         </view>
-                        <view class="right"></view>
+                        <view class="right flex-align-center">
+                            <image v-if="phone == 'mi'" class="img shrink-0"
+                                src="/static/image/phone-message/mi/nav-right-icon.png">
+                            </image>
+                            <image v-if="phone == 'oppo'" class="img shrink-0"
+                                src="/static/image/phone-message/oppo/nav-right-icon.png">
+                            </image>
+                            <image v-if="phone == 'huawei'" class="img shrink-0"
+                                src="/static/image/phone-message/huawei/chat-more.png">
+                            </image>
+                            <image v-if="phone == 'vivo'" class="img shrink-0"
+                                src="/static/image/phone-message/vivo/select.png">
+                            </image>
+                            <image v-if="phone == 'vivo'" class="img shrink-0 m-l-50"
+                                src="/static/image/phone-message/vivo/more.png">
+                            </image>
                         </view>
-                    <view class="text-box flex-align-center flex-justify-center">
+                    </view>
+                    <view v-if="phone == 'iphone'" class="text-box flex-align-center flex-justify-center">
                         <text class="title">{{ chatInfo.title }}</text>
                         <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
                     </view>
@@ -29,15 +47,35 @@
         </view>
         <view class="bottom-box">
             <slot name="bottom">
-                <view class="right-container flex-align-center">
+                <view class="bottom-container flex-align-center">
-                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
+                    <image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
+                        :src="`/static/image/phone-message/${phone}/chat-left.png`"></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">
-                        <input class="input flex-1" placeholder="信息 · 短信" type="text">
+                        <image v-if="phone == 'huawei'" class="left-icon ka"
+                            src="/static/image/phone-message/huawei/ka1.png"></image>
+                        <image v-if="phone == 'huawei'" class="left-icon down"
+                            src="/static/image/phone-message/huawei/down.png"></image>
+                        <input class="input flex-1" :placeholder="showInfo.placeholder" type="text">
                         <image v-if="phone == 'iphone'" class="right-icon"
                             src="/static/image/phone-message/iphone/mic.png"></image>
+                        <image v-if="phone == 'oppo'" class="right-icon" src="/static/image/phone-message/oppo/ka1.png">
+                        </image>
                     </view>
-                    <view v-if="phone != 'iphone'">
+                    <view v-if="phone != 'iphone'" class="flex-align-center">
-                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
+                        <image v-if="phone == 'mi'" class="right-icon" src="/static/image/phone-message/mi/mic.png">
+                        </image>
+                        <image v-if="phone == 'oppo'" class="right-icon"
+                            src="/static/image/phone-message/oppo/send.png">
+                        </image>
+                        <image v-if="phone == 'huawei'" class="right-icon"
+                            src="/static/image/phone-message/huawei/chat-add.png">
+                        </image>
+                        <image v-if="phone == 'huawei'" class="right-icon m-l-34"
+                            src="/static/image/phone-message/huawei/send.png">
+                        </image>
+                        <text v-if="phone == 'vivo'" class="send-text">发送</text>
                     </view>
                 </view>
             </slot>
@@ -45,7 +83,7 @@
     </view>
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { onLoad, onPageScroll } from "@dcloudio/uni-app";
 import { stringUtil, util } from '@/utils/common.js';
 const props = defineProps({
@@ -71,6 +109,31 @@ const data = reactive({
     statusBarHeight: 0,
 })
 
+// 展示文字信息
+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 }
+})
+
 onMounted(() => {
     // 同步获取系统信息
     const systemInfo = uni.getSystemInfoSync();
@@ -89,16 +152,32 @@ onMounted(() => {
     background-color: #fff;
 }
 
+.m-l-34 {
+    margin-left: 34rpx;
+}
+
+.m-l-50 {
+    margin-left: 50rpx;
+}
+
+.center-box {
+    overflow: hidden;
+    overflow-y: scroll;
+}
+
 //苹果样式
 .iphone-style {
 
+    .status-placeholder {
+        background-color: #F7F7F7;
+    }
 
     .top-box {
 
         .top-container {
             padding: 32rpx 24rpx 20rpx;
             background-color: #F7F7F7;
-            border-bottom: 0.5px solid #B5B5B5;
+            box-shadow: inset 0 -0.3px 0 0 #B5B5B5;
 
             .left {
                 width: 180rpx;
@@ -121,6 +200,8 @@ onMounted(() => {
             }
 
             .center {
+                height: 96rpx;
+
                 .img {
                     width: 96rpx;
                     height: 96rpx;
@@ -133,11 +214,16 @@ onMounted(() => {
             }
 
             .text-box {
+                margin-top: 10rpx;
+                height: 20rpx;
+
                 .title {
                     font-size: 20rpx;
                     color: #1A1A1A;
                     left: 20rpx;
                     margin-right: 6rpx;
+                    font-weight: 500;
+                    line-height: 20rpx;
                 }
             }
         }
@@ -145,7 +231,7 @@ onMounted(() => {
 
     }
 
-    .right-container {
+    .bottom-container {
         padding: 10rpx 28rpx;
 
         .add-img {
@@ -180,20 +266,21 @@ onMounted(() => {
 
 //小米样式
 .mi-style {
+    background-color: #F7F7F7 !important;
 
     .top-box {
 
         .top-container {
-            padding: 32rpx 24rpx 20rpx;
+            padding: 0 52rpx;
             background-color: #F7F7F7;
-            border-bottom: 0.5px solid #B5B5B5;
+            height: 88rpx;
 
             .left {
-                width: 180rpx;
+                width: 80rpx;
 
                 image {
-                    width: 40rpx;
+                    width: 48rpx;
-                    height: 40rpx;
+                    height: 48rpx;
                 }
 
                 .number-box {
@@ -209,14 +296,21 @@ onMounted(() => {
             }
 
             .center {
-                .img {
+                .title {
-                    width: 96rpx;
+                    font-size: 36rpx;
-                    height: 96rpx;
+                    color: #1A1A1A;
+                    font-weight: 500;
                 }
             }
 
             .right {
-                width: 180rpx;
+                width: 80rpx;
+                text-align: right;
+
+                .img {
+                    width: 48rpx;
+                    height: 48rpx;
+                }
 
             }
 
@@ -234,26 +328,26 @@ onMounted(() => {
     }
 
     .bottom-box {
-        .right-container {
+        .bottom-container {
-            padding: 10rpx 28rpx;
+            padding: 20rpx 28rpx;
 
             .add-img {
-                width: 66rpx;
+                width: 72rpx;
-                height: 66rpx;
+                height: 72rpx;
-                margin-right: 24rpx;
             }
 
             .search-box {
-                height: 70rpx;
+                height: 96rpx;
-                border-radius: 35rpx 35rpx 35rpx 35rpx;
+                border-radius: 28rpx;
-                border: 2rpx solid #DFDFDF;
+                padding: 0 42rpx;
-                padding: 0 26rpx;
+                margin: 0 20rpx;
+                background-color: #E8E8E8;
 
                 .input {
                     ::v-deep .input-placeholder {
-                        color: #C3C3C3;
+                        color: #8B8B8B;
-                        font-size: 32rpx;
+                        font-size: 30rpx;
-                        line-height: 32rpx;
+                        line-height: 28rpx;
                     }
                 }
 
@@ -271,5 +365,351 @@ onMounted(() => {
         }
     }
 
+}
+
+//oppo样式
+.oppo-style {
+    background-color: #F0F1F3 !important;
+
+    .top-box {
+
+        .top-container {
+            padding: 0 52rpx;
+            background-color: #F0F1F3;
+            height: 88rpx;
+            box-shadow: inset 0 -0.3px 0 0 #D0D1D3;
+
+            .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;
+                height: 100%;
+                margin: 0 18rpx;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .title {
+                    font-size: 36rpx;
+                    color: #1A1A1A;
+                    font-weight: 500;
+                    line-height: 36rpx;
+                }
+
+                .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 {
+        background-color: #FAFAFA;
+
+        .bottom-container {
+            padding: 16rpx 32rpx 50rpx;
+
+            .add-img {
+                width: 84rpx;
+                height: 84rpx;
+            }
+
+            .search-box {
+                height: 84rpx;
+                border-radius: 42rpx;
+                padding: 0 38rpx;
+                margin: 0 16rpx;
+                background-color: #E6E6E6;
+
+                .input {
+                    ::v-deep .input-placeholder {
+                        color: #6C6C6E;
+                        font-size: 32rpx;
+                        line-height: 32rpx;
+                    }
+                }
+
+                .right-icon {
+                    width: 32rpx;
+                    height: 40rpx;
+                    margin-right: 14rpx;
+                }
+            }
+
+            .right-icon {
+                width: 84rpx;
+                height: 84rpx;
+            }
+        }
+    }
+
+}
+
+//华为样式
+.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;
+                height: 100%;
+                margin: 0 16rpx;
+                display: flex;
+                align-items: center;
+
+                .img {
+                    width: 72rpx;
+                    height: 72rpx;
+                    flex-shrink: 0;
+                    margin-right: 18rpx;
+                }
+
+                .title {
+                    font-size: 40rpx;
+                    color: #1A1A1A;
+                    font-weight: 500;
+                    line-height: 36rpx;
+                }
+
+                .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 {
+        background-color: #FFFFFF;
+
+        .bottom-container {
+            padding: 12rpx 32rpx;
+
+            .add-img {
+                width: 44rpx;
+                height: 44rpx;
+            }
+
+            .search-box {
+                height: 76rpx;
+                border-radius: 42rpx;
+                padding: 0 28rpx;
+                margin: 0 30rpx;
+                background-color: #F4F4F4;
+
+                .ka {
+                    width: 44rpx;
+                    height: 44rpx;
+                }
+
+                .down {
+                    width: 24rpx;
+                    height: 24rpx;
+                    margin-left: 10rpx;
+                }
+
+                .input {
+                    margin-left: 34rpx;
+
+                    ::v-deep .input-placeholder {
+                        color: #606060;
+                        font-size: 30rpx;
+                        line-height: 32rpx;
+                    }
+                }
+
+                .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;
+                height: 100%;
+                margin: 0 18rpx;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .title {
+                    font-size: 34rpx;
+                    color: #1A1A1A;
+                    font-weight: 500;
+                    line-height: 34rpx;
+                }
+            }
+
+            .right {
+                text-align: right;
+
+                .img {
+                    width: 44rpx;
+                    height: 44rpx;
+                }
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .bottom-box {
+        background-color: #fff;
+
+        .bottom-container {
+            padding: 20rpx 48rpx;
+
+            .search-box {
+                height: 64rpx;
+                border-radius: 16rpx;
+                padding: 0 18rpx;
+                margin-right: 42rpx;
+                background-color: #F2F2F2;
+
+                .input {
+                    ::v-deep .input-placeholder {
+                        color: #C8C8C8;
+                        font-size: 30rpx;
+                        line-height: 30rpx;
+                    }
+                }
+            }
+
+            .send-text {
+
+                color: #9CC9FF;
+                font-size: 34rpx;
+            }
+        }
+    }
+
 }
 </style>

components/message/list/message-nav-bar.vue

@@ -70,7 +70,9 @@
                     <image class="icon" :src="`/static/image/phone-message/${props.phone}/search.png`">
                     </image>
                     <input class="input flex-1" :placeholder="showInfo.placeholder" type="text">
-                    <image class="icon" :src="`/static/image/phone-message/${props.phone}/mic.png`"></image>
+                    <image v-if="phone != 'mi'" class="icon"
+                        :src="`/static/image/phone-message/${props.phone}/mic.png`">
+                    </image>
                 </view>
             </view>
             <slot>
@@ -171,7 +173,7 @@ page {
     background-color: #FFFFFF;
 }
 </style>
-<style lang="less">
+<style lang="less" scoped>
 ::v-deep .uni-navbar__header-btns {
     width: 100px !important;
     flex: 1;

pages/index/index.nvue

@@ -255,11 +255,11 @@ const otherList = [{
 	name: "身份证",
 	path: "/pages/other/card/card"
 },
-{
+	// {
-	icon: "/static/image/index/qita/card.png",
+	// 	icon: "/static/image/index/qita/card.png",
-	name: "短信",
+	// 	name: "短信",
-	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
+	// 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
-},
+	// },
 ]
 
 const data = reactive({

pages/message/chat-page/chat-page.vue

@@ -1,6 +1,52 @@
 <template>
-	<view>
+	<view :class="`${data.phone}-style`">
-		<ChatLayout :phone="data.phone" :chatInfo="data.data"></ChatLayout>
+		<ChatLayout :phone="data.phone" :chatInfo="data.data">
+			<!-- 弹出操作层及遮罩 -->
+			<view v-if="showActionPopup" class="action-mask" @tap="closeActionPopup">
+				<view class="action-popup" :style="{ top: popupTop + 'px', left: popupLeft + 'px' }">
+					<view class="action-item" @tap.stop="handleEdit">
+						<image class="action-icon" src="/static/image/phone-message/bianji.png"></image>
+						<text>编辑</text>
+					</view>
+					<view class="action-item" @tap.stop="handleSwap">
+						<image class="action-icon" src="/static/image/phone-message/huhuan.png"></image>
+						<text>消息互换</text>
+					</view>
+					<view class="action-item" @tap.stop="handleDelete">
+						<image class="action-icon" src="/static/image/phone-message/shanchu.png"></image>
+						<text>删除</text>
+					</view>
+					<!-- 向上指的三角形，因为要求在长按元素下方 -->
+					<view class="triangle"></view>
+				</view>
+			</view>
+
+
+			<view v-for="(message, index) in messageList" :key="index" class="message-item"
+				:class="{ isMe: message.isMe, 'm-t-16': shouldApplyMt16(index) && !shouldShowTime(index) }">
+				<view class="time m-t-44" v-if="shouldShowTime(index)">
+					<view class="top-text" v-if="data.phone == 'iphone' && index == 0">信息 · 短信</view>
+					<view class="top-text" v-if="data.phone == 'huawei' && index == 0">短信/彩信</view>
+					<text v-if="data.phone == 'huawei'">{{ formatHuaweiTopTime(message.time) }}</text>
+					<text v-else>{{ formatChatTime(message.time) }}</text>
+				</view>
+				<view class="chat-box" :id="'msg-' + index" :class="{
+					'tail-right': shouldApplyTailRight(index),
+					'tail-left': shouldApplyTailLeft(index),
+					'delivered': isLastMeMessage(index)
+				}" @longpress="onMessageLongPress(index, message)">
+					<text v-if="message.isMe && data.phone == 'mi'" class="send-text">送达</text>
+					<view class="chat-bubble">
+						<view v-html="formatMessageContent(message.content, message.isMe)"></view>
+					</view>
+				</view>
+				<view v-if="data.phone == 'huawei'" class="second-info">
+					<text>{{ formatHuaweiBottomTime(message.time) }}</text>
+					<image src="/static/image/phone-message/huawei/chat-ka2.png"></image>
+				</view>
+			</view>
+
+		</ChatLayout>
 	</view>
 </template>
 
@@ -18,6 +64,305 @@ import {
 	stringUtil,
 	util
 } from '@/utils/common.js';
+
+const messageList = [
+	{
+		time: "2026-01-01 00:24",
+		content: "<p>【京东快递】快递尾号29398已放在博朗郡二期惠美家便利店，快递员电话15320547739，查看签收照片或反馈异常3.cn/2Beu-fXr</p>",
+		isMe: false
+	},
+	{
+		time: "2026-01-01 00:24",
+		content: "<p>啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
+		isMe: false
+	},
+	{
+		time: "2026-01-01 00:24",
+		content: "<p>啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
+		isMe: true
+	}, {
+		time: "2026-01-01 00:24",
+		content: "<p>1</p>",
+		isMe: true
+	}
+	, {
+		time: "2026-01-01 00:24",
+		content: "<p>15555555</p>",
+		isMe: true
+	},
+	{
+		time: "2026-01-02 11:24",
+		content: "<p>测试测试测试测试测试测试彩色测试哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
+		isMe: false
+	}, {
+		time: "2026-01-02 11:24",
+		content: "<p>测试测试测试测试测试测试彩色测试哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
+		isMe: false
+	}, {
+		time: "2026-01-12 11:24",
+		content: "<p>【京东金融】您的白条付费额度已提升5000.00元，不分期使用0.065%/日，不用不收费3.cn/j/1Gx-uEat 拒收请回复R</p>",
+		isMe: false
+	}, {
+		time: "2026-01-20 00:24",
+		content: "<p>dhhahahhahs.cn</p>",
+		isMe: true
+	}, {
+		time: "2026-03-12 00:24",
+		content: "<p>dhhahahhahs.cn</p>",
+		isMe: true
+	},
+]
+
+// 判断消息isMe==true时上一条消息是否也是isMe==true，如果不是则应用m-t-16样式
+const shouldApplyMt16 = (index) => {
+	if (index === 0) return false;
+	const currentMsg = messageList[index];
+	const prevMsg = messageList[index - 1];
+	if (currentMsg.isMe && !prevMsg.isMe) {
+		return true;
+	}
+	return false;
+}
+
+// 判断消息isMe==true时下一条消息是否也是isMe==true，如果不是则应用m-t-16样式
+const shouldApplyNextIsMe = (index) => {
+	const currentMsg = messageList[index];
+	// 拦截：如果已经是数组的最后一条消息，必然不存在下一条消息
+	if (index >= messageList.length - 1) return false;
+
+	const nextMsg = messageList[index + 1];
+	if (currentMsg.isMe && nextMsg.isMe) {
+		return true;
+	}
+	return false;
+}
+
+// 判断是否为最后一条自己发出的消息
+const isLastMeMessage = (currentIndex) => {
+	const currentMsg = messageList[currentIndex];
+	if (!currentMsg.isMe) return false;
+
+	// 往后遍历，如果还能找到isMe=true的消息，说明当前这条不是最后一条
+	for (let i = currentIndex + 1; i < messageList.length; i++) {
+		if (messageList[i].isMe) {
+			return false;
+		}
+	}
+	return true;
+}
+
+// 判断 tail-right（右侧我方气泡尾巴）样式是否生效
+const shouldApplyTailRight = (index) => {
+	const currentMsg = messageList[index];
+	if (!currentMsg.isMe) return false; // 不是我发的直接没右侧尾巴
+
+	// 如果这是整体列表最后一条消息，必然有尾巴
+	if (index === messageList.length - 1) return true;
+
+	const nextMsg = messageList[index + 1];
+
+	// 条件 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;
+	}
+
+	// 其他情况（连绵不断的连发，中间没超时间也没被对方打断），则隐藏中间环节气泡尾巴
+	return false;
+}
+
+// 判断 tail-left 样式是否生效
+const shouldApplyTailLeft = (index) => {
+	const currentMsg = messageList[index];
+	if (currentMsg.isMe) return false;
+
+	// 如果这是整体列表最后一条消息，也就符合最后一条isMe==false的特征
+	if (index === messageList.length - 1) return true;
+
+	const nextMsg = messageList[index + 1];
+
+	// 条件 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;
+	}
+
+	// 条件 b: 这是最后一条 isMe == false 的消息
+	for (let i = index + 1; i < messageList.length; i++) {
+		if (!messageList[i].isMe) {
+			return false; // 往后还有不是自己发的消息，所以当前并非最后一条 isMe==false
+		}
+	}
+
+	return true;
+}
+
+// 获取格式化后的聊天时间显示
+const formatChatTime = (timeStr) => {
+	if (!timeStr) return '';
+	const date = new Date(timeStr.replace(/-/g, '/'));
+	if (isNaN(date.getTime())) return timeStr;
+
+	const now = new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+	const diffDays = Math.floor((today.getTime() - target.getTime()) / (1000 * 60 * 60 * 24));
+
+	const hours = String(date.getHours()).padStart(2, '0');
+	const minutes = String(date.getMinutes()).padStart(2, '0');
+	const timeNum = `${hours}:${minutes}`;
+
+	if (diffDays === 0) {
+		if (data.phone == 'iphone') return `今天 ${timeNum}`;
+		return `${timeNum}`;
+	} else if (diffDays === 1) {
+		return `昨天 ${timeNum}`;
+	} else if (diffDays > 1 && diffDays < 7) {
+		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+		return `${weekDays[date.getDay()]} ${timeNum}`;
+	} else {
+		// 超过一周，同一年显示 月日 时分，跨年显示 年月日 时分
+		if (date.getFullYear() === now.getFullYear()) {
+			return `${date.getMonth() + 1}月${date.getDate()}日 ${timeNum}`;
+		} else {
+			return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${timeNum}`;
+		}
+	}
+}
+
+// 华为顶部时间栏：只显示日期维度的信息，无具体时分秒
+const formatHuaweiTopTime = (timeStr) => {
+	if (!timeStr) return '';
+	const date = new Date(timeStr.replace(/-/g, '/'));
+	if (isNaN(date.getTime())) return timeStr;
+
+	const now = new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+	const diffDays = Math.floor((today.getTime() - target.getTime()) / (1000 * 60 * 60 * 24));
+
+	if (diffDays === 0) {
+		return `今天`;
+	} else if (diffDays === 1) {
+		return `昨天`;
+	} else {
+		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+		const weekdayStr = weekDays[date.getDay()];
+		return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${weekdayStr}`;
+	}
+}
+
+// 华为底部小尾巴附加时间：上下午时分、或者“刚刚”
+const formatHuaweiBottomTime = (timeStr) => {
+	if (!timeStr) return '';
+	const date = new Date(timeStr.replace(/-/g, '/'));
+	if (isNaN(date.getTime())) return timeStr;
+
+	const now = new Date();
+	// 判断是否在一分钟内（差值在 60000 毫秒以内）
+	const diffMs = now.getTime() - date.getTime();
+	if (diffMs >= 0 && diffMs <= 60000) {
+		return '刚刚';
+	}
+
+	const ampm = date.getHours() >= 12 ? '下午' : '上午';
+	// 转换为 12 小时制
+	let displayHour = date.getHours() % 12;
+	displayHour = displayHour ? displayHour : 12; // 如果是 0(午夜) 则是12
+	const minutes = String(date.getMinutes()).padStart(2, '0');
+
+	return `${ampm}${displayHour}:${minutes}`;
+}
+
+// 判断是否显示时间 (间隔大于5分钟)
+const shouldShowTime = (index) => {
+	if (index === 0) return true; // 第一条必定显示时间
+
+	const currentMsgTime = new Date(messageList[index].time.replace(/-/g, '/')).getTime();
+	const prevMsgTime = new Date(messageList[index - 1].time.replace(/-/g, '/')).getTime();
+
+	// 如果无法解析时间，降级为显示
+	if (isNaN(currentMsgTime) || isNaN(prevMsgTime)) return true;
+
+	// 5 分钟 = 5 * 60 * 1000 = 300000 毫秒
+	return (currentMsgTime - prevMsgTime) > 180000;
+}
+
+// 格式化文本：给网址和 5 位以上连续数字加上下划线样式，非我方消息同时赋予文字蓝色
+const formatMessageContent = (content, isMe) => {
+	if (!content) return '';
+
+	// 匹配 url 或 5位以上连续数字
+	// URL: http(s)://... 或 xxx.xxx/... 
+	const combinedRegex = /((?:https?:\/\/)?(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[a-zA-Z0-9_/%-]*)*)|(\d{5,})/g;
+
+	return content.replace(combinedRegex, (match) => {
+		// 为了防止直接替换标签内属性（当前仅存在简单的 <p> 标签无此隐患）
+		let color = '#3A85F8'
+		if (data.phone == 'iphone') color = ' #0B7AE3'
+		if (data.phone == 'mi') color = '#3A85F8'
+		const colorStyle = !isMe ? `color: ${color};` : '';
+		return `<span style="text-decoration: underline; ${colorStyle}">${match}</span>`;
+	});
+}
+
+const showActionPopup = ref(false)
+const popupTop = ref(0)
+const popupLeft = ref(0)
+const selectedMessage = ref(null)
+
+const onMessageLongPress = (index, message) => {
+	selectedMessage.value = message;
+	uni.createSelectorQuery().select('#msg-' + index).boundingClientRect(rect => {
+		if (rect) {
+			// 将弹窗定位在元素正下方 (bottom边界 + 一点点边距)
+			popupTop.value = rect.bottom + 10;
+			// 弹窗水平居中于该内容
+			let left = rect.left + rect.width / 2;
+
+			// 获取系统信息，防止弹出框超出屏幕左右侧
+			uni.getSystemInfo({
+				success: (info) => {
+					let popupWidth = 150; // 预估弹出层的固定宽度（可根据实际情况微调）
+					if (left < popupWidth / 2 + 10) left = popupWidth / 2 + 10;
+					if (left > info.windowWidth - popupWidth / 2 - 10) left = info.windowWidth - popupWidth / 2 - 10;
+					popupLeft.value = left;
+					showActionPopup.value = true;
+				}
+			})
+		}
+	}).exec();
+}
+
+const closeActionPopup = () => {
+	showActionPopup.value = false;
+	selectedMessage.value = null;
+}
+
+const handleEdit = () => {
+	uni.showToast({ title: '点击了编辑', icon: 'none' });
+	closeActionPopup();
+}
+
+const handleSwap = () => {
+	uni.showToast({ title: '点击了消息互换', icon: 'none' });
+	closeActionPopup();
+}
+
+const handleDelete = () => {
+	uni.showToast({ title: '点击了删除', icon: 'none' });
+	closeActionPopup();
+}
+
 const data = reactive({
 	phone: "iphone",
 	data: {}
@@ -33,4 +378,305 @@ onLoad((options) => {
 })
 </script>
 
-<style lang="less"></style>
+<style lang="less" scoped>
+.action-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 999;
+}
+
+.action-popup {
+	position: fixed;
+	background-color: #4C4C4C;
+	border-radius: 12rpx;
+	padding: 20rpx 30rpx;
+	display: flex;
+	transform: translateX(-50%);
+	width: 540rpx;
+	z-index: 10;
+}
+
+.action-popup .triangle {
+	position: absolute;
+	top: -12rpx;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 0;
+	height: 0;
+	border-left: 12rpx solid transparent;
+	border-right: 12rpx solid transparent;
+	border-bottom: 14rpx solid #4C4C4C;
+}
+
+.action-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #FFFFFF;
+	font-size: 20rpx;
+	margin: 0 20rpx;
+}
+
+.action-icon {
+	width: 36rpx;
+	height: 36rpx;
+	margin-bottom: 8rpx;
+}
+
+// 苹果样式
+.iphone-style {
+	.m-t-16 {
+		margin-top: 16rpx !important;
+	}
+
+	.top-text {
+		text-align: center;
+		font-size: 20rpx;
+		color: #838383;
+		margin-top: 26rpx;
+	}
+
+	.time {
+		color: #838383;
+		font-size: 20rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+		margin-top: 36rpx;
+	}
+
+	.chat-box {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+
+		.chat-bubble {
+			padding: 18rpx 22rpx;
+			background-color: #E9E9EB;
+			border-radius: 34rpx;
+			max-width: 600rpx;
+			font-size: 32rpx;
+			line-height: 38rpx;
+			color: #1A1A1A;
+			margin: 4rpx 30rpx 0;
+			word-break: break-all;
+		}
+	}
+
+
+	.isMe {
+		.chat-box {
+			justify-content: flex-end;
+		}
+
+		.chat-bubble {
+			background-color: #34C85A;
+			color: #fff;
+		}
+	}
+
+	.tail-left {
+		position: relative;
+	}
+
+	.tail-left::after {
+		position: absolute;
+		left: 18rpx;
+		bottom: 0;
+		content: '';
+		background: url('/static/image/phone-message/iphone/left-msg-box.png') no-repeat center bottom;
+		background-size: 100% 100%;
+		width: 28rpx;
+		height: 36rpx;
+	}
+
+	.tail-right {
+		position: relative;
+	}
+
+	.delivered::before {
+		position: absolute;
+		right: 18rpx;
+		bottom: -12rpx;
+		content: '已送达';
+		font-size: 20rpx;
+		line-height: 20rpx;
+		color: #8B8B8B;
+		transform: translateY(100%);
+	}
+
+	.tail-right::after {
+		position: absolute;
+		right: 18rpx;
+		bottom: 0;
+		content: '';
+		background: url('/static/image/phone-message/iphone/right-msg-box.png') no-repeat center bottom;
+		background-size: 100% 100%;
+		width: 28rpx;
+		height: 36rpx;
+	}
+}
+
+// 小米样式
+.mi-style {
+	.top-text {
+		text-align: center;
+		font-size: 20rpx;
+		color: #838383;
+		margin-top: 26rpx;
+	}
+
+	.time {
+		padding: 0 54rpx;
+		color: #646464;
+		font-size: 24rpx;
+		line-height: 28rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.chat-box {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+
+		.chat-bubble {
+			padding: 22rpx 42rpx;
+			background-color: #FFFFFF;
+			border-radius: 32rpx;
+			font-size: 32rpx;
+			line-height: 50rpx;
+			color: #1A1A1A;
+			max-width: 550rpx;
+			margin: 0 24rpx;
+			word-break: break-all;
+		}
+	}
+
+	.message-item {
+		margin-top: 16rpx;
+	}
+
+	.m-t-44 {
+		margin-top: 44rpx;
+	}
+
+
+	.isMe {
+
+		.time {
+			text-align: right;
+		}
+
+		.chat-box {
+			justify-content: flex-end;
+			align-items: center;
+
+			.send-text {
+				color: #646464;
+				font-size: 24rpx;
+			}
+
+			.chat-bubble {
+				margin-left: 12rpx;
+				background-color: #3681FF;
+				color: #FFFFFF;
+			}
+		}
+
+
+	}
+}
+
+// 华为样式
+.huawei-style {
+	.top-text {
+		text-align: center;
+		font-size: 22rpx;
+		line-height: 22rpx;
+		color: #545454;
+		margin-bottom: 12rpx;
+	}
+
+	.time {
+		text-align: center;
+		font-size: 22rpx;
+		line-height: 22rpx;
+		color: #545454;
+		margin-top: 40rpx;
+	}
+
+	.chat-box {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+
+		.chat-bubble {
+			padding: 12rpx 24rpx;
+			background-color: #FFFFFF;
+			border-radius: 4rpx 28rpx 28rpx 28rpx;
+			max-width: 550rpx;
+			margin: 0 30rpx;
+			margin-top: 34rpx;
+			font-size: 30rpx;
+			line-height: 38rpx;
+			color: #1a1a1a;
+			font-weight: 500;
+			word-break: break-all;
+		}
+	}
+
+	.second-info {
+		display: flex;
+		align-items: center;
+		color: #545454;
+		font-size: 20rpx;
+		line-height: 24rpx;
+		margin-top: 16rpx;
+		padding-left: 52rpx;
+		padding-right: 56rpx;
+
+		image {
+			width: 14rpx;
+			height: 18rpx;
+			margin-left: 8rpx;
+		}
+	}
+
+
+	.m-t-44 {
+		margin-top: 44rpx;
+	}
+
+
+	.isMe {
+		.second-info {
+			justify-content: flex-end;
+		}
+
+		.message-item {
+			margin-top: 34rpx;
+		}
+
+		.chat-box {
+			justify-content: flex-end;
+			align-items: center;
+
+			.send-text {
+				color: #646464;
+				font-size: 24rpx;
+			}
+
+			.chat-bubble {
+				margin-left: 12rpx;
+				background-color: #3681FF;
+				color: #FFFFFF;
+				border-radius: 28rpx 4rpx 28rpx 28rpx;
+			}
+		}
+
+
+	}
+}
+</style>