feat: 完成化工订单班图片处理和项目记忆重组
详细说明: - 化工订单班图片已标准化处理(8个图片,文件名与alt text完全一致) - 完成环保、财经商贸订单班的图片重命名工作 - 重组项目记忆文件,按照功能模块编号(00-09) - 删除旧的分散记忆文件,统一到新的编号体系 - 添加终端模拟文件:chemical.ts, environmental.ts, finance.ts - 清理web_result冗余文件(food react-app等) - 新增playwright截图记录和记忆文档 - 影响模块:订单班文档资料、项目记忆系统、终端模拟系统
@@ -90,7 +90,19 @@
|
||||
"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头像/\")"
|
||||
"Bash(do echo \"=== $order - Agent头像 ===\" ls -1 \"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/$order/agent头像/\")",
|
||||
"Bash(\"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/财经商贸/notion文稿/rename_images.sh\")",
|
||||
"Bash(\"化妆品电商运营 278118168b2380dd812fc71d5d440b35.md\")",
|
||||
"Bash(\"某地表水环境质量考核断面水质采样方案撰写 27a04df704b380b59e0fdcf216e8ea5e.md\")",
|
||||
"Bash(./rename_images.sh)",
|
||||
"Bash(\"半导体ai综合检测项目 281d463fce518050869ac4e6fd58a861.md\")",
|
||||
"Bash(do if [ \"$file\" != \"index.ts\" ])",
|
||||
"Bash(then echo -n \"$file: \")",
|
||||
"Bash(fi)",
|
||||
"Bash(do echo \"=== $file ===\")",
|
||||
"Bash(open http://localhost:3000/order-classes/food/)",
|
||||
"Bash(test:*)",
|
||||
"Bash(readlink:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": [],
|
||||
|
||||
BIN
.playwright-mcp/food_light_theme.png
Normal file
|
After Width: | Height: | Size: 10 MiB |
BIN
.playwright-mcp/food_section_1_market.png
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
.playwright-mcp/food_section_1_market_with_agent.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
.playwright-mcp/food_section_2_brand_with_agent.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
.playwright-mcp/food_section_3_location_with_agent.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
.playwright-mcp/food_section_4_menu_agent.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
.playwright-mcp/food_section_5_operation_agent.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
.playwright-mcp/food_section_6_team_agent.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
.playwright-mcp/food_section_7_finance_agent.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
202
.serena/memories/00_记忆索引和使用指南.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# Serena记忆索引和使用指南
|
||||
|
||||
## 📚 记忆文件清单(更新于2025-10-03)
|
||||
|
||||
### 当前有效记忆(共9个)
|
||||
1. **00_记忆索引和使用指南** - 本文档,记忆系统的导航和使用说明
|
||||
2. **01_项目概述和架构** - 项目整体介绍、技术架构、12个订单班系统
|
||||
3. **02_终端模拟开发指南** - 终端模拟内容开发完整流程和最佳实践
|
||||
4. **03_订单班配置清单** - 12个订单班详细配置、Agent团队、图片资源
|
||||
5. **04_SuperDesign工作流** - UI设计迭代流程、7维度评估方法
|
||||
6. **05_运行命令和部署** - 所有运行命令、端口配置、部署流程
|
||||
7. **06_问题解决和优化** - 常见问题、解决方案、性能优化建议
|
||||
8. **07_web_result项目架构和订单班展示系统** - Web结果展示系统详细架构、文旅实现分析
|
||||
9. **08_项目维护和更新原则** - 记忆系统维护规范、变更同步要求 ⚠️ **重要**
|
||||
|
||||
## 🎯 使用场景指南
|
||||
|
||||
### 场景1:初次了解项目
|
||||
```
|
||||
读取顺序:
|
||||
1. 01_项目概述和架构 - 了解多订单班演示系统整体架构
|
||||
2. 03_订单班配置清单 - 查看12个订单班配置详情
|
||||
3. 05_运行命令和部署 - 学习如何启动和访问系统
|
||||
```
|
||||
|
||||
### 场景2:开发新订单班
|
||||
```
|
||||
读取顺序:
|
||||
1. 02_终端模拟开发指南 - 掌握终端模拟开发流程
|
||||
2. 03_订单班配置清单 - 参考已完成订单班的配置
|
||||
3. 04_SuperDesign工作流 - 如需设计订单班结果页面
|
||||
```
|
||||
|
||||
### 场景3:UI设计优化
|
||||
```
|
||||
读取顺序:
|
||||
1. 04_SuperDesign工作流 - 学习5轮迭代优化策略
|
||||
2. 01_项目概述和架构 - 了解设计规范和主题系统
|
||||
3. 06_问题解决和优化 - 查看设计优化建议
|
||||
```
|
||||
|
||||
### 场景4:运行和部署
|
||||
```
|
||||
读取顺序:
|
||||
1. 05_运行命令和部署 - 查找启动命令和端口配置
|
||||
2. 01_项目概述和架构 - 了解项目结构和访问地址
|
||||
3. 06_问题解决和优化 - 遇到问题时查阅
|
||||
```
|
||||
|
||||
### 场景5:调试和排错
|
||||
```
|
||||
读取顺序:
|
||||
1. 06_问题解决和优化 - 查找错误解决方案
|
||||
2. 05_运行命令和部署 - 检查运行配置
|
||||
3. 03_订单班配置清单 - 检查订单班数据配置
|
||||
```
|
||||
|
||||
## 🔄 记忆更新记录
|
||||
|
||||
### 2025-10-03 新增记忆
|
||||
- ✅ **新增07_web_result项目架构**:详细分析web_result展示系统架构、路由机制、文旅和食品订单班实现对比
|
||||
- ✅ **新增08_项目维护原则**:建立记忆同步机制,强调web_result变更必须同步更新Serena记忆
|
||||
|
||||
### 2025-10-03 重大更新
|
||||
- ✅ **重构记忆系统**:采用编号归档标准,建立清晰的索引体系
|
||||
- ✅ **创建7个核心记忆**:覆盖项目概述、架构、开发、配置、设计、运行、优化全流程
|
||||
- ✅ **整合分散内容**:将19个旧记忆文件整合到7个核心文件中
|
||||
- ✅ **补充最新进展**:更新9个已完成订单班、SuperDesign工作流、端口配置等最新信息
|
||||
- ✅ **建立索引导航**:提供5种使用场景的读取指南
|
||||
|
||||
### 删除的旧记忆文件(19个)
|
||||
整合前的文件已被合并到新的编号记忆中:
|
||||
- duoduo_agent_design_system.md → 01
|
||||
- exhibition_demo_multiagent_system.md → 01
|
||||
- exhibition_demo_architecture_2025.md → 01
|
||||
- exhibition_web_frontend_2025.md → 01
|
||||
- terminal-simulation-development-guide.md → 02
|
||||
- terminal_simulation_creation_best_practices.md → 02
|
||||
- order-class-naming-convention.md → 03
|
||||
- finance_terminal_simulation_creation.md → 03
|
||||
- logistics_terminal_simulation_creation.md → 03
|
||||
- intelligent_manufacturing_terminal_simulation_creation.md → 03
|
||||
- civil_engineering_terminal_simulation_creation.md → 03
|
||||
- energy_order_class_terminal_simulation_creation.md → 03
|
||||
- health_order_class_terminal_simulation_creation.md → 03
|
||||
- superdesign_workflow_best_practices.md → 04
|
||||
- 订单班网站设计流程_SuperDesign工作流.md → 04
|
||||
- exhibition_demo_data_folder_structure.md → 05
|
||||
- n8n项目开发规范.md → 05
|
||||
- n8n_chinese_version_history.md → 06
|
||||
- typescript_config_fix_2025.md → 06
|
||||
|
||||
## 💡 最佳实践
|
||||
|
||||
### 读取策略
|
||||
1. **按需读取**:根据具体任务选择性读取相关记忆
|
||||
2. **优先级**:编号记忆(01-06)包含最新最完整的信息
|
||||
3. **场景导向**:使用"使用场景指南"快速定位需要的记忆
|
||||
4. **避免冗余**:不要读取已删除的旧记忆名称
|
||||
|
||||
### 更新原则
|
||||
1. **及时更新**:发现信息变化立即更新相关记忆
|
||||
2. **避免冗余**:删除过时或重复的记忆
|
||||
3. **保持结构**:维护清晰的编号和命名体系
|
||||
4. **记录变更**:在本索引中更新"记忆更新记录"
|
||||
|
||||
## 🚀 快速操作指令
|
||||
|
||||
```bash
|
||||
# 查看项目结构
|
||||
ls -la .serena/memories/
|
||||
|
||||
# 读取核心记忆(使用serena工具)
|
||||
read_memory("01_项目概述和架构")
|
||||
read_memory("05_运行命令和部署")
|
||||
|
||||
# 运行展会演示系统
|
||||
cd web_frontend/exhibition-demo && pnpm preview
|
||||
|
||||
# 访问系统
|
||||
# 主入口: http://localhost:4173
|
||||
# Web结果: http://localhost:4155/
|
||||
```
|
||||
|
||||
## 📊 项目核心信息速查
|
||||
|
||||
### 技术栈
|
||||
- **前端**: React 18 + TypeScript + Tailwind CSS + Vite
|
||||
- **后端**: n8n 1.109.2 (完整中文化)
|
||||
- **包管理**: pnpm workspaces
|
||||
|
||||
### 12个订单班
|
||||
1. 文旅 (wenlu) - 2024长三角新能源汽车展
|
||||
2. 食品 (food) - 青莳轻食连锁品牌
|
||||
3. 财经商贸 (finance) - 化妆品电商全链路运营
|
||||
4. 智能开发 (dev) - K12在线教育平台
|
||||
5. 智能制造 (manufacturing) - 汽车零部件智能分拣
|
||||
6. 视觉设计 (design) - 同里古镇农文旅宣传片
|
||||
7. 交通物流 (logistics) - 冷链AGV调度系统
|
||||
8. 土木 (civil) - 滨河防洪堤加固工程
|
||||
9. 大健康 (health) - AI心理咨询服务平台
|
||||
10. 能源 (energy) - 光伏电池片智能检测
|
||||
11. 化工 (chemical) - 半导体材料质量检测
|
||||
12. 环保 (environment) - 城市地表水环境监测
|
||||
|
||||
### 端口配置(系统级硬约束)
|
||||
- n8n平台: 5678
|
||||
- 展会演示: 4173
|
||||
- 食品订单班: 4174
|
||||
- **Web结果展示: 4155** ⚠️ 禁止使用8080或其他端口
|
||||
|
||||
### 访问地址
|
||||
- 主入口: http://localhost:4173
|
||||
- Web结果: http://localhost:4155/
|
||||
- 文旅订单班: http://localhost:4155/order-class/wenlu
|
||||
- 食品订单班: http://localhost:4155/order-class/food
|
||||
|
||||
## ⚠️ 重要提醒
|
||||
|
||||
### 系统约束
|
||||
1. **端口配置**: Web结果展示系统必须使用端口4155
|
||||
2. **数据管理**: 终端模拟数据使用TypeScript,不使用JSON文件
|
||||
3. **设计规范**: 必须保持苹果风格设计语言的一致性
|
||||
4. **包管理**: 必须使用pnpm,禁止使用npm或yarn
|
||||
|
||||
### 开发规范
|
||||
1. **订单班开发**: 需要agent prompt和专家头像数据
|
||||
2. **图片路径**: 确保软链接 `web_frontend/exhibition-demo/public/data/订单班文档资料`
|
||||
3. **命名规范**: orderClassId必须与orderClasses.json中的id完全一致
|
||||
4. **代码提交**: 提交前必须运行lint和typecheck
|
||||
|
||||
### 项目目标
|
||||
- 演示AI多智能体协作进行展会策划
|
||||
- 基于n8n工作流平台的中文版展示
|
||||
- 12个专业领域的完整解决方案演示
|
||||
|
||||
## 📈 记忆统计
|
||||
|
||||
- **总记忆数**: 7个(核心记忆)
|
||||
- **最后更新**: 2025-10-03
|
||||
- **覆盖内容**: 项目概述、架构、终端模拟、订单班配置、SuperDesign、运行部署、问题解决
|
||||
- **删除记忆**: 19个旧文件已整合
|
||||
- **已完成订单班**: 9个(wenlu, food, finance, logistics, manufacturing, dev, civil, energy, health)
|
||||
- **待完成订单班**: 3个(design, chemical, environment)
|
||||
|
||||
## 🔍 记忆文件依赖关系
|
||||
|
||||
```
|
||||
00_记忆索引和使用指南 (本文档)
|
||||
├── 01_项目概述和架构 (项目全局信息)
|
||||
│ ├── 02_终端模拟开发指南 (开发流程)
|
||||
│ │ └── 03_订单班配置清单 (具体配置)
|
||||
│ ├── 04_SuperDesign工作流 (UI设计)
|
||||
│ └── 05_运行命令和部署 (运行配置)
|
||||
└── 06_问题解决和优化 (问题排查)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**记忆系统由Serena AI维护,保持精简、准确、实用。**
|
||||
**版本**: v2.0 - 编号归档标准
|
||||
**更新**: 2025-10-03
|
||||
264
.serena/memories/01_项目概述和架构.md
Normal file
@@ -0,0 +1,264 @@
|
||||
# 项目概述和架构 (2025-10-03)
|
||||
|
||||
## 📋 项目概述
|
||||
|
||||
### 项目名称
|
||||
**展会策划 AI 多智能体协作演示系统 + n8n 中文版工作流平台**
|
||||
|
||||
### 核心目标
|
||||
- 演示 AI 多智能体协作进行展会策划和专业领域解决方案
|
||||
- 展示 n8n 工作流平台的完整中文化版本
|
||||
- 提供 12 个专业领域的完整 AI Agent 协作演示
|
||||
|
||||
### 项目特色
|
||||
1. **多订单班系统**:单一 exhibition-demo 项目架构,动态切换 12 个订单班
|
||||
2. **AI Agent 协作**:每个订单班 6-10 个专业 Agent 全流程协作
|
||||
3. **n8n 中文化**:完整中文化的工作流自动化平台(3465 行翻译)
|
||||
4. **苹果风格设计**:统一的设计语言,简洁优雅的用户体验
|
||||
|
||||
## 🏗️ 技术架构
|
||||
|
||||
### 技术栈
|
||||
```yaml
|
||||
前端:
|
||||
框架: React 18 + TypeScript
|
||||
构建: Vite
|
||||
样式: Tailwind CSS
|
||||
状态: Zustand
|
||||
路由: React Router v6
|
||||
|
||||
后端:
|
||||
平台: n8n 1.109.2 (Node.js + TypeScript + Express)
|
||||
数据库: SQLite/PostgreSQL/MySQL (TypeORM)
|
||||
|
||||
包管理:
|
||||
工具: pnpm workspaces + Turbo
|
||||
版本: pnpm 8+
|
||||
|
||||
测试:
|
||||
单元: Jest
|
||||
E2E: Playwright
|
||||
```
|
||||
|
||||
### 数据管理方案
|
||||
- **配置存储**: JSON 文件(orderClasses.json)
|
||||
- **终端模拟**: TypeScript 数据管理(src/data/terminalSimulations/)
|
||||
- **图片资源**: 软链接方式访问项目根目录数据文件夹
|
||||
- **状态管理**: Zustand + sessionStorage
|
||||
|
||||
### 端口配置(系统级硬约束)⚠️
|
||||
```
|
||||
n8n平台: 5678
|
||||
展会演示: 4173
|
||||
食品订单班: 4174
|
||||
Web结果展示: 4155 【禁止使用 8080 或其他端口】
|
||||
```
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
2025-09-08_n8nDEMO演示/
|
||||
├── n8n-n8n-1.109.2/ # n8n 源代码(完整中文化)
|
||||
├── web_frontend/
|
||||
│ ├── exhibition-demo/ # 主演示系统 (React + TS)
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── components/ # RequirementModal, OrderClassIcons
|
||||
│ │ │ ├── pages/ # WorkflowPageV4, ResultPageV2
|
||||
│ │ │ ├── data/
|
||||
│ │ │ │ ├── orderClasses.json # 12个订单班配置
|
||||
│ │ │ │ └── terminalSimulations/ # TypeScript终端数据
|
||||
│ │ │ │ ├── index.ts # 统一管理器
|
||||
│ │ │ │ ├── wenlu.ts # 文旅 ✅
|
||||
│ │ │ │ ├── food.ts # 食品 ✅
|
||||
│ │ │ │ ├── finance.ts # 财经商贸 ✅
|
||||
│ │ │ │ ├── logistics.ts # 交通物流 ✅
|
||||
│ │ │ │ ├── manufacturing.ts # 智能制造 ✅
|
||||
│ │ │ │ ├── dev.ts # 智能开发 ✅
|
||||
│ │ │ │ ├── civil.ts # 土木水利 ✅
|
||||
│ │ │ │ ├── energy.ts # 能源 ✅
|
||||
│ │ │ │ └── health.ts # 大健康 ✅
|
||||
│ │ │ └── store/ # Zustand状态管理
|
||||
│ │ └── public/
|
||||
│ │ └── data/订单班文档资料/ # 软链接到项目根目录
|
||||
│ ├── food-order-demo/ # 食品订单班独立系统
|
||||
│ └── web_result/ # 结果展示页面
|
||||
│ └── order-classes/ # 各订单班结果页
|
||||
│ └── food/ # 食品订单班 SuperDesign v5
|
||||
├── data/订单班文档资料/ # 12个订单班完整文档
|
||||
│ ├── 文旅/
|
||||
│ ├── 食品/
|
||||
│ ├── 财经商贸/
|
||||
│ ├── 智能开发/
|
||||
│ ├── 智能制造/
|
||||
│ ├── 视觉设计/
|
||||
│ ├── 交通物流/
|
||||
│ ├── 土木/
|
||||
│ ├── 大健康/
|
||||
│ ├── 能源/
|
||||
│ ├── 化工/
|
||||
│ └── 环保/
|
||||
├── .superdesign/
|
||||
│ ├── design_iterations/ # SuperDesign工作目录
|
||||
│ └── archive_食品_20251001/ # 食品订单班归档
|
||||
├── .serena/memories/ # Serena AI 记忆系统
|
||||
└── progress.md # 项目进度记录
|
||||
```
|
||||
|
||||
## 🎨 12个订单班配置
|
||||
|
||||
| # | ID | 名称 | 项目案例 | 主题色 | 状态 |
|
||||
|---|-----|------|---------|--------|------|
|
||||
| 1 | food | 食品 | 青莳轻食连锁品牌 | 橙色 | ✅ |
|
||||
| 2 | wenlu | 文旅 | 2024长三角新能源汽车展 | 翠绿 | ✅ |
|
||||
| 3 | finance | 财经商贸 | 化妆品电商全链路运营 | 蓝色 | ✅ |
|
||||
| 4 | dev | 智能开发 | K12在线教育平台 | 紫色 | ✅ |
|
||||
| 5 | manufacturing | 智能制造 | 汽车零部件智能分拣系统 | 灰色 | ✅ |
|
||||
| 6 | design | 视觉设计 | 同里古镇农文旅宣传片 | 粉色 | ⏳ |
|
||||
| 7 | logistics | 交通物流 | 冷链AGV调度系统 | 靛蓝 | ✅ |
|
||||
| 8 | civil | 土木 | 滨河防洪堤加固工程 | 黄色 | ✅ |
|
||||
| 9 | health | 大健康 | AI心理咨询服务平台 | 红色 | ✅ |
|
||||
| 10 | energy | 能源 | 光伏电池片智能检测 | 绿色 | ✅ |
|
||||
| 11 | chemical | 化工 | 半导体材料质量检测 | 青色 | ⏳ |
|
||||
| 12 | environment | 环保 | 城市地表水环境监测 | 青柠 | ⏳ |
|
||||
|
||||
**完成进度**: 9/12 (75%) - 剩余3个订单班待开发
|
||||
|
||||
## 🎯 UI设计规范
|
||||
|
||||
### 设计语言
|
||||
- **风格**: 苹果风格设计语言,简洁优雅
|
||||
- **主色调**: 蓝色系(从紫色统一改为蓝色)
|
||||
- **字体**: 系统默认字体栈
|
||||
|
||||
### 组件设计
|
||||
- **动态视频Logo**: https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/cloude.mp4
|
||||
- **背景图片**: /public/image/bg.png
|
||||
|
||||
### 卡片效果
|
||||
- 3D悬浮动画
|
||||
- 脉冲光晕效果
|
||||
- hover上浮和旋转动画
|
||||
- 选中状态右上角勾选标记
|
||||
- 图标尺寸: 24px
|
||||
|
||||
### 标题优化
|
||||
- 文字大小: text-base(从text-sm增加)
|
||||
- 添加图标: FileText 和 PenTool
|
||||
- 颜色加深至 gray-800
|
||||
|
||||
## 🔧 技术细节
|
||||
|
||||
### 终端模拟系统
|
||||
```typescript
|
||||
// 打字机速度
|
||||
CHARS_PER_SECOND = 35
|
||||
|
||||
// 行间延迟
|
||||
LINE_DELAY = 100ms
|
||||
|
||||
// 数据加载
|
||||
import('@/data/terminalSimulations')
|
||||
|
||||
// 数据格式
|
||||
interface TerminalLine {
|
||||
type: 'system' | 'info' | 'output' | 'success' | 'image'
|
||||
content?: string
|
||||
imageSrc?: string
|
||||
imageAlt?: string
|
||||
}
|
||||
```
|
||||
|
||||
### 路由配置
|
||||
- **主入口**: `http://localhost:4173`
|
||||
- **Web结果**: `http://localhost:4155/`
|
||||
- **订单班结果**: `http://localhost:4155/order-class/{orderClassId}`
|
||||
- **URL参数**: `?orderClass=food/wenlu/finance/...`
|
||||
|
||||
### 数据加载流程
|
||||
1. 用户选择订单班
|
||||
2. 加载 orderClasses.json 配置
|
||||
3. 动态导入对应的 terminalSimulations/{orderClassId}.ts
|
||||
4. 执行 Agent 序列模拟
|
||||
5. 完成后跳转结果页面(sessionStorage + URL参数)
|
||||
|
||||
## 🚀 核心特性
|
||||
|
||||
### 1. 多订单班支持
|
||||
- 单一项目架构,动态切换
|
||||
- 统一的数据格式和接口
|
||||
- 12个订单班各有独特主题色和图标
|
||||
|
||||
### 2. AI Agent 协作展示
|
||||
- 每个订单班 6-10 个专业 Agent
|
||||
- 完整的工作流程模拟
|
||||
- 实时终端输出展示
|
||||
- 图片和数据可视化
|
||||
|
||||
### 3. SuperDesign 集成
|
||||
- 5轮迭代优化流程
|
||||
- 7维度评估体系
|
||||
- 响应式设计完善
|
||||
- 性能优化(懒加载、防抖)
|
||||
|
||||
### 4. n8n 工作流平台
|
||||
- 完整中文化(3465行翻译)
|
||||
- 工作流可视化编辑
|
||||
- 自动化任务执行
|
||||
|
||||
## ⚠️ 系统约束
|
||||
|
||||
### 硬性约束(必须遵守)
|
||||
1. ✅ **包管理**: 必须使用 pnpm(不能用 npm/yarn)
|
||||
2. ✅ **端口配置**: Web结果展示必须使用 4155
|
||||
3. ✅ **数据格式**: 终端模拟必须使用 TypeScript,不用 JSON
|
||||
4. ✅ **设计规范**: 必须保持苹果风格设计语言一致性
|
||||
5. ✅ **订单班数据**: 需要 agent prompt 和专家头像数据
|
||||
6. ✅ **主题色**: 所有订单班必须有独特的主题色和图标
|
||||
|
||||
### 开发规范
|
||||
1. n8n 命令在 `n8n-n8n-1.109.2/` 目录执行
|
||||
2. 提交前必须运行 lint 和 typecheck
|
||||
3. Git 提交到对应分支(当前:duoduo_Multiple_Agents)
|
||||
4. 命名规范:orderClassId 必须与 orderClasses.json 中的 id 一致
|
||||
|
||||
## 📊 项目进展
|
||||
|
||||
### 已完成
|
||||
- ✅ n8n 平台完整中文化
|
||||
- ✅ 12个订单班 AI Agent 架构设计
|
||||
- ✅ 9个订单班终端模拟开发
|
||||
- ✅ 食品订单班 SuperDesign v5(9.39/10评分)
|
||||
- ✅ UI优化(卡片动画、标题增强、代码清理)
|
||||
- ✅ 端口配置标准化
|
||||
- ✅ 图片资源软链接方案
|
||||
- ✅ 暂停/继续功能优化
|
||||
- ✅ 需求模板集成
|
||||
- ✅ TSX终端系统重构
|
||||
|
||||
### 待完成
|
||||
- ⏳ 补充其他订单班的 agent prompt 和头像数据
|
||||
- ⏳ 为剩余3个订单班添加 terminalSimulations(design, chemical, environment)
|
||||
- ⏳ Agent 卡片动画效果优化
|
||||
- ⏳ 结果页面展示效果完善
|
||||
- ⏳ SuperDesign 流程应用到其他订单班
|
||||
|
||||
## 🔗 访问地址
|
||||
|
||||
### 开发环境
|
||||
- **主入口**: http://localhost:4173 (展会演示)
|
||||
- **Web结果展示**: http://localhost:4155/
|
||||
- **文旅订单班**: http://localhost:4155/order-class/wenlu
|
||||
- **食品订单班**: http://localhost:4155/order-class/food
|
||||
|
||||
### 项目关键目录
|
||||
- 主演示系统: `web_frontend/exhibition-demo/`
|
||||
- n8n源代码: `n8n-n8n-1.109.2/`
|
||||
- 订单班数据: `data/订单班文档资料/`
|
||||
- SuperDesign工作: `.superdesign/`
|
||||
- 记忆系统: `.serena/memories/`
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**当前分支**: duoduo_Multiple_Agents
|
||||
**完成度**: 75% (9/12 订单班)
|
||||
@@ -1,4 +1,10 @@
|
||||
# 终端模拟内容开发指南
|
||||
# 终端模拟内容开发指南 (2025-10-03 更新)
|
||||
|
||||
## 最新进展 (2025-10-03)
|
||||
- ✅ 已完成9个订单班的终端模拟:wenlu, food, finance, logistics, manufacturing, dev, civil, energy, health
|
||||
- ✅ 剩余3个订单班待开发:design, chemical, environment
|
||||
- ✅ TSX格式已完全替代JSON文件加载方式
|
||||
- ✅ 统一管理器 `index.ts` 实现动态导入机制
|
||||
|
||||
## 开发流程
|
||||
|
||||
@@ -6,6 +12,7 @@
|
||||
- **阅读文档资料**:仔细阅读 `/data/订单班文档资料/{订单班名}/notion文稿` 下的文档
|
||||
- **分析图片备注**:查看文档中图片的插入位置和备注说明,理解图片与内容的对应关系
|
||||
- **检查资源文件**:确认 `agent头像`、`Agent_prompt`、`image` 文件夹是否完整
|
||||
- **参考已完成订单班**:查看 `finance.ts`、`logistics.ts`、`manufacturing.ts` 等已完成的优秀案例
|
||||
|
||||
### 2. Agent设计原则
|
||||
|
||||
@@ -28,9 +35,9 @@
|
||||
```
|
||||
|
||||
#### 命名规范
|
||||
- **文件名**:`{orderClassId}.ts`(如 `developer.ts`)
|
||||
- **函数名**:`{orderClassId}Simulation`(如 `developerSimulation`)
|
||||
- **变量名**:`{orderClassId}Agents`(如 `developerAgents`)
|
||||
- **文件名**:`{orderClassId}.ts`(如 `finance.ts`)
|
||||
- **函数名**:`{orderClassId}Simulation`(如 `financeSimulation`)
|
||||
- **变量名**:`{orderClassId}Agents`(如 `financeAgents`)
|
||||
- **orderClassId**:与 orderClasses.json 中的 id 完全一致
|
||||
|
||||
### 3. 内容结构设计
|
||||
@@ -64,17 +71,17 @@ startupSequence: [
|
||||
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}' },
|
||||
@@ -118,14 +125,10 @@ completionSequence: [
|
||||
{ type: 'system', content: '' }, // 图片后加空行
|
||||
```
|
||||
|
||||
#### 图片与内容的对应关系
|
||||
根据文档分析建立映射:
|
||||
- **首页.jpg** → 数据库架构/系统架构部分
|
||||
- **用户信息后台数据.jpg** → 用户系统设计
|
||||
- **课程信息后台数据.jpg** → 课程系统设计
|
||||
- **API配置界面.jpg** → 接口设计/后端开发
|
||||
- **注册界面.jpg** → 用户认证/前端开发
|
||||
- **课程直播间.jpg** → 直播系统/互动功能
|
||||
#### 图片路径规范 (重要)
|
||||
- ✅ 正确:`/data/订单班文档资料/{订单班}/notion文稿/image/{图片名}.jpg`
|
||||
- ✅ 确保图片文件存在且路径正确
|
||||
- ✅ 如遇图片显示问题,检查软链接:`web_frontend/exhibition-demo/public/data/订单班文档资料`
|
||||
|
||||
### 5. 内容撰写技巧
|
||||
|
||||
@@ -144,7 +147,7 @@ completionSequence: [
|
||||
- ✓ 前端开发完成(65个组件,28个页面)
|
||||
- ✓ 接口性能:平均响应时间200ms
|
||||
- ✓ 测试通过率:98.5%
|
||||
|
||||
|
||||
- **避免的表达**:
|
||||
- ✓ 前端开发完成
|
||||
- ✓ 性能很好
|
||||
@@ -156,29 +159,27 @@ completionSequence: [
|
||||
|
||||
### 6. 开发实例参考
|
||||
|
||||
#### 智能开发订单班(developer.ts)
|
||||
**文档结构**:
|
||||
- 6大章节:项目概述、功能模块、数据库设计、开发实现、测试、运维
|
||||
- 9张图片:首页、用户数据、智能分析、课程数据、课程内容、直播间、注册界面、热门课程、API配置
|
||||
#### 已完成的优秀案例
|
||||
|
||||
**Agent设计**:
|
||||
1. 需求文档撰写专员 - 需求调研与文档输出
|
||||
2. 产品经理 - 产品规划与功能设计
|
||||
3. 平台架构师 - 技术架构与数据库设计
|
||||
4. UI设计师 - 界面设计与交互体验
|
||||
5. 前端开发工程师 - Vue3前端开发
|
||||
6. 后端开发工程师 - Spring Cloud后端开发
|
||||
7. 软件测试工程师 - 功能/性能/安全测试
|
||||
8. DEMO生成助手 - 演示原型与文档生成
|
||||
9. 项目经理 - 项目总结与成果汇报
|
||||
**财经商贸(finance.ts)**:
|
||||
- 9个Agent:从市场调研到内容运营全流程
|
||||
- 25张图片:涵盖产品设计、内容创作、平台运营
|
||||
- 特色:电商全链路流程展示,内容营销深度实践
|
||||
|
||||
**图片分配**:
|
||||
- 产品经理:首页.jpg
|
||||
- 平台架构师:用户信息后台数据.jpg、课程信息后台数据.jpg
|
||||
- UI设计师:注册界面.jpg、热门课程.jpg、课程直播间.jpg
|
||||
- 前端开发工程师:课程内容.jpg
|
||||
- 后端开发工程师:API配置界面.jpg
|
||||
- 软件测试工程师:智能学习数据分析.jpg
|
||||
**交通物流(logistics.ts)**:
|
||||
- 8个Agent:AGV调度系统完整开发流程
|
||||
- 10张图片:系统架构、调度算法、界面设计
|
||||
- 特色:技术架构深度展示,算法优化亮点突出
|
||||
|
||||
**智能制造(manufacturing.ts)**:
|
||||
- 9个Agent:智能分拣系统全周期开发
|
||||
- 15张图片:硬件集成、控制系统、测试验证
|
||||
- 特色:软硬件结合,制造业专业性强
|
||||
|
||||
**智能开发(dev.ts)**:
|
||||
- 9个Agent:教育平台完整开发
|
||||
- 9张图片:数据库设计、界面原型、功能演示
|
||||
- 特色:前后端分离架构,微服务实践
|
||||
|
||||
### 7. 常见问题
|
||||
|
||||
@@ -235,6 +236,7 @@ export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
- [ ] orderClassId 与 orderClasses.json 一致
|
||||
- [ ] 已在 index.ts 中正确注册
|
||||
- [ ] TypeScript 编译无错误
|
||||
- [ ] 在浏览器中实际测试演示流程
|
||||
|
||||
### 10. 最佳实践总结
|
||||
|
||||
@@ -244,6 +246,7 @@ export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
- 使用具体数字量化成果
|
||||
- 每个Agent职责清晰、不重叠
|
||||
- 使用空行和分隔符优化阅读体验
|
||||
- 参考已完成订单班的优秀实践
|
||||
|
||||
❌ **DON'T(避免做法)**:
|
||||
- 不看文档凭想象编写内容
|
||||
@@ -258,18 +261,41 @@ export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
|
||||
```bash
|
||||
# 查看文档资料结构
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/"
|
||||
ls -la "/data/订单班文档资料/{订单班}/"
|
||||
|
||||
# 查看图片文件
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/notion文稿/image/"
|
||||
ls -la "/data/订单班文档资料/{订单班}/notion文稿/image/"
|
||||
|
||||
# 查看agent头像
|
||||
ls -la "/path/to/订单班文档资料/{订单班}/agent头像/"
|
||||
ls -la "/data/订单班文档资料/{订单班}/agent头像/"
|
||||
|
||||
# 检查orderClasses.json中的配置
|
||||
grep -A 15 '"id": "{orderClassId}"' orderClasses.json
|
||||
grep -A 15 '"id": "{orderClassId}"' web_frontend/exhibition-demo/src/data/orderClasses.json
|
||||
|
||||
# 编译检查
|
||||
cd web_frontend/exhibition-demo && pnpm type-check
|
||||
|
||||
# 测试运行
|
||||
cd web_frontend/exhibition-demo && pnpm preview
|
||||
```
|
||||
|
||||
### 12. 已完成订单班一览 (2025-10-03)
|
||||
|
||||
| 订单班 | 文件 | Agent数 | 图片数 | 状态 | 特色 |
|
||||
|--------|------|---------|--------|------|------|
|
||||
| 文旅 | wenlu.ts | 7 | 8 | ✅ | 展会策划完整流程 |
|
||||
| 食品 | food.ts | 7 | 25 | ✅ | 轻食品牌创业方案 |
|
||||
| 财经商贸 | finance.ts | 9 | 25 | ✅ | 电商全链路运营 |
|
||||
| 交通物流 | logistics.ts | 8 | 10 | ✅ | AGV调度系统 |
|
||||
| 智能制造 | manufacturing.ts | 9 | 15 | ✅ | 智能分拣系统 |
|
||||
| 智能开发 | dev.ts | 9 | 9 | ✅ | 教育平台开发 |
|
||||
| 土木水利 | civil.ts | 8 | 11 | ✅ | 防洪堤加固工程 |
|
||||
| 能源 | energy.ts | 9 | 16 | ✅ | 光伏检测系统 |
|
||||
| 大健康 | health.ts | 7 | 8 | ✅ | AI心理咨询平台 |
|
||||
| 视觉设计 | design.ts | - | - | ⏳ | 待开发 |
|
||||
| 化工 | chemical.ts | - | - | ⏳ | 待开发 |
|
||||
| 环保 | environment.ts | - | - | ⏳ | 待开发 |
|
||||
|
||||
---
|
||||
|
||||
**备注**:本指南基于智能开发订单班(developer.ts)的开发经验总结,适用于所有订单班的终端模拟内容开发。
|
||||
**备注**:本指南基于9个已完成订单班的开发经验总结,适用于所有订单班的终端模拟内容开发。最新更新时间:2025-10-03
|
||||
291
.serena/memories/03_订单班配置清单.md
Normal file
@@ -0,0 +1,291 @@
|
||||
# 订单班配置清单 (2025-10-03)
|
||||
|
||||
## 📊 12个订单班总览
|
||||
|
||||
### 已完成订单班 (9个)
|
||||
|
||||
| 订单班 | orderClassId | Agent数 | 图片数 | 项目案例 | 特色亮点 |
|
||||
|--------|-------------|---------|--------|----------|----------|
|
||||
| 文旅 | wenlu | 7 | 8 | 2024长三角新能源汽车展 | 展会策划完整流程 |
|
||||
| 食品 | food | 7 | 25 | 青莳轻食连锁品牌 | 轻食品牌创业方案 |
|
||||
| 财经商贸 | finance | 9 | 25 | 化妆品电商全链路运营 | 电商全链路、多平台营销 |
|
||||
| 交通物流 | logistics | 8 | 10 | 冷链AGV调度系统 | 技术架构深度展示 |
|
||||
| 智能制造 | manufacturing | 9 | 15 | 汽车零部件智能分拣 | 软硬件结合、制造业专业性 |
|
||||
| 智能开发 | dev | 9 | 9 | K12在线教育平台 | 前后端分离、微服务实践 |
|
||||
| 土木水利 | civil | 8 | 11 | 滨河防洪堤加固工程 | 工程专业性强 |
|
||||
| 能源 | energy | 9 | 16 | 光伏电池片智能检测 | 工业检测系统 |
|
||||
| 大健康 | health | 7 | 8 | AI心理咨询服务平台 | AI+心理健康 |
|
||||
|
||||
### 待完成订单班 (3个)
|
||||
|
||||
| 订单班 | orderClassId | 主题色 | 项目案例 | 状态 |
|
||||
|--------|-------------|--------|----------|------|
|
||||
| 视觉设计 | design | 粉色 | 同里古镇农文旅宣传片 | 缺少agent数据 |
|
||||
| 化工 | chemical | 青色 | 半导体材料质量检测 | 缺少agent数据 |
|
||||
| 环保 | environment | 青柠 | 城市地表水环境监测 | 缺少agent数据 |
|
||||
|
||||
## 🎯 订单班详细配置
|
||||
|
||||
### 1. 文旅订单班 (wenlu)
|
||||
|
||||
**项目**: 2024长三角国际新能源汽车展会策划案
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/wenlu.ts`
|
||||
|
||||
**Agent团队 (7人)**:
|
||||
1. 市场研究专员 - 市场调研与数据分析
|
||||
2. 策划方案设计师 - 活动策划与方案设计
|
||||
3. 视觉设计师 - 视觉设计与素材制作
|
||||
4. 营销推广专员 - 线上线下推广
|
||||
5. 现场执行协调员 - 现场布置与执行
|
||||
6. 数据分析师 - 效果分析与报告
|
||||
7. 项目总监 - 项目统筹与总结
|
||||
|
||||
**核心数据**:
|
||||
- 展位面积: 500㎡
|
||||
- 预算投入: 120万
|
||||
- 预期观众: 8000+人次
|
||||
- 参展商: 150+家
|
||||
|
||||
### 2. 食品订单班 (food)
|
||||
|
||||
**项目**: 青莳轻食连锁品牌创业方案
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/food.ts`
|
||||
|
||||
**Agent团队 (7人)**:
|
||||
1. 市场研究专家 - 市场趋势与用户洞察
|
||||
2. 营养配方师 - 产品配方设计
|
||||
3. 供应链管理专家 - 供应链体系搭建
|
||||
4. 品牌策划师 - 品牌定位与VI设计
|
||||
5. 财务分析师 - 财务模型与投资分析
|
||||
6. 运营管理专家 - 运营体系设计
|
||||
7. 食品创业导师 - 方案评估与建议
|
||||
|
||||
**核心数据**:
|
||||
- 投资总额: 60万
|
||||
- 回本周期: 14个月
|
||||
- 3年ROI: 285%
|
||||
- 目标营收: 首年300万
|
||||
|
||||
### 3. 财经商贸订单班 (finance)
|
||||
|
||||
**项目**: 化妆品电商全链路运营项目
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts`
|
||||
|
||||
**Agent团队 (9人)**:
|
||||
1. 市场调研分析师 - 市场趋势与用户洞察
|
||||
2. 竞品策略分析师 - 竞品研究与市场定位
|
||||
3. 产品规划经理 - 选品策略与产品规划
|
||||
4. 视觉创意设计师 - 视觉设计与素材制作
|
||||
5. 小红书运营专员 - 小红书内容营销
|
||||
6. 抖音电商运营专员 - 抖音内容电商运营
|
||||
7. 天猫广告投放师 - 天猫平台广告投放
|
||||
8. 数据分析师 - 数据监控与效果分析
|
||||
9. 电商运营总监 - 全渠道运营统筹
|
||||
|
||||
**核心数据**:
|
||||
- 首年GMV: 3000万
|
||||
- 次年GMV: 8000万
|
||||
- 3年目标: 破亿
|
||||
- 投放平台: 天猫+抖音+小红书
|
||||
|
||||
### 4. 交通物流订单班 (logistics)
|
||||
|
||||
**项目**: 冷链智慧共配中心AGV调度系统
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/logistics.ts`
|
||||
|
||||
**Agent团队 (8人)**:
|
||||
1. 需求分析专员 - 业务需求分析
|
||||
2. 系统架构师 - 技术架构设计
|
||||
3. 算法工程师 - 调度算法优化
|
||||
4. 前端开发工程师 - 可视化界面开发
|
||||
5. 后端开发工程师 - 系统开发实现
|
||||
6. 硬件集成工程师 - AGV硬件集成
|
||||
7. 测试工程师 - 系统测试验证
|
||||
8. 项目经理 - 项目管理与交付
|
||||
|
||||
**核心数据**:
|
||||
- AGV数量: 50台
|
||||
- 日均单量: 5000+单
|
||||
- 调度效率: 提升60%
|
||||
- 准确率: 99.8%
|
||||
|
||||
### 5. 智能制造订单班 (manufacturing)
|
||||
|
||||
**项目**: 汽车零部件智能分拣系统
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/manufacturing.ts`
|
||||
|
||||
**Agent团队 (9人)**:
|
||||
1. 需求调研专员 - 业务需求分析
|
||||
2. 系统架构师 - 技术架构设计
|
||||
3. 视觉算法工程师 - 视觉识别算法
|
||||
4. 控制系统工程师 - 控制系统开发
|
||||
5. 机械设计工程师 - 机械结构设计
|
||||
6. 电气工程师 - 电气系统设计
|
||||
7. 软件开发工程师 - 软件系统开发
|
||||
8. 测试工程师 - 系统测试验证
|
||||
9. 项目总监 - 项目交付管理
|
||||
|
||||
**核心数据**:
|
||||
- 分拣效率: 2400件/小时
|
||||
- 识别准确率: 99.5%
|
||||
- 投资回报: 18个月回本
|
||||
- 效率提升: 75%
|
||||
|
||||
### 6. 智能开发订单班 (dev)
|
||||
|
||||
**项目**: K12在线教育平台开发
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/dev.ts`
|
||||
|
||||
**Agent团队 (9人)**:
|
||||
1. 需求文档撰写专员 - 需求调研与文档
|
||||
2. 产品经理 - 产品规划与功能设计
|
||||
3. 平台架构师 - 技术架构与数据库设计
|
||||
4. UI设计师 - 界面设计与交互体验
|
||||
5. 前端开发工程师 - Vue3前端开发
|
||||
6. 后端开发工程师 - Spring Cloud后端开发
|
||||
7. 软件测试工程师 - 功能/性能/安全测试
|
||||
8. DEMO生成助手 - 演示原型与文档
|
||||
9. 项目经理 - 项目总结与成果汇报
|
||||
|
||||
**核心数据**:
|
||||
- 用户容量: 10万+并发
|
||||
- 功能模块: 65个组件、28个页面
|
||||
- 开发周期: 3个月
|
||||
- 测试通过率: 98.5%
|
||||
|
||||
### 7. 土木水利订单班 (civil)
|
||||
|
||||
**项目**: 滨河防洪堤加固及生态修复工程
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/civil.ts`
|
||||
|
||||
**Agent团队 (8人)**:
|
||||
1. 水利工程师 - 水文分析与方案设计
|
||||
2. 结构工程师 - 结构设计与计算
|
||||
3. 地质工程师 - 地质勘察与评估
|
||||
4. 生态设计师 - 生态修复方案
|
||||
5. 工程造价师 - 工程预算与成本控制
|
||||
6. 施工工程师 - 施工组织设计
|
||||
7. 质量监理工程师 - 质量控制与监理
|
||||
8. 项目总工 - 项目技术总结
|
||||
|
||||
**核心数据**:
|
||||
- 工程总长: 2.5公里
|
||||
- 投资规模: 8500万
|
||||
- 防洪标准: 50年一遇
|
||||
- 生态修复: 15万㎡
|
||||
|
||||
### 8. 能源订单班 (energy)
|
||||
|
||||
**项目**: 光伏电池片智能检测分拣系统
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/energy.ts`
|
||||
|
||||
**Agent团队 (9人)**:
|
||||
1. 需求分析专员 - 业务需求分析
|
||||
2. 光学工程师 - 光学系统设计
|
||||
3. 算法工程师 - 缺陷检测算法
|
||||
4. 控制系统工程师 - 控制系统开发
|
||||
5. 机械工程师 - 机械结构设计
|
||||
6. 电气工程师 - 电气系统设计
|
||||
7. 软件开发工程师 - 软件系统开发
|
||||
8. 测试工程师 - 系统测试验证
|
||||
9. 项目经理 - 项目交付管理
|
||||
|
||||
**核心数据**:
|
||||
- 检测速度: 3600片/小时
|
||||
- 缺陷识别: 99.8%准确率
|
||||
- 分拣效率: 提升80%
|
||||
- 投资回报: 15个月回本
|
||||
|
||||
### 9. 大健康订单班 (health)
|
||||
|
||||
**项目**: AI心理咨询服务平台
|
||||
**文件**: `web_frontend/exhibition-demo/src/data/terminalSimulations/health.ts`
|
||||
|
||||
**Agent团队 (7人)**:
|
||||
1. 心理学专家 - 专业知识体系构建
|
||||
2. 产品经理 - 产品规划与功能设计
|
||||
3. AI算法工程师 - NLP与情感分析
|
||||
4. 前端开发工程师 - 用户界面开发
|
||||
5. 后端开发工程师 - 服务端开发
|
||||
6. 数据安全工程师 - 隐私保护与安全
|
||||
7. 项目总监 - 项目统筹与交付
|
||||
|
||||
**核心数据**:
|
||||
- 服务人群: 10万+用户
|
||||
- 咨询场景: 8大类心理问题
|
||||
- 响应速度: 24小时在线
|
||||
- 满意度: 92%
|
||||
|
||||
## 📝 配置文件说明
|
||||
|
||||
### orderClasses.json
|
||||
**位置**: `web_frontend/exhibition-demo/src/data/orderClasses.json`
|
||||
|
||||
**必需字段**:
|
||||
```json
|
||||
{
|
||||
"id": "food", // orderClassId,必须与文件名一致
|
||||
"name": "食品", // 显示名称
|
||||
"icon": "UtensilsCrossed", // Lucide图标名
|
||||
"color": "orange", // 主题色
|
||||
"agentCount": 7, // Agent数量
|
||||
"description": "...", // 项目描述
|
||||
"requirement": "..." // 需求模板
|
||||
}
|
||||
```
|
||||
|
||||
### terminalSimulations/{orderClassId}.ts
|
||||
**位置**: `web_frontend/exhibition-demo/src/data/terminalSimulations/`
|
||||
|
||||
**必需导出**:
|
||||
```typescript
|
||||
export const {orderClassId}Simulation: SimulationGenerator = (agents) => ({
|
||||
orderClassId: '{orderClassId}',
|
||||
orderClassName: '...',
|
||||
projectTitle: '...',
|
||||
startupSequence: [...],
|
||||
agentSequence: [...],
|
||||
completionSequence: [...]
|
||||
})
|
||||
```
|
||||
|
||||
## 🔗 资源路径规范
|
||||
|
||||
### Agent头像路径
|
||||
```
|
||||
/data/订单班文档资料/{订单班名}/agent头像/{Agent名}.jpg
|
||||
```
|
||||
|
||||
### 图片资源路径
|
||||
```
|
||||
/data/订单班文档资料/{订单班名}/notion文稿/image/{图片名}.jpg
|
||||
```
|
||||
|
||||
### 软链接配置
|
||||
```bash
|
||||
# 项目根目录的数据文件夹
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料
|
||||
|
||||
# 链接到exhibition-demo的public目录
|
||||
web_frontend/exhibition-demo/public/data/订单班文档资料
|
||||
```
|
||||
|
||||
## 📋 开发清单
|
||||
|
||||
### 新订单班开发步骤
|
||||
1. ☑️ 准备 agent 头像(.jpg格式)
|
||||
2. ☑️ 准备 Agent_prompt 文档
|
||||
3. ☑️ 准备项目相关图片
|
||||
4. ☑️ 阅读 notion 文档,理解项目全貌
|
||||
5. ☑️ 设计 Agent 团队(6-10人)
|
||||
6. ☑️ 创建 {orderClassId}.ts 文件
|
||||
7. ☑️ 在 index.ts 中注册
|
||||
8. ☑️ 更新 orderClasses.json
|
||||
9. ☑️ TypeScript 编译检查
|
||||
10. ☑️ 浏览器实际测试
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**完成进度**: 9/12 (75%)
|
||||
**待开发**: design, chemical, environment
|
||||
388
.serena/memories/04_SuperDesign工作流.md
Normal file
@@ -0,0 +1,388 @@
|
||||
# SuperDesign 工作流最佳实践 (2025-10-03)
|
||||
|
||||
## 概述
|
||||
SuperDesign是集成在VS Code中的高级前端设计工具,用于快速生成高质量的UI设计。基于食品订单班的成功实践,总结出一套完整的设计迭代工作流程。
|
||||
|
||||
## 核心工作流程
|
||||
|
||||
### 1. 需求分析阶段
|
||||
- 明确设计目标和业务场景
|
||||
- 分析目标用户群体
|
||||
- 确定设计风格和品牌定位
|
||||
|
||||
### 2. 布局设计(Layout Design)
|
||||
**输出类型**: 文本(ASCII wireframe)
|
||||
|
||||
**步骤**:
|
||||
1. 思考界面布局结构
|
||||
2. 确定UI组件层级
|
||||
3. 使用ASCII艺术呈现线框图
|
||||
|
||||
**示例**:
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☰ HEADER BAR + │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ [MAIN CONTENT AREA] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [INPUT FIELD] [SEND] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**关键原则**:
|
||||
- 明确各区域功能定位
|
||||
- 考虑用户交互流程
|
||||
- 保持布局简洁清晰
|
||||
- **必须与用户确认布局后再进入下一步**
|
||||
|
||||
### 3. 主题设计(Theme Design)
|
||||
**输出类型**: 工具调用(generateTheme)
|
||||
|
||||
**步骤**:
|
||||
1. 设计配色方案(主色、辅色、背景色等)
|
||||
2. 选择字体系统(标题、正文、代码)
|
||||
3. 定义间距和圆角系统
|
||||
4. 配置阴影效果
|
||||
|
||||
**关键技术点**:
|
||||
- 使用oklch色彩空间(更好的色彩过渡)
|
||||
- 定义完整的CSS变量系统
|
||||
- 建立5-7级阴影层级
|
||||
- 设置6级圆角系统
|
||||
|
||||
**食品订单班v5主题特色**:
|
||||
```css
|
||||
:root {
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--radius: 0rem; /* 无圆角,锐利设计 */
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00); /* 极简阴影 */
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
```
|
||||
|
||||
**必须与用户确认主题后再进入下一步**
|
||||
|
||||
### 4. 动画设计(Animation Design)
|
||||
**输出类型**: 文本(微语法动画说明)
|
||||
|
||||
**步骤**:
|
||||
1. 定义核心交互动画
|
||||
2. 设计界面过渡效果
|
||||
3. 规划加载状态动画
|
||||
4. 设置微交互细节
|
||||
|
||||
**动画微语法示例**:
|
||||
```
|
||||
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
|
||||
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
|
||||
hover: 200ms [S1→1.01, shadow↗]
|
||||
```
|
||||
|
||||
**关键原则**:
|
||||
- 动画时长控制在150-600ms
|
||||
- 使用ease-out/ease-in-out缓动
|
||||
- 保持动画目的性(非装饰性)
|
||||
- **必须与用户确认动画后再进入下一步**
|
||||
|
||||
### 5. HTML实现(HTML Generation)
|
||||
**输出类型**: 工具调用(write)
|
||||
|
||||
**步骤**:
|
||||
1. 为每个UI组件创建HTML结构
|
||||
2. 引用主题CSS文件
|
||||
3. 添加自定义样式
|
||||
4. 整合为单一HTML文件
|
||||
|
||||
**关键技术要求**:
|
||||
- 必须使用`<script src="https://cdn.tailwindcss.com"></script>`导入Tailwind
|
||||
- 不使用`<link>`标签加载Tailwind CSS
|
||||
- 使用Flowbite组件库:`<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>`
|
||||
- 图片使用unsplash等公开CDN,不虚构URL
|
||||
- 图标使用Lucide:`<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>`
|
||||
|
||||
**文件命名规范**:
|
||||
- 初始版本:`{design_name}_v1.html`
|
||||
- 迭代版本:`{design_name}_v2.html`, `{design_name}_v3.html`
|
||||
- 存储路径:`.superdesign/design_iterations/`
|
||||
|
||||
**样式覆盖技巧**:
|
||||
```css
|
||||
/* 确保自定义样式优先级 */
|
||||
h1 {
|
||||
font-size: 2rem !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
```
|
||||
|
||||
## 迭代优化策略
|
||||
|
||||
基于食品订单班的成功经验,建议采用5轮迭代:
|
||||
|
||||
### 迭代1:基础框架(v1)
|
||||
**目标评分**: 6.5-7.0/10
|
||||
- 搭建基本HTML结构
|
||||
- 实现核心功能布局
|
||||
- 应用初始主题样式
|
||||
- 确保响应式基础
|
||||
|
||||
**关键交付物**:
|
||||
- 完整的HTML骨架
|
||||
- 基础CSS变量系统
|
||||
- 核心组件实现
|
||||
|
||||
### 迭代2:Agent强化(v2)
|
||||
**目标评分**: 7.8-8.2/10
|
||||
- 优化Agent卡片设计
|
||||
- 增强内容层次
|
||||
- 改进交互反馈
|
||||
- 提升品牌一致性
|
||||
|
||||
**关键优化点**:
|
||||
- Agent头像和信息展示
|
||||
- 卡片hover效果
|
||||
- 颜色对比度调整
|
||||
|
||||
### 迭代3:专业深度(v3)
|
||||
**目标评分**: 8.3-8.6/10
|
||||
- 深化行业特征
|
||||
- 优化内容展示
|
||||
- 增强专业感
|
||||
- 完善细节设计
|
||||
|
||||
**关键优化点**:
|
||||
- 行业术语准确性
|
||||
- 数据可视化
|
||||
- 专业图标选择
|
||||
|
||||
### 迭代4:视觉细节(v4)
|
||||
**目标评分**: 8.6-8.9/10
|
||||
- 实现5级阴影系统
|
||||
- 应用6级圆角系统
|
||||
- 添加多层背景纹理
|
||||
- 打造3D卡片效果
|
||||
|
||||
**关键技术**:
|
||||
```css
|
||||
/* 5级阴影系统 */
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-md: 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-lg: 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xl: 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
|
||||
/* 6级圆角系统 */
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
```
|
||||
|
||||
### 迭代5:响应式完善(v5)
|
||||
**目标评分**: 9.2-9.5/10
|
||||
- 实现流式字体系统(clamp())
|
||||
- 优化弹性Grid布局
|
||||
- 添加触摸优化
|
||||
- 性能优化(懒加载、防抖)
|
||||
|
||||
**关键技术**:
|
||||
```css
|
||||
/* 流式字体 */
|
||||
font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
|
||||
|
||||
/* 弹性布局 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: clamp(1rem, 2vw, 2rem);
|
||||
```
|
||||
|
||||
**性能优化**:
|
||||
```javascript
|
||||
// IntersectionObserver懒加载
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.src = entry.target.dataset.src;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Debounce防抖
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(this, args), wait);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## 7维度评估方法
|
||||
|
||||
每次迭代完成后,进行7维度评估:
|
||||
|
||||
1. **视觉设计** (Visual Design)
|
||||
- 配色方案
|
||||
- 排版质量
|
||||
- 视觉层次
|
||||
|
||||
2. **品牌一致性** (Brand Consistency)
|
||||
- 风格统一
|
||||
- 品牌元素
|
||||
- 语言表达
|
||||
|
||||
3. **用户体验** (User Experience)
|
||||
- 交互流畅度
|
||||
- 信息架构
|
||||
- 易用性
|
||||
|
||||
4. **性能优化** (Performance)
|
||||
- 加载速度
|
||||
- 动画性能
|
||||
- 资源优化
|
||||
|
||||
5. **内容质量** (Content Quality)
|
||||
- 信息准确性
|
||||
- 内容完整性
|
||||
- 专业深度
|
||||
|
||||
6. **创新性** (Innovation)
|
||||
- 设计创新
|
||||
- 技术创新
|
||||
- 交互创新
|
||||
|
||||
7. **技术实现** (Technical Implementation)
|
||||
- 代码质量
|
||||
- 响应式设计
|
||||
- 浏览器兼容性
|
||||
|
||||
**评分标准**:
|
||||
- 9.0-10.0:优秀(Excellent)
|
||||
- 8.0-8.9:良好(Good)
|
||||
- 7.0-7.9:中等(Average)
|
||||
- 6.0-6.9:及格(Pass)
|
||||
- <6.0:不及格(Fail)
|
||||
|
||||
## 归档管理
|
||||
|
||||
### 归档时机
|
||||
- 完成所有迭代后
|
||||
- 选定最优版本后
|
||||
- 准备新项目前
|
||||
|
||||
### 归档结构
|
||||
```
|
||||
.superdesign/archive_{项目名}_{日期}/
|
||||
├── {design_name}_v1.html
|
||||
├── {design_name}_v2.html
|
||||
├── {design_name}_v3.html
|
||||
├── {design_name}_v4.html
|
||||
├── {design_name}_v5.html
|
||||
├── theme_1.css
|
||||
├── evaluation_report.md
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### 归档说明文件(README.md)
|
||||
应包含:
|
||||
- 项目概述
|
||||
- 迭代历程
|
||||
- 最优版本推荐
|
||||
- 关键技术亮点
|
||||
- 经验教训总结
|
||||
|
||||
## 食品订单班成功案例
|
||||
|
||||
### 迭代历程
|
||||
- **v1**: 基础框架 6.93/10
|
||||
- **v2**: Agent强化 8.02/10 (+15.7%)
|
||||
- **v3**: 专业深度 8.51/10 (+6.1%)
|
||||
- **v4**: 视觉细节 8.71/10 (+2.4%)
|
||||
- **v5**: 响应式完善 9.39/10 (+7.8%)
|
||||
|
||||
**总提升**: 35.5%
|
||||
|
||||
### 关键技术亮点
|
||||
1. clamp()流式字体系统
|
||||
2. 弹性Grid布局
|
||||
3. IntersectionObserver懒加载
|
||||
4. Debounce防抖优化
|
||||
5. 5级阴影系统
|
||||
6. 6级圆角系统
|
||||
7. 7种渐变背景
|
||||
8. 多层纹理效果
|
||||
|
||||
### 部署流程
|
||||
1. 选定最优版本(v5)
|
||||
2. 部署到生产环境:`web_frontend/web_result/order-classes/food/index.html`
|
||||
3. 创建软链接解决图片路径问题
|
||||
4. 归档所有设计文件到`.superdesign/archive_食品_20251001/`
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 如何选择最优版本?
|
||||
A: 综合考虑7维度评分、用户反馈、性能指标,通常最后一轮迭代得分最高
|
||||
|
||||
### Q2: 迭代次数是否固定为5轮?
|
||||
A: 不固定,根据项目复杂度调整,简单项目3轮,复杂项目可达7轮
|
||||
|
||||
### Q3: 如何处理不同订单班的设计?
|
||||
A: 保持工作流程一致,但主题和内容根据行业特征定制
|
||||
|
||||
### Q4: 性能优化的优先级?
|
||||
A: 响应式设计 > 加载速度 > 动画性能 > 资源优化
|
||||
|
||||
## 最佳实践总结
|
||||
|
||||
✅ **DO(推荐做法)**:
|
||||
- 严格遵循4步工作流(布局→主题→动画→实现)
|
||||
- 每步必须与用户确认后再进行
|
||||
- 使用工具调用而非文本输出
|
||||
- 保存所有迭代版本供对比
|
||||
- 进行7维度评估跟踪进度
|
||||
- 及时归档设计文件
|
||||
|
||||
❌ **DON'T(避免做法)**:
|
||||
- 跳过布局设计直接实现
|
||||
- 未经确认就进入下一步
|
||||
- 虚构图片或资源URL
|
||||
- 迭代版本覆盖旧文件
|
||||
- 忽视性能优化
|
||||
- 缺少评估和文档
|
||||
|
||||
## 工具调用规范
|
||||
|
||||
**必须使用实际工具调用**:
|
||||
```xml
|
||||
<!-- 错误示例 -->
|
||||
<tool-call>
|
||||
<name>write</name>
|
||||
<parameters>...</parameters>
|
||||
</tool-call>
|
||||
|
||||
<!-- 正确示例 -->
|
||||
使用实际的工具调用功能块
|
||||
```
|
||||
|
||||
**文件操作必须使用工具**:
|
||||
- generateTheme:生成主题CSS
|
||||
- write:创建HTML文件
|
||||
- 不要用文本描述工具调用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- 食品订单班v5:`web_frontend/web_result/order-classes/food/index.html`
|
||||
- 评估报告:`.superdesign/archive_食品_20251001/evaluation_report.md`
|
||||
- 主题参考:`.superdesign/archive_食品_20251001/theme_1.css`
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**成功案例**: 食品订单班(9.39/10,35.5%提升)
|
||||
**适用范围**: 所有订单班的网页设计开发
|
||||
308
.serena/memories/05_运行命令和部署.md
Normal file
@@ -0,0 +1,308 @@
|
||||
# 运行命令和部署 (2025-10-03)
|
||||
|
||||
## 🚀 快速启动
|
||||
|
||||
### 1. n8n工作流平台
|
||||
```bash
|
||||
# 进入n8n目录
|
||||
cd n8n-n8n-1.109.2
|
||||
|
||||
# 安装依赖(首次运行)
|
||||
pnpm install
|
||||
|
||||
# 启动n8n(两种方式)
|
||||
pnpm start
|
||||
# 或
|
||||
./start.sh
|
||||
|
||||
# 访问地址
|
||||
http://localhost:5678
|
||||
```
|
||||
|
||||
### 2. 展会演示系统
|
||||
```bash
|
||||
# 进入展示系统目录
|
||||
cd web_frontend/exhibition-demo
|
||||
|
||||
# 安装依赖(首次运行)
|
||||
pnpm install
|
||||
|
||||
#开发模式
|
||||
pnpm dev
|
||||
|
||||
# 预览模式(推荐)
|
||||
pnpm preview
|
||||
|
||||
# 访问地址
|
||||
http://localhost:4173
|
||||
```
|
||||
|
||||
### 3. Web结果展示系统
|
||||
```bash
|
||||
# 进入web_result目录
|
||||
cd web_frontend/web_result
|
||||
|
||||
# 启动路由服务器(端口4155)
|
||||
./start-router.sh
|
||||
|
||||
# 访问地址
|
||||
http://localhost:4155/
|
||||
http://localhost:4155/order-class/wenlu
|
||||
http://localhost:4155/order-class/food
|
||||
```
|
||||
|
||||
### 4. 食品订单班独立系统
|
||||
```bash
|
||||
# 进入食品订单班目录
|
||||
cd web_frontend/food-order-demo
|
||||
|
||||
# 开发模式
|
||||
pnpm dev
|
||||
|
||||
# 访问地址
|
||||
http://localhost:4174
|
||||
```
|
||||
|
||||
## 🛠️ 开发命令
|
||||
|
||||
### 代码质量检查
|
||||
```bash
|
||||
cd web_frontend/exhibition-demo
|
||||
|
||||
# TypeScript类型检查
|
||||
pnpm type-check
|
||||
|
||||
# ESLint代码检查
|
||||
pnpm lint
|
||||
|
||||
# 代码格式化
|
||||
pnpm format
|
||||
|
||||
# 构建生产版本
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### n8n项目命令
|
||||
```bash
|
||||
cd n8n-n8n-1.109.2
|
||||
|
||||
# 构建所有包
|
||||
pnpm build > build.log 2>&1
|
||||
tail -n 20 build.log
|
||||
|
||||
# 运行测试
|
||||
pnpm test
|
||||
|
||||
# 类型检查
|
||||
pnpm typecheck
|
||||
```
|
||||
|
||||
## 🔌 端口配置
|
||||
|
||||
### 系统端口分配(硬约束)⚠️
|
||||
```yaml
|
||||
n8n平台: 5678 # n8n工作流编辑器
|
||||
展会演示: 4173 # exhibition-demo主入口
|
||||
食品订单班: 4174 # food-order-demo独立系统
|
||||
Web结果展示: 4155 # web_result展示系统(禁止使用8080)
|
||||
```
|
||||
|
||||
### 端口冲突解决
|
||||
```bash
|
||||
# 查看端口占用
|
||||
lsof -i :4155
|
||||
lsof -i :4173
|
||||
|
||||
# 杀死占用端口的进程
|
||||
kill -9 <PID>
|
||||
|
||||
# 检查是否释放
|
||||
lsof -i :4155
|
||||
```
|
||||
|
||||
## 📂 项目路径
|
||||
|
||||
### 核心目录
|
||||
```
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/
|
||||
├── n8n-n8n-1.109.2/ # n8n源代码
|
||||
├── web_frontend/
|
||||
│ ├── exhibition-demo/ # 主演示系统 ⭐
|
||||
│ ├── food-order-demo/ # 食品订单班
|
||||
│ └── web_result/ # 结果展示
|
||||
├── data/订单班文档资料/ # 数据文件
|
||||
└── .serena/memories/ # 记忆系统
|
||||
```
|
||||
|
||||
### 软链接配置
|
||||
```bash
|
||||
# 创建软链接(如不存在)
|
||||
ln -s \
|
||||
"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料" \
|
||||
"web_frontend/exhibition-demo/public/data/订单班文档资料"
|
||||
|
||||
# 验证软链接
|
||||
ls -la web_frontend/exhibition-demo/public/data/
|
||||
```
|
||||
|
||||
## 🔄 Git操作
|
||||
|
||||
### 当前分支
|
||||
```bash
|
||||
# 查看当前分支
|
||||
git branch
|
||||
|
||||
# 当前分支: duoduo_Multiple_Agents
|
||||
```
|
||||
|
||||
### 提交代码
|
||||
```bash
|
||||
# 查看状态
|
||||
git status
|
||||
|
||||
# 添加更改
|
||||
git add .
|
||||
|
||||
# 提交(使用规范化消息)
|
||||
git commit -m "feat: 描述
|
||||
|
||||
详细说明:
|
||||
- 完成的工作
|
||||
- 修改的文件
|
||||
- 影响的功能
|
||||
|
||||
🤖 Generated with Claude Code
|
||||
Co-Authored-By: Claude <noreply@anthropic.com>"
|
||||
|
||||
# 推送到远程
|
||||
git push origin duoduo_Multiple_Agents
|
||||
```
|
||||
|
||||
### Git规范
|
||||
- ⚠️ 提交前必须运行 lint 和 typecheck
|
||||
- ⚠️ 使用规范化的提交消息格式
|
||||
- ⚠️ 提交到对应分支(当前:duoduo_Multiple_Agents)
|
||||
|
||||
## 🎬 完整演示流程
|
||||
|
||||
### 启动所有系统
|
||||
```bash
|
||||
# 1. 启动n8n (终端1)
|
||||
cd n8n-n8n-1.109.2 && pnpm start
|
||||
|
||||
# 2. 启动展会演示 (终端2)
|
||||
cd web_frontend/exhibition-demo && pnpm preview
|
||||
|
||||
# 3. 启动Web结果展示 (终端3)
|
||||
cd web_frontend/web_result && ./start-router.sh
|
||||
```
|
||||
|
||||
### 访问演示
|
||||
1. 打开浏览器访问: http://localhost:4173
|
||||
2. 点击"输入需求"按钮
|
||||
3. 选择订单班(如:财经商贸)
|
||||
4. 查看Agent协作过程
|
||||
5. 完成后自动跳转结果页面
|
||||
|
||||
## 📦 依赖管理
|
||||
|
||||
### pnpm命令
|
||||
```bash
|
||||
# 安装依赖
|
||||
pnpm install
|
||||
|
||||
# 添加依赖
|
||||
pnpm add <package>
|
||||
|
||||
# 添加开发依赖
|
||||
pnpm add -D <package>
|
||||
|
||||
# 更新依赖
|
||||
pnpm update
|
||||
|
||||
# 清理依赖
|
||||
pnpm store prune
|
||||
```
|
||||
|
||||
### 重要提醒
|
||||
- ✅ 必须使用 pnpm(不能用 npm/yarn)
|
||||
- ✅ Node.js 版本: 18+
|
||||
- ✅ pnpm 版本: 8+
|
||||
|
||||
## 🚢 部署流程
|
||||
|
||||
### SuperDesign部署
|
||||
```bash
|
||||
# 1. 选定最优版本(如food v5)
|
||||
# 位置: .superdesign/design_iterations/food_qingshi_v5.html
|
||||
|
||||
# 2. 部署到生产环境
|
||||
cp .superdesign/design_iterations/food_qingshi_v5.html \
|
||||
web_frontend/web_result/order-classes/food/index.html
|
||||
|
||||
# 3. 确保图片软链接正确
|
||||
ls -la web_frontend/web_result/order-classes/food/images
|
||||
|
||||
# 4. 归档设计文件
|
||||
mkdir -p .superdesign/archive_食品_$(date +%Y%m%d)/
|
||||
mv .superdesign/design_iterations/food_* \
|
||||
.superdesign/archive_食品_$(date +%Y%m%d)/
|
||||
```
|
||||
|
||||
### 生产环境检查清单
|
||||
- [ ] TypeScript编译无错误
|
||||
- [ ] ESLint检查通过
|
||||
- [ ] 所有端口配置正确
|
||||
- [ ] 软链接正常工作
|
||||
- [ ] 图片资源可访问
|
||||
- [ ] 浏览器测试通过
|
||||
- [ ] Git提交完成
|
||||
|
||||
## 🔧 常用工具命令
|
||||
|
||||
### 查看文件结构
|
||||
```bash
|
||||
# 查看订单班文档结构
|
||||
ls -la data/订单班文档资料/财经商贸/
|
||||
|
||||
# 查看图片文件
|
||||
ls -la data/订单班文档资料/财经商贸/notion文稿/image/
|
||||
|
||||
# 查看agent头像
|
||||
ls -la data/订单班文档资料/财经商贸/agent头像/
|
||||
```
|
||||
|
||||
### 查看配置
|
||||
```bash
|
||||
# 查看订单班配置
|
||||
cat web_frontend/exhibition-demo/src/data/orderClasses.json | jq '.[] | {id, name, agentCount}'
|
||||
|
||||
# 查看终端模拟列表
|
||||
ls -la web_frontend/exhibition-demo/src/data/terminalSimulations/
|
||||
```
|
||||
|
||||
### 日志查看
|
||||
```bash
|
||||
# 查看构建日志
|
||||
tail -f build.log
|
||||
|
||||
# 查看n8n日志
|
||||
cd n8n-n8n-1.109.2 && tail -f logs/n8n.log
|
||||
```
|
||||
|
||||
## 🌐 访问地址汇总
|
||||
|
||||
### 开发环境
|
||||
| 系统 | 地址 | 用途 |
|
||||
|------|------|------|
|
||||
| n8n工作流 | http://localhost:5678 | 工作流编辑器 |
|
||||
| 展会演示 | http://localhost:4173 | 主入口 |
|
||||
| 食品订单班 | http://localhost:4174 | 独立系统 |
|
||||
| Web结果展示 | http://localhost:4155/ | 结果页面 |
|
||||
| 文旅订单班 | http://localhost:4155/order-class/wenlu | 文旅结果 |
|
||||
| 食品订单班 | http://localhost:4155/order-class/food | 食品结果 |
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**重要提醒**: Web结果展示必须使用端口4155,禁止使用8080或其他端口
|
||||
345
.serena/memories/06_问题解决和优化.md
Normal file
@@ -0,0 +1,345 @@
|
||||
# 问题解决和优化 (2025-10-03)
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### 1. 图片无法显示
|
||||
|
||||
**问题**: 选择订单班后终端中图片无法显示
|
||||
|
||||
**原因**: Web应用public目录缺少数据文件
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 创建软链接
|
||||
ln -s \
|
||||
"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料" \
|
||||
"web_frontend/exhibition-demo/public/data/订单班文档资料"
|
||||
|
||||
# 验证
|
||||
ls -la web_frontend/exhibition-demo/public/data/
|
||||
```
|
||||
|
||||
### 2. 端口冲突
|
||||
|
||||
**问题**: 端口被占用,无法启动服务
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 查看端口占用
|
||||
lsof -i :4155
|
||||
|
||||
# 杀死占用进程
|
||||
kill -9 <PID>
|
||||
|
||||
# 或使用其他端口(不推荐,违反系统约束)
|
||||
# Web结果展示必须使用4155端口
|
||||
```
|
||||
|
||||
### 3. pnpm安装失败
|
||||
|
||||
**问题**: 依赖安装失败或版本冲突
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 清理缓存
|
||||
pnpm store prune
|
||||
|
||||
# 删除node_modules和lock文件
|
||||
rm -rf node_modules pnpm-lock.yaml
|
||||
|
||||
# 重新安装
|
||||
pnpm install
|
||||
|
||||
# 如仍失败,检查Node.js版本
|
||||
node -v # 需要18+
|
||||
pnpm -v # 需要8+
|
||||
```
|
||||
|
||||
### 4. TypeScript编译错误
|
||||
|
||||
**问题**: tsc编译失败,类型错误
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 检查类型错误
|
||||
cd web_frontend/exhibition-demo
|
||||
pnpm type-check
|
||||
|
||||
# 常见问题:
|
||||
# 1. terminalSimulations文件导出类型不匹配
|
||||
# 2. Agent数量与agentCount不一致
|
||||
# 3. orderClassId与配置不一致
|
||||
|
||||
# 修复后重新检查
|
||||
pnpm type-check
|
||||
```
|
||||
|
||||
### 5. 暂停/继续功能异常
|
||||
|
||||
**问题**: 暂停按钮点击后终端仍继续输出
|
||||
|
||||
**原因**: React异步状态更新问题
|
||||
|
||||
**已修复方案**:
|
||||
- 使用 `statusRef.current` 实时跟踪状态
|
||||
- 使用 `while` 循环等待而非 `return` 退出
|
||||
- 修复 `useCallback` 依赖项
|
||||
|
||||
### 6. 订单班数据缺失
|
||||
|
||||
**问题**: 选择订单班后提示"暂无演示数据"
|
||||
|
||||
**原因**: 终端模拟数据未创建或未注册
|
||||
|
||||
**解决方案**:
|
||||
```bash
|
||||
# 1. 检查文件是否存在
|
||||
ls web_frontend/exhibition-demo/src/data/terminalSimulations/{orderClassId}.ts
|
||||
|
||||
# 2. 检查是否在index.ts中注册
|
||||
grep "{orderClassId}Simulation" web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts
|
||||
|
||||
# 3. 检查agentCount是否匹配
|
||||
grep -A 3 '"id": "{orderClassId}"' web_frontend/exhibition-demo/src/data/orderClasses.json
|
||||
```
|
||||
|
||||
## 🔧 性能优化
|
||||
|
||||
### 1. 图片懒加载
|
||||
|
||||
**优化**: 使用IntersectionObserver实现懒加载
|
||||
|
||||
```javascript
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '50px'
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
observer.observe(img);
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 防抖优化
|
||||
|
||||
**优化**: 对高频事件添加防抖
|
||||
|
||||
```javascript
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(this, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 应用
|
||||
window.addEventListener('resize', debounce(() => {
|
||||
// 处理resize事件
|
||||
}, 250));
|
||||
```
|
||||
|
||||
### 3. 流式字体系统
|
||||
|
||||
**优化**: 使用clamp()实现响应式字体
|
||||
|
||||
```css
|
||||
/* 基础字体 */
|
||||
font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
|
||||
|
||||
/* 标题字体 */
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 弹性布局
|
||||
|
||||
**优化**: 使用Grid实现自适应布局
|
||||
|
||||
```css
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: clamp(1rem, 2vw, 2rem);
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 UI/UX优化
|
||||
|
||||
### 1. 卡片交互增强
|
||||
|
||||
已完成优化:
|
||||
- ✅ 增加卡片间距和内边距
|
||||
- ✅ hover上浮效果和3D旋转动画
|
||||
- ✅ 选中状态脉冲光晕效果
|
||||
- ✅ 右上角勾选标记动画
|
||||
- ✅ 图标尺寸从20px增加到24px
|
||||
|
||||
### 2. 标题可读性提升
|
||||
|
||||
已完成优化:
|
||||
- ✅ 文字大小从text-sm增加到text-base
|
||||
- ✅ 添加FileText和PenTool图标
|
||||
- ✅ 颜色加深至gray-800
|
||||
|
||||
### 3. 终端输出优化
|
||||
|
||||
建议优化:
|
||||
- ⏳ Agent卡片动画效果优化
|
||||
- ⏳ 进度条加载动画优化
|
||||
- ⏳ 图片加载渐显效果
|
||||
|
||||
## 📈 SuperDesign优化策略
|
||||
|
||||
### 5轮迭代优化
|
||||
|
||||
**v1 → v2**: Agent强化(+15.7%)
|
||||
- 优化Agent卡片设计
|
||||
- 增强内容层次
|
||||
- 改进交互反馈
|
||||
|
||||
**v2 → v3**: 专业深度(+6.1%)
|
||||
- 深化行业特征
|
||||
- 优化内容展示
|
||||
- 增强专业感
|
||||
|
||||
**v3 → v4**: 视觉细节(+2.4%)
|
||||
- 5级阴影系统
|
||||
- 6级圆角系统
|
||||
- 多层背景纹理
|
||||
- 3D卡片效果
|
||||
|
||||
**v4 → v5**: 响应式完善(+7.8%)
|
||||
- 流式字体系统
|
||||
- 弹性Grid布局
|
||||
- 触摸优化
|
||||
- 性能优化
|
||||
|
||||
**总提升**: 35.5%(6.93 → 9.39/10)
|
||||
|
||||
### 7维度评估
|
||||
|
||||
1. **视觉设计** - 配色、排版、视觉层次
|
||||
2. **品牌一致性** - 风格统一、品牌元素
|
||||
3. **用户体验** - 交互流畅度、易用性
|
||||
4. **性能优化** - 加载速度、动画性能
|
||||
5. **内容质量** - 信息准确性、完整性
|
||||
6. **创新性** - 设计创新、技术创新
|
||||
7. **技术实现** - 代码质量、响应式设计
|
||||
|
||||
## 🔍 调试技巧
|
||||
|
||||
### 1. React DevTools
|
||||
|
||||
```bash
|
||||
# 安装React DevTools浏览器扩展
|
||||
# Chrome/Edge: React Developer Tools
|
||||
# Firefox: React DevTools
|
||||
|
||||
# 使用技巧:
|
||||
# - 查看组件树
|
||||
# - 检查props和state
|
||||
# - 追踪性能问题
|
||||
```
|
||||
|
||||
### 2. 网络请求调试
|
||||
|
||||
```javascript
|
||||
// 在控制台监控fetch请求
|
||||
const originalFetch = window.fetch;
|
||||
window.fetch = function(...args) {
|
||||
console.log('Fetch:', args);
|
||||
return originalFetch.apply(this, args)
|
||||
.then(res => {
|
||||
console.log('Response:', res);
|
||||
return res;
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### 3. 状态调试
|
||||
|
||||
```typescript
|
||||
// 在Zustand store中添加日志
|
||||
const useStore = create((set) => ({
|
||||
// ...state
|
||||
updateState: (newState) => {
|
||||
console.log('State update:', newState);
|
||||
set(newState);
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
## 🚨 紧急修复指南
|
||||
|
||||
### 系统无法启动
|
||||
|
||||
1. 检查端口占用
|
||||
2. 检查Node.js版本
|
||||
3. 清理并重装依赖
|
||||
4. 检查软链接是否正常
|
||||
|
||||
### 数据丢失
|
||||
|
||||
1. 检查Git状态
|
||||
2. 查看progress.md
|
||||
3. 检查.serena/memories/
|
||||
4. 恢复备份(如有)
|
||||
|
||||
### 构建失败
|
||||
|
||||
1. 检查TypeScript错误
|
||||
2. 检查ESLint警告
|
||||
3. 清理构建缓存
|
||||
4. 检查依赖版本冲突
|
||||
|
||||
## 📚 最佳实践
|
||||
|
||||
### 代码规范
|
||||
- ✅ 使用TypeScript严格模式
|
||||
- ✅ 遵循ESLint规则
|
||||
- ✅ 统一代码格式(Prettier)
|
||||
- ✅ 提交前运行检查
|
||||
|
||||
### 性能优化
|
||||
- ✅ 图片懒加载
|
||||
- ✅ 防抖节流
|
||||
- ✅ 虚拟滚动(长列表)
|
||||
- ✅ 代码分割
|
||||
|
||||
### 用户体验
|
||||
- ✅ 加载状态提示
|
||||
- ✅ 错误边界处理
|
||||
- ✅ 响应式设计
|
||||
- ✅ 无障碍支持
|
||||
|
||||
## 🔗 相关资源
|
||||
|
||||
### 官方文档
|
||||
- React: https://react.dev
|
||||
- TypeScript: https://www.typescriptlang.org
|
||||
- Tailwind CSS: https://tailwindcss.com
|
||||
- n8n: https://docs.n8n.io
|
||||
|
||||
### 工具链
|
||||
- pnpm: https://pnpm.io
|
||||
- Vite: https://vitejs.dev
|
||||
- Zustand: https://github.com/pmndrs/zustand
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**问题统计**: 已解决6个核心问题
|
||||
**优化项**: 已完成12项优化,待完成3项
|
||||
261
.serena/memories/07_web_result项目架构和订单班展示系统.md
Normal file
@@ -0,0 +1,261 @@
|
||||
# Web Result 项目架构和订单班展示系统
|
||||
|
||||
## 项目概述
|
||||
|
||||
web_result 是订单班终端模拟完成后的成果展示系统,负责将 AI 多智能体协同生成的方案以网页形式展示给用户。该项目位于 `/web_frontend/web_result` 目录。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
web_result/
|
||||
├── index.html # 主入口页面
|
||||
├── server.js # 简单的 Node.js 静态服务器
|
||||
├── app.js # Express 应用服务器(带路由)
|
||||
├── routes.yaml # 路由配置文件
|
||||
├── start-router.sh # 启动脚本
|
||||
├── order-classes/ # 各订单班的展示页面
|
||||
│ ├── wenlu/ # 文旅订单班(完成度最高的示例)
|
||||
│ └── food/ # 食品订单班(有 HTML 和 React 两个版本)
|
||||
├── css/ # 全局样式
|
||||
├── js/ # 全局脚本
|
||||
└── data/ # 数据资源
|
||||
```
|
||||
|
||||
## 路由系统
|
||||
|
||||
### 1. routes.yaml 配置
|
||||
定义了12个订单班的路由信息:
|
||||
- 每个订单班包含:name、title、path、entry、description、status、agents
|
||||
- status 有两种状态:completed(已完成)、pending(待开发)
|
||||
- 文旅(wenlu)和食品(food)是已完成的示例
|
||||
|
||||
### 2. 服务器架构
|
||||
使用 Express.js 构建,端口 4155,主要路由:
|
||||
- `/` - 主页,显示订单班选择界面
|
||||
- `/order-class/:className` - 访问特定订单班
|
||||
- `/order-class/:page` - 访问订单班的子页面(如 wenlu 的多个页面)
|
||||
|
||||
### 3. 静态资源服务
|
||||
```javascript
|
||||
// 为每个订单班提供独立的静态文件服务
|
||||
app.use('/order-class/wenlu/css', express.static('order-classes/wenlu/css'));
|
||||
app.use('/order-class/wenlu/js', express.static('order-classes/wenlu/js'));
|
||||
app.use('/order-class/wenlu/data', express.static('order-classes/wenlu/data'));
|
||||
```
|
||||
|
||||
## 文旅(wenlu)订单班实现分析
|
||||
|
||||
### 特点和优势
|
||||
1. **纯静态 HTML + CSS + JavaScript 实现**
|
||||
2. **多页面架构**(7个页面):
|
||||
- index.html - 主页
|
||||
- overview.html - 项目概览
|
||||
- exhibition.html - 展会设计
|
||||
- marketing.html - 市场营销
|
||||
- operation.html - 运营管理
|
||||
- budget.html - 财务预算
|
||||
- risk.html - 风险控制
|
||||
|
||||
3. **设计特色**:
|
||||
- 使用 Tailwind CSS 框架
|
||||
- glass-morphism 玻璃拟态效果
|
||||
- 渐变背景和浮动动画元素
|
||||
- 响应式设计,移动端优化
|
||||
- 图片懒加载和性能优化
|
||||
|
||||
4. **模块化 JavaScript**:
|
||||
- error-handler.js - 错误处理
|
||||
- page-loader.js - 页面加载动画
|
||||
- mobile-optimize.js - 移动端优化
|
||||
- performance-optimizer.js - 性能优化
|
||||
- order-class-handler.js - 订单班处理器
|
||||
- nav-component.js - 导航组件
|
||||
- router.js - 路由处理
|
||||
|
||||
5. **CSS 动画系统**:
|
||||
- animations.css - 定义各种动画效果
|
||||
- styles.css - 主样式文件
|
||||
- 使用 CSS 变量实现主题化
|
||||
|
||||
## 食品(food)订单班实现
|
||||
|
||||
### 2025-10-03 重构版本
|
||||
- **位置**:`/order-classes/food/`
|
||||
- **结构**:
|
||||
```
|
||||
food/
|
||||
├── index.html # 主HTML文件
|
||||
├── css/
|
||||
│ └── styles.css # 独立CSS文件(简约设计系统)
|
||||
├── js/
|
||||
│ └── main.js # 独立JavaScript文件
|
||||
├── images/ # 产品图片软链接
|
||||
└── agent-avatars/ # Agent头像软链接
|
||||
```
|
||||
|
||||
### 重构特点
|
||||
1. **模块化架构**:HTML、CSS、JS完全分离
|
||||
2. **简约设计系统**:
|
||||
- 深绿色主题(#2D5016)配米色辅助
|
||||
- 极简阴影和圆角
|
||||
- 清晰的视觉层次
|
||||
3. **性能优化**:
|
||||
- 图片懒加载
|
||||
- Intersection Observer动画
|
||||
- 错误处理和占位图
|
||||
4. **响应式设计**:移动端优先
|
||||
5. **无需构建**:纯静态文件
|
||||
|
||||
### ~~React 版本~~(已删除)
|
||||
~~原React版本因过度设计和维护成本高已被删除~~
|
||||
|
||||
## 调用流程
|
||||
|
||||
### 1. 终端模拟完成后的触发
|
||||
当用户在 exhibition-demo 项目中完成终端模拟后,系统会:
|
||||
1. 生成订单班的解决方案内容
|
||||
2. 保存到相应的 order-classes 目录
|
||||
3. 更新 routes.yaml 配置
|
||||
4. 用户可以通过链接访问成果页面
|
||||
|
||||
### 2. 访问方式
|
||||
```bash
|
||||
# 启动服务器
|
||||
./start-router.sh
|
||||
|
||||
# 访问地址
|
||||
http://localhost:4155/ # 主页
|
||||
http://localhost:4155/order-class/wenlu # 文旅订单班
|
||||
http://localhost:4155/order-class/food # 食品订单班
|
||||
```
|
||||
|
||||
### 3. 页面间导航
|
||||
文旅订单班的多页面通过顶部导航栏切换:
|
||||
```html
|
||||
<a href="overview.html">项目概览</a>
|
||||
<a href="exhibition.html">展会设计</a>
|
||||
<a href="marketing.html">市场营销</a>
|
||||
```
|
||||
|
||||
## 开发新订单班的步骤
|
||||
|
||||
1. **创建目录结构**
|
||||
```bash
|
||||
mkdir -p order-classes/[order-class-id]/
|
||||
mkdir -p order-classes/[order-class-id]/css
|
||||
mkdir -p order-classes/[order-class-id]/js
|
||||
mkdir -p order-classes/[order-class-id]/data
|
||||
```
|
||||
|
||||
2. **复制文旅模板**
|
||||
使用 wenlu 作为模板,修改内容和样式
|
||||
|
||||
3. **更新 routes.yaml**
|
||||
```yaml
|
||||
[order-class-id]:
|
||||
name: "订单班名称"
|
||||
title: "完整标题"
|
||||
path: "/order-classes/[order-class-id]/"
|
||||
entry: "index.html"
|
||||
status: "completed"
|
||||
```
|
||||
|
||||
4. **修改内容**
|
||||
- 替换文本内容
|
||||
- 更新图片资源路径
|
||||
- 调整颜色主题
|
||||
- 添加特定功能
|
||||
|
||||
## 最佳实践建议
|
||||
|
||||
### 推荐采用文旅(wenlu)的实现方式:
|
||||
1. **纯静态 HTML** - 加载快,SEO好,易维护
|
||||
2. **多页面架构** - 内容组织清晰,用户体验好
|
||||
3. **Tailwind CSS** - 开发效率高,样式一致
|
||||
4. **渐进增强** - 基础功能不依赖 JavaScript
|
||||
5. **性能优化** - 图片懒加载,资源预加载
|
||||
6. **移动端优先** - 响应式设计,触摸优化
|
||||
|
||||
### ~~不建议使用 React 版本的原因:~~
|
||||
**更新(2025-10-03)**:React版本已删除,食品订单班已重构为纯HTML版本
|
||||
1. ~~构建配置复杂~~
|
||||
2. ~~初次加载慢~~
|
||||
3. ~~SEO 不友好~~
|
||||
4. ~~对于展示型页面过度设计~~
|
||||
5. ~~增加维护成本~~
|
||||
|
||||
## 关键文件说明
|
||||
|
||||
### server.js vs app.js
|
||||
- **server.js**: 简单的静态文件服务器,使用原生 Node.js http 模块
|
||||
- **app.js**: 功能更全的 Express 服务器,支持路由和动态内容
|
||||
- 推荐使用 app.js 配合 start-router.sh 启动
|
||||
|
||||
### routes.yaml
|
||||
中央配置文件,管理所有订单班的元数据,是系统的核心配置
|
||||
|
||||
### 文旅订单班的 7 个页面
|
||||
每个页面对应终端模拟中一个智能体的输出成果,形成完整的解决方案
|
||||
|
||||
## 与终端模拟的集成
|
||||
|
||||
1. **数据流向**:
|
||||
终端模拟 → AI 生成内容 → 保存到 order-classes → 用户访问查看
|
||||
|
||||
2. **资源引用**:
|
||||
使用相对路径引用 `/data/订单班文档资料/` 中的图片和文档
|
||||
|
||||
3. **动态更新**:
|
||||
通过修改 routes.yaml 和添加新的订单班目录来扩展系统
|
||||
|
||||
## 技术栈总结
|
||||
|
||||
- **前端框架**:Tailwind CSS + 原生 JavaScript
|
||||
- **动画库**:CSS Animations + GSAP(食品订单班)
|
||||
- **图标**:Font Awesome + Lucide Icons
|
||||
- **字体**:Inter + Noto Sans SC
|
||||
- **服务器**:Node.js + Express
|
||||
- **配置管理**:YAML
|
||||
- **构建工具**:无需构建(文旅)/ Vite(食品React版)
|
||||
|
||||
## 部署和运行
|
||||
|
||||
```bash
|
||||
# 进入项目目录
|
||||
cd web_frontend/web_result
|
||||
|
||||
# 安装依赖(首次运行)
|
||||
npm install
|
||||
|
||||
# 启动服务器
|
||||
./start-router.sh
|
||||
# 或
|
||||
node app.js
|
||||
|
||||
# 访问
|
||||
open http://localhost:4155
|
||||
```
|
||||
|
||||
## 更新记录
|
||||
|
||||
### 2025-10-03 - 食品订单班重构
|
||||
**变更内容**:
|
||||
- 删除React版本实现
|
||||
- 重构为纯HTML版本,拆分CSS和JS到独立文件
|
||||
- 采用简约设计系统(深绿+米色主题)
|
||||
- 修复图片路径问题,建立软链接
|
||||
- 优化性能:懒加载、动画优化
|
||||
|
||||
**影响范围**:
|
||||
- 食品订单班展示页面
|
||||
- 路由系统保持不变
|
||||
|
||||
**相关文件**:
|
||||
- `/order-classes/food/index.html`
|
||||
- `/order-classes/food/css/styles.css`
|
||||
- `/order-classes/food/js/main.js`
|
||||
|
||||
---
|
||||
|
||||
更新时间:2025年10月
|
||||
记录者:Claude Code
|
||||
120
.serena/memories/08_项目维护和更新原则.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 项目维护和更新原则
|
||||
|
||||
## 核心原则
|
||||
|
||||
### 1. Web Result 项目变更同步原则
|
||||
**重要性:⭐⭐⭐⭐⭐**
|
||||
|
||||
任何 web_result 项目的变更都**必须**立即更新到 Serena 记忆系统中,确保文档与代码保持同步。
|
||||
|
||||
#### 需要更新记忆的情况:
|
||||
- ✅ 新增订单班展示页面
|
||||
- ✅ 修改路由配置(routes.yaml)
|
||||
- ✅ 更改服务器配置(app.js, server.js)
|
||||
- ✅ 调整页面结构或样式
|
||||
- ✅ 添加新的 JavaScript 模块
|
||||
- ✅ 修改访问端口或路径
|
||||
- ✅ 更新技术栈或依赖
|
||||
- ✅ 优化性能或修复问题
|
||||
|
||||
#### 更新方式:
|
||||
```bash
|
||||
# 当 web_result 项目发生变更时
|
||||
1. 完成代码修改
|
||||
2. 测试功能正常
|
||||
3. 立即更新 Serena 记忆:
|
||||
- 更新 "07_web_result项目架构和订单班展示系统.md"
|
||||
- 记录变更内容、原因和时间
|
||||
```
|
||||
|
||||
### 2. 终端模拟系统变更同步
|
||||
终端模拟系统(exhibition-demo)的变更也需要同步更新:
|
||||
- 更新 "02_终端模拟开发指南.md"
|
||||
- 更新 "03_订单班配置清单.md"
|
||||
|
||||
### 3. 记忆更新规范
|
||||
|
||||
#### 更新格式:
|
||||
```markdown
|
||||
## 更新记录
|
||||
|
||||
### [日期] - [变更类型]
|
||||
**变更内容**:
|
||||
- 具体修改项1
|
||||
- 具体修改项2
|
||||
|
||||
**影响范围**:
|
||||
- 影响的功能模块
|
||||
- 影响的订单班
|
||||
|
||||
**相关文件**:
|
||||
- 修改的文件路径
|
||||
```
|
||||
|
||||
### 4. 关联记忆维护
|
||||
|
||||
当一个系统变更时,需要检查并更新相关联的记忆:
|
||||
|
||||
| 系统模块 | 主记忆文件 | 关联记忆 |
|
||||
|---------|-----------|---------|
|
||||
| web_result | 07_web_result项目架构 | 01_项目概述、05_运行命令 |
|
||||
| 终端模拟 | 02_终端模拟开发指南 | 03_订单班配置、06_问题解决 |
|
||||
| SuperDesign | 04_SuperDesign工作流 | 07_web_result项目架构 |
|
||||
| 订单班配置 | 03_订单班配置清单 | 02_终端模拟、07_web_result |
|
||||
|
||||
### 5. 变更通知机制
|
||||
|
||||
重大变更需要在相关记忆文件顶部添加通知:
|
||||
```markdown
|
||||
> ⚠️ **重要更新** [日期]:[简述变更内容]
|
||||
> 详见更新记录章节
|
||||
```
|
||||
|
||||
### 6. 版本控制建议
|
||||
|
||||
对于重大架构变更:
|
||||
1. 在记忆文件中保留历史版本说明
|
||||
2. 记录迁移路径
|
||||
3. 标注废弃的功能或方法
|
||||
|
||||
### 7. 记忆文件命名规范
|
||||
|
||||
- 00-09:基础和索引类
|
||||
- 10-19:架构和系统类
|
||||
- 20-29:功能模块类
|
||||
- 30-39:订单班相关
|
||||
- 40-49:问题和优化类
|
||||
- 90-99:临时和实验性
|
||||
|
||||
### 8. 记忆更新检查清单
|
||||
|
||||
更新前检查:
|
||||
- [ ] 代码已测试通过
|
||||
- [ ] 影响范围已评估
|
||||
- [ ] 相关记忆已识别
|
||||
- [ ] 更新内容准备完整
|
||||
|
||||
更新后验证:
|
||||
- [ ] 主记忆已更新
|
||||
- [ ] 关联记忆已同步
|
||||
- [ ] 更新记录已添加
|
||||
- [ ] 版本信息已标注
|
||||
|
||||
## 特别提醒
|
||||
|
||||
### Web Result 项目特别注意事项:
|
||||
1. **路由变更**:必须同步更新 routes.yaml 说明
|
||||
2. **新订单班**:必须更新订单班清单和实现方式
|
||||
3. **样式系统**:CSS 框架或动画系统变更需详细记录
|
||||
4. **性能优化**:记录优化前后的对比和方法
|
||||
5. **部署配置**:端口、路径等变更立即更新
|
||||
|
||||
### 记忆系统维护责任:
|
||||
> **核心原则**:代码变更与文档同步是项目可维护性的基础。
|
||||
> 每次修改 web_result 或其他核心系统后,**必须**第一时间更新 Serena 记忆。
|
||||
|
||||
---
|
||||
|
||||
创建时间:2024年12月
|
||||
最后更新:2024年12月
|
||||
维护等级:最高优先级
|
||||
101
.serena/memories/09_项目完成度统计_202510.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# 项目完成度统计 (2025-10-03)
|
||||
|
||||
## 📊 总体完成情况
|
||||
|
||||
### 终端模拟 (exhibition-demo)
|
||||
- **总计划**: 12个订单班
|
||||
- **已完成**: 10个 (其中视觉设计缺少agent数据)
|
||||
- **完成率**: 83.3%
|
||||
- **待完成**: 化工、环保
|
||||
|
||||
### 展示页面 (web_result)
|
||||
- **总计划**: 12个订单班页面
|
||||
- **已完成**: 2个 (文旅、食品)
|
||||
- **完成率**: 16.7%
|
||||
- **待完成**: 10个
|
||||
|
||||
## 🎯 详细清单
|
||||
|
||||
### ✅ 完全完成的订单班(9个)
|
||||
终端模拟和agent数据都完整:
|
||||
1. **文旅** (wenlu) - 终端模拟✅ + 展示页面✅
|
||||
2. **食品** (food) - 终端模拟✅ + 展示页面✅
|
||||
3. **财经商贸** (finance) - 终端模拟✅ + 展示页面❌
|
||||
4. **交通物流** (logistics/transportation) - 终端模拟✅ + 展示页面❌
|
||||
5. **智能制造** (manufacturing/intelligentManufacturing) - 终端模拟✅ + 展示页面❌
|
||||
6. **智能开发** (dev/developer) - 终端模拟✅ + 展示页面❌
|
||||
7. **土木水利** (civil/civilEngineering) - 终端模拟✅ + 展示页面❌
|
||||
8. **能源** (energy) - 终端模拟✅ + 展示页面❌
|
||||
9. **大健康** (health) - 终端模拟✅ + 展示页面❌
|
||||
|
||||
### ⚠️ 部分完成的订单班(1个)
|
||||
10. **视觉设计** (design/visualDesign) - 终端模拟✅ + agent数据❌ + 展示页面❌
|
||||
|
||||
### ❌ 未开始的订单班(2个)
|
||||
11. **化工** (chemical) - 终端模拟❌ + agent数据❌ + 展示页面❌
|
||||
12. **环保** (environment) - 终端模拟❌ + agent数据❌ + 展示页面❌
|
||||
|
||||
## 📁 文件存在性验证
|
||||
|
||||
### exhibition-demo 终端模拟文件
|
||||
```
|
||||
✅ wenlu.ts
|
||||
✅ food.ts
|
||||
✅ finance.ts
|
||||
✅ transportation.ts
|
||||
✅ intelligentManufacturing.ts
|
||||
✅ developer.ts
|
||||
✅ civilEngineering.ts
|
||||
✅ energy.ts
|
||||
✅ health.ts
|
||||
✅ visualDesign.ts
|
||||
❌ chemical.ts (不存在)
|
||||
❌ environment.ts (不存在)
|
||||
```
|
||||
|
||||
### web_result 展示页面目录
|
||||
```
|
||||
✅ /order-classes/wenlu/
|
||||
✅ /order-classes/food/
|
||||
❌ 其他10个订单班目录未创建
|
||||
```
|
||||
|
||||
### routes.yaml 配置状态
|
||||
- wenlu: completed ✅
|
||||
- food: completed ✅
|
||||
- 其他10个: pending ⏳
|
||||
|
||||
## 🔄 需要更新的记忆
|
||||
|
||||
1. **03_订单班配置清单.md**
|
||||
- 当前显示已完成9个,实际完全完成9个(正确)
|
||||
- 但需要明确说明视觉设计缺少agent数据
|
||||
- 化工和环保确实未开始
|
||||
|
||||
2. **07_web_result项目架构.md**
|
||||
- 需要添加完成度统计
|
||||
- 当前只有2个订单班有展示页面
|
||||
- 其余10个待开发
|
||||
|
||||
## 📋 下一步建议
|
||||
|
||||
1. **优先级1**: 补充视觉设计的agent数据
|
||||
2. **优先级2**: 完成化工和环保的终端模拟
|
||||
3. **优先级3**: 为已完成终端模拟的7个订单班创建web_result展示页面
|
||||
4. **优先级4**: 完善routes.yaml配置,更新各订单班状态
|
||||
|
||||
## 🏷️ 命名规范问题
|
||||
|
||||
注意文件命名不一致:
|
||||
- 交通物流: logistics vs transportation
|
||||
- 智能制造: manufacturing vs intelligentManufacturing
|
||||
- 智能开发: dev vs developer
|
||||
- 土木水利: civil vs civilEngineering
|
||||
- 视觉设计: design vs visualDesign
|
||||
|
||||
建议统一使用完整英文名称。
|
||||
|
||||
---
|
||||
|
||||
**更新时间**: 2025-10-03
|
||||
**记录者**: Claude Code
|
||||
@@ -1,208 +0,0 @@
|
||||
# 土木订单班终端模拟创建实践记录
|
||||
|
||||
## 创建日期
|
||||
2025-10-01
|
||||
|
||||
## 项目概述
|
||||
为土木订单班创建终端模拟内容,项目类型为"120㎡现代简约三居室CAD整体方案设计"。
|
||||
|
||||
## 关键发现
|
||||
|
||||
### 1. Agent名称与头像文件名不匹配问题
|
||||
**问题描述**:
|
||||
- Agent提示词文件:`水单设计师.md`、`3D建模师.md`
|
||||
- Agent头像文件:`水电设计师.jpg`、`3D模型师.jpg`
|
||||
|
||||
**解决方案**:
|
||||
在创建终端模拟时,优先使用**头像文件名**作为Agent的显示名称,因为头像文件是实际存在的资源。
|
||||
|
||||
**配置示例**:
|
||||
```typescript
|
||||
{
|
||||
id: 'civil_mep_engineer',
|
||||
name: '水电设计师', // 使用头像文件名
|
||||
avatar: '/data/订单班文档资料/土木/agent头像/水电设计师.jpg',
|
||||
}
|
||||
```
|
||||
|
||||
### 2. orderClasses.json 配置与实际文档不符
|
||||
**问题描述**:
|
||||
- `orderClasses.json` 中 civil 订单班描述的是"滨河防洪堤加固工程"
|
||||
- 实际文档是"室内CAD整体方案设计"
|
||||
|
||||
**解决方案**:
|
||||
更新 `orderClasses.json` 配置,使其与实际文档内容一致:
|
||||
```json
|
||||
{
|
||||
"id": "civil",
|
||||
"name": "土木",
|
||||
"template": {
|
||||
"title": "120㎡现代简约三居室CAD整体方案设计",
|
||||
"description": "项目类型:室内CAD整体方案设计\n户型面积:120㎡..."
|
||||
},
|
||||
"agentCount": 8
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Agent配置设计思路
|
||||
|
||||
#### 8个Agent的工作流程
|
||||
1. **需求分析师** → 客户访谈、需求梳理、风格定位
|
||||
2. **室内设计师** → 功能分区、初稿设计、家具布置
|
||||
3. **CAD制图员** → 施工图绘制、节点详图
|
||||
4. **暖通设计师** → 顶面布置、灯具点位
|
||||
5. **水电设计师** → 强弱电布置、给排水设计
|
||||
6. **灯光设计师** → 灯光效果模拟、照度计算
|
||||
7. **软装设计师** → 材质选型、色彩搭配
|
||||
8. **3D建模师** → 3D建模、效果渲染、生长动画
|
||||
|
||||
#### Agent顺序原则
|
||||
按照**室内设计的实际工作流程**排列:
|
||||
- 前期(需求→设计)→ 中期(制图→深化)→ 后期(效果呈现)
|
||||
|
||||
### 4. 图片资源分配策略
|
||||
|
||||
#### 图片与Agent的对应关系
|
||||
| Agent | 图片资源 | 展示目的 |
|
||||
|-------|---------|---------|
|
||||
| 室内设计师 | 室内平面设计图 | 展示功能分区和家具布置 |
|
||||
| CAD制图员 | 吊顶收口节点CAD图、地面与墙面收口CAD图、窗帘盒尺寸CAD图 | 展示施工图纸的细节 |
|
||||
| 水电设计师 | CAD绘制强弱电布置图 | 展示水电点位布局 |
|
||||
| 灯光设计师 | 实景渲染尺寸标记 | 展示灯光效果 |
|
||||
| 软装设计师 | 材质选型、尺寸标注 | 展示材质和色彩方案 |
|
||||
| 3D建模师 | 效果渲染图加尺寸标注 | 展示最终效果 |
|
||||
|
||||
#### 图片分配原则
|
||||
1. **每个Agent展示与其工作内容直接相关的图片**
|
||||
2. **图片顺序遵循文档章节顺序**
|
||||
3. **关键技术节点配多张图片**(如CAD制图员展示3张节点图)
|
||||
4. **最后一个Agent展示最终成果**(效果渲染图)
|
||||
|
||||
### 5. 内容设计亮点
|
||||
|
||||
#### 启动序列亮点
|
||||
```typescript
|
||||
{ type: 'system', content: '加载专业知识库: 室内设计/CAD制图/建筑规范/材料工艺' },
|
||||
{ type: 'system', content: '├─ 《住宅设计规范》GB 50096-2011' },
|
||||
{ type: 'system', content: '├─ AutoCAD 2024 + 3ds Max + V-Ray' },
|
||||
```
|
||||
- 体现**专业性**:引用行业规范和专业软件
|
||||
- 体现**技术感**:展示工具链
|
||||
|
||||
#### Agent输出序列亮点
|
||||
```typescript
|
||||
// 数据结构化展示
|
||||
{ type: 'info', content: '动线规划分析:' },
|
||||
{ type: 'output', content: ' • 生活动线: 入户 → 客厅 → 厨房 → 餐厅' },
|
||||
{ type: 'output', content: ' • 学习动线: 儿童房 → 书房(避免干扰)' },
|
||||
|
||||
// 关键指标突出
|
||||
{ type: 'success', content: '✓ 原始户型使用率: 85%' },
|
||||
{ type: 'success', content: '✓ 优化目标: ≥92%(提升7个百分点)' },
|
||||
```
|
||||
|
||||
#### 完成序列亮点
|
||||
```typescript
|
||||
{ type: 'info', content: '🎯 核心设计亮点:' },
|
||||
{ type: 'success', content: '✓ 空间利用率从85%提升至92%(提升7个百分点)' },
|
||||
{ type: 'success', content: '✓ 收纳体积达到35m³(超出行业平均水平)' },
|
||||
|
||||
{ type: 'info', content: '💰 预算控制:' },
|
||||
{ type: 'success', content: '✓ 总预算: 35万元(严格控制,不超预算)' },
|
||||
{ type: 'success', content: '✓ 性价比: 2916元/㎡(中等偏上装修标准)' },
|
||||
```
|
||||
- **核心亮点**:空间优化、预算控制
|
||||
- **量化指标**:使用率提升7%、性价比2916元/㎡
|
||||
- **分类展示**:设计亮点、预算控制、工期安排、技术创新、交付物清单
|
||||
|
||||
### 6. 特殊内容处理
|
||||
|
||||
#### 户型生长动画
|
||||
```typescript
|
||||
{ type: 'info', content: '🎬 户型生长动画制作中...' },
|
||||
{ type: 'output', content: ' • 动画时长: 60秒' },
|
||||
{ type: 'output', content: ' • 展示内容: 墙体生长 → 家具摆放 → 材质贴图 → 灯光效果' },
|
||||
{ type: 'output', content: ' • 输出格式: 1920×1080 MP4' },
|
||||
```
|
||||
- 虽然视频文件存在,但在终端模拟中**用文字描述**动画内容
|
||||
- 不直接展示视频文件(终端模拟只支持图片)
|
||||
|
||||
#### 技术工具链展示
|
||||
```typescript
|
||||
{ type: 'output', content: ' • CAD精确制图: 1:50比例,施工图纸完整规范' },
|
||||
{ type: 'output', content: ' • 3D建模渲染: 3ds Max + V-Ray,4K高清输出' },
|
||||
{ type: 'output', content: ' • Dialux照度计算: 科学灯光布局,节能舒适' },
|
||||
```
|
||||
- 展示**专业软件和工具**
|
||||
- 体现**技术创新**和**专业能力**
|
||||
|
||||
### 7. 与之前订单班的对比
|
||||
|
||||
#### 食品订单班
|
||||
- 7个Agent(市场→品牌→选址→菜品→运营→人员→财务)
|
||||
- 财务数据丰富(50万投资、290万营收)
|
||||
- 图片:店面、菜品、人员
|
||||
|
||||
#### 视觉设计订单班
|
||||
- 5个Agent(总监→编剧→导演→分镜→制片)
|
||||
- AIGC分镜对比(线稿→AI生成)
|
||||
- 图片:古镇风光、分镜对比
|
||||
|
||||
#### 土木订单班(本次)
|
||||
- 8个Agent(需求→设计→制图→暖通→水电→灯光→软装→3D)
|
||||
- 空间优化数据(85%→92%使用率)
|
||||
- 图片:CAD图纸、节点详图、效果渲染
|
||||
|
||||
### 8. 经验总结
|
||||
|
||||
#### 创建前必做检查
|
||||
- [ ] 检查Agent提示词文件数量
|
||||
- [ ] 检查Agent头像文件数量和名称
|
||||
- [ ] 验证头像文件名与提示词文件名的对应关系
|
||||
- [ ] 阅读Markdown文档,理解项目内容
|
||||
- [ ] 检查orderClasses.json配置是否与实际文档一致
|
||||
- [ ] 确认图片文件名是否为描述性名称
|
||||
|
||||
#### 创建时的最佳实践
|
||||
1. **优先使用头像文件名作为Agent名称**(因为头像是实际显示的资源)
|
||||
2. **Agent顺序按实际工作流程排列**(前期→中期→后期)
|
||||
3. **每个Agent至少展示1-3张相关图片**
|
||||
4. **数据结构化展示**(使用 `output` 类型配合缩进)
|
||||
5. **关键指标量化**(提升百分比、预算金额、工期天数)
|
||||
6. **完成序列突出核心亮点**(分类展示:设计亮点、预算、工期、技术、交付物)
|
||||
|
||||
#### 常见问题解决
|
||||
1. **名称不匹配**:使用头像文件名
|
||||
2. **配置不符**:更新orderClasses.json
|
||||
3. **图片路径**:使用 `/data/订单班文档资料/[订单班]/notion文稿/image/[图片名]`
|
||||
4. **视频处理**:用文字描述,不直接展示
|
||||
|
||||
## 文件清单
|
||||
|
||||
### 创建的文件
|
||||
- `/web_frontend/exhibition-demo/src/data/terminalSimulations/civilEngineering.ts`
|
||||
|
||||
### 修改的文件
|
||||
- `/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts`(添加import和注册)
|
||||
- `/web_frontend/exhibition-demo/src/data/orderClasses.json`(更新civil配置)
|
||||
|
||||
## 下一步建议
|
||||
|
||||
### 对于后续订单班
|
||||
1. 先检查Agent头像和提示词文件的名称对应关系
|
||||
2. 确认orderClasses.json配置是否与实际文档一致
|
||||
3. 借鉴本次的Agent配置和内容结构
|
||||
4. 根据各订单班的特点调整展示重点
|
||||
|
||||
### 需要注意的订单班
|
||||
- **智能制造**:可能涉及PLC、机器人等技术术语
|
||||
- **智能开发**:涉及代码、技术架构等内容
|
||||
- **财经商贸**:涉及电商运营、财务数据
|
||||
- **大健康**:涉及AI心理咨询、医疗数据
|
||||
- **交通物流**:涉及AGV调度、算法优化
|
||||
- **能源**:涉及光伏检测、设备配置
|
||||
- **化工**:涉及实验室建设、检测标准
|
||||
- **环保**:涉及水质监测、治理措施
|
||||
|
||||
## 版本历史
|
||||
- v1.0 (2025-10-01): 土木订单班终端模拟创建完成
|
||||
@@ -1,82 +0,0 @@
|
||||
# Duoduo Agent 智能设计系统
|
||||
|
||||
## 系统概述
|
||||
Duoduo Agent是一个AI驱动的展会布局设计系统,通过深度学习实现从需求到方案的智能转化。
|
||||
|
||||
## 核心能力
|
||||
|
||||
### 1. 技术指标
|
||||
- **交付时间**:20小时(传统2周)
|
||||
- **设计准确率**:95%
|
||||
- **成本节约**:80%
|
||||
- **一次通过率**:95%
|
||||
- **规范符合率**:99.9%
|
||||
|
||||
### 2. 设计流程
|
||||
|
||||
#### 阶段1:智能空间分析
|
||||
- NLP需求解析
|
||||
- 3D空间建模
|
||||
- 规范自动校验
|
||||
- 遗传算法优化
|
||||
- 处理时间:30秒
|
||||
|
||||
#### 阶段2:智能设计生成
|
||||
- 并行生成5-10个方案
|
||||
- 品牌VI风格迁移
|
||||
- 实时成本控制
|
||||
- 蒙特卡洛人流仿真
|
||||
- 处理时间:15分钟
|
||||
|
||||
#### 阶段3:数字孪生建模
|
||||
- 物理环境仿真
|
||||
- VR沉浸式预览
|
||||
- 8K超高清渲染
|
||||
- 实时光线追踪
|
||||
- 材料真实映射
|
||||
|
||||
#### 阶段4:完整交付
|
||||
- CAD施工图纸
|
||||
- 精确物料清单
|
||||
- 分步施工指南
|
||||
- 透明预算报表
|
||||
- 100%可执行率
|
||||
|
||||
## 技术架构
|
||||
|
||||
### 深度学习引擎
|
||||
- 10万+展会案例训练
|
||||
- 知识图谱匹配
|
||||
- 多目标优化求解
|
||||
- 实时迭代优化
|
||||
|
||||
### 设计工具集成
|
||||
- AutoCAD 2024
|
||||
- 3DS Max + V-Ray
|
||||
- Revit BIM协同
|
||||
- 5000+ PBR材质库
|
||||
|
||||
### 智能算法
|
||||
- 空间利用率优化
|
||||
- 人流动线模拟
|
||||
- 成本效果平衡
|
||||
- 消防建筑规范校验
|
||||
|
||||
## 成功案例
|
||||
- 500+ 展会项目
|
||||
- 50+ 世界500强客户
|
||||
- 20+ 国家级展会
|
||||
- 98% 客户满意度
|
||||
|
||||
## 竞争优势
|
||||
|
||||
1. **精准度高**:基于海量数据持续优化
|
||||
2. **快速迭代**:实时修改,秒级响应
|
||||
3. **成本可控**:智能材料选择,预算监控
|
||||
4. **合规保障**:自动对标国家标准
|
||||
|
||||
## API集成
|
||||
- RESTful API接口
|
||||
- 企业系统无缝对接
|
||||
- 24/7实时服务
|
||||
- 多格式文件导出
|
||||
@@ -1,257 +0,0 @@
|
||||
# 能源订单班终端模拟创建记录
|
||||
|
||||
## 创建时间
|
||||
2025-10-01
|
||||
|
||||
## 项目背景
|
||||
能源订单班主题:**光伏晶硅电池片印后AOI检测与分拣单元**
|
||||
核心技术:PLC控制 + 机器视觉深度学习 + 六轴机器人分拣 + 质量追溯
|
||||
|
||||
## Agent配置(4个工业自动化专家)
|
||||
|
||||
### Agent列表
|
||||
1. **PLC工程师** (`energy_plc_engineer`)
|
||||
- 职责:系统控制逻辑设计
|
||||
- 头像:`/data/订单班文档资料/能源/agent头像/PLC工程师.jpg`
|
||||
- 工作内容:
|
||||
- Siemens S7-1500主控架构
|
||||
- 安全联锁与启停逻辑
|
||||
- 输送定位与握手协议
|
||||
- 追溯数据上报MES
|
||||
|
||||
2. **机器视觉识别工程师** (`energy_vision_engineer`)
|
||||
- 职责:AOI缺陷检测
|
||||
- 头像:`/data/订单班文档资料/能源/agent头像/机器视觉识别工程师.jpeg`
|
||||
- 工作内容:
|
||||
- Cognex In-Sight D900深度学习相机方案
|
||||
- 光源配置(同轴光+漫射顶光)
|
||||
- ViDi深度学习模型设计
|
||||
- 缺陷分级(OK/RW/NG/UNCERTAIN)
|
||||
|
||||
3. **机器视觉识别技术员** (`energy_vision_technician`)
|
||||
- 职责:视觉系统调试
|
||||
- 头像:`/data/订单班文档资料/能源/agent头像/机器视觉识别技术员.jpeg`
|
||||
- 工作内容:
|
||||
- 光学标定与成像调试
|
||||
- 深度学习模型优化(召回率/误检率)
|
||||
- 缺陷库标注规范
|
||||
- 性能验收(10000片测试)
|
||||
|
||||
4. **机器人调试工程师** (`energy_robot_engineer`)
|
||||
- 职责:机器人分拣协同
|
||||
- 头像:`/data/订单班文档资料/能源/agent头像/机器人调试工程师.jpg`
|
||||
- 工作内容:
|
||||
- ABB IRB 1200六轴机器人配置
|
||||
- RAPID分拣程序编写
|
||||
- 路径规划(OK/RW/NG三仓位)
|
||||
- 节拍性能测试(3600片/h)
|
||||
|
||||
## 图片资源分析
|
||||
|
||||
### 图片清单(7张,已全部使用描述性命名)
|
||||
1. **光伏面板室外场景图片.jpg** - 光伏电池板安装现场
|
||||
2. **光伏面板生成画面.jpg** - 电池片AOI检测应用
|
||||
3. **PLC示意图.jpg** - Siemens S7-1500控制系统
|
||||
4. **工业机器人图片.jpg** - ABB IRB 1200六轴机器人
|
||||
5. **机器视觉相机图片.jpg** - Cognex In-Sight D900相机
|
||||
6. **输送与治具.jpg** - 边夹式输送线与伺服对中机构
|
||||
7. **Mermaid流程图.jpg** - 系统控制流程图(未在终端模拟中使用,文档已包含Mermaid代码块)
|
||||
|
||||
### 图片使用策略
|
||||
- PLC工程师 → PLC示意图
|
||||
- 机器视觉识别工程师 → 机器视觉相机图片 + 光伏面板生成画面
|
||||
- 机器视觉识别技术员 → (无图片,专注调试过程数据)
|
||||
- 机器人调试工程师 → 工业机器人图片 + 输送与治具
|
||||
- 完成序列 → 光伏面板室外场景图片(产业应用场景)
|
||||
|
||||
## 内容创作策略
|
||||
|
||||
### 1. 启动序列(15条)
|
||||
重点营造**工业自动化系统**的专业感:
|
||||
- 初始化多Agent协作框架
|
||||
- 加载知识库:PLC控制/机器视觉/工业机器人/质量追溯
|
||||
- 连接工业设备:S7-1500 PLC/Cognex D900/ABB IRB 1200/MES系统
|
||||
- 检测需求:PERC/TopCon单晶硅电池片质检
|
||||
- 技术指标:节拍≥3600片/h,漏检≤0.3%,误检≤0.5%
|
||||
|
||||
### 2. Agent输出序列(4个Agent)
|
||||
|
||||
#### Agent 1: PLC工程师(核心控制逻辑)
|
||||
- 硬件平台:Siemens S7-1500
|
||||
- 6大控制逻辑模块:
|
||||
1. 启停与安全联锁
|
||||
2. 来料检测与高精定位
|
||||
3. 相机握手与结果锁存
|
||||
4. 机器人协同分拣
|
||||
5. 追溯数据上报
|
||||
6. 异常处理与降级
|
||||
- I/O配置分配表
|
||||
- 图片:PLC示意图
|
||||
|
||||
#### Agent 2: 机器视觉识别工程师(AOI检测方案)
|
||||
- 相机平台:Cognex In-Sight D900深度学习
|
||||
- 光源方案:同轴光+漫射顶光(交叉偏振)
|
||||
- 检测分级:OK/RW/NG/UNCERTAIN
|
||||
- 成像质量指标(灰度/景深/清晰度/运动冻结)
|
||||
- 深度学习模型训练策略
|
||||
- 推理性能预算(≤300ms)
|
||||
- 图片:机器视觉相机图片 + 光伏面板生成画面
|
||||
|
||||
#### Agent 3: 机器视觉识别技术员(调试与验收)
|
||||
- 光学与成像调试(光源/曝光/景深)
|
||||
- 标定与几何校正(内参/外参/手眼)
|
||||
- 深度学习模型优化(类别设计/数据增强/阈值调参)
|
||||
- 缺陷库与标注规范(7类缺陷定义)
|
||||
- 与PLC/机器人联调(时序测量)
|
||||
- 性能验收(10000片测试,漏检0.28%,误检0.47%)
|
||||
- 无图片,重点展示调试数据
|
||||
|
||||
#### Agent 4: 机器人调试工程师(智能分拣系统)
|
||||
- 机器人平台:ABB IRB 1200-7/0.7
|
||||
- I/O信号映射(输入/输出)
|
||||
- 分拣路径规划(pHome/pPick/pOK/pRW/pNG)
|
||||
- RAPID程序逻辑(8步分拣流程)
|
||||
- 时序协同要点
|
||||
- 系统集成测试(节拍验证3600片/h)
|
||||
- 图片:工业机器人图片 + 输送与治具
|
||||
|
||||
### 3. 完成序列(30条)
|
||||
总结项目核心价值:
|
||||
- 核心技术优势(5条):PLC主控/深度学习AOI/智能分拣/全程追溯/节拍性能
|
||||
- 性能指标验收(4条):准确率/成功率/时延/可靠性
|
||||
- 图片:光伏面板室外场景图片(产业应用)
|
||||
- 系统集成架构(5层):控制层/视觉层/执行层/通讯层/追溯层
|
||||
- 创新亮点(4条):深度学习分类/Ping-Pong双工位/降级运行/本地缓存
|
||||
- 交付物清单(5项):PLC程序/机器人程序/视觉模型/通讯配置/系统文档
|
||||
|
||||
## 特殊内容处理
|
||||
|
||||
### 1. 工业自动化领域特色
|
||||
- **技术指标量化**:节拍(3600片/h)、精度(±0.02mm)、准确率(漏检≤0.3%)
|
||||
- **时序协同**:PLC握手、相机触发(300ms超时)、机器人响应
|
||||
- **缺陷分级**:OK(良品)、RW(复判)、NG(报废)、UNCERTAIN(人工审核)
|
||||
- **降级模式**:相机异常→人工复判模式,保证产线不停机
|
||||
|
||||
### 2. 深度学习AOI检测
|
||||
- **7类缺陷**:断栅、漏印、连锡、拖浆、脏污、划伤、崩边
|
||||
- **数据集策略**:OK≥5000样本,每类缺陷≥2000样本,6:2:2划分
|
||||
- **调参目标**:NG召回率≥99.5%,漏检≤0.3%,OK误检≤0.5%
|
||||
- **推理时延**:采集10ms + 预处理20ms + 推理≤180ms + 下发20ms = ≤250-300ms
|
||||
|
||||
### 3. PLC编程逻辑展示
|
||||
展示了6个核心网络的梯形图伪代码:
|
||||
- 网络一:RUN_EN与运行灯
|
||||
- 网络二:输送与定位/对中
|
||||
- 网络三:相机触发与完成超时
|
||||
- 网络四:结果锁存(R2..R0→DB)
|
||||
- 网络五:与机器人握手
|
||||
- 网络六:报警与复位
|
||||
|
||||
### 4. RAPID机器人程序
|
||||
展示了ABB机器人的分拣程序结构:
|
||||
- I/O映射(输入/输出信号)
|
||||
- robtarget坐标定义(Home/Pick/OK/RW/NG)
|
||||
- PROC main()主循环逻辑
|
||||
- TRAP TrapFault异常处理
|
||||
|
||||
## 文档特点分析
|
||||
|
||||
### 技术深度
|
||||
这是一个**高度技术化**的订单班,文档包含:
|
||||
- 完整的Mermaid流程图(6个功能区,50+节点)
|
||||
- 详细的I/O参考分配表(输入12点,输出9点)
|
||||
- 梯形图编程逻辑(6个网络)
|
||||
- RAPID机器人程序(完整代码)
|
||||
- 视觉系统调试规范(光学/标定/模型/验收)
|
||||
|
||||
### 与其他订单班的差异
|
||||
- **食品订单班**:侧重商业模式(市场定位/品牌设计/财务预算)
|
||||
- **视觉设计订单班**:侧重创意流程(编剧/导演/分镜/AIGC对比)
|
||||
- **大健康订单班**:侧重服务流程(用户分析/心理评估/治疗方案)
|
||||
- **能源订单班**:侧重**工业技术**(PLC编程/深度学习/机器人控制/系统集成)
|
||||
|
||||
## Agent头像文件问题
|
||||
|
||||
### 发现的问题
|
||||
Agent头像文件名与Agent_prompt文件名**不完全一致**:
|
||||
|
||||
**Agent_prompt文件(4个):**
|
||||
1. PLC工程师.md
|
||||
2. 视觉识别调试工程师.md
|
||||
3. 视觉识别调试技术员.md
|
||||
4. 机器人调试工程师.md
|
||||
|
||||
**agent头像文件(5个):**
|
||||
1. PLC工程师.jpg ✓
|
||||
2. 机器视觉识别工程师.jpeg
|
||||
3. 机器视觉识别技术员.jpeg
|
||||
4. 机器人调试工程师.jpg ✓
|
||||
5. 自动化控制工程师.jpg(额外的,未使用)
|
||||
|
||||
### 解决方案
|
||||
根据文档内容和Agent_prompt文件,确定最终Agent配置:
|
||||
- PLC工程师 ✓(头像:PLC工程师.jpg)
|
||||
- 机器视觉识别工程师(头像:机器视觉识别工程师.jpeg)
|
||||
- 机器视觉识别技术员(头像:机器视觉识别技术员.jpeg)
|
||||
- 机器人调试工程师 ✓(头像:机器人调试工程师.jpg)
|
||||
|
||||
**说明**:
|
||||
- 头像文件名中的"机器视觉识别"与prompt文件名中的"视觉识别调试"含义一致,选择使用头像文件的命名
|
||||
- "自动化控制工程师.jpg"未使用(可能是备用头像)
|
||||
|
||||
## 创作心得
|
||||
|
||||
### 1. 工业自动化领域的内容呈现
|
||||
- 强调**技术指标**(节拍/精度/准确率)而非情感描述
|
||||
- 展示**系统架构**(PLC/视觉/机器人/MES四层)
|
||||
- 突出**协同流程**(握手信号/时序控制/异常处理)
|
||||
- 体现**质量追溯**(批次号/片ID/缺陷图像/MES上报)
|
||||
|
||||
### 2. 深度学习与传统工控的融合
|
||||
- Cognex ViDi深度学习模型 + PLC实时控制
|
||||
- 推理时延≤300ms满足产线节拍要求
|
||||
- 降级模式保证产线鲁棒性(相机异常时切换人工复判)
|
||||
|
||||
### 3. 图片使用策略
|
||||
- 按照**工作流程顺序**分配图片给Agent
|
||||
- PLC工程师 → 控制系统架构图
|
||||
- 视觉工程师 → 相机设备 + 应用场景
|
||||
- 机器人工程师 → 机器人设备 + 输送治具
|
||||
- 完成序列 → 产业应用场景(光伏面板室外场景)
|
||||
|
||||
### 4. 内容层次设计
|
||||
- **启动序列**:系统初始化,连接工业设备
|
||||
- **Agent序列**:技术方案详解(控制/视觉/调试/分拣)
|
||||
- **完成序列**:总结优势、性能验收、创新亮点、交付物
|
||||
|
||||
## 验收标准对比
|
||||
|
||||
### 目标指标
|
||||
- 节拍:≥3600片/h
|
||||
- 漏检率:≤0.3%
|
||||
- 误检率:≤0.5%
|
||||
- UNCERTAIN:≤1%
|
||||
|
||||
### 验收结果(10000片测试)
|
||||
- 节拍:单片循环0.98s → 3673片/h ✓
|
||||
- 漏检率:0.28% ✓
|
||||
- 误检率:0.47% ✓
|
||||
- UNCERTAIN:0.9% ✓
|
||||
- 分拣成功率:99.97% ✓
|
||||
|
||||
**全部指标达标!**
|
||||
|
||||
## 文件位置
|
||||
- 终端模拟文件:`web_frontend/exhibition-demo/src/data/terminalSimulations/energy.ts`
|
||||
- 注册到index.ts:`energy: energySimulation`
|
||||
|
||||
## 后续优化建议
|
||||
1. 可考虑添加一个"系统集成工程师"Agent,负责最终联调与验收
|
||||
2. 图片"Mermaid流程图.jpg"未使用,可在PLC工程师或系统集成环节展示完整控制流程
|
||||
3. 可增加"异常处理场景"的动态演示(如相机超时→降级模式切换)
|
||||
|
||||
## 参考资料
|
||||
- 文档:`data/订单班文档资料/能源/notion文稿/光伏晶硅电池片印后AOI检测与分拣单元.md`
|
||||
- Agent_prompt文件夹:`data/订单班文档资料/能源/Agent_prompt/`
|
||||
- agent头像文件夹:`data/订单班文档资料/能源/agent头像/`
|
||||
- 图片文件夹:`data/订单班文档资料/能源/notion文稿/image/`
|
||||
@@ -1,64 +0,0 @@
|
||||
# Exhibition-Demo 项目记忆 (2025-09-29)
|
||||
|
||||
## 项目概述
|
||||
一个基于 React + TypeScript 的多智能体协同演示系统,支持12个专业领域的AI Agent协同工作。
|
||||
|
||||
## 最新架构决策
|
||||
- **UI设计**: 采用苹果风格设计语言,简洁优雅
|
||||
- **数据管理**: 终端模拟数据使用TypeScript(src/data/terminalSimulations/),已废弃JSON方案
|
||||
- **主题系统**: 12个订单班各有独特主题色和图标
|
||||
- **组件版本**: WorkflowPageV4和ResultPageV2是最新版本
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
exhibition-demo/
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── RequirementModal.tsx # 苹果风格弹窗,含视频Logo
|
||||
│ │ └── OrderClassIcons.tsx # 订单班图标映射
|
||||
│ ├── pages/
|
||||
│ │ ├── WorkflowPageV4.tsx # 最新工作流页面
|
||||
│ │ └── ResultPageV2.tsx # 最新结果页面
|
||||
│ ├── data/
|
||||
│ │ ├── orderClasses.json # 12个订单班配置
|
||||
│ │ └── terminalSimulations/ # TypeScript终端数据
|
||||
│ │ ├── wenlu.ts
|
||||
│ │ └── food.ts
|
||||
```
|
||||
|
||||
## 12个订单班配置
|
||||
1. food - 食品(橙色)
|
||||
2. tourism - 文旅(翠绿)
|
||||
3. finance - 财经商贸(蓝色)
|
||||
4. dev - 智能开发(紫色)
|
||||
5. manufacturing - 智能制造(灰色)
|
||||
6. design - 视觉设计(粉色)
|
||||
7. logistics - 交通物流(靛蓝)
|
||||
8. civil - 土木(黄色)
|
||||
9. health - 大健康(红色)
|
||||
10. energy - 能源(绿色)
|
||||
11. chemical - 化工(青色)
|
||||
12. environment - 环保(青柠)
|
||||
|
||||
## UI关键特性
|
||||
- 动态视频Logo: https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/cloude.mp4
|
||||
- 背景图片: /public/image/bg.png
|
||||
- 主色调: 蓝色系(从紫色统一改为蓝色)
|
||||
- 卡片效果: 3D悬浮、脉冲光晕、旋转动画
|
||||
|
||||
## 重要技术细节
|
||||
- 打字机速度: CHARS_PER_SECOND = 35
|
||||
- 行间延迟: LINE_DELAY = 100ms
|
||||
- URL参数: ?orderClass=food/wenlu/...
|
||||
- 终端模拟: 使用动态import加载TypeScript数据
|
||||
|
||||
## 最近完成的优化
|
||||
- ✅ RequirementModal订单班卡片优化(间距、动画、选中效果)
|
||||
- ✅ 标题增大(text-sm → text-base)并添加图标
|
||||
- ✅ 删除未使用的JSON文件(food.json, wenlu.json)
|
||||
- ✅ 更新README.md文档
|
||||
|
||||
## 待优化事项
|
||||
- 为其他10个订单班添加terminalSimulations数据
|
||||
- Agent卡片动画效果优化
|
||||
- 结果页面展示效果完善
|
||||
@@ -1,151 +0,0 @@
|
||||
# Exhibition Demo 项目 Data 文件夹结构规范
|
||||
|
||||
## 概述
|
||||
exhibition-demo 项目中存在两个 `data` 文件夹,各自有明确的用途和归档规范。
|
||||
|
||||
## 📁 src/data/ - 应用程序逻辑数据
|
||||
|
||||
### 用途
|
||||
存放前端应用的**配置数据和业务逻辑代码**
|
||||
|
||||
### 内容结构
|
||||
```
|
||||
src/data/
|
||||
├── terminalSimulations/ # 终端模拟逻辑(TypeScript)
|
||||
│ ├── food.ts # 食品订单班模拟
|
||||
│ ├── wenlu.ts # 文旅订单班模拟
|
||||
│ └── ... # 其他订单班模拟
|
||||
├── agents/ # Agent 配置逻辑
|
||||
└── orderClasses.json # 订单班分类配置
|
||||
```
|
||||
|
||||
### 特点
|
||||
- 文件类型:TypeScript (.ts) / JavaScript (.js) / JSON (.json)
|
||||
- 处理方式:会被 Vite 打包到应用中
|
||||
- 访问方式:通过 import 导入到代码中使用
|
||||
|
||||
### 适合存放的内容
|
||||
✅ TypeScript 配置文件
|
||||
✅ JavaScript 逻辑代码
|
||||
✅ JSON 配置数据
|
||||
✅ Agent 业务逻辑
|
||||
✅ 模拟数据生成代码
|
||||
|
||||
### 不适合存放的内容
|
||||
❌ 图片文件
|
||||
❌ 文档文件
|
||||
❌ 静态资源
|
||||
❌ 头像图片
|
||||
|
||||
---
|
||||
|
||||
## 📁 public/data/ - 静态资源文件
|
||||
|
||||
### 用途
|
||||
存放**静态资源文件**,通过 URL 直接访问
|
||||
|
||||
### 内容结构
|
||||
```
|
||||
public/data/
|
||||
├── Agent_prompt/ # Agent 提示词文档
|
||||
├── agent头像/ # Agent 头像图片
|
||||
├── 会展策划/ # 会展相关资源
|
||||
└── 订单班文档资料/ # 软链接 -> 项目根目录/data/订单班文档资料
|
||||
```
|
||||
|
||||
### 特点
|
||||
- 文件类型:图片 (.jpg/.png/.svg) / 文档 / 其他静态文件
|
||||
- 处理方式:不会被打包,直接复制到构建输出目录
|
||||
- 访问方式:通过 `/data/...` URL 路径在浏览器中访问
|
||||
|
||||
### 软链接说明
|
||||
`public/data/订单班文档资料` 是一个符号链接,指向:
|
||||
```
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料
|
||||
```
|
||||
|
||||
**重要**: 此软链接已经创建,不需要重复创建。Vite 配置中已添加 `fs.allow: ['..']` 允许访问。
|
||||
|
||||
### 适合存放的内容
|
||||
✅ 图片文件(.jpg, .png, .svg, .webp)
|
||||
✅ Agent 头像
|
||||
✅ 文档资料
|
||||
✅ Markdown 文件
|
||||
✅ 其他静态资源
|
||||
|
||||
### 不适合存放的内容
|
||||
❌ TypeScript 代码
|
||||
❌ JavaScript 逻辑
|
||||
❌ JSON 配置(应放在 src/data/)
|
||||
❌ 需要被打包的代码
|
||||
|
||||
---
|
||||
|
||||
## 🎯 快速判断规则
|
||||
|
||||
### 问自己:
|
||||
1. **这是代码吗?** → 放 `src/data/`
|
||||
2. **这是资源吗?** → 放 `public/data/`
|
||||
|
||||
### 示例判断
|
||||
|
||||
| 文件类型 | 存放位置 | 原因 |
|
||||
|---------|---------|------|
|
||||
| food.ts | src/data/terminalSimulations/ | 业务逻辑代码 |
|
||||
| orderClasses.json | src/data/ | 配置数据 |
|
||||
| 餐饮市场调研专家.jpeg | public/data/agent头像/ | 静态图片资源 |
|
||||
| Agent提示词.md | public/data/Agent_prompt/ | 文档资源 |
|
||||
| 店面图片_正门.jpg | public/data/订单班文档资料/食品/... | 文档配图 |
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Vite 配置要求
|
||||
|
||||
为了让 public/data/ 中的软链接正常工作,vite.config.ts 必须包含:
|
||||
|
||||
```typescript
|
||||
export default defineConfig({
|
||||
server: {
|
||||
fs: {
|
||||
allow: ['..'], // 允许访问父目录
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
fs: {
|
||||
allow: ['..'],
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 违规提醒清单
|
||||
|
||||
如果发现以下情况,需要提醒用户:
|
||||
|
||||
### src/data/ 违规情况
|
||||
- [ ] 存放了图片文件(应移到 public/data/)
|
||||
- [ ] 存放了文档文件(应移到 public/data/)
|
||||
- [ ] 存放了头像文件(应移到 public/data/agent头像/)
|
||||
|
||||
### public/data/ 违规情况
|
||||
- [ ] 存放了 .ts 文件(应移到 src/data/)
|
||||
- [ ] 存放了 .js 文件(应移到 src/data/)
|
||||
- [ ] 存放了业务逻辑 JSON(应移到 src/data/)
|
||||
|
||||
---
|
||||
|
||||
## 📝 维护建议
|
||||
|
||||
1. **定期检查**: 确保文件归档符合规范
|
||||
2. **命名规范**: 使用描述性文件名(如:店面图片_正门.jpg)
|
||||
3. **路径引用**:
|
||||
- src/data/ 使用 `import` 引用
|
||||
- public/data/ 使用 `/data/...` URL 引用
|
||||
4. **软链接维护**: 不要删除或重建已存在的软链接
|
||||
|
||||
---
|
||||
|
||||
## 最后更新
|
||||
2025-10-01
|
||||
@@ -1,157 +0,0 @@
|
||||
# 展会策划 AI 多智能体演示系统项目总结
|
||||
|
||||
## 项目概述
|
||||
- **项目名称**: 展会策划 AI 多智能体协作演示系统
|
||||
- **开发时间**: 2025-09-08
|
||||
- **项目路径**: `/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo`
|
||||
- **技术栈**: React 18 + TypeScript + Tailwind CSS + Framer Motion + Zustand + Vite
|
||||
- **部署端口**: 4173
|
||||
|
||||
## 核心功能实现
|
||||
|
||||
### 1. 多智能体架构
|
||||
系统包含 7 个专业 AI Agent:
|
||||
- **信息检索专家** (DeepSeek Chat Model5): 市场调研、数据收集、竞品分析
|
||||
- **设计专家** (Google Gemini Chat Model2): 视觉设计、空间布局、品牌形象
|
||||
- **财务预算专家** (DeepSeek Chat Model2): 成本核算、预算规划、ROI分析
|
||||
- **格式编辑专家** (DeepSeek Chat Model4): 文档格式化、内容结构优化
|
||||
- **活动执行专家** (DeepSeek Chat Model1): 执行计划、时间线管理、任务分配
|
||||
- **营销宣传专家** (DeepSeek Chat Model3): 推广策略、媒体规划、品牌传播
|
||||
- **会展策划专家** (Chat Models + Memories): 中央协调、方案整合、决策支持
|
||||
|
||||
### 2. 终端模拟系统
|
||||
- **打字机效果**: 30-40字/秒的输出速度
|
||||
- **进度条系统**: 实现了真实的卡顿效果(在15%, 40%, 68%, 90%位置)
|
||||
- **内容类型**: 支持文本、图片、进度条、结构化数据等多种输出
|
||||
- **滚动控制**: 自动滚动到最新内容,支持手动滚动查看历史
|
||||
|
||||
### 3. 用户交互流程
|
||||
1. **需求输入模态框** (`RequirementModal.tsx`)
|
||||
- 预设新能源汽车展模板
|
||||
- 支持自定义需求输入
|
||||
|
||||
2. **执行过程展示** (`WorkflowPageV4.tsx`)
|
||||
- 左侧嵌入 n8n 工作流可视化
|
||||
- 右侧终端实时输出
|
||||
- Agent 头像和状态显示
|
||||
|
||||
3. **结果展示模态框** (`ResultModal.tsx`)
|
||||
- 显示生成统计(68页文档、3分钟生成、30% ROI)
|
||||
- 章节完成状态
|
||||
- 查看详情和下载选项
|
||||
|
||||
### 4. 图片加载优化
|
||||
- **骨架屏加载**: 简单的灰色渐变动画
|
||||
- **同步加载**: 后续内容等待图片加载完成
|
||||
- **图片来源**: 使用实际展会策划文档中的图片
|
||||
|
||||
## 关键技术实现
|
||||
|
||||
### 状态管理 (Zustand)
|
||||
```typescript
|
||||
// store/demoStore.ts
|
||||
export interface Agent {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
avatar?: string;
|
||||
model: string;
|
||||
role: string;
|
||||
status: 'waiting' | 'thinking' | 'generating' | 'done';
|
||||
}
|
||||
```
|
||||
|
||||
### 进度条卡顿效果
|
||||
```typescript
|
||||
const stutters = [15, 40, 68, 90];
|
||||
if (stutters.includes(progress)) {
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(1000, 3000)));
|
||||
}
|
||||
```
|
||||
|
||||
### 图片加载控制
|
||||
```typescript
|
||||
const handleImageLoad = (lineId: string) => {
|
||||
setImageLoadingStates(prev => ({
|
||||
...prev,
|
||||
[lineId]: false
|
||||
}));
|
||||
// 图片加载完成后才继续执行
|
||||
setImageLoadComplete(true);
|
||||
};
|
||||
```
|
||||
|
||||
## 项目文件结构
|
||||
```
|
||||
exhibition-demo/
|
||||
├── src/
|
||||
│ ├── pages/
|
||||
│ │ └── WorkflowPageV4.tsx # 主演示页面(最终版本)
|
||||
│ ├── components/
|
||||
│ │ ├── RequirementModal.tsx # 需求输入
|
||||
│ │ └── ResultModal.tsx # 结果展示
|
||||
│ ├── store/
|
||||
│ │ └── demoStore.ts # 状态管理
|
||||
│ └── App.tsx
|
||||
├── public/
|
||||
│ ├── agents/ # Agent 头像
|
||||
│ └── images/ # 展会图片资源
|
||||
└── vite.config.ts # 端口配置 4173
|
||||
```
|
||||
|
||||
## 开发过程中的关键优化
|
||||
|
||||
### 迭代历史
|
||||
- **V1**: 基础框架,缺少完整演示流程
|
||||
- **V2**: 添加嵌入式 n8n 工作流,终端风格执行
|
||||
- **V3**: 修复滚动问题,添加进度条和 Agent 头像
|
||||
- **V4**: 实现真实进度条效果,添加需求/结果模态框(最终版本)
|
||||
|
||||
### 解决的问题
|
||||
1. **滚动条问题**: 添加 `max-height: calc(100vh - 200px)` 和自定义滚动条样式
|
||||
2. **进度条真实性**: 改为覆盖式更新(updateProgressLine)而非追加
|
||||
3. **图片加载闪烁**: 添加骨架屏和同步等待机制
|
||||
4. **模态框触发**: 修正 useEffect 条件判断(currentAgentIndex >= 0)
|
||||
5. **TypeScript 类型错误**: 修正 NodeJS.Timeout 为 number 类型
|
||||
|
||||
## 部署和运行
|
||||
```bash
|
||||
# 安装依赖
|
||||
cd web_frontend/exhibition-demo
|
||||
pnpm install
|
||||
|
||||
# 开发模式
|
||||
pnpm dev
|
||||
|
||||
# 生产构建
|
||||
pnpm build
|
||||
|
||||
# 预览(端口 4173)
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
## 项目亮点
|
||||
1. **完整的多智能体协作演示**: 真实模拟 AI 团队协作过程
|
||||
2. **优秀的用户体验**: 流畅的动画、真实的执行效果
|
||||
3. **现代化技术栈**: React 18 最新特性、TypeScript 类型安全
|
||||
4. **可扩展架构**: 易于添加新的 Agent 或修改执行流程
|
||||
5. **视觉效果**: 干净现代的设计,避免丑陋的渐变色
|
||||
|
||||
## 相关资源
|
||||
- n8n 工作流地址: http://localhost:5678/workflow/XbfF8iRI4a69hmYS
|
||||
- 展会策划文档: `/web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
|
||||
- Git 分支: Web_Create
|
||||
- 最新提交: c0644d4b (2025-09-08)
|
||||
|
||||
## 重要配置
|
||||
- Vite 配置使用端口 4173
|
||||
- n8n 服务运行在端口 5678
|
||||
- 图片资源路径: public/images/
|
||||
- Agent 头像路径: public/agents/
|
||||
|
||||
## 未来优化建议
|
||||
1. 可以添加更多的 Agent 类型
|
||||
2. 支持自定义执行流程
|
||||
3. 添加导出功能(PDF、Word)
|
||||
4. 集成真实的 AI API 调用
|
||||
5. 支持多语言界面
|
||||
@@ -1,86 +0,0 @@
|
||||
# 展会Web前端项目记忆 - 2025年更新
|
||||
|
||||
## 项目概览
|
||||
- 项目路径:`/web_frontend/web_result/`
|
||||
- 主题:新能源汽车产业博览会(NEVIT 2024)
|
||||
- 技术栈:HTML5 + Tailwind CSS + GSAP动画 + Vue组件化
|
||||
|
||||
## 核心页面结构
|
||||
|
||||
### 1. 导航系统 (nav-component.js)
|
||||
- 统一导航组件,自动适配页面路径
|
||||
- 导航顺序:首页 → 展会概览 → 展览内容 → 布局设计 → 营销推广 → 预算分析 → 风险评估
|
||||
- 移动端响应式菜单
|
||||
|
||||
### 2. 布局设计页面 (operation.html) - 重点页面
|
||||
**主题**:AI驱动的展会布局设计系统
|
||||
|
||||
**页面结构**:
|
||||
1. Hero区:AI布局设计介绍,关键指标展示
|
||||
2. AI设计原理:三步流程(需求理解→方案生成→智能优化)
|
||||
3. Duoduo Agent系统:5阶段横向滚动展示
|
||||
- 智能空间分析
|
||||
- 智能设计生成
|
||||
- 数字孪生建模
|
||||
- 完整交付方案
|
||||
4. 设计工具链:CAD、3D建模、BIM协同、智能算法
|
||||
5. 成功案例展示
|
||||
|
||||
**技术特点**:
|
||||
- GSAP ScrollTrigger横向滚动
|
||||
- 深色主题设计系统
|
||||
- Glass morphism效果
|
||||
- 性能优化(避免过度动画)
|
||||
|
||||
### 3. 图片资源
|
||||
- 路径:`/web_frontend/web_result/data/会展策划/image/`
|
||||
- 页面引用:`../data/会展策划/image/`
|
||||
- 主要图片:Whisk系列JPG文件
|
||||
|
||||
## 设计系统
|
||||
|
||||
### 颜色变量
|
||||
```css
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--accent: #646cff;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
```
|
||||
|
||||
### 关键样式
|
||||
- Glass效果:`bg-white/5 backdrop-blur-lg border-white/10`
|
||||
- 渐变文字:`gradient-text` (emerald到blue渐变)
|
||||
- 卡片悬浮:`hover:transform hover:scale-105`
|
||||
|
||||
## 常见问题及解决方案
|
||||
|
||||
### 1. 图片路径
|
||||
- 从pages目录访问:使用`../data/`而非`../../data/`
|
||||
- 缺失图片替换:使用备用的Whisk系列图片
|
||||
|
||||
### 2. GSAP滚动优化
|
||||
- 避免滚动结束跳动:使用精确的end计算
|
||||
- 性能优化:减少will-change使用,避免过度动画
|
||||
- 移动端适配:使用matchMedia区分处理
|
||||
|
||||
### 3. 导航栏统一
|
||||
- 所有页面引入nav-component.js
|
||||
- 自动处理路径差异(首页vs子页面)
|
||||
- 统一样式和交互
|
||||
|
||||
## 开发规范
|
||||
|
||||
1. **性能优先**:避免过度动画和复杂效果
|
||||
2. **响应式设计**:移动端优先,渐进增强
|
||||
3. **组件复用**:导航、返回顶部等通用组件
|
||||
4. **图片优化**:使用lazy loading,合理压缩
|
||||
5. **代码组织**:JS组件化,CSS模块化
|
||||
|
||||
## 最近更新 (2025-01-09)
|
||||
|
||||
1. 重构operation.html为AI布局设计主题
|
||||
2. 优化GSAP横向滚动性能
|
||||
3. 修复图片路径问题
|
||||
4. 统一导航组件系统
|
||||
5. 实现深色主题设计语言
|
||||
@@ -1,99 +0,0 @@
|
||||
# 大健康订单班终端模拟创建记录
|
||||
|
||||
## 项目信息
|
||||
- **订单班ID**: health
|
||||
- **订单班名称**: 大健康
|
||||
- **项目标题**: 27岁女性社交焦虑心理咨询服务
|
||||
- **文档路径**: `/data/订单班文档资料/大健康/notion文稿/`
|
||||
|
||||
## Agent配置
|
||||
实际创建了 **4个Agent** (与orderClasses.json中配置的6个不符):
|
||||
|
||||
1. **用户分析师** (User Analyst)
|
||||
- ID: health_user_analyst
|
||||
- Icon: 📊
|
||||
- 职责: 初步评估、建立关系、收集基础信息
|
||||
- 关键输出: 情绪数据分析表.jpg
|
||||
|
||||
2. **心理学家** (Psychologist)
|
||||
- ID: health_psychologist
|
||||
- Icon: 🧠
|
||||
- 职责: 问题分析、目标设定、心理学理论指导
|
||||
- 关键输出: 心理状态结构化分析示意图.jpg, 目标设定可视化示意图.jpg
|
||||
|
||||
3. **治疗师** (Therapist)
|
||||
- ID: health_therapist
|
||||
- Icon: 💊
|
||||
- 职责: 干预方案设计、治疗技术选择
|
||||
- 关键输出: 干预方法选择示意图.jpg
|
||||
|
||||
4. **精神病学家** (Psychiatrist)
|
||||
- ID: health_psychiatrist
|
||||
- Icon: 🩺
|
||||
- 职责: 效果评估、后续跟进、结案报告
|
||||
- 关键输出: 临床心理结案报告.jpg
|
||||
|
||||
## 项目特点
|
||||
|
||||
### 案例信息
|
||||
- **来访者**: 27岁女性,互联网产品经理
|
||||
- **主诉问题**: 社交焦虑,持续2年
|
||||
- **咨询周期**: 12次,每次50分钟
|
||||
- **治疗模式**: CBT + MBCT 结合
|
||||
|
||||
### 量化评估数据
|
||||
- **SAS焦虑量表**: 65分 → 42分 (下降35%)
|
||||
- **SDS抑郁量表**: 58分 → 46分 (下降20%)
|
||||
- **PSQI睡眠指数**: 13分 → 6分 (改善54%)
|
||||
- **自我效能感**: 3/10 → 7.5/10
|
||||
|
||||
### 核心技术
|
||||
- CBT认知行为疗法
|
||||
- MBCT正念认知疗法
|
||||
- 暴露疗法
|
||||
- 社交技能训练
|
||||
|
||||
## 图片资源
|
||||
共5张图片,全部位于 `/data/订单班文档资料/大健康/notion文稿/image/` 目录:
|
||||
|
||||
1. `情绪数据分析表.jpg` - 用户分析师使用
|
||||
2. `心理状态结构化分析示意图.jpg` - 心理学家使用
|
||||
3. `目标设定可视化示意图.jpg` - 心理学家使用
|
||||
4. `干预方法选择示意图.jpg` - 治疗师使用
|
||||
5. `临床心理结案报告.jpg` - 精神病学家使用
|
||||
|
||||
## 配置修正
|
||||
|
||||
### orderClasses.json配置错误
|
||||
- **错误配置**: agentCount为6
|
||||
- **实际情况**: 只有4个Agent
|
||||
- **修正操作**: 将agentCount从6改为4
|
||||
|
||||
### 文件注册
|
||||
1. 创建 `/web_frontend/exhibition-demo/src/data/terminalSimulations/health.ts`
|
||||
2. 在 `index.ts` 中添加导入: `import { healthSimulation } from './health';`
|
||||
3. 在 `simulationMap` 中注册: `health: healthSimulation,`
|
||||
|
||||
## 工作流程特点
|
||||
心理咨询服务的Agent工作流程体现了**医疗服务的循序渐进性**:
|
||||
|
||||
1. **评估阶段** (用户分析师): 建立关系、收集信息、初步评估
|
||||
2. **分析阶段** (心理学家): 深度分析、目标设定、理论指导
|
||||
3. **干预阶段** (治疗师): 方案设计、技术实施、过程调整
|
||||
4. **评估阶段** (精神病学家): 效果评估、后续计划、结案报告
|
||||
|
||||
## 经验总结
|
||||
|
||||
### 与其他订单班的差异
|
||||
- **土木/食品/文旅**: 强调项目实施的线性流程 (需求→设计→实施→验收)
|
||||
- **视觉设计**: 强调创意过程的层层推进 (构思→策划→拍摄→后期)
|
||||
- **大健康**: 强调服务过程的循环反馈 (评估→分析→干预→再评估)
|
||||
|
||||
### 关键学习点
|
||||
1. **Agent数量验证**: 始终要验证配置文件中的agentCount与实际Agent数量是否匹配
|
||||
2. **量化数据的重要性**: 心理咨询服务使用标准化量表(SAS、SDS、PSQI)提供客观评估
|
||||
3. **专业术语使用**: CBT、MBCT等专业术语体现了服务的专业性
|
||||
4. **图片资源命名**: 使用描述性名称直接反映内容 (如"情绪数据分析表.jpg")
|
||||
|
||||
## 创建时间
|
||||
2025年10月1日
|
||||
@@ -1,254 +0,0 @@
|
||||
# 智能制造订单班终端模拟创建记录
|
||||
|
||||
## 创建时间
|
||||
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/`
|
||||
@@ -1,188 +0,0 @@
|
||||
# 交通物流订单班终端模拟创建记录
|
||||
|
||||
## 项目信息
|
||||
- **订单班**: 交通物流
|
||||
- **项目**: 某冷链智慧共配中心"百车级"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路径规划添加交互式演示
|
||||
@@ -1,90 +0,0 @@
|
||||
# n8n 中文版 Git 版本历史
|
||||
|
||||
## 当前最新版本: b7062e1
|
||||
|
||||
### 版本变更历史
|
||||
|
||||
**b7062e1** (2025-09-07) - **添加启动文档和快速启动脚本**
|
||||
- ✅ 新增完整的 LAUNCH.md 启动指南文档
|
||||
- 包含快速启动、手动启动、开发模式说明
|
||||
- 详细的中文翻译特性介绍
|
||||
- 环境变量配置说明
|
||||
- 故障排除指南和项目结构说明
|
||||
- ✅ 新增智能 start.sh 启动脚本
|
||||
- 支持正常启动和开发模式
|
||||
- 自动检查系统依赖和端口占用
|
||||
- 智能处理现有进程
|
||||
- 彩色日志输出和进度显示
|
||||
- 支持强制构建和仅检查模式
|
||||
- 📁 新增文件: LAUNCH.md, start.sh (可执行)
|
||||
|
||||
**1f46404** (2025-09-07) - **集成n8n中文翻译**
|
||||
- ✅ 完全集成 n8n-i18n-chinese 项目的中文翻译
|
||||
- ✅ 修改 i18n 配置文件支持中文
|
||||
- packages/frontend/@n8n/i18n/src/index.ts
|
||||
- 设置默认语言为 zh-CN
|
||||
- 导入 3465 行中文翻译文件
|
||||
- ✅ 应用补丁修复翻译过程中的 null 数据问题
|
||||
- packages/frontend/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
|
||||
- ✅ 创建环境配置文件 .env
|
||||
- N8N_DEFAULT_LOCALE=zh-CN
|
||||
- N8N_SECURE_COOKIE=false
|
||||
- 📁 新增文件: packages/frontend/@n8n/i18n/src/locales/zh-CN.json, .env
|
||||
- 🔧 修改文件: packages/frontend/@n8n/i18n/src/index.ts, CredentialConfig.vue
|
||||
|
||||
**f00c8ee** (2025-09-07) - **配置并运行 n8n 本地开发环境**
|
||||
- ✅ 初始化 n8n 开发环境
|
||||
- ✅ 配置 pnpm 工作空间
|
||||
- 📁 基础项目结构建立
|
||||
|
||||
**e41f20e** (2025-09-07) - **添加 Git 自动提交规范**
|
||||
- ✅ 建立 Git 提交规范
|
||||
- 📁 新增 CLAUDE.md 文档
|
||||
|
||||
**f64f498** (2025-09-07) - **初次提交**
|
||||
- ✅ 项目初始化
|
||||
- ✅ 克隆 n8n-1.109.2 源码
|
||||
|
||||
## 功能状态
|
||||
|
||||
### ✅ 已完成功能
|
||||
- 完整中文翻译界面 (3465 行翻译)
|
||||
- 智能启动脚本
|
||||
- 完整启动文档
|
||||
- 环境变量配置
|
||||
- Bug 修复补丁
|
||||
- Git 版本管理
|
||||
|
||||
### 🎯 当前版本特性
|
||||
- n8n 版本: 1.109.2
|
||||
- 完全中文化界面
|
||||
- 支持一键启动: `./start.sh`
|
||||
- 开发模式支持: `./start.sh -d`
|
||||
- 访问地址: http://localhost:5678
|
||||
- 服务器显示: `Locale: zh-CN`
|
||||
|
||||
### 🔧 技术配置
|
||||
- Node.js: v22.18.0
|
||||
- pnpm: 10.12.1
|
||||
- 默认语言: zh-CN
|
||||
- 数据库: SQLite
|
||||
- 端口: 5678
|
||||
|
||||
## 备份重要性说明
|
||||
|
||||
每个版本都包含重要的配置更改,建议:
|
||||
1. 定期备份当前分支: `My_N8N`
|
||||
2. 记录每次修改的文件和原因
|
||||
3. 保留构建日志和错误记录
|
||||
4. 测试每个版本的启动和功能
|
||||
|
||||
## 回滚指南
|
||||
|
||||
如需回滚到特定版本:
|
||||
```bash
|
||||
git checkout <version-hash>
|
||||
# 例如回滚到中文翻译版本
|
||||
git checkout 1f46404
|
||||
```
|
||||
|
||||
最后更新: 2025-09-07 23:16
|
||||
@@ -1,49 +0,0 @@
|
||||
# n8n 项目开发规范
|
||||
|
||||
## 项目路径
|
||||
- 项目根目录: /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示
|
||||
- n8n源码目录: n8n-n8n-1.109.2/
|
||||
|
||||
## 运行方式偏好
|
||||
- **首选**: 使用 `pnpm dev` 开发模式运行(支持热更新)
|
||||
- 备选: `pnpm build` 后使用 `pnpm start` 运行
|
||||
- 不使用 `npx n8n`(会下载最新版本而非本地代码)
|
||||
|
||||
## Git 提交规范(必须严格执行)
|
||||
|
||||
### 分支管理
|
||||
- 工作分支: `My_N8N`
|
||||
- 每次任务完成后必须自动提交到此分支
|
||||
|
||||
### 提交信息格式
|
||||
```
|
||||
[任务类型]: 任务描述(50字符以内)
|
||||
|
||||
详细说明:
|
||||
- 完成的具体工作内容
|
||||
- 修改的文件列表
|
||||
- 影响的功能模块
|
||||
```
|
||||
|
||||
### 任务类型
|
||||
- feat: 新功能
|
||||
- fix: 修复
|
||||
- docs: 文档
|
||||
- style: 格式
|
||||
- refactor: 重构
|
||||
- test: 测试
|
||||
- chore: 杂项
|
||||
|
||||
### 自动提交流程
|
||||
1. 切换到项目根目录
|
||||
2. 确保在 My_N8N 分支
|
||||
3. git add .
|
||||
4. git commit -m "规范化的提交信息"
|
||||
5. 查看提交历史确认
|
||||
|
||||
## 开发注意事项
|
||||
1. 始终使用 pnpm 而不是 npm 或 yarn
|
||||
2. 在 n8n-n8n-1.109.2 目录下执行命令
|
||||
3. 运行测试前先进入对应的包目录
|
||||
4. 提交代码前运行 lint 和 typecheck
|
||||
5. 构建命令输出重定向到日志文件以便查看错误
|
||||
@@ -1,66 +0,0 @@
|
||||
# 订单班命名规范和映射表
|
||||
|
||||
## 命名统一原则
|
||||
|
||||
所有订单班的命名必须在以下三个地方保持一致:
|
||||
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`
|
||||
@@ -1,674 +0,0 @@
|
||||
# 终端模拟文件创建最佳实践
|
||||
|
||||
## 概述
|
||||
本文档记录创建订单班终端模拟文件(terminalSimulations)的标准流程和最佳实践,基于食品和视觉设计两个订单班的实际处理经验总结。
|
||||
|
||||
## 一、文件位置规范
|
||||
|
||||
### 存放目录
|
||||
```
|
||||
web_frontend/exhibition-demo/src/data/terminalSimulations/
|
||||
├── index.ts # 类型定义和导出
|
||||
├── food.ts # 食品订单班
|
||||
├── visualDesign.ts # 视觉设计订单班
|
||||
└── [其他订单班].ts
|
||||
```
|
||||
|
||||
### 为什么放在 src/data/ 而不是 public/data/?
|
||||
- **src/data/** 存放 TypeScript 代码和配置逻辑
|
||||
- **public/data/** 存放图片、文档等静态资源
|
||||
- 终端模拟文件是 TypeScript 代码,会被打包,因此放在 src/data/
|
||||
|
||||
---
|
||||
|
||||
## 二、创建前的准备工作
|
||||
|
||||
### 1. 文档资料准备
|
||||
必须确保以下资料完整:
|
||||
|
||||
```
|
||||
data/订单班文档资料/[订单班名称]/
|
||||
├── notion文稿/
|
||||
│ ├── [主文档].md # 核心文档
|
||||
│ └── image/ # 图片资源(已重命名为描述性名称)
|
||||
├── Agent_prompt/ # Agent 提示词文件
|
||||
│ ├── Agent1.md
|
||||
│ ├── Agent2.md
|
||||
│ └── ...
|
||||
└── agent头像/ # Agent 头像图片
|
||||
├── Agent1.jpg
|
||||
├── Agent2.jpg
|
||||
└── ...
|
||||
```
|
||||
|
||||
**关键要求**:
|
||||
- ✅ 图片文件名必须是**描述性名称**(如:店面图片_正门.jpg)
|
||||
- ✅ Markdown 文档中的图片引用必须与实际文件名一致
|
||||
- ✅ Agent_prompt 文件数量必须与 agent头像 数量一致
|
||||
|
||||
### 2. 文档内容审查
|
||||
|
||||
**检查清单**:
|
||||
- [ ] 是否有清晰的章节结构?
|
||||
- [ ] 每个章节对应的图片是否有明确标注?
|
||||
- [ ] 是否有关键数据(预算、时间、数量等)?
|
||||
- [ ] 特殊内容(如 CSV 表格、对比图)是否已标注?
|
||||
|
||||
**示例**:视觉设计订单班的特殊标注
|
||||
```markdown
|
||||
# 五、分镜设计
|
||||
|
||||
| 镜号 | 生成图片 | 线稿图片 | 景别 | 时长 | ...
|
||||
```
|
||||
→ 这表示有一个 CSV 表格,展示 AIGC 分镜预览(线稿 → AI 生成图)
|
||||
|
||||
---
|
||||
|
||||
## 三、Agent 配置设计
|
||||
|
||||
### 1. 确定 Agent 数量和类型
|
||||
|
||||
**步骤**:
|
||||
1. 检查 `Agent_prompt/` 文件夹中的提示词文件数量
|
||||
2. 阅读每个提示词文件,理解 Agent 职责
|
||||
3. 按照文档章节顺序或工作流程顺序排列
|
||||
|
||||
**食品订单班示例**(7个Agent):
|
||||
```typescript
|
||||
const foodAgents: Agent[] = [
|
||||
{ id: 'food_market_analyst', name: '餐饮市场调研专家', icon: '📊' },
|
||||
{ id: 'food_brand_designer', name: '餐饮品牌设计专家', icon: '🎨' },
|
||||
{ id: 'food_location_decorator', name: '餐厅选址装修专家', icon: '🏗️' },
|
||||
{ id: 'food_menu_developer', name: '菜品研发专家', icon: '👨🍳' },
|
||||
{ id: 'food_operation_expert', name: '轻食店经营管理专家', icon: '🍽️' },
|
||||
{ id: 'food_team_manager', name: '餐饮团队人员管理专家', icon: '👥' },
|
||||
{ id: 'food_finance_advisor', name: '财务预算专家', icon: '💰' }
|
||||
];
|
||||
```
|
||||
|
||||
**视觉设计订单班示例**(5个Agent):
|
||||
```typescript
|
||||
const visualDesignAgents: Agent[] = [
|
||||
{ id: 'visual_project_director', name: '客户对接-项目总监', icon: '🎬' },
|
||||
{ id: 'visual_screenwriter', name: '编剧', icon: '✍️' },
|
||||
{ id: 'visual_director', name: '导演', icon: '🎥' },
|
||||
{ id: 'visual_storyboard_artist', name: '分镜师', icon: '🎨' },
|
||||
{ id: 'visual_production_manager', name: '制片主任', icon: '📋' }
|
||||
];
|
||||
```
|
||||
|
||||
### 2. Agent 配置字段说明
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'unique_agent_id', // 唯一标识,建议格式:[订单班]_[职责]
|
||||
name: 'Agent显示名称', // 与提示词文件名一致
|
||||
icon: '🎨', // 合适的emoji图标
|
||||
avatar: '/data/订单班文档资料/[订单班]/agent头像/[Agent].jpg',
|
||||
model: 'GPT-4', // AI 模型名称(可随意分配)
|
||||
role: '简短职责描述', // 3-5个词概括职责
|
||||
status: 'waiting', // 初始状态固定为 waiting
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Agent 顺序原则
|
||||
|
||||
**按工作流程顺序**:
|
||||
- ✅ **食品订单班**:市场调研 → 品牌设计 → 选址装修 → 菜品研发 → 运营管理 → 人员管理 → 财务预算
|
||||
- ✅ **视觉设计订单班**:客户对接 → 编剧 → 导演 → 分镜师 → 制片主任
|
||||
|
||||
**原则**:
|
||||
- 前期准备 Agent 在前(调研、策划、设计)
|
||||
- 执行落地 Agent 在中(实施、制作、拍摄)
|
||||
- 收尾总结 Agent 在后(财务、验收、交付)
|
||||
|
||||
---
|
||||
|
||||
## 四、内容创作策略
|
||||
|
||||
### 1. 启动序列(startupSequence)
|
||||
|
||||
**目的**:营造系统初始化的氛围
|
||||
|
||||
**标准模板**:
|
||||
```typescript
|
||||
startupSequence: [
|
||||
{ type: 'info', content: '🚀 启动[项目名称]生成系统...' },
|
||||
{ type: 'system', content: '初始化多Agent协作框架' },
|
||||
{ type: 'success', content: '✓ 系统核心加载完成' },
|
||||
{ type: 'system', content: '加载专业知识库: [领域1]/[领域2]/[领域3]' },
|
||||
{ type: 'progress', content: '████████████████████ 100%', duration: 1500 },
|
||||
{ type: 'success', content: '✓ 知识库加载完成' },
|
||||
{ type: 'info', content: '连接行业数据源...' },
|
||||
{ type: 'system', content: '├─ [数据源1]' },
|
||||
{ type: 'system', content: '├─ [数据源2]' },
|
||||
{ type: 'system', content: '├─ [数据源3]' },
|
||||
{ type: 'system', content: '└─ [数据源4]' },
|
||||
{ type: 'success', content: '✓ 数据源连接成功' },
|
||||
{ type: 'warning', content: '⚡ 检测到需求: [项目核心需求]' },
|
||||
{ type: 'info', content: '核心特点: [差异化定位/亮点]' },
|
||||
{ type: 'info', content: '正在分配[N]位专业Agent...' },
|
||||
]
|
||||
```
|
||||
|
||||
**时长建议**:10-15条消息
|
||||
|
||||
### 2. Agent 输出序列(agentSequence)
|
||||
|
||||
**结构设计原则**:
|
||||
|
||||
#### (1) 每个 Agent 的输出模板
|
||||
```typescript
|
||||
{
|
||||
agent: () => agents[0], // 当前 Agent
|
||||
outputs: [
|
||||
// 1. 开场白(必须)
|
||||
{ type: 'system', content: '[图标] [Agent名称] 正在[动作]...' },
|
||||
|
||||
// 2. 工作说明(必须)
|
||||
{ type: 'info', content: '[工作内容概述]' },
|
||||
|
||||
// 3. 进度条(可选,用于长时间任务)
|
||||
{ type: 'progress', content: '分析中...', duration: 1000 },
|
||||
|
||||
// 4. 核心结果(3-8条)
|
||||
{ type: 'success', content: '✓ [关键成果1]' },
|
||||
{ type: 'success', content: '✓ [关键成果2]' },
|
||||
|
||||
// 5. 详细输出(可选,用于列表数据)
|
||||
{ type: 'output', content: ' • [明细项1]' },
|
||||
{ type: 'output', content: ' • [明细项2]' },
|
||||
|
||||
// 6. 图片展示(核心亮点)
|
||||
{
|
||||
type: 'image',
|
||||
content: '[图标] [图片标题]',
|
||||
imageSrc: '/data/订单班文档资料/[订单班]/notion文稿/image/[图片名].jpg',
|
||||
imageAlt: '[图片描述]'
|
||||
},
|
||||
|
||||
// 7. 总结(必须)
|
||||
{ type: 'success', content: '✓ [Agent工作总结]' },
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### (2) 图片使用策略
|
||||
|
||||
**原则**:
|
||||
- ✅ 每个 Agent 至少展示 1-3 张关键图片
|
||||
- ✅ 图片必须与当前 Agent 的工作内容紧密相关
|
||||
- ✅ 图片顺序遵循文档章节顺序
|
||||
- ✅ 使用描述性的 `content` 和 `imageAlt`
|
||||
|
||||
**食品订单班图片示例**:
|
||||
```typescript
|
||||
// 市场调研专家 → 市场宣传图
|
||||
{
|
||||
type: 'image',
|
||||
content: '📊 市场宣传营销策略',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/市场宣传营销.jpg',
|
||||
imageAlt: '青莳轻食市场定位与营销'
|
||||
}
|
||||
|
||||
// 品牌设计专家 → 品牌Logo
|
||||
{
|
||||
type: 'image',
|
||||
content: '🏷️ 青莳品牌LOGO设计',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/品牌LOGO.jpg',
|
||||
imageAlt: '青莳轻食品牌Logo'
|
||||
}
|
||||
```
|
||||
|
||||
**视觉设计订单班特殊处理(AIGC对比)**:
|
||||
```typescript
|
||||
// 分镜师展示线稿 → AI生成对比
|
||||
{
|
||||
type: 'image',
|
||||
content: '📐 镜头4-线稿图',
|
||||
imageSrc: '/data/订单班文档资料/视觉设计/notion文稿/分镜/线稿图片/xxx.jpg',
|
||||
imageAlt: '传统乐器表演场景线稿'
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
content: '🎬 镜头4-AI生成图',
|
||||
imageSrc: '/data/订单班文档资料/视觉设计/notion文稿/分镜/生成图片/xxx.jpg',
|
||||
imageAlt: 'AI生成的表演场景最终效果'
|
||||
}
|
||||
```
|
||||
|
||||
#### (3) 数据展示规范
|
||||
|
||||
**财务数据格式**:
|
||||
```typescript
|
||||
{ type: 'info', content: '成本结构分析:' },
|
||||
{ type: 'output', content: ' • 食材成本: 35% = 101.6万' },
|
||||
{ type: 'output', content: ' • 租金成本: 12% = 34.8万' },
|
||||
{ type: 'output', content: ' • 人工成本: 20% = 58.0万' },
|
||||
```
|
||||
|
||||
**时间安排格式**:
|
||||
```typescript
|
||||
{ type: 'info', content: '拍摄时间表:' },
|
||||
{ type: 'output', content: ' • D1: 勘景与报批(机位/日光测绘)' },
|
||||
{ type: 'output', content: ' • D2: 开篇·江南序曲(晨雾窗口)' },
|
||||
```
|
||||
|
||||
**人员配置格式**:
|
||||
```typescript
|
||||
{ type: 'success', content: '✓ 导演(6+1天): 12,000元 - 全程在场' },
|
||||
{ type: 'success', content: '✓ 制片PM(6+1天): 9,000元 - 预算与协调' },
|
||||
```
|
||||
|
||||
### 3. 完成序列(completionSequence)
|
||||
|
||||
**目的**:总结整个项目的核心亮点和交付成果
|
||||
|
||||
**标准模板**:
|
||||
```typescript
|
||||
completionSequence: [
|
||||
{ type: 'system', content: '=' .repeat(70) },
|
||||
{ type: 'success', content: '🎉 [项目名称] 生成完成!' },
|
||||
{ type: 'system', content: '=' .repeat(70) },
|
||||
{ type: 'info', content: '' },
|
||||
|
||||
// 1. 核心竞争优势(3-6条)
|
||||
{ type: 'info', content: '🎯 核心竞争优势:' },
|
||||
{ type: 'success', content: '✓ [优势1]' },
|
||||
{ type: 'success', content: '✓ [优势2]' },
|
||||
|
||||
// 2. 财务亮点(3-5条)
|
||||
{ type: 'info', content: '💰 财务亮点:' },
|
||||
{ type: 'success', content: '✓ [财务指标1]' },
|
||||
{ type: 'success', content: '✓ [财务指标2]' },
|
||||
|
||||
// 3. 风险管理/创新亮点(可选)
|
||||
{ type: 'info', content: '🎨 AIGC技术创新:' },
|
||||
{ type: 'output', content: ' • [创新点1]' },
|
||||
|
||||
// 4. 交付物清单
|
||||
{ type: 'info', content: '📋 交付物清单:' },
|
||||
{ type: 'output', content: ' 1. [交付物1]' },
|
||||
|
||||
// 5. 文件保存位置
|
||||
{ type: 'success', content: '✅ 完整方案已保存至: /projects/[路径].pdf' },
|
||||
{ type: 'info', content: '📄 附件包含: [附件列表]' },
|
||||
]
|
||||
```
|
||||
|
||||
**时长建议**:20-30条消息
|
||||
|
||||
---
|
||||
|
||||
## 五、特殊内容处理
|
||||
|
||||
### 1. CSV 表格数据
|
||||
|
||||
**场景**:视觉设计订单班的分镜表
|
||||
|
||||
**处理方式**:
|
||||
- 不直接展示完整表格
|
||||
- 提取关键镜头展示(3-5个代表性镜头)
|
||||
- 配合图片展示线稿 → AI生成对比
|
||||
|
||||
**示例**:
|
||||
```typescript
|
||||
{ type: 'success', content: '✓ 镜头1: 远景/无人机/24mm - 俯瞰古镇屋顶' },
|
||||
{ type: 'success', content: '✓ 镜头2: 中景/滑轨/50mm - 夕阳下古亭' },
|
||||
```
|
||||
|
||||
### 2. 对比内容(如 AIGC 分镜)
|
||||
|
||||
**展示策略**:
|
||||
1. 先说明创新点("AIGC辅助分镜预览")
|
||||
2. 展示线稿图片
|
||||
3. 展示AI生成图片
|
||||
4. 简短说明镜头内容
|
||||
|
||||
**示例**:
|
||||
```typescript
|
||||
{ type: 'info', content: 'AIGC分镜对比展示(线稿 → AI生成):' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📐 镜头4-线稿图',
|
||||
imageSrc: '/path/to/sketch.jpg',
|
||||
imageAlt: '场景线稿'
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
content: '🎬 镜头4-AI生成图',
|
||||
imageSrc: '/path/to/ai_generated.jpg',
|
||||
imageAlt: 'AI生成最终效果'
|
||||
},
|
||||
{ type: 'output', content: ' → 中景/手持稳定器 - 场景描述' },
|
||||
```
|
||||
|
||||
### 3. 多层级数据
|
||||
|
||||
**场景**:预算明细、人员配置、设备清单
|
||||
|
||||
**展示原则**:
|
||||
- 先展示总数
|
||||
- 再分类展示
|
||||
- 使用缩进区分层级
|
||||
|
||||
**示例**:
|
||||
```typescript
|
||||
{ type: 'success', content: '✓ 总预算: 273,800元' },
|
||||
{ type: 'info', content: '成本结构分解:' },
|
||||
{ type: 'output', content: ' • 前期: 19,000元' },
|
||||
{ type: 'output', content: ' • 拍摄人力: 82,900元' },
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、图片路径规范
|
||||
|
||||
### 1. 路径格式
|
||||
|
||||
**固定前缀**:`/data/订单班文档资料/`
|
||||
|
||||
**完整格式**:
|
||||
```
|
||||
/data/订单班文档资料/[订单班名称]/notion文稿/image/[描述性文件名].jpg
|
||||
```
|
||||
|
||||
**示例**:
|
||||
```typescript
|
||||
// ✅ 正确(描述性文件名)
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/店面图片_正门.jpg'
|
||||
|
||||
// ❌ 错误(通用文件名)
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_01.jpg'
|
||||
```
|
||||
|
||||
### 2. 图片文件名规范
|
||||
|
||||
**命名原则**:
|
||||
- ✅ 使用描述性名称(如:市场宣传营销.jpg)
|
||||
- ✅ 中文命名可接受
|
||||
- ✅ 使用下划线分隔(如:店面图片_正门.jpg)
|
||||
- ❌ 避免通用名称(如:图片_01.jpg)
|
||||
- ❌ 避免 UUID 或乱码
|
||||
|
||||
**重命名流程**(如果遇到通用文件名):
|
||||
1. 阅读 Markdown 文档,理解每张图片对应的内容
|
||||
2. 创建图片映射表(旧名 → 新名)
|
||||
3. 使用 Python 脚本批量重命名
|
||||
4. 更新 Markdown 中的图片引用
|
||||
|
||||
---
|
||||
|
||||
## 七、质量检查清单
|
||||
|
||||
### 创建前检查
|
||||
- [ ] Agent 数量与提示词文件一致
|
||||
- [ ] Agent 头像文件都存在
|
||||
- [ ] 图片文件名都是描述性的
|
||||
- [ ] Markdown 文档结构清晰
|
||||
- [ ] 关键数据已标记(预算、时间、数量)
|
||||
|
||||
### 创建中检查
|
||||
- [ ] Agent 顺序符合工作流程
|
||||
- [ ] 每个 Agent 至少有 1 张图片
|
||||
- [ ] 图片路径正确(以 /data/ 开头)
|
||||
- [ ] 数据格式一致(缩进、符号)
|
||||
- [ ] 进度条 duration 合理(800-1500ms)
|
||||
|
||||
### 创建后检查
|
||||
- [ ] TypeScript 无语法错误
|
||||
- [ ] 所有图片路径可访问
|
||||
- [ ] Agent 配置字段完整
|
||||
- [ ] 内容逻辑连贯
|
||||
- [ ] 总时长合理(3-5分钟模拟效果)
|
||||
|
||||
---
|
||||
|
||||
## 八、常见问题与解决方案
|
||||
|
||||
### 问题1:图片加载失败(ERR_CONNECTION_REFUSED)
|
||||
|
||||
**原因**:
|
||||
- `public/data/订单班文档资料` 是软链接
|
||||
- Vite 默认不允许访问项目外部文件
|
||||
|
||||
**解决方案**:
|
||||
在 `vite.config.ts` 中添加:
|
||||
```typescript
|
||||
export default defineConfig({
|
||||
server: {
|
||||
fs: {
|
||||
allow: ['..'], // 允许访问父目录
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
fs: {
|
||||
allow: ['..'],
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### 问题2:Agent 数量与文档不匹配
|
||||
|
||||
**症状**:
|
||||
- 终端模拟只有 6 个 Agent
|
||||
- 但 Agent_prompt 文件夹有 7 个提示词文件
|
||||
|
||||
**解决方案**:
|
||||
1. 检查 `Agent_prompt/` 文件夹
|
||||
2. 逐个阅读提示词文件
|
||||
3. 确保每个 Agent 都在 `agents` 数组中
|
||||
4. 检查是否有 Agent 被错误合并
|
||||
|
||||
### 问题3:图片文件名不规范
|
||||
|
||||
**症状**:
|
||||
- 图片名称为 `图片_01.jpg`、`图片_02.jpg`
|
||||
- Markdown 中也是通用名称
|
||||
|
||||
**解决方案**:
|
||||
1. 阅读 Markdown 文档上下文
|
||||
2. 创建映射表:`图片_01.jpg → 店面图片_正门.jpg`
|
||||
3. 使用 Python 批量重命名
|
||||
4. 更新 Markdown 引用
|
||||
|
||||
**Python 脚本模板**:
|
||||
```python
|
||||
import os
|
||||
import shutil
|
||||
|
||||
image_map = {
|
||||
"图片_01.jpg": "店面图片_正门.jpg",
|
||||
"图片_02.jpg": "店内场景_用餐区.jpg",
|
||||
}
|
||||
|
||||
IMAGE_DIR = "/path/to/image/"
|
||||
for old_name, new_name in image_map.items():
|
||||
old_path = os.path.join(IMAGE_DIR, old_name)
|
||||
new_path = os.path.join(IMAGE_DIR, new_name)
|
||||
if os.path.exists(old_path):
|
||||
shutil.move(old_path, new_path)
|
||||
```
|
||||
|
||||
### 问题4:特殊字符编码问题
|
||||
|
||||
**症状**:
|
||||
- 文件名包含 URL 编码(如:%E9%9D%99%E5%B8%A7)
|
||||
- Bash 脚本处理中文失败
|
||||
|
||||
**解决方案**:
|
||||
- 使用 Python 而不是 Bash
|
||||
- 使用 `urllib.parse.unquote()` 解码
|
||||
- 指定 `encoding='utf-8'`
|
||||
|
||||
---
|
||||
|
||||
## 九、代码模板
|
||||
|
||||
### 1. 基础模板
|
||||
|
||||
```typescript
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData, TerminalLine } from './index';
|
||||
|
||||
// [订单班名称]订单班专属Agent配置
|
||||
const [变量名]Agents: Agent[] = [
|
||||
{
|
||||
id: '[订单班]_[agent1]',
|
||||
name: '[Agent1名称]',
|
||||
icon: '🎨',
|
||||
avatar: '/data/订单班文档资料/[订单班]/agent头像/[Agent1].jpg',
|
||||
model: 'GPT-4',
|
||||
role: '[简短职责]',
|
||||
status: 'waiting',
|
||||
},
|
||||
// ... 更多 Agents
|
||||
];
|
||||
|
||||
export const [变量名]Simulation = (): SimulationData => ({
|
||||
orderClassId: '[订单班id]',
|
||||
orderClassName: '[订单班名称]',
|
||||
projectTitle: '[项目标题]',
|
||||
agents: [变量名]Agents,
|
||||
|
||||
startupSequence: [
|
||||
// 启动序列
|
||||
],
|
||||
|
||||
agentSequence: [
|
||||
// Agent 输出序列
|
||||
],
|
||||
|
||||
completionSequence: [
|
||||
// 完成序列
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Agent 输出模板
|
||||
|
||||
```typescript
|
||||
{
|
||||
agent: () => agents[0],
|
||||
outputs: [
|
||||
{ type: 'system', content: '[图标] [Agent名称] 正在[动作]...' },
|
||||
{ type: 'info', content: '[工作内容]' },
|
||||
{ type: 'progress', content: '[进度描述]...', duration: 1000 },
|
||||
{ type: 'success', content: '✓ [成果1]' },
|
||||
{ type: 'success', content: '✓ [成果2]' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '[图标] [图片标题]',
|
||||
imageSrc: '/data/订单班文档资料/[订单班]/notion文稿/image/[图片].jpg',
|
||||
imageAlt: '[图片描述]'
|
||||
},
|
||||
{ type: 'success', content: '✓ [总结]' },
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 十、实战案例对比
|
||||
|
||||
### 案例1:食品订单班
|
||||
|
||||
**特点**:
|
||||
- 7个 Agent(市场→品牌→选址→菜品→运营→人员→财务)
|
||||
- 图片类型:店面、菜品、人员、流程
|
||||
- 数据类型:财务预算、营收预测、成本结构
|
||||
|
||||
**处理重点**:
|
||||
- 图片重命名(25张从通用名改为描述性名称)
|
||||
- Agent 顺序调整(分离品牌设计和选址装修)
|
||||
- 财务数据精确呈现(50万投资,290万营收)
|
||||
|
||||
### 案例2:视觉设计订单班
|
||||
|
||||
**特点**:
|
||||
- 5个 Agent(总监→编剧→导演→分镜→制片)
|
||||
- 图片类型:古镇风光、分镜对比、设备清单
|
||||
- 特殊内容:CSV 分镜表、AIGC 线稿→生成对比
|
||||
|
||||
**处理重点**:
|
||||
- AIGC 分镜展示(线稿图 + AI生成图成对展示)
|
||||
- 分镜表简化(17个镜头选取 4-5 个代表性展示)
|
||||
- 六大篇章结构(古镇→文化→美食→湿地→农业→夜游)
|
||||
|
||||
---
|
||||
|
||||
## 十一、协作与记忆
|
||||
|
||||
### 1. 记录到 Serena
|
||||
|
||||
每次完成一个订单班的终端模拟创建后,应记录:
|
||||
- Agent 配置思路
|
||||
- 特殊内容处理方式
|
||||
- 遇到的问题和解决方案
|
||||
|
||||
### 2. 跨订单班借鉴
|
||||
|
||||
**可复用**:
|
||||
- Agent 配置结构
|
||||
- 启动/完成序列模板
|
||||
- 图片展示策略
|
||||
- 数据格式规范
|
||||
|
||||
**需定制**:
|
||||
- Agent 数量和职责
|
||||
- 图片内容和顺序
|
||||
- 特殊内容处理
|
||||
- 项目特色亮点
|
||||
|
||||
---
|
||||
|
||||
## 十二、持续优化
|
||||
|
||||
### 1. 收集反馈
|
||||
|
||||
- 用户观看终端模拟的反馈
|
||||
- 图片展示效果
|
||||
- 内容节奏是否合理
|
||||
- Agent 顺序是否清晰
|
||||
|
||||
### 2. 迭代改进
|
||||
|
||||
- 调整 Agent 输出时长
|
||||
- 优化图片展示顺序
|
||||
- 增加/减少数据细节
|
||||
- 改进特殊内容展示
|
||||
|
||||
---
|
||||
|
||||
## 附录:工具和命令
|
||||
|
||||
### 1. 查看文件结构
|
||||
```bash
|
||||
ls -la data/订单班文档资料/[订单班名称]/Agent_prompt/
|
||||
ls -la data/订单班文档资料/[订单班名称]/agent头像/
|
||||
```
|
||||
|
||||
### 2. 检查图片文件
|
||||
```bash
|
||||
find data/订单班文档资料/[订单班名称]/notion文稿/image -name "*.jpg"
|
||||
```
|
||||
|
||||
### 3. 重命名图片(Python)
|
||||
```bash
|
||||
python3 /tmp/rename_images.py
|
||||
```
|
||||
|
||||
### 4. 验证 TypeScript 语法
|
||||
```bash
|
||||
cd web_frontend/exhibition-demo
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 最后更新
|
||||
2025-10-01
|
||||
|
||||
## 版本历史
|
||||
- v1.0 (2025-10-01): 基于食品和视觉设计两个订单班的实践总结
|
||||
@@ -0,0 +1,66 @@
|
||||
# 终端模拟性能优化心得(2025年10月)
|
||||
|
||||
## 问题背景
|
||||
用户反馈化工订单班终端输出速度过快,缺乏真实感。经分析发现多个订单班存在同样问题。
|
||||
|
||||
## 根本原因
|
||||
- 缺少progress类型输出(带有stutters的进度条)
|
||||
- 过度依赖output类型(延迟仅30-100ms)
|
||||
- 缺少system类型输出作为间隔
|
||||
|
||||
## 延迟机制分析
|
||||
```typescript
|
||||
// WorkflowPageV4.tsx中的延迟配置
|
||||
const delay =
|
||||
output.type === 'system' ? getRandomDelay(100, 300) :
|
||||
output.type === 'progress' ? 0 : // progress有自己的时间控制
|
||||
getRandomDelay(30, 100);
|
||||
|
||||
// Progress类型的特殊处理
|
||||
if (stutters.includes(progress)) {
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(1000, 3000)));
|
||||
}
|
||||
```
|
||||
|
||||
## 优化方案
|
||||
1. **为每个Agent添加2-3个进度条**
|
||||
- 使用stutters数组制造暂停效果:`[23, 56, 78]`或`[34, 67, 89]`
|
||||
- 部分进度条可添加duration参数:`duration: 2000`
|
||||
|
||||
2. **添加system类型输出**
|
||||
- Agent初始化信息:`>>> Agent-1: 项目经理初始化...`
|
||||
- 技术细节:`CUDA环境检测: Available`、`GPU内存分配: 8GB`
|
||||
- 空行分隔:`{ type: 'system', content: '' }`
|
||||
|
||||
3. **优化后的统计**
|
||||
- environmental.ts: 添加15个进度条
|
||||
- transportation.ts: 添加20个进度条
|
||||
- developer.ts: 添加18个进度条
|
||||
- finance.ts: 添加14个进度条
|
||||
- chemical.ts: 添加7个进度条(之前已优化)
|
||||
|
||||
## 最佳实践模板
|
||||
```typescript
|
||||
{
|
||||
agent: () => agents[0],
|
||||
outputs: [
|
||||
{ type: 'info', content: '🔧 Agent名称开始工作...' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'progress', content: '任务1', target: 100, stutters: [23, 56, 78] },
|
||||
{ type: 'progress', content: '任务2', target: 100, stutters: [45, 89] },
|
||||
{ type: 'system', content: '' },
|
||||
// ... 具体输出内容
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 效果提升
|
||||
- 单个Agent输出时间从2-3秒提升至5-8秒
|
||||
- 整体终端模拟时间从15-20秒提升至30-45秒
|
||||
- 用户体验更真实,避免输出过快的问题
|
||||
|
||||
## 注意事项
|
||||
- 不要过度添加进度条,每个Agent 2-3个即可
|
||||
- stutters数组的值应该多样化,避免重复
|
||||
- 适当使用system类型输出作为视觉间隔
|
||||
- 保持代码简洁,避免臃肿
|
||||
@@ -1,41 +0,0 @@
|
||||
# TypeScript配置修复记录 - 2025-09-08
|
||||
|
||||
## 问题描述
|
||||
n8n项目中@n8n/config包出现TypeScript配置错误:
|
||||
- 错误信息:找不到文件 jest-expect-message/types/index.d.ts
|
||||
- 影响:IDE报错,类型检查失败
|
||||
|
||||
## 解决方案
|
||||
1. **清理TypeScript构建缓存**
|
||||
```bash
|
||||
# 删除所有tsbuildinfo文件
|
||||
find packages -name "*.tsbuildinfo" -type f | xargs rm -f
|
||||
# 清理dist和node_modules
|
||||
rm -rf packages/@n8n/config/node_modules packages/@n8n/config/dist
|
||||
```
|
||||
|
||||
2. **修改tsconfig.json配置**
|
||||
- 文件:`packages/@n8n/config/tsconfig.json`
|
||||
- 修改:从types数组中移除"jest"引用
|
||||
```json
|
||||
// 修改前
|
||||
"types": ["node", "jest"],
|
||||
// 修改后
|
||||
"types": ["node"],
|
||||
```
|
||||
|
||||
3. **重新构建**
|
||||
```bash
|
||||
pnpm install --filter @n8n/config
|
||||
pnpm build --filter @n8n/config
|
||||
pnpm typecheck
|
||||
```
|
||||
|
||||
## 项目结构说明
|
||||
- n8n使用monorepo结构,基于pnpm workspaces
|
||||
- 构建工具:Turbo
|
||||
- TypeScript配置继承:@n8n/typescript-config/tsconfig.common.json
|
||||
|
||||
## 注意事项
|
||||
- IDE可能需要重启TypeScript服务来刷新配置
|
||||
- VSCode: Cmd+Shift+P → "TypeScript: Restart TS Server"
|
||||
190
.serena/memories/化工订单班终端模拟开发心得_202510.md
Normal file
@@ -0,0 +1,190 @@
|
||||
# 化工订单班终端模拟开发心得
|
||||
|
||||
## 项目背景
|
||||
化工订单班(chemical)展示半导体AI综合检测项目,聚焦300mm硅晶圆质量检测的全自动化流程。项目特色是AI主导的检测系统,实现95%自动化判定,仅在低可信度情况下需要人工介入。
|
||||
|
||||
## 核心技术架构
|
||||
```
|
||||
文件位置: web_frontend/exhibition-demo/src/data/terminalSimulations/chemical.ts
|
||||
注册位置: web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts
|
||||
```
|
||||
|
||||
## Agent设计特点
|
||||
|
||||
### 6人专家团队配置
|
||||
1. **项目经理** - 项目统筹与进度管理(GPT-4)
|
||||
2. **AI算法工程师** - AI模型训练与优化(GPT-4)
|
||||
3. **高级检测工程师** - 检测方案设计与实施(Claude-3)
|
||||
4. **光电检测员** - 外观缺陷识别与量化(GPT-3.5)
|
||||
5. **数据分析师** - 数据处理与报告生成(GPT-4)
|
||||
6. **质量管理专家** - 质量标准制定与审核(Claude-3)
|
||||
|
||||
### 头像资源优化
|
||||
由于只有3个头像文件,采用了合理的复用策略:
|
||||
- 质量标准与合规专家.jpg → 项目经理、质量管理专家
|
||||
- 检测工程师1+2.jpg → AI算法工程师、高级检测工程师
|
||||
- 检测技术员.jpg → 光电检测员、数据分析师
|
||||
|
||||
## 内容结构设计
|
||||
|
||||
### 1. 项目启动(20行)
|
||||
突出半导体检测的技术参数:
|
||||
```typescript
|
||||
{ type: 'info', content: '📏 样品规格:300mm P型硅晶圆,SiO₂薄膜15.0±0.3nm' },
|
||||
{ type: 'info', content: '⚡ 效率要求:单片5-6分钟,全批20片≤2小时' },
|
||||
{ type: 'info', content: '📈 质量标准:ISO 5洁净室,CMA/CNAS双认证' },
|
||||
```
|
||||
|
||||
### 2. Agent工作流程(6个阶段)
|
||||
每个Agent都承担了明确的检测环节:
|
||||
- 项目经理 → 整体规划和AI系统设置
|
||||
- AI算法工程师 → 模型架构(配图:检测背景主图)
|
||||
- 高级检测工程师 → 检测方案(配图:硅晶圆检测项目、光学镜头检测)
|
||||
- 光电检测员 → 外观检测(配图:外观热力图)
|
||||
- 数据分析师 → 数据处理(配图:厚度分布、电学对比、成分抽检)
|
||||
- 质量管理专家 → 最终审核(配图:检测结果主图)
|
||||
|
||||
### 3. 项目完成总结(25行)
|
||||
强调AI检测的效率和准确性:
|
||||
- 检测效率提升(单片5-6分钟)
|
||||
- AI准确率(98.5%)
|
||||
- 成本优化(人力成本降低60%)
|
||||
|
||||
## 图片使用策略
|
||||
|
||||
### 图片分配逻辑
|
||||
根据文档内容与Agent职责精确匹配:
|
||||
1. **检测背景主图** → AI算法工程师(展示系统架构)
|
||||
2. **硅晶圆检测项目** → 高级检测工程师(展示检测分类)
|
||||
3. **光学镜头检测硅晶圆示意图** → 高级检测工程师(展示检测方法)
|
||||
4. **外观热力图** → 光电检测员(展示缺陷分布)
|
||||
5. **厚度分布图** → 数据分析师(展示薄膜均匀性)
|
||||
6. **电学对比图** → 数据分析师(展示AI预测准确度)
|
||||
7. **成分抽检卡片** → 数据分析师(展示成分分析)
|
||||
8. **检测结果主图** → 质量管理专家(展示批次总结)
|
||||
|
||||
### 图片插入时机
|
||||
- 在介绍相关技术点后立即插入对应图片
|
||||
- 每张图片后添加空行提升视觉效果
|
||||
- 图片描述与Agent输出内容紧密关联
|
||||
|
||||
## 数据量化展示
|
||||
|
||||
### 关键技术指标
|
||||
```
|
||||
检测规格:300mm硅晶圆 + SiO₂薄膜
|
||||
批次规模:20片/批
|
||||
检测时间:单片5-6分钟,全批<2小时
|
||||
AI准确率:98.5%
|
||||
自动化率:95%
|
||||
人工介入:<5%(仅低可信时)
|
||||
```
|
||||
|
||||
### 质量阈值参数
|
||||
- 颗粒:≤35个/片(≥0.3μm)
|
||||
- 划痕:≤50μm
|
||||
- 腐蚀深度:≤10nm
|
||||
- 薄膜厚度:15.0±0.3nm
|
||||
- 均匀性:≤±3%
|
||||
- 方块电阻:60±1.2Ω/□
|
||||
- O/Si比:2.00±0.05
|
||||
|
||||
### 检测结果
|
||||
- 合格率:95%(19/20片合格)
|
||||
- 观察片:1片(Rs略高但未越界)
|
||||
- AI可信度:平均0.94
|
||||
|
||||
## 开发经验总结
|
||||
|
||||
### 1. 文档分析要点
|
||||
- 半导体检测项目文档技术性强,需准确理解专业术语
|
||||
- 重点提取量化指标(尺寸、时间、精度、阈值)
|
||||
- 识别AI系统的核心功能(自动判定、智能缩点、异常预警)
|
||||
|
||||
### 2. Agent职责划分
|
||||
- 根据检测流程自然划分Agent职责
|
||||
- 项目经理负责整体统筹
|
||||
- AI工程师负责算法模型
|
||||
- 检测人员负责具体执行
|
||||
- 数据分析师负责结果处理
|
||||
- 质量专家负责最终把关
|
||||
|
||||
### 3. 内容呈现技巧
|
||||
- 大量使用专业术语增强真实感(YOLOv8、ICP-MS、XPS)
|
||||
- 数据要精确到小数点(15.07nm、61.1Ω/□、2.02)
|
||||
- 使用判定符号直观展示结果(✓合格、⚠️观察)
|
||||
- 分层次展示信息(总-分结构)
|
||||
|
||||
### 4. 特色亮点
|
||||
- **AI主导流程**:强调95%自动化,减少人工干预
|
||||
- **智能缩点技术**:前3点验证后智能缩减测点
|
||||
- **实时判定系统**:三级判定(合格/观察/复核)
|
||||
- **可视化报告**:8张专业图表支撑检测结果
|
||||
|
||||
## 可复用经验
|
||||
|
||||
### 检测类项目模板
|
||||
```typescript
|
||||
// 启动序列
|
||||
- 检测环境初始化
|
||||
- 样品规格说明
|
||||
- 质量标准要求
|
||||
- 团队组建
|
||||
|
||||
// Agent序列
|
||||
- 项目规划 → 技术配置 → 方案制定 →
|
||||
执行检测 → 数据分析 → 质量审核
|
||||
|
||||
// 完成序列
|
||||
- 效率提升数据
|
||||
- 质量保证结果
|
||||
- 交付物清单
|
||||
- 技术亮点总结
|
||||
```
|
||||
|
||||
### 图片选择原则
|
||||
1. 优先选择流程图、架构图
|
||||
2. 数据可视化图表必不可少
|
||||
3. 热力图直观展示分布情况
|
||||
4. 对比图体现AI预测能力
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 技术准确性
|
||||
- 半导体行业术语必须准确(如300mm而非300毫米)
|
||||
- 单位符号规范(Ω/□、atoms/cm²、μm)
|
||||
- 数值精度合理(不要过度精确也不要太粗略)
|
||||
|
||||
### 头像资源处理
|
||||
- 当头像不足时合理复用
|
||||
- 相近职责的Agent可共用头像
|
||||
- 确保头像路径正确
|
||||
|
||||
### 检测流程逻辑
|
||||
- 检测顺序要符合实际(外观→薄膜→电学→成分)
|
||||
- 判定逻辑要清晰(阈值比对→置信度评估→人工复核)
|
||||
- 结果要有层次(合格/观察/不合格)
|
||||
|
||||
## 相关记忆文件
|
||||
- 02_终端模拟开发指南.md - 通用开发指南
|
||||
- 图片处理标准化流程和最佳实践_202510.md - 图片处理规范
|
||||
- 环保订单班终端模拟开发心得_202510.md - 环保订单班经验
|
||||
|
||||
## 更新记录
|
||||
- 2025-10-03:创建化工订单班终端模拟
|
||||
- 采用6个Agent展示半导体检测完整流程
|
||||
- 集成8张处理后的专业检测图片
|
||||
- 突出AI主导的自动化检测特色
|
||||
- 注册到simulationMap供系统调用
|
||||
|
||||
## 关键创新点
|
||||
1. **AI赋能**:将AI技术深度融入传统检测流程
|
||||
2. **效率革命**:从人工主导到AI主导的范式转变
|
||||
3. **智能决策**:三级判定系统确保质量与效率平衡
|
||||
4. **数据驱动**:用精确数据展示检测专业性
|
||||
|
||||
## 后续优化建议
|
||||
1. 可增加更多AI模型细节(训练过程、优化策略)
|
||||
2. 可展示更多异常处理场景
|
||||
3. 可添加与传统检测的对比数据
|
||||
4. 可引入更多行业标准和认证体系
|
||||
151
.serena/memories/图片处理标准化流程和最佳实践_202510.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# 订单班图片处理标准化流程和最佳实践 (2025-10-03)
|
||||
|
||||
## 核心原则
|
||||
**图片文件名必须与markdown文档中的alt text(描述文字)完全一致**
|
||||
|
||||
例如:
|
||||
- ✅ 正确:``
|
||||
- ❌ 错误:``
|
||||
|
||||
## 标准处理流程
|
||||
|
||||
### 1. 分析阶段
|
||||
```bash
|
||||
# 读取markdown文档,提取所有图片引用
|
||||
cat "文档名.md" | grep "!\["
|
||||
|
||||
# 分析图片引用格式
|
||||
# 格式:
|
||||
# 目标:alt text = filename(不含扩展名)
|
||||
```
|
||||
|
||||
### 2. 检查文件现状
|
||||
```bash
|
||||
# 查看图片目录
|
||||
ls -la image/
|
||||
|
||||
# 识别需要重命名的文件类型:
|
||||
# - Hash名称:如 65351297-3c82-49ea-a8c7-03944a3af294.jpg
|
||||
# - 通用名称:如 image.jpg, image 1.jpg
|
||||
# - Whisk系列:如 Whisk_3bc3f132f453ff1a1e3492de3faca12fdr.jpg
|
||||
# - URL编码:如 %E9%95%BF%E6%B1%9F%E5%9B%BE%E7%89%87.jpg
|
||||
# - 不完整中文名:如 营养盐.jpg(应为 营养盐示意图.jpg)
|
||||
```
|
||||
|
||||
### 3. 创建映射关系
|
||||
分析每个图片的alt text,创建重命名映射:
|
||||
- 从markdown中提取alt text作为目标文件名
|
||||
- 保持.jpg扩展名统一
|
||||
- 确保中文名称完整且与alt text一致
|
||||
|
||||
### 4. 批量重命名脚本
|
||||
```bash
|
||||
#!/bin/bash
|
||||
cd "$(dirname "$0")/image"
|
||||
|
||||
# 示例映射
|
||||
mv "原文件名.jpg" "目标文件名.jpg"
|
||||
mv "image.jpg" "中华人民共和国环境保护法截图.jpg"
|
||||
mv "65351297-3c82-49ea-a8c7-03944a3af294.jpg" "长江采样布点图.jpg"
|
||||
# ... 更多映射
|
||||
|
||||
echo "✓ 图片重命名完成"
|
||||
```
|
||||
|
||||
### 5. 更新markdown引用
|
||||
```bash
|
||||
# 使用sed批量替换
|
||||
sed -i '' \
|
||||
-e 's|image/原文件名\.jpg|image/新文件名.jpg|g' \
|
||||
-e 's|image/image\.jpg|image/中华人民共和国环境保护法截图.jpg|g' \
|
||||
"文档名.md"
|
||||
```
|
||||
|
||||
### 6. 验证步骤
|
||||
```bash
|
||||
# 验证markdown中的引用
|
||||
grep "image/" "文档名.md"
|
||||
|
||||
# 验证文件存在
|
||||
ls -la image/ | grep "特定文件名"
|
||||
|
||||
# 检查alt text与文件名一致性
|
||||
# 确保  格式
|
||||
```
|
||||
|
||||
## 常见问题和解决方案
|
||||
|
||||
### 问题1:URL编码的中文文件名
|
||||
- **现象**:`%E9%95%BF%E6%B1%9F%E5%9B%BE%E7%89%87.jpg`
|
||||
- **解决**:直接在markdown中替换为正常中文,文件系统已经是正确的中文名
|
||||
|
||||
### 问题2:文件名与alt text不完全一致
|
||||
- **现象**:``
|
||||
- **解决**:重命名文件为完整的alt text:`营养盐.jpg` → `营养盐示意图.jpg`
|
||||
|
||||
### 问题3:扩展名不一致(.jpeg vs .jpg)
|
||||
- **现象**:markdown中是.jpeg但文件是.jpg
|
||||
- **解决**:统一使用.jpg扩展名
|
||||
|
||||
### 问题4:特殊字符处理
|
||||
- **现象**:alt text中包含下划线、空格等
|
||||
- **解决**:文件名保持与alt text完全一致,包括特殊字符
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 1. 命名规范
|
||||
- 使用描述性中文名称
|
||||
- 避免使用通用名称(image.jpg、图片1.jpg)
|
||||
- 保持alt text与文件名完全一致
|
||||
- 统一使用.jpg扩展名
|
||||
|
||||
### 2. 处理顺序
|
||||
1. 先分析所有图片的alt text
|
||||
2. 创建完整的重命名映射表
|
||||
3. 一次性执行所有重命名
|
||||
4. 批量更新markdown引用
|
||||
5. 全面验证结果
|
||||
|
||||
### 3. 质量检查
|
||||
- 确保每个图片都有描述性的alt text
|
||||
- 验证所有图片文件都存在
|
||||
- 检查markdown渲染是否正常
|
||||
- 保存处理记录便于追溯
|
||||
|
||||
## 实际案例总结
|
||||
|
||||
### 财经商贸订单班(21个图片)
|
||||
- Hash名称 → 描述性名称:如 `6b00bb23e96aba0d679669cfa2e28c14.jpeg` → `平台电商优势展示图.jpg`
|
||||
- 重点:电商运营相关的界面设计图、产品展示图
|
||||
|
||||
### 环保订单班(26个图片)
|
||||
- 通用名称 → 法规名称:如 `image.jpg` → `中华人民共和国环境保护法截图.jpg`
|
||||
- 不完整名称 → 完整名称:如 `营养盐.jpg` → `营养盐示意图.jpg`
|
||||
- 重点:水质监测相关的技术图表、法规截图
|
||||
|
||||
## 工具函数
|
||||
|
||||
### 快速检查不一致的文件
|
||||
```bash
|
||||
# 提取所有需要检查的图片引用
|
||||
grep -E "!\[.*\]\(image/.*\)" "文档.md" | \
|
||||
while read line; do
|
||||
alt=$(echo "$line" | sed 's/.*\[\([^]]*\)\].*/\1/')
|
||||
file=$(echo "$line" | sed 's/.*image\/\([^)]*\)\).*/\1/' | sed 's/.jpg$//')
|
||||
if [ "$alt" != "$file" ]; then
|
||||
echo "不一致: [$alt] != [$file]"
|
||||
fi
|
||||
done
|
||||
```
|
||||
|
||||
## 记忆要点
|
||||
1. **核心原则**:文件名 = alt text
|
||||
2. **统一格式**:全部使用.jpg
|
||||
3. **批处理优先**:避免逐个手动修改
|
||||
4. **完整验证**:确保所有引用正确
|
||||
5. **记录留存**:保存处理脚本和映射关系
|
||||
|
||||
---
|
||||
|
||||
**最后更新**:2025-10-03
|
||||
**适用范围**:所有订单班的notion文稿图片处理
|
||||
62
.serena/memories/环保订单班图片处理完成记录_202510.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 环保订单班图片处理完成记录 (2025-10-03)
|
||||
|
||||
## 任务内容
|
||||
- 订单班:环保
|
||||
- 文档:某地表水环境质量考核断面水质采样方案撰写 27a04df704b380b59e0fdcf216e8ea5e.md
|
||||
- 任务:将图片文件从hash名称/通用名称重命名为描述性中文名,并更新markdown引用
|
||||
|
||||
## 处理结果
|
||||
|
||||
### 文件统计
|
||||
- 图片总数:26个
|
||||
- 重命名文件:22个
|
||||
- 保持原名:4个(已是中文名)
|
||||
|
||||
### 重命名清单
|
||||
|
||||
#### 通用名称 → 描述性中文名 (12个)
|
||||
- image.jpg → 中华人民共和国环境保护法截图.jpg
|
||||
- image 1.jpg → 水污染防治法截图.jpg
|
||||
- image 2.jpg → 地表水环境质量标准示意图.jpg
|
||||
- image 3.jpg → 地表水监测技术规范示意图.jpg
|
||||
- image 4.jpg → 长江河流断面位置.jpg
|
||||
- image 5.jpg → 采样流程.jpg
|
||||
- image 6.jpg → 污水综合排放标准截图.jpg
|
||||
- image 7.jpg → 工业企业水污染物排放标准截图.jpg
|
||||
- image 8.jpg → 采样表图标.jpg
|
||||
- image 9.jpg → 数据审核与验证图标.jpg
|
||||
- image 10.jpg → 数据存档图标.jpg
|
||||
- image 11.jpg → 文件输出与报告图标.jpg
|
||||
|
||||
#### Hash名称 → 描述性中文名 (6个)
|
||||
- 65351297-3c82-49ea-a8c7-03944a3af294.jpg → 长江采样布点图.jpg
|
||||
- 22e9ff50b34458b33716e8f8bb5d14c9.jpg → 垂线分布图.jpg
|
||||
- b2c6fab4-0011-438d-b640-bb3e25fdb04b.jpg → 水流分布示意图1.jpg
|
||||
- 1c8f6fb3-001c-4ccf-9a9d-8181953149b1.jpg → 水流分布示意图2.jpg
|
||||
- 4cf305f9-5658-47f7-9f44-88f89da98d76.jpg → 有机物示意图.jpg
|
||||
- 6572681c-2ed0-4f02-89a6-50331eeb2dbf.jpg → 采样仪器设备.jpg
|
||||
|
||||
#### Whisk系列 → 描述性中文名 (4个)
|
||||
- Whisk_3bc3f132f453ff1a1e3492de3faca12fdr.jpg → 检测仪器.jpg
|
||||
- Whisk_c52eaa001f7419490e741a290841f70cdr.jpg → 现场采样操作工作照.jpg
|
||||
- Whisk_4124216daf3b4c6ba7143e0dae2015cbdr.jpg → 质量控制措施.jpg
|
||||
- Whisk_c389efaeee4b0559fed49cd8c5add4d7dr.jpg → 现场数据采集记录.jpg
|
||||
|
||||
#### 保持原中文名 (4个)
|
||||
- 长江图片.jpg
|
||||
- 营养盐.jpg
|
||||
- 重金属.jpg
|
||||
- 生物指标.jpg
|
||||
|
||||
## 处理步骤
|
||||
1. 分析markdown文档中所有图片的alt text描述
|
||||
2. 创建重命名映射关系
|
||||
3. 生成并执行bash重命名脚本
|
||||
4. 使用sed批量更新markdown文档中的图片引用
|
||||
5. 修复特殊情况(如alt text未更新)
|
||||
6. 验证所有图片引用正确
|
||||
|
||||
## 完成状态
|
||||
✅ 所有图片文件已成功重命名为描述性中文名
|
||||
✅ Markdown文档中的26个图片引用已全部更新
|
||||
✅ 文档可正常渲染所有图片
|
||||
187
.serena/memories/环保订单班终端模拟开发心得_202510.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 环保订单班终端模拟开发心得
|
||||
|
||||
## 项目背景
|
||||
环保订单班(environmental)是展示地表水环境质量考核断面水质采样监测项目的终端模拟。通过8位专业Agent的协作,展示从法规评估到项目执行的完整水质监测流程。
|
||||
|
||||
## 核心技术架构
|
||||
```
|
||||
文件位置: web_frontend/exhibition-demo/src/data/terminalSimulations/environmental.ts
|
||||
注册位置: web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts
|
||||
```
|
||||
|
||||
## Agent设计理念
|
||||
|
||||
### 8人专家团队架构
|
||||
1. **环境咨询师** - 法规解读与合规评估(GPT-4)
|
||||
2. **水质采样专家** - 采样方案设计与技术指导(Claude-3)
|
||||
3. **环保项目经理** - 项目统筹与进度管理(GPT-4)
|
||||
4. **EHS工程师** - 安全评估与风险控制(GPT-3.5)
|
||||
5. **质量控制专家** - 质控体系与数据验证(Claude-3)
|
||||
6. **项目预算专家** - 成本核算与预算控制(GPT-4)
|
||||
7. **文案格式整理专员** - 报告编制与文档规范(GPT-3.5)
|
||||
8. **项目主管** - 决策审核与质量把关(GPT-4)
|
||||
|
||||
### 设计特点
|
||||
- 覆盖水质监测项目全生命周期
|
||||
- 每个Agent有明确的专业职责
|
||||
- 合理的AI模型配置(关键岗位用GPT-4)
|
||||
- 符合环保行业实际工作流程
|
||||
|
||||
## 内容结构设计
|
||||
|
||||
### 1. 项目启动序列(21行)
|
||||
```typescript
|
||||
// 突出项目关键参数
|
||||
{ type: 'info', content: '📍 监测地点:长江国考"长江大桥"断面' },
|
||||
{ type: 'info', content: '📐 监测范围:主河道85m宽,3条采样垂线' },
|
||||
{ type: 'info', content: '📊 监测指标:26项(理化、营养盐、重金属、有机物、生物)' },
|
||||
```
|
||||
|
||||
### 2. Agent工作流程(8个阶段)
|
||||
每个Agent输出包含:
|
||||
- 工作开始提示
|
||||
- 具体工作内容(带量化指标)
|
||||
- 相关图片展示
|
||||
- 工作完成确认
|
||||
|
||||
```typescript
|
||||
// 示例:水质采样专家
|
||||
outputs: [
|
||||
{ type: 'output', content: '断面布设方案:' },
|
||||
{ type: 'output', content: ' • 对照断面:上游背景水质参考点' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg' },
|
||||
{ type: 'success', content: '✓ 采样方案设计完成(3个断面×3条垂线×4个深度)' },
|
||||
]
|
||||
```
|
||||
|
||||
### 3. 项目完成总结(23行)
|
||||
- 项目成果总结(量化指标)
|
||||
- 交付物清单(5项文档)
|
||||
- 预期效果(3个目标)
|
||||
|
||||
## 图片使用策略
|
||||
|
||||
### 图片选择原则
|
||||
1. **技术性图片优先**:长江采样布点图、垂线分布图、质量控制措施
|
||||
2. **工作照片辅助**:现场采样操作工作照
|
||||
3. **法规截图支撑**:中华人民共和国环境保护法截图
|
||||
4. **图标美化界面**:数据审核与验证图标
|
||||
|
||||
### 图片分配逻辑
|
||||
- 环境咨询师 → 法规截图(建立权威性)
|
||||
- 水质采样专家 → 技术图纸(展示专业性)
|
||||
- EHS工程师 → 现场照片(强调实践性)
|
||||
- 质量控制专家 → 流程图(体现系统性)
|
||||
- 项目主管 → 审核图标(突出决策性)
|
||||
|
||||
## 数据量化展示
|
||||
|
||||
### 关键量化指标
|
||||
```
|
||||
监测范围:85m宽河道
|
||||
采样点位:3断面×3垂线×4深度 = 36个采样点
|
||||
监测指标:26项水质参数
|
||||
监测频次:每月1次,全年12次
|
||||
项目预算:193万元(优化后175万元)
|
||||
成本优化:9.3%
|
||||
数据准确率:≥98%
|
||||
质控比例:平行样≥10%
|
||||
```
|
||||
|
||||
### 技术标准引用
|
||||
- 《地表水环境质量标准》GB 3838-2002
|
||||
- 《地表水监测技术规范》HJ/T 91-2022
|
||||
- CMA认证标准
|
||||
|
||||
## 开发经验总结
|
||||
|
||||
### 1. 文档分析方法
|
||||
```bash
|
||||
# 分析markdown文档
|
||||
1. 提取项目核心信息(项目名称、范围、指标)
|
||||
2. 识别专业角色(从文档中的工作内容推导)
|
||||
3. 匹配可用头像(检查agent头像文件夹)
|
||||
4. 整理图片资源(已重命名为描述性中文名)
|
||||
```
|
||||
|
||||
### 2. Agent数量决策
|
||||
- orderClasses.json显示6个,实际使用8个
|
||||
- 根据项目复杂度和专业性需求调整
|
||||
- 确保覆盖项目全生命周期
|
||||
|
||||
### 3. 输出内容设计
|
||||
- 使用行业专业术语
|
||||
- 提供量化指标和具体数据
|
||||
- 分层次展示信息(总-分结构)
|
||||
- 适时插入图片增强可视化
|
||||
|
||||
### 4. 时序控制建议
|
||||
```typescript
|
||||
// 建议的显示节奏
|
||||
启动序列:每行100-200ms
|
||||
Agent输出:每组500-1000ms
|
||||
图片加载:额外500ms暂停
|
||||
完成序列:每行150ms
|
||||
```
|
||||
|
||||
## 可复用模板
|
||||
|
||||
### Agent定义模板
|
||||
```typescript
|
||||
{
|
||||
id: 'role_identifier',
|
||||
name: '中文职位名',
|
||||
icon: '相关emoji',
|
||||
avatar: '/data/订单班文档资料/{order}/agent头像/{name}.jpg',
|
||||
model: 'GPT-4|Claude-3|GPT-3.5',
|
||||
role: '核心职责描述(8字以内)',
|
||||
status: 'waiting',
|
||||
}
|
||||
```
|
||||
|
||||
### 输出结构模板
|
||||
```typescript
|
||||
{
|
||||
agent: () => agents[index],
|
||||
outputs: [
|
||||
{ type: 'info', content: '{emoji} {角色}开始{动作}...' },
|
||||
{ type: 'system', content: '' }, // 空行
|
||||
{ type: 'output', content: '{工作内容标题}:' },
|
||||
{ type: 'output', content: ' • {具体内容}' },
|
||||
{ type: 'image', imageSrc: '{图片路径}', imageAlt: '{图片描述}' },
|
||||
{ type: 'success', content: '✓ {完成确认}' },
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 开发要点
|
||||
1. **确保图片路径正确**:使用已重命名的中文描述性文件名
|
||||
2. **保持专业性**:使用行业标准术语和规范
|
||||
3. **数据真实性**:基于实际项目参数,不虚构数据
|
||||
4. **逻辑连贯性**:Agent工作流程符合实际业务逻辑
|
||||
|
||||
### 常见问题
|
||||
1. **Agent数量不匹配**:orderClasses.json中的数量仅供参考,根据实际需求调整
|
||||
2. **图片无法显示**:检查文件名是否与markdown中的alt text完全一致
|
||||
3. **中文乱码**:确保文件编码为UTF-8
|
||||
|
||||
## 后续优化建议
|
||||
|
||||
1. **增加交互性**:可考虑添加用户选择分支
|
||||
2. **动态数据**:接入实时环境监测数据
|
||||
3. **可视化增强**:添加数据图表展示
|
||||
4. **多语言支持**:准备英文版本内容
|
||||
5. **响应式优化**:适配移动端显示
|
||||
|
||||
## 相关记忆文件
|
||||
- 02_终端模拟开发指南.md - 通用开发指南
|
||||
- 图片处理标准化流程和最佳实践_202510.md - 图片处理规范
|
||||
- 03_订单班配置清单.md - 订单班基础配置
|
||||
|
||||
## 更新记录
|
||||
- 2025-10-03:创建环保订单班终端模拟
|
||||
- 使用8个专业Agent展示水质监测完整流程
|
||||
- 集成8张处理后的专业图片
|
||||
- 注册到simulationMap供系统调用
|
||||
203
.serena/memories/订单班快速制作检查清单.md
Normal file
@@ -0,0 +1,203 @@
|
||||
# 订单班网站快速制作检查清单
|
||||
|
||||
## 🚀 快速启动(10分钟)
|
||||
|
||||
### 第一步:定位文件
|
||||
```bash
|
||||
/web_frontend/web_result/order-classes/[订单班名称]/
|
||||
├── css/styles.css # 主样式文件
|
||||
├── js/main.js # 主逻辑文件
|
||||
└── index.html # 页面文件
|
||||
```
|
||||
|
||||
### 第二步:关键修改点
|
||||
1. **CSS变量定义** (styles.css: 4-73行)
|
||||
- 亮色主题变量
|
||||
- 深色主题变量(74-95行)
|
||||
|
||||
2. **主题切换逻辑** (main.js: 249-276行)
|
||||
- 默认主题设置
|
||||
|
||||
3. **背景图片配置** (styles.css: 287-432行)
|
||||
- 6个独立背景图
|
||||
|
||||
## ✅ 必改清单
|
||||
|
||||
### 1. 颜色主题
|
||||
- [ ] 根据行业调整主色调
|
||||
- 食品:绿色 #4caf50
|
||||
- 科技:蓝色 #2196f3
|
||||
- 金融:金色 #ff9800
|
||||
- 医疗:青色 #00acc1
|
||||
|
||||
- [ ] 深色主题基色
|
||||
- 食品:深绿 #0a1a0f
|
||||
- 科技:深蓝 #0a0f1a
|
||||
- 金融:深棕 #1a0f0a
|
||||
- 医疗:深青 #0a1a1a
|
||||
|
||||
### 2. 背景图片
|
||||
- [ ] 替换6张行业相关图片
|
||||
- Hero区域:1张
|
||||
- Section 1-6:各1张
|
||||
- 使用Unsplash链接格式
|
||||
|
||||
### 3. 硬编码颜色替换
|
||||
```bash
|
||||
# 搜索命令
|
||||
grep -n "rgba(255, 255, 255" styles.css
|
||||
grep -n "rgba(76, 175, 80" styles.css
|
||||
grep -n "#[0-9a-fA-F]" styles.css
|
||||
```
|
||||
|
||||
替换规则:
|
||||
- rgba(255,255,255,0.9) → var(--bg-card)
|
||||
- rgba(255,255,255,0.95) → var(--bg-semi-dark)
|
||||
- rgba(255,255,255,0.7) → var(--bg-overlay)
|
||||
|
||||
### 4. 交互状态变量
|
||||
- [ ] 添加 --hover-bg 变量
|
||||
- [ ] 添加 --active-bg 变量
|
||||
- [ ] 所有hover使用变量
|
||||
|
||||
### 5. 深色主题覆盖
|
||||
```css
|
||||
/* 必须添加的深色主题覆盖 */
|
||||
body.dark-theme .stat-item { }
|
||||
body.dark-theme .stat-item:hover { }
|
||||
body.dark-theme th { }
|
||||
body.dark-theme tr:hover { }
|
||||
body.dark-theme .featured-item:first-child { }
|
||||
```
|
||||
|
||||
### 6. 默认主题设置
|
||||
```javascript
|
||||
// main.js 修改
|
||||
if (savedTheme === 'dark' || savedTheme === null) {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
```
|
||||
|
||||
### 7. 遮罩透明度
|
||||
- 亮色:linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%)
|
||||
- 深色:linear-gradient(to bottom, rgba(10,26,15,0.92) 0%, rgba(13,31,19,0.88) 100%)
|
||||
|
||||
## 🔍 验证清单
|
||||
|
||||
### 功能测试
|
||||
- [ ] 主题切换正常
|
||||
- [ ] localStorage记忆
|
||||
- [ ] 默认显示深色主题
|
||||
- [ ] 背景图片可见
|
||||
- [ ] Hover无跳动
|
||||
|
||||
### 视觉检查
|
||||
- [ ] 深色主题所有元素变深
|
||||
- [ ] 文字对比度足够
|
||||
- [ ] 背景图片遮罩适度
|
||||
- [ ] 渐变条宽度(180px)
|
||||
- [ ] 卡片glassmorphism效果
|
||||
|
||||
### 响应式测试
|
||||
- [ ] 移动端布局
|
||||
- [ ] 平板布局
|
||||
- [ ] 大屏适配
|
||||
|
||||
## ⚡ 快速命令
|
||||
|
||||
### 批量替换CSS变量
|
||||
```javascript
|
||||
// 在控制台执行
|
||||
const replacements = [
|
||||
['rgba(255, 255, 255, 0.9)', 'var(--bg-card)'],
|
||||
['rgba(255, 255, 255, 0.95)', 'var(--bg-semi-dark)'],
|
||||
['rgba(255, 255, 255, 0.8)', 'var(--bg-card)'],
|
||||
['rgba(255, 255, 255, 0.7)', 'var(--bg-overlay)'],
|
||||
['rgba(255, 255, 255, 0.5)', 'var(--bg-overlay)'],
|
||||
['rgba(76, 175, 80, 0.15)', 'var(--active-bg)'],
|
||||
['rgba(76, 175, 80, 0.1)', 'var(--active-bg)'],
|
||||
['rgba(76, 175, 80, 0.08)', 'var(--hover-bg)']
|
||||
];
|
||||
```
|
||||
|
||||
## 🎨 配色方案模板
|
||||
|
||||
### 科技订单班
|
||||
```css
|
||||
--primary-dark: #1565c0;
|
||||
--primary-blue: #2196f3;
|
||||
--accent-cyan: #00acc1;
|
||||
/* 深色 */
|
||||
--bg-dark: #0a0f1a;
|
||||
```
|
||||
|
||||
### 金融订单班
|
||||
```css
|
||||
--primary-dark: #f57c00;
|
||||
--primary-gold: #ff9800;
|
||||
--accent-amber: #ffc107;
|
||||
/* 深色 */
|
||||
--bg-dark: #1a0f0a;
|
||||
```
|
||||
|
||||
### 医疗订单班
|
||||
```css
|
||||
--primary-dark: #00838f;
|
||||
--primary-cyan: #00acc1;
|
||||
--accent-teal: #26a69a;
|
||||
/* 深色 */
|
||||
--bg-dark: #0a1a1a;
|
||||
```
|
||||
|
||||
## 📋 常用代码片段
|
||||
|
||||
### 1. Section背景模板
|
||||
```css
|
||||
.section:nth-child(n) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%),
|
||||
url('https://images.unsplash.com/photo-xxxxx?w=1920&q=80');
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 深色主题覆盖模板
|
||||
```css
|
||||
body.dark-theme .element {
|
||||
background: rgba(18, 35, 24, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Hover防跳动模板
|
||||
```css
|
||||
.element {
|
||||
border: 1px solid transparent;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
.element:hover {
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
```
|
||||
|
||||
## 🚨 常见错误避免
|
||||
|
||||
1. ❌ 不要硬编码颜色值
|
||||
2. ❌ 不要忘记深色主题覆盖
|
||||
3. ❌ 不要遗漏transparent border
|
||||
4. ❌ 不要使用过高透明度遮罩(>0.95)
|
||||
5. ❌ 不要忘记设置默认主题
|
||||
|
||||
## 💡 优化建议
|
||||
|
||||
1. 使用CSS变量管理所有颜色
|
||||
2. 图片使用w=1920&q=80参数
|
||||
3. backdrop-filter适度使用
|
||||
4. 保持fixed attachment
|
||||
5. 使用localStorage缓存偏好
|
||||
|
||||
---
|
||||
制作时间预估:
|
||||
- 基础迁移:30分钟
|
||||
- 主题调整:20分钟
|
||||
- 测试优化:10分钟
|
||||
- 总计:约1小时
|
||||
@@ -1,170 +0,0 @@
|
||||
# 订单班交互式网站生成标准流程
|
||||
|
||||
## 核心流程:6个阶段
|
||||
|
||||
### 阶段一:内容分析与理解 (15分钟)
|
||||
**目标**: 深度理解订单班内容特色
|
||||
**输入**: 订单班详细文稿资料 + 终端模拟数据
|
||||
**输出**:
|
||||
- 内容分析报告 (content_analysis.md)
|
||||
- 内容清单文件 (content_checklist.json)
|
||||
**验收**: 识别核心主题、时间线事件、图片资源、设计方向
|
||||
|
||||
### 阶段二:初始设计与架构 (20分钟)
|
||||
**目标**: 建立项目基础结构和设计系统
|
||||
**技术栈**:
|
||||
- React 18+ (TypeScript 5.0+)
|
||||
- Tailwind CSS 3.0+
|
||||
- Vite 5.0+
|
||||
- GSAP 3.12+ (滚动动画)
|
||||
**输出**: 项目基础结构 + 设计系统文档 + 组件规划图
|
||||
|
||||
### 阶段三:SuperDesign迭代优化 (40分钟) ⭐核心阶段
|
||||
**工作目录**: `.superdesign/design_iterations/`
|
||||
**执行5次设计迭代**:
|
||||
1. **迭代1**: 基础布局与色彩 - 确定整体结构和主色调
|
||||
2. **迭代2**: 字体与排版优化 - 优化文字层级和可读性
|
||||
3. **迭代3**: 交互动效增强 - 添加滚动动画和过渡效果
|
||||
4. **迭代4**: 视觉细节打磨 - 完善图片展示和装饰元素
|
||||
5. **迭代5**: 响应式适配 - 确保多端显示效果
|
||||
|
||||
**评估维度** (1-10分):
|
||||
- visual_appeal (视觉吸引力)
|
||||
- brand_alignment (品牌契合度)
|
||||
- usability (易用性)
|
||||
- performance (性能表现)
|
||||
- content_presentation (内容呈现)
|
||||
- innovation (创新性)
|
||||
- technical_quality (技术质量)
|
||||
|
||||
**输出**: 5个迭代版本 + 评估报告 + 最优版本标记
|
||||
|
||||
### 阶段四:功能实现与交互 (30分钟)
|
||||
**核心功能**:
|
||||
- 时间轴导航 (固定定位、进度指示、快速跳转)
|
||||
- 图片查看器 (放大缩小、全屏预览)
|
||||
- 平滑滚动 (GSAP动画)
|
||||
- 滚动触发动画 (ScrollTrigger)
|
||||
|
||||
### 阶段五:内容集成与验证 (25分钟)
|
||||
**检查内容**:
|
||||
- 文本内容 (章节、段落、术语、数据)
|
||||
- 图片资源 (清晰度、说明、版权)
|
||||
- 交互元素 (时间线、链接、表格、图表)
|
||||
- SEO优化 (标题、Meta、Alt、结构化数据)
|
||||
|
||||
### 阶段六:部署与归档 (10分钟)
|
||||
**操作**:
|
||||
- 构建生产版本 (npm run build)
|
||||
- 移动到最终位置
|
||||
- 归档SuperDesign文件到 `.superdesign/archive_${ORDER_NAME}_${DATE}/`
|
||||
- 生成交付文档 (README.md)
|
||||
|
||||
---
|
||||
|
||||
## 关键路径配置
|
||||
|
||||
```bash
|
||||
# 终端模拟数据
|
||||
TERMINAL_SIMULATIONS="/web_frontend/exhibition-demo/src/data/terminalSimulations/"
|
||||
|
||||
# 详细文稿资料
|
||||
SOURCE_MATERIALS="/data/订单班文档资料/${ORDER_NAME}"
|
||||
|
||||
# 网页生成结果
|
||||
OUTPUT_PATH="/web_frontend/web_result/order-classes/${ORDER_NAME}"
|
||||
|
||||
# SuperDesign工作目录
|
||||
SUPERDESIGN_WORK="/.superdesign/design_iterations/"
|
||||
|
||||
# SuperDesign归档
|
||||
SUPERDESIGN_ARCHIVE="/.superdesign/archive_${ORDER_NAME}_${DATE}/"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SuperDesign工作流程详解
|
||||
|
||||
### 设计文件命名规范
|
||||
- 迭代版本: `${order_name}_v1.html`, `${order_name}_v2.html`, ...
|
||||
- 主题CSS: `theme_${version}.css`
|
||||
- 评估报告: `evaluation_${order_name}.md`
|
||||
|
||||
### 每次迭代必须包含
|
||||
1. **完整的HTML文件** (单文件,内嵌CSS和JS)
|
||||
2. **使用真实项目图片** (路径: `../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/`)
|
||||
3. **Agent身份标识** (每个板块显示 "🤖 Agent 0X · 专家名称")
|
||||
4. **独特的Icon设计** (每个Agent使用渐变色背景 + Lucide图标)
|
||||
5. **GSAP动画效果** (ScrollTrigger、Timeline、Stagger)
|
||||
|
||||
### 设计原则
|
||||
- **Agent专业性突出**: 每个板块顶部展示Agent徽章和分析报告
|
||||
- **图片丰富多样**: 使用项目中的真实图片,避免单调placeholder
|
||||
- **交互流畅自然**: GSAP动画缓动函数选择得当
|
||||
- **响应式设计**: 移动端友好,断点合理
|
||||
|
||||
---
|
||||
|
||||
## 当前项目状态(食品订单班)
|
||||
|
||||
### 已完成
|
||||
- ✅ 阶段一:内容分析(已读取文稿和图片)
|
||||
- ✅ 阶段二:设计系统定义
|
||||
- ✅ 阶段三:SuperDesign迭代
|
||||
- V1: 基础版本
|
||||
- V2: 优化Icon和图片
|
||||
- V3: 强化Agent身份和专业性 ⭐当前版本
|
||||
|
||||
### V3核心特点
|
||||
- 7个Agent各有独特渐变Icon (市场、品牌、选址、菜品、运营、团队、财务)
|
||||
- 使用25张真实项目图片
|
||||
- 每个板块有Agent专业分析报告/理念说明信息框
|
||||
- Hero区域标注"AI多智能体协同"
|
||||
- 时间轴导航添加emoji和滑出标签
|
||||
- 财务数据可视化(进度条、表格、卡片)
|
||||
- 所有动画使用GSAP + ScrollTrigger
|
||||
|
||||
### 下一步(阶段三继续)
|
||||
- 迭代4:视觉细节打磨(阴影、圆角、背景纹理、装饰元素)
|
||||
- 迭代5:响应式适配(移动端布局、断点优化、触摸交互)
|
||||
- 评估报告:对比5个版本,选择最优方案
|
||||
|
||||
---
|
||||
|
||||
## 成功标准
|
||||
|
||||
### 设计质量
|
||||
- 视觉设计符合订单班主题特色
|
||||
- Agent专业性突出展示
|
||||
- 用户体验流畅自然
|
||||
- 响应式适配完善
|
||||
|
||||
### 内容完整
|
||||
- 所有Agent的工作成果都已展示
|
||||
- 真实项目图片使用充分
|
||||
- 信息架构清晰合理
|
||||
- 无明显遗漏或错误
|
||||
|
||||
### 技术实现
|
||||
- 使用GSAP 3.12+实现流畅动画
|
||||
- ScrollTrigger滚动交互
|
||||
- 单文件HTML(便于预览)
|
||||
- 代码可读性好
|
||||
|
||||
---
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 必须遵守
|
||||
1. **永远使用真实项目图片**,路径格式: `../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/图片名.jpg`
|
||||
2. **每个Agent必须有独特Icon**,使用渐变背景 + Lucide图标
|
||||
3. **突出Agent身份**,显示"🤖 Agent 0X · 专家名称"
|
||||
4. **每个板块添加专家分析**,体现Agent的专业贡献
|
||||
5. **使用GSAP动画**,不使用CSS动画
|
||||
|
||||
### 避免错误
|
||||
- ❌ 使用placeholder图片
|
||||
- ❌ Icon设计单调雷同
|
||||
- ❌ 忽略Agent身份展示
|
||||
- ❌ 图片说明文字缺失
|
||||
- ❌ 动画效果简陋或缺失
|
||||
267
.serena/memories/订单班网站设计规范_完整版.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# 订单班网站设计规范 - 完整制作流程
|
||||
|
||||
## 一、设计体系架构
|
||||
|
||||
### 1. CSS变量系统(核心)
|
||||
```css
|
||||
/* 基础设计变量 */
|
||||
:root {
|
||||
/* 背景层次 */
|
||||
--bg-dark: #f8faf7; /* 主背景 */
|
||||
--bg-semi-dark: rgba(248, 250, 247, 0.95); /* 半透明背景 */
|
||||
--bg-overlay: rgba(255, 255, 255, 0.85); /* 遮罩层 */
|
||||
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
|
||||
|
||||
/* 主题色彩 */
|
||||
--primary-dark: #2d7a3f; /* 主色深 */
|
||||
--primary-green: #4caf50; /* 主色 */
|
||||
--accent-gold: #ff9800; /* 强调色 */
|
||||
--accent-gold-light: #ffa726; /* 浅强调色 */
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-light: #1a1a1a; /* 深色文字 */
|
||||
--text-gray: #666666; /* 灰色文字 */
|
||||
|
||||
/* 交互状态 */
|
||||
--hover-bg: rgba(255, 152, 0, 0.15); /* 悬停背景 */
|
||||
--active-bg: rgba(76, 175, 80, 0.2); /* 激活背景 */
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 深色主题设计(重点)
|
||||
```css
|
||||
body.dark-theme {
|
||||
/* 深邃森林绿配色方案 */
|
||||
--bg-dark: #0a1a0f; /* 深邃森林绿背景 */
|
||||
--bg-semi-dark: rgba(10, 26, 15, 0.95); /* 深绿半透明 */
|
||||
--bg-overlay: rgba(13, 31, 19, 0.85); /* 深绿遮罩层 */
|
||||
--bg-card: rgba(18, 35, 24, 0.9); /* 深绿卡片背景 */
|
||||
|
||||
/* 调整后的主题色 */
|
||||
--primary-green: #4a9d5f; /* 翡翠绿 */
|
||||
--accent-gold: #d4a574; /* 暖棕金色 */
|
||||
--text-light: #e8f5e9; /* 浅绿白色文字 */
|
||||
--text-gray: #a4c3a8; /* 绿灰色文字 */
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 响应式间距系统
|
||||
```css
|
||||
--spacing-xs: 0.75rem; /* 12px */
|
||||
--spacing-sm: 1.25rem; /* 20px */
|
||||
--spacing-md: 2rem; /* 32px */
|
||||
--spacing-lg: 3rem; /* 48px */
|
||||
--spacing-xl: 4rem; /* 64px */
|
||||
--spacing-2xl: 6rem; /* 96px */
|
||||
```
|
||||
|
||||
## 二、关键技术实现
|
||||
|
||||
### 1. 背景图片系统
|
||||
**多图片独立配置方案:**
|
||||
```css
|
||||
/* 亮色主题 - 顶部微透,底部完全遮挡 */
|
||||
.section:nth-child(1) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 247, 1) 100%),
|
||||
url('图片1');
|
||||
}
|
||||
|
||||
/* 深色主题 - 深绿遮罩 */
|
||||
body.dark-theme .section:nth-child(1) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%),
|
||||
url('图片1');
|
||||
}
|
||||
```
|
||||
|
||||
**关键参数:**
|
||||
- 亮色遮罩:0.9 → 1(顶部略透,底部不透)
|
||||
- 深色遮罩:0.92 → 0.88(高透明度深绿)
|
||||
- 图片数量:前6个section独立,超出后循环
|
||||
|
||||
### 2. 主题切换实现
|
||||
```javascript
|
||||
// 默认暗色主题
|
||||
function initThemeToggle() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
// 无保存偏好时默认暗色
|
||||
if (savedTheme === 'dark' || savedTheme === null) {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 避免硬编码颜色
|
||||
**错误示范:**
|
||||
```css
|
||||
background: rgba(255, 255, 255, 0.8); /* 硬编码白色 */
|
||||
```
|
||||
|
||||
**正确做法:**
|
||||
```css
|
||||
background: var(--bg-card); /* 使用CSS变量 */
|
||||
```
|
||||
|
||||
## 三、完整制作流程
|
||||
|
||||
### Phase 1: 环境准备
|
||||
1. 确认项目路径结构
|
||||
2. 检查现有HTML结构
|
||||
3. 备份原始样式文件
|
||||
|
||||
### Phase 2: 设计系统搭建
|
||||
1. **建立CSS变量体系**
|
||||
- 定义亮色主题变量
|
||||
- 定义深色主题变量
|
||||
- 添加hover/active状态变量
|
||||
|
||||
2. **设置默认主题**
|
||||
- 修改JS初始化逻辑
|
||||
- 设置localStorage默认值
|
||||
|
||||
### Phase 3: 样式迁移
|
||||
1. **查找所有硬编码颜色**
|
||||
```bash
|
||||
grep -n "rgba(255, 255, 255" styles.css
|
||||
grep -n "rgba(76, 175, 80" styles.css
|
||||
```
|
||||
|
||||
2. **批量替换为CSS变量**
|
||||
- rgba(255, 255, 255, 0.9) → var(--bg-card)
|
||||
- rgba(255, 255, 255, 0.95) → var(--bg-semi-dark)
|
||||
- rgba(255, 255, 255, 0.7) → var(--bg-overlay)
|
||||
|
||||
3. **添加深色主题特定覆盖**
|
||||
```css
|
||||
body.dark-theme .stat-item { ... }
|
||||
body.dark-theme th { ... }
|
||||
body.dark-theme tr:hover { ... }
|
||||
```
|
||||
|
||||
### Phase 4: 背景优化
|
||||
1. **配置多背景图片**
|
||||
- 每个section独立图片
|
||||
- 设置合理的遮罩透明度
|
||||
- 保持fixed attachment
|
||||
|
||||
2. **调整遮罩平衡**
|
||||
- 亮色:0.9 → 1 渐变
|
||||
- 深色:0.88-0.92 深绿遮罩
|
||||
|
||||
### Phase 5: 细节完善
|
||||
1. **修复hover跳动**
|
||||
- 添加transparent初始border
|
||||
- 使用box-shadow增强效果
|
||||
|
||||
2. **优化视觉层次**
|
||||
- 标题渐变条宽度(80px → 180px)
|
||||
- 调整阴影系统
|
||||
- 完善过渡动画
|
||||
|
||||
### Phase 6: 测试验证
|
||||
1. 切换主题测试
|
||||
2. 检查所有交互状态
|
||||
3. 验证响应式布局
|
||||
4. 确认背景图片显示
|
||||
|
||||
## 四、常见问题解决
|
||||
|
||||
### 问题1: 深色主题部分元素仍显示白色
|
||||
**原因:** 硬编码rgba颜色值
|
||||
**解决:** 全局搜索并替换为CSS变量
|
||||
|
||||
### 问题2: Hover时元素跳动
|
||||
**原因:** 初始无border,hover时添加border
|
||||
**解决:** 初始设置transparent border
|
||||
|
||||
### 问题3: 背景图片不可见
|
||||
**原因:** 遮罩层透明度过高
|
||||
**解决:** 调整gradient透明度值
|
||||
|
||||
### 问题4: 深色主题不是默认
|
||||
**原因:** JS逻辑仅检查'dark'值
|
||||
**解决:** 添加 `|| savedTheme === null` 条件
|
||||
|
||||
## 五、可复用组件模板
|
||||
|
||||
### 1. 带背景的Section
|
||||
```css
|
||||
.section:nth-child(n) {
|
||||
background-image:
|
||||
linear-gradient(渐变方向, 起始色, 结束色),
|
||||
url('背景图片');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 响应式卡片
|
||||
```css
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 统计数据组件
|
||||
```css
|
||||
.stat-item {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid transparent;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
.stat-item:hover {
|
||||
background: var(--hover-bg);
|
||||
border-color: var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
```
|
||||
|
||||
## 六、命名规范
|
||||
|
||||
### CSS类名
|
||||
- 容器:`.section`, `.container`, `.wrapper`
|
||||
- 组件:`.card`, `.stat-item`, `.nav-item`
|
||||
- 状态:`.active`, `.dark-theme`, `.loaded`
|
||||
|
||||
### CSS变量
|
||||
- 背景:`--bg-*`
|
||||
- 颜色:`--primary-*`, `--accent-*`
|
||||
- 文字:`--text-*`
|
||||
- 间距:`--spacing-*`
|
||||
- 其他:`--shadow-*`, `--radius-*`, `--transition-*`
|
||||
|
||||
## 七、性能优化建议
|
||||
|
||||
1. **图片优化**
|
||||
- 使用Unsplash的优化参数(w=1920&q=80)
|
||||
- fixed attachment提升视觉效果
|
||||
|
||||
2. **CSS优化**
|
||||
- 使用CSS变量减少重复
|
||||
- backdrop-filter谨慎使用(性能消耗)
|
||||
|
||||
3. **JS优化**
|
||||
- localStorage缓存用户偏好
|
||||
- 主题切换避免重排
|
||||
|
||||
## 八、适配其他订单班的要点
|
||||
|
||||
1. **颜色主题调整**
|
||||
- 根据行业特点选择主色调
|
||||
- 保持深色主题的深度感
|
||||
|
||||
2. **图片选择**
|
||||
- 选择与行业相关的背景图
|
||||
- 保持图片风格一致性
|
||||
|
||||
3. **内容结构**
|
||||
- 保持统一的section划分
|
||||
- 复用组件结构
|
||||
|
||||
此规范可作为制作其他订单班网站的标准模板。
|
||||
14
CLAUDE.md
@@ -560,4 +560,16 @@ IMPORTANT RULES:
|
||||
- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
|
||||
- **generateTheme**: Generate a theme for the design
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
- 任务:修改图片名称以及markdown文档引用
|
||||
|
||||
oder="化工"
|
||||
|
||||
- 查看记忆,利用之前处理的方式处理
|
||||
|
||||
处理文件:
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/{oder}/notion文稿/
|
||||
|
||||
举例:
|
||||

|
||||

|
||||
|
Before Width: | Height: | Size: 328 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 367 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 453 KiB |
|
Before Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 926 KiB |
|
Before Width: | Height: | Size: 245 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg
Executable file
|
After Width: | Height: | Size: 592 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg
Executable file
|
After Width: | Height: | Size: 492 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/外观热力图(颗粒划痕腐蚀).jpg
Executable file
|
After Width: | Height: | Size: 582 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg
Executable file
|
After Width: | Height: | Size: 441 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg
Executable file
|
After Width: | Height: | Size: 923 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg
Executable file
|
After Width: | Height: | Size: 861 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg
Executable file
|
After Width: | Height: | Size: 368 KiB |
BIN
data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg
Executable file
|
After Width: | Height: | Size: 436 KiB |
20
data/订单班文档资料/化工/notion文稿/rename_images.sh
Executable file
@@ -0,0 +1,20 @@
|
||||
#!/bin/bash
|
||||
# 化工订单班图片重命名脚本
|
||||
cd "$(dirname "$0")/image"
|
||||
|
||||
# 根据核心原则:文件名必须与markdown文档中的alt text完全一致
|
||||
# 将现有文件名重命名为对应的alt text
|
||||
|
||||
# 重命名文件以匹配alt text
|
||||
mv "一、项目概述-(一)检测背景主图.jpg" "检测背景主图.jpg"
|
||||
mv "二、检测范围与判定标准-(一)检测对象与检测项目.jpg" "硅晶圆检测项目.jpg"
|
||||
mv "三、检测流程与方法主图.jpg" "光学镜头检测硅晶圆示意图.jpg"
|
||||
mv "(三)AI输出内容-1.外观热力图(颗粒划痕腐蚀).jpg" "外观热力图(颗粒划痕腐蚀).jpg"
|
||||
mv "(三)AI输出内容-2.厚度分布图.jpg" "厚度分布图.jpg"
|
||||
mv "(三)AI输出内容-3.电学对比图.jpg" "电学对比图.jpg"
|
||||
mv "(三)AI输出内容-4.成分抽检卡片.jpg" "成分抽检卡片.jpg"
|
||||
mv "四、检测结果主图.jpg" "检测结果主图.jpg"
|
||||
|
||||
echo "✓ 化工订单班图片重命名完成!"
|
||||
echo " - 重命名了8个文件"
|
||||
echo " - 所有文件名现在与markdown中的alt text完全一致"
|
||||
|
Before Width: | Height: | Size: 415 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg
Executable file
|
After Width: | Height: | Size: 243 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/地表水环境质量标准示意图.jpg
Executable file
|
After Width: | Height: | Size: 278 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/地表水监测技术规范示意图.jpg
Executable file
|
After Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/工业企业水污染物排放标准截图.jpg
Executable file
|
After Width: | Height: | Size: 267 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/数据存档图标.jpg
Executable file
|
After Width: | Height: | Size: 2.0 MiB |
BIN
data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg
Executable file
|
After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 954 KiB After Width: | Height: | Size: 954 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/有机物示意图.jpg
Executable file
|
After Width: | Height: | Size: 823 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/检测仪器.jpg
Executable file
|
After Width: | Height: | Size: 370 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/水污染防治法截图.jpg
Executable file
|
After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 593 KiB After Width: | Height: | Size: 593 KiB |
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
BIN
data/订单班文档资料/环保/notion文稿/image/污水综合排放标准截图.jpg
Executable file
|
After Width: | Height: | Size: 284 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/现场数据采集记录.jpg
Executable file
|
After Width: | Height: | Size: 409 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg
Executable file
|
After Width: | Height: | Size: 474 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/生物指标示意图.jpg
Executable file
|
After Width: | Height: | Size: 215 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/营养盐示意图.jpg
Executable file
|
After Width: | Height: | Size: 350 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg
Executable file
|
After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 290 KiB After Width: | Height: | Size: 290 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/采样表图标.jpg
Executable file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
data/订单班文档资料/环保/notion文稿/image/重金属示意图.jpg
Executable file
|
After Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/长江航海图片.jpg
Executable file
|
After Width: | Height: | Size: 522 KiB |
BIN
data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg
Executable file
|
After Width: | Height: | Size: 1.0 MiB |
41
data/订单班文档资料/环保/notion文稿/rename_images.sh
Executable file
@@ -0,0 +1,41 @@
|
||||
#!/bin/bash
|
||||
# 环保订单班图片重命名脚本
|
||||
cd "$(dirname "$0")/image"
|
||||
|
||||
# 重命名通用名称图片
|
||||
mv "image.jpg" "中华人民共和国环境保护法截图.jpg"
|
||||
mv "image 1.jpg" "水污染防治法截图.jpg"
|
||||
mv "image 2.jpg" "地表水环境质量标准示意图.jpg"
|
||||
mv "image 3.jpg" "地表水监测技术规范示意图.jpg"
|
||||
mv "image 4.jpg" "长江河流断面位置.jpg"
|
||||
mv "image 5.jpg" "采样流程.jpg"
|
||||
mv "image 6.jpg" "污水综合排放标准截图.jpg"
|
||||
mv "image 7.jpg" "工业企业水污染物排放标准截图.jpg"
|
||||
mv "image 8.jpg" "采样表图标.jpg"
|
||||
mv "image 9.jpg" "数据审核与验证图标.jpg"
|
||||
mv "image 10.jpg" "数据存档图标.jpg"
|
||||
mv "image 11.jpg" "文件输出与报告图标.jpg"
|
||||
|
||||
# 重命名hash名称图片
|
||||
mv "65351297-3c82-49ea-a8c7-03944a3af294.jpg" "长江采样布点图.jpg"
|
||||
mv "22e9ff50b34458b33716e8f8bb5d14c9.jpg" "垂线分布图.jpg"
|
||||
mv "b2c6fab4-0011-438d-b640-bb3e25fdb04b.jpg" "水流分布示意图1.jpg"
|
||||
mv "1c8f6fb3-001c-4ccf-9a9d-8181953149b1.jpg" "水流分布示意图2.jpg"
|
||||
mv "4cf305f9-5658-47f7-9f44-88f89da98d76.jpg" "有机物示意图.jpg"
|
||||
mv "6572681c-2ed0-4f02-89a6-50331eeb2dbf.jpg" "采样仪器设备.jpg"
|
||||
|
||||
# 重命名Whisk系列图片
|
||||
mv "Whisk_3bc3f132f453ff1a1e3492de3faca12fdr.jpg" "检测仪器.jpg"
|
||||
mv "Whisk_c52eaa001f7419490e741a290841f70cdr.jpg" "现场采样操作工作照.jpg"
|
||||
mv "Whisk_4124216daf3b4c6ba7143e0dae2015cbdr.jpg" "质量控制措施.jpg"
|
||||
mv "Whisk_c389efaeee4b0559fed49cd8c5add4d7dr.jpg" "现场数据采集记录.jpg"
|
||||
|
||||
# 以下文件已经是中文名,无需重命名
|
||||
# 长江图片.jpg
|
||||
# 营养盐.jpg
|
||||
# 重金属.jpg
|
||||
# 生物指标.jpg
|
||||
|
||||
echo "✓ 环保订单班图片重命名完成!"
|
||||
echo " - 重命名了22个文件"
|
||||
echo " - 4个文件保持原中文名"
|
||||
BIN
data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg
Executable file
|
After Width: | Height: | Size: 527 KiB |
BIN
data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg
Executable file
|
After Width: | Height: | Size: 59 KiB |
BIN
data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg
Executable file
|
After Width: | Height: | Size: 388 KiB |
BIN
data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg
Executable file
|
After Width: | Height: | Size: 317 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |