<div class="panel" id="my-panel">
    <h2><fa-icon [icon]="icons.user"></fa-icon> 我的账户</h2>
    <p class="section-desc">管理你的设计、收藏、订单和个人信息</p>
    
    <!-- 用户信息卡片 -->
    <div class="user-profile-card">
        <img [src]="user.avatar" alt="用户头像" class="user-avatar" (error)="handleImageError($event)">
        <div class="user-info">
            <div class="user-name">{{user.name}}</div>
            <span class="user-level">{{user.level}}</span>
            <p>欢迎回来！您已设计了{{user.stats.designs}}款羽绒服，收藏了{{user.stats.favorites}}款设计。</p>
            
            <div class="user-stats">
                <div class="stat-item">
                    <div class="stat-value">{{user.stats.designs}}</div>
                    <div class="stat-label">我的设计</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{user.stats.favorites}}</div>
                    <div class="stat-label">我的收藏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{user.stats.orders}}</div>
                    <div class="stat-label">我的订单</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 快速操作区域 -->
    <div class="quick-actions">
        <div class="action-item" *ngFor="let action of quickActions">
            <div class="action-icon" [style.background]="getActionGradient(action.color)">
                <fa-icon [icon]="action.icon"></fa-icon>
            </div>
            <div class="action-title">{{action.title}}</div>
        </div>
    </div>
    
    <!-- 我的订单部分 -->
    <div class="section-title">
        <h3><fa-icon [icon]="icons.shoppingBag"></fa-icon> 最近订单 ({{orders.length}})</h3>
        <a class="view-all">查看全部 ></a>
    </div>
    
    <div class="order-card" *ngFor="let order of orders">
        <div class="order-header">
            <div>
                <span class="order-id">订单号: {{order.id}}</span>
                <span class="order-date">{{order.date}}</span>
            </div>
            <span class="order-status" [ngClass]="getStatusClass(order.status)">
                {{order.status === 'processing' ? '处理中' : 
                  order.status === 'shipped' ? '已发货' : '已完成'}}
            </span>
        </div>
        <div class="order-content">
            <img [src]="order.image" alt="订单商品" class="order-image" (error)="handleImageError($event)">
            <div class="order-details">
                <div class="order-title">{{order.title}}</div>
                <div class="order-description">{{order.description}}</div>
                <div class="order-price">¥{{order.price.toFixed(2)}}</div>
            </div>
        </div>
        <div class="order-actions">
            <button class="btn btn-outline btn-sm">
                <fa-icon [icon]="icons.eye"></fa-icon> 查看详情
            </button>
            <button class="btn btn-primary btn-sm">
                <fa-icon [icon]="order.status === 'delivered' ? icons.redo : icons.truck"></fa-icon>
                {{order.status === 'delivered' ? '再次购买' : '物流跟踪'}}
            </button>
        </div>
    </div>
    
    <!-- 我的设计部分 -->
    <div class="section-title">
        <h3><fa-icon [icon]="icons.palette"></fa-icon> 我的设计 ({{myDesigns.length}})</h3>
        <a class="view-all">查看全部 ></a>
    </div>
    
    <div class="design-gallery">
        <div class="design-item" *ngFor="let design of myDesigns">
            <div class="design-image">
                <img [src]="design.image" alt="我的设计" (error)="handleImageError($event)">
            </div>
            <div class="design-info">
                <div class="design-title">{{design.title}}</div>
                <div class="design-meta">
                    <span>{{design.date}}</span>
                    <span><fa-icon [icon]="icons.heart" style="color: #e74c3c;"></fa-icon> {{design.likes}}</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的收藏部分 -->
    <div class="section-title">
        <h3><fa-icon [icon]="icons.heart"></fa-icon> 我的收藏 ({{favorites.length}})</h3>
        <a class="view-all">查看全部 ></a>
    </div>
    
    <div class="design-gallery">
        <div class="design-item" *ngFor="let favorite of favorites">
            <div class="design-image">
                <img [src]="favorite.image" alt="收藏设计" (error)="handleImageError($event)">
            </div>
            <div class="design-info">
                <div class="design-title">{{favorite.title}}</div>
                <div class="design-meta">
                    <span>{{favorite.author}}</span>
                    <span><fa-icon [icon]="icons.download"></fa-icon> {{favorite.downloads}}</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 空状态示例 (注释掉，实际使用时根据需要显示) -->
    
    <div class="empty-state">
        <fa-icon [icon]="icons.boxOpen" size="2x"></fa-icon>
        <h4>暂无收藏的设计</h4>
        <p>您还没有收藏任何设计，快去发现您喜欢的设计吧！</p>
        <button class="btn btn-primary">
            <fa-icon [icon]="icons.search"></fa-icon> 浏览设计
        </button>
    </div>
    
    
    <div class="action-buttons">
        <button class="btn btn-outline" (click)="openSettings()">
            <fa-icon [icon]="icons.cog"></fa-icon> 设置
        </button>
        <button class="btn btn-primary" (click)="logout()">
            <fa-icon [icon]="icons.signOut"></fa-icon> 退出登录
        </button>
    </div>
</div>







