|
|
@@ -0,0 +1,563 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
+import { Plus, Edit, Trash2, Search, Eye } from 'lucide-react';
|
|
|
+import { Input } from '@/client/components/ui/input';
|
|
|
+import { Button } from '@/client/components/ui/button';
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
|
|
|
+import { Badge } from '@/client/components/ui/badge';
|
|
|
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
|
|
|
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import { DataTablePagination } from '@/client/admin-shadcn/components/DataTablePagination';
|
|
|
+import AvatarSelector from '@/client/admin-shadcn/components/AvatarSelector';
|
|
|
+import { advertisementClient } from '@/client/api';
|
|
|
+import type { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
+import { CreateAdvertisementDto, UpdateAdvertisementDto } from '@/server/modules/advertisements/advertisement.schema';
|
|
|
+
|
|
|
+type CreateRequest = InferRequestType<typeof advertisementClient.$post>['json'];
|
|
|
+type UpdateRequest = InferRequestType<typeof advertisementClient[':id']['$put']>['json'];
|
|
|
+type AdvertisementResponse = InferResponseType<typeof advertisementClient.$get, 200>['data'][0];
|
|
|
+
|
|
|
+const createFormSchema = CreateAdvertisementDto;
|
|
|
+const updateFormSchema = UpdateAdvertisementDto;
|
|
|
+
|
|
|
+export const AdvertisementsPage = () => {
|
|
|
+ const queryClient = useQueryClient();
|
|
|
+ const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '' });
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
+ const [editingAdvertisement, setEditingAdvertisement] = useState<AdvertisementResponse | null>(null);
|
|
|
+ const [isCreateForm, setIsCreateForm] = useState(true);
|
|
|
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
|
+ const [advertisementToDelete, setAdvertisementToDelete] = useState<number | null>(null);
|
|
|
+
|
|
|
+ // 表单实例
|
|
|
+ const createForm = useForm<CreateRequest>({
|
|
|
+ resolver: zodResolver(createFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ title: '',
|
|
|
+ typeId: 1,
|
|
|
+ code: '',
|
|
|
+ url: '',
|
|
|
+ img: '',
|
|
|
+ sort: 0,
|
|
|
+ status: 1,
|
|
|
+ actionType: 1
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const updateForm = useForm<UpdateRequest>({
|
|
|
+ resolver: zodResolver(updateFormSchema),
|
|
|
+ defaultValues: {}
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取广告类型列表
|
|
|
+ const { data: advertisementTypes } = useQuery({
|
|
|
+ queryKey: ['advertisement-types'],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await advertisementClient.types.$get();
|
|
|
+ if (res.status !== 200) throw new Error('获取广告类型失败');
|
|
|
+ return await res.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 数据查询
|
|
|
+ const { data, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['advertisements', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await advertisementClient.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.search
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('获取广告列表失败');
|
|
|
+ return await res.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建广告
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: CreateRequest) => {
|
|
|
+ const res = await advertisementClient.$post({ json: data });
|
|
|
+ if (res.status !== 201) throw new Error('创建广告失败');
|
|
|
+ return await res.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('广告创建成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ createForm.reset();
|
|
|
+ refetch();
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error instanceof Error ? error.message : '创建广告失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新广告
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
|
|
|
+ const res = await advertisementClient[':id'].$put({
|
|
|
+ param: { id: id.toString() },
|
|
|
+ json: data
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('更新广告失败');
|
|
|
+ return await res.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('广告更新成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ setEditingAdvertisement(null);
|
|
|
+ refetch();
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error instanceof Error ? error.message : '更新广告失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 删除广告
|
|
|
+ const deleteMutation = useMutation({
|
|
|
+ mutationFn: async (id: number) => {
|
|
|
+ const res = await advertisementClient[':id'].$delete({
|
|
|
+ param: { id: id.toString() }
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('删除广告失败');
|
|
|
+ return await res.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('广告删除成功');
|
|
|
+ setDeleteDialogOpen(false);
|
|
|
+ setAdvertisementToDelete(null);
|
|
|
+ refetch();
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error instanceof Error ? error.message : '删除广告失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理搜索
|
|
|
+ const handleSearch = (e: React.FormEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }));
|
|
|
+ refetch();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理创建广告
|
|
|
+ const handleCreateAdvertisement = () => {
|
|
|
+ setIsCreateForm(true);
|
|
|
+ setEditingAdvertisement(null);
|
|
|
+ createForm.reset();
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理编辑广告
|
|
|
+ const handleEditAdvertisement = (advertisement: AdvertisementResponse) => {
|
|
|
+ setIsCreateForm(false);
|
|
|
+ setEditingAdvertisement(advertisement);
|
|
|
+ updateForm.reset({
|
|
|
+ title: advertisement.title || undefined,
|
|
|
+ typeId: advertisement.typeId || undefined,
|
|
|
+ code: advertisement.code || undefined,
|
|
|
+ url: advertisement.url || undefined,
|
|
|
+ img: advertisement.img || undefined,
|
|
|
+ sort: advertisement.sort || undefined,
|
|
|
+ status: advertisement.status || undefined,
|
|
|
+ actionType: advertisement.actionType || undefined
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理删除广告
|
|
|
+ const handleDeleteAdvertisement = (id: number) => {
|
|
|
+ setAdvertisementToDelete(id);
|
|
|
+ setDeleteDialogOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 确认删除
|
|
|
+ const confirmDelete = () => {
|
|
|
+ if (advertisementToDelete) {
|
|
|
+ deleteMutation.mutate(advertisementToDelete);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理表单提交
|
|
|
+ const handleSubmit = (data: CreateRequest | UpdateRequest) => {
|
|
|
+ if (isCreateForm) {
|
|
|
+ createMutation.mutate(data as CreateRequest);
|
|
|
+ } else if (editingAdvertisement) {
|
|
|
+ updateMutation.mutate({
|
|
|
+ id: editingAdvertisement.id,
|
|
|
+ data: data as UpdateRequest
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 渲染加载骨架
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <h1 className="text-2xl font-bold">广告管理</h1>
|
|
|
+ <Button disabled>
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建广告
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <Skeleton className="h-6 w-1/4" />
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <Skeleton className="h-32 w-full" />
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <h1 className="text-2xl font-bold">广告管理</h1>
|
|
|
+ <Button onClick={handleCreateAdvertisement}>
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建广告
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>广告列表</CardTitle>
|
|
|
+ <CardDescription>管理网站的所有广告内容</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="mb-4">
|
|
|
+ <form onSubmit={handleSearch} className="flex gap-2">
|
|
|
+ <div className="relative flex-1 max-w-sm">
|
|
|
+ <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
|
+ <Input
|
|
|
+ placeholder="搜索广告标题或别名..."
|
|
|
+ value={searchParams.search}
|
|
|
+ onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
|
|
|
+ className="pl-8"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Button type="submit" variant="outline">
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>ID</TableHead>
|
|
|
+ <TableHead>标题</TableHead>
|
|
|
+ <TableHead>类型</TableHead>
|
|
|
+ <TableHead>别名</TableHead>
|
|
|
+ <TableHead>图片</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>排序</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {data?.data.map((advertisement) => (
|
|
|
+ <TableRow key={advertisement.id}>
|
|
|
+ <TableCell>{advertisement.id}</TableCell>
|
|
|
+ <TableCell>{advertisement.title || '-'}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {advertisementTypes?.data.find(t => t.id === advertisement.typeId)?.name || '-'}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <code className="text-xs bg-muted px-1 rounded">{advertisement.code || '-'}</code>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {advertisement.img ? (
|
|
|
+ <img
|
|
|
+ src={advertisement.img}
|
|
|
+ alt={advertisement.title || '广告图片'}
|
|
|
+ className="w-16 h-10 object-cover rounded"
|
|
|
+ onError={(e) => {
|
|
|
+ e.currentTarget.src = '/placeholder.png';
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span className="text-muted-foreground text-xs">无图片</span>
|
|
|
+ )}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge variant={advertisement.status === 1 ? 'default' : 'secondary'}>
|
|
|
+ {advertisement.status === 1 ? '启用' : '禁用'}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{advertisement.sort}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {advertisement.createTime ? new Date(advertisement.createTime * 1000).toLocaleDateString() : '-'}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditAdvertisement(advertisement)}
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleDeleteAdvertisement(advertisement.id)}
|
|
|
+ >
|
|
|
+ <Trash2 className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {data?.data.length === 0 && !isLoading && (
|
|
|
+ <div className="text-center py-8">
|
|
|
+ <p className="text-muted-foreground">暂无广告数据</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <DataTablePagination
|
|
|
+ current={searchParams.page}
|
|
|
+ pageSize={searchParams.limit}
|
|
|
+ total={data?.pagination.total || 0}
|
|
|
+ onChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
|
|
|
+ />
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 创建/编辑对话框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>{isCreateForm ? '创建广告' : '编辑广告'}</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {isCreateForm ? '创建一个新的广告' : '编辑现有广告信息'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ <Form {...(isCreateForm ? createForm : updateForm)}>
|
|
|
+ <form onSubmit={(isCreateForm ? createForm : updateForm).handleSubmit(handleSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="title"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 标题 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入广告标题" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>广告显示的标题文本,最多30个字符</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="typeId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 广告类型 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <select
|
|
|
+ {...field}
|
|
|
+ className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
|
+ value={field.value || ''}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ >
|
|
|
+ <option value="">请选择广告类型</option>
|
|
|
+ {advertisementTypes?.data.map(type => (
|
|
|
+ <option key={type.id} value={type.id}>{type.name}</option>
|
|
|
+ ))}
|
|
|
+ </select>
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="code"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 调用别名 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入调用别名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>用于程序调用的唯一标识,最多20个字符</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="img"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>广告图片</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <AvatarSelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={field.onChange}
|
|
|
+ maxSize={2}
|
|
|
+ uploadPath="/advertisements"
|
|
|
+ uploadButtonText="上传广告图片"
|
|
|
+ previewSize="medium"
|
|
|
+ placeholder="选择广告图片"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>推荐尺寸:1200x400px,支持jpg、png格式</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="url"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>跳转链接</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入跳转链接" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>点击广告后跳转的URL地址</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="actionType"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>跳转类型</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <select
|
|
|
+ {...field}
|
|
|
+ className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
|
+ value={field.value || 1}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ >
|
|
|
+ <option value={0}>不跳转</option>
|
|
|
+ <option value={1}>Web页面</option>
|
|
|
+ <option value={2}>小程序页面</option>
|
|
|
+ </select>
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="sort"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>排序值</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="排序值"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>数值越大排序越靠前</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="status"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>状态</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <select
|
|
|
+ {...field}
|
|
|
+ className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
|
+ value={field.value || 1}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ >
|
|
|
+ <option value={1}>启用</option>
|
|
|
+ <option value={0}>禁用</option>
|
|
|
+ </select>
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={(isCreateForm ? createMutation : updateMutation).isPending}>
|
|
|
+ {isCreateForm ? '创建' : '更新'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 删除确认对话框 */}
|
|
|
+ <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
|
+ <DialogContent>
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>确认删除</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ 确定要删除这个广告吗?此操作无法撤销。
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+ <DialogFooter>
|
|
|
+ <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="destructive"
|
|
|
+ onClick={confirmDelete}
|
|
|
+ disabled={deleteMutation.isPending}
|
|
|
+ >
|
|
|
+ {deleteMutation.isPending ? '删除中...' : '删除'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+// 简单的骨架屏组件
|
|
|
+const Skeleton = ({ className }: { className?: string }) => (
|
|
|
+ <div className={`animate-pulse rounded-md bg-muted ${className}`} />
|
|
|
+);
|