Files

Yep_Q 3b8cb3c568 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

19 KiB

Raw Blame History

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

📋 任务概述

目标

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

核心要求

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

🗂️ 环境配置

变量定义

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

关键路径

# 终端模拟数据路径
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分钟)

输入

订单班详细文稿资料
终端模拟数据

执行步骤

扫描文稿结构

# 列出所有文稿文件
find "${SOURCE_MATERIALS}" -type f -name "*.md" -o -name "*.txt" | head -20

# 统计内容规模
wc -l "${SOURCE_MATERIALS}"/**/*.md

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

建立内容清单 创建 content_checklist.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分钟)

输入

内容分析报告
设计参考资源

执行步骤

创建项目结构

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

设计信息架构

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

定义设计系统 创建 design-system.md:

## 颜色方案
- 主色：根据订单班特色选择
- 辅助色：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分钟)

输入

初始设计方案
内容素材

执行步骤

准备SuperDesign环境

# 创建工作目录
mkdir -p "${SUPERDESIGN_WORK}"
cd "${SUPERDESIGN_WORK}"

# 复制初始版本
cp -r "${OUTPUT_PATH}"/* .

执行5次设计迭代

迭代1：基础布局与色彩
- 重点：确定整体布局结构和主色调
- 调整：网格系统、容器宽度、基础配色
- 输出：iteration_1/
迭代2：字体与排版优化
- 重点：优化文字层级和可读性
- 调整：字号、行高、段落间距
- 输出：iteration_2/
迭代3：交互动效增强
- 重点：添加滚动动画和过渡效果
- 调整：入场动画、悬停效果、滚动视差
- 输出：iteration_3/
迭代4：视觉细节打磨
- 重点：完善图片展示和装饰元素
- 调整：阴影、圆角、边框、背景纹理
- 输出：iteration_4/
迭代5：响应式适配
- 重点：确保多端显示效果
- 调整：断点设置、移动端布局、触摸交互
- 输出：iteration_5/

评估与选择最优版本

评估维度（每项1-10分）：

{
  "visual_appeal": "视觉吸引力",
  "brand_alignment": "品牌契合度",
  "usability": "易用性",
  "performance": "性能表现",
  "content_presentation": "内容呈现",
  "innovation": "创新性",
  "technical_quality": "技术质量"
}

创建评估报告 evaluation.md:

## 设计迭代评估报告

### 版本对比
| 版本 | 视觉 | 品牌 | 易用 | 性能 | 内容 | 创新 | 技术 | 总分 |
|------|------|------|------|------|------|------|------|------|
| V1   | 7    | 8    | 8    | 9    | 7    | 6    | 8    | 53   |
| V2   | 8    | 8    | 9    | 9    | 8    | 7    | 8    | 57   |
| ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |

### 最终选择：Version X
选择理由：...

输出

5个迭代版本
评估报告
最优版本标记

验收标准

完成5次完整迭代
每次迭代有明确改进
评估报告数据完整
最优版本选择有理有据

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

输入

选定的最优设计版本
交互需求规格

执行步骤

实现时间轴导航

// 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>
  );
};

实现图片查看器

// 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>
      )}
    </>
  );
};

实现平滑滚动和滚动动画

// 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
    }
  });
};

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

输出

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

验收标准

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

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

输入

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

执行步骤

内容迁移

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

内容验证检查表

创建 content_verification.md:

## 内容完整性检查

### 文本内容
- [ ] 所有章节标题已包含
- [ ] 核心段落无遗漏
- [ ] 技术术语准确
- [ ] 数据和数字正确

### 图片资源
- [ ] 所有图片已上传
- [ ] 图片清晰度满足要求
- [ ] 图片说明文字完整
- [ ] 图片版权信息标注

### 交互元素
- [ ] 时间线事件完整
- [ ] 链接地址正确
- [ ] 表格数据准确
- [ ] 图表显示正常

### SEO优化
- [ ] 页面标题设置
- [ ] Meta描述添加
- [ ] 图片Alt文本
- [ ] 结构化数据

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

记录版本信息

// 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工作文件

执行步骤

构建生产版本

cd "${OUTPUT_PATH}"
npm run build

# 测试生产版本
npm run preview

移动到最终位置

# 确保目标目录存在
mkdir -p "${OUTPUT_PATH}"

# 复制最优版本
cp -r "${SUPERDESIGN_WORK}/iteration_${BEST_VERSION}/"* "${OUTPUT_PATH}/"

归档SuperDesign文件

# 创建归档目录
mkdir -p "${SUPERDESIGN_ARCHIVE}"

# 移动所有迭代版本
mv "${SUPERDESIGN_WORK}"/iteration_* "${SUPERDESIGN_ARCHIVE}/"

# 保存评估报告
cp "${SUPERDESIGN_WORK}/evaluation.md" "${SUPERDESIGN_ARCHIVE}/"

# 清理工作目录
rm -rf "${SUPERDESIGN_WORK}"/*

生成交付文档

创建 README.md:

# ${ORDER_NAME} 订单班展示网站

## 项目信息
- 版本：1.0.0
- 创建日期：YYYY-MM-DD
- 设计迭代：5次
- 最终选择：Version X

## 运行指南
\`\`\`bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
\`\`\`

## 项目结构
...

## 特色功能
...

## 维护说明
...

输出

生产就绪的网站
归档的设计文件
完整的文档

验收标准

网站可正常访问
所有文件归档完成
文档清晰完整
无临时文件残留

⚠️ 注意事项

常见问题处理

内容缺失
- 检查原始资料路径是否正确
- 确认文件编码格式（UTF-8）
- 查看是否有权限问题
样式冲突
- 使用CSS Modules或Styled Components隔离样式
- 避免使用全局样式覆盖
- 保持命名规范一致性
性能问题
- 使用Chrome DevTools进行性能分析
- 实施代码分割和懒加载
- 优化图片资源（WebP格式、适当压缩）
浏览器兼容
- 测试主流浏览器（Chrome、Firefox、Safari、Edge）
- 使用Babel转译现代JavaScript
- 添加必要的CSS前缀

质量保证清单

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

备份策略

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

📝 执行命令汇总

# 快速启动脚本
#!/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 "✨ 任务完成！"

🎯 成功标准

任务成功完成的标志：

设计质量
- 视觉设计符合订单班主题特色
- 用户体验流畅自然
- 响应式适配完善
内容完整
- 所有重要内容都已展示
- 信息架构清晰合理
- 无明显遗漏或错误
技术实现
- 代码质量高，可维护性好
- 性能优化到位
- 无明显bug
交付规范
- 文件组织整齐
- 文档说明完整
- 版本管理清晰

📚 参考资源

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

19 KiB Raw Blame History Unescape Escape

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

📋 任务概述

目标

核心要求

🗂️ 环境配置

变量定义

关键路径

技术栈要求

📊 执行阶段

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

输入

执行步骤

输出

验收标准

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

输入

执行步骤

输出

验收标准

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

输入

执行步骤

输出

验收标准

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

输入

执行步骤

输出

验收标准

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

输入

执行步骤

输出

验收标准

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

输入

执行步骤

输出

验收标准

⚠️ 注意事项

常见问题处理

质量保证清单

备份策略

📝 执行命令汇总

🎯 成功标准

📚 参考资源

19 KiB

Raw Blame History