个人信息页面增强

frontend/components/common/admin/files.tsx

@@ -5,6 +5,7 @@ import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
 import {AnimatePresence, motion} from "motion/react"
 import {
   Download,
+  Eye,
   FileArchive,
   FileAudio,
   FileImage,
@@ -21,6 +22,8 @@ import {toast} from "sonner"
 import {Button} from "@/components/ui/button"
 import {Input} from "@/components/ui/input"
 import {Badge} from "@/components/ui/badge"
+import {Checkbox} from "@/components/ui/checkbox"
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -31,6 +34,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
+import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
 import {formatFileSize, UploadService} from "@/lib/services/upload/upload.service"
 import type {Upload as UploadRecord} from "@/lib/services/upload/types"
 
@@ -63,8 +67,9 @@ export function FilesMain() {
   const [debouncedKeyword, setDebouncedKeyword] = React.useState("")
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set())
   const [deleteTarget, setDeleteTarget] = React.useState<UploadRecord | null>(null)
+  const [detailTarget, setDetailTarget] = React.useState<UploadRecord | null>(null)
   const [page, setPage] = React.useState(1)
-  const pageSize = 24
+  const pageSize = 15 // 表格视图下 15 条更紧凑
 
   // 搜索防抖
   React.useEffect(() => {
@@ -85,6 +90,25 @@ export function FilesMain() {
   const total = listQuery.data?.total ?? 0
   const totalPages = Math.ceil(total / pageSize)
 
+  const isAllSelected = files.length > 0 && files.every((f) => selectedIds.has(f.id))
+  const isSomeSelected = files.length > 0 && files.some((f) => selectedIds.has(f.id)) && !isAllSelected
+
+  const handleSelectAll = () => {
+    if (isAllSelected) {
+      setSelectedIds((prev) => {
+        const next = new Set(prev)
+        files.forEach((f) => next.delete(f.id))
+        return next
+      })
+    } else {
+      setSelectedIds((prev) => {
+        const next = new Set(prev)
+        files.forEach((f) => next.add(f.id))
+        return next
+      })
+    }
+  }
+
   // 删除单文件
   const deleteMutation = useMutation({
     mutationFn: (id: string) => UploadService.deleteFile(id),
@@ -147,7 +171,7 @@ export function FilesMain() {
               文件管理
             </h1>
             <p className="text-sm text-muted-foreground">
-              管理您上传的所有文件，支持下载 and 批量操作
+              管理您上传的所有文件，支持下载与批量操作
             </p>
           </div>
         </div>
@@ -227,7 +251,7 @@ export function FilesMain() {
         )}
       </div>
 
-      {/* 文件网格 */}
+      {/* 文件列表 Table */}
       {listQuery.isPending ? (
         <div className="flex items-center justify-center py-20">
           <Loader2 className="size-6 animate-spin text-sky-500" />
@@ -240,86 +264,119 @@ export function FilesMain() {
           </p>
         </div>
       ) : (
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
-          {files.map((file, idx) => {
-            const isSelected = selectedIds.has(file.id)
-            return (
-              <motion.div
-                key={file.id}
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.25, delay: idx * 0.02 }}
-                className={`group relative rounded-xl border border-dashed p-3 flex flex-col gap-2 cursor-pointer transition-all duration-200 hover:bg-muted/40 hover:shadow-sm select-none ${
-                  isSelected
-                    ? "bg-sky-500/8 border-sky-500/40 ring-1 ring-sky-500/30"
-                    : "bg-card hover:border-muted-foreground/25"
-                }`}
-                onClick={() => toggleSelect(file.id)}
-              >
-                {/* 选中指示 */}
-                {isSelected && (
-                  <div className="absolute top-2 left-2 size-4 rounded-full bg-sky-500 flex items-center justify-center z-10">
-                    <svg className="size-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                )}
-
-                {/* 文件图标 / 图片预览 */}
-                <div className="flex items-center justify-center h-14 rounded-lg bg-muted/30 overflow-hidden">
-                  {file.mime_type.startsWith("image/") ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={`/f/${file.id}`}
-                      alt={file.file_name}
-                      className="h-full w-full object-cover rounded-lg"
-                      onError={(e) => {
-                        ;(e.currentTarget as HTMLImageElement).style.display = "none"
-                      }}
-                    />
-                  ) : (
-                    getFileIcon(file.mime_type)
-                  )}
-                </div>
-
-                {/* 文件名 */}
-                <p className="text-[10px] font-medium leading-tight text-foreground/80 break-all line-clamp-2 text-center">
-                  {file.file_name}
-                </p>
-
-                {/* 元数据 */}
-                <div className="text-[10px] text-muted-foreground text-center space-y-0.5">
-                  <p>{formatFileSize(file.file_size)}</p>
-                  <p className="truncate">{formatDate(file.created_at)}</p>
-                </div>
-
-                {/* Hover 操作按钮 */}
-                <div
-                  className="absolute inset-x-2 bottom-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Button
-                    size="icon"
-                    variant="secondary"
-                    className="h-6 w-6 rounded-md flex-1"
-                    title="下载"
-                    onClick={() => handleDownload(file)}
+        <div className="border border-dashed rounded-xl bg-card overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent border-dashed">
+                <TableHead className="w-[50px] pl-4 py-3">
+                  <Checkbox
+                    checked={isAllSelected || (isSomeSelected ? "indeterminate" : false)}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </TableHead>
+                <TableHead className="w-[80px] py-3">预览</TableHead>
+                <TableHead className="w-[180px] py-3">ID</TableHead>
+                <TableHead className="py-3">文件名</TableHead>
+                <TableHead className="max-w-[200px] truncate py-3">路径</TableHead>
+                <TableHead className="w-[100px] py-3">业务类别</TableHead>
+                <TableHead className="w-[125px] py-3">MIME类型</TableHead>
+                <TableHead className="w-[100px] py-3">大小</TableHead>
+                <TableHead className="w-[150px] py-3">上传时间</TableHead>
+                <TableHead className="w-[120px] text-right pr-4 py-3">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {files.map((file) => {
+                const isSelected = selectedIds.has(file.id)
+                return (
+                  <TableRow
+                    key={file.id}
+                    className={`border-dashed hover:bg-muted/30 transition-colors ${
+                      isSelected ? "bg-sky-500/5 hover:bg-sky-500/10" : ""
+                    }`}
                   >
-                    <Download className="size-3" />
-                  </Button>
-                  <Button
-                    size="icon"
-                    variant="secondary"
-                    className="h-6 w-6 rounded-md text-destructive hover:bg-destructive/10"
-                    title="删除"
-                    onClick={() => setDeleteTarget(file)}
-                  >
-                    <Trash2 className="size-3" />
-                  </Button>
-                </div>
-              </motion.div>
-            )
-          })}
+                    <TableCell className="pl-4 py-3">
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => toggleSelect(file.id)}
+                      />
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <div className="flex items-center justify-center size-9 rounded-lg bg-muted/40 overflow-hidden border">
+                        {file.mime_type.startsWith("image/") ? (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img
+                            src={`/f/${file.id}`}
+                            alt={file.file_name}
+                            className="size-full object-cover"
+                            onError={(e) => {
+                              ;(e.currentTarget as HTMLImageElement).style.display = "none"
+                            }}
+                          />
+                        ) : (
+                          getFileIcon(file.mime_type, "size-4.5")
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-3 font-mono text-[11px] text-muted-foreground select-all">
+                      {file.id}
+                    </TableCell>
+                    <TableCell className="py-3 font-medium max-w-[180px] truncate text-xs" title={file.file_name}>
+                      {file.file_name}
+                    </TableCell>
+                    <TableCell className="py-3 font-mono text-[11px] max-w-[200px] truncate text-muted-foreground select-all" title={file.file_path}>
+                      {file.file_path}
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <Badge variant="secondary" className="text-[10px] py-0 px-1.5 font-normal rounded-md">
+                        {file.type}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="py-3 text-[11px] text-muted-foreground truncate max-w-[125px]" title={file.mime_type}>
+                      {file.mime_type}
+                    </TableCell>
+                    <TableCell className="py-3 text-xs">
+                      {formatFileSize(file.file_size)}
+                    </TableCell>
+                    <TableCell className="py-3 text-xs text-muted-foreground">
+                      {formatDate(file.created_at)}
+                    </TableCell>
+                    <TableCell className="py-3 text-right pr-4">
+                      <div className="flex items-center justify-end gap-0.5">
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-7 w-7 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground"
+                          title="查看详情"
+                          onClick={() => setDetailTarget(file)}
+                        >
+                          <Eye className="size-3.5" />
+                        </Button>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-7 w-7 rounded-md hover:bg-muted"
+                          title="下载"
+                          onClick={() => handleDownload(file)}
+                        >
+                          <Download className="size-3.5" />
+                        </Button>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-7 w-7 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                          title="删除"
+                          onClick={() => setDeleteTarget(file)}
+                        >
+                          <Trash2 className="size-3.5" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
         </div>
       )}
 
@@ -350,6 +407,112 @@ export function FilesMain() {
         </div>
       )}
 
+      {/* 详情查看 Sheet */}
+      <Sheet open={!!detailTarget} onOpenChange={(open) => !open && setDetailTarget(null)}>
+        <SheetContent className="w-full sm:max-w-md overflow-y-auto p-6">
+          <SheetHeader className="border-b pb-4 px-0">
+            <SheetTitle>文件详情</SheetTitle>
+            <SheetDescription>查看文件的完整元数据与配置属性。</SheetDescription>
+          </SheetHeader>
+
+          {detailTarget && (
+            <div className="space-y-6 py-4">
+              {/* 大图/格式预览 */}
+              <div className="flex items-center justify-center h-48 rounded-xl bg-muted/30 border border-dashed overflow-hidden p-2">
+                {detailTarget.mime_type.startsWith("image/") ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={`/f/${detailTarget.id}`}
+                    alt={detailTarget.file_name}
+                    className="max-h-full max-w-full object-contain rounded-lg shadow-sm"
+                  />
+                ) : (
+                  <div className="flex flex-col items-center gap-3">
+                    {getFileIcon(detailTarget.mime_type, "size-14")}
+                    <span className="text-xs font-medium text-muted-foreground uppercase">
+                      {detailTarget.extension} 文件
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* 元数据列表 */}
+              <div className="space-y-4 text-xs">
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">文件 ID</span>
+                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.id}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">文件名</span>
+                  <span className="col-span-2 break-all font-medium text-foreground/90">{detailTarget.file_name}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">存储路径</span>
+                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.file_path}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">大小</span>
+                  <span className="col-span-2 text-foreground/90">
+                    {formatFileSize(detailTarget.file_size)} ({detailTarget.file_size.toLocaleString()} 字节)
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">MIME 类型</span>
+                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.mime_type}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">文件后缀</span>
+                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.extension}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">Hash (SHA-256)</span>
+                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.hash}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">业务类型</span>
+                  <span className="col-span-2">
+                    <Badge variant="secondary" className="text-[10px] py-0 px-2 rounded-md font-normal">
+                      {detailTarget.type}
+                    </Badge>
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">存储驱动</span>
+                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.storage_driver || "local"}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">上传者 ID</span>
+                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.user_id}</span>
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
+                  <span className="text-muted-foreground font-medium">上传时间</span>
+                  <span className="col-span-2 text-foreground/90">{formatDate(detailTarget.created_at)}</span>
+                </div>
+
+                {detailTarget.metadata && Object.keys(detailTarget.metadata).length > 0 && (
+                  <div className="space-y-1.5 pt-2">
+                    <span className="text-muted-foreground font-medium block">额外元数据</span>
+                    <pre className="p-3 bg-muted/40 border rounded-lg text-[10px] font-mono overflow-x-auto text-foreground/90 max-h-40 overflow-y-auto">
+                      {JSON.stringify(detailTarget.metadata, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+
       {/* 删除确认 Dialog */}
       <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
         <AlertDialogContent>