0d96ffd429
主要修复: - 恢复Agent真实头像显示（替换emoji为实际图片） - 删除自动跳转到ResultPageV2的逻辑 - 修改ResultModal支持动态内容显示 - 根据不同订单班显示对应的方案信息 优化内容: - 重构Agent系统，每个订单班独立管理Agent配置 - 删除不需要的ResultPageV2组件 - handleViewDetails改为在新标签页打开 影响模块: - web_frontend/exhibition-demo/src/components/ResultModal.tsx - web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx - web_frontend/exhibition-demo/src/App.tsx - web_frontend/exhibition-demo/src/data/terminalSimulations/*.ts 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
258 lines
9.4 KiB
HTML
258 lines
9.4 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生成结果</title>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- 字体 -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<style>
|
||
* {
|
||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.loader {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 5px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
border-top-color: white;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.order-class-selector {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.class-card {
|
||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.class-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.class-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.class-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.wenlu-card {
|
||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||
color: white;
|
||
}
|
||
|
||
.food-card {
|
||
background: linear-gradient(135deg, #10b981 0%, #84cc16 100%);
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100">
|
||
<!-- 加载状态 -->
|
||
<div id="loading" class="loading-container hidden">
|
||
<div class="text-center">
|
||
<div class="loader mb-4"></div>
|
||
<p class="text-white text-xl">正在加载订单班方案...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容容器 -->
|
||
<div id="main-content">
|
||
<!-- 如果没有指定订单班，显示选择界面 -->
|
||
<div id="selector-container" class="min-h-screen flex items-center justify-center p-4">
|
||
<div class="order-class-selector">
|
||
<div class="text-center mb-10">
|
||
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
|
||
选择订单班查看AI生成方案
|
||
</h1>
|
||
<p class="text-gray-600 text-lg">
|
||
每个方案由多个AI Agent协作生成，展示AI在专业领域的应用能力
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<!-- 文旅订单班 -->
|
||
<div class="class-card wenlu-card" onclick="loadOrderClass('wenlu')">
|
||
<div class="mb-4">
|
||
<i class="fas fa-car text-4xl opacity-80"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold mb-3">文旅订单班</h2>
|
||
<h3 class="text-lg mb-4 opacity-90">2024长三角新能源汽车博览会</h3>
|
||
<div class="space-y-2 text-sm opacity-85">
|
||
<p>📍 会展策划完整方案</p>
|
||
<p>👥 6位AI专家协作</p>
|
||
<p>📊 从概览到风险控制全覆盖</p>
|
||
</div>
|
||
<div class="mt-6 inline-flex items-center">
|
||
<span class="text-sm">查看方案</span>
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 食品订单班 -->
|
||
<div class="class-card food-card" onclick="loadOrderClass('food')">
|
||
<div class="mb-4">
|
||
<i class="fas fa-utensils text-4xl opacity-80"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold mb-3">食品订单班</h2>
|
||
<h3 class="text-lg mb-4 opacity-90">中高端轻食店铺经营方案</h3>
|
||
<div class="space-y-2 text-sm opacity-85">
|
||
<p>🥗 轻食创业全流程指导</p>
|
||
<p>👥 7位AI专家协作</p>
|
||
<p>💰 从调研到运营管理全方位</p>
|
||
</div>
|
||
<div class="mt-6 inline-flex items-center">
|
||
<span class="text-sm">查看方案</span>
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更多订单班提示 -->
|
||
<div class="mt-10 text-center">
|
||
<p class="text-gray-500 text-sm">
|
||
更多订单班方案正在开发中...
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容展示容器 -->
|
||
<div id="content-container" class="hidden"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 检查URL参数
|
||
function checkUrlParams() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const orderClass = urlParams.get('class');
|
||
|
||
if (orderClass) {
|
||
loadOrderClass(orderClass);
|
||
}
|
||
}
|
||
|
||
// 加载指定的订单班
|
||
function loadOrderClass(className) {
|
||
// 显示加载状态
|
||
document.getElementById('loading').classList.remove('hidden');
|
||
document.getElementById('selector-container').classList.add('hidden');
|
||
|
||
// 更新URL
|
||
const newUrl = `${window.location.pathname}?class=${className}`;
|
||
window.history.pushState({ class: className }, '', newUrl);
|
||
|
||
// 根据订单班类型加载对应页面
|
||
setTimeout(() => {
|
||
let targetUrl = '';
|
||
|
||
switch(className) {
|
||
case 'wenlu':
|
||
targetUrl = '/index.html'; // 文旅订单班使用现有的index.html
|
||
break;
|
||
case 'food':
|
||
targetUrl = '/pages/food-result.html'; // 食品订单班新页面
|
||
break;
|
||
default:
|
||
alert('未找到对应的订单班方案');
|
||
document.getElementById('loading').classList.add('hidden');
|
||
document.getElementById('selector-container').classList.remove('hidden');
|
||
return;
|
||
}
|
||
|
||
// 直接跳转到对应页面
|
||
window.location.href = targetUrl;
|
||
}, 500);
|
||
}
|
||
|
||
// 处理浏览器后退按钮
|
||
window.addEventListener('popstate', (event) => {
|
||
if (event.state && event.state.class) {
|
||
loadOrderClass(event.state.class);
|
||
} else {
|
||
// 返回选择界面
|
||
document.getElementById('loading').classList.add('hidden');
|
||
document.getElementById('selector-container').classList.remove('hidden');
|
||
document.getElementById('content-container').classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// 页面加载时检查参数
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
checkUrlParams();
|
||
});
|
||
|
||
// 也可以通过iframe加载内容（备选方案）
|
||
function loadContentInIframe(className) {
|
||
const container = document.getElementById('content-container');
|
||
let iframeSrc = '';
|
||
|
||
switch(className) {
|
||
case 'wenlu':
|
||
iframeSrc = '/index.html';
|
||
break;
|
||
case 'food':
|
||
iframeSrc = '/pages/food-result.html';
|
||
break;
|
||
default:
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = `
|
||
<iframe src="${iframeSrc}"
|
||
style="width: 100%; height: 100vh; border: none;"
|
||
frameborder="0">
|
||
</iframe>
|
||
`;
|
||
|
||
container.classList.remove('hidden');
|
||
document.getElementById('loading').classList.add('hidden');
|
||
document.getElementById('selector-container').classList.add('hidden');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |