From dd57e3c9ae6615ebae4caf7bc4312662837155ec Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 28 Mar 2025 18:02:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=20disabled=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/src/file-upload.vue | 51 ++++++++++++++++---
 .../components/upload/src/image-upload.vue    | 23 ++++++++-
 .../src/locales/langs/en-US/component.json    |  3 +-
 .../src/locales/langs/zh-CN/component.json    |  3 +-
 .../views/演示使用自行删除/upload/index.vue   |  9 ++++
 5 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/apps/web-antd/src/components/upload/src/file-upload.vue b/apps/web-antd/src/components/upload/src/file-upload.vue
index 2316cb52..4e7f787f 100644
--- a/apps/web-antd/src/components/upload/src/file-upload.vue
+++ b/apps/web-antd/src/components/upload/src/file-upload.vue
@@ -5,9 +5,11 @@
 <script setup lang="ts">
 import type { UploadFile } from 'ant-design-vue';
 
+import { computed } from 'vue';
+
 import { $t, I18nT } from '@vben/locales';
 
-import { UploadOutlined } from '@ant-design/icons-vue';
+import { InboxOutlined, UploadOutlined } from '@ant-design/icons-vue';
 import { Upload } from 'ant-design-vue';
 
 import { defaultFileAcceptExts, defaultFilePreview } from './helper';
@@ -68,6 +70,7 @@ interface Props {
    * @param file file
    */
   preview?: (file: UploadFile) => Promise<void> | void;
+  enableDragUpload?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -83,6 +86,13 @@ const props = withDefaults(defineProps<Props>(), {
   preview: defaultFilePreview,
 });
 
+const CurrentUploadComponent = computed(() => {
+  if (props.enableDragUpload) {
+    return Upload.Dragger;
+  }
+  return Upload;
+});
+
 // 双向绑定 ossId
 const ossIdList = defineModel<string | string[]>('value', {
   default: () => [],
@@ -101,7 +111,7 @@ const {
 
 <template>
   <div>
-    <Upload
+    <CurrentUploadComponent
       v-model:file-list="innerFileList"
       :action="uploadUrl"
       :headers="headers"
@@ -116,28 +126,57 @@ const {
       @change="handleChange"
       @remove="handleRemove"
     >
-      <div v-if="innerFileList?.length < maxCount">
+      <div v-if="!enableDragUpload && innerFileList?.length < maxCount">
         <a-button :disabled="disabled">
           <UploadOutlined />
           {{ $t('component.upload.upload') }}
         </a-button>
       </div>
-    </Upload>
+      <div v-if="enableDragUpload && innerFileList?.length < maxCount">
+        <p class="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p class="ant-upload-text">
+          {{ $t('component.upload.clickOrDrag') }}
+        </p>
+      </div>
+    </CurrentUploadComponent>
     <I18nT
       v-if="helpMessage"
       scope="global"
       keypath="component.upload.uploadHelpMessage"
       tag="div"
       class="mt-2"
+      :class="{ 'upload-text__disabled': disabled }"
     >
       <template #size>
-        <span class="text-primary mx-1 font-medium"> {{ maxSize }}MB </span>
+        <span
+          class="text-primary mx-1 font-medium"
+          :class="{ 'upload-text__disabled': disabled }"
+        >
+          {{ maxSize }}MB
+        </span>
       </template>
       <template #ext>
-        <span class="text-primary mx-1 font-medium">
+        <span
+          class="text-primary mx-1 font-medium"
+          :class="{ 'upload-text__disabled': disabled }"
+        >
           {{ acceptFormat }}
         </span>
       </template>
     </I18nT>
   </div>
 </template>
+
+<style lang="scss">
+// 禁用的样式和antd保持一致
+.upload-text__disabled {
+  color: rgb(50 54 57 / 25%);
+  cursor: not-allowed;
+
+  &:where(.dark, .dark *) {
+    color: rgb(242 242 242 / 25%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue
index efd70d9b..058f4ec9 100644
--- a/apps/web-antd/src/components/upload/src/image-upload.vue
+++ b/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -130,12 +130,21 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
       scope="global"
       keypath="component.upload.uploadHelpMessage"
       tag="div"
+      :class="{ 'upload-text__disabled': disabled }"
     >
       <template #size>
-        <span class="text-primary mx-1 font-medium"> {{ maxSize }}MB </span>
+        <span
+          class="text-primary mx-1 font-medium"
+          :class="{ 'upload-text__disabled': disabled }"
+        >
+          {{ maxSize }}MB
+        </span>
       </template>
       <template #ext>
-        <span class="text-primary mx-1 font-medium">
+        <span
+          class="text-primary mx-1 font-medium"
+          :class="{ 'upload-text__disabled': disabled }"
+        >
           {{ acceptFormat }}
         </span>
       </template>
@@ -167,4 +176,14 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
     border-radius: 4px;
   }
 }
+
+// 禁用的样式和antd保持一致
+.upload-text__disabled {
+  color: rgb(50 54 57 / 25%);
+  cursor: not-allowed;
+
+  &:where(.dark, .dark *) {
+    color: rgb(242 242 242 / 25%);
+  }
+}
 </style>
diff --git a/apps/web-antd/src/locales/langs/en-US/component.json b/apps/web-antd/src/locales/langs/en-US/component.json
index 9be7b782..ae5e91bf 100644
--- a/apps/web-antd/src/locales/langs/en-US/component.json
+++ b/apps/web-antd/src/locales/langs/en-US/component.json
@@ -53,6 +53,7 @@
     "reUploadFailed": "Re-upload failed files",
     "uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} MB.",
     "unknownFileType": "Unknown file type, unable to upload",
-    "confirmDelete": "Confirm file deletion {0}?"
+    "confirmDelete": "Confirm file deletion {0}?",
+    "clickOrDrag": "Click or drag file to this area to upload"
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/component.json b/apps/web-antd/src/locales/langs/zh-CN/component.json
index 738e24d8..72f90efc 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/component.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/component.json
@@ -53,6 +53,7 @@
     "reUploadFailed": "重新上传失败文件",
     "uploadHelpMessage": "请上传不超过{size}MB的{ext}格式文件",
     "unknownFileType": "未知的文件类型, 无法上传",
-    "confirmDelete": "确认删除文件 {0}?"
+    "confirmDelete": "确认删除文件 {0}?",
+    "clickOrDrag": "点击或拖动文件到这个区域上传"
   }
 }
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
index 5266f8ec..a4745113 100644
--- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
@@ -58,6 +58,15 @@ function handlePreview(file: UploadFile) {
         当前绑定值: {{ multipleFileId }}
       </Card>
 
+      <Card title="文件拖拽上传" size="small">
+        <FileUpload
+          v-model:value="multipleFileId"
+          :max-count="3"
+          :enable-drag-upload="true"
+        />
+        当前绑定值: {{ multipleFileId }}
+      </Card>
+
       <Card title="图片禁用上传" size="small">
         <ImageUpload :disabled="true" :max-count="3" :help-message="false" />
       </Card>