diff --git a/src/examples/CoolLibrariesDemo.tsx b/src/examples/CoolLibrariesDemo.tsx new file mode 100644 index 0000000..cb32910 --- /dev/null +++ b/src/examples/CoolLibrariesDemo.tsx @@ -0,0 +1,634 @@ +import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import Confetti from 'react-confetti'; +import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell } from 'recharts'; + +// ========== 炫酷组件库演示 ========== + +// 1. Framer Motion 动画演示 +const FramerMotionDemo: React.FC = () => { + const [isVisible, setIsVisible] = useState(true); + const [selectedCard, setSelectedCard] = useState(null); + + const cards = [ + { id: 1, title: '卡片 1', color: '#FF6B6B', icon: '🚀' }, + { id: 2, title: '卡片 2', color: '#4ECDC4', icon: '🎨' }, + { id: 3, title: '卡片 3', color: '#45B7D1', icon: '⚡' }, + { id: 4, title: '卡片 4', color: '#96CEB4', icon: '🌟' } + ]; + + return ( +
+

🎬 Framer Motion 动画库

+ +
+ setIsVisible(!isVisible)} + style={{ + padding: '12px 24px', + backgroundColor: '#ff7675', + color: 'white', + border: 'none', + borderRadius: '25px', + cursor: 'pointer', + fontSize: '16px', + marginRight: '10px' + }} + > + {isVisible ? '隐藏动画元素' : '显示动画元素'} + +
+ + + {isVisible && ( + +

✨ 入场/退场动画

+

这个元素有平滑的进入和退出动画效果！

+ + )} + + +
+ {cards.map((card) => ( + setSelectedCard(selectedCard === card.id ? null : card.id)} + whileHover={{ + scale: 1.05, + rotate: selectedCard === card.id ? 0 : 5, + transition: { duration: 0.2 } + }} + whileTap={{ scale: 0.95 }} + animate={{ + backgroundColor: selectedCard === card.id ? '#2d3436' : card.color, + scale: selectedCard === card.id ? 1.1 : 1 + }} + style={{ + padding: '20px', + borderRadius: '15px', + cursor: 'pointer', + textAlign: 'center', + backgroundColor: card.color + }} + > + + {card.icon} + +

{card.title}

+ {selectedCard === card.id && ( + + 选中状态！ + + )} + + ))} +
+ + + 🌀 + +
+ ); +}; + +// 2. React Confetti 彩纸效果演示 +const ConfettiDemo: React.FC = () => { + const [showConfetti, setShowConfetti] = useState(false); + const [confettiConfig, setConfettiConfig] = useState({ + numberOfPieces: 200, + gravity: 0.1 + }); + + useEffect(() => { + if (showConfetti) { + const timer = setTimeout(() => setShowConfetti(false), 5000); + return () => clearTimeout(timer); + } + }, [showConfetti]); + + return ( +
+ {showConfetti && ( + + )} + +

🎉 React Confetti 彩纸效果

+

点击按钮释放彩纸庆祝效果！

+ +
+ + + +
+ + setShowConfetti(true)} + disabled={showConfetti} + style={{ + padding: '15px 30px', + backgroundColor: showConfetti ? '#95a5a6' : '#e74c3c', + color: 'white', + border: 'none', + borderRadius: '25px', + cursor: showConfetti ? 'not-allowed' : 'pointer', + fontSize: '18px', + fontWeight: 'bold' + }} + > + {showConfetti ? '彩纸飞舞中...' : '🎊 释放彩纸！'} + +
+ ); +}; + +// 3. Recharts 图表演示 +const ChartsDemo: React.FC = () => { + const [chartType, setChartType] = useState<'line' | 'bar' | 'pie'>('line'); + + const lineData = [ + { name: '1月', 用户: 400, 销售: 240, 访问: 300 }, + { name: '2月', 用户: 300, 销售: 139, 访问: 200 }, + { name: '3月', 用户: 200, 销售: 980, 访问: 400 }, + { name: '4月', 用户: 278, 销售: 390, 访问: 350 }, + { name: '5月', 用户: 189, 销售: 480, 访问: 200 }, + { name: '6月', 用户: 239, 销售: 380, 访问: 500 }, + ]; + + const pieData = [ + { name: 'React', value: 35, color: '#61dafb' }, + { name: 'Vue', value: 25, color: '#4fc08d' }, + { name: 'Angular', value: 20, color: '#dd1b16' }, + { name: 'Svelte', value: 10, color: '#ff3e00' }, + { name: '其他', value: 10, color: '#9ca3af' } + ]; + + const renderChart = () => { + switch (chartType) { + case 'line': + return ( + + + + + + + + + + + + + ); + case 'bar': + return ( + + + + + + + + + + + + + ); + case 'pie': + return ( + + + `${name} ${((percent || 0) * 100).toFixed(0)}%`} + outerRadius={80} + fill="#8884d8" + dataKey="value" + > + {pieData.map((entry, index) => ( + + ))} + + + + + ); + default: + return null; + } + }; + + return ( +
+

