From 1f2640e8bb35e61d09b73e1ccc53303b2c5a29da 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:18:12 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=96=87=E4=BB=B6=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FileUpload/index.tsx | 2 +- src/pages/File/index.scss | 4 + src/pages/File/index.tsx | 139 ++++++++++++++++++++-------- 3 files changed, 105 insertions(+), 40 deletions(-) diff --git a/src/components/FileUpload/index.tsx b/src/components/FileUpload/index.tsx index 9884232..a80cd4c 100644 --- a/src/components/FileUpload/index.tsx +++ b/src/components/FileUpload/index.tsx @@ -48,7 +48,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => { // 复制文件链接到剪贴板 await navigator.clipboard.writeText(urls.join("\n")); - message.success(`文件上传成功，URL链接已复制到剪贴板`); + message.success(`🎉 文件上传成功，URL链接已复制到剪贴板`); onSuccess(urls.join("\n")); onCloseModel() } else if (status === 'error') { diff --git a/src/pages/File/index.scss b/src/pages/File/index.scss index ef9316a..0e76f9d 100644 --- a/src/pages/File/index.scss +++ b/src/pages/File/index.scss @@ -1,4 +1,8 @@ .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 f2cc537..a0ceff8 100644 --- a/src/pages/File/index.tsx +++ b/src/pages/File/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { Image, Card, Space, Spin, message, Popconfirm, Button } from 'antd' +import { Image, Card, Space, Spin, message, Popconfirm, Button, Drawer, Divider } from 'antd' import Title from '@/components/Title' import FileUpload from '@/components/FileUpload' @@ -11,6 +11,7 @@ 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("") @@ -18,6 +19,8 @@ export default () => { const [dirList, setDirList] = useState([]) const [fileList, setFileList] = useState([]) + const [file, setFile] = useState({} as File) + // 获取目录列表 const getDirList = async () => { setLoading(true) @@ -72,6 +75,12 @@ export default () => { getDirList() }, []) + // 查看文件信息 + const viewOpenFileInfo = (item: File) => { + setOpenFileInfoDrawer(true) + setFile(item) + } + return ( <> @@ -87,6 +96,7 @@ export default () => { <Button type="primary" disabled={!fileList.length} onClick={() => setIsModalOpen(true)}>上传文件</Button> </div> + {/* 文件列表 */} <Spin spinning={loading}> <div className='flex flex-wrap'> { @@ -95,43 +105,9 @@ export default () => { fileList.map((item, index) => <div key={index} - className={`group relative overflow-hidden w-44 h-44 p-[2px] flex flex-col items-center cursor-pointer m-4 border-2 ${active === item.name ? 'border-primary' : 'border-[#eee]'} rounded-md`} - onClick={() => setActive(item.name)}> - <Image - src={item.url} - className='rounded-md object-cover object-center' - preview={{ - toolbarRender: ( - _, - { - transform: { scale }, - actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset }, - }, - ) => ( - <Space className="toolbar-wrapper"> - <div className='customAntdPreviewsItem'> - <Popconfirm - title="警告" - description="删除后无法恢复，确定要删除吗" - onConfirm={() => onDeleteImage(item)} - okText="删除" - cancelText="取消" - > - <DeleteOutlined /> - </Popconfirm> - - <DownloadOutlined onClick={() => onDownloadImage(item)} /> - <SwapOutlined rotate={90} onClick={onFlipY} /> - <SwapOutlined onClick={onFlipX} /> - <RotateLeftOutlined onClick={onRotateLeft} /> - <RotateRightOutlined onClick={onRotateRight} /> - <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} /> - <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} /> - <UndoOutlined onClick={onReset} /> - </div> - </Space> - ), - }} /> + className={`group relative overflow-hidden w-44 h-44 p-[2px] flex flex-col items-center cursor-pointer m-4 border-2 ${file.url === item.url ? 'border-primary' : 'border-[#eee]'} rounded-md`} + onClick={() => viewOpenFileInfo(item)}> + <img src={item.url} alt="" className='rounded-md h-full object-cover object-center' /> </div> ) ) @@ -149,12 +125,97 @@ export default () => { </Spin> </Card> + {/* 文件上传 */} <FileUpload dir={dirName} open={isModalOpen} onSuccess={() => getFileList(dirName)} onCancel={() => setIsModalOpen(false)} /> + + {/* 文件信息 */} + <Drawer + width={600} + title="图片信息" + placement="right" + closable={false} + open={openFileInfoDrawer} + onClose={() => { setOpenFileInfoDrawer(false); setFile({} as File) }} + > + <div className='flex flex-col'> + <div className='flex'> + <span className='min-w-20 font-bold'>文件名称</span> + <span className='text-[#333]'>{file.name}</span> + </div> + + <div className='flex'> + <span className='min-w-20 font-bold'>文件类型</span> + <span className='text-[#333]'>{file.type}</span> + </div> + + <div className='flex'> + <span className='min-w-20 font-bold'>文件大小</span> + <span className='text-[#333]'>{(file.size / 1048576).toFixed(2)}MB</span> + </div> + + <div className='flex'> + <span className='min-w-20 font-bold'>文件链接</span> + <span className='text-[#333] hover:text-primary cursor-pointer transition' onClick={async () => { + await navigator.clipboard.writeText(file.url) + message.success("🎉 复制成功") + }}>{file.url}</span> + </div> + </div> + + <Divider orientation="center">图片预览</Divider> + <Image + src={file.url} + className='rounded-md object-cover object-center' + preview={{ + toolbarRender: ( + _, + { + transform: { scale }, + actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset }, + }, + ) => ( + <Space className="toolbar-wrapper flex-col"> + <div className='customAntdPreviewsItem'> + <Popconfirm + title="警告" + description="删除后无法恢复，确定要删除吗" + onConfirm={() => onDeleteImage(file)} + okText="删除" + cancelText="取消" + > + <DeleteOutlined /> + </Popconfirm> + + <DownloadOutlined onClick={() => onDownloadImage(file)} /> + <SwapOutlined rotate={90} onClick={onFlipY} /> + <SwapOutlined onClick={onFlipX} /> + <RotateLeftOutlined onClick={onRotateLeft} /> + <RotateRightOutlined onClick={onRotateRight} /> + <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} /> + <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} /> + <UndoOutlined onClick={onReset} /> + </div> + </Space> + ), + }} /> + + <Divider orientation="center">图片操作</Divider> + <Button type='primary' className='w-full mb-2' onClick={() => onDownloadImage(file)}>下载图片</Button> + <Popconfirm + title="警告" + description="删除后无法恢复，确定要删除吗" + onConfirm={() => onDeleteImage(file)} + okText="删除" + cancelText="取消" + > + <Button type='primary' danger className='w-full'>删除图片</Button> + </Popconfirm> + </Drawer> </> ) -} +} \ No newline at end of file