From 12714f1c533e547242f0a2230d53182e78d9220b Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Thu, 31 Jul 2025 13:43:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=A2=84=E8=A7=88=E5=BC=B9=E6=A1=86UI=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

视觉设计:
- 圆形按钮设计更现代化
- 半透明背景不影响视频观看
- 颜色编码帮助用户快速识别功能
- 响应式hover效果提升用户体验
---
 .../src/components/VideoPreviewModal.tsx      | 80 +++++++++----------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/apps/desktop/src/components/VideoPreviewModal.tsx b/apps/desktop/src/components/VideoPreviewModal.tsx
index 253aa81..03add95 100644
--- a/apps/desktop/src/components/VideoPreviewModal.tsx
+++ b/apps/desktop/src/components/VideoPreviewModal.tsx
@@ -218,13 +218,13 @@ 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>
             </div>
           )}
-          
+
           {error && (
             <div className="absolute inset-0 flex items-center justify-center bg-gray-900 text-white">
               <div className="text-center">
@@ -233,7 +233,7 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
               </div>
             </div>
           )}
-          
+
           <video
             ref={videoRef}
             src={videoUrl}
@@ -245,6 +245,40 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
             onPause={handlePause}
             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 && (
@@ -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>
   );