完成资源CRUD

tone-page-server/src/admin/controller/web/admin-web-resource.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Get, Param, Post, Put } from "@nestjs/common";
+import { Body, Controller, Delete, Get, Param, ParseUUIDPipe, Post, Put } from "@nestjs/common";
 import { CreateResourceDto } from "src/admin/dto/admin-web/create-resource.dto";
 import { ResourceService } from "src/resource/resource.service";
 
@@ -14,6 +14,11 @@ export class AdminWebResourceController {
         return this.resourceService.findAll();
     }
 
+    @Get(':id')
+    async get(@Param('id', new ParseUUIDPipe({ version: '4' })) id: string) {
+        return this.resourceService.findById(id);
+    }
+
     @Post()
     async create(@Body() data: CreateResourceDto) {
         return this.resourceService.create(data);

tone-page-server/src/resource/resource.service.ts

@@ -18,6 +18,10 @@ export class ResourceService {
         });
     }
 
+    async findById(id: string): Promise<Resource> {
+        return this.resourceRepository.findOne({ where: { id } });
+    }
+
     async create(data: Partial<Resource>): Promise<Resource> {
         const resource = this.resourceRepository.create(data);
         return this.resourceRepository.save(resource);

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

@@ -0,0 +1,155 @@
+"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 { toast } from "sonner"
+import { ResourceBadge } from "@/components/resource"
+import AddResourceTag from "./AddResourceTag"
+import { Textarea } from "@/components/ui/textarea"
+import { Plus } from "lucide-react"
+import { Resource } from "@/lib/types/resource"
+import { AdminApi } from "@/lib/api"
+import useSWR from "swr"
+import { ApiError } from "next/dist/server/api-utils"
+interface ResourceEditProps {
+    children: React.ReactNode
+    id: string;
+    onRefresh: () => void;
+}
+
+export default function ResourceEdit({ children, id, onRefresh }: ResourceEditProps) {
+    const [open, setOpen] = useState(false);
+
+    const { data: resource, error, isLoading, mutate } = useSWR<Resource>(
+        open ? [`/api/admin/web/resource/${id}`] : null,
+        () => AdminApi.web.resource.get(id),
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 5000,
+        }
+    )
+
+    const handleSubmit = async () => {
+        if (!resource) return;
+        try {
+            await AdminApi.web.resource.update(id, {
+                title: resource.title,
+                description: resource.description,
+                imageUrl: resource.imageUrl,
+                link: resource.link,
+                tags: resource.tags,
+            });
+            toast.success("资源更新成功");
+            onRefresh();
+            setOpen(false);
+        } catch (error) {
+            toast.error((error as ApiError).message || "资源更新失败");
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+            <DialogContent className="w-300">
+                <DialogHeader>
+                    <DialogTitle>编辑资源</DialogTitle>
+                </DialogHeader>
+                {resource && (
+                    <>
+                        <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={resource.title}
+                                    onChange={(e) => mutate({ ...resource, title: e.target.value }, false)}
+                                    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={resource.description}
+                                    onChange={(e) => mutate({ ...resource, description: e.target.value }, false)}
+                                    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={resource.imageUrl}
+                                    onChange={(e) => mutate({ ...resource, imageUrl: e.target.value }, false)}
+                                    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={resource.link}
+                                    onChange={(e) => mutate({ ...resource, link: e.target.value }, false)}
+                                    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">
+                                    {
+                                        resource.tags.map((tag, index) => (
+                                            <ResourceBadge tag={tag} key={index} editMode={true} onClose={name => mutate({ ...resource, tags: resource.tags.filter(tag => tag.name !== name) }, false)} />
+                                        ))
+                                    }
+
+                                    <AddResourceTag onTagAdd={(tag) => {
+                                        if (!tag.name) return;
+                                        if (resource.tags.find(t => t.name === tag.name)) {
+                                            toast.error("标签已存在");
+                                            return;
+                                        }
+                                        mutate({
+                                            ...resource,
+                                            tags: [...resource.tags, tag],
+                                        }, false)
+                                    }}>
+                                        <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/ResourceTable.tsx

@@ -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>
+        </>
     )
 }

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

@@ -17,6 +17,7 @@ export default function Page() {
             </div>
             <ResourceTable
                 resources={resources || []}
+                onRefresh={refresh}
             />
         </>
     )

tone-page-web/lib/api/admin/web/resource/get.ts

@@ -0,0 +1,6 @@
+import fetcher from "@/lib/api/fetcher";
+import { Resource } from "@/lib/types/resource";
+
+export async function get(id: string) {
+    return fetcher<Resource>(`/api/admin/web/resource/${id}`)
+}

tone-page-web/lib/api/admin/web/resource/index.ts

@@ -1,4 +1,5 @@
 export * from './create';
 export * from './remove';
 export * from './list';
-export * from './update';
+export * from './update';
+export * from './get';

tone-page-web/lib/api/admin/web/resource/update.ts

@@ -13,7 +13,7 @@ type UpdateResourceParams = {
 
 export async function update(id: string, data: UpdateResourceParams) {
     return fetcher(`/api/admin/web/resource/${id}`, {
-        method: 'POST',
+        method: 'PUT',
         body: JSON.stringify(data)
     })
 }