Initial commit: Pixel AI comic/video creation platform
- FastAPI backend with SQLModel, Alembic migrations, AgentScope agents - Next.js 15 frontend with React 19, Tailwind, Zustand, React Flow - Multi-provider AI system (DashScope, Kling, MiniMax, Volcengine, OpenAI, etc.) - All HTTP clients migrated from sync requests to async httpx - Admin-managed API keys via environment variables - SSRF vulnerability fixed in ensure_url()
This commit is contained in:
张鹏
196
frontend/src/components/admin/projects/ProjectTable.tsx
Normal file
196
frontend/src/components/admin/projects/ProjectTable.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { DataTable, Column } from "@/components/admin/common/DataTable";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
MoreHorizontal,
|
||||
Eye,
|
||||
Trash2,
|
||||
FolderOpen,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
useAdminProjects,
|
||||
useDeleteAdminProject,
|
||||
AdminProject,
|
||||
AdminProjectFilters,
|
||||
} from "@/lib/hooks/admin/useAdminProjects";
|
||||
import { useConfirm } from "@/components/ui/confirm-dialog";
|
||||
|
||||
interface ProjectTableProps {
|
||||
filters?: AdminProjectFilters;
|
||||
}
|
||||
|
||||
export function ProjectTable({ filters = {} }: ProjectTableProps) {
|
||||
const [page, setPage] = useState(1);
|
||||
const { confirm, ConfirmDialog } = useConfirm();
|
||||
|
||||
const { data, isLoading } = useAdminProjects({
|
||||
...filters,
|
||||
page,
|
||||
page_size: 20,
|
||||
});
|
||||
|
||||
const deleteMutation = useDeleteAdminProject();
|
||||
|
||||
const handleDelete = (project: AdminProject) => {
|
||||
confirm({
|
||||
title: "确认删除项目？",
|
||||
description: `确定要删除项目 "${project.name}" 吗？此操作无法撤销。`,
|
||||
variant: "destructive",
|
||||
onConfirm: () => deleteMutation.mutate(project.id),
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const variants: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; label: string }> = {
|
||||
active: { variant: "default", label: "进行中" },
|
||||
archived: { variant: "secondary", label: "已归档" },
|
||||
deleted: { variant: "destructive", label: "已删除" },
|
||||
};
|
||||
const config = variants[status] || { variant: "outline", label: status };
|
||||
return <Badge variant={config.variant}>{config.label}</Badge>;
|
||||
};
|
||||
|
||||
const getTypeBadge = (type: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
video: "视频",
|
||||
comic: "漫画",
|
||||
};
|
||||
return <Badge variant="outline">{labels[type] || type}</Badge>;
|
||||
};
|
||||
|
||||
const columns: Column<AdminProject>[] = [
|
||||
{
|
||||
key: "name",
|
||||
header: "项目名称",
|
||||
width: "25%",
|
||||
render: (project) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium truncate max-w-[200px]">{project.name}</span>
|
||||
{project.description && (
|
||||
<span className="text-xs text-muted-foreground truncate max-w-[200px]">
|
||||
{project.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "owner",
|
||||
header: "所有者",
|
||||
width: "15%",
|
||||
render: (project) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm">{project.ownerName || "未知用户"}</span>
|
||||
{project.ownerEmail && (
|
||||
<span className="text-xs text-muted-foreground">{project.ownerEmail}</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
header: "类型",
|
||||
width: "10%",
|
||||
render: (project) => getTypeBadge(project.type),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
width: "10%",
|
||||
render: (project) => getStatusBadge(project.status),
|
||||
},
|
||||
{
|
||||
key: "progress",
|
||||
header: "进度",
|
||||
width: "15%",
|
||||
render: (project) => (
|
||||
<div className="flex flex-col gap-1">
|
||||
<Progress value={project.progress || 0} className="h-2" />
|
||||
<span className="text-xs text-muted-foreground">{project.progress || 0}%</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
header: "创建时间",
|
||||
width: "15%",
|
||||
render: (project) => (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{project.createdAt ? new Date(project.createdAt).toLocaleDateString("zh-CN") : "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
header: "操作",
|
||||
width: "10%",
|
||||
render: (project) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/projects/${project.id}`} className="flex items-center gap-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
查看详情
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/project/${project.id}`} className="flex items-center gap-2">
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
打开项目
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive flex items-center gap-2"
|
||||
onClick={() => handleDelete(project)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
删除项目
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data?.items || []}
|
||||
keyExtractor={(item) => item.id}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="暂无项目数据"
|
||||
pagination={
|
||||
data?.pagination
|
||||
? {
|
||||
page,
|
||||
pageSize: 20,
|
||||
total: data.pagination.total,
|
||||
onPageChange: setPage,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<ConfirmDialog />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user