选中高亮效果

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,11 +30,20 @@ export default () => {
             <Title value='文件管理' />
 
             <Card className='mt-2'>
+                <div className='flex mb-4 px-4'>
+                    {
+                        !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] border-[#eee] rounded-md'>
+                                    <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>
                                 )
@@ -43,6 +55,7 @@ export default () => {
                                 ))
                         }
                     </div>
+                </Spin>
             </Card>
         </>
     )