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)
200 lines
12 KiB
HTML
200 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>IIT Manager 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: #f1f5f9; }
|
||
.sidebar-item-active { background-color: #e2e8f0; color: #1e40af; border-right: 3px solid #1e40af; }
|
||
.step-active { color: #1e40af; border-bottom: 2px solid #1e40af; }
|
||
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
|
||
</style>
|
||
</head>
|
||
<body class="h-screen flex overflow-hidden">
|
||
|
||
<!-- 1. 左侧全局导航 (Sider) -->
|
||
<aside class="w-64 bg-slate-900 text-slate-300 flex flex-col shrink-0">
|
||
<div class="p-6 flex items-center space-x-3">
|
||
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold">I</div>
|
||
<span class="text-white font-bold tracking-tight">IIT Manager Admin</span>
|
||
</div>
|
||
|
||
<nav class="flex-1 px-4 space-y-1 mt-4">
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm sidebar-item-active">
|
||
<i class="fa-solid fa-house"></i> <span>项目全景</span>
|
||
</a>
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm">
|
||
<i class="fa-solid fa-wand-magic-sparkles"></i> <span>向导式初始化</span>
|
||
</a>
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm">
|
||
<i class="fa-solid fa-database"></i> <span>EDC 适配管理</span>
|
||
</a>
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm">
|
||
<i class="fa-solid fa-robot"></i> <span>Agent 策略中心</span>
|
||
</a>
|
||
<div class="pt-4 pb-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest">组织管理</div>
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm">
|
||
<i class="fa-solid fa-hospital"></i> <span>医院/中心映射</span>
|
||
</a>
|
||
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition-all text-sm">
|
||
<i class="fa-solid fa-user-shield"></i> <span>角色与权限</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="p-4 border-t border-slate-800">
|
||
<div class="flex items-center space-x-3 px-2">
|
||
<div class="w-8 h-8 bg-slate-700 rounded-full flex items-center justify-center text-xs">AD</div>
|
||
<div class="text-xs">
|
||
<p class="text-slate-100 font-bold">Admin@yizx.ai</p>
|
||
<p class="text-slate-500">壹证循系统管理员</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 2. 主内容区 -->
|
||
<main class="flex-1 flex flex-col overflow-hidden">
|
||
|
||
<!-- 顶部条 -->
|
||
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-8 shrink-0">
|
||
<div class="flex items-center">
|
||
<h2 class="text-lg font-bold text-slate-800">新建项目初始化向导</h2>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<button class="text-slate-500 hover:text-slate-800"><i class="fa-solid fa-bell"></i></button>
|
||
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 shadow-sm transition-all">
|
||
<i class="fa-solid fa-plus mr-2"></i>创建新项目
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 内容滚动区 -->
|
||
<div class="flex-1 overflow-y-auto p-8">
|
||
|
||
<!-- 初始化向导步骤条 (Wizard Steps) -->
|
||
<div class="max-w-4xl mx-auto mb-10">
|
||
<div class="flex items-center justify-between text-sm font-medium text-slate-400">
|
||
<div class="flex flex-col items-center space-y-2 step-active pb-2">
|
||
<span class="w-8 h-8 rounded-full border-2 border-blue-600 flex items-center justify-center text-blue-600">1</span>
|
||
<span>方案数字化注入</span>
|
||
</div>
|
||
<div class="h-px bg-slate-200 flex-1 mx-4 -mt-6"></div>
|
||
<div class="flex flex-col items-center space-y-2">
|
||
<span class="w-8 h-8 rounded-full border-2 border-slate-200 flex items-center justify-center">2</span>
|
||
<span>EDC 联通与映射</span>
|
||
</div>
|
||
<div class="h-px bg-slate-200 flex-1 mx-4 -mt-6"></div>
|
||
<div class="flex flex-col items-center space-y-2">
|
||
<span class="w-8 h-8 rounded-full border-2 border-slate-200 flex items-center justify-center">3</span>
|
||
<span>AI 策略与知识库</span>
|
||
</div>
|
||
<div class="h-px bg-slate-200 flex-1 mx-4 -mt-6"></div>
|
||
<div class="flex flex-col items-center space-y-2">
|
||
<span class="w-8 h-8 rounded-full border-2 border-slate-200 flex items-center justify-center">4</span>
|
||
<span>发布与激活</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 当前步骤内容：Step 1 -->
|
||
<div class="max-w-5xl mx-auto space-y-6">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<!-- 左侧：方案上传区 -->
|
||
<div class="md:col-span-1 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
|
||
<h3 class="font-bold text-slate-800 mb-4">第一步：上传研究方案</h3>
|
||
<p class="text-xs text-slate-500 mb-6">请上传 PDF 格式的临床研究方案，AI 将自动解析访视计划和入排标准。</p>
|
||
|
||
<div class="border-2 border-dashed border-slate-200 rounded-xl p-8 text-center hover:border-blue-400 transition-all cursor-pointer bg-slate-50">
|
||
<i class="fa-solid fa-cloud-arrow-up text-3xl text-slate-300 mb-2"></i>
|
||
<p class="text-xs font-medium text-slate-600">点击或拖拽文件上传</p>
|
||
<p class="text-[10px] text-slate-400 mt-1">支持 PDF/Word, 最大 50MB</p>
|
||
</div>
|
||
|
||
<div class="mt-6 space-y-3">
|
||
<div class="flex items-center justify-between text-xs p-3 bg-blue-50 border border-blue-100 rounded-lg">
|
||
<div class="flex items-center space-x-2 overflow-hidden">
|
||
<i class="fa-solid fa-file-pdf text-red-500"></i>
|
||
<span class="truncate font-medium text-blue-800">Protocol_V2.1.pdf</span>
|
||
</div>
|
||
<i class="fa-solid fa-circle-check text-green-500"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：AI 解析结果展示与确认 -->
|
||
<div class="md:col-span-2 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="font-bold text-slate-800">AI 解析结果预览 (数字化日历)</h3>
|
||
<button class="text-xs text-blue-600 hover:underline"><i class="fa-solid fa-pen-to-square mr-1"></i>手动修正</button>
|
||
</div>
|
||
|
||
<!-- 解析出的访视日历列表 -->
|
||
<div class="space-y-4 flex-1">
|
||
<div class="flex items-start space-x-4 p-4 border border-slate-100 rounded-xl bg-slate-50 relative">
|
||
<div class="w-12 h-12 bg-white rounded-lg border border-slate-200 flex flex-col items-center justify-center text-slate-400">
|
||
<span class="text-[10px] uppercase font-bold">Day</span>
|
||
<span class="text-lg font-bold text-slate-800">0</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-sm font-bold text-slate-800">V1 (筛选期/基线访视)</h4>
|
||
<p class="text-xs text-slate-500 mt-1">关键动作: 签署知情同意书, 入排标准核对, 随机化分配。</p>
|
||
<div class="flex mt-2 space-x-2">
|
||
<span class="module-tag">知情同意书</span><span class="module-tag">血常规</span><span class="module-tag">心电图</span>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 right-4 text-[10px] bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-bold">置信度: 98%</span>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-4 p-4 border border-slate-100 rounded-xl bg-white relative">
|
||
<div class="w-12 h-12 bg-white rounded-lg border border-slate-200 flex flex-col items-center justify-center text-slate-400">
|
||
<span class="text-[10px] uppercase font-bold">Day</span>
|
||
<span class="text-lg font-bold text-slate-800">28</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-sm font-bold text-slate-800">V2 (给药后第一次访视)</h4>
|
||
<p class="text-xs text-slate-500 mt-1">访视窗: ±3天。 关键动作: 药物依从性检查, 安全性评估 (AE)。</p>
|
||
<div class="flex mt-2 space-x-2">
|
||
<span class="module-tag">生存质量量表</span><span class="module-tag">不良事件上报</span>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 right-4 text-[10px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-bold">置信度: 92%</span>
|
||
</div>
|
||
|
||
<div class="p-8 text-center border border-dashed border-slate-200 rounded-xl">
|
||
<p class="text-xs text-slate-400">向下滚动查看后续 12 个访视点...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 flex justify-end">
|
||
<button class="bg-blue-600 text-white px-8 py-2.5 rounded-xl font-bold hover:bg-blue-700 shadow-lg transition-all">确认解析并进入下一步</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部：提示与状态说明 -->
|
||
<div class="bg-blue-900 rounded-2xl p-6 text-white flex items-center justify-between">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-xl">
|
||
<i class="fa-solid fa-lightbulb text-amber-400"></i>
|
||
</div>
|
||
<div>
|
||
<p class="font-bold">设计提示: 数字化访视日历是 Agent 的执行基准</p>
|
||
<p class="text-xs text-blue-200 mt-1">一旦在此确认，任务引擎将自动为 100+ 受试者排程，请务必仔细核对 Day 偏移量和访视窗。</p>
|
||
</div>
|
||
</div>
|
||
<button class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg text-sm transition-all">查看详细解析报告</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// 简单的步骤模拟逻辑
|
||
console.log("Admin Portal Prototype Loaded");
|
||
</script>
|
||
</body>
|
||
</html> |