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

完成资源的增加和查询

Browse Source
This commit is contained in:
tone
2025-05-12 20:53:10 +08:00
parent 2a1e0d45dd
commit bb054f7f5a
14 changed files with 1145 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
tone-page-web/app/console/(with-menu)/web/resource/components/AddResource.tsx Normal file
View File

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

79
tone-page-web/app/console/(with-menu)/web/resource/components/AddResourceTag.tsx Normal file
View File

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

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

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