c3eb7125cc
详细说明: - 基于文旅订单班框架复制创建food-order-demo项目 - 修改端口配置为4174避免冲突 - 更新LandingPage为青莳轻食主题（绿色健康风格） - 重新定义7个食品行业专业Agent： * 市场研究专家：轻食市场分析、客群画像 * 营养配方师：营养成分配比、低卡高蛋白设计 * 供应链管理专家：有机食材供应、溯源体系 * 品牌策划师：品牌定位、店铺空间布局 * 财务分析师：投资预算、ROI分析 * 运营管理专家：运营流程、品控标准 * 食品创业导师：中央协调、方案整合 - 创建专用启动脚本start.sh - 验证系统可正常运行在端口4174 - 实现代码复用率90%，符合预期目标 影响文件: web_frontend/food-order-demo/ 技术栈: React 18 + TypeScript + Tailwind CSS + Zustand
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
|
||
- 所有开源项目贡献者
|
||
|
||
---
|
||
|
||
如有问题，请联系项目维护者。 |