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>
This commit is contained in:
Yep_Q
510
doc/任务/子任务/gsap_examples.md
Normal file
510
doc/任务/子任务/gsap_examples.md
Normal file
@@ -0,0 +1,510 @@
|
||||
# GSAP 动画实现示例
|
||||
|
||||
## 核心动画配置
|
||||
|
||||
### 1. GSAP 初始化设置
|
||||
```typescript
|
||||
// src/utils/gsapConfig.ts
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
|
||||
|
||||
// 注册插件
|
||||
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
|
||||
|
||||
// 全局配置
|
||||
gsap.config({
|
||||
nullTargetWarn: false,
|
||||
force3D: true
|
||||
});
|
||||
|
||||
// 默认缓动函数
|
||||
gsap.defaults({
|
||||
ease: "power2.inOut",
|
||||
duration: 0.8
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 时间轴导航动画
|
||||
```typescript
|
||||
// src/components/TimelineNav.tsx
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
interface TimelineItem {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const TimelineNav: React.FC<{ items: TimelineItem[] }> = ({ items }) => {
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
const progressRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// 进度条动画
|
||||
gsap.to(progressRef.current, {
|
||||
height: '100%',
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: document.body,
|
||||
start: 'top top',
|
||||
end: 'bottom bottom',
|
||||
scrub: 1,
|
||||
onUpdate: (self) => {
|
||||
// 更新当前激活的时间节点
|
||||
const progress = self.progress;
|
||||
const activeIndex = Math.floor(progress * items.length);
|
||||
updateActiveNode(activeIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 时间节点入场动画
|
||||
gsap.from('.timeline-node', {
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
stagger: 0.1,
|
||||
ease: 'back.out(1.7)'
|
||||
});
|
||||
}, timelineRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [items]);
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
gsap.to(window, {
|
||||
duration: 1.2,
|
||||
scrollTo: {
|
||||
y: `#${id}`,
|
||||
offsetY: 100
|
||||
},
|
||||
ease: "power3.inOut"
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<nav ref={timelineRef} className="fixed left-8 top-1/2 -translate-y-1/2 z-50">
|
||||
<div className="relative">
|
||||
{/* 进度条背景 */}
|
||||
<div className="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gray-200" />
|
||||
|
||||
{/* 动态进度条 */}
|
||||
<div
|
||||
ref={progressRef}
|
||||
className="absolute left-1/2 -translate-x-1/2 w-1 bg-gradient-to-b from-blue-500 to-purple-600"
|
||||
style={{ height: '0%' }}
|
||||
/>
|
||||
|
||||
{/* 时间节点 */}
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="timeline-node relative mb-12 cursor-pointer"
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
>
|
||||
<div className="w-4 h-4 bg-white border-2 border-gray-400 rounded-full transition-all hover:scale-125" />
|
||||
<span className="absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap text-sm">
|
||||
{item.date}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3. 内容区块滚动动画
|
||||
```typescript
|
||||
// src/components/ContentSection.tsx
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
const ContentSection: React.FC<{ data: any; index: number }> = ({ data, index }) => {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// 创建时间线
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: sectionRef.current,
|
||||
start: 'top 80%',
|
||||
end: 'bottom 20%',
|
||||
toggleActions: 'play none none reverse',
|
||||
markers: false // 开发时可设为true查看触发点
|
||||
}
|
||||
});
|
||||
|
||||
// 标题动画
|
||||
tl.from('.section-title', {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out'
|
||||
});
|
||||
|
||||
// 内容交错动画
|
||||
tl.from('.content-item', {
|
||||
x: index % 2 === 0 ? -150 : 150,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
ease: 'power2.out'
|
||||
}, '-=0.5');
|
||||
|
||||
// 图片视差效果
|
||||
gsap.to('.parallax-image', {
|
||||
yPercent: -20,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: sectionRef.current,
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
scrub: 1
|
||||
}
|
||||
});
|
||||
|
||||
}, sectionRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [index]);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} id={data.id} className="min-h-screen py-20">
|
||||
<div ref={contentRef} className="container mx-auto px-8">
|
||||
<h2 className="section-title text-5xl font-bold mb-8">{data.title}</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{data.items.map((item: any, i: number) => (
|
||||
<div key={i} className="content-item">
|
||||
<div className="overflow-hidden rounded-lg">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="parallax-image w-full h-64 object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mt-4">{item.title}</h3>
|
||||
<p className="text-gray-600 mt-2">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 4. 图片查看器动画
|
||||
```typescript
|
||||
// src/components/ImageViewer.tsx
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
|
||||
const ImageViewer: React.FC<{ images: string[] }> = ({ images }) => {
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedImage && modalRef.current && imageRef.current) {
|
||||
// 模态框背景动画
|
||||
gsap.fromTo(modalRef.current,
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1, duration: 0.3 }
|
||||
);
|
||||
|
||||
// 图片缩放入场
|
||||
gsap.fromTo(imageRef.current,
|
||||
{
|
||||
scale: 0.5,
|
||||
opacity: 0,
|
||||
rotation: -10
|
||||
},
|
||||
{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
rotation: 0,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.7)"
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [selectedImage]);
|
||||
|
||||
const closeViewer = () => {
|
||||
// 退出动画
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => setSelectedImage(null)
|
||||
});
|
||||
|
||||
tl.to(imageRef.current, {
|
||||
scale: 0.8,
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
ease: "power2.in"
|
||||
});
|
||||
|
||||
tl.to(modalRef.current, {
|
||||
opacity: 0,
|
||||
duration: 0.2
|
||||
}, '-=0.2');
|
||||
};
|
||||
|
||||
const handleZoom = (scale: number) => {
|
||||
gsap.to(imageRef.current, {
|
||||
scale: scale,
|
||||
duration: 0.4,
|
||||
ease: "power2.inOut"
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 图片网格 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{images.map((src, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="image-thumbnail cursor-pointer overflow-hidden rounded-lg"
|
||||
onClick={() => setSelectedImage(src)}
|
||||
onMouseEnter={(e) => {
|
||||
gsap.to(e.currentTarget.querySelector('img'), {
|
||||
scale: 1.1,
|
||||
duration: 0.3
|
||||
});
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
gsap.to(e.currentTarget.querySelector('img'), {
|
||||
scale: 1,
|
||||
duration: 0.3
|
||||
});
|
||||
}}
|
||||
>
|
||||
<img src={src} alt="" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 查看器模态框 */}
|
||||
{selectedImage && (
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
|
||||
onClick={closeViewer}
|
||||
>
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={selectedImage}
|
||||
alt=""
|
||||
className="max-w-[90%] max-h-[90%] cursor-zoom-in"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleZoom(2);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 控制按钮 */}
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-4">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleZoom(0.5); }}
|
||||
className="px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30"
|
||||
>
|
||||
缩小
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleZoom(1); }}
|
||||
className="px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30"
|
||||
>
|
||||
原始大小
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleZoom(2); }}
|
||||
className="px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30"
|
||||
>
|
||||
放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 5. 页面加载动画
|
||||
```typescript
|
||||
// src/components/LoadingAnimation.tsx
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
|
||||
const LoadingAnimation: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
|
||||
const loaderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const tl = gsap.timeline({
|
||||
onComplete: onComplete
|
||||
});
|
||||
|
||||
// Logo动画
|
||||
tl.from('.logo-text', {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out'
|
||||
});
|
||||
|
||||
// 进度条动画
|
||||
tl.to('.progress-bar', {
|
||||
width: '100%',
|
||||
duration: 2,
|
||||
ease: 'power2.inOut'
|
||||
});
|
||||
|
||||
// 退出动画
|
||||
tl.to(loaderRef.current, {
|
||||
yPercent: -100,
|
||||
duration: 0.8,
|
||||
ease: 'power3.inOut'
|
||||
});
|
||||
|
||||
}, [onComplete]);
|
||||
|
||||
return (
|
||||
<div ref={loaderRef} className="fixed inset-0 bg-gradient-to-br from-blue-600 to-purple-700 z-50">
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<h1 className="logo-text text-6xl font-bold text-white mb-8">
|
||||
订单班展示
|
||||
</h1>
|
||||
<div className="w-64 h-1 bg-white/20 rounded-full overflow-hidden">
|
||||
<div className="progress-bar h-full bg-white rounded-full" style={{ width: '0%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 性能优化技巧
|
||||
|
||||
### 1. ScrollTrigger 优化
|
||||
```typescript
|
||||
// 批量创建 ScrollTrigger
|
||||
ScrollTrigger.batch('.animate-item', {
|
||||
onEnter: (batch) => gsap.to(batch, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
stagger: 0.15,
|
||||
overwrite: true
|
||||
}),
|
||||
onLeave: (batch) => gsap.to(batch, {
|
||||
opacity: 0,
|
||||
y: 100,
|
||||
stagger: 0.15,
|
||||
overwrite: true
|
||||
}),
|
||||
onEnterBack: (batch) => gsap.to(batch, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
stagger: 0.15,
|
||||
overwrite: true
|
||||
}),
|
||||
onLeaveBack: (batch) => gsap.to(batch, {
|
||||
opacity: 0,
|
||||
y: -100,
|
||||
stagger: 0.15,
|
||||
overwrite: true
|
||||
})
|
||||
});
|
||||
|
||||
// 刷新 ScrollTrigger
|
||||
ScrollTrigger.refresh();
|
||||
```
|
||||
|
||||
### 2. 清理和内存管理
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// 创建上下文
|
||||
const ctx = gsap.context(() => {
|
||||
// 所有GSAP动画代码
|
||||
}, containerRef);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
ctx.revert(); // 清理所有动画
|
||||
ScrollTrigger.getAll().forEach(trigger => trigger.kill());
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
### 3. 响应式处理
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// 创建媒体查询
|
||||
const mm = gsap.matchMedia();
|
||||
|
||||
mm.add("(min-width: 768px)", () => {
|
||||
// 桌面端动画
|
||||
gsap.to('.desktop-element', {
|
||||
x: 100,
|
||||
duration: 1
|
||||
});
|
||||
});
|
||||
|
||||
mm.add("(max-width: 767px)", () => {
|
||||
// 移动端动画
|
||||
gsap.to('.mobile-element', {
|
||||
y: 50,
|
||||
duration: 0.8
|
||||
});
|
||||
});
|
||||
|
||||
return () => mm.revert();
|
||||
}, []);
|
||||
```
|
||||
|
||||
## 常用缓动函数
|
||||
|
||||
```typescript
|
||||
// GSAP 内置缓动函数
|
||||
const easings = {
|
||||
smooth: "power2.inOut", // 平滑过渡
|
||||
snappy: "power3.out", // 快速停止
|
||||
bounce: "bounce.out", // 弹跳效果
|
||||
elastic: "elastic.out(1, 0.3)", // 弹性效果
|
||||
back: "back.out(1.7)", // 回弹效果
|
||||
expo: "expo.out", // 指数缓动
|
||||
slow: "power4.inOut", // 缓慢过渡
|
||||
custom: "cubic-bezier(0.68, -0.55, 0.265, 1.55)" // 自定义贝塞尔曲线
|
||||
};
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **性能考虑**
|
||||
- 使用 `will-change` CSS属性优化动画元素
|
||||
- 避免同时动画过多元素
|
||||
- 使用 `force3D: true` 启用硬件加速
|
||||
|
||||
2. **移动端优化**
|
||||
- 减少移动端的动画复杂度
|
||||
- 使用 `gsap.matchMedia()` 做响应式处理
|
||||
- 考虑使用 `reduced-motion` 媒体查询
|
||||
|
||||
3. **调试技巧**
|
||||
- 使用 `markers: true` 查看 ScrollTrigger 触发点
|
||||
- 使用 GSDevTools 插件进行动画调试
|
||||
- 控制台使用 `gsap.globalTimeline.timeScale(0.5)` 减慢所有动画
|
||||
|
||||
4. **最佳实践**
|
||||
- 始终使用 `gsap.context()` 管理动画
|
||||
- 组件卸载时清理所有动画和 ScrollTrigger
|
||||
- 使用 `overwrite: true` 避免动画冲突
|
||||
@@ -0,0 +1,112 @@
|
||||
# 订单班交互式网站迭代设计任务
|
||||
|
||||
## 配置参数
|
||||
```bash
|
||||
ORDER="食品" # 订单班类型（可选：食品、化工、智能开发等）
|
||||
```
|
||||
|
||||
## 关键路径定义
|
||||
```bash
|
||||
# 数据源路径
|
||||
TERMINAL_SIM="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/src/data/terminalSimulations/"
|
||||
SOURCE_DOCS="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/data/订单班文档资料/${ORDER}"
|
||||
|
||||
# 输出路径
|
||||
WEB_OUTPUT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/${ORDER}"
|
||||
|
||||
# SuperDesign路径
|
||||
SUPERDESIGN_WORK="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/current"
|
||||
SUPERDESIGN_ARCHIVE="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/archive_${ORDER}_$(date +%Y%m%d)"
|
||||
```
|
||||
|
||||
## 执行步骤
|
||||
|
||||
### 1. 内容分析阶段
|
||||
**目标**：深度理解订单班的内容特色和核心要素
|
||||
|
||||
**具体任务**：
|
||||
- 扫描并分析 `SOURCE_DOCS` 中的所有文稿资料
|
||||
- 提取关键信息：主题、技术特点、时间线、重要数据、图片资源
|
||||
- 创建内容清单 `content_checklist.json`，包含所有需要展示的元素
|
||||
- 输出内容分析报告，明确设计方向
|
||||
|
||||
### 2. 页面设计阶段
|
||||
**目标**：创建符合订单班特色的交互式网站
|
||||
|
||||
**设计要求**：
|
||||
- **布局结构**：单页滚动式，配合固定时间轴导航
|
||||
- **视觉风格**：根据订单班特色定制主题色彩和设计语言
|
||||
- **核心功能**：
|
||||
- 时间轴导航：显示进度，支持快速跳转
|
||||
- 图片查看器：支持点击放大、缩放、全屏查看
|
||||
- 平滑滚动：各阶段内容流畅过渡
|
||||
|
||||
**技术实现**：
|
||||
- 使用React 18 + TypeScript构建
|
||||
- Tailwind CSS 3.0处理样式
|
||||
- GSAP 3.12实现动画和滚动交互
|
||||
- 图片懒加载优化性能
|
||||
- Vite 5.0作为构建工具
|
||||
|
||||
### 3. SuperDesign迭代优化
|
||||
**目标**：通过5次迭代找到最优设计方案
|
||||
|
||||
**迭代流程**：
|
||||
1. **迭代1**：确定基础布局和主色调
|
||||
2. **迭代2**：优化字体排版和内容层级
|
||||
3. **迭代3**：增强交互动效和用户体验
|
||||
4. **迭代4**：完善视觉细节和装饰元素
|
||||
5. **迭代5**：响应式适配和性能优化
|
||||
|
||||
**评估标准**（每项1-10分）：
|
||||
- 视觉吸引力
|
||||
- 品牌契合度
|
||||
- 用户体验
|
||||
- 性能表现
|
||||
- 内容呈现
|
||||
- 创新性
|
||||
|
||||
**选择最优版本**：
|
||||
- 创建评估矩阵，对比各版本得分
|
||||
- 记录选择理由
|
||||
- 标记最优版本号
|
||||
|
||||
### 4. 部署与归档
|
||||
**目标**：完成项目交付和文件整理
|
||||
|
||||
**执行任务**：
|
||||
1. 将最优版本部署到 `WEB_OUTPUT`
|
||||
2. 归档所有SuperDesign迭代版本到 `SUPERDESIGN_ARCHIVE`
|
||||
3. 让Serena记录最终版本的设计风格和特征
|
||||
4. 清理临时工作目录
|
||||
|
||||
### 5. 内容验证与质量保证
|
||||
**目标**：确保内容完整性和展示效果
|
||||
|
||||
**检查清单**：
|
||||
- [ ] 所有文稿内容已正确迁移
|
||||
- [ ] 图片资源完整且显示正常
|
||||
- [ ] 时间线事件准确无遗漏
|
||||
- [ ] 交互功能运行流畅
|
||||
- [ ] 响应式布局适配完善
|
||||
- [ ] 无控制台错误
|
||||
- [ ] TypeScript类型检查通过
|
||||
- [ ] 性能指标达标（Lighthouse > 90）
|
||||
|
||||
**优化建议**：
|
||||
- 识别内容展示的优化空间
|
||||
- 调整不合适的设计元素
|
||||
- 完善用户体验细节
|
||||
|
||||
## 质量标准
|
||||
- 设计与订单班主题高度契合
|
||||
- 内容100%准确完整
|
||||
- 用户体验流畅自然
|
||||
- 代码规范可维护
|
||||
- 文档清晰完整
|
||||
|
||||
## 注意事项
|
||||
- 确保所有路径变量正确替换
|
||||
- 保持Git版本管理
|
||||
- 每个阶段创建检查点
|
||||
- 遇到问题及时记录和处理
|
||||
209
doc/任务/子任务/prompt_claude_code.md
Normal file
209
doc/任务/子任务/prompt_claude_code.md
Normal file
@@ -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类型安全"]
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
**执行提示**：按照步骤顺序执行，每步完成后验证结果。遇到问题查看错误日志并调整。
|
||||
810
doc/任务/子任务/prompt_optimized.md
Normal file
810
doc/任务/子任务/prompt_optimized.md
Normal file
@@ -0,0 +1,810 @@
|
||||
# 订单班交互式网站生成任务指南
|
||||
|
||||
## 📋 任务概述
|
||||
|
||||
### 目标
|
||||
为指定订单班（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
|
||||
Reference in New Issue
Block a user