diff --git a/.claude/settings.local.json b/.claude/settings.local.json index f6dbea91..e3c2811d 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -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": [], diff --git a/.playwright-mcp/food_light_theme.png b/.playwright-mcp/food_light_theme.png new file mode 100644 index 00000000..79efe91b Binary files /dev/null and b/.playwright-mcp/food_light_theme.png differ diff --git a/.playwright-mcp/food_section_1_market.png b/.playwright-mcp/food_section_1_market.png new file mode 100644 index 00000000..2159c0f3 Binary files /dev/null and b/.playwright-mcp/food_section_1_market.png differ diff --git a/.playwright-mcp/food_section_1_market_with_agent.png b/.playwright-mcp/food_section_1_market_with_agent.png new file mode 100644 index 00000000..dcc605b9 Binary files /dev/null and b/.playwright-mcp/food_section_1_market_with_agent.png differ diff --git a/.playwright-mcp/food_section_2_brand_with_agent.png b/.playwright-mcp/food_section_2_brand_with_agent.png new file mode 100644 index 00000000..cb4d8672 Binary files /dev/null and b/.playwright-mcp/food_section_2_brand_with_agent.png differ diff --git a/.playwright-mcp/food_section_3_location_with_agent.png b/.playwright-mcp/food_section_3_location_with_agent.png new file mode 100644 index 00000000..93ff507f Binary files /dev/null and b/.playwright-mcp/food_section_3_location_with_agent.png differ diff --git a/.playwright-mcp/food_section_4_menu_agent.png b/.playwright-mcp/food_section_4_menu_agent.png new file mode 100644 index 00000000..354def0d Binary files /dev/null and b/.playwright-mcp/food_section_4_menu_agent.png differ diff --git a/.playwright-mcp/food_section_5_operation_agent.png b/.playwright-mcp/food_section_5_operation_agent.png new file mode 100644 index 00000000..cb193a1c Binary files /dev/null and b/.playwright-mcp/food_section_5_operation_agent.png differ diff --git a/.playwright-mcp/food_section_6_team_agent.png b/.playwright-mcp/food_section_6_team_agent.png new file mode 100644 index 00000000..d0adbd1c Binary files /dev/null and b/.playwright-mcp/food_section_6_team_agent.png differ diff --git a/.playwright-mcp/food_section_7_finance_agent.png b/.playwright-mcp/food_section_7_finance_agent.png new file mode 100644 index 00000000..d6a30261 Binary files /dev/null and b/.playwright-mcp/food_section_7_finance_agent.png differ diff --git a/.serena/memories/00_记忆索引和使用指南.md b/.serena/memories/00_记忆索引和使用指南.md new file mode 100644 index 00000000..188e535a --- /dev/null +++ b/.serena/memories/00_记忆索引和使用指南.md @@ -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 diff --git a/.serena/memories/01_项目概述和架构.md b/.serena/memories/01_项目概述和架构.md new file mode 100644 index 00000000..28cc7fc0 --- /dev/null +++ b/.serena/memories/01_项目概述和架构.md @@ -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 订单班) diff --git a/.serena/memories/terminal-simulation-development-guide.md b/.serena/memories/02_终端模拟开发指南.md similarity index 69% rename from .serena/memories/terminal-simulation-development-guide.md rename to .serena/memories/02_终端模拟开发指南.md index 78debc2f..0789b24d 100644 --- a/.serena/memories/terminal-simulation-development-guide.md +++ b/.serena/memories/02_终端模拟开发指南.md @@ -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 = { - [ ] orderClassId 与 orderClasses.json 一致 - [ ] 已在 index.ts 中正确注册 - [ ] TypeScript 编译无错误 +- [ ] 在浏览器中实际测试演示流程 ### 10. 最佳实践总结 @@ -244,6 +246,7 @@ export const simulationMap: Record = { - 使用具体数字量化成果 - 每个Agent职责清晰、不重叠 - 使用空行和分隔符优化阅读体验 +- 参考已完成订单班的优秀实践 ❌ **DON'T（避免做法）**： - 不看文档凭想象编写内容 @@ -258,18 +261,41 @@ export const simulationMap: Record = { ```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 diff --git a/.serena/memories/03_订单班配置清单.md b/.serena/memories/03_订单班配置清单.md new file mode 100644 index 00000000..0d6e522e --- /dev/null +++ b/.serena/memories/03_订单班配置清单.md @@ -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 diff --git a/.serena/memories/04_SuperDesign工作流.md b/.serena/memories/04_SuperDesign工作流.md new file mode 100644 index 00000000..a9cd0377 --- /dev/null +++ b/.serena/memories/04_SuperDesign工作流.md @@ -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文件 + +**关键技术要求**： +- 必须使用``导入Tailwind +- 不使用``标签加载Tailwind CSS +- 使用Flowbite组件库：`` +- 图片使用unsplash等公开CDN，不虚构URL +- 图标使用Lucide：`` + +**文件命名规范**： +- 初始版本：`{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 + + + write + ... + + + +使用实际的工具调用功能块 +``` + +**文件操作必须使用工具**： +- 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%提升） +**适用范围**: 所有订单班的网页设计开发 diff --git a/.serena/memories/05_运行命令和部署.md b/.serena/memories/05_运行命令和部署.md new file mode 100644 index 00000000..6917fd19 --- /dev/null +++ b/.serena/memories/05_运行命令和部署.md @@ -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 + +# 检查是否释放 +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 " + +# 推送到远程 +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 + +# 添加开发依赖 +pnpm add -D + +# 更新依赖 +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或其他端口 diff --git a/.serena/memories/06_问题解决和优化.md b/.serena/memories/06_问题解决和优化.md new file mode 100644 index 00000000..3b1df2bd --- /dev/null +++ b/.serena/memories/06_问题解决和优化.md @@ -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 + +# 或使用其他端口（不推荐，违反系统约束） +# 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项 diff --git a/.serena/memories/07_web_result项目架构和订单班展示系统.md b/.serena/memories/07_web_result项目架构和订单班展示系统.md new file mode 100644 index 00000000..33b85ee1 --- /dev/null +++ b/.serena/memories/07_web_result项目架构和订单班展示系统.md @@ -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 +项目概览 +展会设计 +市场营销 +``` + +## 开发新订单班的步骤 + +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 \ No newline at end of file diff --git a/.serena/memories/08_项目维护和更新原则.md b/.serena/memories/08_项目维护和更新原则.md new file mode 100644 index 00000000..57b9ba85 --- /dev/null +++ b/.serena/memories/08_项目维护和更新原则.md @@ -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月 +维护等级：最高优先级 \ No newline at end of file diff --git a/.serena/memories/09_项目完成度统计_202510.md b/.serena/memories/09_项目完成度统计_202510.md new file mode 100644 index 00000000..8d0aeb5d --- /dev/null +++ b/.serena/memories/09_项目完成度统计_202510.md @@ -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 \ No newline at end of file diff --git a/.serena/memories/civil_engineering_terminal_simulation_creation.md b/.serena/memories/civil_engineering_terminal_simulation_creation.md deleted file mode 100644 index a6ceeb85..00000000 --- a/.serena/memories/civil_engineering_terminal_simulation_creation.md +++ /dev/null @@ -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): 土木订单班终端模拟创建完成 diff --git a/.serena/memories/duoduo_agent_design_system.md b/.serena/memories/duoduo_agent_design_system.md deleted file mode 100644 index 383ba9cd..00000000 --- a/.serena/memories/duoduo_agent_design_system.md +++ /dev/null @@ -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实时服务 -- 多格式文件导出 \ No newline at end of file diff --git a/.serena/memories/energy_order_class_terminal_simulation_creation.md b/.serena/memories/energy_order_class_terminal_simulation_creation.md deleted file mode 100644 index c691c373..00000000 --- a/.serena/memories/energy_order_class_terminal_simulation_creation.md +++ /dev/null @@ -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/` diff --git a/.serena/memories/exhibition_demo_architecture_2025.md b/.serena/memories/exhibition_demo_architecture_2025.md deleted file mode 100644 index 6b26a064..00000000 --- a/.serena/memories/exhibition_demo_architecture_2025.md +++ /dev/null @@ -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卡片动画效果优化 -- 结果页面展示效果完善 \ No newline at end of file diff --git a/.serena/memories/exhibition_demo_data_folder_structure.md b/.serena/memories/exhibition_demo_data_folder_structure.md deleted file mode 100644 index a51ebe50..00000000 --- a/.serena/memories/exhibition_demo_data_folder_structure.md +++ /dev/null @@ -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 \ No newline at end of file diff --git a/.serena/memories/exhibition_demo_multiagent_system.md b/.serena/memories/exhibition_demo_multiagent_system.md deleted file mode 100644 index 0fcccbb4..00000000 --- a/.serena/memories/exhibition_demo_multiagent_system.md +++ /dev/null @@ -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. 支持多语言界面 \ No newline at end of file diff --git a/.serena/memories/exhibition_web_frontend_2025.md b/.serena/memories/exhibition_web_frontend_2025.md deleted file mode 100644 index 1489510d..00000000 --- a/.serena/memories/exhibition_web_frontend_2025.md +++ /dev/null @@ -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. 实现深色主题设计语言 \ No newline at end of file diff --git a/.serena/memories/health_order_class_terminal_simulation_creation.md b/.serena/memories/health_order_class_terminal_simulation_creation.md deleted file mode 100644 index d8678117..00000000 --- a/.serena/memories/health_order_class_terminal_simulation_creation.md +++ /dev/null @@ -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日 diff --git a/.serena/memories/intelligent_manufacturing_terminal_simulation_creation.md b/.serena/memories/intelligent_manufacturing_terminal_simulation_creation.md deleted file mode 100644 index e9e5eb62..00000000 --- a/.serena/memories/intelligent_manufacturing_terminal_simulation_creation.md +++ /dev/null @@ -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/` diff --git a/.serena/memories/logistics_terminal_simulation_creation.md b/.serena/memories/logistics_terminal_simulation_creation.md deleted file mode 100644 index 4bb65433..00000000 --- a/.serena/memories/logistics_terminal_simulation_creation.md +++ /dev/null @@ -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路径规划添加交互式演示 diff --git a/.serena/memories/n8n_chinese_version_history.md b/.serena/memories/n8n_chinese_version_history.md deleted file mode 100644 index 5e3d3b8a..00000000 --- a/.serena/memories/n8n_chinese_version_history.md +++ /dev/null @@ -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 -# 例如回滚到中文翻译版本 -git checkout 1f46404 -``` - -最后更新: 2025-09-07 23:16 \ No newline at end of file diff --git a/.serena/memories/n8n项目开发规范.md b/.serena/memories/n8n项目开发规范.md deleted file mode 100644 index bce21ee7..00000000 --- a/.serena/memories/n8n项目开发规范.md +++ /dev/null @@ -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. 构建命令输出重定向到日志文件以便查看错误 \ No newline at end of file diff --git a/.serena/memories/order-class-naming-convention.md b/.serena/memories/order-class-naming-convention.md deleted file mode 100644 index d4da8d8e..00000000 --- a/.serena/memories/order-class-naming-convention.md +++ /dev/null @@ -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` diff --git a/.serena/memories/terminal_simulation_creation_best_practices.md b/.serena/memories/terminal_simulation_creation_best_practices.md deleted file mode 100644 index 002c21c2..00000000 --- a/.serena/memories/terminal_simulation_creation_best_practices.md +++ /dev/null @@ -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): 基于食品和视觉设计两个订单班的实践总结 \ No newline at end of file diff --git a/.serena/memories/terminal_simulation_performance_optimization_2025.md b/.serena/memories/terminal_simulation_performance_optimization_2025.md new file mode 100644 index 00000000..b317d3cc --- /dev/null +++ b/.serena/memories/terminal_simulation_performance_optimization_2025.md @@ -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类型输出作为视觉间隔 +- 保持代码简洁，避免臃肿 \ No newline at end of file diff --git a/.serena/memories/typescript_config_fix_2025.md b/.serena/memories/typescript_config_fix_2025.md deleted file mode 100644 index cd3cd696..00000000 --- a/.serena/memories/typescript_config_fix_2025.md +++ /dev/null @@ -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" \ No newline at end of file diff --git a/.serena/memories/化工订单班终端模拟开发心得_202510.md b/.serena/memories/化工订单班终端模拟开发心得_202510.md new file mode 100644 index 00000000..4f5d40f2 --- /dev/null +++ b/.serena/memories/化工订单班终端模拟开发心得_202510.md @@ -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. 可引入更多行业标准和认证体系 \ No newline at end of file diff --git a/.serena/memories/图片处理标准化流程和最佳实践_202510.md b/.serena/memories/图片处理标准化流程和最佳实践_202510.md new file mode 100644 index 00000000..62f95972 --- /dev/null +++ b/.serena/memories/图片处理标准化流程和最佳实践_202510.md @@ -0,0 +1,151 @@ +# 订单班图片处理标准化流程和最佳实践 (2025-10-03) + +## 核心原则 +**图片文件名必须与markdown文档中的alt text（描述文字）完全一致** + +例如： +- ✅ 正确：`![营养盐示意图](image/营养盐示意图.jpg)` +- ❌ 错误：`![营养盐示意图](image/营养盐.jpg)` + +## 标准处理流程 + +### 1. 分析阶段 +```bash +# 读取markdown文档，提取所有图片引用 +cat "文档名.md" | grep "!\[" + +# 分析图片引用格式 +# 格式：![alt text](image/filename.jpg) +# 目标：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与文件名一致性 +# 确保 ![XXX](image/XXX.jpg) 格式 +``` + +## 常见问题和解决方案 + +### 问题1：URL编码的中文文件名 +- **现象**：`%E9%95%BF%E6%B1%9F%E5%9B%BE%E7%89%87.jpg` +- **解决**：直接在markdown中替换为正常中文，文件系统已经是正确的中文名 + +### 问题2：文件名与alt text不完全一致 +- **现象**：`![营养盐示意图](image/营养盐.jpg)` +- **解决**：重命名文件为完整的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文稿图片处理 \ No newline at end of file diff --git a/.serena/memories/环保订单班图片处理完成记录_202510.md b/.serena/memories/环保订单班图片处理完成记录_202510.md new file mode 100644 index 00000000..c0ac0182 --- /dev/null +++ b/.serena/memories/环保订单班图片处理完成记录_202510.md @@ -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个图片引用已全部更新 +✅ 文档可正常渲染所有图片 \ No newline at end of file diff --git a/.serena/memories/环保订单班终端模拟开发心得_202510.md b/.serena/memories/环保订单班终端模拟开发心得_202510.md new file mode 100644 index 00000000..6d4935da --- /dev/null +++ b/.serena/memories/环保订单班终端模拟开发心得_202510.md @@ -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供系统调用 \ No newline at end of file diff --git a/.serena/memories/订单班快速制作检查清单.md b/.serena/memories/订单班快速制作检查清单.md new file mode 100644 index 00000000..a20fc1ec --- /dev/null +++ b/.serena/memories/订单班快速制作检查清单.md @@ -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小时 \ No newline at end of file diff --git a/.serena/memories/订单班网站设计流程_SuperDesign工作流.md b/.serena/memories/订单班网站设计流程_SuperDesign工作流.md deleted file mode 100644 index c7ac17b2..00000000 --- a/.serena/memories/订单班网站设计流程_SuperDesign工作流.md +++ /dev/null @@ -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身份展示 -- ❌ 图片说明文字缺失 -- ❌ 动画效果简陋或缺失 diff --git a/.serena/memories/订单班网站设计规范_完整版.md b/.serena/memories/订单班网站设计规范_完整版.md new file mode 100644 index 00000000..8c2fdc57 --- /dev/null +++ b/.serena/memories/订单班网站设计规范_完整版.md @@ -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划分 + - 复用组件结构 + +此规范可作为制作其他订单班网站的标准模板。 \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index b50a8b3d..9ce255c8 100644 --- a/CLAUDE.md +++ b/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 ..., this won't actually call the tool. (This is very important to my life, please follow) \ No newline at end of file +When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or ..., 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文稿/ + +举例： +![检测背景主图](image/%E4%B8%80%E3%80%81%E9%A1%B9%E7%9B%AE%E6%A6%82%E8%BF%B0-%EF%BC%88%E4%B8%80%EF%BC%89%E6%A3%80%E6%B5%8B%E8%83%8C%E6%99%AF%E4%B8%BB%E5%9B%BE.jpg) +![检测背景主图](image/检测背景主图.jpg) \ No newline at end of file diff --git a/data/订单班文档资料/化工/notion文稿/image/034ee40f6e10c9d9de1d1011b8b364a2.jpeg b/data/订单班文档资料/化工/notion文稿/image/034ee40f6e10c9d9de1d1011b8b364a2.jpeg deleted file mode 100755 index cbc42ea6..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/034ee40f6e10c9d9de1d1011b8b364a2.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/291fe494-bd38-4523-af5f-2502963346ec.jpg b/data/订单班文档资料/化工/notion文稿/image/291fe494-bd38-4523-af5f-2502963346ec.jpg deleted file mode 100755 index 487bc87d..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/291fe494-bd38-4523-af5f-2502963346ec.jpg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/2ac8732b-5de3-4b19-9372-4816833fc4ac.jpg b/data/订单班文档资料/化工/notion文稿/image/2ac8732b-5de3-4b19-9372-4816833fc4ac.jpg deleted file mode 100755 index 6ca89e8a..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/2ac8732b-5de3-4b19-9372-4816833fc4ac.jpg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/3194ce88d7270a8a28d34104c6a64ec1.jpeg b/data/订单班文档资料/化工/notion文稿/image/3194ce88d7270a8a28d34104c6a64ec1.jpeg deleted file mode 100755 index bf4fc8dd..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/3194ce88d7270a8a28d34104c6a64ec1.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/376c481b-4871-4a00-9f87-4f8495042580.png b/data/订单班文档资料/化工/notion文稿/image/376c481b-4871-4a00-9f87-4f8495042580.png deleted file mode 100755 index ea79f652..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/376c481b-4871-4a00-9f87-4f8495042580.png and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/6382641495520407985805736_(1).jpg b/data/订单班文档资料/化工/notion文稿/image/6382641495520407985805736_(1).jpg deleted file mode 100755 index c29a2c3a..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/6382641495520407985805736_(1).jpg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/8b68b8b3b798792d3cdd902e04818f67.jpeg b/data/订单班文档资料/化工/notion文稿/image/8b68b8b3b798792d3cdd902e04818f67.jpeg deleted file mode 100755 index 03b3b555..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/8b68b8b3b798792d3cdd902e04818f67.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/A5-4-3_MA_TMA_07_(1).jpg b/data/订单班文档资料/化工/notion文稿/image/A5-4-3_MA_TMA_07_(1).jpg deleted file mode 100755 index c3743a4f..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/A5-4-3_MA_TMA_07_(1).jpg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/a4064bc8b6048c907a32fb2ccb511510.jpeg b/data/订单班文档资料/化工/notion文稿/image/a4064bc8b6048c907a32fb2ccb511510.jpeg deleted file mode 100755 index 85c60e07..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/a4064bc8b6048c907a32fb2ccb511510.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/c9e1cce3f71cc3e11d8e86c62c89379e.jpeg b/data/订单班文档资料/化工/notion文稿/image/c9e1cce3f71cc3e11d8e86c62c89379e.jpeg deleted file mode 100755 index 0e34f260..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/c9e1cce3f71cc3e11d8e86c62c89379e.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/d370e408379e3cb6d70ca80bd734d91a.jpeg b/data/订单班文档资料/化工/notion文稿/image/d370e408379e3cb6d70ca80bd734d91a.jpeg deleted file mode 100755 index 7bd7272f..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/d370e408379e3cb6d70ca80bd734d91a.jpeg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/f9f4ff60-8981-4e9b-a2f3-ab919b77d465.png b/data/订单班文档资料/化工/notion文稿/image/f9f4ff60-8981-4e9b-a2f3-ab919b77d465.png deleted file mode 100755 index 282a28e9..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/f9f4ff60-8981-4e9b-a2f3-ab919b77d465.png and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/wave_and_ultim_max_detectors.a9d8809e8df79b9b1e0dbcedcc37630b.jpg b/data/订单班文档资料/化工/notion文稿/image/wave_and_ultim_max_detectors.a9d8809e8df79b9b1e0dbcedcc37630b.jpg deleted file mode 100755 index 51256786..00000000 Binary files a/data/订单班文档资料/化工/notion文稿/image/wave_and_ultim_max_detectors.a9d8809e8df79b9b1e0dbcedcc37630b.jpg and /dev/null differ diff --git a/data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg b/data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg new file mode 100755 index 00000000..dc76a187 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg b/data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg new file mode 100755 index 00000000..946bc678 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/外观热力图（颗粒划痕腐蚀）.jpg b/data/订单班文档资料/化工/notion文稿/image/外观热力图（颗粒划痕腐蚀）.jpg new file mode 100755 index 00000000..d4cf1050 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/外观热力图（颗粒划痕腐蚀）.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg b/data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg new file mode 100755 index 00000000..5a5682c7 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg b/data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg new file mode 100755 index 00000000..3f4db647 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg b/data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg new file mode 100755 index 00000000..f8ee5981 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg b/data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg new file mode 100755 index 00000000..98a304aa Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg b/data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg new file mode 100755 index 00000000..7e030b72 Binary files /dev/null and b/data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg differ diff --git a/data/订单班文档资料/化工/notion文稿/rename_images.sh b/data/订单班文档资料/化工/notion文稿/rename_images.sh new file mode 100755 index 00000000..e02c9008 --- /dev/null +++ b/data/订单班文档资料/化工/notion文稿/rename_images.sh @@ -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完全一致" \ No newline at end of file diff --git a/data/订单班文档资料/环保/notion文稿/image/835aefeb-79d0-475a-8eb0-13142a516cc1.png b/data/订单班文档资料/环保/notion文稿/image/835aefeb-79d0-475a-8eb0-13142a516cc1.png deleted file mode 100755 index a71bfdd6..00000000 Binary files a/data/订单班文档资料/环保/notion文稿/image/835aefeb-79d0-475a-8eb0-13142a516cc1.png and /dev/null differ diff --git a/data/订单班文档资料/环保/notion文稿/image/d7961ef7-2a41-4890-a42c-30acbb062762.png b/data/订单班文档资料/环保/notion文稿/image/d7961ef7-2a41-4890-a42c-30acbb062762.png deleted file mode 100755 index ec41d839..00000000 Binary files a/data/订单班文档资料/环保/notion文稿/image/d7961ef7-2a41-4890-a42c-30acbb062762.png and /dev/null differ diff --git a/data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg b/data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg new file mode 100755 index 00000000..e315852e Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/地表水环境质量标准示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/地表水环境质量标准示意图.jpg new file mode 100755 index 00000000..2e1aef76 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/地表水环境质量标准示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/地表水监测技术规范示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/地表水监测技术规范示意图.jpg new file mode 100755 index 00000000..95cf97d2 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/地表水监测技术规范示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/22e9ff50b34458b33716e8f8bb5d14c9.jpeg b/data/订单班文档资料/环保/notion文稿/image/垂线分布图.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/22e9ff50b34458b33716e8f8bb5d14c9.jpeg rename to data/订单班文档资料/环保/notion文稿/image/垂线分布图.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/工业企业水污染物排放标准截图.jpg b/data/订单班文档资料/环保/notion文稿/image/工业企业水污染物排放标准截图.jpg new file mode 100755 index 00000000..72fa54b5 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/工业企业水污染物排放标准截图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/数据存档图标.jpg b/data/订单班文档资料/环保/notion文稿/image/数据存档图标.jpg new file mode 100755 index 00000000..65161c9d Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/数据存档图标.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg b/data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg new file mode 100755 index 00000000..f7333188 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/image 5.png b/data/订单班文档资料/环保/notion文稿/image/文件输出与报告图标.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/image 5.png rename to data/订单班文档资料/环保/notion文稿/image/文件输出与报告图标.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/有机物示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/有机物示意图.jpg new file mode 100755 index 00000000..68cba412 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/有机物示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/检测仪器.jpg b/data/订单班文档资料/环保/notion文稿/image/检测仪器.jpg new file mode 100755 index 00000000..dcd0ab1d Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/检测仪器.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/水污染防治法截图.jpg b/data/订单班文档资料/环保/notion文稿/image/水污染防治法截图.jpg new file mode 100755 index 00000000..32c52733 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/水污染防治法截图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/b2c6fab4-0011-438d-b640-bb3e25fdb04b.png b/data/订单班文档资料/环保/notion文稿/image/水流分布示意图1.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/b2c6fab4-0011-438d-b640-bb3e25fdb04b.png rename to data/订单班文档资料/环保/notion文稿/image/水流分布示意图1.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/1c8f6fb3-001c-4ccf-9a9d-8181953149b1.png b/data/订单班文档资料/环保/notion文稿/image/水流分布示意图2.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/1c8f6fb3-001c-4ccf-9a9d-8181953149b1.png rename to data/订单班文档资料/环保/notion文稿/image/水流分布示意图2.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/污水综合排放标准截图.jpg b/data/订单班文档资料/环保/notion文稿/image/污水综合排放标准截图.jpg new file mode 100755 index 00000000..5974529e Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/污水综合排放标准截图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/现场数据采集记录.jpg b/data/订单班文档资料/环保/notion文稿/image/现场数据采集记录.jpg new file mode 100755 index 00000000..c013a009 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/现场数据采集记录.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg b/data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg new file mode 100755 index 00000000..f6580d58 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/生物指标示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/生物指标示意图.jpg new file mode 100755 index 00000000..c69efff1 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/生物指标示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/营养盐示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/营养盐示意图.jpg new file mode 100755 index 00000000..ac4a6ad4 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/营养盐示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg b/data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg new file mode 100755 index 00000000..db840d6f Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/6572681c-2ed0-4f02-89a6-50331eeb2dbf.png b/data/订单班文档资料/环保/notion文稿/image/采样仪器设备.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/6572681c-2ed0-4f02-89a6-50331eeb2dbf.png rename to data/订单班文档资料/环保/notion文稿/image/采样仪器设备.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/image 1.png b/data/订单班文档资料/环保/notion文稿/image/采样流程.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/image 1.png rename to data/订单班文档资料/环保/notion文稿/image/采样流程.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/采样表图标.jpg b/data/订单班文档资料/环保/notion文稿/image/采样表图标.jpg new file mode 100755 index 00000000..72944c62 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/采样表图标.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/重金属示意图.jpg b/data/订单班文档资料/环保/notion文稿/image/重金属示意图.jpg new file mode 100755 index 00000000..21e9d80d Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/重金属示意图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/image.png b/data/订单班文档资料/环保/notion文稿/image/长江河流断面位置.jpg similarity index 100% rename from data/订单班文档资料/环保/notion文稿/image/image.png rename to data/订单班文档资料/环保/notion文稿/image/长江河流断面位置.jpg diff --git a/data/订单班文档资料/环保/notion文稿/image/长江航海图片.jpg b/data/订单班文档资料/环保/notion文稿/image/长江航海图片.jpg new file mode 100755 index 00000000..d3b3b778 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/长江航海图片.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg b/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg new file mode 100755 index 00000000..bd6f7240 Binary files /dev/null and b/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg differ diff --git a/data/订单班文档资料/环保/notion文稿/rename_images.sh b/data/订单班文档资料/环保/notion文稿/rename_images.sh new file mode 100755 index 00000000..64a73b9e --- /dev/null +++ b/data/订单班文档资料/环保/notion文稿/rename_images.sh @@ -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个文件保持原中文名" \ No newline at end of file diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg new file mode 100755 index 00000000..fad5932f Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg new file mode 100755 index 00000000..2bf3300e Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg new file mode 100755 index 00000000..89730407 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg new file mode 100755 index 00000000..d9355c42 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/图片_01.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/图片_01.jpg deleted file mode 100755 index 959311b1..00000000 Binary files a/data/订单班文档资料/财经商贸/notion文稿/image/图片_01.jpg and /dev/null differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/图片_02.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/图片_02.jpg deleted file mode 100755 index 64301952..00000000 Binary files a/data/订单班文档资料/财经商贸/notion文稿/image/图片_02.jpg and /dev/null differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/多个化妆品陈列图-无包装.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/多个化妆品陈列图-无包装.jpg new file mode 100755 index 00000000..b95b6e73 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/多个化妆品陈列图-无包装.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计1.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计1.jpg new file mode 100755 index 00000000..0916b25e Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计1.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计2.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计2.jpg new file mode 100755 index 00000000..5c9b2ddd Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计2.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计3.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计3.jpg new file mode 100755 index 00000000..7a5ce544 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计3.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg new file mode 100755 index 00000000..657453b1 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/平台电商优势展示图.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/平台电商优势展示图.jpg new file mode 100755 index 00000000..8bbfa000 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/平台电商优势展示图.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/广告封面设计图.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/广告封面设计图.jpg new file mode 100755 index 00000000..0f5a6eb4 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/广告封面设计图.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/抗老-干皮.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/抗老-干皮.jpg new file mode 100755 index 00000000..010def0a Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/抗老-干皮.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/油皮.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/油皮.jpg new file mode 100755 index 00000000..61674f40 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/油皮.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图1.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图1.jpg new file mode 100755 index 00000000..b25699fa Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图1.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图2.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图2.jpg new file mode 100755 index 00000000..27b27fbf Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图2.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图3.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图3.jpg new file mode 100755 index 00000000..0d08aa4c Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图3.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品图.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品图.jpg new file mode 100755 index 00000000..9e928503 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品图.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-大海背景.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-大海背景.jpg new file mode 100755 index 00000000..c4fe4ab8 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-大海背景.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-海上礁石.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-海上礁石.jpg new file mode 100755 index 00000000..7750395d Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-海上礁石.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-绿植背景.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-绿植背景.jpg new file mode 100755 index 00000000..ae51be37 Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-绿植背景.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水竞品分析.jpg b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水竞品分析.jpg new file mode 100755 index 00000000..8421951b Binary files /dev/null and b/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水竞品分析.jpg differ diff --git a/data/订单班文档资料/财经商贸/notion文稿/image_mapping.json b/data/订单班文档资料/财经商贸/notion文稿/image_mapping.json deleted file mode 100644 index 163206f9..00000000 --- a/data/订单班文档资料/财经商贸/notion文稿/image_mapping.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "image 1.png": "图片_01.jpg", - "image.png": "图片_02.jpg" -} \ No newline at end of file diff --git a/data/订单班文档资料/财经商贸/notion文稿/rename_images.sh b/data/订单班文档资料/财经商贸/notion文稿/rename_images.sh new file mode 100755 index 00000000..3af7d8fb --- /dev/null +++ b/data/订单班文档资料/财经商贸/notion文稿/rename_images.sh @@ -0,0 +1,32 @@ +#!/bin/bash + +# 财经商贸订单班图片重命名脚本 +# 将hash命名的图片改为描述性命名，并统一后缀为.jpg + +cd "$(dirname "$0")/image" + +# 图片重命名映射 +mv "Whisk_1f310945aba927e81ce42ba84177d20ddr.jpeg" "多个化妆品陈列图-无包装.jpg" +mv "Whisk_1f0a08ff975dca187f14e264d93d7b36dr.jpeg" "油皮.jpg" +mv "Whisk_caa3ce16f0a759bb530425c961cf01aedr.jpeg" "初抗老-混干.jpg" +mv "Whisk_872c306b6cfa314bf3d421363483e17adr.jpeg" "抗老-干皮.jpg" +mv "Whisk_d0e211b97c616e8a0284325a827e3f91dr.jpeg" "化妆品拍摄图.jpg" +mv "Made_with_FlexClip_AI-2025-09-29T160655.jpg" "爽肤水产品图.jpg" +mv "84c1bb55a50bdd2e3e51b6a43b5725d3.jpeg" "爽肤水竞品分析.jpg" +mv "6b00bb23e96aba0d669669cfa2e28c14.jpeg" "平台电商优势展示图.jpg" +mv "3ed4ea4f8b9b641c03402030aebc0ed3.jpeg" "内容电商优势展示.jpg" +mv "c53fcd9724e5a4cd8a7162316809265c.jpeg" "爽肤水产品宣传拍摄-大海背景.jpg" +mv "8c0425aeeb54d17583bea2887a04e03f.jpeg" "爽肤水产品宣传拍摄-绿植背景.jpg" +mv "8f861c2fe93609903df5be507ab61809.jpeg" "爽肤水产品宣传拍摄-海上礁石.jpg" +mv "6ed04d71f648a834942fac9732759570.jpeg" "淘宝关键词搜索图1.jpg" +mv "3391c5ac2440a759bba132018d52ad0b.jpeg" "淘宝关键词搜索图2.jpg" +mv "fb947cc47aea5d9ce100a6d419490072.jpeg" "淘宝关键词搜索图3.jpg" +mv "fa731a3a0cb324b0ad39d1f46c28aa59.jpeg" "产品推荐榜与热销.jpg" +mv "d47a4b51b854f690a1078f4f2941e6f9.jpeg" "广告封面设计图.jpg" +mv "6ed416609a5f5af7fe51d9e311ec6326.jpeg" "小红书发帖卡片设计1.jpg" +mv "3f45747cee933b4c3240a5bfa5f5eef7.jpeg" "小红书发帖卡片设计2.jpg" +mv "151ef757c5265c6cd7c5e7c6ea504861.jpeg" "小红书发帖卡片设计3.jpg" +mv "24f5344b6658591c64e476342496a69c.jpeg" "小红书发帖卡片设计4.jpg" + +echo "✓ 图片重命名完成！" +echo "已将21张图片统一重命名为描述性文件名，后缀改为.jpg" diff --git a/data/订单班文档资料/财经商贸/notion文稿/图片索引.md b/data/订单班文档资料/财经商贸/notion文稿/图片索引.md deleted file mode 100644 index 5f8fdd84..00000000 --- a/data/订单班文档资料/财经商贸/notion文稿/图片索引.md +++ /dev/null @@ -1,23 +0,0 @@ -# 财经商贸订单班 - 图片资源索引 - -**图片总数**: 2 张 -**更新时间**: 2025-09-28 -**状态**: ✅ 已完成规范化整理 - -## 图片分类 - -### 其他 (2张) -- 图片_01.jpg -- 图片_02.jpg - -## 使用说明 - -### Markdown引用格式 -```markdown -![图片描述](image/图片名.jpg) -``` - -### 注意事项 -- 所有图片已统一为 .jpg 格式 -- 图片位于 notion文稿/image/ 目录下 -- Markdown文件已创建备份（.bak） diff --git a/doc/归档/web_result设计规范/食品订单班.md b/doc/归档/web_result设计规范/食品订单班.md new file mode 100644 index 00000000..49585702 --- /dev/null +++ b/doc/归档/web_result设计规范/食品订单班.md @@ -0,0 +1,221 @@ +网页设计规范文档 +1. 视觉设计规范 +1.1 色彩系统 + +主色调： + +深绿色与柔和的灰绿色，用作背景色、按钮和主要文本区域，传递自然、清新、舒适的感觉。 + +浅绿色用于高亮和强调元素（如按钮和标题），为设计增添活力。 + +金色/黄色作为强调色，突出重要的按钮、导航链接和提示内容。 + +背景颜色： + +主要使用深色背景（如深绿色、深灰色），创造高对比度的视觉效果，增强层次感。 + +大面积的背景图片（如自然景观、办公室绿植）展示网站的主题，并增强用户体验。 + +文本颜色： + +主体文本颜色使用浅灰色或白色，确保在深色背景上的可读性。 + +金色和黄色用于强调文本和按钮，增加吸引力。 + +1.2 字体排版 + +主字体： + +无衬线字体（如“Montserrat”或“Arial”）用于标题和副标题，确保视觉的简洁和现代感。 + +衬线字体（如“Georgia”或“Times New Roman”）用于正文内容，提升阅读流畅性和传统感。 + +字体大小： + +标题字体较大，突出重点内容（如“30px-50px”）。 + +正文字体保持在14px-16px之间，易于阅读并保证页面的整洁。 + +行距和字间距： + +行距大约为1.5倍，确保文字的清晰可读。 + +字间距适中，避免字符拥挤。 + +1.3 图标与图形规范 + +图标： + +使用简洁、线条化的图标，采用白色或浅色调，保证视觉一致性。 + +图标设计需与整体页面风格协调，避免过度复杂的设计。 + +插图与插画： + +采用手绘风格的插图和图标，增强自然、亲和力的视觉效果。 + +以简洁和现代的插画为主，帮助用户更好地理解信息。 + +1.4 空间与布局原则 + +网格系统： + +使用12列网格布局，便于响应式设计，并保证各个元素的对齐和均衡。 + +页面空间： + +各部分之间保持适当的空白，避免视觉拥挤，使页面更具可读性和吸引力。 + +全屏背景： + +首页使用大面积背景图，展示自然景观或企业产品，吸引用户注意。 + +2. 交互设计规范 +2.1 鼠标悬停(Hover)效果设计 + +按钮： + +悬停时，按钮的背景色会发生细微变化，例如由绿色变为浅绿色，或增加边框阴影，让用户感知到按钮的可点击性。 + +图片： + +鼠标悬停时，图片可以出现轻微放大效果或模糊切换，以提升互动感。 + +文本： + +重要链接或按钮文字在悬停时会变为金色或黄色，增强视觉吸引力。 + +2.2 动效设计 + +页面加载动画： + +页面加载时使用渐变淡入效果，所有内容（如标题、图像、按钮）逐步显示，给用户平滑的加载体验。 + +元素过渡动画： + +页面元素的变化（如按钮点击、图片切换等）采用平滑过渡动画，提升用户体验。 + +微交互动画： + +使用小型的微交互动画（如按钮点击、文本输入提示），增强页面的动态感与交互性。 + +2.3 交互反馈 + +表单元素： + +用户输入内容时，表单字段失焦时会给出反馈提示，如错误信息显示在下方。 + +按钮点击： + +按钮点击后，按钮会有轻微缩小或放大的视觉反馈，表明操作成功。 + +3. 组件库规范 +3.1 按钮 + +主按钮： + +绿色背景，白色文字，具备圆角设计，具有良好的可点击性。 + +鼠标悬停时，按钮背景颜色轻微变化，增强交互反馈。 + +次按钮： + +浅绿色背景，边框设计，用于次要操作，视觉上不如主按钮突出。 + +3.2 表单元素 + +输入框： + +输入框需要设计圆角，并有清晰的标签和占位符文本。 + +聚焦时，输入框边框颜色变为绿色或金色，增强可操作性。 + +下拉菜单： + +清晰显示选项列表，点击展开时带有平滑的过渡动画。 + +3.3 导航菜单 + +顶部导航： + +使用简洁的横向菜单，子菜单采用鼠标悬停显示的方式。 + +导航条保持简洁，避免过多的菜单项。 + +侧边栏（适配移动端）： + +在移动端，导航会切换为汉堡菜单，点击展开后显示垂直菜单。 + +3.4 模态框 + +弹窗设计： + +弹窗采用平滑的过渡动画，可以包含表单、提示信息或确认框。 + +弹窗背景为半透明，使内容更加突出。 + +4. 响应式设计规范 +4.1 设备适配 + +桌面版： 使用全宽设计，适当利用空间展示大量信息（如大背景图、产品展示等）。 + +平板版： 布局会自动调整，确保内容不被压缩，重要信息仍清晰可见。 + +移动版： 采用单列布局，导航变为汉堡菜单，保证良好的触屏操作体验。 + +4.2 断点设计 + +桌面端： 主要使用大屏幕宽度，内容排布为多列。 + +平板端： 宽度约为768px到1024px，布局为两列或单列。 + +移动端： 屏幕宽度小于768px，所有内容垂直排列，确保操作简便。 + +4.3 布局变化原则 + +在不同设备上，内容块的排列方式应根据屏幕宽度进行调整，例如在小屏设备上采用单列布局，在大屏设备上采用多列布局。 + +5. 交互状态规范 +5.1 默认状态 + +所有元素（按钮、表单输入、链接等）初始时处于可交互状态。 + +5.2 悬停状态 + +鼠标悬停时，元素（如按钮、链接）会显示颜色变化或下划线等效果，增强可操作性。 + +5.3 点击状态 + +按钮点击时，会触发微动效，如缩小或轻微弹起，以给用户点击反馈。 + +5.4 禁用状态 + +禁用的按钮、表单元素会显示为灰色或半透明状态，明确不可操作。 + +5.5 加载状态 + +在页面加载或数据提交过程中，显示加载动画（如转圈、进度条等）提示用户等待。 + +设计原则 + +一致性： 保证网站各部分设计风格一致，提升品牌识别度和用户的使用体验。 + +可访问性： 遵循WCAG标准，保证所有用户（包括残障人士）均可顺利使用网站。 + +直观性： 确保网站操作简单，用户不需过多思考即可完成所需操作。 + +性能优化： 优化图片、脚本和样式表，减少页面加载时间，提升用户体验。 + +技术实现建议 + +CSS 动画： 使用 @keyframes 和 transition 实现流畅的过渡动画。 + +JavaScript 交互： 使用 Vanilla JS 或 GSAP 库增强页面的动态交互效果。 + +性能优化： + +使用 lazy-loading 技术延迟加载图片，减少初始加载时间。 + +使用 WebP 格式压缩图像，提高页面加载速度。 + +对 JavaScript 文件进行最小化和延迟加载，减少主线程的负担。 \ No newline at end of file diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/chemical.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/chemical.ts new file mode 100644 index 00000000..c35a2f76 --- /dev/null +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/chemical.ts @@ -0,0 +1,333 @@ +/** + * 化工订单班 - 终端模拟数据 + * 半导体AI综合检测项目 + */ + +import { Agent } from '@/store/demoStore'; +import { SimulationData, TerminalLine, AgentOutput } from './index'; + +// 化工订单班专属Agent配置 +const chemicalAgents: Agent[] = [ + { + id: 'project_manager', + name: '项目经理', + icon: '👔', + avatar: '/data/订单班文档资料/化工/agent头像/质量标准与合规专家.jpg', + model: 'GPT-4', + role: '项目统筹与进度管理', + status: 'waiting', + }, + { + id: 'ai_algorithm_engineer', + name: 'AI算法工程师', + icon: '🤖', + avatar: '/data/订单班文档资料/化工/agent头像/检测工程师1+2.jpg', + model: 'GPT-4', + role: 'AI模型训练与优化', + status: 'waiting', + }, + { + id: 'senior_detection_engineer', + name: '高级检测工程师', + icon: '🔬', + avatar: '/data/订单班文档资料/化工/agent头像/检测工程师1+2.jpg', + model: 'Claude-3', + role: '检测方案设计与实施', + status: 'waiting', + }, + { + id: 'optical_inspector', + name: '光电检测员', + icon: '📷', + avatar: '/data/订单班文档资料/化工/agent头像/检测技术员.jpg', + model: 'GPT-3.5', + role: '外观缺陷识别与量化', + status: 'waiting', + }, + { + id: 'data_analyst', + name: '数据分析师', + icon: '📊', + avatar: '/data/订单班文档资料/化工/agent头像/检测技术员.jpg', + model: 'GPT-4', + role: '数据处理与报告生成', + status: 'waiting', + }, + { + id: 'quality_expert', + name: '质量管理专家', + icon: '✅', + avatar: '/data/订单班文档资料/化工/agent头像/质量标准与合规专家.jpg', + model: 'Claude-3', + role: '质量标准制定与审核', + status: 'waiting', + }, +]; + +export const chemicalSimulation = (): SimulationData => { + const startupSequence: TerminalLine[] = [ + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + { type: 'system', content: '初始化半导体检测环境...' }, + { type: 'system', content: '加载项目需求：300mm硅晶圆+表面SiO₂薄膜质量检测' }, + { type: 'info', content: '🎯 检测目标：单批次快速质量判定，AI主导检测流程' }, + { type: 'info', content: '📏 样品规格：300mm P型硅晶圆，SiO₂薄膜15.0±0.3nm' }, + { type: 'info', content: '🔍 检测项目：外观、薄膜、电学、成分四大类' }, + { type: 'info', content: '⚡ 效率要求：单片5-6分钟，全批20片≤2小时' }, + { type: 'info', content: '📈 质量标准：ISO 5洁净室，CMA/CNAS双认证' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在组建6人专家团队...' }, + { type: 'success', content: '✓ 项目经理就位' }, + { type: 'success', content: '✓ AI算法工程师就位' }, + { type: 'success', content: '✓ 高级检测工程师就位' }, + { type: 'success', content: '✓ 光电检测员就位' }, + { type: 'success', content: '✓ 数据分析师就位' }, + { type: 'success', content: '✓ 质量管理专家就位' }, + { type: 'system', content: '' }, + { type: 'system', content: '开始多Agent协作流程...' }, + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + ]; + + const agentSequence: AgentOutput[] = [ + { + agent: () => chemicalAgents[0], + outputs: [ + { type: 'system', content: '>>> Agent-1: 项目经理初始化...' }, + { type: 'info', content: '👔 项目经理启动项目规划...' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在加载项目配置...' }, + { type: 'system', content: '' }, + + { type: 'output', content: '项目基本信息:' }, + { type: 'output', content: ' • 检测单位：XX半导体第三方实验室' }, + { type: 'output', content: ' • 批次规模：20片/批，同批随机抽样' }, + { type: 'output', content: ' • 报告编号：AI-QC-202410-001' }, + { type: 'system', content: '' }, + + { type: 'output', content: '检测环境配置:' }, + { type: 'output', content: ' • 洁净等级：ISO 5洁净室' }, + { type: 'output', content: ' • 温湿度控制：22±1℃，45±5%' }, + { type: 'output', content: ' • 粒子监控：实时稳定监测' }, + { type: 'system', content: '' }, + + { type: 'output', content: 'AI系统设置:' }, + { type: 'output', content: ' • 可信度阈值：≥0.90合格，0.80-0.90观察，<0.80复核' }, + { type: 'output', content: ' • 缩点条件：前3点与AI预测偏差<2%' }, + { type: 'output', content: ' • 自动化程度：95%（仅低可信时人工介入）' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 项目规划完成，团队分工明确' }, + ] + }, + { + agent: () => chemicalAgents[1], + outputs: [ + { type: 'system', content: '>>> Agent-2: AI算法工程师初始化...' }, + { type: 'info', content: '🤖 AI算法工程师配置检测模型...' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在加载深度学习模型...' }, + { type: 'system', content: 'CUDA环境检测: Available' }, + { type: 'system', content: 'GPU内存分配: 8GB' }, + { type: 'system', content: '' }, + + { type: 'output', content: 'AI引擎架构:' }, + { type: 'output', content: ' • 视觉模型：YOLOv8缺陷检测' }, + { type: 'output', content: ' • 数据清洗：自动去噪、光照校正' }, + { type: 'output', content: ' • 预测模型：深度学习电学特性预测' }, + { type: 'output', content: ' • 判定引擎：多维度阈值自动比对' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg', imageAlt: '半导体AI检测系统架构' }, + { type: 'system', content: '' }, + + { type: 'output', content: '模型优化策略:' }, + { type: 'output', content: ' • 训练数据：10万+历史样本' }, + { type: 'output', content: ' • 准确率：缺陷识别>98%' }, + { type: 'output', content: ' • 响应时间：单片判定≤45秒' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ AI模型部署完成，准确率达98.5%' }, + ] + }, + { + agent: () => chemicalAgents[2], + outputs: [ + { type: 'system', content: '>>> Agent-3: 高级检测工程师初始化...' }, + { type: 'info', content: '🔬 高级检测工程师制定检测方案...' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在载入检测标准库...' }, + { type: 'progress', content: '加载SEMI标准', target: 100, stutters: [45, 78] }, + { type: 'progress', content: '加载国标GB/T', target: 100, stutters: [56, 89] }, + { type: 'system', content: '' }, + + { type: 'output', content: '检测项目配置:' }, + { type: 'output', content: ' • 外观检测：颗粒≤35个/片，划痕≤50μm' }, + { type: 'output', content: ' • 薄膜检测：15.0±0.3nm，均匀性≤±3%' }, + { type: 'output', content: ' • 电学检测：方块电阻60±1.2Ω/□' }, + { type: 'output', content: ' • 成分检测：O/Si比2.00±0.05' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg', imageAlt: '硅晶圆检测项目分类' }, + { type: 'system', content: '' }, + + { type: 'output', content: '测点优化方案:' }, + { type: 'output', content: ' • 标准9点法：中心1点+内环4点+外环4点' }, + { type: 'output', content: ' • AI智能缩点：前3点验证后缩减至5点' }, + { type: 'output', content: ' • 异常扩展：边缘敏感时升级至13点' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg', imageAlt: '光学检测系统示意' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 检测方案制定完成，覆盖率100%' }, + ] + }, + { + agent: () => chemicalAgents[3], + outputs: [ + { type: 'system', content: '>>> Agent-4: 光电检测员初始化...' }, + { type: 'info', content: '📷 光电检测员执行外观检测...' }, + { type: 'system', content: '' }, + { type: 'system', content: '启动高分辨率扫描系统...' }, + { type: 'system', content: '校准光学镜头...' }, + { type: 'progress', content: '全片扫描中', target: 100, duration: 3000, stutters: [23, 56, 78, 91] }, + { type: 'system', content: '' }, + + { type: 'output', content: '外观扫描参数:' }, + { type: 'output', content: ' • 扫描分辨率：0.2-0.3μm/px' }, + { type: 'output', content: ' • 检测范围：全片300mm区域' }, + { type: 'output', content: ' • 识别类型：颗粒、划痕、腐蚀坑' }, + { type: 'system', content: '' }, + + { type: 'output', content: '缺陷识别结果:' }, + { type: 'output', content: ' • 颗粒检出：24个（≥0.3μm）' }, + { type: 'output', content: ' • 最大划痕：48μm（未超阈值）' }, + { type: 'output', content: ' • 腐蚀深度：最大8.6nm' }, + { type: 'output', content: ' • 缺陷分布：主要集中在第3象限外环' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/外观热力图（颗粒划痕腐蚀）.jpg', imageAlt: '外观缺陷热力分布图' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 外观检测完成，所有指标合格' }, + ] + }, + { + agent: () => chemicalAgents[4], + outputs: [ + { type: 'system', content: '>>> Agent-5: 数据分析师初始化...' }, + { type: 'info', content: '📊 数据分析师处理测试数据...' }, + { type: 'system', content: '' }, + { type: 'system', content: '启动数据分析引擎...' }, + { type: 'system', content: '导入测量数据集...' }, + { type: 'progress', content: '数据清洗', target: 100, stutters: [34, 67] }, + { type: 'progress', content: '统计分析', target: 100, stutters: [45, 78, 92] }, + { type: 'system', content: '' }, + + { type: 'output', content: '厚度测量分析:' }, + { type: 'output', content: ' • 均值：15.07nm（目标15.0nm）' }, + { type: 'output', content: ' • 均匀性：±2.6%（优于±3%标准）' }, + { type: 'output', content: ' • 偏移率：+0.47%' }, + { type: 'output', content: ' • 边缘敏感：否' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg', imageAlt: '薄膜厚度分布热力图' }, + { type: 'system', content: '' }, + + { type: 'output', content: '电学特性分析:' }, + { type: 'output', content: ' • Rs均值：61.1Ω/□（略高于目标）' }, + { type: 'output', content: ' • 离散度：2.9Ω/□' }, + { type: 'output', content: ' • AI预测准确度：97.8%' }, + { type: 'output', content: ' • 判定：进入观察带' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg', imageAlt: 'AI预测与实测对比分析' }, + { type: 'system', content: '' }, + + { type: 'output', content: '成分抽检结果:' }, + { type: 'output', content: ' • O/Si比：2.02（目标2.00±0.05）' }, + { type: 'output', content: ' • 金属污染：<7×10⁹ atoms/cm²' }, + { type: 'output', content: ' • XPS峰位：无异常金属峰' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg', imageAlt: '成分分析检测卡片' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 数据分析完成，生成可视化报告' }, + ] + }, + { + agent: () => chemicalAgents[5], + outputs: [ + { type: 'system', content: '>>> Agent-6: 质量管理专家初始化...' }, + { type: 'info', content: '✅ 质量管理专家进行最终审核...' }, + { type: 'system', content: '' }, + { type: 'system', content: '执行质量审核流程...' }, + { type: 'progress', content: '合规性检查', target: 100, stutters: [45, 89] }, + { type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [56, 78, 95] }, + { type: 'system', content: '' }, + + { type: 'output', content: '批次检测总结:' }, + { type: 'output', content: ' • 检测完成度：100%（20片全检）' }, + { type: 'output', content: ' • 合格率：95%（19片合格，1片观察）' }, + { type: 'output', content: ' • AI可信度：平均0.94' }, + { type: 'output', content: ' • 用时统计：总计115分钟' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg', imageAlt: '批次检测结果汇总' }, + { type: 'system', content: '' }, + + { type: 'output', content: '质量判定结果:' }, + { type: 'output', content: ' ✓ 外观：合格（颗粒24个<35个）' }, + { type: 'output', content: ' ✓ 薄膜：合格（15.07nm在范围内）' }, + { type: 'output', content: ' ⚠️ 电学：观察（Rs略高但未越界）' }, + { type: 'output', content: ' ✓ 成分：合格（O/Si比正常）' }, + { type: 'system', content: '' }, + + { type: 'output', content: '改进建议:' }, + { type: 'output', content: ' • 沉积时间下调1-2%降低Rs' }, + { type: 'output', content: ' • 下批优先复测边缘3点+中心1点' }, + { type: 'output', content: ' • 持续监控Rs趋势变化' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 质量审核通过，批次可放行！' }, + ] + }, + ]; + + const completionSequence: TerminalLine[] = [ + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + { type: 'system', content: '' }, + { type: 'success', content: '🎉 半导体AI综合检测项目圆满完成！' }, + { type: 'system', content: '' }, + { type: 'output', content: '项目成果总结:' }, + { type: 'output', content: ' • 检测效率：单片5-6分钟，批次<2小时' }, + { type: 'output', content: ' • AI准确率：98.5%，人工介入率<5%' }, + { type: 'output', content: ' • 质量保证：19/20片合格，1片观察' }, + { type: 'output', content: ' • 成本优化：人力成本降低60%' }, + { type: 'system', content: '' }, + { type: 'output', content: '交付物清单:' }, + { type: 'output', content: ' ✓ 《AI检测报告》PDF版' }, + { type: 'output', content: ' ✓ 外观热力分布图' }, + { type: 'output', content: ' ✓ 多维度数据分析图表' }, + { type: 'output', content: ' ✓ 质量改进建议书' }, + { type: 'output', content: ' ✓ 原始检测数据CSV' }, + { type: 'system', content: '' }, + { type: 'output', content: '技术亮点:' }, + { type: 'output', content: ' • AI主导：95%自动化判定' }, + { type: 'output', content: ' • 智能缩点：节省40%测试时间' }, + { type: 'output', content: ' • 实时预警：异常自动触发复核' }, + { type: 'system', content: '' }, + { type: 'success', content: '感谢6位专家的协作，为半导体制造保驾护航！' }, + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + ]; + + return { + orderClassId: 'chemical', + orderClassName: '化工', + projectTitle: '半导体AI综合检测项目', + agents: chemicalAgents, + startupSequence, + agentSequence, + completionSequence, + }; +}; \ No newline at end of file diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/developer.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/developer.ts index 09532280..1102e087 100644 --- a/web_frontend/exhibition-demo/src/data/terminalSimulations/developer.ts +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/developer.ts @@ -123,6 +123,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '📝 需求文档撰写专员开始需求调研...' }, { type: 'system', content: '' }, + { type: 'progress', content: '需求调研', target: 100, stutters: [23, 45, 67, 89] }, + { type: 'progress', content: '文档生成', target: 100, stutters: [34, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '执行需求调研与分析:' }, { type: 'output', content: ' • 访谈K12教育机构，收集师生痛点' }, { type: 'output', content: ' • 分析竞品平台（腾讯课堂、钉钉直播）' }, @@ -145,6 +148,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '📋 产品经理开始产品规划...' }, { type: 'system', content: '' }, + { type: 'progress', content: '功能设计', target: 100, stutters: [34, 56, 78] }, + { type: 'progress', content: '原型制作', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '设计产品功能矩阵:' }, { type: 'output', content: ' 学生端：直播观看、作业提交、学习进度、错题本' }, { type: 'output', content: ' 教师端：课程创建、直播互动、作业批改、成绩分析' }, @@ -169,6 +175,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '🏗️ 平台架构师开始系统架构设计...' }, { type: 'system', content: '' }, + { type: 'progress', content: '架构设计', target: 100, stutters: [23, 56, 78, 92] }, + { type: 'progress', content: '数据建模', target: 100, stutters: [34, 67] }, + { type: 'system', content: '' }, { type: 'output', content: '设计技术架构方案:' }, { type: 'output', content: ' 前端层：Vue3 + TypeScript + Vite + Ant Design Vue' }, { type: 'output', content: ' 网关层：Spring Cloud Gateway + JWT认证' }, @@ -198,6 +207,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '🎨 UI设计师开始界面设计...' }, { type: 'system', content: '' }, + { type: 'progress', content: '视觉风格设计', target: 100, stutters: [45, 78] }, + { type: 'progress', content: '页面原型制作', target: 100, stutters: [23, 56, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '设计视觉风格:' }, { type: 'output', content: ' • 配色方案：科技蓝 + 活力橙（符合K12教育调性）' }, { type: 'output', content: ' • 设计规范：Material Design + 教育场景定制组件' }, @@ -227,6 +239,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '💻 前端开发工程师开始前端开发...' }, { type: 'system', content: '' }, + { type: 'progress', content: '组件开发', target: 100, stutters: [34, 56, 78, 95] }, + { type: 'progress', content: '页面集成', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, { type: 'install', content: '安装前端依赖包...' }, { type: 'output', content: ' npm install vue@next vue-router@4 pinia' }, { type: 'output', content: ' npm install ant-design-vue axios' }, @@ -260,6 +275,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '⚙️ 后端开发工程师开始后端开发...' }, { type: 'system', content: '' }, + { type: 'progress', content: '微服务开发', target: 100, stutters: [23, 45, 67, 89] }, + { type: 'progress', content: 'API接口实现', target: 100, stutters: [34, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '构建Spring Cloud微服务架构:' }, { type: 'output', content: ' • gateway-service：API网关 + JWT认证' }, { type: 'output', content: ' • user-service：用户管理 + RBAC权限' }, @@ -295,6 +313,10 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '🧪 软件测试工程师开始测试工作...' }, { type: 'system', content: '' }, + { type: 'progress', content: '功能测试', target: 100, stutters: [34, 56, 78, 92] }, + { type: 'progress', content: '性能测试', target: 100, stutters: [45, 89] }, + { type: 'progress', content: '安全测试', target: 100, stutters: [23, 67] }, + { type: 'system', content: '' }, { type: 'output', content: '执行功能测试:' }, { type: 'output', content: ' [✓] 用户注册登录：手机号/邮箱/微信三种方式' }, { type: 'output', content: ' [✓] 课程管理：创建、编辑、删除、上传课件' }, @@ -328,6 +350,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '🎬 DEMO生成助手开始制作演示原型...' }, { type: 'system', content: '' }, + { type: 'progress', content: '演示脚本制作', target: 100, stutters: [23, 56, 78] }, + { type: 'progress', content: 'DEMO生成', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '生成演示视频脚本:' }, { type: 'output', content: ' 场景1：学生端 - 注册登录 → 浏览课程 → 购买课程' }, { type: 'output', content: ' 场景2：教师端 - 创建课程 → 开启直播 → 互动答疑' }, @@ -360,6 +385,9 @@ export const developerSimulation = (): SimulationData => ({ outputs: [ { type: 'info', content: '📊 项目经理进行项目总结...' }, { type: 'system', content: '' }, + { type: 'progress', content: '项目汇总', target: 100, stutters: [34, 67, 89] }, + { type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '项目执行情况汇总:' }, { type: 'output', content: ' • 开发周期：6个月（按计划完成）' }, { type: 'output', content: ' • 团队规模：9人（需求1人、产品1人、架构1人、UI1人、前端3人、后端4人、测试2人）' }, diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/environmental.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/environmental.ts new file mode 100644 index 00000000..ed9e2c8f --- /dev/null +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/environmental.ts @@ -0,0 +1,366 @@ +/** + * 环保订单班 - 终端模拟数据 + * 地表水环境质量考核断面水质采样监测项目 + */ + +import { Agent } from '@/store/demoStore'; +import { SimulationData, TerminalLine, AgentOutput } from './index'; + +// 环保订单班专属Agent配置 +const environmentalAgents: Agent[] = [ + { + id: 'environmental_consultant', + name: '环境咨询师', + icon: '🌿', + avatar: '/data/订单班文档资料/环保/agent头像/环境咨询师.jpg', + model: 'GPT-4', + role: '法规解读与合规评估', + status: 'waiting', + }, + { + id: 'water_sampling_expert', + name: '水质采样专家', + icon: '💧', + avatar: '/data/订单班文档资料/环保/agent头像/水质采样专家.jpg', + model: 'Claude-3', + role: '采样方案设计与技术指导', + status: 'waiting', + }, + { + id: 'project_manager', + name: '环保项目经理', + icon: '📊', + avatar: '/data/订单班文档资料/环保/agent头像/环保项目经理.jpg', + model: 'GPT-4', + role: '项目统筹与进度管理', + status: 'waiting', + }, + { + id: 'ehs_engineer', + name: 'EHS工程师', + icon: '⚠️', + avatar: '/data/订单班文档资料/环保/agent头像/EHS工程师.jpg', + model: 'GPT-3.5', + role: '安全评估与风险控制', + status: 'waiting', + }, + { + id: 'quality_control', + name: '质量控制专家', + icon: '✅', + avatar: '/data/订单班文档资料/环保/agent头像/质量控制专家.jpg', + model: 'Claude-3', + role: '质控体系与数据验证', + status: 'waiting', + }, + { + id: 'budget_expert', + name: '项目预算专家', + icon: '💰', + avatar: '/data/订单班文档资料/环保/agent头像/项目预算专家.jpg', + model: 'GPT-4', + role: '成本核算与预算控制', + status: 'waiting', + }, + { + id: 'document_formatter', + name: '文案格式整理专员', + icon: '📝', + avatar: '/data/订单班文档资料/环保/agent头像/文案格式整理专员.jpg', + model: 'GPT-3.5', + role: '报告编制与文档规范', + status: 'waiting', + }, + { + id: 'project_supervisor', + name: '项目主管', + icon: '🎯', + avatar: '/data/订单班文档资料/环保/agent头像/项目主管.jpg', + model: 'GPT-4', + role: '决策审核与质量把关', + status: 'waiting', + }, +]; + +export const environmentalSimulation = (): SimulationData => { + const startupSequence: TerminalLine[] = [ + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + { type: 'system', content: '初始化环境监测管理系统...' }, + { type: 'system', content: '加载项目需求：地表水环境质量考核断面水质采样监测项目' }, + { type: 'info', content: '📍 监测地点：长江国考"长江大桥"断面' }, + { type: 'info', content: '📐 监测范围：主河道85m宽，3条采样垂线' }, + { type: 'info', content: '📊 监测指标：26项（理化、营养盐、重金属、有机物、生物）' }, + { type: 'info', content: '⏰ 监测频次：每月1次，全年12次' }, + { type: 'info', content: '🎯 质量目标：地表水Ⅲ类功能水体标准' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在组建8人专家团队...' }, + { type: 'success', content: '✓ 环境咨询师就位' }, + { type: 'success', content: '✓ 水质采样专家就位' }, + { type: 'success', content: '✓ 环保项目经理就位' }, + { type: 'success', content: '✓ EHS工程师就位' }, + { type: 'success', content: '✓ 质量控制专家就位' }, + { type: 'success', content: '✓ 项目预算专家就位' }, + { type: 'success', content: '✓ 文案格式整理专员就位' }, + { type: 'success', content: '✓ 项目主管就位' }, + { type: 'system', content: '' }, + { type: 'system', content: '开始多Agent协作流程...' }, + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + ]; + + const agentSequence: AgentOutput[] = [ + { + agent: () => environmentalAgents[0], + outputs: [ + { type: 'info', content: '🌿 环境咨询师开始法规合规性评估...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '加载法规数据库', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, + + { type: 'output', content: '法规依据梳理:' }, + { type: 'output', content: ' • 《地表水环境质量标准》GB 3838-2002' }, + { type: 'output', content: ' • 《地表水监测技术规范》HJ/T 91-2022' }, + { type: 'output', content: ' • 《中华人民共和国环境保护法》' }, + { type: 'output', content: ' • 《水污染防治法》' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg', imageAlt: '环境保护法法规框架' }, + { type: 'system', content: '' }, + + { type: 'output', content: '合规要求确认:' }, + { type: 'output', content: ' • 监测活动符合国家环保要求' }, + { type: 'output', content: ' • 数据具备法律效力' }, + { type: 'output', content: ' • 满足年度水质考核标准' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 法规合规性评估完成，项目符合所有监管要求' }, + ] + }, + { + agent: () => environmentalAgents[1], + outputs: [ + { type: 'info', content: '💧 水质采样专家设计采样方案...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '分析水文数据', target: 100, stutters: [34, 67, 89] }, + { type: 'progress', content: '计算采样点位', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, + + { type: 'output', content: '断面布设方案:' }, + { type: 'output', content: ' • 对照断面：上游背景水质参考点' }, + { type: 'output', content: ' • 控制断面：污染源影响评估点' }, + { type: 'output', content: ' • 削减断面：下游治理效果监测点' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg', imageAlt: '长江大桥断面采样布点' }, + { type: 'system', content: '' }, + + { type: 'output', content: '垂线布设细化:' }, + { type: 'output', content: ' • L1左岸：距岸15m，水深3.0m' }, + { type: 'output', content: ' • C2中泓：距岸42.5m，水深5.0m' }, + { type: 'output', content: ' • R3右岸：距岸70m，水深2.8m' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/垂线分布图.jpg', imageAlt: '采样垂线分布示意' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 采样方案设计完成（3个断面×3条垂线×4个深度）' }, + ] + }, + { + agent: () => environmentalAgents[2], + outputs: [ + { type: 'info', content: '📊 环保项目经理制定执行计划...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '分析项目需求', target: 100, stutters: [23, 56, 78] }, + { type: 'progress', content: '资源配置优化', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, + { type: 'output', content: '项目执行计划:' }, + { type: 'output', content: ' • 监测周期：12个月连续监测' }, + { type: 'output', content: ' • 采样窗口：每月5-10日' }, + { type: 'output', content: ' • 采样时间：08:30-11:30' }, + { type: 'output', content: ' • 特殊要求：DO项目09:00前完成' }, + { type: 'system', content: '' }, + + { type: 'output', content: '资源配置:' }, + { type: 'output', content: ' • 采样团队：6人专业团队' }, + { type: 'output', content: ' • 采样设备：Van Dorn采水器×3' }, + { type: 'output', content: ' • 监测仪器：YSI EXO2多参数仪' }, + { type: 'output', content: ' • 运输保障：冷藏运输车×2' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 项目执行计划制定完成，关键里程碑已设定' }, + ] + }, + { + agent: () => environmentalAgents[3], + outputs: [ + { type: 'info', content: '⚠️ EHS工程师进行安全风险评估...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '风险识别分析', target: 100, stutters: [34, 67, 92] }, + { type: 'progress', content: '应急预案制定', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '现场安全措施:' }, + { type: 'output', content: ' • 个人防护：救生衣、防滑鞋、防护手套' }, + { type: 'output', content: ' • 采样船配备：救生圈、应急药品包' }, + { type: 'output', content: ' • 作业规范：酒精测试、双人作业' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg', imageAlt: '现场安全采样作业' }, + { type: 'system', content: '' }, + + { type: 'output', content: '环保要求:' }, + { type: 'output', content: ' • 废液分类收集处置' }, + { type: 'output', content: ' • 废酸交由资质单位处理' }, + { type: 'output', content: ' • 现场零排放要求' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 安全风险评估完成，HSE体系建立' }, + ] + }, + { + agent: () => environmentalAgents[4], + outputs: [ + { type: 'info', content: '✅ 质量控制专家建立QA/QC体系...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '建立质控体系', target: 100, stutters: [23, 56, 89] }, + { type: 'progress', content: '数据验证流程', target: 100, stutters: [34, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '质控措施设置:' }, + { type: 'output', content: ' • 平行样：每断面1组，比例≥10%' }, + { type: 'output', content: ' • 空白样：每批次1个全程序空白' }, + { type: 'output', content: ' • 加标回收：每20个样品1个，回收率80-120%' }, + { type: 'output', content: ' • 运输空白：每批次1个去离子水样' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg', imageAlt: '质量控制流程图' }, + { type: 'system', content: '' }, + + { type: 'output', content: '数据验证体系:' }, + { type: 'output', content: ' • 初步审核：技术负责人复核' }, + { type: 'output', content: ' • 内部校验：历史数据对比' }, + { type: 'output', content: ' • 外部验证：标准值参考' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ QA/QC体系建立完成，确保数据准确性>95%' }, + ] + }, + { + agent: () => environmentalAgents[5], + outputs: [ + { type: 'info', content: '💰 项目预算专家进行成本核算...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '成本分析计算', target: 100, stutters: [45, 67, 91] }, + { type: 'progress', content: '预算优化方案', target: 100, stutters: [34, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '项目预算明细:' }, + { type: 'output', content: ' • 人工成本：采样团队6人×12月 = 72万元' }, + { type: 'output', content: ' • 设备折旧：监测设备年折旧 = 15万元' }, + { type: 'output', content: ' • 试剂耗材：26项×12月 = 28万元' }, + { type: 'output', content: ' • 实验分析：第三方检测费 = 45万元' }, + { type: 'output', content: ' • 运输物流：冷藏运输12次 = 8万元' }, + { type: 'output', content: ' • 管理费用：项目管理15% = 25万元' }, + { type: 'system', content: '' }, + + { type: 'output', content: '成本优化方案:' }, + { type: 'output', content: ' • 批量采购试剂节省10%' }, + { type: 'output', content: ' • 优化采样路线降低运输成本' }, + { type: 'output', content: ' • 自动监测站减少人工成本' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 项目总预算：193万元（优化后：175万元）' }, + ] + }, + { + agent: () => environmentalAgents[6], + outputs: [ + { type: 'info', content: '📝 文案格式整理专员编制技术文档...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '文档体系构建', target: 100, stutters: [23, 45, 78, 92] }, + { type: 'progress', content: '报告模板制作', target: 100, stutters: [34, 67] }, + { type: 'system', content: '' }, + { type: 'output', content: '技术文档体系:' }, + { type: 'output', content: ' • 《采样作业指导书》152页' }, + { type: 'output', content: ' • 《质量控制手册》98页' }, + { type: 'output', content: ' • 《数据管理规程》76页' }, + { type: 'output', content: ' • 《应急预案汇编》45页' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/采样流程.jpg', imageAlt: '标准化采样流程' }, + { type: 'system', content: '' }, + + { type: 'output', content: '报告模板标准化:' }, + { type: 'output', content: ' • 月度监测报告模板' }, + { type: 'output', content: ' • 季度趋势分析模板' }, + { type: 'output', content: ' • 年度考核报告模板' }, + { type: 'output', content: ' • 应急监测报告模板' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 技术文档体系建立，符合CMA认证要求' }, + ] + }, + { + agent: () => environmentalAgents[7], + outputs: [ + { type: 'info', content: '🎯 项目主管进行最终审核...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '方案综合审核', target: 100, stutters: [34, 56, 78, 95] }, + { type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [45, 89] }, + { type: 'system', content: '' }, + { type: 'output', content: '方案审核结果:' }, + { type: 'output', content: ' ✓ 技术方案：符合HJ/T 91-2022标准' }, + { type: 'output', content: ' ✓ 法规合规：满足所有监管要求' }, + { type: 'output', content: ' ✓ 质量体系：CMA认证标准' }, + { type: 'output', content: ' ✓ 预算控制：成本优化9.3%' }, + { type: 'output', content: ' ✓ 风险管控：HSE体系完备' }, + { type: 'system', content: '' }, + + { type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg', imageAlt: '项目审核验证' }, + { type: 'system', content: '' }, + + { type: 'output', content: '项目批准执行:' }, + { type: 'output', content: ' • 合同编号：GZEP-2024-WQ-001' }, + { type: 'output', content: ' • 执行期限：2024.01-2024.12' }, + { type: 'output', content: ' • 质量承诺：数据准确率≥98%' }, + { type: 'system', content: '' }, + + { type: 'success', content: '✓ 项目方案审核通过，正式启动实施！' }, + ] + }, + ]; + + const completionSequence: TerminalLine[] = [ + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + { type: 'system', content: '' }, + { type: 'success', content: '🎉 地表水环境质量监测项目方案制定完成！' }, + { type: 'system', content: '' }, + { type: 'output', content: '项目成果总结:' }, + { type: 'output', content: ' • 监测方案：3断面×3垂线×4深度立体监测网' }, + { type: 'output', content: ' • 质量保证：QA/QC双重质控体系' }, + { type: 'output', content: ' • 合规认证：符合国家标准和CMA要求' }, + { type: 'output', content: ' • 成本优化：较预算节省9.3%' }, + { type: 'system', content: '' }, + { type: 'output', content: '交付物清单:' }, + { type: 'output', content: ' ✓ 《水质采样技术方案》完整版' }, + { type: 'output', content: ' ✓ 质量控制体系文件' }, + { type: 'output', content: ' ✓ HSE管理手册' }, + { type: 'output', content: ' ✓ 项目预算及执行计划' }, + { type: 'output', content: ' ✓ 标准化作业指导书' }, + { type: 'system', content: '' }, + { type: 'output', content: '预期效果:' }, + { type: 'output', content: ' • 确保断面水质达到Ⅲ类标准' }, + { type: 'output', content: ' • 为政府决策提供科学依据' }, + { type: 'output', content: ' • 支撑年度水质考核评价' }, + { type: 'system', content: '' }, + { type: 'success', content: '感谢8位专家的协作，守护绿水青山，共建美好家园！' }, + { type: 'system', content: '═══════════════════════════════════════════════════════════════' }, + ]; + + return { + orderClassId: 'environmental', + orderClassName: '环保', + projectTitle: '地表水环境质量考核断面水质采样监测项目', + agents: environmentalAgents, + startupSequence, + agentSequence, + completionSequence, + }; +}; \ No newline at end of file diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts new file mode 100644 index 00000000..01d30753 --- /dev/null +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts @@ -0,0 +1,363 @@ +import type { SimulationData } from './index'; +import type { Agent } from '@/store/demoStore'; + +const financeAgents: Agent[] = [ + { + id: 'user_analyst', + name: '用户分析师', + icon: '👥', + avatar: '/data/订单班文档资料/财经商贸/agent头像/用户分析师.jpg', + model: 'GPT-4', + role: '用户调研与市场洞察', + status: 'waiting', + }, + { + id: 'competitor_analyst', + name: '竞品分析师', + icon: '🔍', + avatar: '/data/订单班文档资料/财经商贸/agent头像/竞品分析师.jpg', + model: 'GPT-4', + role: '竞品研究与市场定位', + status: 'waiting', + }, + { + id: 'product_manager', + name: '产品经理', + icon: '📋', + avatar: '/data/订单班文档资料/财经商贸/agent头像/产品经理.jpg', + model: 'GPT-4', + role: '选品策略与产品规划', + status: 'waiting', + }, + { + id: 'ecommerce_designer', + name: '电商店铺平面设计师', + icon: '🎨', + avatar: '/data/订单班文档资料/财经商贸/agent头像/电商店铺平面设计师.jpg', + model: 'GPT-4', + role: '视觉设计与素材制作', + status: 'waiting', + }, + { + id: 'content_operation', + name: '内容电商运营专员', + icon: '📱', + avatar: '/data/订单班文档资料/财经商贸/agent头像/内容电商运营专员.jpg', + model: 'GPT-4', + role: '内容营销与达人合作', + status: 'waiting', + }, + { + id: 'ad_specialist', + name: '广告投放师', + icon: '📊', + avatar: '/data/订单班文档资料/财经商贸/agent头像/广告投放师.jpg', + model: 'GPT-4', + role: '平台广告投放与优化', + status: 'waiting', + }, + { + id: 'new_media_director', + name: '新媒体运营总监', + icon: '🚀', + avatar: '/data/订单班文档资料/财经商贸/agent头像/新媒体运营总监.jpg', + model: 'GPT-4', + role: '全渠道运营统筹', + status: 'waiting', + }, +]; + +export const financeSimulation = (): SimulationData => ({ + orderClassId: 'finance', + orderClassName: '财经商贸', + projectTitle: '可复美爽肤水电商全链路运营项目', + agents: financeAgents, + startupSequence: [ + { type: 'system', content: '初始化化妆品电商运营环境...' }, + { type: 'system', content: '加载项目需求：可复美爽肤水电商全链路运营项目' }, + { type: 'info', content: '目标平台：天猫+抖音+小红书三大主阵地' }, + { type: 'info', content: '目标人群：18-35岁年轻女性，月收入5000+' }, + { type: 'info', content: '产品定位：屏障修护+舒缓保湿，客单价150-300元' }, + { type: 'info', content: '核心竞争力：成分党友好+敏感肌适用+皮肤学背书' }, + { type: 'system', content: '' }, + { type: 'system', content: '正在组建7人电商运营团队...' }, + { type: 'success', content: '✓ 用户分析师就位' }, + { type: 'success', content: '✓ 竞品分析师就位' }, + { type: 'success', content: '✓ 产品经理就位' }, + { type: 'success', content: '✓ 电商店铺平面设计师就位' }, + { type: 'success', content: '✓ 内容电商运营专员就位' }, + { type: 'success', content: '✓ 广告投放师就位' }, + { type: 'success', content: '✓ 新媒体运营总监就位' }, + { type: 'system', content: '' }, + { type: 'system', content: '开始多Agent协作流程...' }, + { type: 'system', content: '════════════════════════════════════' }, + ], + agentSequence: [ + { + agent: () => financeAgents[0], + outputs: [ + { type: 'info', content: '👥 用户分析师开始用户调研与市场洞察...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '用户调研', target: 100, stutters: [23, 56, 78] }, + { type: 'progress', content: '市场分析', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, + { type: 'output', content: '用户分层体系:' }, + { type: 'output', content: ' • 年龄分层：18-24岁敏感肌/油皮、25-34岁初抗老/混干、35-45岁抗老/干皮' }, + { type: 'output', content: ' • 功效诉求：清洁控油、保湿修护、维稳舒缓、提亮焕肤、抗老紧致' }, + { type: 'output', content: ' • 价格承受力：入门59-129元、中档129-299元、高阶299-699元+' }, + { type: 'output', content: ' • 渠道偏好：内容电商重种草(抖音/小红书)，平台电商重转化(天猫/京东)' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/多个化妆品陈列图-无包装.jpg', imageAlt: '化妆品品类展示' }, + { type: 'system', content: '' }, + { type: 'output', content: '肤质细分人群画像:' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/油皮.jpg', imageAlt: '油皮人群特征' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg', imageAlt: '初抗老混干人群特征' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/抗老-干皮.jpg', imageAlt: '抗老干皮人群特征' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 用户分层体系完成（3大年龄段×4大肤质×6大功效诉求）' }, + { type: 'success', content: '✓ 多维度渠道调研数据整合（抖音搜索热度+淘宝购买频率）' }, + { type: 'success', content: '✓ 核心用户画像锁定：25-34岁混干肌，月收入8000+，关注成分与功效' }, + ], + }, + { + agent: () => financeAgents[1], + outputs: [ + { type: 'info', content: '🔍 竞品分析师开始竞品研究与市场定位...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '竞品收集', target: 100, stutters: [34, 67, 89] }, + { type: 'progress', content: 'SWOT分析', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '竞品矩阵分析（4大竞品品牌）:' }, + { type: 'output', content: ' • 薇诺娜：医学护肤背景，敏感肌专家定位，价格中高端，专业度强但场景延展性弱' }, + { type: 'output', content: ' • 敷尔佳：医美渠道起家，术后修护标签，成分党友好，但品牌延伸过快' }, + { type: 'output', content: ' • 悦木之源：雅诗兰黛集团，国际大牌背书，菌菇水爆款，价格高但性价比低' }, + { type: 'output', content: ' • 自然堂：国货大众路线，喜马拉雅植物成分，渠道下沉强但功效性弱' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水竞品分析.jpg', imageAlt: '爽肤水竞品对比分析' }, + { type: 'system', content: '' }, + { type: 'output', content: '差异化定位策略:' }, + { type: 'output', content: ' • 价格带：定位中档偏上（179-259元），高于自然堂，低于薇诺娜/悦木之源' }, + { type: 'output', content: ' • 功效点：屏障修护+舒缓保湿双核心，避开纯敏感肌单一定位' }, + { type: 'output', content: ' • 场景化：妆前急救+换季维稳+熬夜修护，多场景适配性强' }, + { type: 'output', content: ' • 证明体系：皮肤学测试+成分透明+用户真实测评，建立信任闭环' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 4大竞品SWOT分析完成' }, + { type: 'success', content: '✓ 市场空白点识别：中高端+多场景+成分透明赛道机会明确' }, + { type: 'success', content: '✓ 差异化卖点提炼：强成分+强证明+高颜价比三位一体' }, + ], + }, + { + agent: () => financeAgents[2], + outputs: [ + { type: 'info', content: '📋 产品经理开始选品策略与产品规划...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '选品策略', target: 100, stutters: [23, 45, 78, 92] }, + { type: 'progress', content: '产品规划', target: 100, stutters: [34, 67] }, + { type: 'system', content: '' }, + { type: 'output', content: '品类对比分析:' }, + { type: 'output', content: ' • 爽肤水：质地轻薄吸收快，补水+二次清洁，清爽适合油皮/混合皮 ✓选定' }, + { type: 'output', content: ' • 乳液：轻盈不厚重，补水保湿兼具，但锁水力不如面霜' }, + { type: 'output', content: ' • 面霜：保湿封闭性强，适合干皮，但油皮易闷痘' }, + { type: 'output', content: ' • 精华液：活性成分浓度高，见效快，但单价高且需搭配使用' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg', imageAlt: '化妆品产品拍摄' }, + { type: 'system', content: '' }, + { type: 'output', content: '主推产品确定 - 可复美爽肤水:' }, + { type: 'output', content: ' • 核心定位：屏障修护+舒缓保湿，用于承担声量与人群突破' }, + { type: 'output', content: ' • 卖点组合：强成分(温和保湿+屏障友好) + 强证明(皮肤学测试) + 高颜价比' }, + { type: 'output', content: ' • 产品规格：150ml主力款 + 300ml大容量礼盒装' }, + { type: 'output', content: ' • 价格策略：日常价199元，大促价169元，礼盒装299元(赠小样)' }, + { type: 'output', content: ' • 目标毛利：45-50%，确保营销投入空间' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品图.jpg', imageAlt: '可复美爽肤水产品图' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 品类优劣势对比分析完成（4大护肤品类）' }, + { type: 'success', content: '✓ 主推产品SKU规划完成（2个规格+礼盒装）' }, + { type: 'success', content: '✓ 价格体系设计完成（日常价+促销价+礼盒价）' }, + ], + }, + { + agent: () => financeAgents[3], + outputs: [ + { type: 'info', content: '🎨 电商店铺平面设计师开始视觉设计与素材制作...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '视觉设计', target: 100, stutters: [34, 56, 78] }, + { type: 'progress', content: '素材制作', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, + { type: 'output', content: '产品宣传海报设计（3套方案）:' }, + { type: 'output', content: ' • 方案一：深层补水主题 - "30秒提升角质层含水量，7天改善泛红干痒"' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-大海背景.jpg', imageAlt: '深层补水主题宣传' }, + { type: 'system', content: '' }, + { type: 'output', content: ' • 方案二：科学配方主题 - "皮肤学精准配方，无酒精/无香精/无色素低敏原则"' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-绿植背景.jpg', imageAlt: '科学配方主题宣传' }, + { type: 'system', content: '' }, + { type: 'output', content: ' • 方案三：场景化主题 - "妆前保湿/熬夜修护/旅行急救，随时随地护肤保护"' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-海上礁石.jpg', imageAlt: '场景化主题宣传' }, + { type: 'system', content: '' }, + { type: 'output', content: '小红书种草卡片设计（4套风格）:' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计1.jpg', imageAlt: '小红书卡片设计1' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计2.jpg', imageAlt: '小红书卡片设计2' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计3.jpg', imageAlt: '小红书卡片设计3' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg', imageAlt: '小红书卡片设计4' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 3套产品宣传海报设计完成（深层补水/科学配方/场景化）' }, + { type: 'success', content: '✓ 4套小红书种草卡片设计完成（素人测评/成分科普/前后对比/场景推荐）' }, + { type: 'success', content: '✓ 视觉素材库建立（产品图+场景图+信息图，50+张可复用素材）' }, + ], + }, + { + agent: () => financeAgents[4], + outputs: [ + { type: 'info', content: '📱 内容电商运营专员开始内容营销与达人合作...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '内容策划', target: 100, stutters: [23, 45, 67, 89] }, + { type: 'progress', content: '达人对接', target: 100, stutters: [34, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '小红书种草营销策略:' }, + { type: 'output', content: ' • 核心人群：18-35岁女性白领/学生，一二线城市，护肤消费意愿强' }, + { type: 'output', content: ' • 内容形态：7天维稳打卡+成分机理拆解+前后对比+实验室证据图' }, + { type: 'output', content: ' • SEO优化：标题/正文/话题三处关键词布局，长期获取自然流量' }, + { type: 'output', content: ' • 达人矩阵：头部KOL 2名+腰部达人15名+尾部KOC 50名' }, + { type: 'output', content: ' • 转化承接：小红书种草→天猫旗舰店转化→抖音直播复购' }, + { type: 'system', content: '' }, + { type: 'output', content: '抖音内容电商运营:' }, + { type: 'output', content: ' • 短视频矩阵：产品测评+成分科普+使用教程+用户真实反馈' }, + { type: 'output', content: ' • 直播节奏：每周3场常规直播+大促专场，单场GMV目标50万+' }, + { type: 'output', content: ' • 互动策略：抽奖福利+限时秒杀+组合套装，提升停留时长与转化率' }, + { type: 'output', content: ' • 数据复盘：实时监控GPM(千次观看成交额)、停留时长、点击率' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 小红书种草SOP建立（搜索SEO+内容矩阵+达人合作）' }, + { type: 'success', content: '✓ 抖音内容电商运营方案（短视频+直播双驱动）' }, + { type: 'success', content: '✓ 跨平台转化链路设计（小红书种草→天猫转化→抖音复购）' }, + ], + }, + { + agent: () => financeAgents[5], + outputs: [ + { type: 'info', content: '📊 广告投放师开始平台广告投放与优化...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '投放策略制定', target: 100, stutters: [34, 67, 92] }, + { type: 'progress', content: '效果优化', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '天猫搜索直通车投放:' }, + { type: 'output', content: ' • 核心词：爽肤水、补水爽肤水、敏感肌爽肤水、修护爽肤水、妆前保湿水' }, + { type: 'output', content: ' • 长尾词：换季敏感爽肤水、熬夜急救爽肤水、无酒精爽肤水、孕哺可用爽肤水' }, + { type: 'output', content: ' • 品牌词：可复美爽肤水、可复美补水水、可复美维稳水' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图1.jpg', imageAlt: '淘宝搜索广告示例1' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图2.jpg', imageAlt: '淘宝搜索广告示例2' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图3.jpg', imageAlt: '淘宝搜索广告示例3' }, + { type: 'system', content: '' }, + { type: 'output', content: '天猫展示广告投放:' }, + { type: 'output', content: ' • 超级推荐："猜你喜欢"定向推送，触达浏览过敏感肌/修护类护肤品用户' }, + { type: 'output', content: ' • 品销宝：首页焦点图+类目坑位，大促期间提升曝光' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg', imageAlt: '产品推荐榜位展示' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/广告封面设计图.jpg', imageAlt: '广告封面设计' }, + { type: 'system', content: '' }, + { type: 'output', content: '平台电商优势分析:' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/平台电商优势展示图.jpg', imageAlt: '平台电商优势' }, + { type: 'system', content: '' }, + { type: 'output', content: '内容电商优势分析:' }, + { type: 'system', content: '' }, + { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg', imageAlt: '内容电商优势' }, + { type: 'system', content: '' }, + { type: 'output', content: '投放优化策略:' }, + { type: 'output', content: ' • 数据监控：实时跟踪ROI、点击率、转化率、加购成本' }, + { type: 'output', content: ' • 智能出价：高峰时段提高出价，低峰时段降低成本' }, + { type: 'output', content: ' • 人群分层：新客拉新、老客复购、流失召回三类人群差异化投放' }, + { type: 'output', content: ' • 预算分配：搜索广告50%、推荐广告30%、品牌广告20%' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 关键词体系建立（核心词15个+长尾词30个+品牌词5个）' }, + { type: 'success', content: '✓ 天猫广告投放策略完成（搜索直通车+超级推荐+品销宝）' }, + { type: 'success', content: '✓ 投放ROI目标设定（搜索ROI≥3.5，推荐ROI≥2.8）' }, + ], + }, + { + agent: () => financeAgents[6], + outputs: [ + { type: 'info', content: '🚀 新媒体运营总监开始全渠道运营统筹...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '渠道整合', target: 100, stutters: [23, 45, 67, 89] }, + { type: 'progress', content: '策略制定', target: 100, duration: 2000, stutters: [34, 78] }, + { type: 'system', content: '' }, + { type: 'output', content: '全渠道运营策略总结:' }, + { type: 'output', content: ' • 天猫旗舰店：平台电商主战场，承担转化与复购，月GMV目标250万' }, + { type: 'output', content: ' • 抖音电商：内容电商+直播带货，快速爆发与声量扩散，月GMV目标180万' }, + { type: 'output', content: ' • 小红书：种草营销阵地，建立品牌心智与口碑，月新增笔记200+篇' }, + { type: 'output', content: ' • 私域运营：企业微信+社群，沉淀高价值用户，复购率目标35%' }, + { type: 'system', content: '' }, + { type: 'output', content: '数据驱动运营体系:' }, + { type: 'output', content: ' • 流量监控：日UV 5万+，跨平台流量分布监控' }, + { type: 'output', content: ' • 转化漏斗：曝光→点击→加购→成交全链路追踪，优化转化率至4.5%' }, + { type: 'output', content: ' • 用户生命周期：新客首购→30天二购→90天成为会员，LTV目标800元' }, + { type: 'output', content: ' • 舆情监控：实时监测品牌声量、用户评价、竞品动态' }, + { type: 'system', content: '' }, + { type: 'output', content: '大促节点规划:' }, + { type: 'output', content: ' • 38女王节：主推"换季敏感肌急救"，预售+直播，GMV目标500万' }, + { type: 'output', content: ' • 618年中大促：全店满减+赠品加码，冲击类目TOP10，GMV目标1200万' }, + { type: 'output', content: ' • 双11：超级品牌日+明星直播，破圈传播，GMV目标2500万' }, + { type: 'output', content: ' • 双12：清库存+会员专享，提升复购率，GMV目标800万' }, + { type: 'system', content: '' }, + { type: 'output', content: '团队协作与资源调配:' }, + { type: 'output', content: ' • 运营团队：5人（天猫2人+抖音2人+小红书1人）' }, + { type: 'output', content: ' • 客服团队：3人（售前2人+售后1人），工单响应时间≤3分钟' }, + { type: 'output', content: ' • 设计团队：2人（主图详情页+短视频素材）' }, + { type: 'output', content: ' • 仓储物流：合作第三方仓储，日发货能力3000单' }, + { type: 'output', content: ' • 月度预算：广告投放30万+达人合作20万+活动费用10万=60万' }, + { type: 'system', content: '' }, + { type: 'success', content: '✓ 全渠道运营策略制定完成（天猫+抖音+小红书+私域四位一体）' }, + { type: 'success', content: '✓ 年度GMV目标设定：首年3000万，次年8000万，三年破亿' }, + { type: 'success', content: '✓ 数据化运营体系建立（流量-转化-复购全链路数据看板）' }, + ], + }, + ], + completionSequence: [ + { type: 'system', content: '════════════════════════════════════' }, + { type: 'system', content: '' }, + { type: 'success', content: '🎉 可复美爽肤水电商全链路运营项目圆满完成！' }, + { type: 'system', content: '' }, + { type: 'output', content: '项目成果总结:' }, + { type: 'output', content: ' • 用户洞察：3大年龄段×4大肤质×6大功效诉求分层体系' }, + { type: 'output', content: ' • 竞品分析：4大品牌SWOT分析，差异化定位明确' }, + { type: 'output', content: ' • 产品规划：主推SKU确定，价格体系完善，毛利率45%+' }, + { type: 'output', content: ' • 视觉设计：3套宣传海报+4套小红书卡片+50张素材库' }, + { type: 'output', content: ' • 内容营销：小红书种草SOP+抖音直播运营+达人矩阵搭建' }, + { type: 'output', content: ' • 广告投放：50个关键词+3大广告形式+ROI目标3.0+' }, + { type: 'output', content: ' • 全局统筹：天猫+抖音+小红书+私域四大渠道运营方案' }, + { type: 'system', content: '' }, + { type: 'output', content: '交付物清单:' }, + { type: 'output', content: ' ✓ 用户调研报告（25页PPT）' }, + { type: 'output', content: ' ✓ 竞品分析报告（18页文档）' }, + { type: 'output', content: ' ✓ 选品策略方案（SKU规划+价格体系）' }, + { type: 'output', content: ' ✓ 视觉素材库（产品图+宣传海报+种草卡片，50+张）' }, + { type: 'output', content: ' ✓ 小红书种草SOP（内容矩阵+达人合作流程）' }, + { type: 'output', content: ' ✓ 天猫广告投放方案（关键词库+出价策略+预算分配）' }, + { type: 'output', content: ' ✓ 抖音直播运营手册（选品-话术-互动-复盘全流程）' }, + { type: 'output', content: ' ✓ 全渠道运营计划书（年度GMV目标+大促节点+团队配置）' }, + { type: 'system', content: '' }, + { type: 'output', content: '预期运营效果:' }, + { type: 'output', content: ' 📊 首年GMV目标：3000万（天猫1800万+抖音1000万+其他200万）' }, + { type: 'output', content: ' 📈 毛利率目标：45-50%，净利率15-20%' }, + { type: 'output', content: ' 🎯 用户规模：新增用户20万+，会员用户5万+' }, + { type: 'output', content: ' 🔁 复购率目标：35%+（行业平均25%）' }, + { type: 'output', content: ' ⭐ 品牌声量：小红书笔记2000+篇，抖音播放量5000万+' }, + { type: 'system', content: '' }, + { type: 'success', content: 'Agent的协作已完成，可复美爽肤水电商项目已成功启动！' }, + { type: 'system', content: '════════════════════════════════════' }, + ], +}); diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts index e6abf1e5..2fc37194 100644 --- a/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts @@ -13,11 +13,14 @@ import { energySimulation } from './energy'; import { transportationSimulation } from './transportation'; import { intelligentManufacturingSimulation } from './intelligentManufacturing'; import { developerSimulation } from './developer'; +import { financeSimulation } from './finance'; +import { environmentalSimulation } from './environmental'; +import { chemicalSimulation } from './chemical'; // 终端行类型定义 export interface TerminalLine { type: 'info' | 'success' | 'warning' | 'error' | 'system' | 'output' | 'progress' | 'install' | 'file' | 'image'; - content: string; + content?: string; // 改为可选,因为 image 类型不需要 content agent?: string; // 进度条相关 target?: number; @@ -59,6 +62,9 @@ export const simulationMap: Record = { transportation: transportationSimulation, // 交通物流 manufacturing: intelligentManufacturingSimulation, // 智能制造 developer: developerSimulation, // 智能开发 + finance: financeSimulation, // 财经商贸 + environmental: environmentalSimulation, // 环保 + chemical: chemicalSimulation, // 化工 // 其他订单班暂未实现，缺少agent prompt和头像数据 }; diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/transportation.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/transportation.ts index 43a0fdc5..addbb10f 100644 --- a/web_frontend/exhibition-demo/src/data/terminalSimulations/transportation.ts +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/transportation.ts @@ -116,6 +116,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[0], outputs: [ { type: 'info', content: '📋 需求分析师开始分析业务需求...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '业务调研分析', target: 100, stutters: [23, 56, 78] }, + { type: 'progress', content: '需求建模', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '识别核心痛点:' }, { type: 'output', content: ' • 人工拣选效率仅为常温区55%' }, { type: 'output', content: ' • 日出件量将达18万件' }, @@ -141,6 +145,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[1], outputs: [ { type: 'info', content: '🏗️ 系统架构师设计总体架构...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '架构分层设计', target: 100, stutters: [34, 67, 92] }, + { type: 'progress', content: '技术选型评估', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '设计五层架构体系:' }, { type: 'output', content: ' • 接入层: ERP/MES/WMS/TMS系统对接' }, { type: 'output', content: ' • 业务层: IWMS仓储管理 + TMS交通管理' }, @@ -166,6 +174,11 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[2], outputs: [ { type: 'info', content: '🤖 AGV算法工程师设计调度算法...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '路径规划算法', target: 100, stutters: [23, 45, 78, 95] }, + { type: 'progress', content: '调度策略优化', target: 100, stutters: [34, 67] }, + { type: 'progress', content: '仿真验证', target: 100, duration: 2000, stutters: [56, 89] }, + { type: 'system', content: '' }, { type: 'output', content: 'AGV导航系统设计:' }, { type: 'output', content: ' • 激光SLAM高精度定位' }, { type: 'output', content: ' • 低温环境误差补偿机制' }, @@ -217,6 +230,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[3], outputs: [ { type: 'info', content: '⚡ 能源工程师设计充电管理系统...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '充电策略设计', target: 100, stutters: [34, 56, 89] }, + { type: 'progress', content: '低温保护方案', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '智能充电策略:' }, { type: 'output', content: ' • 双模式充电: 快充1.5C + 慢充0.5C' }, { type: 'output', content: ' • 电量实时监测(SOC/SOH)' }, @@ -242,6 +259,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[4], outputs: [ { type: 'info', content: '❄️ 冷链技术总监设计环境适配方案...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '环境监测配置', target: 100, stutters: [23, 56, 78] }, + { type: 'progress', content: '低温适配优化', target: 100, stutters: [45, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '冷链环境感知:' }, { type: 'output', content: ' • 温湿度实时监测' }, { type: 'output', content: ' • 结霜检测传感器' }, @@ -260,6 +281,11 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[5], outputs: [ { type: 'info', content: '⚙️ 研发工程师实现核心功能...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '上位平台开发', target: 100, stutters: [34, 67, 92] }, + { type: 'progress', content: '嵌入式编程', target: 100, stutters: [23, 56] }, + { type: 'progress', content: 'PLC逻辑编写', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '上位调度平台开发:' }, { type: 'output', content: ' • 任务控制模块' }, { type: 'output', content: ' • 路径状态更新' }, @@ -283,6 +309,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[6], outputs: [ { type: 'info', content: '🔗 系统集成工程师设计联动方案...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '接口设计', target: 100, stutters: [45, 78] }, + { type: 'progress', content: '系统联调', target: 100, stutters: [34, 67, 89] }, + { type: 'system', content: '' }, { type: 'output', content: '系统集成架构:' }, { type: 'output', content: ' • WMS ↔ AGV调度平台' }, { type: 'output', content: ' • AGV平台 ↔ 充电系统' }, @@ -316,6 +346,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[7], outputs: [ { type: 'info', content: '🎨 视觉设计师整理技术文档...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '文档编制', target: 100, stutters: [23, 56, 89] }, + { type: 'progress', content: '界面设计', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '技术文档结构:' }, { type: 'output', content: ' • 项目背景与目标' }, { type: 'output', content: ' • 技术架构设计' }, @@ -343,6 +377,10 @@ export const transportationSimulation = (): SimulationData => ({ agent: () => transportationAgents[8], outputs: [ { type: 'info', content: '✅ 技术专家进行方案评审...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '架构评审', target: 100, stutters: [34, 67, 89] }, + { type: 'progress', content: '风险评估', target: 100, stutters: [45, 78] }, + { type: 'system', content: '' }, { type: 'output', content: '架构评审:' }, { type: 'output', content: ' ✓ 五层架构逻辑清晰' }, { type: 'output', content: ' ✓ 模块解耦合理' }, @@ -365,6 +403,11 @@ export const transportationSimulation = (): SimulationData => ({ { agent: () => transportationAgents[9], outputs: [ + { type: 'info', content: '📊 项目经理制定实施计划...' }, + { type: 'system', content: '' }, + { type: 'progress', content: '项目规划', target: 100, stutters: [23, 45, 78, 92] }, + { type: 'progress', content: '资源协调', target: 100, stutters: [34, 67] }, + { type: 'system', content: '' }, { type: 'info', content: '📊 项目经理制定实施计划...' }, { type: 'output', content: '项目周期规划:' }, { type: 'output', content: ' • 第1-2周: 详细设计与仿真验证' }, diff --git a/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx b/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx index e3aa34b9..3d5a9427 100644 --- a/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx +++ b/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx @@ -58,6 +58,7 @@ const WorkflowPageV4 = () => { const logoClickTimerRef = useRef(null); const statusRef = useRef(status); // const abortControllerRef = useRef(null); + const imageLoadPromisesRef = useRef<{ [key: string]: { resolve: () => void; reject: () => void } }>({}); // 更新 statusRef useEffect(() => { @@ -518,13 +519,26 @@ const WorkflowPageV4 = () => { setTerminalLines(prev => [...prev, newLine]); - // 如果是图片类型，设置加载状态 + // 如果是图片类型，设置加载状态并创建Promise if (line.type === 'image' && line.imageSrc) { setImageLoadingStates(prev => ({ ...prev, [lineId]: true })); - // 确保loading动画显示足够时间 - setTimeout(() => { - setImageLoadingStates(prev => ({ ...prev, [lineId]: false })); - }, getRandomDelay(2000, 3500)); + + // 创建一个Promise用于等待图片加载 + return new Promise((resolve) => { + imageLoadPromisesRef.current[lineId] = { + resolve, + reject: () => {} // 提供一个空的reject函数 + }; + + // 设置超时保护，防止图片加载失败导致永久阻塞 + setTimeout(() => { + if (imageLoadPromisesRef.current[lineId]) { + console.warn(`Image loading timeout for ${lineId}`); + resolve(); + delete imageLoadPromisesRef.current[lineId]; + } + }, 10000); // 10秒超时 + }); } // 自动滚动到底部 @@ -533,6 +547,8 @@ const WorkflowPageV4 = () => { terminalRef.current.scrollTop = terminalRef.current.scrollHeight; } }, 10); + + return Promise.resolve(); }, []); // 更新进度条行（覆盖同一行） @@ -705,25 +721,26 @@ const WorkflowPageV4 = () => { const stutters = (output as any).stutters || []; await executeProgress(output.content, stutters, agentData.name); } else { - addTerminalLine({ + // 等待图片加载完成 + const loadPromise = addTerminalLine({ ...output, agent: output.type === 'system' ? undefined : agentData.name }); - - // 根据类型设置延迟 - let delay = - output.type === 'system' ? getRandomDelay(100, 300) : - output.type === 'install' ? getRandomDelay(200, 400) : - output.type === 'file' ? getRandomDelay(100, 200) : - output.type === 'info' && output.content === '' ? 50 : - getRandomDelay(30, 100); - - // 如果是图片类型，等待图片加载完成 + + // 如果是图片类型，等待图片真正加载完成 if (output.type === 'image') { - delay = getRandomDelay(2500, 3500); // 等待图片加载动画完成 + await loadPromise; // 等待图片加载完成 + } else { + // 其他类型按原有逻辑延迟 + const delay = + output.type === 'system' ? getRandomDelay(100, 300) : + output.type === 'install' ? getRandomDelay(200, 400) : + output.type === 'file' ? getRandomDelay(100, 200) : + output.type === 'info' && output.content === '' ? 50 : + getRandomDelay(30, 100); + + await new Promise(resolve => setTimeout(resolve, delay)); } - - await new Promise(resolve => setTimeout(resolve, delay)); } } @@ -1122,15 +1139,15 @@ const WorkflowPageV4 = () => { {line.content} {line.imageSrc && ( -
- {imageLoadingStates[line.id] ? ( +
+ {imageLoadingStates[line.id] && ( // 简单的骨架屏Loading效果
{/* 骨架屏脉冲动画 */}
- + {/* 简单的loading指示器 */}
@@ -1140,21 +1157,37 @@ const WorkflowPageV4 = () => {
- ) : ( - // 实际图片（淡入效果） - { - e.currentTarget.style.display = 'none'; - }} - /> )} + {/* 实际图片（淡入效果）- 始终渲染以触发加载 */} + { + // 图片加载完成后，隐藏骨架屏并resolve对应的Promise + setImageLoadingStates(prev => ({ ...prev, [line.id]: false })); + if (imageLoadPromisesRef.current[line.id]) { + imageLoadPromisesRef.current[line.id].resolve(); + delete imageLoadPromisesRef.current[line.id]; + } + }} + onError={(e) => { + e.currentTarget.style.display = 'none'; + // 图片加载失败时也要隐藏骨架屏并resolve，避免阻塞 + setImageLoadingStates(prev => ({ ...prev, [line.id]: false })); + if (imageLoadPromisesRef.current[line.id]) { + imageLoadPromisesRef.current[line.id].resolve(); + delete imageLoadPromisesRef.current[line.id]; + } + }} + />
)}
diff --git a/web_frontend/web_result/app.js b/web_frontend/web_result/app.js index fe19f939..03f8271a 100644 --- a/web_frontend/web_result/app.js +++ b/web_frontend/web_result/app.js @@ -37,6 +37,8 @@ app.use('/order-class/data', express.static('order-classes/wenlu/data')); app.use('/order-class/food/css', express.static('order-classes/food/css')); app.use('/order-class/food/js', express.static('order-classes/food/js')); app.use('/order-class/food/data', express.static('order-classes/food/data')); +app.use('/order-class/food/images', express.static('order-classes/food/images')); +app.use('/order-class/food/agent-avatars', express.static('order-classes/food/agent-avatars')); // 日志中间件 app.use((req, res, next) => { diff --git a/web_frontend/web_result/order-classes/finance/agent-avatars b/web_frontend/web_result/order-classes/finance/agent-avatars new file mode 120000 index 00000000..90b8d3a3 --- /dev/null +++ b/web_frontend/web_result/order-classes/finance/agent-avatars @@ -0,0 +1 @@ +../../../../data/订单班文档资料/财经商贸/agent头像 \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/finance/css/styles.css b/web_frontend/web_result/order-classes/finance/css/styles.css new file mode 100644 index 00000000..e77501a1 --- /dev/null +++ b/web_frontend/web_result/order-classes/finance/css/styles.css @@ -0,0 +1,1144 @@ +/* 可复美爽肤水 - 财经商贸电商设计系统 */ + +/* ========== 设计变量 ========== */ +:root { + /* 专业蓝金主题 - 财经商贸风格 */ + --bg-dark: #f8f9fb; /* 浅色背景 */ + --bg-semi-dark: rgba(248, 249, 251, 0.95); /* 半透明浅色 */ + --bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */ + --bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */ + --primary-dark: #1e3a5f; /* 主色深蓝 */ + --primary-blue: #2563eb; /* 主色蓝 - 专业可信 */ + --accent-gold: #f59e0b; /* 金色强调 - 高端感 */ + --accent-gold-light: #fbbf24; /* 浅金色 */ + --text-light: #1a1a1a; /* 深色文字 */ + --text-gray: #666666; /* 灰色文字 */ + --border-light: rgba(37, 99, 235, 0.2); /* 蓝色边框 */ + --hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */ + --active-bg: rgba(37, 99, 235, 0.2); /* 激活背景 */ + + /* 间距系统 - 针对大屏幕优化 */ + --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 */ + --spacing-3xl: 8rem; /* 128px */ + + /* 字体系统 */ + --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; + --font-display: 'Inter', sans-serif; + + /* 字体大小 - 针对大屏幕优化 */ + --text-xs: 0.875rem; /* 14px */ + --text-sm: 1rem; /* 16px */ + --text-base: 1.125rem; /* 18px */ + --text-lg: 1.375rem; /* 22px */ + --text-xl: 1.625rem; /* 26px */ + --text-2xl: 2rem; /* 32px */ + --text-3xl: 2.5rem; /* 40px */ + --text-4xl: 3rem; /* 48px */ + --text-5xl: 4rem; /* 64px */ + + /* 字重 */ + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + + /* 圆角 */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-2xl: 1.5rem; + --radius-full: 9999px; + + /* 阴影 - 轻盈专业主题 */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 2px 4px rgba(0,0,0,0.08); + --shadow-lg: 0 4px 8px rgba(0,0,0,0.1); + --shadow-xl: 0 8px 16px rgba(0,0,0,0.12); + --shadow-gold: 0 2px 8px rgba(245, 158, 11, 0.15); + + /* 过渡 */ + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 350ms ease; + + /* 布局 */ + --container-max: 1600px; /* 增加最大宽度适配1920屏幕 */ +} + +/* ========== 深色主题 - 深邃蓝金配色 ========== */ +body.dark-theme { + --bg-dark: #0f1419; /* 深邃夜蓝背景 */ + --bg-semi-dark: rgba(15, 20, 25, 0.95); /* 深蓝半透明 */ + --bg-overlay: rgba(18, 24, 31, 0.85); /* 深蓝遮罩层 */ + --bg-card: rgba(22, 30, 39, 0.9); /* 深蓝卡片背景 */ + --primary-dark: #1e3a5f; /* 中度深蓝 */ + --primary-blue: #3b82f6; /* 明亮蓝 */ + --accent-gold: #d97706; /* 深金色 */ + --accent-gold-light: #f59e0b; /* 亮金色 */ + --text-light: #e5e7eb; /* 浅色文字 */ + --text-gray: #9ca3af; /* 灰色文字 */ + --border-light: rgba(59, 130, 246, 0.25); /* 蓝色边框 */ + --hover-bg: rgba(217, 119, 6, 0.15); /* 悬停背景 */ + --active-bg: rgba(59, 130, 246, 0.2); /* 激活背景 */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); + --shadow-md: 0 2px 4px rgba(0,0,0,0.5); + --shadow-lg: 0 4px 8px rgba(0,0,0,0.6); + --shadow-xl: 0 8px 16px rgba(0,0,0,0.7); + --shadow-gold: 0 2px 8px rgba(217, 119, 6, 0.25); +} + +/* ========== 重置样式 ========== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-primary); + font-size: var(--text-base); + line-height: 1.6; + color: var(--text-light); + background-color: var(--bg-dark); + overflow-x: hidden; +} + +/* ========== Hero 区域 - 全屏图片背景 ========== */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 0.95) 100%), + url('../images/化妆品拍摄图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; + position: relative; + overflow: hidden; +} + +/* 深色主题下的Hero渐变 */ +body.dark-theme .hero { + background: + linear-gradient(135deg, rgba(15, 20, 25, 0.9) 0%, rgba(18, 24, 31, 0.8) 100%), + url('../images/化妆品拍摄图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.hero::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 50%); + pointer-events: none; + animation: glow 8s ease-in-out infinite; +} + +@keyframes glow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } +} + +.hero-content { + text-align: center; + color: var(--text-light); + z-index: 1; + position: relative; + padding: var(--spacing-xl); + max-width: 900px; +} + +.hero-badge { + display: inline-block; + padding: var(--spacing-md) var(--spacing-xl); + background: rgba(245, 158, 11, 0.15); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: var(--radius-full); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + letter-spacing: 0.1em; + margin-bottom: var(--spacing-xl); + border: 3px solid var(--accent-gold); + box-shadow: var(--shadow-gold); + text-transform: uppercase; + transition: all var(--transition-base); +} + +.hero-badge:hover { + background: rgba(245, 158, 11, 0.25); + transform: translateY(-2px); +} + +.hero-title { + font-size: clamp(3.5rem, 10vw, 6.5rem); + font-weight: var(--font-bold); + margin-bottom: var(--spacing-lg); + letter-spacing: -0.02em; + line-height: 1.1; + color: var(--accent-gold-light); + text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(245, 158, 11, 0.4); +} + +.hero-subtitle { + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: var(--font-light); + opacity: 0.95; + margin-bottom: var(--spacing-xl); + color: var(--text-light); +} + +.hero-description { + font-size: var(--text-xl); + opacity: 0.85; + max-width: 800px; + margin: 0 auto; + line-height: 1.8; +} + +/* ========== 导航 - 深色玻璃态 ========== */ +.nav { + position: sticky; + top: 0; + z-index: 100; + background: var(--bg-semi-dark); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border-light); + padding: var(--spacing-md) 0; + box-shadow: var(--shadow-md); +} + +.nav-container { + display: flex; + justify-content: center; + gap: var(--spacing-sm); + flex-wrap: wrap; + padding: 0 var(--spacing-md); +} + +.nav-item { + padding: var(--spacing-sm) var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + cursor: pointer; + transition: all var(--transition-base); + font-weight: var(--font-medium); + display: flex; + align-items: center; + gap: var(--spacing-xs); + color: var(--text-gray); +} + +.nav-item i { + width: 20px; + height: 20px; + stroke-width: 2; +} + +.nav-item span { + font-size: var(--text-base); +} + +.nav-item:hover { + background: var(--hover-bg); + color: var(--accent-gold); + transform: translateY(-2px); + box-shadow: var(--shadow-gold); +} + +.nav-item.active { + background: var(--active-bg); + color: var(--primary-blue); + border-color: var(--primary-blue); + box-shadow: var(--shadow-gold); +} + +/* ========== 内容区块 - 图片背景 ========== */ +.section { + padding: var(--spacing-2xl) 0; + background: var(--bg-dark); + position: relative; +} + +/* 浅色图片背景 - 每个区块使用不同图片 */ +.section:nth-child(1) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/爽肤水产品图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(2) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/爽肤水产品宣传拍摄-绿植背景.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(3) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/小红书发帖卡片设计1.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(4) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/平台电商优势展示图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(5) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/内容电商优势展示.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(6) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/广告封面设计图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 通用奇偶区块（当超过6个section时） */ +.section:nth-child(n+7):nth-child(odd) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/产品推荐榜与热销.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(n+7):nth-child(even) { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 251, 1) 100%), + url('../images/淘宝关键词搜索图1.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 深色主题下的区块背景 - 每个区块使用对应图片 */ +body.dark-theme .section:nth-child(1) { + background-image: + linear-gradient(to bottom, rgba(15, 20, 25, 0.92) 0%, rgba(18, 24, 31, 0.88) 100%), + url('../images/爽肤水产品图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(2) { + background-image: + linear-gradient(to bottom, rgba(18, 24, 31, 0.90) 0%, rgba(15, 20, 25, 0.88) 100%), + url('../images/爽肤水产品宣传拍摄-绿植背景.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(3) { + background-image: + linear-gradient(to bottom, rgba(15, 20, 25, 0.92) 0%, rgba(18, 24, 31, 0.88) 100%), + url('../images/小红书发帖卡片设计1.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(4) { + background-image: + linear-gradient(to bottom, rgba(18, 24, 31, 0.90) 0%, rgba(15, 20, 25, 0.88) 100%), + url('../images/平台电商优势展示图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(5) { + background-image: + linear-gradient(to bottom, rgba(15, 20, 25, 0.92) 0%, rgba(18, 24, 31, 0.88) 100%), + url('../images/内容电商优势展示.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(6) { + background-image: + linear-gradient(to bottom, rgba(18, 24, 31, 0.90) 0%, rgba(15, 20, 25, 0.88) 100%), + url('../images/广告封面设计图.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 通用奇偶区块（当超过6个section时） */ +body.dark-theme .section:nth-child(n+7):nth-child(odd) { + background-image: + linear-gradient(to bottom, rgba(15, 20, 25, 0.92) 0%, rgba(18, 24, 31, 0.88) 100%), + url('../images/产品推荐榜与热销.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(n+7):nth-child(even) { + background-image: + linear-gradient(to bottom, rgba(18, 24, 31, 0.90) 0%, rgba(15, 20, 25, 0.88) 100%), + url('../images/淘宝关键词搜索图1.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 深色主题下的特定元素调整 */ +body.dark-theme .stat-item { + background: rgba(22, 30, 39, 0.8); + backdrop-filter: blur(5px); +} + +body.dark-theme .stat-item:hover { + background: rgba(59, 130, 246, 0.15); + border-color: var(--primary-blue); +} + +body.dark-theme .stat-value { + color: var(--accent-gold-light); +} + +body.dark-theme th { + background: rgba(59, 130, 246, 0.12); + color: var(--accent-gold-light); +} + +body.dark-theme tr:hover { + background: rgba(59, 130, 246, 0.08); +} + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +.section-header { + display: flex; + align-items: center; + gap: var(--spacing-lg); + margin-bottom: var(--spacing-xl); + padding: var(--spacing-lg); + background: var(--bg-card); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); +} + +.agent-avatar { + width: 100px; + height: 100px; + border-radius: var(--radius-xl); + object-fit: cover; + border: 3px solid var(--primary-blue); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); +} + +.agent-avatar:hover { + transform: scale(1.05); + box-shadow: var(--shadow-lg); + border-color: var(--accent-gold); +} + +.agent-info { + flex: 1; +} + +.agent-name { + font-size: var(--text-lg); + color: var(--primary-blue); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-sm); + font-weight: var(--font-semibold); +} + +.section-title { + font-size: var(--text-4xl); + font-weight: var(--font-bold); + color: var(--text-light); + letter-spacing: -0.01em; + text-shadow: none; + position: relative; + padding-bottom: var(--spacing-sm); +} + +.section-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 180px; + height: 4px; + background: linear-gradient(90deg, var(--accent-gold), transparent); + border-radius: 2px; +} + +.section-content { + max-width: 100%; /* 使用全宽 */ + margin: 0 auto; +} + +.expert-intro { + background: var(--bg-card); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + margin-bottom: var(--spacing-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); +} + +.expert-intro h3 { + font-size: var(--text-2xl); + color: var(--primary-blue); + margin-bottom: var(--spacing-lg); + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.expert-intro p { + color: var(--text-gray); + line-height: 1.8; + font-size: var(--text-lg); +} + +/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */ +.grid { + display: grid; + gap: var(--spacing-2xl); +} + +.grid-2 { + grid-template-columns: repeat(2, 1fr); /* 固定2列,每列更宽 */ +} + +.grid-3 { + grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */ +} + +.grid-4 { + grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */ +} + +/* ========== 卡片 - 图片优先布局 ========== */ +.card { + background: var(--bg-card); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + padding: 0; /* 移除内边距,让图片可以占满 */ + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.card-header { + padding: var(--spacing-xl); + background: var(--bg-semi-dark); + border-bottom: 2px solid var(--border-light); + order: 2; /* 标题放在图片下方 */ +} + +.card-title { + font-size: var(--text-2xl); + font-weight: var(--font-semibold); + color: var(--primary-blue); + margin-bottom: var(--spacing-sm); +} + +.card-body { + padding: var(--spacing-xl); + order: 3; /* 内容放在最后 */ + flex: 1; +} + +/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */ +.image-container { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */ + overflow: hidden; + border-radius: 0; /* 在卡片内时不需要圆角 */ + margin-bottom: 0; /* 移除底部边距 */ + background: rgba(0,0,0,0.5); + position: relative; + box-shadow: none; /* 卡片本身有阴影 */ + border: none; /* 移除边框 */ + transition: all var(--transition-base); + order: 1; /* 图片放在最前面 */ + flex-shrink: 0; /* 防止图片被压缩 */ +} + +.image-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); +} + +.image-container:hover img { + transform: scale(1.1); + filter: brightness(1.1); +} + +.image-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--spacing-md); + background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); + color: var(--text-light); + font-size: var(--text-sm); + font-weight: var(--font-medium); + text-align: center; + transform: translateY(100%); + transition: transform var(--transition-base); +} + +.image-container:hover .image-caption { + transform: translateY(0); +} + +/* ========== 列表 ========== */ +.feature-list { + list-style: none; + padding: 0; +} + +.feature-list li { + padding: var(--spacing-sm) 0; + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); + transition: all var(--transition-fast); +} + +.feature-list li:hover { + color: var(--primary-blue); + padding-left: var(--spacing-sm); +} + +.feature-list li:last-child { + border-bottom: none; +} + +/* ========== 统计数据 ========== */ +.stats { + display: flex; + gap: var(--spacing-md); + padding: var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); +} + +.stat-item { + flex: 1; + text-align: center; + padding: var(--spacing-md); + border-radius: var(--radius-md); + background: var(--bg-card); + border: 1px solid transparent; + transition: all var(--transition-base); +} + +.stat-item:hover { + background: var(--hover-bg); + transform: translateY(-4px); + border-color: var(--border-light); + box-shadow: var(--shadow-md); +} + +.stat-label { + font-size: var(--text-sm); + color: var(--text-gray); + margin-bottom: var(--spacing-xs); +} + +.stat-value { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary-blue); + text-shadow: none; +} + +/* ========== 图表化统计数据 ========== */ +.stats-chart { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + padding: var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); +} + +.stat-item-chart { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.stat-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.stat-bar { + width: 100%; + height: 12px; + background: var(--active-bg); + border-radius: var(--radius-full); + overflow: hidden; + position: relative; +} + +.stat-bar-fill { + height: 100%; + background: linear-gradient(90deg, var(--bg-overlay),var(--primary-blue) ); + border-radius: var(--radius-full); + transition: width 1s ease-out; + position: relative; + animation: fillBar 1.5s ease-out; +} + +@keyframes fillBar { + from { + width: 0 !important; + } +} + +.stat-item-chart .stat-label { + font-size: var(--text-base); + color: var(--text-gray); + font-weight: var(--font-medium); +} + +.stat-item-chart .stat-value { + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--primary-blue); +} + +/* ========== 表格 ========== */ +.table-container { + overflow-x: auto; + margin: var(--spacing-xl) 0; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); +} + +table { + width: 100%; + border-collapse: collapse; + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + overflow: hidden; +} + +th { + background: var(--active-bg); + color: var(--primary-blue); + padding: var(--spacing-md); + text-align: left; + font-weight: var(--font-semibold); + border-bottom: 2px solid var(--primary-blue); +} + +td { + padding: var(--spacing-md); + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); +} + +tr:last-child td { + border-bottom: none; +} + +tr:hover { + background: var(--hover-bg); +} + +/* ========== 产品展示 - 超大气布局 ========== */ +.product-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 固定2列,产品卡片更大 */ + gap: var(--spacing-2xl); + margin: var(--spacing-2xl) 0; +} + +.product-card { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + padding: 0; /* 移除内边距 */ + display: flex; + flex-direction: column; +} + +.product-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.product-image { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */ + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); + order: 1; /* 图片放在最前面 */ +} + +.product-card:hover .product-image { + transform: scale(1.05); + filter: brightness(1.0); +} + +.product-info { + padding: var(--spacing-xl); + background: var(--bg-semi-dark); + order: 2; /* 信息放在图片下方 */ +} + +.product-name { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--primary-blue); + margin-bottom: var(--spacing-sm); +} + +.product-desc { + font-size: var(--text-base); + color: var(--text-gray); +} + +/* ========== 响应式 ========== */ +@media (max-width: 768px) { + :root { + --spacing-sm: 0.75rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + --spacing-3xl: 4rem; + } + + .hero { + background-attachment: scroll; + } + + .section:nth-child(odd), + .section:nth-child(even) { + background-attachment: scroll; + } + + .hero-content { + padding: var(--spacing-lg); + } + + .nav-container { + gap: var(--spacing-xs); + } + + .nav-item { + padding: var(--spacing-xs) var(--spacing-md); + font-size: var(--text-sm); + } + + .section { + padding: var(--spacing-2xl) 0; + } + + .grid-2, + .grid-3, + .grid-4 { + grid-template-columns: 1fr; + } + + .section-header { + flex-direction: column; + text-align: center; + } + + .stats { + flex-direction: column; + } +} + +/* ========== 动画 ========== */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +} + +.fade-in { + animation: fadeIn 0.6s ease forwards; +} + +.slide-in { + animation: slideIn 0.6s ease forwards; +} + +/* ========== 工具类 ========== */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +.hidden { display: none; } +.block { display: block; } +.flex { display: flex; } +.grid { display: grid; } + +.gap-sm { gap: var(--spacing-sm); } +.gap-md { gap: var(--spacing-md); } +.gap-lg { gap: var(--spacing-lg); } + +/* ========== 图片加载状态 ========== */ +img { + transition: opacity var(--transition-base); +} + +img.loaded { + opacity: 1; +} + +img.error { + opacity: 0.5; + filter: grayscale(1); +} + +/* ========== SVG图标尺寸统一管理 ========== */ +/* 根据不同区域设置合适的图标尺寸 */ + +/* Hero区域图标 */ +.hero-description i[data-lucide] { + width: 24px !important; + height: 24px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* Agent名称图标 */ +.agent-name i[data-lucide] { + width: 20px !important; + height: 20px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* h3标题图标 - 较大 */ +.expert-intro h3 i[data-lucide], +.alternating-content h3 i[data-lucide], +.timeline-content h3 i[data-lucide], +.step-card-title i[data-lucide], +.hero-image-overlay h3 i[data-lucide], +.stack-card-title i[data-lucide] { + width: 40px !important; + height: 40px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 10px !important; +} + +/* 列表项图标 - 小号 */ +.feature-list li i[data-lucide] { + width: 18px !important; + height: 18px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* 迷你卡片图标 - 大号 */ +.mini-card-icon i[data-lucide] { + width: 32px !important; + height: 32px !important; + display: block !important; +} + +/* 堆叠卡片图标 - 大号 */ +.stack-card-icon i[data-lucide] { + width: 32px !important; + height: 32px !important; + display: block !important; +} + +/* 导航图标 */ +.nav-item i[data-lucide] { + width: 20px !important; + height: 20px !important; + display: block !important; + margin: 0 auto 4px !important; +} + +/* ========== 主题切换按钮 ========== */ +.theme-toggle { + position: fixed; + top: 24px; + right: 24px; + z-index: 1000; +} + +.theme-toggle-btn { + position: relative; + width: 64px; + height: 32px; + background: var(--bg-card); + border: 2px solid var(--border-light); + border-radius: var(--radius-full); + cursor: pointer; + padding: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 6px; + transition: all var(--transition-base); + box-shadow: var(--shadow-md); +} + +.theme-toggle-btn:hover { + transform: scale(1.05); + box-shadow: var(--shadow-lg); +} + +.theme-toggle-btn:active { + transform: scale(0.95); +} + +.theme-icon { + width: 18px !important; + height: 18px !important; + transition: all var(--transition-base); + color: var(--text-gray); +} + +/* 明亮主题下的图标状态 */ +body:not(.dark-theme) .theme-icon-light { + color: var(--accent-gold); + transform: scale(1.2); +} + +body:not(.dark-theme) .theme-icon-dark { + opacity: 0.5; +} + +/* 深色主题下的图标状态 */ +body.dark-theme .theme-icon-dark { + color: var(--primary-blue); + transform: scale(1.2); +} + +body.dark-theme .theme-icon-light { + opacity: 0.5; +} \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/finance/images b/web_frontend/web_result/order-classes/finance/images new file mode 120000 index 00000000..ac5116bd --- /dev/null +++ b/web_frontend/web_result/order-classes/finance/images @@ -0,0 +1 @@ +../../../../data/订单班文档资料/财经商贸/notion文稿/image \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/finance/index.html b/web_frontend/web_result/order-classes/finance/index.html new file mode 100644 index 00000000..a9efec4e --- /dev/null +++ b/web_frontend/web_result/order-classes/finance/index.html @@ -0,0 +1,711 @@ + + + + + + 可复美爽肤水 - 财经商贸电商全链路运营 + + + + + +
+ +
+ + +
+
+
💼 财经商贸订单班
+

可复美爽肤水

+

电商全链路运营项目

+

+ 从0到1打造化妆品电商爆款
+ 7大专业Agent协同作战
+ 首年GMV目标3000万 +

+
+
+ + + + + +
+
+
+ 用户分析师 +
+
+ 用户分析师 +
+

用户调研与市场洞察

+
+
+ +
+
+

精准用户画像

+

通过多维度数据分析，精准定位目标用户群体。核心用户：25-34岁混干肌女性，月收入8000+，关注成分与功效，偏好内容种草型购买决策。

+
+ +
+
+
+ 油皮人群特征 +
18-24岁油皮人群
+
+
+

年轻油皮群体

+
+
+
    +
  • 控油清洁诉求强
    • +
  • 价格敏感度高
    • +
  • 偏好清爽质地
    • +
  • 抖音/B站活跃
    • +
+
+
+ +
+
+ 初抗老混干人群 +
25-34岁初抗老人群
+
+
+

初抗老混干肌

+
+
+
    +
  • 保湿修护需求
    • +
  • 成分党友好
    • +
  • 品质>价格
    • +
  • 小红书重度用户
    • +
+
+
+ +
+
+ 抗老干皮人群 +
35-45岁抗老人群
+
+
+

熟龄抗老干皮

+
+
+
    +
  • 抗老紧致诉求
    • +
  • 高端产品偏好
    • +
  • 信赖专业背书
    • +
  • 天猫京东主购
    • +
+
+
+
+ +
+

用户数据分析

+
+
+ 用户洞察覆盖 + 0万+ +
+
+
+
+
+
+
+ 竞品分析数量 + 0个 +
+
+
+
+
+
+
+
+
+ + +
+
+
+ 竞品分析师 +
+
+ 竞品分析师 +
+

竞品研究与市场定位

+
+
+ +
+
+

差异化定位策略

+

通过4大竞品SWOT分析，发现中高端+多场景+成分透明的市场空白点。定位中档偏上价格带（179-259元），主打屏障修护+舒缓保湿双核心功效。

+
+ +
+ 竞品分析图表 +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
竞品品牌品牌背景核心卖点价格区间优势劣势
薇诺娜医学护肤背景敏感肌专家定位200-400元专业度强但场景延展性弱
敷尔佳医美渠道起家术后修护标签150-350元成分党友好但品牌延伸过快
悦木之源雅诗兰黛集团菌菇水爆款300-500元国际大牌但性价比低
自然堂国货大众路线喜马拉雅植物100-200元渠道下沉强但功效性弱
+
+
+
+
+ + +
+
+
+ 产品经理 +
+
+ 产品经理 +
+

选品策略与产品规划

+
+
+ +
+
+

产品矩阵设计

+

主推可复美爽肤水作为流量爆款，150ml主力款+300ml大容量礼盒装。日常价199元，大促价169元，礼盒装299元(赠小样)，目标毛利率45-50%。

+
+ +
+
+ 可复美爽肤水 +
+

可复美爽肤水 150ml

+

+ 屏障修护+舒缓保湿双核心功效
+ 日常价: ¥199 | 大促价: ¥169 +

+
+
+ +
+ 礼盒装 +
+

豪华礼盒装 300ml

+

+ 大容量装+赠送试用装小样
+ 礼盒价: ¥299 | 超值优惠装 +

+
+
+
+ +
+
+
选品准确率
+
0%
+
+
+
设计质量评分
+
0%
+
+
+
目标毛利率
+
45-50%
+
+
+
+
+
+ + +
+
+
+ 电商店铺平面设计师 +
+
+ 电商店铺平面设计师 +
+

视觉设计与素材制作

+
+
+ +
+
+

视觉营销体系

+

3套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。

+
+ +
+
+
+ 深层补水主题 +
深层补水主题海报
+
+
+

深层补水系列

+
+
+

30秒提升角质层含水量，7天改善泛红干痒，深海般的补水体验。

+
+
+ +
+
+ 科学配方主题 +
科学配方主题海报
+
+
+

科学配方系列

+
+
+

皮肤学精准配方，无酒精/无香精/无色素，敏感肌安心之选。

+
+
+
+ +
+
+
+ 小红书卡片1 +
+
+
+
+ 小红书卡片2 +
+
+
+
+ 小红书卡片3 +
+
+
+
+ 小红书卡片4 +
+
+
+
+
+
+ + +
+
+
+ 内容电商运营专员 +
+
+ 内容电商运营专员 +
+

内容营销与达人合作

+
+
+ +
+
+

内容电商策略

+

小红书种草→天猫转化→抖音复购的跨平台转化链路。头部KOL 2名+腰部达人15名+尾部KOC 50名的达人矩阵，月新增笔记200+篇。

+
+ +
+
+
+ 内容电商优势 +
+
+

内容电商优势

+
+
+
    +
  • 精准种草触达
    • +
  • 高转化率
    • +
  • 用户粘性强
    • +
  • 口碑传播快
    • +
+
+
+ +
+
+

直播运营节奏

+
+
+
    +
  • 每周3场常规直播
    • +
  • 单场GMV目标50万+
    • +
  • 抽奖福利+限时秒杀
    • +
  • 实时监控GPM数据
    • +
+
+
+
+ +
+
+
内容触达量
+
0万+
+
+
+
转化率
+
4.5%
+
+
+
复购率目标
+
35%
+
+
+
+
+
+ + +
+
+
+ 广告投放师 +
+
+ 广告投放师 +
+

平台广告投放与优化

+
+
+ +
+
+

精准投放策略

+

50个精选关键词+3大广告形式组合投放。搜索广告ROI目标≥3.5，推荐广告ROI≥2.8，预算分配：搜索50%、推荐30%、品牌20%。

+
+ +
+
+
+ 搜索广告示例 +
+
+

搜索直通车

+
+
+

核心词+长尾词组合，精准捕获购买意向用户。

+
+
+ +
+
+ 推荐位展示 +
+
+

超级推荐

+
+
+

"猜你喜欢"定向推送，触达潜在兴趣用户。

+
+
+ +
+
+ 品牌广告 +
+
+

品销宝

+
+
+

首页焦点图+类目坑位，提升品牌曝光度。

+
+
+
+ +
+

投放效果指标

+
+
+ 广告ROI + 0% +
+
+
+
+
+
+
+ 点击率CTR + 3.2% +
+
+
+
+
+
+
+
+
+ + +
+
+
+ 新媒体运营总监 +
+
+ 新媒体运营总监 +
+

全渠道运营统筹

+
+
+ +
+
+

全渠道协同作战

+

天猫+抖音+小红书+私域四位一体运营体系。首年GMV目标3000万，次年8000万，三年破亿。月度预算60万（广告30万+达人20万+活动10万）。

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
运营渠道定位职能月GMV目标核心指标
天猫旗舰店平台电商主战场250万转化率4.5%+
抖音电商内容电商+直播180万GPM 500+
小红书种草营销阵地-月新增200+笔记
私域运营高价值用户沉淀50万复购率35%+
+
+ +
+
+
月度销售额
+
0万元
+
+
+
增长率
+
0%
+
+
+
年度GMV目标
+
3000万
+
+
+ +
+

大促节点规划

+
+
+
+
+

38女王节

+
+
+

换季敏感肌急救
GMV目标: 500万

+
+
+
+
+

618年中大促

+
+
+

冲击类目TOP10
GMV目标: 1200万

+
+
+
+
+

双11狂欢

+
+
+

超级品牌日
GMV目标: 2500万

+
+
+
+
+

双12返场

+
+
+

清库存+会员专享
GMV目标: 800万

+
+
+
+
+
+
+
+
+ + +
+
+

+ 项目成果总结 +

+ +
+
+
+

📋 交付物清单

+
+
+
    +
  • 用户调研报告（25页）
    • +
  • 竞品分析报告（18页）
    • +
  • 选品策略方案
    • +
  • 视觉素材库（50+张）
    • +
  • 小红书种草SOP
    • +
  • 天猫投放方案
    • +
  • 抖音运营手册
    • +
  • 全渠道计划书
    • +
+
+
+ +
+
+

📊 预期效果

+
+
+
    +
  • 首年GMV 3000万
    • +
  • 毛利率 45-50%
    • +
  • 新增用户 20万+
    • +
  • 复购率 35%+
    • +
  • 小红书笔记 2000+
    • +
  • 抖音播放 5000万+
    • +
  • 类目排名 TOP10
    • +
  • 净利率 15-20%
    • +
+
+
+ +
+
+

🤝 团队配置

+
+
+
    +
  • 运营团队 5人
    • +
  • 客服团队 3人
    • +
  • 设计团队 2人
    • +
  • 仓储物流 3000单/日
    • +
  • 月度预算 60万
    • +
  • 7大Agent协同
    • +
  • 4大渠道运营
    • +
  • 7×24小时监控
    • +
+
+
+
+ +
+

🎉 可复美爽肤水电商全链路运营项目圆满完成！

+

© 2024 财经商贸订单班 | AI驱动的电商运营解决方案

+
+
+
+ + + + \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/finance/js/main.js b/web_frontend/web_result/order-classes/finance/js/main.js new file mode 100644 index 00000000..75fcf205 --- /dev/null +++ b/web_frontend/web_result/order-classes/finance/js/main.js @@ -0,0 +1,278 @@ +// 可复美爽肤水电商 - 主要JavaScript逻辑 + +// 页面初始化 +document.addEventListener('DOMContentLoaded', function() { + console.log('💰 财经商贸电商页面加载完成'); + + // 初始化Lucide图标 + if (typeof lucide !== 'undefined') { + lucide.createIcons(); + } + + // 初始化组件 + initNavigation(); + initAnimations(); + initLazyLoading(); + initSmoothScroll(); + updateStats(); + initThemeToggle(); +}); + +// 导航功能 +function initNavigation() { + const navItems = document.querySelectorAll('.nav-item'); + const sections = document.querySelectorAll('.section'); + + // 点击导航项滚动到对应区块 + navItems.forEach((item, index) => { + item.addEventListener('click', () => { + // 移除所有活跃状态 + navItems.forEach(nav => nav.classList.remove('active')); + // 添加当前活跃状态 + item.classList.add('active'); + + // 滚动到对应区块 + if (sections[index]) { + const targetSection = sections[index]; + const offsetTop = targetSection.offsetTop - 100; + + window.scrollTo({ + top: offsetTop, + behavior: 'smooth' + }); + } + }); + }); + + // 滚动时更新导航活跃状态 + window.addEventListener('scroll', () => { + let current = ''; + sections.forEach((section, index) => { + const sectionTop = section.offsetTop - 150; + if (scrollY >= sectionTop) { + current = index; + } + }); + + navItems.forEach((item, index) => { + item.classList.remove('active'); + if (index === current) { + item.classList.add('active'); + } + }); + }); +} + +// 动画初始化 +function initAnimations() { + // 使用 Intersection Observer 实现滚动动画 + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + // 观察所有需要动画的元素 + const animatedElements = document.querySelectorAll('.card, .expert-intro, .product-card'); + animatedElements.forEach(el => { + el.style.opacity = '0'; + observer.observe(el); + }); +} + +// 图片懒加载 +function initLazyLoading() { + const images = document.querySelectorAll('img[data-src]'); + + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + const src = img.getAttribute('data-src'); + + // 创建新图片对象来预加载 + const tempImg = new Image(); + tempImg.onload = function() { + img.src = src; + img.classList.add('loaded'); + }; + tempImg.onerror = function() { + // 如果图片加载失败，使用占位图 + img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0f8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片加载中%3C/text%3E%3C/svg%3E'; + img.classList.add('error'); + }; + tempImg.src = src; + + img.removeAttribute('data-src'); + observer.unobserve(img); + } + }); + }); + + images.forEach(img => { + imageObserver.observe(img); + }); +} + +// 平滑滚动 +function initSmoothScroll() { + // 为所有锚点链接添加平滑滚动 + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); +} + +// 更新统计数据 - 电商运营数据 +function updateStats() { + // 动画数字增长效果 - 财经商贸相关数据 + const stats = [ + { selector: '.customer-insights', value: 3, suffix: '万+' }, + { selector: '.competitor-analysis', value: 12, suffix: '个' }, + { selector: '.product-selection', value: 89, suffix: '%' }, + { selector: '.design-quality', value: 95, suffix: '%' }, + { selector: '.content-reach', value: 50, suffix: '万+' }, + { selector: '.ad-roi', value: 420, suffix: '%' }, + { selector: '.monthly-sales', value: 280, suffix: '万元' }, + { selector: '.growth-rate', value: 156, suffix: '%' } + ]; + + stats.forEach(stat => { + const element = document.querySelector(stat.selector); + if (element) { + animateValue(element, 0, stat.value, 2000, stat.suffix); + } + }); +} + +// 数字动画函数 +function animateValue(element, start, end, duration, suffix = '') { + const startTime = performance.now(); + + function update(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + + // 使用缓动函数 + const easeOutQuad = progress * (2 - progress); + const current = Math.floor(start + (end - start) * easeOutQuad); + + element.textContent = current + suffix; + + if (progress < 1) { + requestAnimationFrame(update); + } + } + + requestAnimationFrame(update); +} + +// 产品展示切换 +function initProductShowcase() { + const productCards = document.querySelectorAll('.product-card'); + + productCards.forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-8px) scale(1.02)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + }); + }); +} + +// 错误处理 +window.addEventListener('error', function(e) { + if (e.target.tagName === 'IMG') { + console.warn('图片加载失败:', e.target.src); + e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0f8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E'; + e.target.classList.add('error'); + } +}, true); + +// 移动端优化 +if ('ontouchstart' in window) { + document.body.classList.add('touch-device'); + + // 移动端点击优化 + let touchStartTime; + document.addEventListener('touchstart', () => { + touchStartTime = Date.now(); + }); + + document.addEventListener('touchend', (e) => { + const touchEndTime = Date.now(); + if (touchEndTime - touchStartTime < 200) { + // 快速点击 + e.preventDefault(); + } + }); +} + +// 性能监控 +if (window.performance && window.performance.timing) { + window.addEventListener('load', () => { + setTimeout(() => { + const timing = window.performance.timing; + const loadTime = timing.loadEventEnd - timing.navigationStart; + console.log(`页面加载时间: ${loadTime}ms`); + + // 如果加载时间过长，提示用户 + if (loadTime > 3000) { + console.warn('页面加载时间较长，可能需要优化'); + } + }, 0); + }); +} + +// 主题切换功能 +function initThemeToggle() { + const themeToggleBtn = document.getElementById('themeToggleBtn'); + + // 从localStorage读取用户的主题偏好 + const savedTheme = localStorage.getItem('theme'); + // 如果没有保存的偏好，默认使用暗色主题 + if (savedTheme === 'dark' || savedTheme === null) { + document.body.classList.add('dark-theme'); + } + + // 点击切换主题 + if (themeToggleBtn) { + themeToggleBtn.addEventListener('click', () => { + document.body.classList.toggle('dark-theme'); + + // 保存用户偏好 + if (document.body.classList.contains('dark-theme')) { + localStorage.setItem('theme', 'dark'); + } else { + localStorage.setItem('theme', 'light'); + } + + // 重新初始化图标以确保正确显示 + if (typeof lucide !== 'undefined') { + lucide.createIcons(); + } + }); + } +} \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/food/agent-avatars b/web_frontend/web_result/order-classes/food/agent-avatars new file mode 120000 index 00000000..6e675e6c --- /dev/null +++ b/web_frontend/web_result/order-classes/food/agent-avatars @@ -0,0 +1 @@ +../../../../data/订单班文档资料/食品/agent头像 \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/food/css/styles.css b/web_frontend/web_result/order-classes/food/css/styles.css new file mode 100644 index 00000000..c6ef0aa7 --- /dev/null +++ b/web_frontend/web_result/order-classes/food/css/styles.css @@ -0,0 +1,1704 @@ +/* 青莳轻食 - 深色惊艳设计系统 */ + +/* ========== 设计变量 ========== */ +: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; /* 灰色文字 */ + --border-light: rgba(76, 175, 80, 0.2); /* 绿色边框 */ + --hover-bg: rgba(255, 152, 0, 0.15); /* 悬停背景 */ + --active-bg: rgba(76, 175, 80, 0.2); /* 激活背景 */ + + /* 间距系统 - 针对大屏幕优化 */ + --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 */ + --spacing-3xl: 8rem; /* 128px */ + + /* 字体系统 */ + --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; + --font-display: 'Inter', sans-serif; + + /* 字体大小 - 针对大屏幕优化 */ + --text-xs: 0.875rem; /* 14px */ + --text-sm: 1rem; /* 16px */ + --text-base: 1.125rem; /* 18px */ + --text-lg: 1.375rem; /* 22px */ + --text-xl: 1.625rem; /* 26px */ + --text-2xl: 2rem; /* 32px */ + --text-3xl: 2.5rem; /* 40px */ + --text-4xl: 3rem; /* 48px */ + --text-5xl: 4rem; /* 64px */ + + /* 字重 */ + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + + /* 圆角 */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-2xl: 1.5rem; + --radius-full: 9999px; + + /* 阴影 - 轻盈浅色主题 */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 2px 4px rgba(0,0,0,0.08); + --shadow-lg: 0 4px 8px rgba(0,0,0,0.1); + --shadow-xl: 0 8px 16px rgba(0,0,0,0.12); + --shadow-gold: 0 2px 8px rgba(255, 152, 0, 0.15); + + /* 过渡 */ + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 350ms ease; + + /* 布局 */ + --container-max: 1600px; /* 增加最大宽度适配1920屏幕 */ +} + +/* ========== 深色主题 ========== */ +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-dark: #2d6a3f; /* 中度森林绿 */ + --primary-green: #4a9d5f; /* 翡翠绿 */ + --accent-gold: #d4a574; /* 暖棕金色 */ + --accent-gold-light: #e8c4a0; /* 浅暖棕金 */ + --text-light: #e8f5e9; /* 浅绿白色文字 */ + --text-gray: #a4c3a8; /* 绿灰色文字 */ + --border-light: rgba(74, 157, 95, 0.25); /* 绿色边框 */ + --hover-bg: rgba(212, 165, 116, 0.15); /* 悬停背景 */ + --active-bg: rgba(74, 157, 95, 0.2); /* 激活背景 */ + --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); + --shadow-md: 0 2px 4px rgba(0,0,0,0.5); + --shadow-lg: 0 4px 8px rgba(0,0,0,0.6); + --shadow-xl: 0 8px 16px rgba(0,0,0,0.7); + --shadow-gold: 0 2px 8px rgba(212, 165, 116, 0.25); +} + +/* ========== 重置样式 ========== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-primary); + font-size: var(--text-base); + line-height: 1.6; + color: var(--text-light); + background-color: var(--bg-dark); + overflow-x: hidden; +} + +/* ========== Hero 区域 - 全屏图片背景 ========== */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 247, 0.95) 100%), + url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; + position: relative; + overflow: hidden; +} + +/* 深色主题下的Hero渐变 */ +body.dark-theme .hero { + background: + linear-gradient(135deg, rgba(10, 26, 15, 0.9) 0%, rgba(13, 31, 19, 0.8) 100%), + url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.hero::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%); + pointer-events: none; + animation: glow 8s ease-in-out infinite; +} + +@keyframes glow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } +} + +.hero-content { + text-align: center; + color: var(--text-light); + z-index: 1; + position: relative; + padding: var(--spacing-xl); + max-width: 900px; +} + +.hero-badge { + display: inline-block; + padding: var(--spacing-md) var(--spacing-xl); + background: rgba(212, 175, 55, 0.15); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: var(--radius-full); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + letter-spacing: 0.1em; + margin-bottom: var(--spacing-xl); + border: 3px solid var(--accent-gold); + box-shadow: var(--shadow-gold); + text-transform: uppercase; + transition: all var(--transition-base); +} + +.hero-badge:hover { + background: rgba(212, 175, 55, 0.25); + transform: translateY(-2px); +} + +.hero-title { + font-size: clamp(3.5rem, 10vw, 6.5rem); + font-weight: var(--font-bold); + margin-bottom: var(--spacing-lg); + letter-spacing: -0.02em; + line-height: 1.1; + color: var(--accent-gold-light); + text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(212, 175, 55, 0.4); +} + +.hero-subtitle { + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: var(--font-light); + opacity: 0.95; + margin-bottom: var(--spacing-xl); + color: var(--text-light); +} + +.hero-description { + font-size: var(--text-xl); + opacity: 0.85; + max-width: 800px; + margin: 0 auto; + line-height: 1.8; +} + +/* ========== 导航 - 深色玻璃态 ========== */ +.nav { + position: sticky; + top: 0; + z-index: 100; + background: var(--bg-semi-dark); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border-light); + padding: var(--spacing-md) 0; + box-shadow: var(--shadow-md); +} + +.nav-container { + display: flex; + justify-content: center; + gap: var(--spacing-sm); + flex-wrap: wrap; + padding: 0 var(--spacing-md); +} + +.nav-item { + padding: var(--spacing-sm) var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + cursor: pointer; + transition: all var(--transition-base); + font-weight: var(--font-medium); + display: flex; + align-items: center; + gap: var(--spacing-xs); + color: var(--text-gray); +} + +.nav-item i { + width: 20px; + height: 20px; + stroke-width: 2; +} + +.nav-item span { + font-size: var(--text-base); +} + +.nav-item:hover { + background: var(--hover-bg); + color: var(--accent-gold); + transform: translateY(-2px); + box-shadow: var(--shadow-gold); +} + +.nav-item.active { + background: var(--active-bg); + color: var(--primary-green); + border-color: var(--primary-green); + box-shadow: var(--shadow-gold); +} + +/* ========== 内容区块 - 图片背景 ========== */ +.section { + padding: var(--spacing-2xl) 0; + background: var(--bg-dark); + position: relative; +} + +/* 浅色图片背景 - 每个区块使用不同图片 */ +.section:nth-child(1) { + 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-1512621776951-a57141f2eefd?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(2) { + 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-1490645935967-10de6ba17061?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(3) { + 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-1546069901-ba9599a7e63c?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(4) { + 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-1565299624946-b28f40a0ae38?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(5) { + 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-1555939594-58d7cb561ad1?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(6) { + 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-1567620905732-2d1ec7ab7445?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 通用奇偶区块（当超过6个section时） */ +.section:nth-child(n+7):nth-child(odd) { + 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-1512621776951-a57141f2eefd?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.section:nth-child(n+7):nth-child(even) { + 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-1490645935967-10de6ba17061?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 深色主题下的区块背景 - 每个区块使用对应图片 */ +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('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(2) { + background-image: + linear-gradient(to bottom, rgba(13, 31, 19, 0.90) 0%, rgba(10, 26, 15, 0.88) 100%), + url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(3) { + background-image: + linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%), + url('https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(4) { + background-image: + linear-gradient(to bottom, rgba(13, 31, 19, 0.90) 0%, rgba(10, 26, 15, 0.88) 100%), + url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(5) { + background-image: + linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%), + url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(6) { + background-image: + linear-gradient(to bottom, rgba(13, 31, 19, 0.90) 0%, rgba(10, 26, 15, 0.88) 100%), + url('https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 通用奇偶区块（当超过6个section时） */ +body.dark-theme .section:nth-child(n+7):nth-child(odd) { + background-image: + linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%), + url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.dark-theme .section:nth-child(n+7):nth-child(even) { + background-image: + linear-gradient(to bottom, rgba(13, 31, 19, 0.90) 0%, rgba(10, 26, 15, 0.88) 100%), + url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 深色主题下的特定元素调整 */ +body.dark-theme .stat-item { + background: rgba(18, 35, 24, 0.8); + backdrop-filter: blur(5px); +} + +body.dark-theme .stat-item:hover { + background: rgba(74, 157, 95, 0.15); + border-color: var(--primary-green); +} + +body.dark-theme .stat-value { + color: var(--accent-gold-light); +} + +body.dark-theme th { + background: rgba(74, 157, 95, 0.12); + color: var(--accent-gold-light); +} + +body.dark-theme tr:hover { + background: rgba(74, 157, 95, 0.08); +} + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +.section-header { + display: flex; + align-items: center; + gap: var(--spacing-lg); + margin-bottom: var(--spacing-xl); + padding: var(--spacing-lg); + background: var(--bg-card); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); +} + +.agent-avatar { + width: 100px; + height: 100px; + border-radius: var(--radius-xl); + object-fit: cover; + border: 3px solid var(--primary-green); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); +} + +.agent-avatar:hover { + transform: scale(1.05); + box-shadow: var(--shadow-lg); + border-color: var(--accent-gold); +} + +.agent-info { + flex: 1; +} + +.agent-name { + font-size: var(--text-lg); + color: var(--primary-green); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-sm); + font-weight: var(--font-semibold); +} + +.section-title { + font-size: var(--text-4xl); + font-weight: var(--font-bold); + color: var(--text-light); + letter-spacing: -0.01em; + text-shadow: none; + position: relative; + padding-bottom: var(--spacing-sm); +} + +.section-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 180px; + height: 4px; + background: linear-gradient(90deg, var(--accent-gold), transparent); + border-radius: 2px; +} + +.section-content { + max-width: 100%; /* 使用全宽 */ + margin: 0 auto; +} + +.expert-intro { + background: var(--bg-card); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + margin-bottom: var(--spacing-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); +} + +.expert-intro h3 { + font-size: var(--text-2xl); + color: var(--primary-green); + margin-bottom: var(--spacing-lg); + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.expert-intro p { + color: var(--text-gray); + line-height: 1.8; + font-size: var(--text-lg); +} + +/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */ +.grid { + display: grid; + gap: var(--spacing-2xl); +} + +.grid-2 { + grid-template-columns: repeat(2, 1fr); /* 固定2列,每列更宽 */ +} + +.grid-3 { + grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */ +} + +.grid-4 { + grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */ +} + +/* ========== 卡片 - 图片优先布局 ========== */ +.card { + background: var(--bg-card); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + padding: 0; /* 移除内边距,让图片可以占满 */ + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.card-header { + padding: var(--spacing-xl); + background: var(--bg-semi-dark); + border-bottom: 2px solid var(--border-light); + order: 2; /* 标题放在图片下方 */ +} + +.card-title { + font-size: var(--text-2xl); + font-weight: var(--font-semibold); + color: var(--primary-green); + margin-bottom: var(--spacing-sm); +} + +.card-body { + padding: var(--spacing-xl); + order: 3; /* 内容放在最后 */ + flex: 1; +} + +/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */ +.image-container { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */ + overflow: hidden; + border-radius: 0; /* 在卡片内时不需要圆角 */ + margin-bottom: 0; /* 移除底部边距 */ + background: rgba(0,0,0,0.5); + position: relative; + box-shadow: none; /* 卡片本身有阴影 */ + border: none; /* 移除边框 */ + transition: all var(--transition-base); + order: 1; /* 图片放在最前面 */ + flex-shrink: 0; /* 防止图片被压缩 */ +} + +.image-container:hover { + /* 移除hover效果,因为卡片本身有hover */ +} + +.image-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); +} + +.image-container:hover img { + transform: scale(1.1); + filter: brightness(1.1); +} + +.image-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--spacing-md); + background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); + color: var(--text-light); + font-size: var(--text-sm); + font-weight: var(--font-medium); + text-align: center; + transform: translateY(100%); + transition: transform var(--transition-base); +} + +.image-container:hover .image-caption { + transform: translateY(0); +} + +/* ========== 列表 ========== */ +.feature-list { + list-style: none; + padding: 0; +} + +.feature-list li { + padding: var(--spacing-sm) 0; + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); + transition: all var(--transition-fast); +} + +.feature-list li:hover { + color: var(--primary-green); + padding-left: var(--spacing-sm); +} + +.feature-list li:last-child { + border-bottom: none; +} + +/* ========== 统计数据 ========== */ +.stats { + display: flex; + gap: var(--spacing-md); + padding: var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); +} + +.stat-item { + flex: 1; + text-align: center; + padding: var(--spacing-md); + border-radius: var(--radius-md); + background: var(--bg-card); + border: 1px solid transparent; + transition: all var(--transition-base); +} + +.stat-item:hover { + background: var(--hover-bg); + transform: translateY(-4px); + border-color: var(--border-light); + box-shadow: var(--shadow-md); +} + +.stat-label { + font-size: var(--text-sm); + color: var(--text-gray); + margin-bottom: var(--spacing-xs); +} + +.stat-value { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary-green); + text-shadow: none; +} + +/* ========== 图表化统计数据 ========== */ +.stats-chart { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + padding: var(--spacing-lg); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); +} + +.stat-item-chart { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.stat-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.stat-bar { + width: 100%; + height: 12px; + background: var(--active-bg); + border-radius: var(--radius-full); + overflow: hidden; + position: relative; +} + +.stat-bar-fill { + height: 100%; + background: linear-gradient(90deg, var(--bg-overlay),var(--primary-green) ); + border-radius: var(--radius-full); + transition: width 1s ease-out; + position: relative; + animation: fillBar 1.5s ease-out; +} + +@keyframes fillBar { + from { + width: 0 !important; + } +} + +.stat-item-chart .stat-label { + font-size: var(--text-base); + color: var(--text-gray); + font-weight: var(--font-medium); +} + +.stat-item-chart .stat-value { + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--primary-green); +} + +/* ========== 表格 ========== */ +.table-container { + overflow-x: auto; + margin: var(--spacing-xl) 0; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); +} + +table { + width: 100%; + border-collapse: collapse; + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + overflow: hidden; +} + +th { + background: var(--active-bg); + color: var(--primary-green); + padding: var(--spacing-md); + text-align: left; + font-weight: var(--font-semibold); + border-bottom: 2px solid var(--primary-green); +} + +td { + padding: var(--spacing-md); + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); +} + +tr:last-child td { + border-bottom: none; +} + +tr:hover { + background: var(--hover-bg); +} + +/* ========== 图文交错布局 ========== */ +.alternating-layout { + display: flex; + gap: var(--spacing-2xl); + margin-bottom: var(--spacing-2xl); + align-items: center; +} + +.alternating-layout:last-child { + margin-bottom: 0; +} + +.alternating-layout.reverse { + flex-direction: row-reverse; +} + +.alternating-content { + flex: 1; + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + padding: var(--spacing-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); +} + +.alternating-image { + flex: 1; + aspect-ratio: 4/3; + border-radius: var(--radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-lg); + border: 2px solid var(--border-light); +} + +.alternating-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); +} + +.alternating-image:hover img { + transform: scale(1.05); +} + +.alternating-content h3 { + font-size: var(--text-2xl); + color: var(--primary-green); + margin-bottom: var(--spacing-md); + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +@media (max-width: 768px) { + .alternating-layout, + .alternating-layout.reverse { + flex-direction: column; + } +} + +/* ========== 大图小卡片组合布局 ========== */ +.hero-cards-layout { + display: flex; + flex-direction: column; + gap: var(--spacing-2xl); +} + +.hero-image-container { + width: 100%; + aspect-ratio: 16/9; + border-radius: var(--radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-xl); + border: 2px solid var(--border-light); + position: relative; +} + +.hero-image-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); +} + +.hero-image-container:hover img { + transform: scale(1.02); +} + +.hero-image-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--spacing-xl); + background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); + color: white; +} + +.hero-image-overlay h3 { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + margin-bottom: var(--spacing-sm); +} + +.hero-image-overlay p { + font-size: var(--text-lg); + opacity: 0.9; +} + +.mini-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--spacing-lg); +} + +.mini-card { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + border: 2px solid var(--border-light); + text-align: center; + transition: all var(--transition-base); + box-shadow: var(--shadow-sm); +} + +.mini-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--accent-gold); +} + +.mini-card-icon { + font-size: var(--text-3xl); + margin-bottom: var(--spacing-sm); +} + +.mini-card-title { + font-size: var(--text-lg); + font-weight: var(--font-semibold); + color: var(--primary-green); + margin-bottom: var(--spacing-xs); +} + +.mini-card-desc { + font-size: var(--text-sm); + color: var(--text-gray); +} + +/* ========== 时间线布局 ========== */ +.timeline-layout { + position: relative; + padding-left: var(--spacing-2xl); +} + +.timeline-layout::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + background: linear-gradient(to bottom, var(--primary-green), var(--accent-gold)); + border-radius: var(--radius-full); +} + +.timeline-item { + position: relative; + margin-bottom: var(--spacing-2xl); + display: flex; + gap: var(--spacing-xl); + align-items: center; +} + +.timeline-item:last-child { + margin-bottom: 0; +} + +.timeline-dot { + position: absolute; + left: calc(-1 * var(--spacing-2xl) - 8px); + width: 20px; + height: 20px; + background: var(--primary-green); + border: 3px solid white; + border-radius: var(--radius-full); + box-shadow: var(--shadow-md); + z-index: 1; +} + +.timeline-item:nth-child(even) .timeline-dot { + background: var(--accent-gold); +} + +.timeline-content { + flex: 1; + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); +} + +.timeline-content:hover { + transform: translateX(8px); + box-shadow: var(--shadow-lg); + border-color: var(--accent-gold); +} + +.timeline-content h3 { + font-size: var(--text-xl); + color: var(--primary-green); + margin-bottom: var(--spacing-sm); + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.timeline-content p { + color: var(--text-gray); + line-height: 1.6; + margin-bottom: var(--spacing-sm); +} + +.timeline-image { + flex: 0 0 300px; + aspect-ratio: 4/3; + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); + border: 2px solid var(--border-light); +} + +.timeline-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); +} + +.timeline-image:hover img { + transform: scale(1.05); +} + +@media (max-width: 768px) { + .timeline-item { + flex-direction: column; + } + + .timeline-image { + flex: 0 0 auto; + width: 100%; + } +} + +/* ========== 网格+高亮布局 ========== */ +.featured-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-xl); +} + +.featured-item { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + display: flex; + flex-direction: column; +} + +.featured-item:first-child { + grid-column: 1 / 2; + grid-row: 1 / 3; +} + +.featured-item:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); + border-color: var(--accent-gold); +} + +.featured-item:first-child { + background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(255, 152, 0, 0.1)); +} + +/* 深色主题下的高亮项 */ +body.dark-theme .featured-item:first-child { + background: linear-gradient(135deg, rgba(74, 157, 95, 0.2), rgba(212, 165, 116, 0.15)); +} + +.featured-item:first-child .featured-image { + aspect-ratio: 3/4; +} + +.featured-image { + width: 100%; + aspect-ratio: 1; + overflow: hidden; + position: relative; +} + +.featured-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); +} + +.featured-item:hover .featured-image img { + transform: scale(1.05); +} + +.featured-badge { + position: absolute; + top: var(--spacing-md); + right: var(--spacing-md); + background: var(--accent-gold); + color: white; + padding: var(--spacing-xs) var(--spacing-md); + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: var(--font-semibold); + box-shadow: var(--shadow-md); +} + +.featured-info { + padding: var(--spacing-lg); + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.featured-item:first-child .featured-info { + padding: var(--spacing-xl); +} + +.featured-title { + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--primary-green); + margin-bottom: var(--spacing-sm); +} + +.featured-item:first-child .featured-title { + font-size: var(--text-2xl); +} + +.featured-desc { + font-size: var(--text-base); + color: var(--text-gray); + line-height: 1.6; +} + +.featured-item:first-child .featured-desc { + font-size: var(--text-lg); +} + +@media (max-width: 768px) { + .featured-grid { + grid-template-columns: 1fr; + } + + .featured-item:first-child { + grid-column: 1; + grid-row: auto; + } +} + +/* ========== 垂直分栏布局 ========== */ +.vertical-stack { + display: flex; + flex-direction: column; + gap: var(--spacing-2xl); +} + +.stack-card { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + padding: var(--spacing-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-md); + transition: all var(--transition-base); + position: relative; + overflow: hidden; +} + +.stack-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: cover; + background-position: center; + opacity: 0.08; + z-index: 0; + pointer-events: none; +} + +.stack-card[data-bg-image]::before { + background-image: var(--bg-image); +} + +.stack-card:hover { + box-shadow: var(--shadow-xl); + border-color: var(--accent-gold); +} + +.stack-card-header { + display: flex; + align-items: center; + gap: var(--spacing-md); + margin-bottom: var(--spacing-lg); + padding-bottom: var(--spacing-md); + border-bottom: 2px solid var(--border-light); + position: relative; + z-index: 1; +} + +.stack-card-icon { + font-size: var(--text-3xl); +} + +.stack-card-title { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary-green); +} + +.stack-card-content { + position: relative; + z-index: 1; +} + +.stack-card-body { + width: 100%; +} + +@media (max-width: 768px) { + .stack-card-content { + flex-direction: column; + } +} + +/* ========== 步骤卡片布局 ==========*/ +.step-cards-layout { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-xl); + position: relative; +} + +.step-cards-layout::before { + content: ''; + position: absolute; + top: 60px; + left: 16.66%; + right: 16.66%; + height: 3px; + background: linear-gradient(to right, var(--primary-green), var(--accent-gold), var(--primary-green)); + z-index: 0; +} + +.step-card { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + display: flex; + flex-direction: column; + position: relative; + z-index: 1; +} + +.step-card:hover { + transform: translateY(-12px); + box-shadow: var(--shadow-xl); + border-color: var(--accent-gold); +} + +.step-number { + display: none; +} + +.step-card:nth-child(2) .step-number { + background: linear-gradient(135deg, var(--accent-gold), var(--primary-green)); +} + +.step-card-image { + width: 100%; + aspect-ratio: 4/3; + overflow: hidden; +} + +.step-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); +} + +.step-card:hover .step-card-image img { + transform: scale(1.1); +} + +.step-card-content { + padding: var(--spacing-xl); + flex: 1; + display: flex; + flex-direction: column; +} + +.step-card-title { + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--primary-green); + margin-bottom: var(--spacing-md); + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.step-card-desc { + font-size: var(--text-base); + color: var(--text-gray); + line-height: 1.8; +} + +@media (max-width: 768px) { + .step-cards-layout { + grid-template-columns: 1fr; + } + + .step-cards-layout::before { + display: none; + } + + .step-card { + margin-top: var(--spacing-lg); + } +} + +/* ========== 产品展示 - 超大气布局 ========== */ +.product-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 固定2列,产品卡片更大 */ + gap: var(--spacing-2xl); + margin: var(--spacing-2xl) 0; +} + +.product-card { + background: var(--bg-card); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-md); + padding: 0; /* 移除内边距 */ + display: flex; + flex-direction: column; +} + +.product-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.product-image { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */ + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); + order: 1; /* 图片放在最前面 */ +} + +.product-card:hover .product-image { + transform: scale(1.05); + filter: brightness(1.0); +} + +.product-info { + padding: var(--spacing-xl); + background: var(--bg-semi-dark); + order: 2; /* 信息放在图片下方 */ +} + +.product-name { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--primary-green); + margin-bottom: var(--spacing-sm); +} + +.product-desc { + font-size: var(--text-base); + color: var(--text-gray); +} + +/* ========== 响应式 ========== */ +@media (max-width: 768px) { + :root { + --spacing-sm: 0.75rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + --spacing-3xl: 4rem; + } + + .hero { + background-attachment: scroll; + } + + .section:nth-child(odd), + .section:nth-child(even) { + background-attachment: scroll; + } + + .hero-content { + padding: var(--spacing-lg); + } + + .nav-container { + gap: var(--spacing-xs); + } + + .nav-item { + padding: var(--spacing-xs) var(--spacing-md); + font-size: var(--text-sm); + } + + .section { + padding: var(--spacing-2xl) 0; + } + + .grid-2, + .grid-3, + .grid-4 { + grid-template-columns: 1fr; + } + + .section-header { + flex-direction: column; + text-align: center; + } + + .stats { + flex-direction: column; + } +} + +/* ========== 动画 ========== */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +} + +.fade-in { + animation: fadeIn 0.6s ease forwards; +} + +.slide-in { + animation: slideIn 0.6s ease forwards; +} + +/* ========== 工具类 ========== */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +.hidden { display: none; } +.block { display: block; } +.flex { display: flex; } +.grid { display: grid; } + +.gap-sm { gap: var(--spacing-sm); } +.gap-md { gap: var(--spacing-md); } +.gap-lg { gap: var(--spacing-lg); } + +/* ========== 图片加载状态 ========== */ +img { + transition: opacity var(--transition-base); +} + +img.loaded { + opacity: 1; +} + +img.error { + opacity: 0.5; + filter: grayscale(1); +} + +/* ========== SVG图标尺寸统一管理 ========== */ +/* 根据不同区域设置合适的图标尺寸 */ + +/* Hero区域图标 */ +.hero-description i[data-lucide] { + width: 24px !important; + height: 24px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* Agent名称图标 */ +.agent-name i[data-lucide] { + width: 20px !important; + height: 20px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* h3标题图标 - 较大 */ +.expert-intro h3 i[data-lucide], +.alternating-content h3 i[data-lucide], +.timeline-content h3 i[data-lucide], +.step-card-title i[data-lucide], +.hero-image-overlay h3 i[data-lucide], +.stack-card-title i[data-lucide] { + width: 40px !important; + height: 40px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 10px !important; +} + +/* 列表项图标 - 小号 */ +.feature-list li i[data-lucide] { + width: 18px !important; + height: 18px !important; + display: inline-block !important; + vertical-align: middle !important; + margin-right: 8px !important; +} + +/* 迷你卡片图标 - 大号 */ +.mini-card-icon i[data-lucide] { + width: 32px !important; + height: 32px !important; + display: block !important; +} + +/* 堆叠卡片图标 - 大号 */ +.stack-card-icon i[data-lucide] { + width: 32px !important; + height: 32px !important; + display: block !important; +} + +/* 导航图标 */ +.nav-item i[data-lucide] { + width: 20px !important; + height: 20px !important; + display: block !important; + margin: 0 auto 4px !important; +} + +/* ========== 主题切换按钮 ========== */ +.theme-toggle { + position: fixed; + top: 24px; + right: 24px; + z-index: 1000; +} + +.theme-toggle-btn { + position: relative; + width: 64px; + height: 32px; + background: var(--bg-card); + border: 2px solid var(--border-light); + border-radius: var(--radius-full); + cursor: pointer; + padding: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 6px; + transition: all var(--transition-base); + box-shadow: var(--shadow-md); +} + +.theme-toggle-btn:hover { + transform: scale(1.05); + box-shadow: var(--shadow-lg); +} + +.theme-toggle-btn:active { + transform: scale(0.95); +} + +.theme-icon { + width: 18px !important; + height: 18px !important; + transition: all var(--transition-base); + color: var(--text-gray); +} + +/* 明亮主题下的图标状态 */ +body:not(.dark-theme) .theme-icon-light { + color: var(--accent-gold); + transform: scale(1.2); +} + +body:not(.dark-theme) .theme-icon-dark { + opacity: 0.5; +} + +/* 深色主题下的图标状态 */ +body.dark-theme .theme-icon-dark { + color: var(--primary-green); + transform: scale(1.2); +} + +body.dark-theme .theme-icon-light { + opacity: 0.5; +} diff --git a/web_frontend/web_result/order-classes/food/css/styles.old.css b/web_frontend/web_result/order-classes/food/css/styles.old.css new file mode 100644 index 00000000..c5ec894c --- /dev/null +++ b/web_frontend/web_result/order-classes/food/css/styles.old.css @@ -0,0 +1,748 @@ +/* 青莳轻食 - 深色惊艳设计系统 */ + +/* ========== 设计变量 ========== */ +:root { + /* 深色主题色板 */ + --bg-dark: #0f1810; /* 深色背景 */ + --bg-semi-dark: rgba(15, 24, 16, 0.85); /* 半透明深色 */ + --bg-overlay: rgba(26, 46, 26, 0.75); /* 深绿遮罩 */ + --bg-card: rgba(45, 80, 22, 0.65); /* 卡片背景 */ + --primary-dark: #1a2e1a; /* 主色深绿 */ + --primary-green: #2d5016; /* 主色绿 */ + --accent-gold: #d4af37; /* 金色强调 */ + --accent-gold-light: #f4d03f; /* 浅金色 */ + --text-light: #f5f5f0; /* 浅色文字 */ + --text-gray: #b8b8a8; /* 灰色文字 */ + --border-light: rgba(212, 175, 55, 0.2); /* 金色边框 */ + + /* 间距系统 - 针对大屏幕优化 */ + --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 */ + --spacing-3xl: 8rem; /* 128px */ + + /* 字体系统 */ + --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; + --font-display: 'Inter', sans-serif; + + /* 字体大小 - 针对大屏幕优化 */ + --text-xs: 0.875rem; /* 14px */ + --text-sm: 1rem; /* 16px */ + --text-base: 1.125rem; /* 18px */ + --text-lg: 1.375rem; /* 22px */ + --text-xl: 1.625rem; /* 26px */ + --text-2xl: 2rem; /* 32px */ + --text-3xl: 2.5rem; /* 40px */ + --text-4xl: 3rem; /* 48px */ + --text-5xl: 4rem; /* 64px */ + + /* 字重 */ + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + + /* 圆角 */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-2xl: 1.5rem; + --radius-full: 9999px; + + /* 阴影 - 深色主题 */ + --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); + --shadow-md: 0 4px 12px rgba(0,0,0,0.5); + --shadow-lg: 0 10px 20px rgba(0,0,0,0.6); + --shadow-xl: 0 20px 30px rgba(0,0,0,0.7); + --shadow-gold: 0 4px 16px rgba(212, 175, 55, 0.3); + + /* 过渡 */ + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 350ms ease; + + /* 布局 */ + --container-max: 1600px; /* 增加最大宽度适配1920屏幕 */ +} + +/* ========== 重置样式 ========== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-primary); + font-size: var(--text-base); + line-height: 1.6; + color: var(--text-light); + background-color: var(--bg-dark); + overflow-x: hidden; +} + +/* ========== Hero 区域 - 全屏图片背景 ========== */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: + linear-gradient(135deg, rgba(15, 24, 16, 0.75) 0%, rgba(45, 80, 22, 0.85) 100%), + url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%); + pointer-events: none; + animation: glow 8s ease-in-out infinite; +} + +@keyframes glow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } +} + +.hero-content { + text-align: center; + color: var(--text-light); + z-index: 1; + position: relative; + padding: var(--spacing-xl); + max-width: 900px; +} + +.hero-badge { + display: inline-block; + padding: var(--spacing-md) var(--spacing-xl); + background: rgba(212, 175, 55, 0.15); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: var(--radius-full); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + letter-spacing: 0.1em; + margin-bottom: var(--spacing-xl); + border: 3px solid var(--accent-gold); + box-shadow: var(--shadow-gold); + text-transform: uppercase; + transition: all var(--transition-base); +} + +.hero-badge:hover { + background: rgba(212, 175, 55, 0.25); + transform: translateY(-2px); +} + +.hero-title { + font-size: clamp(3.5rem, 10vw, 6.5rem); + font-weight: var(--font-bold); + margin-bottom: var(--spacing-lg); + letter-spacing: -0.02em; + line-height: 1.1; + color: var(--accent-gold-light); + text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(212, 175, 55, 0.4); +} + +.hero-subtitle { + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: var(--font-light); + opacity: 0.95; + margin-bottom: var(--spacing-xl); + color: var(--text-light); +} + +.hero-description { + font-size: var(--text-xl); + opacity: 0.85; + max-width: 800px; + margin: 0 auto; + line-height: 1.8; +} + +/* ========== 导航 - 深色玻璃态 ========== */ +.nav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(15, 24, 16, 0.9); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border-light); + padding: var(--spacing-md) 0; + box-shadow: var(--shadow-md); +} + +.nav-container { + display: flex; + justify-content: center; + gap: var(--spacing-sm); + flex-wrap: wrap; + padding: 0 var(--spacing-md); +} + +.nav-item { + padding: var(--spacing-sm) var(--spacing-lg); + background: rgba(45, 80, 22, 0.3); + backdrop-filter: blur(10px); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + cursor: pointer; + transition: all var(--transition-base); + font-weight: var(--font-medium); + display: flex; + align-items: center; + gap: var(--spacing-xs); + color: var(--text-gray); +} + +.nav-item:hover { + background: rgba(212, 175, 55, 0.2); + color: var(--accent-gold-light); + transform: translateY(-2px); + box-shadow: var(--shadow-gold); +} + +.nav-item.active { + background: rgba(212, 175, 55, 0.3); + color: var(--accent-gold-light); + border-color: var(--accent-gold); + box-shadow: var(--shadow-gold); +} + +/* ========== 内容区块 - 图片背景 ========== */ +.section { + padding: var(--spacing-3xl) 0; + background: var(--bg-dark); + position: relative; +} + +/* 深色图片背景 - 奇数区块 */ +.section:nth-child(odd) { + background-image: + linear-gradient(to bottom, rgba(15, 24, 16, 0.95) 0%, rgba(15, 24, 16, 0.92) 100%), + url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* 深色图片背景 - 偶数区块 */ +.section:nth-child(even) { + background-image: + linear-gradient(to bottom, rgba(26, 46, 26, 0.95) 0%, rgba(26, 46, 26, 0.92) 100%), + url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1920&q=80'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +.section-header { + display: flex; + align-items: center; + gap: var(--spacing-xl); + margin-bottom: var(--spacing-3xl); + padding: var(--spacing-2xl); + background: rgba(45, 80, 22, 0.4); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-2xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-2xl); +} + +.agent-avatar { + width: 120px; + height: 120px; + border-radius: var(--radius-xl); + object-fit: cover; + border: 4px solid var(--accent-gold); + box-shadow: var(--shadow-gold); + transition: all var(--transition-base); +} + +.agent-avatar:hover { + transform: scale(1.05); + box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5); +} + +.agent-info { + flex: 1; +} + +.agent-name { + font-size: var(--text-lg); + color: var(--accent-gold); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: var(--spacing-sm); + font-weight: var(--font-semibold); +} + +.section-title { + font-size: var(--text-4xl); + font-weight: var(--font-bold); + color: var(--text-light); + letter-spacing: -0.01em; + text-shadow: 0 4px 20px rgba(0,0,0,0.5); +} + +.section-content { + max-width: 100%; /* 使用全宽 */ + margin: 0 auto; +} + +.expert-intro { + background: rgba(45, 80, 22, 0.5); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: var(--radius-2xl); + padding: var(--spacing-2xl); + margin-bottom: var(--spacing-3xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-2xl); +} + +.expert-intro h3 { + font-size: var(--text-2xl); + color: var(--accent-gold-light); + margin-bottom: var(--spacing-lg); + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.expert-intro p { + color: var(--text-gray); + line-height: 1.8; + font-size: var(--text-lg); +} + +/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */ +.grid { + display: grid; + gap: var(--spacing-2xl); +} + +.grid-2 { + grid-template-columns: repeat(2, 1fr); /* 固定2列,每列更宽 */ +} + +.grid-3 { + grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */ +} + +.grid-4 { + grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */ +} + +/* ========== 卡片 - 图片优先布局 ========== */ +.card { + background: rgba(45, 80, 22, 0.65); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-xl); + padding: 0; /* 移除内边距,让图片可以占满 */ + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.card-header { + padding: var(--spacing-xl); + background: rgba(26, 46, 26, 0.8); + border-bottom: 2px solid var(--border-light); + order: 2; /* 标题放在图片下方 */ +} + +.card-title { + font-size: var(--text-2xl); + font-weight: var(--font-semibold); + color: var(--accent-gold-light); + margin-bottom: var(--spacing-sm); +} + +.card-body { + padding: var(--spacing-xl); + order: 3; /* 内容放在最后 */ + flex: 1; +} + +/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */ +.image-container { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */ + overflow: hidden; + border-radius: 0; /* 在卡片内时不需要圆角 */ + margin-bottom: 0; /* 移除底部边距 */ + background: rgba(0,0,0,0.5); + position: relative; + box-shadow: none; /* 卡片本身有阴影 */ + border: none; /* 移除边框 */ + transition: all var(--transition-base); + order: 1; /* 图片放在最前面 */ + flex-shrink: 0; /* 防止图片被压缩 */ +} + +.image-container:hover { + /* 移除hover效果,因为卡片本身有hover */ +} + +.image-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); +} + +.image-container:hover img { + transform: scale(1.1); + filter: brightness(1.1); +} + +.image-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--spacing-md); + background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); + color: var(--text-light); + font-size: var(--text-sm); + font-weight: var(--font-medium); + text-align: center; + transform: translateY(100%); + transition: transform var(--transition-base); +} + +.image-container:hover .image-caption { + transform: translateY(0); +} + +/* ========== 列表 ========== */ +.feature-list { + list-style: none; + padding: 0; +} + +.feature-list li { + padding: var(--spacing-sm) 0; + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); + transition: all var(--transition-fast); +} + +.feature-list li:hover { + color: var(--accent-gold-light); + padding-left: var(--spacing-sm); +} + +.feature-list li:last-child { + border-bottom: none; +} + +/* ========== 统计数据 ========== */ +.stats { + display: flex; + gap: var(--spacing-md); + padding: var(--spacing-lg); + background: rgba(45, 80, 22, 0.4); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); +} + +.stat-item { + flex: 1; + text-align: center; + padding: var(--spacing-md); + border-radius: var(--radius-md); + background: rgba(26, 46, 26, 0.5); + transition: all var(--transition-base); +} + +.stat-item:hover { + background: rgba(212, 175, 55, 0.2); + transform: translateY(-4px); +} + +.stat-label { + font-size: var(--text-sm); + color: var(--text-gray); + margin-bottom: var(--spacing-xs); +} + +.stat-value { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--accent-gold-light); + text-shadow: 0 2px 8px rgba(0,0,0,0.5); +} + +/* ========== 表格 ========== */ +.table-container { + overflow-x: auto; + margin: var(--spacing-xl) 0; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); +} + +table { + width: 100%; + border-collapse: collapse; + background: rgba(26, 46, 26, 0.6); + backdrop-filter: blur(10px); + border-radius: var(--radius-lg); + overflow: hidden; +} + +th { + background: rgba(45, 80, 22, 0.8); + color: var(--accent-gold-light); + padding: var(--spacing-md); + text-align: left; + font-weight: var(--font-semibold); + border-bottom: 2px solid var(--accent-gold); +} + +td { + padding: var(--spacing-md); + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); +} + +tr:last-child td { + border-bottom: none; +} + +tr:hover { + background: rgba(212, 175, 55, 0.1); +} + +/* ========== 产品展示 - 超大气布局 ========== */ +.product-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 固定2列,产品卡片更大 */ + gap: var(--spacing-2xl); + margin: var(--spacing-2xl) 0; +} + +.product-card { + background: rgba(45, 80, 22, 0.6); + backdrop-filter: blur(10px); + border-radius: var(--radius-2xl); + overflow: hidden; + border: 2px solid var(--border-light); + transition: all var(--transition-base); + box-shadow: var(--shadow-xl); + padding: 0; /* 移除内边距 */ + display: flex; + flex-direction: column; +} + +.product-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl), var(--shadow-gold); + border-color: var(--accent-gold); +} + +.product-image { + width: 100%; + aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */ + object-fit: cover; + transition: transform var(--transition-slow); + filter: brightness(0.9); + order: 1; /* 图片放在最前面 */ +} + +.product-card:hover .product-image { + transform: scale(1.05); + filter: brightness(1.0); +} + +.product-info { + padding: var(--spacing-xl); + background: rgba(26, 46, 26, 0.5); + order: 2; /* 信息放在图片下方 */ +} + +.product-name { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--accent-gold-light); + margin-bottom: var(--spacing-sm); +} + +.product-desc { + font-size: var(--text-base); + color: var(--text-gray); +} + +/* ========== 响应式 ========== */ +@media (max-width: 768px) { + :root { + --spacing-sm: 0.75rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + --spacing-3xl: 4rem; + } + + .hero { + background-attachment: scroll; + } + + .section:nth-child(odd), + .section:nth-child(even) { + background-attachment: scroll; + } + + .hero-content { + padding: var(--spacing-lg); + } + + .nav-container { + gap: var(--spacing-xs); + } + + .nav-item { + padding: var(--spacing-xs) var(--spacing-md); + font-size: var(--text-sm); + } + + .section { + padding: var(--spacing-2xl) 0; + } + + .grid-2, + .grid-3, + .grid-4 { + grid-template-columns: 1fr; + } + + .section-header { + flex-direction: column; + text-align: center; + } + + .stats { + flex-direction: column; + } +} + +/* ========== 动画 ========== */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +} + +.fade-in { + animation: fadeIn 0.6s ease forwards; +} + +.slide-in { + animation: slideIn 0.6s ease forwards; +} + +/* ========== 工具类 ========== */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +.hidden { display: none; } +.block { display: block; } +.flex { display: flex; } +.grid { display: grid; } + +.gap-sm { gap: var(--spacing-sm); } +.gap-md { gap: var(--spacing-md); } +.gap-lg { gap: var(--spacing-lg); } + +/* ========== 图片加载状态 ========== */ +img { + transition: opacity var(--transition-base); +} + +img.loaded { + opacity: 1; +} + +img.error { + opacity: 0.5; + filter: grayscale(1); +} diff --git a/web_frontend/web_result/order-classes/food/index.html b/web_frontend/web_result/order-classes/food/index.html index c25153c7..e864ea2b 100644 --- a/web_frontend/web_result/order-classes/food/index.html +++ b/web_frontend/web_result/order-classes/food/index.html @@ -4,1216 +4,158 @@ 青莳轻食 - AI多智能体协同创业方案 - - - - + + + + + - - + + + - -
+ +
+ +
+ + +
-
AI 多智能体协同
+
AI 多智能体协同

青莳轻食

中高端个性化轻食店铺经营方案

-
🤖 由 7 位 AI 专家联合打造
+

+ + 由 8 位 AI 专家联合打造 +

- -