# 订单班交互式网站生成任务指南

## 📋 任务概述

### 目标
为指定订单班（order）创建一个主题鲜明、内容完整、交互流畅的展示网站，通过迭代设计和内容验证，确保最终交付物的质量。

### 核心要求
- 深度理解订单班内容特色，设计契合主题的网站风格
- 实现流畅的滚动式交互体验，配合时间轴导航
- 支持丰富的图片展示和交互功能
- 通过5次设计迭代，选择最优方案
- 确保内容的完整性和准确性

---

## 🗂️ 环境配置

### 变量定义
```bash
ORDER_NAME="食品"  # 订单班名称（可替换为：化工、智能开发等）
```

### 关键路径
```bash
# 终端模拟数据路径
TERMINAL_SIMULATIONS="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/src/data/terminalSimulations/"

# 详细文稿资料路径
SOURCE_MATERIALS="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/data/订单班文档资料/${ORDER_NAME}"

# 网页生成结果路径
OUTPUT_PATH="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/${ORDER_NAME}"

# SuperDesign工作目录
SUPERDESIGN_WORK="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/current"

# SuperDesign归档目录
SUPERDESIGN_ARCHIVE="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/archive_${ORDER_NAME}_$(date +%Y%m%d_%H%M%S)"
```

### 技术栈要求
- **前端框架**: React 18+ (TypeScript)
- **类型系统**: TypeScript 5.0+
- **样式方案**: Tailwind CSS 3.0+
- **构建工具**: Vite 5.0+
- **动画库**: GSAP 3.12+ (GreenSock Animation Platform)
- **图片处理**: 支持懒加载和预览功能
- **状态管理**: Zustand 或 Context API
- **图标库**: React Icons 或 Lucide React

---

## 📊 执行阶段

### 阶段一：内容分析与理解 (15分钟)

#### 输入
- 订单班详细文稿资料
- 终端模拟数据

#### 执行步骤
1. **扫描文稿结构**
   ```bash
   # 列出所有文稿文件
   find "${SOURCE_MATERIALS}" -type f -name "*.md" -o -name "*.txt" | head -20
   
   # 统计内容规模
   wc -l "${SOURCE_MATERIALS}"/**/*.md
   ```

2. **提取关键信息**
   - 主题和核心概念
   - 技术特点和创新点
   - 时间线和里程碑
   - 重要图表和数据
   - 案例和应用场景

3. **建立内容清单**
   创建 `content_checklist.json`:
   ```json
   {
     "theme": "订单班主题",
     "key_features": ["特色1", "特色2"],
     "timeline_events": [
       {"date": "2024-01", "event": "事件描述", "importance": "high"}
     ],
     "images": [
       {"id": "img_001", "caption": "图片说明", "category": "产品展示"}
     ],
     "technical_data": {
       "charts": [],
       "tables": []
     }
   }
   ```

#### 输出
- 内容分析报告 (`content_analysis.md`)
- 内容清单文件 (`content_checklist.json`)

#### 验收标准
- [ ] 识别出至少5个核心主题(具体数量以文稿资料中的内容准)
- [ ] 提取至少10个时间线事件(具体数量以文稿资料中的内容准)
- [ ] 整理所有重要图片资源
- [ ] 明确设计风格方向

---

### 阶段二：初始设计与架构 (20分钟)

#### 输入
- 内容分析报告
- 设计参考资源

#### 执行步骤

1. **创建项目结构**
   ```bash
   mkdir -p "${OUTPUT_PATH}"/{src,public,components,styles,assets}
   
   # 初始化 TypeScript + React 项目
   cd "${OUTPUT_PATH}"
   npm create vite@latest . -- --template react-ts
   
   # 安装核心依赖
   npm install
   
   # 安装样式和动画库
   npm install -D tailwindcss postcss autoprefixer @types/react @types/react-dom
   npm install gsap @gsap/react
   
   # 安装辅助库
   npm install react-intersection-observer zustand lucide-react
   npm install -D @types/node
   
   # 初始化 Tailwind CSS
   npx tailwindcss init -p
   ```

2. **设计信息架构**
   ```
   网站结构:
   ├── 首屏 Hero Section
   │   ├── 主标题
   │   ├── 副标题
   │   └── 滚动提示
   ├── 时间轴导航
   │   ├── 固定定位
   │   ├── 进度指示
   │   └── 快速跳转
   ├── 内容区块（按时间顺序）
   │   ├── 阶段1：研发初期
   │   ├── 阶段2：技术突破
   │   ├── 阶段3：产品应用
   │   └── 阶段4：未来展望
   └── 底部总结
   ```

3. **定义设计系统**
   创建 `design-system.md`:
   ```markdown
   ## 颜色方案
   - 主色：根据订单班特色选择
   - 辅助色：2-3个
   - 中性色：灰度系统
   
   ## 字体系统
   - 标题字体：思源黑体 / Inter
   - 正文字体：系统默认
   - 代码字体：JetBrains Mono
   
   ## 间距系统
   - 基础单位：8px
   - 组件间距：16px, 24px, 32px, 48px
   
   ## 动画原则 (GSAP)
   - 缓动函数："power2.inOut", "power3.out", "elastic.out(1, 0.3)"
   - 持续时间：0.3s - 1.2s
   - ScrollTrigger：用于滚动动画
   - Timeline：用于复杂动画序列
   - Stagger：用于列表项动画
   ```

#### 输出
- 项目基础结构
- 设计系统文档
- 组件规划图

#### 验收标准
- [ ] 项目可以正常运行
- [ ] 设计系统完整定义
- [ ] 组件结构清晰合理

---

### 阶段三：SuperDesign迭代优化 (40分钟)

#### 输入
- 初始设计方案
- 内容素材

#### 执行步骤

1. **准备SuperDesign环境**
   ```bash
   # 创建工作目录
   mkdir -p "${SUPERDESIGN_WORK}"
   cd "${SUPERDESIGN_WORK}"
   
   # 复制初始版本
   cp -r "${OUTPUT_PATH}"/* .
   ```

2. **执行5次设计迭代**

   **迭代1：基础布局与色彩**
   - 重点：确定整体布局结构和主色调
   - 调整：网格系统、容器宽度、基础配色
   - 输出：`iteration_1/`

   **迭代2：字体与排版优化**
   - 重点：优化文字层级和可读性
   - 调整：字号、行高、段落间距
   - 输出：`iteration_2/`

   **迭代3：交互动效增强**
   - 重点：添加滚动动画和过渡效果
   - 调整：入场动画、悬停效果、滚动视差
   - 输出：`iteration_3/`

   **迭代4：视觉细节打磨**
   - 重点：完善图片展示和装饰元素
   - 调整：阴影、圆角、边框、背景纹理
   - 输出：`iteration_4/`

   **迭代5：响应式适配**
   - 重点：确保多端显示效果
   - 调整：断点设置、移动端布局、触摸交互
   - 输出：`iteration_5/`

3. **评估与选择最优版本**

   评估维度（每项1-10分）：
   ```json
   {
     "visual_appeal": "视觉吸引力",
     "brand_alignment": "品牌契合度",
     "usability": "易用性",
     "performance": "性能表现",
     "content_presentation": "内容呈现",
     "innovation": "创新性",
     "technical_quality": "技术质量"
   }
   ```

   创建评估报告 `evaluation.md`:
   ```markdown
   ## 设计迭代评估报告
   
   ### 版本对比
   | 版本 | 视觉 | 品牌 | 易用 | 性能 | 内容 | 创新 | 技术 | 总分 |
   |------|------|------|------|------|------|------|------|------|
   | V1   | 7    | 8    | 8    | 9    | 7    | 6    | 8    | 53   |
   | V2   | 8    | 8    | 9    | 9    | 8    | 7    | 8    | 57   |
   | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
   
   ### 最终选择：Version X
   选择理由：...
   ```

#### 输出
- 5个迭代版本
- 评估报告
- 最优版本标记

#### 验收标准
- [ ] 完成5次完整迭代
- [ ] 每次迭代有明确改进
- [ ] 评估报告数据完整
- [ ] 最优版本选择有理有据

---

### 阶段四：功能实现与交互 (30分钟)

#### 输入
- 选定的最优设计版本
- 交互需求规格

#### 执行步骤

1. **实现时间轴导航**
   ```typescript
   // components/TimelineNav.tsx
   import React, { useEffect, useState, useRef } from 'react';
   import { gsap } from 'gsap';
   import { ScrollTrigger } from 'gsap/ScrollTrigger';
   
   gsap.registerPlugin(ScrollTrigger);
   
   interface TimelineSection {
     id: string;
     title: string;
     date: string;
   }
   
   const TimelineNav: React.FC = () => {
     const [activeSection, setActiveSection] = useState(0);
     const [scrollProgress, setScrollProgress] = useState(0);
     
     // 监听滚动位置
     useEffect(() => {
       const handleScroll = () => {
         const scrollPercentage = (window.scrollY / 
           (document.documentElement.scrollHeight - window.innerHeight)) * 100;
         setScrollProgress(scrollPercentage);
         
         // 更新活动区块
         const sections = document.querySelectorAll('.timeline-section');
         sections.forEach((section, index) => {
           const rect = section.getBoundingClientRect();
           if (rect.top <= 100 && rect.bottom >= 100) {
             setActiveSection(index);
           }
         });
       };
       
       window.addEventListener('scroll', handleScroll);
       return () => window.removeEventListener('scroll', handleScroll);
     }, []);
     
     return (
       <nav className="timeline-nav">
         {/* 时间轴UI实现 */}
       </nav>
     );
   };
   ```

2. **实现图片查看器**
   ```typescript
   // components/ImageViewer.tsx
   import React, { useState, useRef, useEffect } from 'react';
   import { gsap } from 'gsap';
   
   interface Image {
     id: string;
     thumbnail: string;
     full: string;
     caption?: string;
   }
   
   interface ImageViewerProps {
     images: Image[];
   }
   
   const ImageViewer: React.FC<ImageViewerProps> = ({ images }) => {
     const [selectedImage, setSelectedImage] = useState(null);
     const [zoom, setZoom] = useState(1);
     
     return (
       <>
         {/* 图片网格 */}
         <div className="image-grid">
           {images.map((img, idx) => (
             <img 
               key={idx}
               src={img.thumbnail}
               onClick={() => setSelectedImage(img)}
               loading="lazy"
             />
           ))}
         </div>
         
         {/* 全屏查看器 */}
         {selectedImage && (
           <div className="image-viewer-modal">
             <img 
               src={selectedImage.full}
               style={{ transform: `scale(${zoom})` }}
             />
             {/* 控制按钮 */}
           </div>
         )}
       </>
     );
   };
   ```

3. **实现平滑滚动和滚动动画**
   ```typescript
   // utils/scrollAnimations.ts
   import { gsap } from 'gsap';
   import { ScrollTrigger } from 'gsap/ScrollTrigger';
   
   gsap.registerPlugin(ScrollTrigger);
   
   export const smoothScrollTo = (targetId: string): void => {
     const element = document.getElementById(targetId);
     if (element) {
       // 使用 GSAP 实现更流畅的滚动
       gsap.to(window, {
         duration: 1.2,
         scrollTo: {
           y: element,
           offsetY: 80 // 导航栏高度偏移
         },
         ease: "power3.inOut"
       });
     }
   };
   
   // 初始化滚动触发动画
   export const initScrollAnimations = (): void => {
     // 标题动画
     gsap.utils.toArray<HTMLElement>('.animate-title').forEach((element) => {
       gsap.from(element, {
         y: 50,
         opacity: 0,
         duration: 1,
         scrollTrigger: {
           trigger: element,
           start: 'top 80%',
           end: 'bottom 20%',
           toggleActions: 'play none none reverse'
         }
       });
     });
     
     // 内容区块动画
     gsap.utils.toArray<HTMLElement>('.animate-content').forEach((element, index) => {
       gsap.from(element, {
         x: index % 2 === 0 ? -100 : 100,
         opacity: 0,
         duration: 1,
         scrollTrigger: {
           trigger: element,
           start: 'top 75%',
           scrub: 1
         }
       });
     });
     
     // 时间轴进度动画
     gsap.to('.timeline-progress', {
       height: '100%',
       ease: 'none',
       scrollTrigger: {
         trigger: document.body,
         start: 'top top',
         end: 'bottom bottom',
         scrub: true
       }
     });
   };
   ```

