From eefe793b8fe8ec544474b5f713aad4d3a332d732 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Wed, 11 Mar 2026 18:31:57 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9F=AD=E4=BF=A1?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/main.css                               |   1 +
 components/message/chat/chat-layout.vue       | 275 +++++++
 components/message/list.vue                   | 145 ----
 components/message/list/list.vue              | 717 ++++++++++++++++++
 .../message/{ => list}/message-nav-bar.vue    | 150 ++--
 main.js                                       |   2 +-
 pages.json                                    |  18 +-
 pages/message/chat-page/chat-page.vue         |  36 +
 pages/message/list-index.vue                  | 109 ++-
 .../fliggy-train-tickets.vue                  |   4 +-
 .../qunar-train-tickets.vue                   |   2 +-
 static/image/phone-message/bianji.png         | Bin 0 -> 930 bytes
 static/image/phone-message/huawei/default.png | Bin 0 -> 1895 bytes
 static/image/phone-message/huawei/delete.png  | Bin 0 -> 1994 bytes
 static/image/phone-message/huhuan.png         | Bin 0 -> 1605 bytes
 .../image/phone-message/iphone/chat-left.png  | Bin 0 -> 1125 bytes
 .../phone-message/iphone/left-msg-box.png     | Bin 0 -> 818 bytes
 .../phone-message/iphone/right-msg-box.png    | Bin 0 -> 832 bytes
 static/image/phone-message/iphone/right.png   | Bin 0 -> 821 bytes
 static/image/phone-message/mi/back.png        | Bin 0 -> 983 bytes
 static/image/phone-message/mi/chat-left.png   | Bin 0 -> 1222 bytes
 static/image/phone-message/mi/default.png     | Bin 0 -> 1709 bytes
 static/image/phone-message/mi/mic.png         | Bin 0 -> 2200 bytes
 static/image/phone-message/oppo/chat-left.png | Bin 0 -> 1316 bytes
 static/image/phone-message/oppo/default.png   | Bin 0 -> 1611 bytes
 static/image/phone-message/shanchu.png        | Bin 0 -> 1065 bytes
 static/image/phone-message/vivo/default.png   | Bin 0 -> 1911 bytes
 utils/common.js                               |  58 ++
 28 files changed, 1298 insertions(+), 219 deletions(-)
 create mode 100644 components/message/chat/chat-layout.vue
 delete mode 100644 components/message/list.vue
 create mode 100644 components/message/list/list.vue
 rename components/message/{ => list}/message-nav-bar.vue (72%)
 create mode 100644 pages/message/chat-page/chat-page.vue
 create mode 100644 static/image/phone-message/bianji.png
 create mode 100644 static/image/phone-message/huawei/default.png
 create mode 100644 static/image/phone-message/huawei/delete.png
 create mode 100644 static/image/phone-message/huhuan.png
 create mode 100644 static/image/phone-message/iphone/chat-left.png
 create mode 100644 static/image/phone-message/iphone/left-msg-box.png
 create mode 100644 static/image/phone-message/iphone/right-msg-box.png
 create mode 100644 static/image/phone-message/iphone/right.png
 create mode 100644 static/image/phone-message/mi/back.png
 create mode 100644 static/image/phone-message/mi/chat-left.png
 create mode 100644 static/image/phone-message/mi/default.png
 create mode 100644 static/image/phone-message/mi/mic.png
 create mode 100644 static/image/phone-message/oppo/chat-left.png
 create mode 100644 static/image/phone-message/oppo/default.png
 create mode 100644 static/image/phone-message/shanchu.png
 create mode 100644 static/image/phone-message/vivo/default.png

diff --git a/common/main.css b/common/main.css
index a4d30ce..6e7522f 100644
--- a/common/main.css
+++ b/common/main.css
@@ -261,6 +261,7 @@
 }
 
 .flex-column {
+	display: flex;
 	flex-direction: column;
 }
 
diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
new file mode 100644
index 0000000..13e456d
--- /dev/null
+++ b/components/message/chat/chat-layout.vue
@@ -0,0 +1,275 @@
+<template>
+    <view class="page-container flex-column" :class="`${phone}-style`">
+        <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
+        <view class="top-box">
+            <slot name="top">
+                <view class="top-container">
+                    <view class="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>
+                        <view class="center">
+                            <image class="img shrink-0"
+                                :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="right"></view>
+                    </view>
+                    <view 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>
+                </view>
+            </slot>
+        </view>
+        <view class="center-box flex-1">
+            <slot></slot>
+        </view>
+        <view class="bottom-box">
+            <slot name="bottom">
+                <view class="right-container flex-align-center">
+                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
+                    <view class="search-box flex-1 flex-align-center">
+                        <input class="input flex-1" placeholder="信息 · 短信" type="text">
+                        <image v-if="phone == 'iphone'" class="right-icon"
+                            src="/static/image/phone-message/iphone/mic.png"></image>
+                    </view>
+                    <view v-if="phone != 'iphone'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
+                    </view>
+                </view>
+            </slot>
+        </view>
+    </view>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { onLoad, onPageScroll } from "@dcloudio/uni-app";
+import { stringUtil, 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"
+        }
+    }
+})
+
+const data = reactive({
+    statusBarHeight: 0,
+})
+
+onMounted(() => {
+    // 同步获取系统信息
+    const systemInfo = uni.getSystemInfoSync();
+    data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+})
+
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.page-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+}
+
+//苹果样式
+.iphone-style {
+
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .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 {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .right-container {
+        padding: 10rpx 28rpx;
+
+        .add-img {
+            width: 66rpx;
+            height: 66rpx;
+            margin-right: 24rpx;
+        }
+
+        .search-box {
+            height: 70rpx;
+            border-radius: 35rpx 35rpx 35rpx 35rpx;
+            border: 2rpx solid #DFDFDF;
+            padding: 0 26rpx;
+
+            .input {
+                ::v-deep .input-placeholder {
+                    color: #C3C3C3;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+            }
+
+            .right-icon {
+                width: 32rpx;
+                height: 32rpx;
+                margin-left: 20rpx;
+            }
+        }
+
+    }
+}
+
+//小米样式
+.mi-style {
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .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 {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .bottom-box {
+        .right-container {
+            padding: 10rpx 28rpx;
+
+            .add-img {
+                width: 66rpx;
+                height: 66rpx;
+                margin-right: 24rpx;
+            }
+
+            .search-box {
+                height: 70rpx;
+                border-radius: 35rpx 35rpx 35rpx 35rpx;
+                border: 2rpx solid #DFDFDF;
+                padding: 0 26rpx;
+
+                .input {
+                    ::v-deep .input-placeholder {
+                        color: #C3C3C3;
+                        font-size: 32rpx;
+                        line-height: 32rpx;
+                    }
+                }
+
+                .right-icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                    margin-left: 20rpx;
+                }
+            }
+
+            .right-icon {
+                width: 72rpx;
+                height: 72rpx;
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/components/message/list.vue b/components/message/list.vue
deleted file mode 100644
index c3ed4c8..0000000
--- a/components/message/list.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <view :style="`${phone}-style`">
-        <uni-swipe-action class="swipe-action">
-            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
-            <uni-swipe-action-item>
-                <view>
-                    <view class="item flex-align-center">
-                        <view class="dot"></view>
-                        <image class="img shrink-0" :src="`/static/image/phone-message/${phone}/default.png`"></image>
-                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
-                            <view class="main-box flex-1">
-                                <view class="title-box flex-between">
-                                    <text class="title">title</text>
-                                    <text class="time">昨天</text>
-                                </view>
-                                <view class="content">市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好...</view>
-                            </view>
-                            <view class="box-right h100 flex-column flex-align-center">
-                                <uni-icons type="right" size="14" color="#C1C1C1"></uni-icons>
-                                <image class="img" src="/static/image/phone-message/iphone/notice.png"></image>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-                <template v-slot:right>
-                    <view><text>删除</text></view>
-                </template>
-            </uni-swipe-action-item>
-        </uni-swipe-action>
-    </view>
-</template>
-<script setup>
-import {
-    ref,
-    reactive,
-    computed
-} from 'vue'
-import {
-    util
-} from '@/utils/common.js';
-
-const props = defineProps({
-    // 手机品牌
-    phone: {
-        type: String,
-        default: 'iphone'
-    }
-})
-</script>
-<style>
-@import '@/common/main.css';
-</style>
-<style lang="less" scoped>
-.m-t-4 {
-    margin-top: 4rpx;
-}
-
-.m-l-24 {
-    margin-left: 24rpx;
-}
-
-.iphone-style {
-
-    .swipe-action {
-        margin-top: 24rpx;
-    }
-
-    .item:first-child {
-        .border-box {
-            position: relative;
-        }
-
-        .border-box::before {
-            position: absolute;
-            content: '';
-            width: 100%;
-            height: 1px;
-            top: -1px;
-            left: 0;
-            right: 0;
-            box-shadow: 0 0.3px 0 0 #C2C2C2;
-        }
-    }
-
-    .item {
-        padding: 0 0 0 14rpx;
-        height: 146rpx;
-
-        .dot {
-            width: 20rpx;
-            height: 20rpx;
-            background-color: #007BFD;
-            border-radius: 50%;
-        }
-
-        .img {
-            width: 84rpx;
-            height: 84rpx;
-            margin-left: 16rpx;
-        }
-
-        .border-box {
-            padding: 18rpx 14rpx 14rpx 0;
-            height: 100%;
-            box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
-        }
-
-        .main-box {
-            .title-box {
-                margin-bottom: 6rpx;
-
-                .title {
-                    color: #1A1A1A;
-                    font-size: 32rpx;
-                    line-height: 32rpx;
-                }
-
-                .time {
-                    color: #838383;
-                    font-size: 28rpx;
-                    line-height: 28rpx;
-                }
-            }
-
-            .content {
-                font-size: 28rpx;
-                line-height: 38rpx;
-                color: #838383;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-            }
-        }
-
-        .box-right {
-            .img {
-                width: 28rpx;
-                height: 28rpx;
-                margin: 0;
-            }
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/components/message/list/list.vue b/components/message/list/list.vue
new file mode 100644
index 0000000..2ff0886
--- /dev/null
+++ b/components/message/list/list.vue
@@ -0,0 +1,717 @@
+<template>
+    <view :style="`${phone}-style`">
+        <uni-swipe-action class="swipe-action">
+            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
+            <uni-swipe-action-item class="swipe-action-item" v-for="(item, index) in list" :key="item.id">
+                <view class="flex flex-align-center " @click="clickItem(item)">
+
+                    <view class="item flex w100">
+                        <view class="flex flex-align-center left-box">
+                            <view :class="{ 'opacity-0': !item.unRead }" class="dot shrink-0"><text
+                                    v-if="phone == 'huawei' || phone == 'oppo'">{{ item.unReadNumber
+                                        > 99
+                                        ? '99+' : (item.unReadNumber || 1) }}</text>
+                            </view>
+                            <image class="img shrink-0"
+                                :src="item.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
+                            <view class="main-box flex-1">
+                                <view class="title-box flex-between">
+                                    <text class="title">{{ item.title }}</text>
+                                    <text class="time">{{ formatDate(item.time) }}</text>
+                                </view>
+                                <view class="content">{{ item.content }}</view>
+                            </view>
+                            <view class="box-right h100 flex-column flex-align-center">
+                                <image v-if="phone == 'iphone'" class="m-t-4"
+                                    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>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <template v-slot:right>
+                    <view class="flex flex-align-center" style="margin-left: 1px;">
+                        <view v-if="phone == 'iphone'" class="btn flex-center flex-align-center edit">
+                            <image src="/static/image/phone-message/iphone/mute.png"></image>
+                        </view>
+                        <view class="btn flex-center flex-align-center delete">
+                            <image
+                                :src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
+                            </image>
+                        </view>
+                    </view>
+
+                </template>
+            </uni-swipe-action-item>
+        </uni-swipe-action>
+    </view>
+</template>
+<script>
+import { stringUtil } from '@/utils/common.js';
+
+const defaultList = [
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        unReadNumber: 100,
+        noNotice: true,
+        img: "",
+        title: "系统通知",
+        content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+        time: "2026-03-11 08:31:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: true,
+        img: "",
+        title: "12306",
+        content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+        time: "2026-03-10 14:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "支付宝支付",
+        content: "支付成功，您在XX超市消费了 45.00 元。",
+        time: "2026-03-10 18:20:15"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "花呗提醒",
+        content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+        time: "2026-03-09 09:00:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "顺丰速运",
+        content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+        time: "2026-03-01 10:15:22"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: true,
+        img: "",
+        title: "蚂蚁森林",
+        content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+        time: "2026-02-28 07:45:10"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "余额宝",
+        content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+        time: "2026-02-27 06:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "10086",
+        content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+        time: "2026-02-26 15:10:45"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "饿了么",
+        content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+        time: "2026-02-25 12:40:33"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "淘宝通知",
+        content: "您关注的商品降价啦，快来抢购吧！",
+        time: "2026-02-20 20:55:12"
+    }
+]
+</script>
+<script setup>
+import {
+    ref,
+    reactive,
+    computed
+} from 'vue'
+import {
+    util,
+    dateUtil
+} from '@/utils/common.js';
+// 定义事件
+const emit = defineEmits(['item-click'])
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    list: {
+        type: Array,
+        default: () => defaultList
+    }
+})
+
+/**
+ * 时间日期格式化判断
+ * @param date 
+ */
+const formatDate = (date) => {
+    if (props.phone == 'oppo') {
+        return dateUtil.formatMessageTime(date, true)
+    } else if (props.phone == 'huawei') {
+        return dateUtil.formatMessageTime(date, true, 'YYYY年M月D日')
+    } else if (props.phone == 'vivo') {
+        let d = date;
+        if (typeof d === 'string') {
+            d = new Date(d.replace(/-/g, '/'));
+        } else if (typeof d === 'number') {
+            d = new Date(d);
+        }
+        const isCurrentYear = d.getFullYear() === new Date().getFullYear();
+        return dateUtil.formatMessageTime(date, true, isCurrentYear ? 'M月D日' : 'YYYY/M/D')
+    } else {
+        return dateUtil.formatMessageTime(date)
+    }
+}
+
+/**
+ * 点击列表元素
+ */
+const clickItem = (item) => {
+    emit('item-click', item)
+}
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.m-t-4 {
+    margin-top: 4rpx;
+}
+
+.m-t-8 {
+    margin-top: 8rpx;
+}
+
+.m-l-24 {
+    margin-left: 24rpx;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.swipe-action-item {
+    background-color: #FFFFFF;
+}
+
+// 苹果样式
+.iphone-style {
+
+    .swipe-action {
+        margin-top: 28rpx;
+    }
+
+    .swipe-action-item:first-child {
+        .border-box {
+            position: relative;
+        }
+
+        .border-box::before {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+    }
+
+    .item {
+        padding: 0 0 0 14rpx;
+        height: 146rpx;
+        align-items: center;
+
+        .dot {
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #007BFD;
+            border-radius: 50%;
+        }
+
+        .img {
+            width: 84rpx;
+            height: 84rpx;
+            margin-left: 16rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 18rpx 14rpx 14rpx 0;
+            height: 100%;
+            // box-shadow: inset 0 -0.3px 0 0 #D8D8D8;
+        }
+
+        .border-box::after {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 600;
+                }
+
+                .time {
+                    color: #838383;
+                    font-size: 28rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #838383;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// 小米样式
+.mi-style {
+    .item {
+        padding-top: 44rpx;
+        height: 170rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 54rpx;
+        }
+
+        .dot {
+            position: absolute;
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #FA3D30;
+            border-radius: 50%;
+            left: 16rpx;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 52rpx 8rpx 0;
+            margin-left: 22rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+
+                .time {
+                    color: #9A9A9A;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 26rpx;
+                line-height: 38rpx;
+                color: #656565;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// oppo样式
+.oppo-style {
+    .item {
+        padding-top: 28rpx;
+        height: 178rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 34rpx;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 4rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -4rpx;
+            z-index: 1;
+            border: 2rpx solid #FFFFFF;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 34rpx 28rpx 0;
+            margin-left: 32rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 16rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #737373;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+}
+
+// 华为样式
+.huawei-style {
+    .item {
+        padding: 0 32rpx;
+        height: 156rpx;
+        align-items: center;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 6rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -12rpx;
+            z-index: 1;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            padding: 18rpx 0;
+            position: relative;
+            margin-left: 30rpx;
+            margin-top: 2rpx;
+            height: 100%;
+            box-shadow: 0 -0.3px 0 0 #CFCFCF;
+        }
+
+        // .border-box::after {
+        //     position: absolute;
+        //     content: '';
+        //     width: 100%;
+        //     height: 1px;
+        //     bottom: 0;
+        //     left: 0;
+        //     right: 0;
+        //     background-color: #CFCFCF;
+        //     transform: scaleY(0.3);
+        // }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 24rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+
+// vivo样式
+.vivo-style {
+    .item {
+        padding: 0 50rpx 0 24rpx;
+        height: 172rpx;
+        align-items: center;
+
+
+        .dot {
+            width: 12rpx;
+            height: 12rpx;
+            background-color: #409DFE;
+            border-radius: 50%;
+            flex-shrink: 0;
+            margin-right: 10rpx;
+        }
+
+
+        .img {
+            width: 80rpx;
+            height: 80rpx;
+        }
+
+        .border-box {
+            padding: 28rpx 0 18rpx;
+            position: relative;
+            margin-left: 24rpx;
+            margin-top: 2rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 18rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #7C7C7C;
+                    font-size: 26rpx;
+                    line-height: 26rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+</style>
diff --git a/components/message/message-nav-bar.vue b/components/message/list/message-nav-bar.vue
similarity index 72%
rename from components/message/message-nav-bar.vue
rename to components/message/list/message-nav-bar.vue
index de19cf2..977d2ec 100644
--- a/components/message/message-nav-bar.vue
+++ b/components/message/list/message-nav-bar.vue
@@ -1,57 +1,65 @@
 <template>
     <view :class="`${phone}-style`">
         <!-- 导航样式 -->
-        <NavBar :isBack="false">
-            <!-- 左侧文字图标 -->
-            <template v-slot:left>
-                <view v-if="phone == 'iphone'" class="flex flex-align-center">
-                    <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
-                        mode=""></image>
-                    <text class="left-text">过滤条件</text>
-                </view>
-                <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
-                    <text class="left-text">信息</text>
-                </view>
-            </template>
-            <!-- 中间标题 -->
-            <template v-slot:center>
-                <view v-if="phone == 'iphone' && isScroll" class="center-text">
-                    信息
-                </view>
-            </template>
-            <!-- 右侧图标 -->
-            <template v-slot:right>
-                <!-- iphone -->
-                <view v-if="phone == 'iphone'">
-                    <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode=""></image>
-                    <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode=""></image>
-                </view>
-                <!-- mi -->
-                <view v-if="phone == 'mi'">
-                    <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
-                </view>
-                <!-- oppo -->
-                <view v-if="phone == 'oppo'">
-                    <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode=""></image>
-                    <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode=""></image>
-                </view>
-                <!-- huawei -->
-                <view v-if="phone == 'huawei'">
-                    <image v-if="isScroll" class="right-icon" src="/static/image/phone-message/huawei/nav-search.png"
-                        mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
-                </view>
-                <!-- vivo -->
-                <view v-if="phone == 'vivo'">
-                    <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
-                    <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode=""></image>
-                </view>
-            </template>
-        </NavBar>
+        <view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
+            <NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'">
+                <!-- 左侧文字图标 -->
+                <template v-slot:left>
+                    <view v-if="phone == 'iphone'" class="flex flex-align-center">
+                        <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
+                            mode=""></image>
+                        <text class="left-text">过滤条件</text>
+                    </view>
+                    <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
+                        <text class="left-text">信息</text>
+                    </view>
+                </template>
+                <!-- 中间标题 -->
+                <template v-slot:center>
+                    <view v-if="phone == 'iphone' && isScroll" class="center-text">
+                        信息
+                    </view>
+                </template>
+                <!-- 右侧图标 -->
+                <template v-slot:right>
+                    <!-- iphone -->
+                    <view v-if="phone == 'iphone'">
+                        <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode="">
+                        </image>
+                    </view>
+                    <!-- mi -->
+                    <view v-if="phone == 'mi'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
+                    </view>
+                    <!-- oppo -->
+                    <view v-if="phone == 'oppo'">
+                        <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode="">
+                        </image>
+                    </view>
+                    <!-- huawei -->
+                    <view v-if="phone == 'huawei'">
+                        <image v-if="isScroll" class="right-icon"
+                            src="/static/image/phone-message/huawei/nav-search.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
+                    </view>
+                    <!-- vivo -->
+                    <view v-if="phone == 'vivo'">
+                        <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
+                        <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode="">
+                        </image>
+                    </view>
+                </template>
+            </NavBar>
+        </view>
+
         <!-- 主体内容 -->
         <view class="main-container">
             <!-- 顶部搜索栏样式 -->
@@ -68,6 +76,7 @@
             <slot>
             </slot>
         </view>
+        <view class="bottom-placeholder"></view>
         <!-- 底部样式 -->
         <template v-if="phone == 'mi' || phone == 'oppo'">
             <image class="add-message" :src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
@@ -110,6 +119,14 @@ const props = defineProps({
     }
 })
 
+
+const data = reactive({
+    navBar: {
+        title: '信息',
+        bgColor: '#FFFFFF',
+    }
+})
+
 // 展示文字信息
 const showInfo = computed(() => {
     let text, placeholder, secondText, bottomLtext, bottomRtext
@@ -117,6 +134,7 @@ const showInfo = computed(() => {
         case "iphone":
             text = "信息"
             placeholder = '搜索'
+            data.navBar.bgColor = '#F8F8F8'
             break;
         case "mi":
             text = "主要"
@@ -144,12 +162,6 @@ const showInfo = computed(() => {
     return { text, placeholder, secondText, bottomLtext, bottomRtext }
 })
 
-const data = reactive({
-    navBar: {
-        title: '信息',
-        bgColor: '#FFFFFF',
-    }
-})
 </script>
 
 <style>
@@ -177,6 +189,7 @@ page {
     height: 120rpx;
     border-top: 1rpx solid #E7E7E7;
     background-color: #ffffff;
+    z-index: 9;
 
     .item {
         display: flex;
@@ -231,6 +244,12 @@ page {
         color: #1a1a1a;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #B5B5B5;
+        }
+    }
+
     .main-container {
         .top-box {
             padding: 20rpx 32rpx 0;
@@ -239,6 +258,7 @@ page {
                 color: #1A1A1A;
                 font-size: 64rpx;
                 font-weight: 700;
+                line-height: 72rpx;
             }
 
             .search-box {
@@ -318,6 +338,10 @@ page {
         height: 120rpx;
     }
 
+    .bottom-placeholder {
+        height: 120rpx;
+        width: 100%;
+    }
 
 }
 
@@ -359,6 +383,12 @@ page {
         right: 46rpx;
     }
 
+    .bottom-placeholder {
+        height: 148rpx;
+        width: 100%;
+    }
+
+
     .bottom-box {
         height: 148rpx;
         background-color: #FAFAFA;
@@ -403,6 +433,12 @@ page {
         margin: 0 8rpx;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #D1D1D1;
+        }
+    }
+
     .main-container {
 
 
diff --git a/main.js b/main.js
index 1b77748..861e941 100644
--- a/main.js
+++ b/main.js
@@ -27,7 +27,7 @@ export function createApp() {
 	const systemInfo = uni.getStorageSync('systemInfo') || {}
 	app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.3.sp1')
+	uni.setStorageSync('version', '1.0.3.sp2')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 
 	app.use(globalMethods);
diff --git a/pages.json b/pages.json
index 882f792..315dc2f 100644
--- a/pages.json
+++ b/pages.json
@@ -23,12 +23,20 @@
 		{
 			"root": "pages/message",
 			"pages": [{
-				"path": "list-index",
-				"style": {
-					"navigationBarTitleText": "短信列表首页",
-					"navigationStyle": "custom"
+					"path": "list-index",
+					"style": {
+						"navigationBarTitleText": "短信列表首页",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "chat-page/chat-page",
+					"style": {
+						"navigationBarTitleText": "短信聊天页面",
+						"navigationStyle": "custom"
+					}
 				}
-			}]
+			]
 		},
 		{
 			"root": "pages/balance",
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
new file mode 100644
index 0000000..2534a8f
--- /dev/null
+++ b/pages/message/chat-page/chat-page.vue
@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<ChatLayout :phone="data.phone" :chatInfo="data.data"></ChatLayout>
+	</view>
+</template>
+
+<script setup>
+import ChatLayout from '@/components/message/chat/chat-layout.vue'
+import {
+	ref,
+	reactive
+} from 'vue'
+import {
+	onLoad,
+	onPageScroll
+} from "@dcloudio/uni-app";
+import {
+	stringUtil,
+	util
+} from '@/utils/common.js';
+const data = reactive({
+	phone: "iphone",
+	data: {}
+})
+onLoad((options) => {
+	console.log(options)
+	if (options.phone) {
+		data.phone = options.phone
+	}
+	if (options.data) {
+		data.data = JSON.parse(options.data)
+	}
+})
+</script>
+
+<style lang="less"></style>
diff --git a/pages/message/list-index.vue b/pages/message/list-index.vue
index 34745c5..2f60a02 100644
--- a/pages/message/list-index.vue
+++ b/pages/message/list-index.vue
@@ -1,17 +1,14 @@
 <template>
 	<view>
 		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
-			<!-- <view v-for="index in 100">{{ index }}</view> -->
-			<!-- <List :phone="data.phone"></List> -->
-			<MessageList></MessageList>
-
+			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick"></MessageList>
 		</MessageNavBar>
 	</view>
 </template>
 
 <script setup>
-import MessageNavBar from '@/components/message/message-nav-bar.vue'
-import MessageList from '@/components/message/list.vue'
+import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
+import MessageList from '@/components/message/list/list.vue'
 import {
 	ref,
 	reactive
@@ -21,9 +18,103 @@ import {
 	onPageScroll
 } from "@dcloudio/uni-app";
 import {
+	stringUtil,
 	util
 } from '@/utils/common.js';
-import List from '@/components/call-log/list/list.vue';
+
+const defaultList = [
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		unReadNumber: 100,
+		noNotice: true,
+		img: "",
+		title: "系统通知",
+		content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+		time: "2026-03-11 08:31:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: true,
+		img: "",
+		title: "12306",
+		content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+		time: "2026-03-10 14:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "支付宝支付",
+		content: "支付成功，您在XX超市消费了 45.00 元。",
+		time: "2026-03-10 18:20:15"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "花呗提醒",
+		content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+		time: "2026-03-09 09:00:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "顺丰速运",
+		content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+		time: "2026-03-01 10:15:22"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: true,
+		img: "",
+		title: "蚂蚁森林",
+		content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+		time: "2026-02-28 07:45:10"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "余额宝",
+		content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+		time: "2026-02-27 06:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "10086",
+		content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+		time: "2026-02-26 15:10:45"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "饿了么",
+		content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+		time: "2026-02-25 12:40:33"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "淘宝通知",
+		content: "您关注的商品降价啦，快来抢购吧！",
+		time: "2026-02-20 20:55:12"
+	}
+]
 
 const data = reactive({
 	navBar: {
@@ -61,6 +152,10 @@ onPageScroll((e) => {
 	}
 })
 
+const itemClick = (item) => {
+	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&data=${JSON.stringify(item)}`)
+}
+
 </script>
 
 <style>
diff --git a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
index 047d9a8..84d8ea7 100644
--- a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
+++ b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
@@ -525,9 +525,7 @@ const showFristAndLastNumber = (str) => {
 
 	.section_4 {
 		filter: drop-shadow(0rpx 10rpx 10rpx #00000008);
-		background-image: url('https://ide.code.fun/api/image?token=69ae28bb97ce8400118178f6&name=ce4aca9097cf1d57763cc647764b458d.png');
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
+		background-color: #fff;
 
 		.group_5 {
 			padding-bottom: 32rpx;
diff --git a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
index 7ec38fe..4dabbf1 100644
--- a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
+++ b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
@@ -341,7 +341,7 @@ page {
 			border-radius: 25rpx;
 			width: 106rpx;
 			height: 50rpx;
-			border: solid 0.5px #28c2dd;
+			border: solid 1rpx #28c2dd;
 
 			.text_6 {
 				color: #28c2dd;
diff --git a/static/image/phone-message/bianji.png b/static/image/phone-message/bianji.png
new file mode 100644
index 0000000000000000000000000000000000000000..791a507ec63da9bc2f5bf99dce811f81ed9cab0d
GIT binary patch
literal 930
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$Gz#zuaRqY!j{;IcK=-<16fo3M
zOM?7@85o&aSlKzbdH4kcg+;}rq-A8~6%<v}G_-XLOiazpEv&3<Y#p3jJ$(HGLqa2y
zQZloO%iFs9`lrsEzi`pwW$QO@+rDGh-u;ITpE`Z!-1*B_uHU+S=kC4xPo6!0`TFhW
zFF$_$`TOsyu)<kjbnWtVaSZV|{&sq1aFc^XgZL?(O`D=M-yGw6tGC<uw9jQ8<*hGN
z?*IQU9(BZMfn@ppeA)Br3D0iUPGd|{d?K&ENM%v1W$>vJCo&haG1wftZBP`#-0dav
za24AP8@<P~)?Z(5`1I?uIZjjNgzh_We-8KM#T!!XSKK-4_19(NsooVQZs!E+Ute_R
ztl8Hh=cjpUXFplD?%o-hm-jo${`|VM*-OP6CchI~rI7tDEn8L4>QVHft7nR~J<C*k
zw8zg~$9G#n`_^0LXA|efnJOtQisYEem{rAcS?7$%%Z^`rIx_i0XU@)F_VMhjuKa7q
zKAzqF%0Eku*|lc#hL2r&YHv9kUa72_Iib(CVYR}tnUC(5pI&p8_va$<%RVn{SWbMY
z*?FP*+zp?Jll&~Fq~+$FNN;?$Cv)=For>zJKE|pAUiPb-C!Lk>H(sjF{9(!ToK-ew
zuidp<aWGs<_-y<6?gzhgj=z)5dy_1$u=Y)b$C_Vrx8=XGn4LZ0?j-x~0@?l#o>orF
zwVnOUeACVYYVCdNZAAKhN#-vV`Eud9>YujSk0<gbHQx<vpTndV#JBT+`t!Nbb59qw
o&iymz^;rp-B==v3>wVwHFZuT;@H*dVV6tKGboFyt=akR{0F}yD5C8xG

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/default.png b/static/image/phone-message/huawei/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1a660155e9d500168c2777cc084a6f652c330c2
GIT binary patch
literal 1895
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
bR6F9JWbU}1K#s$~KOR6>I#|@1dByw<?1KtC

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/delete.png b/static/image/phone-message/huawei/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..87dcc80c97e71a748329be6d92bdf7f00cc0b54a
GIT binary patch
literal 1994
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

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huhuan.png b/static/image/phone-message/huhuan.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd99f1e8e1063654f88de48e8eb0e88f461f02a1
GIT binary patch
literal 1605
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$atQDVaRqY!kAl$<AU6a)pP9=C
zOhfxig8YIR7@3$^SlKx^xwv_F`2~f9MMTBKC8T9!<>VC<Rn*iqG_|yKboC95j7`lg
ztZi)Vot$0WJ-mJV`~w1mf<r>X!Xu)hV`Agt6OvNWGqbXD^9zcKOG?YiE2^q%YU>&r
zo0?nO+B-UX`uZnKoHTjL)M?Xa%$zlQ?)=3|mM&Yhdd=GP8#iy+wqw`sJ$v^bJaqWz
z@l$8dU$}Jn%GGPvZ`{0n=kC4x4<0^x{N(Ag=PzEqdj0nOhmW5=fBE|D`;VW$e*gLV
zZ$@5~2QXWF^>lFzk&t|Q@O6AJE5q@J_m34uC#SeEb&7DV>7F>#>#WzMH%e0j6_-YO
zWQucj>OJW)(mt}{g_&Xak}2zsITZx0IrisYwrrwYV$S25Z_CVW`lsn=HXM$Ac>m(Z
zR0|_d9ie}J&dQcv7q?F7-o5N=fW^U>&iPGivw3yjty4~)q%);Q?)Hj5Hrc;Dykk55
z{=0qR=7|@rBAM>jE2qrfuYIcL$9DGbIr~39lh%Iy=j-k7-)iP2xNSMTUZ&^3Ns;M1
z`ya)>oOJY|=HAr!7VjW?_Bp4HeGQPgeBa(gbM~@@^#(`f3o{kVy=8)5oSb^<RNz&q
zLsK#ewI^S+VO+wNHRsgPNaG1iYO{D#ZwRnYa-9F^BkN>`KXqrr#h8{^)t)+k-IBFs
zwdwTL;vRdW7ag5aqSkoW?(D?^K8bJHg;&)ZKHrwvBqG0yqq9BLonc1ZZSB*q;v4In
z%Osc&y!47RW4_G0X?dd54)<wt2^CY{M4IyKQT68d@h0nL@F&g>y*h>qZtGUxxqD!V
z&J3$*C*>X=&_8}$cvHfw2({U#!l&QArF>dIKqoA*kD>YcN`v!E^<gUw%#Sptr_4@1
z{e%6wR_;+lg&?)vJ=2#7v)9ggdS@<6)26k*RD$n%t+r#FlWmd`p38G<&n(dnX64x_
zx7!RR=f<5ih&wE@I@IpF?7QtXf{iE5&PM(FXkt*d-g{^7<cB?%R`n%yz5A}YeBFl=
zHV^;qT2sOhyvfzFQd{f!$`2<t{aLK?VG&nxwa5-%tyQ^MYxK)C*S_gv-?F3BP@-tn
zm)6bobLDMo_k4HwUHo?ax4QbQFZ^c<)@jT>e?c@_ZNcI%8x6SM6rKLUCuw(8)c-Gc
z?cZP>laE{6gF1KwBj@N(7Q6TNS3=Wiq5FF`Ze8RNlq|#c{oTelt0q5P_1!R5=Krh0
z`6};ceQk6ve^*oRS8DyGo@boL-j!+1exxAqvtV=d&K<KK_pnasO@7>evDW<Ol=hD<
zO~GHaCcOTsdGGTIhof(6XUk|!c|A)>_h<Ycc7+#P@A)vfPXOj+22WQ%mvv4FO#lV1
BF696K

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/chat-left.png b/static/image/phone-message/iphone/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..38d4e55108bb89112acdd6d79b53433256413e54
GIT binary patch
literal 1125
zcmeAS@N?(olHy`uVBq!ia0vp^$so+Z3?z3v^;-_4{sj1hxB}__NZ|JE+xPF^hX~xg
z`|kbw_YWUF{PgM5>({T}ym<p8pFMl?;>EjHuU<WU`ts$=ch8;ynXiE2uU`WN-#mZ*
z3W#36ehWk|U%r0v0;u>E7`*|?0!3cFd<7<v*+4-c7bp%g3C0HMeGSn9BY{#N1mi+X
zc->In($v`2+|=IM+S%FB+tt}Sp?}JR2~%cFpFL;J{4HCyZ{50M$M#*jcI~}<`RbL+
z*REc@{`m1zpp!tRedCG&`rn}>$S;_Ik%^gwor9ByUqDbqN?J`r*TBl!BRnD^J|Qu!
zu(o;P<jIq#uUWr-`;Ogv_FTMl^TE^SZ{NND@bTm4@4x^2`TK8@p!_Zd2BsUHE{-7?
z_m0jgkACDJa7<i)W#T>Spe2%4EglLR6PUTregCi5u3p|>G2>0!-JRd#BkEF&H(U1#
zNLkwaOV9~l>1~_3%6IC#ko8ZJ9QPl0w0Nl@pdX?d*&LghyfUhTz0X46&P%s)qxQeE
z{CD+k`Mu!&_R7OY1!rVN@XWulM#<0kdGdmbJEmD~btzbSi|c|{=JJ>`Ess6CS;bb0
zPfS*8vJH`AT<!LB!raD*Z_YHtZuV=sHLFH-!>URB=MF9My=vr~>y|0-aUa{YrC%RE
z6PrEtp~1;WVePVK>;)^>DwiuhdLzVl{pn1`BU7I@-f;M2pC4YvP-Al9Uq+zOhe><x
z@5;Go_aWGR*LlfW-(F?s>|fsuytF<{iTd?@i7!LG>c07h7V?$5segIvrFDLXaoW?n
z-r7b?|D;^YWcIKsm3+K<H+Ypm+pJ$gPqsMr+^Tn0igpt`5@1xn=kF4>MIoQ_Bp(`n
zo%MbC@!9Ru%U`|kKOF5g@n8MkdoOp@{de2HU`Own_AlP^)|>ULPXEPv`1}gHvm5sN
z|7xEn5w@g$xdHFOo@4GpA}_d7OPJ-&-?(TbZ`xTZ+qyI0*q#Rp^Rzfp9j-e6nUv7>
zMBOpcAX!Gm(AU7Zd!h_SnnPbmi?P-cy*YvElM32gst!roF5*bnNXh!~vuf*wvn9J@
zr2ie8BC-4UrzrF5Ur*g|^qKcKZ284QPb_=xA8+a^%>HE8^ES(MYq+=YZliDgUoX{c
z7hAoxvp(U6<*~}v!gon`<PW`fwCpIFpL|4B;-jeBoDQM)Nk`sF{A4dQz9KQ>^NNYH
zE#+%=-#2&{H}kXOwmsh-KD+1@_gZxN{Q1>_uX!ZC3QgJ7zv5Tu>DHKb=auS7S6n-7
zPtKjV<$t@Cso!4N#rX{v{~vhyc)^#&9h+75tZ%y{@A9&E(U<JPU*|Ob7WY^(EU9GE
zE|%0iwv%Vh&q?PkXU=+HDLJQ7e#%bO$3L}a-u@%nZn-I*<8<elmyfIafcb^N)78&q
Iol`;+088I}*#H0l

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/left-msg-box.png b/static/image/phone-message/iphone/left-msg-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3fcb2084e60296abc44f00242c6302df73be225
GIT binary patch
literal 818
zcmeAS@N?(olHy`uVBq!ia0vp^T0m^Z!3-qZIDdCCFfh6Y_=LCux&Ogn)v8tdK>))0
zfBW|B`}gkyIj>*8e)sO(`}glZeE9I>$&+Uw@agg6$4{TWeevSOvuAIfKYtEnym;~M
z$&;5aU%r3!>ech-Z-C(O;}<~ot5@%zKL?ue`o)VkFJ6Gi=g)zHZ^2TpfFdtn0>wc*
zpc<flAQ!CQ4Nwi7{rovl9H<wh?Bz=!0!o4OzIgExs1Ga%Gz6pus0By@1;K0}2~-SJ
z1`z@21xkS}g)0EL3ZfWI7g#UQ86X3(B4nwEr5E~uL77t$<QL4q$i&RT!oteV!O6=n
zASf&%A}y<^p{=8%uWw*#YHn+1@8Im?9}*fC9vPRMoSKo9lbc^wUfIyt+S<`Qb>^(u
zbLTHzwtD^MZQFP4-n0MsxpUWV-o1DK(c>pio&){(`tAD<pT2zi{^Qs0KY#yi<z?dp
zMx~yoi(`n#@vE2JgP9x!SRb&89@bJ?XPM+=kiaJ)z%%2ZXrPM-BV*#f|2IE>DGT4*
z9eV5e`nYocuM%wGUD}WRgM^p=t9LnG-+JyriQMvTi{1w%?91CNdLMt0TK?U@G<U`?
z`9!NPJeOCR&(NzmRI<4(==(mW%<G&!wdMv}HyOyT-L&c41ztOo;}@*w-SWE`{_LgY
zFZQWc1t<EV8_!w2C~2G?*?sC;>_3K(OWrRxeE2uj)O_N+;KWPQJ&*qiZ9I0XLuMmu
z<U93C)oLehndQp=eUxf^)BA~+E5}*(7^xiII*v^uYBLY2JMLR2BstBf+gpye%)Qle
zcIBnJR$^uA<5^2ACuV)vwBg<5GIM83JHuj=1*+S6RK4ER#^vyqy*fKxejjJnp5^-A
gpRJJ-uUss@<1g1r_O8`)fHB74>FVdQ&MBb@03X!-?*IS*

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/right-msg-box.png b/static/image/phone-message/iphone/right-msg-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..b76d732e5e23968650dc496ec6e2aef8076ff359
GIT binary patch
literal 832
zcmeAS@N?(olHy`uVBq!ia0vp^T0m^Z!3-qZIDdCCFffJ%_=LCuxeWgq7#bQF{x^iK
z3U%1;;IO~J;eUg|{sf2p36{q~wf2XqA4#%4;%Bfwz~Fp>&7~-_lX1ppBK41jnjVZW
zJQ`(iJi_c`tm)|}v%}%W$0GHQL>eCtH$4SJ(Z<Ikj823bo{Tg)8DV-X(&TuA;jsv#
zlhGz8!c9&@8J~<YIv!~P6h9ehd@RD`M1;x7C?GOA9t{*UJ|1m)BGTjpkPQ@!Ha;2w
z<N}c~Q1Ez^F%SVw0BS!D6ag9tVgp5h43HLx6i9m%PytW`s2->b%m$M{_DP^PSOHiU
zOfS$_kbz*UK^nnEf$RdC400Zn0TF?6Vdj9iAoh91-)z8uEi4K03ua(sVq#`tVd3E5
z<l*HN5D*j=k(QNLP*hUW&^9tPHMg*|wRdp#@%Il6i;RqljZ02V&&bNoDJ!q6Yi#Z4
z?wK@o=B)XPmMveodi}<Yo40M>eeT@3n>TOYyZ_+PlP6D}KY#J^<?FZaKYjW3{l~B0
zzyJRI_p8611sJ^=o-U3d9>>pKx@q1ND8l-I=cGW;j}udjOlCfxdB*veir`Ew`J;dT
z$M2b+xb|;S;k^3n^|j}1`ILK|=lu7)Yw`83>DyzO_t#%goYVKnr0cTe9KDAn!pp5K
zY>&NU^$X6Mk!F=R>+9h!njDv%WR`uC@j08t>r*~Eq3T_0<}T+2qBp;BeQ{lOnQ8B&
zmz@s&sZlvkN?ezv&ABYdY`$TWQLRkMmaiVmo_=NXS}kUmT7Ca$Qgz;xZNE#WT+7$I
z(h|Amf8@fIb!pE}cisIQ@XGf0w3olxqMbC>AGu{1ruc2yjq4qgZ*{UCO;eh(YZ+J6
zJC*kn!taGe<t;Ot@+aWigbgp`Zi#hoS{w6ef5!cDQ(fkCZx47aGsCy*d$v4Fmgc%|
l5r?zeua|!@+Mjp4j=}AhvSMDW-*Qk^@O1TaS?83{1OPMEd&~d;

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/right.png b/static/image/phone-message/iphone/right.png
new file mode 100644
index 0000000000000000000000000000000000000000..5478430793ee2fc2721ebb6dfe292808c3e10ed3
GIT binary patch
literal 821
zcmeAS@N?(olHy`uVBq!ia0vp^S|H593?x6vT4pjZFnR^}gt!8^|G{9@s#W{<@87m<
z8<5<&b0?5Ia^%SF-Me?}*s*8N9w7J7p+iTH9)&P~<iUdn_wL;bBo7}x4CL<Hw+~1H
z!GQw@fGU9upmrb|r~tx+NCCMZMPOwR6M$^EAwZQtHc%H30NFqi$c2bNY=LWp2qLQo
zYl2z_)&#N_!ayUDO$JKAmBATk>WSnY`n!n-7@D~yL4Lsuj7-cd>>S)Yy!=AKBBEjv
zk_w8-s%jeA1}3Iv78aIP);11~PA(pyVUaO$Nhv95S-H7|#pRXN^$l%3{gWomn7e${
z+I8zU?%KWg*zpr5Po2AP<=XYzckbPP@aXaLm#^Qx|M2nCmv7&H{QCXp@4x=Uvird3
z)b(_643UsLd+@rlQ=tUg1M}w{EpK{KPRrfA85wyqr6r_q^1c86r+wb}zgDkWE<`|k
z)~R?`-9OInl}|pO!FqR+_of>8#=NJq=jBMOddG7#RYEFz%AzguEm`{<Ch|B1Pu2)f
znZ018XTXlvR|DSe_+k-kX7aUNwdzx$y~*0lt~)WJCJReu&bwZ>;?{YMyy^uXdDAu5
zRWF!Tv3SRehAbWD!b=RjwsV(Ta5-%K>U;jUMMyKB?b6f?wmgll%?6v3`9<D2GPwQw
zp?&mu8G~Dyjr+r#D+e_;JP6pcKJ4&{)ams`lMT4v?G(vRHuI@D>n`$ixu8U(^Ky};
zkNsx2zB?uI(oEiGO~$lCo~;SjetQJo$!SSCxzyu|)8-#X<A0jI*d^z&@63;dn-_(j
ftDN84^_6*fS^30G2{Zl!V~oMm)z4*}Q$iB}knGms

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/back.png b/static/image/phone-message/mi/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed5279316030455d8feef6b94dc47d6d9dad67cc
GIT binary patch
literal 983
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`ol6-Q7;6K3LR^7d2nY=gb#QP{QBhG)
zPyjM4EiH|WjrH{O)Ya9kt*wD<0|NtXZEc94j*gC&mKKB!B#n%WfU^4f`ntNh5H64n
z)C*)A8XCf7fg%t#kOYbYwE!7Fl@K;u1jqmapg3F#q7o<wWPl~1dVySs2!sJQ79t2y
z2`7Pqa0PHffDDKrkb$NPt{$Qot_;G(Pon9?rTEU3mwmv{uPX`i3ua(sVrF6I;Naxq
z=H=xV5E2m+mylFcR#8>c(9qP@(bYFLH8Z!cc5-p`@bU8x2@Q*gjERj)NKMPk%FQb%
zsI023Z)j-h>h761Y4Wt`Gv_Z{ynOY#?K^huK63KZ`3sjXU%7Vu`prA{?mv9=?D@;r
zZ{NND@afa%FW<iZ`1SkG-+#I1{^tObM7O7lV~B+0+k@A`FEhxnKJcEsU|E=JuFIVr
z2SUFyt(6M7Q>qYgq%mpgB`;pnjg7yze}3)#RrK9M8Tn7O9!rB(_D-_>r6^ObczWI}
z<w~(l%*EO&@0~+`xLvm3xHxaS$yFtn+wtlu;`){sa;jZFSBor)O`WxLx4_QtNt52X
zTV~ABHaz)sx@AU{yVIn%MSQc)d{sL;+peSSwTUsaz}z2B#<m<6AEeKk=`8Se{<5ES
zLW>&9O}>5>cspYWr+(UkllJjyl6@8zp2)eYJht9@VaHQ5-;=G!WV<uf`oFB7`~Km2
zZqqWC?$-g_HYI--JV>|Sl_g^GebMV{Lf3VxCb?gqc6)!uqe~xdy*>RnelhQ?Rz>zz
zNmJAQy;AF#lhnMdl6jLc_ZtqI6>ay{Psm}FbD4Q~v&mZa38Gq@XD{1?{Bv<Ks@f>M
zNN&H=<$14~PtE@29Q?6b;nq(brI|iI0&;6TCf8^=h;7N(CwJcI39Ig`o0kJB&2I+k
yJCx<lTgEc8c%9cLqmpwQ`yc*DTN1SL|7ooinSTp<G!qIy+0)b2&t;ucLK6U;N?e)%

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/chat-left.png b/static/image/phone-message/mi/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a2b54dde21ad655b227c30ececbd8aacfac5626
GIT binary patch
literal 1222
zcmeAS@N?(olHy`uVBq!ia0vp^IUvlz3?z5#SpJ`Zfl)BPC&U%V{SOBF_wPS*<_wVe
z?%lil_g_7D@cJ<bym|KQ*^3u1UcP+!>eVYC<Hd`2K=$+J&tHSUd$7oxmoHy~(VN$=
z-@bbF28dp~04fKOK=D_vKnTnRa)E+CE>H_d3POTKKqf$x0ZE8BSQ*4*5D8QU)DG4K
zF#$>fMS#9wVq)Ur;^N`q;pOF(m6er~lee<6wzai&baV_13=9qq$<56xDJiY0s%dO&
znmKdU?AdddFJHN3%ht=6uim_Q`_`>HK#u~A+Tf({9cY|WNswPK10ypFD=WW*q_niW
zqLQkPt`*QUC;#a5tdh#swzl@Z{@E+ntlzw2*WP0%&zw1b<No6pFW<fY{Pp|KpTB<p
z{`2SWziltAHZd?TD|xy&hGg73J1af>k%LH^`;i5K$_kgNC*P}%lo3ficyI6j|Lr<T
zuh(^*^qFzz?sw(qKJ$!Iik?rKE)X_TC30i6QfJP}Ys<F8YNrYd_Qy_C6&75>yZW@e
z{*{N_uUdE9PrWP9aqCmsDPFGo9cHH_-%k^m5Lu@7d%?=OOPaI8U2ih&)H7H)oBKxC
zp|?l1+z+gARNc0G`j&Mqvk$CHi-^2__|`X3$M&v$xpmhZ_c8Cfa#H@o#A`Z=T)SMI
zr<wB2P`=tMdd2(gW_GpmsfWB4g_<V|Om5PRh+Mni$e~+3TnT40F8bzP%d28=GVyqy
zwXuv(lS9b%&cz$kEv{+%mgdjSY+NI$yY|z)B`+9SvIPEq^O@D8E3hW)!|wNIb?2Ba
z-Z}lav%4ryKxuvCoGnXM2pY`Vq|?}1mC#YOQ1!bwYqQJ#JNdUO4Sat3mw(^2K3QhX
z<KHu;Yq%N&xISgp;c3(QqiCNa#hv|cs{gFy81MLZ>We>~6+S=d#{8I@VGo;Z=kTUm
z)jx>{+PF7g=YaT|<?Gixd@)V^4|`p{@41hA8z)=7`7tZq*DvnCoLIXXAAG}YvUi<h
z)!{sLSYhW1?cWj`{zd1$V&##jc)qogjeT0>+D~g!Wg>1`HSd(N*wB_eE$F8vU(YXJ
zmo8>Lo<~9xxg$0-`Ao4ATeD8UI^o~}Kbr~z{>}#nl~fwpy(j3%>3DlpY!F(R`P59^
z*=??md|Zfpm~w90owm^Q@2mK;g-=bmZIHc4PS!L*+3to1^Rj>DeLoYDd-n(aZHW1F
zFwcaq<JZOdT^6=!s<Qp(=9~2GJLdkkro8rRWOw`jKVLq7eY^OYd#}{G0A|BiqRmy6
zi<Ysj;N;KJYM-@a(X#tHT3NGBwnXtvS}Wg?s+Yyse|wfg?yeck?lBuq%9K?d-}vOk
z-nmC^YwVt{K3V+yE~(Tzx(C`{X4I_Q&f0P7&XL^PkIa??M!#L*%yQ==$GZpY<x5hp
zY&f^^+xp`ZPB4dExoG$<K&Jdoe|E}&tr-ty`4{Ax?r2jK4AVINKkJjz*7b?fp9^%`
zccgjc%zkl*;dFp*m%#z0=<18Urx(4sv7h16L=&0!&UyO4yvN|_>gTe~DWM4fYB!WO

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/default.png b/static/image/phone-message/mi/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f02c311a308c77beac3e4955e797674d7224a87
GIT binary patch
literal 1709
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

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/mic.png b/static/image/phone-message/mi/mic.png
new file mode 100644
index 0000000000000000000000000000000000000000..f99b9a26ac0443ae003fcf7d57d020c6913a6fde
GIT binary patch
literal 2200
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
adjNVDMTVB0mWu@55|A;<!l34oOU!@b2!J&J

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/chat-left.png b/static/image/phone-message/oppo/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a6245531bc52bf3cb0510cfbadc379c59e91c10
GIT binary patch
literal 1316
zcmeAS@N?(olHy`uVBq!ia0vp^bs)^a3?#4q4c*1Sz$hNz6XFWw0>OV6ICJLA)vH&5
zyxX^LKYRA<#fulOU%!6)_U-%k?;k#V2owQ|14SM^di3(;%g2u&KLrDz$n)pVfm|R7
z6o2*V6_5>743q?tK*1+Zo<Kw(Y#<4dg)<;3fr7{YA`5f_To%ZH2tt%0vw<RLTr?4J
zad8O=2}wyw85tQRB_&f+Q(IeGZ*T9qy1M%M`lhC)*4EbDyLa!|vj?cL=CPAHFkJjf
zg8YIR7#W$ES=rdwxwv`x1O!DyC8d=042_IT&CIOr9D*Za;^NcN%4+LdJ34wNPnkA*
z!Qv&$R_@xh_w<E}cke%b^6dGGS06rn{_^$P&tHH3{=4=tl97RdInUF@F(l*O+1W3H
z9yy4(MYBqpc6F@K*|c(kpg^kd(G4742UuKXumApc-tdKmahKBq&*z{2EY)g%<+bZ~
zUQchgZ_&=Z4}a7>jL6(lviE90ANTK%8?L{dl;dN-EgfhXz9#bv=i0C{ColH07UsDt
zl!jPd&s6wT`BX!+fFt0%g>6x0$IrX<8YktR_pB`X{mbuPkJ~ey{hRa5&+nTRc*{gA
zS9Nn%U-h}^S38+)U(cQ$VYhpxovNST<=LAj-<(?=I(Ns#)zzo}ywlWNaiK-SF|#Xp
zf7yadM^><B*T~;4i&PfAa4K3x{-M_<SG9{?>v}Zjf0K`!kQpQMYx!}jt4``ETIvf8
z{hZyG_^Ac=|B<-5Pa=ELOOs^p#W$Y|YjHaGp6O4yf7OHI)_K7{-kgr#=GiCi_}4eX
z>rg;4+xz*tmsA=}l%4nQe;F{hC5WH*cKsi9l^MeSC)EC%&{Aws@PE6y{*l-ElbX-%
zUn>^rkp24g?z2%dbr$aVcJ;5j)rB<|v)M0+|61TBwvf&K_H@xrJWntGEidcWNm>8@
z-~Pz0LGgFrbT7GNbMeUE(&x`+YX9@7@7Z4yGcjcQ<(*Yey7$+}e~DbzUQ%`Eqi+2-
zXO^|mYp>rwdjA_w<l5zD{;#c%-59ri&HvN4-)vcXeS7)8XZ3R`H^uo^KA(NBxb4FH
z%6ngo6u+qKzq{63qV}c#Kf?vdU#cF2&R6Q07qmX|k@A#(FI4~U33Pm^Ep1!-MP{je
z|F=a}k?t=`ZysABv+&E5$um}WTo#W#6MOh&cHXnA1yyHHA8NTAJmcuZUlzCBUww~c
zT&ceydC9*SnjU)(Nh!Mo%_(``JMV5n8|T!#_SxBoUAQm1M<&Mc@XIFueXF|u&#Pk*
z`8$62^OrYQ6#kL=@%rxL%^x3`Psp!h{`;_TyX=Q$+;&9=*!6zwV%(S0xPI1yZZnHB
z4D68)1cYT1nlE!dc*141mBnvO<K?awOSCMO^7yT2KF#?eiEGD{7QH2f(*&y*et*h5
zeee376Ok@&%kt*$n6__y2bZ4WV(u4bGE;vyeBN#9zaZNEK(BF6ZuDidEq`riFFT-{
z{G!dWWVgbO$e@bVD;{1rqqHS3EM@kGcYnU;PjcJd!JRchJ~@QjTCPE^&!NBV0DJO<
zWXBH+H9mMq)G6@U@^Q$w9qDgc#Gd#t`M~`Ij;I41Kk|id1Q)YzC|nFG>^xolT-G@y
GGywpmKH*{j

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/default.png b/static/image/phone-message/oppo/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb2f32722e855b5c4f3dd77117c55bb53032bf38
GIT binary patch
literal 1611
zcmZ8hdo<I17@y1N)w;N(hKM2}sTi?bYGdvid4)=7mRq8dq*z`Vy)8@RTDcXCNV#;8
zQ@m)*Y++{Z=CaInW{i1%?{SXvo}P2Q&-e5FJfG*B&-488#k)A!Y?D!v0f9i<Y*7d_
zaEJeQwnzZEM&gDu2qfm{;^2k^p6l!Dv9YlwB_#l8ZEfxC?WNIZot>Q{BO~42-90@$
z0Mp;!-__LxkU*x>=}aaQz(4?k4IYpIcq0G?06^Y|O%ixA7z`i-jR4rtY*v3`Hu(Q*
zHkb|BX4j_dw<;h5ECD_N^DGvtudfdnVPIfjaBy&FXlQtN7?^H!bd=3zkByCukB?7G
zOiWHrayXo+sVOd(J3T!;Gcz+gJ3BWwH$OkWu&}`6@fH^s`F#G;(vm<RSYBRUSy>SZ
zg{!NpYinyFkqFq{+5spPSg6f)w391HOk6?&EG;W1C$F$;H&j(kN9U04;bSnEg{8GU
z=1O2tc+~xPeA1Jrxn&iVRaMphG?QDq8NCC8Lx3^P^vnW}FIZj`A$RJ=f<TfOTZEMx
zw!bawmxaceJxvcD3(u#yjiR;lSl`kda_punDvFV)<2mc=Y%S(f3<VybzjvU!ohQs5
z^UfWQ%pEe3G5si=P=sNruHQ@~GzzFy10%T^N=g%)LCDJh+K^{o;tMGaWnKLye?tH5
zkgmphkvfqbW>Jm}p*xm!!eO71K~t1R8D5JnD({c1BP{Rg_evXW<+p_(cY;$&Yt0Ye
zF1jn+o`-4bzlwf?ttwSNOX_LmC^W@Lqco-KuI<8op%~CC89nww#e<*WG|8Eq7q|1d
z^k~%aXgW8nkrJgk3HnO?Lm?P?{*-BjAyb^Fa)H3ngq~N6b5OD0If<g?ncy9|91C=_
z+%+A^7>A23jH18b5efHEk+}T@Ck#J6g80OwmaC@cS);7e{ksE%@MDSKjF@J_Hf7Bg
zXM5*f{7L^k(elJsPj^ET|K#XJ%v;;dJK<IKJ%nho9v^%bLk$=yzAi#G4BMOMB)MW&
z>PAm%DI2z*Xi>cOw=X|lL+xE>JM*rO{_ghF9|8+DTFRXIL1b!cHdTz^SNfba%mM{5
ze}#v8B&f6}33PoG;gp>As8yAz3<sz&niBiq#8NS>2iKM@mzF1)d)jL~u)sZ9l3$&s
zsYxFE3iEy2i5t62l_=IoD|&|89#LBbYw}t2QzEBGbwBr0BUY9RK9l@a;c*y?JF(|I
z1j(e)tsdb^ea_|L-;w8RW$U=--Vl@Pv3fha!z(!Bl9?xd)Mr^3))F$8^gBfUNZPf;
zOk=-}m-)lw+7}(BB(hA|_Oc+b66yQ2>!reEWd<l<U*;0S7$#MtUK3Tge4sd#dzz(y
ztm#^K_d~(>v~1~7-CF?(5%l;Va!miV2-T8XhoSw_subttcn-WO;dyUS3?iiJf?w9w
zms;|}0*w8<H>rnsRFMb~c}US8U{V?gkDTe%wci$kZ0kL=znEK$hSFaZ=bLnDh+PHS
zOlGm3?2Af;vqO&%2ED|>zMD}L8;_|s$tOixp4k!X<&2ReB?^=eaHRHLNC!jm!o*BJ
zgKT&oV&k@SKi=<oR2CnAfLOc1TMywAeLpVR*DEC2jgShw`reE_)|GWt_fENY^@Eqr
z4RhT~c6Q@-#m8$cQRY5@sze#EcrE0k4&7d^vNaHjIK)S5xW|R%xlGC0F&iY@8)LG)
zX>u}4?_WEiYh1Khm$~?clkP1sxM1hzOoMTpr|nR7@V919M}mhDLB{>b!<RSXjKZv7
zKMO*>Bdn7B)vexdD{MQnQd$<;Yqmc#pQc!D-QxNVtas)5K@m13)l=(+b#+0`^Uv~U
zj}U{=EfndCp4cIBA$T>=+UVk2jJE!ZpTj}e=H(7v5KJ*0uUF;(^@dc|h+wnCdv$BV
z_s7by41?E)FW0c6jRp*^9QCE53L`%;W+OwA=x-OV)-9MBo4mu0_;-*z+vGF*h~$E~
xXUJ%yWUX*m>AZva7N5BuiF|??Z#ABMWaO91o!M+ZEbxheY>`fgvQs{|e*s1;e~JJA

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/shanchu.png b/static/image/phone-message/shanchu.png
new file mode 100644
index 0000000000000000000000000000000000000000..33439dc86672782aed130163054ca16782157467
GIT binary patch
literal 1065
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$><{n>aRqY!kAguH0-f(Z1^}a^
zr6kBNn1PXrnT3^|gOi(wmrp=YL{v;dT1HkuQCUS*O+!;#M_1p#*u>P_!rI2x&fdYv
z#nsE(*FP{QI5aFWIzAyiD?7KKsJ5=5slBtir>}qFl&RCE&zv=X;i6^B*R0>LbML<W
z2acRLdHTYo%U7;lzj5pSgGY~_K7aN4&D-}MK7Ic3?fZ}4fByaptdczmOe#k`T^vI^
zj=!Cj9(>3_piQ}B0Y_8P8zrwddlQ(e-|sEos1&gwP~`OQ!>U}$8GL?%vgs9ePs^U4
zjGeUmjge2!el@>|!Rena$1Ipw<C+&y`at%4puf`I+hxrOcbKo_-IM%KkodW{?)lZN
zTZ)d`zH|S&Mm~4DaKxgL$L<YpuQW7duvtvId~(sg<I6Q86PA2ste#>t+0-ypLL`7s
zH>5o>SMT}qMNQnx*1Y-~HC;jBeB&hN#{PFprUr@~JR@z?IDJmok&6mH&P-H#J?9L^
z&gaW5i#FY9)-|+@EpGJ{HOyvO!?o$oyQbd1>vBrmWBoqPZK|01ezS_^%G7f?dQaOq
z_fDI7{q~CMYjUS-s*srR{QLT641RG*Q4HNZe$#q>r(9#(ZkXU|XsPyp$DeJs`xT7c
zeur*9VI87l^{upK&yOc%^S*_6X1`v#KDpQNdzs1C-cR>`O8#+<lx(b-<vMM*&4wky
zo2MS|mE9?EmTC9OBPF|7Z=4k8RDbI0SMwsYX+obp)9>cDz4HxAbSqc?PYvxbIx%bS
z(cd>qe@nKvuYdhladyDhUEMbXZEpTPG$mtc=FbCq2A{X)7O!!U*%s}0EhUZnz^X+T
e{f;bn&bsJ)#N>!Q<x7AGjKR~@&t;ucLK6U1kHqHy

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/vivo/default.png b/static/image/phone-message/vivo/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..b49913701da69d92416fe79e31f6f22e1a9b4cb7
GIT binary patch
literal 1911
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

literal 0
HcmV?d00001

diff --git a/utils/common.js b/utils/common.js
index 3a66351..b91db10 100644
--- a/utils/common.js
+++ b/utils/common.js
@@ -104,6 +104,64 @@ export const dateUtil = {
       const day = String(date.getDate()).padStart(2, '0');
       return `${month}-${day} ${timeStr}`;
     }
+  },
+
+  /**
+   * 仿支付宝消息列表时间格式化
+   * 今天: 原样不显示 (或者按需可显示 HH:mm) 但根据你的图示只有 昨天/星期/日期
+   * 昨天: 返回 "昨天"
+   * 近一周内且不是今天昨天: 返回 "星期X"
+   * 超过一周: 按照 format 返回 (或根据 hideCurrentYear 决定当年是否隐藏年份)
+   * @param {Date|string|number} date - 日期对象或时间戳
+   * @param {boolean} hideCurrentYear - 是否在当年隐藏年份，默认为 true
+   * @param {string} format - 自定义日期格式，默认为 'YYYY/M/D' (支持 YYYY, MM, M, DD, D 等)
+   * @returns {string} 格式化后的时间字符串
+   */
+  formatMessageTime(date, hideCurrentYear = false, format = 'YYYY/M/D') {
+    if (!date) return '';
+
+    if (typeof date === 'string' || typeof date === 'number') {
+      // 兼容 iOS 的 YYYY-MM-DD 解析
+      if (typeof date === 'string') {
+        date = date.replace(/-/g, '/');
+      }
+      date = new Date(date);
+    }
+
+    const now = new Date();
+    // 将时分秒抹零，只取日期部分进行比对
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+    const diffDays = Math.floor((today.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) {
+      // 如果需要显示今天的具体时间可返回： `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+      return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    } else if (diffDays === 1) {
+      return '昨天';
+    } else if (diffDays > 1 && diffDays < 7) {
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      return weekDays[date.getDay()];
+    } else {
+      // 超过7天
+      let resultFormat = format;
+      if (hideCurrentYear && targetDate.getFullYear() === now.getFullYear()) {
+        // 智能去除年份及紧跟的连接符、汉字或变宽空格（例如: "YYYY-", "YYYY/", "YYYY年"）
+        resultFormat = resultFormat.replace(/YYYY[-/年\s]*/g, '');
+      }
+
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+
+      return resultFormat
+        .replace(/YYYY/g, year)
+        .replace(/MM/g, String(month).padStart(2, '0'))
+        .replace(/M/g, month)
+        .replace(/DD/g, String(day).padStart(2, '0'))
+        .replace(/D/g, day);
+    }
   }
 };
 

From 09598677863766931413176a98aae2194487f61a Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Thu, 12 Mar 2026 18:34:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=8B=B9=E6=9E=9C?=
 =?UTF-8?q?=EF=BC=8C=E5=8D=8E=E4=B8=BA=EF=BC=8C=E5=B0=8F=E7=B1=B3=E7=9F=AD?=
 =?UTF-8?q?=E4=BF=A1=E8=81=8A=E5=A4=A9=E7=95=8C=E9=9D=A2ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/message/chat/chat-layout.vue       | 508 +++++++++++++-
 components/message/list/message-nav-bar.vue   |   6 +-
 pages/index/index.nvue                        |  10 +-
 pages/message/chat-page/chat-page.vue         | 652 +++++++++++++++++-
 static/image/phone-message/huawei/back.png    | Bin 0 -> 1279 bytes
 .../image/phone-message/huawei/chat-add.png   | Bin 0 -> 1548 bytes
 .../image/phone-message/huawei/chat-emoji.png | Bin 0 -> 1854 bytes
 .../image/phone-message/huawei/chat-ka1.png   | Bin 0 -> 369 bytes
 .../image/phone-message/huawei/chat-ka2.png   | Bin 0 -> 534 bytes
 .../image/phone-message/huawei/chat-more.png  | Bin 0 -> 1340 bytes
 static/image/phone-message/huawei/down.png    | Bin 0 -> 524 bytes
 static/image/phone-message/huawei/emoji.png   | Bin 0 -> 1854 bytes
 static/image/phone-message/huawei/ka1.png     | Bin 0 -> 1570 bytes
 static/image/phone-message/huawei/ka2.png     | Bin 0 -> 1620 bytes
 static/image/phone-message/huawei/send.png    | Bin 0 -> 1072 bytes
 static/image/phone-message/huawei/unsend.png  | Bin 0 -> 1048 bytes
 .../image/phone-message/mi/nav-right-icon.png | Bin 0 -> 205 bytes
 static/image/phone-message/oppo/add.png       | Bin 0 -> 1316 bytes
 static/image/phone-message/oppo/back.png      | Bin 0 -> 983 bytes
 static/image/phone-message/oppo/ka1.png       | Bin 0 -> 629 bytes
 .../phone-message/oppo/nav-right-icon.png     | Bin 0 -> 205 bytes
 static/image/phone-message/oppo/send.png      | Bin 0 -> 3797 bytes
 static/image/phone-message/oppo/unSend.png    | Bin 0 -> 2305 bytes
 static/image/phone-message/vivo/back.png      | Bin 0 -> 939 bytes
 24 files changed, 1132 insertions(+), 44 deletions(-)
 create mode 100644 static/image/phone-message/huawei/back.png
 create mode 100644 static/image/phone-message/huawei/chat-add.png
 create mode 100644 static/image/phone-message/huawei/chat-emoji.png
 create mode 100644 static/image/phone-message/huawei/chat-ka1.png
 create mode 100644 static/image/phone-message/huawei/chat-ka2.png
 create mode 100644 static/image/phone-message/huawei/chat-more.png
 create mode 100644 static/image/phone-message/huawei/down.png
 create mode 100644 static/image/phone-message/huawei/emoji.png
 create mode 100644 static/image/phone-message/huawei/ka1.png
 create mode 100644 static/image/phone-message/huawei/ka2.png
 create mode 100644 static/image/phone-message/huawei/send.png
 create mode 100644 static/image/phone-message/huawei/unsend.png
 create mode 100644 static/image/phone-message/mi/nav-right-icon.png
 create mode 100644 static/image/phone-message/oppo/add.png
 create mode 100644 static/image/phone-message/oppo/back.png
 create mode 100644 static/image/phone-message/oppo/ka1.png
 create mode 100644 static/image/phone-message/oppo/nav-right-icon.png
 create mode 100644 static/image/phone-message/oppo/send.png
 create mode 100644 static/image/phone-message/oppo/unSend.png
 create mode 100644 static/image/phone-message/vivo/back.png

diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index 13e456d..3df5897 100644
--- a/components/message/chat/chat-layout.vue
+++ b/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 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="right"></view>
                     </view>
-                    <view class="text-box flex-align-center flex-justify-center">
+                    <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">
-                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
+                <view class="bottom-container flex-align-center">
+                    <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'">
-                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
+                    <view v-if="phone != 'iphone'" class="flex-align-center">
+                        <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;
-                    height: 40rpx;
+                    width: 48rpx;
+                    height: 48rpx;
                 }
 
                 .number-box {
@@ -209,14 +296,21 @@ onMounted(() => {
             }
 
             .center {
-                .img {
-                    width: 96rpx;
-                    height: 96rpx;
+                .title {
+                    font-size: 36rpx;
+                    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 {
-            padding: 10rpx 28rpx;
+        .bottom-container {
+            padding: 20rpx 28rpx;
 
             .add-img {
-                width: 66rpx;
-                height: 66rpx;
-                margin-right: 24rpx;
+                width: 72rpx;
+                height: 72rpx;
             }
 
             .search-box {
-                height: 70rpx;
-                border-radius: 35rpx 35rpx 35rpx 35rpx;
-                border: 2rpx solid #DFDFDF;
-                padding: 0 26rpx;
+                height: 96rpx;
+                border-radius: 28rpx;
+                padding: 0 42rpx;
+                margin: 0 20rpx;
+                background-color: #E8E8E8;
 
                 .input {
                     ::v-deep .input-placeholder {
-                        color: #C3C3C3;
-                        font-size: 32rpx;
-                        line-height: 32rpx;
+                        color: #8B8B8B;
+                        font-size: 30rpx;
+                        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>
\ No newline at end of file
diff --git a/components/message/list/message-nav-bar.vue b/components/message/list/message-nav-bar.vue
index 977d2ec..a0661ee 100644
--- a/components/message/list/message-nav-bar.vue
+++ b/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;
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index fe0dce0..ab19aec 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -255,11 +255,11 @@ const otherList = [{
 	name: "身份证",
 	path: "/pages/other/card/card"
 },
-{
-	icon: "/static/image/index/qita/card.png",
-	name: "短信",
-	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
-},
+	// {
+	// 	icon: "/static/image/index/qita/card.png",
+	// 	name: "短信",
+	// 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
+	// },
 ]
 
 const data = reactive({
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
index 2534a8f..b206c45 100644
--- a/pages/message/chat-page/chat-page.vue
+++ b/pages/message/chat-page/chat-page.vue
@@ -1,6 +1,52 @@
 <template>
-	<view>
-		<ChatLayout :phone="data.phone" :chatInfo="data.data"></ChatLayout>
+	<view :class="`${data.phone}-style`">
+		<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>
diff --git a/static/image/phone-message/huawei/back.png b/static/image/phone-message/huawei/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..df4ccbc40209471ff49b746af90f65082a5e918f
GIT binary patch
literal 1279
zcmXw2do+}37#{{BMY(3RG9$?tBRWFa8ckCMHE7IomaaRAZfh`6D-BIKgmp=mvo&^`
z+M3~@lF?*$CHD|oWiptV@AG|g!)k_d#O%lJKIeJg_xJps=lA>LIp@ubq=i^oI9Z@j
zD9cbP<pA=gEFE(+ayOva5h#=qHgaF|9;7rF3><?&C=?<9iQ(a4xm*qa(@20ID1jhY
zr&Fo)GMNT~CZVY*83f57Eu_`TVOS1ND3z14aSZ^#0H6h6Ev(T1utou?6e<-6!;o?U
zgjJwQJFe0yVD&hx1yveQsRfnl<<x>|^|(qiu0gaa09FG^q(r(}1c1t=NrXfsh$o1E
ze;K6)KmfuZ{C_^np3BVg3?e}s5c2;-oR=Jy#+LmxPEJl(EN+vB2a)J~`s@!WY3z&(
znU}J2+Piu>x_c!fGU=ECkst4P$3%8SPdh-Pql}EvXj6=}jg76H{o1eAyWsJ7PXcj^
zzrQ~zc<<iugruaCr%t7uzs%)w^YZe`%F21wkDu1pi`qImUU$DA8Xl7&dj-{#Q#$?Z
z=efDLFN<+Bv<V7@4hp60icTCI{P{$jtFPS^zIp5}O7PlZ_dTs-#`V$HRL0{mgJJWz
zw!w>O_IFo>de3M1^G;Zmfe^F`XXkjMXB{untDGPbzd9;n^gcL-`>C~&iH(nCnHIgV
zu*oEQ-r<?V6RKt$q|=#zjeCluqkUv$HwYEZQZ1t+uMHLIyzJgDbh<yfe_LM@L2Rgx
zDdiXo(rWz+dA(pIYO8%k=tD-oatCIAd`961JJA;BKI$f2_+{D221|OMRn0)}?i1qG
z^!|t-0VLQNn=24ZsRs$(dw*==jP~CPd$}#n*s-LxM^IXqfT?oBNcL}iI~HYnHQJfv
zy;6MF)#pKjuIx8{Ad|4oYx^IUQmYt8Xl&h!^o|>*R?IVF-R&)$ToCKa%2M;2^7tz>
zedOBq@F$}AnG2dKbbz{db9$v;vfIMoA%{ubb!{$*a8{H}n22EK_@eK0exa{cH9C)$
zI#0E?zDqNbKKHp;tj|Vex}5x&Z{FE8zkLzKP5yiGK7HUbiRZGu0>9X(|5V^Nb+Zn?
zbL8Ndl%5#2D0=#fuV5P29>eeN+0e=XhoyA^&vpPAZmA2wzW0+Zl@}z^8_O$LY3vZ)
z_hgV=QI&L#?dL>_vJ@^z0!BU@{N3qoQR<)6wr4Lc%u|AV76;yRUQ1!%YV^7BmPf0*
z{NkT5We09mhDCT{KaJB`o(q$YVZ$FP;u(PlU7?)77<-F^V<jeHq1S|i!dfNF$>mbS
z!ZohGCDooS)UZdDTkxf}YT>@3>sQ2{ba&#f)m?SenB&Cs_7=u%?<h&?`Gy3AaG?BU
zF~!G0KC|nVn|ZiVb53q;)rQlD%;WS|m1HKGFa2((ZCo^uX#48%(7@afhZWouXomZG
zc1=;8BPN|YYeKd);}3HCB6laQbM*^ZA;I9Za(}V)hq;!t-ow*U?!~Q_lZ`fpoXI%+
z^h{6lao4tTd~>VMd(D)L+fcGte3KbX3W_o-Xfk^ko6kO5-yGm!y@89h*EHN>f4iIY
z@yj<%+l6c1`Bs5uc;g~RUs^$}`mYk{gkfVwfptxm0Ql5;wS#r<qlb&hk<3|+o`rcG
b5u1hPlWIhyjWY`5m!d-V&?wd9BRT&79frsn

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/chat-add.png b/static/image/phone-message/huawei/chat-add.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ec6c67bb18f4ef38fd2e9576592259fc28069d2
GIT binary patch
literal 1548
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYnNIz!(tV6XFWwVg=&j;#kEA3Q9;w
z5L6>3CWcE5Pznf$F$9+h$l`Ec0L_H6krfcbCa4!~GLUgnX!?Ahp?M`ie!&ckOw25-
z>>S)Yd?KP^;u4b5GP3dtib~2V8rnLBCZ@KI-u?lRF)?w;sW~O(RW)@D4UJ9BZS9@i
zJ-vPXlcr6dIeXFKRa<xM*}wnrkt0Wro<4W}%JtiK?%sRw_{sB^uit<A^!dxT?>~P2
z`u*qc-+!l+gibIpF#q**aSVw#ymm%p^dm13SMSse*FcxROzG!>$Jx|H(pmM->8@BH
zAUcsH^5_5j?~OlSw<vy}w_RlF)F)R~9=@mAQZ^%J-N~hsXS*0p_f~T{zFPROS$Br&
zo8a3IcQ}PUi9b|*d9N??o!=Wn=IvLS-u2dM*3SD@A`>p~zAV`C@Vmu!p{GADc3*Cm
zoo_E;(|yEv>A@ezJZcY}3EpP$_1tsG7w@*ra+!VePHK7Y?{{7HDf7i&F;p?Pwx8_(
zo!2XF)3uDzBmdhA!DCMI8BYD}imq-tT)mp%#PejU7JG(0RkE^G{F(2g|1mu1S3CTf
zK_UL%s`+c<C+at__aC#iVet5O&@KDg`^gM)$F}Tunq_LbPUiHQC0})IpEI0v4K}`d
z-EKY$$JJ}Um+^RfUiPf4Av2K4j`?abcc#Ov-25`}nQ5vD#=(-3m2CTJq^|z|{44iw
zyVzlUX8&_Vb!M9!mc%E&n!0M=`OLk?AE-{ayGcyn{qceJG~1fht9C7mm0$0Ww4$Pv
zL*w);;n2{~>svoR3~fkqlNBnseO>ENA-_lK-7VZp_P$-KWEGZ@5YM4lmFy6*eDPIB
zj_=9>o4FO21s|B0A*=YU@yZl|X?tZJm^2kI|ID4dp|#OEkwx)c!v<fT{S0==9P$F?
zot-u*$9ffQ8jLi<xK*4x8Z|bk^fh+em00wf$wE-^!J5+&i$06&5ad+ISa<90{j9q`
z_Wg?d`Pqg+NGY;=N09Wf(xusN7(6F3|H*xNar?23?YBbDcE;pJ{;A7%saXGH*;)Q4
zE<!g}Zn-O8oc%g<;i^@?{J$Rfbt`76;H+kcAe9E@)f+_(*&ADSF#1{dD(*VhFu{UR
zZ&$D48^H$=I*b<?lR3g=B19*1JuqyOIPXxm$l(|N?7yi${%2S&du#K+tf_!$r){@D
z@X8?le9=OdCCgd`zDay|kth4GgK6WvApPm#R#C27sxKeNTR7eOz~057F86g6MDw{B
zy0(WN*~BCxrr#!XAba(r2h1J)(|%nK6WeiRQup;Lp{4drDdwjRo%qReqK<dtx6iNM
zZl4yg>Bqi?=UTxAlQY9g#KM!qm@b)4Q~1E?(S5e-SS9BK^Xyy~4h75mQ*umn)fmrJ
zZ(%JFHoLGycfo0+d)M!G7`(VX@uRBoN72j_HN8|@<G^hu@~3NeNxm$oh<_a+rFiUI
zD#O!jtCjEF(f-bLAU(t9y`t@G*Z*R+MOl^)+$9@)7R<|yt5`SVOyTssr*raz)w0vS
zH!M#wnxFP6Jv&7?&S>k*iYGb}Uw)VI`ROl8{XhFgk=YjC#qD2t$`el9^7(36mb~)L
z{q4_#H`bP4PG{eHx%%PsS%;Zb<?hYfw7sM$aU-w)8o72ZcLj5G@5y?z@5%iU@0s%E
UljobIXF=tfr>mdKI;Vst02t*yOaK4?

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/chat-emoji.png b/static/image/phone-message/huawei/chat-emoji.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffcf102230caede20234888dfd96ca3ef59e7ecd
GIT binary patch
literal 1854
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
QpMOD&or`Uqb-<;+0JC7r1ONa4

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/chat-ka1.png b/static/image/phone-message/huawei/chat-ka1.png
new file mode 100644
index 0000000000000000000000000000000000000000..af2baf5745589e3fcdfdbe9a0fe1be51d1bfd387
GIT binary patch
literal 369
zcmeAS@N?(olHy`uVBq!ia0vp^qChOo!3-pq95%TEq}l^~LR^9L{Q2|y`ub+hoH=dU
zw6-ZzCQh8%KXGc`<mnTpOq)1)I*2`K>V(PD`oRdu?gKKWfVdzA5}G)5`oyU-rq7x?
zYwm*C^A^rsxOl;mWs8=sSiNq;+6|kwY~Q(i@BVY=FP^`6@#?kfH*ekk`0>-XZ{NOu
z|MCC-|L=b1q=8P6C<*clX5irD7ZkQCsi>=O>REo__Pu+rKY#!6>v!KR#d|<Cjh-%!
zAsXk;UUHOfbP#EMIGNLUBB!!=;9`xL|NsBaS+ZmEh7BLqp8LFxzvar8tj#l67#LDB
zZe&?8HMHD|c4u%{Q~BbuiCp!RZJXoDmp}S3=XBiZ*{gTo&AfL<_VVAOJM*V*TJ%Zd
z;!pl7+ulxneel+t*Bj(ld`n=;l#pUwXeYmLX$8Y!IWzOzj}>J=$1r%h`njxgN@xNA
DgFw6R

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/chat-ka2.png b/static/image/phone-message/huawei/chat-ka2.png
new file mode 100644
index 0000000000000000000000000000000000000000..730a52194739574ceee7a16f3a5c0d18543b4c24
GIT binary patch
literal 534
zcmeAS@N?(olHy`uVBq!ia0vp^qChOo!3-pq95%TEq&@`rgt!9f`Sa)Z_4Uo1Idj^y
zX>C)cOq@8if8x}>$<rrHnKp6qbP#*e)CrTP^@9<R-3Me$0dYYLBs5{l^odhvOqw=x
z^0b*#X3Uy0WA^k}bEnUqJ9Ezb+4C08S+Ho{q9qHLEMKyG<+7D))~wsOX8p#s8#b-q
zw0XnktsA#&+rDehj@^5A?>%tf(BXrJj~+U5^zhN+M~|I2e)81W^B2xvyma~MwX4^z
zU%PSR!NW&So;-c=^3~h7@7}+E|KY>Oj~_pM{`}?hmoHzwe*O9l2)_UP`STYD{Qmv>
z4-owQ`}g0!fB*mg-~E4G641{QB|(0{3>=*Ng2GlM6?OGZJ<BiLzIX5S=kGs${qDP^
zcn_#%ucwP+h{pM~myU}a3=nC3D4=?A5lj1vz2%Ny^g2HO%TG>SyW!4k>o5HKFUsZg
ziL3k&<FAyNGgISme&G7cR}3Z`ty$KzwxN4z=YrV_Cw$o~q9h+0wYYHomqhQWFOM30
z@tu3+;AM+BaXa*ctgfd&y~QP8>h$?7(*c2vt}7y=4i~px3wi!4>PbfKo5E;SbBAT?
zA8+-1d)6<n;sw*vSF(lMubA{+P>vF`3R;^}UH_}ui-)JUDaSeTNyWsv7L^bA`kU=V
UqYorJ26}|S)78&qol`;+0N)2K?f?J)

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/chat-more.png b/static/image/phone-message/huawei/chat-more.png
new file mode 100644
index 0000000000000000000000000000000000000000..b12b2912f3b9950178930127e87dbadac034f46d
GIT binary patch
literal 1340
zcmXw23pA8z7@mt;quUIc3<e`xDwM5RiE(L$8H8rottISH)^H-X78#7eL8~~$wv<$}
zlH6}0P1)1dw1XN`ktq%H&;QSuaj9`uRyF&xyYG3w?|Yu-d*A0f=RM~u2?_GsfFWQI
z2*d^koyvsIl+|T~hWB1{dN2Zkv<V3erNLCE)8*-Ojg5^kfI}*kPEAe8<?rDD0N^zU
zLRzg#wJ4LRL2wS7pO=B44Ag)c%@hPpL9<HboJ^sX%OSa3BZoAQS}ljv)1Ycvr2-%b
zRL%mB3Q%bjD$O)BqkuGkN)0GAfO2LnHNeb_LZw!y;a-&-nvpAE3g2pA04P^0VG(YD
zJpmZ}t0>iS7{Cgw|L3#jxu&euz%8%?EdHOc^QyyY*_ywaKp<FHSlHUy(iw~+OjhOP
z>Z;4tz4rvY1A@K*fn;oA^<AafZU*-Po)IgJ8N@;$QE0TjAr^--F*U=R6RjN_9Cq$<
zbRm<;o?gDb0kLd$d_qD>Ca<8NproYq;>F6^miEq`p1Y5QLebFJxb&S2o+~gjH?Lj%
z>*MnB@~1E1L1;Y$0-eF2dWXhMzN~@1C3$Zy49D)tFU@nZVdR%`8+Oo5^@<w!>DMQ9
zj$10~?u-vV=iYy?vT*h5z_6ue0q?mb^Hls&b7HP*ty3tW%-_~()5_ad9<xQ5z2d6Z
zndvp<vUB`L!`+erTFu?qb?$&@4@>ds(8CVj4R;&K8P;5{3z596N`vGvY!=GLqtNo6
zG5V(<7H-JaAzjdE6nwq?$LPe98bV>jjfpdc9cf7{ksZ-Dz=rjk(%JmssbK7u5OJqR
zl2tWn|518(F}uYrtUsl#EoHlZ%5;A##x(SP#CE+FCC`iD{TYL0;_pa&Ud0%0QzQ+c
zXeZ0Yd+J<+P+|5Lk^^Hpyz#H;gxs9ev}1KGn!(`ta*DxvQ;9C*!l0Y+2@ls!N+l(l
zFEZ!E4Tqg9Y^u$Emvs0*bo~{T^zBa6db8z3XYGrlq=eemM>k1(!rqGxcw6Z|F8z{9
zWRCkcRoF|R*gJiOVE<UQ&jgpJxi$ir6NN)hQa>FyEnYUfb#a;(c-Vck@z6Byl4Xo@
z!$#!x!pGh0hkrlGX_ds2!>>k0&E;3<_WfKQx%++hXZO&R;Hb&`_JNxmochnRv%f4w
zWwVz6$IBTjOB_l5XJfZ#Ch0I0x=;<;gs&Fy;UBgHnr<CQCAJB{MSKm+78l6YE>I>(
z3nE94fy>dNk->;LLe${#H&U^E4oCKVAvtk@o<&2Q?&Nl@bMMfdjZn36GL7r~<HSTp
z!2D8wZ_$`NJ0q!?v*{SOvq?B?q4Ld{q<dntzC}l_eB*L{bfAJADl6Mvhe<l2zdysy
zf>e$oHsy`^c~uz2>7xj>c|A_iT3j1#J|Meflp;<(S8wp7c{p4klpf~ylia4n?Oo{O
zw~N=KJOU2xGulQjo@R66ct%4+8qCk4b~|#DZz-J}3*_svgyIa8XTkNQ===PeU&U9Q
zaf$zZ<BJBfrzh%)tSm-5x+LwkIj;UsN9!qi^pTHUi>!8DB2u2s?~4f@kQ585v8R#y
ziznIyu?HiHL{#i|^(d#JUn6tx#Xc&#gl{URC_Yflse0tCe=yT_iOd98++N&f{tYX<
z#4%w<V#qao+KpU6`XthC%o6E`-5Z4c;boy+pPw#Z;V5+=E91PU+=7HRsl<Qq&MSUK
g)Z@JI)|ym3Fwnns+oplSfWJ6`K?|a`_(bRb1M*VR(f|Me

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/down.png b/static/image/phone-message/huawei/down.png
new file mode 100644
index 0000000000000000000000000000000000000000..01b5c29b07a135251731e17f077da2fda2891593
GIT binary patch
literal 524
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UA`Z_6GQbxB_ViP*6~ik&%&-k`fme
z7Znv15fK532n!1Xxng2sKoJQE2_RciQWD4jDuXb9QV<4E5F!qjl9rZ+2m%#A1R)HF
zGKem?IFL&Q*u$Wc19ZJzNswPK10ypBCl@yluYk0ovVp0Et%Hk)cR+ARSbTX!O>J#M
zQ}47{v**m8zi9d1a~CdOfAsjt^A|5)zj^=Z%a1>Q|2@4gBLp<*fTxRNh=k<ZgEzwt
z8Hli6U_KI*v9v>}i@AAGgOWtyinY)G+jEN*I(ik=ez^Gb-jCml0=?Fkh)hoi$v5WO
z<jL!{Ml;IAU=gdURa@Zf6p@;{p@~yw>5J^ywxQJjAcOTo;k|ONH_WNK@c6UDwt_jA
zC-yswsLbM<yI@6)@9|K{-)VO~3mhn16#1c!W%{m#y7F=d78@>4z1I*veVX2%D^sF_
zSsg!}$<J?}5TX~9w`4lkq6M3u-1=m5!2e3*{_9~szDsNW>`0b<^Zn65P@H<Y`njxg
HN@xNAAYh{4

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/emoji.png b/static/image/phone-message/huawei/emoji.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffcf102230caede20234888dfd96ca3ef59e7ecd
GIT binary patch
literal 1854
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
QpMOD&or`Uqb-<;+0JC7r1ONa4

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/ka1.png b/static/image/phone-message/huawei/ka1.png
new file mode 100644
index 0000000000000000000000000000000000000000..da99276617ae0b7a97e2f3b4a66921e68a03ed9d
GIT binary patch
literal 1570
zcmXw23pkWn7@m-I%`H!!N>5VDMx~7?MeLC4tfWHHEUjD5+O9UFWpZE5jQQu{F5{M4
zqMqz#7&7jP#x<rMHHH~t24jpF|JXCB_xb+s{NMY1=Y0Qv&U@0lP-ivOcB&x|2u)WP
zq&FBH<&TOY@I&c>aRfr4!pp<Q34|M8L8sHPSS**zC6P#g;Pd$)TwGjST3X7;$j0F)
z0)ap%6t1kSU?B*PC*dFpNG*TIW(rRv;vq5~B7uo`0trVTfjpi-!9gT2Q6v%pFJ~YU
zs0YA7WWazBkRZep$Z}7lfDoi`1Tye|0U;;@FTmr7at83<Y9P>sj3ZLi0$|N6ur3-V
zH;6ZjUk`~!CgrnGsnVSPzLDTdHrMpYkbsoK-%>UYj6zj^*d<Z2nfk#GR`G|`F2m}V
zVePB1PM}!ts#xzgczY1MD-_-x3hxbHH;RA{-IAV&h3(>`_77mE1gUGH#4Q>2{zvAE
zlLeC`w~J)4rQ+B!Swf{OwO011P7D?Yzm`eLB9OBnN)9m#SS~p`kDQZFez{D^&Ckj$
z$j&Rw$$y;xxVVs7Qb;YOw#bU<t0m<XrB5nLTUN^|s>&*=%PXtPt7<B$Yb$GNt843O
zp4Hd1i)!m%Jga}v@T#$~nNDkNq0w7t1EQuu8NIcwwT;pGZn<?>1~!Dz(aGrOYVYXk
z=<e?9?&<33?e6XC>3h@nw*L*V{(=4h<^U7eAaihtIXFBtGCB;5y)iO6HuipejI%Mp
z`oQ||adLL!(`WXl8Q~}H3Y)hw#o^4%aA$yecswqDgEudnoBJZi{QMWbaAAQjSQG+D
zd{vWNHQ#h2-+1|<idF%{YiklYq#IJ{x^#VGeSIB<VVN9qfkqupm;ho8xZ{mFkJzH9
zq^ho=p{=W{w|%d%#ZgNu+f#N9j!teK7cTh)q9Y<P4+%taUO{<f)ziA?4UM#BdfUk8
z#KcGT)D&-Sp1-v8wX?jhSS*%ELC5dSv{W^xz~$(3MLPKSw#|?IbzaZGAbyddhS_SR
zk{)D@(RD}GAtD%<bY*jVTe>gR_nh_K<JEQO9kw0V^wU&R5QN>IS7!bCx$Ft#zHq$z
zE!T#<Jma}woy%J2i_LV|uUmoh*kh$C*5r@=^elnVgn7+wy&K$UUCY4^ob*?843{V~
zw}g9HhPkcy>v#S+mUvXJdo=tq#aZkWW@!wapm-X_r5hN|o==@rGWA4plyYJ<(8$o9
zlT(PBc{iSG(UiEuE(e{F3Smwvk<&dU_@Ux7gCb>vp0u641rI~e>N=QHC$LPyt$5j^
zQgbDWjT+&V#6kzs>op4OK;B?&i^pa#6yjZQsZP$tH<Q}*_2b7CgL-JT2J9N_j_yvD
z$+S5=B|G(n2iv;O*_<Jg-3_vfF2K<n_v4!!nkK|dQ9JVpRmqY4%Ifz6+OvZh*=H2}
zM?ww^Oh&Evs#=!B8D3N<I^5i+q;|c_BSUK$6h*Y7gx5@hP8mn-IUN@^>YQI}bjI8+
z(!${9e3jm{ng_o4xot=PxEK=?ljE)se0wp*TICYF&!RbxV|C8^-r~X~$NS@KtGbKj
zy-nVp8C8LLWZNZsU20<5m<X%g?!l00C7Mp^T${b{E{TV@FqJ$!dfnndZksXH^f~#^
zp%%r&dUbo~!`&?UkuFAgx!xQi-AiP3Y;EVNwLsO6HpU7!vntl86xGz(y$g*-?P8e(
z+>^k59j*{hMBYV?Te0k4%X%Lou&J4xviYUz$T0^_n%a{4=N%K7$Bbk@qWgWKr!zVC
zX#HmotGaq2G5-o?r?*z2?HZz?(g4Fkyku*y@i4~hiRpM8Bg*6YN7~D%aQ#B<+0|S9
z!6}iPb^Rc|U&^+SXq3uop%_AHTuCj}b~{;AqHT0%AJI{4=FLdho@75CXLrU3Wvama
m+f1BtFgR%ecP@EsM4-5vrF}d3y^kiiKL}SR6!NJf8uLGgE2wn<

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/ka2.png b/static/image/phone-message/huawei/ka2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3be8bbc74b1d93a03340361747d76f5488416de8
GIT binary patch
literal 1620
zcmXw23pA8z82%;Y(#4E)q)oY}4oj=;B6iuC8l;G>%MjK{7nV5GmZoW{QJ87Q%*4tm
zCFPnZIcSzjqCzAaCnlF%!eDM0-}mh|)xPKb-|v5(=Y9Y8JOB57$-X<bEz~#FCkSGp
zCylZTuO6C5R~yInOValQG3UAO_5dn|=&Omv;<U81p`jsxK!Ayfi3toRCnu+-rczQe
zI2@5wDwWA(a=AQ>&*yRl9KHxk)BoEyiJP9z<qNrd0WRe71RS0K>s+3Q!x!K}g+hU&
zhT#ivJ~j?th#3qqi6NIK)WmcVhFIe8gg9abL!5?RaO9+G7|egq;o~ksPP#}x5G)J=
z<PadNP<>0TYgcsiYN~dy)tQywNxYM9-wa5Z!IJwKb>A>vWqJnyjWzR4n!g|D9srmz
z_#GGog2i-T7z{{s6)6N51*?n>f+eBAI25cn1k57A%1E#(a@PDXSRD=Qu>T3xV2=Uz
zv1-S7;G6(lP65}`!0oi!EeW_Y0QIbz%7j~)U>gfNq_Kb}YsT*q3`l|dI3S1z!vr(o
zA{dzok6nXN*)ZlhOuPjXbKzgPDn>p$R|r`}@M1A!m%x<!Ftt>bS_bj9Ipt80ktNK$
zCVV(8tc0S!v#;H_c~h*sm6xCUk21Fo=01UW1x5KqCHeKRu%xu`IVyUlC~boG%PT6H
zVPy-dZc)^<L2)~(ZJoxyuA#B%MHg!9MorzYsT;j&Zh76(+VZBYr3be5qE-odBSCHL
zZ`(hjj(44%1E{B0(mR4ApJb9Dxnvae4a@rn2KvX);5hp9Y3S1g8Xl7kOVNlFjZUJ`
zDfAiJgls~Fq?0nK9N~ePlp{P*QwoGn_Ukxkj$5umiZ4hxgH+gN&=)nDQ6u#%ngs{|
z1U04^Ux#P#I3DG|xLrH^2`%lpdIk#?7?R0GOIBGrIytX*+2ZEzLG{|cd+&aF$l)mF
zIbOOjD?2a0pt!WGqN@6__({jRuC5P#{r$tEV-r(Tnu(ApluD(hsama`odp1BdM(yl
z*pIJHuP4PlVBeFm&b|IdekK<upXxJpjH%B)<g6~Gd}ds_o|ALkqW^j=v&Nu)ks_+_
z$ny&|31L5m)P68{teA%uOLQE=gjvVey-4ZPX_k*izwS7Zu--Iv>*!$7k>x%kb?@6t
z0=)Y6xg|-$#UFguE{&nwF*{^MukR4_GdgU!DZ_UM4R048L3C|)-C<)9$qa4{Q<_9n
z)Vl5@oqua@XP!^-J-PjdKIZ`wzlwRh_#w8(GI8nrVA6xtH;qYJlnAX_^3Pjxl3q0?
zvuQaF+Yc3<bgy3|(3wke^1M7wez3M6{(Oj^>z!cB4I=hgzXZGPE^B6K5Jetn6+zZ{
zL}M9JH`A`#lvFaK7bi5E-d)FTaI#4H;zJO0Gg@4lqy3rGSqIzAR4Z5QB-fg0)qF-z
z*M*J0Wf4hcnJx$GN0h`kC*cCkjZ+Y25_a2%h>dWG-@L6bxWOdss3~Dpple-{W`E>S
z)5PTy#AB;iUFvY#t?Kkn?cSG%9B!;GTEo_BJ4N*DT|_qYQs+~3Sds2Fj8Xnow(sV*
z4z;$z@HvURCAK!{uj4Ppun#UJ8nWopWq$4J<0`zZ3c=jou~5D?>&>I`6``H2&BQ(D
z>`flBW1ov{KH6mKFm|rhr$<z=asvE~{5fb2qiebS(#y|6Gc0X03z982sjA{*EoeSj
z=eV6;v>1)PMrwzD%U=p<RRVk4t*K>^Ec;2P<*^=yqye)a^IG=M$GxKD710|h&VKAb
z6E9hsce&u@fy#{J@ff`oe)(CQUU6r=6E9vKd|fU2)oWf&SF?5Ztg0<K$<DUye$-J3
zx$>vPI~gvU7H!Cj2ydNsKJU#I&z)*KnY52YGF^#uOQnMcGA(S%&34CWUFkO7^5|Yd
znT2`c-G}fO_E=ugo`Sd5by4S^imjOa9`{&|4SMHTQi0KWYgV4yo&`@wT>t2qrk`}W
pq2!@G(!xmH!LgO$(pN!GR+6venn&$=;e_uL;Yr;=DfS3q{s&!*ym|lt

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/send.png b/static/image/phone-message/huawei/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..452a0138afc4052444a83aee64e91d415d647873
GIT binary patch
literal 1072
zcmeAS@N?(olHy`uVBq!ia0vp^P9V&|3?#2~eYnNIz{nlo6XFWwGBEsSaQM&Q`JW;5
zF;DDgu9*KEQQz64{_}?ZU<?1r7X6bm>OV*1Zy;h1|HB#alOy66h#T>fGyE54_;2or
zU!0M@xFSFZ!~mh++~F`TNc<;Q_9sXR$d3FC76FpKIYI2-U=fgd5P})S9r=ql>X$<L
zFSYF721UOOfvEVmQSoo%lHYbUzn$xU`?dY{Yya)v{yVh$cVyr1m<fO4CjLpA{^!uu
zf2VH!J9FpX)kpuXJ^pw7$-f&<|J{80@9v9#_h0>c@ao^I5C7hL`v30p|4-lkfBX6W
z&)@(5{{07nvw#1c1O|ptNswPK10xGNr<kO?s=B6@nT?ZYR6=!4PtU|j(`PN;z5C#)
z8+Y#ByZ_+f<LA#`efsj{=kGs%|A{S6U&O$`w8+!NF(l&f+8LSAQicKzhif&r-_Z$e
zDdLiza7jt)sMo@{wYfL{|M#A?x1{`J%aS)W4;&TN@7X>1BoD{M!{Qw3msD5Yl;*4U
zT{*?Gh1pI;Xkp5_ThlhGJ}EPu&hv5IcNgxjeYtxbUtZx3<Yzx1uU%#+aX0DA{(gaz
z+YF5D(v*D~%&+b^Q2pqU&C^!SgEjKSF81;*9PUpUpLIDt?Wj|JWO_z+tHsl66@C62
z9p=crH+tm6a;W2dOuLj=&#cE)EZPwkTHAg<I?I1Vuz8QEeNgQm`HTLMn|3kQX4UMz
zrE~1U?&tYC-<@xY+*=bkWxDE&*OA5Nj~<v?`hC@eioML=W6pT2QcBr)g`;I-OH5Z)
zlk09CZd-@xc_GdsGsKR4Z;0WFn!9GR?hU=tt@G5ZdAjevI;`L3t?s$1)~`*st}a-9
zzujTIqI2y`p%;>VmzV~NpI`P`_eBuzf&%F+6}u!~cU-LD-L>VghGMf=c=8(M4;fs$
zPH;|X)ICwm+-Ue_lB4Q@N5{|J=xT`d@>mpYQ-AH>eQBn$i2;+dHqLuhzfaj=y4tIo
z@evtfuYYEUC+@m)EBwoa3;zzeZJr^;B7LYN@@6>C+>WV74|N*EnEAChKlxQyogei^
z$?fxRdw%Za9iNN*(x$&>QD^Gcv-d62TYg06k{^qzidPn=l9xuUhLZ2yG$oErXIIRQ
zWpFgJ-ui??!Q&(&m%P4{ZcV_?r!Fg=inpHQbIfRGs1PYs<a)zAkvUPO<H5!=jRt+G
zZp97z|ESKEciWPb)?LK3O=B{<Yvr6b`GFC=mmd9oC6zNpO3?hasrf875uI-3Q;yrE
zGcFygx7gCFez--T+018$!KEFB5j&0U74psGy*6RxvtK9Y1#aJ(ex)?^!L{T6Ha8!u
g3$LpY_{;f3{=~zRD>iVo$AEIar>mdKI;Vst0QB7oKmY&$

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/unsend.png b/static/image/phone-message/huawei/unsend.png
new file mode 100644
index 0000000000000000000000000000000000000000..b91838acd73191592e4d1967fddd9c7e96f80818
GIT binary patch
literal 1048
zcmXX_eK6Z+9RDFmY;KM2w6%&hDZ9zd)UaK3Lz*n!&wH!$R$Ak(V{1cut8J8N8XH54
z3i8s_OKss&m+45dn5@wu#LK*{h|0BQNaH1uJkOHczW4opKhO8`{e1p-p1bFEbQIOm
z!NmbV5XaCEa;ynS=0e+;`UGQh)&z#=h<J(#5d@l|NCK;cu;QVL`xxHuhm9i0lENl2
zWcET{ALR7ICJAhoLar2YeuFHrfhB=l6C*ORMUX8va>S4=F|y1D6JunHfjLFM!b6q_
zu*85PF)1yK$g(wAOd5$L&3emdas6*Mi%l-jHUK(gpyLnFDF<DHpnC`ihrzF-pm!9A
zlt3~LBok0N2?wTtdIP@Pf@>PMp@o~<P_qMH?ZRCh+|$FoeW*9UeIo<_0`rZbwq@7+
z9KN*Js5r#R3T2ORKH}#7_B)>br%9yH^XWGVzptvUYiMZgl|G%GUs(A2+2WE)rGBZ=
zYIXYtBWOLO)**;>T_`y?{@m|B*XN|o1|7IX{Wp9?+{r-8-7nsDL1BruIXQn8!VTr2
z;)c>DccM;WBT!U+_NezB1_{Kac{h6|%o)ep{(4xe++r(id@v^jcPsi|k2!VsGCuuU
zAF(ly7OC33lS^<bm_e=+WH`b&k=)mc<_x(WT=hEWWIaE)`cXjD{v40#v3J!bi%`<Y
z!Y9|>8cHmC9`3b>Ps|j?m8X1x9y?Vd&)3#tYw+F$t^p0VTxueQecXUgP1Fo6ZT>Om
zbVmLA{K}Q0uaB4TE+l-=-Z3$A#qVr;S|04o&nruwEO%Va3g&MQT~JWuP1`~Wd0t#~
z!%Gn8=5R-rQBJ4#q(pn!8V%@Ol=D|1b*YCDL_;b!LUytSL5j<!N&hI(ND!CUwf6&k
zFMLrMiCh;re7^N60KdFeRuCh=Z6;)wSE@1iW%8%%A$5#5Zn`R$Rg_7r>IH-L0(G4K
zqqD+u9DDhvDzC7k%5K|CdsJq3xJy{6Oi%H{XV*E!>zv<;yz~ibJ@z|iMaC~mZ6yn>
zd|+Ga==1Ctp5LO%9FShhn(^@V`IeLRU>)OO8gp<b1^8OK*N7P#0s&sX`d-%B!oGC*
z@X2N|Oi~OJ^rONEwQ6OlCY{o?RkCyO-pI~Yq@Rqj$a|V}zMAgD8=>%e<|6Dk13G4k
z^%zD|c@#sIQC$lQuwheYa1wv)0t!Lpjs*K!bE#GDl2Z*q-Nn;^2U2961O`7&X2mp6
z=Evw~zC7j`(>z6Adou3MXp3%u=SJkD_9IsW$yd4AG&U`tTV&Ux_n@{t`Ea=O&HK3L
zekabVg}za~i51<~{Fy^7ZG$xKWIk_cY7Q_T&3;2o{a7xx*4g(e=6GFUxk=_99!iNK
J^GWG9{{uVKMkfFO

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/nav-right-icon.png b/static/image/phone-message/mi/nav-right-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f8214b03f24722f4fafa2c98c1a0ae038f5fa1a
GIT binary patch
literal 205
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xZ3?!EyURMI76a#!hT!AzYC@3h%;{adgi~R(u
z;3^673ua)HkgTfSeEa90M`HK414RQpT^vI^jwdHbupVaR*twmZTOcUKEc>bnvs0H+
z_}VB*2amw3t3p?EacI6`(#l%U<vGv6+)^ND3EP*sOreJ|MS7N<xj4m=%gy*uhMNSd
a2s1;YsonncINutOt2|x(T-G@yGywoggE(^l

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/add.png b/static/image/phone-message/oppo/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a6245531bc52bf3cb0510cfbadc379c59e91c10
GIT binary patch
literal 1316
zcmeAS@N?(olHy`uVBq!ia0vp^bs)^a3?#4q4c*1Sz$hNz6XFWw0>OV6ICJLA)vH&5
zyxX^LKYRA<#fulOU%!6)_U-%k?;k#V2owQ|14SM^di3(;%g2u&KLrDz$n)pVfm|R7
z6o2*V6_5>743q?tK*1+Zo<Kw(Y#<4dg)<;3fr7{YA`5f_To%ZH2tt%0vw<RLTr?4J
zad8O=2}wyw85tQRB_&f+Q(IeGZ*T9qy1M%M`lhC)*4EbDyLa!|vj?cL=CPAHFkJjf
zg8YIR7#W$ES=rdwxwv`x1O!DyC8d=042_IT&CIOr9D*Za;^NcN%4+LdJ34wNPnkA*
z!Qv&$R_@xh_w<E}cke%b^6dGGS06rn{_^$P&tHH3{=4=tl97RdInUF@F(l*O+1W3H
z9yy4(MYBqpc6F@K*|c(kpg^kd(G4742UuKXumApc-tdKmahKBq&*z{2EY)g%<+bZ~
zUQchgZ_&=Z4}a7>jL6(lviE90ANTK%8?L{dl;dN-EgfhXz9#bv=i0C{ColH07UsDt
zl!jPd&s6wT`BX!+fFt0%g>6x0$IrX<8YktR_pB`X{mbuPkJ~ey{hRa5&+nTRc*{gA
zS9Nn%U-h}^S38+)U(cQ$VYhpxovNST<=LAj-<(?=I(Ns#)zzo}ywlWNaiK-SF|#Xp
zf7yadM^><B*T~;4i&PfAa4K3x{-M_<SG9{?>v}Zjf0K`!kQpQMYx!}jt4``ETIvf8
z{hZyG_^Ac=|B<-5Pa=ELOOs^p#W$Y|YjHaGp6O4yf7OHI)_K7{-kgr#=GiCi_}4eX
z>rg;4+xz*tmsA=}l%4nQe;F{hC5WH*cKsi9l^MeSC)EC%&{Aws@PE6y{*l-ElbX-%
zUn>^rkp24g?z2%dbr$aVcJ;5j)rB<|v)M0+|61TBwvf&K_H@xrJWntGEidcWNm>8@
z-~Pz0LGgFrbT7GNbMeUE(&x`+YX9@7@7Z4yGcjcQ<(*Yey7$+}e~DbzUQ%`Eqi+2-
zXO^|mYp>rwdjA_w<l5zD{;#c%-59ri&HvN4-)vcXeS7)8XZ3R`H^uo^KA(NBxb4FH
z%6ngo6u+qKzq{63qV}c#Kf?vdU#cF2&R6Q07qmX|k@A#(FI4~U33Pm^Ep1!-MP{je
z|F=a}k?t=`ZysABv+&E5$um}WTo#W#6MOh&cHXnA1yyHHA8NTAJmcuZUlzCBUww~c
zT&ceydC9*SnjU)(Nh!Mo%_(``JMV5n8|T!#_SxBoUAQm1M<&Mc@XIFueXF|u&#Pk*
z`8$62^OrYQ6#kL=@%rxL%^x3`Psp!h{`;_TyX=Q$+;&9=*!6zwV%(S0xPI1yZZnHB
z4D68)1cYT1nlE!dc*141mBnvO<K?awOSCMO^7yT2KF#?eiEGD{7QH2f(*&y*et*h5
zeee376Ok@&%kt*$n6__y2bZ4WV(u4bGE;vyeBN#9zaZNEK(BF6ZuDidEq`riFFT-{
z{G!dWWVgbO$e@bVD;{1rqqHS3EM@kGcYnU;PjcJd!JRchJ~@QjTCPE^&!NBV0DJO<
zWXBH+H9mMq)G6@U@^Q$w9qDgc#Gd#t`M~`Ij;I41Kk|id1Q)YzC|nFG>^xolT-G@y
GGywpmKH*{j

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/back.png b/static/image/phone-message/oppo/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed5279316030455d8feef6b94dc47d6d9dad67cc
GIT binary patch
literal 983
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`ol6-Q7;6K3LR^7d2nY=gb#QP{QBhG)
zPyjM4EiH|WjrH{O)Ya9kt*wD<0|NtXZEc94j*gC&mKKB!B#n%WfU^4f`ntNh5H64n
z)C*)A8XCf7fg%t#kOYbYwE!7Fl@K;u1jqmapg3F#q7o<wWPl~1dVySs2!sJQ79t2y
z2`7Pqa0PHffDDKrkb$NPt{$Qot_;G(Pon9?rTEU3mwmv{uPX`i3ua(sVrF6I;Naxq
z=H=xV5E2m+mylFcR#8>c(9qP@(bYFLH8Z!cc5-p`@bU8x2@Q*gjERj)NKMPk%FQb%
zsI023Z)j-h>h761Y4Wt`Gv_Z{ynOY#?K^huK63KZ`3sjXU%7Vu`prA{?mv9=?D@;r
zZ{NND@afa%FW<iZ`1SkG-+#I1{^tObM7O7lV~B+0+k@A`FEhxnKJcEsU|E=JuFIVr
z2SUFyt(6M7Q>qYgq%mpgB`;pnjg7yze}3)#RrK9M8Tn7O9!rB(_D-_>r6^ObczWI}
z<w~(l%*EO&@0~+`xLvm3xHxaS$yFtn+wtlu;`){sa;jZFSBor)O`WxLx4_QtNt52X
zTV~ABHaz)sx@AU{yVIn%MSQc)d{sL;+peSSwTUsaz}z2B#<m<6AEeKk=`8Se{<5ES
zLW>&9O}>5>cspYWr+(UkllJjyl6@8zp2)eYJht9@VaHQ5-;=G!WV<uf`oFB7`~Km2
zZqqWC?$-g_HYI--JV>|Sl_g^GebMV{Lf3VxCb?gqc6)!uqe~xdy*>RnelhQ?Rz>zz
zNmJAQy;AF#lhnMdl6jLc_ZtqI6>ay{Psm}FbD4Q~v&mZa38Gq@XD{1?{Bv<Ks@f>M
zNN&H=<$14~PtE@29Q?6b;nq(brI|iI0&;6TCf8^=h;7N(CwJcI39Ig`o0kJB&2I+k
yJCx<lTgEc8c%9cLqmpwQ`yc*DTN1SL|7ooinSTp<G!qIy+0)b2&t;ucLK6U;N?e)%

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/ka1.png b/static/image/phone-message/oppo/ka1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bab42ba9bfe337120bf65f8db90c5d2a7f351c10
GIT binary patch
literal 629
zcmeAS@N?(olHy`uVBq!ia0vp^20(1X!3-qD<xZXhQr`l6LR^6~!+!>b{R|5G8AOhV
zD6AKdJIpV&pI2hLfYeT2ncaetJNPAc@k{Ix7T?7$wNprPm!R}60m(grQac5tb_+=C
z29knOyMSDf6p$?mMnDniT|!`Su<S07IEV{YBMo6d$emDex!s~ldn8r&%Bby=)!3(?
zxnIHPpqAq?E7#+;z9-%MPPqr4_K7$f6nQo{@qBdd<&2^$IhEH-I&Qag-D#V6uXp>)
zEjwOqyYlJM)lZkNeZF%0%dKbMpFaQb?B&mwZ+^ah`|Hhz-yeSc`}ObtzyJUL-(rw{
z0Q9(SNswPK0}~4euYjP4f`+b<iK%mVOhQ_2?xaam7A#(|{qW&a7w+7<|KRQW_aDCh
z`2F{v(}dUG85kHDJzX3_JdVG;cGK@rfJo~@<qlT|@4&zeZ6gugO@WSFeLRmGB+vie
z-{aA|vh!42`LQqibFN*FGqJRE`oVRS&oAef=IIL}AGfA7*7^JYcs{%RscH49SNrmF
zmTGUY`&zuew&d82$vbboe{#;UTC4JN?+-)6=y!)#+9)b)Dfi;&cyqg@A){@Ai%Rgp
z1M7SxP6%;yY5e$CxK>--_Ug_BW$%*~n9pQhQ21SGZ^VLs7Bjq9wzLO1JxKfW+~M`r
z(z_RX`1NM@J-)Ng^Ud*Cdv*l|#)#6ZFYCV)9JGsmc-VsBKmU{sdsTgSB%F>msEO=7
uHD7=ILe9DTd%D*xk`#OGl)0+=`+jE02<F9^nNxRx(vPRBpUXO@geCwwvl?0e

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/nav-right-icon.png b/static/image/phone-message/oppo/nav-right-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f8214b03f24722f4fafa2c98c1a0ae038f5fa1a
GIT binary patch
literal 205
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xZ3?!EyURMI76a#!hT!AzYC@3h%;{adgi~R(u
z;3^673ua)HkgTfSeEa90M`HK414RQpT^vI^jwdHbupVaR*twmZTOcUKEc>bnvs0H+
z_}VB*2amw3t3p?EacI6`(#l%U<vGv6+)^ND3EP*sOreJ|MS7N<xj4m=%gy*uhMNSd
a2s1;YsonncINutOt2|x(T-G@yGywoggE(^l

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/send.png b/static/image/phone-message/oppo/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..44b742a5a28a2438d5b0e5d5a20d76f7e4b5096b
GIT binary patch
literal 3797
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
LNkvXXu0mjfHxO}m

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/unSend.png b/static/image/phone-message/oppo/unSend.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d0227479028e3b0926829986e978fa5ca07658d
GIT binary patch
literal 2305
zcmYjTc{r3^A0B(imbFB-NJ^;?Z;?_cB}<V(Ls9g$$WnTRWS>-)w?Y}BL^75#md2Q|
z&RAy{JHsr`Gm~W$+0DF<>btJ*circ=+~>Z}ALsmY63?Hrk&@UZ0fWJ$>};)_pc=8U
zHVHwQx_+Ss1``0z+q;~EMkx6Ii}v<*DwPUN!^6V>0I=EY$;rv->1i&PJ25c<F%S<i
zbowNR!(lKOtlu#?34$Pl0WzQhf-DXP__h%c0{|Qriwzl>Ajo7w8a4x9vp^2igHVQe
zXk>vb@Q;!K^(>GHxd6z;W&%*phWZVF8yR48n2-j5@atr7L-}U}H~_fe`prN_;Lq-F
z=9m5dn2*IJ#h=ihN=i%6W$4m!bZJFtSw&g-=kkg#<rS3`pCMpAe}Pc-rLw9LQ;n&r
z!Bo{&Ro7P6e66X)*3{P3ey#h8#bN8}>u`8nJpotWP>*lG6B-E(O@xN#hQ{W`rk1AW
z)~04+a|^MhmDEaXBa+%lZ5^bx&bD?4UF{tZx;r`{kUP7`UEP#!au1o(OQujMJrMeO
zdi#2*{nWkzYTsaA|6u>X(7@pE;Lym>@aWL+*zm~M$S7@eY<!G1F-D`)#_8h|j0rk(
zg3h8dSPUlc>#o=ukECp%XLbp8I_C@%5D*j+5fv4akd%^^l~YjMx=q{A=)eJE6BCoa
zEG&*WyLotB_VWvU7#SOzkdT~~p8g^$D<?1iePK-vwym2yN@GChg6wazvvc!57nWDn
z)_LkDOgmsO(NH^UE0^nI9dLiRysLt`Vt&9Ot@5NP(nTw)g*T;=R;d{=y6Kc-c&+oc
z_~@Ylr{}xf{AClw&)((xUyIwRb1(>Oe=)I6c-$G}1#}K_&4e`-#p9Ui?a`FX_a;5{
zrBw4Hh=3bK`g>dL?M!rJw=qtgatu3h1}zeZ;N0}zwU1Plt9H++lhHS0Ww0eCq_p-Y
zaa~9116swoZOEt{<i#zNyD$_l5aoN2swmC<*~Ur*dPOY}n9lj_c7!13QO}Snv@aE&
zve|8t>*;JCVT`GfAzIUVMm~}Tk}n*+sH57KT{Qfodf(O`<|)U6fvtwbe20(5+D-fW
z-xCj3#(OH|3-0lhxvDbphUA^UCC-3rtAl$zdL-JV!8T~Y*UoV-PN*>HX}CCfe_`p4
z!Y4e!?VKsoGjY$qsqC&6xq|cZKDDjhBT%i8*BX835ep9Ef09TZ@aIX8=Nxt$X?GwD
z<;b`gf@Z#EoJ85eJu}=6|0G`cYd&%2*tR@vRR)-q0$f*`=O_NFJ=F8eMWP8O*04)j
zC88cRoF9@~m1B^+k8jlLPCs$G(0H~R%y4{-=wy`BW~>8G=;`sX?y>ZQqJcF_j9&Kq
z(Q2cAUA`D+&-WFOf4W}Wkz}wkbCTSjcR0_YDEi_Yy8$1?McfE^Fv7cWY-y>BN=pn0
za1>j#{JYq&^NFJlaye%_Ekv##b<63I*=NjhfFHphlOlI`QFw>xJJipcNhpI{sTG+;
zlhHKkRLKI@D!ya*5Z}mz^iKLdhUb=nx|=F^M?5mT_xh1shljeL0k@>KpgFHA^YP_7
z>jk~?D+lbZJ!D#rc%trk`#XFW&?}tM!Q6^>Prtp0ZCR(VG#-^M2hxY0tv)l8&6AnB
zucX_e7MheE<^L7Lc2O+xb>CCC2ynU>nf};x$@KvtG!Y&s0c5CQ(hhjf(K+x8UeGC1
zAdz-6KYVRT(Si2Hsz+JMC;QGWgr0Kr{S~}cO_2d6z}f*Thg@Na$K(nuHX4Y`=MDP+
zy$Fp|_#K(;9nR&P7U?E7JT)=hYf8Ru=OAe@$n8m;X>6;4zG3tvtO4%ET-H8H7qQWG
z)c6+AkCQjz>YEpJ-8JSStM={HINjvAZd2TqHQNnLqv&g^i<*HePH#oWXBP`%KHa#5
z;x*bxdPsQ+Y%0;r)F_)lyr98$6~u?`&5c|hX`sQX&swYQ`E+UGAZ&OGgSvhr?+70}
zESzvtJL;0(tno`)S=)W;y1!RXxE##ZSWc+>&^2v9Z5nA~|6?v9{jz?9q|jAq+1WT!
z{G2EvYtZM=DiU6AFlb_xtR(0~i&@kXMMSnS9Ve#6HBnRZ(WlQIKOLs{%EGVWY^0wM
z0qz~omcX-jhExc)wO{&+R*L3@Ni&{|lo~2~{5-cgDs*;rDhsRHuuM>UUL|lmAPiGY
zESk?%-60mO;jNo9oY=JBuyh0=t@~aI2)<&8r+ly#=1J;)5LdYC<D6qwrqDVQYgZ&7
z>~SjtW1)N8k`-^aThYOEY5Q~6{BM_H{MFywx_WwwS+e9N7Iid|B$Rei53W_HE7ps2
zXn%%A8|ja;^<M2Ur#9*hd2|PcJ`VgV_a;7D)J#2!_*VXAcn03a!Ktm-FHBG0_hMK2
z)+H_E%j|r=(5?NTd{SkkApB!+O6)$PWe(><g}Ptc?FbQArkb-4UGi_u2Nb{$$5lcJ
zJ`p-uCSp>F)v$F)tw6mJ8ek9~xjuS3ups!|P5r3Z!qeqZ93hv#S>dP3m^+=~T#^>t
zDWAsTj|&BOJ^kG5u7G_wJ>DzAwLg_LDrZlzyK>eY{@ty=P<hN&OKkyngd5mT*l*{1
zH?!!LJ9SsQp85MV%=WTlt4j9Wmz*y+of*V2Gu_5mp#q(Ix~pa6gZrFb^qrSkd8k>Z
z67DW+kMFdgoOcDy@ryqOgo^R%&ph-#1ZQmV@ZHlbeyBF+rT%Wuov{|@&ZqHV$-J4S
zYFi}V*ylyb%Ma9kLyBVgm@+$ttYEotj&V{oyZfJDYY@LR`o0RPEH_>`==y0e#Rw|~
z%&RN+hPgS-IXaTxWn|SzlLE|i*VrpfJ5u}pvG&Ll2owM4zEUE_#%|AD3`m$k8a+UZ
zl$~)*nsX32<7keK(f3ODc(F#d;JVuWGt1^VGi}dT(9z$pn+$xV4%;A&$0bXJKj9^o
Z_?g_*5#v#M?#55X?&LY^lH-Wz{{Uk#7|Q?v

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/vivo/back.png b/static/image/phone-message/vivo/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd00e41eee9c66e827a13b8f6e5280dfef8b04df
GIT binary patch
literal 939
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$j12GzaRqWAAT%`8!NEaAMFmJ&
zT3YJq=~-J_8yg$j*w_HMK!%~Ap_P>tkYR3aZfa_3VPRorW(E|2$O1{AAdm|b1TuhX
z;IcqLpa@U_L=dPE$N+L747earJzNAX2oZruLD)bN0)T3O3?K<%pb0{(gD60gf^gwd
zK<yC6z(vrwaB;XstRiTFtflP5z>qB}3GxeOU}R!uVdvoF=H(X@5)l=Xl#x|XR94Z@
z(ALp6Fg7tYb8_+U^6~Qz4U340%go6wuBfc4X=rSjG<nMOS+nOZUbcMsij}L@ZP>7J
z`>x%4_U=D+^3=Htm#$p7e&^o(hmW5;d;aqE>$e|1eg5+0`;TA0|NQ;?Pt5p;Aux*j
zJzX3_BqZM+jEojalwf<1o}#dC)|`ejUQU^tk8UzLEw(}}qcx=El-Tr5g$w(i{`}8g
zY54w6L%H9l1HX@LTzvGTv`Sb`IJd`%{4cq8ot5GaI5+mQaFzC%bn$KRxmvX3{yAsO
zzcUVn@s=2I$97dQTD`0B5UjW$xm(ugQvQz%h0mS3$^^Z_%{8~F%f9fbO-<Qh$Gr5V
z*wORanlF6n7v9)Cr^)Z3u&V|8(#!dp-`=M$NWS-7Q*84E%bh8bmK7{Zzg%KezN^k=
z^>X>NM~^K^?(DAa`4YA{VAs~89`6scOwoH6P&2P!!Iw#oZbz<I8@R_fpxQSvULs>^
zxyGAf`6%;!!8gpGFMM+DUs_HsSJcy9Mc3C%Tl93lYec1LSUwMv{9Rbg<Mpp=>5tO8
zt(Rto*J~d7$uq^zHu=r@y(U}4zH9E{=b5sJzg%+llLaM@_>#9hbIdMF_7MCLP_%xn
z@iiUG3!Z0lf_bbeGknX~WHyR2>n^|Y#6!28<xfL96MtugsddIL4~_7bQzpzfX>IZC
a{$J(@fdlOw9#7doS<chd&t;ucLK6U~Ra8X)

literal 0
HcmV?d00001


From a88ddf46bcc63161812f58be314ff122b76b26a8 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Fri, 13 Mar 2026 10:52:42 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=AE=8C=E6=88=90oppo=EF=BC=8Cvivo?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E7=95=8C=E9=9D=A2ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/message/chat/chat-layout.vue |   1 +
 pages/index/index.nvue                  |  10 +-
 pages/message/chat-page/chat-page.vue   | 159 +++++++++++++++++++++++-
 3 files changed, 161 insertions(+), 9 deletions(-)

diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index 3df5897..a56ced1 100644
--- a/components/message/chat/chat-layout.vue
+++ b/components/message/chat/chat-layout.vue
@@ -163,6 +163,7 @@ onMounted(() => {
 .center-box {
     overflow: hidden;
     overflow-y: scroll;
+    padding-bottom: 12px;
 }
 
 //苹果样式
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index ab19aec..fe0dce0 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -255,11 +255,11 @@ const otherList = [{
 	name: "身份证",
 	path: "/pages/other/card/card"
 },
-	// {
-	// 	icon: "/static/image/index/qita/card.png",
-	// 	name: "短信",
-	// 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
-	// },
+{
+	icon: "/static/image/index/qita/card.png",
+	name: "短信",
+	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
+},
 ]
 
 const data = reactive({
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
index b206c45..0fb0250 100644
--- a/pages/message/chat-page/chat-page.vue
+++ b/pages/message/chat-page/chat-page.vue
@@ -28,7 +28,14 @@
 					<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>
+					<text v-else>{{ formatChatTime(message.time) }} <text
+							v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"> 中国联通
+						</text></text>
+
+					<image style="width: 20rpx;height: 24rpx;margin-left: 8rpx; "
+						v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"
+						src="/static/image/phone-message/huawei/chat-ka2.png">
+					</image>
 				</view>
 				<view class="chat-box" :id="'msg-' + index" :class="{
 					'tail-right': shouldApplyTailRight(index),
@@ -44,6 +51,9 @@
 					<text>{{ formatHuaweiBottomTime(message.time) }}</text>
 					<image src="/static/image/phone-message/huawei/chat-ka2.png"></image>
 				</view>
+				<view v-if="(data.phone == 'oppo' || data.phone == 'vivo') && message.isMe" class="second-info">
+					<text v-if="message.isMe" class="delivered">已送达</text>
+				</view>
 			</view>
 
 		</ChatLayout>
@@ -69,12 +79,14 @@ const messageList = [
 	{
 		time: "2026-01-01 00:24",
 		content: "<p>【京东快递】快递尾号29398已放在博朗郡二期惠美家便利店，快递员电话15320547739，查看签收照片或反馈异常3.cn/2Beu-fXr</p>",
-		isMe: false
+		isMe: false,
+		simKa: 1
 	},
 	{
 		time: "2026-01-01 00:24",
 		content: "<p>啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
-		isMe: false
+		isMe: false,
+		simKa: 2
 	},
 	{
 		time: "2026-01-01 00:24",
@@ -110,6 +122,10 @@ const messageList = [
 		time: "2026-03-12 00:24",
 		content: "<p>dhhahahhahs.cn</p>",
 		isMe: true
+	}, {
+		time: "2026-03-13 00:24",
+		content: "<p>dhhahahhahs.cn</p>",
+		isMe: false
 	},
 ]
 
@@ -222,7 +238,7 @@ const formatChatTime = (timeStr) => {
 	const timeNum = `${hours}:${minutes}`;
 
 	if (diffDays === 0) {
-		if (data.phone == 'iphone') return `今天 ${timeNum}`;
+		if (data.phone == 'iphone' || data.phone == 'oppo') return `今天 ${timeNum}`;
 		return `${timeNum}`;
 	} else if (diffDays === 1) {
 		return `昨天 ${timeNum}`;
@@ -589,6 +605,74 @@ onLoad((options) => {
 	}
 }
 
+// oppo样式
+.oppo-style {
+	.m-t-16 {
+		margin-top: 24rpx !important;
+	}
+
+	.time {
+		color: #727377;
+		font-size: 24rpx;
+		line-height: 24rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+		margin-top: 48rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.message-item {
+		margin-top: 12rpx;
+	}
+
+	.chat-box {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+
+		.chat-bubble {
+			padding: 28rpx 48rpx;
+			background-color: #FFFFFF;
+			border-radius: 32rpx;
+			max-width: 600rpx;
+			font-size: 32rpx;
+			line-height: 44rpx;
+			color: #1A1A1A;
+			margin: 0 32rpx;
+			word-break: break-all;
+		}
+	}
+
+
+	.isMe {
+		.chat-box {
+			justify-content: flex-end;
+		}
+
+		.chat-bubble {
+			background-color: #00A1FF;
+			color: #fff;
+		}
+	}
+
+	.second-info {
+		font-size: 24rpx;
+		text-align: right;
+		padding: 0 34rpx;
+		margin-top: 14rpx;
+		padding-bottom: 6rpx;
+
+		.delivered {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: #727377;
+		}
+	}
+
+}
+
 // 华为样式
 .huawei-style {
 	.top-text {
@@ -679,4 +763,71 @@ onLoad((options) => {
 
 	}
 }
+
+// vivo样式
+.vivo-style {
+	.m-t-16 {
+		margin-top: 24rpx !important;
+	}
+
+	.time {
+		color: #ACACAC;
+		font-size: 24rpx;
+		line-height: 24rpx;
+		text-align: center;
+		margin: 40rpx 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.message-item {
+		margin-top: 12rpx;
+	}
+
+	.chat-box {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+
+		.chat-bubble {
+			padding: 38rpx 38rpx 32rpx 40rpx;
+			background-color: #FFFFFF;
+			border-radius: 32rpx;
+			max-width: 100%;
+			font-size: 36rpx;
+			line-height: 48rpx;
+			color: #1A1A1A;
+			margin: 0 32rpx;
+			word-break: break-all;
+		}
+	}
+
+
+	.isMe {
+		.chat-box {
+			justify-content: flex-end;
+		}
+
+		.chat-bubble {
+			background-color: #0078FE;
+			color: #fff;
+		}
+	}
+
+	.second-info {
+		font-size: 24rpx;
+		text-align: right;
+		padding: 0 34rpx;
+		margin-top: 12rpx;
+		padding-bottom: 6rpx;
+
+		.delivered {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: #ACACAC;
+		}
+	}
+
+}
 </style>

From 261918d871ef0fce0c4e70ffadc6d8373f036451 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Mon, 16 Mar 2026 17:32:44 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E7=9F=AD=E4=BF=A1=E5=AE=8C=E6=88=9080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/message/chat/chat-layout.vue     |  308 ++++-
 components/message/chat/chat-list.vue       |  857 ++++++++++++++
 components/message/list/list.vue            |  140 +--
 components/message/list/message-nav-bar.vue |   13 +-
 pages/bill/add-bill/add-bill.vue            |   32 +-
 pages/index/index.nvue                      |    2 +-
 pages/message/chat-page/chat-page.vue       | 1126 ++++++++-----------
 pages/message/defaultData.json              |  234 ++++
 pages/message/list-index.vue                |  450 ++++++--
 static/image/index/qita/msg.png             |  Bin 0 -> 8779 bytes
 static/image/phone-message/add.png          |  Bin 0 -> 1696 bytes
 static/image/phone-message/iphone/send.png  |  Bin 0 -> 1368 bytes
 static/image/phone-message/mi/mic.png       |  Bin 2200 -> 0 bytes
 static/image/phone-message/mi/send.png      |  Bin 0 -> 1796 bytes
 static/image/phone-message/mi/unsend.png    |  Bin 0 -> 1651 bytes
 static/image/phone-message/oppo/ka2.png     |  Bin 0 -> 915 bytes
 16 files changed, 2241 insertions(+), 921 deletions(-)
 create mode 100644 components/message/chat/chat-list.vue
 create mode 100644 pages/message/defaultData.json
 create mode 100644 static/image/index/qita/msg.png
 create mode 100644 static/image/phone-message/add.png
 create mode 100644 static/image/phone-message/iphone/send.png
 delete mode 100644 static/image/phone-message/mi/mic.png
 create mode 100644 static/image/phone-message/mi/send.png
 create mode 100644 static/image/phone-message/mi/unsend.png
 create mode 100644 static/image/phone-message/oppo/ka2.png

diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index a56ced1..4787ad1 100644
--- a/components/message/chat/chat-layout.vue
+++ b/components/message/chat/chat-layout.vue
@@ -1,9 +1,10 @@
 <template>
     <view class="page-container flex-column" :class="`${phone}-style`">
         <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
-        <view class="top-box">
+        <!-- <view class="top-placeholder" :style="{ height: data.topBoxHeight + 'px' }"></view> -->
+        <view class="top-box " :style="{ top: data.statusBarHeight + 'px' }">
             <slot name="top">
-                <view class="top-container">
+                <view class="top-container" v-show="!sortMode">
                     <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`">
@@ -43,49 +44,67 @@
             </slot>
         </view>
         <view class="center-box flex-1">
-            <slot></slot>
+            <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation :show-scrollbar="false"
+                class="scroll-view h100">
+                <slot></slot>
+            </scroll-view>
         </view>
-        <view class="bottom-box">
+        <view class="bottom-box fixed-bottom-box" :style="{ bottom: data.keyboardHeight + 'px' }">
             <slot name="bottom">
-                <view class="bottom-container flex-align-center">
+                <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`"></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">
-                        <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 ka" @click="changeSim"
+                            :src="`/static/image/phone-message/huawei/ka${simIndex}.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"
+                        <!-- <input class="input flex-1" :placeholder="showInfo.placeholder" v-model="content"
+                            @input="onInput"></input> -->
+                        <textarea class="input flex-1" :adjust-position="false" fixed auto-height
+                            :placeholder="showInfo.placeholder" v-model="content" @input="onInput" @focus="onFocus"
+                            @blur="onBlur"></textarea>
+                        <!-- <editor class="input flex-1" :placeholder="showInfo.placeholder"></editor> -->
+                        <image v-if="phone == 'iphone' && !isSend" 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 v-if="phone == 'iphone' && isSend" class="right-send-icon"
+                            src="/static/image/phone-message/iphone/send.png" @click="sendMessage"></image>
+                        <image v-if="phone == 'oppo'" class="right-icon"
+                            :src="`/static/image/phone-message/oppo/ka${simIndex}.png`" @click="changeSim">
                         </image>
                     </view>
                     <view v-if="phone != 'iphone'" class="flex-align-center">
-                        <image v-if="phone == 'mi'" class="right-icon" src="/static/image/phone-message/mi/mic.png">
+                        <image v-if="phone == 'mi'" class="right-icon"
+                            :src="`/static/image/phone-message/mi/${isSend ? 'send' : 'unsend'}.png`"
+                            @click="sendMessage">
                         </image>
                         <image v-if="phone == 'oppo'" class="right-icon"
-                            src="/static/image/phone-message/oppo/send.png">
+                            :src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unsend'}.png`"
+                            @click="sendMessage">
                         </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">
+                            :src="`/static/image/phone-message/huawei/${isSend ? 'send' : 'unsend'}.png`"
+                            @click="sendMessage">
                         </image>
-                        <text v-if="phone == 'vivo'" class="send-text">发送</text>
+                        <text v-if="phone == 'vivo'" class="send-text" :class="{ 'send-text-active': isSend }"
+                            @click="sendMessage">发送</text>
                     </view>
                 </view>
             </slot>
         </view>
+        <view class="bottom-placeholder" :style="{ height: (data.bottomBoxHeight + data.keyboardHeight) + 'px' }">
+        </view>
     </view>
 </template>
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, computed, toRefs } from 'vue'
 import { onLoad, onPageScroll } from "@dcloudio/uni-app";
-import { stringUtil, util } from '@/utils/common.js';
+import { stringUtil, dateUtil, util } from '@/utils/common.js';
 const props = defineProps({
     // 手机品牌
     phone: {
@@ -102,13 +121,100 @@ const props = defineProps({
             content: "您关注的商品降价啦，快来抢购吧！",
             time: "2026-02-20 20:55:12"
         }
+    },
+    // 是否处于拖拽排序模式
+    sortMode: {
+        type: Boolean,
+        default: false
     }
 })
 
 const data = reactive({
     statusBarHeight: 0,
+    topBoxHeight: 0,
+    bottomBoxHeight: 0,
+    isSend: false,
+    content: "",
+    simIndex: 1,
+    scrollTop: 0,
+    keyboardHeight: 0
 })
 
+let { isSend, content, simIndex, scrollTop } = toRefs(data)
+
+const emit = defineEmits(['send'])
+
+onMounted(() => {
+    // 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+    setTimeout(() => {
+        data.scrollTop = 99999 + Math.random();
+    }, 100);
+})
+
+const onInput = (e) => {
+    content.value = e.detail.value
+    if (content.value.length > 0) {
+        isSend.value = true
+    } else {
+        isSend.value = false
+    }
+    setTimeout(() => {
+        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+            if (rect) {
+                data.bottomBoxHeight = rect.height;
+            }
+        }).exec();
+    }, 50);
+}
+
+const onFocus = (e) => {
+    if (e.detail.height) {
+        data.keyboardHeight = e.detail.height;
+        // 键盘弹起时，也需要滚动到底部
+        setTimeout(() => {
+            data.scrollTop = 99999 + Math.random();
+        }, 100);
+    }
+}
+
+const onBlur = () => {
+    data.keyboardHeight = 0;
+}
+
+/**
+ * 切换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
+
+    // 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+    setTimeout(() => {
+        data.scrollTop = 99999 + Math.random();
+        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+            if (rect) {
+                data.bottomBoxHeight = rect.height;
+            }
+        }).exec();
+    }, 100);
+}
+
 // 展示文字信息
 const showInfo = computed(() => {
     let placeholder
@@ -139,8 +245,24 @@ 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);
+
 })
 
+
+
 </script>
 <style>
 @import '@/common/main.css';
@@ -162,10 +284,26 @@ onMounted(() => {
 
 .center-box {
     overflow: hidden;
-    overflow-y: scroll;
+    // 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 {
 
@@ -242,17 +380,32 @@ onMounted(() => {
         }
 
         .search-box {
-            height: 70rpx;
+            min-height: 70rpx;
             border-radius: 35rpx 35rpx 35rpx 35rpx;
             border: 2rpx solid #DFDFDF;
-            padding: 0 26rpx;
+            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 {
-                ::v-deep .input-placeholder {
-                    color: #C3C3C3;
-                    font-size: 32rpx;
-                    line-height: 32rpx;
-                }
+                height: 100%;
+                width: auto;
+                min-height: 46rpx;
+                max-height: 160rpx;
+                overflow: hidden;
+                overflow-y: scroll;
+                // min-height: 48rpx !important;
             }
 
             .right-icon {
@@ -260,6 +413,12 @@ onMounted(() => {
                 height: 32rpx;
                 margin-left: 20rpx;
             }
+
+            .right-send-icon {
+                width: 52rpx;
+                height: 52rpx;
+                margin-left: 20rpx;
+            }
         }
 
     }
@@ -338,18 +497,31 @@ onMounted(() => {
             }
 
             .search-box {
-                height: 96rpx;
+                min-height: 96rpx;
                 border-radius: 28rpx;
-                padding: 0 42rpx;
+                padding: 12rpx 42rpx;
                 margin: 0 20rpx;
                 background-color: #E8E8E8;
 
+                ::v-deep .ql-container {
+                    height: 100%;
+                    min-height: auto;
+                }
+
+                ::v-deep .ql-blank::before {
+                    color: #8B8B8B;
+                    font-size: 30rpx;
+                    line-height: inherit;
+                    font-style: normal;
+                }
+
                 .input {
-                    ::v-deep .input-placeholder {
-                        color: #8B8B8B;
-                        font-size: 30rpx;
-                        line-height: 28rpx;
-                    }
+                    height: 100%;
+                    width: auto;
+                    min-height: 46rpx;
+                    max-height: 160rpx;
+                    overflow: hidden;
+                    overflow-y: scroll;
                 }
 
                 .right-icon {
@@ -457,18 +629,31 @@ onMounted(() => {
             }
 
             .search-box {
-                height: 84rpx;
+                min-height: 84rpx;
                 border-radius: 42rpx;
-                padding: 0 38rpx;
                 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;
+                }
 
                 .input {
-                    ::v-deep .input-placeholder {
-                        color: #6C6C6E;
-                        font-size: 32rpx;
-                        line-height: 32rpx;
-                    }
+                    height: 100%;
+                    width: auto;
+                    min-height: 46rpx;
+                    max-height: 160rpx;
+                    overflow: hidden;
+                    overflow-y: scroll;
                 }
 
                 .right-icon {
@@ -581,9 +766,9 @@ onMounted(() => {
             }
 
             .search-box {
-                height: 76rpx;
+                min-height: 76rpx;
                 border-radius: 42rpx;
-                padding: 0 28rpx;
+                padding: 10rpx 28rpx;
                 margin: 0 30rpx;
                 background-color: #F4F4F4;
 
@@ -599,12 +784,24 @@ onMounted(() => {
                 }
 
                 .input {
-                    margin-left: 34rpx;
+                    height: 100%;
+                    width: auto;
+                    min-height: 46rpx;
+                    max-height: 160rpx;
+                    overflow: hidden;
+                    overflow-y: scroll;
+                    margin-left: 32rpx;
 
-                    ::v-deep .input-placeholder {
+                    ::v-deep .ql-container {
+                        height: 100%;
+                        min-height: auto;
+                    }
+
+                    ::v-deep .ql-blank::before {
                         color: #606060;
                         font-size: 30rpx;
-                        line-height: 32rpx;
+                        line-height: inherit;
+                        font-style: normal;
                     }
                 }
 
@@ -689,17 +886,30 @@ onMounted(() => {
             padding: 20rpx 48rpx;
 
             .search-box {
-                height: 64rpx;
+                min-height: 64rpx;
                 border-radius: 16rpx;
-                padding: 0 18rpx;
+                padding: 8rpx 18rpx;
                 margin-right: 42rpx;
                 background-color: #F2F2F2;
 
                 .input {
-                    ::v-deep .input-placeholder {
+                    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: 30rpx;
+                        line-height: inherit;
+                        font-style: normal;
                     }
                 }
             }
@@ -709,6 +919,10 @@ onMounted(() => {
                 color: #9CC9FF;
                 font-size: 34rpx;
             }
+
+            .send-text-active {
+                color: #0078FE;
+            }
         }
     }
 
diff --git a/components/message/chat/chat-list.vue b/components/message/chat/chat-list.vue
new file mode 100644
index 0000000..96d5d6b
--- /dev/null
+++ b/components/message/chat/chat-list.vue
@@ -0,0 +1,857 @@
+<template>
+    <view>
+        <view v-for="(message, index) in displayList" :key="message.id || index" class="message-item" :class="{
+            isMe: message.isMe,
+            'm-t-16': shouldApplyMt16(index) && !shouldShowTime(index),
+            'is-sort-mode': sortMode,
+            'sort-dragging': sortMode && dragIndex === index,
+            'sort-drop-before': sortMode && dragOverIndex === index && dragIndex !== index && dropPosition === 'before',
+            'sort-drop-after': sortMode && dragOverIndex === index && dragIndex !== index && dropPosition === 'after'
+        }">
+
+            <!-- 排序模式下的拖拽手柄 -->
+            <view v-if="sortMode" class="sort-handle-wrap" @longpress="onSortLongPress(index, $event)"
+                @touchmove.stop.prevent="onSortTouchMove(index, $event)" @touchend.stop="onSortTouchEnd(index, $event)">
+                <view class="sort-handle-bar"></view>
+                <view class="sort-handle-bar"></view>
+                <view class="sort-handle-bar"></view>
+            </view>
+
+            <view style="flex: 1; overflow: hidden;">
+                <view class="time m-t-44" v-if="shouldShowTime(index)">
+                    <view class="top-text" v-if="phone == 'iphone' && index == 0">信息 · 短信</view>
+                    <view class="top-text" v-if="phone == 'huawei' && index == 0">短信/彩信</view>
+                    <text v-if="phone == 'huawei'">{{ formatHuaweiTopTime(message.time) }}</text>
+                    <text v-else>{{ formatChatTime(message.time) }} <text
+                            v-if="(phone == 'oppo' || (phone == 'vivo' && message.isMe)) && message.simIndex"> 中国联通
+                        </text></text>
+
+                    <image style="width: 20rpx;height: 24rpx;margin-left: 8rpx; "
+                        v-if="phone == 'oppo' || (phone == 'vivo' && message.isMe)"
+                        :src="`/static/image/phone-message/huawei/chat-ka${message.simIndex}.png`">
+                    </image>
+                </view>
+                <view class="chat-box" :id="'msg-' + index" :class="{
+                    'tail-right': shouldApplyTailRight(index),
+                    'tail-left': shouldApplyTailLeft(index),
+                    'delivered': isLastMeMessage(index)
+                }" @longpress="!sortMode && onMessageLongPress(index, message)">
+                    <text v-if="message.isMe && phone == 'mi'" class="send-text">送达</text>
+                    <view class="chat-bubble">
+                        <view v-html="formatMessageContent(message.content, message.isMe)"></view>
+                    </view>
+                </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>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
+import { onLoad, onPageScroll } from "@dcloudio/uni-app";
+import { stringUtil, util } from '@/utils/common.js';
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    messageList: {
+        type: Array,
+        default: []
+    },
+    // 是否处于拖拽排序模式
+    sortMode: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['onMessageLongPress', 'sort'])
+
+// 排序模式下的本地唦本列表
+// 不直接修改 props.messageList，排序完成后 emit 给父组件
+const localSortList = ref([])
+const dragIndex = ref(-1)
+const dragOverIndex = ref(-1)
+const dropPosition = ref('after') // 'before'=插入目标上方, 'after'=插入目标下方
+let isDragging = false
+let sortItemRects = []
+
+// 当 sortMode 切换时同步本地副本
+watch(() => props.sortMode, (val) => {
+    if (val) {
+        localSortList.value = props.messageList.map(item => ({ ...item }))
+    } else {
+        dragIndex.value = -1
+        dragOverIndex.value = -1
+        isDragging = false
+        sortItemRects = []
+        localSortList.value = []
+    }
+})
+
+// 实际渲染用的列表：排序模式下用内部副本，否则用原始列表
+const displayList = computed(() => {
+    if (props.sortMode) return localSortList.value
+    return props.messageList
+})
+
+// 判断消息isMe==true时上一条消息是否也是isMe==true，如果不是则应用m-t-16样式
+const shouldApplyMt16 = (index) => {
+    if (index === 0) return false;
+    const currentMsg = displayList.value[index];
+    const prevMsg = displayList.value[index - 1];
+    if (currentMsg.isMe && !prevMsg.isMe) {
+        return true;
+    }
+    return false;
+}
+
+// 判断消息isMe==true时下一条消息是否也是isMe==true，如果不是则应用m-t-16样式
+const shouldApplyNextIsMe = (index) => {
+    const currentMsg = displayList.value[index];
+    // 拦截：如果已经是数组的最后一条消息，必然不存在下一条消息
+    if (index >= displayList.value.length - 1) return false;
+
+    const nextMsg = displayList.value[index + 1];
+    if (currentMsg.isMe && nextMsg.isMe) {
+        return true;
+    }
+    return false;
+}
+
+// 判断是否为最后一条自己发出的消息
+const isLastMeMessage = (currentIndex) => {
+    const currentMsg = displayList.value[currentIndex];
+    if (!currentMsg.isMe) return false;
+
+    // 往后遍历，如果还能找到isMe=true的消息，说明当前这条不是最后一条
+    for (let i = currentIndex + 1; i < displayList.value.length; i++) {
+        if (displayList.value[i].isMe) {
+            return false;
+        }
+    }
+    return true;
+}
+
+// 判断 tail-right（右侧我方气泡尾巴）样式是否生效
+const shouldApplyTailRight = (index) => {
+    const currentMsg = displayList.value[index];
+    if (!currentMsg.isMe) return false; // 不是我发的直接没右侧尾巴
+
+    // 如果这是整体列表最后一条消息，必然有尾巴
+    if (index === displayList.value.length - 1) return true;
+
+    const nextMsg = displayList.value[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 = displayList.value[index];
+    if (currentMsg.isMe) return false;
+
+    // 如果这是整体列表最后一条消息，也就符合最后一条isMe==false的特征
+    if (index === displayList.value.length - 1) return true;
+
+    const nextMsg = displayList.value[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 < displayList.value.length; i++) {
+        if (!displayList.value[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 (props.phone == 'iphone' || props.phone == 'oppo') 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}`;
+}
+
+// 判断是否显示时间
+// timeMode: 'show'=强制显示, 'hide'=强制隐藏, 'auto'或无=按间隔逻辑判断
+const shouldShowTime = (index) => {
+    const currentMsg = displayList.value[index];
+    const mode = currentMsg.timeMode;
+
+    // 强制隐藏（兼容旧 hideTime 字段）
+    if (mode === 'hide' || currentMsg.hideTime) return false;
+
+    // 强制显示
+    if (mode === 'show') return true;
+
+    // 以下为 auto / 默认 逻辑
+    if (index === 0) return true; // 第一条必定显示
+
+    // 排序模式下每条均显示时间
+    if (props.sortMode) return true;
+
+    const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
+    const prevMsgTime = new Date(displayList.value[index - 1].time.replace(/-/g, '/')).getTime();
+
+    if (isNaN(currentMsgTime) || isNaN(prevMsgTime)) return true;
+
+    // 绝对值比较，兼容排序后时间倒序
+    return Math.abs(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_/%-]*)*)|(\b\d{5,}(?:\.\d+)?\b)/g;
+
+    return content.replace(combinedRegex, (match, p1, p2) => {
+        // 如果是数字且包含小数点（通常是金额），则不添加下划线样式
+        if (p2 && p2.includes('.')) {
+            return match;
+        }
+
+        let color = '#3A85F8'
+        if (props.phone == 'iphone') color = '#0B7AE3'
+        if (props.phone == 'mi') color = '#3A85F8'
+        const colorStyle = !isMe ? `color: ${color};` : '';
+        return `<span style="text-decoration: underline; ${colorStyle}">${match}</span>`;
+    });
+}
+
+
+/**
+ * 长按信息
+ * @param index 
+ * @param message 
+ */
+const onMessageLongPress = (index, message) => {
+    emit('onLongPress', index, message)
+}
+
+// ===================== 拖拽排序逻辑 =====================
+
+/**
+ * 刷新所有排序条目的 rect 坐标缓存
+ */
+const refreshSortRects = (callback) => {
+    const query = uni.createSelectorQuery()
+    const len = localSortList.value.length
+    let collected = []
+    let done = 0
+    for (let i = 0; i < len; i++) {
+        query.select('#msg-' + i).boundingClientRect(rect => {
+            collected[i] = rect
+            done++
+            if (done === len && callback) callback(collected)
+        })
+    }
+    query.exec()
+}
+
+/**
+ * 长按手柄开始拖拽
+ */
+const onSortLongPress = (idx, e) => {
+    dragIndex.value = idx
+    dragOverIndex.value = idx
+    isDragging = true
+    refreshSortRects(rects => {
+        sortItemRects = rects
+    })
+    uni.vibrateShort({ type: 'medium' })
+}
+
+/**
+ * 拖拽移动 - 根据触摸点 Y 坐标確定悬停位置和插入方向
+ */
+const onSortTouchMove = (idx, e) => {
+    if (!isDragging || dragIndex.value === -1) return
+    if (!e.touches || !e.touches[0]) return
+    const touchY = e.touches[0].clientY
+    if (!sortItemRects || sortItemRects.length === 0) return
+    let overIdx = dragOverIndex.value
+    for (let i = 0; i < sortItemRects.length; i++) {
+        const rect = sortItemRects[i]
+        if (rect && touchY >= rect.top && touchY <= rect.bottom) {
+            overIdx = i
+            // 判断手指在该元素的上半区还是下半区
+            const mid = rect.top + rect.height / 2
+            dropPosition.value = touchY < mid ? 'before' : 'after'
+            break
+        }
+    }
+    dragOverIndex.value = overIdx
+}
+
+/**
+ * 拖拽结束 - 根据 dropPosition 決定插入到目标的上方还是下方
+ */
+const onSortTouchEnd = (idx, e) => {
+    if (!isDragging) return
+    const from = dragIndex.value
+    const to = dragOverIndex.value
+    if (from !== -1 && to !== -1 && from !== to) {
+        const list = [...localSortList.value]
+        const [removed] = list.splice(from, 1)
+        // from 被移除后，如果 to 在 from 后面，to 需要 -1
+        let insertAt = to > from ? to - 1 : to
+        if (dropPosition.value === 'after') insertAt += 1
+        list.splice(insertAt, 0, removed)
+        localSortList.value = list
+        emit('sort', list.map(item => ({ ...item })))
+        nextTick(() => {
+            refreshSortRects(rects => {
+                sortItemRects = rects
+            })
+        })
+    }
+    dragIndex.value = -1
+    dragOverIndex.value = -1
+    dropPosition.value = 'after'
+    isDragging = false
+}
+</script>
+<style lang="less" scoped>
+/* ===== 排序模式公共样式（跨所有手机品牌通用）===== */
+/* 排序模式下每条消息左右横排（手柄 + 气泡取剩余宽度）*/
+.is-sort-mode {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+/* 拖拽手柄区域 */
+.sort-handle-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 60rpx;
+    flex-shrink: 0;
+    padding: 0 8rpx;
+
+    .sort-handle-bar {
+        margin: 3rpx 0;
+    }
+}
+
+.sort-handle-bar {
+    width: 30rpx;
+    height: 4rpx;
+    border-radius: 2rpx;
+    background-color: #CCCCCC;
+}
+
+/* 被拖拽中的条目：高亮蓝边 + 轻微缩进 */
+.sort-dragging {
+    opacity: 0.7;
+    background-color: rgba(0, 122, 255, 0.06) !important;
+    border-left: 4rpx solid #007AFF;
+}
+
+/* 插入线：将拖拽项放在目标上方 */
+.sort-drop-before {
+    border-top: 3rpx dashed #007AFF !important;
+    padding-top: 4rpx;
+}
+
+/* 插入线：将拖拽项放在目标下方 */
+.sort-drop-after {
+    border-bottom: 3rpx dashed #007AFF !important;
+    padding-bottom: 4rpx;
+}
+
+// 苹果样式
+.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;
+            }
+        }
+
+
+    }
+}
+
+// oppo样式
+.oppo-style {
+    .m-t-16 {
+        margin-top: 24rpx !important;
+    }
+
+    .time {
+        color: #727377;
+        font-size: 24rpx;
+        line-height: 24rpx;
+        text-align: center;
+        margin-bottom: 20rpx;
+        margin-top: 48rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .message-item {
+        margin-top: 12rpx;
+    }
+
+    .chat-box {
+        display: flex;
+        justify-content: flex-start;
+        width: 100%;
+
+        .chat-bubble {
+            padding: 28rpx 48rpx;
+            background-color: #FFFFFF;
+            border-radius: 32rpx;
+            max-width: 600rpx;
+            font-size: 32rpx;
+            line-height: 44rpx;
+            color: #1A1A1A;
+            margin: 0 32rpx;
+            word-break: break-all;
+        }
+    }
+
+
+    .isMe {
+        .chat-box {
+            justify-content: flex-end;
+        }
+
+        .chat-bubble {
+            background-color: #00A1FF;
+            color: #fff;
+        }
+    }
+
+    .second-info {
+        font-size: 24rpx;
+        text-align: right;
+        padding: 0 34rpx;
+        margin-top: 14rpx;
+        padding-bottom: 6rpx;
+
+        .delivered {
+            font-size: 24rpx;
+            line-height: 24rpx;
+            color: #727377;
+        }
+    }
+
+}
+
+// 华为样式
+.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;
+            }
+        }
+
+
+    }
+}
+
+// vivo样式
+.vivo-style {
+    .m-t-16 {
+        margin-top: 24rpx !important;
+    }
+
+    .time {
+        color: #ACACAC;
+        font-size: 24rpx;
+        line-height: 24rpx;
+        text-align: center;
+        margin: 40rpx 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .message-item {
+        margin-top: 12rpx;
+    }
+
+    .chat-box {
+        display: flex;
+        justify-content: flex-start;
+        width: 100%;
+
+        .chat-bubble {
+            padding: 38rpx 38rpx 32rpx 40rpx;
+            background-color: #FFFFFF;
+            border-radius: 32rpx;
+            max-width: 100%;
+            font-size: 36rpx;
+            line-height: 48rpx;
+            color: #1A1A1A;
+            margin: 0 32rpx;
+            word-break: break-all;
+        }
+    }
+
+
+    .isMe {
+        .chat-box {
+            justify-content: flex-end;
+        }
+
+        .chat-bubble {
+            background-color: #0078FE;
+            color: #fff;
+        }
+    }
+
+    .second-info {
+        font-size: 24rpx;
+        text-align: right;
+        padding: 0 34rpx;
+        margin-top: 12rpx;
+        padding-bottom: 6rpx;
+
+        .delivered {
+            font-size: 24rpx;
+            line-height: 24rpx;
+            color: #ACACAC;
+        }
+    }
+
+}
+</style>
diff --git a/components/message/list/list.vue b/components/message/list/list.vue
index 2ff0886..5dab17f 100644
--- a/components/message/list/list.vue
+++ b/components/message/list/list.vue
@@ -12,7 +12,7 @@
                                         > 99
                                         ? '99+' : (item.unReadNumber || 1) }}</text>
                             </view>
-                            <image class="img shrink-0"
+                            <image class="img avatar shrink-0"
                                 :src="item.img || `/static/image/phone-message/${phone}/default.png`">
                             </image>
                         </view>
@@ -20,9 +20,12 @@
                             <view class="main-box flex-1">
                                 <view class="title-box flex-between">
                                     <text class="title">{{ item.title }}</text>
-                                    <text class="time">{{ formatDate(item.time) }}</text>
+                                    <text class="time">{{ formatDate(item.chatList?.[item.chatList?.length -
+                                        1]?.time || item.time)
+                                        }}</text>
                                 </view>
-                                <view class="content">{{ item.content }}</view>
+                                <view class="content"
+                                    v-html="item.chatList?.[item.chatList?.length - 1]?.content || ''"></view>
                             </view>
                             <view class="box-right h100 flex-column flex-align-center">
                                 <image v-if="phone == 'iphone'" class="m-t-4"
@@ -35,14 +38,18 @@
                 </view>
                 <template v-slot:right>
                     <view class="flex flex-align-center" style="margin-left: 1px;">
-                        <view v-if="phone == 'iphone'" class="btn flex-center flex-align-center edit">
-                            <image src="/static/image/phone-message/iphone/mute.png"></image>
+                        <view class="btn flex-center flex-align-center edit" style="color: #fff;"
+                            @click="editItem(item)">
+                            编辑
+                            <!-- <image :src="`/static/image/phone-message/iphone/delete.png`">
+                            </image> -->
                         </view>
-                        <view class="btn flex-center flex-align-center delete">
+                        <view class="btn flex-center flex-align-center delete" @click="deleteItem(item)">
                             <image
                                 :src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
                             </image>
                         </view>
+
                     </view>
 
                 </template>
@@ -53,99 +60,6 @@
 <script>
 import { stringUtil } from '@/utils/common.js';
 
-const defaultList = [
-    {
-        id: stringUtil.uuid(),
-        unRead: true,
-        unReadNumber: 100,
-        noNotice: true,
-        img: "",
-        title: "系统通知",
-        content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
-        time: "2026-03-11 08:31:00"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: true,
-        noNotice: true,
-        img: "",
-        title: "12306",
-        content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
-        time: "2026-03-10 14:30:00"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: false,
-        img: "",
-        title: "支付宝支付",
-        content: "支付成功，您在XX超市消费了 45.00 元。",
-        time: "2026-03-10 18:20:15"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: false,
-        img: "",
-        title: "花呗提醒",
-        content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
-        time: "2026-03-09 09:00:00"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: true,
-        noNotice: false,
-        img: "",
-        title: "顺丰速运",
-        content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
-        time: "2026-03-01 10:15:22"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: true,
-        img: "",
-        title: "蚂蚁森林",
-        content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
-        time: "2026-02-28 07:45:10"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: false,
-        img: "",
-        title: "余额宝",
-        content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
-        time: "2026-02-27 06:30:00"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: false,
-        img: "",
-        title: "10086",
-        content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
-        time: "2026-02-26 15:10:45"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: true,
-        noNotice: false,
-        img: "",
-        title: "饿了么",
-        content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
-        time: "2026-02-25 12:40:33"
-    },
-    {
-        id: stringUtil.uuid(),
-        unRead: false,
-        noNotice: false,
-        img: "",
-        title: "淘宝通知",
-        content: "您关注的商品降价啦，快来抢购吧！",
-        time: "2026-02-20 20:55:12"
-    }
-]
 </script>
 <script setup>
 import {
@@ -158,7 +72,7 @@ import {
     dateUtil
 } from '@/utils/common.js';
 // 定义事件
-const emit = defineEmits(['item-click'])
+const emit = defineEmits(['item-click', 'delete-item', 'edit-item'])
 const props = defineProps({
     // 手机品牌
     phone: {
@@ -167,7 +81,7 @@ const props = defineProps({
     },
     list: {
         type: Array,
-        default: () => defaultList
+        default: () => []
     }
 })
 
@@ -200,6 +114,21 @@ const formatDate = (date) => {
 const clickItem = (item) => {
     emit('item-click', item)
 }
+
+/**
+ * 删除列表元素
+ */
+const deleteItem = (item) => {
+    emit('delete-item', item)
+}
+
+/**
+ * 修改元素
+ * @param item 
+ */
+const editItem = (item) => {
+    emit('edit-item', item)
+}
 </script>
 <style>
 @import '@/common/main.css';
@@ -225,6 +154,14 @@ const clickItem = (item) => {
     background-color: #FFFFFF;
 }
 
+.avatar {
+    border-radius: 50%;
+}
+
+.edit {
+    background-color: #5855D6;
+}
+
 // 苹果样式
 .iphone-style {
 
@@ -266,6 +203,7 @@ const clickItem = (item) => {
             width: 84rpx;
             height: 84rpx;
             margin-left: 16rpx;
+            border-radius: 50%;
         }
 
         .border-box {
diff --git a/components/message/list/message-nav-bar.vue b/components/message/list/message-nav-bar.vue
index a0661ee..48ce810 100644
--- a/components/message/list/message-nav-bar.vue
+++ b/components/message/list/message-nav-bar.vue
@@ -2,7 +2,9 @@
     <view :class="`${phone}-style`">
         <!-- 导航样式 -->
         <view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
-            <NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'">
+            <NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'" :buttonGroup="buttonGroup"
+                @button-click="util.clickTitlePopupButton" tipLayerType="message-list-tip" isTipLayer
+                tipLayerText="添加短信" @add="emit('add')">
                 <!-- 左侧文字图标 -->
                 <template v-slot:left>
                     <view v-if="phone == 'iphone'" class="flex flex-align-center">
@@ -108,6 +110,15 @@ import {
     util
 } from '@/utils/common.js';
 
+const emit = defineEmits(['add'])
+
+const buttonGroup = [{
+    name: "添加短信",
+    click: () => {
+        emit('add')
+    }
+}]
+
 const props = defineProps({
     // 手机品牌
     phone: {
diff --git a/pages/bill/add-bill/add-bill.vue b/pages/bill/add-bill/add-bill.vue
index a8f57b9..9f44354 100644
--- a/pages/bill/add-bill/add-bill.vue
+++ b/pages/bill/add-bill/add-bill.vue
@@ -53,8 +53,11 @@
 			<view class="detail-info-container">
 				<template v-for="item in billData.itemInfoList" :key="item.id">
 					<view class="info-item-box" v-if="item.key != 'paymentReward'">
-						<view class="item-label">
-							{{ item.label }}
+						<view class="item-label" :class="{ 'switchable-label': item.key === 'createTime' }"
+							@click="toggleCreateTimeLabel(item)">
+							<text>{{ item.label }}</text>
+							<image v-if="item.key === 'createTime'" class="switch-icon"
+								src="/static/image/bill/add-bill/edit.png"></image>
 						</view>
 						<view v-if="item.type != 'link'" class="info-item-input" @click="onClickItemInfo(item)">
 							<!-- 隐藏的text用于测量宽度 -->
@@ -882,6 +885,15 @@ const onRightClick = async () => {
 	}, 500)
 }
 
+/**
+ * 切换创建时间/支付时间标签
+ */
+const toggleCreateTimeLabel = (item) => {
+	if (item.key === 'createTime') {
+		item.label = item.label === '创建时间' ? '支付时间' : '创建时间'
+	}
+}
+
 // 点击itemInfo
 const onClickItemInfo = async (item, action) => {
 	console.log(item)
@@ -1230,6 +1242,22 @@ page {
 		font-size: 26rpx;
 		color: var(--text-secondary);
 	}
+
+	.switchable-label {
+		display: inline-flex;
+		align-items: center;
+		padding: 4rpx 10rpx 4rpx 10rpx;
+		margin-left: -10rpx;
+		border-radius: 8rpx;
+		border: 1px dashed #d9d9d9;
+		background-color: #fcfcfc;
+
+		.switch-icon {
+			width: 18rpx;
+			height: 18rpx;
+			margin-left: 6rpx;
+		}
+	}
 }
 
 .info-item-input {
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index fe0dce0..af2d8a1 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -256,7 +256,7 @@ const otherList = [{
 	path: "/pages/other/card/card"
 },
 {
-	icon: "/static/image/index/qita/card.png",
+	icon: "/static/image/index/qita/msg.png",
 	name: "短信",
 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=message"
 },
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
index 0fb0250..634a966 100644
--- a/pages/message/chat-page/chat-page.vue
+++ b/pages/message/chat-page/chat-page.vue
@@ -1,6 +1,6 @@
 <template>
 	<view :class="`${data.phone}-style`">
-		<ChatLayout :phone="data.phone" :chatInfo="data.data">
+		<ChatLayout :phone="data.phone" :chatInfo="data.data" :sortMode="isSortMode" @send="handleSend">
 			<!-- 弹出操作层及遮罩 -->
 			<view v-if="showActionPopup" class="action-mask" @tap="closeActionPopup">
 				<view class="action-popup" :style="{ top: popupTop + 'px', left: popupLeft + 'px' }">
@@ -12,6 +12,10 @@
 						<image class="action-icon" src="/static/image/phone-message/huhuan.png"></image>
 						<text>消息互换</text>
 					</view>
+					<view class="action-item" @tap.stop="handleSort">
+						<image class="action-icon" src="/static/image/phone-message/bianji.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>
@@ -21,50 +25,86 @@
 				</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
-							v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"> 中国联通
-						</text></text>
-
-					<image style="width: 20rpx;height: 24rpx;margin-left: 8rpx; "
-						v-if="data.phone == 'oppo' || (data.phone == 'vivo' && message.isMe)"
-						src="/static/image/phone-message/huawei/chat-ka2.png">
-					</image>
-				</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 v-if="showEditPopup" class="edit-mask" @tap="closeEditPopup">
+				<view class="edit-popup" @tap.stop>
+					<view class="edit-header">编辑消息</view>
+					<view class="edit-body">
+						<view class="edit-row">
+							<text class="edit-label">时间：</text>
+							<view class="time-picker-group">
+								<picker mode="date" :value="editingDate" @change="onDateChange">
+									<view class="time-picker-item">
+										<text>{{ editingDate || '选择日期' }}</text>
+									</view>
+								</picker>
+								<picker mode="time" :value="editingTimeOfDay" @change="onTimeOfDayChange">
+									<view class="time-picker-item">
+										<text>{{ editingTimeOfDay || '选择时刻' }}</text>
+									</view>
+								</picker>
+							</view>
+						</view>
+						<view class="edit-row" style="align-items: flex-start;">
+							<text class="edit-label" style="padding-top: 6rpx;">时间显示：</text>
+							<view class="time-mode-group">
+								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'auto' }"
+									@tap="editingTimeMode = 'auto'">自动</view>
+								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'show' }"
+									@tap="editingTimeMode = 'show'">强制显示</view>
+								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'hide' }"
+									@tap="editingTimeMode = 'hide'">强制隐藏</view>
+							</view>
+						</view>
+						<view class="edit-row"
+							v-if="data.phone == 'huawei' || data.phone == 'oppo' || data.phone == 'vivo'">
+							<text class="edit-label">SIM卡：</text>
+							<view class="edit-input"
+								style="padding: 0; background: transparent; display: flex; align-items: center; border-radius: 8rpx; height: 70rpx;">
+								<uni-data-select v-model="editingSimKa" :localdata="simList" :clear="false"
+									placeholder="请选择卡号"
+									style="flex: 1; border: none !important; width: 100%;"></uni-data-select>
+							</view>
+						</view>
+						<view class="edit-row">
+							<text class="edit-label">正文：</text>
+						</view>
+						<editor id="editor" class="edit-textarea" placeholder="请输入消息内容..." @ready="onEditorReady">
+						</editor>
+					</view>
+					<view class="edit-footer">
+						<view class="edit-btn cancel" @tap="closeEditPopup">取消</view>
+						<view class="edit-btn confirm" @tap="confirmEdit">确定</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 v-if="(data.phone == 'oppo' || data.phone == 'vivo') && message.isMe" class="second-info">
-					<text v-if="message.isMe" class="delivered">已送达</text>
 				</view>
 			</view>
 
+			<ChatList :messageList="messageList" :phone="data.phone" :sortMode="isSortMode"
+				@onLongPress="onMessageLongPress" @sort="onSortChange"></ChatList>
+
+
 		</ChatLayout>
+
+		<!-- 排序模式底部工具条 -->
+		<view v-if="isSortMode" class="sort-toolbar">
+			<view class="sort-toolbar-tip">长按消息并拖动调整顺序</view>
+			<view class="sort-toolbar-actions">
+				<view class="sort-toolbar-btn cancel" @tap="cancelSort">取消</view>
+				<view class="sort-toolbar-btn confirm" @tap="confirmSort">完成</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
 import ChatLayout from '@/components/message/chat/chat-layout.vue'
+import ChatList from '@/components/message/chat/chat-list.vue'
+import defaultData from '../defaultData.json'
 import {
 	ref,
-	reactive
+	reactive,
+	computed,
+	nextTick
 } from 'vue'
 import {
 	onLoad,
@@ -75,267 +115,69 @@ import {
 	util
 } from '@/utils/common.js';
 
-const messageList = [
-	{
-		time: "2026-01-01 00:24",
-		content: "<p>【京东快递】快递尾号29398已放在博朗郡二期惠美家便利店，快递员电话15320547739，查看签收照片或反馈异常3.cn/2Beu-fXr</p>",
-		isMe: false,
-		simKa: 1
-	},
-	{
-		time: "2026-01-01 00:24",
-		content: "<p>啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>",
-		isMe: false,
-		simKa: 2
-	},
-	{
-		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
-	}, {
-		time: "2026-03-13 00:24",
-		content: "<p>dhhahahhahs.cn</p>",
-		isMe: false
-	},
-]
+const defaultList = defaultData
 
-// 判断消息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' || data.phone == 'oppo') 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>`;
-	});
-}
+// 与 list-index.vue 共用同一个缓存 key
+const STORAGE_KEY = 'message_list'
+let currentId = null  // 当前会话的 id
 
+const messageList = ref([])
 const showActionPopup = ref(false)
 const popupTop = ref(0)
 const popupLeft = ref(0)
 const selectedMessage = ref(null)
 
+const showEditPopup = ref(false)
+const editingMessage = ref(null)
+const editingTime = ref("")       // 完整时间字符串 "YYYY-MM-DD HH:mm"
+const editingDate = ref("")       // 日期部分 "YYYY-MM-DD"
+const editingTimeOfDay = ref("")  // 时刻部分 "HH:mm"
+const editingSimKa = ref("")
+const editingTimeMode = ref('auto') // 'auto' | 'show' | 'hide'
+let editorCtx = null // 用于保存 editor 上下文
+
+// ===== 排序模式相关状态 =====
+const isSortMode = ref(false)
+let sortingListCache = [] // 拖拽过程中的中间列表，由 ChatList emit 过来
+
+const simList = [
+	{ text: "无卡号(不显)", value: "" },
+	{ text: "卡1", value: 1 },
+	{ text: "卡2", value: 2 }
+]
+
+/**
+ * 将当前 messageList 写回缓存中对应会话的 chatList
+ * 同时更新列表条目顶层的 time（最新消息时间）
+ */
+const saveChatList = () => {
+	if (!currentId) return
+	try {
+		const cached = uni.getStorageSync(STORAGE_KEY)
+		const list = cached ? JSON.parse(cached) : defaultList
+		const idx = list.findIndex(item => item.id == currentId)
+		if (idx > -1) {
+			list[idx].chatList = messageList.value.map(m => ({ ...m }))
+			const chatArr = list[idx].chatList
+			const last = chatArr.length ? chatArr[chatArr.length - 1] : null
+			if (last && last.time) list[idx].time = last.time
+			uni.setStorageSync(STORAGE_KEY, JSON.stringify(list))
+		}
+	} catch (e) { }
+}
+
+const onEditorReady = () => {
+	uni.createSelectorQuery().select('#editor').context((res) => {
+		editorCtx = res.context
+		if (editingMessage.value && editingMessage.value.content) {
+			editorCtx.setContents({
+				html: editingMessage.value.content
+			})
+		}
+	}).exec()
+}
+
+// 长按弹出弹出层
 const onMessageLongPress = (index, message) => {
 	selectedMessage.value = message;
 	uni.createSelectorQuery().select('#msg-' + index).boundingClientRect(rect => {
@@ -364,19 +206,137 @@ const closeActionPopup = () => {
 	selectedMessage.value = null;
 }
 
+/**
+ * 编辑消息
+ */
 const handleEdit = () => {
-	uni.showToast({ title: '点击了编辑', icon: 'none' });
+	editingMessage.value = selectedMessage.value;
+	editingTime.value = selectedMessage.value.time || "";
+	// 拆分日期和时刻部分
+	const parts = (selectedMessage.value.time || "").split(' ')
+	editingDate.value = parts[0] || ""
+	editingTimeOfDay.value = parts[1] || ""
+	editingSimKa.value = selectedMessage.value.simKa !== undefined ? selectedMessage.value.simKa : "";
+	editingTimeMode.value = selectedMessage.value.timeMode || 'auto';
+
+	showEditPopup.value = true;
 	closeActionPopup();
+
+	// 如果已经初始化过了直接赋值
+	if (editorCtx) {
+		setTimeout(() => {
+			editorCtx.setContents({
+				html: editingMessage.value.content
+			})
+		}, 100)
+	}
 }
 
+const closeEditPopup = () => {
+	showEditPopup.value = false;
+	editingMessage.value = null;
+}
+
+/**
+ * 日期选择器回调 - 更新日期部分并同步 editingTime
+ */
+const onDateChange = (e) => {
+	editingDate.value = e.detail.value
+	editingTime.value = `${editingDate.value} ${editingTimeOfDay.value}`.trim()
+}
+
+/**
+ * 时刻选择器回调 - 更新时刻部分并同步 editingTime
+ */
+const onTimeOfDayChange = (e) => {
+	editingTimeOfDay.value = e.detail.value
+	editingTime.value = `${editingDate.value} ${editingTimeOfDay.value}`.trim()
+}
+
+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].simKa = Number(editingSimKa.value);
+					} else {
+						delete messageList.value[index].simKa;
+					}
+				}
+				closeEditPopup();
+				saveChatList();
+			}
+		})
+	} else {
+		closeEditPopup();
+	}
+}
+
+/**
+ * 消息互换
+ */
 const handleSwap = () => {
-	uni.showToast({ title: '点击了消息互换', icon: 'none' });
+	const index = messageList.value.findIndex(item => item.id === selectedMessage.value.id)
+	messageList.value[index].isMe = !messageList.value[index].isMe
 	closeActionPopup();
+	saveChatList()
 }
 
+/**
+ * 进入拖动排序模式
+ */
+const handleSort = () => {
+	isSortMode.value = true
+	sortingListCache = messageList.value.map(item => ({ ...item }))
+	closeActionPopup()
+}
+
+/**
+ * ChatList 拖拽排序后回调 - 实时更新中间缓存
+ */
+const onSortChange = (newList) => {
+	sortingListCache = newList
+}
+
+/**
+ * 取消排序，还原 messageList
+ */
+const cancelSort = () => {
+	isSortMode.value = false
+	// 不应用排序结果，无需重置messageList
+}
+
+/**
+ * 确认排序，将拖拽结果写回 messageList
+ */
+const confirmSort = () => {
+	if (sortingListCache.length > 0) {
+		messageList.value = sortingListCache.map(item => ({ ...item }))
+	}
+	isSortMode.value = false
+	saveChatList()
+}
+
+/**
+ * 删除消息
+ */
 const handleDelete = () => {
-	uni.showToast({ title: '点击了删除', icon: 'none' });
+	const index = messageList.value.findIndex(item => item.id === selectedMessage.value.id)
+	messageList.value.splice(index, 1)
 	closeActionPopup();
+	saveChatList()
 }
 
 const data = reactive({
@@ -388,10 +348,31 @@ onLoad((options) => {
 	if (options.phone) {
 		data.phone = options.phone
 	}
-	if (options.data) {
-		data.data = JSON.parse(options.data)
+	if (options.id) {
+		currentId = options.id
+		// 优先从缓存读取
+		try {
+			const cached = uni.getStorageSync(STORAGE_KEY)
+			const list = cached ? JSON.parse(cached) : defaultList
+			const found = list.find(item => item.id == options.id)
+			if (found) {
+				data.data = found
+				messageList.value = found.chatList || []
+				return
+			}
+		} catch (e) { }
+		// 缓存未命中时降级用内建默认数据
+		data.data = defaultList.find(item => item.id == options.id)
+		messageList.value = data.data?.chatList || []
 	}
 })
+
+const handleSend = (params) => {
+	console.log(params)
+	params.id = stringUtil.uuid()
+	messageList.value.push(params)
+	saveChatList()
+}
 </script>
 
 <style lang="less" scoped>
@@ -404,6 +385,79 @@ onLoad((options) => {
 	z-index: 999;
 }
 
+/* 拖动排序弹窗样式 */
+.sort-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 1100;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.sort-popup {
+	width: 680rpx;
+	max-height: 80vh;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 排序模式底部工具条 - 覆盖在输入框上，高度与输入框一致 */
+.sort-toolbar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1200;
+	background-color: rgba(255, 255, 255, 0.97);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 16rpx 32rpx;
+	box-shadow: 0 -1rpx 0 rgba(0, 0, 0, 0.1);
+}
+
+.sort-toolbar-tip {
+	flex: 1;
+	font-size: 24rpx;
+	color: #999999;
+	text-align: left;
+}
+
+.sort-toolbar-actions {
+	display: flex;
+	flex-direction: row;
+	gap: 20rpx;
+}
+
+.sort-toolbar-btn {
+	height: 72rpx;
+	line-height: 72rpx;
+	padding: 0 44rpx;
+	text-align: center;
+	font-size: 30rpx;
+	border-radius: 36rpx;
+}
+
+.sort-toolbar-btn.cancel {
+	background-color: #F0F0F0;
+	color: #666666;
+}
+
+.sort-toolbar-btn.confirm {
+	background-color: #007AFF;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+
+
 .action-popup {
 	position: fixed;
 	background-color: #4C4C4C;
@@ -442,392 +496,142 @@ onLoad((options) => {
 	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;
-	}
+/* 编辑弹窗样式 */
+.edit-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 10;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-// 小米样式
-.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;
-			}
-		}
-
-
-	}
+.edit-popup {
+	width: 600rpx;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
 }
 
-// oppo样式
-.oppo-style {
-	.m-t-16 {
-		margin-top: 24rpx !important;
-	}
-
-	.time {
-		color: #727377;
-		font-size: 24rpx;
-		line-height: 24rpx;
-		text-align: center;
-		margin-bottom: 20rpx;
-		margin-top: 48rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.message-item {
-		margin-top: 12rpx;
-	}
-
-	.chat-box {
-		display: flex;
-		justify-content: flex-start;
-		width: 100%;
-
-		.chat-bubble {
-			padding: 28rpx 48rpx;
-			background-color: #FFFFFF;
-			border-radius: 32rpx;
-			max-width: 600rpx;
-			font-size: 32rpx;
-			line-height: 44rpx;
-			color: #1A1A1A;
-			margin: 0 32rpx;
-			word-break: break-all;
-		}
-	}
-
-
-	.isMe {
-		.chat-box {
-			justify-content: flex-end;
-		}
-
-		.chat-bubble {
-			background-color: #00A1FF;
-			color: #fff;
-		}
-	}
-
-	.second-info {
-		font-size: 24rpx;
-		text-align: right;
-		padding: 0 34rpx;
-		margin-top: 14rpx;
-		padding-bottom: 6rpx;
-
-		.delivered {
-			font-size: 24rpx;
-			line-height: 24rpx;
-			color: #727377;
-		}
-	}
-
+.edit-header {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #333;
+	text-align: center;
+	padding: 30rpx 0;
+	border-bottom: 1rpx solid #EEEEEE;
 }
 
-// 华为样式
-.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;
-			}
-		}
-
-
-	}
+.edit-body {
+	padding: 30rpx;
 }
 
-// vivo样式
-.vivo-style {
-	.m-t-16 {
-		margin-top: 24rpx !important;
-	}
+.edit-textarea {
+	width: 100%;
+	height: 200rpx;
+	background-color: #F8F8F8;
+	padding: 20rpx;
+	border-radius: 8rpx;
+	font-size: 28rpx;
+	color: #333;
+	box-sizing: border-box;
+}
 
-	.time {
-		color: #ACACAC;
-		font-size: 24rpx;
-		line-height: 24rpx;
-		text-align: center;
-		margin: 40rpx 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+::v-deep .ql-container {
+	min-height: 100px;
+}
 
-	.message-item {
-		margin-top: 12rpx;
-	}
+.edit-footer {
+	display: flex;
+	border-top: 1rpx solid #EEEEEE;
+}
 
-	.chat-box {
-		display: flex;
-		justify-content: flex-start;
-		width: 100%;
+.edit-btn {
+	flex: 1;
+	height: 90rpx;
+	line-height: 90rpx;
+	text-align: center;
+	font-size: 32rpx;
+}
 
-		.chat-bubble {
-			padding: 38rpx 38rpx 32rpx 40rpx;
-			background-color: #FFFFFF;
-			border-radius: 32rpx;
-			max-width: 100%;
-			font-size: 36rpx;
-			line-height: 48rpx;
-			color: #1A1A1A;
-			margin: 0 32rpx;
-			word-break: break-all;
-		}
-	}
+.edit-btn.cancel {
+	color: #666;
+	border-right: 1rpx solid #EEEEEE;
+}
 
+.edit-btn.confirm {
+	color: #007AFF;
+	font-weight: bold;
+}
 
-	.isMe {
-		.chat-box {
-			justify-content: flex-end;
-		}
+.edit-row {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
 
-		.chat-bubble {
-			background-color: #0078FE;
-			color: #fff;
-		}
-	}
+.edit-label {
+	font-size: 28rpx;
+	color: #333;
+	width: 150rpx;
+	flex-shrink: 0;
+}
 
-	.second-info {
-		font-size: 24rpx;
-		text-align: right;
-		padding: 0 34rpx;
-		margin-top: 12rpx;
-		padding-bottom: 6rpx;
+.edit-input {
+	flex: 1;
+	height: 70rpx;
+	background-color: #F8F8F8;
+	border-radius: 8rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #333;
+}
 
-		.delivered {
-			font-size: 24rpx;
-			line-height: 24rpx;
-			color: #ACACAC;
-		}
-	}
+.time-mode-group {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
 
+.time-mode-btn {
+	padding: 4rpx 12rpx;
+	border-radius: 32rpx;
+	font-size: 26rpx;
+	color: #666666;
+	margin: 0 6rpx;
+	background-color: #F0F0F0;
+	border: 2rpx solid transparent;
+}
+
+.time-mode-btn.active {
+	color: #007AFF;
+	background-color: #E8F2FF;
+	border-color: #007AFF;
+}
+
+/* 时间选择器组合样式 */
+.time-picker-group {
+	display: flex;
+	flex-direction: row;
+	gap: 16rpx;
+	flex: 1;
+}
+
+.time-picker-item {
+	flex: 1;
+	height: 70rpx;
+	line-height: 70rpx;
+	background-color: #F8F8F8;
+	border-radius: 8rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #333333;
+	text-align: center;
 }
 </style>
diff --git a/pages/message/defaultData.json b/pages/message/defaultData.json
new file mode 100644
index 0000000..152d954
--- /dev/null
+++ b/pages/message/defaultData.json
@@ -0,0 +1,234 @@
+[
+    {
+        "id": 12365458895222,
+        "unRead": true,
+        "unReadNumber": 2,
+        "noNotice": true,
+        "img": "",
+        "title": "京东快递",
+        "content": "【京东快递】您的快递已送达博朗郡二期...",
+        "chatList": [
+            {
+                "id": "uuid-001-a1",
+                "time": "2026-03-15 10:24",
+                "content": "<p>【京东快递】快递尾号29398已放在博朗郡二期惠美家便利店，快递员电话15320547739。</p>",
+                "isMe": false,
+                "simKa": 1
+            },
+            {
+                "id": "uuid-001-a2",
+                "time": "2026-03-16 08:31",
+                "content": "<p>【京东快递】您的包裹已签收，感谢使用京东快递，期待再次为您服务。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-16 08:31:00"
+    },
+    {
+        "id": 12365458895223,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": false,
+        "img": "",
+        "title": "招商银行",
+        "content": "【招商银行】账户变动提醒",
+        "chatList": [
+            {
+                "id": "uuid-002-b1",
+                "time": "2026-03-15 12:00",
+                "content": "<p>【招商银行】您尾号8888的账户于03月15日11:58收入人民币90000.00元，余额965600.50元。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-15 12:00:00"
+    },
+    {
+        "id": 12365458895224,
+        "unRead": true,
+        "unReadNumber": 1,
+        "noNotice": false,
+        "img": "",
+        "title": "中国移动",
+        "content": "【中国移动】流量使用周报",
+        "chatList": [
+            {
+                "id": "uuid-003-c1",
+                "time": "2026-03-14 09:00",
+                "content": "<p>【中国移动】截至14日09时，您本月已使用通用流量18.5GB，剩余3.2GB。</p>",
+                "isMe": false,
+                "simKa": 1
+            },
+            {
+                "id": "uuid-003-c2",
+                "time": "2026-03-14 18:30",
+                "content": "<p>【中国移动】流量包订购成功！您已成功领取5GB周末流量包，立即生效。</p>",
+                "isMe": false,
+                "simKa: 1"
+            }
+        ],
+        "time": "2026-03-14 18:30:00"
+    },
+    {
+        "id": 12365458895225,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": false,
+        "img": "",
+        "title": "验证码中心",
+        "content": "【抖音】您的验证码是 882931",
+        "chatList": [
+            {
+                "id": "uuid-004-d1",
+                "time": "2026-03-16 01:10",
+                "content": "<p>【抖音】验证码 882931，用于手机绑定。5分钟内有效，请勿泄露给他人。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-16 01:10:00"
+    },
+    {
+        "id": 12365458895226,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": true,
+        "img": "",
+        "title": "美团外卖",
+        "content": "【美团】订单配送通知",
+        "chatList": [
+            {
+                "id": "uuid-005-e1",
+                "time": "2026-03-15 18:30",
+                "content": "<p>【美团】商家已接单，骑手正在赶往商家，请耐心等待。</p>",
+                "isMe": false,
+                "simKa": 2
+            },
+            {
+                "id": "uuid-005-e2",
+                "time": "2026-03-15 19:15",
+                "content": "<p>【美团】骑手已送达！祝您用餐愉快，给个五星好评吧！</p>",
+                "isMe": false,
+                "simKa": 2
+            }
+        ],
+        "time": "2026-03-15 19:15:00"
+    },
+    {
+        "id": 12365458895227,
+        "unRead": true,
+        "unReadNumber": 3,
+        "noNotice": false,
+        "img": "",
+        "title": "建设银行",
+        "content": "【建设银行】还款提醒",
+        "chatList": [
+            {
+                "id": "uuid-006-f1",
+                "time": "2026-03-10 10:00",
+                "content": "<p>【建设银行】您03月信用卡账单已出，应还款额为￥3,200.00。</p>",
+                "isMe": false,
+                "simKa": 1
+            },
+            {
+                "id": "uuid-006-f2",
+                "time": "2026-03-13 14:00",
+                "content": "<p>【建设银行】温馨提醒：您的账单将于3天后到期，请确保扣款账户余额充足。</p>",
+                "isMe": false,
+                "simKa": 1
+            },
+            {
+                "id": "uuid-006-f3",
+                "time": "2026-03-16 09:00",
+                "content": "<p>【建设银行】扣款成功。感谢您使用建设银行信用卡。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-16 09:00:00"
+    },
+    {
+        "id": 12365458895228,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": false,
+        "img": "",
+        "title": "12306",
+        "content": "【12306】购票成功通知",
+        "chatList": [
+            {
+                "id": "uuid-007-g1",
+                "time": "2026-03-11 11:00",
+                "content": "<p>【12306】订单EG12345678支付成功。北京南-上海虹桥，03月20日14:00开。</p>",
+                "isMe": false,
+                "simKa": 2
+            }
+        ],
+        "time": "2026-03-11 11:00:00"
+    },
+    {
+        "id": 12365458895229,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": true,
+        "img": "",
+        "title": "腾讯科技",
+        "content": "【腾讯科技】安全提醒",
+        "chatList": [
+            {
+                "id": "uuid-008-h1",
+                "time": "2026-03-13 22:30",
+                "content": "<p>【腾讯科技】您的QQ账号在异地登录，登录地点：广州。如非本人操作请及时改密。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-13 22:30:00"
+    },
+    {
+        "id": 12365458895230,
+        "unRead": true,
+        "unReadNumber": 1,
+        "noNotice": false,
+        "img": "",
+        "title": "菜鸟驿站",
+        "content": "【菜鸟驿站】取件通知",
+        "chatList": [
+            {
+                "id": "uuid-009-i1",
+                "time": "2026-03-16 10:15",
+                "content": "<p>【菜鸟驿站】您的中通包裹已到达。凭取件码 8-2-4002 领取，地址：博朗郡东门。</p>",
+                "isMe": false,
+                "simKa: 1"
+            }
+        ],
+        "time": "2026-03-16 10:15:00"
+    },
+    {
+        "id": 12365458895231,
+        "unRead": false,
+        "unReadNumber": 0,
+        "noNotice": false,
+        "img": "",
+        "title": "阿里云",
+        "content": "【阿里云】资源包即将到期",
+        "chatList": [
+            {
+                "id": "uuid-010-j1",
+                "time": "2026-03-12 09:00",
+                "content": "<p>【阿里云】尊敬的用户，您的OSS存储包将于7天后到期，请及时续费。</p>",
+                "isMe": false,
+                "simKa": 1
+            },
+            {
+                "id": "uuid-010-j2",
+                "time": "2026-03-15 15:00",
+                "content": "<p>【阿里云】续费成功。您的OSS存储包有效期已延长至2027年03月。</p>",
+                "isMe": false,
+                "simKa": 1
+            }
+        ],
+        "time": "2026-03-15 15:00:00"
+    }
+]
\ No newline at end of file
diff --git a/pages/message/list-index.vue b/pages/message/list-index.vue
index 2f60a02..af9f725 100644
--- a/pages/message/list-index.vue
+++ b/pages/message/list-index.vue
@@ -1,20 +1,78 @@
 <template>
 	<view>
-		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
-			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick"></MessageList>
+		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll" @add="openAddPopup">
+			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick" @delete-item="deleteItem"
+				@edit-item="editItem">
+			</MessageList>
 		</MessageNavBar>
+
+		<!-- 添加短信弹窗 -->
+		<view v-if="showAddPopup" class="add-mask" @tap="closeAddPopup">
+			<view class="add-popup" @tap.stop>
+				<view class="add-header">{{ editingItem ? '编辑短信' : '新建短信' }}</view>
+				<view class="add-body">
+					<view class="add-row">
+						<text class="add-label">头像URL：</text>
+						<view class="image-box" style="width: 84rpx;height: 84rpx;" @tap="selectImage">
+							<image v-if="addForm.img" class="image w100 h100" :src="addForm.img" mode="aspectFill">
+							</image>
+							<image v-else class="image w100 h100" src="/static/image/phone-message/add.png"
+								mode="aspectFill">
+							</image>
+						</view>
+					</view>
+					<view class="add-row">
+						<text class="add-label required">联系人</text>
+						<input class="add-input" v-model="addForm.title" placeholder="请输入名称或号码" />
+					</view>
+					<view class="add-row between" v-if="data.phone == 'iphone'">
+						<text class="add-label">取消通知</text>
+						<switch :checked="addForm.noNotice" @change="addForm.noNotice = !addForm.noNotice" />
+					</view>
+					<view class="add-row between">
+						<text class="add-label">是否未读</text>
+						<switch :checked="addForm.unRead" @change="addForm.unRead = !addForm.unRead" />
+					</view>
+					<view class="add-row" v-if="addForm.unRead && data.phone == 'oppo' || data.phone == 'huawei'">
+						<text class="add-label">未读数量</text>
+						<input class="add-input" type="number" v-model="addForm.unReadNumber" placeholder="请输入未读数量" />
+					</view>
+					<view class="add-row" v-if="addForm.chatList.length == 0 && editingItem">
+						<text class="add-label">消息时间</text>
+						<view class="time-picker-group">
+							<picker mode="date" :value="addForm.date" @change="onAddDateChange">
+								<view class="time-picker-item">
+									<text>{{ addForm.date || '选择日期' }}</text>
+								</view>
+							</picker>
+							<picker mode="time" :value="addForm.timeOfDay" @change="onAddTimeChange">
+								<view class="time-picker-item">
+									<text>{{ addForm.timeOfDay || '选择时刻' }}</text>
+								</view>
+							</picker>
+						</view>
+					</view>
+				</view>
+				<view class="add-footer">
+					<view class="add-btn cancel" @tap="closeAddPopup">取消</view>
+					<view class="add-btn confirm" @tap="confirmAdd">确定</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
 import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
 import MessageList from '@/components/message/list/list.vue'
+import defaultData from './defaultData.json'
 import {
 	ref,
 	reactive
 } from 'vue'
 import {
 	onLoad,
+	onShow,
 	onPageScroll
 } from "@dcloudio/uni-app";
 import {
@@ -22,99 +80,7 @@ import {
 	util
 } from '@/utils/common.js';
 
-const defaultList = [
-	{
-		id: stringUtil.uuid(),
-		unRead: true,
-		unReadNumber: 100,
-		noNotice: true,
-		img: "",
-		title: "系统通知",
-		content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
-		time: "2026-03-11 08:31:00"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: true,
-		noNotice: true,
-		img: "",
-		title: "12306",
-		content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
-		time: "2026-03-10 14:30:00"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: false,
-		img: "",
-		title: "支付宝支付",
-		content: "支付成功，您在XX超市消费了 45.00 元。",
-		time: "2026-03-10 18:20:15"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: false,
-		img: "",
-		title: "花呗提醒",
-		content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
-		time: "2026-03-09 09:00:00"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: true,
-		noNotice: false,
-		img: "",
-		title: "顺丰速运",
-		content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
-		time: "2026-03-01 10:15:22"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: true,
-		img: "",
-		title: "蚂蚁森林",
-		content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
-		time: "2026-02-28 07:45:10"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: false,
-		img: "",
-		title: "余额宝",
-		content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
-		time: "2026-02-27 06:30:00"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: false,
-		img: "",
-		title: "10086",
-		content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
-		time: "2026-02-26 15:10:45"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: true,
-		noNotice: false,
-		img: "",
-		title: "饿了么",
-		content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
-		time: "2026-02-25 12:40:33"
-	},
-	{
-		id: stringUtil.uuid(),
-		unRead: false,
-		noNotice: false,
-		img: "",
-		title: "淘宝通知",
-		content: "您关注的商品降价啦，快来抢购吧！",
-		time: "2026-02-20 20:55:12"
-	}
-]
+const defaultList = ref(defaultData)
 
 const data = reactive({
 	navBar: {
@@ -125,26 +91,27 @@ const data = reactive({
 	isScroll: false
 })
 
-const options = [{
-	text: '取消',
-	style: {
-		backgroundColor: '#007aff'
-	}
-}, {
-	text: '确认',
-	style: {
-		backgroundColor: '#dd524d'
-	}
-}]
+const STORAGE_KEY = 'message_list'
 
 onLoad((options) => {
 	if (options.phone) {
 		data.phone = options.phone
 	}
+
 })
 
+onShow(() => {
+	// 优先从缓存加载列表
+	try {
+		const cached = uni.getStorageSync(STORAGE_KEY)
+		if (cached) {
+			defaultList.value = JSON.parse(cached)
+		}
+	} catch (e) { }
+})
+
+
 onPageScroll((e) => {
-	console.log(e.scrollTop)
 	if (e.scrollTop > 60) {
 		data.isScroll = true
 	} else {
@@ -152,8 +119,153 @@ onPageScroll((e) => {
 	}
 })
 
+/**
+ * 删除元素
+ * @param item 
+ */
+const deleteItem = (item) => {
+	uni.showModal({
+		title: '提示',
+		content: '确定要删除吗？',
+		success: (res) => {
+			if (res.confirm) {
+				defaultList.value.splice(defaultList.value.findIndex(i => i.id === item.id), 1)
+				uni.setStorageSync(STORAGE_KEY, JSON.stringify(defaultList.value))
+			}
+		}
+	})
+}
+
+/**
+ * 选择图片
+ */
+const selectImage = () => {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['original', 'compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			addForm.img = res.tempFilePaths[0]
+		}
+	})
+}
+
 const itemClick = (item) => {
-	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&data=${JSON.stringify(item)}`)
+	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&id=${item.id}`)
+}
+
+// ===== 添加短信弹窗 =====
+const showAddPopup = ref(false)
+const addForm = reactive({
+	title: '',
+	img: '',
+	content: '',
+	date: '',
+	timeOfDay: ''
+})
+
+// 弹窗模式：null=新增，有值=编辑中的条目
+const editingItem = ref(null)
+
+const openAddPopup = () => {
+	// 重置表单，默认时间为当前
+	const now = new Date()
+	const pad = v => String(v).padStart(2, '0')
+	editingItem.value = null
+	addForm.title = ''
+	addForm.img = ''
+	addForm.content = ''
+	addForm.unRead = false
+	addForm.unReadNumber = 1
+	addForm.noNotice = false
+	addForm.chatList = []
+	addForm.date = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
+	addForm.timeOfDay = `${pad(now.getHours())}:${pad(now.getMinutes())}`
+	showAddPopup.value = true
+}
+
+const closeAddPopup = () => {
+	showAddPopup.value = false
+}
+
+const onAddDateChange = (e) => {
+	addForm.date = e.detail.value
+}
+
+const onAddTimeChange = (e) => {
+	addForm.timeOfDay = e.detail.value
+}
+
+/**
+ * 编辑元素：回填表单并打开弹窗
+ */
+const editItem = (item) => {
+	editingItem.value = item
+	const lastMsg = item.chatList && item.chatList.length ? item.chatList[item.chatList.length - 1] : null
+	const timeStr = lastMsg ? lastMsg.time : (item.time || '')
+	const parts = timeStr.split(' ')
+	addForm.title = item.title || ''
+	addForm.img = item.img || ''
+	addForm.content = ''
+	addForm.unRead = !!item.unRead
+	addForm.unReadNumber = item.unReadNumber || 0
+	addForm.date = parts[0] || ''
+	addForm.timeOfDay = parts[1] || ''
+	addForm.chatList = item.chatList || []
+	showAddPopup.value = true
+}
+
+const confirmAdd = () => {
+	if (!addForm.title.trim()) {
+		uni.showToast({ title: '请输入联系人名称', icon: 'none' })
+		return
+	}
+	console.log(addForm)
+	const time = `${addForm.date} ${addForm.timeOfDay}`.trim()
+
+	if (editingItem.value) {
+		// ===== 编辑模式：更新已有条目 =====
+		const idx = defaultList.value.findIndex(i => i.id === editingItem.value.id)
+		if (idx > -1) {
+			defaultList.value[idx].title = addForm.title.trim()
+			defaultList.value[idx].img = addForm.img.trim()
+			defaultList.value[idx].unRead = addForm.unRead
+			defaultList.value[idx].unReadNumber = addForm.unReadNumber
+			defaultList.value[idx].noNotice = addForm.noNotice
+			defaultList.value[idx].time = time
+		}
+	} else {
+		// ===== 新增模式 =====
+		const newItem = {
+			id: Date.now(),
+			unRead: addForm.unRead,
+			unReadNumber: addForm.unReadNumber,
+			noNotice: addForm.noNotice,
+			img: addForm.img.trim(),
+			title: addForm.title.trim(),
+			chatList: addForm.content.trim() ? [
+				{
+					id: stringUtil.uuid(),
+					time: time,
+					content: `<p>${addForm.content.trim()}</p>`,
+					isMe: false
+				}
+			] : [],
+			time: time
+		}
+		defaultList.value.unshift(newItem)
+	}
+
+	// 按最新消息时间降序排列
+	defaultList.value.sort((a, b) => {
+		const timeA = new Date(((a.chatList && a.chatList.length ? a.chatList[a.chatList.length - 1].time : null) || a.time || '').replace(/-/g, '/')).getTime()
+		const timeB = new Date(((b.chatList && b.chatList.length ? b.chatList[b.chatList.length - 1].time : null) || b.time || '').replace(/-/g, '/')).getTime()
+		return timeB - timeA
+	})
+	try {
+		uni.setStorageSync(STORAGE_KEY, JSON.stringify(defaultList.value))
+	} catch (e) { }
+	closeAddPopup()
 }
 
 </script>
@@ -209,4 +321,126 @@ page {
 		margin-right: 30rpx;
 	}
 }
+
+/* ===== 添加短信弹窗 ===== */
+.add-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 999;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100vw;
+	height: 100vh;
+}
+
+.add-popup {
+	width: 88%;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	overflow: hidden;
+}
+
+.add-header {
+	padding: 36rpx 40rpx 20rpx;
+	font-size: 34rpx;
+	font-weight: bold;
+	color: #1A1A1A;
+	text-align: center;
+}
+
+.add-body {
+	padding: 8rpx 0;
+}
+
+.add-row {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 32rpx;
+	gap: 16rpx;
+}
+
+.between {
+	justify-content: space-between;
+}
+
+.required {
+	position: relative;
+}
+
+.required::before {
+	position: absolute;
+	left: -10px;
+	content: '*';
+	top: 0;
+	color: #EA0000;
+}
+
+.add-label {
+	font-size: 28rpx;
+	color: #1A1A1A;
+	width: 150rpx;
+	flex-shrink: 0;
+}
+
+.add-input {
+	flex: 1;
+	height: 70rpx;
+	background-color: #F6F6F6;
+	border-radius: 14rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #1A1A1A;
+
+	::v-deep .uni-input {
+		color: #aaaaaa;
+	}
+}
+
+.add-footer {
+	padding: 32rpx 24rpx;
+	display: flex;
+}
+
+.add-btn {
+	flex: 1;
+	height: 90rpx;
+	line-height: 90rpx;
+	text-align: center;
+	font-size: 32rpx;
+	background-color: #F1F1F1;
+	margin: 0 16rpx;
+	border-radius: 12rpx;
+}
+
+.add-btn.cancel {
+	color: #767676;
+}
+
+.add-btn.confirm {
+	color: #fff;
+	background-color: #1777FF;
+}
+
+.time-picker-group {
+	display: flex;
+	flex-direction: row;
+	gap: 16rpx;
+	flex: 1;
+}
+
+.time-picker-item {
+	flex: 1;
+	height: 70rpx;
+	line-height: 70rpx;
+	background-color: #F8F8F8;
+	border-radius: 8rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #333333;
+	text-align: center;
+}
 </style>
diff --git a/static/image/index/qita/msg.png b/static/image/index/qita/msg.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3a0f02de723afe6085dac93dd6ee4b72601f20e
GIT binary patch
literal 8779
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
Bux9`O

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/add.png b/static/image/phone-message/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..c84cc7b59aad7a09a4da31730b009a585d604d2c
GIT binary patch
literal 1696
zcmYL|2~ZPf6vqS9qEbKsi-V;d?|Oka7OWtbC_$}Kjsl`cy}(k6r5KI?9tdQUO&~z-
zV-s@_QxM4k5e1}n6vrwBqgJ_uDo8nkFbs#-^sTh^H@_tFC2!yNe_wWy(EY)-3tbix
z2n5>@Vo(@-=HjpUR`CAlZDbvRV5tw?7qJVLX0!PmjyW<?4J4P$QG?)!M51a@^{*((
z<0-XD+(s&uMP*@_T92t4DReHK&K1eDGL<2pT1GA6iDeqG%20^1&|(%Q*I=qz1Svrf
zj#Ocgstp$@EDFjJDK#QxZ6U1`lWDQ?+Cpf^U<qY<OsUVOlu&4Fp-d+!H&9SEwTO$!
zby8(b0kxD;#1$$ulJXh~T1G|L5~WU}G*D<Ps1Ylmz7|1Q2!kV0)=+3=2wVsSb4ehT
zTrX8!gN6v5jVWuSs@ejy4570yg$^sPfdCK~p>wDV*iMfrw9rkWf`l*;SFF@Yp%0Bk
zE9SwZB83)~Fa?FqmMCf<5At7IxC*v_FX2L35l<x7T*90DpRfReF*tK+p#$s)0U$8c
z<7EskjRCW0AvXL9%el&T-T1U(zDQOrh2x^(X9&CF^U~RKWiS*ZfdF%@@B);L*Whws
zQ-r~VN*D+JBgjT8!W*K+0+cDBGlldLP{aUBK{2BgD+0?vNihqQGTGpz5{|5d3(8Az
z6{S2y8BbZp2g_NY093I-;bji4nj->#=8C}zE>^+At>jCt@Fi6ODR@<I>8cR7S||fG
zB3!LVt`+0zV0=u0-xcqtgOi8bb;n}rdbn`~X<_@r2^N-?R#w*5*0z8XuoQ3ywg6uM
zo`4VF@9$3p_5#U38gL$<0Vs+V0V==%)B$(?r5SjD(++e10|SG=5HJjk0aNdo1>WNP
z{hsp^JD<RFW)2Aoh)C=j7PK623~;*B=<TYrJe5RS7aH>D*$-`2J@VzMwf4eo15J5x
zXo92TTfbQ=A7;ku#4ratq0^36=Utq_5;qzAhwV4{#k!>XY&5zwtvS5CrEYx8uCtTm
zn`63vBlEgeCjGjje&lrgO~*QVDaZMCUzS^J`{k`-ql@q4?wMa&uP2u8%U%DXZ$oge
z`yoG5V;*Vm(K8;rnb+1`<TFFQFPgQyYnmzB?j;YgK(Wsu;v)jVZE&h>DluY3T$=Nq
z#?iyhYd^g!Uzt@|*6nFO%FiA5SamN^Dzv^y$e8%ng80}lQe7ub`rg55EZ*g`MK!Y6
zA=@Loz-DCG0phErF?*hD>#dVC9s9iG_((j3Vs{o3Onh+rWjc9pN<Mj8kwDTL-1&^v
zFDWH&Boc$qP1wxe;`%%;U`eJ$Ml_{udU-O_!QM@XCY;tyTuAN6vsuI-2Yf=_eaic0
zNKV!5oWWE(Lb2)4pts+^!k5|9im3G5!I+kdYYs-*q?FG)Y3gp*AF=i6KUk#^=N(J=
zZc*i50gtt<mTSMtQV(9%$%Lk$ey>WSn^)3`)LDfw#F*u|a{TO*EK=5L4{^uzedUY%
zKivliqqXi^F;o8VbX?kKc1k}pv2%van)*1L#aA06YPo7-TJ(^sXgsndD#nD>-$@!A
z&lYU><C`Jx^m&5q1Ei6#w%BEjJD3W&-Pz2*dcC|N>OoXBhi(q!ow053BsP0R^V%j)
zGz2`I^o(YXowzH!hfX&Knlt&4VQH@BWAx$Uw(8~-HYr9Qx@8{G*c|yKJE}LR;fT=s
z*2v&iy6NHFoXznk*dO|7j}H^?MHL#-x>HtnMQoaF=o{dOf9&h3>WTM$K3V1abXi0R
z@>>tdpWB_9aO1E;5BamWllvqM&Oecp!Z{QyE1}i?^~u)g$v3N-wBc1B(YmhMa(5L>
z#2;vXnjc0Y>2r;S1v3#o8J@nscP+?W7aQGmi<$8}&CA~UO?_S$DZ(@9CH-iPCN|k;
a+Ht`ChJI(&W(1yCLddTDL01CfFZ=^wsGZ;d

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/send.png b/static/image/phone-message/iphone/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a971ddb48908e6cceb923e4d12b5bdf0254cecb
GIT binary patch
literal 1368
zcmY+EX;70_6o!LT%Th!TA_Wx`WQhnWi9`W0vWXB3n}no<vLibI3NkK%N(CVUDvJsu
ziwZ+q1PdtpB1=};M1>?6BSK6N34su3wtjK^(>u>S_nh~<XYP+Xa|=*D9$FfP8Xyoz
z%k!M8A8`68x0)&tJJTm@K_Ha^ly`s|P%4)KfM7?Db{Gz~>kd3Q8hG+epk05k9X<Hi
z%fM5UA#f5JHslAR2H61#6>U$)z^K7c8U{*3Ln-JJlwcSM3!`G8WXuW5w-%s~0RVF_
zloAXjD}hllfEkFeZysf$6oX-a`G26520;1V0?Kc>a!~06uCS+I;8d&w4d+M;JxvR9
zriZ(}igF)|^%{@&9#23{B>Ideq9&426Dj_a_y8qofdEr!nAe%O>Fi7IZY0g*r_SC=
zXArZPC6}4Eud+(7&z0YJ|A5G;E#W+_S$y`0+gi_U|C86*!tZNedfD}5w0oH}DwvpF
zV@|KJ-mJ6UuFuViJ}^WarijDdSYV46K8P1Tin$-fpFeH#7L@Q8H<y+rf)$ByO)6TK
zZiuAf4cVqxwk45Eq;jcDE|V!_a)n%>P;l5Tv%o_*r2F~!gH%+uZP(J))z#C}2b&y(
z*`Gon(cux1QBl!^oPv_ukLnxRpLcfm^bbx=&9Oi8gd)+#*1r;oOeRl5MrwmVsxF?c
zhye7^$i1zg-N$y3Oc(f`Jj7p4PcnIK6;q~!eEk;uMaKcnX+M30Ys*2CnSNGccj<Gp
z*)Mk**ww;+?vB%XkkQ9gL5MjSrgwy=PU=V~FU)iDDa0|~X+?V0+MVo~)JyP(@H6hE
zYw+3-nP#_h)S`5C#5K@zszI)6UJ)PLcJ#^YI6@~i=fI(Ti6(FjE2!b#T`?J#zC@Jx
zMf`@WP#gQ;<r4Sg>JA~NWi$<yi%&hwnOL8JTl!Wt{phijai})(P)M%<LjW(WUF|-H
zEA|2txt+V@kOWUle@~`J5w=j1kotD)b$tGik!4b>^SEK?SM!dl3$OoZZQu|~pTC&P
z7CMDo3u;VoGH0{Pvub|QMHV^);vC%Sd<78P{Q{lFEL77Hfo!y|tEd6uOi9XUhQub9
zMeadq!cBQ({YvOV4~B7!UdjQD3)`<(d+Q2smb41McjL?ADk1Sd;GFucSTigBOZ%V?
zU!2Z^Wxjj*)FyY1nSmkRoC|d&&3mh3E{sT#_ck;0O<k57^ZS4Hu>ZVvUJx)GnruAb
zKH?~ISxyenT(|mE!9_B*8mftdtK2p76)U{&d2MU5_F>7ZrqV(W;-K#{RuwDctW7J(
z0)K6O9iO})m4-!R!K-aUzpkXKcGA@y$y*gM+nNFhL2$ICdJns~gyv{cRCRsTOVD<7
z@>Zp#ntZ>ri;d>*2Ka0B>4UbXm}6`6;Jr7tmKlAv=k3T*#|Y{^g_RPE?&g><i=AVA
zTX<n&n$GUWXTWI@^;~fD%HR?lE=vhZGHkUh90_Su_3#6ySf}n?3?dJY45)dr)D{hB
z!<Ua%c$<$EsH+@L1^+_0lQ*xbXMTnHa+TA{rtRb|lN$E(Ixze}3wKHfCfw|CVq-@(
z!`u;K_K{z#F?H9&FbO3^n5*omyKLh(|6trLgAgk|L+%V++5Jii>1sG}g*|Z9<i!qp
zTi(DFDf>XnS*%)qnN{(7`DS0ccSwDUO&z)-t4I?C`r2Y$e1FeM5mr-ZWIWWXs5>&$
zb!k{p%(TX0{x(XYGjob6%ZL}_&h(V=?GHB^^~SBbH}e(kwX^mVEN0Vm{fM;R*k+zl
TmYAKX{2x8td|aQN{WbSL!eqO}

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/mic.png b/static/image/phone-message/mi/mic.png
deleted file mode 100644
index f99b9a26ac0443ae003fcf7d57d020c6913a6fde..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2200
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
adjNVDMTVB0mWu@55|A;<!l34oOU!@b2!J&J

diff --git a/static/image/phone-message/mi/send.png b/static/image/phone-message/mi/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a40d99b4d03edb2e6689d9b0abb18956ae7755e
GIT binary patch
literal 1796
zcmYjSc{rQd9uA>(sijvJOFP;b;ns~Ysw50!U(yF@Q6f}rNyJVqwN))aiYi4%(@uw}
zu{M-i+oE<#Ng{+OwZ)!NBqfr}XP)OS&-0%5oOe0D^T+qcN4#clEiI`e2?Bwn5jGYM
zz#e$CB)|YSH<t-PAd${%woaCS1OcM*#ti_%8z$}dbcV11bO-$b)*tmV_~@fY@zwp{
z4I9D1#&HH8d<-Z)`c$m$2nIHag^l?GDG<R&FnUz10R;!6;q(Deju=kyg8|N{AAA%G
zIB*IUK6=FZR2(o_pK=7i0V1FV|GRKB6F3~z{s$Ov@xPJ^l>bluJpo9M9{P_DjQyF4
z|C#D<NcA_O2K+(|G^POvGNA>T(t^!sAr@nyR%78d^xFt}gxz?w{rDZniFov6lG|jG
z`(*OX$rR72G%selH#6ObnSo&vG1J80PY=Up9!1U;#(sW6m@m1%Semt1mc3M-$Eq$^
zCKoQ(kXGtQEA>xT>Wf#KD%abpHriiqbkuHiz1r+*WcRhO2U@=jwrzcE-x}%I8tLAq
z_H0x8zK%_C=BK%fpSVk(zb!BAue0_yHh5c`ylpn`>lfb67H?<!aCh&JyT|8p_}{qv
z{eAwyq2TaPz~=)H3WP$T-9^h{;3HZ^IM_RaM8IIMn7FKhqO!`x?;#K<RMWuJ)C}o{
z^N)y#i6Nw=Kgc0fRM*tkH@Cj)9T*y6%r2~~vcK%?ak=~Z2Rz>4AzvV{V!u@cfyAm1
z7N$;qGd)l6x8xCW>2CU>Daj^sHmB0WBqUYk*d%G&q<Qh?8E(R>`+aL`v2&6Zmf7&x
ziHk<514%cHXf$4;d1p=K^IcmNI^9yjdH=i8p>?UWPRfjzoiaN+&D`{PlkN7R{Ckb+
z@`@1lN(yu@^2)@7(<w=dO9Br0u5@GW_$;06(!GnQ2v$7)XRoZ&zwLQ0s0u49ky1(q
zdR4+@X3R*$ucwtXxS1z;6%6jENHW1Eop(muRA*dU7X0(>_)Nb9gKFcerGmG<-lfVI
z_cf=;$e?blE5Jul0jHG;T$q0({eU-Wh=CVcpBL>@axhYG4qLb&G3x1~O=@_fdCcro
z0CU)T)1W-*0{(ck_5tKUgDEd)_C8ar?gW|{GD9lUK4x}0U^>c{RgrQ5m9iGK^D;^z
zHK1IN8;hcYe=IN4m@sf1t85XWp)<oflzKZ(XX`F9+ST4e?68|5kdvWyxmoYt{2ttG
z#ON37Hotf+@9u=dD?veIjfZDcWSXUv89u}~QnUNA08P~T7}jznsAsU?li`E<oc8tD
z`2lDSG8$9qqcP%bymO^k`KsabIadLFn0(3bcHjZ$tWiZx^q(=TDOOQsY<|}|%lgw;
zpWC_MKj>=JgsxS0cjW5MX_-DS%ki9bob5ALswUb%hY)qXY=n{{j4AV|ar0UaK`tcl
z2VOBAMBm|<BWVXxZ$o&!cdA!9pQyx@<5uUws-s;9B2}x_Xq7get}<uym#Egg35AyY
z*uX2Hk%UGejK3qxuaA{hRvBBCN9u%M@Nh4!SzR(L9cn*7;2-Cj*G-z|%RF73jLzR?
zLq}yp=fM1}IZ-k}hLFEk3|+oOHEoX#^Ox6)EaL1fSH(EVCt$iWFB|%|l^0a?o|Qiq
z8bpszP`{RahbZe4wV2!TZN?~&Fgz`^GS>R;{p<N3OjGH_aRIDqgJaGL=U}**sdwfX
z*kskz+E&4($;BMp?)sS%pT!dj0$_5(sW!g`MG$4)>`j!_d6msNOeH>MY^Eae@wWvD
zy-Fd3Qce;?PxET5tD3s7^kvUTkf2Wz-2AoZZsLx5RjJ42q02G(zw^G@^-HI?MSQV`
z)}ocvh6-}Y8MlIwA;(E==4V$hthN3$P4z^M<A?d*L{f^D2R`;q{>1We{|S8{U?@Sb
zot_+`*CUj#u@wtc<d&snY?GN-?};E0^f@4+Xj7dR+*11y`V=$^O%{7^R!%_4K{J@%
z-5v4$!;TU|nbJ~X9a*&?<t=!+qKK?s{%si@GyV97YjTYzU(9!fq}OI|krq7XP81rV
zw$2qj?Z~rMt3%2RA#++1`|lO?xs$<fgHV~z#!~H28oI?6)9IyoKN8kbnYBbG1ES7#
z?D58ee=XRFOx<&Jxc78m7~_=xYvDAs=~?4V6HB7A_=ft6u<Iq3ivPezJ8njb3uht8
z)9WW&&Kif;ynf*^j(C@*>RUD><y_&?7p~Q_<iY)*>HE;F<YLn|i(uDm?OD|`Ck8YL
zdG3plhWKHGm&dd0PQw;RdU)m~%wysc@!AYpNrotD$F>3KfUnst!CYTrw1c)Q;s)J{
RVdSIV8N$-uf^6oQ{1+RfqCNls

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/unsend.png b/static/image/phone-message/mi/unsend.png
new file mode 100644
index 0000000000000000000000000000000000000000..71cad303fbcc884e8540c4117c5e599d78fa54b2
GIT binary patch
literal 1651
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

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/ka2.png b/static/image/phone-message/oppo/ka2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a3d14eeb8deb81ad42d3d6c7300715110d49815
GIT binary patch
literal 915
zcmV;E18n?>P)<h;3K|Lk000e1NJLTq001BW001Zm1^@s6pDFm60009>Nkl<ZcmeE|
zUr19?9LK-sZnbHWo2EFOGXE7pphiI;p=G6H4?RQ>6c|JZ1{PR?1X2&8l|A$pQWhFM
zEK)Lzrpv;@9-_iX2(h40EAnp!Dx0TsZtkD$?w+~LUL5Cl&+q<z=l;H*b9V08B&d9n
z9vdtso57lFGfpz2p_<8N{AKDkv?tnQGr4p?04A0%Nu-Z}9ASeE%tCGih#{05);Ohi
z96}KwsoPizpa%qI)`z`u5RHRe^9#UcUQH<NV5)j%5o?5yLSKMhXp^59uL7tiAX?T(
zx*0qG&Cr_`jGb)Bt0JxHU0()>>xwcbrx<$)L5X*AHGGMS>ood4Cbo;&sy9ie)zz|@
zTUK3pNl*eMhnD>R(n)OgNx>=?Cmcj;o)v?IpE0t30`Cika5uLNh4DqfmV&$qMW50T
z4eGZx;&yH;_G~Ib?7CR_(YW>T*q2a@d)uwJmD2*9q?6+!m!JS@vTAX{d@^9&lEhL5
z(Hd}!cTyODFK@Z!jQ6u}P={<jL3YDe=eW6ydFo9V;6hf7yBZg+8mz?Tr>V%Wn{f6+
z1?HS{?mTynCLiOSstE%$4mV(IZd5K<H*^_oBQ2O;oQIP-VI6J5mEk%$=ep!<%yYQ`
zdtm_kPaF33=cD;c6YhL%`lo3B<O`peR`91p7=TxwaZKal$7*@z{NCG^@BE2{aqqOE
z9~6LM6_(f?SIDlO);n(Z+ywB#0+1P<jS5Spj||@<J^_WBkO30bC&~wqUgP=i(l`Db
z{gW>hBz?mn0hslvXy4g|)TlIfRsN=&W3Qz<pyI3;fQ#SX(TViv47UV73r-J|VQl{I
z>*`Jfa8?B168D}t*Er7(r#I8Dxhrfz11O0%vV-cuH><F)YhX|SO5%^cKg9J<4X&C&
z^}+y_sC4k}eEG8fcFba6<}FU8mHRa{8exDN+iv>oc30sI+8ESi*W%KaI=|)`r_>7r
z=r!VhGL*#p#f1U<JsgghFu;LV1xV?R3)<8mg#pwGDdpATYXEC2z*k^OZKFggPk~v9
zQu-`X0;+Wh?U9^XT16R&>fkUB;F?Z}R!KjKriY!H#av2g2M>l>$6vWAw(1>RlWYG0
p00960{o7I;00006Nkl<Z0{}I+5Se+)_2d8m002ovPDHLkV1lQDs$c*B

literal 0
HcmV?d00001