470 lines
30 KiB
HTML
470 lines
30 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>SSA-Pro 智能统计工作台 V8.0 (Dual-Pane Workspace)</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">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; color: #334155; overflow: hidden; }
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||
|
||
.fade-in { animation: fadeIn 0.4s ease-out forwards; opacity: 0; }
|
||
.slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(15px); }
|
||
.pop-in { animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: scale(0.95); }
|
||
|
||
@keyframes fadeIn { to { opacity: 1; } }
|
||
@keyframes slideUp { to { transform: translateY(0); opacity: 1; } }
|
||
@keyframes popIn { to { transform: scale(1); opacity: 1; } }
|
||
|
||
/* 科学表格样式 */
|
||
.sci-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
||
.sci-table th { border-top: 2px solid #1e293b; border-bottom: 1px solid #1e293b; padding: 10px 12px; text-align: left; font-weight: 600; color: #1e293b; }
|
||
.sci-table td { border-bottom: 1px solid #e2e8f0; padding: 10px 12px; color: #475569; }
|
||
.sci-table tr:last-child td { border-bottom: 2px solid #1e293b; }
|
||
|
||
/* 状态点 */
|
||
.status-dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
|
||
.status-success { background-color: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
|
||
|
||
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; }
|
||
|
||
.artifact-shadow { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 0 3px rgba(0,0,0,0.02); }
|
||
</style>
|
||
</head>
|
||
<body class="h-screen flex text-slate-800">
|
||
|
||
<!-- 最左侧：极简全局导航 (Icon only) -->
|
||
<nav class="w-16 bg-slate-900 flex flex-col items-center py-4 z-30 flex-shrink-0">
|
||
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white mb-8 shadow-md">
|
||
<i class="fa-solid fa-chart-simple"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-4 w-full px-2">
|
||
<button class="w-full aspect-square rounded-xl bg-slate-800 text-white flex items-center justify-center hover:bg-slate-700 transition" title="新建分析">
|
||
<i class="fa-solid fa-plus"></i>
|
||
</button>
|
||
<button class="w-full aspect-square rounded-xl text-slate-400 flex items-center justify-center hover:bg-slate-800 hover:text-white transition" title="历史记录">
|
||
<i class="fa-solid fa-clock-rotate-left"></i>
|
||
</button>
|
||
<button class="w-full aspect-square rounded-xl text-slate-400 flex items-center justify-center hover:bg-slate-800 hover:text-white transition" title="配置中心">
|
||
<i class="fa-solid fa-gear"></i>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 左半屏：对话控制区 (Chat Pane) -->
|
||
<section class="w-[400px] lg:w-[450px] flex flex-col bg-white border-r border-slate-200 z-20 flex-shrink-0 shadow-[4px_0_24px_rgba(0,0,0,0.02)]">
|
||
<!-- Chat Header -->
|
||
<header class="h-16 flex items-center justify-between px-5 border-b border-slate-100 flex-shrink-0">
|
||
<div class="font-semibold text-slate-800 text-sm">心血管药物疗效研究</div>
|
||
<div class="flex items-center gap-2 text-[10px] font-medium text-slate-500 bg-slate-50 px-2.5 py-1 rounded-full border border-slate-200">
|
||
<span class="status-dot status-success"></span> Engine Ready
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Chat Messages -->
|
||
<div id="chat-container" class="flex-1 overflow-y-auto p-5 space-y-6">
|
||
<!-- 欢迎语 -->
|
||
<div class="flex gap-3">
|
||
<div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fa-solid fa-robot text-white text-xs"></i></div>
|
||
<div class="bg-slate-50 text-slate-700 p-3.5 rounded-2xl rounded-tl-none text-sm leading-relaxed border border-slate-100">
|
||
你好！你可以直接描述研究目标，我将为你生成分析方案；或者上传数据，我们将直接开始智能分析。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Msg -->
|
||
<div class="flex gap-3 flex-row-reverse slide-up" style="animation-delay: 0.1s">
|
||
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fa-solid fa-user text-slate-500 text-xs"></i></div>
|
||
<div class="bg-blue-600 text-white p-3.5 rounded-2xl rounded-tr-none text-sm leading-relaxed shadow-sm">
|
||
我在研究一种新药，收集了实验组和对照组患者的血压下降值数据。我想知道新药是否有效。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Msg (生成 SAP 触发器) -->
|
||
<div class="flex gap-3 slide-up" style="animation-delay: 0.2s">
|
||
<div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fa-solid fa-robot text-white text-xs"></i></div>
|
||
<div class="bg-white border border-slate-200 text-slate-700 p-3.5 rounded-2xl rounded-tl-none text-sm leading-relaxed shadow-sm flex flex-col gap-3">
|
||
<span>理解了，针对“两组独立样本疗效对比”，我为您制定了统计分析计划（SAP）。</span>
|
||
<!-- 交互触发卡片 -->
|
||
<button class="bg-blue-50 text-blue-700 border border-blue-100 p-2.5 rounded-xl flex items-center gap-3 hover:bg-blue-100 transition text-left">
|
||
<div class="w-8 h-8 bg-white rounded flex items-center justify-center text-blue-600 shadow-sm"><i class="fa-solid fa-file-lines"></i></div>
|
||
<div class="flex-1">
|
||
<div class="font-semibold text-xs">初步分析方案.sap</div>
|
||
<div class="text-[10px] text-blue-500/80">点击在右侧工作区查看</div>
|
||
</div>
|
||
<i class="fa-solid fa-angle-right text-blue-400"></i>
|
||
</button>
|
||
<span class="text-xs text-slate-500">确认方案无误后，请上传数据文件。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="chat-anchor"></div>
|
||
</div>
|
||
|
||
<!-- Chat Input -->
|
||
<div class="p-4 bg-white border-t border-slate-100 flex-shrink-0">
|
||
<!-- 嵌入式挂载区 -->
|
||
<div id="data-mount-zone" class="hidden items-center mb-2 pop-in">
|
||
<div class="bg-slate-50 border border-slate-200 rounded-lg px-2 py-1.5 flex items-center gap-2 w-max">
|
||
<i class="fa-solid fa-file-csv text-green-600 text-sm ml-1"></i>
|
||
<div class="flex flex-col pr-2">
|
||
<span class="text-xs font-bold text-slate-700">BP_Trial_Data.csv</span>
|
||
<span class="text-[10px] text-slate-400 leading-none mt-0.5">120 rows • 45KB</span>
|
||
</div>
|
||
<button onclick="removeData(event)" class="text-slate-400 hover:text-red-500 px-1"><i class="fa-solid fa-xmark text-xs"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative flex items-end shadow-sm border border-slate-200 rounded-2xl bg-slate-50 focus-within:bg-white focus-within:border-blue-400 focus-within:ring-4 focus-within:ring-blue-50 transition-all p-1">
|
||
<button onclick="simulateUpload()" id="btn-upload" class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-full text-slate-400 hover:text-blue-600 hover:bg-blue-50 transition" title="上传数据">
|
||
<i class="fa-solid fa-paperclip text-lg"></i>
|
||
</button>
|
||
<textarea class="flex-1 bg-transparent py-2.5 px-2 focus:outline-none resize-none text-sm text-slate-700" rows="1" placeholder="发送消息或上传数据..." style="min-height: 40px;"></textarea>
|
||
<button class="flex-shrink-0 w-9 h-9 bg-slate-800 text-white rounded-full hover:bg-slate-700 transition flex items-center justify-center shadow-sm">
|
||
<i class="fa-solid fa-arrow-up text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 右半屏：工作区 (Artifacts Workspace) -->
|
||
<section class="flex-1 flex flex-col relative bg-[#f1f5f9] overflow-hidden" id="workspace">
|
||
|
||
<!-- 空状态背景 -->
|
||
<div id="workspace-empty" class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 z-0 fade-in">
|
||
<i class="fa-solid fa-layer-group text-6xl mb-4 opacity-20"></i>
|
||
<p class="text-sm font-medium">分析方案、执行过程与图表将在这里展示</p>
|
||
</div>
|
||
|
||
<!-- 动态 Artifact 容器 -->
|
||
<div id="artifact-container" class="absolute inset-0 p-6 flex flex-col z-10 hidden">
|
||
|
||
<!-- 头部栏 (通用) -->
|
||
<header class="flex items-center justify-between mb-4 flex-shrink-0">
|
||
<div class="flex items-center gap-3">
|
||
<div id="artifact-icon" class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center"><i class="fa-solid fa-file-lines"></i></div>
|
||
<h2 id="artifact-title" class="text-lg font-bold text-slate-800">统计分析计划书 (SAP)</h2>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<button id="btn-code" class="hidden px-3 py-1.5 bg-white border border-slate-200 text-slate-600 text-xs font-medium rounded-lg hover:bg-slate-50 transition shadow-sm"><i class="fa-brands fa-r-project mr-1 text-blue-600"></i> 查看 R 源码</button>
|
||
<button class="px-3 py-1.5 bg-white border border-slate-200 text-slate-600 text-xs font-medium rounded-lg hover:bg-slate-50 transition shadow-sm"><i class="fa-solid fa-download mr-1"></i> 下载</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 渲染区域 (白板) -->
|
||
<div class="flex-1 bg-white rounded-2xl artifact-shadow border border-slate-200/60 overflow-y-auto flex flex-col relative">
|
||
|
||
<!-- 视图 1：SAP 文档 (默认显示) -->
|
||
<div id="view-sap" class="p-8 md:p-12 max-w-4xl mx-auto w-full fade-in">
|
||
<h1 class="text-2xl font-bold text-slate-900 border-b-2 border-slate-900 pb-3 mb-6">研究课题：新药治疗高血压疗效对比</h1>
|
||
|
||
<div class="space-y-8">
|
||
<section>
|
||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">1. 研究目的与假设</h3>
|
||
<p class="text-sm text-slate-700 leading-relaxed bg-slate-50 p-4 rounded-lg border border-slate-100">探究新药在降低患者血压方面是否优于传统安慰剂/对照药。假设：两组的血压下降值存在显著差异。</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">2. 推荐统计方法</h3>
|
||
<div class="border border-blue-100 rounded-lg overflow-hidden">
|
||
<div class="bg-blue-50 px-4 py-2 border-b border-blue-100 font-medium text-blue-800 text-sm"><i class="fa-solid fa-star text-amber-500 mr-2"></i>首选：独立样本 T 检验 (Independent T-Test)</div>
|
||
<div class="p-4 text-sm text-slate-600 space-y-2">
|
||
<div class="flex"><span class="w-24 font-medium text-slate-500">自变量 (X):</span> <span>分组 (分类变量，2个水平)</span></div>
|
||
<div class="flex"><span class="w-24 font-medium text-slate-500">因变量 (Y):</span> <span>血压下降值 (连续数值)</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">3. 统计护栏 (执行前置条件)</h3>
|
||
<ul class="text-sm text-slate-700 space-y-3 pl-1">
|
||
<li class="flex items-start gap-2">
|
||
<i class="fa-solid fa-check text-green-500 mt-1"></i>
|
||
<div><b>独立性假设：</b> 样本需相互独立（由研究设计保证）。</div>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i class="fa-solid fa-scale-balanced text-amber-500 mt-1"></i>
|
||
<div><b>正态性假设检验：</b> 将执行 Shapiro-Wilk 检验。若 P < 0.05 (拒绝正态)，将自动降级使用 <b>Wilcoxon 秩和检验</b>。</div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视图 2：执行追踪 (隐藏) -->
|
||
<div id="view-execution" class="absolute inset-0 bg-white p-8 hidden flex-col items-center justify-center">
|
||
<div class="w-full max-w-xl">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="font-bold text-slate-700">正在执行云端计算...</h3>
|
||
<i class="fa-solid fa-circle-notch fa-spin text-blue-500 text-xl"></i>
|
||
</div>
|
||
<div class="bg-slate-900 rounded-xl p-5 font-mono text-xs text-slate-300 shadow-inner relative overflow-hidden h-64">
|
||
<div class="absolute left-[31px] top-6 bottom-6 w-px bg-slate-700"></div>
|
||
<div id="trace-logs" class="space-y-4 relative z-10">
|
||
<!-- 动态插入日志 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视图 3：最终结果报告 (隐藏) -->
|
||
<div id="view-result" class="p-8 md:p-12 max-w-4xl mx-auto w-full hidden">
|
||
|
||
<!-- 核心结论提示 -->
|
||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 p-5 rounded-xl mb-8 flex gap-4 items-start shadow-sm">
|
||
<i class="fa-solid fa-lightbulb text-blue-500 text-xl mt-0.5"></i>
|
||
<div>
|
||
<h4 class="font-bold text-slate-800 text-sm mb-1">AI 统计解读</h4>
|
||
<p class="text-sm text-slate-700 leading-relaxed">
|
||
结果表明，新药组（Drug）的血压下降幅度显著大于对照组（Placebo）。差异具有统计学意义 (<span class="text-red-600 font-bold">P < 0.001</span>)。
|
||
<i>注：因数据未通过正态性检验，本结果由自动降级后的 Wilcoxon 秩和检验得出。</i>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结果表格 -->
|
||
<div class="mb-10">
|
||
<h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Table 1. 血压下降值组间比较</h4>
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<table class="sci-table bg-white">
|
||
<thead>
|
||
<tr class="bg-slate-50">
|
||
<th>组别 (Group)</th>
|
||
<th>样本量 (N)</th>
|
||
<th>下降值 (Median [IQR])</th>
|
||
<th>W 统计量</th>
|
||
<th>P 值</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-slate-50">
|
||
<td>Drug (新药组)</td>
|
||
<td>60</td>
|
||
<td>14.5 [12.1 - 16.8]</td>
|
||
<td rowspan="2" class="align-middle">2845.5</td>
|
||
<td rowspan="2" class="align-middle text-red-600 font-bold">< 0.001 **</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td>Placebo (对照组)</td>
|
||
<td>60</td>
|
||
<td>8.2 [6.5 - 10.4]</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表区域 -->
|
||
<div>
|
||
<h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Figure 1. 分布可视化</h4>
|
||
<div class="border border-slate-200 rounded-xl p-6 bg-white flex justify-center shadow-sm">
|
||
<!-- 纯 CSS 模拟的精美图表 -->
|
||
<div class="relative w-full max-w-md h-64 flex items-end justify-center gap-16 pb-8 border-b-2 border-l-2 border-slate-800 ml-8">
|
||
<!-- Y轴刻度 -->
|
||
<div class="absolute -left-8 top-0 text-[10px] text-slate-500">20</div>
|
||
<div class="absolute -left-8 top-1/2 -translate-y-1/2 text-[10px] text-slate-500">10</div>
|
||
<div class="absolute -left-6 bottom-6 text-[10px] text-slate-500">0</div>
|
||
|
||
<!-- 箱线图 Drug -->
|
||
<div class="relative w-16 h-48 bg-blue-500/20 border-2 border-blue-600 rounded-sm flex justify-center items-center group cursor-pointer hover:bg-blue-500/30 transition">
|
||
<div class="absolute w-full h-[2px] bg-blue-800"></div> <!-- 中位数 -->
|
||
<div class="absolute -top-4 w-px h-4 bg-blue-600"></div> <!-- 上触须 -->
|
||
<div class="absolute -bottom-6 w-px h-6 bg-blue-600"></div> <!-- 下触须 -->
|
||
<div class="absolute -top-4 w-6 h-[2px] bg-blue-600"></div>
|
||
<div class="absolute -bottom-6 w-6 h-[2px] bg-blue-600"></div>
|
||
<div class="absolute -bottom-14 text-xs font-bold text-slate-700">Drug</div>
|
||
</div>
|
||
|
||
<!-- 箱线图 Placebo -->
|
||
<div class="relative w-16 h-24 bg-red-500/20 border-2 border-red-600 rounded-sm flex justify-center items-center group cursor-pointer hover:bg-red-500/30 transition">
|
||
<div class="absolute w-full h-[2px] bg-red-800"></div> <!-- 中位数 -->
|
||
<div class="absolute -top-6 w-px h-6 bg-red-600"></div> <!-- 上触须 -->
|
||
<div class="absolute -bottom-4 w-px h-4 bg-red-600"></div> <!-- 下触须 -->
|
||
<div class="absolute -top-6 w-6 h-[2px] bg-red-600"></div>
|
||
<div class="absolute -bottom-4 w-6 h-[2px] bg-red-600"></div>
|
||
<div class="absolute -bottom-14 text-xs font-bold text-slate-700">Placebo</div>
|
||
</div>
|
||
|
||
<!-- 显著性标记 -->
|
||
<div class="absolute top-2 left-[30%] right-[30%] h-4 border-t-2 border-l-2 border-r-2 border-slate-700"></div>
|
||
<div class="absolute -top-3 w-full text-center text-sm font-bold text-slate-800">P < 0.001 ***</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 模态框：R 代码预览 (在方案C中，代码也可以直接在右侧面板展示，但为了保持报告整洁，保留模态框) -->
|
||
<div id="code-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center">
|
||
<div class="absolute inset-0 bg-slate-900/40 modal-backdrop" onclick="closeModal('code-modal')"></div>
|
||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col relative z-10 pop-in m-4">
|
||
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2">
|
||
<i class="fa-brands fa-r-project text-blue-600 text-xl"></i> 可复现 R 源码
|
||
</h3>
|
||
<button onclick="closeModal('code-modal')" class="text-slate-400 hover:text-slate-700 w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6 overflow-y-auto flex-1 bg-slate-50">
|
||
<pre class="bg-slate-900 text-slate-50 p-4 rounded-xl overflow-x-auto shadow-inner text-xs"><code><span class="text-slate-500"># SSA-Pro 生成代码: 独立样本差异分析</span>
|
||
<span class="text-pink-400">library</span>(ggplot2)
|
||
df <- <span class="text-blue-300">read.csv</span>(<span class="text-green-300">"BP_Trial_Data.csv"</span>)
|
||
df$Group <- <span class="text-blue-300">as.factor</span>(df$Group)
|
||
df$BP_Change <- <span class="text-blue-300">as.numeric</span>(df$BP_Change)
|
||
|
||
<span class="text-slate-500"># 核心计算 (自动降级至非参数检验)</span>
|
||
res <- <span class="text-blue-300">wilcox.test</span>(BP_Change ~ Group, data = df)
|
||
<span class="text-blue-300">print</span>(res)</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const chatAnchor = document.getElementById('chat-anchor');
|
||
const workspaceEmpty = document.getElementById('workspace-empty');
|
||
const artifactContainer = document.getElementById('artifact-container');
|
||
const vSap = document.getElementById('view-sap');
|
||
const vExec = document.getElementById('view-execution');
|
||
const vRes = document.getElementById('view-result');
|
||
const artTitle = document.getElementById('artifact-title');
|
||
const artIcon = document.getElementById('artifact-icon');
|
||
const btnCode = document.getElementById('btn-code');
|
||
|
||
// 初始化显示 SAP
|
||
setTimeout(() => {
|
||
workspaceEmpty.classList.add('hidden');
|
||
artifactContainer.classList.remove('hidden');
|
||
}, 500);
|
||
|
||
// 模拟上传数据
|
||
function simulateUpload() {
|
||
const mountZone = document.getElementById('data-mount-zone');
|
||
mountZone.classList.remove('hidden');
|
||
mountZone.classList.add('flex');
|
||
document.getElementById('btn-upload').classList.add('opacity-50', 'pointer-events-none');
|
||
|
||
// 聊天区增加对话
|
||
setTimeout(() => {
|
||
const aiHTML = `
|
||
<div class="flex gap-3 slide-up">
|
||
<div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fa-solid fa-robot text-white text-xs"></i></div>
|
||
<div class="bg-white border border-slate-200 text-slate-700 p-4 rounded-2xl rounded-tl-none shadow-sm w-full">
|
||
<div class="text-sm font-medium mb-3 border-b border-slate-100 pb-2">
|
||
<i class="fa-solid fa-link text-blue-500 mr-1"></i> 数据已挂载，参数映射完成：
|
||
</div>
|
||
<div class="text-xs space-y-2 mb-4">
|
||
<div class="flex justify-between"><span class="text-slate-500">分组变量:</span> <span class="font-mono bg-slate-100 px-1 rounded">Group</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-500">检验变量:</span> <span class="font-mono bg-slate-100 px-1 rounded">BP_Change</span></div>
|
||
</div>
|
||
<button onclick="runAnalysis(this)" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-sm text-sm font-medium flex items-center justify-center gap-2">
|
||
<i class="fa-solid fa-play text-xs"></i> 确认执行分析
|
||
</button>
|
||
</div>
|
||
</div>`;
|
||
chatAnchor.insertAdjacentHTML('beforebegin', aiHTML);
|
||
scrollToBottom();
|
||
}, 600);
|
||
}
|
||
|
||
// 移除数据
|
||
function removeData(e) {
|
||
e.stopPropagation();
|
||
document.getElementById('data-mount-zone').classList.add('hidden');
|
||
document.getElementById('data-mount-zone').classList.remove('flex');
|
||
document.getElementById('btn-upload').classList.remove('opacity-50', 'pointer-events-none');
|
||
}
|
||
|
||
// 执行分析 (重头戏：右侧工作区切换状态)
|
||
function runAnalysis(btn) {
|
||
// 1. 左侧按钮状态变更
|
||
btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> 执行中...';
|
||
btn.classList.replace('bg-blue-600', 'bg-slate-400');
|
||
btn.classList.replace('hover:bg-blue-700', 'hover:bg-slate-400');
|
||
btn.disabled = true;
|
||
|
||
// 2. 右侧切到执行日志视图
|
||
vSap.classList.add('hidden');
|
||
vExec.classList.remove('hidden');
|
||
vExec.classList.add('flex');
|
||
artTitle.innerText = "执行日志 (Engine Trace)";
|
||
artIcon.innerHTML = '<i class="fa-solid fa-terminal"></i>';
|
||
artIcon.className = "w-8 h-8 rounded-lg bg-slate-800 text-white flex items-center justify-center";
|
||
|
||
// 3. 模拟打印日志
|
||
const logBox = document.getElementById('trace-logs');
|
||
logBox.innerHTML = '';
|
||
|
||
setTimeout(() => { addLog(logBox, 'text-green-400', 'fa-check-circle', '[System] 读取数据 BP_Trial_Data.csv (N=120) 成功'); }, 500);
|
||
setTimeout(() => { addLog(logBox, 'text-blue-400', 'fa-spinner fa-spin', '[Guardrail] 正在进行 Shapiro-Wilk 正态性检验...'); }, 1200);
|
||
setTimeout(() => {
|
||
logBox.lastElementChild.innerHTML = '<i class="fa-solid fa-times-circle text-red-400 bg-slate-900 z-10 relative"></i> <span class="ml-2">[Guardrail] 正态性检验未通过 (P=0.002 < 0.05)</span>';
|
||
addLog(logBox, 'text-amber-400', 'fa-arrow-turn-down', '[Action] 触发护栏：自动降级为 Wilcoxon 秩和检验');
|
||
}, 2500);
|
||
setTimeout(() => { addLog(logBox, 'text-blue-400', 'fa-spinner fa-spin', '[Compute] 执行 wilcox.test()...'); }, 3200);
|
||
|
||
// 4. 完成，展示结果
|
||
setTimeout(() => {
|
||
// 左侧按钮更新
|
||
btn.innerHTML = '<i class="fa-solid fa-check"></i> 分析完成';
|
||
btn.classList.replace('bg-slate-400', 'bg-green-500');
|
||
btn.classList.replace('hover:bg-slate-400', 'hover:bg-green-600');
|
||
|
||
// 右侧切到结果视图
|
||
vExec.classList.remove('flex');
|
||
vExec.classList.add('hidden');
|
||
vRes.classList.remove('hidden');
|
||
vRes.classList.add('fade-in');
|
||
|
||
// 更新右侧头部
|
||
artTitle.innerText = "分析结果：血压变化值差异检验";
|
||
artIcon.innerHTML = '<i class="fa-solid fa-chart-pie"></i>';
|
||
artIcon.className = "w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center";
|
||
|
||
// 显示代码按钮
|
||
btnCode.classList.remove('hidden');
|
||
btnCode.onclick = () => { document.getElementById('code-modal').classList.remove('hidden') };
|
||
|
||
// 左侧追加提示
|
||
setTimeout(() => {
|
||
const aiFinal = `
|
||
<div class="flex gap-3 slide-up">
|
||
<div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fa-solid fa-robot text-white text-xs"></i></div>
|
||
<div class="bg-slate-50 text-slate-700 p-3.5 rounded-2xl rounded-tl-none text-sm leading-relaxed border border-slate-200">
|
||
分析已完成！👉 <b>请在右侧面板查看详细的结果报告和图表。</b>
|
||
</div>
|
||
</div>`;
|
||
chatAnchor.insertAdjacentHTML('beforebegin', aiFinal);
|
||
scrollToBottom();
|
||
}, 500);
|
||
|
||
}, 4500);
|
||
}
|
||
|
||
function addLog(container, color, icon, text) {
|
||
const div = document.createElement('div');
|
||
div.className = 'flex items-center fade-in text-slate-300';
|
||
div.innerHTML = `<i class="fa-solid ${icon} ${color} bg-slate-900 z-10 relative"></i> <span class="ml-3">${text}</span>`;
|
||
container.appendChild(div);
|
||
}
|
||
|
||
function scrollToBottom() {
|
||
const c = document.getElementById('chat-container');
|
||
c.scrollTo({ top: c.scrollHeight, behavior: 'smooth' });
|
||
}
|
||
|
||
function closeModal(id) {
|
||
document.getElementById(id).classList.add('hidden');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |