HaHafeng
4088275290
Fixed issues: - Remove simulateUpload function from DashboardPage Step 3 - Map department to description field when creating KB - Add upload modal in WorkspacePage knowledge assets tab - Fix DocumentUpload import path (../../stores to ../stores) Known issue: Dify API validation error during document upload (file uploaded but DB record failed, needs investigation) Testing: KB creation works, upload dialog opens correctly
514 lines
23 KiB
HTML
514 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>临床研究平台 - AI医学科研助手 V11</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', 'Inter', sans-serif;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
/* 核心品牌色 - 智能体 (Blue) */
|
||
:root {
|
||
--brand-blue: #4F6EF2;
|
||
--brand-hover: #3d5afe;
|
||
--card-bg: #F6F9FF;
|
||
--card-border: #E0E7FF;
|
||
--active-border: #4F6EF2;
|
||
--active-bg: #EEF4FF;
|
||
|
||
/* 新增：工具板块色 (Teal) */
|
||
--tool-teal: #0D9488;
|
||
--tool-bg: #F0FDFA; /* 极淡青色背景 */
|
||
--tool-border: #CCFBF1;
|
||
--tool-active-border: #0D9488;
|
||
--tool-active-bg: #E0F2F1;
|
||
}
|
||
|
||
.text-brand { color: var(--brand-blue); }
|
||
.bg-brand { background-color: var(--brand-blue); }
|
||
|
||
/* 通用卡片样式 (基于 V9改) */
|
||
.card-box {
|
||
background-color: var(--card-bg);
|
||
border: 1px solid var(--card-border);
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
transition: all 0.2s ease-in-out;
|
||
height: 100%;
|
||
min-height: 145px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
|
||
}
|
||
|
||
.card-box:hover {
|
||
transform: translateY(-3px);
|
||
border-color: var(--active-border);
|
||
border-width: 1.5px;
|
||
background-color: var(--active-bg);
|
||
box-shadow: 0 8px 16px rgba(79, 110, 242, 0.12);
|
||
margin: -0.5px;
|
||
}
|
||
|
||
/* 特殊样式：工具卡片 (Tool Card) */
|
||
.card-box.tool-card {
|
||
background-color: var(--tool-bg);
|
||
border-color: var(--tool-border);
|
||
}
|
||
.card-box.tool-card:hover {
|
||
border-color: var(--tool-active-border);
|
||
background-color: var(--tool-active-bg);
|
||
box-shadow: 0 8px 16px rgba(13, 148, 136, 0.15); /* 青色阴影 */
|
||
}
|
||
|
||
/* 图标容器 */
|
||
.icon-box {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #DCE6FF;
|
||
transition: all 0.2s;
|
||
padding: 5px;
|
||
}
|
||
|
||
.card-box:hover .icon-box {
|
||
background-color: #DBEafe;
|
||
border-color: #93C5FD;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 工具卡片的图标容器 */
|
||
.card-box.tool-card .icon-box {
|
||
border-color: #CCFBF1;
|
||
color: var(--tool-teal);
|
||
}
|
||
.card-box.tool-card:hover .icon-box {
|
||
background-color: #CCFBF1;
|
||
border-color: #5EEAD4;
|
||
}
|
||
|
||
/* 左侧时间轴线 */
|
||
.timeline-line {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 28px;
|
||
bottom: -28px;
|
||
width: 2px;
|
||
background-color: #E2E8F0;
|
||
z-index: 0;
|
||
}
|
||
.last-item .timeline-line { display: none; }
|
||
|
||
/* 序号水印 */
|
||
.num-watermark {
|
||
color: #E0E7FF;
|
||
font-family: 'Inter', sans-serif;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
font-size: 1.25rem;
|
||
}
|
||
.card-box:hover .num-watermark {
|
||
color: #C7D2FE;
|
||
}
|
||
|
||
/* 工具卡片的水印颜色 */
|
||
.card-box.tool-card .num-watermark {
|
||
color: #CCFBF1;
|
||
}
|
||
.card-box.tool-card:hover .num-watermark {
|
||
color: #99F6E4;
|
||
}
|
||
|
||
/* 文本优化 */
|
||
.desc-text {
|
||
text-align: justify;
|
||
text-justify: inter-ideograph;
|
||
line-height: 1.5;
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
margin-top: 8px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
/* 标题样式 */
|
||
.card-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
}
|
||
|
||
/* 链接跳转图标 */
|
||
.link-icon {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
color: #94A3B8;
|
||
opacity: 0.6;
|
||
transition: all 0.2s;
|
||
}
|
||
.card-box:hover .link-icon {
|
||
opacity: 1;
|
||
color: var(--tool-teal);
|
||
transform: translate(2px, -2px);
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.nav-item.active {
|
||
color: var(--brand-blue);
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
.nav-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -19px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background-color: var(--brand-blue);
|
||
border-radius: 2px 2px 0 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-slate-600 bg-white">
|
||
|
||
<!-- 顶部导航 -->
|
||
<nav class="bg-white border-b border-slate-100 h-14 sticky top-0 z-50">
|
||
<div class="max-w-[760px] mx-auto px-4 h-full flex items-center justify-between">
|
||
<div class="flex items-center space-x-8">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-brand font-bold text-base bg-indigo-50 px-2 py-1 rounded">临床研究平台</span>
|
||
</div>
|
||
<div class="hidden md:flex items-center space-x-6 text-sm font-medium text-slate-600">
|
||
<a href="#" class="hover:text-brand transition-colors">研究管理</a>
|
||
<a href="#" class="hover:text-brand transition-colors">统计分析工具</a>
|
||
<a href="#" class="nav-item active">AI问答</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-3 text-xs text-slate-400">
|
||
<span>186****8738</span>
|
||
<span class="text-slate-200">|</span>
|
||
<a href="#" class="hover:text-slate-600">退出账号</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主体内容 -->
|
||
<main class="max-w-[760px] mx-auto px-4 py-6">
|
||
|
||
<!-- 头部搜索区 -->
|
||
<div class="flex flex-col items-center justify-center mb-8 mt-8">
|
||
<div class="flex items-center space-x-2 mb-5">
|
||
<div class="bg-brand text-white p-1.5 rounded-lg">
|
||
<i data-lucide="brain-circuit" class="w-6 h-6"></i>
|
||
</div>
|
||
<h1 class="text-xl md:text-2xl font-bold text-slate-800">
|
||
医学研究专属大模型 <span class="text-[11px] font-normal text-brand bg-indigo-50 border border-indigo-100 px-2 py-0.5 rounded ml-2 align-middle">已接入DeepSeek</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<div class="w-full max-w-2xl relative flex gap-2">
|
||
<input type="text" placeholder="输入研究想法，例如：SGLT2抑制剂对心衰患者预后的影响..."
|
||
class="flex-1 pl-4 pr-12 py-2.5 rounded-lg border border-slate-300 bg-white focus:outline-none focus:border-brand focus:ring-1 focus:ring-brand text-sm shadow-sm transition-all">
|
||
<button class="absolute right-1 top-1 bottom-1 bg-brand hover:bg-blue-600 text-white px-5 rounded-md transition-colors flex items-center justify-center">
|
||
<i data-lucide="search" class="w-5 h-5"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流水线模块 -->
|
||
<div class="pl-6 md:pl-8">
|
||
|
||
<!-- 1. 选题优化智能体 -->
|
||
<div class="relative mb-6">
|
||
<div class="absolute -left-7 md:-left-9 top-0 h-full flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center text-xs font-bold shadow-sm z-10 border border-white">1</div>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
|
||
<h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center">
|
||
选题优化智能体
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 01 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-brand">
|
||
<i data-lucide="list-tree" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">科学问题梳理</h3>
|
||
</div>
|
||
<span class="num-watermark">01</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
从科学问题的清晰度、系统性、可验证性等角度使用科学理论对您的科学问题进行全面的评价。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 02 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-brand">
|
||
<i data-lucide="target" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">PICO 梳理</h3>
|
||
</div>
|
||
<span class="num-watermark">02</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
基于科学问题梳理研究对象、干预（暴露）、对照和结局指标，并评价并给出合理化的建议。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 03 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-brand">
|
||
<i data-lucide="clipboard-check" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">选题评价</h3>
|
||
</div>
|
||
<span class="num-watermark">03</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
从创新性、临床价值、科学性和可行性等方面使用科学理论对您的临床问题进行全面的评价。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. 方案设计智能体 -->
|
||
<div class="relative mb-6">
|
||
<div class="absolute -left-7 md:-left-9 top-0 h-full flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center text-xs font-bold shadow-sm z-10 border border-white">2</div>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
|
||
<h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center">
|
||
方案设计智能体
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
||
<!-- 04 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-indigo-600 border-indigo-100">
|
||
<i data-lucide="eye" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">观察指标设计</h3>
|
||
</div>
|
||
<span class="num-watermark">04</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
基于研究设计和因果关系提供可能的观察指标集。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 05 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-indigo-600 border-indigo-100">
|
||
<i data-lucide="table" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">病例报告表设计</h3>
|
||
</div>
|
||
<span class="num-watermark">05</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
基于研究方案设计梳理观察指标集并给出建议的病例报告表框架。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 06 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-indigo-600 border-indigo-100">
|
||
<i data-lucide="calculator" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">样本量计算</h3>
|
||
</div>
|
||
<span class="num-watermark">06</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
基于研究阶段和研究设计为研究提供科学合理的样本量估算结果。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 07 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-indigo-600 border-indigo-100">
|
||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">临床研究方案撰写</h3>
|
||
</div>
|
||
<span class="num-watermark">07</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
基于科学问题、PICOS等信息，给出一个初步的临床研究设计方案，请尽量多给一些信息和需求。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. 方案预评审 -->
|
||
<div class="relative mb-6">
|
||
<div class="absolute -left-7 md:-left-9 top-0 h-full flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center text-xs font-bold shadow-sm z-10 border border-white">3</div>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
|
||
<h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center">
|
||
方案预评审
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 08 -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-yellow-600 border-yellow-100">
|
||
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">方法学评审智能体</h3>
|
||
</div>
|
||
<span class="num-watermark">08</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
从研究问题、研究方案和临床意义方面，对研究进行临床研究方法学的全面评价。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 数据处理与统计分析 (新增板块，Plan A+B 混合区分) -->
|
||
<div class="relative mb-6">
|
||
<div class="absolute -left-7 md:-left-9 top-0 h-full flex flex-col items-center">
|
||
<!-- 序号 4, 颜色改为 Teal 以示区分 -->
|
||
<div class="w-6 h-6 rounded-full bg-teal-600 text-white flex items-center justify-center text-xs font-bold shadow-sm z-10 border border-white">4</div>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<h2 class="text-sm font-bold text-slate-800">
|
||
数据处理与统计分析
|
||
</h2>
|
||
<!-- UI标识：工具标签 -->
|
||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-teal-100 text-teal-700 border border-teal-200">工具</span>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 09 (工具卡片) -->
|
||
<div class="card-box tool-card group cursor-pointer">
|
||
<!-- 右上角跳转图标 -->
|
||
<i data-lucide="external-link" class="w-3.5 h-3.5 link-icon"></i>
|
||
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded">
|
||
<i data-lucide="database" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title text-slate-800">数据评价与预处理</h3>
|
||
</div>
|
||
<span class="num-watermark">09</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
对现有数据的质量进行自动评价，并给出数据质量报告，包括缺失值、异常值、定量分析等。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 10 (工具卡片) -->
|
||
<div class="card-box tool-card group cursor-pointer">
|
||
<i data-lucide="external-link" class="w-3.5 h-3.5 link-icon"></i>
|
||
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded">
|
||
<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title text-slate-800">智能统计分析</h3>
|
||
</div>
|
||
<span class="num-watermark">10</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
内置3条智能研究路径（队列研究、预测模型、RCT研究），以及近百种统计分析工具。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 写作助手 (原4，顺延为5) -->
|
||
<div class="relative last-item">
|
||
<div class="absolute -left-7 md:-left-9 top-0 h-full flex flex-col items-center">
|
||
<div class="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center text-xs font-bold shadow-sm z-10 border border-white">5</div>
|
||
</div>
|
||
|
||
<h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center">
|
||
写作助手
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 11 (原09) -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-purple-600 border-purple-100">
|
||
<i data-lucide="pen-tool" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">论文润色</h3>
|
||
</div>
|
||
<span class="num-watermark">11</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
结合目标杂志，提供专业化的润色服务，给出合理化的修改建议。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 12 (原10) -->
|
||
<div class="card-box group cursor-pointer">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<div class="flex items-center gap-2">
|
||
<div class="icon-box rounded text-purple-600 border-purple-100">
|
||
<i data-lucide="languages" class="w-5 h-5"></i>
|
||
</div>
|
||
<h3 class="card-title">论文翻译</h3>
|
||
</div>
|
||
<span class="num-watermark">12</span>
|
||
</div>
|
||
<p class="desc-text">
|
||
结合目标杂志，提供专业化的翻译并进行润色，给出合理化的修改建议。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="mt-8 py-4 border-t border-slate-100 text-center text-[10px] text-slate-400">
|
||
<p>© 2025 临床研究平台 - 医学研究专属大模型</p>
|
||
</footer>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
</script>
|
||
</body>
|
||
</html> |