From 192c8c3c0aaf55e4d520084a08ae1b1938903c5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Mon, 4 Aug 2025 16:27:45 +0800
Subject: [PATCH] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=90=8C=E6=AD=A5=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Upload/FileUpload/index.module.scss       | 211 +++--------
 .../Upload/VideoUpload/index.module.scss      | 333 +++---------------
 2 files changed, 92 insertions(+), 452 deletions(-)

diff --git a/nkebao/src/components/Upload/FileUpload/index.module.scss b/nkebao/src/components/Upload/FileUpload/index.module.scss
index 29898864..794ed98e 100644
--- a/nkebao/src/components/Upload/FileUpload/index.module.scss
+++ b/nkebao/src/components/Upload/FileUpload/index.module.scss
@@ -1,10 +1,29 @@
-// 文件上传组件样式
 .fileUploadContainer {
   width: 100%;
 
+  // 覆盖 antd Upload 组件的默认样式
+  :global {
+    .ant-upload {
+      width: 100%;
+    }
+
+    .ant-upload-list {
+      width: 100%;
+    }
+
+    .ant-upload-list-text {
+      width: 100%;
+    }
+
+    .ant-upload-list-text .ant-upload-list-item {
+      width: 100%;
+    }
+  }
+
   .fileUploadButton {
     width: 100%;
-    min-height: 120px;
+    aspect-ratio: 16 / 9;
+    min-height: clamp(90px, 20vw, 180px);
     border: 2px dashed #d9d9d9;
     border-radius: 12px;
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
@@ -36,13 +55,13 @@
       padding: 20px;
 
       .uploadingIcon {
-        font-size: 32px;
+        font-size: clamp(24px, 4vw, 32px);
         color: #1890ff;
         animation: pulse 2s infinite;
       }
 
       .uploadingText {
-        font-size: 14px;
+        font-size: clamp(11px, 2vw, 14px);
         color: #666;
         font-weight: 500;
       }
@@ -62,21 +81,21 @@
       text-align: center;
 
       .uploadIcon {
-        font-size: 48px;
+        font-size: clamp(50px, 6vw, 48px);
         color: #1890ff;
         transition: all 0.3s ease;
       }
 
       .uploadText {
         .uploadTitle {
-          font-size: 16px;
+          font-size: clamp(14px, 2.5vw, 16px);
           font-weight: 600;
           color: #333;
           margin-bottom: 4px;
         }
 
         .uploadSubtitle {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 14px);
           color: #666;
           line-height: 1.4;
         }
@@ -109,13 +128,13 @@
       gap: 12px;
 
       .fileIcon {
-        width: 40px;
-        height: 40px;
+        width: clamp(28px, 5vw, 40px);
+        height: clamp(28px, 5vw, 40px);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 18px;
+        font-size: clamp(14px, 2.5vw, 18px);
         flex-shrink: 0;
 
         // Excel文件图标样式
@@ -148,7 +167,7 @@
         min-width: 0;
 
         .fileName {
-          font-size: 14px;
+          font-size: clamp(11px, 2vw, 14px);
           font-weight: 500;
           color: #333;
           margin-bottom: 4px;
@@ -158,7 +177,7 @@
         }
 
         .fileSize {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 12px);
           color: #666;
         }
       }
@@ -208,18 +227,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #f8f9fa;
+    background: #f5f5f5;
     border-radius: 8px;
     overflow: hidden;
-    min-height: 500px;
 
     iframe {
       border-radius: 8px;
-      background: #fff;
     }
   }
 }
 
+// 禁用状态
+.fileUploadContainer.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// 错误状态
+.fileUploadContainer.error {
+  .fileUploadButton {
+    border-color: #ff4d4f;
+    background: #fff2f0;
+  }
+}
+
 // 动画效果
 @keyframes pulse {
   0% {
@@ -232,153 +263,3 @@
     transform: scale(1);
   }
 }
