feat: 添加交通物流、智能制造、智能开发终端模拟并优化食品订单班
主要更新: - 新增3个订单班终端模拟数据 (交通物流、智能制造、智能开发) - 交通物流: 图片重命名(9张UUID图片→描述性中文名) - 智能制造: 图片重命名(7张UUID图片→描述性中文名) - 食品订单班: 完成React应用架构和设计系统 - 新增4个Serena记忆文档 (终端模拟开发指南、订单班命名规范等) - 优化模态框和工作流页面交互逻辑 文件变更: - 新增: transportation.ts, intelligentManufacturing.ts, developer.ts - 新增: 食品订单班完整React应用 (Vite + TypeScript + Tailwind) - 修改: RequirementModal.tsx, ResultModal.tsx, WorkflowPageV4.tsx - 图片: 交通物流9张 + 智能制造7张重命名为中文描述性名称
This commit is contained in:
Yep_Q
@@ -82,7 +82,15 @@
|
||||
"Bash(do echo \"=== $file.ts ===\")",
|
||||
"Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v1.html)",
|
||||
"Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v2.html)",
|
||||
"Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v3.html)"
|
||||
"Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v3.html)",
|
||||
"Bash(npm create:*)",
|
||||
"Bash(npx tailwindcss init:*)",
|
||||
"Bash(./node_modules/.bin/tailwindcss:*)",
|
||||
"Bash(npm run dev:*)",
|
||||
"Bash(sed:*)",
|
||||
"Bash(paste:*)",
|
||||
"Bash(do)",
|
||||
"Bash(do echo \"=== $order - Agent头像 ===\" ls -1 \"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/$order/agent头像/\")"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": [],
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
# 智能制造订单班终端模拟创建记录
|
||||
|
||||
## 创建时间
|
||||
2025-10-02
|
||||
|
||||
## 项目背景
|
||||
智能制造订单班主题:**物流输送线节拍优化的PLC与机器人联合调试**
|
||||
核心技术:PLC控制 + 工业机器人 + Profinet通信 + 节拍优化
|
||||
|
||||
## Agent配置(4个工业自动化专家)
|
||||
|
||||
### Agent列表
|
||||
1. **自动化控制工程师** (`manufacturing_control_engineer`)
|
||||
- 职责:系统架构与控制逻辑设计
|
||||
- 头像:`/data/订单班文档资料/智能制造/agent头像/自动化控制工程师.jpg`
|
||||
- 工作内容:
|
||||
- 整体控制逻辑设计(6大模块)
|
||||
- 设备选型建议(西门子S7-1500 + ABB IRB 2600)
|
||||
- 节拍优化策略(三条件联锁同步)
|
||||
- 系统架构文档编制
|
||||
|
||||
2. **PLC工程师** (`manufacturing_plc_engineer`)
|
||||
- 职责:PLC编程与梯形图开发
|
||||
- 头像:`/data/订单班文档资料/智能制造/agent头像/PLC工程师.jpg`
|
||||
- 工作内容:
|
||||
- I/O点位分配(输入11点+输出6点)
|
||||
- 梯形图程序编制(6个网络)
|
||||
- 安全联锁逻辑(五合一联锁)
|
||||
- TIA Portal项目配置
|
||||
|
||||
3. **机器人调试工程师** (`manufacturing_robot_engineer`)
|
||||
- 职责:RAPID编程与机器人调试
|
||||
- 头像:`/data/订单班文档资料/智能制造/agent头像/机器人调试工程师.jpg`
|
||||
- 工作内容:
|
||||
- I/O信号映射(DI3+DO3)
|
||||
- RAPID程序编写(主循环+故障陷阱)
|
||||
- 点位定义(Home/Pick/Drop)
|
||||
- 握手时序协同
|
||||
|
||||
4. **数据采集自动化技术员** (`manufacturing_data_technician`)
|
||||
- 职责:I/O配置与通信调试
|
||||
- 头像:`/data/订单班文档资料/智能制造/agent头像/数据采集自动化技术员.jpg`
|
||||
- 工作内容:
|
||||
- Profinet网络配置(Controller ↔ Device)
|
||||
- GSDML文件导入与地址映射
|
||||
- 系统联调测试(通信/握手/节拍)
|
||||
- 数据记录与追溯
|
||||
|
||||
## 图片资源分析
|
||||
|
||||
### 图片清单(7张,已全部重命名为描述性名称)
|
||||
1. **汽车物流产线运输图.jpg** - 汽车零部件物流产线运输场景
|
||||
2. **传送带上的汽车零部件.jpg** - 输送带上的零部件等待机器人抓取
|
||||
3. **汽车零部件展示.jpg** - 待分拣的汽车零部件展示
|
||||
4. **PLC控制器.jpg** - 西门子 S7-1500 PLC控制器
|
||||
5. **工业机器人.jpg** - ABB IRB 2600 六轴工业机器人
|
||||
6. **通信程序示意图.jpg** - PLC与机器人Profinet通信架构
|
||||
7. **Mermaid流程图.jpg** - 系统控制流程图
|
||||
|
||||
### 图片使用策略
|
||||
- 自动化控制工程师 → 汽车物流产线运输图 + 汽车零部件展示
|
||||
- PLC工程师 → PLC控制器 + Mermaid流程图
|
||||
- 机器人调试工程师 → 工业机器人 + 传送带上的汽车零部件
|
||||
- 数据采集自动化技术员 → 通信程序示意图
|
||||
|
||||
## 内容创作策略
|
||||
|
||||
### 1. 启动序列(15条)
|
||||
重点营造**工业自动化系统**的专业感:
|
||||
- 初始化多Agent协作框架
|
||||
- 加载知识库:PLC控制/工业机器人/Profinet通信/节拍优化
|
||||
- 连接工业设备:西门子S7-1500/ABB IRB 2600/输送带/传感器网络
|
||||
- 检测需求:汽车零部件自动分拣
|
||||
- 技术挑战:PLC-机器人握手协议 + 节拍≥3600件/h
|
||||
|
||||
### 2. Agent输出序列(4个Agent)
|
||||
|
||||
#### Agent 1: 自动化控制工程师(系统架构设计)
|
||||
- 系统组成:输送带+PLC+机器人+通信协议
|
||||
- 6大控制逻辑模块:启停联锁/输送带控制/零件就位/启动允许/动作反馈/故障复位
|
||||
- 节拍优化策略:三条件联锁同步(RobotReady+PartReady+StartAllow)
|
||||
- 目标节拍:≥3600件/h(单件周期≤1秒)
|
||||
- 图片:汽车物流产线运输图 + 汽车零部件展示
|
||||
|
||||
#### Agent 2: PLC工程师(PLC编程与梯形图)
|
||||
- I/O分配表:输入11点(按钮/传感器/机器人反馈)+输出6点(电机/指示灯/握手信号)
|
||||
- 梯形图程序:6个网络(运行允许/输送带/PartReady/StartAllow/完成处理/报警复位)
|
||||
- 安全联锁逻辑:五合一联锁(停止+急停+安全门+过载+机器人故障)
|
||||
- 图片:PLC控制器 + Mermaid流程图
|
||||
|
||||
#### Agent 3: 机器人调试工程师(RAPID编程)
|
||||
- 机器人参数:ABB IRB 2600(12-20kg负载,1.65m半径,±0.04mm精度)
|
||||
- I/O信号映射:输入DI3(StartAllow/PartReady/PLC_Reset)+输出DO3(RobotReady/PickDone/RobotFault)
|
||||
- RAPID程序结构:初始化→Home位→循环(等待条件→取件→放置→完成反馈→返回)
|
||||
- 握手时序协同:PartReady+StartAllow → 抓取动作 → PickDone脉冲 → PLC清握手续行
|
||||
- 图片:工业机器人 + 传送带上的汽车零部件
|
||||
|
||||
#### Agent 4: 数据采集自动化技术员(通信调试)
|
||||
- Profinet网络架构:PLC S7-1500(Controller主站)+ABB IRC5(Device从站),循环周期10ms
|
||||
- TIA Portal配置:导入GSDML→添加Device→映射I/O地址→配置IP→下载组态
|
||||
- 系统联调测试:通信链路(绿灯连接正常)+握手逻辑验证+节拍性能测试
|
||||
- 实测节拍:3789件/h(超出目标5.3%),单件周期0.95s,同步误差±15ms
|
||||
- 安全逻辑验证:急停/安全门/过载/复位流程测试全部通过
|
||||
- 图片:通信程序示意图
|
||||
|
||||
### 3. 完成序列(30+条)
|
||||
总结项目核心价值:
|
||||
- 系统核心指标(5条):实测节拍3789件/h,单件周期0.95s,定位精度±0.04mm,同步误差±15ms,通信周期10ms
|
||||
- 技术架构亮点(5条):PLC主控/工业机器人/Profinet通信/梯形图+RAPID/五合一联锁
|
||||
- 节拍优化策略(4条):三条件联锁/定位即停/完成信号续行/速度匹配机制
|
||||
- 安全保护机制(4条):故障优先级/联锁响应时间<50ms/报警与复位/防呆设计
|
||||
- 交付物清单(7项):PLC程序/Robot程序/Profinet配置/I/O表/流程图/调试报告/操作手册
|
||||
- 技术创新点(4条):Profinet高速通信/智能握手协议/定位即停技术/故障自恢复
|
||||
|
||||
## 特殊内容处理
|
||||
|
||||
### 1. 工业自动化领域特色
|
||||
- **技术指标量化**:节拍(3789件/h),周期(0.95s),精度(±0.04mm),时延(±15ms)
|
||||
- **I/O配置细节**:输入11点详细列举,输出6点用途说明,握手信号映射关系
|
||||
- **梯形图逻辑展示**:6个网络的功能说明,安全联锁的五合一逻辑
|
||||
- **RAPID程序结构**:主循环WHILE结构,复位检测,握手等待,取放流程,完成反馈
|
||||
|
||||
### 2. Profinet通信配置
|
||||
- **网络架构**:PLC作为Controller主站,Robot作为Device从站
|
||||
- **循环周期**:10ms高速I/O更新,数据帧6字节输出+3字节输入
|
||||
- **配置流程**:导入GSDML→添加Device→映射I/O→配置IP→下载组态
|
||||
- **通信诊断**:绿灯连接正常,无通信错误,循环更新正常
|
||||
|
||||
### 3. 握手协议时序
|
||||
- **三条件联锁**:RobotReady(机器人就绪)+PartReady(零件就位)+StartAllow(启动允许)
|
||||
- **完成反馈**:PickDone脉冲0.2s → PLC清PartReady/StartAllow → 输送带重启
|
||||
- **复位机制**:PLC_Reset信号 → Robot执行ResetErrors → 清除故障 → 回Home位
|
||||
|
||||
### 4. 节拍优化展示
|
||||
- **目标节拍**:≥3600件/h(单件周期≤1秒)
|
||||
- **实测节拍**:3789件/h(超出目标5.3%)
|
||||
- **单件周期**:0.95s(取件0.3s+放置0.4s+返回0.25s)
|
||||
- **同步误差**:±15ms(握手时延控制良好)
|
||||
|
||||
## 文档特点分析
|
||||
|
||||
### 技术深度
|
||||
这是一个**高度技术化**的订单班,文档包含:
|
||||
- 完整的I/O分配表(输入11点+输出6点)
|
||||
- 详细的梯形图程序(6个网络,含安全联锁逻辑)
|
||||
- 完整的RAPID程序(主循环+故障陷阱+I/O映射)
|
||||
- Profinet通信配置流程(GSDML导入+地址映射)
|
||||
- 系统联调测试数据(通信/握手/节拍性能验证)
|
||||
|
||||
### 与能源订单班的相似性
|
||||
两者都属于**工业自动化**领域,但侧重点不同:
|
||||
- **能源订单班**:深度学习AOI检测 + PLC控制 + 机器人分拣 + MES追溯
|
||||
- **智能制造订单班**:PLC-Robot握手协议 + 节拍优化 + Profinet通信 + 安全联锁
|
||||
|
||||
### 差异化定位
|
||||
- **能源订单班**:强调**深度学习视觉检测**(Cognex ViDi缺陷分类7类)
|
||||
- **智能制造订单班**:强调**PLC-Robot协同**(握手时序+节拍同步优化)
|
||||
|
||||
## Agent头像文件与提示词文件一致性
|
||||
|
||||
**Agent_prompt文件(4个):**
|
||||
1. 自动化控制工程师.md ✓
|
||||
2. PLC工程师.md ✓
|
||||
3. 机器人调试工程师.md ✓
|
||||
4. 数据采集自动化技术员.md ✓
|
||||
|
||||
**agent头像文件(4个):**
|
||||
1. 自动化控制工程师.jpg ✓
|
||||
2. PLC工程师.jpg ✓
|
||||
3. 机器人调试工程师.jpg ✓
|
||||
4. 数据采集自动化技术员.jpg ✓
|
||||
|
||||
**完全一致,无缺失!**
|
||||
|
||||
## 创作心得
|
||||
|
||||
### 1. 工业自动化内容呈现策略
|
||||
- 强调**技术指标**(节拍/精度/周期)而非情感描述
|
||||
- 展示**系统架构**(PLC/Robot/通信/安全)
|
||||
- 突出**协同流程**(握手协议/时序同步/节拍优化)
|
||||
- 体现**安全联锁**(五合一联锁/故障优先/复位机制)
|
||||
|
||||
### 2. PLC与机器人协同重点
|
||||
- **三条件联锁同步**:RobotReady+PartReady+StartAllow缺一不可
|
||||
- **握手时序控制**:PartReady零件就位→StartAllow启动允许→PickDone完成反馈
|
||||
- **节拍匹配机制**:输送带速度 = 机器人周期 × 零件间距
|
||||
- **故障处理逻辑**:五合一联锁→报警锁存→复位清除→重新启动
|
||||
|
||||
### 3. 图片使用策略
|
||||
- 按照**工作流程顺序**分配图片给Agent
|
||||
- 自动化控制工程师 → 产线场景图 + 零部件展示
|
||||
- PLC工程师 → PLC控制器 + 流程图
|
||||
- 机器人调试工程师 → 工业机器人 + 输送带场景
|
||||
- 数据采集技术员 → 通信架构图
|
||||
|
||||
### 4. 内容层次设计
|
||||
- **启动序列**:系统初始化,连接工业设备,检测需求
|
||||
- **Agent序列**:系统架构(控制工程师)→PLC编程(PLC工程师)→Robot编程(机器人工程师)→通信调试(数据采集技术员)
|
||||
- **完成序列**:总结指标、架构亮点、优化策略、安全机制、交付物、创新点
|
||||
|
||||
## 与能源订单班对比分析
|
||||
|
||||
### 相同点(都是工业自动化)
|
||||
1. **设备选型**:都包含西门子PLC + ABB机器人
|
||||
2. **通信协议**:都使用Profinet通信
|
||||
3. **控制语言**:都是梯形图(PLC) + RAPID(Robot)
|
||||
4. **I/O配置**:都有详细的I/O分配表
|
||||
5. **握手机制**:都有PLC-Robot握手协议
|
||||
|
||||
### 不同点
|
||||
| 对比项 | 能源订单班 | 智能制造订单班 |
|
||||
|-------|----------|--------------|
|
||||
| **应用场景** | 光伏电池片AOI检测与分拣 | 汽车零部件物流输送线分拣 |
|
||||
| **核心技术** | 深度学习AOI检测(Cognex ViDi) | PLC-Robot握手协议+节拍优化 |
|
||||
| **技术亮点** | 7类缺陷识别,推理≤300ms,漏检≤0.3% | 三条件联锁同步,节拍3789件/h,误差±15ms |
|
||||
| **Agent数量** | 4个(PLC/视觉工程师/视觉技术员/机器人) | 4个(控制工程师/PLC/机器人/数据采集) |
|
||||
| **视觉检测** | ✓ Cognex In-Sight D900深度学习相机 | ✗ 仅有光电传感器定位 |
|
||||
| **分拣逻辑** | ViDi分类结果(OK/RW/NG/UNCERTAIN) | 固定分拣仓位(统一放置) |
|
||||
| **质量追溯** | MES系统上报(批次号/片ID/缺陷图像) | 数据记录(累计数量/故障代码/节拍时间) |
|
||||
| **降级模式** | 相机异常→人工复判模式 | 故障停机→复位后重启 |
|
||||
|
||||
### 技术深度对比
|
||||
- **能源订单班**:视觉检测技术深度更高(深度学习模型训练/缺陷库标注/召回率调优)
|
||||
- **智能制造订单班**:PLC-Robot协同技术深度更高(握手时序/节拍同步/三条件联锁)
|
||||
|
||||
## 文件位置
|
||||
- 终端模拟文件:`web_frontend/exhibition-demo/src/data/terminalSimulations/intelligentManufacturing.ts`
|
||||
- 注册到index.ts:`manufacturing: intelligentManufacturingSimulation`
|
||||
|
||||
## 后续优化建议
|
||||
1. 可考虑增加"系统集成工程师"Agent,负责Profinet配置与联调验收
|
||||
2. 可增加"安全工程师"Agent,负责安全联锁逻辑设计与风险评估
|
||||
3. 可增加实际测试视频或动图,展示输送带与机器人协同运行效果
|
||||
4. 可增加"异常场景"的动态演示(如急停触发→系统停机→复位重启)
|
||||
|
||||
## 图片重命名经验
|
||||
本次图片文件名从通用哈希名重命名为描述性名称:
|
||||
- `Whisk_3b337cf3682a17e91fa4f9579e54c305dr.jpeg` → `汽车物流产线运输图.jpg`
|
||||
- `Whisk_a78a725c868b013af3e4319602364ac0dr.jpeg` → `传送带上的汽车零部件.jpg`
|
||||
- `50bf518c-1369-4295-bae2-a4361c94fef2.jpeg` → `PLC控制器.jpg`
|
||||
- 等等...
|
||||
|
||||
**重命名流程**:
|
||||
1. 阅读markdown文档,理解每张图片对应的内容
|
||||
2. 根据图片描述创建描述性文件名
|
||||
3. 使用bash mv命令批量重命名
|
||||
4. 使用sed命令更新markdown中的图片引用
|
||||
5. 统一后缀为.jpg
|
||||
|
||||
## 参考资料
|
||||
- 文档:`data/订单班文档资料/智能制造/notion文稿/物流输送线节拍优化的PLC与机器人联合调试.md`
|
||||
- Agent_prompt文件夹:`data/订单班文档资料/智能制造/Agent_prompt/`
|
||||
- agent头像文件夹:`data/订单班文档资料/智能制造/agent头像/`
|
||||
- 图片文件夹:`data/订单班文档资料/智能制造/notion文稿/image/`
|
||||
188
.serena/memories/logistics_terminal_simulation_creation.md
Normal file
188
.serena/memories/logistics_terminal_simulation_creation.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# 交通物流订单班终端模拟创建记录
|
||||
|
||||
## 项目信息
|
||||
- **订单班**: 交通物流
|
||||
- **项目**: 某冷链智慧共配中心"百车级"AGV全局交通管制与充电调度系统设计项目
|
||||
- **核心技术**: 120台AGV、全局交通管制、智能充电调度、冷链环境适配(-25°C)
|
||||
- **创建日期**: 2025-10-02
|
||||
|
||||
## Agent配置 (10个专业角色)
|
||||
|
||||
### 1. 需求分析师
|
||||
- **ID**: req_analyst
|
||||
- **职责**: 业务需求建模与系统目标拆解
|
||||
- **图标**: 📋
|
||||
- **颜色**: #3B82F6
|
||||
- **关键输出**: 业务痛点分析、系统目标拆解、功能清单
|
||||
|
||||
### 2. 系统架构师
|
||||
- **ID**: sys_architect
|
||||
- **职责**: 系统总体架构设计与技术选型
|
||||
- **图标**: 🏗️
|
||||
- **颜色**: #8B5CF6
|
||||
- **关键输出**: 五层架构体系、技术选型方案
|
||||
|
||||
### 3. AGV算法与调度工程师
|
||||
- **ID**: agv_algorithm
|
||||
- **职责**: AGV导航与路径调度算法设计
|
||||
- **图标**: 🤖
|
||||
- **颜色**: #10B981
|
||||
- **关键输出**: 导航系统、路径规划、交通管制算法
|
||||
|
||||
### 4. 能源与充电系统工程师
|
||||
- **ID**: energy_engineer
|
||||
- **职责**: 智能充电调度与能源管理
|
||||
- **图标**: ⚡
|
||||
- **颜色**: #F59E0B
|
||||
- **关键输出**: 双模式充电策略、低温充电保护
|
||||
|
||||
### 5. 冷链设备技术总监
|
||||
- **ID**: coldchain_director
|
||||
- **职责**: 冷链环境适配与温控系统
|
||||
- **图标**: ❄️
|
||||
- **颜色**: #06B6D4
|
||||
- **关键输出**: 环境感知系统、AGV低温适配方案
|
||||
|
||||
### 6. 技术研发工程师
|
||||
- **ID**: rd_engineer
|
||||
- **职责**: 软件/嵌入式/PLC功能实现
|
||||
- **图标**: ⚙️
|
||||
- **颜色**: #EC4899
|
||||
- **关键输出**: 上位平台、嵌入式控制、PLC逻辑
|
||||
|
||||
### 7. 系统集成工程师
|
||||
- **ID**: integration_engineer
|
||||
- **职责**: 多系统集成与接口联动
|
||||
- **图标**: 🔗
|
||||
- **颜色**: #14B8A6
|
||||
- **关键输出**: 集成架构、通信协议、接口规范
|
||||
|
||||
### 8. 视觉设计工程师
|
||||
- **ID**: visual_designer
|
||||
- **职责**: 技术文档与图文输出
|
||||
- **图标**: 🎨
|
||||
- **颜色**: #F97316
|
||||
- **关键输出**: 技术文档、监控面板设计
|
||||
|
||||
### 9. 技术审批专家
|
||||
- **ID**: tech_reviewer
|
||||
- **职责**: 技术方案评审与风险控制
|
||||
- **图标**: ✅
|
||||
- **颜色**: #EF4444
|
||||
- **关键输出**: 架构评审、技术选型评估、风险评估
|
||||
|
||||
### 10. 项目经理
|
||||
- **ID**: project_manager
|
||||
- **职责**: 项目规划与任务协调
|
||||
- **图标**: 📊
|
||||
- **颜色**: #6366F1
|
||||
- **关键输出**: WBS、排期计划、RACI矩阵
|
||||
|
||||
## 图片资源分配 (12张图片)
|
||||
|
||||
### 1. 冷链方案示意图.jpg
|
||||
- **分配给**: 需求分析师
|
||||
- **用途**: 展示项目背景和冷链物流场景
|
||||
|
||||
### 2. 物流业务架构图.jpg
|
||||
- **分配给**: 系统架构师
|
||||
- **用途**: 展示五层架构体系设计
|
||||
|
||||
### 3. 仿真模拟平台示意图.jpg
|
||||
- **分配给**: AGV算法与调度工程师
|
||||
- **用途**: 展示AGV仿真验证平台
|
||||
|
||||
### 4. AGV逻辑图.jpg
|
||||
- **分配给**: AGV算法与调度工程师
|
||||
- **用途**: 展示AGV导航与路径规划逻辑
|
||||
|
||||
### 5. 交通管制系统逻辑图.jpg
|
||||
- **分配给**: AGV算法与调度工程师
|
||||
- **用途**: 展示全局交通管制机制
|
||||
|
||||
### 6. 充电管理系统逻辑图.jpg
|
||||
- **分配给**: 能源与充电系统工程师
|
||||
- **用途**: 展示智能充电调度策略
|
||||
|
||||
### 7. 系统控制架构图.jpg
|
||||
- **分配给**: 系统集成工程师
|
||||
- **用途**: 展示系统集成控制架构
|
||||
|
||||
### 8. 系统集成与调度.jpg
|
||||
- **分配给**: 系统集成工程师
|
||||
- **用途**: 展示多系统集成方案
|
||||
|
||||
### 9. 后台监控与管理.jpg
|
||||
- **分配给**: 视觉设计工程师
|
||||
- **用途**: 展示后台监控管理界面
|
||||
|
||||
### 10. 周期实施计划.jpg
|
||||
- **分配给**: 项目经理
|
||||
- **用途**: 展示项目周期规划
|
||||
|
||||
### 11. AGV故障排查检修.jpg
|
||||
- **分配给**: 项目经理
|
||||
- **用途**: 展示运维支持计划
|
||||
|
||||
### 12. 技术支持与指导.jpg
|
||||
- **分配给**: 项目经理
|
||||
- **用途**: 展示技术支持体系
|
||||
|
||||
## 重要处理心得
|
||||
|
||||
### 1. Agent命名一致性问题
|
||||
- **问题**: 发现"需求分析师"(prompt文件)与"需求分析工程师"(avatar文件)命名不一致
|
||||
- **解决**: 使用prompt文件中的"需求分析师"作为标准名称,与Agent_prompt文件保持一致
|
||||
|
||||
### 2. 新旧格式转换
|
||||
- **新格式**: logistics.ts采用更清晰的结构(id/name/sequences等)
|
||||
- **旧格式**: index.ts中的SimulationData格式
|
||||
- **解决**: 创建convertToSimulationData转换函数,实现格式自动转换
|
||||
|
||||
### 3. 图片路径规范
|
||||
- **路径格式**: `/data/订单班文档资料/交通物流/notion文稿/image/图片名称.jpg`
|
||||
- **注意**: 所有图片已统一重命名为描述性.jpg格式
|
||||
|
||||
### 4. Agent输出设计策略
|
||||
- **需求分析师**: 聚焦业务痛点和系统目标,展示冷链方案示意图
|
||||
- **系统架构师**: 展示五层架构设计和技术选型
|
||||
- **AGV算法工程师**: 最多输出(5个),覆盖导航、路径、交通、仿真等核心算法
|
||||
- **能源工程师**: 聚焦双模式充电和低温保护
|
||||
- **冷链总监**: 聚焦环境感知和设备适配
|
||||
- **研发工程师**: 覆盖上位平台、嵌入式、PLC三个层次
|
||||
- **集成工程师**: 展示系统集成架构和通信协议,使用2张架构图
|
||||
- **视觉设计师**: 聚焦文档和监控界面
|
||||
- **技术专家**: 三维度评审(架构/技术/风险)
|
||||
- **项目经理**: 最多输出(4个),覆盖周期规划、任务分工、运维和技术支持,使用3张图
|
||||
|
||||
### 5. 项目成果总结
|
||||
- **核心价值量化**: 效率提升40%、成本降低60%、日出件量18万件
|
||||
- **技术亮点**: 120台AGV、全局交通管制、智能充电、-25°C低温运行
|
||||
- **合规性**: GSP/GDP认证要求
|
||||
|
||||
## 文件结构
|
||||
```
|
||||
web_frontend/exhibition-demo/
|
||||
├── src/data/terminalSimulations/
|
||||
│ ├── logistics.ts (新创建)
|
||||
│ └── index.ts (已更新)
|
||||
└── public/data/订单班文档资料/交通物流/
|
||||
├── Agent_prompt/ (10个.md文件)
|
||||
├── avatar/ (10个.jpg文件)
|
||||
└── notion文稿/
|
||||
├── image/ (12张重命名的.jpg图片)
|
||||
└── 某冷链智慧共配中心"百车级"AGV...md
|
||||
```
|
||||
|
||||
## 技术要点
|
||||
- **导航技术**: 激光SLAM + IMU + 二维码融合
|
||||
- **路径算法**: A*/Dijkstra
|
||||
- **通信协议**: MQTT + RESTful API + WebSocket
|
||||
- **充电策略**: 快充1.5C + 慢充0.5C
|
||||
- **架构模式**: 五层架构(接入/业务/调度/设备/算法)
|
||||
|
||||
## 后续建议
|
||||
1. 可考虑添加更多动态效果到终端输出
|
||||
2. 可为关键技术点添加更多可视化图表
|
||||
3. 可考虑添加实时数据监控的动画效果
|
||||
4. 可为AGV路径规划添加交互式演示
|
||||
66
.serena/memories/order-class-naming-convention.md
Normal file
66
.serena/memories/order-class-naming-convention.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# 订单班命名规范和映射表
|
||||
|
||||
## 命名统一原则
|
||||
|
||||
所有订单班的命名必须在以下三个地方保持一致：
|
||||
1. **orderClasses.json** 中的 `id` 字段
|
||||
2. **simulationMap** 中的 key
|
||||
3. **终端模拟文件名**和**导出函数名**
|
||||
|
||||
## 当前订单班中英文映射表
|
||||
|
||||
| 中文名称 | 英文ID | 文件名 | 导出函数名 | 状态 |
|
||||
|---------|--------|--------|-----------|------|
|
||||
| 食品 | `food` | `food.ts` | `foodSimulation` | ✅ 已实现 |
|
||||
| 文旅 | `wenlu` | `wenlu.ts` | `wenluSimulation` | ✅ 已实现 |
|
||||
| 智能制造 | `manufacturing` | `intelligentManufacturing.ts` | `intelligentManufacturingSimulation` | ✅ 已实现 |
|
||||
| 智能开发 | `developer` | - | - | ⏸️ 未实现 |
|
||||
| 财经商贸 | `finance` | - | - | ⏸️ 未实现 |
|
||||
| 视觉设计 | `visual` | `visualDesign.ts` | `visualSimulation` | ✅ 已实现 |
|
||||
| 大健康 | `health` | `health.ts` | `healthSimulation` | ✅ 已实现 |
|
||||
| 交通物流 | `transportation` | `transportation.ts` | `transportationSimulation` | ✅ 已实现 |
|
||||
| 能源 | `energy` | `energy.ts` | `energySimulation` | ✅ 已实现 |
|
||||
| 化工 | `chemical` | - | - | ⏸️ 未实现 |
|
||||
| 环保 | `environmental` | - | - | ⏸️ 未实现 |
|
||||
| 土木 | `civil` | `civilEngineering.ts` | `civilEngineeringSimulation` | ✅ 已实现 |
|
||||
|
||||
## 最近修改记录 (2025-10-02)
|
||||
|
||||
### 交通物流订单班统一命名
|
||||
**问题**:
|
||||
- orderClasses.json 中 ID 为 `transportation`
|
||||
- simulationMap 中 key 为 `logistics`
|
||||
- 导致点击"交通物流"模版无法触发终端模拟
|
||||
|
||||
**解决方案**:
|
||||
1. 重命名文件：`logistics.ts` → `transportation.ts`
|
||||
2. 更新函数名：`logisticsSimulation()` → `transportationSimulation()`
|
||||
3. 更新变量名：`logisticsAgents` → `transportationAgents`
|
||||
4. 更新 orderClassId：`'logistics'` → `'transportation'`
|
||||
5. 更新 index.ts 导入语句和 simulationMap 注册
|
||||
|
||||
### 智能制造订单班ID修正
|
||||
**问题**: orderClasses.json 中 ID 为 `manufacture`，但 simulationMap 中为 `manufacturing`
|
||||
|
||||
**解决方案**: 修改 orderClasses.json 中的 ID：`"manufacture"` → `"manufacturing"`
|
||||
|
||||
## 关键文件位置
|
||||
|
||||
- **订单班配置**: `/web_frontend/exhibition-demo/src/data/orderClasses.json`
|
||||
- **模拟数据映射**: `/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts`
|
||||
- **各订单班模拟数据**: `/web_frontend/exhibition-demo/src/data/terminalSimulations/*.ts`
|
||||
|
||||
## 添加新订单班的流程
|
||||
|
||||
1. 在 `orderClasses.json` 中添加订单班配置，设定统一的 `id`
|
||||
2. 创建 `/terminalSimulations/{id}.ts` 文件
|
||||
3. 导出函数命名为 `{id}Simulation`
|
||||
4. 在 `index.ts` 中导入并注册到 `simulationMap`
|
||||
5. 确保 orderClassId 与配置文件中的 id 一致
|
||||
|
||||
## 注意事项
|
||||
|
||||
- ⚠️ **切勿使用不同的命名**：orderClasses.json 的 ID 必须与 simulationMap 的 key 完全一致
|
||||
- ⚠️ **函数命名规范**：导出函数应命名为 `{id}Simulation`，如 `transportationSimulation`
|
||||
- ⚠️ **变量命名规范**：Agent 数组应命名为 `{id}Agents`，如 `transportationAgents`
|
||||
- ✅ **ID 使用英文单词**：优先使用完整、直观的英文单词，如 `transportation` 而不是 `logistics`
|
||||
275
.serena/memories/terminal-simulation-development-guide.md
Normal file
275
.serena/memories/terminal-simulation-development-guide.md
Normal file
@@ -0,0 +1,275 @@
|
||||
# 终端模拟内容开发指南
|
||||
|
||||
## 开发流程
|
||||
|
||||
### 1. 前期准备
|
||||
- **阅读文档资料**：仔细阅读 `/data/订单班文档资料/{订单班名}/notion文稿` 下的文档
|
||||
- **分析图片备注**：查看文档中图片的插入位置和备注说明，理解图片与内容的对应关系
|
||||
- **检查资源文件**：确认 `agent头像`、`Agent_prompt`、`image` 文件夹是否完整
|
||||
|
||||
### 2. Agent设计原则
|
||||
|
||||
#### Agent数量规划
|
||||
- 根据项目复杂度确定Agent数量（通常6-10个）
|
||||
- 覆盖项目全生命周期的关键角色
|
||||
- 确保每个Agent有明确的职责边界
|
||||
|
||||
#### Agent配置要素
|
||||
```typescript
|
||||
{
|
||||
id: 'unique_identifier', // 唯一标识符（蛇形命名）
|
||||
name: '中文角色名', // 显示名称
|
||||
icon: '📋', // emoji图标
|
||||
avatar: '/data/订单班文档资料/{订单班}/agent头像/{角色名}.jpg',
|
||||
model: 'GPT-4', // 模型名称
|
||||
role: '简短的职责描述', // 一句话职责
|
||||
status: 'waiting', // 初始状态
|
||||
}
|
||||
```
|
||||
|
||||
#### 命名规范
|
||||
- **文件名**：`{orderClassId}.ts`（如 `developer.ts`）
|
||||
- **函数名**：`{orderClassId}Simulation`（如 `developerSimulation`）
|
||||
- **变量名**：`{orderClassId}Agents`（如 `developerAgents`）
|
||||
- **orderClassId**：与 orderClasses.json 中的 id 完全一致
|
||||
|
||||
### 3. 内容结构设计
|
||||
|
||||
#### 启动序列（startupSequence）
|
||||
目的：营造项目启动氛围，介绍项目背景
|
||||
|
||||
```typescript
|
||||
startupSequence: [
|
||||
{ type: 'system', content: '初始化{项目类型}开发环境...' },
|
||||
{ type: 'system', content: '加载项目需求：{项目名称}' },
|
||||
{ type: 'info', content: '核心信息1' },
|
||||
{ type: 'info', content: '核心信息2' },
|
||||
{ type: 'system', content: '' }, // 空行分隔
|
||||
{ type: 'system', content: '正在组建{N}人团队...' },
|
||||
{ type: 'success', content: '✓ {Agent1}就位' },
|
||||
// ... 所有Agent就位确认
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'system', content: '开始多Agent协作流程...' },
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
]
|
||||
```
|
||||
|
||||
#### Agent执行序列（agentSequence）
|
||||
目的：展示每个Agent的具体工作内容和成果
|
||||
|
||||
**标准结构**：
|
||||
```typescript
|
||||
{
|
||||
agent: () => {orderClassId}Agents[index],
|
||||
outputs: [
|
||||
{ type: 'info', content: '{icon} {Agent名}开始{动作}...' },
|
||||
{ type: 'system', content: '' },
|
||||
|
||||
// 工作内容展示
|
||||
{ type: 'output', content: '{工作模块标题}:' },
|
||||
{ type: 'output', content: ' • {具体工作项1}' },
|
||||
{ type: 'output', content: ' • {具体工作项2}' },
|
||||
{ type: 'system', content: '' },
|
||||
|
||||
// 图片插入（如果有）
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/{订单班}/notion文稿/image/{图片名}.jpg', imageAlt: '{图片说明}' },
|
||||
{ type: 'system', content: '' },
|
||||
|
||||
// 成果总结
|
||||
{ type: 'success', content: '✓ {成果1}' },
|
||||
{ type: 'success', content: '✓ {成果2}' },
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 完成序列（completionSequence）
|
||||
目的：项目总结和成果展示
|
||||
|
||||
```typescript
|
||||
completionSequence: [
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '🎉 {项目名}圆满完成！' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '项目成果总结:' },
|
||||
{ type: 'output', content: ' • {成果亮点1}' },
|
||||
{ type: 'output', content: ' • {成果亮点2}' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '交付物清单:' },
|
||||
{ type: 'output', content: ' ✓ {交付物1}' },
|
||||
{ type: 'output', content: ' ✓ {交付物2}' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '感谢{N}位Agent的协作，{项目名}已成功上线！' },
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
]
|
||||
```
|
||||
|
||||
### 4. 图片插入技巧
|
||||
|
||||
#### 图片位置选择
|
||||
- **概念/架构图**：放在介绍该概念/架构的Agent输出中
|
||||
- **界面设计图**：放在UI设计师或前端开发的输出中
|
||||
- **数据分析图**：放在数据分析或测试的输出中
|
||||
- **流程图**：放在系统架构师或项目经理的输出中
|
||||
|
||||
#### 图片插入格式
|
||||
```typescript
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/{订单班}/notion文稿/image/{图片名}.jpg', imageAlt: '{简短描述}' },
|
||||
{ type: 'system', content: '' }, // 图片后加空行
|
||||
```
|
||||
|
||||
#### 图片与内容的对应关系
|
||||
根据文档分析建立映射：
|
||||
- **首页.jpg** → 数据库架构/系统架构部分
|
||||
- **用户信息后台数据.jpg** → 用户系统设计
|
||||
- **课程信息后台数据.jpg** → 课程系统设计
|
||||
- **API配置界面.jpg** → 接口设计/后端开发
|
||||
- **注册界面.jpg** → 用户认证/前端开发
|
||||
- **课程直播间.jpg** → 直播系统/互动功能
|
||||
|
||||
### 5. 内容撰写技巧
|
||||
|
||||
#### 信息密度控制
|
||||
- 每个Agent输出3-5个工作模块
|
||||
- 每个模块2-4个具体工作项
|
||||
- 避免过于冗长的描述
|
||||
|
||||
#### 专业术语使用
|
||||
- 使用行业通用术语（如 Vue3、Spring Cloud、JWT）
|
||||
- 避免过于晦涩的技术细节
|
||||
- 数字要具体（如"10万+并发"而非"大量用户"）
|
||||
|
||||
#### 成果量化表达
|
||||
- **好的示例**：
|
||||
- ✓ 前端开发完成（65个组件，28个页面）
|
||||
- ✓ 接口性能：平均响应时间200ms
|
||||
- ✓ 测试通过率：98.5%
|
||||
|
||||
- **避免的表达**：
|
||||
- ✓ 前端开发完成
|
||||
- ✓ 性能很好
|
||||
- ✓ 测试基本通过
|
||||
|
||||
#### 分隔符使用
|
||||
- 使用空行 `{ type: 'system', content: '' }` 分隔不同模块
|
||||
- 使用分隔线 `════════════════════════════════════` 标记重要节点
|
||||
|
||||
### 6. 开发实例参考
|
||||
|
||||
#### 智能开发订单班（developer.ts）
|
||||
**文档结构**：
|
||||
- 6大章节：项目概述、功能模块、数据库设计、开发实现、测试、运维
|
||||
- 9张图片：首页、用户数据、智能分析、课程数据、课程内容、直播间、注册界面、热门课程、API配置
|
||||
|
||||
**Agent设计**：
|
||||
1. 需求文档撰写专员 - 需求调研与文档输出
|
||||
2. 产品经理 - 产品规划与功能设计
|
||||
3. 平台架构师 - 技术架构与数据库设计
|
||||
4. UI设计师 - 界面设计与交互体验
|
||||
5. 前端开发工程师 - Vue3前端开发
|
||||
6. 后端开发工程师 - Spring Cloud后端开发
|
||||
7. 软件测试工程师 - 功能/性能/安全测试
|
||||
8. DEMO生成助手 - 演示原型与文档生成
|
||||
9. 项目经理 - 项目总结与成果汇报
|
||||
|
||||
**图片分配**：
|
||||
- 产品经理：首页.jpg
|
||||
- 平台架构师：用户信息后台数据.jpg、课程信息后台数据.jpg
|
||||
- UI设计师：注册界面.jpg、热门课程.jpg、课程直播间.jpg
|
||||
- 前端开发工程师：课程内容.jpg
|
||||
- 后端开发工程师：API配置界面.jpg
|
||||
- 软件测试工程师：智能学习数据分析.jpg
|
||||
|
||||
### 7. 常见问题
|
||||
|
||||
#### Q1: Agent数量如何确定？
|
||||
A: 根据项目规模和文档内容：
|
||||
- 小型项目（如轻食品牌）：5-7个Agent
|
||||
- 中型项目（如教育平台）：8-10个Agent
|
||||
- 大型项目（如AGV系统）：10-12个Agent
|
||||
|
||||
#### Q2: 图片应该放在哪个Agent？
|
||||
A: 遵循"谁产出谁展示"原则：
|
||||
- 数据库设计图 → 架构师
|
||||
- 界面设计图 → UI设计师或前端工程师
|
||||
- API文档图 → 后端工程师
|
||||
- 测试报告图 → 测试工程师
|
||||
|
||||
#### Q3: 如何避免内容重复？
|
||||
A: 每个Agent聚焦自己的职责：
|
||||
- 需求分析师：需求调研、文档撰写
|
||||
- 产品经理：功能规划、原型设计
|
||||
- 架构师：技术选型、架构设计
|
||||
- 开发工程师：具体实现、代码编写
|
||||
- 测试工程师：测试执行、问题发现
|
||||
- 项目经理：进度管理、成果总结
|
||||
|
||||
#### Q4: 输出内容的详细程度？
|
||||
A: 保持"概览+亮点"原则：
|
||||
- 不要列举所有细节
|
||||
- 突出关键技术点和创新点
|
||||
- 用数据说话（如"65个组件"比"很多组件"更好）
|
||||
|
||||
### 8. 注册流程
|
||||
|
||||
完成文件创建后，需要在 `index.ts` 中注册：
|
||||
|
||||
```typescript
|
||||
// 1. 导入
|
||||
import { {orderClassId}Simulation } from './{orderClassId}';
|
||||
|
||||
// 2. 注册到映射表
|
||||
export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
// ... 其他订单班
|
||||
{orderClassId}: {orderClassId}Simulation,
|
||||
};
|
||||
```
|
||||
|
||||
### 9. 验证清单
|
||||
|
||||
创建完成后检查：
|
||||
- [ ] 文件命名符合规范（{orderClassId}.ts）
|
||||
- [ ] Agent数量与 agentCount 一致
|
||||
- [ ] 所有头像路径正确
|
||||
- [ ] 图片路径正确且图片存在
|
||||
- [ ] orderClassId 与 orderClasses.json 一致
|
||||
- [ ] 已在 index.ts 中正确注册
|
||||
- [ ] TypeScript 编译无错误
|
||||
|
||||
### 10. 最佳实践总结
|
||||
|
||||
✅ **DO（推荐做法）**：
|
||||
- 深入阅读文档，理解项目全貌
|
||||
- 图片与文字内容强关联
|
||||
- 使用具体数字量化成果
|
||||
- 每个Agent职责清晰、不重叠
|
||||
- 使用空行和分隔符优化阅读体验
|
||||
|
||||
❌ **DON'T（避免做法）**：
|
||||
- 不看文档凭想象编写内容
|
||||
- 随意插入图片，与内容无关
|
||||
- 使用模糊表述（如"很好"、"很多"）
|
||||
- Agent职责重叠或遗漏关键角色
|
||||
- 内容冗长、缺少分段
|
||||
|
||||
### 11. 工具函数提示
|
||||
|
||||
在开发过程中可以使用以下bash命令快速检查：
|
||||
|
||||
```bash
|
||||
# 查看文档资料结构
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/"
|
||||
|
||||
# 查看图片文件
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/notion文稿/image/"
|
||||
|
||||
# 查看agent头像
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/agent头像/"
|
||||
|
||||
# 检查orderClasses.json中的配置
|
||||
grep -A 15 '"id": "{orderClassId}"' orderClasses.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**备注**：本指南基于智能开发订单班（developer.ts）的开发经验总结，适用于所有订单班的终端模拟内容开发。
|
||||
BIN
data/订单班文档资料/交通物流/notion文稿/image/AGV故障排查检修.jpg
Executable file
BIN
data/订单班文档资料/交通物流/notion文稿/image/AGV故障排查检修.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 381 KiB After Width: | Height: | Size: 381 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 179 KiB After Width: | Height: | Size: 179 KiB |
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
BIN
data/订单班文档资料/交通物流/notion文稿/image/后台监控与管理.jpg
Executable file
BIN
data/订单班文档资料/交通物流/notion文稿/image/后台监控与管理.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
BIN
data/订单班文档资料/交通物流/notion文稿/image/备用图片6.jpg
Executable file
BIN
data/订单班文档资料/交通物流/notion文稿/image/备用图片6.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 330 KiB After Width: | Height: | Size: 330 KiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 306 KiB |
BIN
data/订单班文档资料/交通物流/notion文稿/image/系统集成与调度.jpg
Executable file
BIN
data/订单班文档资料/交通物流/notion文稿/image/系统集成与调度.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 426 KiB After Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 772 KiB After Width: | Height: | Size: 772 KiB |
|
Before Width: | Height: | Size: 557 KiB After Width: | Height: | Size: 557 KiB |
|
Before Width: | Height: | Size: 955 KiB After Width: | Height: | Size: 955 KiB |
|
Before Width: | Height: | Size: 652 KiB After Width: | Height: | Size: 652 KiB |
|
Before Width: | Height: | Size: 419 KiB After Width: | Height: | Size: 419 KiB |
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
19
progress.md
19
progress.md
@@ -1,5 +1,5 @@
|
||||
# Project: 展会策划 AI 多智能体协作演示系统 + n8n 中文版工作流平台
|
||||
_Last updated: 2025-09-29_
|
||||
_Last updated: 2025-10-01_
|
||||
|
||||
## Pinned（仅高置信"必须遵守"写入；受保护不可修订）
|
||||
- ⚠️ 必须使用 pnpm（不能用 npm/yarn）
|
||||
@@ -34,6 +34,7 @@ _Last updated: 2025-09-29_
|
||||
- 2025-09-29: 决定使用动态JSON数据结构替代硬编码agent数据（理由：提高可维护性和扩展性）
|
||||
- 2025-09-29: 决定将终端模拟系统改为TSX格式（理由：替代JSON文件加载方式，提升代码复用性和类型安全）
|
||||
- 2025-09-29: 决定终端模拟数据使用TypeScript管理，不再使用JSON（理由：避免复杂度，简化配置管理）
|
||||
- 2025-10-01: 最终选择食品订单班SuperDesign Version 5作为最优版本（理由：9.39/10评分，全面领先其他版本，响应式设计完善，性能优化到位）
|
||||
|
||||
## TODO（权威待办清单）
|
||||
- [P1][OPEN][#1] 优化 Duoduo Agent 设计系统的用户交互体验
|
||||
@@ -47,7 +48,6 @@ _Last updated: 2025-09-29_
|
||||
- [P0][OPEN][#41] 开发智能开发订单班演示系统（Context：优先开发重点演示场景）
|
||||
- [P0][OPEN][#42] 开发智能制造订单班演示系统（Context：优先开发重点演示场景）
|
||||
- [P2][OPEN][#26] 优化n8n工作流自动化演示效果
|
||||
- [P1][OPEN][#30] 完整功能测试食品订单班演示系统（Context：端口4174全面验证）
|
||||
- [P1][OPEN][#31] 准备其他订单班开发（Context：基于食品订单班成功模板）
|
||||
- [P0][OPEN][#33] 收集其他11个订单班的Agent数据（Context：每个订单班需要7-9个Agent配置、头像.jpg格式、提示词.md文件、业务配图素材）
|
||||
- [P1][OPEN][#34] 开发多订单班主入口界面（Context：exhibition-demo项目，显示12个订单班选项grid布局）
|
||||
@@ -64,6 +64,10 @@ _Last updated: 2025-09-29_
|
||||
- [P1][DOING][#5] 维护和优化当前多智能体展示分支功能
|
||||
|
||||
## Done（最近完成的放前面）
|
||||
- 2025-10-01: [#70] 完成食品订单班SuperDesign 5次迭代优化（evidence：.superdesign/design_iterations/目录，迭代1-3：v1基础框架6.93分→v2 Agent强化8.02分→v3专业深度8.51分，迭代4：v4视觉细节打磨8.71分包含5级阴影系统/6级圆角系统/多层背景纹理/3D卡片效果，迭代5：v5响应式完善9.39分包含流式字体/弹性布局/触摸优化/性能优化懒加载防抖，评估报告evaluation_report.md包含7维度评估视觉/品牌/体验/性能/内容/创新/技术，最终选择Version 5作为最优版本9.39/10，总提升35.5%）
|
||||
- 2025-10-01: [#71] 修复食品订单班图片路径问题（evidence：创建软链接web_frontend/web_result/order-classes/food/images→data/订单班文档资料/食品/notion文稿/image，更新v5所有图片路径为相对路径images/，25张项目图片现可正常加载）
|
||||
- 2025-10-01: [#72] 部署食品订单班最优版本到生产环境（evidence：部署v5到web_frontend/web_result/order-classes/food/index.html，文件大小87KB，生产环境可访问所有功能正常）
|
||||
- 2025-10-01: [#73] 归档SuperDesign工作文件（evidence：创建归档目录.superdesign/archive_食品_20251001/，包含所有5个版本/评估报告/归档说明README.md，完整设计迭代历史保存）
|
||||
- 2025-09-29: [#69] 完成Web结果展示系统端口配置标准化（evidence：修改routes.yaml、app.js、start-router.sh，将系统端口从8080统一更改为4155，建立系统级硬约束确保所有Web访问使用标准端口：http://localhost:4155/、http://localhost:4155/order-class/wenlu、http://localhost:4155/order-class/food）
|
||||
- 2025-09-29: [#65] 完成UI优化：订单班选择卡片效果增强（evidence：增加了卡片间距和内边距，添加了hover上浮效果和3D旋转动画，实现了选中状态的脉冲光晕效果，增加了右上角的勾选标记动画，图标尺寸从20px增加到24px）
|
||||
- 2025-09-29: [#66] 增强标题可读性（evidence："快速选择需求模板"和"需求描述"标题从text-sm增加到text-base，为两个标题都添加了图标（FileText和PenTool），颜色加深至gray-800）
|
||||
@@ -86,6 +90,7 @@ _Last updated: 2025-09-29_
|
||||
- 2025-09-28: [#39] 完成AI Agent架构设计（evidence：定义12个订单班共100+个专业Agent，确立4种Agent协作模式）
|
||||
- 2025-09-28: [#40] 完成配置文件体系建设（evidence：创建orderClasses.json配置文件，支持动态加载和热更新）
|
||||
- 2025-09-28: [#32] 完成食品订单班演示系统7个Agent全部开发（evidence：Agent-5财务分析师60万总投资14个月回本ROI285%，Agent-6运营管理专家15小时营业6人团队32个标准流程，Agent-7食品创业导师方案可行性96%A+级市场前景建议2025年Q2启动，端口4174正常运行，基于文旅订单班框架实现90%代码复用）
|
||||
- 2025-09-28: [#30] 完整功能测试食品订单班演示系统（evidence：端口4174全面验证通过）
|
||||
- 2025-09-28: [#28] 完成Agent-1市场研究专家和Agent-2营养配方师演示内容更新（evidence：commit ab20a4b2，轻食市场1200亿元数据，32款产品营养菜单，3款核心产品配方）
|
||||
- 2025-09-28: [#29] 完成食品订单班系统启动序列更新（evidence：系统名称改为"AI青莳轻食经营方案生成系统 v1.0.0"，版权青莳轻食AI团队）
|
||||
- 2025-09-28: [#15] 完善食品订单班演示内容和具体流程（evidence：Agent-1和Agent-2内容完善，演示内容更贴近食品行业实际场景）
|
||||
@@ -118,6 +123,8 @@ _Last updated: 2025-09-29_
|
||||
- Assumption：其他订单班的数据结构与文旅订单班类似（Confidence: High）
|
||||
|
||||
## Notes（简要要点）
|
||||
- 2025-10-01: SuperDesign工作总结：食品订单班5次迭代成功验证了系统化设计流程的价值，从基础框架6.93分提升至响应式完善9.39分，总提升35.5%，关键技术亮点包括clamp()流式字体系统、弹性Grid布局、IntersectionObserver懒加载、Debounce防抖优化、5级阴影系统、6级圆角系统、7种渐变背景、多层纹理效果，完整的设计迭代历史已归档至.superdesign/archive_食品_20251001/，该流程和模板可应用于其他订单班开发
|
||||
- 2025-10-01: 食品订单班技术价值验证：SuperDesign迭代过程证明响应式设计和性能优化的重要性，v5版本在移动端适配/触摸优化/被动监听等方面全面领先，评估报告的7维度评估方法（视觉/品牌/体验/性能/内容/创新/技术）可作为未来订单班质量评估标准
|
||||
- 2025-09-29: Web结果展示系统端口配置标准化完成：建立系统级硬约束使用端口4155，禁止使用8080或其他端口，修改了routes.yaml服务器端口配置、app.js默认端口设置、start-router.sh启动脚本，统一访问地址为http://localhost:4155/主页、http://localhost:4155/order-class/wenlu文旅订单班、http://localhost:4155/order-class/food食品订单班，这是所有未来开发必须严格遵守的系统约束
|
||||
- 2025-09-29: UI优化完成：RequirementModal组件订单班选择卡片获得显著视觉增强，包括增加卡片间距内边距、hover上浮效果和3D旋转动画、选中状态脉冲光晕效果、右上角勾选标记动画，图标尺寸从20px增加到24px；两个标题可读性提升，从text-sm增加到text-base，添加FileText和PenTool图标，颜色加深至gray-800
|
||||
- 2025-09-29: 代码清理彻底完成：删除了所有未使用的JSON文件包括/public/data/terminal/wenlu.json、/src/data/food.json、/src/data/wenlu.json，确认项目已完全迁移到TypeScript数据管理方案，不再依赖JSON文件加载方式
|
||||
@@ -158,8 +165,11 @@ _Last updated: 2025-09-29_
|
||||
- web_frontend/exhibition-demo/ (React多智能体演示，主入口)
|
||||
- web_frontend/food-order-demo/ (食品订单班演示系统)
|
||||
- web_frontend/web_result/ (展会HTML页面，结果展示)
|
||||
- web_frontend/web_result/order-classes/food/ (食品订单班SuperDesign v5生产部署)
|
||||
- data/订单班文档资料/ (12个订单班完整文档资料，已重组)
|
||||
- data/智能开发/Agent/ (项目附件：前端资源、字体等)
|
||||
- .superdesign/design_iterations/ (SuperDesign迭代工作目录)
|
||||
- .superdesign/archive_食品_20251001/ (食品订单班SuperDesign归档)
|
||||
- .claude/agents/ (Claude智能体配置)
|
||||
- doc/订单班演示策划方案/ (食品订单班方案文档)
|
||||
- doc/notion文档资料/食品/ (食品订单班素材来源)
|
||||
@@ -167,6 +177,7 @@ _Last updated: 2025-09-29_
|
||||
- n8n平台: cd n8n-n8n-1.109.2 && ./start.sh
|
||||
- 展会演示: cd web_frontend/exhibition-demo && pnpm preview
|
||||
- 食品订单班: cd web_frontend/food-order-demo && pnpm dev (端口4174)
|
||||
- Web结果展示: 端口4155，访问http://localhost:4155/order-class/food查看SuperDesign v5
|
||||
- 分支管理:
|
||||
- main (主分支)
|
||||
- My_N8N (个人开发分支)
|
||||
@@ -183,3 +194,7 @@ _Last updated: 2025-09-29_
|
||||
- 跳转格式: /web_result/?orderClass=food
|
||||
- 数据存储: sessionStorage配合URL参数
|
||||
- 配置内容: 每个订单班包含项目名称、规模、投资、技术指标等专业参数
|
||||
- SuperDesign流程参考:
|
||||
- evaluation_report.md (7维度评估方法论)
|
||||
- 迭代策略: 基础框架→Agent强化→专业深度→视觉细节→响应式完善
|
||||
- 技术组件: 流式字体/弹性布局/懒加载/防抖/阴影系统/圆角系统/渐变背景/多层纹理
|
||||
|
||||
@@ -145,9 +145,12 @@ const RequirementModal: React.FC<RequirementModalProps> = ({ isOpen, onClose, on
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
className="fixed inset-0 flex items-center justify-center z-50 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-3xl shadow-2xl max-w-5xl w-full overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="bg-white rounded-3xl shadow-2xl max-w-5xl w-full overflow-hidden">
|
||||
{/* 头部 - 苹果风格设计 */}
|
||||
<div className="relative">
|
||||
{/* 渐变背景 */}
|
||||
|
||||
@@ -54,9 +54,12 @@ const ResultModal: React.FC<ResultModalProps> = ({
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
className="fixed inset-0 flex items-center justify-center z-50 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||||
{/* 头部 */}
|
||||
<div className="relative bg-gradient-to-br from-green-500 to-emerald-600 p-8 text-white flex-shrink-0">
|
||||
<button
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
"documentPath": "/data/订单班文档资料/文旅/notion文稿"
|
||||
},
|
||||
{
|
||||
"id": "manufacture",
|
||||
"id": "manufacturing",
|
||||
"name": "智能制造",
|
||||
"icon": "🏭",
|
||||
"color": "#FF9800",
|
||||
|
||||
@@ -0,0 +1,415 @@
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData } from './index';
|
||||
|
||||
// 智能开发订单班专属Agent配置
|
||||
const developerAgents: Agent[] = [
|
||||
{
|
||||
id: 'requirement_doc_writer',
|
||||
name: '需求文档撰写专员',
|
||||
icon: '📝',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/需求文档撰写专员.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '需求调研与文档规范化输出',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'product_manager',
|
||||
name: '产品经理',
|
||||
icon: '📋',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/产品经理.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '产品规划与功能模块设计',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'platform_architect',
|
||||
name: '平台架构师',
|
||||
icon: '🏗️',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/平台架构师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '技术架构设计与数据库建模',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'ui_designer',
|
||||
name: 'UI设计师',
|
||||
icon: '🎨',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/Ul设计师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '用户界面与交互体验设计',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'frontend_engineer',
|
||||
name: '前端开发工程师',
|
||||
icon: '💻',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/前端开发工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'Vue3前端组件与页面开发',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'backend_engineer',
|
||||
name: '后端开发工程师',
|
||||
icon: '⚙️',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/后端开发工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'Spring Cloud微服务开发',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'test_engineer',
|
||||
name: '软件测试工程师',
|
||||
icon: '🧪',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/软件测试工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '功能测试与性能测试',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'demo_generator',
|
||||
name: 'DEMO生成助手',
|
||||
icon: '🎬',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/DEMO生成助手.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '演示原型与技术文档生成',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'project_manager',
|
||||
name: '项目经理',
|
||||
icon: '📊',
|
||||
avatar: '/data/订单班文档资料/智能开发/agent头像/项目经理.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '项目进度管理与资源协调',
|
||||
status: 'waiting',
|
||||
},
|
||||
];
|
||||
|
||||
export const developerSimulation = (): SimulationData => ({
|
||||
orderClassId: 'developer',
|
||||
orderClassName: '智能开发',
|
||||
projectTitle: 'K12在线教育平台全栈开发项目',
|
||||
agents: developerAgents,
|
||||
|
||||
// 启动序列
|
||||
startupSequence: [
|
||||
{ type: 'system', content: '初始化在线教育平台开发环境...' },
|
||||
{ type: 'system', content: '加载项目需求：智慧课堂在线教育平台' },
|
||||
{ type: 'info', content: '目标用户：K12学生、教师、家长三端用户' },
|
||||
{ type: 'info', content: '技术栈：Vue3 + Spring Cloud + MySQL + Redis + WebRTC' },
|
||||
{ type: 'info', content: '核心功能：直播授课、录播回放、作业批改、AI助教' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'system', content: '正在组建9人开发团队...' },
|
||||
{ type: 'success', content: '✓ 需求文档撰写专员就位' },
|
||||
{ type: 'success', content: '✓ 产品经理就位' },
|
||||
{ type: 'success', content: '✓ 平台架构师就位' },
|
||||
{ type: 'success', content: '✓ UI设计师就位' },
|
||||
{ type: 'success', content: '✓ 前端开发工程师就位' },
|
||||
{ type: 'success', content: '✓ 后端开发工程师就位' },
|
||||
{ type: 'success', content: '✓ 软件测试工程师就位' },
|
||||
{ type: 'success', content: '✓ DEMO生成助手就位' },
|
||||
{ type: 'success', content: '✓ 项目经理就位' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'system', content: '开始多Agent协作开发流程...' },
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
],
|
||||
|
||||
// Agent执行序列
|
||||
agentSequence: [
|
||||
// 1. 需求文档撰写专员
|
||||
{
|
||||
agent: () => developerAgents[0],
|
||||
outputs: [
|
||||
{ type: 'info', content: '📝 需求文档撰写专员开始需求调研...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '执行需求调研与分析:' },
|
||||
{ type: 'output', content: ' • 访谈K12教育机构，收集师生痛点' },
|
||||
{ type: 'output', content: ' • 分析竞品平台（腾讯课堂、钉钉直播）' },
|
||||
{ type: 'output', content: ' • 梳理核心需求：直播互动、作业管理、学习追踪' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '生成需求文档结构:' },
|
||||
{ type: 'output', content: ' 1. 项目概述（背景、目标、范围、里程碑）' },
|
||||
{ type: 'output', content: ' 2. 功能模块（用户系统、课程管理、直播系统、作业考试）' },
|
||||
{ type: 'output', content: ' 3. 非功能需求（性能、安全、可用性）' },
|
||||
{ type: 'output', content: ' 4. 验收标准与测试用例' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 需求文档已输出（40页，包含6大模块）' },
|
||||
{ type: 'success', content: '✓ 已明确支持10万+并发、覆盖100+学校的目标' },
|
||||
]
|
||||
},
|
||||
|
||||
// 2. 产品经理
|
||||
{
|
||||
agent: () => developerAgents[1],
|
||||
outputs: [
|
||||
{ type: 'info', content: '📋 产品经理开始产品规划...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '设计产品功能矩阵:' },
|
||||
{ type: 'output', content: ' 学生端：直播观看、作业提交、学习进度、错题本' },
|
||||
{ type: 'output', content: ' 教师端：课程创建、直播互动、作业批改、成绩分析' },
|
||||
{ type: 'output', content: ' 家长端：学习报告、消息通知、课程购买' },
|
||||
{ type: 'output', content: ' 机构端：教师管理、课程运营、数据看板' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '规划产品迭代路线:' },
|
||||
{ type: 'output', content: ' MVP版本（3个月）：注册登录 + 课程管理 + 基础直播' },
|
||||
{ type: 'output', content: ' V1.0版本（6个月）：作业系统 + AI助教 + 支付功能' },
|
||||
{ type: 'output', content: ' V2.0版本（9个月）：智能推荐 + 学习路径 + 家校互动' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/首页.jpg', imageAlt: '平台首页设计' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 产品功能清单已确认（32个功能点）' },
|
||||
{ type: 'success', content: '✓ 产品原型图已交付UI设计团队' },
|
||||
]
|
||||
},
|
||||
|
||||
// 3. 平台架构师
|
||||
{
|
||||
agent: () => developerAgents[2],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🏗️ 平台架构师开始系统架构设计...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '设计技术架构方案:' },
|
||||
{ type: 'output', content: ' 前端层：Vue3 + TypeScript + Vite + Ant Design Vue' },
|
||||
{ type: 'output', content: ' 网关层：Spring Cloud Gateway + JWT认证' },
|
||||
{ type: 'output', content: ' 服务层：Spring Boot微服务（用户、课程、直播、支付）' },
|
||||
{ type: 'output', content: ' 数据层：MySQL主从 + Redis缓存 + ElasticSearch搜索' },
|
||||
{ type: 'output', content: ' 直播层：WebRTC推流 + HLS转码 + CDN分发' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '设计数据库ER模型:' },
|
||||
{ type: 'output', content: ' • 用户系统表：Users, Roles, UserLogs' },
|
||||
{ type: 'output', content: ' • 课程系统表：Courses, CourseMaterials, Assignments' },
|
||||
{ type: 'output', content: ' • 直播系统表：LiveStreams, LiveInteractions, LiveRecordings' },
|
||||
{ type: 'output', content: ' • 订单系统表：Orders, Payments' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/用户信息后台数据.jpg', imageAlt: '用户系统数据模型' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/课程信息后台数据.jpg', imageAlt: '课程系统数据模型' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 微服务架构设计完成（8个核心服务）' },
|
||||
{ type: 'success', content: '✓ 数据库表结构设计完成（23张表）' },
|
||||
{ type: 'success', content: '✓ 高并发方案：支持10万+在线用户' },
|
||||
]
|
||||
},
|
||||
|
||||
// 4. UI设计师
|
||||
{
|
||||
agent: () => developerAgents[3],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🎨 UI设计师开始界面设计...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '设计视觉风格:' },
|
||||
{ type: 'output', content: ' • 配色方案：科技蓝 + 活力橙（符合K12教育调性）' },
|
||||
{ type: 'output', content: ' • 设计规范：Material Design + 教育场景定制组件' },
|
||||
{ type: 'output', content: ' • 响应式布局：支持桌面端、平板、手机多端适配' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '设计核心页面:' },
|
||||
{ type: 'output', content: ' 1. 注册登录页：支持手机/邮箱/微信多种方式' },
|
||||
{ type: 'output', content: ' 2. 课程列表页：卡片式布局 + 智能推荐' },
|
||||
{ type: 'output', content: ' 3. 直播间页面：视频区 + 聊天区 + 互动工具栏' },
|
||||
{ type: 'output', content: ' 4. 学习中心：进度追踪 + 作业管理 + 错题本' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/注册界面.jpg', imageAlt: '用户注册界面设计' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/热门课程.jpg', imageAlt: '课程展示页面设计' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/课程直播间.jpg', imageAlt: '直播间界面设计' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ UI设计稿已完成（28个页面）' },
|
||||
{ type: 'success', content: '✓ 组件库已构建（45个复用组件）' },
|
||||
{ type: 'success', content: '✓ 设计规范文档已交付开发团队' },
|
||||
]
|
||||
},
|
||||
|
||||
// 5. 前端开发工程师
|
||||
{
|
||||
agent: () => developerAgents[4],
|
||||
outputs: [
|
||||
{ type: 'info', content: '💻 前端开发工程师开始前端开发...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'install', content: '安装前端依赖包...' },
|
||||
{ type: 'output', content: ' npm install vue@next vue-router@4 pinia' },
|
||||
{ type: 'output', content: ' npm install ant-design-vue axios' },
|
||||
{ type: 'output', content: ' npm install webrtc-adapter socket.io-client' },
|
||||
{ type: 'success', content: '✓ 依赖安装完成' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '开发核心功能模块:' },
|
||||
{ type: 'output', content: ' [1/5] 用户认证模块：JWT Token管理、权限路由守卫' },
|
||||
{ type: 'output', content: ' [2/5] 课程管理模块：课程列表、详情、搜索、筛选' },
|
||||
{ type: 'output', content: ' [3/5] 直播互动模块：WebRTC推拉流、举手连麦、聊天室' },
|
||||
{ type: 'output', content: ' [4/5] 作业考试模块：作业提交、在线考试、成绩查询' },
|
||||
{ type: 'output', content: ' [5/5] 学习追踪模块：进度条、学习报告、数据可视化' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/课程内容.jpg', imageAlt: '课程内容展示组件' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '优化前端性能:' },
|
||||
{ type: 'output', content: ' • 路由懒加载：减少首屏加载时间至2秒内' },
|
||||
{ type: 'output', content: ' • 组件按需加载：Ant Design Vue Tree Shaking' },
|
||||
{ type: 'output', content: ' • 图片懒加载：Intersection Observer API' },
|
||||
{ type: 'output', content: ' • CDN加速：静态资源托管到阿里云OSS' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 前端开发完成（65个组件，28个页面）' },
|
||||
{ type: 'success', content: '✓ 首屏加载时间：1.8秒' },
|
||||
{ type: 'success', content: '✓ Lighthouse性能评分：92分' },
|
||||
]
|
||||
},
|
||||
|
||||
// 6. 后端开发工程师
|
||||
{
|
||||
agent: () => developerAgents[5],
|
||||
outputs: [
|
||||
{ type: 'info', content: '⚙️ 后端开发工程师开始后端开发...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '构建Spring Cloud微服务架构:' },
|
||||
{ type: 'output', content: ' • gateway-service：API网关 + JWT认证' },
|
||||
{ type: 'output', content: ' • user-service：用户管理 + RBAC权限' },
|
||||
{ type: 'output', content: ' • course-service：课程CRUD + 课件管理' },
|
||||
{ type: 'output', content: ' • live-service：直播流管理 + 互动记录' },
|
||||
{ type: 'output', content: ' • homework-service：作业发布 + 批改反馈' },
|
||||
{ type: 'output', content: ' • payment-service：支付宝/微信支付集成' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '开发RESTful API接口:' },
|
||||
{ type: 'output', content: ' POST /auth/register - 用户注册' },
|
||||
{ type: 'output', content: ' POST /auth/login - 用户登录' },
|
||||
{ type: 'output', content: ' GET /courses?page=1&size=20 - 课程列表' },
|
||||
{ type: 'output', content: ' POST /live/start - 开始直播' },
|
||||
{ type: 'output', content: ' POST /homework/submit - 提交作业' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/API配置界面.jpg', imageAlt: 'API接口文档' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '实现系统优化方案:' },
|
||||
{ type: 'output', content: ' • Redis缓存：课程列表、用户信息缓存（命中率85%）' },
|
||||
{ type: 'output', content: ' • MySQL读写分离：主库写入，从库读取（QPS提升3倍）' },
|
||||
{ type: 'output', content: ' • RabbitMQ异步：支付回调、消息推送解耦' },
|
||||
{ type: 'output', content: ' • ElasticSearch：课程全文搜索（响应<100ms）' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 后端服务开发完成（6个微服务，48个API）' },
|
||||
{ type: 'success', content: '✓ 接口性能：平均响应时间200ms' },
|
||||
{ type: 'success', content: '✓ 并发能力：支持10万+在线用户' },
|
||||
]
|
||||
},
|
||||
|
||||
// 7. 软件测试工程师
|
||||
{
|
||||
agent: () => developerAgents[6],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🧪 软件测试工程师开始测试工作...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '执行功能测试:' },
|
||||
{ type: 'output', content: ' [✓] 用户注册登录：手机号/邮箱/微信三种方式' },
|
||||
{ type: 'output', content: ' [✓] 课程管理：创建、编辑、删除、上传课件' },
|
||||
{ type: 'output', content: ' [✓] 直播系统：推流、拉流、举手、连麦' },
|
||||
{ type: 'output', content: ' [✓] 作业考试：发布、提交、批改、成绩反馈' },
|
||||
{ type: 'output', content: ' [✓] 支付流程：订单创建、支付回调、订单查询' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '执行性能测试（JMeter）:' },
|
||||
{ type: 'output', content: ' • 并发用户：10,000人在线' },
|
||||
{ type: 'output', content: ' • 响应时间：P95 < 500ms，P99 < 1s' },
|
||||
{ type: 'output', content: ' • 直播延迟：<3秒（WebRTC）' },
|
||||
{ type: 'output', content: ' • 系统稳定性：2小时压测无崩溃' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '执行安全测试（OWASP ZAP）:' },
|
||||
{ type: 'output', content: ' [✓] SQL注入防护：所有输入已参数化' },
|
||||
{ type: 'output', content: ' [✓] XSS攻击防护：输出已HTML转义' },
|
||||
{ type: 'output', content: ' [✓] CSRF防护：Token验证已启用' },
|
||||
{ type: 'output', content: ' [✓] 数据加密：密码BCrypt，支付信息HTTPS' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/智能开发/notion文稿/image/智能学习数据分析.jpg', imageAlt: '测试数据分析报告' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 功能测试通过率：98.5%（2个低优先级bug待修复）' },
|
||||
{ type: 'success', content: '✓ 性能测试达标：支持10万+并发' },
|
||||
{ type: 'success', content: '✓ 安全测试通过：无高危漏洞' },
|
||||
]
|
||||
},
|
||||
|
||||
// 8. DEMO生成助手
|
||||
{
|
||||
agent: () => developerAgents[7],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🎬 DEMO生成助手开始制作演示原型...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '生成演示视频脚本:' },
|
||||
{ type: 'output', content: ' 场景1：学生端 - 注册登录 → 浏览课程 → 购买课程' },
|
||||
{ type: 'output', content: ' 场景2：教师端 - 创建课程 → 开启直播 → 互动答疑' },
|
||||
{ type: 'output', content: ' 场景3：家长端 - 查看学习报告 → 查收消息通知' },
|
||||
{ type: 'output', content: ' 场景4：机构端 - 教师管理 → 数据看板 → 课程运营' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '制作技术文档:' },
|
||||
{ type: 'file', content: ' ├── 01-项目需求文档.pdf' },
|
||||
{ type: 'file', content: ' ├── 02-系统架构设计.pdf' },
|
||||
{ type: 'file', content: ' ├── 03-数据库设计文档.pdf' },
|
||||
{ type: 'file', content: ' ├── 04-API接口文档.pdf' },
|
||||
{ type: 'file', content: ' ├── 05-部署运维手册.pdf' },
|
||||
{ type: 'file', content: ' └── 06-用户操作指南.pdf' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '生成项目交付物清单:' },
|
||||
{ type: 'output', content: ' ✓ 源代码（前端+后端+数据库脚本）' },
|
||||
{ type: 'output', content: ' ✓ 技术文档（6份PDF，共180页）' },
|
||||
{ type: 'output', content: ' ✓ 演示视频（4个场景，时长12分钟）' },
|
||||
{ type: 'output', content: ' ✓ 部署脚本（Docker Compose + K8s配置）' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ DEMO演示原型已完成' },
|
||||
{ type: 'success', content: '✓ 技术文档已输出（180页）' },
|
||||
{ type: 'success', content: '✓ 项目交付物已打包' },
|
||||
]
|
||||
},
|
||||
|
||||
// 9. 项目经理
|
||||
{
|
||||
agent: () => developerAgents[8],
|
||||
outputs: [
|
||||
{ type: 'info', content: '📊 项目经理进行项目总结...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '项目执行情况汇总:' },
|
||||
{ type: 'output', content: ' • 开发周期：6个月（按计划完成）' },
|
||||
{ type: 'output', content: ' • 团队规模：9人（需求1人、产品1人、架构1人、UI1人、前端3人、后端4人、测试2人）' },
|
||||
{ type: 'output', content: ' • 代码量：前端18,000行，后端32,000行' },
|
||||
{ type: 'output', content: ' • 交付成果：28个页面、48个API、6个微服务' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '核心指标达成情况:' },
|
||||
{ type: 'output', content: ' ✓ 支持并发：10万+在线用户（目标达成）' },
|
||||
{ type: 'output', content: ' ✓ 响应时间：平均200ms（优于目标500ms）' },
|
||||
{ type: 'output', content: ' ✓ 直播延迟：<3秒（达成目标）' },
|
||||
{ type: 'output', content: ' ✓ 系统可用性：99.9%（SLA达标）' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '项目亮点与创新:' },
|
||||
{ type: 'output', content: ' • AI助教：基于GPT的智能答疑，准确率85%' },
|
||||
{ type: 'output', content: ' • 智能推荐：协同过滤算法，课程点击率提升40%' },
|
||||
{ type: 'output', content: ' • 学习路径：知识图谱建模，个性化学习计划' },
|
||||
{ type: 'output', content: ' • 家校互动：实时消息推送，家长满意度92%' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '后续迭代规划:' },
|
||||
{ type: 'output', content: ' V2.0（+3个月）：AI批改作业、智能组卷、学情分析' },
|
||||
{ type: 'output', content: ' V3.0（+6个月）：VR虚拟课堂、多人协作白板、AI口语陪练' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 项目验收通过！' },
|
||||
{ type: 'success', content: '✓ 已覆盖120所学校，注册用户15万+' },
|
||||
{ type: 'success', content: '✓ 客户满意度：4.8/5.0' },
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
// 完成序列
|
||||
completionSequence: [
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '🎉 K12在线教育平台开发项目圆满完成！' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '项目成果总结:' },
|
||||
{ type: 'output', content: ' • 技术架构：Vue3 + Spring Cloud微服务架构' },
|
||||
{ type: 'output', content: ' • 核心功能：直播授课、录播回放、作业管理、AI助教' },
|
||||
{ type: 'output', content: ' • 性能指标：支持10万+并发，响应时间<500ms' },
|
||||
{ type: 'output', content: ' • 安全保障：通过OWASP安全测试，数据加密传输' },
|
||||
{ type: 'output', content: ' • 用户规模：覆盖120所学校，注册用户15万+' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'output', content: '交付物清单:' },
|
||||
{ type: 'output', content: ' ✓ 完整源代码（前端+后端+数据库）' },
|
||||
{ type: 'output', content: ' ✓ 技术文档（180页）' },
|
||||
{ type: 'output', content: ' ✓ 部署脚本（Docker + K8s）' },
|
||||
{ type: 'output', content: ' ✓ 演示视频（12分钟）' },
|
||||
{ type: 'output', content: ' ✓ 运维手册与培训材料' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '感谢9位Agent的协作，智慧课堂平台已成功上线！' },
|
||||
{ type: 'system', content: '════════════════════════════════════' },
|
||||
]
|
||||
});
|
||||
@@ -10,6 +10,9 @@ import { visualSimulation } from './visualDesign';
|
||||
import { civilEngineeringSimulation } from './civilEngineering';
|
||||
import { healthSimulation } from './health';
|
||||
import { energySimulation } from './energy';
|
||||
import { transportationSimulation } from './transportation';
|
||||
import { intelligentManufacturingSimulation } from './intelligentManufacturing';
|
||||
import { developerSimulation } from './developer';
|
||||
|
||||
// 终端行类型定义
|
||||
export interface TerminalLine {
|
||||
@@ -53,6 +56,9 @@ export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
civil: civilEngineeringSimulation, // 土木
|
||||
health: healthSimulation, // 大健康
|
||||
energy: energySimulation, // 能源
|
||||
transportation: transportationSimulation, // 交通物流
|
||||
manufacturing: intelligentManufacturingSimulation, // 智能制造
|
||||
developer: developerSimulation, // 智能开发
|
||||
// 其他订单班暂未实现，缺少agent prompt和头像数据
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,340 @@
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData, TerminalLine } from './index';
|
||||
|
||||
// 智能制造订单班专属Agent配置
|
||||
const intelligentManufacturingAgents: Agent[] = [
|
||||
{
|
||||
id: 'manufacturing_control_engineer',
|
||||
name: '自动化控制工程师',
|
||||
icon: '⚙️',
|
||||
avatar: '/data/订单班文档资料/智能制造/agent头像/自动化控制工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '系统架构与控制逻辑设计',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'manufacturing_plc_engineer',
|
||||
name: 'PLC工程师',
|
||||
icon: '🔌',
|
||||
avatar: '/data/订单班文档资料/智能制造/agent头像/PLC工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'PLC编程与梯形图开发',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'manufacturing_robot_engineer',
|
||||
name: '机器人调试工程师',
|
||||
icon: '🤖',
|
||||
avatar: '/data/订单班文档资料/智能制造/agent头像/机器人调试工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'RAPID编程与机器人调试',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'manufacturing_data_technician',
|
||||
name: '数据采集自动化技术员',
|
||||
icon: '📊',
|
||||
avatar: '/data/订单班文档资料/智能制造/agent头像/数据采集自动化技术员.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'I/O配置与通信调试',
|
||||
status: 'waiting',
|
||||
},
|
||||
];
|
||||
|
||||
export const intelligentManufacturingSimulation = (): SimulationData => {
|
||||
const agents = intelligentManufacturingAgents;
|
||||
|
||||
return {
|
||||
orderClassId: 'intelligent_manufacturing',
|
||||
orderClassName: '智能制造',
|
||||
projectTitle: '物流输送线节拍优化的PLC与机器人联合调试',
|
||||
agents,
|
||||
|
||||
startupSequence: [
|
||||
{ type: 'info', content: '🚀 启动汽车零部件智能分拣系统...' },
|
||||
{ type: 'system', content: '初始化多Agent协作框架' },
|
||||
{ type: 'success', content: '✓ 系统核心加载完成' },
|
||||
{ type: 'system', content: '加载专业知识库: PLC控制/工业机器人/Profinet通信/节拍优化' },
|
||||
{ type: 'progress', content: '████████████████████ 100%', duration: 1500 },
|
||||
{ type: 'success', content: '✓ 知识库加载完成' },
|
||||
{ type: 'info', content: '连接工业设备...' },
|
||||
{ type: 'system', content: '├─ 西门子 S7-1500 PLC (Profinet Controller)' },
|
||||
{ type: 'system', content: '├─ ABB IRB 2600 工业机器人 (12-20kg负载)' },
|
||||
{ type: 'system', content: '├─ 输送带驱动系统 (伺服控制)' },
|
||||
{ type: 'system', content: '└─ 传感器网络 (光电/安全门/急停)' },
|
||||
{ type: 'success', content: '✓ 设备连接成功' },
|
||||
{ type: 'warning', content: '⚡ 检测到需求: 汽车零部件自动分拣' },
|
||||
{ type: 'info', content: '核心目标: 输送带与机器人节拍同步优化' },
|
||||
{ type: 'info', content: '技术挑战: PLC-机器人握手协议 + 节拍≥3600件/h' },
|
||||
{ type: 'info', content: '正在分配4位工业自动化专家Agent...' },
|
||||
] as TerminalLine[],
|
||||
|
||||
agentSequence: [
|
||||
// Agent 1: 自动化控制工程师
|
||||
{
|
||||
agent: () => agents[0],
|
||||
outputs: [
|
||||
{ type: 'system', content: '⚙️ 自动化控制工程师 正在设计系统架构...' },
|
||||
{ type: 'info', content: '任务: 整体控制逻辑设计与设备选型' },
|
||||
{ type: 'progress', content: '分析生产节拍需求...', duration: 1200 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🏭 汽车物流产线运输场景',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/汽车物流产线运输图.jpg',
|
||||
imageAlt: '汽车零部件物流产线运输示意图'
|
||||
},
|
||||
{ type: 'success', content: '✓ 系统架构设计完成' },
|
||||
{ type: 'info', content: '系统组成:' },
|
||||
{ type: 'output', content: ' • 输送带系统: 连续输送 + 定位停止' },
|
||||
{ type: 'output', content: ' • PLC控制系统: 西门子 S7-1500 (CPU 1512C-1 PN)' },
|
||||
{ type: 'output', content: ' • 工业机器人: ABB IRB 2600 (负载12-20kg, 精度±0.04mm)' },
|
||||
{ type: 'output', content: ' • 通信协议: Profinet I/O (PLC ↔ Robot)' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🔧 汽车零部件展示',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/汽车零部件展示.jpg',
|
||||
imageAlt: '待分拣的汽车零部件'
|
||||
},
|
||||
{ type: 'success', content: '✓ 6大控制逻辑模块设计:' },
|
||||
{ type: 'output', content: ' 1️⃣ 启停与安全联锁 (急停/安全门/过载保护)' },
|
||||
{ type: 'output', content: ' 2️⃣ 输送带运行控制 (定位光电触发即停)' },
|
||||
{ type: 'output', content: ' 3️⃣ 零件就位信号 (PartReady握手)' },
|
||||
{ type: 'output', content: ' 4️⃣ 启动允许信号 (StartAllow三条件联锁)' },
|
||||
{ type: 'output', content: ' 5️⃣ 机器人动作反馈 (PickDone完成信号)' },
|
||||
{ type: 'output', content: ' 6️⃣ 故障处理与复位 (报警优先级 + 复位机制)' },
|
||||
{ type: 'success', content: '✓ 节拍优化策略:' },
|
||||
{ type: 'output', content: ' • 输送带速度与机器人抓取周期匹配' },
|
||||
{ type: 'output', content: ' • 三条件联锁保证同步 (RobotReady + PartReady + StartAllow)' },
|
||||
{ type: 'output', content: ' • 完成信号触发续行 (PickDone → 清握手 → 输送带重启)' },
|
||||
{ type: 'output', content: ' • 目标节拍: ≥3600件/h (单件周期≤1秒)' },
|
||||
{ type: 'success', content: '✓ 系统架构设计文档已生成' },
|
||||
]
|
||||
},
|
||||
|
||||
// Agent 2: PLC工程师
|
||||
{
|
||||
agent: () => agents[1],
|
||||
outputs: [
|
||||
{ type: 'system', content: '🔌 PLC工程师 正在编写控制程序...' },
|
||||
{ type: 'info', content: '任务: S7-1500 PLC编程与梯形图开发' },
|
||||
{ type: 'progress', content: '配置I/O点位分配表...', duration: 1000 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🖥️ 西门子 S7-1500 PLC控制器',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/PLC控制器.jpg',
|
||||
imageAlt: '西门子 SIMATIC S7-1500 PLC'
|
||||
},
|
||||
{ type: 'success', content: '✓ I/O分配表配置完成:' },
|
||||
{ type: 'info', content: '输入点位 (11点):' },
|
||||
{ type: 'output', content: ' • I0.0: SB1 启动按钮' },
|
||||
{ type: 'output', content: ' • I0.1: SB2 停止按钮 (常闭)' },
|
||||
{ type: 'output', content: ' • I0.2: ES 急停 (常闭)' },
|
||||
{ type: 'output', content: ' • I0.3: GS 安全门 (常闭)' },
|
||||
{ type: 'output', content: ' • I0.4: FR 过载保护 (常闭)' },
|
||||
{ type: 'output', content: ' • I0.5: PE1 入口光电 (来料检测)' },
|
||||
{ type: 'output', content: ' • I0.6: PE2 定位光电 (取料位到位)' },
|
||||
{ type: 'output', content: ' • I0.7: SB3 复位按钮' },
|
||||
{ type: 'output', content: ' • I1.0: RobotReady (机器人就绪反馈)' },
|
||||
{ type: 'output', content: ' • I1.1: PickDone (分拣完成反馈)' },
|
||||
{ type: 'output', content: ' • I1.2: RobotFault (机器人故障报警)' },
|
||||
{ type: 'info', content: '输出点位 (6点):' },
|
||||
{ type: 'output', content: ' • Q0.0: KM1 输送带接触器' },
|
||||
{ type: 'output', content: ' • Q0.1: HL1 报警指示灯' },
|
||||
{ type: 'output', content: ' • Q0.2: HL2 运行指示灯' },
|
||||
{ type: 'output', content: ' • Q0.3: StartAllow → Robot (启动允许握手)' },
|
||||
{ type: 'output', content: ' • Q0.4: PartReady → Robot (零件就位握手)' },
|
||||
{ type: 'output', content: ' • Q0.5: PLC_Reset → Robot (复位命令握手)' },
|
||||
{ type: 'success', content: '✓ 梯形图程序编制完成 (6个网络):' },
|
||||
{ type: 'output', content: ' 网络1: 运行允许与自保持 (RUN_EN + 运行灯)' },
|
||||
{ type: 'output', content: ' 网络2: 输送带控制 (定位即停逻辑)' },
|
||||
{ type: 'output', content: ' 网络3: PartReady输出 (零件就位信号)' },
|
||||
{ type: 'output', content: ' 网络4: StartAllow输出 (三条件联锁)' },
|
||||
{ type: 'output', content: ' 网络5: 分拣完成处理 (清握手 + 续行)' },
|
||||
{ type: 'output', content: ' 网络6: 报警与复位 (故障优先 + 复位脉冲0.7s)' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📋 Mermaid控制流程图',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/Mermaid流程图.jpg',
|
||||
imageAlt: 'PLC与机器人联合调试控制流程图'
|
||||
},
|
||||
{ type: 'success', content: '✓ 安全联锁逻辑:' },
|
||||
{ type: 'output', content: ' • 五合一安全联锁: SB2(停止) + ES(急停) + GS(安全门) + FR(过载) + RobotFault' },
|
||||
{ type: 'output', content: ' • 任一条件异常 → RUN_EN复位 → 输送带停止 + 握手信号清除' },
|
||||
{ type: 'output', content: ' • 报警灯HL1点亮 → 必须复位后才能重启' },
|
||||
{ type: 'success', content: '✓ PLC程序下载至S7-1500控制器' },
|
||||
]
|
||||
},
|
||||
|
||||
// Agent 3: 机器人调试工程师
|
||||
{
|
||||
agent: () => agents[2],
|
||||
outputs: [
|
||||
{ type: 'system', content: '🤖 机器人调试工程师 正在编写RAPID程序...' },
|
||||
{ type: 'info', content: '任务: ABB IRB 2600 机器人编程与路径调试' },
|
||||
{ type: 'progress', content: '配置I/O映射与坐标系统...', duration: 1100 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🦾 ABB IRB 2600 工业机器人',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/工业机器人.jpg',
|
||||
imageAlt: 'ABB IRB 2600 六轴工业机器人'
|
||||
},
|
||||
{ type: 'success', content: '✓ 机器人参数:' },
|
||||
{ type: 'output', content: ' • 型号: ABB IRB 2600' },
|
||||
{ type: 'output', content: ' • 负载: 12-20 kg' },
|
||||
{ type: 'output', content: ' • 工作半径: 1.65 m' },
|
||||
{ type: 'output', content: ' • 重复精度: ±0.04 mm' },
|
||||
{ type: 'output', content: ' • 控制器: ABB IRC5' },
|
||||
{ type: 'output', content: ' • 编程语言: RAPID' },
|
||||
{ type: 'success', content: '✓ I/O信号映射 (Profinet Device):' },
|
||||
{ type: 'info', content: '输入信号 (从PLC接收):' },
|
||||
{ type: 'output', content: ' • DI1: diStartAllow ← PLC.Q0.3' },
|
||||
{ type: 'output', content: ' • DI2: diPartReady ← PLC.Q0.4' },
|
||||
{ type: 'output', content: ' • DI3: diPLC_Reset ← PLC.Q0.5' },
|
||||
{ type: 'info', content: '输出信号 (发送给PLC):' },
|
||||
{ type: 'output', content: ' • DO1: doRobotReady → PLC.I1.0' },
|
||||
{ type: 'output', content: ' • DO2: doPickDone → PLC.I1.1' },
|
||||
{ type: 'output', content: ' • DO3: doRobotFault → PLC.I1.2' },
|
||||
{ type: 'success', content: '✓ RAPID程序结构:' },
|
||||
{ type: 'output', content: ' PROC main():' },
|
||||
{ type: 'output', content: ' 1. 上电初始化 → doRobotReady=1' },
|
||||
{ type: 'output', content: ' 2. 移动至Home位 (待机位)' },
|
||||
{ type: 'output', content: ' 3. WHILE循环:' },
|
||||
{ type: 'output', content: ' - 检测PLC复位信号 (diPLC_Reset)' },
|
||||
{ type: 'output', content: ' - 等待启动条件 (diStartAllow AND diPartReady)' },
|
||||
{ type: 'output', content: ' - 执行取件流程 (MoveJ pPick)' },
|
||||
{ type: 'output', content: ' - 执行放置流程 (MoveJ pDrop)' },
|
||||
{ type: 'output', content: ' - 发送完成信号 (doPickDone脉冲0.2s)' },
|
||||
{ type: 'output', content: ' - 返回Home位' },
|
||||
{ type: 'output', content: ' 4. 故障陷阱 TRAP TrapSetFault' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🔄 传送带上的零部件流转',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/传送带上的汽车零部件.jpg',
|
||||
imageAlt: '输送带上的汽车零部件等待机器人抓取'
|
||||
},
|
||||
{ type: 'success', content: '✓ 关键点位定义 (robtarget):' },
|
||||
{ type: 'output', content: ' • pHome: [0, 0, 500] - 待机位(安全高度)' },
|
||||
{ type: 'output', content: ' • pPick: [300, 0, 100] - 取件位(输送带上方)' },
|
||||
{ type: 'output', content: ' • pDrop: [600, 200, 100] - 放置位(分拣仓)' },
|
||||
{ type: 'success', content: '✓ 握手时序协同:' },
|
||||
{ type: 'output', content: ' • PLC检测到零件就位 → PartReady=1' },
|
||||
{ type: 'output', content: ' • PLC确认安全条件 → StartAllow=1' },
|
||||
{ type: 'output', content: ' • Robot检测双信号 → 开始抓取动作' },
|
||||
{ type: 'output', content: ' • Robot完成抓取 → PickDone脉冲' },
|
||||
{ type: 'output', content: ' • PLC收到脉冲 → 清握手 + 输送带续行' },
|
||||
{ type: 'success', content: '✓ RAPID程序下载至IRC5控制器' },
|
||||
]
|
||||
},
|
||||
|
||||
// Agent 4: 数据采集自动化技术员
|
||||
{
|
||||
agent: () => agents[3],
|
||||
outputs: [
|
||||
{ type: 'system', content: '📊 数据采集自动化技术员 正在配置通信与调试...' },
|
||||
{ type: 'info', content: '任务: Profinet通信配置与系统联调' },
|
||||
{ type: 'progress', content: '配置TIA Portal GSDML文件...', duration: 1000 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🌐 Profinet通信程序配置',
|
||||
imageSrc: '/data/订单班文档资料/智能制造/notion文稿/image/通信程序示意图.jpg',
|
||||
imageAlt: 'PLC与机器人Profinet通信架构示意图'
|
||||
},
|
||||
{ type: 'success', content: '✓ Profinet网络架构:' },
|
||||
{ type: 'output', content: ' • PLC S7-1500: Profinet Controller (主站)' },
|
||||
{ type: 'output', content: ' • ABB IRC5: Profinet Device (从站)' },
|
||||
{ type: 'output', content: ' • 循环周期: 10ms (高速I/O更新)' },
|
||||
{ type: 'output', content: ' • 数据帧: 6字节输出 + 3字节输入' },
|
||||
{ type: 'success', content: '✓ TIA Portal配置步骤:' },
|
||||
{ type: 'output', content: ' 1. 导入ABB IRC5的GSDML设备描述文件' },
|
||||
{ type: 'output', content: ' 2. 在硬件组态中添加Profinet Device' },
|
||||
{ type: 'output', content: ' 3. 映射I/O地址 (Q0.3-Q0.5 → Robot输入, I1.0-I1.2 ← Robot输出)' },
|
||||
{ type: 'output', content: ' 4. 配置设备IP地址 (192.168.1.10)' },
|
||||
{ type: 'output', content: ' 5. 编译并下载硬件组态到PLC' },
|
||||
{ type: 'success', content: '✓ 系统联调测试:' },
|
||||
{ type: 'info', content: '阶段1: 通信链路测试' },
|
||||
{ type: 'output', content: ' • Profinet连接状态: ✓ 绿灯 (连接正常)' },
|
||||
{ type: 'output', content: ' • I/O数据交换: ✓ 循环更新10ms周期' },
|
||||
{ type: 'output', content: ' • 诊断缓冲区: ✓ 无通信错误' },
|
||||
{ type: 'info', content: '阶段2: 握手逻辑验证' },
|
||||
{ type: 'output', content: ' • 测试1: RobotReady信号 → ✓ PLC正确接收' },
|
||||
{ type: 'output', content: ' • 测试2: PartReady + StartAllow → ✓ Robot正确响应' },
|
||||
{ type: 'output', content: ' • 测试3: PickDone脉冲 → ✓ PLC清握手并续行' },
|
||||
{ type: 'output', content: ' • 测试4: PLC_Reset信号 → ✓ Robot故障清除' },
|
||||
{ type: 'info', content: '阶段3: 节拍性能测试' },
|
||||
{ type: 'output', content: ' • 单件周期: 0.95s (取件0.3s + 放置0.4s + 返回0.25s)' },
|
||||
{ type: 'output', content: ' • 实测节拍: 3789件/h ✓ (目标≥3600件/h)' },
|
||||
{ type: 'output', content: ' • 同步误差: ±15ms (握手时延控制良好)' },
|
||||
{ type: 'success', content: '✓ 数据记录与追溯:' },
|
||||
{ type: 'output', content: ' • 累计分拣数量: DB1.DBD0 (双字计数器)' },
|
||||
{ type: 'output', content: ' • 故障代码记录: DB2.DBB0 (报警历史)' },
|
||||
{ type: 'output', content: ' • 节拍时间戳: DB3 (周期统计)' },
|
||||
{ type: 'success', content: '✓ 安全逻辑验证:' },
|
||||
{ type: 'output', content: ' • 急停测试: ✓ 输送带+机器人立即停止' },
|
||||
{ type: 'output', content: ' • 安全门测试: ✓ 联锁触发,握手信号清除' },
|
||||
{ type: 'output', content: ' • 过载保护测试: ✓ 报警灯点亮,系统停机' },
|
||||
{ type: 'output', content: ' • 复位流程测试: ✓ 故障清除后可正常重启' },
|
||||
{ type: 'success', content: '✓ 系统联调完成,满足生产节拍要求' },
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
completionSequence: [
|
||||
{ type: 'system', content: '=' + '='.repeat(69) },
|
||||
{ type: 'success', content: '🎉 汽车零部件智能分拣系统调试完成！' },
|
||||
{ type: 'system', content: '=' + '='.repeat(69) },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '🎯 系统核心指标:' },
|
||||
{ type: 'success', content: '✓ 实测节拍: 3789件/h (超出目标3600件/h 5.3%)' },
|
||||
{ type: 'success', content: '✓ 单件周期: 0.95s (取件+放置+返回)' },
|
||||
{ type: 'success', content: '✓ 定位精度: ±0.04mm (ABB IRB 2600重复精度)' },
|
||||
{ type: 'success', content: '✓ 同步误差: ±15ms (PLC-Robot握手时延)' },
|
||||
{ type: 'success', content: '✓ 通信周期: 10ms (Profinet高速I/O更新)' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '⚙️ 技术架构亮点:' },
|
||||
{ type: 'output', content: ' • PLC主控: 西门子 S7-1500 (CPU 1512C-1 PN)' },
|
||||
{ type: 'output', content: ' • 工业机器人: ABB IRB 2600 (12-20kg负载, 1.65m半径)' },
|
||||
{ type: 'output', content: ' • 通信协议: Profinet I/O (Controller ↔ Device)' },
|
||||
{ type: 'output', content: ' • 控制语言: 梯形图(PLC) + RAPID(Robot)' },
|
||||
{ type: 'output', content: ' • 安全联锁: 五合一联锁(急停/安全门/过载/停止/机器人故障)' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '🔄 节拍优化策略:' },
|
||||
{ type: 'output', content: ' 1. 三条件联锁同步: RobotReady + PartReady + StartAllow' },
|
||||
{ type: 'output', content: ' 2. 定位即停逻辑: 光电触发 → 输送带精准停止' },
|
||||
{ type: 'output', content: ' 3. 完成信号续行: PickDone脉冲 → 清握手 → 输送带重启' },
|
||||
{ type: 'output', content: ' 4. 速度匹配机制: 输送带速度 = 机器人周期 × 零件间距' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '🛡️ 安全保护机制:' },
|
||||
{ type: 'output', content: ' • 故障优先级: 急停 > 安全门 > 过载 > 机器人故障' },
|
||||
{ type: 'output', content: ' • 联锁响应时间: <50ms (符合安全SIL2标准)' },
|
||||
{ type: 'output', content: ' • 报警与复位: 故障锁存 + 复位确认 + 清除反馈' },
|
||||
{ type: 'output', content: ' • 防呆设计: 三条件同时满足才允许机器人动作' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '📋 交付物清单:' },
|
||||
{ type: 'output', content: ' 1. PLC程序 (TIA Portal项目文件 + 梯形图源码)' },
|
||||
{ type: 'output', content: ' 2. Robot程序 (RAPID源码 + 点位数据备份)' },
|
||||
{ type: 'output', content: ' 3. Profinet配置 (GSDML文件 + 硬件组态)' },
|
||||
{ type: 'output', content: ' 4. I/O分配表 (输入11点 + 输出6点)' },
|
||||
{ type: 'output', content: ' 5. 控制流程图 (Mermaid图 + 逻辑说明文档)' },
|
||||
{ type: 'output', content: ' 6. 调试报告 (通信测试 + 握手验证 + 节拍测试)' },
|
||||
{ type: 'output', content: ' 7. 操作手册 (启停流程 + 故障处理 + 日常维护)' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'info', content: '🎓 技术创新点:' },
|
||||
{ type: 'output', content: ' • Profinet高速通信: 10ms周期实现PLC-Robot无缝协同' },
|
||||
{ type: 'output', content: ' • 智能握手协议: 三信号联锁确保节拍同步与安全' },
|
||||
{ type: 'output', content: ' • 定位即停技术: 光电传感器 + 伺服控制实现±2mm定位精度' },
|
||||
{ type: 'output', content: ' • 故障自恢复: PLC复位信号 + Robot错误清除 + 自动回Home位' },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
{ type: 'success', content: '✅ 完整方案已保存至: /projects/intelligent_manufacturing/logistics_sorting.pdf' },
|
||||
{ type: 'info', content: '📄 附件包含: PLC程序/Robot程序/Profinet配置/I/O表/调试报告' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '🏭 系统已具备量产条件,可投入24小时连续生产!' },
|
||||
] as TerminalLine[]
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,435 @@
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData } from './index';
|
||||
|
||||
// 交通物流订单班专属Agent配置
|
||||
const transportationAgents: Agent[] = [
|
||||
{
|
||||
id: 'req_analyst',
|
||||
name: '需求分析师',
|
||||
icon: '📋',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/需求分析工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '业务需求建模与系统目标拆解',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'sys_architect',
|
||||
name: '系统架构师',
|
||||
icon: '🏗️',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/系统架构师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '系统总体架构设计与技术选型',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'agv_algorithm',
|
||||
name: 'AGV算法与调度工程师',
|
||||
icon: '🤖',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/AGV算法与调度工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: 'AGV导航与路径调度算法设计',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'energy_engineer',
|
||||
name: '能源与充电系统工程师',
|
||||
icon: '⚡',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/能源与充电系统工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '智能充电调度与能源管理',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'coldchain_director',
|
||||
name: '冷链设备技术总监',
|
||||
icon: '❄️',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/冷链设备技术总监.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '冷链环境适配与温控系统',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'rd_engineer',
|
||||
name: '技术研发工程师',
|
||||
icon: '⚙️',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/技术研发工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '软件/嵌入式/PLC功能实现',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'integration_engineer',
|
||||
name: '系统集成工程师',
|
||||
icon: '🔗',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/系统集成工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '多系统集成与接口联动',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'visual_designer',
|
||||
name: '视觉设计工程师',
|
||||
icon: '🎨',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/视觉设计工程师.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '技术文档与图文输出',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'tech_reviewer',
|
||||
name: '技术审批专家',
|
||||
icon: '✅',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/技术审批专家.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '技术方案评审与风险控制',
|
||||
status: 'waiting',
|
||||
},
|
||||
{
|
||||
id: 'project_manager',
|
||||
name: '项目经理',
|
||||
icon: '📊',
|
||||
avatar: '/data/订单班文档资料/交通物流/agent头像/项目经理.jpg',
|
||||
model: 'GPT-4',
|
||||
role: '项目规划与任务协调',
|
||||
status: 'waiting',
|
||||
},
|
||||
];
|
||||
|
||||
export const transportationSimulation = (): SimulationData => ({
|
||||
orderClassId: 'transportation',
|
||||
orderClassName: '交通物流',
|
||||
projectTitle: '冷链智慧共配中心"百车级"AGV全局交通管制与充电调度系统设计',
|
||||
agents: transportationAgents,
|
||||
|
||||
startupSequence: [
|
||||
{ type: 'system', content: '初始化AGV智能调度系统...' },
|
||||
{ type: 'system', content: '加载冷链环境配置(-25°C)...' },
|
||||
{ type: 'system', content: '连接120台AGV设备...' },
|
||||
{ type: 'system', content: '$ npm run start-agv-system' },
|
||||
{ type: 'success', content: '✓ AGV调度系统已启动' },
|
||||
{ type: 'system', content: '项目启动: 某冷链智慧共配中心"百车级"AGV全局交通管制与充电调度系统' },
|
||||
{ type: 'info', content: '目标: 构建支持120+台AGV混行调度的智能系统' }
|
||||
],
|
||||
|
||||
agentSequence: [
|
||||
{
|
||||
agent: () => transportationAgents[0],
|
||||
outputs: [
|
||||
{ type: 'info', content: '📋 需求分析师开始分析业务需求...' },
|
||||
{ type: 'output', content: '识别核心痛点:' },
|
||||
{ type: 'output', content: ' • 人工拣选效率仅为常温区55%' },
|
||||
{ type: 'output', content: ' • 日出件量将达18万件' },
|
||||
{ type: 'output', content: ' • 预计2025年药房数量增至3000家' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '系统目标拆解:' },
|
||||
{ type: 'output', content: ' • 支持120台多车型AGV混行' },
|
||||
{ type: 'output', content: ' • 全局路径优化与交通管制' },
|
||||
{ type: 'output', content: ' • 智能充电调度' },
|
||||
{ type: 'output', content: ' • 冷链环境(-25°C)稳定运行' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '冷链解决方案示意',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/冷链方案示意图.jpg',
|
||||
imageAlt: '冷链智慧共配中心方案'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ 需求分析完成,输出业务目标与功能清单' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[1],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🏗️ 系统架构师设计总体架构...' },
|
||||
{ type: 'output', content: '设计五层架构体系:' },
|
||||
{ type: 'output', content: ' • 接入层: ERP/MES/WMS/TMS系统对接' },
|
||||
{ type: 'output', content: ' • 业务层: IWMS仓储管理 + TMS交通管理' },
|
||||
{ type: 'output', content: ' • 调度层: RCS设备调度 + WCS设备控制' },
|
||||
{ type: 'output', content: ' • 设备层: AGV执行 + 充电管理' },
|
||||
{ type: 'output', content: ' • 算法平台: 路径优化 + 充电算法' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '物流业务架构图',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/物流业务架构图.jpg',
|
||||
imageAlt: 'AGV系统五层架构'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '技术选型:' },
|
||||
{ type: 'output', content: ' • 导航: 激光SLAM + IMU + 二维码融合' },
|
||||
{ type: 'output', content: ' • 通信: MQTT + RESTful API' },
|
||||
{ type: 'output', content: ' • 算法: A*/Dijkstra路径规划' },
|
||||
{ type: 'success', content: '✓ 系统架构设计完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[2],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🤖 AGV算法工程师设计调度算法...' },
|
||||
{ type: 'output', content: 'AGV导航系统设计:' },
|
||||
{ type: 'output', content: ' • 激光SLAM高精度定位' },
|
||||
{ type: 'output', content: ' • 低温环境误差补偿机制' },
|
||||
{ type: 'output', content: ' • IMU传感器融合导航' },
|
||||
{ type: 'output', content: ' • 二维码辅助定位' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '路径规划与调度:' },
|
||||
{ type: 'output', content: ' • 网格地图建模' },
|
||||
{ type: 'output', content: ' • A*算法实时路径规划' },
|
||||
{ type: 'output', content: ' • 动态任务优先级调度' },
|
||||
{ type: 'output', content: ' • 拥堵绕行机制' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: 'AGV控制逻辑图',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/AGV逻辑图.jpg',
|
||||
imageAlt: 'AGV路径规划与调度逻辑'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '交通管制系统:' },
|
||||
{ type: 'output', content: ' • 十字路口信号控制' },
|
||||
{ type: 'output', content: ' • AGV抢占与让行策略' },
|
||||
{ type: 'output', content: ' • 冲突检测与死锁避免' },
|
||||
{ type: 'output', content: ' • 路径可通性判断' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '交通管制系统逻辑',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/交通管制系统逻辑图.jpg',
|
||||
imageAlt: '十字路口交通管制策略'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '仿真模拟验证:' },
|
||||
{ type: 'output', content: ' • 120台AGV并发仿真' },
|
||||
{ type: 'output', content: ' • 路径冲突场景测试' },
|
||||
{ type: 'output', content: ' • 高峰期调度优化' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '仿真模拟平台',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/仿真模拟平台示意图.jpg',
|
||||
imageAlt: 'AGV仿真模拟平台'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ AGV算法设计完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[3],
|
||||
outputs: [
|
||||
{ type: 'info', content: '⚡ 能源工程师设计充电管理系统...' },
|
||||
{ type: 'output', content: '智能充电策略:' },
|
||||
{ type: 'output', content: ' • 双模式充电: 快充1.5C + 慢充0.5C' },
|
||||
{ type: 'output', content: ' • 电量实时监测(SOC/SOH)' },
|
||||
{ type: 'output', content: ' • 优先级排队调度' },
|
||||
{ type: 'output', content: ' • 预测性充电时机' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '充电管理系统逻辑',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/充电管理系统逻辑图.jpg',
|
||||
imageAlt: '智能充电调度系统'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '低温充电保护:' },
|
||||
{ type: 'output', content: ' • 环境温度分级监测' },
|
||||
{ type: 'output', content: ' • 电池预热机制' },
|
||||
{ type: 'output', content: ' • 限流分段充电' },
|
||||
{ type: 'output', content: ' • 异常断充重试' },
|
||||
{ type: 'success', content: '✓ 充电管理系统设计完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[4],
|
||||
outputs: [
|
||||
{ type: 'info', content: '❄️ 冷链技术总监设计环境适配方案...' },
|
||||
{ type: 'output', content: '冷链环境感知:' },
|
||||
{ type: 'output', content: ' • 温湿度实时监测' },
|
||||
{ type: 'output', content: ' • 结霜检测传感器' },
|
||||
{ type: 'output', content: ' • 环境数据可视化' },
|
||||
{ type: 'output', content: ' • GSP/GDP合规追溯' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: 'AGV低温适配:' },
|
||||
{ type: 'output', content: ' • 设备防冻防雾处理' },
|
||||
{ type: 'output', content: ' • 电池保温加热设计' },
|
||||
{ type: 'output', content: ' • 激光头/摄像头防护' },
|
||||
{ type: 'output', content: ' • 抗老化材料选型' },
|
||||
{ type: 'success', content: '✓ 冷链环境适配方案完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[5],
|
||||
outputs: [
|
||||
{ type: 'info', content: '⚙️ 研发工程师实现核心功能...' },
|
||||
{ type: 'output', content: '上位调度平台开发:' },
|
||||
{ type: 'output', content: ' • 任务控制模块' },
|
||||
{ type: 'output', content: ' • 路径状态更新' },
|
||||
{ type: 'output', content: ' • AGV状态监控面板' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '嵌入式AGV控制:' },
|
||||
{ type: 'output', content: ' • 导航控制算法' },
|
||||
{ type: 'output', content: ' • 速度调节模块' },
|
||||
{ type: 'output', content: ' • 电量回传接口' },
|
||||
{ type: 'output', content: ' • 环境监测集成' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: 'PLC设备控制:' },
|
||||
{ type: 'output', content: ' • 货架搬运流程' },
|
||||
{ type: 'output', content: ' • 升降机逻辑' },
|
||||
{ type: 'output', content: ' • 充电桩开关控制' },
|
||||
{ type: 'output', content: ' • 安全检测机制' },
|
||||
{ type: 'success', content: '✓ 核心功能开发完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[6],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🔗 系统集成工程师设计联动方案...' },
|
||||
{ type: 'output', content: '系统集成架构:' },
|
||||
{ type: 'output', content: ' • WMS ↔ AGV调度平台' },
|
||||
{ type: 'output', content: ' • AGV平台 ↔ 充电系统' },
|
||||
{ type: 'output', content: ' • AGV平台 ↔ 冷链感知' },
|
||||
{ type: 'output', content: ' • 调度平台 ↔ 立体库控制' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '系统集成与调度架构',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/系统集成与调度.jpg',
|
||||
imageAlt: '多系统集成架构图'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '通信协议设计:' },
|
||||
{ type: 'output', content: ' • RESTful API接口' },
|
||||
{ type: 'output', content: ' • MQTT消息总线' },
|
||||
{ type: 'output', content: ' • WebSocket实时推送' },
|
||||
{ type: 'output', content: ' • 数据格式规范(JSON)' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '系统控制架构',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/系统控制架构图.jpg',
|
||||
imageAlt: '系统通信控制架构'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ 系统集成方案完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[7],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🎨 视觉设计师整理技术文档...' },
|
||||
{ type: 'output', content: '技术文档结构:' },
|
||||
{ type: 'output', content: ' • 项目背景与目标' },
|
||||
{ type: 'output', content: ' • 技术架构设计' },
|
||||
{ type: 'output', content: ' • 核心模块说明' },
|
||||
{ type: 'output', content: ' • 实施步骤规划' },
|
||||
{ type: 'output', content: ' • 系统功能展示' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '后台监控管理:' },
|
||||
{ type: 'output', content: ' • AGV实时位置追踪' },
|
||||
{ type: 'output', content: ' • 任务执行状态监控' },
|
||||
{ type: 'output', content: ' • 充电排队可视化' },
|
||||
{ type: 'output', content: ' • 异常告警面板' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '后台监控管理系统',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/后台监控与管理.jpg',
|
||||
imageAlt: 'AGV监控管理界面'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ 技术文档输出完成' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[8],
|
||||
outputs: [
|
||||
{ type: 'info', content: '✅ 技术专家进行方案评审...' },
|
||||
{ type: 'output', content: '架构评审:' },
|
||||
{ type: 'output', content: ' ✓ 五层架构逻辑清晰' },
|
||||
{ type: 'output', content: ' ✓ 模块解耦合理' },
|
||||
{ type: 'output', content: ' ✓ 接口定义明确' },
|
||||
{ type: 'output', content: ' ✓ 支持业务扩展' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '技术选型评估:' },
|
||||
{ type: 'output', content: ' ✓ 导航方式适合低温环境' },
|
||||
{ type: 'output', content: ' ✓ 通信协议兼容性良好' },
|
||||
{ type: 'output', content: ' ✓ 算法复杂度可控' },
|
||||
{ type: 'output', content: ' ✓ 冷链适配充分' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '风险评估:' },
|
||||
{ type: 'output', content: ' • 低风险: 架构设计完整' },
|
||||
{ type: 'output', content: ' • 中风险: 低温测试需充分验证' },
|
||||
{ type: 'output', content: ' • 建议: 加强仿真测试' },
|
||||
{ type: 'success', content: '✓ 技术评审通过,方案可行' }
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => transportationAgents[9],
|
||||
outputs: [
|
||||
{ type: 'info', content: '📊 项目经理制定实施计划...' },
|
||||
{ type: 'output', content: '项目周期规划:' },
|
||||
{ type: 'output', content: ' • 第1-2周: 详细设计与仿真验证' },
|
||||
{ type: 'output', content: ' • 第3-4周: AGV设备采购与系统开发' },
|
||||
{ type: 'output', content: ' • 第5-6周: 现场部署与联调测试' },
|
||||
{ type: 'output', content: ' • 第7-8周: 试运行与优化调整' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '项目实施计划',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/周期实施计划.jpg',
|
||||
imageAlt: '8周项目实施时间表'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '任务分工(RACI矩阵):' },
|
||||
{ type: 'output', content: ' • 架构师: 系统设计(R)' },
|
||||
{ type: 'output', content: ' • 算法工程师: 调度算法(R)' },
|
||||
{ type: 'output', content: ' • 研发工程师: 功能开发(R)' },
|
||||
{ type: 'output', content: ' • 集成工程师: 系统联调(R)' },
|
||||
{ type: 'output', content: ' • 技术专家: 方案评审(A)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '运维支持计划:' },
|
||||
{ type: 'output', content: ' • AGV故障排查与检修' },
|
||||
{ type: 'output', content: ' • 技术支持与指导' },
|
||||
{ type: 'output', content: ' • 系统优化与升级' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: 'AGV故障排查检修流程',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/AGV故障排查检修.jpg',
|
||||
imageAlt: 'AGV运维支持流程图'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '技术支持体系:' },
|
||||
{ type: 'output', content: ' • 7×24小时技术热线' },
|
||||
{ type: 'output', content: ' • 远程诊断与支持' },
|
||||
{ type: 'output', content: ' • 定期培训与知识转移' },
|
||||
{ type: 'info', content: '' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '技术支持体系',
|
||||
imageSrc: '/data/订单班文档资料/交通物流/notion文稿/image/技术支持与指导.jpg',
|
||||
imageAlt: '全方位技术支持服务'
|
||||
},
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ 项目实施计划完成' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
completionSequence: [
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'system', content: '项目成果总结:' },
|
||||
{ type: 'success', content: '✓ 支持120+台AGV混行调度' },
|
||||
{ type: 'success', content: '✓ 全局交通管制与路径优化' },
|
||||
{ type: 'success', content: '✓ 智能充电调度系统' },
|
||||
{ type: 'success', content: '✓ 冷链环境(-25°C)稳定运行' },
|
||||
{ type: 'success', content: '✓ 多系统无缝集成' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: '核心价值:' },
|
||||
{ type: 'info', content: ' • 物流效率提升40%' },
|
||||
{ type: 'info', content: ' • 人力成本降低60%' },
|
||||
{ type: 'info', content: ' • 支持日出件量18万件' },
|
||||
{ type: 'info', content: ' • 满足GSP/GDP合规要求' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'system', content: '某冷链智慧共配中心AGV系统设计完成!' }
|
||||
]
|
||||
});
|
||||
@@ -31,11 +31,11 @@ const generateProgressBar = (progress: number, width: number = 40) => {
|
||||
return `[${'█'.repeat(filled)}${'░'.repeat(empty)}] ${progress.toString().padStart(3, ' ')}%`;
|
||||
};
|
||||
|
||||
// 生成文件大小
|
||||
const generateFileSize = () => {
|
||||
const sizes = ['12.3KB', '456KB', '1.2MB', '3.4MB', '15.7MB', '48.2MB', '126MB'];
|
||||
return sizes[Math.floor(Math.random() * sizes.length)];
|
||||
};
|
||||
// 生成文件大小 (保留以备将来使用)
|
||||
// const generateFileSize = () => {
|
||||
// const sizes = ['12.3KB', '456KB', '1.2MB', '3.4MB', '15.7MB', '48.2MB', '126MB'];
|
||||
// return sizes[Math.floor(Math.random() * sizes.length)];
|
||||
// };
|
||||
|
||||
const WorkflowPageV4 = () => {
|
||||
const { agents, startDemo, pauseDemo, resumeDemo, reset, status, setSelectedOrderClass, selectedOrderClass } = useDemoStore();
|
||||
@@ -45,19 +45,19 @@ const WorkflowPageV4 = () => {
|
||||
const [isExecuting, setIsExecuting] = useState(false);
|
||||
const [showRequirementModal, setShowRequirementModal] = useState(false);
|
||||
const [showResultModal, setShowResultModal] = useState(false);
|
||||
const [userRequirement, setUserRequirement] = useState('');
|
||||
const [, setUserRequirement] = useState('');
|
||||
const [imageLoadingStates, setImageLoadingStates] = useState<{ [key: string]: boolean }>({});
|
||||
const [logoClickCount, setLogoClickCount] = useState(0);
|
||||
const [showFloatingButton, setShowFloatingButton] = useState(false);
|
||||
const [terminalData, setTerminalData] = useState<any>(null);
|
||||
const [loadingData, setLoadingData] = useState(false);
|
||||
const [, setLoadingData] = useState(false);
|
||||
const [dataLoadError, setDataLoadError] = useState<string | null>(null);
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
const intervalRef = useRef<number | null>(null);
|
||||
// const intervalRef = useRef<number | null>(null);
|
||||
const progressLineIdRef = useRef<string | null>(null);
|
||||
const logoClickTimerRef = useRef<number | null>(null);
|
||||
const statusRef = useRef(status);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
// const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
// 更新 statusRef
|
||||
useEffect(() => {
|
||||
@@ -635,7 +635,7 @@ const WorkflowPageV4 = () => {
|
||||
|
||||
if (line.type === 'progress') {
|
||||
// 进度条动画
|
||||
const target = (line as any).target || 100;
|
||||
// const target = (line as any).target || 100;
|
||||
const label = line.content;
|
||||
const stutters = (line as any).stutters || [23, 67, 89];
|
||||
await executeProgress(label, stutters);
|
||||
@@ -749,7 +749,7 @@ const WorkflowPageV4 = () => {
|
||||
|
||||
// 计时器
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
let interval: number;
|
||||
if (status === 'running') {
|
||||
interval = setInterval(() => {
|
||||
setElapsedTime(prev => prev + 1);
|
||||
@@ -1199,7 +1199,7 @@ const WorkflowPageV4 = () => {
|
||||
) : (
|
||||
<div className="px-4 py-3 bg-gray-800 border-t border-gray-700">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{terminalData.agents.map((agent, index) => (
|
||||
{terminalData.agents.map((agent: any, index: number) => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className={`flex flex-col items-center gap-1 px-2 py-2 rounded-lg transition-all ${
|
||||
|
||||
291
web_frontend/web_result/order-classes/food/content_analysis.md
Normal file
291
web_frontend/web_result/order-classes/food/content_analysis.md
Normal file
@@ -0,0 +1,291 @@
|
||||
# 食品订单班内容分析报告
|
||||
|
||||
## 一、项目主题
|
||||
|
||||
**青莳轻食 - 中高端个性化轻食店铺经营方案**
|
||||
|
||||
### 核心定位
|
||||
- **目标市场**: 25-40岁城市中高端健康饮食人群
|
||||
- **品牌特色**: 食材透明化、营养科学化、服务便捷化
|
||||
- **差异化优势**: 有机食材溯源 + 营养可量化 + 制作可看见
|
||||
- **客单价区间**: 45-68元（中高端定位）
|
||||
|
||||
## 二、核心主题提取
|
||||
|
||||
### 1. 市场机遇（6个关键数据点）
|
||||
1. 中国轻食市场规模突破**1200亿元**，年增长率18%
|
||||
2. 25-40岁城市人群为核心消费群体
|
||||
3. 上班族占比60%（便捷午餐需求）
|
||||
4. 健身人群占比25%（高蛋白低卡需求）
|
||||
5. 健康女性占比15%（低卡减脂需求）
|
||||
6. 超80%消费者愿为有机食材支付溢价
|
||||
|
||||
### 2. 品牌核心（3大差异点）
|
||||
1. **食材可溯源**: 80%来自本地有机农场，配备扫码溯源系统
|
||||
2. **营养可量化**: 每款菜品标注热量、蛋白质、脂肪、碳水
|
||||
3. **制作可看见**: 明厨亮灶，透明玻璃隔断展示制作过程
|
||||
|
||||
### 3. 产品体系（4大产品线）
|
||||
1. **经典沙拉类** - 10款（48元起）
|
||||
2. **能量碗类** - 12款（55-68元）
|
||||
3. **定制套餐** - 6款（60-68元）
|
||||
4. **季节限定** - 动态更新（52元起）
|
||||
|
||||
### 4. 运营模式（7个核心环节）
|
||||
1. 市场调研与定位
|
||||
2. 品牌设计与视觉
|
||||
3. 菜品研发与营养配方
|
||||
4. 选址装修与空间设计
|
||||
5. 团队组建与人员培训
|
||||
6. 财务预算与成本控制
|
||||
7. 营销推广与会员运营
|
||||
|
||||
### 5. 技术特点（5个创新点）
|
||||
1. **食材溯源系统**: 消费者扫码查看产地、检测报告
|
||||
2. **营养标签制定**: 每款菜品精确营养成分
|
||||
3. **温控监测系统**: 配送箱内置温度监测卡
|
||||
4. **会员定制服务**: 基于体重/目标的个性化营养食谱
|
||||
5. **差评响应机制**: 24小时响应+退款赠送补偿
|
||||
|
||||
## 三、时间线与里程碑
|
||||
|
||||
### 第一阶段：筹备期（0-3个月）
|
||||
- **月度1**: 市场调研、选址、品牌设计
|
||||
- **月度2**: 装修施工、设备采购、人员招聘
|
||||
- **月度3**: 员工培训、试运营、开业活动
|
||||
|
||||
### 第二阶段：初期运营（1-3月）
|
||||
- 日均订单量: 90单
|
||||
- 客单价: 50元
|
||||
- 月收入: 13.5万元
|
||||
- 会员目标: 300人
|
||||
|
||||
### 第三阶段：增长期（4-6月）
|
||||
- 日均订单量: 135单
|
||||
- 客单价: 52元
|
||||
- 月收入: 20.52万元
|
||||
- 会员目标: 800人
|
||||
|
||||
### 第四阶段：稳定期（7-12月）
|
||||
- 日均订单量: 190单
|
||||
- 客单价: 55元
|
||||
- 月收入: 31.35万元
|
||||
- 会员目标: 2000人
|
||||
- 第一年净利润: 58.032万元
|
||||
|
||||
## 四、图片资源清单
|
||||
|
||||
### 1. 品牌形象类（5张）
|
||||
- 品牌LOGO.jpg - 绿叶+叉子核心元素
|
||||
- 店面图片_正门.jpg - 青莳轻食国贸店外观
|
||||
- 店面装修.jpg - 浅青色+米白色+原木色主题
|
||||
- 店内场景_用餐区.jpg - 堂食区65㎡布局
|
||||
- 餐盒包装.jpg - 可降解材质+营养小贴士
|
||||
|
||||
### 2. 核心产品类（4张）
|
||||
- 青莳虾仁牛油果沙拉.jpg - 48元，5只大虾仁
|
||||
- 青莳香煎牛肉能量碗.jpg - 62元，120g澳洲瘦牛肉
|
||||
- 青莳减脂专属套餐（可换酱汁）.jpg - 65元，280大卡
|
||||
- 青莳夏季芒果鸡胸冷意面.jpg - 52元，季节限定
|
||||
|
||||
### 3. 制作流程类（5张）
|
||||
- 厨房加工场景.jpg - 明厨亮灶透明玻璃隔断
|
||||
- 烹饪场景.jpg - 专业厨师操作
|
||||
- 牛排烹饪.jpg - 食材烹饪过程
|
||||
- 菜品备制.jpg - 菜品组装流程
|
||||
- 员工着装以及切配规范.jpg - 青莳品控10条
|
||||
|
||||
### 4. 食材与质控类（4张）
|
||||
- 健康食材扫码溯源.jpg - 溯源系统展示
|
||||
- 厨房冷柜管理.jpg - 食材分区标签
|
||||
- 食材变质-1.jpg - 质量问题案例
|
||||
- 食材变质-2.jpg - 食品安全警示
|
||||
|
||||
### 5. 人员团队类（4张）
|
||||
- 店长.jpg - 整体运营管理
|
||||
- 厨师.jpg - 菜品制作专家
|
||||
- 服务员.jpg - 堂食服务团队
|
||||
- 收银员.jpg - 收银与会员管理
|
||||
|
||||
### 6. 营销推广类（3张）
|
||||
- 市场宣传营销.jpg - 线上线下推广
|
||||
- 健身宣传代言.jpg - 健身人群定位
|
||||
- 用餐拍摄场景.jpg - 社交媒体内容
|
||||
|
||||
**总计**: 25张高质量图片资源
|
||||
|
||||
## 五、技术数据与图表
|
||||
|
||||
### 1. 市场定位表
|
||||
| 维度 | 具体特征 |
|
||||
|------|----------|
|
||||
| 年龄范围 | 25-40岁 |
|
||||
| 职业与收入 | 写字楼白领、月薪8000+元 |
|
||||
| 消费习惯 | 每周2-3次，70%线上订餐 |
|
||||
| 核心需求 | 30分钟内送达、营养标签 |
|
||||
|
||||
### 2. 产品价格体系
|
||||
| 产品系列 | 价格区间 | 代表产品 | 核心卖点 |
|
||||
|----------|----------|----------|----------|
|
||||
| 经典沙拉 | 45-55元 | 虾仁牛油果沙拉 | 低卡便捷 |
|
||||
| 能量碗 | 55-68元 | 香煎牛肉能量碗 | 高蛋白补充 |
|
||||
| 定制套餐 | 60-68元 | 减脂专属套餐 | 个性化定制 |
|
||||
|
||||
### 3. 财务预测表
|
||||
| 周期 | 日均订单 | 客单价 | 月收入 | 净利润 |
|
||||
|------|----------|--------|--------|--------|
|
||||
| 1-3月 | 90单 | 50元 | 13.5万 | - |
|
||||
| 4-6月 | 135单 | 52元 | 20.52万 | - |
|
||||
| 7-12月 | 190单 | 55元 | 31.35万 | - |
|
||||
| 全年 | - | - | 290.16万 | 58.032万 |
|
||||
|
||||
### 4. 人员配置表
|
||||
| 岗位 | 人数 | 薪资范围 | 核心职责 |
|
||||
|------|------|----------|----------|
|
||||
| 店长 | 1 | 8000-10000元 | 整体运营管理 |
|
||||
| 厨师 | 2 | 6000-8000元 | 菜品制作 |
|
||||
| 服务员 | 3 | 4500-5500元 | 堂食与外卖 |
|
||||
| 营养师 | 1 | 7000-9000元 | 营养咨询 |
|
||||
| 收银员 | 1 | 4500-5500元 | 收银与会员 |
|
||||
|
||||
## 六、AI Agent角色体系
|
||||
|
||||
### 7个专业Agent配置
|
||||
|
||||
1. **餐饮市场调研专家**
|
||||
- 负责: 市场趋势分析、客户群体研究
|
||||
- 输出: 约2000字行业调研报告
|
||||
|
||||
2. **菜品研发专家**
|
||||
- 负责: 创意菜品开发、营养配方设计
|
||||
- 输出: 32款菜品方案（含8款专属款）
|
||||
|
||||
3. **餐饮品牌设计专家**
|
||||
- 负责: 品牌视觉系统、LOGO设计
|
||||
- 输出: 浅青色+米白色+原木色品牌体系
|
||||
|
||||
4. **餐厅选址装修专家**
|
||||
- 负责: 选址分析、空间布局设计
|
||||
- 输出: 110㎡完整装修方案
|
||||
|
||||
5. **餐饮团队人员管理专家**
|
||||
- 负责: 人员招聘、培训体系搭建
|
||||
- 输出: 8人团队配置方案
|
||||
|
||||
6. **财务预算专家**
|
||||
- 负责: 成本控制、利润预测
|
||||
- 输出: 50万投资预算+年度财务模型
|
||||
|
||||
7. **轻食店经营管理专家**
|
||||
- 负责: 整合所有模块、输出完整方案
|
||||
- 输出: 3000字+完整经营方案
|
||||
|
||||
## 七、设计风格方向
|
||||
|
||||
### 1. 颜色方案
|
||||
- **主色**: 浅青色 (#4CAF50系列) - 健康、清新、自然
|
||||
- **辅助色**: 米白色 (#F5F5F5) - 纯净、简约
|
||||
- **点缀色**: 原木色 (#8B7355) - 温暖、品质
|
||||
|
||||
### 2. 设计关键词
|
||||
- ✅ 健康清新
|
||||
- ✅ 透明可视
|
||||
- ✅ 科学营养
|
||||
- ✅ 中高端品质
|
||||
- ✅ 年轻时尚
|
||||
- ✅ 便捷高效
|
||||
|
||||
### 3. 交互特点
|
||||
- 滚动式时间轴导航（从调研→开业→运营→盈利）
|
||||
- 图片懒加载+放大查看
|
||||
- 数据可视化图表
|
||||
- 营养成分交互展示
|
||||
- 会员权益计算器
|
||||
|
||||
## 八、内容完整性评估
|
||||
|
||||
### ✅ 已具备的核心内容
|
||||
- [x] 详细的项目概述与市场分析（1200亿市场规模）
|
||||
- [x] 明确的品牌定位与差异化策略（三大可视化）
|
||||
- [x] 完整的产品体系（32款菜品）
|
||||
- [x] 清晰的运营模式（7个核心环节）
|
||||
- [x] 具体的财务预测（第一年净利58万）
|
||||
- [x] 系统的风险管理（3类风险+应对措施）
|
||||
- [x] 丰富的图片资源（25张高质量图片）
|
||||
- [x] 专业的Agent配置（7个专家角色）
|
||||
|
||||
### 📊 数据充足度
|
||||
- 市场数据: ⭐⭐⭐⭐⭐ (5/5) - 数据来源艾瑞咨询2024报告
|
||||
- 财务数据: ⭐⭐⭐⭐⭐ (5/5) - 详细到月度收入成本
|
||||
- 产品数据: ⭐⭐⭐⭐⭐ (5/5) - 32款菜品完整信息
|
||||
- 运营数据: ⭐⭐⭐⭐⭐ (5/5) - 从选址到推广全覆盖
|
||||
|
||||
### 🎨 视觉素材丰富度
|
||||
- 品牌类: 5张
|
||||
- 产品类: 4张
|
||||
- 流程类: 5张
|
||||
- 质控类: 4张
|
||||
- 团队类: 4张
|
||||
- 营销类: 3张
|
||||
**总计**: 25张 ⭐⭐⭐⭐⭐ (优秀)
|
||||
|
||||
## 九、下一步建议
|
||||
|
||||
### 阶段二：初始设计与架构
|
||||
1. **技术栈确定**
|
||||
- React 18 + TypeScript 5.0+
|
||||
- Tailwind CSS 3.0+
|
||||
- GSAP 3.12+ (滚动动画)
|
||||
- Vite 5.0+ (构建工具)
|
||||
|
||||
2. **信息架构设计**
|
||||
```
|
||||
首屏 Hero
|
||||
├── 青莳轻食品牌介绍
|
||||
├── 1200亿市场数据展示
|
||||
└── 滚动提示动画
|
||||
|
||||
时间轴导航
|
||||
├── 阶段1：市场调研（深蓝）
|
||||
├── 阶段2：品牌定位（浅青）
|
||||
├── 阶段3：产品设计（薄荷绿）
|
||||
├── 阶段4：选址装修（原木）
|
||||
├── 阶段5：团队组建（橙色）
|
||||
├── 阶段6：财务规划（金色）
|
||||
└── 阶段7：营销推广（红色）
|
||||
|
||||
内容区块
|
||||
├── 市场机遇（1200亿数据可视化）
|
||||
├── 三大差异化优势（可溯源+可量化+可看见）
|
||||
├── 32款产品矩阵（图文展示）
|
||||
├── 首店案例（国贸店110㎡）
|
||||
├── 7人团队配置
|
||||
├── 财务模型（第一年净利58万）
|
||||
└── 风险管理
|
||||
```
|
||||
|
||||
3. **动画设计方向**
|
||||
- 首屏数据滚动计数动画（1200亿→1200亿）
|
||||
- 卡片入场动画（stagger延迟）
|
||||
- 滚动视差效果（背景图片）
|
||||
- 图片hover放大效果
|
||||
- 时间轴进度条跟随滚动
|
||||
|
||||
## 十、总结
|
||||
|
||||
食品订单班（青莳轻食）具备**非常完整的内容基础**，包括：
|
||||
- ✅ 清晰的品牌定位和市场分析
|
||||
- ✅ 详细的产品体系和定价策略
|
||||
- ✅ 完整的运营流程和财务预测
|
||||
- ✅ 丰富的视觉素材（25张图片）
|
||||
- ✅ 系统的Agent配置（7个专家）
|
||||
|
||||
**内容质量评分**: 9.5/10
|
||||
|
||||
**建议**: 可以直接进入阶段二（初始设计与架构），开始使用React + TypeScript构建交互式网站。
|
||||
|
||||
---
|
||||
|
||||
**报告生成时间**: 2025-10-01
|
||||
**分析范围**: 食品订单班完整文档资料
|
||||
**下一步**: 创建 content_checklist.json 并进入阶段二
|
||||
@@ -0,0 +1,492 @@
|
||||
{
|
||||
"theme": "青莳轻食 - 中高端个性化轻食店铺经营方案",
|
||||
"brandName": "青莳轻食",
|
||||
"positioning": "食材可溯源、营养可量化、制作可看见",
|
||||
"key_features": [
|
||||
"中国轻食市场规模突破1200亿元，年增长率18%",
|
||||
"80%食材来自本地有机农场，配备扫码溯源系统",
|
||||
"每款菜品精确标注热量、蛋白质、脂肪、碳水",
|
||||
"明厨亮灶透明玻璃隔断展示制作过程",
|
||||
"客单价45-68元，定位中高端健康人群",
|
||||
"首店位于北京国贸CBD核心区，110㎡"
|
||||
],
|
||||
"timeline_events": [
|
||||
{
|
||||
"phase": "市场调研阶段",
|
||||
"date": "筹备期月度1",
|
||||
"event": "市场分析与品牌定位",
|
||||
"importance": "high",
|
||||
"keyData": "1200亿市场规模，年增长18%",
|
||||
"description": "分析轻食市场现状，确定中高端个性化定位"
|
||||
},
|
||||
{
|
||||
"phase": "品牌设计阶段",
|
||||
"date": "筹备期月度1",
|
||||
"event": "青莳品牌视觉系统创建",
|
||||
"importance": "high",
|
||||
"keyData": "浅青色+米白色+原木色",
|
||||
"description": "设计LOGO（绿叶+叉子）和完整品牌VI"
|
||||
},
|
||||
{
|
||||
"phase": "产品研发阶段",
|
||||
"date": "筹备期月度1-2",
|
||||
"event": "32款菜品研发完成",
|
||||
"importance": "high",
|
||||
"keyData": "4大产品线，8款专属款",
|
||||
"description": "开发沙拉、能量碗、定制套餐、季节限定"
|
||||
},
|
||||
{
|
||||
"phase": "选址装修阶段",
|
||||
"date": "筹备期月度2",
|
||||
"event": "国贸店选址与装修",
|
||||
"importance": "high",
|
||||
"keyData": "110㎡，月租5.2万元",
|
||||
"description": "确定北京国贸B座1层108商铺，完成装修设计"
|
||||
},
|
||||
{
|
||||
"phase": "团队组建阶段",
|
||||
"date": "筹备期月度2-3",
|
||||
"event": "8人核心团队招聘培训",
|
||||
"importance": "high",
|
||||
"keyData": "月人工成本5.3万元",
|
||||
"description": "招聘店长、厨师、服务员、营养师、收银员"
|
||||
},
|
||||
{
|
||||
"phase": "试运营阶段",
|
||||
"date": "筹备期月度3",
|
||||
"event": "系统调试与试营业",
|
||||
"importance": "medium",
|
||||
"keyData": "食材溯源系统上线",
|
||||
"description": "测试运营流程，收集初期反馈"
|
||||
},
|
||||
{
|
||||
"phase": "正式开业",
|
||||
"date": "运营第1月",
|
||||
"event": "青莳轻食国贸店开业",
|
||||
"importance": "high",
|
||||
"keyData": "日均90单，客单价50元",
|
||||
"description": "启动开业推广活动，目标会员300人"
|
||||
},
|
||||
{
|
||||
"phase": "初期运营",
|
||||
"date": "运营1-3月",
|
||||
"event": "市场培育期",
|
||||
"importance": "medium",
|
||||
"keyData": "月收入13.5万元",
|
||||
"description": "建立品牌认知，积累初期客户"
|
||||
},
|
||||
{
|
||||
"phase": "快速增长",
|
||||
"date": "运营4-6月",
|
||||
"event": "业务增长期",
|
||||
"importance": "high",
|
||||
"keyData": "日均135单，月收入20.52万元",
|
||||
"description": "会员达800人，外卖订单占比70%"
|
||||
},
|
||||
{
|
||||
"phase": "稳定盈利",
|
||||
"date": "运营7-12月",
|
||||
"event": "业务稳定期",
|
||||
"importance": "high",
|
||||
"keyData": "日均190单，月收入31.35万元",
|
||||
"description": "会员达2000人，实现稳定盈利"
|
||||
},
|
||||
{
|
||||
"phase": "年度总结",
|
||||
"date": "运营第12月",
|
||||
"event": "首年经营成果",
|
||||
"importance": "high",
|
||||
"keyData": "年收入290.16万，净利润58.032万",
|
||||
"description": "净利率20%，投资回报期14个月"
|
||||
}
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"id": "img_001",
|
||||
"filename": "品牌LOGO.jpg",
|
||||
"caption": "青莳轻食品牌LOGO - 绿叶缠绕银质餐叉",
|
||||
"category": "品牌形象",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_002",
|
||||
"filename": "店面图片_正门.jpg",
|
||||
"caption": "青莳轻食国贸店外观 - 浅青色门头发光LOGO",
|
||||
"category": "品牌形象",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_003",
|
||||
"filename": "店面装修.jpg",
|
||||
"caption": "店内装修风格 - 浅青色+米白色+原木色",
|
||||
"category": "品牌形象",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_004",
|
||||
"filename": "店内场景_用餐区.jpg",
|
||||
"caption": "堂食区65㎡ - 16张桌子原木色实木材质",
|
||||
"category": "品牌形象",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_005",
|
||||
"filename": "餐盒包装.jpg",
|
||||
"caption": "外卖包装 - 可降解材质+营养小贴士",
|
||||
"category": "品牌形象",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_006",
|
||||
"filename": "青莳虾仁牛油果沙拉.jpg",
|
||||
"caption": "经典沙拉类代表产品 - 48元，5只大虾仁+半颗牛油果",
|
||||
"category": "核心产品",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_007",
|
||||
"filename": "青莳香煎牛肉能量碗.jpg",
|
||||
"caption": "能量碗类代表产品 - 62元，120g澳洲瘦牛肉",
|
||||
"category": "核心产品",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_008",
|
||||
"filename": "青莳减脂专属套餐（可换酱汁）.jpg",
|
||||
"caption": "定制套餐类代表产品 - 65元，低卡280大卡",
|
||||
"category": "核心产品",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_009",
|
||||
"filename": "青莳夏季芒果鸡胸冷意面.jpg",
|
||||
"caption": "季节限定类代表产品 - 52元，6-8月供应",
|
||||
"category": "核心产品",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_010",
|
||||
"filename": "厨房加工场景.jpg",
|
||||
"caption": "明厨亮灶透明玻璃隔断 - 制作过程可视化",
|
||||
"category": "制作流程",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_011",
|
||||
"filename": "烹饪场景.jpg",
|
||||
"caption": "专业厨师烹饪过程展示",
|
||||
"category": "制作流程",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_012",
|
||||
"filename": "牛排烹饪.jpg",
|
||||
"caption": "食材烹饪细节 - 温度控制与火候把握",
|
||||
"category": "制作流程",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_013",
|
||||
"filename": "菜品备制.jpg",
|
||||
"caption": "菜品组装流程 - 标准化操作",
|
||||
"category": "制作流程",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_014",
|
||||
"filename": "员工着装以及切配规范.jpg",
|
||||
"caption": "青莳品控10条 - 操作规范展示",
|
||||
"category": "制作流程",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_015",
|
||||
"filename": "健康食材扫码溯源.jpg",
|
||||
"caption": "食材溯源系统 - 消费者扫码查看产地检测报告",
|
||||
"category": "质量控制",
|
||||
"importance": "high"
|
||||
},
|
||||
{
|
||||
"id": "img_016",
|
||||
"filename": "厨房冷柜管理.jpg",
|
||||
"caption": "食材分区标签 - 蔬菜区/肉类区/酱料区",
|
||||
"category": "质量控制",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_017",
|
||||
"filename": "食材变质-1.jpg",
|
||||
"caption": "质量问题案例 - 食品安全警示教育",
|
||||
"category": "质量控制",
|
||||
"importance": "low"
|
||||
},
|
||||
{
|
||||
"id": "img_018",
|
||||
"filename": "食材变质-2.jpg",
|
||||
"caption": "质量问题案例 - 强化品控意识",
|
||||
"category": "质量控制",
|
||||
"importance": "low"
|
||||
},
|
||||
{
|
||||
"id": "img_019",
|
||||
"filename": "店长.jpg",
|
||||
"caption": "店长 - 整体运营管理，薪资8000-10000元",
|
||||
"category": "团队成员",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_020",
|
||||
"filename": "厨师.jpg",
|
||||
"caption": "厨师 - 菜品制作专家，薪资6000-8000元",
|
||||
"category": "团队成员",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_021",
|
||||
"filename": "服务员.jpg",
|
||||
"caption": "服务员 - 堂食服务团队，薪资4500-5500元",
|
||||
"category": "团队成员",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_022",
|
||||
"filename": "收银员.jpg",
|
||||
"caption": "收银员 - 收银与会员管理，薪资4500-5500元",
|
||||
"category": "团队成员",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_023",
|
||||
"filename": "市场宣传营销.jpg",
|
||||
"caption": "线上线下推广活动",
|
||||
"category": "营销推广",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_024",
|
||||
"filename": "健身宣传代言.jpg",
|
||||
"caption": "健身人群定位推广 - 高蛋白能量碗",
|
||||
"category": "营销推广",
|
||||
"importance": "medium"
|
||||
},
|
||||
{
|
||||
"id": "img_025",
|
||||
"filename": "用餐拍摄场景.jpg",
|
||||
"caption": "社交媒体内容创作 - 小红书/抖音素材",
|
||||
"category": "营销推广",
|
||||
"importance": "medium"
|
||||
}
|
||||
],
|
||||
"technical_data": {
|
||||
"charts": [
|
||||
{
|
||||
"id": "chart_001",
|
||||
"title": "市场规模增长趋势",
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["2021", "2022", "2023", "2024"],
|
||||
"values": [680, 802, 946, 1200],
|
||||
"unit": "亿元"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "chart_002",
|
||||
"title": "客户群体占比",
|
||||
"type": "pie",
|
||||
"data": {
|
||||
"categories": ["上班族", "健身人群", "健康女性"],
|
||||
"values": [60, 25, 15],
|
||||
"unit": "%"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "chart_003",
|
||||
"title": "月度收入增长曲线",
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||
"values": [13.5, 13.5, 13.5, 20.52, 20.52, 20.52, 31.35, 31.35, 31.35, 31.35, 31.35, 31.35],
|
||||
"unit": "万元"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "chart_004",
|
||||
"title": "成本结构分析",
|
||||
"type": "pie",
|
||||
"data": {
|
||||
"categories": ["食材成本", "租金成本", "人工成本", "水电费", "设备折旧", "其他费用"],
|
||||
"values": [35, 12, 20, 3, 5, 5],
|
||||
"unit": "%"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tables": [
|
||||
{
|
||||
"id": "table_001",
|
||||
"title": "目标市场定位表",
|
||||
"headers": ["维度", "具体特征"],
|
||||
"rows": [
|
||||
["年龄范围", "25-40岁"],
|
||||
["职业与收入", "写字楼白领、企业中层、月薪8000元以上"],
|
||||
["消费习惯", "每周2-3次，70%线上订餐，重视食材新鲜度"],
|
||||
["核心需求", "工作日便捷午餐（30分钟内送达）、高蛋白补充餐"]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table_002",
|
||||
"title": "核心产品价格体系",
|
||||
"headers": ["产品系列", "代表产品", "价格", "核心卖点", "适配场景"],
|
||||
"rows": [
|
||||
["经典沙拉类", "青莳虾仁牛油果沙拉", "48元", "5只大虾仁+半颗牛油果", "工作日午餐"],
|
||||
["能量碗类", "青莳香煎牛肉能量碗", "62元", "120g澳洲瘦牛肉+藜麦", "健身后补充"],
|
||||
["定制套餐类", "青莳减脂专属套餐", "65元", "低卡280大卡+高纤维18g", "减脂人群"],
|
||||
["季节限定类", "青莳夏季芒果鸡胸冷意面", "52元", "海南台农芒果+低温慢煮鸡胸", "夏季解暑"]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table_003",
|
||||
"title": "人员配置与薪资",
|
||||
"headers": ["岗位", "人数", "岗位职责", "薪资范围（月薪）"],
|
||||
"rows": [
|
||||
["店长", "1", "整体运营管理、供应商对接、员工考核", "8000-10000元"],
|
||||
["厨师", "2", "菜品制作、食材处理、厨房卫生管控", "6000-8000元/人"],
|
||||
["服务员", "3", "堂食服务、外卖打包、客户反馈收集", "4500-5500元/人"],
|
||||
["营养师", "1", "营养咨询、菜品营养标签制定、会员饮食建议", "7000-9000元"],
|
||||
["收银员", "1", "收银结算、会员注册、线上订单核销", "4500-5500元"]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table_004",
|
||||
"title": "首年收入预测",
|
||||
"headers": ["周期", "日均订单量", "客单价（元）", "月收入（万元）", "季度收入（万元）"],
|
||||
"rows": [
|
||||
["1-3月（初期）", "90", "50", "13.5", "40.5"],
|
||||
["4-6月（增长期）", "135", "52", "20.52", "61.56"],
|
||||
["7-12月（稳定期）", "190", "55", "31.35", "188.1"],
|
||||
["全年合计", "-", "-", "-", "290.16"]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table_005",
|
||||
"title": "初始投资预算（总投资50万元）",
|
||||
"headers": ["项目", "金额（万元）", "明细说明"],
|
||||
"rows": [
|
||||
["店铺租赁", "15", "押三付一，月租5万元"],
|
||||
["装修费用", "15", "1500元/㎡×100㎡"],
|
||||
["设备采购", "10", "冷藏柜、烤箱、操作台、收银系统"],
|
||||
["食材采购", "3", "开业前首批食材"],
|
||||
["人员招聘与培训", "2", "招聘渠道费、培训物料"],
|
||||
["市场推广", "3", "开业活动、线上推广"],
|
||||
["其他费用", "2", "营业执照、备用金"]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"agents": [
|
||||
{
|
||||
"id": "agent_001",
|
||||
"name": "餐饮市场调研专家",
|
||||
"role": "市场研究与趋势分析",
|
||||
"avatar": "餐饮市场调研专家.jpeg",
|
||||
"description": "精通信息搜索与报告撰写，擅长餐饮行业内容收集与趋势分析",
|
||||
"keySkills": ["行业信息检索", "趋势分析", "调研报告撰写"],
|
||||
"output": "约2000字餐饮行业调研报告"
|
||||
},
|
||||
{
|
||||
"id": "agent_002",
|
||||
"name": "菜品研发专家",
|
||||
"role": "创意菜品开发与营养配方",
|
||||
"avatar": "菜品研发专家.jpeg",
|
||||
"description": "经验丰富的菜品研发专家，专注于创新菜品开发和营养搭配",
|
||||
"keySkills": ["多元菜系研发", "食材搭配", "标准化SOP", "营养科学"],
|
||||
"output": "32款菜品方案（含8款青莳专属款）"
|
||||
},
|
||||
{
|
||||
"id": "agent_003",
|
||||
"name": "餐饮品牌设计专家",
|
||||
"role": "品牌视觉系统与VI设计",
|
||||
"avatar": "餐饮品牌设计专家.jpeg",
|
||||
"description": "专业品牌设计师，擅长创建统一的品牌视觉识别系统",
|
||||
"keySkills": ["LOGO设计", "VI系统", "空间美学", "包装设计"],
|
||||
"output": "完整品牌VI系统（浅青色+米白色+原木色）"
|
||||
},
|
||||
{
|
||||
"id": "agent_004",
|
||||
"name": "餐厅选址装修专家",
|
||||
"role": "选址分析与空间设计",
|
||||
"avatar": "餐厅选址装修专家.jpeg",
|
||||
"description": "资深选址与装修专家，精通商圈分析和功能布局设计",
|
||||
"keySkills": ["商圈分析", "选址评估", "空间布局", "功能分区"],
|
||||
"output": "110㎡完整装修方案（堂食65㎡+厨房30㎡+收银15㎡）"
|
||||
},
|
||||
{
|
||||
"id": "agent_005",
|
||||
"name": "餐饮团队人员管理专家",
|
||||
"role": "人员招聘与培训体系",
|
||||
"avatar": "餐饮团队人员管理专家.jpeg",
|
||||
"description": "人力资源专家，擅长团队组建和培训体系搭建",
|
||||
"keySkills": ["招聘渠道", "培训体系", "考核激励", "团队文化"],
|
||||
"output": "8人核心团队配置方案+培训体系"
|
||||
},
|
||||
{
|
||||
"id": "agent_006",
|
||||
"name": "财务预算专家",
|
||||
"role": "成本控制与财务规划",
|
||||
"avatar": "财务预算专家.jpeg",
|
||||
"description": "专业财务分析师，精通餐饮行业成本控制和利润预测",
|
||||
"keySkills": ["预算编制", "成本分析", "利润预测", "投资回报"],
|
||||
"output": "50万投资预算+年度财务模型（净利58万）"
|
||||
},
|
||||
{
|
||||
"id": "agent_007",
|
||||
"name": "轻食店经营管理专家",
|
||||
"role": "整合方案与运营管理",
|
||||
"avatar": "轻食店经营管理专家.jpeg",
|
||||
"description": "资深轻食餐厅运营专家，整合所有模块输出完整经营方案",
|
||||
"keySkills": ["项目整合", "运营管理", "方案撰写", "实施规划"],
|
||||
"output": "3000字+完整经营方案文档"
|
||||
}
|
||||
],
|
||||
"verification_checklist": {
|
||||
"content_completeness": {
|
||||
"project_overview": true,
|
||||
"market_analysis": true,
|
||||
"brand_positioning": true,
|
||||
"product_system": true,
|
||||
"operation_model": true,
|
||||
"financial_forecast": true,
|
||||
"risk_management": true
|
||||
},
|
||||
"image_resources": {
|
||||
"total_count": 25,
|
||||
"brand_images": 5,
|
||||
"product_images": 4,
|
||||
"process_images": 5,
|
||||
"quality_images": 4,
|
||||
"team_images": 4,
|
||||
"marketing_images": 3,
|
||||
"all_uploaded": true,
|
||||
"all_with_captions": true
|
||||
},
|
||||
"data_accuracy": {
|
||||
"market_data_verified": true,
|
||||
"financial_data_verified": true,
|
||||
"product_data_verified": true,
|
||||
"operation_data_verified": true
|
||||
},
|
||||
"agent_configuration": {
|
||||
"total_agents": 7,
|
||||
"all_prompts_ready": true,
|
||||
"all_avatars_ready": true,
|
||||
"workflow_defined": true
|
||||
}
|
||||
},
|
||||
"next_steps": [
|
||||
"进入阶段二：初始设计与架构",
|
||||
"使用React 18 + TypeScript创建项目基础结构",
|
||||
"安装Tailwind CSS 3.0 + GSAP 3.12",
|
||||
"设计时间轴导航信息架构",
|
||||
"定义浅青色品牌设计系统",
|
||||
"实现滚动动画和交互效果"
|
||||
]
|
||||
}
|
||||
@@ -78,7 +78,7 @@
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -632,49 +632,49 @@
|
||||
/* 背景图案 - 性能优化 */
|
||||
.bg-pattern-1 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%),
|
||||
linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%),
|
||||
radial-gradient(circle at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 80%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-2 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%),
|
||||
linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%),
|
||||
radial-gradient(circle at 15% 30%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 85% 70%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-3 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%),
|
||||
linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%),
|
||||
radial-gradient(circle at 20% 40%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 60%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-4 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%),
|
||||
linear-gradient(135deg, #c8e6c9 0%, #81c784 100%),
|
||||
radial-gradient(circle at 25% 50%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 75% 50%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-5 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%),
|
||||
linear-gradient(135deg, #f1f8e9 0%, #c5e1a5 100%),
|
||||
radial-gradient(circle at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 70% 40%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-6 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #f093fb 0%, #f5576c 100%),
|
||||
linear-gradient(135deg, #dcedc8 0%, #aed581 100%),
|
||||
radial-gradient(circle at 35% 70%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 65% 30%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.bg-pattern-7 {
|
||||
background-image:
|
||||
linear-gradient(135deg, #4facfe 0%, #00f2fe 100%),
|
||||
linear-gradient(135deg, #c8e6c9 0%, #66bb6a 100%),
|
||||
radial-gradient(circle at 40% 80%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
||||
radial-gradient(circle at 60% 20%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
||||
}
|
||||
@@ -695,13 +695,15 @@
|
||||
}
|
||||
|
||||
/* 图标渐变 */
|
||||
.icon-market { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||||
.icon-brand { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
||||
.icon-location { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
||||
.icon-menu { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
||||
.icon-operation { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
||||
.icon-team { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
||||
.icon-finance { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
|
||||
.icon-market { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); }
|
||||
.icon-brand { background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%); }
|
||||
.icon-location { background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%); }
|
||||
.icon-menu { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); }
|
||||
.icon-operation { background: linear-gradient(135deg, #66BB6A 0%, #388E3C 100%); }
|
||||
.icon-team {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%); }
|
||||
.icon-finance {
|
||||
background: linear-gradient(135deg, #66BB6A 0%, #2E7D32 100%); }
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes rotate {
|
||||
|
||||
24
web_frontend/web_result/order-classes/food/react-app/.gitignore
vendored
Normal file
24
web_frontend/web_result/order-classes/food/react-app/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>react-app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3576
web_frontend/web_result/order-classes/food/react-app/package-lock.json
generated
Normal file
3576
web_frontend/web_result/order-classes/food/react-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "react-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gsap/react": "^2.1.2",
|
||||
"gsap": "^3.13.0",
|
||||
"lucide-react": "^0.544.0",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
"@types/node": "^24.6.1",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.44.0",
|
||||
"vite": "^7.1.7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import HeroSection from './components/HeroSection'
|
||||
import TimelineNav from './components/TimelineNav'
|
||||
import MarketResearchSection from './components/sections/MarketResearchSection'
|
||||
import BrandPositioningSection from './components/sections/BrandPositioningSection'
|
||||
import ProductDevelopmentSection from './components/sections/ProductDevelopmentSection'
|
||||
import LocationDesignSection from './components/sections/LocationDesignSection'
|
||||
import TeamBuildingSection from './components/sections/TeamBuildingSection'
|
||||
import FinancialPlanningSection from './components/sections/FinancialPlanningSection'
|
||||
import MarketingSection from './components/sections/MarketingSection'
|
||||
|
||||
// 注册GSAP插件
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
// 滚动触发动画配置
|
||||
ScrollTrigger.config({
|
||||
limitCallbacks: true,
|
||||
syncInterval: 150,
|
||||
})
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach(trigger => trigger.kill())
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-secondary-100">
|
||||
{/* Hero区块 */}
|
||||
<HeroSection />
|
||||
|
||||
{/* 时间线导航 */}
|
||||
<TimelineNav />
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<main className="relative">
|
||||
{/* 1. 市场调研 */}
|
||||
<MarketResearchSection />
|
||||
|
||||
{/* 2. 品牌定位 */}
|
||||
<BrandPositioningSection />
|
||||
|
||||
{/* 3. 产品开发 */}
|
||||
<ProductDevelopmentSection />
|
||||
|
||||
{/* 4. 选址设计 */}
|
||||
<LocationDesignSection />
|
||||
|
||||
{/* 5. 团队建设 */}
|
||||
<TeamBuildingSection />
|
||||
|
||||
{/* 6. 财务规划 */}
|
||||
<FinancialPlanningSection />
|
||||
|
||||
{/* 7. 营销推广 */}
|
||||
<MarketingSection />
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<footer className="bg-gray-900 text-white py-12 px-4">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">青莳轻食</h3>
|
||||
<p className="text-gray-400 mb-6">中高端个性化轻食店铺经营方案</p>
|
||||
<div className="flex justify-center gap-6 text-gray-400">
|
||||
<span>食材可溯源</span>
|
||||
<span>•</span>
|
||||
<span>营养可量化</span>
|
||||
<span>•</span>
|
||||
<span>制作可看见</span>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-800 text-sm text-gray-500">
|
||||
© 2024 青莳轻食. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,152 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
|
||||
const HeroSection = () => {
|
||||
const heroRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// Hero标题动画
|
||||
gsap.from('.hero-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-subtitle', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
delay: 0.3,
|
||||
ease: 'power2.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-features', {
|
||||
y: 20,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
delay: 0.6,
|
||||
stagger: 0.15,
|
||||
})
|
||||
|
||||
gsap.from('.hero-cta', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
delay: 1,
|
||||
})
|
||||
|
||||
// 滚动提示动画
|
||||
gsap.to('.scroll-indicator', {
|
||||
y: 10,
|
||||
duration: 1.5,
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
ease: 'power1.inOut',
|
||||
})
|
||||
}, heroRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const scrollToContent = () => {
|
||||
const targetY = window.innerHeight
|
||||
window.scrollTo({
|
||||
top: targetY,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={heroRef}
|
||||
className="hero relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-500 to-primary-800 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* 背景纹理 */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 主要内容 */}
|
||||
<div className="relative z-10 text-center max-w-5xl mx-auto">
|
||||
{/* 主标题 */}
|
||||
<h1 className="hero-title text-5xl sm:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
|
||||
{/* 副标题 */}
|
||||
<p className="hero-subtitle text-xl sm:text-2xl lg:text-3xl text-white/90 mb-8 font-medium">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</p>
|
||||
|
||||
{/* 关键数据 */}
|
||||
<div className="hero-features mb-12 flex flex-wrap justify-center gap-6">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">1200亿</div>
|
||||
<div className="text-white/80 text-sm">市场规模</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">18%</div>
|
||||
<div className="text-white/80 text-sm">年增长率</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">58万</div>
|
||||
<div className="text-white/80 text-sm">首年净利润</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大差异化特点 */}
|
||||
<div className="hero-features grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12 max-w-3xl mx-auto">
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">食材可溯源</div>
|
||||
<div className="text-white/70 text-sm">80%有机农场直供</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">营养可量化</div>
|
||||
<div className="text-white/70 text-sm">精确标注每份营养</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">制作可看见</div>
|
||||
<div className="text-white/70 text-sm">明厨亮灶透明化</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA按钮 */}
|
||||
<div className="hero-cta flex flex-wrap justify-center gap-4">
|
||||
<button
|
||||
onClick={scrollToContent}
|
||||
className="px-8 py-4 bg-white text-primary-600 rounded-xl font-semibold
|
||||
hover:bg-white/95 transition-all duration-300 transform hover:-translate-y-1
|
||||
shadow-xl hover:shadow-2xl"
|
||||
>
|
||||
查看完整方案
|
||||
</button>
|
||||
<button
|
||||
className="px-8 py-4 border-2 border-white text-white rounded-xl font-semibold
|
||||
hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
联系我们
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 滚动提示 */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="scroll-indicator flex flex-col items-center cursor-pointer" onClick={scrollToContent}>
|
||||
<span className="text-white/60 text-sm mb-2">向下滚动</span>
|
||||
<ChevronDown className="text-white/80 w-6 h-6 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
@@ -0,0 +1,111 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
interface NavItem {
|
||||
id: string
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const TimelineNav = () => {
|
||||
const [activeSection, setActiveSection] = useState('hero')
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: 'market', label: '市场调研', icon: '1️⃣' },
|
||||
{ id: 'brand', label: '品牌定位', icon: '2️⃣' },
|
||||
{ id: 'product', label: '产品开发', icon: '3️⃣' },
|
||||
{ id: 'location', label: '选址设计', icon: '4️⃣' },
|
||||
{ id: 'team', label: '团队建设', icon: '5️⃣' },
|
||||
{ id: 'finance', label: '财务规划', icon: '6️⃣' },
|
||||
{ id: 'marketing', label: '营销推广', icon: '7️⃣' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollPosition = window.scrollY + window.innerHeight / 2
|
||||
|
||||
// 检测当前滚动到哪个区块
|
||||
navItems.forEach(item => {
|
||||
const section = document.getElementById(item.id)
|
||||
if (section) {
|
||||
const { offsetTop, offsetHeight } = section
|
||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||
setActiveSection(item.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const section = document.getElementById(sectionId)
|
||||
if (section) {
|
||||
const yOffset = -80
|
||||
const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset
|
||||
window.scrollTo({
|
||||
top: y,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="fixed top-1/2 right-8 -translate-y-1/2 z-50 hidden lg:block">
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-4 border border-gray-200">
|
||||
<div className="flex flex-col gap-4">
|
||||
{navItems.map((item, index) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className={`group relative flex items-center gap-3 transition-all duration-300
|
||||
${activeSection === item.id ? 'scale-110' : 'hover:scale-105'}`}
|
||||
aria-label={item.label}
|
||||
>
|
||||
{/* 图标 */}
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-lg
|
||||
transition-all duration-300
|
||||
${
|
||||
activeSection === item.id
|
||||
? 'bg-primary-500 text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-600 group-hover:bg-primary-100'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
|
||||
{/* 标签 - 悬停时显示 */}
|
||||
<span
|
||||
className="absolute right-full mr-4 px-3 py-1 bg-gray-900 text-white text-sm
|
||||
rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300
|
||||
whitespace-nowrap pointer-events-none"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
{/* 进度条 */}
|
||||
{activeSection === item.id && (
|
||||
<div
|
||||
className="absolute left-0 w-1 h-10 bg-primary-500 rounded-full"
|
||||
style={{ left: '-8px' }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 进度指示器 */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{navItems.findIndex(item => item.id === activeSection) + 1} / {navItems.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineNav
|
||||
@@ -0,0 +1,238 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Sparkles, Award, Heart, Shield } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const BrandPositioningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.brand-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.brand-card', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.value-item', {
|
||||
x: -30,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.value-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const brandPillars = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: '食材可溯源',
|
||||
description: '80%有机农场直供',
|
||||
details: [
|
||||
'与认证有机农场建立长期合作',
|
||||
'每份食材附带溯源二维码',
|
||||
'实时追踪从农场到餐桌全流程',
|
||||
'定期公开供应商认证信息',
|
||||
],
|
||||
gradient: 'from-green-500 to-emerald-600',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '营养可量化',
|
||||
description: '精确标注每份营养',
|
||||
details: [
|
||||
'专业营养师团队配方设计',
|
||||
'精确到克的营养成分标注',
|
||||
'卡路里、蛋白质、脂肪全透明',
|
||||
'提供个性化营养建议',
|
||||
],
|
||||
gradient: 'from-blue-500 to-cyan-600',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: '制作可看见',
|
||||
description: '明厨亮灶透明化',
|
||||
details: [
|
||||
'开放式厨房设计',
|
||||
'全程可视化制作流程',
|
||||
'严格的卫生操作标准',
|
||||
'顾客可全程观看制作',
|
||||
],
|
||||
gradient: 'from-purple-500 to-pink-600',
|
||||
},
|
||||
]
|
||||
|
||||
const brandValues = [
|
||||
{ icon: '🌱', title: '健康至上', desc: '以健康为核心价值' },
|
||||
{ icon: '✨', title: '品质保证', desc: '精选优质食材' },
|
||||
{ icon: '🎯', title: '用心服务', desc: '关注每位顾客' },
|
||||
{ icon: '🔬', title: '科学配餐', desc: '营养均衡搭配' },
|
||||
{ icon: '🌍', title: '环保理念', desc: '可持续发展' },
|
||||
{ icon: '💚', title: '真诚透明', desc: '诚信经营' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="brand"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="brand-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">2️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第二阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
品牌定位与差异化
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
打造"青莳轻食"中高端个性化品牌,建立三大核心竞争优势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 品牌名称解读 */}
|
||||
<div className="brand-card mb-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h3 className="text-5xl font-bold mb-6">青莳 QingShi</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8 text-left">
|
||||
<div>
|
||||
<div className="text-3xl mb-3">青</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
代表新鲜、自然、健康的生活态度。青春活力,清新自然,是品牌的视觉基调。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl mb-3">莳</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
寓意培育、呵护与成长。如同精心培育每一道菜品,用心呵护每位顾客的健康。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大核心差异化特点 */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{brandPillars.map((pillar, index) => {
|
||||
const Icon = pillar.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="brand-card group bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl
|
||||
transition-all duration-500 border border-gray-100
|
||||
transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${pillar.gradient}
|
||||
flex items-center justify-center mb-6
|
||||
group-hover:scale-110 transition-transform duration-300`}
|
||||
>
|
||||
<Icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">{pillar.title}</h3>
|
||||
<p className="text-primary-600 font-medium mb-6">{pillar.description}</p>
|
||||
<ul className="space-y-3">
|
||||
{pillar.details.map((detail, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2 text-gray-600">
|
||||
<Shield className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 品牌价值观 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">品牌核心价值观</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{brandValues.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="value-item text-center p-4 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 cursor-default
|
||||
transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{value.icon}</div>
|
||||
<div className="font-semibold text-gray-900 mb-1">{value.title}</div>
|
||||
<div className="text-sm text-gray-600">{value.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标市场定位 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场定位</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="text-lg leading-relaxed">
|
||||
<span className="font-semibold text-primary-600">中高端轻食市场</span>
|
||||
,面向注重健康、品质和生活方式的都市白领群体
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
客单价定位在 <span className="font-semibold">35-60元</span>
|
||||
,提供高于市场平均水平的产品品质和服务体验
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
选址于<span className="font-semibold">写字楼商圈、高端社区</span>
|
||||
周边,覆盖核心目标客户群体
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">竞争策略</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">产品差异化:</span>
|
||||
三大核心特点建立竞争壁垒
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">服务差异化:</span>
|
||||
提供营养咨询和个性化定制
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">体验差异化:</span>
|
||||
打造健康生活方式社区
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">品牌差异化:</span>
|
||||
建立信任和情感连接
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrandPositioningSection
|
||||
@@ -0,0 +1,331 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { DollarSign, TrendingUp, PieChart, Calculator } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const FinancialPlanningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.finance-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.finance-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const initialInvestment = [
|
||||
{
|
||||
category: '装修费用',
|
||||
amount: '20-30万元',
|
||||
items: ['设计费2万', '硬装15万', '软装5万', '招牌灯箱3万'],
|
||||
color: 'blue',
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
category: '设备采购',
|
||||
amount: '10-15万元',
|
||||
items: ['厨房设备8万', '冷藏设备3万', '收银系统1万', '其他设备3万'],
|
||||
color: 'green',
|
||||
icon: Calculator,
|
||||
},
|
||||
{
|
||||
category: '前期物料',
|
||||
amount: '5-8万元',
|
||||
items: ['首批食材3万', '餐具包材2万', '清洁用品1万', '营销物料2万'],
|
||||
color: 'purple',
|
||||
icon: DollarSign,
|
||||
},
|
||||
{
|
||||
category: '其他费用',
|
||||
amount: '5-7万元',
|
||||
items: ['房租押金3万', '营业执照1万', '员工培训1万', '备用金2万'],
|
||||
color: 'orange',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
]
|
||||
|
||||
const monthlyOperating = [
|
||||
{ item: '房租', amount: '1.5-2.5万元', percentage: 30 },
|
||||
{ item: '人力成本', amount: '3.5-4.5万元', percentage: 35 },
|
||||
{ item: '食材成本', amount: '2-3万元', percentage: 20 },
|
||||
{ item: '水电煤气', amount: '0.3-0.5万元', percentage: 3 },
|
||||
{ item: '营销推广', amount: '0.5-1万元', percentage: 5 },
|
||||
{ item: '其他费用', amount: '0.5-1万元', percentage: 7 },
|
||||
]
|
||||
|
||||
const revenueProjection = [
|
||||
{
|
||||
scenario: '保守预期',
|
||||
dailySales: 40,
|
||||
avgPrice: 45,
|
||||
dailyRevenue: 1800,
|
||||
monthlyRevenue: 54000,
|
||||
netProfit: 10800,
|
||||
profitMargin: '20%',
|
||||
},
|
||||
{
|
||||
scenario: '正常预期',
|
||||
dailySales: 60,
|
||||
avgPrice: 48,
|
||||
dailyRevenue: 2880,
|
||||
monthlyRevenue: 86400,
|
||||
netProfit: 25920,
|
||||
profitMargin: '30%',
|
||||
},
|
||||
{
|
||||
scenario: '乐观预期',
|
||||
dailySales: 80,
|
||||
avgPrice: 50,
|
||||
dailyRevenue: 4000,
|
||||
monthlyRevenue: 120000,
|
||||
netProfit: 48000,
|
||||
profitMargin: '40%',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="finance"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="finance-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">6️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第六阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
财务规划与投资回报
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
总投资40-60万元,预计8-12个月回本,首年净利润58万元
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 初期投资 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">初期投资明细</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{initialInvestment.map((investment, index) => {
|
||||
const Icon = investment.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="finance-card bg-white rounded-3xl p-6 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl bg-${investment.color}-100
|
||||
flex items-center justify-center mb-4`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 text-${investment.color}-600`} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{investment.category}</h4>
|
||||
<div className="text-2xl font-bold text-primary-600 mb-4">{investment.amount}</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{investment.items.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-8 text-center">
|
||||
<div className="inline-block bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-2xl px-8 py-4">
|
||||
<div className="text-sm mb-1">总投资预算</div>
|
||||
<div className="text-4xl font-bold">40-60万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 月度运营成本 */}
|
||||
<div className="finance-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">月度运营成本</h3>
|
||||
<div className="space-y-4 max-w-4xl mx-auto">
|
||||
{monthlyOperating.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-32">
|
||||
<span className="text-lg font-semibold text-gray-900">{item.item}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-10 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-32 text-right">
|
||||
<span className="text-lg font-semibold text-primary-600">{item.amount}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 text-center">
|
||||
<div className="text-lg text-gray-600 mb-2">月度总运营成本</div>
|
||||
<div className="text-3xl font-bold text-gray-900">8-12万元</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营收预测 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营收与利润预测</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{revenueProjection.map((projection, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`finance-card rounded-3xl p-8 shadow-xl border-2
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2
|
||||
${
|
||||
index === 1
|
||||
? 'bg-gradient-to-br from-primary-500 to-primary-700 text-white border-primary-600 scale-105'
|
||||
: 'bg-white border-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="text-center mb-6">
|
||||
<h4
|
||||
className={`text-2xl font-bold mb-2 ${index === 1 ? 'text-white' : 'text-gray-900'}`}
|
||||
>
|
||||
{projection.scenario}
|
||||
</h4>
|
||||
{index === 1 && (
|
||||
<span className="inline-block px-3 py-1 bg-white/20 rounded-full text-sm">
|
||||
推荐参考
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日均单量
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
{projection.dailySales}单
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
客单价
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.avgPrice}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.dailyRevenue}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
月营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.monthlyRevenue.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
净利润率
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
{projection.profitMargin}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`text-center pt-4 ${index === 1 ? 'bg-white/10' : 'bg-primary-50'}
|
||||
rounded-xl p-4 mt-4`}
|
||||
>
|
||||
<div className={`text-sm mb-1 ${index === 1 ? 'text-white/80' : 'text-gray-600'}`}>
|
||||
月净利润
|
||||
</div>
|
||||
<div className={`text-3xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
¥{projection.netProfit.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 投资回报分析 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">投资回报分析</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📅</div>
|
||||
<div className="text-sm text-white/80 mb-2">回本周期</div>
|
||||
<div className="text-3xl font-bold">8-12个月</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">💰</div>
|
||||
<div className="text-sm text-white/80 mb-2">首年净利润</div>
|
||||
<div className="text-3xl font-bold">58万元</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📈</div>
|
||||
<div className="text-sm text-white/80 mb-2">年投资回报率</div>
|
||||
<div className="text-3xl font-bold">116%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center max-w-4xl mx-auto">
|
||||
<p className="text-lg text-white/90 leading-relaxed">
|
||||
基于正常经营预期,首年可实现营业额
|
||||
<span className="font-bold text-2xl mx-2">103.7万元</span>
|
||||
,净利润率
|
||||
<span className="font-bold text-2xl mx-2">30%</span>
|
||||
,净利润
|
||||
<span className="font-bold text-2xl mx-2">58万元</span>
|
||||
。第二年随着品牌知名度提升和客户积累,利润将持续增长。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FinancialPlanningSection
|
||||
@@ -0,0 +1,257 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { MapPin, Store, Palette, Users } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const LocationDesignSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.location-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.location-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const locationCriteria = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: '核心商圈',
|
||||
description: '写字楼、高端社区周边',
|
||||
requirements: [
|
||||
'日均人流量 > 5000人',
|
||||
'白领占比 > 60%',
|
||||
'周边500米内办公人群 > 2000人',
|
||||
'可见性好,易于到达',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Store,
|
||||
title: '店铺规格',
|
||||
description: '面积60-120㎡',
|
||||
requirements: [
|
||||
'实际使用面积 80-100㎡',
|
||||
'层高 > 3米',
|
||||
'门面宽度 > 6米',
|
||||
'具备上下水、排烟条件',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: '装修风格',
|
||||
description: '简约现代,自然清新',
|
||||
requirements: [
|
||||
'浅色系为主基调',
|
||||
'原木元素点缀',
|
||||
'充足自然采光',
|
||||
'绿植景观设计',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '功能分区',
|
||||
description: '合理布局,提升效率',
|
||||
requirements: [
|
||||
'开放式厨房占比30%',
|
||||
'用餐区占比50%',
|
||||
'收银接待区占比10%',
|
||||
'储物备餐区占比10%',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const designElements = [
|
||||
{
|
||||
title: '色彩方案',
|
||||
items: ['主色: 浅青色/绿色', '辅色: 米白色', '点缀色: 原木色'],
|
||||
emoji: '🎨',
|
||||
},
|
||||
{
|
||||
title: '材质选择',
|
||||
items: ['原木桌椅', '大理石台面', '绿植墙面', '玻璃隔断'],
|
||||
emoji: '🪵',
|
||||
},
|
||||
{
|
||||
title: '照明设计',
|
||||
items: ['自然光为主', '暖光LED', '重点照明', '氛围灯光'],
|
||||
emoji: '💡',
|
||||
},
|
||||
{
|
||||
title: '软装配饰',
|
||||
items: ['北欧风家具', '艺术挂画', '绿色植物', '舒适座椅'],
|
||||
emoji: '🛋️',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="location"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="location-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">4️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第四阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
选址与店铺设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
精选核心商圈,打造简约自然的用餐环境,提供舒适愉悦的消费体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 选址与设计标准 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{locationCriteria.map((criterion, index) => {
|
||||
const Icon = criterion.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary-100 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-7 h-7 text-primary-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{criterion.title}</h3>
|
||||
<p className="text-gray-600">{criterion.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{criterion.requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{req}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 设计元素 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">设计元素</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{designElements.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card text-center p-6 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{element.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{element.title}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{element.items.map((item, idx) => (
|
||||
<li key={idx}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 空间布局示意 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">店铺空间布局</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">前厅区域 (70%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🍽️</span>
|
||||
<div>
|
||||
<div className="font-medium">用餐区</div>
|
||||
<div className="text-white/80 text-sm">30-40个座位,多种座位类型</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔍</span>
|
||||
<div>
|
||||
<div className="font-medium">开放式厨房</div>
|
||||
<div className="text-white/80 text-sm">透明化制作,增强信任感</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">💳</span>
|
||||
<div>
|
||||
<div className="font-medium">收银接待区</div>
|
||||
<div className="text-white/80 text-sm">点餐、取餐、咨询一体化</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">后厨区域 (30%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🥗</span>
|
||||
<div>
|
||||
<div className="font-medium">食材准备区</div>
|
||||
<div className="text-white/80 text-sm">清洗、切配、腌制</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔥</span>
|
||||
<div>
|
||||
<div className="font-medium">烹饪操作区</div>
|
||||
<div className="text-white/80 text-sm">煎、烤、蒸、煮</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">❄️</span>
|
||||
<div>
|
||||
<div className="font-medium">冷藏储存区</div>
|
||||
<div className="text-white/80 text-sm">冷柜、冷库、干货区</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center">
|
||||
<p className="text-lg text-white/90">
|
||||
总投资预算: <span className="text-2xl font-bold">35-50万元</span>
|
||||
(含装修、设备、前期物料)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default LocationDesignSection
|
||||
@@ -0,0 +1,241 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { TrendingUp, Users, DollarSign, Target } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketResearchSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// 标题动画
|
||||
gsap.from('.market-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.market-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
// 统计卡片动画
|
||||
gsap.from('.stat-card', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.stat-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
// 趋势图动画
|
||||
gsap.from('.trend-item', {
|
||||
x: -50,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.trend-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketStats = [
|
||||
{
|
||||
icon: DollarSign,
|
||||
value: '1200亿元',
|
||||
label: '2024年市场规模',
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
value: '18%',
|
||||
label: '年复合增长率',
|
||||
color: 'text-blue-500',
|
||||
bgColor: 'bg-blue-50',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
value: '3.5亿',
|
||||
label: '目标用户群体',
|
||||
color: 'text-purple-500',
|
||||
bgColor: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
value: '65%',
|
||||
label: '白领女性占比',
|
||||
color: 'text-pink-500',
|
||||
bgColor: 'bg-pink-50',
|
||||
},
|
||||
]
|
||||
|
||||
const trends = [
|
||||
{ year: '2023年', value: '1020亿', growth: '+15%' },
|
||||
{ year: '2024年', value: '1200亿', growth: '+18%' },
|
||||
{ year: '2025年(预测)', value: '1416亿', growth: '+18%' },
|
||||
{ year: '2026年(预测)', value: '1671亿', growth: '+18%' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="market"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="market-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">1️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第一阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
市场调研与分析
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
深入分析轻食市场现状,精准定位目标客户群体,把握行业发展趋势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 市场统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{marketStats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="stat-card bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl
|
||||
transition-all duration-300 transform hover:-translate-y-2
|
||||
border border-gray-100"
|
||||
>
|
||||
<div className={`${stat.bgColor} w-14 h-14 rounded-xl flex items-center justify-center mb-4`}>
|
||||
<Icon className={`w-7 h-7 ${stat.color}`} />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 市场趋势 */}
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-8">市场规模增长趋势</h3>
|
||||
<div className="space-y-4">
|
||||
{trends.map((trend, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="trend-item flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-40">
|
||||
<span className="text-lg font-semibold text-gray-900">{trend.year}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-12 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out flex items-center justify-end pr-4"
|
||||
style={{ width: `${(index + 1) * 20}%` }}
|
||||
>
|
||||
<span className="text-white font-bold">{trend.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-20 text-right">
|
||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 text-green-700
|
||||
rounded-full text-sm font-medium">
|
||||
{trend.growth}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标客户群体 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">核心客户画像</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">年龄段</div>
|
||||
<div className="text-gray-600">25-45岁中高端白领群体</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">收入水平</div>
|
||||
<div className="text-gray-600">月收入8000元以上</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费特点</div>
|
||||
<div className="text-gray-600">注重健康、品质和效率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">用餐场景</div>
|
||||
<div className="text-gray-600">工作日午餐、健身后轻食</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场机会分析</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">健康意识提升</div>
|
||||
<div className="text-gray-600">消费者对健康饮食需求持续增长</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">差异化空间大</div>
|
||||
<div className="text-gray-600">市场同质化严重,创新品牌有优势</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">政策支持</div>
|
||||
<div className="text-gray-600">健康中国战略推动行业发展</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费升级</div>
|
||||
<div className="text-gray-600">愿意为品质和服务支付溢价</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketResearchSection
|
||||
@@ -0,0 +1,345 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Smartphone, Users, Share2, Gift, Star, MessageCircle } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.marketing-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.marketing-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketingStrategies = [
|
||||
{
|
||||
title: '线上推广',
|
||||
icon: Smartphone,
|
||||
color: 'blue',
|
||||
tactics: [
|
||||
{
|
||||
name: '小程序商城',
|
||||
description: '自有小程序,在线点餐、会员管理',
|
||||
budget: '2万元',
|
||||
},
|
||||
{
|
||||
name: '抖音/小红书',
|
||||
description: '短视频营销,探店打卡种草',
|
||||
budget: '1万元/月',
|
||||
},
|
||||
{
|
||||
name: '美团/饿了么',
|
||||
description: '外卖平台入驻,扩大覆盖范围',
|
||||
budget: '佣金20%',
|
||||
},
|
||||
{
|
||||
name: 'SEO优化',
|
||||
description: '搜索引擎优化,提升品牌曝光',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '线下推广',
|
||||
icon: Users,
|
||||
color: 'green',
|
||||
tactics: [
|
||||
{
|
||||
name: '开业活动',
|
||||
description: '前100名5折优惠,吸引首批客户',
|
||||
budget: '1万元',
|
||||
},
|
||||
{
|
||||
name: '地推宣传',
|
||||
description: '周边写字楼发放优惠券',
|
||||
budget: '5000元',
|
||||
},
|
||||
{
|
||||
name: '异业合作',
|
||||
description: '与健身房、瑜伽馆等合作',
|
||||
budget: '3000元',
|
||||
},
|
||||
{
|
||||
name: '试吃活动',
|
||||
description: '定期举办新品试吃活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '会员体系',
|
||||
icon: Gift,
|
||||
color: 'purple',
|
||||
tactics: [
|
||||
{
|
||||
name: '充值优惠',
|
||||
description: '充500送50,充1000送150',
|
||||
budget: '让利10-15%',
|
||||
},
|
||||
{
|
||||
name: '积分系统',
|
||||
description: '消费1元积1分,积分兑换礼品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '生日特权',
|
||||
description: '生日当月享受8折优惠',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: '会员专享',
|
||||
description: '新品优先体验、专属活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '口碑营销',
|
||||
icon: Share2,
|
||||
color: 'pink',
|
||||
tactics: [
|
||||
{
|
||||
name: '分享有礼',
|
||||
description: '分享朋友圈集赞送饮品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '拼团活动',
|
||||
description: '3人拼团享8折优惠',
|
||||
budget: '8折让利',
|
||||
},
|
||||
{
|
||||
name: '推荐返现',
|
||||
description: '老客户推荐新客户各得10元',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: 'UGC内容',
|
||||
description: '鼓励顾客发布用餐照片',
|
||||
budget: '礼品成本',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const marketingTimeline = [
|
||||
{
|
||||
phase: '开业前1个月',
|
||||
actions: ['小程序开发上线', '社交媒体账号注册', '周边地推宣传', '异业合作洽谈'],
|
||||
icon: '🎯',
|
||||
},
|
||||
{
|
||||
phase: '开业首月',
|
||||
actions: ['开业大促活动', '会员系统推广', '抖音探店合作', '外卖平台入驻'],
|
||||
icon: '🚀',
|
||||
},
|
||||
{
|
||||
phase: '第2-3个月',
|
||||
actions: ['会员活动运营', '定期试吃活动', '短视频持续输出', '口碑营销推进'],
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
phase: '稳定运营期',
|
||||
actions: ['会员精细化运营', 'KOL合作推广', '季节性新品营销', '社区活动参与'],
|
||||
icon: '⭐',
|
||||
},
|
||||
]
|
||||
|
||||
const kpiTargets = [
|
||||
{ metric: '首月获客', target: '500+', icon: '👥' },
|
||||
{ metric: '会员转化率', target: '40%', icon: '💳' },
|
||||
{ metric: '复购率', target: '60%', icon: '🔄' },
|
||||
{ metric: '线上订单占比', target: '30%', icon: '📱' },
|
||||
{ metric: '客户满意度', target: '4.5分', icon: '⭐' },
|
||||
{ metric: '月营销成本', target: '<2万', icon: '💰' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="marketing"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="marketing-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">7️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第七阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
营销推广策略
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
线上线下结合,会员体系驱动,口碑传播为核心的全方位营销策略
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营销策略 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{marketingStrategies.map((strategy, index) => {
|
||||
const Icon = strategy.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${strategy.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${strategy.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{strategy.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{strategy.tactics.map((tactic, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 rounded-xl border border-gray-100 hover:border-primary-300
|
||||
hover:bg-primary-50 transition-all duration-300"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-semibold text-gray-900">{tactic.name}</h4>
|
||||
<span className="text-sm text-primary-600 font-medium whitespace-nowrap ml-2">
|
||||
{tactic.budget}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{tactic.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 营销时间线 */}
|
||||
<div className="marketing-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营销时间规划</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{marketingTimeline.map((timeline, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{timeline.icon}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{timeline.phase}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{timeline.actions.map((action, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500 mt-1">•</span>
|
||||
<span>{action}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI目标 */}
|
||||
<div className="marketing-card bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white mb-16">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">营销KPI目标</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{kpiTargets.map((kpi, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl bg-white/10 backdrop-blur-sm
|
||||
hover:bg-white/20 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{kpi.icon}</div>
|
||||
<div className="text-sm text-white/80 mb-2">{kpi.metric}</div>
|
||||
<div className="text-2xl font-bold">{kpi.target}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营销预算总结 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">营销预算分配</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">开业前期投入</span>
|
||||
<span className="text-xl font-bold text-primary-600">3-5万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">月度营销费用</span>
|
||||
<span className="text-xl font-bold text-primary-600">1.5-2万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">营销费用占比</span>
|
||||
<span className="text-xl font-bold text-primary-600">15-20%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">预期营销效果</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="flex items-start gap-2">
|
||||
<Star className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>品牌认知:</strong> 3个月内成为区域知名轻食品牌
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<MessageCircle className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>客户积累:</strong> 首年积累2000+会员客户
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Share2 className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>口碑传播:</strong> 60%新客户来自老客户推荐
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>复购率:</strong> 保持60%以上的高复购率
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketingSection
|
||||
@@ -0,0 +1,240 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Utensils, Leaf, Flame, Clock } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const ProductDevelopmentSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.product-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.product-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const productCategories = [
|
||||
{
|
||||
name: '能量碗系列',
|
||||
description: '高蛋白低脂,适合健身人群',
|
||||
icon: Flame,
|
||||
color: 'orange',
|
||||
products: [
|
||||
'青莳香煎牛肉能量碗',
|
||||
'烤鸡胸蔬菜能量碗',
|
||||
'三文鱼牛油果能量碗',
|
||||
'藜麦虾仁能量碗',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '轻食沙拉系列',
|
||||
description: '清爽低卡,膳食纤维丰富',
|
||||
icon: Leaf,
|
||||
color: 'green',
|
||||
products: [
|
||||
'青莳虾仁牛油果沙拉',
|
||||
'烟熏三文鱼沙拉',
|
||||
'鸡胸凯撒沙拉',
|
||||
'田园蔬菜沙拉',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '冷意面系列',
|
||||
description: '夏日清凉,口感丰富',
|
||||
icon: Utensils,
|
||||
color: 'blue',
|
||||
products: [
|
||||
'青莳夏季芒果鸡胸冷意面',
|
||||
'番茄海鲜冷意面',
|
||||
'青酱鸡肉冷意面',
|
||||
'日式和风冷意面',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '定制套餐',
|
||||
description: '个性化营养方案',
|
||||
icon: Clock,
|
||||
color: 'purple',
|
||||
products: [
|
||||
'青莳减脂专属套餐',
|
||||
'增肌健身套餐',
|
||||
'办公室白领套餐',
|
||||
'孕期营养套餐',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const nutritionFeatures = [
|
||||
{
|
||||
title: '精准热量控制',
|
||||
desc: '每份餐品热量控制在400-600卡路里',
|
||||
value: '400-600',
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
title: '高蛋白配比',
|
||||
desc: '蛋白质含量占比25-35%',
|
||||
value: '25-35',
|
||||
unit: '%',
|
||||
},
|
||||
{
|
||||
title: '低GI食材',
|
||||
desc: '血糖指数控制在55以下',
|
||||
value: '<55',
|
||||
unit: 'GI',
|
||||
},
|
||||
{
|
||||
title: '膳食纤维',
|
||||
desc: '每份含8-12g膳食纤维',
|
||||
value: '8-12',
|
||||
unit: 'g',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="product"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="product-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">3️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第三阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
产品开发与菜单设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
32款精心研发的轻食产品,科学营养配比,满足不同需求
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营养特点 */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{nutritionFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-2xl p-6 shadow-lg text-center
|
||||
hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="text-4xl font-bold text-primary-600 mb-2">
|
||||
{feature.value}
|
||||
<span className="text-xl ml-1">{feature.unit}</span>
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 mb-2">{feature.title}</div>
|
||||
<div className="text-sm text-gray-600">{feature.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 产品系列 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{productCategories.map((category, index) => {
|
||||
const Icon = category.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${category.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${category.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{category.name}</h3>
|
||||
<p className="text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{category.products.map((product, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50
|
||||
transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full group-hover:scale-125 transition-transform"></div>
|
||||
<span className="text-gray-700 group-hover:text-primary-600 transition-colors">
|
||||
{product}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||
<button
|
||||
className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
text-white rounded-xl font-medium
|
||||
hover:from-primary-600 hover:to-primary-700
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
查看详细菜单
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 产品开发理念 */}
|
||||
<div className="mt-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">产品研发理念</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">🔬</div>
|
||||
<div className="text-xl font-semibold mb-3">科学配方</div>
|
||||
<div className="text-white/90">
|
||||
营养师团队精心设计,确保每份餐品营养均衡
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">👨🍳</div>
|
||||
<div className="text-xl font-semibold mb-3">匠心制作</div>
|
||||
<div className="text-white/90">
|
||||
资深厨师团队,精选食材,严格把控每道工序
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">💚</div>
|
||||
<div className="text-xl font-semibold mb-3">持续创新</div>
|
||||
<div className="text-white/90">
|
||||
每季度推出新品,紧跟健康饮食趋势
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductDevelopmentSection
|
||||
@@ -0,0 +1,279 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { ChefHat, GraduationCap, Heart, Trophy } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const TeamBuildingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.team-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.team-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const teamStructure = [
|
||||
{
|
||||
role: '店长',
|
||||
count: 1,
|
||||
icon: Trophy,
|
||||
color: 'purple',
|
||||
responsibilities: [
|
||||
'整体运营管理',
|
||||
'人员调度安排',
|
||||
'客户关系维护',
|
||||
'业绩目标达成',
|
||||
],
|
||||
requirements: '3年以上餐饮管理经验',
|
||||
salary: '8000-12000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师长',
|
||||
count: 1,
|
||||
icon: ChefHat,
|
||||
color: 'orange',
|
||||
responsibilities: [
|
||||
'菜品研发创新',
|
||||
'食材质量把控',
|
||||
'厨房团队管理',
|
||||
'出品标准监督',
|
||||
],
|
||||
requirements: '5年以上轻食/西餐经验',
|
||||
salary: '7000-10000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师',
|
||||
count: 2,
|
||||
icon: ChefHat,
|
||||
color: 'green',
|
||||
responsibilities: [
|
||||
'菜品制作加工',
|
||||
'食材准备处理',
|
||||
'厨房卫生维护',
|
||||
'协助菜品研发',
|
||||
],
|
||||
requirements: '2年以上厨房工作经验',
|
||||
salary: '5000-7000元/月',
|
||||
},
|
||||
{
|
||||
role: '服务员',
|
||||
count: 3,
|
||||
icon: Heart,
|
||||
color: 'pink',
|
||||
responsibilities: [
|
||||
'顾客接待服务',
|
||||
'点餐收银操作',
|
||||
'餐厅清洁维护',
|
||||
'客户反馈收集',
|
||||
],
|
||||
requirements: '良好服务意识和沟通能力',
|
||||
salary: '4000-6000元/月',
|
||||
},
|
||||
]
|
||||
|
||||
const trainingPrograms = [
|
||||
{
|
||||
title: '产品知识培训',
|
||||
duration: '3天',
|
||||
content: [
|
||||
'菜品原料和制作工艺',
|
||||
'营养成分和健康价值',
|
||||
'食材溯源系统使用',
|
||||
'产品推荐技巧',
|
||||
],
|
||||
emoji: '📚',
|
||||
},
|
||||
{
|
||||
title: '服务标准培训',
|
||||
duration: '2天',
|
||||
content: [
|
||||
'服务流程和话术',
|
||||
'顾客投诉处理',
|
||||
'收银系统操作',
|
||||
'卫生安全规范',
|
||||
],
|
||||
emoji: '🎯',
|
||||
},
|
||||
{
|
||||
title: '品牌文化培训',
|
||||
duration: '1天',
|
||||
content: [
|
||||
'品牌理念和价值观',
|
||||
'企业文化认同',
|
||||
'团队协作精神',
|
||||
'职业发展规划',
|
||||
],
|
||||
emoji: '💚',
|
||||
},
|
||||
{
|
||||
title: '持续培训机制',
|
||||
duration: '长期',
|
||||
content: [
|
||||
'每月新品培训',
|
||||
'季度技能考核',
|
||||
'优秀员工分享',
|
||||
'外部学习交流',
|
||||
],
|
||||
emoji: '🔄',
|
||||
},
|
||||
]
|
||||
|
||||
const incentiveSystem = [
|
||||
{ icon: '💰', title: '绩效奖金', desc: '月度/季度销售达成奖励' },
|
||||
{ icon: '🏆', title: '晋升机制', desc: '明确的职业发展通道' },
|
||||
{ icon: '🎓', title: '培训机会', desc: '提供专业技能提升培训' },
|
||||
{ icon: '🎁', title: '福利待遇', desc: '五险一金、带薪年假、节日福利' },
|
||||
{ icon: '🌟', title: '员工关怀', desc: '生日礼物、员工活动、困难帮扶' },
|
||||
{ icon: '👥', title: '团队建设', desc: '定期团建活动增强凝聚力' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="team"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="team-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">5️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第五阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
团队建设与培训
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
7人精干团队,完善的培训体系,打造专业高效的服务团队
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 团队架构 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{teamStructure.map((member, index) => {
|
||||
const Icon = member.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-${member.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-8 h-8 text-${member.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{member.role}</h3>
|
||||
<span className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium">
|
||||
{member.count}人
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-2">{member.requirements}</div>
|
||||
<div className="text-lg font-semibold text-primary-600">{member.salary}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-gray-900 mb-3">岗位职责:</div>
|
||||
{member.responsibilities.map((resp, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-2 p-2 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{resp}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 培训体系 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">培训体系</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{trainingPrograms.map((program, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{program.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{program.title}</h4>
|
||||
<div className="text-sm text-primary-600 font-medium mb-4">
|
||||
培训周期: {program.duration}
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{program.content.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 激励机制 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">激励与福利体系</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{incentiveSystem.map((incentive, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-4 rounded-2xl hover:bg-white/10
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{incentive.icon}</div>
|
||||
<div className="font-semibold mb-2">{incentive.title}</div>
|
||||
<div className="text-sm text-white/80">{incentive.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20">
|
||||
<div className="text-center">
|
||||
<div className="text-lg text-white/90 mb-2">总人力成本预算</div>
|
||||
<div className="text-4xl font-bold">3.5-4.5万元/月</div>
|
||||
<div className="text-sm text-white/80 mt-2">(含工资、社保、福利)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TeamBuildingSection
|
||||
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": [],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@@ -0,0 +1,264 @@
|
||||
# 青莳轻食设计系统
|
||||
|
||||
## 颜色方案
|
||||
|
||||
### 主色调 (Primary) - 浅青色/绿色系
|
||||
代表健康、清新、自然的品牌特质
|
||||
|
||||
```css
|
||||
--primary-50: #e8f5e9 /* 超淡绿 - 背景 */
|
||||
--primary-100: #c8e6c9 /* 淡绿 - 次要背景 */
|
||||
--primary-200: #a5d6a7 /* 浅绿 - 悬停状态 */
|
||||
--primary-300: #81c784 /* 中浅绿 */
|
||||
--primary-400: #66bb6a /* 绿 - 次要按钮 */
|
||||
--primary-500: #4caf50 /* 标准绿 - 主按钮、重点文字 ⭐ */
|
||||
--primary-600: #43a047 /* 深绿 - 按钮悬停 */
|
||||
--primary-700: #388e3c /* 较深绿 */
|
||||
--primary-800: #2e7d32 /* 深绿 - 深色主题 */
|
||||
--primary-900: #1b5e20 /* 最深绿 - 强调 */
|
||||
```
|
||||
|
||||
### 辅助色 (Secondary) - 米白色系
|
||||
代表纯净、简约、清洁
|
||||
|
||||
```css
|
||||
--secondary-50: #fafafa /* 超淡灰白 */
|
||||
--secondary-100: #f5f5f5 /* 米白色 - 主要背景 ⭐ */
|
||||
--secondary-200: #eeeeee /* 浅灰白 */
|
||||
--secondary-300: #e0e0e0 /* 边框、分隔线 */
|
||||
--secondary-400: #bdbdbd /* 次要文字 */
|
||||
--secondary-500: #9e9e9e /* 禁用状态 */
|
||||
```
|
||||
|
||||
### 点缀色 (Accent) - 原木色系
|
||||
代表温暖、品质、自然
|
||||
|
||||
```css
|
||||
--accent-50: #f3e5d4 /* 超淡原木色 */
|
||||
--accent-100: #e6d0bc /* 淡原木色 */
|
||||
--accent-200: #d9baa4 /* 浅原木色 */
|
||||
--accent-300: #cca58c /* 中浅原木色 */
|
||||
--accent-400: #bf9074 /* 原木色 */
|
||||
--accent-500: #8b7355 /* 标准原木色 - 桌椅框架 ⭐ */
|
||||
--accent-600: #6d5a43 /* 深原木色 */
|
||||
--accent-700: #4f4132 /* 最深原木色 */
|
||||
```
|
||||
|
||||
## 字体系统
|
||||
|
||||
### 字体家族
|
||||
```css
|
||||
font-sans: 'Inter', system-ui, -apple-system, sans-serif
|
||||
font-serif: ui-serif, Georgia, Cambria, serif
|
||||
font-mono: 'JetBrains Mono', 'Fira Code', monospace
|
||||
```
|
||||
|
||||
### 字号规模 (使用 clamp 实现响应式)
|
||||
```css
|
||||
text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) /* 12-14px */
|
||||
text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem) /* 14-16px */
|
||||
text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem) /* 16-18px */
|
||||
text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem) /* 18-20px */
|
||||
text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem) /* 20-24px */
|
||||
text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem) /* 24-32px */
|
||||
text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem) /* 30-40px */
|
||||
text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem) /* 36-48px */
|
||||
text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem) /* 48-64px */
|
||||
```
|
||||
|
||||
### 字重
|
||||
```css
|
||||
font-light: 300 /* 轻量文字 */
|
||||
font-normal: 400 /* 正文 */
|
||||
font-medium: 500 /* 次要标题 */
|
||||
font-semibold: 600 /* 主要标题 */
|
||||
font-bold: 700 /* 强调标题 */
|
||||
```
|
||||
|
||||
### 行高
|
||||
```css
|
||||
leading-tight: 1.25 /* 标题 */
|
||||
leading-snug: 1.375 /* 副标题 */
|
||||
leading-normal: 1.5 /* 正文 */
|
||||
leading-relaxed: 1.625 /* 舒适正文 */
|
||||
leading-loose: 2 /* 宽松正文 */
|
||||
```
|
||||
|
||||
## 间距系统
|
||||
|
||||
### 基础单位：4px (0.25rem)
|
||||
```css
|
||||
spacing-0: 0 /* 0px */
|
||||
spacing-1: 0.25 /* 4px */
|
||||
spacing-2: 0.5 /* 8px ⭐ 基础单位 */
|
||||
spacing-3: 0.75 /* 12px */
|
||||
spacing-4: 1 /* 16px ⭐ 组件内边距 */
|
||||
spacing-6: 1.5 /* 24px ⭐ 组件间距 */
|
||||
spacing-8: 2 /* 32px ⭐ 区块间距 */
|
||||
spacing-12: 3 /* 48px ⭐ 大区块间距 */
|
||||
spacing-16: 4 /* 64px */
|
||||
spacing-24: 6 /* 96px ⭐ 章节间距 */
|
||||
spacing-32: 8 /* 128px */
|
||||
```
|
||||
|
||||
## 圆角系统
|
||||
```css
|
||||
rounded-none: 0 /* 无圆角 */
|
||||
rounded-sm: 0.125 /* 2px */
|
||||
rounded: 0.25 /* 4px */
|
||||
rounded-md: 0.375 /* 6px ⭐ 卡片 */
|
||||
rounded-lg: 0.5 /* 8px ⭐ 按钮 */
|
||||
rounded-xl: 0.75 /* 12px */
|
||||
rounded-2xl: 1 /* 16px */
|
||||
rounded-3xl: 1.5 /* 24px */
|
||||
rounded-4xl: 2 /* 32px ⭐ 图片容器 */
|
||||
rounded-full: 9999 /* 完全圆形 */
|
||||
```
|
||||
|
||||
## 阴影系统
|
||||
```css
|
||||
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)
|
||||
shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)
|
||||
shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)
|
||||
shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15)
|
||||
shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04) ⭐
|
||||
shadow-hard: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
|
||||
```
|
||||
|
||||
## 动画原则 (GSAP)
|
||||
|
||||
### 缓动函数 (Easing)
|
||||
```javascript
|
||||
// 标准缓动
|
||||
"power2.inOut" // 默认，平滑进出
|
||||
"power3.out" // 快进慢出，用于入场
|
||||
"power2.out" // 用于悬停效果
|
||||
|
||||
// 弹性缓动
|
||||
"elastic.out(1, 0.3)" // 弹性效果，用于强调
|
||||
"back.out(1.7)" // 回弹效果，用于卡片
|
||||
|
||||
// 自定义
|
||||
CustomEase.create("custom", "M0,0 C0.14,0 0.242,0.438 0.272,0.561 0.313,0.728 0.354,0.963 0.362,1 0.37,0.985 0.414,0.873 0.455,0.811 0.51,0.726 0.573,0.753 0.586,0.762 0.662,0.812 0.719,0.981 0.726,0.998 0.788,0.914 0.84,0.936 0.859,0.95 0.878,0.964 0.897,0.985 0.911,0.998 0.922,0.994 0.939,0.984 0.954,0.984 0.969,0.984 1,1 1,1")
|
||||
```
|
||||
|
||||
### 持续时间 (Duration)
|
||||
```javascript
|
||||
0.15s // 微交互（按钮点击）
|
||||
0.3s // 快速过渡（悬停效果）
|
||||
0.6s // 标准动画（卡片入场）
|
||||
1.0s // 慢动画（大区块入场）
|
||||
1.5s // 长动画（首屏Hero）
|
||||
```
|
||||
|
||||
### ScrollTrigger 配置
|
||||
```javascript
|
||||
ScrollTrigger.create({
|
||||
trigger: element,
|
||||
start: "top 80%", // 元素顶部到达视口80%位置时触发
|
||||
end: "bottom 20%", // 元素底部离开视口80%位置时结束
|
||||
scrub: 1, // 1秒延迟跟随滚动
|
||||
markers: false, // 开发模式显示标记
|
||||
toggleActions: "play none none reverse"
|
||||
})
|
||||
```
|
||||
|
||||
### 动画时间轴
|
||||
```javascript
|
||||
const tl = gsap.timeline({
|
||||
defaults: { duration: 0.6, ease: "power2.out" }
|
||||
})
|
||||
|
||||
tl.from(".hero-title", { y: 50, opacity: 0 })
|
||||
.from(".hero-subtitle", { y: 30, opacity: 0 }, "-=0.4")
|
||||
.from(".hero-cta", { scale: 0.9, opacity: 0 }, "-=0.3")
|
||||
```
|
||||
|
||||
### Stagger 延迟
|
||||
```javascript
|
||||
gsap.from(".card", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: {
|
||||
each: 0.1, // 每个元素延迟0.1s
|
||||
from: "start", // 从第一个开始
|
||||
ease: "power2.out"
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 组件样式示例
|
||||
|
||||
### 按钮
|
||||
```jsx
|
||||
// 主按钮
|
||||
<button className="px-6 py-3 bg-primary-500 text-white rounded-lg
|
||||
font-medium shadow-md hover:bg-primary-600 hover:shadow-lg
|
||||
transition-all duration-300 transform hover:-translate-y-0.5">
|
||||
了解更多
|
||||
</button>
|
||||
|
||||
// 次要按钮
|
||||
<button className="px-6 py-3 border-2 border-primary-500 text-primary-500
|
||||
rounded-lg font-medium hover:bg-primary-50 transition-colors duration-300">
|
||||
联系我们
|
||||
</button>
|
||||
```
|
||||
|
||||
### 卡片
|
||||
```jsx
|
||||
<div className="bg-white rounded-2xl shadow-soft p-8
|
||||
hover:shadow-xl transition-shadow duration-500
|
||||
border border-gray-100">
|
||||
{/* 卡片内容 */}
|
||||
</div>
|
||||
```
|
||||
|
||||
### 标题
|
||||
```jsx
|
||||
<h1 className="text-5xl font-bold text-gray-900 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
<h2 className="text-3xl font-semibold text-gray-800">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
食材可溯源、营养可量化、制作可看见
|
||||
</p>
|
||||
```
|
||||
|
||||
## 响应式断点
|
||||
```css
|
||||
sm: 640px /* 小型设备 (手机横屏) */
|
||||
md: 768px /* 中型设备 (平板) */
|
||||
lg: 1024px /* 大型设备 (小笔记本) ⭐ */
|
||||
xl: 1280px /* 超大设备 (桌面) ⭐ */
|
||||
2xl: 1536px /* 超超大设备 (大桌面) */
|
||||
```
|
||||
|
||||
## 布局容器
|
||||
```jsx
|
||||
// 标准容器
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 全宽容器
|
||||
<div className="w-full">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 内容区块
|
||||
<section className="py-24 px-4">
|
||||
{/* 区块内容 */}
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**适用项目**: 青莳轻食订单班展示网站
|
||||
@@ -0,0 +1,409 @@
|
||||
# 青莳轻食网站信息架构
|
||||
|
||||
## 整体结构
|
||||
|
||||
```
|
||||
青莳轻食订单班展示网站
|
||||
│
|
||||
├── Hero Section (首屏)
|
||||
│ ├── 品牌标题：青莳轻食
|
||||
│ ├── 副标题：中高端个性化轻食店铺经营方案
|
||||
│ ├── 核心数据：1200亿市场规模
|
||||
│ ├── 三大差异化特点
|
||||
│ └── 滚动提示动画
|
||||
│
|
||||
├── Timeline Navigation (固定时间轴导航)
|
||||
│ ├── 进度指示器
|
||||
│ ├── 快速跳转按钮
|
||||
│ └── 当前阶段高亮
|
||||
│
|
||||
├── Content Sections (7个内容区块)
|
||||
│ │
|
||||
│ ├── 1️⃣ 市场调研阶段
|
||||
│ │ ├── 市场规模数据可视化
|
||||
│ │ ├── 客户群体分析（饼图）
|
||||
│ │ ├── 竞争环境分析
|
||||
│ │ └── Agent展示：餐饮市场调研专家
|
||||
│ │
|
||||
│ ├── 2️⃣ 品牌定位阶段
|
||||
│ │ ├── 品牌LOGO展示
|
||||
│ │ ├── 三大差异化优势
|
||||
│ │ │ ├── 食材可溯源（扫码系统）
|
||||
│ │ │ ├── 营养可量化（营养标签）
|
||||
│ │ │ └── 制作可看见（明厨亮灶）
|
||||
│ │ ├── 首店信息（国贸店110㎡）
|
||||
│ │ └── Agent展示：餐饮品牌设计专家
|
||||
│ │
|
||||
│ ├── 3️⃣ 产品研发阶段
|
||||
│ │ ├── 32款菜品矩阵展示
|
||||
│ │ │ ├── 经典沙拉类（10款）
|
||||
│ │ │ ├── 能量碗类（12款）
|
||||
│ │ │ ├── 定制套餐（6款）
|
||||
│ │ │ └── 季节限定（4款）
|
||||
│ │ ├── 核心产品图文展示
|
||||
│ │ │ ├── 青莳虾仁牛油果沙拉 (48元)
|
||||
│ │ │ ├── 青莳香煎牛肉能量碗 (62元)
|
||||
│ │ │ ├── 青莳减脂专属套餐 (65元)
|
||||
│ │ │ └── 青莳夏季芒果鸡胸冷意面 (52元)
|
||||
│ │ ├── 价格体系表格
|
||||
│ │ └── Agent展示：菜品研发专家
|
||||
│ │
|
||||
│ ├── 4️⃣ 选址装修阶段
|
||||
│ │ ├── 选址标准分析
|
||||
│ │ ├── 首店案例：北京国贸B座
|
||||
│ │ │ ├── 店面外观图
|
||||
│ │ │ ├── 店内装修图
|
||||
│ │ │ ├── 功能分区（堂食65㎡+厨房30㎡+收银15㎡）
|
||||
│ │ │ └── 3D平面图
|
||||
│ │ ├── 品牌色彩应用
|
||||
│ │ └── Agent展示：餐厅选址装修专家
|
||||
│ │
|
||||
│ ├── 5️⃣ 团队组建阶段
|
||||
│ │ ├── 8人团队配置
|
||||
│ │ │ ├── 店长（1人，8000-10000元）
|
||||
│ │ │ ├── 厨师（2人，6000-8000元）
|
||||
│ │ │ ├── 服务员（3人，4500-5500元）
|
||||
│ │ │ ├── 营养师（1人，7000-9000元）
|
||||
│ │ │ └── 收银员（1人，4500-5500元）
|
||||
│ │ ├── 团队成员照片展示
|
||||
│ │ ├── 培训体系介绍
|
||||
│ │ └── Agent展示：餐饮团队人员管理专家
|
||||
│ │
|
||||
│ ├── 6️⃣ 财务规划阶段
|
||||
│ │ ├── 初始投资预算（50万元）
|
||||
│ │ │ ├── 店铺租赁（15万）
|
||||
│ │ │ ├── 装修费用（15万）
|
||||
│ │ │ ├── 设备采购（10万）
|
||||
│ │ │ └── 其他费用（10万）
|
||||
│ │ ├── 收入预测可视化
|
||||
│ │ │ ├── 月度收入曲线图
|
||||
│ │ │ ├── 1-3月：13.5万/月
|
||||
│ │ │ ├── 4-6月：20.52万/月
|
||||
│ │ │ └── 7-12月：31.35万/月
|
||||
│ │ ├── 成本结构饼图
|
||||
│ │ ├── 利润预测
|
||||
│ │ │ ├── 第一年净利润：58.032万元
|
||||
│ │ │ ├── 净利率：20%
|
||||
│ │ │ └── 投资回报期：14个月
|
||||
│ │ └── Agent展示：财务预算专家
|
||||
│ │
|
||||
│ └── 7️⃣ 营销推广阶段
|
||||
│ ├── 会员制度
|
||||
│ │ ├── 充值优惠政策
|
||||
│ │ ├── 消费福利体系
|
||||
│ │ └── 会员增长目标
|
||||
│ ├── 线上营销策略
|
||||
│ │ ├── 社交媒体运营
|
||||
│ │ ├── 外卖平台运营
|
||||
│ │ └── KOL合作计划
|
||||
│ ├── 线下推广活动
|
||||
│ │ ├── 写字楼推广
|
||||
│ │ ├── 健身房合作
|
||||
│ │ └── 体验活动
|
||||
│ └── Agent展示：轻食店经营管理专家
|
||||
│
|
||||
└── Summary Section (总结区块)
|
||||
├── 完整方案总结
|
||||
├── 关键成功因素
|
||||
├── 风险管理措施
|
||||
├── 联系方式
|
||||
└── CTA按钮
|
||||
```
|
||||
|
||||
## 导航结构
|
||||
|
||||
### 主导航
|
||||
```
|
||||
├── 首页 (Hero)
|
||||
├── 市场调研
|
||||
├── 品牌定位
|
||||
├── 产品研发
|
||||
├── 选址装修
|
||||
├── 团队组建
|
||||
├── 财务规划
|
||||
└── 营销推广
|
||||
```
|
||||
|
||||
### 时间轴导航
|
||||
- 固定在左侧或右侧
|
||||
- 垂直布局
|
||||
- 跟随滚动更新进度
|
||||
- 点击可快速跳转
|
||||
|
||||
## 页面流程
|
||||
|
||||
### 用户浏览路径
|
||||
```
|
||||
进入首屏
|
||||
↓ 滚动或点击
|
||||
市场调研（了解市场机遇）
|
||||
↓ 滚动
|
||||
品牌定位（理解差异化优势）
|
||||
↓ 滚动
|
||||
产品研发（查看32款菜品）
|
||||
↓ 滚动
|
||||
选址装修（查看首店案例）
|
||||
↓ 滚动
|
||||
团队组建（了解人员配置）
|
||||
↓ 滚动
|
||||
财务规划（查看投资回报）
|
||||
↓ 滚动
|
||||
营销推广（了解推广策略）
|
||||
↓ 滚动
|
||||
总结区块（完整方案总结）
|
||||
```
|
||||
|
||||
## 交互设计
|
||||
|
||||
### 滚动动画
|
||||
```javascript
|
||||
// 区块入场动画
|
||||
gsap.from(".section", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: ".section",
|
||||
start: "top 80%",
|
||||
end: "bottom 20%",
|
||||
toggleActions: "play none none reverse"
|
||||
}
|
||||
})
|
||||
|
||||
// 标题动画
|
||||
gsap.from(".section-title", {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2
|
||||
})
|
||||
|
||||
// 卡片stagger动画
|
||||
gsap.from(".card", {
|
||||
y: 80,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.15,
|
||||
ease: "power3.out"
|
||||
})
|
||||
```
|
||||
|
||||
### 时间轴导航交互
|
||||
```javascript
|
||||
// 滚动监听
|
||||
window.addEventListener('scroll', () => {
|
||||
const sections = document.querySelectorAll('.timeline-section')
|
||||
sections.forEach((section, index) => {
|
||||
const rect = section.getBoundingClientRect()
|
||||
if (rect.top <= 100 && rect.bottom >= 100) {
|
||||
updateActiveSection(index)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 平滑滚动
|
||||
function scrollToSection(sectionId) {
|
||||
gsap.to(window, {
|
||||
duration: 1.2,
|
||||
scrollTo: {
|
||||
y: `#${sectionId}`,
|
||||
offsetY: 80
|
||||
},
|
||||
ease: "power3.inOut"
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 图片查看器
|
||||
```javascript
|
||||
// 点击图片放大
|
||||
const [selectedImage, setSelectedImage] = useState(null)
|
||||
|
||||
// 全屏模态框
|
||||
<Modal open={!!selectedImage}>
|
||||
<img src={selectedImage?.full} />
|
||||
<Controls zoom scale rotate />
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### 数据可视化
|
||||
```javascript
|
||||
// 使用GSAP动画化图表
|
||||
gsap.to(".chart-bar", {
|
||||
height: data.value + "%",
|
||||
duration: 1,
|
||||
ease: "power2.out",
|
||||
stagger: 0.1
|
||||
})
|
||||
|
||||
// 数字计数动画
|
||||
gsap.to(".counter", {
|
||||
textContent: targetValue,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
snap: { textContent: 1 }
|
||||
})
|
||||
```
|
||||
|
||||
## 响应式布局
|
||||
|
||||
### 桌面端 (≥1024px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav │ Content Section │
|
||||
│ (固定左侧) │ (主内容区) │
|
||||
│ │ │
|
||||
│ ▸ 调研 │ [市场数据图表] │
|
||||
│ ▸ 定位 │ [文字说明] │
|
||||
│ ● 产品 │ [图片展示] │
|
||||
│ ▸ 选址 │ [Agent卡片] │
|
||||
│ ▸ 团队 │ │
|
||||
│ ▸ 财务 │ │
|
||||
│ ▸ 营销 │ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 平板端 (768px - 1023px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav (顶部横向) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Content Section (单列) │
|
||||
│ [内容区块] │
|
||||
│ [图片展示] │
|
||||
│ [Agent卡片] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 移动端 (<768px)
|
||||
```
|
||||
┌─────────────┐
|
||||
│ Hero │
|
||||
│ (简化版) │
|
||||
├─────────────┤
|
||||
│ Nav Button │
|
||||
│ (汉堡菜单) │
|
||||
├─────────────┤
|
||||
│ Content │
|
||||
│ (单列) │
|
||||
│ [文字] │
|
||||
│ [图片] │
|
||||
│ [卡片] │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
## 组件层级
|
||||
|
||||
```
|
||||
App
|
||||
├── HeroSection
|
||||
│ ├── HeroTitle
|
||||
│ ├── HeroSubtitle
|
||||
│ ├── HeroStats
|
||||
│ └── ScrollIndicator
|
||||
├── TimelineNav
|
||||
│ ├── NavItem (×7)
|
||||
│ └── ProgressBar
|
||||
├── ContentSections
|
||||
│ ├── MarketResearchSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── DataVisualization
|
||||
│ │ ├── TextContent
|
||||
│ │ └── AgentCard
|
||||
│ ├── BrandPositioningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BrandLogo
|
||||
│ │ ├── DifferentiationPoints
|
||||
│ │ └── AgentCard
|
||||
│ ├── ProductDevelopmentSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── ProductGrid
|
||||
│ │ │ └── ProductCard (×32)
|
||||
│ │ ├── PriceTable
|
||||
│ │ └── AgentCard
|
||||
│ ├── LocationDesignSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── LocationInfo
|
||||
│ │ ├── FloorPlan
|
||||
│ │ └── AgentCard
|
||||
│ ├── TeamBuildingSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── TeamGrid
|
||||
│ │ │ └── MemberCard (×8)
|
||||
│ │ └── AgentCard
|
||||
│ ├── FinancialPlanningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BudgetChart
|
||||
│ │ ├── RevenueChart
|
||||
│ │ ├── ProfitSummary
|
||||
│ │ └── AgentCard
|
||||
│ └── MarketingSection
|
||||
│ ├── SectionHeader
|
||||
│ ├── MembershipProgram
|
||||
│ ├── OnlineMarketing
|
||||
│ ├── OfflinePromotion
|
||||
│ └── AgentCard
|
||||
└── SummarySection
|
||||
├── KeyTakeaways
|
||||
├── RiskManagement
|
||||
└── CTAButtons
|
||||
```
|
||||
|
||||
## 数据流
|
||||
|
||||
```
|
||||
content_checklist.json (数据源)
|
||||
↓
|
||||
TypeScript 接口定义
|
||||
↓
|
||||
Zustand 状态管理
|
||||
↓
|
||||
React 组件树
|
||||
↓
|
||||
用户界面
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 图片懒加载
|
||||
```javascript
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component'
|
||||
|
||||
<LazyLoadImage
|
||||
src={image.full}
|
||||
placeholder={<Skeleton />}
|
||||
effect="blur"
|
||||
/>
|
||||
```
|
||||
|
||||
### 代码分割
|
||||
```javascript
|
||||
import { lazy, Suspense } from 'react'
|
||||
|
||||
const ProductSection = lazy(() => import('./sections/ProductSection'))
|
||||
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ProductSection />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
### GSAP性能
|
||||
```javascript
|
||||
// 使用will-change提示浏览器
|
||||
gsap.set(".animate-element", { willChange: "transform" })
|
||||
|
||||
// 动画完成后清除
|
||||
onComplete: () => {
|
||||
gsap.set(".animate-element", { clearProps: "willChange" })
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**下一步**: 开始组件开发
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* 自定义组件样式 */
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* 自定义工具类 */
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50', // 主色 - 浅青色/绿色
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
},
|
||||
secondary: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5', // 米白色
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
},
|
||||
accent: {
|
||||
50: '#f3e5d4',
|
||||
100: '#e6d0bc',
|
||||
200: '#d9baa4',
|
||||
300: '#cca58c',
|
||||
400: '#bf9074',
|
||||
500: '#8b7355', // 原木色
|
||||
600: '#6d5a43',
|
||||
700: '#4f4132',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
serif: ['ui-serif', 'Georgia', 'Cambria', 'serif'],
|
||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
'144': '36rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
||||
'hard': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user