Files

1258 lines
96 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; background:#f0f4f8; color:#1a2332; font-size:14px; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d0d7de; border-radius:3px; }
/* ===== Layout ===== */
.app { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#0f2744; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; }
.main { margin-left:220px; flex:1; min-height:100vh; }
/* ===== Sidebar ===== */
.logo { padding:20px 16px; border-bottom:1px solid rgba(255,255,255,.1); text-align:center; }
.logo-brand { display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.logo-brand svg { height:22px; flex-shrink:0; }
.logo h2 { color:#5aafe6; font-size:13px; font-weight:600; line-height:1.3; }
.logo span { color:rgba(255,255,255,.4); font-size:10px; }
.nav-section { padding:16px 16px 6px; font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:1px; }
.nav-item { display:flex; align-items:center; padding:9px 16px; color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .15s; border-left:3px solid transparent; text-decoration:none; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:rgba(24,144,255,.15); color:#40a9ff; border-left-color:#1890ff; }
.nav-item svg { width:16px; height:16px; margin-right:10px; fill:currentColor; }
.nav-badge { margin-left:auto; background:#ff4d4f; color:#fff; font-size:11px; padding:1px 6px; border-radius:10px; }
/* ===== Page Header ===== */
.page-header { background:#fff; padding:14px 28px; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
.page-header h1 { font-size:16px; font-weight:600; color:#0f2744; }
.page-header .meta { font-size:12px; color:#8896a7; margin-top:2px; }
.header-actions { display:flex; gap:8px; }
/* ===== Page Content ===== */
.page-content { padding:24px 28px; }
.page { display:none; }
.page.active { display:block; }
/* ===== Buttons ===== */
.btn { padding:7px 16px; border-radius:6px; font-size:13px; font-weight:500; border:none; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:4px; }
.btn-primary { background:#1890ff; color:#fff; }
.btn-primary:hover { background:#096dd9; }
.btn-default { background:#fff; color:#4a5568; border:1px solid #d0d7de; }
.btn-default:hover { border-color:#1890ff; color:#1890ff; }
.btn-success { background:#52c41a; color:#fff; }
.btn-success:hover { background:#389e0d; }
.btn-danger { background:#ff4d4f; color:#fff; }
.btn-danger:hover { background:#cf1322; }
.btn-purple { background:#722ed1; color:#fff; }
.btn-purple:hover { background:#531dab; }
.btn-sm { padding:4px 10px; font-size:12px; }
/* ===== Tags ===== */
.tag { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; display:inline-block; }
.tag-blue { background:#e6f7ff; color:#1890ff; }
.tag-green { background:#f6ffed; color:#52c41a; }
.tag-orange { background:#fff7e6; color:#fa8c16; }
.tag-red { background:#fff1f0; color:#ff4d4f; }
.tag-purple { background:#f9f0ff; color:#722ed1; }
.tag-gray { background:#f0f4f8; color:#8896a7; }
.tag-cyan { background:#e6fffb; color:#006d75; }
/* ===== Cards ===== */
.section-card { background:#fff; border:1px solid #e8edf2; border-radius:10px; margin-bottom:20px; transition:all .2s; }
.section-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06); }
.card-header { padding:14px 20px; border-bottom:1px solid #f0f4f8; display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:14px; font-weight:600; color:#0f2744; }
.card-body { padding:20px; }
/* ===== Stat Cards ===== */
.stats-row { display:grid; gap:16px; margin-bottom:24px; }
.stats-row.cols2 { grid-template-columns:repeat(2,1fr); }
.stats-row.cols3 { grid-template-columns:repeat(3,1fr); }
.stats-row.cols4 { grid-template-columns:repeat(4,1fr); }
.stats-row.cols5 { grid-template-columns:repeat(5,1fr); }
.stat-card { background:#fff; border:1px solid #e8edf2; border-radius:10px; padding:18px 20px; transition:all .2s; cursor:pointer; }
.stat-card:hover { transform:translateY(-2px); border-color:#1890ff; box-shadow:0 2px 12px rgba(24,144,255,.12); }
.stat-label { font-size:12px; color:#8896a7; margin-bottom:6px; }
.stat-value { font-size:28px; font-weight:700; }
.stat-value.blue { color:#1890ff; }
.stat-value.green { color:#52c41a; }
.stat-value.red { color:#ff4d4f; }
.stat-value.orange { color:#fa8c16; }
.stat-value.purple { color:#722ed1; }
.stat-sub { font-size:11px; color:#8896a7; margin-top:4px; }
/* ===== Tables ===== */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:#f8fafc; padding:10px 14px; font-size:12px; font-weight:600; color:#4a5568; text-align:left; border-bottom:1px solid #e8edf2; }
.data-table td { padding:11px 14px; font-size:13px; border-bottom:1px solid #f0f4f8; }
.data-table tr:hover td { background:#fafcff; }
.data-table tr.clickable:hover td { background:#e6f7ff; cursor:pointer; }
/* ===== Alerts ===== */
.alert { padding:10px 14px; border-radius:8px; font-size:13px; border:1px solid; }
.alert-info { background:#e6f7ff; border-color:#91d5ff; color:#0050b3; }
.alert-warning { background:#fff7e6; border-color:#ffd591; color:#ad4e00; }
.alert-success { background:#f6ffed; border-color:#b7eb8f; color:#237804; }
/* ===== Forms ===== */
.form-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; }
.form-group.span2 { grid-column:span 2; }
.form-group.span3 { grid-column:span 3; }
.form-group label { font-size:12px; font-weight:500; color:#4a5568; margin-bottom:6px; }
.form-group label .req { color:#ff4d4f; }
input, select, textarea { border:1px solid #d0d7de; border-radius:6px; padding:8px 10px; font-size:13px; font-family:inherit; transition:border-color .15s; outline:none; width:100%; }
input:focus, select:focus, textarea:focus { border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,.1); }
textarea { resize:vertical; min-height:80px; }
/* ===== Modal ===== */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:640px; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-header { padding:18px 24px; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:15px; font-weight:600; color:#0f2744; }
.modal-close { background:none; border:none; font-size:18px; color:#8896a7; cursor:pointer; padding:4px; }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid #e8edf2; display:flex; justify-content:flex-end; gap:8px; }
/* ===== Filter Tabs ===== */
.filter-tabs { display:flex; gap:8px; margin-bottom:16px; }
.filter-tab { padding:5px 14px; border-radius:14px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid #e8edf2; background:#fff; color:#4a5568; transition:all .15s; }
.filter-tab.active, .filter-tab:hover { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; }
/* ===== Chart Placeholder ===== */
.chart-bar-group { display:flex; flex-direction:column; gap:12px; }
.chart-bar-item { display:flex; align-items:center; gap:10px; }
.chart-bar-label { font-size:12px; color:#4a5568; width:80px; text-align:right; flex-shrink:0; }
.chart-bar-track { flex:1; height:20px; background:#f0f4f8; border-radius:3px; overflow:hidden; }
.chart-bar-fill { height:100%; border-radius:3px; transition:width .3s; }
.chart-bar-val { font-size:12px; color:#1a2332; font-weight:600; width:50px; }
/* ===== Search Bar ===== */
.search-bar { display:flex; gap:12px; margin-bottom:16px; align-items:center; }
.search-bar input { max-width:280px; }
/* ===== Pagination ===== */
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:12px 0; }
.pagination button { padding:4px 10px; border:1px solid #d0d7de; border-radius:4px; background:#fff; font-size:12px; cursor:pointer; }
.pagination button.active { background:#1890ff; color:#fff; border-color:#1890ff; }
.pagination span { font-size:12px; color:#8896a7; margin:0 8px; }
/* ===== Toast ===== */
.toast { position:fixed; top:24px; right:24px; background:#fff; border:1px solid #b7eb8f; color:#237804; border-radius:8px; padding:12px 20px; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.12); transform:translateX(120%); transition:transform .3s ease; z-index:2000; }
.toast.show { transform:translateX(0); }
/* ===== Progress ===== */
.progress-bar { height:6px; background:#f0f4f8; border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#722ed1,#1890ff); border-radius:3px; }
/* ===== Detail Panel ===== */
.detail-panel { background:#fafcff; border:1px solid #e8edf2; border-radius:8px; padding:16px; margin-top:8px; display:none; }
.detail-panel.show { display:block; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-item label { font-size:11px; color:#8896a7; display:block; margin-bottom:2px; }
.detail-item span { font-size:13px; color:#1a2332; }
/* ===== Knowledge Card ===== */
.knowledge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.knowledge-card { border:1px solid #e8edf2; border-radius:10px; overflow:hidden; cursor:pointer; transition:all .2s; }
.knowledge-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06); transform:translateY(-2px); }
.knowledge-thumb { height:120px; background:#e6f7ff; display:flex; align-items:center; justify-content:center; font-size:32px; }
.knowledge-thumb.video { background:#f9f0ff; }
.knowledge-info { padding:12px; }
.knowledge-info h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
.knowledge-info p { font-size:11px; color:#8896a7; }
.knowledge-tags { display:flex; gap:4px; margin-top:8px; }
/* ===== Chat ===== */
.chat-container { border:1px solid #e8edf2; border-radius:10px; overflow:hidden; height:400px; display:flex; flex-direction:column; }
.chat-header { padding:14px 16px; background:#fff; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
.chat-body { flex:1; overflow-y:auto; padding:16px; background:#fafcff; }
.chat-msg { display:flex; gap:8px; margin-bottom:16px; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }
.chat-avatar.staff { background:#1890ff; }
.chat-avatar.patient { background:#52c41a; }
.chat-bubble { max-width:70%; padding:10px 14px; font-size:13px; line-height:1.6; }
.chat-msg:not(.user) .chat-bubble { background:#fff; border:1px solid #e8edf2; border-radius:0 12px 12px 12px; }
.chat-msg.user .chat-bubble { background:#1890ff; color:#fff; border-radius:12px 0 12px 12px; }
.chat-footer { padding:12px 16px; background:#fff; border-top:1px solid #e8edf2; display:flex; gap:8px; }
.chat-footer input { flex:1; }
.chat-time { font-size:10px; color:#8896a7; margin-top:4px; }
/* ===== Template Card ===== */
.template-list { display:flex; flex-direction:column; gap:12px; }
.template-item { border:1px solid #e8edf2; border-radius:8px; padding:16px; display:flex; align-items:center; justify-content:space-between; transition:all .15s; }
.template-item:hover { border-color:#1890ff; background:#fafcff; }
.template-info h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
.template-info p { font-size:12px; color:#8896a7; }
.template-meta { display:flex; gap:8px; margin-top:6px; }
/* ===== Settings ===== */
.settings-section { margin-bottom:24px; }
.settings-section h4 { font-size:13px; font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f0f4f8; }
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f4f8; }
.settings-item:last-child { border-bottom:none; }
.settings-item label { font-size:13px; color:#1a2332; }
.settings-item .desc { font-size:11px; color:#8896a7; }
.toggle { width:40px; height:22px; background:#d0d7de; border-radius:11px; position:relative; cursor:pointer; transition:all .15s; }
.toggle.on { background:#1890ff; }
.toggle::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:2px; left:2px; transition:all .15s; }
.toggle.on::after { left:20px; }
</style>
</head>
<body>
<div class="app">
<!-- Sidebar -->
<div class="sidebar">
<div class="logo">
<div class="logo-brand">
<img src="logo.png" alt="XiruiMed熹睿" style="height:20px;filter:brightness(1.15);">
</div>
<h2>全周期康复智能一体化管理平台</h2>
</div>
<div class="nav-section">概览</div>
<a class="nav-item active" onclick="navTo('dashboard',this)">
<svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
工作台
</a>
<div class="nav-section">患者管理</div>
<a class="nav-item" onclick="navTo('patients',this)">
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
患者列表
<span class="nav-badge">128</span>
</a>
<a class="nav-item" onclick="navTo('assessments',this)">
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
评估记录
</a>
<a class="nav-item" onclick="navTo('alerts',this)">
<svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
预警中心
<span class="nav-badge">5</span>
</a>
<div class="nav-section">内容管理</div>
<a class="nav-item" onclick="navTo('knowledge',this)">
<svg viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>
知识库
</a>
<a class="nav-item" onclick="navTo('templates',this)">
<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
康复模板
</a>
<div class="nav-section">互动</div>
<a class="nav-item" onclick="navTo('consult',this)">
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
咨询管理
<span class="nav-badge">3</span>
</a>
<div class="nav-section">数据</div>
<a class="nav-item" onclick="navTo('reports',this)">
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
数据报表
</a>
<div class="nav-section">系统</div>
<a class="nav-item" onclick="navTo('settings',this)">
<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
系统设置
</a>
</div>
<!-- Main Content -->
<div class="main">
<!-- ===== Dashboard ===== -->
<div id="page-dashboard" class="page active">
<div class="page-header">
<div><h1>工作台</h1><div class="meta">全周期康复智能一体化管理平台 · 数据概览</div></div>
<div class="header-actions">
<button class="btn btn-default">导出报表</button>
<button class="btn btn-primary">+ 新增患者</button>
</div>
</div>
<div class="page-content">
<!-- Alert -->
<div class="alert alert-warning" style="margin-bottom:20px;">
<strong>⚠ 预警提醒:</strong>当前有 <strong>5</strong> 条异常指标预警待处理,请及时查看。
</div>
<!-- Stats -->
<div class="stats-row cols5">
<div class="stat-card"><div class="stat-label">在管患者</div><div class="stat-value blue">128</div><div class="stat-sub">本月新增 23 人</div></div>
<div class="stat-card"><div class="stat-label">今日打卡率</div><div class="stat-value green">87%</div><div class="stat-sub">较昨日 +3%</div></div>
<div class="stat-card"><div class="stat-label">待处理预警</div><div class="stat-value red">5</div><div class="stat-sub">皮瓣异常 3 · 疼痛 2</div></div>
<div class="stat-card"><div class="stat-label">待回复咨询</div><div class="stat-value orange">3</div><div class="stat-sub">平均等待 15 分钟</div></div>
<div class="stat-card"><div class="stat-label">本月随访</div><div class="stat-value purple">42</div><div class="stat-sub">完成率 89%</div></div>
</div>
<!-- Two columns -->
<div class="stats-row cols2">
<div class="section-card">
<div class="card-header"><h3>患者分布</h3><span class="tag tag-blue">按手术类型</span></div>
<div class="card-body">
<div class="chart-placeholder">
<div class="chart-bar-group">
<div class="chart-bar-item"><span class="chart-bar-label">皮瓣修复</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:45%;background:#1890ff;"></div></div><span class="chart-bar-val">58人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">关节置换</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:30%;background:#52c41a;"></div></div><span class="chart-bar-val">38人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">血管重建</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:25%;background:#722ed1;"></div></div><span class="chart-bar-val">32人</span></div>
</div>
</div>
</div>
</div>
<div class="section-card">
<div class="card-header"><h3>康复阶段分布</h3><span class="tag tag-green">实时</span></div>
<div class="card-body">
<div class="chart-placeholder">
<div class="chart-bar-group">
<div class="chart-bar-item"><span class="chart-bar-label">决策期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:15%;background:#fa8c16;"></div></div><span class="chart-bar-val">19人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">围术期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:25%;background:#1890ff;"></div></div><span class="chart-bar-val">32人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后1-7天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:20%;background:#722ed1;"></div></div><span class="chart-bar-val">26人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后8-14天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:18%;background:#52c41a;"></div></div><span class="chart-bar-val">23人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">康复1-3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:22%;background:#ff4d4f;"></div></div><span class="chart-bar-val">28人</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Alerts Table -->
<div class="section-card">
<div class="card-header"><h3>最近预警</h3><button class="btn btn-sm btn-default" onclick="navTo('alerts',document.querySelectorAll('.nav-item')[3])">查看全部</button></div>
<div class="card-body" style="padding:0;">
<table class="data-table">
<thead><tr><th>时间</th><th>患者</th><th>手术类型</th><th>预警类型</th><th>详情</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>2026-04-16 09:32</td><td>张**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
<tr><td>2026-04-16 08:15</td><td>李**</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-orange">疼痛异常</span></td><td>疼痛评分 8/10,超出阈值</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
<tr><td>2026-04-15 21:40</td><td>王**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色发紫,肿胀加重</td><td><span class="tag tag-green">已处理</span></td><td><button class="btn btn-sm btn-default">详情</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ===== Patients Page ===== -->
<div id="page-patients" class="page">
<div class="page-header">
<div><h1>患者列表</h1><div class="meta">共 128 位在管患者</div></div>
<div class="header-actions">
<button class="btn btn-default">导出数据</button>
<button class="btn btn-primary" onclick="showModal('modal-new-patient')">+ 新增患者</button>
</div>
</div>
<div class="page-content">
<div class="section-card">
<div class="card-body">
<div class="filter-tabs">
<span class="filter-tab active">全部 (128)</span>
<span class="filter-tab">皮瓣修复 (58)</span>
<span class="filter-tab">关节置换 (38)</span>
<span class="filter-tab">血管重建 (32)</span>
</div>
<div class="search-bar">
<input type="text" placeholder="搜索患者姓名、手机号...">
<select style="width:140px;"><option>全部阶段</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select>
<select style="width:120px;"><option>全部状态</option><option>正常</option><option>预警中</option></select>
</div>
<table class="data-table">
<thead><tr><th>患者编号</th><th>姓名</th><th>性别/年龄</th><th>手术类型</th><th>康复阶段</th><th>打卡率</th><th>最近预警</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr class="clickable"><td>P20260301</td><td>张**</td><td>男 / 52岁</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-cyan">术后8-14天</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:92%;"></div></div><span style="font-size:11px;margin-left:4px;">92%</span></td><td><span class="tag tag-red">皮瓣苍白</span></td><td><span class="tag tag-orange">预警中</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-patient-detail')">查看</button></td></tr>
<tr class="clickable"><td>P20260302</td><td>李**</td><td>女 / 67岁</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:85%;"></div></div><span style="font-size:11px;margin-left:4px;">85%</span></td><td><span class="tag tag-orange">疼痛8分</span></td><td><span class="tag tag-orange">预警中</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
<tr class="clickable"><td>P20260303</td><td>王**</td><td>男 / 45岁</td><td><span class="tag tag-purple">血管重建</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:100%;"></div></div><span style="font-size:11px;margin-left:4px;">100%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
<tr class="clickable"><td>P20260304</td><td>赵**</td><td>女 / 58岁</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:78%;"></div></div><span style="font-size:11px;margin-left:4px;">78%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
<tr class="clickable"><td>P20260305</td><td>陈**</td><td>男 / 71岁</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-cyan">围术期</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:60%;"></div></div><span style="font-size:11px;margin-left:4px;">60%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
</tbody>
</table>
<div class="pagination">
<button>&lt;</button><button class="active">1</button><button>2</button><button>3</button><button>...</button><button>13</button><button>&gt;</button>
<span>共 128 条</span>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Assessments Page ===== -->
<div id="page-assessments" class="page">
<div class="page-header">
<div><h1>评估记录</h1><div class="meta">患者评估量表与指标记录</div></div>
<div class="header-actions"><button class="btn btn-default">导出数据</button></div>
</div>
<div class="page-content">
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">今日评估</div><div class="stat-value blue">34</div><div class="stat-sub">疼痛评分 18 · FJS 8 · 其他 8</div></div>
<div class="stat-card"><div class="stat-label">异常指标</div><div class="stat-value red">7</div><div class="stat-sub">需关注</div></div>
<div class="stat-card"><div class="stat-label">平均疼痛评分</div><div class="stat-value orange">3.2</div><div class="stat-sub">较上周 -0.5</div></div>
<div class="stat-card"><div class="stat-label">FJS 平均分</div><div class="stat-value green">72</div><div class="stat-sub">关节置换患者</div></div>
</div>
<div class="section-card">
<div class="card-header"><h3>评估记录列表</h3></div>
<div class="card-body">
<div class="filter-tabs">
<span class="filter-tab active">全部</span>
<span class="filter-tab">疼痛评分</span>
<span class="filter-tab">FJS评分</span>
<span class="filter-tab">皮瓣观察</span>
<span class="filter-tab">血糖记录</span>
<span class="filter-tab">关节活动度</span>
</div>
<table class="data-table">
<thead><tr><th>时间</th><th>患者</th><th>评估类型</th><th>结果</th><th>是否异常</th><th>操作</th></tr></thead>
<tbody>
<tr><td>2026-04-16 10:20</td><td>张**</td><td>皮瓣观察</td><td>颜色苍白 · 肿胀中度 · 毛细血管反应减弱</td><td><span class="tag tag-red">异常</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-assess-detail')">详情</button></td></tr>
<tr><td>2026-04-16 09:45</td><td>李**</td><td>疼痛评分</td><td>VAS 8/10</td><td><span class="tag tag-red">异常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
<tr><td>2026-04-16 09:30</td><td>王**</td><td>血糖记录</td><td>空腹 5.8 mmol/L</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
<tr><td>2026-04-16 08:50</td><td>赵**</td><td>FJS评分</td><td>68分</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
<tr><td>2026-04-16 08:15</td><td>陈**</td><td>关节活动度</td><td>屈曲 95° · 伸展 -5°</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ===== Alerts Page ===== -->
<div id="page-alerts" class="page">
<div class="page-header">
<div><h1>预警中心</h1><div class="meta">异常指标预警与处理</div></div>
</div>
<div class="page-content">
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">待处理预警</div><div class="stat-value red">5</div><div class="stat-sub">需立即关注</div></div>
<div class="stat-card"><div class="stat-label">今日新增</div><div class="stat-value orange">3</div><div class="stat-sub">皮瓣 2 · 疼痛 1</div></div>
<div class="stat-card"><div class="stat-label">已处理</div><div class="stat-value green">12</div><div class="stat-sub">本周累计</div></div>
<div class="stat-card"><div class="stat-label">平均响应</div><div class="stat-value blue">18min</div><div class="stat-sub">目标 ≤30min</div></div>
</div>
<div class="section-card">
<div class="card-header"><h3>预警列表</h3></div>
<div class="card-body">
<div class="filter-tabs">
<span class="filter-tab active">待处理 (5)</span>
<span class="filter-tab">已处理 (12)</span>
<span class="filter-tab">全部</span>
</div>
<table class="data-table">
<thead><tr><th>预警时间</th><th>患者</th><th>手术类型</th><th>预警类型</th><th>预警详情</th><th>建议措施</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>04-16 09:32</td><td>张**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">紧急</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td>请抬高患肢,注意保暖,并联系医生</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
<tr><td>04-16 08:15</td><td>李**</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-orange">警告</span></td><td>疼痛评分 8/10,超出阈值</td><td>建议调整镇痛方案,必要时联系医生</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
<tr><td>04-16 07:50</td><td>刘**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">紧急</span></td><td>皮瓣颜色发紫,肿胀程度加重</td><td>立即联系主治医生,避免压迫患处</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
<tr><td>04-15 21:40</td><td>王**</td><td><span class="tag tag-purple">血管重建</span></td><td><span class="tag tag-orange">警告</span></td><td>血糖 12.5 mmol/L,高于正常范围</td><td>注意饮食控制,监测血糖变化</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
<tr><td>04-15 18:20</td><td>孙**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-orange">警告</span></td><td>术后伤口渗液增多</td><td>保持伤口清洁,及时换药</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ===== Knowledge Page ===== -->
<div id="page-knowledge" class="page">
<!-- KB List View -->
<div id="kb-list">
<div class="page-header">
<div><h1>知识库</h1><div class="meta">结构化康复知识内容管理 · 支持按病种、按阶段精确匹配推送</div></div>
<div class="header-actions">
<button class="btn btn-default">批量导入</button>
<button class="btn btn-primary" onclick="showModal('modal-new-article')">+ 新增内容</button>
</div>
</div>
<div class="page-content">
<!-- Stats -->
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">知识总量</div><div class="stat-value blue">86</div><div class="stat-sub">图文 62 · 视频 24</div></div>
<div class="stat-card"><div class="stat-label">病种覆盖</div><div class="stat-value green">10</div><div class="stat-sub">A-J 类全覆盖</div></div>
<div class="stat-card"><div class="stat-label">阶段覆盖</div><div class="stat-value purple">6</div><div class="stat-sub">决策期 → 康复6月</div></div>
<div class="stat-card"><div class="stat-label">本月阅读</div><div class="stat-value orange">1,247</div><div class="stat-sub">人均 9.7 篇</div></div>
</div>
<!-- Disease Classification -->
<div class="section-card">
<div class="card-header"><h3>病种分类(A-J类)</h3><span class="tag tag-blue">结构化标签体系</span></div>
<div class="card-body" style="padding:12px 20px;">
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;">
<div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .15s;" onclick="this.style.borderColor='#1890ff';this.style.boxShadow='0 0 0 2px rgba(24,144,255,.15)'">
<div style="font-size:16px;font-weight:700;color:#1890ff;">A</div><div style="font-size:11px;color:#4a5568;">游离皮瓣</div><div style="font-size:10px;color:#8896a7;">12篇</div></div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#52c41a;">B</div><div style="font-size:11px;color:#4a5568;">带蒂皮瓣</div><div style="font-size:10px;color:#8896a7;">10篇</div></div>
<div style="background:#f9f0ff;border:1px solid #d3adf7;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#722ed1;">C</div><div style="font-size:11px;color:#4a5568;">膝关节置换</div><div style="font-size:10px;color:#8896a7;">9篇</div></div>
<div style="background:#fff7e6;border:1px solid #ffd591;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#fa8c16;">D</div><div style="font-size:11px;color:#4a5568;">髋关节置换</div><div style="font-size:10px;color:#8896a7;">8篇</div></div>
<div style="background:#e6fffb;border:1px solid #87e8de;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#006d75;">E</div><div style="font-size:11px;color:#4a5568;">血管吻合重建</div><div style="font-size:10px;color:#8896a7;">8篇</div></div>
<div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#ff4d4f;">F</div><div style="font-size:11px;color:#4a5568;">动脉修复</div><div style="font-size:10px;color:#8896a7;">7篇</div></div>
<div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#1890ff;">G</div><div style="font-size:11px;color:#4a5568;">静脉重建</div><div style="font-size:10px;color:#8896a7;">6篇</div></div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#52c41a;">H</div><div style="font-size:11px;color:#4a5568;">神经修复</div><div style="font-size:10px;color:#8896a7;">6篇</div></div>
<div style="background:#f9f0ff;border:1px solid #d3adf7;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#722ed1;">I</div><div style="font-size:11px;color:#4a5568;">骨缺损修复</div><div style="font-size:10px;color:#8896a7;">5篇</div></div>
<div style="background:#f0f4f8;border:1px solid #d0d7de;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
<div style="font-size:16px;font-weight:700;color:#4a5568;">J</div><div style="font-size:11px;color:#4a5568;">其他/通用</div><div style="font-size:10px;color:#8896a7;">15篇</div></div>
</div>
</div>
</div>
<!-- Content List -->
<div class="section-card">
<div class="card-header"><h3>内容列表</h3><span style="font-size:12px;color:#8896a7;">共 86 条</span></div>
<div class="card-body">
<div class="filter-tabs">
<span class="filter-tab active">全部 (86)</span>
<span class="filter-tab">皮瓣修复 (22)</span>
<span class="filter-tab">关节置换 (17)</span>
<span class="filter-tab">血管重建 (14)</span>
<span class="filter-tab">通用 (15)</span>
<span class="filter-tab">待审核 (3)</span>
</div>
<div class="search-bar">
<input type="text" placeholder="搜索标题、关键词:疼痛、营养、心理、锻炼...">
<select style="width:100px;"><option>全部类型</option><option>图文</option><option>视频</option></select>
<select style="width:100px;"><option>全部病种</option><option>A 游离皮瓣</option><option>B 带蒂皮瓣</option><option>C 膝关节</option><option>D 髋关节</option><option>E 血管吻合</option><option>F 动脉修复</option><option>G 静脉重建</option><option>H 神经修复</option><option>I 骨缺损</option><option>J 通用</option></select>
<select style="width:110px;"><option>全部阶段</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select>
</div>
<table class="data-table">
<thead><tr><th style="width:40px;">ID</th><th>标题</th><th>类型</th><th>病种分类</th><th>适用阶段</th><th>关键词</th><th>阅读量</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr class="clickable" onclick="showKbDetail()"><td>K001</td><td style="font-weight:500;">皮瓣术后观察要点:颜色、肿胀与毛细血管反应</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">皮瓣观察、颜色、肿胀</td><td>234</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K002</td><td style="font-weight:500;">踝泵运动指导视频 — 预防深静脉血栓</td><td><span class="tag tag-purple">视频</span></td><td><span class="tag tag-green">C 膝关节</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">锻炼、血栓预防</td><td>189</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K003</td><td style="font-weight:500;">术后营养饮食指南 — 促进伤口愈合</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-gray">J 通用</span></td><td><span class="tag tag-cyan">围术期</span></td><td style="font-size:11px;color:#8896a7;">营养、饮食、愈合</td><td>312</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K004</td><td style="font-weight:500;">居家伤口护理与换药操作指南</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span></td><td><span class="tag tag-cyan">术后8-14天</span></td><td style="font-size:11px;color:#8896a7;">伤口护理、换药</td><td>278</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K005</td><td style="font-weight:500;">关节置换术后康复锻炼(1-3月阶段)</td><td><span class="tag tag-purple">视频</span></td><td><span class="tag tag-green">C 膝关节</span> <span class="tag tag-orange">D 髋关节</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">锻炼、关节活动度</td><td>156</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K006</td><td style="font-weight:500;">术后心理调适 — 应对焦虑与情绪低落</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-gray">J 通用</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">心理、焦虑、情绪</td><td>198</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K007</td><td style="font-weight:500;">血管重建术后肢体保暖与血运观察</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-purple">E 血管吻合</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">血运、保暖、观察</td><td>87</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
<tr class="clickable" onclick="showKbDetail()"><td>K008</td><td style="font-weight:500;">瘢痕管理与预防指南(新)</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span> <span class="tag tag-blue">B 带蒂皮瓣</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">瘢痕、预防</td><td>0</td><td><span class="tag tag-orange">待审核</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
</tbody>
</table>
<div class="pagination">
<button>&lt;</button><button class="active">1</button><button>2</button><button>3</button><button>...</button><button>9</button><button>&gt;</button>
<span>共 86 条</span>
</div>
</div>
</div>
<!-- Stage-Content Matrix -->
<div class="section-card">
<div class="card-header"><h3>阶段-内容匹配矩阵</h3><span class="tag tag-purple">自动推送依据</span></div>
<div class="card-body" style="padding:0;">
<table class="data-table" style="font-size:12px;">
<thead><tr><th>康复阶段</th><th>皮瓣修复 (A/B)</th><th>关节置换 (C/D)</th><th>血管重建 (E/F/G)</th><th>通用 (J)</th><th>合计</th></tr></thead>
<tbody>
<tr><td><span class="tag tag-orange">决策期</span></td><td>3篇</td><td>3篇</td><td>2篇</td><td>4篇</td><td style="font-weight:600;">12</td></tr>
<tr><td><span class="tag tag-blue">围术期</span></td><td>4篇</td><td>3篇</td><td>3篇</td><td>5篇</td><td style="font-weight:600;">15</td></tr>
<tr><td><span class="tag tag-purple">术后1-7天</span></td><td>5篇</td><td>4篇</td><td>4篇</td><td>3篇</td><td style="font-weight:600;">16</td></tr>
<tr><td><span class="tag tag-cyan">术后8-14天</span></td><td>4篇</td><td>3篇</td><td>2篇</td><td>2篇</td><td style="font-weight:600;">11</td></tr>
<tr><td><span class="tag tag-green">康复1-3月</span></td><td>4篇</td><td>5篇</td><td>3篇</td><td>6篇</td><td style="font-weight:600;">18</td></tr>
<tr><td><span class="tag tag-green">康复6个月</span></td><td>3篇</td><td>3篇</td><td>2篇</td><td>6篇</td><td style="font-weight:600;">14</td></tr>
<tr style="background:#f8fafc;font-weight:600;"><td>合计</td><td>23</td><td>21</td><td>16</td><td>26</td><td style="color:#1890ff;">86</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- KB Detail View -->
<div id="kb-detail" style="display:none;">
<div class="page-header">
<div>
<div style="display:flex;align-items:center;gap:8px;"><span style="color:#1890ff;cursor:pointer;font-size:13px;" onclick="hideKbDetail()">← 返回知识库列表</span></div>
<h1 style="margin-top:4px;">皮瓣术后观察要点:颜色、肿胀与毛细血管反应</h1>
</div>
<div class="header-actions">
<button class="btn btn-default">编辑内容</button>
<button class="btn btn-primary">手动推送</button>
</div>
</div>
<div class="page-content">
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
<span class="tag tag-blue" style="padding:4px 12px;">图文</span>
<span class="tag tag-blue" style="padding:4px 12px;">A 游离皮瓣</span>
<span class="tag tag-blue" style="padding:4px 12px;">B 带蒂皮瓣</span>
<span class="tag tag-cyan" style="padding:4px 12px;">术后1-7天</span>
<span class="tag tag-cyan" style="padding:4px 12px;">术后8-14天</span>
<span class="tag tag-green" style="padding:4px 12px;">已发布</span>
</div>
<div class="stats-row cols4">
<div class="stat-card" style="padding:14px;"><div class="stat-label">创建时间</div><div style="font-size:14px;font-weight:600;margin-top:4px;">2026-03-15</div></div>
<div class="stat-card" style="padding:14px;"><div class="stat-label">最后更新</div><div style="font-size:14px;font-weight:600;margin-top:4px;">2026-04-10</div></div>
<div class="stat-card" style="padding:14px;"><div class="stat-label">阅读量</div><div style="font-size:14px;font-weight:600;color:#1890ff;margin-top:4px;">234 次</div></div>
<div class="stat-card" style="padding:14px;"><div class="stat-label">推送患者</div><div style="font-size:14px;font-weight:600;color:#722ed1;margin-top:4px;">58 人</div></div>
</div>
<div class="stats-row cols2">
<div class="section-card">
<div class="card-header"><h3>基本信息</h3></div>
<div class="card-body" style="padding:8px 20px;">
<div class="detail-grid">
<div class="detail-item"><label>来源文档</label><span>皮瓣康复指导手册.docx</span></div>
<div class="detail-item"><label>审核人</label><span>陈主任</span></div>
</div>
<div style="margin-top:12px;">
<div style="font-size:12px;color:#8896a7;margin-bottom:6px;">关键词标签</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">皮瓣观察</span>
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">颜色判断</span>
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">肿胀评估</span>
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">毛细血管反应</span>
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">血运监测</span>
</div>
</div>
</div>
</div>
<div class="section-card">
<div class="card-header"><h3>推送记录</h3></div>
<div class="card-body" style="padding:0;">
<table class="data-table" style="font-size:12px;">
<thead><tr><th>推送时间</th><th>推送对象</th><th>触发条件</th><th>阅读状态</th></tr></thead>
<tbody>
<tr><td>2026-04-16</td><td>张** 等 3 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 2</span> <span class="tag tag-gray">未读 1</span></td></tr>
<tr><td>2026-04-14</td><td>刘** 等 2 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 2</span></td></tr>
<tr><td>2026-04-10</td><td>赵** 等 5 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 4</span> <span class="tag tag-gray">未读 1</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Content Body -->
<div class="section-card">
<div class="card-header"><h3>正文内容(通俗化版本)</h3><span class="tag tag-purple">面向患者</span></div>
<div class="card-body" style="font-size:13px;color:#4a5568;line-height:2;">
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">一、为什么要观察皮瓣?</strong></p>
<p style="margin-bottom:12px;">皮瓣手术后,移植的皮肤需要重新建立血液供应。术后早期是最关键的时期,通过观察皮瓣的颜色、肿胀和毛细血管反应,可以及时发现血液供应是否正常。</p>
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">二、怎么看皮瓣颜色?</strong></p>
<p style="margin-bottom:8px;">正常的皮瓣应该是<span style="color:#52c41a;font-weight:600;">红润</span>的,和周围正常皮肤颜色接近。需要注意以下异常情况:</p>
<ul style="padding-left:20px;margin-bottom:12px;">
<li><span style="color:#fa8c16;font-weight:500;">苍白</span> — 可能是动脉供血不足,需要立即通知医生</li>
<li><span style="color:#ff4d4f;font-weight:500;">发紫/暗红</span> — 可能是静脉回流受阻,同样需要紧急处理</li>
<li><span style="color:#52c41a;font-weight:500;">红润</span> — 血液供应正常,继续观察即可</li>
</ul>
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">三、毛细血管反应怎么测?</strong></p>
<p style="margin-bottom:8px;">用手指轻轻按压皮瓣表面2秒后松开:</p>
<ul style="padding-left:20px;margin-bottom:12px;">
<li><span style="color:#52c41a;">正常</span>:1-2秒内恢复红色</li>
<li><span style="color:#fa8c16;">减弱</span>:超过3秒才恢复,需要关注</li>
<li><span style="color:#ff4d4f;">消失</span>:按压后不变色或长时间不恢复,立即联系医生</li>
</ul>
<p><strong style="color:#1a2332;">四、肿胀怎么判断?</strong></p>
<p>术后早期轻度肿胀是正常的。如果肿胀持续加重、皮肤发亮发紧,或伴有疼痛加剧,请及时联系医护人员。</p>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Templates Page ===== -->
<div id="page-templates" class="page">
<!-- List View -->
<div id="tpl-list">
<div class="page-header">
<div><h1>康复模板</h1><div class="meta">康复计划模板配置与管理</div></div>
<div class="header-actions"><button class="btn btn-primary" onclick="showModal('modal-new-template')">+ 新建模板</button></div>
</div>
<div class="page-content">
<div class="section-card">
<div class="card-header"><h3>模板列表</h3><span style="font-size:12px;color:#8896a7;">共 4 个模板</span></div>
<div class="card-body">
<div class="filter-tabs">
<span class="filter-tab active">全部 (4)</span>
<span class="filter-tab">皮瓣修复 (2)</span>
<span class="filter-tab">关节置换 (1)</span>
<span class="filter-tab">血管重建 (1)</span>
</div>
<table class="data-table">
<thead><tr><th>模板名称</th><th>适用病种</th><th>阶段数</th><th>任务数</th><th>适用患者</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
<tbody>
<tr class="clickable" onclick="showTplDetail()"><td style="font-weight:500;">皮瓣修复 - 标准康复方案</td><td><span class="tag tag-blue">皮瓣修复</span></td><td>6</td><td>42</td><td>58 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-10</td><td><button class="btn btn-sm btn-primary" onclick="event.stopPropagation();showTplDetail()">查看</button> <button class="btn btn-sm btn-default" onclick="event.stopPropagation()">复制</button></td></tr>
<tr class="clickable"><td style="font-weight:500;">关节置换 - 标准康复方案</td><td><span class="tag tag-green">关节置换</span></td><td>5</td><td>38</td><td>38 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-08</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
<tr class="clickable"><td style="font-weight:500;">血管重建 - 标准康复方案</td><td><span class="tag tag-purple">血管重建</span></td><td>4</td><td>30</td><td>32 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-05</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
<tr class="clickable"><td style="font-weight:500;">皮瓣修复 - 老年患者方案</td><td><span class="tag tag-blue">皮瓣修复</span></td><td>6</td><td>45</td><td>—</td><td><span class="tag tag-gray">草稿</span></td><td>2026-04-12</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Detail View (hidden by default) -->
<div id="tpl-detail" style="display:none;">
<div class="page-header">
<div>
<div style="display:flex;align-items:center;gap:8px;"><span style="color:#1890ff;cursor:pointer;font-size:13px;" onclick="hideTplDetail()">← 返回模板列表</span></div>
<h1 style="margin-top:4px;">皮瓣修复 - 标准康复方案</h1>
</div>
<div class="header-actions">
<button class="btn btn-default">复制模板</button>
<button class="btn btn-default">禁用</button>
<button class="btn btn-primary">编辑模板</button>
</div>
</div>
<div class="page-content">
<!-- Template Info -->
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">适用病种</div><div style="font-size:16px;font-weight:600;color:#1890ff;margin-top:4px;">皮瓣修复</div><div class="stat-sub">A 游离皮瓣 · B 带蒂皮瓣</div></div>
<div class="stat-card"><div class="stat-label">康复阶段</div><div class="stat-value blue">6</div><div class="stat-sub">决策期 → 康复6个月</div></div>
<div class="stat-card"><div class="stat-label">任务总数</div><div class="stat-value green">42</div><div class="stat-sub">含定时提醒任务 18 项</div></div>
<div class="stat-card"><div class="stat-label">适用患者</div><div class="stat-value purple">58</div><div class="stat-sub">当前使用此模板</div></div>
</div>
<div class="alert alert-info" style="margin-bottom:20px;">此模板覆盖皮瓣修复患者从决策期到康复6个月的全旅程,每个阶段包含对应的任务清单、评估量表和知识推送内容。系统根据患者当前阶段自动匹配推送。</div>
<!-- Stage List -->
<div class="section-card">
<div class="card-header"><h3>阶段配置</h3><span class="tag tag-blue">6 个阶段</span></div>
<div class="card-body" style="padding:0;">
<table class="data-table">
<thead><tr><th style="width:130px;">阶段</th><th>时间范围</th><th>任务数</th><th>评估量表</th><th>知识推送</th><th>提醒规则</th><th>操作</th></tr></thead>
<tbody>
<tr><td><span class="tag tag-orange">决策期</span></td><td>术前</td><td>5</td><td>焦虑评估(SAS)</td><td>手术知情、术前准备 (3篇)</td><td>入组后立即推送</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td><span class="tag tag-blue">围术期</span></td><td>术前1-3天</td><td>8</td><td>营养评估(NRS2002)</td><td>术前检查、饮食指导 (4篇)</td><td>术前3天推送</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td><span class="tag tag-purple">术后1-7天</span></td><td>术后第1-7天</td><td>10</td><td>疼痛VAS、皮瓣观察</td><td>皮瓣观察要点、体位指导 (5篇)</td><td>每日 08:00 / 20:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td><span class="tag tag-cyan">术后8-14天</span></td><td>术后第8-14天</td><td>8</td><td>疼痛VAS、伤口评估</td><td>伤口护理、换药指南 (4篇)</td><td>每日 08:00 / 20:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td><span class="tag tag-green">康复1-3月</span></td><td>术后1-3个月</td><td>7</td><td>功能评估、心理评估</td><td>康复锻炼、营养指导 (4篇)</td><td>每日 08:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td><span class="tag tag-green">康复6个月</span></td><td>术后6个月</td><td>4</td><td>综合评估</td><td>长期护理、复查提醒 (3篇)</td><td>每周一 09:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
</tbody>
</table>
</div>
</div>
<!-- Preset Alert Rules -->
<div class="section-card">
<div class="card-header"><h3>预警规则配置</h3></div>
<div class="card-body" style="padding:0;">
<table class="data-table">
<thead><tr><th>指标</th><th>预警条件</th><th>级别</th><th>处理建议</th><th>状态</th></tr></thead>
<tbody>
<tr><td>皮瓣颜色</td><td>苍白 或 发紫</td><td><span class="tag tag-red">紧急</span></td><td>请抬高患肢,注意保暖,并联系医生</td><td><span class="tag tag-green">启用</span></td></tr>
<tr><td>毛细血管反应</td><td>减弱(>3秒)或 消失</td><td><span class="tag tag-red">紧急</span></td><td>立即联系主治医生评估血供</td><td><span class="tag tag-green">启用</span></td></tr>
<tr><td>疼痛评分</td><td>VAS ≥ 7</td><td><span class="tag tag-orange">警告</span></td><td>建议调整镇痛方案</td><td><span class="tag tag-green">启用</span></td></tr>
<tr><td>肿胀程度</td><td>重度</td><td><span class="tag tag-orange">警告</span></td><td>抬高患肢,冷敷,联系医生</td><td><span class="tag tag-green">启用</span></td></tr>
<tr><td>血糖</td><td>空腹 > 7.0 或 < 3.9</td><td><span class="tag tag-orange">警告</span></td><td>注意饮食控制,监测血糖变化</td><td><span class="tag tag-green">启用</span></td></tr>
</tbody>
</table>
</div>
</div>
<!-- Usage Stats -->
<div class="section-card">
<div class="card-header"><h3>使用统计</h3></div>
<div class="card-body">
<div class="chart-bar-group">
<div class="chart-bar-item"><span class="chart-bar-label">决策期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:15%;background:#fa8c16;"></div></div><span class="chart-bar-val">9人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">围术期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#1890ff;"></div></div><span class="chart-bar-val">7人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后1-7天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:20%;background:#722ed1;"></div></div><span class="chart-bar-val">12人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后8-14天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:17%;background:#006d75;"></div></div><span class="chart-bar-val">10人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">康复1-3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:22%;background:#52c41a;"></div></div><span class="chart-bar-val">13人</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">康复6个月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#52c41a;"></div></div><span class="chart-bar-val">7人</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Consult Page ===== -->
<div id="page-consult" class="page">
<div class="page-header">
<div><h1>咨询管理</h1><div class="meta">患者图文咨询与在线回复</div></div>
</div>
<div class="page-content">
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">待回复</div><div class="stat-value orange">3</div><div class="stat-sub">请尽快处理</div></div>
<div class="stat-card"><div class="stat-label">今日咨询</div><div class="stat-value blue">15</div><div class="stat-sub">较昨日 +2</div></div>
<div class="stat-card"><div class="stat-label">平均响应</div><div class="stat-value green">12min</div><div class="stat-sub">目标 ≤30min</div></div>
<div class="stat-card"><div class="stat-label">本周总量</div><div class="stat-value purple">68</div><div class="stat-sub">热点:伤口护理</div></div>
</div>
<div class="stats-row cols2">
<!-- Chat List -->
<div class="section-card">
<div class="card-header"><h3>咨询列表</h3></div>
<div class="card-body" style="padding:0;">
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;background:#e6f7ff;">
<div class="chat-avatar patient">张</div>
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">张** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">伤口周围有点红肿,是正常的吗?</div></div>
<div style="font-size:10px;color:#8896a7;">09:45</div>
</div>
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
<div class="chat-avatar patient">李</div>
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">李** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">膝盖弯曲时疼痛加重怎么办?</div></div>
<div style="font-size:10px;color:#8896a7;">08:30</div>
</div>
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
<div class="chat-avatar patient">王</div>
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">王** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">血糖控制不太好,需要调药吗?</div></div>
<div style="font-size:10px;color:#8896a7;">昨天</div>
</div>
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
<div class="chat-avatar patient">赵</div>
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">赵**</div><div style="font-size:11px;color:#8896a7;margin-top:2px;">好的,谢谢医生!</div></div>
<div style="font-size:10px;color:#8896a7;">昨天</div>
</div>
</div>
</div>
<!-- Chat Window -->
<div class="section-card">
<div class="chat-container" style="height:auto;border:none;">
<div class="chat-header">
<div><strong>张** · 皮瓣修复</strong> <span class="tag tag-cyan" style="margin-left:4px;">术后8-14天</span></div>
<button class="btn btn-sm btn-default">查看病历</button>
</div>
<div class="chat-body" style="min-height:260px;">
<div class="chat-msg">
<div class="chat-avatar patient">张</div>
<div><div class="chat-bubble">医生您好,我今天换药的时候发现伤口周围有点红肿,是正常的吗?</div><div class="chat-time">09:45</div></div>
</div>
<div class="chat-msg">
<div class="chat-avatar patient">张</div>
<div><div class="chat-bubble">我拍了张照片,您帮我看看 [图片]</div><div class="chat-time">09:46</div></div>
</div>
</div>
<div class="chat-footer">
<input type="text" placeholder="输入回复内容..." style="border-radius:20px;">
<button class="btn btn-primary" style="border-radius:20px;">发送</button>
</div>
<div style="padding:8px 16px;background:#f8fafc;border-top:1px solid #f0f4f8;">
<span style="font-size:11px;color:#8896a7;">快捷回复:</span>
<button class="btn btn-sm btn-default" style="margin:2px;">术后轻微红肿属正常现象</button>
<button class="btn btn-sm btn-default" style="margin:2px;">建议来院复查</button>
<button class="btn btn-sm btn-default" style="margin:2px;">注意保持伤口清洁干燥</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Reports Page ===== -->
<div id="page-reports" class="page">
<div class="page-header">
<div><h1>数据报表</h1><div class="meta">科研数据统计与匿名化导出</div></div>
<div class="header-actions">
<button class="btn btn-default">导出 Excel</button>
<button class="btn btn-default">导出 PDF</button>
</div>
</div>
<div class="page-content">
<div class="alert alert-info" style="margin-bottom:20px;">
数据导出已严格脱敏处理,去除姓名、手机号等个人身份信息,仅保留匿名化编号。
</div>
<div class="section-card">
<div class="card-header"><h3>筛选条件</h3></div>
<div class="card-body">
<div class="form-grid">
<div class="form-group"><label>时间范围</label><select><option>最近30天</option><option>最近90天</option><option>最近半年</option><option>自定义</option></select></div>
<div class="form-group"><label>手术类型</label><select><option>全部</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
<div class="form-group"><label>康复阶段</label><select><option>全部</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select></div>
<div class="form-group"><label>数据类型</label><select><option>全部</option><option>量表评分</option><option>关键指标</option><option>任务打卡</option><option>咨询记录</option></select></div>
<div class="form-group"><label>年龄范围</label><div style="display:flex;gap:8px;"><input type="number" placeholder="最小" style="width:50%;"><input type="number" placeholder="最大" style="width:50%;"></div></div>
<div class="form-group" style="align-self:end;"><button class="btn btn-primary" style="width:100%;">查询</button></div>
</div>
</div>
</div>
<div class="stats-row cols4">
<div class="stat-card"><div class="stat-label">匹配患者</div><div class="stat-value blue">128</div><div class="stat-sub">符合筛选条件</div></div>
<div class="stat-card"><div class="stat-label">评估记录</div><div class="stat-value green">1,247</div><div class="stat-sub">含量表 + 指标</div></div>
<div class="stat-card"><div class="stat-label">打卡记录</div><div class="stat-value purple">8,432</div><div class="stat-sub">平均打卡率 84%</div></div>
<div class="stat-card"><div class="stat-label">咨询记录</div><div class="stat-value orange">356</div><div class="stat-sub">热点:伤口护理</div></div>
</div>
<div class="stats-row cols2">
<div class="section-card">
<div class="card-header"><h3>FJS 评分趋势</h3><span class="tag tag-green">关节置换</span></div>
<div class="card-body">
<div class="chart-bar-group">
<div class="chart-bar-item"><span class="chart-bar-label">术后1月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:45%;background:#fa8c16;"></div></div><span class="chart-bar-val">45分</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后2月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:62%;background:#1890ff;"></div></div><span class="chart-bar-val">62分</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:72%;background:#52c41a;"></div></div><span class="chart-bar-val">72分</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">术后6月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:85%;background:#52c41a;"></div></div><span class="chart-bar-val">85分</span></div>
</div>
</div>
</div>
<div class="section-card">
<div class="card-header"><h3>预警频次统计</h3><span class="tag tag-red">异常分布</span></div>
<div class="card-body">
<div class="chart-bar-group">
<div class="chart-bar-item"><span class="chart-bar-label">皮瓣异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:40%;background:#ff4d4f;"></div></div><span class="chart-bar-val">32次</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">疼痛超标</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:30%;background:#fa8c16;"></div></div><span class="chart-bar-val">24次</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">血糖异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:18%;background:#722ed1;"></div></div><span class="chart-bar-val">14次</span></div>
<div class="chart-bar-item"><span class="chart-bar-label">伤口异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#1890ff;"></div></div><span class="chart-bar-val">10次</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Settings Page ===== -->
<div id="page-settings" class="page">
<div class="page-header">
<div><h1>系统设置</h1><div class="meta">系统配置与权限管理</div></div>
</div>
<div class="page-content">
<div class="stats-row cols2">
<div class="section-card">
<div class="card-header"><h3>基础设置</h3></div>
<div class="card-body">
<div class="settings-section">
<h4>预警规则</h4>
<div class="settings-item"><div><label>皮瓣颜色异常预警</label><div class="desc">苍白或发紫时触发紧急预警</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="settings-item"><div><label>疼痛评分阈值</label><div class="desc">VAS ≥ 7 分触发预警</div></div><input type="number" value="7" style="width:60px;text-align:center;"></div>
<div class="settings-item"><div><label>血糖异常阈值</label><div class="desc">空腹 > 7.0 或 < 3.9 mmol/L</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="settings-item"><div><label>打卡提醒</label><div class="desc">每日定时推送打卡提醒</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div>
<div class="settings-section">
<h4>通知设置</h4>
<div class="settings-item"><div><label>微信服务通知</label><div class="desc">通过微信推送预警和提醒</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="settings-item"><div><label>短信预警通知</label><div class="desc">紧急预警时发送短信(如皮瓣危象)</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div>
</div>
</div>
<div class="section-card">
<div class="card-header"><h3>用户管理</h3><button class="btn btn-sm btn-primary">+ 新增用户</button></div>
<div class="card-body" style="padding:0;">
<table class="data-table">
<thead><tr><th>姓名</th><th>角色</th><th>科室</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>陈主任</td><td><span class="tag tag-purple">管理员</span></td><td>护理部</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td>王护士</td><td><span class="tag tag-blue">医护人员</span></td><td>骨科病区</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td>李医生</td><td><span class="tag tag-blue">医护人员</span></td><td>显微外科</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
<tr><td>赵护士</td><td><span class="tag tag-blue">医护人员</span></td><td>血管外科</td><td><span class="tag tag-gray">禁用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Modals ===== -->
<!-- New Patient Modal -->
<div class="modal-overlay" id="modal-new-patient">
<div class="modal">
<div class="modal-header"><h3>新增患者</h3><button class="modal-close" onclick="hideModal('modal-new-patient')">&times;</button></div>
<div class="modal-body">
<div class="form-grid">
<div class="form-group"><label><span class="req">*</span> 患者姓名</label><input type="text" placeholder="请输入"></div>
<div class="form-group"><label><span class="req">*</span> 性别</label><select><option>请选择</option><option>男</option><option>女</option></select></div>
<div class="form-group"><label><span class="req">*</span> 年龄</label><input type="number" placeholder="请输入"></div>
<div class="form-group"><label><span class="req">*</span> 手机号</label><input type="text" placeholder="请输入"></div>
<div class="form-group"><label><span class="req">*</span> 所在地区</label><input type="text" placeholder="省/市"></div>
<div class="form-group"><label><span class="req">*</span> 手术类型</label><select><option>请选择</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
<div class="form-group"><label><span class="req">*</span> 手术时间</label><input type="date"></div>
<div class="form-group"><label><span class="req">*</span> 手术医生</label><input type="text" placeholder="请输入"></div>
<div class="form-group"><label><span class="req">*</span> 当前阶段</label><select><option>请选择</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select></div>
<div class="form-group"><label>受教育程度</label><select><option>请选择</option><option>小学及以下</option><option>初中</option><option>高中/中专</option><option>大专</option><option>本科及以上</option></select></div>
<div class="form-group"><label>慢性病</label><input type="text" placeholder="如:高血压、糖尿病"></div>
<div class="form-group"><label>用药情况</label><input type="text" placeholder="请输入"></div>
<div class="form-group"><label>家庭照顾者</label><input type="text" placeholder="请输入"></div>
<div class="form-group"><label>照顾者学历</label><select><option>请选择</option><option>小学及以下</option><option>初中</option><option>高中/中专</option><option>大专</option><option>本科及以上</option></select></div>
<div class="form-group"><label>家庭年收入</label><select><option>请选择</option><option>5万以下</option><option>5-10万</option><option>10-20万</option><option>20万以上</option></select></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-new-patient')">取消</button>
<button class="btn btn-primary" onclick="hideModal('modal-new-patient');showToast('患者添加成功')">确认添加</button>
</div>
</div>
</div>
<!-- New Article Modal -->
<div class="modal-overlay" id="modal-new-article">
<div class="modal" style="width:680px;">
<div class="modal-header"><h3>新增知识内容</h3><button class="modal-close" onclick="hideModal('modal-new-article')">&times;</button></div>
<div class="modal-body">
<div class="alert alert-info" style="margin-bottom:16px;">请将专业医学内容转化为通俗易懂的患者版本。系统将根据病种分类和适用阶段自动匹配推送给对应患者。</div>
<div class="form-grid">
<div class="form-group span2"><label><span class="req">*</span> 标题</label><input type="text" placeholder="请输入内容标题,建议包含病种和阶段关键词"></div>
<div class="form-group"><label><span class="req">*</span> 内容类型</label><select><option>图文</option><option>视频</option></select></div>
<div class="form-group span3"><label><span class="req">*</span> 病种分类(可多选)</label>
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> A 游离皮瓣</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> B 带蒂皮瓣</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> C 膝关节</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> D 髋关节</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> E 血管吻合</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> F-G 其他血管</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> H 神经修复</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> I 骨缺损</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> J 通用</label>
</div></div>
<div class="form-group span3"><label><span class="req">*</span> 适用阶段(可多选)</label>
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 决策期</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 围术期</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 术后1-7天</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 术后8-14天</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 康复1-3月</label>
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 康复6个月</label>
</div></div>
<div class="form-group span2"><label>关键词标签</label><input type="text" placeholder="多个关键词用逗号分隔,如:疼痛、营养、心理、锻炼"></div>
<div class="form-group"><label>来源文档</label><div style="border:1px dashed #d0d7de;border-radius:6px;padding:10px;text-align:center;font-size:12px;color:#8896a7;cursor:pointer;">点击上传 Word/PDF</div></div>
<div class="form-group span3"><label><span class="req">*</span> 内容摘要</label><textarea placeholder="请输入面向患者的通俗化内容摘要..."></textarea></div>
<div class="form-group span3"><label><span class="req">*</span> 正文内容</label><textarea style="min-height:120px;" placeholder="请输入通俗易懂的正文内容。注意:将专业术语转化为患者能理解的语言..."></textarea></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-new-article')">取消</button>
<button class="btn btn-default" onclick="hideModal('modal-new-article');showToast('已保存为草稿')">保存草稿</button>
<button class="btn btn-primary" onclick="hideModal('modal-new-article');showToast('内容已提交审核')">提交审核</button>
</div>
</div>
</div>
<!-- New Template Modal -->
<div class="modal-overlay" id="modal-new-template">
<div class="modal">
<div class="modal-header"><h3>新建康复模板</h3><button class="modal-close" onclick="hideModal('modal-new-template')">&times;</button></div>
<div class="modal-body">
<div class="form-grid">
<div class="form-group span2"><label><span class="req">*</span> 模板名称</label><input type="text" placeholder="如:皮瓣修复 - 标准康复方案"></div>
<div class="form-group"><label><span class="req">*</span> 适用病种</label><select><option>请选择</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
<div class="form-group span3"><label>模板说明</label><textarea placeholder="请描述此模板的适用场景和特点..."></textarea></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-new-template')">取消</button>
<button class="btn btn-primary" onclick="hideModal('modal-new-template');showToast('模板创建成功')">确认创建</button>
</div>
</div>
</div>
<!-- Stage Detail Modal -->
<div class="modal-overlay" id="modal-stage-detail">
<div class="modal" style="width:700px;">
<div class="modal-header"><h3>阶段详情 — 决策期</h3><button class="modal-close" onclick="hideModal('modal-stage-detail')">&times;</button></div>
<div class="modal-body">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
<div class="stat-card" style="padding:12px;"><div class="stat-label">时间范围</div><div style="font-size:14px;font-weight:600;">术前</div></div>
<div class="stat-card" style="padding:12px;"><div class="stat-label">任务数</div><div style="font-size:14px;font-weight:600;color:#1890ff;">5 项</div></div>
<div class="stat-card" style="padding:12px;"><div class="stat-label">当前患者</div><div style="font-size:14px;font-weight:600;color:#722ed1;">9 人</div></div>
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">任务清单</h4>
<table class="data-table" style="font-size:12px;margin-bottom:16px;">
<thead><tr><th>序号</th><th>任务名称</th><th>类型</th><th>提醒时间</th><th>是否必做</th></tr></thead>
<tbody>
<tr><td>1</td><td>阅读手术知情同意书</td><td><span class="tag tag-blue">阅读</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
<tr><td>2</td><td>完成焦虑自评量表(SAS)</td><td><span class="tag tag-orange">评估</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
<tr><td>3</td><td>了解术前准备事项</td><td><span class="tag tag-blue">阅读</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
<tr><td>4</td><td>记录当前疼痛基线</td><td><span class="tag tag-purple">记录</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
<tr><td>5</td><td>观看手术流程科普视频</td><td><span class="tag tag-purple">视频</span></td><td>入组次日</td><td><span class="tag tag-gray">选做</span></td></tr>
</tbody>
</table>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">评估量表</h4>
<div style="display:flex;gap:8px;margin-bottom:16px;">
<div style="border:1px solid #e8edf2;border-radius:8px;padding:12px;flex:1;">
<div style="font-size:13px;font-weight:500;">焦虑自评量表(SAS)</div>
<div style="font-size:11px;color:#8896a7;margin-top:4px;">20题 · 约5分钟 · 评估术前焦虑水平</div>
<div style="margin-top:6px;"><span class="tag tag-green">必填</span></div>
</div>
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">知识推送内容</h4>
<table class="data-table" style="font-size:12px;">
<thead><tr><th>内容</th><th>类型</th><th>推送时机</th></tr></thead>
<tbody>
<tr><td>皮瓣修复手术简介 — 您需要了解的事</td><td><span class="tag tag-blue">图文</span></td><td>入组当天</td></tr>
<tr><td>术前准备清单 — 饮食、用药、心理</td><td><span class="tag tag-blue">图文</span></td><td>入组当天</td></tr>
<tr><td>手术流程科普动画</td><td><span class="tag tag-purple">视频</span></td><td>入组次日</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-stage-detail')">关闭</button>
<button class="btn btn-primary">编辑阶段</button>
</div>
</div>
</div>
<!-- Patient Detail Modal -->
<div class="modal-overlay" id="modal-patient-detail">
<div class="modal" style="width:720px;">
<div class="modal-header"><h3>患者详情 — 张** (P20260301)</h3><button class="modal-close" onclick="hideModal('modal-patient-detail')">&times;</button></div>
<div class="modal-body">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;">
<div class="stat-card" style="padding:12px;"><div class="stat-label">手术类型</div><div style="font-size:14px;font-weight:600;color:#1890ff;">皮瓣修复</div></div>
<div class="stat-card" style="padding:12px;"><div class="stat-label">康复阶段</div><div style="font-size:14px;font-weight:600;color:#722ed1;">术后8-14天</div></div>
<div class="stat-card" style="padding:12px;"><div class="stat-label">打卡率</div><div style="font-size:14px;font-weight:600;color:#52c41a;">92%</div></div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
<div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">基本信息</h4>
<div class="detail-grid">
<div class="detail-item"><label>姓名</label><span>张**</span></div>
<div class="detail-item"><label>性别/年龄</label><span>男 / 52岁</span></div>
<div class="detail-item"><label>所在地区</label><span>浙江省杭州市</span></div>
<div class="detail-item"><label>手术时间</label><span>2026-04-06</span></div>
<div class="detail-item"><label>手术医生</label><span>李主任</span></div>
<div class="detail-item"><label>慢性病</label><span>高血压</span></div>
<div class="detail-item"><label>用药</label><span>降压药(每日1次)</span></div>
<div class="detail-item"><label>照顾者</label><span>配偶</span></div>
</div>
</div>
<div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">最近健康指标</h4>
<table class="data-table" style="font-size:12px;">
<tr><td style="color:#8896a7;">皮瓣颜色</td><td><span class="tag tag-green">红润</span></td><td style="color:#8896a7;">今天 08:00</td></tr>
<tr><td style="color:#8896a7;">肿胀程度</td><td>轻度</td><td style="color:#8896a7;">今天 08:00</td></tr>
<tr><td style="color:#8896a7;">疼痛评分</td><td>VAS 4/10</td><td style="color:#8896a7;">昨天 20:00</td></tr>
<tr><td style="color:#8896a7;">血糖</td><td>5.8 mmol/L</td><td style="color:#8896a7;">昨天 07:30</td></tr>
<tr><td style="color:#8896a7;">毛细血管反应</td><td>正常</td><td style="color:#8896a7;">今天 08:00</td></tr>
</table>
</div>
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">预警记录</h4>
<table class="data-table" style="font-size:12px;">
<thead><tr><th>时间</th><th>类型</th><th>详情</th><th>状态</th></tr></thead>
<tbody>
<tr><td>04-16 09:32</td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td><span class="tag tag-orange">待处理</span></td></tr>
<tr><td>04-14 15:20</td><td><span class="tag tag-orange">疼痛</span></td><td>VAS 7/10,超出阈值</td><td><span class="tag tag-green">已处理</span></td></tr>
</tbody>
</table>
<h4 style="font-size:13px;font-weight:600;margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">任务完成情况(最近7天)</h4>
<div style="display:flex;gap:6px;align-items:flex-end;height:60px;">
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:50px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/10</div></div>
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:45px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/11</div></div>
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:55px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/12</div></div>
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:50px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/13</div></div>
<div style="flex:1;text-align:center;"><div style="background:#fa8c16;height:40px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/14</div></div>
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:55px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/15</div></div>
<div style="flex:1;text-align:center;"><div style="background:#1890ff;height:35px;border-radius:3px 3px 0 0;border:2px solid #096dd9;"></div><div style="font-size:10px;color:#1890ff;margin-top:4px;">今天</div></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-patient-detail')">关闭</button>
<button class="btn btn-primary">推送康复指导</button>
<button class="btn btn-purple">发送消息</button>
</div>
</div>
</div>
<!-- Assessment Detail Modal -->
<div class="modal-overlay" id="modal-assess-detail">
<div class="modal" style="width:640px;">
<div class="modal-header"><h3>评估详情</h3><button class="modal-close" onclick="hideModal('modal-assess-detail')">&times;</button></div>
<div class="modal-body">
<div class="alert alert-info" style="margin-bottom:16px;">皮瓣观察记录 — 张** · 2026-04-16 10:20</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<div class="detail-grid">
<div class="detail-item"><label>患者</label><span>张** (P20260301)</span></div>
<div class="detail-item"><label>手术类型</label><span>皮瓣修复</span></div>
<div class="detail-item"><label>康复阶段</label><span>术后8-14天</span></div>
<div class="detail-item"><label>记录时间</label><span>2026-04-16 10:20</span></div>
</div>
</div>
<div>
<div class="detail-grid">
<div class="detail-item"><label>皮瓣颜色</label><span style="color:#ff4d4f;font-weight:600;">苍白</span></div>
<div class="detail-item"><label>肿胀程度</label><span style="color:#fa8c16;">中度</span></div>
<div class="detail-item"><label>毛细血管反应</label><span style="color:#ff4d4f;font-weight:600;">减弱</span></div>
<div class="detail-item"><label>是否异常</label><span><span class="tag tag-red">异常</span></span></div>
</div>
</div>
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">患者描述</h4>
<div style="background:#f8fafc;border-radius:6px;padding:12px;font-size:13px;color:#4a5568;line-height:1.6;margin-bottom:16px;">
今天早上观察发现皮瓣颜色比昨天偏白,按压后恢复时间变长,大约3-4秒。肿胀比昨天稍有加重。
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">患者上传照片</h4>
<div style="display:flex;gap:8px;margin-bottom:16px;">
<div style="width:100px;height:100px;background:#f0f4f8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8896a7;font-size:11px;border:1px solid #e8edf2;">伤口照片1</div>
<div style="width:100px;height:100px;background:#f0f4f8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8896a7;font-size:11px;border:1px solid #e8edf2;">伤口照片2</div>
</div>
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">系统预警</h4>
<div class="alert alert-warning">皮瓣颜色苍白 + 毛细血管反应减弱,建议:请抬高患肢,注意保暖,并联系医生评估血供情况。</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-assess-detail')">关闭</button>
<button class="btn btn-primary">联系患者</button>
</div>
</div>
</div>
<!-- Alert Handle Modal -->
<div class="modal-overlay" id="modal-alert-handle">
<div class="modal" style="width:600px;">
<div class="modal-header"><h3>处理预警</h3><button class="modal-close" onclick="hideModal('modal-alert-handle')">&times;</button></div>
<div class="modal-body">
<div class="alert alert-warning" style="margin-bottom:16px;">
<strong>预警信息:</strong>张** — 皮瓣颜色苍白,毛细血管反应减弱 (2026-04-16 09:32)
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
<div class="detail-item"><label>患者</label><span>张** (P20260301)</span></div>
<div class="detail-item"><label>手术类型</label><span>皮瓣修复</span></div>
<div class="detail-item"><label>预警级别</label><span><span class="tag tag-red">紧急</span></span></div>
<div class="detail-item"><label>预警时间</label><span>2026-04-16 09:32</span></div>
</div>
<div class="form-grid" style="grid-template-columns:1fr;">
<div class="form-group"><label><span class="req">*</span> 处理措施</label>
<select><option>请选择处理措施</option><option>电话指导患者</option><option>推送护理建议</option><option>安排来院复查</option><option>紧急联系主治医生</option><option>其他</option></select>
</div>
<div class="form-group"><label><span class="req">*</span> 处理说明</label>
<textarea placeholder="请详细描述处理过程和建议...">已电话联系患者,指导其抬高患肢、注意保暖。嘱咐患者持续观察,如30分钟内颜色未恢复红润,立即来院就诊。</textarea>
</div>
<div class="form-group"><label>是否需要随访</label>
<div style="display:flex;gap:12px;"><label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;"><input type="radio" name="followup" checked style="width:auto;"> 是,2小时后随访</label><label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;"><input type="radio" name="followup" style="width:auto;"> 否</label></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="hideModal('modal-alert-handle')">取消</button>
<button class="btn btn-success" onclick="hideModal('modal-alert-handle');showToast('预警已处理')">确认处理</button>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<script>
function navTo(page, el) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
document.getElementById('page-' + page).classList.add('active');
if (el) el.classList.add('active');
}
function showModal(id) {
document.getElementById(id).classList.add('show');
}
function hideModal(id) {
document.getElementById(id).classList.remove('show');
}
function showToast(msg) {
var t = document.getElementById('toast');
t.textContent = '✓ ' + msg;
t.classList.add('show');
setTimeout(function(){ t.classList.remove('show'); }, 2800);
}
function showTplDetail() {
document.getElementById('tpl-list').style.display = 'none';
document.getElementById('tpl-detail').style.display = 'block';
}
function hideTplDetail() {
document.getElementById('tpl-detail').style.display = 'none';
document.getElementById('tpl-list').style.display = 'block';
}
function showKbDetail() {
document.getElementById('kb-list').style.display = 'none';
document.getElementById('kb-detail').style.display = 'block';
}
function hideKbDetail() {
document.getElementById('kb-detail').style.display = 'none';
document.getElementById('kb-list').style.display = 'block';
}
// Close modal on overlay click
document.querySelectorAll('.modal-overlay').forEach(function(o) {
o.addEventListener('click', function(e) {
if (e.target === o) o.classList.remove('show');
});
});
// Filter tab click
document.querySelectorAll('.filter-tabs').forEach(function(tabs) {
tabs.querySelectorAll('.filter-tab').forEach(function(tab) {
tab.addEventListener('click', function() {
tabs.querySelectorAll('.filter-tab').forEach(function(t){ t.classList.remove('active'); });
tab.classList.add('active');
});
});
});
</script>
</div>
</div>
</body>
</html>