HaHafeng
4c5bb3d174
- Add iit_schema with 5 tables - Create module structure and types (223 lines) - WeChat integration verified (Access Token success) - Update system docs to v2.4 - Add REDCap source folders to .gitignore - Day 1/14 complete (11/11 tasks)
235 lines
12 KiB
HTML
235 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>PI 决策舱 - 微信端原型</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
background-color: #f3f4f6;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.wechat-card {
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
.mini-program-nav {
|
||
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
|
||
}
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.safe-area-bottom {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
@keyframes pulse-soft {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.02); }
|
||
}
|
||
.urgent-pulse {
|
||
animation: pulse-soft 2s infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="flex flex-col items-center min-h-screen">
|
||
|
||
<!-- 模拟手机外壳 -->
|
||
<div class="w-full max-w-md bg-white min-h-screen shadow-2xl overflow-hidden flex flex-col relative">
|
||
|
||
<!-- 场景 1：企业微信消息列表 (模拟) -->
|
||
<div id="scene-notification" class="flex-1 flex flex-col bg-slate-100">
|
||
<!-- 微信顶部状态栏 -->
|
||
<div class="h-10 bg-slate-100 flex items-center justify-between px-6">
|
||
<span class="text-xs font-bold">18:30</span>
|
||
<div class="flex space-x-1">
|
||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||
<i class="fa-solid fa-battery-three-quarters text-[10px]"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信导航栏 -->
|
||
<div class="h-12 border-b border-slate-200 flex items-center px-4 space-x-4 bg-slate-100">
|
||
<i class="fa-solid fa-chevron-left"></i>
|
||
<span class="font-bold">企业微信 (1)</span>
|
||
</div>
|
||
|
||
<!-- 消息内容 -->
|
||
<div class="p-4 space-y-6">
|
||
<div class="text-center">
|
||
<span class="bg-slate-200 text-white text-[10px] px-2 py-0.5 rounded">18:31</span>
|
||
</div>
|
||
|
||
<!-- 智能提醒卡片 -->
|
||
<div onclick="openApplet()" class="wechat-card bg-white rounded-lg overflow-hidden cursor-pointer active:bg-slate-50 transition-colors">
|
||
<div class="p-4 border-b border-slate-100 flex items-center space-x-3">
|
||
<div class="w-10 h-10 bg-blue-600 rounded flex items-center justify-center text-white text-xl">
|
||
<i class="fa-solid fa-robot"></i>
|
||
</div>
|
||
<div>
|
||
<p class="font-bold text-slate-800">临床研究助理</p>
|
||
<p class="text-xs text-slate-400">来自: 北医三院项目组</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4 class="font-bold text-slate-800 mb-2">⚠️ 严重方案偏离提醒 (PD)</h4>
|
||
<div class="space-y-1 text-sm text-slate-600">
|
||
<p>受试者: <span class="font-medium text-slate-900">P001</span></p>
|
||
<p>异常类型: <span class="text-red-600 font-bold">入排标准违背</span></p>
|
||
<p>详情: 年龄录入为 76 岁，超出方案限制。</p>
|
||
</div>
|
||
<div class="mt-4 pt-4 border-t border-slate-100 text-blue-600 text-sm font-medium flex justify-between items-center">
|
||
<span>点击进入决策中心查看证据</span>
|
||
<i class="fa-solid fa-chevron-right text-xs"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景 2：微信小程序 (决策中心) -->
|
||
<div id="scene-applet" class="hidden absolute inset-0 z-50 bg-slate-50 flex flex-col">
|
||
<!-- 小程序胶囊按钮 (模拟) -->
|
||
<div class="mini-program-nav h-24 pt-10 px-4 flex items-center justify-between text-white shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa-solid fa-hospital text-sm opacity-80"></i>
|
||
<span class="text-sm font-bold truncate max-w-[200px]">北医三院骨科项目组</span>
|
||
</div>
|
||
<div class="flex items-center space-x-3 bg-black/20 rounded-full px-3 py-1 border border-white/20">
|
||
<i class="fa-solid fa-ellipsis text-sm"></i>
|
||
<div class="w-px h-3 bg-white/20"></div>
|
||
<i onclick="closeApplet()" class="fa-solid fa-circle-stop text-sm cursor-pointer"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主题切换与项目卡片 -->
|
||
<div class="flex-1 overflow-y-auto no-scrollbar">
|
||
<!-- 影子决策详情 -->
|
||
<div class="p-4">
|
||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||
<div class="bg-amber-50 p-4 border-b border-amber-100 flex items-center justify-between">
|
||
<span class="text-xs font-bold text-amber-800 uppercase tracking-widest">待复核质疑</span>
|
||
<span class="text-[10px] bg-amber-200 text-amber-800 px-2 py-0.5 rounded-full">高风险</span>
|
||
</div>
|
||
|
||
<div class="p-4">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div>
|
||
<p class="text-[10px] text-slate-400 font-bold">受试者编号</p>
|
||
<p class="text-lg font-bold text-slate-800">P001</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-[10px] text-slate-400 font-bold">提交时间</p>
|
||
<p class="text-sm text-slate-600">18:31</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 证据展示区 -->
|
||
<div class="bg-slate-50 rounded-xl p-4 mb-4">
|
||
<p class="text-xs text-slate-500 mb-2">AI 推理建议：</p>
|
||
<p class="text-sm font-medium text-slate-800 leading-relaxed">
|
||
检测到年龄录入值为 <span class="bg-amber-200 px-1 font-bold">76</span>。检索研究方案第 14 页入选标准第 1.1 条，明确要求年龄上限为 <span class="underline decoration-blue-500">75 岁</span>。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 移动端证据预览 -->
|
||
<div class="relative h-40 bg-slate-800 rounded-xl overflow-hidden mb-4 border border-slate-200">
|
||
<div class="absolute inset-0 p-4 text-[8px] text-slate-400 bg-white">
|
||
<p class="text-[10px] font-bold text-slate-900 border-b pb-1 mb-2">方案原文节选</p>
|
||
<p>1. 受试者入选标准：</p>
|
||
<p class="bg-amber-100 text-slate-800 font-bold px-1 mt-1">1.1 年龄 18 岁（含）至 75 岁（含），性别不限；</p>
|
||
<p>1.2 经组织学或细胞学确诊的局部晚期...</p>
|
||
</div>
|
||
<div class="absolute bottom-2 right-2 px-2 py-1 bg-blue-600 text-white text-[8px] rounded-full shadow-lg">
|
||
<i class="fa-solid fa-magnifying-glass mr-1"></i> 点击查看全文
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 决策按钮 -->
|
||
<div class="flex space-x-3">
|
||
<button class="flex-1 py-3 bg-slate-100 text-slate-600 rounded-xl font-bold text-sm" onclick="rejectAction()">暂缓处理</button>
|
||
<button class="flex-1 py-3 bg-blue-600 text-white rounded-xl font-bold text-sm shadow-lg shadow-blue-200" onclick="approveAction()">批准并生成质疑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷统计看板 -->
|
||
<div class="px-4 pb-10">
|
||
<h5 class="text-sm font-bold text-slate-800 mb-4">今日项目动态</h5>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase">入组进度</p>
|
||
<p class="text-xl font-bold text-slate-800 mt-1">85<span class="text-xs text-slate-400 font-normal"> / 100</span></p>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase">待审 PD</p>
|
||
<p class="text-xl font-bold text-amber-500 mt-1">3</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 (小程序 TabBar) -->
|
||
<div class="h-16 border-t border-slate-100 bg-white flex items-center justify-around safe-area-bottom">
|
||
<div class="flex flex-col items-center text-blue-600">
|
||
<i class="fa-solid fa-house text-sm"></i>
|
||
<span class="text-[10px] mt-1">首页</span>
|
||
</div>
|
||
<div class="flex flex-col items-center text-slate-400">
|
||
<i class="fa-solid fa-chart-pie text-sm"></i>
|
||
<span class="text-[10px] mt-1">报表中心</span>
|
||
</div>
|
||
<div class="flex flex-col items-center text-slate-400">
|
||
<i class="fa-solid fa-robot text-sm"></i>
|
||
<span class="text-[10px] mt-1">AI 咨询</span>
|
||
</div>
|
||
<div class="flex flex-col items-center text-slate-400">
|
||
<i class="fa-solid fa-user text-sm"></i>
|
||
<span class="text-[10px] mt-1">我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成功/反馈轻提示 -->
|
||
<div id="toast" class="fixed bottom-24 left-1/2 -translate-x-1/2 bg-slate-800/90 text-white px-6 py-3 rounded-full text-xs font-bold transform translate-y-20 opacity-0 transition-all z-[100]">
|
||
已批准，REDcap 质疑已自动生成
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function openApplet() {
|
||
document.getElementById('scene-notification').classList.add('hidden');
|
||
document.getElementById('scene-applet').classList.remove('hidden');
|
||
}
|
||
|
||
function closeApplet() {
|
||
document.getElementById('scene-notification').classList.remove('hidden');
|
||
document.getElementById('scene-applet').classList.add('hidden');
|
||
}
|
||
|
||
function approveAction() {
|
||
const toast = document.getElementById('toast');
|
||
toast.innerText = "✅ 影子决策已转正，REDcap 质疑已生成";
|
||
toast.classList.remove('translate-y-20', 'opacity-0');
|
||
setTimeout(() => {
|
||
toast.classList.add('translate-y-20', 'opacity-0');
|
||
}, 2000);
|
||
}
|
||
|
||
function rejectAction() {
|
||
const toast = document.getElementById('toast');
|
||
toast.innerText = "已记录意见，待 CRC 进一步核实";
|
||
toast.classList.remove('translate-y-20', 'opacity-0');
|
||
setTimeout(() => {
|
||
toast.classList.add('translate-y-20', 'opacity-0');
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |