fix: 优化图文聊天页交互,小助手/专家模式差异化显示与常用语分类筛选

- 小助手端:咨询专家模式下隐藏结束咨询按钮和推送专家功能
- 专家端:常用语面板增加分类筛选(问候语/问诊/建议/结束语)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-21 14:17:19 +08:00
co-authored by Claude Opus 4.6
parent 1f528faa8b
commit ac87b887d2
2 changed files with 44 additions and 10 deletions
+38 -8
View File
@@ -46,6 +46,12 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.bubble-record__tag--blue { color: #1677ff; background: #e8f4ff; }
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
.bubble-record__footer { display: flex; align-items: center; justify-content: flex-end; padding: 6px 12px 10px; font-size: 12px; color: #1677ff; gap: 2px; }
/* 常用语分类与列表 */
.quick-cat { font-size: 12px; padding: 4px 12px; border-radius: 14px; background: #f5f5f5; color: #666; cursor: pointer; user-select: none; transition: all .2s; }
.quick-cat.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
.quick-item { font-size: 13px; color: #1a1a1a; padding: 8px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.quick-item:last-child { border-bottom: none; }
.quick-item:active { color: #1677ff; }
</style>
</head>
<body>
@@ -139,14 +145,25 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
<!-- 常用语面板 -->
<div id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;">
<div style="font-size:12px;color:#999;margin-bottom:8px;">常用语</div>
<div style="display:flex;flex-wrap:wrap;gap:8px;">
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">您好,请详细描述症状</div>
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">建议及时就医检查</div>
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">请上传相关检查报告</div>
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">注意休息,按时服药</div>
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">如有不适请及时复诊</div>
<div id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;max-height:200px;overflow-y:auto;">
<div style="display:flex;gap:6px;margin-bottom:10px;">
<span class="quick-cat active" data-cat="all" onclick="filterQuick(this)">全部</span>
<span class="quick-cat" data-cat="greet" onclick="filterQuick(this)">问候语</span>
<span class="quick-cat" data-cat="ask" onclick="filterQuick(this)">问诊</span>
<span class="quick-cat" data-cat="advice" onclick="filterQuick(this)">建议</span>
<span class="quick-cat" data-cat="end" onclick="filterQuick(this)">结束语</span>
</div>
<div id="quick-list">
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好,我是您的咨询专家</div>
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好,请详细描述症状</div>
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">请问症状持续多长时间了?</div>
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">请上传相关检查报告</div>
<div class="quick-item" data-cat="ask" onclick="useQuick(this)">目前有在服用什么药物吗?</div>
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">建议及时就医检查</div>
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">注意休息,按时服药</div>
<div class="quick-item" data-cat="advice" onclick="useQuick(this)">饮食清淡,避免辛辣刺激</div>
<div class="quick-item" data-cat="end" onclick="useQuick(this)">如有不适请及时复诊</div>
<div class="quick-item" data-cat="end" onclick="useQuick(this)">祝您早日康复!</div>
</div>
</div>
@@ -289,6 +306,19 @@ function useQuick(el) {
document.getElementById('quick-panel').style.display = 'none';
}
/**
* 常用语分类筛选
* @param {HTMLElement} tab - 被点击的分类标签
*/
function filterQuick(tab) {
tab.parentElement.querySelectorAll('.quick-cat').forEach(function(t) { t.classList.remove('active'); });
tab.classList.add('active');
var cat = tab.dataset.cat;
document.querySelectorAll('#quick-list .quick-item').forEach(function(item) {
item.style.display = (cat === 'all' || item.dataset.cat === cat) ? '' : 'none';
});
}
/**
* 发送消息,在聊天区追加一条专家消息气泡
*/