From 573a69be9a2cc2e8ebf6eff502defe2720e33321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= Date: Sat, 4 Jan 2025 19:26:44 +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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++++++ package.json | 1 + src/api/File.ts | 24 +++---------- src/components/FileUpload/index.tsx | 6 ++-- src/pages/File/index.scss | 6 ++-- src/pages/File/index.tsx | 55 +++++++++++++++++++++-------- src/styles/custom.scss | 13 +++++++ src/types/app/file.d.ts | 7 +++- 8 files changed, 82 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d43a57..07d5914 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-github-calendar": "^4.2.2", "react-hot-toast": "^2.4.1", "react-icons": "^4.12.0", + "react-masonry-css": "^1.0.16", "react-router-dom": "^6.14.2", "react-toastify": "^9.1.3", "rehype-callouts": "^1.4.1", @@ -7546,6 +7547,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-masonry-css": { + "version": "1.0.16", + "resolved": "https://registry.npmmirror.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz", + "integrity": "sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/package.json b/package.json index 81b5733..cec48d9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-github-calendar": "^4.2.2", "react-hot-toast": "^2.4.1", "react-icons": "^4.12.0", + "react-masonry-css": "^1.0.16", "react-router-dom": "^6.14.2", "react-toastify": "^9.1.3", "rehype-callouts": "^1.4.1", diff --git a/src/api/File.ts b/src/api/File.ts index 33b6982..bdf6378 100644 --- a/src/api/File.ts +++ b/src/api/File.ts @@ -1,28 +1,14 @@ import Request from '@/utils/request' -import { File } from '@/types/app/file' +import { File, FileDir } from '@/types/app/file' // 删除文件 -export const delFileDataAPI = (filePath: string) => Request("DELETE", `/file?filePath=${filePath}`) +export const delFileDataAPI = (filePath: string) => Request("DELETE", `/file/plus?filePath=${filePath}`) // 获取文件 -export const getFileDataAPI = (filePath: string) => Request("GET", `/file/info?filePath=${filePath}`) +export const getFileDataAPI = (filePath: string) => Request("GET", `/file/plus/info?filePath=${filePath}`) // 获取文件列表 -export const getFileListAPI = (data?: QueryData) => Request("POST", `/file/list`, { - data: { ...data?.query }, - params: { - dir: data?.dir - } -}) - -// 分页获取文件列表 -export const getFilePagingAPI = (data?: QueryData) => Request>("POST", `/file/paging`, { - data: { ...data?.query }, - params: { - dir: data?.dir, - ...data?.pagination - } -}) +export const getFileListAPI = (dir: string) => Request("GET", `/file/plus/list?dir=${dir}`) // 获取目录列表 -export const getDirListAPI = () => Request("GET", '/file/dir');; \ No newline at end of file +export const getDirListAPI = () => Request("GET", '/file/plus/dir') \ No newline at end of file diff --git a/src/components/FileUpload/index.tsx b/src/components/FileUpload/index.tsx index 7928b21..75b41ff 100644 --- a/src/components/FileUpload/index.tsx +++ b/src/components/FileUpload/index.tsx @@ -2,12 +2,12 @@ import { useRef, useState } from 'react'; import { InboxOutlined } from '@ant-design/icons'; import { message, Modal, Radio, Select, Spin } from 'antd'; import { useUserStore } from '@/stores'; -import { FileDir } from '@/types/app/file'; +import { DirList } from '@/types/app/file'; import { baseURL } from '@/utils/request'; import Compressor from 'compressorjs'; interface UploadFileProps { - dir: FileDir, + dir: DirList, open: boolean, onSuccess: (urls: string[]) => void, onCancel: () => void @@ -52,7 +52,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => { } // 发起网络请求 - const res = await fetch(`${baseURL}/file`, { + const res = await fetch(`${baseURL}/file/plus`, { method: "POST", body: formData, headers: { diff --git a/src/pages/File/index.scss b/src/pages/File/index.scss index ef9316a..af34207 100644 --- a/src/pages/File/index.scss +++ b/src/pages/File/index.scss @@ -1,10 +1,12 @@ .FilePage { .ant-image { + display: block; width: 100%; - height: 100%; .ant-image-img { - height: 100%; + width: 100%; + height: auto; + display: block; } } } diff --git a/src/pages/File/index.tsx b/src/pages/File/index.tsx index 35273f0..d7f7356 100644 --- a/src/pages/File/index.tsx +++ b/src/pages/File/index.tsx @@ -5,11 +5,19 @@ import FileUpload from '@/components/FileUpload' import fileSvg from './image/file.svg' import { delFileDataAPI, getDirListAPI, getFileListAPI } from '@/api/File' -import { File } from '@/types/app/file' +import { File, FileDir } from '@/types/app/file' import { PiKeyReturnFill } from "react-icons/pi"; import { DeleteOutlined, DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons'; +import Masonry from "react-masonry-css"; import "./index.scss" +const breakpointColumnsObj = { + default: 4, + 1100: 3, + 700: 2, + 500: 1 +}; + export default () => { const [loading, setLoading] = useState(false) @@ -17,7 +25,7 @@ export default () => { const [openFileInfoDrawer, setOpenFileInfoDrawer] = useState(false); const [openFilePreviewDrawer, setOpenFilePreviewDrawer] = useState(false); - const [dirList, setDirList] = useState([]) + const [dirList, setDirList] = useState([]) const [fileList, setFileList] = useState([]) const [dirName, setDirName] = useState("") @@ -33,7 +41,7 @@ export default () => { // 获取指定目录的文件列表 const getFileList = async (dir: string) => { - const { data } = await getFileListAPI({ dir }) + const { data } = await getFileListAPI(dir) if (!fileList.length && !(data as File[]).length) message.error("该目录中没有文件") @@ -44,7 +52,10 @@ export default () => { // 删除图片 const onDeleteImage = async (data: File) => { setLoading(true) - await delFileDataAPI(`${dirName}/${data.name}`) + + let filePath = data.url.replace(/^https?:\/\//, ''); + + await delFileDataAPI(filePath) message.success("🎉 删除图片成功") getFileList(dirName) setFile({} as File) @@ -107,22 +118,36 @@ export default () => { { fileList.length ? ( - fileList.map((item, index) => -
viewOpenFileInfo(item)}> - -
- ) + + { + fileList.map((item, index) => +
viewOpenFileInfo(item)}> + +
+ ) + } + ) - : dirList.map((dir, index) => ( + : dirList.map((item, index) => (
openDir(dir)}> + onClick={() => openDir(item.name)}> -

{dir}

+

{item.name}

)) } diff --git a/src/styles/custom.scss b/src/styles/custom.scss index 1aa739c..7aa4337 100644 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -38,4 +38,17 @@ border-radius: 100% 60% 60% 100%/100% 100% 60% 60%; transform: translate3d(0, -3px, 0) rotate(.01deg) } +} + +// 瀑布流布局 +.masonry-grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: auto; +} + +.masonry-grid_column { + padding-left: 10px; + background-clip: padding-box; } \ No newline at end of file diff --git a/src/types/app/file.d.ts b/src/types/app/file.d.ts index 980b7b9..9f1098c 100644 --- a/src/types/app/file.d.ts +++ b/src/types/app/file.d.ts @@ -1,4 +1,4 @@ -export type FileDir = ("default" | "article" | "swiper" | string) +export type DirList = ("default" | "article" | "swiper" | string) export interface File { name: string; @@ -6,4 +6,9 @@ export interface File { type: string; url: string; createTime: number; +} + +export interface FileDir { + path: string, + name: string } \ No newline at end of file