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

feat: 新增健康咨询管理端页面原型

Browse Source 
- 新增员工咨询专家、员工咨询小助手、用户评价等页面
- 新增各类配置管理页面（医院、科室、疾病、短语等）
- 新增咨询记录、异常事件、专家统计、结算等管理功能
- 新增员工端咨询小助手知识库页面
- 新增功能菜单规划文档

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-04-09 18:04:52 +08:00
co-authored by Claude Haiku 4.5
parent f5605d3f70
commit 8def5fb12e
29 changed files with 5929 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emergency-app/assistant/knowledge/detail.html
+187
View File
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>知识详情</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; }
.scroll-content::-webkit-scrollbar { display: none; }
</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="window.location.href='./index.html'">
<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" id="kd-nav-title">知识详情</span>
</div>
<!-- 内容区 -->
<div class="scroll-content" style="padding:16px;">
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<!-- 由JS动态填充内容 -->
</div>
<div style="height:16px;"></div>
</div>
</div>
<script>
/**
* 知识库数据集合
* 每个key对应一个知识条目的完整内容
*/
var KB_DATA = {
'blood-routine': {
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
items: [
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0\u201310.0 \u00d7 10\u2079/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5\u20135.5 \u00d7 10\u00b9\u00b2/L；女性：3.8\u20135.1 \u00d7 10\u00b9\u00b2/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100\u2013300 \u00d7 10\u2079/L。降低有出血风险，升高见于炎症或血小板增多症。' }
]
},
'ecg': {
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
items: [
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低\u22650.1mV提示心肌缺血；ST段抬高需警惕急性心肌梗死，需立即就医。' },
{ color: '#fa8c16', name: '心律失常', desc: '包括窦性心动过速（>100次/分）、窦性心动过缓（<60次/分）、房颤等，需结合症状评估。' },
{ color: '#1677ff', name: '束支传导阻滞', desc: '完全性左束支传导阻滞常提示器质性心脏病；右束支传导阻滞可见于正常人，需随访观察。' }
]
},
'liver': {
icon: '🔬', bg: '#fff7e6', title: '肝功能指标详解', cat: '体检知识', date: '2026-03-12',
summary: '肝功能检查通过检测血液中多种酶和蛋白质水平，评估肝脏的合成、代谢和排泄功能，是发现肝脏疾病的重要手段。',
items: [
{ color: '#fa8c16', name: '谷丙转氨酶（ALT）', desc: '正常值：男\u226450 U/L，女\u226440 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：\u226440 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4\u201317.1 \u03bcmol/L。升高引起黄疸，需区分溶血性、肝细胞性和梗阻性黄疸。' }
]
},
'glucose': {
icon: '💉', bg: '#fff1f0', title: '血糖检测与糖尿病筛查', cat: '体检知识', date: '2026-03-08',
summary: '血糖检测是糖尿病筛查和管理的核心手段，包括空腹血糖、餐后2小时血糖和糖化血红蛋白三项主要指标。',
items: [
{ color: '#ff4d4f', name: '空腹血糖（FPG）', desc: '正常：<6.1 mmol/L；糖尿病前期：6.1\u20137.0 mmol/L；糖尿病诊断标准：\u22657.0 mmol/L（需两次确认）。' },
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8\u201311.1 mmol/L；\u226511.1 mmol/L结合症状可诊断糖尿病。' },
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2\u20133个月平均血糖水平。正常<5.7%；5.7\u20136.4%为糖尿病前期；\u22656.5%可诊断糖尿病。' }
]
},
'antihypertensive': {
icon: '💊', bg: '#e6f4ff', title: '常用降压药物对比', cat: '药品知识', date: '2026-02-20',
summary: '降压药物分为五大类，各有适应症和禁忌症，临床选药需结合患者合并症、年龄、肾功能等综合考量。',
items: [
{ color: '#1677ff', name: 'ACEI/ARB类', desc: '代表药：依那普利、缬沙坦。适用于合并糖尿病、蛋白尿、心衰患者。禁用于妊娠、双侧肾动脉狭窄。' },
{ color: '#52c41a', name: '钙通道阻滞剂（CCB）', desc: '代表药：氨氯地平、硝苯地平。适用于老年、单纯收缩期高血压。不良反应：踝部水肿、头痛。' },
{ color: '#fa8c16', name: '利尿剂', desc: '代表药：氢氯噻嗪、螺内酯。适用于容量负荷过重、心衰患者。注意监测血钾、血糖、血尿酸。' }
]
},
'statin': {
icon: '🧪', bg: '#f6ffed', title: '他汀类药物使用指南', cat: '药品知识', date: '2026-02-15',
summary: '他汀类药物是目前最有效的调脂药物，通过抑制HMG-CoA还原酶降低LDL-C，同时具有抗炎、稳定斑块等多效性作用。',
items: [
{ color: '#52c41a', name: '适应症与目标值', desc: '适用于LDL-C升高、动脉粥样硬化性心血管病（ASCVD）患者。高危患者LDL-C目标<1.8 mmol/L。' },
{ color: '#fa8c16', name: '常用药物与剂量', desc: '阿托伐他汀10\u201380mg/日；瑞舒伐他汀5\u201340mg/日；辛伐他汀20\u201340mg/日（晚间服用效果更佳）。' },
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4\u20138周复查ALT/AST；血糖轻度升高。' }
]
},
'hypertension': {
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
items: [
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140\u2013159/90\u201399 mmHg；2级：160\u2013179/100\u2013109 mmHg；3级：\u2265180/110 mmHg。非同日3次测量均达标方可诊断。' },
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周\u2265150分钟）、减少精神压力。' },
{ color: '#1677ff', name: '药物治疗原则', desc: '小剂量起始，优先选用长效制剂，联合用药，个体化治疗。血压目标：一般患者<140/90 mmHg，高危患者<130/80 mmHg。' }
]
},
'migraine': {
icon: '🧠', bg: '#fff1f0', title: '偏头痛的诊断与治疗', cat: '疾病知识', date: '2026-03-05',
summary: '偏头痛是一种反复发作的神经血管性头痛，以单侧搏动性头痛为主要特征，常伴恶心、畏光、畏声，严重影响生活质量。',
items: [
{ color: '#ff4d4f', name: '诊断要点', desc: '发作5次以上；持续4\u201372小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50\u2013100mg）为首选，发作早期使用效果最佳。' },
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作\u22654次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
]
},
'nutrition': {
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
items: [
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50\u201365%，蛋白质15\u201320%，脂肪20\u201330%。' },
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500\u20131700ml；避免久坐后立即进食。' }
]
},
'exercise': {
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
items: [
{ color: '#1677ff', name: '运动推荐量', desc: '每周\u2265150分钟中等强度有氧运动（如快走、游泳、骑车），或\u226575分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50\u201370%，可说话但不能唱歌。高强度：心率达70\u201385%，说话困难。' },
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5\u201310分钟，运动后拉伸放松，避免突然停止。' }
]
}
};
/**
* 页面加载时根据URL参数渲染知识详情
* 从URL的key参数获取知识条目标识，查找数据并填充页面
*/
function renderDetail() {
// 解析URL参数获取知识条目key
var params = new URLSearchParams(window.location.search);
var key = params.get('key') || 'blood-routine'; // 默认显示血常规
var d = KB_DATA[key];
if (!d) {
// 未找到对应数据时使用默认值
d = KB_DATA['blood-routine'];
}
// 设置导航栏标题
document.getElementById('kd-nav-title').textContent = d.title;
// 生成主要内容条目的HTML
var itemsHtml = d.items.map(function(it) {
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
'</div>';
}).join('');
// 填充内容区域
document.getElementById('kd-content').innerHTML =
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' \u00b7 更新于 ' + d.date + '</div></div>' +
'</div>' +
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
itemsHtml;
}
// 页面加载完成后渲染详情
renderDetail();
</script>
</body>
</html>
emergency-app/assistant/knowledge/index.html
+206
View File
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>知识库</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; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
/* ========== 分段Tab样式 ========== */
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.seg-tab {
flex: 1; text-align: center; padding: 12px 0;
font-size: 14px; color: #666; cursor: pointer;
border-bottom: 2px solid transparent; transition: all 0.2s;
}
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
/* ========== 底部Tab栏样式 ========== */
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
.tab-item.active .tab-label { color: #1677ff; }
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
</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 style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">专业参考</div>
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
</div>
<!-- 分类Tab -->
<div class="seg-tabs" style="background:#fff;">
<div class="seg-tab active" onclick="switchKbTab(this,'kb-exam')">体检知识</div>
<div class="seg-tab" onclick="switchKbTab(this,'kb-drug')">药品知识</div>
<div class="seg-tab" onclick="switchKbTab(this,'kb-disease')">疾病知识</div>
<div class="seg-tab" onclick="switchKbTab(this,'kb-health')">保健知识</div>
</div>
<!-- 知识条目列表 -->
<div class="scroll-content">
<!-- 体检知识 -->
<div id="kb-exam">
<div style="padding:12px 16px 0;">
<!-- 血常规检查解读指南 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('blood-routine')">
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🩺</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血常规检查解读指南</div><div style="font-size:12px;color:#999;margin-top:3px;">了解各项血常规指标的正常范围与临床意义</div></div>
<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>
<!-- 心电图异常结果说明 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('ecg')">
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">❤️</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">心电图异常结果说明</div><div style="font-size:12px;color:#999;margin-top:3px;">常见心电图异常表现及处理建议</div></div>
<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>
<!-- 肝功能指标详解 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('liver')">
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🔬</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">肝功能指标详解</div><div style="font-size:12px;color:#999;margin-top:3px;">ALT、AST等肝功能指标的临床意义</div></div>
<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>
<!-- 血糖检测与糖尿病筛查 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('glucose')">
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💉</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血糖检测与糖尿病筛查</div><div style="font-size:12px;color:#999;margin-top:3px;">空腹血糖、糖化血红蛋白的判读标准</div></div>
<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>
</div>
<div style="height:16px;"></div>
</div>
<!-- 药品知识 -->
<div id="kb-drug" style="display:none;">
<div style="padding:12px 16px 0;">
<!-- 常用降压药物对比 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('antihypertensive')">
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💊</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">常用降压药物对比</div><div style="font-size:12px;color:#999;margin-top:3px;">各类降压药的适应症与注意事项</div></div>
<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>
<!-- 他汀类药物使用指南 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('statin')">
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧪</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">他汀类药物使用指南</div><div style="font-size:12px;color:#999;margin-top:3px;">调脂药物的用法用量与副作用监测</div></div>
<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>
</div>
<div style="height:16px;"></div>
</div>
<!-- 疾病知识 -->
<div id="kb-disease" style="display:none;">
<div style="padding:12px 16px 0;">
<!-- 高血压诊断与管理 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('hypertension')">
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🫀</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高血压诊断与管理</div><div style="font-size:12px;color:#999;margin-top:3px;">高血压分级标准及生活方式干预</div></div>
<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>
<!-- 偏头痛的诊断与治疗 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('migraine')">
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧠</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">偏头痛的诊断与治疗</div><div style="font-size:12px;color:#999;margin-top:3px;">偏头痛的临床特征、诱因及处理方案</div></div>
<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>
</div>
<div style="height:16px;"></div>
</div>
<!-- 保健知识 -->
<div id="kb-health" style="display:none;">
<div style="padding:12px 16px 0;">
<!-- 职场人群营养膳食指南 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('nutrition')">
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🥗</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">职场人群营养膳食指南</div><div style="font-size:12px;color:#999;margin-top:3px;">针对久坐办公人群的饮食建议</div></div>
<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>
<!-- 运动与心血管健康 -->
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('exercise')">
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🏃</div>
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">运动与心血管健康</div><div style="font-size:12px;color:#999;margin-top:3px;">有氧运动对心血管的保护作用</div></div>
<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>
</div>
<div style="height:16px;"></div>
</div>
</div>
<!-- 底部Tab栏 -->
<div class="tab-bar">
<a class="tab-item" href="../workbench/index.html">
<span class="tab-icon">🏥</span>
<span class="tab-label">工作台</span>
<span class="tab-badge">3</span>
</a>
<a class="tab-item active" href="./index.html">
<span class="tab-icon">📚</span>
<span class="tab-label">知识库</span>
</a>
<a class="tab-item" href="../../ai-assistant/index.html">
<span class="tab-icon">🤖</span>
<span class="tab-label">AI助手</span>
</a>
<a class="tab-item" href="../../message/index.html">
<span class="tab-icon">💬</span>
<span class="tab-label">消息</span>
<span class="tab-badge">2</span>
</a>
<a class="tab-item" href="../profile/index.html">
<span class="tab-icon">👤</span>
<span class="tab-label">我的</span>
</a>
</div>
</div>
<script>
/**
* 切换知识库分类Tab
* @param {HTMLElement} el - 被点击的Tab元素
* @param {string} panelId - 对应面板的ID
*/
function switchKbTab(el, panelId) {
// 移除所有Tab的选中状态
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) {
t.classList.remove('active');
});
// 设置当前Tab为选中
el.classList.add('active');
// 切换面板显示
['kb-exam', 'kb-drug', 'kb-disease', 'kb-health'].forEach(function(id) {
var p = document.getElementById(id);
if (p) p.style.display = id === panelId ? 'block' : 'none';
});
}
/**
* 跳转到知识详情页
* @param {string} key - 知识条目的标识key
*/
function goDetail(key) {
window.location.href = './detail.html?key=' + key;
}
</script>
</body>
</html>