<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPO 智能知识问答系统 - UI Prototype</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome -->
<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: {
opo: {
bg: '#051125', // 极深蓝背景
sidebar: '#0a192f', // 侧边栏背景
card: '#112240', // 卡片背景
accent: '#2563eb', // 亮蓝强调色
text: '#cbd5e1', // 次级文本
glow: '#3b82f6' // 发光色
}
},
fontFamily: {
sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
}
}
}
}
</script>
<style>
/* 自定义滚动条样式 - 极简科技风 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* 毛玻璃效果工具类 */
.glass-panel {
background: rgba(17, 34, 64, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-input {
background: rgba(10, 25, 47, 0.8);
border: 1px solid rgba(59, 130, 246, 0.2);
backdrop-filter: blur(4px);
}
/* 打字机光标动画 */
.cursor-blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* 机器人呼吸灯特效 */
.robot-glow {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
animation: breathe 3s infinite ease-in-out;
}
@keyframes breathe {
0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); }
}
</style>
</head>
<body class="bg-opo-bg text-gray-100 font-sans h-screen flex overflow-hidden selection:bg-opo-accent selection:text-white">
<!-- 左侧侧边栏 -->
<aside class="w-[280px] flex flex-col bg-opo-sidebar border-r border-white/5 shadow-2xl z-20 relative">
<!-- 顶部操作区 -->
<div class="p-4 space-y-4">
<button class="w-full bg-opo-accent hover:bg-blue-600 text-white py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-900/20 group">
<i class="fa-solid fa-plus transition-transform group-hover:rotate-90"></i>
<span class="font-medium">新建 OPO 咨询</span>
</button>
<div class="relative">
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
<input type="text" placeholder="搜索历史记录..." class="w-full bg-opo-bg border border-white/10 rounded-lg py-2 pl-9 pr-3 text-sm focus:outline-none focus:border-opo-accent text-gray-300 transition-colors">
</div>
</div>
<!-- 历史记录列表 -->
<div class="flex-1 overflow-y-auto px-2 py-2 space-y-1">
<div class="px-3 py-2 text-xs text-gray-500 font-semibold uppercase tracking-wider">今日</div>
<!-- 选中项 -->
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg bg-gradient-to-r from-opo-accent/20 to-transparent border-l-2 border-opo-accent cursor-pointer transition-all">
<i class="fa-regular fa-message text-opo-accent"></i>
<div class="flex-1 truncate text-sm text-white">器官捐赠流程解析</div>
<i class="fa-regular fa-trash-can opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-400 transition-opacity text-xs"></i>
</div>
<!-- 普通项 -->
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg hover:bg-white/5 cursor-pointer transition-all border-l-2 border-transparent">
<i class="fa-regular fa-message text-gray-500 group-hover:text-gray-300"></i>
<div class="flex-1 truncate text-sm text-gray-400 group-hover:text-gray-200">COTRS 系统分配原则</div>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg hover:bg-white/5 cursor-pointer transition-all border-l-2 border-transparent">
<i class="fa-regular fa-message text-gray-500 group-hover:text-gray-300"></i>
<div class="flex-1 truncate text-sm text-gray-400 group-hover:text-gray-200">脑死亡判定标准 V2.0</div>
</div>
<div class="px-3 py-2 mt-4 text-xs text-gray-500 font-semibold uppercase tracking-wider">本周</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg hover:bg-white/5 cursor-pointer transition-all border-l-2 border-transparent">
<i class="fa-regular fa-message text-gray-500 group-hover:text-gray-300"></i>
<div class="flex-1 truncate text-sm text-gray-400 group-hover:text-gray-200">潜在捐献者识别指标</div>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg hover:bg-white/5 cursor-pointer transition-all border-l-2 border-transparent">
<i class="fa-regular fa-message text-gray-500 group-hover:text-gray-300"></i>
<div class="flex-1 truncate text-sm text-gray-400 group-hover:text-gray-200">家属沟通话术模板</div>
</div>
</div>
<!-- 底部用户信息 -->
<div class="p-4 border-t border-white/5 flex items-center gap-3 cursor-pointer hover:bg-white/5 transition-colors">
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-green-400 to-blue-500 flex items-center justify-center text-xs font-bold text-white shadow-lg">
DR
</div>
<div class="flex-1">
<div class="text-sm font-medium">Dr. Zhang</div>
<div class="text-xs text-gray-500">OPO 协调员</div>
</div>
<i class="fa-solid fa-ellipsis text-gray-500"></i>
</div>
</aside>
<!-- 折叠按钮 (模拟) -->
<div class="absolute left-[280px] top-1/2 -translate-y-1/2 -translate-x-1/2 z-30 cursor-pointer group">
<div class="w-4 h-12 bg-opo-bg border border-white/10 rounded-full flex items-center justify-center shadow-lg group-hover:bg-opo-accent transition-colors">
<i class="fa-solid fa-chevron-left text-[10px] text-gray-400 group-hover:text-white"></i>
</div>
</div>
<!-- 右侧主内容区 -->
<main class="flex-1 flex flex-col relative">
<!-- 背景水印 -->
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-5 pointer-events-none select-none z-0">
<i class="fa-solid fa-robot text-9xl mb-4"></i>
<h1 class="text-6xl font-black tracking-widest">OPO BRAIN</h1>
<p class="text-2xl mt-2 tracking-[1em]">智能问答系统</p>
</div>
<!-- 顶部标题栏 (透明) -->
<header class="h-14 flex items-center justify-between px-6 border-b border-white/5 relative z-10 glass-panel border-none bg-opacity-30">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
<span class="text-sm font-medium text-gray-300">OPO 知识库 V3.5 <span class="text-xs text-gray-500 px-2 py-0.5 rounded bg-white/5 ml-2">在线</span></span>
</div>
<div class="flex items-center gap-4 text-gray-400 text-sm">
<button class="hover:text-white transition-colors"><i class="fa-regular fa-share-from-square"></i> 分享</button>
<button class="hover:text-white transition-colors"><i class="fa-solid fa-gear"></i> 设置</button>
</div>
</header>
<!-- 对话内容区域 -->
<div id="chat-container" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 relative z-10 scroll-smooth">
<!-- AI Message -->
<div class="flex gap-4 max-w-5xl mx-auto">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 robot-glow p-1">
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=OPOBot" alt="AI" class="w-full h-full rounded-full bg-gray-900">
</div>
<div class="flex flex-col gap-2 max-w-[85%]">
<div class="text-sm text-gray-400 font-medium">OPO 智能助手</div>
<div class="glass-panel p-5 rounded-2xl rounded-tl-none text-sm leading-7 text-gray-200 shadow-xl">
<p class="mb-3">您好，我是 OPO 智能业务助手。关于 <strong class="text-white">“人体器官捐献流程”</strong>，通常包含以下几个关键步骤。我为您整理了标准化的操作模型：</p>
<div class="space-y-3">
<div class="flex gap-3">
<span class="bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded h-fit text-xs font-bold border border-blue-500/30">1</span>
<div>
<strong class="text-white">潜在捐献者识别 (Identification)</strong>
<p class="text-gray-400 text-xs mt-1">ICU 医生发现符合潜在捐献状态（如GCS评分低、拟诊脑死亡）的患者，并通知 OPO。</p>
</div>
</div>
<div class="flex gap-3">
<span class="bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded h-fit text-xs font-bold border border-blue-500/30">2</span>
<div>
<strong class="text-white">脑死亡/心死亡评估 (Assessment)</strong>
<p class="text-gray-400 text-xs mt-1">专家组进行严格的医学评估，包括临床判定和确认试验（如EEG、TCD）。</p>
</div>
</div>
<div class="flex gap-3">
<span class="bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded h-fit text-xs font-bold border border-blue-500/30">3</span>
<div>
<strong class="text-white">家属沟通与知情同意 (Consent)</strong>
<p class="text-gray-400 text-xs mt-1">OPO 协调员与家属进行沟通，签署《人体器官捐献知情同意书》。</p>
</div>
</div>
</div>
<p class="mt-4 border-t border-white/10 pt-3 text-xs text-gray-400">
<i class="fa-solid fa-circle-info mr-1 text-opo-accent"></i>
该模型依据《中国人体器官捐献工作指南》生成。如需生成具体的 <span class="text-opo-accent cursor-pointer hover:underline">SOP 文档</span> 或 <span class="text-opo-accent cursor-pointer hover:underline">法律风险评估</span>，请进一步指令。
</p>
</div>
<div class="flex gap-2 mt-1">
<button class="text-xs text-gray-500 hover:text-white flex items-center gap-1 transition-colors"><i class="fa-regular fa-thumbs-up"></i> 有帮助</button>
<button class="text-xs text-gray-500 hover:text-white flex items-center gap-1 transition-colors ml-2"><i class="fa-regular fa-copy"></i> 复制</button>
</div>
</div>
</div>
<!-- User Message -->
<div class="flex gap-4 max-w-5xl mx-auto flex-row-reverse">
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0 text-white shadow-lg">
<i class="fa-solid fa-user"></i>
</div>
<div class="flex flex-col gap-2 items-end max-w-[85%]">
<div class="text-sm text-gray-400 font-medium">Dr. Zhang</div>
<div class="bg-opo-accent p-4 rounded-2xl rounded-tr-none text-sm leading-relaxed text-white shadow-lg shadow-blue-900/30">
请详细列出关于“脑死亡判定”过程中的技术难点，以及如何规避医疗纠纷的风险点？最好用表格形式展示。
</div>
</div>
</div>
<!-- AI Loading State (Hidden by default, shown via JS) -->
<div id="loading-indicator" class="hidden flex gap-4 max-w-5xl mx-auto">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 robot-glow p-1">
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=OPOBot" alt="AI" class="w-full h-full rounded-full bg-gray-900">
</div>
<div class="glass-panel px-4 py-3 rounded-2xl rounded-tl-none flex items-center gap-2">
<div class="w-2 h-2 bg-opo-accent rounded-full animate-bounce"></div>
<div class="w-2 h-2 bg-opo-accent rounded-full animate-bounce delay-75"></div>
<div class="w-2 h-2 bg-opo-accent rounded-full animate-bounce delay-150"></div>
</div>
</div>
</div>
<!-- 底部输入区域 -->
<div class="p-6 pb-8 relative z-20">
<div class="max-w-5xl mx-auto relative group">
<!-- 快捷指令栏 -->
<div class="absolute -top-10 left-0 flex gap-2">
<button class="bg-gray-800/80 hover:bg-gray-700 text-xs text-gray-300 px-3 py-1.5 rounded-full border border-gray-600 backdrop-blur-sm transition-all">
<i class="fa-solid fa-bolt text-yellow-500 mr-1"></i> 生成 OPO 年度报告
</button>
<button class="bg-gray-800/80 hover:bg-gray-700 text-xs text-gray-300 px-3 py-1.5 rounded-full border border-gray-600 backdrop-blur-sm transition-all">
<i class="fa-solid fa-scale-balanced text-purple-400 mr-1"></i> 伦理审查重点
</button>
</div>
<!-- 输入框容器 -->
<div class="glass-input rounded-xl overflow-hidden shadow-2xl transition-all focus-within:ring-2 focus-within:ring-opo-accent/50 focus-within:border-opo-accent">
<textarea id="user-input" rows="3" placeholder="请输入 OPO 相关问题，按 Enter 发送..."
class="w-full bg-transparent border-none text-gray-200 p-4 resize-none focus:ring-0 text-sm leading-6 placeholder-gray-500"></textarea>
<div class="flex justify-between items-center px-4 py-2 bg-black/20 border-t border-white/5">
<div class="flex gap-3 text-gray-400">
<button class="hover:text-opo-accent transition-colors tooltip" title="上传文件"><i class="fa-solid fa-paperclip"></i></button>
<button class="hover:text-opo-accent transition-colors"><i class="fa-solid fa-image"></i></button>
<button class="hover:text-opo-accent transition-colors"><i class="fa-solid fa-microphone"></i></button>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-gray-600">Enter 发送</span>
<button onclick="sendMessage()" class="bg-opo-accent hover:bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center transition-all shadow-lg shadow-blue-500/20 active:scale-95">
<i class="fa-regular fa-paper-plane text-xs"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-2 text-[10px] text-gray-600">
OPO AI 生成内容可能包含错误，医疗决策请以临床专家意见为准。
</div>
</div>
</main>
<!-- JavaScript 交互逻辑 -->
<script>
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const loadingIndicator = document.getElementById('loading-indicator');
// 自动滚动到底部
function scrollToBottom() {
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 初始化滚动
scrollToBottom();
// 监听回车发送
userInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// 发送消息逻辑
function sendMessage() {
const text = userInput.value.trim();
if (!text) return;
// 1. 添加用户消息
const userHTML = `
<div class="flex gap-4 max-w-5xl mx-auto flex-row-reverse animate-[fadeIn_0.3s_ease-out]">
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0 text-white shadow-lg">
<i class="fa-solid fa-user"></i>
</div>
<div class="flex flex-col gap-2 items-end max-w-[85%]">
<div class="text-sm text-gray-400 font-medium">Dr. Zhang</div>
<div class="bg-opo-accent p-4 rounded-2xl rounded-tr-none text-sm leading-relaxed text-white shadow-lg shadow-blue-900/30">
${text.replace(/\n/g, '<br>')}
</div>
</div>
</div>
`;
// 插入并清空输入
loadingIndicator.insertAdjacentHTML('beforebegin', userHTML);
userInput.value = '';
scrollToBottom();
// 2. 显示加载动画
loadingIndicator.classList.remove('hidden');
scrollToBottom();
// 3. 模拟 AI 回复 (延迟 1.5秒)
setTimeout(() => {
loadingIndicator.classList.add('hidden');
const botHTML = `
<div class="flex gap-4 max-w-5xl mx-auto animate-[fadeIn_0.5s_ease-out]">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 robot-glow p-1">
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=OPOBot" alt="AI" class="w-full h-full rounded-full bg-gray-900">
</div>
<div class="flex flex-col gap-2 max-w-[85%]">
<div class="text-sm text-gray-400 font-medium">OPO 智能助手</div>
<div class="glass-panel p-5 rounded-2xl rounded-tl-none text-sm leading-7 text-gray-200 shadow-xl">
<p>收到您关于 <strong>"${text}"</strong> 的问题。</p>
<p class="mt-2">正在检索 COTRS 数据库及相关法律法规...</p>
<div class="mt-3 p-3 bg-black/20 rounded border border-white/5 text-xs text-gray-400 font-mono">
> Analysing risk factors...<br>
> Accessing medical protocols...<br>
> Done.
</div>
<p class="mt-3">这是一个非常专业的领域。为了确保准确性，建议参考最新的《脑死亡判定标准与技术规范(2023版)》。以下是为您生成的简报...</p>
</div>
</div>
</div>
`;
chatContainer.insertAdjacentHTML('beforeend', botHTML);
scrollToBottom();
}, 1500);
}
// 添加简单的 FadeIn 动画配置
const style = document.createElement('style');
style.innerHTML = `
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
index.html
style.css
index.js
index.html