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

  <!-- 顶部标题栏 -->
    <div class="header">
        <div class="header-title">我的</div>
    </div>

</ion-header>

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

    <!-- 顶部信息栏 -->
    <div class="profile-header">
        <div class="user-info">
            <div>
                <div class="user-name">{{ currentUser?.get('username') || '匿名用户' }}</div>
                <div class="user-id">UID:{{ currentUser?.id?.substring(0, 16) || '未登录' }}...</div>
            </div>
            <button (click)="goLogin('登录')" class="copy-btn">{{ currentUser ? '登出' : '登录' }}</button>
        </div>
        
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-number">{{ diaryCount }}</div>
                <div class="stat-label">日记数量</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ recordDays }}</div>
                <div class="stat-label">记录天数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ totalWords }}</div>
                <div class="stat-label">总字数</div>
            </div>
        </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        
        <!-- 会员开通区域 -->
        <div class="premium-card">
            <div class="premium-title">开通专业版</div>
            <div class="premium-desc">享日记加密/自动同步等权益</div>
        </div>
        
        <!-- 图标组区域 -->
        <div class="icon-grid">
            <div class="icon-card">
                <div class="icon-wrapper">
                    <ion-icon name="grid-outline"></ion-icon>
                </div>
                <div class="icon-label">小组件</div>
            </div>
            <div class="icon-card">
                <div class="icon-wrapper">
                    <ion-icon name="book-outline"></ion-icon>
                </div>
                <div class="icon-label">我写的书</div>
            </div>
            <div class="icon-card">
                <div class="icon-wrapper">
                    <ion-icon name="brush-outline"></ion-icon>
                </div>
                <div class="icon-label">装扮空间</div>
            </div>
        </div>
        
        <!-- 功能列表区域 -->
        <div class="function-list">
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="calendar-outline"></ion-icon>
                    </div>
                    <div class="function-name">日签墙</div>
                </div>
                <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
            </div>
            
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="checkmark-done-outline"></ion-icon>
                    </div>
                    <div class="function-name">打卡收集好句子</div>
                </div>
                <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
            </div>
            
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="file-tray-stacked-outline"></ion-icon>
                    </div>
                    <div class="function-name">草稿箱</div>
                </div>
                <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
            </div>
            
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="cloud-upload-outline"></ion-icon>
                    </div>
                    <div class="function-name">同步我的日记</div>
                </div>
                <div>
                    <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
                </div>
            </div>
            
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="images-outline"></ion-icon>
                    </div>
                    <div class="function-name">相册</div>
                </div>
                <div>
                    <!-- <span class="function-badge">0张照片</span> -->
                    <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
                </div>
            </div>
            
            <div class="function-item">
                <div class="function-left">
                    <div class="function-icon">
                        <ion-icon name="settings-outline"></ion-icon>
                    </div>
                    <div class="function-name">设置</div>
                </div>
                <ion-icon name="chevron-forward-outline" class="function-arrow"></ion-icon>
            </div>
        </div>
    </div>

</ion-content> 