编辑“︁赞助会员”︁

<div id="contributor-container">
  <div class="jiazai">数据加载中...</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(100px, 1fr)
  ); /* 自动填充网格列，每列最小200px，最大1fr */
  gap: 20px; /* 设置网格项之间的间距 */
  /* padding: 20px; */
  margin-bottom: 1em;
}

.card {
  display: flex;
  flex-direction: column; /* 设置项目垂直排列 */
  align-items: center; /* 水平居中对齐项目 */
  background: #f9f9f9; /* 浅灰色背景 */
  border-radius: 10px; /* 圆角 */
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
}

.avatar {
  width: 60px; /* 头像宽度 */
  height: 60px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  margin-bottom: 10px; /* 头像与下面文本的间距 */
}

.info {
  text-align: center; /* 文本居中 */
  width: 100%;
}

.name {
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-bottom: 5px; /* 与金额间距 */
  word-wrap: break-word;
}

.amount {
  font-size: 14px;
  color: #666;
}

.jiazai {
    min-height: 101vh;
}
</style>

<script>
// 等待页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('contributor-container');
  
  // 发起请求（和原 React 代码的 /afd.php 接口一致）
  fetch('/afd.php')
    .then(response => {
      if (!response.ok) throw new Error('接口请求失败');
      return response.json();
    })
    .then(data => {
      if (data.length === 0) {
        container.innerHTML = '<div class="jiazai">暂无贡献伙伴数据~</div>';
        return;
      }

      // 渲染贡献伙伴列表
      let html = '<div class="grid-container">';
      data.forEach((sponsor, index) => {
        // 避免空头像/空名称导致的显示异常
        const avatarSrc = sponsor.avatar || 'https://via.placeholder.com/80'; // 占位图
        const sponsorName = sponsor.name || '匿名伙伴';
        
        html += `
          <div class="card" key="${index}">
            <img src="${avatarSrc}" alt="${sponsorName}" class="avatar" />
            <div class="info">
              <div class="name">${sponsorName}</div>
              <!-- 如需显示金额，取消下面注释： -->
              <!-- <div class="amount">￥${sponsor.amount || '0'}</div> -->
            </div>
          </div>
        `;
      });
      html += '</div>';
      
      container.innerHTML = html;
    })
    .catch(error => {
      console.error('加载失败:', error);
      container.innerHTML = '<div class="jiazai">数据加载失败，请稍后重试~</div>';
    });
});
</script>