📊 Recharts 图表库

+ +
+ {(['line', 'bar', 'pie'] as const).map((type) => ( + setChartType(type)} + style={{ + padding: '8px 16px', + marginRight: '10px', + backgroundColor: chartType === type ? '#e17055' : '#ddd', + color: chartType === type ? 'white' : '#333', + border: 'none', + borderRadius: '20px', + cursor: 'pointer' + }} + > + {type === 'line' ? '📈 折线图' : type === 'bar' ? '📊 柱状图' : '🥧 饼图'} + + ))} +
+ + + {renderChart()} + +
+ ); +}; + +// 4. 炫酷加载动画演示 +const LoadingAnimationsDemo: React.FC = () => { + const [isLoading, setIsLoading] = useState(false); + + const startLoading = () => { + setIsLoading(true); + setTimeout(() => setIsLoading(false), 3000); + }; + + return ( +
+

⏳ 炫酷加载动画

+ + + {isLoading ? '加载中...' : '开始加载'} + + + + {isLoading && ( + + {/* 旋转圆环 */} + + + {/* 脉冲圆点 */} +
+ {[0, 1, 2].map((i) => ( + + ))} +
+ + {/* 波浪进度条 */} +
+ +
+ + )} + +
+ ); +}; + +// 5. 交互式卡片网格 +const InteractiveCardsDemo: React.FC = () => { + const [hoveredCard, setHoveredCard] = useState(null); + + const features = [ + { id: 1, title: '高性能', icon: '⚡', description: '极致的性能优化' }, + { id: 2, title: '易使用', icon: '🎯', description: '简单直观的API' }, + { id: 3, title: '可定制', icon: '🎨', description: '灵活的主题配置' }, + { id: 4, title: '响应式', icon: '📱', description: '完美适配各种设备' }, + { id: 5, title: '现代化', icon: '🚀', description: '最新技术栈支持' }, + { id: 6, title: '文档完善', icon: '📚', description: '详细的使用指南' } + ]; + + return ( +
+

🎴 交互式卡片网格

+ + + {features.map((feature) => ( + setHoveredCard(feature.id)} + onHoverEnd={() => setHoveredCard(null)} + whileHover={{ + scale: 1.05, + rotateY: 5, + z: 50 + }} + whileTap={{ scale: 0.95 }} + style={{ + padding: '20px', + backgroundColor: hoveredCard === feature.id ? '#00cec9' : 'white', + color: hoveredCard === feature.id ? 'white' : '#2d3436', + borderRadius: '15px', + boxShadow: hoveredCard === feature.id + ? '0 10px 30px rgba(0, 206, 201, 0.3)' + : '0 5px 15px rgba(0,0,0,0.1)', + cursor: 'pointer', + textAlign: 'center', + transition: 'all 0.3s ease' + }} + > + + {feature.icon} + +

{feature.title}

+ + {hoveredCard === feature.id && ( + + {feature.description} + + )} + + + ))} + +
+ ); +}; + +// 主组件 +const CoolLibrariesDemo: React.FC = () => { + return ( +
+ +

+ ✨ 炫酷React组件库演示 +

+

+ 探索最受欢迎的React UI库和动画库，提升用户体验 +

+ + + + + + + + + +

🎯 组件库推荐总结

+
+
+

🎬 动画库

+
    +
  • Framer Motion: 最强大的React动画库
    • +
  • React Spring: 基于物理的动画
    • +
  • React Transition Group: 过渡动画
    • +
+
+
+

🎨 UI组件库

+
    +
  • Ant Design: 企业级UI设计语言
    • +
  • Material-UI: Google Material Design
    • +
  • Chakra UI: 简单、模块化、易用
    • +
+
+
+

📊 数据可视化

+
    +
  • Recharts: 基于D3的图表库
    • +
  • Victory: 模块化图表库
    • +
  • React-vis: Uber开源图表库
    • +
+
+
+ +
+ ); +}; + +export default CoolLibrariesDemo; \ No newline at end of file