cfc/.superpowers/brainstorm/9864-1780551730/content/user-flow.html

<h2>用户流程 & 内容结构设计</h2>
<p class="subtitle">方案 C（TabBar解锁）+ A（登录页增强）合并设计</p>

<div class="section">
  <h3>📱 用户进入流程</h3>
  <div style="display:flex;align-items:center;gap:16px;padding:16px;background:#f9f9f9;border-radius:12px;flex-wrap:wrap;">
    <div style="flex:1;min-width:120px;text-align:center;padding:12px;background:#667eea;color:#fff;border-radius:12px;font-size:13px;">
      打开小程序
    </div>
    <div style="font-size:20px;color:#999;">→</div>
    <div style="flex:1;min-width:120px;text-align:center;padding:12px;background:#764ba2;color:#fff;border-radius:12px;font-size:13px;">
      发现 Tab<br/><span style="font-size:11px;">(未登录亦可浏览)</span>
    </div>
    <div style="font-size:20px;color:#999;">→</div>
    <div style="flex:1;min-width:120px;text-align:center;padding:12px;background:#f5f5f5;border-radius:12px;font-size:13px;color:#666;">
      浏览内容 ← 浏览商城<br/>浏览服务商
    </div>
    <div style="font-size:20px;color:#999;">→</div>
    <div style="flex:1;min-width:120px;text-align:center;padding:12px;background:#FF6B6B;color:#fff;border-radius:12px;font-size:13px;">
      点击需登录功能<br/><span style="font-size:11px;">→ 跳转登录页</span>
    </div>
    <div style="font-size:20px;color:#999;">→</div>
    <div style="flex:1;min-width:120px;text-align:center;padding:12px;background:#07c160;color:#fff;border-radius:12px;font-size:13px;">
      登录后回到<br/>之前页面
    </div>
  </div>
</div>

