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

Claude Code 任务执行指令

任务：创建订单班交互式展示网站

快速配置

ORDER="食品"
PROJECT_ROOT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示"

执行命令序列

# 步骤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 - 主应用结构

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 - 时间轴导航

import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 固定在页面侧边的时间轴导航
// 使用GSAP ScrollTrigger监听滚动位置
// 点击使用GSAP scrollTo平滑滚动

3. ImageViewer.tsx - 图片查看器

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/

记录版本信息

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

---

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