From b78b599a069851936b13194427b94fd62793c5af Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 29 Mar 2025 16:13:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20helpMessage=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/src/file-upload.vue | 52 ++++++++++---------
 .../components/upload/src/image-upload.vue    | 51 +++++++++---------
 .../src/locales/langs/en-US/component.json    |  2 +-
 .../src/locales/langs/zh-CN/component.json    |  2 +-
 .../views/演示使用自行删除/upload/index.vue   |  8 ++-
 5 files changed, 62 insertions(+), 53 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 04f946c5..6373c85f 100644
--- a/apps/web-antd/src/components/upload/src/file-upload.vue
+++ b/apps/web-antd/src/components/upload/src/file-upload.vue
@@ -102,31 +102,33 @@ const {
         </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"
-          :class="{ 'upload-text__disabled': disabled }"
-        >
-          {{ maxSize }}MB
-        </span>
-      </template>
-      <template #ext>
-        <span
-          class="text-primary mx-1 font-medium"
-          :class="{ 'upload-text__disabled': disabled }"
-        >
-          {{ acceptFormat }}
-        </span>
-      </template>
-    </I18nT>
+    <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
+      <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"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ maxSize }}MB
+          </span>
+        </template>
+        <template #ext>
+          <span
+            class="text-primary mx-1 font-medium"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ acceptFormat }}
+          </span>
+        </template>
+      </I18nT>
+    </slot>
   </div>
 </template>
 
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 b81f9a9a..9fc49c47 100644
--- a/apps/web-antd/src/components/upload/src/image-upload.vue
+++ b/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -79,30 +79,33 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
         <div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
       </div>
     </Upload>
-    <I18nT
-      v-if="helpMessage"
-      scope="global"
-      keypath="component.upload.uploadHelpMessage"
-      tag="div"
-      :class="{ 'upload-text__disabled': disabled }"
-    >
-      <template #size>
-        <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"
-          :class="{ 'upload-text__disabled': disabled }"
-        >
-          {{ acceptFormat }}
-        </span>
-      </template>
-    </I18nT>
+    <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
+      <I18nT
+        v-if="helpMessage"
+        scope="global"
+        keypath="component.upload.uploadHelpMessage"
+        tag="div"
+        :class="{ 'upload-text__disabled': disabled }"
+      >
+        <template #size>
+          <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"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ acceptFormat }}
+          </span>
+        </template>
+      </I18nT>
+    </slot>
+
     <ImagePreviewGroup
       :preview="{
         visible: previewVisible,
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 ae5e91bf..d4d9e469 100644
--- a/apps/web-antd/src/locales/langs/en-US/component.json
+++ b/apps/web-antd/src/locales/langs/en-US/component.json
@@ -51,7 +51,7 @@
     "uploading": "Uploading",
     "uploadWait": "Please wait for the file upload to finish",
     "reUploadFailed": "Re-upload failed files",
-    "uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} MB.",
+    "uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} .",
     "unknownFileType": "Unknown file type, unable to upload",
     "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 72f90efc..3b7eb367 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/component.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/component.json
@@ -51,7 +51,7 @@
     "uploading": "上传中",
     "uploadWait": "请等待文件上传结束后操作",
     "reUploadFailed": "重新上传失败文件",
-    "uploadHelpMessage": "请上传不超过{size}MB的{ext}格式文件",
+    "uploadHelpMessage": "请上传不超过{size}的{ext}格式文件",
     "unknownFileType": "未知的文件类型, 无法上传",
     "confirmDelete": "确认删除文件 {0}?",
     "clickOrDrag": "点击或拖动文件到这个区域上传"
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
index d7f5f006..b172b801 100644
--- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
@@ -75,13 +75,17 @@ function handlePreview(file: UploadFile) {
         <FileUpload :disabled="true" :max-count="3" :help-message="false" />
       </Card>
 
-      <Card title="文件夹上传" size="small">
+      <Card title="文件夹上传/自定义helpMessage" size="small">
         <FileUpload
           v-model:value="multipleFileId"
           :max-count="3"
           :directory="true"
           accept="*"
-        />
+        >
+          <template #helpMessage="slotProps">
+            <div>自定义helpMessage: {{ JSON.stringify(slotProps) }}</div>
+          </template>
+        </FileUpload>
         当前绑定值: {{ multipleFileId }}
       </Card>
     </div>