refactor(VideoCard): 优化组件结构与动画效果

重构 VideoCard 组件,主要改进包括:
1. 移除自定义图标组件,改用 lucide-react 图标
2. 优化聚合数据处理逻辑,提取通用统计方法
3. 简化配置逻辑,使用 useMemo 缓存配置
4. 改进动画效果,添加悬停过渡和微交互
5. 使用 useCallback 优化事件处理函数
6. 统一组件样式和过渡效果

style(ImagePlaceholder): 添加透明度过渡效果
This commit is contained in:
SongPro
2025-07-10 11:15:55 +08:00
parent 8965108c8b
commit 3a64c6785e
2 changed files with 196 additions and 363 deletions

View File

@@ -1,7 +1,7 @@
// 图片占位符组件 - 实现骨架屏效果(支持暗色模式)
const ImagePlaceholder = ({ aspectRatio }: { aspectRatio: string }) => (
<div
className={`w-full ${aspectRatio} rounded-md overflow-hidden`}
className={`w-full ${aspectRatio} rounded-md overflow-hidden transition-opacity duration-500`}
style={{
background:
'linear-gradient(90deg, var(--skeleton-color) 25%, var(--skeleton-highlight) 50%, var(--skeleton-color) 75%)',