fix: 修复TypeScript配置错误并更新项目文档
详细说明: - 修复了@n8n/config包的TypeScript配置错误 - 移除了不存在的jest-expect-message类型引用 - 清理了所有TypeScript构建缓存 - 更新了可行性分析文档，添加了技术实施方案 - 更新了Agent prompt文档 - 添加了会展策划工作流文档 - 包含了n8n-chinese-translation子项目 - 添加了exhibition-demo展示系统框架
This commit is contained in:
Yep_Q
151
web_frontend/exhibition-demo/README.md
Normal file
151
web_frontend/exhibition-demo/README.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# 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
|
||||
- 所有开源项目贡献者
|
||||
|
||||
---
|
||||
|
||||
如有问题，请联系项目维护者。
|
||||
Reference in New Issue
Block a user