From 7cf0be4c94a6f94f31496a07ffed82f06d8a94de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Fri, 30 Aug 2024 14:40:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B7=B2=E7=9F=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileUpload/index.tsx | 76 ++++++++++++++++-------------
 src/pages/File/index.scss           |  4 --
 src/pages/File/index.tsx            | 25 ++++++----
 3 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/src/components/FileUpload/index.tsx b/src/components/FileUpload/index.tsx
index a80cd4c..67ad005 100644
--- a/src/components/FileUpload/index.tsx
+++ b/src/components/FileUpload/index.tsx
@@ -1,7 +1,7 @@
 import { FileDir } from '@/types/app/file';
 import { InboxOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';
-import { message, Modal, Radio, Select, Upload } from 'antd';
+import { message, Modal, Radio, Select, Upload, Spin } from 'antd';
 import { useUserStore } from '@/stores';
 import { baseURL } from '@/utils/request';
 import Compressor from 'compressorjs';
@@ -21,6 +21,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
     const [quality, setQuality] = useState(1000);
     const [isCompressionUpload, setIsCompressionUpload] = useState(false);
     const [fileList, setFileList] = useState<any[]>([]); // 已上传的文件列表
+    const [isLoading, setIsLoading] = useState(false); // 添加加载状态
 
     const uploadProps: UploadProps = {
         name: 'files',
@@ -54,8 +55,12 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
             } else if (status === 'error') {
                 message.error(`文件上传失败：${res?.message}`);
             }
+
+            // setIsLoading(false); // 结束加载状态
         },
         beforeUpload: async (file) => {
+            setIsLoading(true); // 开始加载状态
+
             if (quality === 1000) return file
 
             // 对图片进行压缩处理
@@ -79,47 +84,50 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
         setIsCompressionUpload(false);
         setQuality(1000);
         setFileList([]); // 清空文件列表
+        setIsLoading(false); // 确保关闭时停止加载状态
         onCancel();
     }
 
     return (
         <>
             <Modal title="文件上传" open={open} onCancel={onCloseModel} footer={null}>
-                <div className='my-4'>
-                    <Radio.Group defaultValue={0} value={isCompressionUpload ? 1 : 0} onChange={(e) => setIsCompressionUpload(e.target.value ? true : false)}>
-                        <Radio value={0}>无损上传</Radio>
-                        <Radio value={1}>压缩上传</Radio>
-                    </Radio.Group>
+                <Spin spinning={isLoading}> {/* 包裹内容的 Spin 组件 */}
+                    <div className='my-4'>
+                        <Radio.Group defaultValue={0} value={isCompressionUpload ? 1 : 0} onChange={(e) => setIsCompressionUpload(e.target.value ? true : false)}>
+                            <Radio value={0}>无损上传</Radio>
+                            <Radio value={1}>压缩上传</Radio>
+                        </Radio.Group>
 
-                    {
-                        isCompressionUpload && <Select
-                            onChange={setQuality}
-                            options={[
-                                { value: 1, label: '轻量压缩(推荐)' },
-                                { value: "NaN", label: '自适应压缩' },
-                                { value: 0.9, label: '0.9' },
-                                { value: 0.8, label: '0.8' },
-                                { value: 0.7, label: '0.7' },
-                                { value: 0.6, label: '0.6' },
-                                { value: 0.5, label: '0.5' },
-                                { value: 0.4, label: '0.4' },
-                                { value: 0.3, label: '0.3' },
-                                { value: 0.2, label: '0.2' },
-                                { value: 0.1, label: '0.1' },
-                            ]}
-                            placeholder="请选择图片压缩质量"
-                            className='min-w-44'
-                        />
-                    }
-                </div>
+                        {
+                            isCompressionUpload && <Select
+                                onChange={setQuality}
+                                options={[
+                                    { value: 1, label: '轻量压缩(推荐)' },
+                                    { value: "NaN", label: '自适应压缩' },
+                                    { value: 0.9, label: '0.9' },
+                                    { value: 0.8, label: '0.8' },
+                                    { value: 0.7, label: '0.7' },
+                                    { value: 0.6, label: '0.6' },
+                                    { value: 0.5, label: '0.5' },
+                                    { value: 0.4, label: '0.4' },
+                                    { value: 0.3, label: '0.3' },
+                                    { value: 0.2, label: '0.2' },
+                                    { value: 0.1, label: '0.1' },
+                                ]}
+                                placeholder="请选择图片压缩质量"
+                                className='min-w-44'
+                            />
+                        }
+                    </div>
 
-                <Dragger {...uploadProps}>
-                    <p className="ant-upload-drag-icon">
-                        <InboxOutlined />
-                    </p>
-                    <p className="ant-upload-text">点击或拖动文件到此区域进行上传</p>
-                    <p className="ant-upload-hint">支持单个或多个上传</p>
-                </Dragger>
+                    <Dragger {...uploadProps}>
+                        <p className="ant-upload-drag-icon">
+                            <InboxOutlined />
+                        </p>
+                        <p className="ant-upload-text">点击或拖动文件到此区域进行上传</p>
+                        <p className="ant-upload-hint">支持单个或多个上传</p>
+                    </Dragger>
+                </Spin>
             </Modal>
         </>
     );
