emoon-backend/.superpowers/brainstorm/86383-1780383912/content/final-web-demo-design-v3.html

<h2>最终修订：右侧上下文面板</h2>
<p class="subtitle">右侧不是固定卡片列表，而是 Context Panel：无卡片时展示静态医生助手形象；有任务卡片时切换为卡片专区。</p>

<div class="split">
  <div class="mockup">
    <div class="mockup-header">空闲 / 普通问答状态</div>
    <div class="mockup-body">
      <div style="height:420px;border:1px solid #dfe7f7;border-radius:18px;background:#f7fbff;padding:16px;font-family:Inter,Arial,sans-serif;color:#16133a">
        <div style="display:grid;grid-template-columns:260px 1fr 360px;gap:14px;height:100%">
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:16px">
            <div style="width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#fff,#3ad4d8 50%,#2b1f99);color:white;display:grid;place-items:center;font-weight:900;margin-bottom:14px">AI</div>
            <strong>医梦门诊助手</strong>
            <p style="font-size:12px;color:#69708a">直接说出需求，我来识别。</p>
          </div>
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:16px;display:flex;flex-direction:column">
            <strong style="font-size:20px">对话入口</strong>
            <div style="margin-top:18px;background:#f5f9ff;border-radius:14px;padding:12px">你好，我可以帮你完成挂号、导诊、医生查询。</div>
            <div style="margin-top:auto;border:1px solid #dce7f7;border-radius:999px;padding:12px;color:#98a1b8">说出你的需求...</div>
          </div>
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center">
            <div style="width:150px;height:170px;border-radius:42% 42% 28% 28%;background:linear-gradient(180deg,#f9fbff,#e8f6ff);border:2px solid #dce7f7;position:relative;margin-bottom:18px">
              <div style="position:absolute;left:45px;top:34px;width:60px;height:60px;border-radius:50%;background:#ffe7d6;border:2px solid #ead2bf"></div>
              <div style="position:absolute;left:57px;top:54px;width:8px;height:8px;border-radius:50%;background:#2b1f99;box-shadow:28px 0 #2b1f99"></div>
              <div style="position:absolute;left:66px;top:76px;width:28px;height:10px;border-bottom:3px solid #2b1f99;border-radius:0 0 20px 20px"></div>
              <div style="position:absolute;left:34px;top:96px;width:82px;height:70px;border-radius:26px 26px 18px 18px;background:#2b1f99"></div>
              <div style="position:absolute;left:48px;top:106px;width:54px;height:18px;border-radius:999px;background:#3ad4d8"></div>
            </div>
            <div style="font-weight:900;font-size:18px">医生助手待命中</div>
            <div style="font-size:12px;color:#69708a;margin-top:8px">后续可接入 TTS / STT，展示正在听、正在说等状态。</div>
            <div style="margin-top:16px;display:flex;gap:8px">
              <span style="background:#f1f0ff;color:#2b1f99;border-radius:999px;padding:7px 10px;font-size:12px">可听</span>
              <span style="background:#e9fbfc;color:#146f82;border-radius:999px;padding:7px 10px;font-size:12px">可说</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="mockup">
    <div class="mockup-header">挂号任务 / 卡片状态</div>
    <div class="mockup-body">
      <div style="height:420px;border:1px solid #dfe7f7;border-radius:18px;background:#f7fbff;padding:16px;font-family:Inter,Arial,sans-serif;color:#16133a">
        <div style="display:grid;grid-template-columns:260px 1fr 360px;gap:14px;height:100%">
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:16px">
            <div style="width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#fff,#3ad4d8 50%,#2b1f99);color:white;display:grid;place-items:center;font-weight:900;margin-bottom:14px">AI</div>
            <strong>医梦门诊助手</strong>
            <p style="font-size:12px;color:#69708a">当前已识别：挂号。</p>
          </div>
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:16px;display:flex;flex-direction:column">
            <strong style="font-size:20px">挂号对话</strong>
            <div style="margin-top:18px;background:#2b1f99;color:white;border-radius:14px;padding:12px;align-self:flex-end">我头疼三天，想挂号。</div>
            <div style="margin-top:12px;background:#f5f9ff;border-radius:14px;padding:12px">建议优先选择神经内科。</div>
            <div style="margin-top:auto;border:1px solid #dce7f7;border-radius:999px;padding:12px;color:#98a1b8">继续输入...</div>
          </div>
          <div style="display:grid;grid-template-rows:auto 1fr;gap:12px">
            <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:14px">
              <strong>挂号进度</strong>
              <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px">
                <div style="height:8px;border-radius:99px;background:#2b1f99"></div>
                <div style="height:8px;border-radius:99px;background:#3ad4d8"></div>
                <div style="height:8px;border-radius:99px;background:#dfe7f7"></div>
                <div style="height:8px;border-radius:99px;background:#dfe7f7"></div>
                <div style="height:8px;border-radius:99px;background:#dfe7f7"></div>
              </div>
            </div>
            <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:16px">
              <div style="font-weight:900;font-size:18px;margin-bottom:12px">推荐科室</div>
              <div style="border:2px solid #3ad4d8;border-radius:14px;padding:12px;background:#f4fdff">
                <div style="font-weight:900;color:#2b1f99">神经内科</div>
                <div style="font-size:12px;color:#68708c;margin-top:6px">头痛伴恶心，建议优先排查神经系统相关问题。</div>
                <div style="margin-top:12px;background:#2b1f99;color:white;border-radius:999px;text-align:center;padding:9px;font-weight:900">选择神经内科</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>状态切换规则</h3>
  <p><strong>无 activeTask / 无 card_created：</strong>右侧展示医生助手形象。<br>
  <strong>有 task_updated 或 card_created：</strong>右侧切换为任务进度 + 卡片专区。<br>
  <strong>流程完成：</strong>展示挂号成功卡片，用户点击“完成”后回到医生助手形象。</p>
</div>