feat: 完成能源订单班图片重命名和文档整理

详细说明: - 能源订单班: 重命名7个图片文件为描述性中文名称 - 能源订单班: 更新markdown文档中的所有图片引用 - 智能开发订单班: 优化图片命名结构 - 化工订单班: 整理图片资源 - 新增SuperDesign食品订单班设计迭代文件 - 新增能源订单班终端模拟数据(energy.ts) - 清理web_frontend冗余文档图片重命名映射: - Whisk_1ebf7115ee180218c354deb8bff7f3eddr.jpg → 光伏面板室外场景图片.jpg - Whisk_582dc133200b175859e4b322295fb3d1dr.jpg → 光伏面板生成画面.jpg - image.jpg → PLC示意图.jpg - Whisk_b35aa11c60670e38bea44dcd9fe7df5fdr.jpg → 工业机器人图片.jpg - Whisk_028f4b832e3496db8814cd48f050ec03dr.jpg → 机器视觉相机图片.jpg - Whisk_eb381c66f5156a4a74f49102095ae534dr.jpg → 输送与治具.jpg - Mermaid_Chart[...].jpg → Mermaid流程图.jpg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 22:06:59 +08:00
parent 712dbe3416
commit 3b8cb3c568
97 changed files with 24241 additions and 1712 deletions
--- a/doc/任务/子任务/prompt_claude_code.md
+++ b/doc/任务/子任务/prompt_claude_code.md
@@ -0,0 +1,209 @@
+# Claude Code 任务执行指令
+
+## 任务：创建订单班交互式展示网站
+
+### 快速配置
+```bash
+ORDER="食品"
+PROJECT_ROOT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示"
+```
+
+### 执行命令序列
+
+```bash
+# 步骤1：分析内容（5分钟）
+cd $PROJECT_ROOT
+find web_frontend/web_result/data/订单班文档资料/$ORDER -name "*.md" | xargs head -50
+echo "提取关键信息：主题、时间线、技术特点、图片列表" > content_analysis.md
+
+# 步骤2：创建项目结构（5分钟）
+mkdir -p web_frontend/web_result/order-classes/$ORDER
+cd web_frontend/web_result/order-classes/$ORDER
+
+# 创建 TypeScript + React 项目
+npm create vite@latest . -- --template react-ts
+npm install
+
+# 安装依赖
+npm install -D tailwindcss postcss autoprefixer @types/react @types/react-dom @types/node
+npm install gsap @gsap/react react-intersection-observer zustand lucide-react
+
+# 初始化 Tailwind CSS
+npx tailwindcss init -p
+
+# 步骤3：设计迭代（使用SuperDesign，20分钟）
+mkdir -p $PROJECT_ROOT/.superdesign/current
+cd $PROJECT_ROOT/.superdesign/current
+
+# 创建5个迭代版本
+for i in {1..5}; do
+  echo "迭代 $i："
+  case $i in
+    1) echo "重点：布局和主色调" ;;
+    2) echo "重点：字体排版" ;;
+    3) echo "重点：交互动画" ;;
+    4) echo "重点：视觉细节" ;;
+    5) echo "重点：响应式" ;;
+  esac
+  mkdir iteration_$i
+  # 在iteration_$i中实现对应的设计改进
+done
+
+# 步骤4：选择最优版本并部署（5分钟）
+BEST_VERSION=3  # 假设选择第3版
+cp -r iteration_$BEST_VERSION/* $PROJECT_ROOT/web_frontend/web_result/order-classes/$ORDER/
+
+# 步骤5：归档（2分钟）
+ARCHIVE_DIR="$PROJECT_ROOT/.superdesign/archive_${ORDER}_$(date +%Y%m%d_%H%M%S)"
+mkdir -p $ARCHIVE_DIR
+mv iteration_* $ARCHIVE_DIR/
+```
+
+### 核心组件实现
+
+#### 1. App.tsx - 主应用结构
+```typescript
+import React, { useEffect } from 'react';
+import TimelineNav from './components/TimelineNav';
+import HeroSection from './components/HeroSection';
+import ContentSections from './components/ContentSections';
+import ImageViewer from './components/ImageViewer';
+import { initScrollAnimations } from './utils/scrollAnimations';
+
+const App: React.FC = () => {
+  useEffect(() => {
+    // 初始化GSAP动画
+    initScrollAnimations();
+  }, []);
+  
+  return (
+    <div className="app">
+      <TimelineNav />
+      <HeroSection />
+      <ContentSections />
+      <ImageViewer />
+    </div>
+  );
+}
+```
+
+#### 2. TimelineNav.tsx - 时间轴导航
+```typescript
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+// 固定在页面侧边的时间轴导航
+// 使用GSAP ScrollTrigger监听滚动位置
+// 点击使用GSAP scrollTo平滑滚动
+```
+
+#### 3. ImageViewer.tsx - 图片查看器
+```typescript
+import { useState, useRef } from 'react';
+import { gsap } from 'gsap';
+
+// 支持点击放大，使用GSAP动画
+// 支持手势缩放
+// 全屏查看模式
+// ESC键退出
+```
+
+### 关键实现要点
+
+1. **滚动交互**
+   - 使用 Intersection Observer API 检测可视区域
+   - 实现平滑滚动：`behavior: 'smooth'`
+   - 添加滚动进度条
+
+2. **性能优化**
+   - 图片懒加载：`loading="lazy"`
+   - 虚拟滚动处理长内容
+   - 使用 React.memo 避免不必要渲染
+
+3. **设计系统**
+   - 主题色从订单班特色提取
+   - 统一的间距系统：8px基准
+   - GSAP动画时长：0.3-1.2s
+   - 缓动函数：power2.inOut, power3.out
+
+4. **响应式设计**
+   - 移动端：单列布局
+   - 平板：两列布局
+   - 桌面：三列布局
+
+### 验证清单
+
+执行完成后检查：
+- [ ] 网站可以正常运行 `npm run dev`
+- [ ] 所有内容从源文档正确迁移
+- [ ] 图片点击可以放大查看
+- [ ] 时间轴导航功能正常
+- [ ] TypeScript类型检查通过 `npm run type-check`
+- [ ] 滚动体验流畅（60fps）
+- [ ] GSAP动画正常运行
+- [ ] 移动端显示正常
+- [ ] 无控制台错误
+
+### 输出结构
+```
+web_frontend/web_result/order-classes/$ORDER/
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+├── tailwind.config.js
+├── postcss.config.js
+├── index.html
+├── src/
+│   ├── main.tsx
+│   ├── App.tsx
+│   ├── vite-env.d.ts
+│   ├── types/
+│   │   └── index.ts
+│   ├── components/
+│   │   ├── TimelineNav.tsx
+│   │   ├── HeroSection.tsx
+│   │   ├── ContentSections.tsx
+│   │   └── ImageViewer.tsx
+│   ├── utils/
+│   │   └── scrollAnimations.ts
+│   ├── styles/
+│   │   └── globals.css
+│   └── content/
+│       └── data.json
+└── public/
+    └── images/
+```
+
+### 记录版本信息
+```typescript
+// 让Serena记录
+interface VersionInfo {
+  order: string;
+  date: string;
+  techStack: string[];
+  style: {
+    primaryColor: string;
+    layout: string;
+    animationLibrary: string;
+  };
+  features: string[];
+}
+
+const versionInfo: VersionInfo = {
+  order: "$ORDER",
+  date: new Date().toISOString(),
+  techStack: ["React 18", "TypeScript 5", "Tailwind CSS 3", "GSAP 3.12", "Vite 5"],
+  style: {
+    primaryColor: "#xxx",
+    layout: "timeline-scroll",
+    animationLibrary: "GSAP"
+  },
+  features: ["时间轴导航", "图片查看器", "GSAP滚动动画", "TypeScript类型安全"]
+};
+```
+
+---
+**执行提示**：按照步骤顺序执行，每步完成后验证结果。遇到问题查看错误日志并调整。