|
|
@@ -0,0 +1,454 @@
|
|
|
+import { useState } from 'react';
|
|
|
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
+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 {
|
|
|
+ Dialog,
|
|
|
+ DialogContent,
|
|
|
+ DialogDescription,
|
|
|
+ DialogHeader,
|
|
|
+ DialogTitle,
|
|
|
+ DialogTrigger,
|
|
|
+} from '@/client/components/ui/dialog';
|
|
|
+import {
|
|
|
+ Form,
|
|
|
+ FormControl,
|
|
|
+ FormDescription,
|
|
|
+ FormField,
|
|
|
+ FormItem,
|
|
|
+ FormLabel,
|
|
|
+ FormMessage,
|
|
|
+} from '@/client/components/ui/form';
|
|
|
+import { Input } from '@/client/components/ui/input';
|
|
|
+import { Textarea } from '@/client/components/ui/textarea';
|
|
|
+import { Switch } from '@/client/components/ui/switch';
|
|
|
+import {
|
|
|
+ Select,
|
|
|
+ SelectContent,
|
|
|
+ SelectItem,
|
|
|
+ SelectTrigger,
|
|
|
+ SelectValue,
|
|
|
+} from '@/client/components/ui/select';
|
|
|
+import { z } from 'zod';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { Plus, Edit, Trash2 } from 'lucide-react';
|
|
|
+import { client } from '@/client/api';
|
|
|
+import type { InferResponseType, InferRequestType } from 'hono/client';
|
|
|
+import { toast } from 'sonner';
|
|
|
+
|
|
|
+type MembershipPlan = InferResponseType<typeof client.api.v1['membership-plans'].$get, 200>['data'][0];
|
|
|
+type CreateMembershipPlanRequest = InferRequestType<typeof client.api.v1['membership-plans'].$post>['json'];
|
|
|
+type UpdateMembershipPlanRequest = InferRequestType<typeof client.api.v1['membership-plans'][number]['$put']>['json'];
|
|
|
+
|
|
|
+const formSchema = z.object({
|
|
|
+ name: z.string().min(1, '套餐名称不能为空'),
|
|
|
+ type: z.enum(['single', 'monthly', 'yearly', 'lifetime']),
|
|
|
+ price: z.number().min(0, '价格必须大于等于0'),
|
|
|
+ durationDays: z.number().min(0, '有效期必须大于等于0'),
|
|
|
+ description: z.string().optional(),
|
|
|
+ features: z.string().optional(),
|
|
|
+ isActive: z.boolean(),
|
|
|
+ sortOrder: z.number().min(0),
|
|
|
+});
|
|
|
+
|
|
|
+export default function MembershipPlans() {
|
|
|
+ const queryClient = useQueryClient();
|
|
|
+ const [open, setOpen] = useState(false);
|
|
|
+ const [editingPlan, setEditingPlan] = useState<MembershipPlan | null>(null);
|
|
|
+
|
|
|
+ const { data: plans, isLoading } = useQuery({
|
|
|
+ queryKey: ['membership-plans'],
|
|
|
+ queryFn: async () => {
|
|
|
+ const response = await client.api.v1['membership-plans'].$get();
|
|
|
+ if (!response.ok) throw new Error('获取套餐失败');
|
|
|
+ const data = await response.json();
|
|
|
+ return data.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: CreateMembershipPlanRequest) => {
|
|
|
+ const response = await client.api.v1['membership-plans'].$post({ json: data });
|
|
|
+ if (!response.ok) throw new Error('创建套餐失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['membership-plans'] });
|
|
|
+ toast.success('套餐创建成功');
|
|
|
+ setOpen(false);
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error.message);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async ({ id, data }: { id: number; data: UpdateMembershipPlanRequest }) => {
|
|
|
+ const response = await client.api.v1['membership-plans'][id].$put({ json: data });
|
|
|
+ if (!response.ok) throw new Error('更新套餐失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['membership-plans'] });
|
|
|
+ toast.success('套餐更新成功');
|
|
|
+ setOpen(false);
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error.message);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const deleteMutation = useMutation({
|
|
|
+ mutationFn: async (id: number) => {
|
|
|
+ const response = await client.api.v1['membership-plans'][id].$delete();
|
|
|
+ if (!response.ok) throw new Error('删除套餐失败');
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['membership-plans'] });
|
|
|
+ toast.success('套餐删除成功');
|
|
|
+ },
|
|
|
+ onError: (error) => {
|
|
|
+ toast.error(error.message);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const form = useForm<z.infer<typeof formSchema>>({
|
|
|
+ resolver: zodResolver(formSchema),
|
|
|
+ defaultValues: {
|
|
|
+ name: '',
|
|
|
+ type: 'single',
|
|
|
+ price: 0,
|
|
|
+ durationDays: 0,
|
|
|
+ description: '',
|
|
|
+ features: '',
|
|
|
+ isActive: true,
|
|
|
+ sortOrder: 0,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const handleCreate = () => {
|
|
|
+ setEditingPlan(null);
|
|
|
+ form.reset({
|
|
|
+ name: '',
|
|
|
+ type: 'single',
|
|
|
+ price: 27,
|
|
|
+ durationDays: 1,
|
|
|
+ description: '',
|
|
|
+ features: '',
|
|
|
+ isActive: true,
|
|
|
+ sortOrder: 0,
|
|
|
+ });
|
|
|
+ setOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleEdit = (plan: MembershipPlan) => {
|
|
|
+ setEditingPlan(plan);
|
|
|
+ form.reset({
|
|
|
+ name: plan.name,
|
|
|
+ type: plan.type,
|
|
|
+ price: plan.price,
|
|
|
+ durationDays: plan.durationDays,
|
|
|
+ description: plan.description || '',
|
|
|
+ features: plan.features?.join(', ') || '',
|
|
|
+ isActive: plan.isActive === 1,
|
|
|
+ sortOrder: plan.sortOrder,
|
|
|
+ });
|
|
|
+ setOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSubmit = (values: z.infer<typeof formSchema>) => {
|
|
|
+ const data = {
|
|
|
+ ...values,
|
|
|
+ features: values.features?.split(',').map(f => f.trim()).filter(f => f) || [],
|
|
|
+ isActive: values.isActive ? 1 : 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (editingPlan) {
|
|
|
+ updateMutation.mutate({ id: editingPlan.id, data });
|
|
|
+ } else {
|
|
|
+ createMutation.mutate(data);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const getTypeLabel = (type: string) => {
|
|
|
+ const labels = {
|
|
|
+ single: '单次',
|
|
|
+ monthly: '单月',
|
|
|
+ yearly: '年',
|
|
|
+ lifetime: '永久',
|
|
|
+ };
|
|
|
+ return labels[type as keyof typeof labels] || type;
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="container mx-auto py-10">
|
|
|
+ <div className="flex justify-between items-center mb-6">
|
|
|
+ <h1 className="text-3xl font-bold">会员套餐管理</h1>
|
|
|
+ <Dialog open={open} onOpenChange={setOpen}>
|
|
|
+ <DialogTrigger asChild>
|
|
|
+ <Button onClick={handleCreate}>
|
|
|
+ <Plus className="w-4 h-4 mr-2" />
|
|
|
+ 创建套餐
|
|
|
+ </Button>
|
|
|
+ </DialogTrigger>
|
|
|
+ <DialogContent className="max-w-2xl">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>{editingPlan ? '编辑套餐' : '创建套餐'}</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {editingPlan ? '修改套餐信息' : '创建新的会员套餐'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+ <Form {...form}>
|
|
|
+ <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>套餐名称</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入套餐名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="type"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>套餐类型</FormLabel>
|
|
|
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择套餐类型" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="single">单次（24小时）</SelectItem>
|
|
|
+ <SelectItem value="monthly">单月</SelectItem>
|
|
|
+ <SelectItem value="yearly">年</SelectItem>
|
|
|
+ <SelectItem value="lifetime">永久</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="price"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>价格（元）</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ step="0.01"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ {...field}
|
|
|
+ onChange={e => field.onChange(parseFloat(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="durationDays"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>有效期（天）</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入有效期天数，0表示永久"
|
|
|
+ {...field}
|
|
|
+ onChange={e => field.onChange(parseInt(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>0表示永久有效</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="description"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>套餐描述</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入套餐描述"
|
|
|
+ className="resize-none"
|
|
|
+ {...field}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="features"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>套餐功能</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入套餐功能，用逗号分隔"
|
|
|
+ className="resize-none"
|
|
|
+ {...field}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>多个功能用逗号分隔</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="sortOrder"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>排序</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入排序值"
|
|
|
+ {...field}
|
|
|
+ onChange={e => field.onChange(parseInt(e.target.value))}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>数值越小排序越靠前</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="isActive"
|
|
|
+ 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}
|
|
|
+ onCheckedChange={field.onChange}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className="flex justify-end space-x-2">
|
|
|
+ <Button type="button" variant="outline" onClick={() => setOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
|
|
|
+ {editingPlan ? '更新' : '创建'}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>套餐列表</CardTitle>
|
|
|
+ <CardDescription>管理所有会员套餐</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>套餐名称</TableHead>
|
|
|
+ <TableHead>类型</TableHead>
|
|
|
+ <TableHead>价格</TableHead>
|
|
|
+ <TableHead>有效期</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>排序</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead>操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {isLoading ? (
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={8} className="text-center">加载中...</TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : (
|
|
|
+ plans?.map((plan) => (
|
|
|
+ <TableRow key={plan.id}>
|
|
|
+ <TableCell>{plan.name}</TableCell>
|
|
|
+ <TableCell>{getTypeLabel(plan.type)}</TableCell>
|
|
|
+ <TableCell>¥{plan.price}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {plan.durationDays === 0 ? '永久' : `${plan.durationDays}天`}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <span className={plan.isActive ? 'text-green-600' : 'text-red-600'}>
|
|
|
+ {plan.isActive ? '启用' : '禁用'}
|
|
|
+ </span>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{plan.sortOrder}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {new Date(plan.createdAt).toLocaleDateString()}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div className="flex space-x-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => handleEdit(plan)}
|
|
|
+ >
|
|
|
+ <Edit className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => {
|
|
|
+ if (window.confirm('确定要删除这个套餐吗？')) {
|
|
|
+ deleteMutation.mutate(plan.id);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Trash2 className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))
|
|
|
+ )}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
yourname