-
-// 响应式设计
-@media (max-width: 768px) {
-  .fileUploadContainer {
-    .fileUploadButton {
-      min-height: 100px;
-
-      .uploadContent {
-        padding: 16px;
-
-        .uploadIcon {
-          font-size: 40px;
-        }
-
-        .uploadText {
-          .uploadTitle {
-            font-size: 14px;
-          }
-
-          .uploadSubtitle {
-            font-size: 11px;
-          }
-        }
-      }
-
-      .uploadingContainer {
-        padding: 16px;
-
-        .uploadingIcon {
-          font-size: 28px;
-        }
-
-        .uploadingText {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .fileItem {
-      padding: 10px;
-
-      .fileItemContent {
-        gap: 10px;
-
-        .fileIcon {
-          width: 36px;
-          height: 36px;
-          font-size: 16px;
-        }
-
-        .fileInfo {
-          .fileName {
-            font-size: 13px;
-          }
-
-          .fileSize {
-            font-size: 11px;
-          }
-        }
-
-        .fileActions {
-          .previewBtn,
-          .deleteBtn {
-            padding: 3px 6px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-
-    .filePreview {
-      min-height: 400px;
-
-      iframe {
-        height: 400px;
-      }
-    }
-  }
-}
-
-// 暗色主题支持
-@media (prefers-color-scheme: dark) {
-  .fileUploadContainer {
-    .fileUploadButton {
-      background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
-      border-color: #434343;
-
-      &:hover {
-        background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
-        border-color: #40a9ff;
-      }
-
-      .uploadingContainer {
-        .uploadingText {
-          color: #ccc;
-        }
-      }
-
-      .uploadContent {
-        .uploadText {
-          .uploadTitle {
-            color: #fff;
-          }
-
-          .uploadSubtitle {
-            color: #ccc;
-          }
-        }
-      }
-    }
-
-    .fileItem {
-      background: #2a2a2a;
-      border-color: #434343;
-
-      &:hover {
-        border-color: #40a9ff;
-      }
-
-      .fileItemContent {
-        .fileInfo {
-          .fileName {
-            color: #fff;
-          }
-
-          .fileSize {
-            color: #ccc;
-          }
-        }
-
-        .fileActions {
-          .previewBtn,
-          .deleteBtn {
-            &:hover {
-              background: #434343;
-            }
-          }
-        }
-      }
-    }
-
-    .filePreview {
-      background: #2a2a2a;
-
-      iframe {
-        background: #1f1f1f;
-      }
-    }
-  }
-}
diff --git a/nkebao/src/components/Upload/VideoUpload/index.module.scss b/nkebao/src/components/Upload/VideoUpload/index.module.scss
index abec0b86..c8dd27df 100644
--- a/nkebao/src/components/Upload/VideoUpload/index.module.scss
+++ b/nkebao/src/components/Upload/VideoUpload/index.module.scss
@@ -1,221 +1,29 @@
-.uploadContainer {
-  width: 100%;
-
-  // 自定义上传组件样式
-  :global {
-    .adm-image-uploader {
-      .adm-image-uploader-upload-button {
-        width: 100px;
-        height: 100px;
-        border: 1px dashed #d9d9d9;
-        border-radius: 8px;
-        background: #fafafa;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: all 0.3s;
-
-        &:hover {
-          border-color: #1677ff;
-          background: #f0f8ff;
-        }
-
-        .adm-image-uploader-upload-button-icon {
-          font-size: 32px;
-          color: #999;
-        }
-      }
-
-      .adm-image-uploader-item {
-        width: 100px;
-        height: 100px;
-        border-radius: 8px;
-        overflow: hidden;
-        position: relative;
-
-        .adm-image-uploader-item-image {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-
-        .adm-image-uploader-item-delete {
-          position: absolute;
-          top: 4px;
-          right: 4px;
-          width: 24px;
-          height: 24px;
-          background: rgba(0, 0, 0, 0.6);
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-          font-size: 14px;
-          cursor: pointer;
-        }
-
-        .adm-image-uploader-item-loading {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(255, 255, 255, 0.8);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}
-
-// 禁用状态
-.uploadContainer.disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-// 错误状态
-.uploadContainer.error {
-  :global {
-    .adm-image-uploader-upload-button {
-      border-color: #ff4d4f;
-      background: #fff2f0;
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .uploadContainer {
-    :global {
-      .adm-image-uploader {
-        .adm-image-uploader-upload-button,
-        .adm-image-uploader-item {
-          width: 80px;
-          height: 80px;
-        }
-
-        .adm-image-uploader-upload-button-icon {
-          font-size: 28px;
-        }
-      }
-    }
-  }
-}
-
-// 头像上传组件样式
-.avatarUploadContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-
-  .avatarWrapper {
-    position: relative;
-    border-radius: 50%;
-    overflow: hidden;
-    background: #f0f0f0;
-    border: 2px solid #e0e0e0;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      border-color: var(--primary-color);
-      box-shadow: 0 4px 12px rgba(24, 142, 238, 0.3);
-    }
-
-    .avatarImage {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .avatarPlaceholder {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      font-size: 40px;
-    }
-
-    .avatarUploadOverlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-size: 24px;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      .uploadLoading {
-        font-size: 12px;
-        text-align: center;
-        line-height: 1.4;
-      }
-    }
-
-    .avatarDeleteBtn {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      width: 24px;
-      height: 24px;
-      background: #ff4d4f;
-      color: white;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-      font-weight: bold;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      z-index: 10;
-
-      &:hover {
-        background: #ff7875;
-        transform: scale(1.1);
-      }
-    }
-
-    &:hover .avatarUploadOverlay {
-      opacity: 1;
-    }
-  }
-
-  .avatarTip {
-    font-size: 12px;
-    color: #999;
-    text-align: center;
-    line-height: 1.4;
-    max-width: 200px;
-  }
-}
-
-// 视频上传组件样式
 .videoUploadContainer {
   width: 100%;
 
+  // 覆盖 antd Upload 组件的默认样式
+  :global {
+    .ant-upload {
+      width: 100%;
+    }
+
+    .ant-upload-list {
+      width: 100%;
+    }
+
+    .ant-upload-list-text {
+      width: 100%;
+    }
+
+    .ant-upload-list-text .ant-upload-list-item {
+      width: 100%;
+    }
+  }
+
   .videoUploadButton {
     width: 100%;
-    min-height: 120px;
+    aspect-ratio: 16 / 9;
+    min-height: clamp(90px, 20vw, 180px);
     border: 2px dashed #d9d9d9;
     border-radius: 12px;
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
@@ -247,13 +55,13 @@
       padding: 20px;
 
       .uploadingIcon {
-        font-size: 32px;
+        font-size: clamp(24px, 4vw, 32px);
         color: #1890ff;
         animation: pulse 2s infinite;
       }
 
       .uploadingText {
-        font-size: 14px;
+        font-size: clamp(11px, 2vw, 14px);
         color: #666;
         font-weight: 500;
       }
@@ -273,21 +81,21 @@
       text-align: center;
 
       .uploadIcon {
-        font-size: 48px;
+        font-size: clamp(50px, 6vw, 48px);
         color: #1890ff;
         transition: all 0.3s ease;
       }
 
       .uploadText {
         .uploadTitle {
-          font-size: 16px;
+          font-size: clamp(14px, 2.5vw, 16px);
           font-weight: 600;
           color: #333;
           margin-bottom: 4px;
         }
 
         .uploadSubtitle {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 14px);
           color: #666;
           line-height: 1.4;
         }
@@ -320,15 +128,15 @@
       gap: 12px;
 
       .videoIcon {
-        width: 40px;
-        height: 40px;
+        width: clamp(28px, 5vw, 40px);
+        height: clamp(28px, 5vw, 40px);
         background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
-        font-size: 18px;
+        font-size: clamp(14px, 2.5vw, 18px);
         flex-shrink: 0;
       }
 
@@ -337,7 +145,7 @@
         min-width: 0;
 
         .videoName {
-          font-size: 14px;
+          font-size: clamp(11px, 2vw, 14px);
           font-weight: 500;
           color: #333;
           margin-bottom: 4px;
@@ -347,7 +155,7 @@
         }
 
         .videoSize {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 12px);
           color: #666;
         }
       }
@@ -407,6 +215,20 @@
   }
 }
 
+// 禁用状态
+.videoUploadContainer.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// 错误状态
+.videoUploadContainer.error {
+  .videoUploadButton {
+    border-color: #ff4d4f;
+    background: #fff2f0;
+  }
+}
+
 // 动画效果
 @keyframes pulse {
   0% {
@@ -418,67 +240,4 @@
   100% {
     transform: scale(1);
   }
-}
-
-// 暗色主题支持
-@media (prefers-color-scheme: dark) {
-  .videoUploadContainer {
-    .videoUploadButton {
-      background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
-      border-color: #434343;
-
-      &:hover {
-        background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
-        border-color: #40a9ff;
-      }
-
-      .uploadingContainer {
-        .uploadingText {
-          color: #ccc;
-        }
-      }
-
-      .uploadContent {
-        .uploadText {
-          .uploadTitle {
-            color: #fff;
-          }
-
-          .uploadSubtitle {
-            color: #ccc;
-          }
-        }
-      }
-    }
-
-    .videoItem {
-      background: #2a2a2a;
-      border-color: #434343;
-
-      &:hover {
-        border-color: #40a9ff;
-      }
-
-      .videoItemContent {
-        .videoInfo {
-          .videoName {
-            color: #fff;
-          }
-
-          .videoSize {
-            color: #ccc;
-          }
-        }
-
-        .videoActions {
-          .previewBtn,
-          .deleteBtn {
-            &:hover {
-              background: #434343;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+} 
\ No newline at end of file