Agent-n8n/doc/任务/子任务/prompt_claude_code.md

# 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类型安全"]
};
```

---
**执行提示**：按照步骤顺序执行，每步完成后验证结果。遇到问题查看错误日志并调整。