feat: FilesDownloadDrawer 下载支持 blob，例如解压场景，isSelectFolder 为 true 时，可以直接写入 blob ，不用 fetch

Author: fxss5201

src/components/FilesDownloadDrawer.tsx

@@ -101,7 +101,12 @@ function FilesDownloadDrawer({
         return
       }
       try {
-        const fileBlob = await downloadResourceAsBlob(item.url!)
+        let fileBlob: Blob
+        if (item.url instanceof Blob) {
+          fileBlob = item.url
+        } else {
+          fileBlob = await downloadResourceAsBlob(item.url!)
+        }
         if (item.folderPath === '/') {
           const fileHandle = await directoryHandle.current.getFileHandle(item.name, { create: true })
           const writable = await fileHandle.createWritable()
@@ -125,11 +130,15 @@ function FilesDownloadDrawer({
 
     const downloadFile = async (item: DrawerFileItemType) => {
       console.log('downloadFile', item)
-      const isCross = isCrossOrigin(item.url!)
-      let url = item.url!
-      if (isCross) {
+      const isCross = item.url instanceof Blob ? false : isCrossOrigin(item.url!)
+      let url: string = ''
+      if (item.url instanceof Blob) {
+        url = URL.createObjectURL(item.url)
+      } else if (isCross) {
         const blob = await downloadResourceAsBlob(item.url!)
         url = URL.createObjectURL(blob)
+      } else {
+        url = item.url!
       }
       const a = document.createElement('a')
       a.href = url
@@ -138,7 +147,7 @@ function FilesDownloadDrawer({
       document.body.appendChild(a)
       a.click()
       document.body.removeChild(a)
-      if (isCross) URL.revokeObjectURL(url)
+      if (item.url instanceof Blob || isCross) URL.revokeObjectURL(url)
     }
     if (item.url) {
       if (canSelectFolder) {

src/components/FilesDrawer.tsx

@@ -82,6 +82,7 @@ function FilesDrawer({
   const fileListRef = useRef<HTMLUListElement>(null)
   const [fileList, updateFileList] = useImmer<DrawerFileItemType[]>([])
   const [loading, setLoading] = useState<boolean>(false)
+  const [drawerLoading, setDrawerLoading] = useState<boolean>(false)
 
   const doneFileFn = useCallback(async (item: DrawerFileItemType) => {
     setLoading(true)
@@ -169,6 +170,12 @@ function FilesDrawer({
   useEffect(() => {
     if (!open) return
     if (loading) return
+    if (open && fileList.length === 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setDrawerLoading(true)
+    } else {
+      setDrawerLoading(false)
+    }
 
     if (fileList.length > 0 && fileList.every((item) => item.percentStatus === 'success')) {
       setOpen(false)
@@ -244,6 +251,7 @@ function FilesDrawer({
       title={title}
       open={open}
       size='large'
+      loading={drawerLoading}
       onClose={doCloseFn}
       maskClosable={false}
       classNames={{

src/mdx/FilesZipReader/FilesZipReader.tsx

@@ -216,16 +216,14 @@ function FilesZipReader() {
         type: 'file',
         filePath:  [oldFileName.current, ...parts.slice(0)].join('/'),
         folderPath: [oldFileName.current, ...parts.slice(0, -1)].join('/'),
-        url: URL.createObjectURL(blobData),
+        url: blobData,
       })
     }
     setLoading(false)
     setFileList(allFileList)
   }
   function onSuccessFn(list: DrawerFileItemType[]) {
-    list.forEach(item => {
-      if (item.url) URL.revokeObjectURL(item.url)
-    })
+    console.log('onSuccessFn', list)
   }
   async function downloadCurrentFolder() {
     setDrawerOpen(true)
@@ -336,7 +334,7 @@ function FilesZipReader() {
             pagination={false} />
           <FilesDownloadDrawer
             targetType='list'
-            title='下载文件/文件夹'
+            title='解压文件/文件夹'
             open={drawerOpen}
             list={fileList}
             setOpen={setDrawerOpen}

src/types/files.ts

@@ -32,9 +32,9 @@ export type FileItemType = {
    */
   folderPath: string
   /**
-   * @description 文件 URL。|| File URL.
+   * @description 文件 URL 或者Blob对象。|| File URL or Blob object.
    */
-  url?: string
+  url?: string | Blob
 }
 
 export type FileTreeItem = FileItemType & {
@@ -51,7 +51,7 @@ export type TargetType = 'tree' | 'list'
 
 export type FileDownloadItemType = Omit<FileItemType, 'file' | 'url'> & {
   /**
-   * @description 文件 URL。|| File URL.
+   * @description 文件 URL 或者Blob对象。|| File URL or Blob object.
    */
-  url: string
+  url: string | Blob
 }