mini-starter/src/client/admin-shadcn/pages/Files.tsx

import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Button } from '@/client/components/ui/button';
import { Input } from '@/client/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
import { Badge } from '@/client/components/ui/badge';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/client/components/ui/alert-dialog';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { Eye, Download, Edit, Trash2, Search, Upload, FileText } from 'lucide-react';
import { fileClient } from '@/client/api';
import type { InferResponseType, InferRequestType } from 'hono/client';
import dayjs from 'dayjs';
import { uploadMinIOWithPolicy } from '@/client/utils/minio';
import { UpdateFileDto } from '@/server/modules/files/file.schema';
import * as z from 'zod';

// 定义类型
type FileItem = InferResponseType<typeof fileClient.$get, 200>['data'][0];
type FileListResponse = InferResponseType<typeof fileClient.$get, 200>;
type UpdateFileRequest = InferRequestType<typeof fileClient[':id']['$put']>['json'];
type FileFormData = z.infer<typeof UpdateFileDto>;

export const FilesPage: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingFile, setEditingFile] = useState<FileItem | null>(null);
  const [searchText, setSearchText] = useState('');
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [deleteFileId, setDeleteFileId] = useState<number | null>(null);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);

  const queryClient = useQueryClient();
  
  // 表单初始化
  const form = useForm<FileFormData>({
    resolver: zodResolver(UpdateFileDto),
    defaultValues: {
      name: '',
      description: '',
    },
  });

  // 获取文件列表数据
  const fetchFiles = async ({ page, pageSize }: { page: number; pageSize: number }): Promise<FileListResponse> => {
    const response = await fileClient.$get({ query: { page, pageSize, keyword: searchText } });
    if (!response.ok) throw new Error('Failed to fetch files');
    return await response.json() as FileListResponse;
  };

  // 获取文件下载URL
  const getFileDownloadUrl = async (fileId: number) => {
    try {
      const response = await fileClient[':id']['download'].$get({ param: { id: fileId } });
      if (!response.ok) throw new Error('获取文件下载URL失败');
      const data = await response.json();
      return data;
    } catch (error) {
      toast.error('获取文件下载URL失败');
      return null;
    }
  };

  // 获取文件预览URL
  const getFilePreviewUrl = async (fileId: number) => {
    try {
      const response = await fileClient[':id']['url'].$get({ param: { id: fileId } });
      if (!response.ok) throw new Error('获取文件URL失败');
      const data = await response.json();
      return data.url;
    } catch (error) {
      toast.error('获取文件URL失败');
      return null;
    }
  };

  const { data, isLoading, error } = useQuery({
    queryKey: ['files', pagination.current, pagination.pageSize, searchText],
    queryFn: () => fetchFiles({ page: pagination.current, pageSize: pagination.pageSize }),
  });

  // 更新文件记录
  const updateFile = useMutation({
    mutationFn: ({ id, data }: { id: number; data: UpdateFileRequest }) =>
      fileClient[':id'].$put({ param: { id: id.toString() }, json: data }),
    onSuccess: () => {
      toast.success('文件记录更新成功');
      queryClient.invalidateQueries({ queryKey: ['files'] });
      setIsModalOpen(false);
      setEditingFile(null);
    },
    onError: (error: Error) => {
      toast.error(`操作失败: ${error.message}`);
    }
  });

  // 删除文件记录
  const deleteFile = useMutation({
    mutationFn: (id: number) => fileClient[':id'].$delete({ param: { id: id.toString() } }),
    onSuccess: () => {
      toast.success('文件记录删除成功');
      queryClient.invalidateQueries({ queryKey: ['files'] });
    },
    onError: (error: Error) => {
      toast.error(`删除失败: ${error.message}`);
    }
  });

  // 处理文件下载
  const handleDownload = async (record: FileItem) => {
    const result = await getFileDownloadUrl(record.id);
    if (result?.url) {
      const a = document.createElement('a');
      a.href = result.url;
      a.download = result.filename || record.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };

  // 处理文件预览
  const handlePreview = async (record: FileItem) => {
    const url = await getFilePreviewUrl(record.id);
    if (url) {
      if (record.type.startsWith('image/')) {
        window.open(url, '_blank');
      } else if (record.type.startsWith('video/')) {
        window.open(url, '_blank');
      } else {
        toast.warning('该文件类型不支持预览');
      }
    }
  };

  // 检查是否为可预览的文件类型
  const isPreviewable = (fileType: string) => {
    return fileType.startsWith('image/') || fileType.startsWith('video/');
  };

  // 处理直接上传文件
  const handleDirectUpload = async () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.multiple = false;
    
    input.onchange = async (e) => {
      const file = (e.target as HTMLInputElement).files?.[0];
      if (!file) return;
      
      try {
        toast.loading('正在上传文件...');
        await uploadMinIOWithPolicy('/files', file, file.name);
        toast.success('文件上传成功');
        queryClient.invalidateQueries({ queryKey: ['files'] });
      } catch (error) {
        toast.error(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
      }
    };
    
    input.click();
  };

  // 显示编辑弹窗
  const showEditModal = (record: FileItem) => {
    setEditingFile(record);
    setIsModalOpen(true);
    form.reset({
      name: record.name,
      description: record.description || '',
    });
  };

  // 处理表单提交
  const handleFormSubmit = async (data: FileFormData) => {
    if (editingFile) {
      await updateFile.mutateAsync({ 
        id: editingFile.id, 
        data: {
          name: data.name,
          description: data.description,
        }
      });
    }
  };

  // 处理删除确认
  const handleDeleteConfirm = () => {
    if (deleteFileId) {
      deleteFile.mutate(deleteFileId);
      setIsDeleteDialogOpen(false);
      setDeleteFileId(null);
    }
  };

  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
  };

  // 格式化文件大小
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  // 分页数据
  const tablePagination = data?.pagination || pagination;

  if (error) {
    return (
      <div className="p-6">
        <Card>
          <CardContent className="text-center py-8">
            <FileText className="h-12 w-12 mx-auto text-gray-400 mb-4" />
            <p className="text-gray-600">获取文件列表失败</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">文件管理</h1>
        <Button onClick={handleDirectUpload}>
          <Upload className="h-4 w-4 mr-2" />
          上传文件
        </Button>
      </div>
      
      <Card>
        <CardHeader>
          <CardTitle>文件列表</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="mb-4 flex gap-4">
            <div className="flex-1">
              <Input
                placeholder="搜索文件名称或类型"
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                className="max-w-sm"
              />
            </div>
            <Button onClick={handleSearch}>
              <Search className="h-4 w-4 mr-2" />
              搜索
            </Button>
          </div>

          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-16">ID</TableHead>
                  <TableHead>文件名称</TableHead>
                  <TableHead>文件类型</TableHead>
                  <TableHead>文件大小</TableHead>
                  <TableHead>上传时间</TableHead>
                  <TableHead>上传用户</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center">
                      <div className="flex justify-center items-center py-8">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : data?.data?.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-8">
                      <FileText className="h-12 w-12 mx-auto text-gray-400 mb-4" />
                      <p className="text-gray-600">暂无文件</p>
                    </TableCell>
                  </TableRow>
                ) : (
                  data?.data?.map((file) => (
                    <TableRow key={file.id}>
                      <TableCell className="font-medium">{file.id}</TableCell>
                      <TableCell>
                        <div className="max-w-xs truncate" title={file.name}>
                          {file.name}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="secondary">{file.type}</Badge>
                      </TableCell>
                      <TableCell>{formatFileSize(file.size)}</TableCell>
                      <TableCell>
                        {file.uploadTime ? dayjs(file.uploadTime).format('YYYY-MM-DD HH:mm:ss') : '-'}
                      </TableCell>
                      <TableCell>
                        {file.uploadUser ? (file.uploadUser.nickname || file.uploadUser.username) : '-'}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handlePreview(file)}
                            disabled={!isPreviewable(file.type)}
                            title={isPreviewable(file.type) ? '预览文件' : '该文件类型不支持预览'}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDownload(file)}
                            title="下载文件"
                          >
                            <Download className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => showEditModal(file)}
                            title="编辑文件信息"
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setDeleteFileId(file.id);
                              setIsDeleteDialogOpen(true);
                            }}
                            className="text-red-600 hover:text-red-700"
                            title="删除文件"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>

          {/* 分页 */}
          {tablePagination.total > 0 && (
            <div className="flex justify-between items-center mt-4">
              <div className="text-sm text-gray-600">
                显示 {((tablePagination.current - 1) * tablePagination.pageSize + 1)}-
                {Math.min(tablePagination.current * tablePagination.pageSize, tablePagination.total)} 条，
                共 {tablePagination.total} 条
              </div>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={tablePagination.current <= 1}
                  onClick={() => setPagination({ ...pagination, current: tablePagination.current - 1 })}
                >
                  上一页
                </Button>
                <span className="px-3 py-1 text-sm">
                  第 {tablePagination.current} 页
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={tablePagination.current >= Math.ceil(tablePagination.total / tablePagination.pageSize)}
                  onClick={() => setPagination({ ...pagination, current: tablePagination.current + 1 })}
                >
                  下一页
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 编辑对话框 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>编辑文件信息</DialogTitle>
            <DialogDescription>
              修改文件的基本信息
            </DialogDescription>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(handleFormSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>文件名称</FormLabel>
                    <FormControl>
                      <Input placeholder="请输入文件名称" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>文件描述</FormLabel>
                    <FormControl>
                      <Input placeholder="请输入文件描述" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                  取消
                </Button>
                <Button type="submit" disabled={updateFile.isPending}>
                  {updateFile.isPending ? '保存中...' : '保存'}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>

      {/* 删除确认对话框 */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除这个文件记录吗？此操作不可恢复。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteConfirm} className="bg-red-600 hover:bg-red-700">
              确认删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};