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] =?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
zcmV-RBDCF!P)<h;3K|Lk000e1NJLTq0058x0058(1^@s6=SJeV001HqNkl<Zc-rlq
zX;4&G+Q)mQGF6kBFH<%1VXCHTzP=w)c_+yv^Cpu_k})$AMa3P(eOKJ~C2pvoqT+%p
z?pxdi5do1^#RU*h1QnEh-*;%B;d%ehy{F;QeOoa?1Ksyl{VTD7?sK2>JJ0i+=bU?5
zr|V@G5q$vt9{NjTW8+79y?zih7dqC|)N~K8#X!0EcM1O60#P4Vi@29uC>i${+R)H&
zq`A3yDc?I@`<QJZZ1RClyHuh1O<i5x=LUme9E`RTM)QSIA-xR%^1jjwTllhV*hXwC
zwwVSF(H}9=mcuZSP(F-QqXF|))d*X~!duO&udn~JJpuD8cEy0^TNvOPRILH=-l|5(
zI}5M$X?1n=A7I~K+ax?ZQZQnsi15^)b$r(fwynf}gYe%uHszH#@#CAq&80xKT4#5=
z>Y*gIIc)!7p9QC|u<&;n318tx!n989F|QO>TU+}H_eGzA2T9)lpz()r69rmF_PEML
zUwqsr;6X#3p)AOtbzZL#_eBm8ZO2{<4qWA*&`5U?gSAfUz4_4=E}!%&c;F(xK-jvi
z&93@{njs(Vvt9uYYC2z|LC>|0>2pd!-}UR!={dYke>5ar>x@1tUQ=|i`WhQP@VEHj
z`C<`J>xe!q?nCZN?o(@ep85FjO05HIMwJ4h53Et+anL-E&3dB#-JLM^6Z=*)quZv^
zc~aDEQ+2VPr5W0`^}Nfc_*{76+JR<Vy9sBvxiH+7%M)8f0ZKEleTWOf?p*>8ub*hk
z6L!1o;rzay=VM-k(~N1i%Ho|Bzj!~7*ao1js@w4@J~Qx(_7m|&B;HG+8PV=lz#9YK
zb=LKvwv$kka%bZ^RjI`uX3cn-ln~A7^wSf(DO)p|Ce!U7Z++T>pD7aFN1L{5GF2@<
zmc`HZSp<k5Oyg&ZG-GM9AYXnk^i4&>PsIajnz1ygR;c-@Vv7LrBeI&2G`&UF-jqCR
z&#G&B>$CW(Pj&D~51Mf_bw+%mirM)*d|ZfT94l>?fNC2Wsl2|CifWrEzov=upyIkF
zs?+z0?H-XG&L`pni^Q2TS_gNr7?gsVMoKDgqKC!Jbi1ILE@T<#NSc8>UbfIrNv*W-
zX)Dct(n@QSTj_L$fnHZO^>%>rnVB|#_|z-yaHscIF1!eX5}4mir!r(fmH>_gfMa%i
zD@}_dn)H~+ImWWa#S+a)Xr;SF&As}ND`rOdl*LXB0L$T~MiFipl8mY*ib4lp&o$7&
z*DbU<sfA|5zZr~o6$8gG_F^xzQ(7P6!jL%h$?jpP0x0<++(aSV1jCb@N4PokTJ|QZ
z5pLK!jF0VFSS)#>lj#O21orBpqBspT)t<wRx5!5pi(G_9|5SvViI2M<6g7<zTAtWS
zg|)rb3#BqU#$AVcTM0MSig1%7!VTvWS97{A+;j$pG12WBZPcT7Ik6sg)I|JFW>v2R
zh?)6FC(a`7li?=2x~VPP1mwx#<^UksCc+JSl5w%`-{ERf1;7M?QARyz*GSg=c8xG9
zs$Iib_hdaO?bUhEAbwbIX<q`T1htZr87;H|?tPvj+)RjlH!wzb(i6NB1g0R|>!@Ky
z-EG&<JLVd~ij?J_ZRpJa&E@s4BR$=a2E9DfDXeOsxbzabayOOM9SWu43y#w_qj%E(
z_IIU^f81cV;`{$<ga<h-I7+*Yhf?ID6v{0qqlN~3PXly}moP$m5}azzSE}`N_h}Ao
zI((ZPrtPE825q)$VBV%r25cm!dERvR=SX_-I-fhTr*<jc<0Lw{CqBF$@KgexlG;W(
zbv>3Grh3s|2e@j0yn{X+xQPZ#-b22(6MD)E#prtCu!K5<s|vuARa`}z4+Lp2bb+=W
z45E^<Dytt*rL*=?E%gm@*vbJst9JMxTy0V{$Un#Iq*04c(+qb%n!hKMT=s;~jNM^0
z*)yER?+B;S+rw$3M>q}L8cu_@gwp``aQe|Loc^;poPO98LI2tqLEi~|>l#7-6#54G
znzcbi>wmevQPDqHc;9cK@1XDTx&MOtp-umW{<|rh`lG!A(QZeye;Dp#B<^Pn?rXx1
zFq*Ox_q;2NW^NCrshj<1#G=zuPN-%tw&R+eK2%a(Wz8I@ggsD;HFKWYdKn=11A(gW
z{C%i9xgL$6>+yvY@S=+RUp0`=>t^~n)j-Fd8)#o*3vEwmp^b5vs>h)C_pp`bMzzw6
zyR9@i5>?{xRvHtE*-;2)Ikz#B2_|y9MKl;17)0d23M3k!rU0V;LIW(w!GZ>wXb?0Q
z@978)g@)mCN1zR((4H}9*Z2^$Hx%tgdtK1(g=qhZ`>nL@Q46`pw$QG4)UBQx=wy<C
zF1%=>YcCqe_gNKPi7lk{-VyZ05O-CGwjBzzrUz=#S+mGjCwU(|`2;7J-#p^^$oWSp
zC_azk3$b#Ix=v(vGX-We)3sO4bnc~rjwTz(>uC#l#J7+ujJyiQUJRqpxrdHGCrm<T
zj76t70iF@)q+z!NJm|cEfwCL|Ex>V8R)3)Z7UW=}fkr985gHO8;DJU!qtK4g0B9`Q
zHW2_#MO$a0&2!QAMYxBRxR(vMr!BDt+6{mX1E5m?=u(P-ZeS3Fz!vvllbF0Fy7@Sd
zM$9`R<w2&lymT|hYBMyQHN6i5l>91RO8iWd!6n;#>2XFSC6zR_0Tf{Z&=DAO?-LXX
z86bF{RS#Qe5xkGfomQG2(Ml7;TFDt5<Ae?x4seDB$sT|^b)e|*0sa6)sT&H3*9Iu$
zV4{I48ie;9EaZ5zm4-k=p<w~7G#nZc*a~=BX*4u8xRoZ{hW9}`r-!wWOGFFJk8Gi(
z_pr6&K0NCqEUN&Zy#UA?0G+|0xdMQ00-#XXA__K%1we^KO%$D0L5pFx&rBd1Jk5&|
zUuN45KzhAA>#C{KOH)tNQR6uC06od9pjTy05<qbbP_7J6K)L|v1ps;m!zLJL8^YHH
z0JIVSErj7Y1WW@w6EUKl(K$|lXLyi2`W<h|9V`LluK-8^&H#lRI;fQf3JqfU%Nh(h
zDm27j21bGg8V-#BI3uA^fX4|M!|>b!JOF4i+BiL=g=UAh&|Cnt=nn1$_p$Cl3%Nxb
zXy;=C?FT@|5)E`N8TX%pfdqiUGn?r_PBT5uZ=z=a=xJ^pt=$`F1`y9?cOSb=b@dIl
z0Z@YgC_BH5#?1FNbGcs*+e!y7J*33kT1qO02PzN%Wx;T1FkmVGLjH3kQ2+!3v#Vc;
z5xelNJc=cNFshx=Nlt)gIOiTWWq<~=mr#Jw28^F92c_`(KuIz*gB5bTA;Tg8BQy*e
z4vkPk135us0FE;>7VwNmyCwmiDH1%Wpu_vj1wf17eU{@M*0A@%fY=s;@D+z00JzVS
z&p7|Vwh`R_E!ZIv06k=YavSMhN;$c>UbZ+Z8!}@bW#^UH7C>A<{lsCT>J4*JxNN&0
zMI;r=0KrfZnF62`8K9#IfLsC4swjE%x}YPb!~0CSEsyfifpTZEHyA3s#9#r$KtEXy
ze(nE1NNBL12`oZGp<y@LVUd7=MzZi3PS9uuCO`&;H4YjNa3(;L(55MXXByf!3-GuA
zp7{(9z+aB`{{-*j3h%Qex`lSe3h#sPbvCJ)F28KXL<0E_Jn>x&s7Kk2bUOG24V~lt
z#%cZEP>j77lhXGA;_zhzXwQkzH{SGLQL-O2;~-tSlSYqn<PjGHfP4VZ&&e`CUh#5{
zz@v3F09tZK9?3I8<j}yK#v`A-zzE?Xh6*4YjgTnhC^SUK2+MFGBPgRFCw~)IgvK%~
zfif%;1u&DLseooWG{XoEAfE?#7NWgN0M81veGTB*0C?OnAa-D4;05n<7=z>#?)Ad+
zX7YV0!WZ(N``Jz8elm)_bN0mY#@lN{dryYg7C_?{9W_gy)z-Oq-DmHWcnZZ7J{SP`
z!iArQ2RZ?x?uT)A0HDne4YURTExjX;=2^%orrmBq2ewF~pF4Pz=zJp#!~D$E1`0It
zMn_o2umFrRG!`0%_Z$yR!23^xCIObo&=hFuEqp#SJs2>f9kZa>Xw#g~7Mcgm50gF4
zQsH%0BW$gW!a#Unpe;z8cOZ0miO_Wd-iHUwRfMmb@IJR;gMcK|&GxAeK+b`ttT;u(
zXCLbD`oty2Z2%xe2>WJ~M~54nw(>O1+i<~RnSTEE06PDui2MN1MF4a%Q8w@{0OSs%
zuR{l{L}x4tmpf`EI&BI%kvo?=n>(H%aJnIDl!_RX(MDMO<-chI1)2y=!uw4Q6re!U
z;9aIeGvHljLJ};H3xJuc0A?YyI9x!3T!-8G6Tn%=A?v<@+%O0{kTiS78rnP$!*dR^
z&CBpUekpS9bN)dAIWIel<k&p?|9ku{@;ZBmUguWQ8c)9tKkMhb)3yLIUF+I%D2USX
zE6Mxv1Ny(A=7ljf*dUjq<Q<+vS1=mSAgT0*k@p}6+6KdKL?>{Ea0e|2lRIz*JOFnx
zcRB+wo`Db^L{0qj2?CZ$0WAPU*3=;3QJ|U7tYF!zxIlAQAp(?8`Lm6%aA;ZvSXKyN
zRzquz&;a<&XtO(mg8{HJTE3S9faeG&&Fpy;@B|@rZNL14zIEQEx=#4RxLxEEnnVSa
zdMd?M+#Sb4%w}UY1(2x$Jh3&Q1UFt#*+^GHpHctGdsV&Bmk4Q_FDBBd_<B12R8BH?
z#>gG99${?N9l7JUGr4nTao)k60uW7Q&jC0lOMuA#Wla&{pHF862~eQffW;+Pey_Oz
zWxmh?y#FEw1zG}Fma%7nRzj-*%uk%t2v{~qz_idN%&y#^t;pFVXrSF3uHbbJ3UE$5
zLA{4_9u8Xqp6f|<<a**ED)U>_i>@dlCTCYtAvV>q4a=}7y-Ov>v>AXJEC9qKrwB&K
z!?RG4PjYGI+6$`NIX)ZgMpNAa=-~Y-It+mJq64-+l1KD9blNH|#-UReatPtvBUlDu
zwt!-0kgQp^+U0UffC9|}Ec2lSA@X}LC`-cR_gn_8U{E6E&-uydRiO2EF(bTZpiM^a
z!Z{7J?V;Sh9q=-{*we(y&>VorIfV8fmB4AH(}|cMJi}}&Sx%V!5w3rJR6;IW{pnK`
zJACfwM(g(lQ9@c76=1t-adjh=0-lPxM%ry}0P*IiG5}Nzfbs!Q7PhB8&8i}|BVqKn
z!RE&M#9<TtIP)lZ+$xYpFOOsobkt^a-g<QAPmyv*bEhv3l|fiw^dJgABuJn|p|X}h
zOT!eP2#>M`T6?EOdhZR8E4<1k$PJ#w9bQEO1=@}_>;NpD(Q=#i2oJMQgr`H0H&4xl
zx8WJqSwM4vr|IxGJ_ye@xLAmU`FL0s4VZpNwcPQIlLsBY{+Ln=>nIQK6fr!oUpe5Z
zv}J(wmH@&Hv+HFSTv&xCB`UB99@Xd+6cdkJe?s43MP4oT|9!XztvvgTyrT6|hj9mP
z!RX%zPq6-uLF)L`fM69*l^Ke#j#?Qm|BQd<Cul9SjzPiSy55!FXEWp$CBN@B$OEA4
zcqoS;PiPNd*~_3n`#Bu3XMwyqEHNz53C?Q(%xQR<bMQ3h0nJ4~bA_wRTp)zUxyiW>
zz`2#$NIS1SrSHe>R?P)@qg`-JrZmWMD`k6?RLh}@;i;-uFO%3bKs;h9YUNQ>1cPuG
z%Y=bmV>#nFO7%CQb7<14pC!*@R(KrdL6f)Krd@ZdrH<rI-Ok}7O78fLcV!q{?+8T-
z86mkVAc5TR`&*+-K!J8CK-mW!5TG1>+)PK}n(1gfJO*?k0Z*cGID*bTMF?V85@lE}
z3t)V>ro)~_Kof{i6%24f)0)U9u8dY6h@{U|R@hmy)?cK1&k88B41)|dDyV8~4_#0d
z0IIQdfb^CCs*^_%8>9fn$%Yq77hdQYD$;jTs%V*KpnBmEBlABqj*xpmo|Id#H`x71
z?))79!Q;NV7&QL5Cqwd3{+qo3#S7XmKsh9V0&fD3aunX=ICPQ=e1PPP5ftcx0OgX=
zvv4j0Sgs3L{GkB$G6I+o%&fvtRgQq}WHeFm^D3IW=922FI&W>+ci{m&%dVpAa?TTF
z&trtATzDVe9%I`8HChIU4bbj|<YYQac%c`(V2FjoxZEZ>d?N|dSx?o%<G17Y(YlK%
zbSS1#>hy!La#&%n;U&QE5?+K~KM-pU$+0*Y5)M135;*K&X2jEK<SXZShJ+FVL&C}K
zRij5yfWlrSKzNp0T>LY_f;vuknh_Xm$3S)cK9(e+GW2xePA2_JC1gocbkujeuf|YX
ziJo#QWV^fx9^PlQ_oNL1q=d-y=6J-g0oV|7GL1)zG0L*b8>L+66(CA3lp%`28qnFW
zG#azyjQZM-qdRu)h0*@VGRae%5MJYWoKU>{+6kj4fh14D`N>l`<ghonlqkYZlERzt
z)cU#XO{DO{1wQsDsWK>`3Q!^$6zCpry<k{)0W`A-YgpKRk<&!6(1Wx(@;LK=z8||w
zb;JCag~uo)HcRq4xfQTUReR3U0iL>cczCOf{Q^`k8>Lhv(|Hw*lJU|@<xnO;ggr2i
zVf@hNm9%nih^ouyTxsNz^W=S}lrC~;VJM!;GX9$Zxx~|E=&FFkCs{xOZ{p9(2QOtv
zf>Hz|P>29Uf&_WXopf3E5Qd@v$b&2_0A~qMvSm=Xz3e^Xp@e*SAjD?Y(yBc{(sbOs
z{TpeOr#~gUE|Vq{9I}l0jxk|Y^E?bsy*&cNH(VpOxEj3>8%l;q4rL5cYH_<KiUUXw
z;r_Rui<Ux~rNX0EKssGZY>+|>i{ZFo1Oy5YklYfIJP8!m1_?Y#ng~1WO)`WxVMwxM
zZxSOsiUbMTl>j}-mz9_==Wt1da@&&&8Y%o~0S$9eUq%1Nh;6j}SQx#^ua!y~Y=a^r
zI5jdj6&B#B6NOqYdjzOX7^6z$LdH;5Ag1+MW$h3>FO)llJ1RO$Pv;QQoEDu@T_gGu
zQ~l*$5#;-%T7pB$NtBR45%46EH%Swo1iH`OB(td<lxz;43Qz<rPlQKFM0=hUwu8d6
zN6y_|7R%m~+s&c)T+lNbI{UC$S%UvP!sResz5Pt8$V+*SF<db?H3A$l+fws9^<tK5
zw*W~S?L{$63T4#_h|1d`dQ~iUPEvu~c??omQaLT!=C4|K`)rUKjlz=*fr*vvUIcnz
z%u6yEL;wQC0+Pp2T#g7i(33n_k~hhhKR3BR23dlns3Rnt_@|Z1;`VYL_X3;bwjK?`
z4ufr~o@dltZ;E?SK!sS(GD2hOaXNt0Aj=dUn+B-S0ziDjb;1}%FQf($hcnKJxI?&;
zQUplcncT6Dvl?jk`DpsbNDtLn+7A=<(3#t*6qBi!0f7>7M99gL^Q*)>0ZG1q1bR^@
zAc0bgWPn*|C9)()pv+Pkau!bja)h3ymC{eUZm7cj1#%!aJeiVHQqu-anea9hiX_<x
zPK_xzCh$lAow8wo8Z7`+FE-oPsz6jGAY!+k4~TNg<-CYHjXRJ#lRK9?n!Un>ke4)i
z;R)61HCMIWjz&^!daVRVn<p`WBvnB2+5{4YH&Z~uZD62tq*+pv1h_1D7Rk^@#$}Q-
zW>cT2ZNb1Q`mrnbDX+A)Lx?hZ8)IS66r4H%jVU-r4{x^sS%S!z6R~SAs+L#nxr1`W
zEG<)nHVzrDB+t}H4_=hg;;p_G_ZUrCd5)q}$|OLHAtzlCax#Uo%iFyPe;$ixMR}F&
zkgy6x+l(rxXrR-+G15LAwKn{B!ftwykb%L`&>o(Yo<@Z9wos*SheipGu{f)5v~z$O
z6vk0PR4t6lBa=sIsSza6aXeGW6J9A><VoD|8Ny@iIdhM`mO`3&Ck~!*fI_gYlu@jg
z{@&<GjNXL39m8srG$S&qx_w&BYj`C!?RiUPK_xtk`ranqg0X1RMan6vY|CjnKx5)*
zlsS%>$FTs=K6?kK4WfE;h$=)UNx6~e%)-icuaqaeL~gmPtda)ui+GMxERLvpg6|R1
z4*VQNukxy7NQ8>SET~vH8xkt3ZqHT96*HuY8a+Kt$)|a)>bol$sQqUmC@rV7Jv6C#
z8)bg;j_@?vD?oaMaV&WvBS;krkjg}-mI#kfB&xNARqZhFPQB-uWwgRWJ*06lZ_(z<
zl#X4IZICDdsZ}Jk3RNj`6>eMflMHg4zE3sx`f=iJx)J&Wf7f8<Vd~xjiy1hL=Fli*
ze*m2dZ5vH$5OwfI#;LyOL?cY)iWy94wYu_4v2@^l+u}hEjx+XC-1A&2sjTlX3#zI!
zhoxE(eu^t<>2knh`qs%q{eTGU0lyQS(hiJ?w|y56V+k4!AjN9E>8Pu3=;)1V>dn29
z(lb<8P<mduwBh`3Z#cN>hjE^C0{KgEMO_;p)oS5Jgq)1rQre1x48BlVl4x6>!=|`3
zJAEk!r-^mS!@LJPb_vivBS0pr_HXh?Z9p|BJd=r(UL&)hf}9tqA3|WZeFFP&R&KjW
zr4==*Nv$#D<Q3sP@r11<k7l~QH5Q*=fWPSsB%Ost14sbWsAfP@Po(ddTq;4Tt?#HB
zMaX-ZUPPnkd8>Bn5QMF-hHtUxjjjegrp&xjDlV(0imF;FEUBW`nMKmG{pwGUxYB>d
zd(yC32UH7(W6+M&^aAPBjJLs~0rZXlS%OG4tXc3%9iW2Zle1~+ij!uEEqjgSTdvUS
ztYY#*a_cnruxj<1!`(=igS2qt1?k`>mo;Z;2ohzrFv!60&tJUGlMcUJz5SZmo^JjO
z_JmQfsoiE@y9Vf8AX3YflnTC^ME%C9pYFQtU?3HjRtW(0^fIl0CNDejUdPMrJrP2M
z#T9K;;nIp~@;I!%i}JhC+v!F~f(B4`0Mr?nlrjaW7RQ<RhdrUMRTeHe+2y3&QUbff
zJBYp+xvf*roEt+HpTlz*hdEighyABR=}VPx$L;eEP3ZFDS2Td$1d;yj5cvkjVX44;
z34uG&8@UVTGL~jNwRQCr8kI~7Q4D17^(J`wIqx91eg4uRPH#F1tfr=p&ig%-ypDMx
zb2}YA7eTeP^%_9k1yH9v6L%Ck!SiUaYEsNItB8j$s2ZL5wxpHMTQ0>Rl__cYbmrQ9
zTC({fIn6ml!;u(|o_Cnmdiv1Sz*s36=J)H=iL?OoUd&6?S`p`Ct1#;;udLAk>M4Lq
z%c~`CU^?^RP}G0YZi;)B@zxoS-U{~~pOirZr|dP$%edW}y>8%$-bxK1YXGDak6eaF
zZDzzv3+#D%`s)A`N8(a+!fVxpogrH4c1iMl8bDS8h^NbQ)}B+Xxi~NIrk9vf_ZE1R
z5ET@a)7*9ERCB8lvky{2Ql<t_cLT&Db;9Cfsv~*c`g2rNQqjA=aR}jxJ<g{p@N=&9
z>=&M}ssYpq@d#xjtBv5r*l&}OQ`{%Mwkp4{Oga=?Z8?O?13b;If5&OQ2GCo?IRqP5
z4IcOXH@hSewWfF`_w)6Ks!JnWD?01*;GJqk8bFq&!Z2cJRFZ0ahK=9V^%Sdq@eJ;b
zK~XDy^1b=odfe%I(*UwCO1UPZHcI(5{#j>hGQCwCs;*)2R?WL|h}(56SPFR>K<@|;
zk4^?etw6||wfsWjt#TT>RnF4JjPdF7EU9Q|_Ar2$=D#gO+dM#~E91Nf$;$|8zgva^
zAum6uC7E0x48HrU*G<#ALOe;}>AYH=x6J*LR0dH08m$J}aU{t04%t+SkDXQCpzH4I
z(t45U@9|7(<<={zM&ub7C)2k4o%UR&Sm1hIwZ=7N`3ZWQm~QqpmuyGZ-F{|X+NJ=S
zgoCe@H#mLeDb#E#&1xh(9sk5ajpW6vJe!8csDk2hTJPzrvP9!5Es5~bi1PQ@j%-im
z?@m~J)G7d3?F;9;PKKDRYV*RRu}YhhU#eQAWmn9n+`n(BzpsgxYIw0#EsXQxZ0ytY
zwptO}(R7x|PrY>e7tUGpD=(w)<sYW&R);VJ=UnD4R;)+PIi$KXaKo<ay}r8KUE(P`
zC&#?~!+cA~4!YzYErl<(qiI#XyT5G3_?4Gd`_f(h`XT-rBGbJ(yeW$lW7ExCYy@5`
z<%HTE;ZZ`w(|onrDBExK_N!(a*Lc%^UMHsh@BO8_{MF6YESm8bp>^i#z5hPMjW+J_
z>$1HvwjkaLtF}2!?F@h;7b2}OOHJ1Cm&aSv2)v8W(sD%GQxS;e=X@XZ+3Iq4rva88
z1Te}0Uny#hd=cz~at?IN+66NXS(a{|OZqplueshv3WVLUB_ugD2M`^yXhZf?rqlfH
z>C1*A4A9)3FocJNm1vIToDlM?f~TgOAaaq+zM+xpJZulP3)@F+vp(C?!-`+~-Q3)~
zlmQyl6Gq{^$16}QwDc92JSFA21{cS;!pbuddlgsgx#-IF;L?Zcm(Bs6b=b4bcD156
z9K=cVN07cJAj-q8LVoP`eV)nEB#S+dHQ^D=e5@m)zu<pTd#>VIA=NTC@$1a<>zdx}
z*|cs{Dzn1?{T~1D?dimjXAL~{<oboBu%@ZKxXSf3E{VMD*|ctyFSEk{eSi+!*;}?W
zaPf;Ps9c8UwH#g$>`dLr);$d`MDtoAF9-2do{O?Qxs`>PVRm$U84QMTc(F#CCTr@X
zYM2?F@v5t<`y52&YlhL(N$-=-%(MXnSM(da7^xXYQzsS6%;=OCibBgZ!)WT{62?58
z=>?+xh#yvK2GaBvRoB<o|5>MY;fL2W18I88`qx>Vr3+!~Tl`XkW++V-LRTe{=T9vH
z)EkP5ntHW@s;jI2@FswM1<I!27i%?RX);kg*q8%Geyw}c#R(FAIYl#=CKDxDOrA|I
zCQUP#CX@VUj;^y8uW{fH!ZgEa67Yn9i4S$}a=~4Fg+DIP3~2W%udS{9ME9;&VPWC#
zK;9v|fk88(-O9iWFble0a$$Y!fAA(*nj!60Inu7f_qp%}&OC+FjA?(<b`%XAbzO1c
z&D^yLwOy$h+M?^K3rW<U5YBFEhP4~{@Z!3zD=#EdU*L_OYsR&CrEp*Cy5quP>(}^z
zbj`>%t6cPPKV5fT2xa}Pc_fS`t8G&)fgE(*eTk<y=Ho*vHN)GCD!EVFp0cn4M8D+^
z)I5>Rcpir5w>oQH!V@`I^MEQ%U9NOaNv!61EF{+bwCx{#QqOr(r0WfrnBx100+iM{
zy;}`j)9bdW`g?>leyU@Ow(QZnmnV2tfeXXB-g@!+iCBcwR`Gk$s=8Pdch>cVi&t>P
zR*-V7^Lktb+!wsFLf4lr-b2D0k+hwSJ-d^THwOOV{XD%SH~LWQu};$RBde%ZtY^*X
z(dl_tU%aDVfE2_JsA(PD^|LE}rjH-X>h#kSeb5{InjcK#ryKbZS?yW;u6b6SA4%t@
ziuu7%ezs3%FPHF2^Z2+BaXyiD$W<o}cVb)daXfsYN|*23>7$<MH+*0bpL!*Z+vCTp
z`QT5z28?6_wuLX-hHb>QGCQ9~yV}>-ge&ILV?XAzi1|QkJ{6sh*2infy#6K@a$9Tw
zkQQ+-yrvk#Up>L!9>52{i!;1GVp|BC^tz<@{{c_bPYk@Kd(Hp=002ovPDHLkV1ild
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
zcmXX{c{r5q7ak)^cBXH#8$xO<HOXE~jO;WbTOxb1mA$BB&&=5UY=vY?l${JAH5kp%
zC$ev2W)Kz1XykkGyRY-y?>YB-&bhAVoIjo<D~rp#T%uec5Qx{<$N&v|Z|@&YR)AYt
z%J)DZFvQC2Dhdeq4$#@zNhA^hcWrHLW@dSIc4c87t4m8uG#ZUgr!Oxr0}hS02KZDe
zb!8vx2g)j)zH(rzD=XiYmsbI!(SY=Q2K43SeLL`h5D<Y7DB1sY$Op=Phr=|05A}nz
z!_NB*qygmzRfiq^&wv8lf`x?z3<e)La)gbIjh&sHgM)*Ulaq^!i<_I9hlhuck6%DQ
zKxiKjC=@CzEFvl@DlRSoKvGf)29uVNkvVbVgsiL_0C{=&lP6CqC@8?;a0KF<s_J<y
zEp2UW9bH{LB=VBJz5xnlXuJ;-Gc$7w3kyq2t1DN~4i1ivj!w?b&aSRE-P}BUd~N~o
z^Yae~2nq}g3JSUt92^o75*8K~9v&VM5fK>`6&(}vI5svuDJdC)!D6vEEH)K~OHEBp
z%goHm&CSctFDNX0T3r0Rq~v*N>5KC6it_Txii)b2FJHB{ci{2B#@@Yq*WK0C-QE4Z
zr>D2K_XB~@-`6)VFhCp_7#tiVefmTuk%mS_Mn^}#j*m}HOiWEq0yaH0H8VH2Fh9Sz
zus~T{T%u5@z>=v{`r*Fx-tSle1HBZCwy*}VumS_+7Zwo{laiK^Q&iGI0wb_=^tu%s
z5f>kyfW_rkR@c_IwBbMW5s9R+nFShsZGB_wH-oYB=MR&)`?ra%RR;pG{WLZ}UiF?H
zbYSRzHWA=UU`w{uTkKG2r9cJVU-d?v=4_PFK`NtAy|<*eWF#v%W0DmrDki}r<GT>Q
zJaZqp+hwV1_htg>M@LIDrWl?Hu0`K%6>Ox_k}B;ZP#%howwXCudBP$k=+o^Yxo=by
zbmZllh5ht{{7uZl$rnW`!6k?dQ@aM%v2-S}0%V_fKg-o8%Sb58$JJy8k7oPmDRmhp
zPQvm|L#DbGV=_2Xs$v!&zxDWeMNVAbf8H*p-%H);(a_}~<v>*}a#T%^CdK=j0!edK
zG9%}P&XZ7HwQ14-ZykA)tAXQcsZ>mWnP8maIApAwb5_1A5stcN=u-ghraY5n&A}-3
z-N;+fGyEr=%|?WywB?tSYnqu0ZZ#)dnbD%5Heb*1A`m>>24Kv9<kHi!@T&CCP2=?z
zwCp*Ph0vX88Fy;k8&u+YLU9~{RY6C#$#UmK{Zp9R=UoHBJUsQXm7vO<=r;s?m*&EN
zN16mT0%K+MSCaB?ar=k{U#F6ok7D`U8M_jLZ67QaHs>u}oJ#IUn}Y5R<~fXj$Jwba
z8A49;`hmn>CO4i>#~AL3L+3PmGdlY8s<s|EG{SEse36D^G~cAmf?;3DK3g*y7eKjo
z0;}P#?Pfjq+HLU?jkU0e2i4!b`)>=67C0-h?<%_ZHwk6Lbp`j6keKhwktutkZ<k-&
zxQ!q2E;wVB&3^B7uUdQL?%2;VkGnqYEEBJ|AAa?*yJp)>DEl$a+wGhG>Z4M|!>?KG
zY8Y@^N!pE8|H&ald||y5;zEDT;JHWch0Olzrr2zXWJe_{;zEWs1If^<GmQ3F$kx6+
zpWqj7M&hqai^~D^H8A`6tFh1()(&ItTxTJF?#i1*<?_Gck>zE`Np>xLw{{T}SBZW+
z`dA7g2WnrFe&wIfGH~0o(uq(JE>{_P8VZs0{x4=|dU}W#mb>9{Ru)ldP~$j>ZdTKC
zSAN`^+V7r5Fl00uA`hb8#WX@BgMo)3a=LC3+>(vlw~zR;rnT}w^#!dBan&iV^t3m@
zeX!ae!z%9tH&)U&ePy+b)O9;OFz52Zbacct-Co71w;koX6uf&ex?>LR75v?hRQLQ|
z<&%Kr#gquv04KSYi$9)s^pFDb=2D`?Rk50FAA@M#iz&JC(=Ddk6-g5#XZVhlYq+5~
z#UzRg1T-urPT=ph2R(azT~K{qU1LdNuHYt8z>{~uv<VgxVa6#o0rkUoCR9bNNVuMm
zmpnT##u`w4XU#>Z)c$&o5_3)P7{)UdQUo7;?NtN8{!hTDdQ2nWfuA-f_gf}2dZ^Dn
zR7<DNwM)N!_JVV0vWdL&eXPrd;3-8IhtB#Ne%i%}K^DQY8t&_iqJ_bFDPtCX%}mEu
z?C9#b36C|hTCTRs9*%e|Hb~c~xWFKFho?4rsWR^Pvq%iY2J<whF#Gs+m#SqVvdUl^
zA1+es8;+q+UGg8l9EsI!Z4Uo!)%-v@enzOfdk1aDV5%$X9WTceV%nClfBV?l&7<GK
zc=GDf<Ki;i+c3JeTXD_MA(re>>W@Tg^%t@knZnF}m6^ADxa*BN8I@f>9H^!5VUWNW
zBhOrcCb`D7{sh0NXMa9%PHjP;#<}oQvk8rSIb_WJ8w~tbLd~a{&zd_8I2N!o;=HSx
zX4Js(T3&M!vDU9TsxViyb%?eZl21(iH`aaFW27`>r=^N?Uc}+A&so(GZ7Q*$%*JZC
zSKW5G{|mFl+1zmV484_Xd|B&gx<bD91yoU$|Fehk{jgJd1C!?9uiq@8fm{OFlLfa%
z6A>fM(R7PDknE<$=!oI4P%)dHEw3lG&BIOP*i9S`r&TCnJ;C_Cn>=yUM;-lbWqoZ1
zKR)$kD$Hwp@MjJB+f@}onlp}!-!8uQf>JrqW>velBbxq`4L<VHtu1Fhxb_bniXbZu
z6*=C&)Lb3!-<2x<!m4<0R7RzW;@iNzLCY2&Rw^sKE}zWpVrgXEcLikH+K>}DROdt)
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
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
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