From 093d47a09452ffa31dadaed93cb1599dd1a74215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Tue, 20 Aug 2024 15:55:20 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=B8=AD=E9=AB=98=E4=BA=AE=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/File/index.tsx | 41 ++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/pages/File/index.tsx b/src/pages/File/index.tsx
index 348c098..f62674d 100644
--- a/src/pages/File/index.tsx
+++ b/src/pages/File/index.tsx
@@ -1,15 +1,18 @@
 import { useEffect, useState } from 'react'
-import { Card } from 'antd'
+import { Card, Spin } 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'
+import { PiKeyReturnFill } from "react-icons/pi";
 
 export default () => {
+    const [active, setActive] = useState("")
     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 })
@@ -27,22 +30,32 @@ export default () => {
             <Title value='文件管理' />
 
             <Card className='mt-2'>
-                <div className='flex flex-wrap'>
+                <div className='flex mb-4 px-4'>
                     {
-                        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>
-                            ))
+                        !fileList.length
+                            ? <PiKeyReturnFill className='text-4xl text-[#E0DFDF] cursor-pointer' />
+                            : <PiKeyReturnFill className='text-4xl text-primary cursor-pointer' onClick={() => setFileList([])} />
                     }
                 </div>
+
+                <Spin spinning={loading}>
+                    <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] ${active === item.name ? 'border-primary' : 'border-[#eee]'}  rounded-md`} onClick={() => setActive(item.name)}>
+                                        <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>
+                </Spin>
             </Card>
         </>
     )