<ion-header [translucent]="true">
 
  <!-- 顶部标题栏 -->
    <div class="header">
        <i class="header-icon ion-ios-more" id="menuBtn"></i>
        <div class="header-title">日记本</div>
        <i class="header-icon ion-ios-create" id="editBtn"></i>
    </div>

</ion-header>

<ion-content [fullscreen]="true">
    
    <!-- 内容区域 -->
    <div class="content" id="diaryList">
         @for(message of messageList;track message){
        <!-- 日记卡片1 -->
        <div class="diary-card" (click)="goMessage(message)">
            <div class="diary-time">
                <div class="diary-date">{{message.date}}</div>
                <div class="diary-week">{{message.weekday}}</div>
                <div class="diary-hour">{{message.time}}</div>
            </div>
            <div class="diary-content">
                {{message.content}}
            </div>
        </div>
        }
        <div class="load-more" id="loadMore">
            加载更多日记 <i class="ion-ios-arrow-down"></i>
        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 顶部按钮点击事件
            document.getElementById('editBtn').addEventListener('click', function() {
                alert('进入编辑日记模式');
            });
            
            document.getElementById('menuBtn').addEventListener('click', function() {
                alert('打开侧边菜单');
            });
            
            // 加载更多点击事件
            document.getElementById('loadMore').addEventListener('click', function() {
                const loadingText = this.innerHTML;
                this.innerHTML = '加载中...';
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 这里可以添加实际加载更多日记的逻辑
                    alert('已加载更多日记');
                    this.innerHTML = loadingText;
                }, 800);
            });
            
            // 日记卡片点击事件
            const diaryCards = document.querySelectorAll('.diary-card');
            diaryCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 这里可以添加查看日记详情的逻辑
                    console.log('查看日记详情');
                });
            });
        });
    </script>
</ion-content>
