diff --git a/common/main.css b/common/main.css
index a4d30ce..6e7522f 100644
--- a/common/main.css
+++ b/common/main.css
@@ -261,6 +261,7 @@
 }
 
 .flex-column {
+	display: flex;
 	flex-direction: column;
 }
 
diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
new file mode 100644
index 0000000..13e456d
--- /dev/null
+++ b/components/message/chat/chat-layout.vue
@@ -0,0 +1,275 @@
+<template>
+    <view class="page-container flex-column" :class="`${phone}-style`">
+        <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
+        <view class="top-box">
+            <slot name="top">
+                <view class="top-container">
+                    <view class="flex-align-center flex-justify-between">
+                        <view class="left flex-align-center">
+                            <image @click="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
+                            </image>
+                            <view class="number-box">256</view>
+                        </view>
+                        <view class="center">
+                            <image class="img shrink-0"
+                                :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="right"></view>
+                    </view>
+                    <view class="text-box flex-align-center flex-justify-center">
+                        <text class="title">{{ chatInfo.title }}</text>
+                        <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
+                    </view>
+                </view>
+            </slot>
+        </view>
+        <view class="center-box flex-1">
+            <slot></slot>
+        </view>
+        <view class="bottom-box">
+            <slot name="bottom">
+                <view class="right-container flex-align-center">
+                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
+                    <view class="search-box flex-1 flex-align-center">
+                        <input class="input flex-1" placeholder="信息 · 短信" type="text">
+                        <image v-if="phone == 'iphone'" class="right-icon"
+                            src="/static/image/phone-message/iphone/mic.png"></image>
+                    </view>
+                    <view v-if="phone != 'iphone'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
+                    </view>
+                </view>
+            </slot>
+        </view>
+    </view>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { onLoad, onPageScroll } from "@dcloudio/uni-app";
+import { stringUtil, util } from '@/utils/common.js';
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    chatInfo: {
+        type: Object,
+        default: {
+            unRead: false,
+            noNotice: false,
+            img: "",
+            title: "淘宝通知",
+            content: "您关注的商品降价啦，快来抢购吧！",
+            time: "2026-02-20 20:55:12"
+        }
+    }
+})
+
+const data = reactive({
+    statusBarHeight: 0,
+})
+
+onMounted(() => {
+    // 同步获取系统信息
+    const systemInfo = uni.getSystemInfoSync();
+    data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+})
+
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.page-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+}
+
+//苹果样式
+.iphone-style {
+
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .number-box {
+                    height: 36rpx;
+                    font-size: 24rpx;
+                    line-height: 24rpx;
+                    padding: 6rpx 10rpx;
+                    border-radius: 18rpx;
+                    color: #fff;
+                    background-color: #0276FF;
+                    margin-left: 4rpx;
+                }
+            }
+
+            .center {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .right-container {
+        padding: 10rpx 28rpx;
+
+        .add-img {
+            width: 66rpx;
+            height: 66rpx;
+            margin-right: 24rpx;
+        }
+
+        .search-box {
+            height: 70rpx;
+            border-radius: 35rpx 35rpx 35rpx 35rpx;
+            border: 2rpx solid #DFDFDF;
+            padding: 0 26rpx;
+
+            .input {
+                ::v-deep .input-placeholder {
+                    color: #C3C3C3;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+            }
+
+            .right-icon {
+                width: 32rpx;
+                height: 32rpx;
+                margin-left: 20rpx;
+            }
+        }
+
+    }
+}
+
+//小米样式
+.mi-style {
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .number-box {
+                    height: 36rpx;
+                    font-size: 24rpx;
+                    line-height: 24rpx;
+                    padding: 6rpx 10rpx;
+                    border-radius: 18rpx;
+                    color: #fff;
+                    background-color: #0276FF;
+                    margin-left: 4rpx;
+                }
+            }
+
+            .center {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .bottom-box {
+        .right-container {
+            padding: 10rpx 28rpx;
+
+            .add-img {
+                width: 66rpx;
+                height: 66rpx;
+                margin-right: 24rpx;
+            }
+
+            .search-box {
+                height: 70rpx;
+                border-radius: 35rpx 35rpx 35rpx 35rpx;
+                border: 2rpx solid #DFDFDF;
+                padding: 0 26rpx;
+
+                .input {
+                    ::v-deep .input-placeholder {
+                        color: #C3C3C3;
+                        font-size: 32rpx;
+                        line-height: 32rpx;
+                    }
+                }
+
+                .right-icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                    margin-left: 20rpx;
+                }
+            }
+
+            .right-icon {
+                width: 72rpx;
+                height: 72rpx;
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/components/message/list.vue b/components/message/list.vue
deleted file mode 100644
index c3ed4c8..0000000
--- a/components/message/list.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <view :style="`${phone}-style`">
-        <uni-swipe-action class="swipe-action">
-            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
-            <uni-swipe-action-item>
-                <view>
-                    <view class="item flex-align-center">
-                        <view class="dot"></view>
-                        <image class="img shrink-0" :src="`/static/image/phone-message/${phone}/default.png`"></image>
-                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
-                            <view class="main-box flex-1">
-                                <view class="title-box flex-between">
-                                    <text class="title">title</text>
-                                    <text class="time">昨天</text>
-                                </view>
-                                <view class="content">市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好...</view>
-                            </view>
-                            <view class="box-right h100 flex-column flex-align-center">
-                                <uni-icons type="right" size="14" color="#C1C1C1"></uni-icons>
-                                <image class="img" src="/static/image/phone-message/iphone/notice.png"></image>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-                <template v-slot:right>
-                    <view><text>删除</text></view>
-                </template>
-            </uni-swipe-action-item>
-        </uni-swipe-action>
-    </view>
-</template>
-<script setup>
-import {
-    ref,
-    reactive,
-    computed
-} from 'vue'
-import {
-    util
-} from '@/utils/common.js';
-
-const props = defineProps({
-    // 手机品牌
-    phone: {
-        type: String,
-        default: 'iphone'
-    }
-})
-</script>
-<style>
-@import '@/common/main.css';
-</style>
-<style lang="less" scoped>
-.m-t-4 {
-    margin-top: 4rpx;
-}
-
-.m-l-24 {
-    margin-left: 24rpx;
-}
-
-.iphone-style {
-
-    .swipe-action {
-        margin-top: 24rpx;
-    }
-
-    .item:first-child {
-        .border-box {
-            position: relative;
-        }
-
-        .border-box::before {
-            position: absolute;
-            content: '';
-            width: 100%;
-            height: 1px;
-            top: -1px;
-            left: 0;
-            right: 0;
-            box-shadow: 0 0.3px 0 0 #C2C2C2;
-        }
-    }
-
-    .item {
-        padding: 0 0 0 14rpx;
-        height: 146rpx;
-
-        .dot {
-            width: 20rpx;
-            height: 20rpx;
-            background-color: #007BFD;
-            border-radius: 50%;
-        }
-
-        .img {
-            width: 84rpx;
-            height: 84rpx;
-            margin-left: 16rpx;
-        }
-
-        .border-box {
-            padding: 18rpx 14rpx 14rpx 0;
-            height: 100%;
-            box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
-        }
-
-        .main-box {
-            .title-box {
-                margin-bottom: 6rpx;
-
-                .title {
-                    color: #1A1A1A;
-                    font-size: 32rpx;
-                    line-height: 32rpx;
-                }
-
-                .time {
-                    color: #838383;
-                    font-size: 28rpx;
-                    line-height: 28rpx;
-                }
-            }
-
-            .content {
-                font-size: 28rpx;
-                line-height: 38rpx;
-                color: #838383;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-            }
-        }
-
-        .box-right {
-            .img {
-                width: 28rpx;
-                height: 28rpx;
-                margin: 0;
-            }
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/components/message/list/list.vue b/components/message/list/list.vue
new file mode 100644
index 0000000..2ff0886
--- /dev/null
+++ b/components/message/list/list.vue
@@ -0,0 +1,717 @@
+<template>
+    <view :style="`${phone}-style`">
+        <uni-swipe-action class="swipe-action">
+            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
+            <uni-swipe-action-item class="swipe-action-item" v-for="(item, index) in list" :key="item.id">
+                <view class="flex flex-align-center " @click="clickItem(item)">
+
+                    <view class="item flex w100">
+                        <view class="flex flex-align-center left-box">
+                            <view :class="{ 'opacity-0': !item.unRead }" class="dot shrink-0"><text
+                                    v-if="phone == 'huawei' || phone == 'oppo'">{{ item.unReadNumber
+                                        > 99
+                                        ? '99+' : (item.unReadNumber || 1) }}</text>
+                            </view>
+                            <image class="img shrink-0"
+                                :src="item.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
+                            <view class="main-box flex-1">
+                                <view class="title-box flex-between">
+                                    <text class="title">{{ item.title }}</text>
+                                    <text class="time">{{ formatDate(item.time) }}</text>
+                                </view>
+                                <view class="content">{{ item.content }}</view>
+                            </view>
+                            <view class="box-right h100 flex-column flex-align-center">
+                                <image v-if="phone == 'iphone'" class="m-t-4"
+                                    src="/static/image/phone-message/iphone/right.png"></image>
+                                <image v-if="item.noNotice && phone == 'iphone'" class="m-t-8"
+                                    src="/static/image/phone-message/iphone/notice.png"></image>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <template v-slot:right>
+                    <view class="flex flex-align-center" style="margin-left: 1px;">
+                        <view v-if="phone == 'iphone'" class="btn flex-center flex-align-center edit">
+                            <image src="/static/image/phone-message/iphone/mute.png"></image>
+                        </view>
+                        <view class="btn flex-center flex-align-center delete">
+                            <image
+                                :src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
+                            </image>
+                        </view>
+                    </view>
+
+                </template>
+            </uni-swipe-action-item>
+        </uni-swipe-action>
+    </view>
+</template>
+<script>
+import { stringUtil } from '@/utils/common.js';
+
+const defaultList = [
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        unReadNumber: 100,
+        noNotice: true,
+        img: "",
+        title: "系统通知",
+        content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+        time: "2026-03-11 08:31:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: true,
+        img: "",
+        title: "12306",
+        content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+        time: "2026-03-10 14:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "支付宝支付",
+        content: "支付成功，您在XX超市消费了 45.00 元。",
+        time: "2026-03-10 18:20:15"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "花呗提醒",
+        content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+        time: "2026-03-09 09:00:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "顺丰速运",
+        content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+        time: "2026-03-01 10:15:22"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: true,
+        img: "",
+        title: "蚂蚁森林",
+        content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+        time: "2026-02-28 07:45:10"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "余额宝",
+        content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+        time: "2026-02-27 06:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "10086",
+        content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+        time: "2026-02-26 15:10:45"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "饿了么",
+        content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+        time: "2026-02-25 12:40:33"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "淘宝通知",
+        content: "您关注的商品降价啦，快来抢购吧！",
+        time: "2026-02-20 20:55:12"
+    }
+]
+</script>
+<script setup>
+import {
+    ref,
+    reactive,
+    computed
+} from 'vue'
+import {
+    util,
+    dateUtil
+} from '@/utils/common.js';
+// 定义事件
+const emit = defineEmits(['item-click'])
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    list: {
+        type: Array,
+        default: () => defaultList
+    }
+})
+
+/**
+ * 时间日期格式化判断
+ * @param date 
+ */
+const formatDate = (date) => {
+    if (props.phone == 'oppo') {
+        return dateUtil.formatMessageTime(date, true)
+    } else if (props.phone == 'huawei') {
+        return dateUtil.formatMessageTime(date, true, 'YYYY年M月D日')
+    } else if (props.phone == 'vivo') {
+        let d = date;
+        if (typeof d === 'string') {
+            d = new Date(d.replace(/-/g, '/'));
+        } else if (typeof d === 'number') {
+            d = new Date(d);
+        }
+        const isCurrentYear = d.getFullYear() === new Date().getFullYear();
+        return dateUtil.formatMessageTime(date, true, isCurrentYear ? 'M月D日' : 'YYYY/M/D')
+    } else {
+        return dateUtil.formatMessageTime(date)
+    }
+}
+
+/**
+ * 点击列表元素
+ */
+const clickItem = (item) => {
+    emit('item-click', item)
+}
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.m-t-4 {
+    margin-top: 4rpx;
+}
+
+.m-t-8 {
+    margin-top: 8rpx;
+}
+
+.m-l-24 {
+    margin-left: 24rpx;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.swipe-action-item {
+    background-color: #FFFFFF;
+}
+
+// 苹果样式
+.iphone-style {
+
+    .swipe-action {
+        margin-top: 28rpx;
+    }
+
+    .swipe-action-item:first-child {
+        .border-box {
+            position: relative;
+        }
+
+        .border-box::before {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+    }
+
+    .item {
+        padding: 0 0 0 14rpx;
+        height: 146rpx;
+        align-items: center;
+
+        .dot {
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #007BFD;
+            border-radius: 50%;
+        }
+
+        .img {
+            width: 84rpx;
+            height: 84rpx;
+            margin-left: 16rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 18rpx 14rpx 14rpx 0;
+            height: 100%;
+            // box-shadow: inset 0 -0.3px 0 0 #D8D8D8;
+        }
+
+        .border-box::after {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 600;
+                }
+
+                .time {
+                    color: #838383;
+                    font-size: 28rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #838383;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// 小米样式
+.mi-style {
+    .item {
+        padding-top: 44rpx;
+        height: 170rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 54rpx;
+        }
+
+        .dot {
+            position: absolute;
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #FA3D30;
+            border-radius: 50%;
+            left: 16rpx;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 52rpx 8rpx 0;
+            margin-left: 22rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+
+                .time {
+                    color: #9A9A9A;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 26rpx;
+                line-height: 38rpx;
+                color: #656565;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// oppo样式
+.oppo-style {
+    .item {
+        padding-top: 28rpx;
+        height: 178rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 34rpx;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 4rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -4rpx;
+            z-index: 1;
+            border: 2rpx solid #FFFFFF;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 34rpx 28rpx 0;
+            margin-left: 32rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 16rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #737373;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+}
+
+// 华为样式
+.huawei-style {
+    .item {
+        padding: 0 32rpx;
+        height: 156rpx;
+        align-items: center;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 6rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -12rpx;
+            z-index: 1;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            padding: 18rpx 0;
+            position: relative;
+            margin-left: 30rpx;
+            margin-top: 2rpx;
+            height: 100%;
+            box-shadow: 0 -0.3px 0 0 #CFCFCF;
+        }
+
+        // .border-box::after {
+        //     position: absolute;
+        //     content: '';
+        //     width: 100%;
+        //     height: 1px;
+        //     bottom: 0;
+        //     left: 0;
+        //     right: 0;
+        //     background-color: #CFCFCF;
+        //     transform: scaleY(0.3);
+        // }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 24rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+
+// vivo样式
+.vivo-style {
+    .item {
+        padding: 0 50rpx 0 24rpx;
+        height: 172rpx;
+        align-items: center;
+
+
+        .dot {
+            width: 12rpx;
+            height: 12rpx;
+            background-color: #409DFE;
+            border-radius: 50%;
+            flex-shrink: 0;
+            margin-right: 10rpx;
+        }
+
+
+        .img {
+            width: 80rpx;
+            height: 80rpx;
+        }
+
+        .border-box {
+            padding: 28rpx 0 18rpx;
+            position: relative;
+            margin-left: 24rpx;
+            margin-top: 2rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 18rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #7C7C7C;
+                    font-size: 26rpx;
+                    line-height: 26rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+</style>
diff --git a/components/message/message-nav-bar.vue b/components/message/list/message-nav-bar.vue
similarity index 72%
rename from components/message/message-nav-bar.vue
rename to components/message/list/message-nav-bar.vue
index de19cf2..977d2ec 100644
--- a/components/message/message-nav-bar.vue
+++ b/components/message/list/message-nav-bar.vue
@@ -1,57 +1,65 @@
 <template>
     <view :class="`${phone}-style`">
         <!-- 导航样式 -->
-        <NavBar :isBack="false">
-            <!-- 左侧文字图标 -->
-            <template v-slot:left>
-                <view v-if="phone == 'iphone'" class="flex flex-align-center">
-                    <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
-                        mode=""></image>
-                    <text class="left-text">过滤条件</text>
-                </view>
-                <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
-                    <text class="left-text">信息</text>
-                </view>
-            </template>
-            <!-- 中间标题 -->
-            <template v-slot:center>
-                <view v-if="phone == 'iphone' && isScroll" class="center-text">
-                    信息
-                </view>
-            </template>
-            <!-- 右侧图标 -->
-            <template v-slot:right>
-                <!-- iphone -->
-                <view v-if="phone == 'iphone'">
-                    <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode=""></image>
-                    <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode=""></image>
-                </view>
-                <!-- mi -->
-                <view v-if="phone == 'mi'">
-                    <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
-                </view>
-                <!-- oppo -->
-                <view v-if="phone == 'oppo'">
-                    <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode=""></image>
-                    <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode=""></image>
-                </view>
-                <!-- huawei -->
-                <view v-if="phone == 'huawei'">
-                    <image v-if="isScroll" class="right-icon" src="/static/image/phone-message/huawei/nav-search.png"
-                        mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
-                </view>
-                <!-- vivo -->
-                <view v-if="phone == 'vivo'">
-                    <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
-                    <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode=""></image>
-                </view>
-            </template>
-        </NavBar>
+        <view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
+            <NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'">
+                <!-- 左侧文字图标 -->
+                <template v-slot:left>
+                    <view v-if="phone == 'iphone'" class="flex flex-align-center">
+                        <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
+                            mode=""></image>
+                        <text class="left-text">过滤条件</text>
+                    </view>
+                    <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
+                        <text class="left-text">信息</text>
+                    </view>
+                </template>
+                <!-- 中间标题 -->
+                <template v-slot:center>
+                    <view v-if="phone == 'iphone' && isScroll" class="center-text">
+                        信息
+                    </view>
+                </template>
+                <!-- 右侧图标 -->
+                <template v-slot:right>
+                    <!-- iphone -->
+                    <view v-if="phone == 'iphone'">
+                        <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode="">
+                        </image>
+                    </view>
+                    <!-- mi -->
+                    <view v-if="phone == 'mi'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
+                    </view>
+                    <!-- oppo -->
+                    <view v-if="phone == 'oppo'">
+                        <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode="">
+                        </image>
+                    </view>
+                    <!-- huawei -->
+                    <view v-if="phone == 'huawei'">
+                        <image v-if="isScroll" class="right-icon"
+                            src="/static/image/phone-message/huawei/nav-search.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
+                    </view>
+                    <!-- vivo -->
+                    <view v-if="phone == 'vivo'">
+                        <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
+                        <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode="">
+                        </image>
+                    </view>
+                </template>
+            </NavBar>
+        </view>
+
         <!-- 主体内容 -->
         <view class="main-container">
             <!-- 顶部搜索栏样式 -->
@@ -68,6 +76,7 @@
             <slot>
             </slot>
         </view>
+        <view class="bottom-placeholder"></view>
         <!-- 底部样式 -->
         <template v-if="phone == 'mi' || phone == 'oppo'">
             <image class="add-message" :src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
@@ -110,6 +119,14 @@ const props = defineProps({
     }
 })
 
+
+const data = reactive({
+    navBar: {
+        title: '信息',
+        bgColor: '#FFFFFF',
+    }
+})
+
 // 展示文字信息
 const showInfo = computed(() => {
     let text, placeholder, secondText, bottomLtext, bottomRtext
@@ -117,6 +134,7 @@ const showInfo = computed(() => {
         case "iphone":
             text = "信息"
             placeholder = '搜索'
+            data.navBar.bgColor = '#F8F8F8'
             break;
         case "mi":
             text = "主要"
@@ -144,12 +162,6 @@ const showInfo = computed(() => {
     return { text, placeholder, secondText, bottomLtext, bottomRtext }
 })
 
-const data = reactive({
-    navBar: {
-        title: '信息',
-        bgColor: '#FFFFFF',
-    }
-})
 </script>
 
 <style>
@@ -177,6 +189,7 @@ page {
     height: 120rpx;
     border-top: 1rpx solid #E7E7E7;
     background-color: #ffffff;
+    z-index: 9;
 
     .item {
         display: flex;
@@ -231,6 +244,12 @@ page {
         color: #1a1a1a;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #B5B5B5;
+        }
+    }
+
     .main-container {
         .top-box {
             padding: 20rpx 32rpx 0;
@@ -239,6 +258,7 @@ page {
                 color: #1A1A1A;
                 font-size: 64rpx;
                 font-weight: 700;
+                line-height: 72rpx;
             }
 
             .search-box {
@@ -318,6 +338,10 @@ page {
         height: 120rpx;
     }
 
+    .bottom-placeholder {
+        height: 120rpx;
+        width: 100%;
+    }
 
 }
 
@@ -359,6 +383,12 @@ page {
         right: 46rpx;
     }
 
+    .bottom-placeholder {
+        height: 148rpx;
+        width: 100%;
+    }
+
+
     .bottom-box {
         height: 148rpx;
         background-color: #FAFAFA;
@@ -403,6 +433,12 @@ page {
         margin: 0 8rpx;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #D1D1D1;
+        }
+    }
+
     .main-container {
 
 
diff --git a/main.js b/main.js
index 1b77748..861e941 100644
--- a/main.js
+++ b/main.js
@@ -27,7 +27,7 @@ export function createApp() {
 	const systemInfo = uni.getStorageSync('systemInfo') || {}
 	app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.3.sp1')
+	uni.setStorageSync('version', '1.0.3.sp2')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 
 	app.use(globalMethods);
diff --git a/pages.json b/pages.json
index 882f792..315dc2f 100644
--- a/pages.json
+++ b/pages.json
@@ -23,12 +23,20 @@
 		{
 			"root": "pages/message",
 			"pages": [{
-				"path": "list-index",
-				"style": {
-					"navigationBarTitleText": "短信列表首页",
-					"navigationStyle": "custom"
+					"path": "list-index",
+					"style": {
+						"navigationBarTitleText": "短信列表首页",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "chat-page/chat-page",
+					"style": {
+						"navigationBarTitleText": "短信聊天页面",
+						"navigationStyle": "custom"
+					}
 				}
-			}]
+			]
 		},
 		{
 			"root": "pages/balance",
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
new file mode 100644
index 0000000..2534a8f
--- /dev/null
+++ b/pages/message/chat-page/chat-page.vue
@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<ChatLayout :phone="data.phone" :chatInfo="data.data"></ChatLayout>
+	</view>
+</template>
+
+<script setup>
+import ChatLayout from '@/components/message/chat/chat-layout.vue'
+import {
+	ref,
+	reactive
+} from 'vue'
+import {
+	onLoad,
+	onPageScroll
+} from "@dcloudio/uni-app";
+import {
+	stringUtil,
+	util
+} from '@/utils/common.js';
+const data = reactive({
+	phone: "iphone",
+	data: {}
+})
+onLoad((options) => {
+	console.log(options)
+	if (options.phone) {
+		data.phone = options.phone
+	}
+	if (options.data) {
+		data.data = JSON.parse(options.data)
+	}
+})
+</script>
+
+<style lang="less"></style>
diff --git a/pages/message/list-index.vue b/pages/message/list-index.vue
index 34745c5..2f60a02 100644
--- a/pages/message/list-index.vue
+++ b/pages/message/list-index.vue
@@ -1,17 +1,14 @@
 <template>
 	<view>
 		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
-			<!-- <view v-for="index in 100">{{ index }}</view> -->
-			<!-- <List :phone="data.phone"></List> -->
-			<MessageList></MessageList>
-
+			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick"></MessageList>
 		</MessageNavBar>
 	</view>
 </template>
 
 <script setup>
-import MessageNavBar from '@/components/message/message-nav-bar.vue'
-import MessageList from '@/components/message/list.vue'
+import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
+import MessageList from '@/components/message/list/list.vue'
 import {
 	ref,
 	reactive
@@ -21,9 +18,103 @@ import {
 	onPageScroll
 } from "@dcloudio/uni-app";
 import {
+	stringUtil,
 	util
 } from '@/utils/common.js';
-import List from '@/components/call-log/list/list.vue';
+
+const defaultList = [
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		unReadNumber: 100,
+		noNotice: true,
+		img: "",
+		title: "系统通知",
+		content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+		time: "2026-03-11 08:31:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: true,
+		img: "",
+		title: "12306",
+		content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+		time: "2026-03-10 14:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "支付宝支付",
+		content: "支付成功，您在XX超市消费了 45.00 元。",
+		time: "2026-03-10 18:20:15"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "花呗提醒",
+		content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+		time: "2026-03-09 09:00:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "顺丰速运",
+		content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+		time: "2026-03-01 10:15:22"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: true,
+		img: "",
+		title: "蚂蚁森林",
+		content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+		time: "2026-02-28 07:45:10"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "余额宝",
+		content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+		time: "2026-02-27 06:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "10086",
+		content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+		time: "2026-02-26 15:10:45"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "饿了么",
+		content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+		time: "2026-02-25 12:40:33"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "淘宝通知",
+		content: "您关注的商品降价啦，快来抢购吧！",
+		time: "2026-02-20 20:55:12"
+	}
+]
 
 const data = reactive({
 	navBar: {
@@ -61,6 +152,10 @@ onPageScroll((e) => {
 	}
 })
 
+const itemClick = (item) => {
+	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&data=${JSON.stringify(item)}`)
+}
+
 </script>
 
 <style>
diff --git a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
index 047d9a8..84d8ea7 100644
--- a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
+++ b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
@@ -525,9 +525,7 @@ const showFristAndLastNumber = (str) => {
 
 	.section_4 {
 		filter: drop-shadow(0rpx 10rpx 10rpx #00000008);
-		background-image: url('https://ide.code.fun/api/image?token=69ae28bb97ce8400118178f6&name=ce4aca9097cf1d57763cc647764b458d.png');
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
+		background-color: #fff;
 
 		.group_5 {
 			padding-bottom: 32rpx;
diff --git a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
index 7ec38fe..4dabbf1 100644
--- a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
+++ b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
@@ -341,7 +341,7 @@ page {
 			border-radius: 25rpx;
 			width: 106rpx;
 			height: 50rpx;
-			border: solid 0.5px #28c2dd;
+			border: solid 1rpx #28c2dd;
 
 			.text_6 {
 				color: #28c2dd;
diff --git a/static/image/phone-message/bianji.png b/static/image/phone-message/bianji.png
new file mode 100644
index 0000000..791a507
Binary files /dev/null and b/static/image/phone-message/bianji.png differ
diff --git a/static/image/phone-message/huawei/default.png b/static/image/phone-message/huawei/default.png
new file mode 100644
index 0000000..a1a6601
Binary files /dev/null and b/static/image/phone-message/huawei/default.png differ
diff --git a/static/image/phone-message/huawei/delete.png b/static/image/phone-message/huawei/delete.png
new file mode 100644
index 0000000..87dcc80
Binary files /dev/null and b/static/image/phone-message/huawei/delete.png differ
diff --git a/static/image/phone-message/huhuan.png b/static/image/phone-message/huhuan.png
new file mode 100644
index 0000000..fd99f1e
Binary files /dev/null and b/static/image/phone-message/huhuan.png differ
diff --git a/static/image/phone-message/iphone/chat-left.png b/static/image/phone-message/iphone/chat-left.png
new file mode 100644
index 0000000..38d4e55
Binary files /dev/null and b/static/image/phone-message/iphone/chat-left.png differ
diff --git a/static/image/phone-message/iphone/left-msg-box.png b/static/image/phone-message/iphone/left-msg-box.png
new file mode 100644
index 0000000..c3fcb20
Binary files /dev/null and b/static/image/phone-message/iphone/left-msg-box.png differ
diff --git a/static/image/phone-message/iphone/right-msg-box.png b/static/image/phone-message/iphone/right-msg-box.png
new file mode 100644
index 0000000..b76d732
Binary files /dev/null and b/static/image/phone-message/iphone/right-msg-box.png differ
diff --git a/static/image/phone-message/iphone/right.png b/static/image/phone-message/iphone/right.png
new file mode 100644
index 0000000..5478430
Binary files /dev/null and b/static/image/phone-message/iphone/right.png differ
diff --git a/static/image/phone-message/mi/back.png b/static/image/phone-message/mi/back.png
new file mode 100644
index 0000000..ed52793
Binary files /dev/null and b/static/image/phone-message/mi/back.png differ
diff --git a/static/image/phone-message/mi/chat-left.png b/static/image/phone-message/mi/chat-left.png
new file mode 100644
index 0000000..9a2b54d
Binary files /dev/null and b/static/image/phone-message/mi/chat-left.png differ
diff --git a/static/image/phone-message/mi/default.png b/static/image/phone-message/mi/default.png
new file mode 100644
index 0000000..8f02c31
Binary files /dev/null and b/static/image/phone-message/mi/default.png differ
diff --git a/static/image/phone-message/mi/mic.png b/static/image/phone-message/mi/mic.png
new file mode 100644
index 0000000..f99b9a2
Binary files /dev/null and b/static/image/phone-message/mi/mic.png differ
diff --git a/static/image/phone-message/oppo/chat-left.png b/static/image/phone-message/oppo/chat-left.png
new file mode 100644
index 0000000..1a62455
Binary files /dev/null and b/static/image/phone-message/oppo/chat-left.png differ
diff --git a/static/image/phone-message/oppo/default.png b/static/image/phone-message/oppo/default.png
new file mode 100644
index 0000000..eb2f327
Binary files /dev/null and b/static/image/phone-message/oppo/default.png differ
diff --git a/static/image/phone-message/shanchu.png b/static/image/phone-message/shanchu.png
new file mode 100644
index 0000000..33439dc
Binary files /dev/null and b/static/image/phone-message/shanchu.png differ
diff --git a/static/image/phone-message/vivo/default.png b/static/image/phone-message/vivo/default.png
new file mode 100644
index 0000000..b499137
Binary files /dev/null and b/static/image/phone-message/vivo/default.png differ
diff --git a/utils/common.js b/utils/common.js
index 3a66351..b91db10 100644
--- a/utils/common.js
+++ b/utils/common.js
@@ -104,6 +104,64 @@ export const dateUtil = {
       const day = String(date.getDate()).padStart(2, '0');
       return `${month}-${day} ${timeStr}`;
     }
+  },
+
+  /**
+   * 仿支付宝消息列表时间格式化
+   * 今天: 原样不显示 (或者按需可显示 HH:mm) 但根据你的图示只有 昨天/星期/日期
+   * 昨天: 返回 "昨天"
+   * 近一周内且不是今天昨天: 返回 "星期X"
+   * 超过一周: 按照 format 返回 (或根据 hideCurrentYear 决定当年是否隐藏年份)
+   * @param {Date|string|number} date - 日期对象或时间戳
+   * @param {boolean} hideCurrentYear - 是否在当年隐藏年份，默认为 true
+   * @param {string} format - 自定义日期格式，默认为 'YYYY/M/D' (支持 YYYY, MM, M, DD, D 等)
+   * @returns {string} 格式化后的时间字符串
+   */
+  formatMessageTime(date, hideCurrentYear = false, format = 'YYYY/M/D') {
+    if (!date) return '';
+
+    if (typeof date === 'string' || typeof date === 'number') {
+      // 兼容 iOS 的 YYYY-MM-DD 解析
+      if (typeof date === 'string') {
+        date = date.replace(/-/g, '/');
+      }
+      date = new Date(date);
+    }
+
+    const now = new Date();
+    // 将时分秒抹零，只取日期部分进行比对
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+    const diffDays = Math.floor((today.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) {
+      // 如果需要显示今天的具体时间可返回： `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+      return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    } else if (diffDays === 1) {
+      return '昨天';
+    } else if (diffDays > 1 && diffDays < 7) {
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      return weekDays[date.getDay()];
+    } else {
+      // 超过7天
+      let resultFormat = format;
+      if (hideCurrentYear && targetDate.getFullYear() === now.getFullYear()) {
+        // 智能去除年份及紧跟的连接符、汉字或变宽空格（例如: "YYYY-", "YYYY/", "YYYY年"）
+        resultFormat = resultFormat.replace(/YYYY[-/年\s]*/g, '');
+      }
+
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+
+      return resultFormat
+        .replace(/YYYY/g, year)
+        .replace(/MM/g, String(month).padStart(2, '0'))
+        .replace(/M/g, month)
+        .replace(/DD/g, String(day).padStart(2, '0'))
+        .replace(/D/g, day);
+    }
   }
 };