refactor: 优化视频预览弹框UI设计

界面优化:
- 将操作按钮改为悬浮在视频右上角的圆形按钮
- 移除底部冗余的操作按钮区域,界面更简洁
- 添加悬停效果和颜色区分:绿色下载、蓝色外链、紫色全屏

用户体验改进:
- 悬浮按钮仅在鼠标悬停时完全显示,不遮挡视频内容
- 下载按钮显示加载动画,提供视觉反馈
- 按钮添加缩放和阴影效果,提升交互体验
- 使用backdrop-blur实现毛玻璃效果

技术实现:
- 使用CSS group-hover实现悬停显示逻辑
- 添加z-index确保按钮层级正确
- 优化transition动画,提供流畅的交互体验
- 移除底部控制栏中重复的全屏按钮

视觉设计:
- 圆形按钮设计更现代化
- 半透明背景不影响视频观看
- 颜色编码帮助用户快速识别功能
- 响应式hover效果提升用户体验
This commit is contained in:
imeepos 2025-07-31 13:43:33 +08:00
parent e954fe2814
commit 12714f1c53
1 changed files with 37 additions and 43 deletions

View File

@ -218,7 +218,7 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
>
<div className="space-y-4">
{/* 视频播放区域 */}
<div className="relative bg-black rounded-lg overflow-hidden aspect-video">
<div className="relative bg-black rounded-lg overflow-hidden aspect-video group">
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
@ -246,6 +246,40 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
controls={false}
/>
{/* 右上角悬浮按钮组 */}
{!isLoading && !error && (
<div className="absolute top-4 right-4 flex items-center space-x-2 opacity-80 hover:opacity-100 group-hover:opacity-100 transition-all duration-300 z-10">
<button
onClick={handleDownload}
disabled={isDownloading}
className="relative flex items-center justify-center w-10 h-10 bg-black/60 hover:bg-green-600/80 disabled:bg-gray-600/60 text-white rounded-full backdrop-blur-sm transition-all duration-200 hover:scale-110 disabled:cursor-not-allowed shadow-lg"
title={isDownloading ? '下载中...' : '下载视频'}
>
{isDownloading ? (
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
) : (
<Download className="w-5 h-5" />
)}
</button>
<button
onClick={handleOpenInNewWindow}
className="flex items-center justify-center w-10 h-10 bg-black/60 hover:bg-blue-600/80 text-white rounded-full backdrop-blur-sm transition-all duration-200 hover:scale-110 shadow-lg"
title="在新窗口打开"
>
<ExternalLink className="w-5 h-5" />
</button>
<button
onClick={handleFullscreen}
className="flex items-center justify-center w-10 h-10 bg-black/60 hover:bg-purple-600/80 text-white rounded-full backdrop-blur-sm transition-all duration-200 hover:scale-110 shadow-lg"
title="全屏播放"
>
<Maximize className="w-5 h-5" />
</button>
</div>
)}
{/* 视频控制覆盖层 */}
{!isLoading && !error && (
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300">
@ -311,52 +345,12 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
{isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
</button>
</div>
<div className="flex items-center space-x-2">
<button
onClick={handleFullscreen}
className="text-white hover:text-blue-400 transition-colors duration-200"
title="全屏"
>
<Maximize className="w-5 h-5" />
</button>
</div>
</div>
</div>
</div>
</div>
)}
</div>
{/* 操作按钮 */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<button
onClick={handleDownload}
disabled={isDownloading}
className="flex items-center space-x-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-lg transition-colors duration-200"
>
<Download className="w-4 h-4" />
<span>{isDownloading ? '下载中...' : '下载视频'}</span>
</button>
<button
onClick={handleOpenInNewWindow}
className="flex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200"
>
<ExternalLink className="w-4 h-4" />
<span></span>
</button>
</div>
<div className="text-sm text-gray-500">
{videoUrl && (
<span className="truncate max-w-xs" title={videoUrl}>
{videoUrl}
</span>
)}
</div>
</div>
</div>
</Modal>
);