emoon-backend/.superpowers/brainstorm/86383-1780383912/content/registration-flow-ab.html

<h2>A+B 混合方案：挂号闭环交互图</h2>
<p class="subtitle">第一屏亲和助手，进入挂号后切成“对话 + 流程进度 + 业务卡片”的工作台。</p>

<div class="mockup">
  <div class="mockup-header">推荐交互流：Web 演示优先 · 挂号闭环</div>
  <div class="mockup-body">
    <div style="display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;gap:10px;align-items:stretch">
      <div style="border:1px solid #dce8e4;border-radius:14px;background:#f8fcfb;padding:16px">
        <div style="font-size:12px;color:#6b7b78;margin-bottom:8px">01 首页</div>
        <div style="font-weight:900;font-size:20px;margin-bottom:10px">亲和助手入口</div>
        <div style="height:72px;border-radius:16px;background:linear-gradient(135deg,#e8fbf4,#b4ead9);display:flex;align-items:center;padding:12px;font-weight:800">你好，我来帮你挂号</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px">
          <div style="background:white;border:1px solid #dce8e4;border-radius:10px;padding:10px">我要挂号</div>
          <div style="background:white;border:1px solid #dce8e4;border-radius:10px;padding:10px">科室导诊</div>
        </div>
      </div>
      <div style="display:grid;place-items:center;font-size:24px;color:#7b8b87">→</div>
      <div style="border:1px solid #dce8e4;border-radius:14px;background:#ffffff;padding:16px">
        <div style="font-size:12px;color:#6b7b78;margin-bottom:8px">02 对话启动</div>
        <div style="font-weight:900;font-size:20px;margin-bottom:10px">症状或科室进入</div>
        <div style="background:#f0f6f4;border-radius:12px;padding:10px;margin-bottom:8px">“我头疼三天，想挂号”</div>
        <div style="background:#159b78;color:white;border-radius:12px;padding:10px">SSE 返回任务 + 首张卡片</div>
      </div>
      <div style="display:grid;place-items:center;font-size:24px;color:#7b8b87">→</div>
      <div style="border:1px solid #dce8e4;border-radius:14px;background:#f7fafc;padding:16px">
        <div style="font-size:12px;color:#6b7b78;margin-bottom:8px">03 工作台</div>
        <div style="font-weight:900;font-size:20px;margin-bottom:10px">对话 + 流程 + 卡片</div>
        <div style="display:grid;grid-template-columns:1fr 120px;gap:8px">
          <div style="height:96px;background:white;border:1px solid #dfe8ec;border-radius:12px;padding:10px">对话消息流</div>
          <div style="height:96px;background:white;border:1px solid #dfe8ec;border-radius:12px;padding:10px">挂号进度<br>2/5</div>
        </div>
      </div>
    </div>

    <div style="margin-top:22px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px">
      <div style="background:white;border:1px solid #dfe8ec;border-radius:14px;padding:12px">
        <strong>科室</strong>
        <p style="margin:6px 0 0;color:#65736f">推荐理由 + 选择</p>
      </div>
      <div style="background:white;border:1px solid #dfe8ec;border-radius:14px;padding:12px">
        <strong>医生</strong>
        <p style="margin:6px 0 0;color:#65736f">职称、擅长、诊室</p>
      </div>
      <div style="background:white;border:1px solid #dfe8ec;border-radius:14px;padding:12px">
        <strong>时间</strong>
        <p style="margin:6px 0 0;color:#65736f">号源剩余 + 锁号</p>
      </div>
      <div style="background:white;border:1px solid #dfe8ec;border-radius:14px;padding:12px">
        <strong>Mock 支付</strong>
        <p style="margin:6px 0 0;color:#65736f">二维码 + 模拟支付</p>
      </div>
      <div style="background:white;border:1px solid #dfe8ec;border-radius:14px;padding:12px">
        <strong>成功</strong>
        <p style="margin:6px 0 0;color:#65736f">预约号 + Mock 标识</p>
      </div>
    </div>
  </div>
</div>

<div class="options">
  <div class="option" data-choice="route-1" onclick="toggleSelect(this)">
    <div class="letter">1</div>
    <div class="content">
      <h3>推荐：单应用 Web Demo</h3>
      <p>一个 Vite/Vue 应用，固定 Web 演示视口，内置 mock/fallback 数据，同时接真实后端 API。最快产出演示效果。</p>
    </div>
  </div>
  <div class="option" data-choice="route-2" onclick="toggleSelect(this)">
    <div class="letter">2</div>
    <div class="content">
      <h3>Monorepo 正式版</h3>
      <p>直接搭 `apps/kiosk-client + packages/api-client + medical-cards`。更接近长期工程，但首版搭建和测试成本更高。</p>
    </div>
  </div>
  <div class="option" data-choice="route-3" onclick="toggleSelect(this)">
    <div class="letter">3</div>
    <div class="content">
      <h3>纯静态原型先行</h3>
      <p>先做 HTML/静态交互演示，再接 API。视觉最快，但很容易偏离真实后端协议，不建议作为开发计划主线。</p>
    </div>
  </div>
</div>