yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的</title>
  <link rel="icon" type="image/png" href="../../static/favicon.png">
  <link rel="stylesheet" href="../../css/profile/profile.css">
  <link rel="stylesheet" href="../../css/hint-view.css">
</head>
<body>
  <!-- 充值界面 iframe -->
  <iframe id="rechargeViewFrame" src="../recharge-view/recharge-view.html" frameborder="0" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000004; border: none; background: transparent;"></iframe>
  <!-- 导出下载 iframe -->
  <iframe id="exportViewFrame" src="../export/export-view.html" frameborder="0" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000005; border: none; pointer-events: none; visibility: hidden; background: transparent;"></iframe>
  <!-- 下载选择弹窗 -->
  <div class="download-confirm-overlay" id="downloadConfirmOverlay" style="display: none;">
    <div class="download-confirm-modal">
      <div class="download-confirm-header">
        <h3>选择下载方式</h3>
        <button class="download-confirm-close" id="downloadConfirmClose">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      <div class="download-confirm-content">
        <div class="download-option" data-option="original">
          <div class="download-option-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="download-option-info">
            <div class="download-option-title">源文件下载</div>
            <div class="download-option-desc">直接下载原始图片，不进行抠图处理</div>
          </div>
        </div>
        <div class="download-option" data-option="normal">
          <div class="download-option-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 7C6 7 8 9 10 11C12 13 12 15 12 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M18 7C18 7 16 9 14 11C12 13 12 15 12 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="6" cy="7" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
              <circle cx="18" cy="7" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
              <path d="M12 15L12 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="download-option-info">
            <div class="download-option-title">普通抠图下载</div>
            <div class="download-option-desc">使用 rembg 进行抠图处理</div>
          </div>
        </div>
        <div class="download-option" data-option="vip">
          <div class="download-option-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="currentColor" fill-opacity="0.1"/>
            </svg>
          </div>
          <div class="download-option-info">
            <div class="download-option-title">VIP抠图下载</div>
            <div class="download-option-desc">使用 BiRefNet 进行高质量抠图处理</div>
            <div class="download-option-price" id="vipMattingPrice">-</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="profile-container">
    <!-- 返回按钮 -->
    <div class="profile-header">
      <button class="back-btn" id="backBtn">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        返回
      </button>
    </div>

    <div class="profile-content">
      <h1 class="page-title">我的</h1>
      <div class="profile-layout">
        <!-- 左侧：用户信息区域 -->
        <div class="profile-left">
          <!-- 用户资料区域 -->
          <div class="profile-section">
            <h2 class="section-title">用户资料</h2>
            <div class="profile-info">
              <div class="avatar-section">
                <div class="avatar-preview" id="avatarPreview">
                  <img id="avatarImage" src="" alt="头像">
                </div>
              </div>
              
              <div class="info-form">
                <div class="form-item">
                  <label class="form-label">用户名</label>
                  <input type="text" class="form-input" id="usernameInput" readonly>
                </div>
                <div class="form-item">
                  <label class="form-label">手机号</label>
                  <input type="text" class="form-input" id="phoneInput" readonly>
                </div>
              </div>
            </div>
          </div>

          <!-- Ani币区域 -->
          <div class="profile-section points-card">
            <div class="points-section">
              <div class="points-display">
                <span class="points-label">账户余额</span>
                <div class="points-value-row">
                  <span class="points-value" id="pointsValue">0</span>
                  <span class="points-unit">Ani币</span>
                </div>
              </div>
              <button class="recharge-btn" id="rechargeBtn">
                <span>充值</span>
              </button>
            </div>
          </div>

          <!-- 退出登录按钮 -->
          <button class="logout-btn" id="logoutBtn">退出登录</button>
        </div>

        <!-- 右侧：AI生图历史和购买记录 -->
        <div class="profile-right">
          <div class="profile-section history-section">
            <h2 class="section-title">AI生图历史</h2>
            <div class="ai-history-container" id="aiHistoryContainer">
              <div class="loading-state" id="historyLoading">加载中...</div>
              <div class="empty-state" id="historyEmpty" style="display: none;">暂无历史记录</div>
              <div class="history-grid" id="historyGrid"></div>
            </div>
          </div>
          
          <div class="profile-section purchase-section">
            <h2 class="section-title">素材购买记录</h2>
            <div class="purchase-container" id="purchaseContainer">
              <div class="loading-state" id="purchaseLoading">加载中...</div>
              <div class="empty-state" id="purchaseEmpty" style="display: none;">暂无购买记录</div>
              <div class="purchase-grid" id="purchaseGrid"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../../js/hint-view.js"></script>
  <script src="../../js/profile/profile.js"></script>
</body>
</html>