|
|
@@ -0,0 +1,447 @@
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { Plus, Edit, Trash2 } from 'lucide-react';
|
|
|
+import { toast } from 'sonner';
|
|
|
+
|
|
|
+import { Button } from '@/client/components/ui/button';
|
|
|
+import { Input } from '@/client/components/ui/input';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
|
|
|
+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 { Textarea } from '@/client/components/ui/textarea';
|
|
|
+import { Switch } from '@/client/components/ui/switch';
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
+import { Badge } from '@/client/components/ui/badge';
|
|
|
+import { AvatarSelector } from '@/client/admin-shadcn/components/AvatarSelector';
|
|
|
+
|
|
|
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
+import { advertisementClient } from '@/client/api';
|
|
|
+import type { InferResponseType, InferRequestType } from 'hono/client';
|
|
|
+import { CreateAdvertisementDto, UpdateAdvertisementDto } from '@/server/modules/advertisements/advertisement.schema';
|
|
|
+
|
|
|
+// 类型定义
|
|
|
+type AdvertisementResponse = InferResponseType<typeof advertisementClient.$get, 200>;
|
|
|
+type AdvertisementItem = AdvertisementResponse['data'][0];
|
|
|
+type CreateRequest = InferRequestType<typeof advertisementClient.$post>['json'];
|
|
|
+type UpdateRequest = InferRequestType<typeof advertisementClient[':id']['$put']>['json'];
|
|
|
+
|
|
|
+const Advertisements: React.FC = () => {
|
|
|
+ const queryClient = useQueryClient();
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
+ const [isCreateForm, setIsCreateForm] = useState(true);
|
|
|
+ const [editingData, setEditingData] = useState<AdvertisementItem | null>(null);
|
|
|
+ const [searchKeyword, setSearchKeyword] = useState('');
|
|
|
+
|
|
|
+ // 查询广告列表
|
|
|
+ const { data: advertisementsData, isLoading } = useQuery({
|
|
|
+ queryKey: ['advertisements', searchKeyword],
|
|
|
+ queryFn: async () => {
|
|
|
+ const response = await advertisementClient.$get({
|
|
|
+ query: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ ...(searchKeyword && { keyword: searchKeyword })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (response.status !== 200) throw new Error('获取广告列表失败');
|
|
|
+ return response.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建广告
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: CreateRequest) => {
|
|
|
+ const response = await advertisementClient.$post({ json: data });
|
|
|
+ if (response.status !== 200) throw new Error('创建广告失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['advertisements'] });
|
|
|
+ toast.success('广告创建成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(`创建失败:${error.message}`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新广告
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
|
|
|
+ const response = await advertisementClient[':id']['$put']({
|
|
|
+ param: { id: id.toString() },
|
|
|
+ json: data
|
|
|
+ });
|
|
|
+ if (response.status !== 200) throw new Error('更新广告失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['advertisements'] });
|
|
|
+ toast.success('广告更新成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(`更新失败:${error.message}`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 删除广告
|
|
|
+ const deleteMutation = useMutation({
|
|
|
+ mutationFn: async (id: number) => {
|
|
|
+ const response = await advertisementClient[':id']['$delete']({
|
|
|
+ param: { id: id.toString() }
|
|
|
+ });
|
|
|
+ if (response.status !== 200) throw new Error('删除广告失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['advertisements'] });
|
|
|
+ toast.success('广告删除成功');
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(`删除失败:${error.message}`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 表单实例
|
|
|
+ const createForm = useForm<CreateRequest>({
|
|
|
+ resolver: zodResolver(CreateAdvertisementDto),
|
|
|
+ defaultValues: {
|
|
|
+ title: '',
|
|
|
+ linkUrl: '',
|
|
|
+ imageUrl: '',
|
|
|
+ positionId: 1,
|
|
|
+ sortOrder: 0,
|
|
|
+ isEnabled: 1,
|
|
|
+ description: '',
|
|
|
+ startTime: undefined,
|
|
|
+ endTime: undefined
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const updateForm = useForm<UpdateRequest>({
|
|
|
+ resolver: zodResolver(UpdateAdvertisementDto),
|
|
|
+ defaultValues: {}
|
|
|
+ });
|
|
|
+
|
|
|
+ // 打开创建表单
|
|
|
+ const handleCreate = () => {
|
|
|
+ setEditingData(null);
|
|
|
+ setIsCreateForm(true);
|
|
|
+ createForm.reset();
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 打开编辑表单
|
|
|
+ const handleEdit = (data: AdvertisementItem) => {
|
|
|
+ setEditingData(data);
|
|
|
+ setIsCreateForm(false);
|
|
|
+ updateForm.reset({
|
|
|
+ title: data.title,
|
|
|
+ linkUrl: data.linkUrl,
|
|
|
+ imageUrl: data.imageUrl,
|
|
|
+ positionId: data.positionId,
|
|
|
+ sortOrder: data.sortOrder,
|
|
|
+ isEnabled: data.isEnabled,
|
|
|
+ description: data.description || undefined,
|
|
|
+ startTime: data.startTime || undefined,
|
|
|
+ endTime: data.endTime || undefined
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理表单提交
|
|
|
+ const handleSubmit = (data: CreateRequest | UpdateRequest) => {
|
|
|
+ if (isCreateForm) {
|
|
|
+ createMutation.mutate(data as CreateRequest);
|
|
|
+ } else if (editingData) {
|
|
|
+ updateMutation.mutate({ id: editingData.id, data: data as UpdateRequest });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理删除
|
|
|
+ const handleDelete = (id: number) => {
|
|
|
+ if (window.confirm('确定要删除这个广告吗?')) {
|
|
|
+ deleteMutation.mutate(id);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 格式化日期
|
|
|
+ const formatDate = (date: string | null | undefined) => {
|
|
|
+ if (!date) return '永久';
|
|
|
+ return new Date(date).toLocaleDateString('zh-CN');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取状态徽章
|
|
|
+ const getStatusBadge = (isEnabled: number) => {
|
|
|
+ return isEnabled === 1 ? (
|
|
|
+ <Badge variant="default">启用</Badge>
|
|
|
+ ) : (
|
|
|
+ <Badge variant="secondary">禁用</Badge>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="container mx-auto py-6">
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <CardTitle>广告管理</CardTitle>
|
|
|
+ <CardDescription>管理系统中的所有广告内容</CardDescription>
|
|
|
+ </div>
|
|
|
+ <Button onClick={handleCreate}>
|
|
|
+ <Plus className="w-4 h-4 mr-2" />
|
|
|
+ 新建广告
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ {/* 搜索栏 */}
|
|
|
+ <div className="mb-4">
|
|
|
+ <Input
|
|
|
+ placeholder="搜索广告标题..."
|
|
|
+ value={searchKeyword}
|
|
|
+ onChange={(e) => setSearchKeyword(e.target.value)}
|
|
|
+ className="max-w-sm"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 广告列表 */}
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead className="w-[80px]">ID</TableHead>
|
|
|
+ <TableHead>标题</TableHead>
|
|
|
+ <TableHead>广告位</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>排序</TableHead>
|
|
|
+ <TableHead>开始时间</TableHead>
|
|
|
+ <TableHead>结束时间</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {isLoading ? (
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={9} className="text-center">
|
|
|
+ 加载中...
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : !advertisementsData?.data?.length ? (
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={9} className="text-center">
|
|
|
+ 暂无数据
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : (
|
|
|
+ advertisementsData.data.map((ad) => (
|
|
|
+ <TableRow key={ad.id}>
|
|
|
+ <TableCell>{ad.id}</TableCell>
|
|
|
+ <TableCell>{ad.title}</TableCell>
|
|
|
+ <TableCell>广告位 {ad.positionId}</TableCell>
|
|
|
+ <TableCell>{getStatusBadge(ad.isEnabled)}</TableCell>
|
|
|
+ <TableCell>{ad.sortOrder}</TableCell>
|
|
|
+ <TableCell>{formatDate(ad.startTime)}</TableCell>
|
|
|
+ <TableCell>{formatDate(ad.endTime)}</TableCell>
|
|
|
+ <TableCell>{formatDate(ad.createdAt)}</TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => handleEdit(ad)}
|
|
|
+ >
|
|
|
+ <Edit className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => handleDelete(ad.id)}
|
|
|
+ className="text-red-600 hover:text-red-700"
|
|
|
+ >
|
|
|
+ <Trash2 className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))
|
|
|
+ )}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </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>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="linkUrl"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 链接地址
|
|
|
+ <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入链接地址" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="imageUrl"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 图片地址
|
|
|
+ <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <AvatarSelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={(value) => field.onChange(value)}
|
|
|
+ maxSize={2}
|
|
|
+ uploadPath="/advertisements"
|
|
|
+ uploadButtonText="上传图片"
|
|
|
+ previewSize="medium"
|
|
|
+ placeholder="选择广告图片"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="positionId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 广告位ID
|
|
|
+ <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入广告位ID"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(Number(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="sortOrder"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>排序值</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="排序值"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(Number(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="isEnabled"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
|
|
+ <div className="space-y-0.5">
|
|
|
+ <FormLabel className="text-base">启用状态</FormLabel>
|
|
|
+ <FormDescription>
|
|
|
+ 是否在前台显示该广告
|
|
|
+ </FormDescription>
|
|
|
+ </div>
|
|
|
+ <FormControl>
|
|
|
+ <Switch
|
|
|
+ checked={field.value === 1}
|
|
|
+ onCheckedChange={(checked) => field.onChange(checked ? 1 : 0)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={(isCreateForm ? createForm : updateForm).control}
|
|
|
+ name="description"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>广告描述</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入广告描述"
|
|
|
+ className="resize-none"
|
|
|
+ {...field}
|
|
|
+ value={field.value || ''}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
|
|
|
+ {isCreateForm ? '创建' : '更新'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Advertisements;
|