AI 对话系统
AI 对话系统包含消息气泡、思考状态、思维链折叠、风险卡片、专家面板与输入区。AI 气泡使用白底描边，用户气泡使用 cdx-50。
27 · AI CHAT · 对话系统
消息气泡（AI + 用户 + 系统）
2026-05-22 10:33
AI 主诊医生
神经内科
10:33
病史摘要
患者男性，63岁，因"黑便、气喘1月余，加重伴头晕乏力3天"入院。本次住院期间新诊断：结肠占位性病变（Ca可能，BRAF基因突变型）、急性脑梗死、重度贫血。
关键检查：结肠镜距肛缘55cm见菜花样占位，占肠腔近一周。
张医生
10:35
当前分析有出血风险吗？需要注意哪些指标？
思考状态（思考中 + 思维链折叠）
AI 主诊医生
正在思考
已深度思考（用时 12 秒）
12s
1. 分析患者当前凝血功能指标（PT、FIB）...
2. 评估消化道出血活动期风险因素...
3. 结合抗血小板/抗凝治疗方案综合判断...
2. 评估消化道出血活动期风险因素...
3. 结合抗血小板/抗凝治疗方案综合判断...
风险评估卡片
高风险
脑梗死急性期再发风险
本次住院期间头颅MR示右侧额叶梗塞灶，且头颅CTA提示颅内多发动脉硬化狭窄。患者存在高血压、长期吸烟饮酒等危险因素。
建议：在消化道出血稳定后，尽快启动脑梗死二级预防。建议使用抗血小板药物，并联合他汀类药物强化降脂。
中风险
药物毒性管理风险
患者有长期大量饮酒史，虽肝功能检查尚在正常范围，但存在潜在肝损伤风险。
低风险
梅毒相关性神经系统并发症风险
患者梅毒血清学阳性，但本次病历中无明确神经系统症状。
专家面板（多角色讨论）
综合决策卡
引用卡片
指南37
Comparison of the effects of an ERAS program and a single-port laparoscopic surgery on postoperative outcomes of colon cancer patients.
Sci Rep · 2020/11/03
查看原文
指南38
Application of enhanced recovery program after surgery (ERAS) in patients undergoing radical resection for colorectal cancer.
Zhonghua Wei Chang Wai Ke Za Zhi · 2014/01/31
查看原文
输入区
输入指令 (e.g. 查文献, 当前分析有出血风险吗)...
<section id="chat" class="section">
<div class="section-title">27 · AI CHAT · 对话系统</div>
<div class="demo-sub">消息气泡（AI + 用户 + 系统）</div>
<div class="demo-box" style="background:#FAFAFA;padding:20px">
<!-- 系统消息 -->
<div style="text-align:center;margin-bottom:20px">
<span style="font-size:12px;color:#A1A1AA;background:#FAFAFA;padding:4px 12px">2026-05-22 10:33</span>
</div>
<!-- AI 消息 -->
<div style="display:flex;gap:12px;margin-bottom:24px">
<div style="width:40px;height:40px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M12 2a4 4 0 014 4v2a4 4 0 01-8 0V6a4 4 0 014-4z"/><path d="M16 14H8a4 4 0 00-4 4v2h16v-2a4 4 0 00-4-4z"/></svg>
</div>
<div style="flex:1;min-width:0">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<span style="font-size:14px;font-weight:600;color:#185058">AI 主诊医生</span>
<span style="padding:2px 8px;font-size:12px;font-weight:500;background:#D9EBED;color:#185058;border-radius:3px">神经内科</span>
<span style="font-size:12px;font-family:ui-monospace,monospace;color:#A1A1AA;margin-left:auto">10:33</span>
</div>
<div style="background:#fff;border:1px solid #F4F4F5;border-radius:6px;padding:16px 20px;font-size:14px;line-height:1.7;color:#27272A">
<p style="margin:0 0 8px"><strong style="color:#18181B">病史摘要</strong></p>
<p style="margin:0 0 8px">患者男性，63岁，因"黑便、气喘1月余，加重伴头晕乏力3天"入院。本次住院期间新诊断：结肠占位性病变（Ca可能，BRAF基因突变型）、急性脑梗死、重度贫血。</p>
<p style="margin:0"><strong style="color:#18181B">关键检查：</strong>结肠镜距肛缘55cm见菜花样占位，占肠腔近一周。</p>
</div>
</div>
</div>
<!-- 用户消息 -->
<div style="display:flex;gap:12px;margin-bottom:24px">
<div style="width:40px;height:40px;border-radius:50%;background:#F4F4F5;border:1px solid #E4E4E7;display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3F3F46" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div style="flex:1;min-width:0">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<span style="font-size:14px;font-weight:600;color:#18181B">张医生</span>
<span style="font-size:12px;font-family:ui-monospace,monospace;color:#A1A1AA;margin-left:auto">10:35</span>
</div>
<div style="background:#F0F7F8;border:1px solid #B0D6DB;border-radius:6px;padding:16px 20px;font-size:14px;line-height:1.7;color:#27272A">
当前分析有出血风险吗？需要注意哪些指标？
</div>
</div>
</div>
</div>
<div class="demo-sub">思考状态（思考中 + 思维链折叠）</div>
<div class="demo-box" style="background:#FAFAFA;padding:20px">
<!-- 思考中 -->
<div style="display:flex;gap:12px;margin-bottom:20px">
<div style="width:40px;height:40px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<div style="flex:1">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<span style="font-size:14px;font-weight:600;color:#185058">AI 主诊医生</span>
</div>
<div style="display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F7F8;border:1px solid #D9EBED;border-radius:6px;font-size:13px;color:#71717A">
正在思考
<span style="display:inline-flex;gap:4px">
<span style="width:6px;height:6px;border-radius:50%;background:#4D9CA7;animation:thinkingPulse 1.4s ease-in-out infinite"></span>
<span style="width:6px;height:6px;border-radius:50%;background:#4D9CA7;animation:thinkingPulse 1.4s ease-in-out 0.2s infinite"></span>
<span style="width:6px;height:6px;border-radius:50%;background:#4D9CA7;animation:thinkingPulse 1.4s ease-in-out 0.4s infinite"></span>
</span>
</div>
</div>
</div>
<!-- 思维链折叠 -->
<div class="think-block is-open" style="margin-left:52px;margin-bottom:12px">
<div class="think-head" style="display:flex;align-items:center;gap:8px;padding:8px 12px;background:#FAFAFA;border:1px solid #F4F4F5;border-radius:4px;cursor:pointer;font-size:13px;color:#71717A">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
已深度思考（用时 12 秒）
<span style="font-family:ui-monospace,monospace;font-size:12px;color:#A1A1AA;margin-left:auto">12s</span>
</div>
<div class="think-body" style="padding:12px 16px;margin-top:8px;background:#FAFAFA;border:1px solid #F4F4F5;border-radius:4px;font-size:13px;line-height:1.7;color:#52525B">
1. 分析患者当前凝血功能指标（PT、FIB）...<br>
2. 评估消化道出血活动期风险因素...<br>
3. 结合抗血小板/抗凝治疗方案综合判断...
</div>
</div>
</div>
<div class="demo-sub">风险评估卡片</div>
<div class="demo-box">
<!-- 高风险 -->
<div style="position:relative;padding:16px 20px 16px 24px;background:#fff;border:1px solid #F4F4F5;border-radius:6px;margin-bottom:12px">
<div style="position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px;background:#DC2626"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<span style="display:inline-flex;padding:4px 10px;font-size:12px;font-weight:600;background:#FEE2E2;color:#DC2626;border-radius:3px">高风险</span>
<span style="font-size:15px;font-weight:600;color:#18181B">脑梗死急性期再发风险</span>
</div>
<p style="font-size:14px;line-height:1.7;color:#3F3F46;margin:0 0 12px">本次住院期间头颅MR示右侧额叶梗塞灶，且头颅CTA提示颅内多发动脉硬化狭窄。患者存在高血压、长期吸烟饮酒等危险因素。</p>
<div style="padding:10px 14px;background:#FAFAFA;border-radius:4px;font-size:13px;line-height:1.6;color:#3F3F46">
<span style="font-weight:600;color:#18181B">建议：</span>在消化道出血稳定后，尽快启动脑梗死二级预防。建议使用抗血小板药物，并联合他汀类药物强化降脂。
</div>
</div>
<!-- 中风险 -->
<div style="position:relative;padding:16px 20px 16px 24px;background:#fff;border:1px solid #F4F4F5;border-radius:6px;margin-bottom:12px">
<div style="position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px;background:#C28A2C"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<span style="display:inline-flex;padding:4px 10px;font-size:12px;font-weight:600;background:#FEF3C7;color:#C28A2C;border-radius:3px">中风险</span>
<span style="font-size:15px;font-weight:600;color:#18181B">药物毒性管理风险</span>
</div>
<p style="font-size:14px;line-height:1.7;color:#3F3F46;margin:0">患者有长期大量饮酒史，虽肝功能检查尚在正常范围，但存在潜在肝损伤风险。</p>
</div>
<!-- 低风险 -->
<div style="position:relative;padding:16px 20px 16px 24px;background:#fff;border:1px solid #F4F4F5;border-radius:6px">
<div style="position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px;background:#3F8F5C"></div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<span style="display:inline-flex;padding:4px 10px;font-size:12px;font-weight:600;background:#DCFCE7;color:#3F8F5C;border-radius:3px">低风险</span>
<span style="font-size:15px;font-weight:600;color:#18181B">梅毒相关性神经系统并发症风险</span>
</div>
<p style="font-size:14px;line-height:1.7;color:#3F3F46;margin:0">患者梅毒血清学阳性，但本次病历中无明确神经系统症状。</p>
</div>
</div>
<div class="demo-sub">专家面板（多角色讨论）</div>
<div class="demo-box">
<div style="background:#fff;border:1px solid #F4F4F5;border-radius:6px;overflow:hidden">
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #F4F4F5;cursor:pointer">
<div style="display:flex;align-items:center;gap:10px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
<span style="font-size:15px;font-weight:600;color:#18181B">多学科专家会诊室</span>
</div>
<span style="font-size:13px;color:#71717A">10 位专家正在讨论</span>
</div>
<div style="padding:0 20px 20px">
<!-- 专家 1 -->
<div style="padding:16px 0;border-bottom:1px solid #F4F4F5">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<div style="width:32px;height:32px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<span style="font-size:14px;font-weight:600;color:#185058">AI 神经内科医生</span>
<span style="padding:2px 8px;font-size:11px;font-weight:500;background:#D9EBED;color:#185058;border-radius:3px">神经内科</span>
</div>
<div style="padding-left:40px;font-size:14px;line-height:1.7;color:#3F3F46">
头颅MR提示脑白质变性（Fazekas 2-3级），结合患者本次入院时"精神淡漠、间断无法认人"，提示存在血管性认知功能障碍风险。
</div>
</div>
<!-- 专家 2 -->
<div style="padding:16px 0">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<div style="width:32px;height:32px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
</div>
<span style="font-size:14px;font-weight:600;color:#185058">AI 肿瘤内科医生</span>
<span style="padding:2px 8px;font-size:11px;font-weight:500;background:#D9EBED;color:#185058;border-radius:3px">肿瘤内科</span>
</div>
<div style="padding-left:40px;font-size:14px;line-height:1.7;color:#3F3F46">
患者目前存在重度贫血（血红蛋白最低43g/L），启动抗肿瘤治疗前，必须优先纠正贫血、改善全身营养状态。
</div>
</div>
</div>
</div>
</div>
<div class="demo-sub">综合决策卡</div>
<div class="demo-box">
<div style="border-radius:10px;overflow:hidden;border:1px solid #B0D6DB">
<div style="background:linear-gradient(135deg,#185058 0%,#0F2F35 100%);padding:20px 24px;display:flex;align-items:center;gap:16px">
<div style="width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>
</div>
<div>
<div style="font-size:18px;font-weight:700;color:#fff">AI-MDT 综合决策建议</div>
<div style="font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-top:4px">FINAL CONSENSUS REPORT</div>
</div>
</div>
<div style="background:#fff;padding:24px">
<p style="font-size:14px;line-height:1.7;color:#27272A;margin:0 0 12px"><strong>主要诊断：</strong>结肠占位性病变（恶性肿瘤可能），消化道出血，重度贫血（小细胞低色素性），高血压病2级（高危）</p>
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px">
<span style="padding:4px 10px;font-size:13px;font-weight:500;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;color:#185058">结肠腺癌（BRAF突变型）</span>
<span style="padding:4px 10px;font-size:13px;font-weight:500;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px;color:#27272A">结肠神经内分泌肿瘤</span>
<span style="padding:4px 10px;font-size:13px;font-weight:500;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px;color:#27272A">结肠淋巴瘤</span>
</div>
<div style="display:flex;align-items:center;gap:8px;padding:12px 16px;background:#F0F7F8;border-radius:6px">
<div style="display:flex;gap:-4px">
<div style="width:28px;height:28px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;border:2px solid #fff">A</div>
<div style="width:28px;height:28px;border-radius:50%;background:#1D6571;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;border:2px solid #fff;margin-left:-6px">B</div>
<div style="width:28px;height:28px;border-radius:50%;background:#2A7F8B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;border:2px solid #fff;margin-left:-6px">C</div>
</div>
<div>
<div style="font-size:14px;font-weight:600;color:#18181B">专家组一致通过</div>
<div style="font-size:12px;font-family:ui-monospace,monospace;color:#71717A">Consensus Score: 100%</div>
</div>
</div>
</div>
</div>
</div>
<div class="demo-sub">引用卡片</div>
<div class="demo-box">
<div class="citation-card" style="padding:14px 16px;background:#fff;border:1px solid #F4F4F5;border-radius:6px;margin-bottom:8px">
<div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:6px">
<span style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;flex-shrink:0;white-space:nowrap;padding:2px 8px;font-size:11px;font-weight:600;background:#185058;color:#fff;border-radius:3px">指南37</span>
<span style="font-size:14px;font-weight:500;color:#18181B;line-height:1.5">Comparison of the effects of an ERAS program and a single-port laparoscopic surgery on postoperative outcomes of colon cancer patients.</span>
</div>
<p style="font-size:13px;color:#52525B;line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">Advancement of the surgical modality and perioperative care are the two main dimensions for the modern improvement of su...</p>
<div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#A1A1AA">
<span>Sci Rep · 2020/11/03</span>
<a href="#" style="font-size:12px;font-weight:500;color:#185058;text-decoration:none;display:inline-flex;align-items:center;gap:4px">查看原文 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg></a>
</div>
</div>
<div class="citation-card" style="padding:14px 16px;background:#fff;border:1px solid #F4F4F5;border-radius:6px">
<div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:6px">
<span style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;flex-shrink:0;white-space:nowrap;padding:2px 8px;font-size:11px;font-weight:600;background:#185058;color:#fff;border-radius:3px">指南38</span>
<span style="font-size:14px;font-weight:500;color:#18181B;line-height:1.5">Application of enhanced recovery program after surgery (ERAS) in patients undergoing radical resection for colorectal cancer.</span>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#A1A1AA">
<span>Zhonghua Wei Chang Wai Ke Za Zhi · 2014/01/31</span>
<a href="#" style="font-size:12px;font-weight:500;color:#185058;text-decoration:none">查看原文</a>
</div>
</div>
</div>
<div class="demo-sub">输入区</div>
<div class="demo-box">
<div style="display:flex;align-items:center;gap:12px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:10px;padding:8px 12px">
<div style="flex:1;font-size:14px;color:#A1A1AA;line-height:1.5">输入指令 (e.g. 查文献, 当前分析有出血风险吗)...</div>
<div class="chat-send" style="width:36px;height:36px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。