Merge pull request #2705 from XiaoMi/perf/upload

perf(upload): 代码优化

.changeset/empty-dogs-smash.md

@@ -0,0 +1,6 @@
+---
+"@hi-ui/upload": minor
+---
+
+perf: 依赖项中增加 @hi-ui/message，否则打包时会将多余代码打进去
+feat: 暴露出单个不同类型的上传组件，支持按需引入，对 Tree Shaking 友好

.changeset/popular-phones-visit.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+perf(upload): 代码优化,降低打包体积

packages/ui/upload/package.json

@@ -48,6 +48,7 @@
     "@hi-ui/env": "^4.0.4",
     "@hi-ui/file-select": "^4.0.7",
     "@hi-ui/icons": "^4.0.18",
+    "@hi-ui/message": "^4.0.7",
     "@hi-ui/modal": "^4.0.15",
     "@hi-ui/preview": "^4.0.8",
     "@hi-ui/use-id": "^4.0.4",

packages/ui/upload/src/index.ts

@@ -3,4 +3,10 @@ import './styles/index.scss'
 export * from './Upload'
 export { Upload as default } from './Upload'
 
+export { NormalUpload } from './NormalUpload'
+export { DragUpload } from './DragUpload'
+export { PictureListUpload } from './PictureListUpload'
+export { PictureUpload } from './PictureUpload'
+export { AvatarUpload } from './AvatarUpload'
+
 export * from './types'

packages/ui/upload/stories/index.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Upload from '../src'
 
 export * from './basic.stories'
+export * from './single-import.stories'
 export * from './draggable.stories'
 export * from './picture-card.stories'
 export * from './photo.stories'

packages/ui/upload/stories/single-import.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { NormalUpload, DragUpload, PictureUpload, PictureListUpload, AvatarUpload } from '../src'
+
+/**
+ * @title 单个导入，按需引用
+ * @desc 建议采用该方式引用，有利用打包时做 Tree Shaking
+ */
+export const SingleImport = () => {
+  return (
+    <>
+      <h1>SingleImport</h1>
+      <div className="upload-single-import__wrap">
+        <NormalUpload
+          uploadAction="https://jsonplaceholder.typicode.com/posts/"
+          tips="仅支持 jpg/png 文件，且不超过 500kb"
+          accept="image/png,image/jpg"
+          headers={{ name: 'mi' }}
+          name={'files[]'}
+          onChange={(file, fileList, response) => {
+            console.log('upload callback', file, fileList, response)
+          }}
+        />
+      </div>
+    </>
+  )
+}