Преглед изворни кода

✨ feat(files): 添加文件预览功能

- 在文件列表中新增"预览"列
- 对可预览类型文件显示缩略图,点击可查看大图
- 对不可预览文件显示文件图标占位符
- 缩略图添加悬停效果和提示文字"点击查看大图"
yourname пре 4 месеци
родитељ
комит
887903b35d
1 измењених фајлова са 16 додато и 0 уклоњено
  1. 16 0
      src/client/admin-shadcn/pages/Files.tsx

+ 16 - 0
src/client/admin-shadcn/pages/Files.tsx

@@ -221,6 +221,7 @@ export const FilesPage: React.FC = () => {
               <TableHeader>
                 <TableRow>
                   <TableHead className="w-16">ID</TableHead>
+                  <TableHead>预览</TableHead>
                   <TableHead>文件名称</TableHead>
                   <TableHead>文件类型</TableHead>
                   <TableHead>文件大小</TableHead>
@@ -249,6 +250,21 @@ export const FilesPage: React.FC = () => {
                   data?.data?.map((file) => (
                     <TableRow key={file.id}>
                       <TableCell className="font-medium">{file.id}</TableCell>
+                      <TableCell>
+                        {isPreviewable(file.type) ? (
+                          <img
+                            src={file.fullUrl}
+                            alt={file.name}
+                            className="w-12 h-12 object-cover rounded border cursor-pointer hover:opacity-80 transition-opacity"
+                            onClick={() => handlePreview(file)}
+                            title="点击查看大图"
+                          />
+                        ) : (
+                          <div className="w-12 h-12 flex items-center justify-center bg-gray-100 rounded border">
+                            <FileText className="h-6 w-6 text-gray-400" />
+                          </div>
+                        )}
+                      </TableCell>
                       <TableCell>
                         <div className="max-w-xs truncate" title={file.name}>
                           {file.name}