aiapp/myapp/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">

    <!-- 顶部标题栏 -->
    <div class="header">
        <div class="header-title">消息</div>
        <button class="clear-btn">一键清除</button>
    </div>

</ion-header>

<ion-content [fullscreen]="true">

    <!-- 内容区域 -->
    <div class="content">
        <!-- 消息通知卡片 -->
        <div class="notification-card">
            <div class="notification-title">点击打开消息通知</div>
            <div class="notification-desc">把握与TA的互动机会</div>
        </div>
        
        <!-- 好友匹配卡片 -->
        <div class="match-card">
            <div class="match-info">
                <div class="match-title">此刻匹配</div>
                <div class="match-desc">给此刻在线的ta们say hi</div>
            </div>
            <i class="match-icon ion-ios-arrow-forward"></i>
        </div>
        
        <!-- 聊天列表 -->
        <div class="chat-list">
            <!-- 聊天1 -->
            <div class="chat-item">
                <div class="chat-avatar">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23f0e6d6'/><path d='M30,65 Q50,80 70,65' stroke='%23f0e6d6' stroke-width='10' fill='none'/></svg>" alt="用户头像">
                </div>
                <div class="chat-content">
                    <div class="chat-name">阳光小筑</div>
                    <div class="chat-message">你今天的心情怎么样？我刚刚看到一篇不错的文章...</div>
                </div>
                <div class="chat-right">
                    <div class="chat-time">12:30</div>
                    <div class="chat-badge">3</div>
                </div>
            </div>
            
            <!-- 聊天2 -->
            <div class="chat-item">
                <div class="chat-avatar">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23d4b483'/><path d='M30,65 Q50,80 70,65' stroke='%23d4b483' stroke-width='10' fill='none'/></svg>" alt="用户头像">
                </div>
                <div class="chat-content">
                    <div class="chat-name">树洞倾听者</div>
                    <div class="chat-message">我明白你的感受，这种时候确实会很难过...</div>
                </div>
                <div class="chat-right">
                    <div class="chat-time">10:15</div>
                    <div class="chat-badge">1</div>
                </div>
            </div>
            
            <!-- 聊天3 -->
            <div class="chat-item">
                <div class="chat-avatar">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23b38a58'/><path d='M30,65 Q50,80 70,65' stroke='%23b38a58' stroke-width='10' fill='none'/></svg>" alt="用户头像">
                </div>
                <div class="chat-content">
                    <div class="chat-name">情绪管理师</div>
                    <div class="chat-message">试试这个呼吸练习：吸气4秒，屏息4秒，呼气6秒...</div>
                </div>
                <div class="chat-right">
                    <div class="chat-time">昨天</div>
                    <div class="chat-badge"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 一键清除功能
        document.querySelector('.clear-btn').addEventListener('click', function() {
            if(confirm('确定要清除所有未读消息吗？')) {
                document.querySelectorAll('.chat-badge').forEach(badge => {
                    badge.textContent = '';
                    badge.style.backgroundColor = 'transparent';
                });
                alert('已清除所有未读消息');
            }
        });
        
        // 卡片点击效果
        document.querySelectorAll('.notification-card, .match-card').forEach(card => {
            card.addEventListener('click', function() {
                alert('跳转到对应功能页面');
            });
        });
        
        // 聊天项点击效果
        document.querySelectorAll('.chat-item').forEach(item => {
            item.addEventListener('click', function() {
                const name = this.querySelector('.chat-name').textContent;
                alert('进入与 ' + name + ' 的聊天');
                
                // 清除未读红点
                const badge = this.querySelector('.chat-badge');
                if(badge.textContent) {
                    badge.textContent = '';
                    badge.style.backgroundColor = 'transparent';
                }
            });
        });
    </script>

</ion-content>