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

fix: 修复Agent头像显示和结果弹窗问题

Browse Source 
主要修复:
- 恢复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>
This commit is contained in:
Yep_Q
2025-09-29 20:12:57 +08:00
parent a884afc494
commit 0d96ffd429
991 changed files with 113654 additions and 1303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

672
web_frontend/web_result/order-classes/food/index.html Normal file
View File

@@ -0,0 +1,672 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中高端个性化轻食店铺经营方案 - AI Agent生成</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;
}
.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.agent-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.agent-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.agent-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.agent-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
position: relative;
}
.agent-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.agent-status {
position: absolute;
bottom: 5px;
right: 5px;
width: 20px;
height: 20px;
background: #10b981;
border: 3px solid white;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
.section-card {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f3f4f6;
}
.section-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 24px;
}
.timeline {
position: relative;
padding-left: 40px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: #e5e7eb;
}
.timeline-item {
position: relative;
margin-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -30px;
top: 5px;
width: 12px;
height: 12px;
background: #667eea;
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 0 4px #f3f4f6;
}
.ai-thinking {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
animation: thinking 1.5s ease-in-out infinite;
}
@keyframes thinking {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
.menu-card {
background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
}
.menu-card::after {
content: '🥗';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
opacity: 0.3;
}
.price-tag {
background: #ef4444;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
display: inline-block;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 英雄区域 -->
<section class="hero-section text-white py-20 relative">
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur px-4 py-2 rounded-full mb-4">
<span class="ai-thinking">
<i class="fas fa-robot mr-2"></i>
AI Agent 协作生成
</span>
</div>
<h1 class="text-5xl font-bold mb-4">中高端个性化轻食店铺</h1>
<h2 class="text-3xl font-light mb-6">经营管理完整方案</h2>
<p class="text-xl opacity-90 max-w-3xl mx-auto">
7位AI专家通过多轮协作，为您打造从市场调研到经营管理的全方位解决方案
</p>
</div>
</div>
</section>
<!-- AI专家团队 -->
<section class="container mx-auto px-4 py-12">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold mb-4">AI专家团队</h2>
<p class="text-gray-600">每位专家独立思考，协同工作，确保方案的专业性和完整性</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/餐饮市场调研专家.png" alt="市场调研专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">市场调研专家</h3>
<p class="text-xs text-gray-500 mt-2">市场分析 · 用户洞察</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/餐饮品牌设计专家.png" alt="品牌设计专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">品牌设计专家</h3>
<p class="text-xs text-gray-500 mt-2">品牌策略 · VI设计</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/菜品研发专家.png" alt="菜品研发专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">菜品研发专家</h3>
<p class="text-xs text-gray-500 mt-2">菜品创新 · 营养搭配</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/餐厅选址装修专家.png" alt="选址装修专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">选址装修专家</h3>
<p class="text-xs text-gray-500 mt-2">选址策略 · 空间设计</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/餐饮团队人员管理专家.png" alt="团队管理专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">团队管理专家</h3>
<p class="text-xs text-gray-500 mt-2">组织架构 · 人才培养</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/财务预算专家.png" alt="财务预算专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">财务预算专家</h3>
<p class="text-xs text-gray-500 mt-2">成本控制 · 盈利预测</p>
</div>
<div class="agent-card text-center">
<div class="agent-avatar">
<img src="/data/订单班文档资料/食品/agent头像/轻食店经营管理专家.png" alt="经营管理专家">
<div class="agent-status"></div>
</div>
<h3 class="font-semibold">经营管理专家</h3>
<p class="text-xs text-gray-500 mt-2">运营策略 · 业绩提升</p>
</div>
</div>
</section>
<!-- 方案内容 -->
<section class="container mx-auto px-4 py-12">
<!-- 市场调研分析 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-blue-100 text-blue-600">
<i class="fas fa-chart-line"></i>
</div>
<div>
<h3 class="text-2xl font-bold">市场调研分析</h3>
<p class="text-gray-600">深度洞察轻食市场机遇</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold mb-3">市场规模与增长</h4>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-green-500 mr-2">✓</span>
<span>轻食市场规模达500亿，年增长率25%</span>
</li>
<li class="flex items-start">
<span class="text-green-500 mr-2">✓</span>
<span>一二线城市渗透率仅15%，增长空间巨大</span>
</li>
<li class="flex items-start">
<span class="text-green-500 mr-2">✓</span>
<span>健康意识提升带动消费升级</span>
</li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-3">目标客群画像</h4>
<div class="bg-gray-50 rounded-lg p-4">
<div class="mb-2">
<span class="font-medium">年龄：</span> 25-40岁都市白领
</div>
<div class="mb-2">
<span class="font-medium">收入：</span> 月收入8000元以上
</div>
<div class="mb-2">
<span class="font-medium">特征：</span> 注重健康、追求品质生活
</div>
<div>
<span class="font-medium">痛点：</span> 缺乏个性化健康餐饮选择
</div>
</div>
</div>
</div>
</div>
<!-- 品牌设计方案 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-purple-100 text-purple-600">
<i class="fas fa-palette"></i>
</div>
<div>
<h3 class="text-2xl font-bold">品牌设计方案</h3>
<p class="text-gray-600">打造独特的品牌形象</p>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div>
<h4 class="font-semibold mb-3">品牌定位</h4>
<p class="text-gray-600">「轻享生活·悦享健康」</p>
<p class="text-sm text-gray-500 mt-2">
为追求健康生活方式的都市人群提供个性化、高品质的轻食体验
</p>
</div>
<div>
<h4 class="font-semibold mb-3">视觉识别</h4>
<div class="space-y-2">
<div class="flex items-center">
<div class="w-8 h-8 bg-green-400 rounded mr-2"></div>
<span class="text-sm">主色：清新绿</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-orange-300 rounded mr-2"></div>
<span class="text-sm">辅色：活力橙</span>
</div>
</div>
</div>
<div>
<h4 class="font-semibold mb-3">品牌理念</h4>
<ul class="space-y-1 text-sm">
<li>• 新鲜：食材每日配送</li>
<li>• 健康：营养科学搭配</li>
<li>• 个性：定制化服务</li>
<li>• 品质：精选优质食材</li>
</ul>
</div>
</div>
</div>
<!-- 菜品研发计划 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-green-100 text-green-600">
<i class="fas fa-utensils"></i>
</div>
<div>
<h3 class="text-2xl font-bold">菜品研发计划</h3>
<p class="text-gray-600">创新菜品满足多元需求</p>
</div>
</div>
<div class="space-y-4">
<div class="menu-card">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg">经典轻食系列</h4>
<p class="text-sm text-gray-700 mt-1">凯撒沙拉、藜麦饭、烤鸡胸肉</p>
</div>
<span class="price-tag">¥35-45</span>
</div>
</div>
<div class="menu-card">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg">创意融合系列</h4>
<p class="text-sm text-gray-700 mt-1">墨西哥卷、泰式沙拉、日式便当</p>
</div>
<span class="price-tag">¥40-55</span>
</div>
</div>
<div class="menu-card">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg">定制营养餐</h4>
<p class="text-sm text-gray-700 mt-1">根据个人需求定制，专业营养师配餐</p>
</div>
<span class="price-tag">¥50-80</span>
</div>
</div>
</div>
</div>
<!-- 选址与装修设计 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-indigo-100 text-indigo-600">
<i class="fas fa-map-marked-alt"></i>
</div>
<div>
<h3 class="text-2xl font-bold">选址与装修设计</h3>
<p class="text-gray-600">打造舒适用餐环境</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold mb-3">选址策略</h4>
<div class="space-y-3">
<div class="bg-gray-50 p-3 rounded">
<strong>首选区域：</strong>CBD商圈、高端写字楼
</div>
<div class="bg-gray-50 p-3 rounded">
<strong>面积要求：</strong>80-120平方米
</div>
<div class="bg-gray-50 p-3 rounded">
<strong>租金预算：</strong>200-300元/平方米/月
</div>
</div>
</div>
<div>
<h4 class="font-semibold mb-3">装修风格</h4>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-indigo-500 mr-2">◆</span>
<span>北欧简约风格，营造轻松氛围</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 mr-2">◆</span>
<span>开放式厨房，展示制作过程</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 mr-2">◆</span>
<span>绿植装饰，强化健康理念</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 mr-2">◆</span>
<span>舒适座椅，满足商务洽谈需求</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 财务预算规划 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-yellow-100 text-yellow-600">
<i class="fas fa-calculator"></i>
</div>
<div>
<h3 class="text-2xl font-bold">财务预算规划</h3>
<p class="text-gray-600">科学规划资金投入</p>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-4 rounded-lg">
<h4 class="font-semibold text-blue-900 mb-2">初始投资</h4>
<p class="text-3xl font-bold text-blue-600">80-120万</p>
<ul class="text-sm mt-2 space-y-1">
<li>装修：40万</li>
<li>设备：25万</li>
<li>加盟/品牌：15万</li>
<li>流动资金：20万</li>
</ul>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h4 class="font-semibold text-green-900 mb-2">月度运营</h4>
<p class="text-3xl font-bold text-green-600">25-35万</p>
<ul class="text-sm mt-2 space-y-1">
<li>租金：2.5万</li>
<li>人工：8万</li>
<li>食材：10万</li>
<li>其他：5万</li>
</ul>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-900 mb-2">预期回报</h4>
<p class="text-3xl font-bold text-purple-600">18个月</p>
<ul class="text-sm mt-2 space-y-1">
<li>日客流：150-200人</li>
<li>客单价：45元</li>
<li>毛利率：65%</li>
<li>净利率：20-25%</li>
</ul>
</div>
</div>
</div>
<!-- 实施时间线 -->
<div class="section-card">
<div class="section-header">
<div class="section-icon bg-red-100 text-red-600">
<i class="fas fa-clock"></i>
</div>
<div>
<h3 class="text-2xl font-bold">实施时间线</h3>
<p class="text-gray-600">3个月完成开业准备</p>
</div>
</div>
<div class="timeline">
<div class="timeline-item">
<h4 class="font-semibold">第1个月：筹备阶段</h4>
<p class="text-gray-600">选址确定、设计方案、办理证照</p>
</div>
<div class="timeline-item">
<h4 class="font-semibold">第2个月：建设阶段</h4>
<p class="text-gray-600">装修施工、设备采购、人员招聘</p>
</div>
<div class="timeline-item">
<h4 class="font-semibold">第3个月：试营业</h4>
<p class="text-gray-600">员工培训、试营业、营销推广</p>
</div>
<div class="timeline-item">
<h4 class="font-semibold">正式开业</h4>
<p class="text-gray-600">盛大开业、会员体系上线、持续优化</p>
</div>
</div>
</div>
</section>
<!-- AI协作说明 -->
<section class="bg-gradient-to-br from-purple-600 to-blue-600 text-white py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold mb-4">AI Agent 协作过程</h2>
<p class="text-xl opacity-90">7位专家如何协同工作</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
<div class="text-3xl mb-4">1️⃣</div>
<h3 class="text-xl font-semibold mb-2">独立分析</h3>
<p class="opacity-90">每位专家基于自身专业领域，独立分析项目需求，形成初步方案</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
<div class="text-3xl mb-4">2️⃣</div>
<h3 class="text-xl font-semibold mb-2">交叉验证</h3>
<p class="opacity-90">专家间相互审阅方案，确保各模块间的协调性和可行性</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
<div class="text-3xl mb-4">3️⃣</div>
<h3 class="text-xl font-semibold mb-2">整合优化</h3>
<p class="opacity-90">经营管理专家整合各方案，形成完整的经营管理体系</p>
</div>
</div>
</div>
</section>
<!-- 底部行动号召 -->
<section class="py-16">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">开启您的轻食创业之旅</h2>
<p class="text-xl text-gray-600 mb-8">
AI Agent 已为您准备好完整的经营方案，让创业更简单
</p>
<div class="flex justify-center space-x-4">
<button class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
下载完整方案
</button>
<button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition">
预约咨询
</button>
</div>
</div>
</section>
<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition opacity-0 invisible">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// 返回顶部功能
window.addEventListener('scroll', () => {
const backToTop = document.getElementById('backToTop');
if (window.scrollY > 300) {
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
document.getElementById('backToTop').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// AI思考动画
const thinkingElements = document.querySelectorAll('.ai-thinking');
thinkingElements.forEach(el => {
setInterval(() => {
const dots = ['', '.', '..', '...'];
const currentText = el.textContent;
const baseText = currentText.replace(/\.+$/, '');
const dotIndex = (dots.indexOf(currentText.slice(baseText.length)) + 1) % dots.length;
el.textContent = baseText + dots[dotIndex];
}, 500);
});
</script>
</body>
</html>