完成资源的增加和查询

2025-05-12 20:53:10 +08:00
parent bf6196afa2
commit 4367bda08e
14 changed files with 1145 additions and 10 deletions
--- a/tone-page-web/app/console/(with-menu)/web/resource/components/AddResource.tsx
+++ b/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>
+    )
+}