请为我设计一个专业、结构化、模块清晰的知识页面，主题为 “稽查应对支持”，用于展示临床试验中应对药监局或申办方稽查时所需的流程清单、准备材料、问题解答与法规依据。该页面采用医疗信息系统风格，蓝白配色，适合知识阅读与任务操作。 页面模块包括： 1️⃣ 页面顶部 页面主标题：“稽查应对支持” 子标题：“展示稽查准备关键流程、工具材料、问题整理与法规支持” 标签导航条： 适用角色：CRA / QA / CRC / PI 阶段：执行中 / 锁库前 标签：稽查流程 / AE报告 / ICF完整性 / CAPA整改 2️⃣ 知识概述模块 简要说明稽查场景与意义 列举稽查类型（如：NMPA、伦理审查、申办方稽查） 提示稽查准备的高风险区域（如ICF、药物记录、SAE） 可配一张流程图或警示图标示意图 3️⃣ 核心任务清单（结构化展示） 以卡片或列表展示稽查准备任务： 每项任务包含： 编号（01～06） 操作事项（如“整理ICF签署表”） 责任人（如CRC、PI） 工具按钮（如：下载模板 / 查看自查表） 4️⃣ 所需工具材料区 展示可下载文档列表，内容示例如： CAPA整改模板 ICF稽查核查表 稽查访谈话术汇总 药物出入库登记本 每份材料以卡片或文件模块展示，支持操作：[下载] [预览] [收藏] 5️⃣ 法规引用模块（表格或法规卡片） 展示与稽查相关法规条文摘要，结构包括： 法规名称（如：GCP、ICH-GCP） 条款编号 内容摘要 操作：[查看原文] 6️⃣ 常见问题解答（FAQ） 以问答形式列出稽查相关高频问题，例如： “稽查人员是否可以拍摄现场资料？” “找不到ICF原件怎么办？” “SAE报告延迟后怎么整改？” 每题支持展开答案，并显示引用法规/模板 7️⃣ AI智能问答模块（页面右下角浮动） 标题：“问AI · 稽查助手” 提示：输入你遇到的稽查问题，系统将返回答案+依据 示例问题： “伦理稽查常见问题有哪些？” “GCP中对文档调阅有哪些规定？” 输出应包含：AI回答摘要 + 原文出处链接 + 推荐材料 8️⃣ 页面底部推荐知识 模块标题：“推荐阅读” 横向展示与稽查紧密相关的其他知识点： CAPA整改编写规范 ICF签署核查流程 稽查前准备会议纪要模版 AE/SAE应急报告指引 💡 风格要求 蓝白为主色，卡片分区清晰 信息密度适中，标题与标签对齐整洁 所有文档、FAQ 和法规模块统一风格 AI问答模块为右下角可浮动窗口，可收起展开 图标可适当用于任务项、法规条、FAQ增强识别 - Initial Deployment
57e7783 verified | <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: { | |
| primary: '#1a73e8', | |
| secondary: '#4285f4', | |
| accent: '#34a853', | |
| light: '#f8f9fa', | |
| dark: '#202124' | |
| }, | |
| boxShadow: { | |
| 'custom': '0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)', | |
| 'custom-lg': '0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.1)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; | |
| background-color: #f5f7fa; | |
| color: #333; | |
| } | |
| .header-gradient { | |
| background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #34a853; | |
| color: #1a73e8; | |
| font-weight: 600; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); | |
| } | |
| .material-card { | |
| transition: all 0.2s ease; | |
| } | |
| .material-card:hover { | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); | |
| transform: translateY(-2px); | |
| } | |
| .regulation-card { | |
| border-left: 3px solid #4285f4; | |
| } | |
| .faq-question { | |
| transition: all 0.2s ease; | |
| } | |
| .faq-question:hover { | |
| background-color: #edf4fe; | |
| } | |
| .ai-window { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); | |
| } | |
| .recommendation-card { | |
| min-width: 260px; | |
| } | |
| .flow-chart-container { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .flow-step { | |
| position: relative; | |
| padding-left: 40px; | |
| } | |
| .flow-step:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #e9f1fd; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: #1a73e8; | |
| } | |
| @media (min-width: 768px) { | |
| .flow-chart-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .flow-chart-container { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- 头部导航 --> | |
| <header class="header-gradient text-white py-4 px-4 md:px-8"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold">稽查应对支持</h1> | |
| <p class="text-blue-100 text-sm md:text-base mt-1">展示稽查准备关键流程、工具材料、问题整理与法规支持</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block"> | |
| <span class="text-sm">临床试验知识系统</span> | |
| </div> | |
| <div class="bg-white p-1 rounded-full"> | |
| <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-primary"> | |
| <i class="fas fa-user-md"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 标签导航条 --> | |
| <div class="bg-white py-3 shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between md:items-center"> | |
| <div class="mb-3 md:mb-0"> | |
| <span class="font-medium text-gray-600 mr-3">适用角色:</span> | |
| <div class="inline-flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-50 text-primary text-sm rounded-full">CRA</span> | |
| <span class="px-3 py-1 bg-blue-50 text-primary text-sm rounded-full">QA</span> | |
| <span class="px-3 py-1 bg-blue-50 text-primary text-sm rounded-full">CRC</span> | |
| <span class="px-3 py-1 bg-blue-50 text-primary text-sm rounded-full">PI</span> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-600 mr-3">阶段:</span> | |
| <div class="inline-flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-green-50 text-accent text-sm rounded-full">执行中</span> | |
| <span class="px-3 py-1 bg-green-50 text-accent text-sm rounded-full">锁库前</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-1 border-t pt-3"> | |
| <button class="px-4 py-2 bg-primary text-white text-sm rounded-lg font-medium">稽查流程</button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg font-medium">AE报告</button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg font-medium">ICF完整性</button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg font-medium">CAPA整改</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- 知识概述模块 --> | |
| <div class="bg-white rounded-xl shadow-custom mb-8"> | |
| <div class="p-6 border-b"> | |
| <h2 class="text-xl font-bold text-primary flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i>稽查概述与准备要点 | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flow-chart-container"> | |
| <div> | |
| <h3 class="font-bold text-gray-700 mb-3">稽查定义与意义</h3> | |
| <p class="text-gray-600 mb-4"> | |
| 稽查是对临床试验过程的系统性、独立性检查，旨在评估研究操作是否符合法规要求、研究方案以及GCP标准。其目的在于保障受试者权益和数据完整性。 | |
| </p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded mb-4"> | |
| <p class="text-yellow-700"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i>稽查准备关键点：文件完整性、流程合规性、数据一致性 | |
| </p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-700 mb-3">稽查类型</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-flag text-red-500 mt-1 mr-2"></i> | |
| <div> | |
| <p class="font-medium">NMPA/药监局稽查</p> | |
| <p class="text-sm text-gray-500">合规性稽查，重点关注方案偏离与数据完整性</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-balance-scale text-green-500 mt-1 mr-2"></i> | |
| <div> | |
| <p class="font-medium">伦理委员会审查</p> | |
| <p class="text-sm text-gray-500">审查受试者权益保护与文件归档情况</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-building text-blue-500 mt-1 mr-2"></i> | |
| <div> | |
| <p class="font-medium">申办方稽查</p> | |
| <p class="text-sm text-gray-500">监查过程与试验操作合规性评估</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-700 mb-3">稽查流程</h3> | |
| <div class="flow-step before:content-['1'] before:flex before:items-center before:justify-center"> | |
| <p class="font-medium">稽查通知</p> | |
| <p class="text-sm text-gray-500">收到稽查通知并确认范围与日期</p> | |
| </div> | |
| <div class="flow-step mt-4 before:content-['2'] before:flex before:items-center before:justify-center"> | |
| <p class="font-medium">材料准备</p> | |
| <p class="text-sm text-gray-500">收集并整理所需文件资料</p> | |
| </div> | |
| <div class="flow-step mt-4 before:content-['3'] before:flex before:items-center before:justify-center"> | |
| <p class="font-medium">场地准备</p> | |
| <p class="text-sm text-gray-500">准备稽查场地与人员安排</p> | |
| </div> | |
| <div class="flow-step mt-4 before:content-['4'] before:flex before:items-center before:justify-center"> | |
| <p class="font-medium">稽查会议</p> | |
| <p class="text-sm text-gray-500">介绍研究情况并回答问题</p> | |
| </div> | |
| <div class="flow-step mt-4 before:content-['5'] before:flex before:items-center before:justify-center"> | |
| <p class="font-medium">后续跟进</p> | |
| <p class="text-sm text-gray-500">处理发现项并提交CAPA报告</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-700 mb-3">高风险区域</h3> | |
| <div class="bg-red-50 p-4 rounded-lg"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-file-contract text-red-500 mt-1 mr-2"></i> | |
| <span>ICF签署问题（缺失、签署日期异常）</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-pills text-red-500 mt-1 mr-2"></i> | |
| <span>药物记录不一致（库存、发放、回收）</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-2"></i> | |
| <span>SAE报告延迟或内容不完整</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-user-edit text-red-500 mt-1 mr-2"></i> | |
| <span>数据修改未正确记录（日期、原因、授权）</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 核心任务清单 --> | |
| <div class="bg-white rounded-xl shadow-custom mb-8"> | |
| <div class="p-6 border-b"> | |
| <h2 class="text-xl font-bold text-primary flex items-center"> | |
| <i class="fas fa-tasks mr-2"></i>稽查前准备任务清单 | |
| </h2> | |
| </div> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"> | |
| <!-- 任务卡片1 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">01</span> | |
| <span class="px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">PI/CRC</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">整理ICF签署表</h3> | |
| <p class="text-gray-500 text-sm mb-3">核对所有受试者ICF签署日期、版本号、姓名和授权人员</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 任务卡片2 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">02</span> | |
| <span class="px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">CRC</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">准备源数据文件</h3> | |
| <p class="text-gray-500 text-sm mb-3">整理完整的病案资料、实验室报告和其他源文件</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 任务卡片3 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">03</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">CRA</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">药物管理记录核验</h3> | |
| <p class="text-gray-500 text-sm mb-3">核对药物接收、分发、回收和温度记录完整性</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 任务卡片4 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">04</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">QA</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">方案偏离/违背审查</h3> | |
| <p class="text-gray-500 text-sm mb-3">整理方案偏离报告并进行分类分级</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 任务卡片5 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">05</span> | |
| <span class="px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">PI</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">伦理批件归档</h3> | |
| <p class="text-gray-500 text-sm mb-3">检查所有伦理委员会的批准文件与修订通知</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 任务卡片6 --> | |
| <div class="task-card bg-white border border-gray-200 rounded-lg p-5 transition-all duration-300"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">06</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">CRA</span> | |
| </div> | |
| <h3 class="font-bold text-gray-700 mb-2">稽查前会议准备</h3> | |
| <p class="text-gray-500 text-sm mb-3">准备稽查前会议议程与研究总结PPT</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white text-xs rounded hover:bg-blue-700"> | |
| <i class="fas fa-file-download mr-1"></i>下载模板 | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200"> | |
| <i class="fas fa-search mr-1"></i>查看自查表 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- 所需工具材料区 --> | |
| <div class="bg-white rounded-xl shadow-custom"> | |
| <div class="p-6 border-b"> | |
| <h2 class="text-xl font-bold text-primary flex items-center"> | |
| <i class="fas fa-toolbox mr-2"></i>稽查支持工具与材料 | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- 材料1 --> | |
| <div class="material-card flex items-center border border-gray-200 p-4 rounded-lg"> | |
| <div class="bg-blue-50 p-3 rounded mr-4"> | |
| <i class="fas fa-file-alt text-primary text-xl"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h3 class="font-bold">CAPA整改模板</h3> | |
| <p class="text-sm text | |
| <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/detail1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |