From 64331fb4ac18730088a08bf5d2c713f71c5c68e0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 7 Apr 2025 19:43:41 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BC=98=E5=8C=96=20file=20?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/infra/file/data.ts    |  2 +-
 .../src/views/infra/file/modules/form.vue     | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/views/infra/file/data.ts b/apps/web-antd/src/views/infra/file/data.ts
index 1f78d606c..7308cb29f 100644
--- a/apps/web-antd/src/views/infra/file/data.ts
+++ b/apps/web-antd/src/views/infra/file/data.ts
@@ -14,10 +14,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'file',
       label: '文件上传',
       component: 'Upload',
-      rules: 'required',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },
+      rules: 'required',
     }
   ];
 }
diff --git a/apps/web-antd/src/views/infra/file/modules/form.vue b/apps/web-antd/src/views/infra/file/modules/form.vue
index 1b850c7b7..10dc58857 100644
--- a/apps/web-antd/src/views/infra/file/modules/form.vue
+++ b/apps/web-antd/src/views/infra/file/modules/form.vue
@@ -3,7 +3,7 @@ import type { FileType } from 'ant-design-vue/es/upload/interface';
 
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
-import { Upload, Button } from 'ant-design-vue';
+import { Upload } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 import { useVbenForm } from '#/adapter/form';
@@ -15,8 +15,11 @@ const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
-  schema: useFormSchema(),
+  schema: useFormSchema().map(item => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
+  commonConfig: {
+    hideLabel: true,
+  }
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -55,9 +58,22 @@ function beforeUpload(file: FileType) {
     <Form class="mx-4">
       <template #file>
         <div class="w-full">
-          <Upload :max-count="1" accept=".jpg,.png,.gif,.webp" :beforeUpload="beforeUpload">
-            <Button type="primary"> 选择图片 </Button>
-          </Upload>
+          <!-- 上传区域 -->
+          <Upload.Dragger
+            name="file"
+            :max-count="1"
+            accept=".jpg,.png,.gif,.webp"
+            :beforeUpload="beforeUpload"
+            list-type="picture-card"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ant-design--inbox-outlined] text-2xl"></span>
+            </p>
+            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+            <p class="ant-upload-hint">
+              支持 .jpg、.png、.gif、.webp 格式图片文件
+            </p>
+          </Upload.Dragger>
         </div>
       </template>
     </Form>