解决已知问题

2024-08-30 14:40:48 +08:00
parent 1f2640e8bb
commit 7cf0be4c94
3 changed files with 58 additions and 47 deletions
--- 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>
        </>
    );
--- 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%;
--- 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: (
                            _,
                            {