diff --git a/src/pages/File/index.scss b/src/pages/File/index.scss
index 0e76f9d..ef9316a 100644
--- a/src/pages/File/index.scss
+++ b/src/pages/File/index.scss
@@ -1,8 +1,4 @@
 .FilePage {
-    .ant-drawer-body{
-        padding-top: 0;
-    }
-    
     .ant-image {
         width: 100%;
         height: 100%;
diff --git a/src/pages/File/index.tsx b/src/pages/File/index.tsx
index a0ceff8..db41d2e 100644
--- a/src/pages/File/index.tsx
+++ b/src/pages/File/index.tsx
@@ -11,14 +11,16 @@ import { DeleteOutlined, DownloadOutlined, RotateLeftOutlined, RotateRightOutlin
 import "./index.scss"
 
 export default () => {
-    const [openFileInfoDrawer, setOpenFileInfoDrawer] = useState(false);
     const [loading, setLoading] = useState(false)
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [active, setActive] = useState("")
-    const [dirName, setDirName] = useState("")
+
+    const [openUploadModalOpen, setOpenUploadModalOpen] = useState(false);
+    const [openFileInfoDrawer, setOpenFileInfoDrawer] = useState(false);
+    const [openFilePreviewDrawer, setOpenFilePreviewDrawer] = useState(false);
+
     const [dirList, setDirList] = useState<string[]>([])
     const [fileList, setFileList] = useState<File[]>([])
 
+    const [dirName, setDirName] = useState("")
     const [file, setFile] = useState<File>({} as File)
 
     // 获取目录列表
@@ -31,7 +33,6 @@ export default () => {
 
     // 获取指定目录的文件列表
     const getFileList = async (dir: string) => {
-        setLoading(true)
         const { data } = await getFileListAPI({ dir })
 
         if (!fileList.length && !(data as File[]).length) message.error("该目录中没有文件")
@@ -46,7 +47,10 @@ export default () => {
         await delFileDataAPI(`${dirName}/${data.name}`)
         message.success("🎉 删除图片成功")
         getFileList(dirName)
-        setLoading(false)
+        setFile({} as File)
+
+        setOpenFileInfoDrawer(false)
+        setOpenFilePreviewDrawer(false)
     }
 
     // 下载图片
@@ -72,6 +76,7 @@ export default () => {
     }
 
     useEffect(() => {
+        setLoading(true)
         getDirList()
     }, [])
 
@@ -93,7 +98,7 @@ export default () => {
                             : <PiKeyReturnFill className='text-4xl text-primary cursor-pointer' onClick={() => setFileList([])} />
                     }
 
-                    <Button type="primary" disabled={!fileList.length} onClick={() => setIsModalOpen(true)}>上传文件</Button>
+                    <Button type="primary" disabled={!fileList.length} onClick={() => setOpenUploadModalOpen(true)}>上传文件</Button>
                 </div>
 
                 {/* 文件列表 */}
@@ -128,9 +133,9 @@ export default () => {
             {/* 文件上传 */}
             <FileUpload
                 dir={dirName}
-                open={isModalOpen}
+                open={openUploadModalOpen}
                 onSuccess={() => getFileList(dirName)}
-                onCancel={() => setIsModalOpen(false)}
+                onCancel={() => setOpenUploadModalOpen(false)}
             />
 
             {/* 文件信息 */}
@@ -172,6 +177,8 @@ export default () => {
                     src={file.url}
                     className='rounded-md object-cover object-center'
                     preview={{
+                        onVisibleChange: (visible) => setOpenFilePreviewDrawer(visible),
+                        visible: openFilePreviewDrawer,
                         toolbarRender: (
                             _,
                             {