Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善AI会展策划多Agent协同演示系统

Browse Source 
功能实现:
- ✨ 添加需求输入弹窗，支持新能源汽车展模板快速填充
- ✨ 实现7个AI Agent完整执行序列，包含详细的终端输出
- ✨ 添加图片生成过程展示，支持实际图片预览
- ✨ 实现结果查看弹窗，展示生成统计和内容章节
- ✨ 添加图片骨架屏loading动画，优化加载体验

技术优化:
- 🎨 实现真实的进度条卡顿效果，模拟实际加载过程
- 🎨 优化终端滚动和内容显示，支持多种输出类型
- 🎨 添加Agent头像显示和执行状态指示
- 🎨 实现图片延迟加载，确保执行流程连贯
- 🎨 简化骨架屏动画，提升真实感

文件修改:
- web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx
- web_frontend/exhibition-demo/src/components/RequirementModal.tsx
- web_frontend/exhibition-demo/src/components/ResultModal.tsx
- web_frontend/exhibition-demo/public/data/ (添加展会图片资源)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-09-08 12:23:45 +08:00
parent d6f48d6d14
commit c0644d4bea
43 changed files with 2366 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
web_frontend/web_result/index.html Normal file
View File

@@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2024长三角国际新能源汽车与智能交通产业博览会</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<style>
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #667eea;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.fade-in {
animation: fadeIn 0.8s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
</svg>
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="nav-link active text-gray-700 hover:text-purple-600">首页</a>
<a href="pages/overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
<a href="pages/exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
<a href="pages/marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
<a href="pages/operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
<a href="pages/budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
<a href="pages/risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
</div>
<button class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white pt-24 pb-20">
<div class="container mx-auto px-6">
<div class="fade-in">
<h1 class="text-5xl md:text-6xl font-bold mb-6">
智行未来，绿动长三角
</h1>
<h2 class="text-2xl md:text-3xl mb-8 opacity-90">
2024长三角国际新能源汽车与智能交通产业博览会
</h2>
<div class="flex flex-wrap gap-4 mb-12">
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
<span class="font-semibold">📅 时间：</span>2024年9月12日-15日
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
<span class="font-semibold">📍 地点：</span>国家会展中心（上海）
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
<span class="font-semibold">🏢 规模：</span>50,000平方米
</div>
</div>
<div class="flex gap-4">
<a href="pages/overview.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
了解详情
</a>
<a href="#highlights" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
展会亮点
</a>
</div>
</div>
</div>
</section>
<!-- Key Stats Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="text-center fade-in">
<div class="text-4xl font-bold text-purple-600 mb-2">350+</div>
<div class="text-gray-600">参展企业</div>
</div>
<div class="text-center fade-in">
<div class="text-4xl font-bold text-purple-600 mb-2">50,000+</div>
<div class="text-gray-600">预计观众</div>
</div>
<div class="text-center fade-in">
<div class="text-4xl font-bold text-purple-600 mb-2">10亿+</div>
<div class="text-gray-600">预计成交额</div>
</div>
<div class="text-center fade-in">
<div class="text-4xl font-bold text-purple-600 mb-2">20+</div>
<div class="text-gray-600">专业论坛</div>
</div>
</div>
</div>
</section>
<!-- Highlights Section -->
<section id="highlights" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展会亮点</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
<div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-600"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">全产业链展示</h3>
<p class="text-gray-600 mb-4">
涵盖整车制造、核心零部件、充电设施、智能网联等全产业链环节，打造一站式采购平台。
</p>
<a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800">
了解更多 →
</a>
</div>
</div>
<!-- Card 2 -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
<div class="h-48 bg-gradient-to-br from-green-500 to-emerald-600"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">创新技术体验</h3>
<p class="text-gray-600 mb-4">
设置自动驾驶体验区、智能交通演示区，让观众亲身体验最新科技成果。
</p>
<a href="pages/operation.html" class="text-purple-600 font-semibold hover:text-purple-800">
了解更多 →
</a>
</div>
</div>
<!-- Card 3 -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
<div class="h-48 bg-gradient-to-br from-purple-500 to-pink-600"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">高端论坛峰会</h3>
<p class="text-gray-600 mb-4">
汇聚行业领袖、专家学者，探讨产业发展趋势，发布权威研究报告。
</p>
<a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800">
了解更多 →
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Exhibition Areas -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展区规划</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">整车展示区</h3>
<p class="text-gray-600 text-sm">20,000平方米</p>
</div>
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">核心零部件区</h3>
<p class="text-gray-600 text-sm">15,000平方米</p>
</div>
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">智能交通区</h3>
<p class="text-gray-600 text-sm">10,000平方米</p>
</div>
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">体验互动区</h3>
<p class="text-gray-600 text-sm">5,000平方米</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">立即参与，共创绿色出行未来</h2>
<p class="text-xl mb-8 opacity-90">加入我们，共同推动新能源汽车产业发展</p>
<div class="flex justify-center gap-4">
<a href="pages/exhibition.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
参展申请
</a>
<a href="pages/marketing.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
观众预登记
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">关于展会</h3>
<p class="text-gray-400 text-sm">
长三角地区最具影响力的新能源汽车与智能交通产业盛会
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="pages/overview.html" class="hover:text-white">策划概述</a></li>
<li><a href="pages/exhibition.html" class="hover:text-white">展会介绍</a></li>
<li><a href="pages/marketing.html" class="hover:text-white">营销方案</a></li>
<li><a href="pages/operation.html" class="hover:text-white">现场运营</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">联系方式</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li>📍 上海市青浦区崧泽大道333号</li>
<li>📞 021-12345678</li>
<li>✉️ info@greenmobility2024.com</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
<span>微信</span>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
<span>微博</span>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
<p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>