4. **性能优化**
   - 实现图片懒加载
   - 添加滚动节流
   - 优化动画性能
   - 代码分割和按需加载

#### 输出
- 完整的交互组件
- 性能优化报告
- 功能测试清单

#### 验收标准
- [ ] 时间轴导航功能正常
- [ ] 图片查看器支持放大缩小
- [ ] 滚动性能流畅（60fps）
- [ ] 所有交互响应及时

---

### 阶段五：内容集成与验证 (25分钟)

#### 输入
- 功能完整的网站框架
- 原始内容资料
- 内容清单

#### 执行步骤

1. **内容迁移**
   ```bash
   # 处理Markdown内容
   npx tsx scripts/content-processor.ts \
     --input "${SOURCE_MATERIALS}" \
     --output "${OUTPUT_PATH}/src/content"
   ```

2. **内容验证检查表**
   
   创建 `content_verification.md`:
   ```markdown
   ## 内容完整性检查
   
   ### 文本内容
   - [ ] 所有章节标题已包含
   - [ ] 核心段落无遗漏
   - [ ] 技术术语准确
   - [ ] 数据和数字正确
   
   ### 图片资源
   - [ ] 所有图片已上传
   - [ ] 图片清晰度满足要求
   - [ ] 图片说明文字完整
   - [ ] 图片版权信息标注
   
   ### 交互元素
   - [ ] 时间线事件完整
   - [ ] 链接地址正确
   - [ ] 表格数据准确
   - [ ] 图表显示正常
   
   ### SEO优化
   - [ ] 页面标题设置
   - [ ] Meta描述添加
   - [ ] 图片Alt文本
   - [ ] 结构化数据
   ```

3. **内容优化**
   - 调整文字排版，提高可读性
   - 优化图片尺寸和格式
   - 添加适当的动画和过渡
   - 确保内容层次清晰

4. **记录版本信息**
   ```typescript
   // version.ts - 让Serena记录当前版本
   interface VersionInfo {
     version: string;
     date: string;
     order: string;
     style: {
       primaryColor: string;
       fontFamily: string;
       layoutType: string;
       animationLibrary: string;
     };
     techStack: string[];
     features: string[];
   }
   
   const versionInfo: VersionInfo = {
     version: "1.0.0",
     date: new Date().toISOString(),
     order: ORDER_NAME,
     style: {
       primaryColor: "#xxx",
       fontFamily: "Inter, system-ui",
       layoutType: "timeline-scroll",
       animationLibrary: "GSAP"
     },
     techStack: [
       "React 18",
       "TypeScript 5",
       "Tailwind CSS 3",
       "GSAP 3.12",
       "Vite 5"
     ],
     features: [
       "时间轴导航",
       "图片查看器",
       "GSAP滚动动画",
       "响应式设计",
       "TypeScript类型安全"
     ]
   };
   
   // 保存到 version.json
   await fs.writeFile(
     'version.json',
     JSON.stringify(versionInfo, null, 2)
   );
   ```

#### 输出
- 内容完整的网站
- 验证报告
- 版本记录文件

#### 验收标准
- [ ] 内容100%迁移完成
- [ ] 无明显排版问题
- [ ] 图片显示正常
- [ ] 通过所有验证项

---

### 阶段六：部署与归档 (10分钟)

#### 输入
- 完成的网站项目
- SuperDesign工作文件

#### 执行步骤

1. **构建生产版本**
   ```bash
   cd "${OUTPUT_PATH}"
   npm run build
   
   # 测试生产版本
   npm run preview
   ```

2. **移动到最终位置**
   ```bash
   # 确保目标目录存在
   mkdir -p "${OUTPUT_PATH}"
   
   # 复制最优版本
   cp -r "${SUPERDESIGN_WORK}/iteration_${BEST_VERSION}/"* "${OUTPUT_PATH}/"
   ```

3. **归档SuperDesign文件**
   ```bash
   # 创建归档目录
   mkdir -p "${SUPERDESIGN_ARCHIVE}"
   
   # 移动所有迭代版本
   mv "${SUPERDESIGN_WORK}"/iteration_* "${SUPERDESIGN_ARCHIVE}/"
   
   # 保存评估报告
   cp "${SUPERDESIGN_WORK}/evaluation.md" "${SUPERDESIGN_ARCHIVE}/"
   
   # 清理工作目录
   rm -rf "${SUPERDESIGN_WORK}"/*
   ```

