完成资源的增加和查询

tone-page-web/app/console/(with-menu)/web/resource/components/AddResource.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import React, { useState } from "react"
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import { AdminApi } from "@/lib/api"
+import { toast } from "sonner"
+import { ApiError } from "next/dist/server/api-utils"
+import { ResourceBadge } from "@/components/resource"
+import AddResourceTag from "./AddResourceTag"
+import { Textarea } from "@/components/ui/textarea"
+import { Plus } from "lucide-react"
+
+
+interface AddResourceProps {
+    children: React.ReactNode;
+    refresh: () => void;
+}
+
+export default function AddResource({ children, refresh }: AddResourceProps) {
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const [formData, setFormData] = useState({
+        title: "",
+        description: "",
+        imageUrl: "",
+        link: "",
+        tags: [] as { type: string, name: string }[],
+    });
+
+    const handleSubmit = async () => {
+        try {
+            setLoading(true);
+            await AdminApi.web.resource.create({
+                ...formData,
+            });
+            toast.success("添加成功");
+            setOpen(false);
+            refresh();
+        } catch (error) {
+            toast.error((error as ApiError).message || "添加失败");
+        }
+    }
+
+    const handleOpenChange = (open: boolean) => {
+        setOpen(open);
+        if (open) {
+            setFormData({
+                title: "",
+                description: "",
+                imageUrl: "",
+                link: "",
+                tags: [] as { type: string, name: string }[],
+            });
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+            <DialogContent className="w-300">
+                <DialogHeader>
+                    <DialogTitle>添加资源</DialogTitle>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="admin-web-resource-add-title" className="text-right">
+                            标题
+                        </Label>
+                        <Input
+                            id="admin-web-resource-add-title"
+                            value={formData.title}
+                            onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                            className="col-span-3"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="admin-web-resource-add-description" className="text-right">
+                            描述
+                        </Label>
+                        <Textarea
+                            id="admin-web-resource-add-description"
+                            value={formData.description}
+                            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                            className="col-span-3 max-h-15"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="admin-web-resource-add-imageUrl" className="text-right">
+                            图标URL
+                        </Label>
+                        <Input
+                            id="admin-web-resource-add-imageUrl"
+                            value={formData.imageUrl}
+                            onChange={(e) => setFormData({ ...formData, imageUrl: e.target.value })}
+                            className="col-span-3"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="admin-web-resource-add-link" className="text-right">
+                            链接
+                        </Label>
+                        <Input
+                            id="admin-web-resource-add-link"
+                            value={formData.link}
+                            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+                            className="col-span-3"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="admin-web-resource-add-tags" className="text-right">
+                            标签
+                        </Label>
+                        <div className="flex items-center gap-2">
+                            {
+                                formData.tags.map((tag, index) => (
+                                    <ResourceBadge tag={tag} key={index} editMode={true} onClose={name => setFormData({ ...formData, tags: formData.tags.filter(tag => tag.name !== name) })} />
+                                ))
+                            }
+
+                            <AddResourceTag onTagAdd={(tag) => {
+                                if (!tag.name) return;
+                                if (formData.tags.find(t => t.name === tag.name)) {
+                                    toast.error("标签已存在");
+                                    return;
+                                }
+                                setFormData({
+                                    ...formData,
+                                    tags: [...formData.tags, tag],
+                                })
+                            }}>
+                                <Button size='sm' variant='outline'>
+                                    <Plus />
+                                </Button>
+                            </AddResourceTag>
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button type="submit" onClick={handleSubmit}>保存</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

tone-page-web/app/console/(with-menu)/web/resource/components/AddResourceTag.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { useState } from "react";
+
+interface AddResourceTagProps {
+    children: React.ReactNode;
+    onTagAdd: (tag: { name: string; type: string }) => void;
+}
+
+export default function AddResourceTag({ onTagAdd, children }: AddResourceTagProps) {
+    const [open, setOpen] = useState(false);
+    const [tag, setTag] = useState({ name: '', type: 'default' });
+
+    function handleSetOpen(open: boolean) {
+        setOpen(open);
+        if (open) {
+            setTag({ name: '', type: 'default' });
+        }
+    }
+
+    return (
+        <Popover open={open} onOpenChange={handleSetOpen}>
+            <PopoverTrigger asChild>
+                {children}
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <h4 className="font-medium leading-none">添加标签</h4>
+                    </div>
+                    <div className="grid gap-2">
+                        <div className="grid grid-cols-3 items-center gap-4">
+                            <Label htmlFor="add-tag-name">内容</Label>
+                            <Input
+                                id="add-tag-name"
+                                className="col-span-2 h-8"
+                                value={tag.name}
+                                onChange={(e) => setTag({ ...tag, name: e.target.value })}
+                            />
+                        </div>
+                        <div className="grid grid-cols-3 items-center gap-4">
+                            <Label htmlFor="add-tag-type">类型</Label>
+                            <Select onValueChange={v => setTag({ ...tag, type: v })} defaultValue="default">
+                                <SelectTrigger className="w-[185px]">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="default">默认</SelectItem>
+                                    <SelectItem value="os">OS</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <Button onClick={() => {
+                            onTagAdd({
+                                ...tag,
+                            });
+                            setOpen(false);
+                        }}>添加</Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

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

@@ -0,0 +1,74 @@
+"use client"
+
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Resource } from "@/lib/types/resource";
+import { ResourceBadge } from "@/components/resource";
+
+interface ResourceTableProps {
+    resources: Resource[];
+    errorMessage?: string;
+}
+
+export default function ResourceTable({ resources, errorMessage }: 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>
+                )) : (
+                    <TableRow>
+                        <TableCell colSpan={7} className="text-center">
+                            <div className="my-5 text-zinc-500">暂无数据</div>
+                        </TableCell>
+                    </TableRow>
+                )}
+            </TableBody>
+        </Table>
+    )
+}

tone-page-web/app/console/(with-menu)/web/resource/page.tsx

@@ -1,7 +1,23 @@
+"use client";
+
+import { useResourceList } from "@/hooks/admin/web/resource/use-resource-list"
+import ResourceTable from "./components/ResourceTable"
+import { Button } from "@/components/ui/button";
+import AddResource from "./components/AddResource";
+
 export default function Page() {
+    const { resources, error, isLoading, mutate, refresh } = useResourceList();
+
     return (
         <>
-            resource
+            <div>
+                <AddResource refresh={refresh}>
+                    <Button>添加资源</Button>
+                </AddResource>
+            </div>
+            <ResourceTable
+                resources={resources || []}
+            />
         </>
     )
 }