cfc/.superpowers/brainstorm/9864-1780551730/content/approaches.html

<h2>登录前预览 — 3种架构方案</h2>
<p class="subtitle">混合型内容，决定了放「什么」，现在选「怎么放」</p>

<div class="cards">
  <div class="card" data-choice="a" onclick="toggleSelect(this)">
    <div class="card-body">
      <h3>A. 独立欢迎页 + 登录入口</h3>
      <p style="margin:8px 0;font-size:14px;color:#666;">
        新增一个独立的 <code>landing.vue</code> 作为小程序第一屏
      </p>
      <div class="mockup" style="margin:12px 0;">
        <div class="mockup-header">Landing Page</div>
        <div class="mockup-body" style="padding:16px;">
          <div style="background:#f0f4ff;padding:20px;border-radius:12px;margin-bottom:12px;">
            <div style="font-size:18px;font-weight:bold;color:#333;">🌟 溪艾福</div>
            <div style="font-size:13px;color:#888;margin:4px 0;">家庭主动健康管理平台</div>
          </div>
          <div style="background:linear-gradient(135deg,#1a1a2e,#16213e);padding:16px;border-radius:12px;margin-bottom:12px;">
            <div style="display:flex;justify-content:space-between;color:#FFD700;font-size:13px;">
              <span>🔥心·火</span><span>🌿行·木</span><span>💧富·水</span>
            </div>
          </div>
          <div style="display:flex;gap:8px;margin-bottom:12px;">
            <div style="flex:1;height:60px;background:#f0f0f0;border-radius:8px;"></div>
            <div style="flex:1;height:60px;background:#f0f0f0;border-radius:8px;"></div>
          </div>
          <div style="background:#667eea;color:#fff;text-align:center;padding:12px;border-radius:24px;font-size:15px;">
            开始使用 →
          </div>
          <div style="text-align:center;margin-top:8px;font-size:12px;color:#999;">
            已有账号？登录
          </div>
        </div>
      </div>
      <div class="pros-cons" style="margin-top:12px;">
        <div class="pros"><h4>优点</h4><ul><li>内容丰富，展示空间大</li><li>引导性强，适合品牌传达</li><li>不干扰现有登录逻辑</li></ul></div>
        <div class="cons"><h4>缺点</h4><ul><li>多一次页面跳转</li><li>需管理新页面</li></ul></div>
      </div>
    </div>
  </div>

  <div class="card" data-choice="b" onclick="toggleSelect(this)">
    <div class="card-body">
      <h3>B. 登录页增强（内容嵌入登录页）</h3>
      <p style="margin:8px 0;font-size:14px;color:#666;">
        改造现有 <code>login.vue</code>，上方内容展示 + 下方登录表单
      </p>
      <div class="mockup" style="margin:12px 0;">
        <div class="mockup-header">登录页增强版</div>
        <div class="mockup-body" style="padding:16px;">
          <div style="display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;">
            <div style="min-width:80px;height:80px;background:#f0f4ff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#666;">
              <span style="font-size:24px;">🏆</span>
              任务积分
            </div>
            <div style="min-width:80px;height:80px;background:#fff5e6;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#666;">
              <span style="font-size:24px;">⭐</span>
              五行沙盘
            </div>
            <div style="min-width:80px;height:80px;background:#e6f7ff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#666;">
              <span style="font-size:24px;">👨‍👩‍👧</span>
              双角色
            </div>
          </div>
          <div style="height:1px;background:#eee;margin:12px 0;"></div>
          <div style="background:#f5f5f5;padding:16px;border-radius:12px;">
            <div style="font-size:14px;font-weight:bold;margin-bottom:8px;">手机号登录</div>
            <div style="height:40px;background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:8px;"></div>
            <div style="height:40px;background:#667eea;border-radius:20px;margin-bottom:8px;"></div>
          </div>
          <div style="text-align:center;margin-top:8px;">
            <span style="font-size:12px;color:#999;">先看看 →</span>
          </div>
        </div>
      </div>
      <div class="pros-cons" style="margin-top:12px;">
        <div class="pros"><h4>优点</h4><ul><li>无新增页面跳转</li><li>用户可直接看到内容</li></ul></div>
        <div class="cons"><h4>缺点</h4><ul><li>内容空间有限</li><li>登录与浏览体验混杂</li><li>长页面在小屏上体验不佳</li></ul></div>
      </div>
    </div>
  </div>

  <div class="card" data-choice="c" onclick="toggleSelect(this)">
    <div class="card-body">
      <h3>C. TabBar 解除登录限制</h3>
      <p style="margin:8px 0;font-size:14px;color:#666;">
        允许未登录用户访问「发现」「商城」Tab，操作时再提示登录
      </p>
      <div class="mockup" style="margin:12px 0;">
        <div class="mockup-header">TabBar 模式</div>
        <div class="mockup-body" style="padding:16px;">
          <div style="display:flex;justify-content:space-around;margin-bottom:12px;">
            <span style="font-size:12px;color:#FF6B6B;">首页</span>
            <span style="font-size:12px;color:#999;">发现</span>
            <span style="font-size:12px;color:#999;">商城</span>
            <span style="font-size:12px;color:#999;">我的</span>
          </div>
          <div style="background:#f9f9f9;padding:16px;border-radius:12px;">
            <div style="font-size:15px;font-weight:bold;margin-bottom:12px;">📖 精选内容</div>
            <div style="display:flex;gap:8px;margin-bottom:12px;">
              <div style="flex:1;height:80px;background:#ddd;border-radius:8px;"></div>
              <div style="flex:2;height:80px;background:#eee;border-radius:8px;padding:8px;">
                <div style="font-size:13px;font-weight:bold;">培养孩子专注力的5个方法</div>
                <div style="font-size:11px;color:#999;">2026-06-01</div>
              </div>
            </div>
            <div style="display:flex;gap:8px;">
              <div style="flex:1;height:80px;background:#ddd;border-radius:8px;"></div>
              <div style="flex:2;height:80px;background:#eee;border-radius:8px;padding:8px;">
                <div style="font-size:13px;font-weight:bold;">DAN测评：了解孩子的天赋</div>
                <div style="font-size:11px;color:#999;">2026-05-28</div>
              </div>
            </div>
          </div>
          <div style="background:#667eea;color:#fff;text-align:center;padding:10px;border-radius:20px;margin-top:12px;font-size:13px;">
            🔒 登录解锁全部功能
          </div>
        </div>
      </div>
      <div class="pros-cons" style="margin-top:12px;">
        <div class="pros"><h4>优点</h4><ul><li>用户体验最流畅</li><li>TabBar内容直接可看</li><li>登录是后台的事，前台体验完整</li></ul></div>
        <div class="cons"><h4>缺点</h4><ul><li>需改造路由守卫</li><li>「发现」内容需提前准备</li><li>API层需区分登录态</li></ul></div>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top:24px;padding:16px;background:#f0f7ff;border-radius:12px;border-left:4px solid #667eea;">
  <h3 style="margin-top:0;">💡 我的推荐：方案 C 为主 + 方案 A 为辅</h3>
  <p style="font-size:14px;color:#555;">
    <strong>方案 C</strong> 解除 TabBar 限制是最自然的体验——用户打开小程序就能看到「发现」页的精选内容和「商城」的服务列表。
    同时在 login 页顶部做一个精简的产品亮点展示（方案 A 的精简版），让登录页本身也有吸引力。
  </p>
</div>

<p style="margin-top:16px;font-size:14px;color:#888;">点击卡片选择你倾向的方案，然后告诉我你的想法。</p>