<div style="display:flex;gap:24px;margin-top:24px;">
  <div style="flex:1;">
    <h3>发现 Tab — 内容设计</h3>
    <div class="mockup">
      <div class="mockup-header">发现（未登录）</div>
      <div class="mockup-body" style="padding:12px;">
        <!-- 顶部轮播 -->
        <div style="height:140px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;margin-bottom:12px;padding:16px;color:#fff;">
          <div style="font-size:18px;font-weight:bold;">溪艾福 Care Family Club</div>
          <div style="font-size:12px;opacity:0.9;margin-top:4px;">以五行五维为内核的家庭主动健康管理平台</div>
          <div style="display:flex;gap:8px;margin-top:12px;">
            <span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:12px;font-size:11px;">🏆 任务积分</span>
            <span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:12px;font-size:11px;">⭐ 五行沙盘</span>
            <span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:12px;font-size:11px;">👨‍👩‍👧 家庭共育</span>
          </div>
        </div>
        
        <!-- 功能入口图标 -->
        <div style="display:flex;justify-content:space-around;margin-bottom:12px;">
          <div style="text-align:center;">
            <div style="width:48px;height:48px;background:#f0f4ff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">🔥</div>
            <div style="font-size:11px;color:#666;margin-top:4px;">心·火</div>
          </div>
          <div style="text-align:center;">
            <div style="width:48px;height:48px;background:#fff5e6;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">🌿</div>
            <div style="font-size:11px;color:#666;margin-top:4px;">行·木</div>
          </div>
          <div style="text-align:center;">
            <div style="width:48px;height:48px;background:#e6f7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">🌏</div>
            <div style="font-size:11px;color:#666;margin-top:4px;">身·土</div>
          </div>
          <div style="text-align:center;">
            <div style="width:48px;height:48px;background:#f0fff0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">⚔️</div>
            <div style="font-size:11px;color:#666;margin-top:4px;">智·金</div>
          </div>
          <div style="text-align:center;">
            <div style="width:48px;height:48px;background:#fef0f0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">💧</div>
            <div style="font-size:11px;color:#666;margin-top:4px;">富·水</div>
          </div>
        </div>

        <!-- 精选内容列表 -->
        <div style="font-size:14px;font-weight:bold;margin-bottom:8px;">📖 精选内容</div>
        <div style="background:#f9f9f9;border-radius:10px;padding:12px;margin-bottom:8px;">
          <div style="font-size:13px;font-weight:bold;">培养孩子专注力的5个实用方法</div>
          <div style="font-size:11px;color:#999;margin-top:4px;">🔥 心·火 · 2026-06-01</div>
        </div>
        <div style="background:#f9f9f9;border-radius:10px;padding:12px;margin-bottom:8px;">
          <div style="font-size:13px;font-weight:bold;">DAN测评：科学了解孩子的认知天赋</div>
          <div style="font-size:11px;color:#999;margin-top:4px;">⚔️ 智·金 · 2026-05-28</div>
        </div>
        <div style="background:#f9f9f9;border-radius:10px;padding:12px;margin-bottom:8px;">
          <div style="font-size:13px;font-weight:bold;">家庭任务积分制：让孩子主动学习</div>
          <div style="font-size:11px;color:#999;margin-top:4px;">🌿 行·木 · 2026-05-25</div>
        </div>
        
        <!-- 底部登录引导 -->
        <div style="text-align:center;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;margin-top:8px;">
          <div style="color:#fff;font-size:14px;font-weight:bold;">登录解锁全部功能</div>
          <div style="color:rgba(255,255,255,0.8);font-size:11px;margin-top:4px;">创建家庭、管理任务、查看五行能量沙盘</div>
        </div>
      </div>
    </div>
  </div>

  <div style="flex:1;">
    <h3>登录页 — 顶部增强</h3>
    <div class="mockup">
      <div class="mockup-header">登录页（增强版）</div>
      <div class="mockup-body" style="padding:12px;">
        <!-- 精简亮点 -->
        <div style="text-align:center;margin-bottom:16px;">
          <div style="font-size:22px;font-weight:bold;color:#333;">溪艾福</div>
          <div style="font-size:12px;color:#888;">Care Family Club</div>
        </div>
        
        <!-- 3个亮点卡片 -->
        <div style="display:flex;gap:8px;margin-bottom:16px;">
          <div style="flex:1;background:#f0f4ff;border-radius:10px;padding:12px;text-align:center;">
            <div style="font-size:28px;">🏆</div>
            <div style="font-size:12px;font-weight:bold;margin-top:4px;">任务积分</div>
            <div style="font-size:10px;color:#888;">激励自主完成任务</div>
          </div>
          <div style="flex:1;background:#fff5e6;border-radius:10px;padding:12px;text-align:center;">
            <div style="font-size:28px;">⭐</div>
            <div style="font-size:12px;font-weight:bold;margin-top:4px;">五行沙盘</div>
            <div style="font-size:10px;color:#888;">五维成长可视化</div>
          </div>
          <div style="flex:1;background:#e6f7ff;border-radius:10px;padding:12px;text-align:center;">
            <div style="font-size:28px;">👨‍👩‍👧</div>
            <div style="font-size:12px;font-weight:bold;margin-top:4px;">双角色</div>
            <div style="font-size:10px;color:#888;">家长孩子协同</div>
          </div>
        </div>

        <!-- 分隔 -->
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
          <div style="flex:1;height:1px;background:#eee;"></div>
          <span style="font-size:12px;color:#999;">登录后使用完整功能</span>
          <div style="flex:1;height:1px;background:#eee;"></div>
        </div>

        <!-- 登录表单（简化） -->
        <div style="background:#f5f5f5;border-radius:12px;padding:16px;">
          <div style="height:44px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;padding:0 12px;">
            <span style="font-size:13px;color:#999;">手机号</span>
          </div>
          <div style="height:44px;background:#667eea;color:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:bold;margin-bottom:8px;">
            获取验证码
          </div>
          <div style="height:44px;background:#07c160;color:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:bold;">
            微信一键登录
          </div>

          <div style="text-align:center;margin-top:8px;">
            <span style="font-size:11px;color:#999;">先浏览看看 →</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="display:flex;gap:24px;margin-top:24px;">
  <div style="flex:1;">
    <h3>商城 Tab — 内容设计</h3>
    <div class="mockup">
      <div class="mockup-header">商城（未登录预览）</div>
      <div class="mockup-body" style="padding:12px;">
        <!-- 分类入口 -->
        <div style="display:flex;gap:8px;margin-bottom:12px;">
          <span style="background:#f0f4ff;color:#667eea;padding:6px 14px;border-radius:16px;font-size:12px;font-weight:bold;">全部</span>
          <span style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:16px;font-size:12px;">课程</span>
          <span style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:16px;font-size:12px;">活动</span>
          <span style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:16px;font-size:12px;">商品</span>
        </div>
        <!-- 商品卡片 -->
        <div style="background:#fff;border:1px solid #f0f0f0;border-radius:12px;overflow:hidden;margin-bottom:8px;">
          <div style="height:100px;background:#f0f4ff;display:flex;align-items:center;justify-content:center;font-size:32px;">🧘</div>
          <div style="padding:10px;">
            <div style="font-size:13px;font-weight:bold;">亲子瑜伽体验课</div>
            <div style="font-size:11px;color:#FF6B6B;margin-top:4px;">¥199</div>
          </div>
        </div>
        <div style="background:#fff;border:1px solid #f0f0f0;border-radius:12px;overflow:hidden;margin-bottom:8px;">
          <div style="height:100px;background:#fff5e6;display:flex;align-items:center;justify-content:center;font-size:32px;">🎮</div>
          <div style="padding:10px;">
            <div style="font-size:13px;font-weight:bold;">舒尔特方格专注力训练</div>
            <div style="font-size:11px;color:#FF6B6B;margin-top:4px;">¥49</div>
          </div>
        </div>
        <div style="text-align:center;padding:12px;color:#999;font-size:12px;">
          登录查看全部商品和服务
        </div>
      </div>
    </div>
  </div>

  <div style="flex:1;">
    <h3>我的 Tab — 未登录状态</h3>
    <div class="mockup">
      <div class="mockup-header">我的（未登录）</div>
      <div class="mockup-body" style="padding:12px;">
        <!-- 登录入口 -->
        <div style="text-align:center;padding:24px 0;">
          <div style="width:64px;height:64px;border-radius:32px;background:#f0f0f0;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:32px;">👤</div>
          <div style="font-size:14px;color:#333;font-weight:bold;">登录/注册</div>
          <div style="font-size:12px;color:#999;margin-top:4px;">登录后使用全部功能</div>
          <div style="margin-top:12px;">
            <span style="display:inline-block;padding:8px 32px;background:#667eea;color:#fff;border-radius:20px;font-size:14px;">立即登录</span>
          </div>
        </div>

        <!-- 占位菜单 -->
        <div style="border-top:1px solid #f0f0f0;padding-top:12px;">
          <div style="display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5;">
            <span style="font-size:16px;margin-right:8px;">📖</span>
            <span style="font-size:13px;color:#666;">关于溪艾福</span>
          </div>
          <div style="display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5;">
            <span style="font-size:16px;margin-right:8px;">💬</span>
            <span style="font-size:13px;color:#666;">意见反馈</span>
          </div>
          <div style="display:flex;align-items:center;padding:12px 0;">
            <span style="font-size:16px;margin-right:8px;">⚙️</span>
            <span style="font-size:13px;color:#666;">设置</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top:24px;padding:16px;background:#f9fff0;border-radius:12px;border-left:4px solid #07c160;">
  <h3 style="margin-top:0;">📋 需要实现的核心改动</h3>
  <ol style="font-size:14px;color:#555;line-height:1.8;padding-left:20px;">
    <li><strong>路由守卫改造</strong> — 允许未登录访问指定的 TabBar 页面（发现、商城、我的）</li>
    <li><strong>发现页内容重构</strong> — 新增未登录可看的精选内容（产品介绍、文章等）</li>
    <li><strong>商城页未登录态</strong> — 展示商品/服务列表，操作时引导登录</li>
    <li><strong>我的页未登录态</strong> — 显示登录入口 + 基础信息</li>
    <li><strong>登录页顶部增强</strong> — 加产品亮点三卡片展示</li>
    <li><strong>引导按钮</strong> — 登录页底部"先浏览看看"可回到发现Tab</li>
  </ol>
</div>

<p style="margin-top:16px;font-size:14px;color:#888;">看看各页面的布局设计是否合理？有哪些地方想调整？</p>