151 lines
3.8 KiB
Markdown
151 lines
3.8 KiB
Markdown
|
# 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
|
|||
|
|
|
|||
|
|
### 安装步骤
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 进入项目目录
|
|||
|
|
cd web_frontend/exhibition-demo
|
|||
|
|
|
|||
|
|
# 安装依赖（推荐使用pnpm）
|
|||
|
|
pnpm install
|
|||
|
|
# 或使用npm
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 启动开发服务器
|
|||
|
|
pnpm dev
|
|||
|
|
# 或
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
开发服务器将在 `http://localhost:5173` 启动
|
|||
|
|
|
|||
|
|
### 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 构建项目
|
|||
|
|
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` 中修改：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
controls: {
|
|||
|
|
speed: 1, // 1-5倍速
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 修改文字生成速度
|
|||
|
|
|
|||
|
|
在组件中调整 `speed` 参数（默认35字/秒）
|
|||
|
|
|
|||
|
|
## 🤝 贡献指南
|
|||
|
|
|
|||
|
|
欢迎提交Issue和Pull Request来改进项目。
|
|||
|
|
|
|||
|
|
## 📝 许可证
|
|||
|
|
|
|||
|
|
MIT License
|
|||
|
|
|
|||
|
|
## 🙏 致谢
|
|||
|
|
|
|||
|
|
- n8n Workflow Platform
|
|||
|
|
- DeepSeek AI
|
|||
|
|
- Google Gemini
|
|||
|
|
- 所有开源项目贡献者
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
如有问题，请联系项目维护者。
|