diff --git a/src/components/ImagePlaceholder.tsx b/src/components/ImagePlaceholder.tsx index 6732064..8b2f329 100644 --- a/src/components/ImagePlaceholder.tsx +++ b/src/components/ImagePlaceholder.tsx @@ -1,7 +1,7 @@ // 图片占位符组件 - 实现骨架屏效果(支持暗色模式) const ImagePlaceholder = ({ aspectRatio }: { aspectRatio: string }) => (
{children} diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx index 6c400f7..a7d9991 100644 --- a/src/components/VideoCard.tsx +++ b/src/components/VideoCard.tsx @@ -54,7 +54,7 @@ export default function VideoCard({ }: VideoCardProps) { const router = useRouter(); const [favorited, setFavorited] = useState(false); - const [isLoaded, setIsLoaded] = useState(false); + const [isLoading, setIsLoading] = useState(false); const isAggregate = from === 'search' && !!items?.length; @@ -254,130 +254,115 @@ export default function VideoCard({ return (
{/* 海报容器 */} -
- {/* 骨架屏 - 添加渐入动画 */} - {!isLoaded && ( - - )} - - {/* 图片加载动画 - 改进淡入和锐化效果 */} +
+ {/* 骨架屏 */} + {!isLoading && } + {/* 图片 */} {actualTitle} setIsLoaded(true)} + className='object-cover' referrerPolicy='no-referrer' - priority={false} + onLoadingComplete={() => setIsLoading(true)} /> - {/* 悬浮层 - 改进渐变和元素过渡 */} -
+ {/* 悬浮遮罩 */} +
{/* 播放按钮 */} {config.showPlayButton && ( -
+
)} - {/* 已看 / 收藏按钮 - 改进延迟和缓动效果 */} + {/* 操作按钮 */} {(config.showHeart || config.showCheckCircle) && ( -
+
{config.showCheckCircle && ( )} {config.showHeart && ( )}
)} - {/* 评分徽章 - 添加弹出效果 */} + {/* 徽章 */} {config.showRating && rate && ( -
+
{rate}
)} - {/* 集数徽章 - 改进缩放和阴影 */} - {actualEpisodes && actualEpisodes > 1 && currentEpisode && ( -
- {currentEpisode}/{actualEpisodes} -
- )} - {actualEpisodes && actualEpisodes > 1 && !currentEpisode && ( -
- {actualEpisodes} + {actualEpisodes && actualEpisodes > 1 && ( +
+ {currentEpisode + ? `${currentEpisode}/${actualEpisodes}` + : actualEpisodes}
)} - {/* 豆瓣链接按钮 - 改进进入方向和延迟 */} + {/* 豆瓣链接 */} {config.showDoubanLink && actualDoubanId && ( e.stopPropagation()} - className='absolute top-2 left-2 opacity-0 -translate-x-4 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300 ease-out delay-100' + className='absolute top-2 left-2 opacity-0 -translate-x-2 transition-all duration-300 ease-in-out delay-100 group-hover:opacity-100 group-hover:translate-x-0' > -
+
)}
- {/* 进度条 - 添加动画效果 */} + {/* 进度条 */} {config.showProgress && progress !== undefined && ( -
+
)} - {/* 标题与来源信息 - 改进颜色过渡和延迟 */} -
- + {/* 标题与来源 */} +
+ {actualTitle} - {/* 自定义 tooltip */} -
- {actualTitle} -
-
-
- {config.showSourceName && source_name && ( - - - {source_name} + {config.showSourceName && source_name && ( + + + {source_name} + - - )} + )} +
); }