项目介绍
这个项目是对 roadmap.sh/ai-agents 的实现和学习，包含了多个版本的开发过程，从基础的HTML/CSS实现到现代的React+Tailwind CSS实现。
通过这些不同版本的实现，你可以了解如何从简单的静态页面逐步演进到现代化的交互式应用，以及如何使用不同的前端技术栈来实现类似的功能。
推荐版本
蓝图版本
数据与展示分离的现代化实现
推荐使用蓝图版本，因为它采用了数据与展示分离的架构，使用JSON存储数据，具有更好的可维护性和扩展性。同时，它也包含了所有现代化的功能，如深色模式、搜索和过滤功能等。
查看推荐版本核心特性
- 数据与展示分离
- JSON数据源
- 深色模式支持
- 搜索和过滤功能
- 现代化设计
- 响应式布局
实现版本
初始实现
基础SVG路线图和交互式节点
- 基础HTML/CSS结构
- SVG路线图可视化
- 基本交互功能
第一次尝试精确复制
改进的样式和布局
- 改进的CSS样式
- 更接近原始设计
- 增强的交互体验
进一步改进
更接近原始设计的样式
- 优化的视觉效果
- 更精确的颜色匹配
- 改进的排版
垂直布局版本
匹配提供图像的垂直结构
- 垂直布局结构
- 精确匹配参考图像
- 增强的视觉层次
现代实现
使用React和现代库
- React组件化开发
- Tailwind CSS样式
- Framer Motion动画
增强版本
优化的性能和可靠性
- 纯CSS动画实现
- React 18兼容
- 优化的字体加载
简化版本
轻量级实现
- 最小化依赖
- 快速加载速度
- 核心功能完整
产品级别版本
现代化完整实现
- 深色模式支持
- 搜索和过滤功能
- 响应式布局切换
- 性能优化
- 现代化设计
蓝图版本
数据与展示分离的现代化实现
- 数据与展示分离
- JSON数据源
- 深色模式支持
- 搜索和过滤功能
- 现代化设计