Files
Agent-n8n/web_frontend/web_result/pages/overview.html
Yep_Q c0644d4bea feat: 完善AI会展策划多Agent协同演示系统
功能实现:
-  添加需求输入弹窗,支持新能源汽车展模板快速填充
-  实现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>
2025-09-08 12:23:45 +08:00

425 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<style>
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.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%;
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 9px;
top: 40px;
height: calc(100% - 40px);
width: 2px;
background: #e5e7eb;
}
.timeline-item:last-child::before {
display: none;
}
.timeline-dot {
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 3px solid #667eea;
}
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.slide-in-right {
animation: slideInRight 0.6s ease-out;
}
@keyframes slideInLeft {
from { transform: translateX(-50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
</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 text-gray-700 hover:text-purple-600">首页</a>
<a href="overview.html" class="nav-link active text-gray-700 hover:text-purple-600">策划概述</a>
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
</div>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="bg-gradient-to-r from-purple-600 to-blue-600 text-white pt-24 pb-12">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-5xl font-bold mb-4">策划概述</h1>
<p class="text-xl opacity-90">全面了解展会策划背景、目标与核心价值</p>
</div>
</section>
<!-- Background Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="slide-in-left">
<h2 class="text-3xl font-bold text-gray-800 mb-6">策划背景</h2>
<div class="space-y-4 text-gray-600">
<p>
在全球碳中和目标的大背景下新能源汽车产业正经历前所未有的发展机遇。中国作为全球最大的新能源汽车市场2023年产销量均突破900万辆同比增长超过35%。
</p>
<p>
长三角地区作为中国经济最发达、创新能力最强的区域之一,在新能源汽车产业发展中占据举足轻重的地位。该地区聚集了特斯拉、上汽、蔚来、理想、小鹏等众多知名车企,以及宁德时代、华为等核心零部件供应商。
</p>
<div class="bg-purple-50 border-l-4 border-purple-600 p-4 rounded">
<p class="font-semibold mb-2">核心数据:</p>
<ul class="space-y-2">
<li>• 长三角新能源汽车产量占全国40%以上</li>
<li>• 区域内新能源汽车产业链企业超过3000家</li>
<li>• 2023年产值突破8000亿元</li>
<li>• 智能网联汽车测试里程超过500万公里</li>
</ul>
</div>
</div>
</div>
<div class="slide-in-right">
<div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-4">产业发展机遇</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">1</div>
<div class="ml-3">
<h4 class="font-semibold">政策支持力度空前</h4>
<p class="text-sm text-gray-600">国家及地方政府出台多项扶持政策,推动产业快速发展</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">2</div>
<div class="ml-3">
<h4 class="font-semibold">技术创新加速突破</h4>
<p class="text-sm text-gray-600">电池技术、自动驾驶、车联网等关键技术不断革新</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">3</div>
<div class="ml-3">
<h4 class="font-semibold">市场需求持续增长</h4>
<p class="text-sm text-gray-600">消费者对新能源汽车接受度不断提高,市场潜力巨大</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">4</div>
<div class="ml-3">
<h4 class="font-semibold">产业链日趋完善</h4>
<p class="text-sm text-gray-600">从研发到制造,从销售到服务,产业生态系统不断成熟</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Objectives Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl 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="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-2v10H6V5z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">品牌建设</h3>
<p class="text-gray-600">打造长三角地区新能源汽车与智能交通领域第一展会品牌,成为行业风向标</p>
<div class="mt-4 pt-4 border-t">
<ul class="text-sm text-gray-500 space-y-1">
<li>• 品牌知名度提升50%</li>
<li>• 媒体曝光量超1亿次</li>
<li>• 行业认可度达90%</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">商业价值</h3>
<p class="text-gray-600">吸引300家优质展商参展促进产业链上下游合作实现商业价值最大化</p>
<div class="mt-4 pt-4 border-t">
<ul class="text-sm text-gray-500 space-y-1">
<li>• 现场成交额超10亿元</li>
<li>• 意向订单8亿元</li>
<li>• 投资回报率33.3%</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">行业推动</h3>
<p class="text-gray-600">促进技术创新和产业升级,推动新能源汽车产业高质量发展</p>
<div class="mt-4 pt-4 border-t">
<ul class="text-sm text-gray-500 space-y-1">
<li>• 发布行业白皮书2份</li>
<li>• 专业论坛20场</li>
<li>• 技术成果发布50项</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">社会责任</h3>
<p class="text-gray-600">推广绿色出行理念,助力碳中和目标实现,促进可持续发展</p>
<div class="mt-4 pt-4 border-t">
<ul class="text-sm text-gray-500 space-y-1">
<li>• 碳减排宣传覆盖10万人</li>
<li>• 绿色出行体验5万人次</li>
<li>• 环保倡议签名3万人</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Policy Support Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">政策依据</h2>
<div class="max-w-4xl mx-auto">
<div class="space-y-6">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">《新能源汽车产业发展规划2021-2035年</h3>
<p class="text-gray-600 mb-3">国务院办公厅发布,明确了新能源汽车产业发展的指导思想、基本原则和发展愿景。</p>
<div class="bg-white rounded p-3">
<p class="text-sm text-gray-500">
<strong>核心目标:</strong>到2025年新能源汽车新车销售量达到汽车新车销售总量的20%左右到2035年纯电动汽车成为新销售车辆的主流。
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">《上海市加快新能源汽车产业发展实施计划》</h3>
<p class="text-gray-600 mb-3">上海市人民政府印发,提出打造国际新能源汽车发展高地的具体措施。</p>
<div class="bg-white rounded p-3">
<p class="text-sm text-gray-500">
<strong>发展目标:</strong>到2025年上海新能源汽车年产量超过120万辆产值突破3500亿元打造3-5家具有国际竞争力的整车企业。
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">《长三角地区新能源汽车产业链协同发展规划》</h3>
<p class="text-gray-600 mb-3">长三角一体化示范区执委会发布,推动区域产业协同发展。</p>
<div class="bg-white rounded p-3">
<p class="text-sm text-gray-500">
<strong>协同重点:</strong>建立跨区域产业协作机制,共建新能源汽车产业创新平台,推动充电基础设施互联互通。
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">《智能网联汽车道路测试与示范应用管理规范》</h3>
<p class="text-gray-600 mb-3">工业和信息化部、公安部、交通运输部联合发布,规范智能网联汽车测试与应用。</p>
<div class="bg-white rounded p-3">
<p class="text-sm text-gray-500">
<strong>示范应用:</strong>在长三角地区建设5个国家级智能网联汽车测试示范区累计开放测试道路超过1000公里。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Market Analysis -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">市场分析</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-purple-600">市场规模</h3>
<div class="space-y-3">
<div class="flex justify-between items-center py-2 border-b">
<span class="text-gray-600">2023年销量</span>
<span class="font-bold">949.5万辆</span>
</div>
<div class="flex justify-between items-center py-2 border-b">
<span class="text-gray-600">同比增长</span>
<span class="font-bold text-green-600">+37.9%</span>
</div>
<div class="flex justify-between items-center py-2 border-b">
<span class="text-gray-600">市场渗透率</span>
<span class="font-bold">31.6%</span>
</div>
<div class="flex justify-between items-center py-2">
<span class="text-gray-600">2025年预测</span>
<span class="font-bold">1500万辆</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-purple-600">产业链分布</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-24 text-sm text-gray-600">整车制造</div>
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
<div class="bg-purple-600 h-4 rounded-full" style="width: 85%"></div>
</div>
<span class="ml-2 text-sm font-bold">85家</span>
</div>
<div class="flex items-center">
<div class="w-24 text-sm text-gray-600">电池电机</div>
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
<div class="bg-purple-600 h-4 rounded-full" style="width: 70%"></div>
</div>
<span class="ml-2 text-sm font-bold">156家</span>
</div>
<div class="flex items-center">
<div class="w-24 text-sm text-gray-600">智能网联</div>
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
<div class="bg-purple-600 h-4 rounded-full" style="width: 60%"></div>
</div>
<span class="ml-2 text-sm font-bold">234家</span>
</div>
<div class="flex items-center">
<div class="w-24 text-sm text-gray-600">充电设施</div>
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
<div class="bg-purple-600 h-4 rounded-full" style="width: 50%"></div>
</div>
<span class="ml-2 text-sm font-bold">189家</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-purple-600">展会需求调研</h3>
<div class="space-y-3">
<div class="bg-green-50 rounded-lg p-3">
<div class="flex items-center justify-between mb-1">
<span class="text-sm text-gray-600">有参展意向</span>
<span class="font-bold text-green-600">89%</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 89%"></div>
</div>
</div>
<div class="bg-blue-50 rounded-lg p-3">
<div class="flex items-center justify-between mb-1">
<span class="text-sm text-gray-600">需要B2B对接</span>
<span class="font-bold text-blue-600">76%</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 76%"></div>
</div>
</div>
<div class="bg-purple-50 rounded-lg p-3">
<div class="flex items-center justify-between mb-1">
<span class="text-sm text-gray-600">关注技术交流</span>
<span class="font-bold text-purple-600">82%</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 82%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">了解更多展会详情</h2>
<p class="text-xl mb-8 opacity-90">深入了解展会规划、参展范围和预期效果</p>
<a href="exhibition.html" class="inline-block bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
查看展会介绍 →
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="text-center text-sm text-gray-400">
<p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>