feat: 歌曲封面使用 Image 组件，删除歌曲行数据时使用一个动画效果来过渡一下

src/features/file-listing/FileRow.tsx

@@ -1,20 +1,22 @@
 import {
-  Avatar,
   Box,
   Button,
   Card,
   CardBody,
   Center,
+  Collapse,
   Grid,
   GridItem,
+  Image,
   Link,
   Text,
+  useDisclosure,
   VStack,
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
+import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
 
 interface FileRowProps {
@@ -23,6 +25,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
   const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
 
@@ -30,7 +33,7 @@ export function FileRow({ id, file }: FileRowProps) {
   const decryptedName = nameWithoutExt + '.' + file.ext;
 
   const audioPlayerRef = useRef<HTMLAudioElement>(null);
-  const togglePlay = () => {
+  const togglePlay = useCallback(() => {
     const player = audioPlayerRef.current;
     if (!player) {
       return;
@@ -41,13 +44,17 @@ export function FileRow({ id, file }: FileRowProps) {
     } else {
       player.pause();
     }
-  };
+  }, []);
 
-  const handleDeleteRow = () => {
+  const handleDeleteRow = useCallback(() => {
+    onToggle();
+    setTimeout(() => {
       dispatch(deleteFile({ id }));
-  };
+    }, 500);
+  }, [dispatch, id, onToggle]);
 
   return (
+    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
       <Card w="full">
         <CardBody>
           <Grid
@@ -75,8 +82,13 @@ export function FileRow({ id, file }: FileRowProps) {
           >
             <GridItem area="cover">
               <Center w="160px" h="160px" m="auto">
-              {file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
+                <Image
-              {!file.metadata.cover && <Text>暂无封面</Text>}
+                  boxSize='160px'
+                  objectFit='cover'
+                  src={file.metadata.cover}
+                  alt={file.metadata.album}
+                  fallbackSrc='https://via.placeholder.com/160'
+                />
               </Center>
             </GridItem>
             <GridItem area="title">
@@ -123,5 +135,6 @@ export function FileRow({ id, file }: FileRowProps) {
           </Grid>
         </CardBody>
       </Card>
+    </Collapse>
   );
 }