Agent-n8n/web_frontend/exhibition-demo

AI 会展策划系统 - 多Agent协同演示

🚀 项目概述

这是一个基于React构建的多Agent协同演示系统，展示了7个专业AI Agent如何协同工作，生成完整的会展策划方案。设计风格参考了字节跳动、Flowith、Raycast等现代化产品。

✨ 核心特性

• 7个专业Agent：信息检索、设计、财务预算、格式编辑、活动执行、营销宣传、中央协调
• 实时工作流可视化：动态展示Agent协作流程
• 打字机效果：30-40字/秒的文字生成动画
• 现代化UI设计：简洁、实用、年轻化的界面风格
• 完整演示流程：约3分钟完整展示策划方案生成过程

🛠 技术栈

• 框架: React 18 + TypeScript
• 样式: Tailwind CSS
• 动画: Framer Motion
• 状态管理: Zustand
• 构建工具: Vite

📦 安装与运行

前置要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 pnpm >= 6.0.0

安装步骤

# 进入项目目录
cd web_frontend/exhibition-demo

# 安装依赖（推荐使用pnpm）
pnpm install
# 或使用npm
npm install

# 启动开发服务器
pnpm dev
# 或
npm run dev

开发服务器将在 http://localhost:5173 启动

构建生产版本

# 构建项目
pnpm build
# 或
npm run build

# 预览构建结果
pnpm preview
# 或
npm run preview

📁 项目结构

exhibition-demo/
├── src/
│   ├── components/        # React组件
│   │   ├── AgentCard.tsx         # Agent卡片组件
│   │   ├── ContentGenerator.tsx   # 内容生成器
│   │   ├── ProgressBar.tsx       # 进度条
│   │   └── WorkflowVisualization.tsx  # 工作流可视化
│   ├── pages/            # 页面组件
│   │   ├── LandingPage.tsx       # 启动页
│   │   ├── WorkflowPage.tsx      # 工作流演示页
│   │   └── ResultPage.tsx        # 结果展示页
│   ├── store/            # 状态管理
│   │   └── demoStore.ts          # Zustand store
│   ├── styles/           # 样式文件
│   ├── utils/            # 工具函数
│   ├── App.tsx          # 主应用组件
│   ├── main.tsx         # 入口文件
│   └── index.css        # 全局样式
├── public/              # 静态资源
├── index.html           # HTML模板
├── package.json         # 项目配置
├── tailwind.config.js   # Tailwind配置
├── vite.config.ts       # Vite配置
└── tsconfig.json        # TypeScript配置

🎯 使用说明

1. 启动演示：访问首页，点击"开始演示"按钮
2. 观看流程：系统将自动展示Agent协作过程
3. 查看结果：演示完成后，可以浏览完整的策划方案
4. 控制选项：支持暂停/继续/重新开始

🎨 设计特点

• Glass Morphism：玻璃态效果，增强层次感
• 渐变色彩：蓝紫渐变主题，科技感十足
• 微动画：精致的过渡和交互动画
• 响应式布局：适配不同屏幕尺寸

📊 演示内容

演示案例为"2024长三角国际新能源汽车与智能交通产业博览会"，包含：

1. 策划案概述
2. 展会介绍与预期效果
3. 营销方案
4. 现场运营方案
5. 预算与收益分析
6. 风险评估与应急预案

🔧 配置说明

调整演示速度

在 src/store/demoStore.ts 中修改：

controls: {
  speed: 1, // 1-5倍速
  // ...
}

修改文字生成速度

在组件中调整 speed 参数（默认35字/秒）

🤝 贡献指南

欢迎提交Issue和Pull Request来改进项目。

📝 许可证

MIT License

🙏 致谢

• n8n Workflow Platform
• DeepSeek AI
• Google Gemini
• 所有开源项目贡献者

---

如有问题，请联系项目维护者。