4. **生成交付文档**
   
   创建 `README.md`:
   ```markdown
   # ${ORDER_NAME} 订单班展示网站
   
   ## 项目信息
   - 版本：1.0.0
   - 创建日期：YYYY-MM-DD
   - 设计迭代：5次
   - 最终选择：Version X
   
   ## 运行指南
   \`\`\`bash
   # 安装依赖
   npm install
   
   # 开发模式
   npm run dev
   
   # 构建生产版本
   npm run build
   
   # 预览生产版本
   npm run preview
   \`\`\`
   
   ## 项目结构
   ...
   
   ## 特色功能
   ...
   
   ## 维护说明
   ...
   ```

#### 输出
- 生产就绪的网站
- 归档的设计文件
- 完整的文档

#### 验收标准
- [ ] 网站可正常访问
- [ ] 所有文件归档完成
- [ ] 文档清晰完整
- [ ] 无临时文件残留

---

## ⚠️ 注意事项

### 常见问题处理

1. **内容缺失**
   - 检查原始资料路径是否正确
   - 确认文件编码格式（UTF-8）
   - 查看是否有权限问题

2. **样式冲突**
   - 使用CSS Modules或Styled Components隔离样式
   - 避免使用全局样式覆盖
   - 保持命名规范一致性

3. **性能问题**
   - 使用Chrome DevTools进行性能分析
   - 实施代码分割和懒加载
   - 优化图片资源（WebP格式、适当压缩）

4. **浏览器兼容**
   - 测试主流浏览器（Chrome、Firefox、Safari、Edge）
   - 使用Babel转译现代JavaScript
   - 添加必要的CSS前缀

### 质量保证清单

- [ ] 代码通过ESLint检查
- [ ] 无控制台错误和警告
- [ ] TypeScript类型检查通过
- [ ] Lighthouse评分 > 90
- [ ] 移动端响应式正常
- [ ] 图片都有Alt文本
- [ ] 关键功能有单元测试
- [ ] README文档完整
- [ ] Git提交信息规范

### 备份策略

1. 每个迭代版本都保存副本
2. 重要修改前创建Git分支
3. 定期推送到远程仓库
4. 保留原始资料的备份

---

## 📝 执行命令汇总

```bash
# 快速启动脚本
#!/bin/bash

# 设置变量
export ORDER_NAME="食品"
export PROJECT_ROOT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示"

# 阶段1：分析内容
echo "🔍 开始内容分析..."
# ... 内容分析命令

# 阶段2：初始化项目
echo "🚀 初始化项目..."
# ... 项目初始化命令

# 阶段3：设计迭代
echo "🎨 开始设计迭代..."
# ... SuperDesign命令

# 阶段4：实现功能
echo "⚙️ 实现交互功能..."
# ... 功能实现命令

# 阶段5：内容验证
echo "✅ 验证内容完整性..."
# ... 内容验证命令

# 阶段6：部署归档
echo "📦 部署和归档..."
# ... 部署归档命令

echo "✨ 任务完成！"
```

---

## 🎯 成功标准

任务成功完成的标志：

1. **设计质量**
   - 视觉设计符合订单班主题特色
   - 用户体验流畅自然
   - 响应式适配完善

2. **内容完整**
   - 所有重要内容都已展示
   - 信息架构清晰合理
   - 无明显遗漏或错误

3. **技术实现**
   - 代码质量高，可维护性好
   - 性能优化到位
   - 无明显bug

4. **交付规范**
   - 文件组织整齐
   - 文档说明完整
   - 版本管理清晰

---

## 📚 参考资源

- [React文档](https://react.dev)
- [TypeScript文档](https://www.typescriptlang.org/docs)
- [Tailwind CSS](https://tailwindcss.com)
- [GSAP文档](https://gsap.com/docs)
- [GSAP ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger)
- [Vite构建工具](https://vitejs.dev)
- [Web性能优化指南](https://web.dev/performance)

---

**提示词版本**: 2.0
**最后更新**: 2024-XX-XX
**适用对象**: Claude Code Agent