yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增健康画像与历史咨询摘要模块，咨询结束页增加AI摘要卡片；应急大屏增加生活习惯画像

Browse Source
This commit is contained in:
liuyunqin
2026-08-12 17:30:17 +08:00
parent 55b88b2bad
commit 5761ce7399
6 changed files with 571 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emergency-app/expert/workbench/history-summary.html
+194
View File
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>历史咨询摘要 | 健康CQ原型</title>
<style>
/* 公共重置与布局 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
/* 手机壳容器 */
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
/* 状态栏 */
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
/* 导航栏 */
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
/* 滚动内容区 */
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; padding: 12px 16px; }
.scroll-content::-webkit-scrollbar { display: none; }
/* 摘要卡片 */
.summary-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: relative; cursor: pointer; transition: box-shadow .2s; }
.summary-card:active { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.summary-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.summary-card__date { font-size: 12px; color: #999; }
.summary-card__toggle { font-size: 12px; color: #1677ff; cursor: pointer; user-select: none; background: none; border: none; padding: 2px 6px; display: flex; align-items: center; gap: 2px; }
.summary-card__toggle .arrow { display: inline-block; transition: transform .25s; font-size: 10px; }
.summary-card__toggle.collapsed .arrow { transform: rotate(-90deg); }
.summary-card__body { overflow: hidden; transition: max-height .3s ease, opacity .3s ease; max-height: 500px; opacity: 1; }
.summary-card__body.collapsed { max-height: 0; opacity: 0; margin: 0; padding: 0; }
.summary-card__disclaimer { font-size: 11px; color: #bbb; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e8e8e8; }
.summary-card__status { font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; }
.summary-card__status--done { background: #f6ffed; color: #52c41a; }
.summary-card__status--timeout { background: #fff7e6; color: #fa8c16; }
.summary-card__status--cancelled { background: #fff1f0; color: #ff4d4f; }
.summary-card__consultant { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.summary-card__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.summary-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.summary-card__relation { font-size: 11px; color: #888; font-weight: 400; margin-left: 4px; }
.summary-card__reason { font-size: 12px; color: #666; }
.summary-card__ai-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.summary-card__ai-label span { font-size: 11px; color: #1677ff; font-weight: 600; }
.summary-card__ai-badge { font-size: 10px; background: linear-gradient(135deg, #e6f4ff, #bae0ff); color: #1677ff; padding: 2px 6px; border-radius: 4px; }
.summary-card__summary { font-size: 13px; color: #333; line-height: 1.7; background: #fafbfc; border-radius: 8px; padding: 10px 12px; border-left: 3px solid #1677ff; }
.summary-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.summary-card__tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; }
.summary-card__tag--blue { color: #1677ff; background: #e8f4ff; }
.summary-card__tag--orange { color: #d46b08; background: #fff7e6; }
.summary-card__tag--green { color: #389e0d; background: #f6ffed; }
.summary-card__arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #ccc; }
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<!-- 导航栏 -->
<div class="nav-bar">
<button class="back-btn" onclick="history.back()">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
</button>
<span class="nav-title">历史咨询摘要</span>
</div>
<!-- 内容区 -->
<div class="scroll-content" id="summary-list">
<!-- 摘要卡片列表 -->
<!-- 卡片1 -->
<div class="summary-card" onclick="location.href='./text-chat-done.html'">
<div class="summary-card__header">
<span class="summary-card__date">2026-08-10 14:30</span>
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
</div>
<div class="summary-card__consultant">
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
<div>
<div class="summary-card__name">张小红<span class="summary-card__relation">本人</span></div>
<div class="summary-card__reason">头痛咨询</div>
</div>
</div>
<div class="summary-card__body">
<div class="summary-card__ai-label">
<span>🤖 AI 摘要</span>
<span class="summary-card__ai-badge">自动生成</span>
</div>
<div class="summary-card__summary">
咨询者主诉反复头痛一周，以双侧太阳穴胀痛为主，下午加重，偶伴恶心。专家建议排查紧张性头痛可能，嘱其规律作息、减少屏幕用眼时间，必要时行头颅CT检查。已开具布洛芬缓释胶囊对症处理，并建议记录头痛日记以便后续复诊参考。
</div>
<div class="summary-card__tags">
<span class="summary-card__tag summary-card__tag--orange">头痛</span>
<span class="summary-card__tag summary-card__tag--blue">紧张性头痛</span>
<span class="summary-card__tag summary-card__tag--green">用药指导</span>
</div>
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
</div>
</div>
<!-- 卡片2 -->
<div class="summary-card">
<div class="summary-card__header">
<span class="summary-card__date">2026-08-05 09:15</span>
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
</div>
<div class="summary-card__consultant">
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#e0f0ff,#b3d9ff);">👨</div>
<div>
<div class="summary-card__name">李明强<span class="summary-card__relation">配偶</span></div>
<div class="summary-card__reason">腰部酸痛咨询</div>
</div>
</div>
<div class="summary-card__body">
<div class="summary-card__ai-label">
<span>🤖 AI 摘要</span>
<span class="summary-card__ai-badge">自动生成</span>
</div>
<div class="summary-card__summary">
咨询者因长期久坐办公，近两个月出现腰部酸痛不适，晨起僵硬，活动后缓解。专家初步判断为腰肌劳损，建议进行核心肌群锻炼，调整办公坐姿，避免长时间维持同一姿势。已推荐物理治疗及居家拉伸方案，嘱两周后复诊评估。
</div>
<div class="summary-card__tags">
<span class="summary-card__tag summary-card__tag--orange">腰痛</span>
<span class="summary-card__tag summary-card__tag--blue">腰肌劳损</span>
<span class="summary-card__tag summary-card__tag--green">康复指导</span>
</div>
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
</div>
</div>
<!-- 卡片3 -->
<div class="summary-card">
<div class="summary-card__header">
<span class="summary-card__date">2026-07-22 15:20</span>
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
</div>
<div class="summary-card__consultant">
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
<div>
<div class="summary-card__name">张小红<span class="summary-card__relation">本人</span></div>
<div class="summary-card__reason">失眠调理咨询</div>
</div>
</div>
<div class="summary-card__body">
<div class="summary-card__ai-label">
<span>🤖 AI 摘要</span>
<span class="summary-card__ai-badge">自动生成</span>
</div>
<div class="summary-card__summary">
咨询者反映近一月入睡困难，每晚平均睡眠不足5小时，伴焦虑情绪。专家评估为轻度睡眠障碍，建议建立规律作息、睡前1小时远离电子设备、尝试正念冥想放松。已开具褪黑素短期辅助，建议连续记录睡眠日记两周后复诊。
</div>
<div class="summary-card__tags">
<span class="summary-card__tag summary-card__tag--orange">失眠</span>
<span class="summary-card__tag summary-card__tag--blue">睡眠障碍</span>
<span class="summary-card__tag summary-card__tag--green">生活方式指导</span>
<span class="summary-card__tag summary-card__tag--green">用药指导</span>
</div>
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
</div>
</div>
</div>
</div>
<script>
/**
* 切换卡片 AI 摘要的展开/收起
* @param {HTMLElement} btn - 被点击的切换按钮
* @param {Event} e - 点击事件
*/
function toggleCard(btn, e) {
e.stopPropagation();
var body = btn.parentElement.parentElement.querySelector('.summary-card__body');
var collapsed = btn.classList.contains('collapsed');
if (collapsed) {
btn.classList.remove('collapsed');
body.classList.remove('collapsed');
btn.innerHTML = '收起 <span class="arrow">▲</span>';
} else {
btn.classList.add('collapsed');
body.classList.add('collapsed');
btn.innerHTML = '展开 <span class="arrow">▼</span>';
}
}
</script>
</body>
</html>
emergency-app/expert/workbench/text-chat.html
+8 -1
View File
@@ -74,7 +74,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<button class="nav-right" onclick="openModal('modal-end-confirm')">结束咨询</button>
</div>
<!-- 历史咨询摘要入口 -->
<div style="background:#fff;border-bottom:1px solid #f0f0f0;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;flex-shrink:0;" onclick="location.href='./history-summary.html'">
<div style="display:flex;align-items:center;gap:8px;">
<span style="font-size:16px;">📋</span>
<span style="font-size:14px;color:#333;font-weight:500;">历史咨询摘要</span>
</div>
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="#bbb" stroke-width="2"><path d="M1 1l6 6-6 6"/></svg>
</div>
<!-- 消息区 -->
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
emergency-app/expert/workbench/text-consult-done.html
+30
View File
@@ -24,6 +24,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-green { background: #f6ffed; color: #52c41a; }
/* AI 摘要卡片 */
.ai-summary-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.ai-summary-card__label { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ai-summary-card__label span { font-size: 11px; color: #1677ff; font-weight: 600; }
.ai-summary-card__badge { font-size: 10px; background: linear-gradient(135deg, #e6f4ff, #bae0ff); color: #1677ff; padding: 2px 6px; border-radius: 4px; }
.ai-summary-card__text { font-size: 13px; color: #333; line-height: 1.7; background: #fafbfc; border-radius: 8px; padding: 10px 12px; border-left: 3px solid #1677ff; }
.ai-summary-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ai-summary-card__tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; }
.ai-summary-card__tag--blue { color: #1677ff; background: #e8f4ff; }
.ai-summary-card__tag--orange { color: #d46b08; background: #fff7e6; }
.ai-summary-card__tag--green { color: #389e0d; background: #f6ffed; }
.ai-summary-card__disclaimer { font-size: 11px; color: #bbb; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e8e8e8; }
</style>
</head>
<body>
@@ -87,6 +99,24 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</div>
<!-- AI 咨询摘要 -->
<div class="ai-summary-card">
<div class="ai-summary-card__label">
<span>🤖 AI 咨询摘要</span>
<span class="ai-summary-card__badge">自动生成</span>
</div>
<div class="ai-summary-card__text">
咨询者因持续两周的失眠问题发起图文咨询，主要表现为入睡困难、睡眠浅、早醒，伴有日间疲劳和注意力不集中。专家通过问诊排除器质性病变，判断为轻度睡眠障碍合并焦虑情绪。建议建立规律作息、睡前进行放松训练，短期服用褪黑素辅助入眠。咨询者反馈依从性良好，一周后睡眠质量有所改善。
</div>
<div class="ai-summary-card__tags">
<span class="ai-summary-card__tag ai-summary-card__tag--orange">失眠</span>
<span class="ai-summary-card__tag ai-summary-card__tag--blue">睡眠障碍</span>
<span class="ai-summary-card__tag ai-summary-card__tag--green">用药指导</span>
<span class="ai-summary-card__tag ai-summary-card__tag--green">生活方式指导</span>
</div>
<div class="ai-summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
</div>
<div style="height:16px;"></div>
</div>