cfc/cfc-frontend/.superpowers/brainstorm/1782495-1783004956/content/full-design-v1.html

<h2>活动主页 — 完整设计方案</h2>
<p class="subtitle">推荐路由: /pages/activity/index · 支持维度筛选 · 我的活动优先</p>

<div class="mockup">
  <div class="mockup-header">预览：活动主页（完整方案）</div>
  <div class="mockup-body" style="padding:0;">

    <!-- 顶部状态栏 -->
    <div style="height:24px;background:#1A0F00;"></div>

    <!-- 导航栏 -->
    <div style="background:#1A0F00;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;">
      <div style="color:#fff;font-size:16px;font-weight:bold;">�activities 活动中心</div>
      <div style="color:#fff;font-size:12px;opacity:0.8;">🔍 搜索</div>
    </div>

    <!-- Tab Bar -->
    <div style="display:flex;background:#fff;border-bottom:1px solid #eee;">
      <div style="flex:1;text-align:center;padding:10px 0;color:#F97316;font-size:13px;font-weight:bold;border-bottom:2px solid #F97316;">我的活动</div>
      <div style="flex:1;text-align:center;padding:10px 0;color:#666;font-size:13px;">发现活动</div>
      <div style="flex:1;text-align:center;padding:10px 0;color:#666;font-size:13px;">历史记录</div>
    </div>

    <!-- 我的活动 内容 -->
    <div style="padding:12px 14px;background:#F5F5F5;">

      <!-- 状态筛选 Chips -->
      <div style="display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;">
        <div style="background:#FFF7ED;color:#F97316;padding:5px 12px;border-radius:16px;font-size:11px;white-space:nowrap;">全部</div>
        <div style="background:#fff;color:#666;padding:5px 12px;border-radius:16px;font-size:11px;white-space:nowrap;">🟢 待开始</div>
        <div style="background:#fff;color:#666;padding:5px 12px;border-radius:16px;font-size:11px;white-space:nowrap;">🟡 待审核</div>
        <div style="background:#fff;color:#666;padding:5px 12px;border-radius:16px;font-size:11px;white-space:nowrap;">✅ 已签到</div>
      </div>

      <!-- 活动卡片1 -->
      <div style="background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
        <div style="display:flex;">
          <div style="width:72px;height:72px;background:linear-gradient(135deg,#FDE68A,#F97316);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;">🏃</div>
          <div style="flex:1;margin-left:10px;">
            <div style="font-size:13px;font-weight:bold;color:#333;margin-bottom:3px;">周末亲子自然探索活动</div>
            <div style="font-size:10px;color:#999;margin-bottom:4px;">🕐 07-05 09:00 ~ 17:00</div>
            <div style="font-size:10px;color:#999;margin-bottom:6px;">📍 朝阳公园东门</div>
            <div style="display:flex;gap:4px;flex-wrap:wrap;">
              <span style="background:#F0FDF4;color:#22C55E;font-size:9px;padding:2px 6px;border-radius:3px;">报名成功</span>
              <span style="background:#FFF7ED;color:#F97316;font-size:9px;padding:2px 6px;border-radius:3px;">3天后</span>
            </div>
          </div>
        </div>
        <div style="margin-top:8px;padding-top:8px;border-top:1px solid #f5f5f5;display:flex;justify-content:flex-end;gap:6px;">
          <button style="background:#fff;border:1px solid #ddd;color:#666;padding:5px 12px;border-radius:14px;font-size:10px;">取消报名</button>
          <button style="background:linear-gradient(135deg,#F97316,#FB923C);border:none;color:#fff;padding:5px 12px;border-radius:14px;font-size:10px;">签到</button>
        </div>
      </div>

      <!-- 活动卡片2 -->
      <div style="background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
        <div style="display:flex;">
          <div style="width:72px;height:72px;background:linear-gradient(135deg,#E0E7FF,#6366F1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;">🎨</div>
          <div style="flex:1;margin-left:10px;">
            <div style="font-size:13px;font-weight:bold;color:#333;margin-bottom:3px;">青少年创客编程体验课</div>
            <div style="font-size:10px;color:#999;margin-bottom:4px;">🕐 07-12 14:00 ~ 16:00</div>
            <div style="font-size:10px;color:#999;margin-bottom:6px;">📍 中关村创业大厦3层</div>
            <div style="display:flex;gap:4px;flex-wrap:wrap;">
              <span style="background:#FEF3C7;color:#D97706;font-size:9px;padding:2px 6px;border-radius:3px;">待审核</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<h3 style="margin-top:16px;">推荐技术方案</h3>

<div class="pros-cons">
  <div class="pros">
    <h4>✅ 优势</h4>
    <ul>
      <li>路由 `/pages/activity/index` — 独立清晰，便于分享和跳转</li>
      <li>三 Tab 结构：我的活动 / 发现活动 / 历史记录</li>
      <li>支持按维度(身/心/智/行/富)筛选，发现页可复用 dimensionCode</li>
      <li>签到、取消报名操作直接内嵌在卡片内</li>
      <li>空状态引导去发现页，减少流失</li>
    </ul>
  </div>
  <div class="cons">
    <h4>⚠️ 需确认</h4>
    <ul>
      <li>「历史记录」Tab — 是否需要？（已结束/已签到的活动）</li>
      <li>是否需要展示「我发布的活动」（服务商视角）？</li>
    </ul>
  </div>
</div>

<div class="options" style="margin-top:12px;">
  <div class="option" data-choice="ok" onclick="toggleSelect(this)">
    <div class="letter">✓</div>
    <div class="content">
      <h3>方案可行，开始写设计文档</h3>
      <p>请在终端回复：确认或有调整需求（如去掉历史记录Tab等）</p>
    </div>
  </div>
</div>