achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

渲染文件列表

Browse Source
This commit is contained in:
宇阳
2024-08-20 15:29:49 +08:00
parent ab3e96f340
commit a4d8a77ccd
6 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/api/File.ts
View File

@@ -1,21 +1,28 @@
import Request from '@/utils/request'
import { File } from '@/types/app/file'
import { ObjectToUrlParam } from '@/utils'
// 删除文件
export const delFileDataAPI = (data: string[]) => Request<File>("DELETE", "/file", { files: data })
// 修改文件
export const editFileDataAPI = (data: File) => Request<File>("PATCH", "/file", data)
// 获取文件
export const getFileDataAPI = (id?: number) => Request<Paginate<File>>("GET", `/file/${id}`)
export const getFileDataAPI = (filePath: string) => Request<File>("GET", `/file/info?filePath=${filePath}`)
// 获取文件列表
export const getFileListAPI = (pagination?: Page) => {
if (pagination) {
const { page, size } = pagination
return Request<File[]>("GET", `/file?page=${page}&size=${size}`);
export const getFileListAPI = (data?: QueryData) => {
if (data?.pagination) {
let sort = data?.sort ? `?sort=${data?.sort}` : '?'
let dir = data?.dir ? `dir=${data?.dir}` : ''
const { page, size } = data.pagination
const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
if (!dir && !pagination) sort = ''
return Request<Paginate<File[]>>("GET", `/file${sort}${pagination}${dir}`);
} else {
return Request<File[]>("GET", `/file`);
let sort = data?.sort ? `?sort=${data?.sort}` : '?'
let dir = data?.dir ? `dir=${data?.dir}` : ''
if (!dir) sort = ''
return Request<File[]>("GET", `/file/all${sort}${dir}`);
}
};
};

2
src/api/Role.ts
View File

@@ -12,7 +12,7 @@ export const delRoleDataAPI = (id: number) => Request<Role>("DELETE", `/role/${i
export const editRoleDataAPI = (data: Role) => Request<Role>("PATCH", "/role", data)
// 获取角色
export const getRoleDataAPI = (id?: number) => Request<Role>("GET", `/role/${id}`)
export const getRoleDataAPI = (id: number) => Request<Role>("GET", `/role/${id}`)
// 获取角色列表
export const getRoleListAPI = () => Request<Role[]>("GET", "/role");

1
src/pages/File/image/file.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 102.4C87.620267 102.4 34.133333 154.8288 34.133333 219.511467v577.4336c0 64.682667 53.486933 117.111467 119.466667 117.111466h716.8c65.979733 0 119.466667-52.4288 119.466667-117.077333V295.355733c0-64.648533-53.486933-117.077333-119.466667-117.077333H517.666133C500.5312 133.461333 456.4992 102.4 405.845333 102.4H153.6z" fill="#FFA000" /><path d="M155.9552 253.303467l733.3888 64.750933c5.461333 0.477867 9.557333 5.2224 9.045333 10.581333l-40.516266 458.3424a9.864533 9.864533 0 0 1-10.786134 8.874667L113.664 731.101867a9.864533 9.864533 0 0 1-9.079467-10.581334L145.169067 262.144a9.864533 9.864533 0 0 1 10.786133-8.840533z" fill="#3196FA" /><path d="M889.344 318.0544L155.9552 253.303467a9.864533 9.864533 0 0 0-10.786133 8.874666L104.618667 720.452267a9.864533 9.864533 0 0 0 9.079466 10.581333l733.3888 64.785067a9.864533 9.864533 0 0 0 10.786134-8.874667L898.389333 328.704a9.864533 9.864533 0 0 0-9.045333-10.615467zM158.549333 224.1536L891.904 288.8704a39.424 39.424 0 0 1 36.181333 42.3936l-40.516266 458.3424a39.458133 39.458133 0 0 1-43.1104 35.396267L111.104 760.251733a39.424 39.424 0 0 1-36.215467-42.3936L115.438933 259.515733a39.458133 39.458133 0 0 1 43.076267-35.362133z" fill="#FFFFFF" /><path d="M151.278933 372.224l658.773334-128.682667c5.393067-1.024 10.581333 2.389333 11.605333 7.68l84.138667 429.841067a9.864533 9.864533 0 0 1-7.8848 11.4688l-658.773334 128.682667a9.864533 9.864533 0 0 1-11.639466-7.68L143.36 383.726933a9.864533 9.864533 0 0 1 7.850667-11.502933z" fill="#F06C0D" /><path d="M810.052267 243.541333l-658.773334 128.682667a9.864533 9.864533 0 0 0-7.8848 11.502933l84.104534 429.806934c1.024 5.290667 6.2464 8.738133 11.605333 7.68l658.773333-128.682667a9.864533 9.864533 0 0 0 7.918934-11.4688L821.691733 251.221333a9.864533 9.864533 0 0 0-11.639466-7.68zM145.646933 343.483733l658.773334-128.682666a39.458133 39.458133 0 0 1 46.557866 30.72l84.104534 429.806933a39.424 39.424 0 0 1-31.5392 45.9776l-658.773334 128.682667a39.458133 39.458133 0 0 1-46.557866-30.72L114.0736 389.461333a39.424 39.424 0 0 1 31.573333-45.9776z" fill="#FFFFFF" /><path d="M34.133333 477.832533c0-64.682667 53.486933-117.111467 119.466667-117.111466h716.8c65.979733 0 119.466667 52.4288 119.466667 117.077333v326.656C989.866667 869.205333 936.379733 921.6 870.4 921.6h-716.8C87.620267 921.6 34.133333 869.1712 34.133333 804.488533v-326.656z" fill="#FDCE62" /><path d="M391.406933 641.297067H188.2112a18.3296 18.3296 0 0 1-18.466133-18.090667c0-10.001067 8.2944-18.1248 18.466133-18.1248h203.195733c10.171733 0 18.500267 8.123733 18.500267 18.090667 0 9.966933-8.328533 18.090667-18.500267 18.090666z m159.300267 103.5264H188.2112a18.3296 18.3296 0 0 1-18.466133-18.090667c0-10.001067 8.2944-18.1248 18.466133-18.1248h362.496c10.171733 0 18.466133 8.123733 18.466133 18.090667 0 10.103467-8.2944 18.1248-18.466133 18.1248z" fill="#FFF8E1" /><path d="M203.8784 496.0256m-34.133333 0a34.133333 34.133333 0 1 0 68.266666 0 34.133333 34.133333 0 1 0-68.266666 0Z" fill="#FFA000" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

44
src/pages/File/index.tsx
View File

@@ -1,15 +1,49 @@
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
import { Card } from 'antd'
import Title from '@/components/Title'
import fileSvg from './image/file.svg'
import { getFileListAPI } from '@/api/File'
import { File, FileDir } from '@/types/app/file'
export default () => {
const [loading, setLoading] = useState(false)
const [dirList, setDirList] = useState<FileDir[]>(["default", "article", "swiper"])
const [fileList, setFileList] = useState<File[]>([])
const getFileList = async (dir: string) => {
setLoading(true)
const { data } = await getFileListAPI({ dir })
console.log(data);
setFileList(data as File[])
setLoading(false)
}
useEffect(() => {
// getFileList()
}, [])
return (
<>
<div>
<h1>Hello World!</h1>
</div>
<Title value='文件管理' />
<Card className='mt-2'>
<div className='flex flex-wrap'>
{
fileList.length
? fileList.map((item, index) =>
<div key={index} className='group overflow-hidden w-35 p-2 flex flex-col items-center cursor-pointer mx-4 border-[2px] border-[#eee] rounded-md'>
<img src={item.url} alt="" className='rounded-md' />
</div>
)
: dirList.map((dir, index) => (
<div key={index} className='group w-25 flex flex-col items-center cursor-pointer mx-4' onClick={() => getFileList(dir)}>
<img src={fileSvg} alt="" />
<p className='group-hover:text-primary transition-colors'>{dir}</p>
</div>
))
}
</div>
</Card>
</>
)
}

8
src/types/app/file.d.ts vendored
View File

@@ -1,5 +1,9 @@
export type FileDir = ("default" | "article" | "swiper")
export interface File {
children: Child[];
list: string[];
name: string;
size: number;
type: string;
url: string;
createTime: number;
}

6
src/types/response.d.ts vendored
View File

@@ -26,8 +26,12 @@ interface FilterData {
}
interface QueryData {
// 通用的
sort?: "asc" | "desc",
pattern?: "list" | "recursion",
query?: FilterData,
pagination?: Page
pagination?: Page,
// 文件相关
dir?: "all" | string
}