|
|
@@ -0,0 +1,584 @@
|
|
|
+import { useState } from 'react'
|
|
|
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
|
+import { Plus, Search, Edit, Trash2 } from 'lucide-react'
|
|
|
+import { format } from 'date-fns'
|
|
|
+import { useForm } from 'react-hook-form'
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod'
|
|
|
+import { toast } from 'sonner'
|
|
|
+
|
|
|
+import { Button } from '@d8d/shared-ui-components/components/ui/button'
|
|
|
+import { Input } from '@d8d/shared-ui-components/components/ui/input'
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card'
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table'
|
|
|
+import { Badge } from '@d8d/shared-ui-components/components/ui/badge'
|
|
|
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@d8d/shared-ui-components/components/ui/dialog'
|
|
|
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form'
|
|
|
+import { Switch } from '@d8d/shared-ui-components/components/ui/switch'
|
|
|
+import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea'
|
|
|
+import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton'
|
|
|
+
|
|
|
+import { advertisementTypeClient } from '../api/advertisementTypeClient'
|
|
|
+import type { AdvertisementType, AdvertisementTypeFormData, AdvertisementTypeQueryParams } from '../types/advertisementType'
|
|
|
+import { CreateAdvertisementTypeDto, UpdateAdvertisementTypeDto } from '@d8d/advertisements-module/schemas'
|
|
|
+
|
|
|
+// 表单Schema直接使用后端定义
|
|
|
+const createFormSchema = CreateAdvertisementTypeDto
|
|
|
+const updateFormSchema = UpdateAdvertisementTypeDto
|
|
|
+
|
|
|
+export const AdvertisementTypeManagement = () => {
|
|
|
+ const queryClient = useQueryClient()
|
|
|
+
|
|
|
+ // 状态管理
|
|
|
+ const [searchParams, setSearchParams] = useState<AdvertisementTypeQueryParams>({ page: 1, limit: 10, search: '' })
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false)
|
|
|
+ const [editingType, setEditingType] = useState<AdvertisementType | null>(null)
|
|
|
+ const [isCreateForm, setIsCreateForm] = useState(true)
|
|
|
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
|
|
+ const [typeToDelete, setTypeToDelete] = useState<number | null>(null)
|
|
|
+
|
|
|
+ // 表单实例
|
|
|
+ const createForm = useForm<AdvertisementTypeFormData>({
|
|
|
+ resolver: zodResolver(createFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ name: '',
|
|
|
+ code: '',
|
|
|
+ remark: '',
|
|
|
+ status: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const updateForm = useForm<AdvertisementTypeFormData>({
|
|
|
+ resolver: zodResolver(updateFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ name: '',
|
|
|
+ code: '',
|
|
|
+ remark: '',
|
|
|
+ status: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 数据查询
|
|
|
+ const { data, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['advertisement-types', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await advertisementTypeClient.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.search
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (res.status !== 200) throw new Error('获取广告类型列表失败')
|
|
|
+ return await res.json()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建mutation
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: AdvertisementTypeFormData) => {
|
|
|
+ const res = await advertisementTypeClient.$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.message || '创建失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 更新mutation
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async ({ id, data }: { id: number; data: AdvertisementTypeFormData }) => {
|
|
|
+ const res = await advertisementTypeClient[':id']['$put']({
|
|
|
+ param: { id: id.toString() },
|
|
|
+ json: data
|
|
|
+ })
|
|
|
+ if (res.status !== 200) throw new Error('更新失败')
|
|
|
+ return await res.json()
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('广告类型更新成功')
|
|
|
+ setIsModalOpen(false)
|
|
|
+ setEditingType(null)
|
|
|
+ refetch()
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error.message || '更新失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 删除mutation
|
|
|
+ const deleteMutation = useMutation({
|
|
|
+ mutationFn: async (id: number) => {
|
|
|
+ const res = await advertisementTypeClient[':id']['$delete']({
|
|
|
+ param: { id: id.toString() }
|
|
|
+ })
|
|
|
+ if (res.status !== 204) throw new Error('删除失败')
|
|
|
+ return await res.json()
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('广告类型删除成功')
|
|
|
+ setDeleteDialogOpen(false)
|
|
|
+ setTypeToDelete(null)
|
|
|
+ refetch()
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error.message || '删除失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 业务逻辑函数
|
|
|
+ const handleSearch = () => {
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }))
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleCreateType = () => {
|
|
|
+ setIsCreateForm(true)
|
|
|
+ setEditingType(null)
|
|
|
+ createForm.reset({
|
|
|
+ name: '',
|
|
|
+ code: '',
|
|
|
+ remark: '',
|
|
|
+ status: 1
|
|
|
+ })
|
|
|
+ setIsModalOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleEditType = (type: AdvertisementType) => {
|
|
|
+ setIsCreateForm(false)
|
|
|
+ setEditingType(type)
|
|
|
+ updateForm.reset({
|
|
|
+ name: type.name,
|
|
|
+ code: type.code,
|
|
|
+ remark: type.remark || '',
|
|
|
+ status: type.status
|
|
|
+ })
|
|
|
+ setIsModalOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleDeleteType = (id: number) => {
|
|
|
+ setTypeToDelete(id)
|
|
|
+ setDeleteDialogOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ const confirmDelete = () => {
|
|
|
+ if (typeToDelete) {
|
|
|
+ deleteMutation.mutate(typeToDelete)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleCreateSubmit = async (data: AdvertisementTypeFormData) => {
|
|
|
+ try {
|
|
|
+ createMutation.mutate(data)
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('创建失败，请重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleUpdateSubmit = async (data: AdvertisementTypeFormData) => {
|
|
|
+ if (!editingType) return
|
|
|
+
|
|
|
+ try {
|
|
|
+ updateMutation.mutate({ id: editingType.id, data })
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('更新失败，请重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 格式化时间
|
|
|
+ const formatDate = (date: string | null) => {
|
|
|
+ if (!date) return '-'
|
|
|
+ return format(new Date(date), 'yyyy-MM-dd HH:mm')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <h1 className="text-2xl font-bold" data-testid="page-title">广告类型管理</h1>
|
|
|
+ <p className="text-muted-foreground" data-testid="page-description">管理广告类型配置，用于广告位分类</p>
|
|
|
+ </div>
|
|
|
+ <Button disabled data-testid="create-type-button">
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建类型
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <Skeleton className="h-6 w-1/4" />
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="space-y-2">
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ <Skeleton className="h-4 w-full" />
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <h1 className="text-2xl font-bold" data-testid="page-title">广告类型管理</h1>
|
|
|
+ <p className="text-muted-foreground" data-testid="page-description">管理广告类型配置，用于广告位分类</p>
|
|
|
+ </div>
|
|
|
+ <Button onClick={handleCreateType} data-testid="create-type-button">
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建类型
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>广告类型列表</CardTitle>
|
|
|
+ <CardDescription>管理所有广告类型配置</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="mb-4">
|
|
|
+ <form onSubmit={(e) => { e.preventDefault(); 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"
|
|
|
+ data-testid="search-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Button type="submit" variant="outline" data-testid="search-button">
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>ID</TableHead>
|
|
|
+ <TableHead>类型名称</TableHead>
|
|
|
+ <TableHead>调用别名</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {data?.data.map((type) => (
|
|
|
+ <TableRow key={type.id} data-testid={`type-row-${type.id}`}>
|
|
|
+ <TableCell className="font-medium">{type.id}</TableCell>
|
|
|
+ <TableCell>{type.name}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <code className="text-xs bg-muted px-2 py-1 rounded">{type.code}</code>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge variant={type.status === 1 ? 'default' : 'secondary'}>
|
|
|
+ {type.status === 1 ? '启用' : '禁用'}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-sm">
|
|
|
+ {formatDate(type.createdAt)}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditType(type)}
|
|
|
+ data-testid={`edit-button-${type.id}`}
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleDeleteType(type.id)}
|
|
|
+ data-testid={`delete-button-${type.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>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 分页组件 - 需要从共享UI组件包中导入或自行实现 */}
|
|
|
+ {data?.pagination && (
|
|
|
+ <div className="mt-4 flex items-center justify-between">
|
|
|
+ <div className="text-sm text-muted-foreground">
|
|
|
+ 共 {data.pagination.total} 条记录
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center space-x-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page - 1 }))}
|
|
|
+ disabled={searchParams.page <= 1}
|
|
|
+ data-testid="prev-page-button"
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </Button>
|
|
|
+ <span className="text-sm" data-testid="current-page-info">
|
|
|
+ 第 {searchParams.page} 页
|
|
|
+ </span>
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page + 1 }))}
|
|
|
+ disabled={searchParams.page >= Math.ceil(data.pagination.total / searchParams.limit)}
|
|
|
+ data-testid="next-page-button"
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 创建/编辑模态框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto" data-testid="type-modal">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle data-testid="modal-title">{isCreateForm ? '创建广告类型' : '编辑广告类型'}</DialogTitle>
|
|
|
+ <DialogDescription data-testid="modal-description">
|
|
|
+ {isCreateForm ? '创建一个新的广告类型配置' : '编辑现有广告类型信息'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {isCreateForm ? (
|
|
|
+ // 创建表单（独立渲染）
|
|
|
+ <Form {...createForm}>
|
|
|
+ <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 类型名称 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入类型名称" {...field} data-testid="create-name-input" />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>例如：首页轮播、侧边广告等</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="code"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 调用别名 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入调用别名" {...field} data-testid="create-code-input" />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>用于程序调用的唯一标识，建议使用英文小写和下划线</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="remark"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>备注</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入备注信息（可选）"
|
|
|
+ className="resize-none"
|
|
|
+ {...field}
|
|
|
+ data-testid="create-remark-textarea"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>对广告类型的详细描述</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="status"
|
|
|
+ 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={field.onChange}
|
|
|
+ data-testid="create-status-switch"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={createMutation.isPending}>
|
|
|
+ {createMutation.isPending ? '创建中...' : '创建'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ ) : (
|
|
|
+ // 编辑表单（独立渲染）
|
|
|
+ <Form {...updateForm}>
|
|
|
+ <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 类型名称 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入类型名称" {...field} data-testid="edit-name-input" />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>例如：首页轮播、侧边广告等</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={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} data-testid="edit-code-input" />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>用于程序调用的唯一标识，建议使用英文小写和下划线</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="remark"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>备注</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入备注信息（可选）"
|
|
|
+ className="resize-none"
|
|
|
+ {...field}
|
|
|
+ data-testid="edit-remark-textarea"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>对广告类型的详细描述</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="status"
|
|
|
+ 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={field.onChange}
|
|
|
+ data-testid="edit-status-switch"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={updateMutation.isPending}>
|
|
|
+ {updateMutation.isPending ? '更新中...' : '更新'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 删除确认对话框 */}
|
|
|
+ <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
|
+ <DialogContent data-testid="delete-dialog">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle data-testid="delete-dialog-title">确认删除</DialogTitle>
|
|
|
+ <DialogDescription data-testid="delete-dialog-description">
|
|
|
+ 确定要删除这个广告类型吗？此操作无法撤销。
|
|
|
+ <br />
|
|
|
+ <span className="text-destructive">
|
|
|
+ 注意：删除后，该类型下的所有广告将失去类型关联。
|
|
|
+ </span>
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+ <DialogFooter>
|
|
|
+ <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} data-testid="delete-cancel-button">
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="destructive"
|
|
|
+ onClick={confirmDelete}
|
|
|
+ disabled={deleteMutation.isPending}
|
|
|
+ data-testid="delete-confirm-button"
|
|
|
+ >
|
|
|
+ {deleteMutation.isPending ? '删除中...' : '删除'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
yourname