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)
224 lines
14 KiB
HTML
224 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>IIT Manager Agent - Agent 协作中心</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: #f8fafc; }
|
|
.module-container { height: calc(100vh - 64px); }
|
|
.inbox-item-active { background-color: #eff6ff; border-left: 4px solid #2563eb; }
|
|
.evidence-box { background: #fdfdfd; border: 1px solid #e2e8f0; border-radius: 8px; }
|
|
.shadow-data-tag { background: #fff7ed; border: 1px dashed #fb923c; color: #c2410c; }
|
|
</style>
|
|
</head>
|
|
<body class="h-screen flex flex-col overflow-hidden">
|
|
|
|
<!-- 1. 顶部状态条 -->
|
|
<header class="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6 shrink-0 z-20 shadow-sm">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-solid fa-microchip text-blue-600 text-xl"></i>
|
|
<span class="font-bold text-slate-800">Agent 协作中心 (Workbench)</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-slate-300"></div>
|
|
<select class="text-sm font-medium border-none bg-transparent focus:ring-0 text-slate-600">
|
|
<option>全部受试者项目</option>
|
|
<option>北医三院 - 骨质疏松研究</option>
|
|
<option>北大肿瘤 - 肺癌研究</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-6">
|
|
<div class="flex space-x-4 text-xs">
|
|
<span class="text-slate-500">待复核 QC: <b class="text-slate-800 ml-1">12</b></span>
|
|
<span class="text-slate-500">待处理任务: <b class="text-slate-800 ml-1">8</b></span>
|
|
<span class="text-slate-500">已回写 REDCap: <b class="text-green-600 ml-1">156</b></span>
|
|
</div>
|
|
<button class="bg-blue-600 text-white px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-blue-700 transition-all">
|
|
<i class="fa-solid fa-upload mr-1"></i>批量导入/OCR
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 2. 主体三栏布局 -->
|
|
<main class="flex-1 flex overflow-hidden">
|
|
|
|
<!-- A 栏：任务分流枢纽 (Action Inbox) -->
|
|
<aside class="w-80 bg-white border-r border-slate-200 flex flex-col shrink-0">
|
|
<div class="p-4 bg-slate-50 border-b border-slate-200">
|
|
<div class="relative">
|
|
<i class="fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-slate-400 text-xs"></i>
|
|
<input type="text" placeholder="搜索受试者或任务..." class="w-full pl-8 pr-4 py-2 bg-white border border-slate-200 rounded-lg text-xs focus:ring-1 focus:ring-blue-500 outline-none">
|
|
</div>
|
|
<div class="flex mt-3 space-x-1">
|
|
<button class="flex-1 py-1 px-2 bg-blue-600 text-white text-[10px] font-bold rounded">全部</button>
|
|
<button class="flex-1 py-1 px-2 bg-slate-100 text-slate-500 text-[10px] rounded hover:bg-slate-200">质控</button>
|
|
<button class="flex-1 py-1 px-2 bg-slate-100 text-slate-500 text-[10px] rounded hover:bg-slate-200">采集</button>
|
|
<button class="flex-1 py-1 px-2 bg-slate-100 text-slate-500 text-[10px] rounded hover:bg-slate-200">随访</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务列表滚动区 -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
<!-- 任务卡片示例 -->
|
|
<div class="p-4 border-b border-slate-100 inbox-item-active cursor-pointer">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">QC ERROR</span>
|
|
<span class="text-[10px] text-slate-400">09:41</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-slate-800">受试者 P001: 方案偏离预警</h4>
|
|
<p class="text-xs text-slate-500 mt-1 line-clamp-2">血红蛋白录入值(85)低于方案排除标准(90)，建议发起质疑或确认偏离理由。</p>
|
|
</div>
|
|
|
|
<div class="p-4 border-b border-slate-100 hover:bg-slate-50 cursor-pointer">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-[10px] font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">OCR CAPTURE</span>
|
|
<span class="text-[10px] text-slate-400">11:20</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-slate-800">化验单提取: 4 个指标待确认</h4>
|
|
<p class="text-xs text-slate-500 mt-1">已完成 PDF 报告解析，匹配到 4 个 REDCap 字段。</p>
|
|
</div>
|
|
|
|
<div class="p-4 border-b border-slate-100 hover:bg-slate-50 cursor-pointer">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-[10px] font-bold text-red-600 bg-red-50 px-1.5 py-0.5 rounded">URGENT</span>
|
|
<span class="text-[10px] text-slate-400">昨天</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-slate-800">受试者 P055: 访视窗即将关闭</h4>
|
|
<p class="text-xs text-slate-500 mt-1">V3 访视应于今日完成，患者暂无反馈。</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- B 栏：沉浸式复核区 (Review Workspace) -->
|
|
<section class="flex-1 bg-slate-50 flex flex-col overflow-hidden">
|
|
<!-- 上下文摘要条 -->
|
|
<div class="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6 shrink-0">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-slate-400 uppercase font-bold">正在复核</span>
|
|
<span class="text-sm font-bold text-slate-800">受试者: P001 (张三) | 筛选期访视 (V1)</span>
|
|
</div>
|
|
<div class="h-8 w-px bg-slate-200"></div>
|
|
<div class="flex space-x-2">
|
|
<button class="text-xs text-blue-600 hover:underline">查看 REDCap 原生数据</button>
|
|
<button class="text-xs text-blue-600 hover:underline">查看审计日志</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg text-xs font-bold hover:bg-slate-200">驳回 AI 建议</button>
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold hover:bg-blue-700 shadow-lg">确认并同步到 REDCap</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 核心对比工作台 -->
|
|
<div class="flex-1 overflow-hidden p-6 flex space-x-6">
|
|
|
|
<!-- 模块：影子建议表单 (Shadow Form) -->
|
|
<div class="flex-1 flex flex-col space-y-4">
|
|
<div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex-1">
|
|
<h5 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">待处理的影子动作 (Shadow Actions)</h5>
|
|
|
|
<div class="space-y-6">
|
|
<!-- 对比单元 1 -->
|
|
<div class="p-4 rounded-xl border-l-4 border-amber-400 bg-amber-50/30">
|
|
<p class="text-xs font-bold text-slate-800 mb-2">字段: 血红蛋白 (HGB)</p>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-3 bg-white rounded-lg border border-slate-200">
|
|
<p class="text-[10px] text-slate-400">REDCap 原生值</p>
|
|
<p class="text-lg font-bold text-slate-400 italic">尚未录入</p>
|
|
</div>
|
|
<div class="p-3 shadow-data-tag rounded-lg">
|
|
<p class="text-[10px]">AI 提取建议值</p>
|
|
<p class="text-lg font-bold">85 <span class="text-xs font-normal">g/L</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex items-start space-x-2 text-xs text-amber-700">
|
|
<i class="fa-solid fa-circle-info mt-0.5"></i>
|
|
<p>AI 推理: 从“2025-12-28 检验单”中提取。注意: 该值低于方案规定的 90g/L 入组门限。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 对比单元 2 -->
|
|
<div class="p-4 rounded-xl border-l-4 border-blue-400 bg-blue-50/30">
|
|
<p class="text-xs font-bold text-slate-800 mb-2">字段: 知情同意签署日期</p>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-3 bg-white rounded-lg border border-slate-200">
|
|
<p class="text-[10px] text-slate-400">REDCap 原生值</p>
|
|
<p class="text-lg font-bold">2025-12-30</p>
|
|
</div>
|
|
<div class="p-3 bg-white rounded-lg border border-blue-200">
|
|
<p class="text-[10px] text-blue-500 font-bold">AI 映射确认</p>
|
|
<p class="text-lg font-bold text-blue-700">一致 <i class="fa-solid fa-check-circle ml-1"></i></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模块：证据浏览器 (Evidence Browser) -->
|
|
<div class="w-1/3 flex flex-col space-y-4">
|
|
<div class="bg-slate-800 rounded-2xl flex-1 flex flex-col overflow-hidden shadow-2xl">
|
|
<div class="h-10 bg-slate-900 flex items-center justify-between px-4">
|
|
<span class="text-[10px] text-slate-400 font-bold uppercase">源证据: PDF 原始附件</span>
|
|
<div class="flex space-x-2 text-slate-400">
|
|
<i class="fa-solid fa-magnifying-glass-plus cursor-pointer"></i>
|
|
<i class="fa-solid fa-expand cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 relative flex items-center justify-center p-6">
|
|
<!-- 模拟高亮证据 -->
|
|
<div class="w-full bg-white p-6 shadow-inner text-[8px] text-slate-300 relative">
|
|
<p class="text-slate-900 font-bold text-[10px] mb-4 text-center border-b pb-2">XXX 医院检验报告单</p>
|
|
<div class="grid grid-cols-2 gap-2 mb-4">
|
|
<p>姓名: 张三</p>
|
|
<p>日期: 2025-12-28</p>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<p>白细胞 (WBC) ...... 6.2</p>
|
|
<!-- 高亮区域 -->
|
|
<div class="relative">
|
|
<p class="text-slate-900 font-bold bg-amber-200/50 border border-amber-300 px-1">血红蛋白 (HGB) ... 85</p>
|
|
<div class="absolute -right-4 -top-2 w-4 h-4 bg-amber-500 rounded-full flex items-center justify-center text-white text-[8px] animate-pulse">!</div>
|
|
</div>
|
|
<p>血小板 (PLT) ...... 210</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快速 AI 追问 -->
|
|
<div class="bg-white rounded-xl p-4 border border-slate-200">
|
|
<p class="text-[10px] font-bold text-slate-400 mb-2 uppercase">AI Copilot 追问</p>
|
|
<div class="relative">
|
|
<input type="text" placeholder="问 AI: 为什么这个值有风险？" class="w-full text-xs p-2 bg-slate-50 border border-slate-100 rounded focus:ring-1 focus:ring-blue-500 outline-none">
|
|
<i class="fa-solid fa-paper-plane absolute right-2 top-2.5 text-blue-400 text-xs cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- C 栏：系统反馈与审计 (History/Audit) -->
|
|
<aside class="w-16 bg-white border-l border-slate-200 flex flex-col items-center py-6 space-y-6">
|
|
<div class="p-2 text-blue-600 cursor-pointer hover:bg-slate-50 rounded" title="操作历史">
|
|
<i class="fa-solid fa-clock-rotate-left"></i>
|
|
</div>
|
|
<div class="p-2 text-slate-400 cursor-pointer hover:bg-slate-50 rounded" title="质疑列表">
|
|
<i class="fa-solid fa-clipboard-question"></i>
|
|
</div>
|
|
<div class="p-2 text-slate-400 cursor-pointer hover:bg-slate-50 rounded" title="邮件/微信通知">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<div class="p-2 text-slate-400 cursor-pointer hover:bg-slate-50 rounded" title="设置">
|
|
<i class="fa-solid fa-cog"></i>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
</body>
|
|
</html> |