tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成资源CRUD

Browse Source
This commit is contained in:
tone
2025-05-12 21:31:24 +08:00
parent 4367bda08e
commit f070712823
8 changed files with 233 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
tone-page-web/app/console/(with-menu)/web/resource/components/ResourceTable.tsx
View File

@@ -12,63 +12,72 @@ import {
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Resource } from "@/lib/types/resource";
import { ResourceBadge } from "@/components/resource";
import { Button } from "@/components/ui/button";
import ResourceEdit from "./ResourceEdit";
interface ResourceTableProps {
resources: Resource[];
errorMessage?: string;
onRefresh: () => void;
}
export default function ResourceTable({ resources, errorMessage }: ResourceTableProps) {
export default function ResourceTable({ resources, errorMessage, onRefresh }: ResourceTableProps) {
return (
<Table>
{errorMessage && <TableCaption>{errorMessage}</TableCaption>}
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Id</TableHead>
<TableHead>标题</TableHead>
<TableHead>描述</TableHead>
<TableHead>图标URL</TableHead>
<TableHead>链接</TableHead>
<TableHead>标签</TableHead>
<TableHead className="text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{resources.length > 0 ? resources.map((resource) => (
<TableRow key={resource.id}>
<TableCell className="font-medium">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="max-w-[100px] overflow-hidden text-ellipsis">{resource.id}</div>
</TooltipTrigger>
<TooltipContent>
<p>{resource.id}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>{resource.title}</TableCell>
<TableCell>{resource.description}</TableCell>
<TableCell>{resource.imageUrl}</TableCell>
<TableCell>{resource.link}</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{resource.tags.map((tag, index) => (
<ResourceBadge tag={tag} key={index} />
))}
</div>
</TableCell>
<TableCell className="text-right">TODO</TableCell>
</TableRow>
)) : (
<>
<Table>
{errorMessage && <TableCaption>{errorMessage}</TableCaption>}
<TableHeader>
<TableRow>
<TableCell colSpan={7} className="text-center">
<div className="my-5 text-zinc-500">暂无数据</div>
</TableCell>
<TableHead className="w-[100px]">Id</TableHead>
<TableHead>标题</TableHead>
<TableHead>描述</TableHead>
<TableHead>图标URL</TableHead>
<TableHead>链接</TableHead>
<TableHead>标签</TableHead>
<TableHead className="text-right w-10">操作</TableHead>
</TableRow>
)}
</TableBody>
</Table>
</TableHeader>
<TableBody>
{resources.length > 0 ? resources.map((resource) => (
<TableRow key={resource.id}>
<TableCell className="font-medium">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="max-w-[100px] overflow-hidden text-ellipsis">{resource.id}</div>
</TooltipTrigger>
<TooltipContent>
<p>{resource.id}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>{resource.title}</TableCell>
<TableCell>{resource.description}</TableCell>
<TableCell>{resource.imageUrl}</TableCell>
<TableCell>{resource.link}</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{resource.tags.map((tag, index) => (
<ResourceBadge tag={tag} key={index} />
))}
</div>
</TableCell>
<TableCell className="text-right">
<ResourceEdit id={resource.id} onRefresh={() => onRefresh()}>
<Button variant={'outline'} size={'sm'}>编辑</Button>
</ResourceEdit>
</TableCell>
</TableRow>
)) : (
<TableRow>
<TableCell colSpan={7} className="text-center">
<div className="my-5 text-zinc-500">暂无数据</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</>
)
}