feat: 支持拖拽上传 disabled样式优化

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>

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>

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"
   }
 }

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": "点击或拖动文件到这个区域上传"
   }
 }

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>