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

<h2>修订版：品牌配色 + 对话优先</h2>
<p class="subtitle">主题色使用浅色 #3ad4d8、深色 #2b1f99。左侧不再做功能按钮，改为助手上下文与可说示例。</p>

<div class="mockup">
  <div class="mockup-header">主界面结构 v2</div>
  <div class="mockup-body">
    <div style="height:540px;border:1px solid #dfe7f7;border-radius:18px;background:#f7fbff;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#16133a">
      <div style="height:58px;background:white;border-bottom:1px solid #e7ebf5;display:flex;align-items:center;justify-content:space-between;padding:0 22px">
        <div style="display:flex;align-items:center;gap:12px">
          <div style="width:34px;height:34px;border-radius:10px;background:#2b1f99;color:white;display:grid;place-items:center;font-weight:900">医</div>
          <div style="font-weight:900">医梦门诊助手</div>
        </div>
        <div style="font-size:13px;color:#69708a">Web Demo · 门诊大厅 · 联调演示</div>
      </div>

      <div style="display:grid;grid-template-columns:280px 1fr 390px;gap:16px;padding:16px;height:482px">
        <aside style="background:linear-gradient(180deg,#ffffff,#f1fbff);border:1px solid #dfe7f7;border-radius:16px;padding:18px;display:flex;flex-direction:column">
          <div style="display:flex;gap:12px;align-items:center;margin-bottom:18px">
            <div style="width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#3ad4d8 45%,#2b1f99);display:grid;place-items:center;font-size:24px;font-weight:900;color:white;box-shadow:0 12px 30px rgba(43,31,153,.18)">AI</div>
            <div>
              <div style="font-weight:900;font-size:18px">你好，我在</div>
              <div style="font-size:12px;color:#68708c;margin-top:4px">说出需求，我来判断下一步</div>
            </div>
          </div>

          <div style="border:1px solid #dce7f8;border-radius:14px;background:white;padding:14px;margin-bottom:14px">
            <div style="font-size:12px;color:#69708a;margin-bottom:8px">可以这样说</div>
            <div style="display:grid;gap:8px;font-size:13px">
              <div style="background:#f4fbff;border-radius:10px;padding:9px">“我头疼三天，想挂号”</div>
              <div style="background:#f4fbff;border-radius:10px;padding:9px">“明天上午有神经内科的号吗”</div>
              <div style="background:#f4fbff;border-radius:10px;padding:9px">“我想找李明医生”</div>
            </div>
          </div>

          <div style="border:1px solid #dce7f8;border-radius:14px;background:white;padding:14px">
            <div style="font-size:12px;color:#69708a;margin-bottom:8px">当前可办理</div>
            <div style="display:flex;flex-wrap:wrap;gap:8px">
              <span style="border:1px solid #cceff1;color:#156e83;border-radius:999px;padding:6px 9px;font-size:12px">挂号</span>
              <span style="border:1px solid #e2e5f2;color:#5d5a82;border-radius:999px;padding:6px 9px;font-size:12px">导诊</span>
              <span style="border:1px solid #e2e5f2;color:#5d5a82;border-radius:999px;padding:6px 9px;font-size:12px">医生查询</span>
            </div>
          </div>

          <div style="margin-top:auto;background:#fff8e8;border:1px solid #f0d89c;border-radius:12px;padding:12px;font-size:12px;color:#735b14">
            后端返回 mock:true 时展示“联调演示”，不伪装成真实业务。
          </div>
        </aside>

        <main style="background:white;border:1px solid #dfe7f7;border-radius:16px;display:flex;flex-direction:column;overflow:hidden">
          <div style="padding:16px;border-bottom:1px solid #edf1f7;display:flex;justify-content:space-between;align-items:center">
            <div>
              <div style="font-size:22px;font-weight:900">对话入口</div>
              <div style="font-size:13px;color:#69708a;margin-top:4px">系统会识别意图并进入对应流程</div>
            </div>
            <div style="background:#f1f0ff;color:#2b1f99;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800">REGISTRATION</div>
          </div>
          <div style="flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;background:#fbfdff">
            <div style="max-width:72%;background:white;border:1px solid #e1e8f5;border-radius:14px;padding:12px">请直接告诉我你想办理什么，也可以描述症状。</div>
            <div style="max-width:76%;align-self:flex-end;background:#2b1f99;color:white;border-radius:14px;padding:12px">我头疼三天，还有点恶心，想挂号。</div>
            <div style="max-width:80%;background:white;border:1px solid #e1e8f5;border-radius:14px;padding:12px">已识别为挂号需求。根据描述，建议优先选择神经内科。</div>
          </div>
          <div style="padding:14px;border-top:1px solid #edf1f7;display:flex;gap:10px;background:white">
            <div style="flex:1;border:1px solid #dce7f7;border-radius:999px;padding:12px 14px;color:#98a1b8">继续输入症状、科室、医生或时间...</div>
            <div style="background:#3ad4d8;color:#10144a;border-radius:999px;padding:12px 18px;font-weight:900">语音</div>
            <div style="background:#2b1f99;color:white;border-radius:999px;padding:12px 20px;font-weight:900">发送</div>
          </div>
        </main>

        <section style="display:grid;grid-template-rows:auto 1fr;gap:12px">
          <div style="background:white;border:1px solid #dfe7f7;border-radius:16px;padding:14px">
            <div style="display:flex;justify-content:space-between;align-items:center">
              <strong>挂号进度</strong>
              <span style="font-size:12px;color:#69708a">科室推荐</span>
            </div>
            <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;overflow:hidden">
            <div style="font-weight:900;font-size:18px;margin-bottom:12px">推荐科室</div>
            <div style="border:2px solid #3ad4d8;border-radius:14px;padding:12px;margin-bottom:10px;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 style="border:1px solid #dfe7f7;border-radius:14px;padding:12px">
              <div style="font-weight:900">普通内科</div>
              <div style="font-size:12px;color:#68708c;margin-top:6px">可作为综合初筛科室。</div>
              <div style="margin-top:12px;border:1px solid #c8d2ea;border-radius:999px;text-align:center;padding:9px;font-weight:900;color:#2b1f99">选择普通内科</div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>修订原则</h3>
  <p>左侧不再是功能菜单，而是“智能体说明 + 可说示例 + 能力范围”。患者仍然可以看到系统能做什么，但不会被要求先点菜单。真正的任务入口来自对话与后端意图识别。</p>
</div>