diff --git a/src/features/file-listing/AlbumImage.tsx b/src/features/file-listing/AlbumImage.tsx
new file mode 100644
index 0000000..22c8dd2
--- /dev/null
+++ b/src/features/file-listing/AlbumImage.tsx
@@ -0,0 +1,24 @@
+import { Box, Image } from '@chakra-ui/react';
+import noCoverFallbackImageURL from '~/assets/no-cover.svg';
+
+interface AlbumImageProps {
+ url?: string;
+ name?: string;
+}
+
+export function AlbumImage({ name, url }: AlbumImageProps) {
+ const coverAlternativeText = name ? `${name} 的专辑封面` : '专辑封面';
+
+ return (
+
+
+
+ );
+}
diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 1355185..c280c8c 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -4,10 +4,8 @@ import {
Button,
Card,
CardBody,
- Center,
Collapse,
GridItem,
- Image,
Link,
Text,
useDisclosure,
@@ -19,7 +17,7 @@ import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useAppDispatch } from '~/hooks';
import { AnimationDefinition } from 'framer-motion';
-import noCoverFallbackImageURL from '~/assets/no-cover.svg';
+import { AlbumImage } from './AlbumImage';
interface FileRowProps {
id: string;
@@ -68,13 +66,7 @@ export function FileRow({ id, file }: FileRowProps) {
-
-
-
+