mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-22 18:44:44 +08:00
3a64c6785e
重构 VideoCard 组件，主要改进包括： 1. 移除自定义图标组件，改用 lucide-react 图标 2. 优化聚合数据处理逻辑，提取通用统计方法 3. 简化配置逻辑，使用 useMemo 缓存配置 4. 改进动画效果，添加悬停过渡和微交互 5. 使用 useCallback 优化事件处理函数 6. 统一组件样式和过渡效果 style(ImagePlaceholder): 添加透明度过渡效果
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
// 图片占位符组件 - 实现骨架屏效果（支持暗色模式）
|
|
const ImagePlaceholder = ({ aspectRatio }: { aspectRatio: string }) => (
|
|
<div
|
|
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%)',
|
|
backgroundSize: '200% 100%',
|
|
animation: 'shine 1.5s infinite',
|
|
}}
|
|
>
|
|
<style>{`
|
|
@keyframes shine {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* 亮色模式变量 */
|
|
:root {
|
|
--skeleton-color: #f0f0f0;
|
|
--skeleton-highlight: #e0e0e0;
|
|
}
|
|
|
|
/* 暗色模式变量 */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--skeleton-color: #2d2d2d;
|
|
--skeleton-highlight: #3d3d3d;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--skeleton-color: #2d2d2d;
|
|
--skeleton-highlight: #3d3d3d;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
|
|
export { ImagePlaceholder };
|