Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>临床试验知识库 | 详情页</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'medical-blue': '#1A56DB', | |
| 'medical-light-blue': '#DBEAFE', | |
| 'medical-gray': '#374151', | |
| 'medical-light-gray': '#F3F4F6' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| background-color: #f8fafc; | |
| color: #334155; | |
| } | |
| .knowledge-card { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .knowledge-card:hover { | |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); | |
| } | |
| .knowledge-divider { | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .tag-badge { | |
| border-radius: 50px; | |
| padding: 4px 12px; | |
| font-size: 0.85rem; | |
| } | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| width: 420px; | |
| z-index: 100; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .citation-preview { | |
| background-color: #f8fafc; | |
| border-left: 3px solid #1A56DB; | |
| padding: 12px 16px; | |
| font-size: 0.9rem; | |
| border-radius: 0 8px 8px 0; | |
| } | |
| @media (max-width: 768px) { | |
| .ai-assistant { | |
| width: calc(100% - 48px); | |
| right: 12px; | |
| left: 12px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 py-8"> | |
| <!-- 头部区域 --> | |
| <header class="mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-medical-gray flex items-center"> | |
| <span class="bg-medical-blue text-white rounded-lg px-3 py-1 mr-3 text-lg">流程规范</span> | |
| <span>受试者招募流程图</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mt-3 leading-relaxed"> | |
| 本规范详细说明了在多中心临床试验中筛选、招募和纳入受试者的标准操作流程，适用于所有GCP项目。 | |
| </p> | |
| </div> | |
| <div> | |
| <button class="bg-white border border-gray-300 rounded-full text-medical-blue px-5 py-2 hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i>分享 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white knowledge-card p-6"> | |
| <div class="flex flex-wrap gap-2 mb-2"> | |
| <span class="tag-badge bg-blue-50 text-medical-blue">标准流程</span> | |
| <span class="tag-badge bg-gray-100 text-medical-gray">CRC</span> | |
| <span class="tag-badge bg-indigo-50 text-indigo-700">北京协和医院</span> | |
| <span class="tag-badge bg-blue-100 text-blue-800">GCP规范</span> | |
| </div> | |
| <div class="knowledge-divider py-4"></div> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm text-gray-600"> | |
| <div> | |
| <div class="text-gray-400">所属分类</div> | |
| <div class="font-medium">流程规范</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">适用角色</div> | |
| <div class="font-medium">CRC / CRA</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">文档类型</div> | |
| <div class="font-medium">流程图</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">发布时间</div> | |
| <div class="font-medium">2024.12.01</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">更新日期</div> | |
| <div class="font-medium">2025.03.15</div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 正文内容区域 --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white knowledge-card p-6 mb-8"> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-medical-gray mb-4">简介</h2> | |
| <p class="text-gray-700 leading-relaxed"> | |
| 本流程图描述了临床试验受试者从潜在对象筛选到成功入组的研究全过程，包括筛选前评估、知情同意流程、入组标准确认和数据采集环节。 | |
| 适用于所有在研项目的临床研究协调员（CRC）和临床研究助理（CRA）。 | |
| </p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold text-medical-gray">执行步骤</h2> | |
| <button id="toggle-steps" class="text-blue-600 hover:text-blue-800 flex items-center"> | |
| <i class="fas fa-chevron-down mr-1"></i>展开全部 | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <h3 class="font-medium text-medical-blue">1. 潜在受试者识别</h3> | |
| <p class="text-gray-700 mt-1 text-sm"> | |
| 通过电子病历、门诊登记或医师推荐识别潜在受试者 | |
| </p> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <h3 class="font-medium text-medical-blue">2. 初步筛选评估</h3> | |
| <p class="text-gray-700 mt-1 text-sm"> | |
| 使用项目指定的初筛表评估患者是否符合基础标准 | |
| </p> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg hidden md:block"> | |
| <h3 class="font-medium text-medical-blue">3. 知情同意流程</h3> | |
| <p class="text-gray-700 mt-1 text-sm"> | |
| 由PI或Sub-I进行知情同意讲解并获得患者签字 | |
| </p> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg hidden md:block"> | |
| <h3 class="font-medium text-medical-blue">4. 筛选期检查执行</h3> | |
| <p class="text-gray-700 mt-1 text-sm"> | |
| 按方案要求完成实验室、影像学及其他筛查测试 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold text-medical-gray mb-4">关键注意事项</h2> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-3"> | |
| <div class="flex"> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-bold">版本控制:</span> 使用前请确认是否为最新版本（当前版本v2.1） | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4"> | |
| <div class="flex"> | |
| <div class="ml-3"> | |
| <p class="text-sm text-red-700"> | |
| <span class="font-bold">执行要求:</span> 所有执行步骤需在研究中心授权下由合格人员完成，并记录在原始文件中 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white knowledge-card p-6"> | |
| <h2 class="text-xl font-bold text-medical-gray mb-4">附件文档</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="flex items-center bg-gray-50 p-4 rounded-lg"> | |
| <div class="bg-gray-200 rounded-lg p-3 mr-4"> | |
| <i class="far fa-file-pdf text-3xl text-red-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">受试者招募流程图 V2.1</h3> | |
| <p class="text-gray-600 text-sm mt-1">PDF • 1.2MB</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-gray-50 p-4 rounded-lg"> | |
| <div class="bg-gray-200 rounded-lg p-3 mr-4"> | |
| <i class="far fa-image text-3xl text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">流程图参考实例</h3> | |
| <p class="text-gray-600 text-sm mt-1">PNG • 480KB</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-gray-50 p-4 rounded-lg"> | |
| <div class="bg-gray-200 rounded-lg p-3 mr-4"> | |
| <i class="far fa-file-word text-3xl text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">SOP执行模板</h3> | |
| <p class="text-gray-600 text-sm mt-1">DOCX • 180KB</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 侧边栏操作区 --> | |
| <div> | |
| <div class="bg-white knowledge-card p-6 mb-6 sticky top-6"> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="bg-white border border-gray-300 rounded-full text-medical-blue px-4 py-2 hover:bg-blue-50 flex items-center w-full justify-center"> | |
| <i class="far fa-star mr-2"></i>收藏 | |
| </button> | |
| <button id="citation-btn" class="bg-white border border-gray-300 rounded-full text-medical-blue px-4 py-2 hover:bg-blue-50 flex items-center w-full justify-center"> | |
| <i class="fas fa-quote-right mr-2"></i>引用 | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-full text-medical-blue px-4 py-2 hover:bg-blue-50 flex items-center w-full justify-center"> | |
| <i class="fas fa-download mr-2"></i>下载全部 | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-full text-medical-blue px-4 py-2 hover:bg-blue-50 flex items-center w-full justify-center"> | |
| <i class="fas fa-flag mr-2"></i>报告问题 | |
| </button> | |
| </div> | |
| <div id="citation-preview" class="mt-4 hidden"> | |
| <div class="citation-preview"> | |
| <p>临床试验知识库. (2024). 受试者招募流程图 [流程图]. 北京协和医院. 检索自 https://kb.gcp-clinical/流程规范/recruitment-flow</p> | |
| </div> | |
| <div class="flex gap-2 mt-3"> | |
| <select class="border rounded-md px-3 py-1 text-sm w-full"> | |
| <option>APA 格式</option> | |
| <option>MLA 格式</option> | |
| <option>GCP 引用标准</option> | |
| </select> | |
| <button class="bg-blue-600 text-white px-4 py-1 rounded-md text-sm flex items-center"> | |
| <i class="far fa-copy mr-2"></i>复制 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-bold text-medical-gray mb-3 flex items-center"> | |
| <i class="fas fa-history mr-2 text-gray-500"></i> 版本历史 | |
| </h3> | |
| <ul class="space-y-3 text-sm"> | |
| <li class="flex justify-between"> | |
| <span class="text-gray-600">V2.1</span> | |
| <span class="text-gray-500">2025.03.15</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span class="text-gray-600">V2.0</span> | |
| <span class="text-gray-500">2025.01.10</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span class="text-gray-600">V1.5</span> | |
| <span class="text-gray-500">2024.12.01</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-bold text-medical-gray mb-3 flex items-center"> | |
| <i class="fas fa-link mr-2 text-gray-500"></i> 相关知识点 | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="#" class="text-blue-600 hover:underline text-sm"> | |
| <i class="fas fa-caret-right text-gray-400 mr-2"></i> 知情同意书签署流程规范 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-blue-600 hover:underline text-sm"> | |
| <i class="fas fa-caret-right text-gray-400 mr-2"></i> 受试者筛选期标准操作流程 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-blue-600 hover:underline text-sm"> | |
| <i class="fas fa-caret-right text-gray-400 mr-2"></i> 多中心临床研究受试者管理规范 | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- AI问答助手（固定在右下角） --> | |
| <div class="ai-assistant bg-white"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-medical-blue"> | |
| <i class="fas fa-robot text-blue-400 mr-2"></i> 临床知识助手 | |
| </h3> | |
| <button id="ai-toggle" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-compress"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4 mb-5"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-blue-800 text-sm">当前知识点针对什么人员？</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-700 text-sm">主要针对临床研究协调员(CRC)和临床研究助理(CRA)，在PI或Sub-I的授权下执行受试者招募流程...</p> | |
| <div class="mt-3 flex items-center"> | |
| <i class="fas fa-tag text-sm text-gray-500 mr-2"></i> | |
| <span class="text-xs text-gray-500">引用自：受试者招募流程图V2.1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex gap-2 mb-3"> | |
| <button class="text-xs bg-blue-50 text-blue-700 px-3 py-1 rounded-full"> | |
| <i class="fas fa-sync-alt mr-1"></i> 让AI重新总结 | |
| </button> | |
| <button class="text-xs bg-blue-50 text-blue-700 px-3 py-1 rounded-full"> | |
| <i class="far fa-file-powerpoint mr-1"></i> 生成PPT摘要 | |
| </button> | |
| </div> | |
| <div class="flex border rounded-lg overflow-hidden"> | |
| <input type="text" placeholder="关于此知识点，请问点什么..." class="flex-1 px-4 py-2 text-sm focus:outline-none"> | |
| <button class="bg-blue-600 text-white px-4 py-2 hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // AI助手展开/折叠功能 | |
| const aiToggle = document.getElementById('ai-toggle'); | |
| aiToggle.addEventListener('click', () => { | |
| const aiAssistant = document.querySelector('.ai-assistant'); | |
| if (aiAssistant.classList.contains('h-56')) { | |
| aiAssistant.classList.remove('h-56'); | |
| aiAssistant.classList.add('h-auto'); | |
| aiToggle.innerHTML = '<i class="fas fa-compress"></i>'; | |
| } else { | |
| aiAssistant.classList.add('h-56'); | |
| aiAssistant.classList.remove('h-auto'); | |
| aiToggle.innerHTML = '<i class="fas fa-expand"></i>'; | |
| } | |
| }); | |
| // 引用按钮功能 | |
| const citationBtn = document.getElementById('citation-btn'); | |
| const citationPreview = document.getElementById('citation-preview'); | |
| citationBtn.addEventListener('click', () => { | |
| citationPreview.classList.toggle('hidden'); | |
| }); | |
| // 折叠/展开全部功能 | |
| const toggleSteps = document.getElementById('toggle-steps'); | |
| toggleSteps.addEventListener('click', () => { | |
| const steps = document.querySelectorAll('.bg-blue-50'); | |
| const isExpanded = toggleSteps.innerHTML.includes('收起'); | |
| if (isExpanded) { | |
| // 收起所有步骤 | |
| steps.forEach((step, index) => { | |
| if (index > 1) { | |
| step.classList.add('hidden'); | |
| step.classList.add('md:hidden'); | |
| } | |
| }); | |
| toggleSteps.innerHTML = '<i class="fas fa-chevron-down mr-1"></i>展开全部'; | |
| } else { | |
| // 展开所有步骤 | |
| steps.forEach(step => { | |
| step.classList.remove('hidden'); | |
| step.classList.remove('md:hidden'); | |
| }); | |
| toggleSteps.innerHTML = '<i class="fas fa-chevron-up mr-1"></i>收起全部'; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/knowledgelist" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |