Selaa lähdekoodia

✨ feat(logistics): 添加快递公司管理功能

- 在菜单中添加快递公司选项及图标
- 创建快递公司管理页面,包含列表展示、搜索、分页功能
- 实现快递公司的创建、编辑、删除功能
- 添加表单验证和操作反馈提示
- 配置路由信息,支持页面访问

✨ feat(menu): 添加快递公司菜单选项

- 导入Truck图标用于快递公司菜单
- 在商品管理菜单下添加快递公司子菜单
- 设置菜单路径为/admin/express-companies并配置权限控制

✨ feat(routes): 添加快递公司管理页面路由

- 导入ExpressCompaniesPage组件
- 添加/express-companies路由配置
- 设置错误处理页面为ErrorPage
yourname 4 kuukautta sitten
vanhempi
sitoutus
d5b9dee3d4

+ 8 - 1
src/client/admin-shadcn/menu.tsx

@@ -11,7 +11,8 @@ import {
   File,
   Megaphone,
   Tag,
-  Package
+  Package,
+  Truck
 } from 'lucide-react';
 
 export interface MenuItem {
@@ -135,6 +136,12 @@ export const useMenu = () => {
           label: '商品分类',
           path: '/admin/goods-categories',
           permission: 'goods:manage'
+        },
+        {
+          key: 'express-companies',
+          label: '快递公司',
+          path: '/admin/express-companies',
+          permission: 'goods:manage'
         }
       ]
     },

+ 525 - 0
src/client/admin-shadcn/pages/ExpressCompanies.tsx

@@ -0,0 +1,525 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Plus, Search, Edit, Trash2 } from 'lucide-react'
+import { toast } from 'react-toastify'
+
+import { Button } from '@/client/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card'
+import { Input } from '@/client/components/ui/input'
+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 { DataTablePagination } from '@/client/admin-shadcn/components/DataTablePagination'
+
+import { expressCompanyClient } from '@/client/api'
+import type { InferRequestType, InferResponseType } from 'hono/client'
+import { CreateExpressCompanyDto, UpdateExpressCompanyDto } from '@/server/modules/logistics/express-company.schema'
+
+// 类型定义
+type CreateRequest = InferRequestType<typeof expressCompanyClient.$post>['json']
+type UpdateRequest = InferRequestType<typeof expressCompanyClient[':id']['$put']>['json']
+type ExpressCompanyResponse = InferResponseType<typeof expressCompanyClient.$get, 200>['data'][0]
+
+// 表单Schema直接使用后端定义
+const createFormSchema = CreateExpressCompanyDto
+const updateFormSchema = UpdateExpressCompanyDto
+
+export const ExpressCompaniesPage = () => {
+  const queryClient = useQueryClient()
+  
+  // 状态管理
+  const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '' })
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingCompany, setEditingCompany] = useState<ExpressCompanyResponse | null>(null)
+  const [isCreateForm, setIsCreateForm] = useState(true)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [companyToDelete, setCompanyToDelete] = useState<number | null>(null)
+
+  // 表单实例
+  const createForm = useForm<CreateRequest>({
+    resolver: zodResolver(createFormSchema),
+    defaultValues: {
+      name: '',
+      code: '',
+      state: 1,
+      sort: 100
+    },
+  })
+
+  const updateForm = useForm<UpdateRequest>({
+    resolver: zodResolver(updateFormSchema),
+  })
+
+  // 数据查询
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['express-companies', searchParams],
+    queryFn: async () => {
+      const res = await expressCompanyClient.$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 expressCompanyClient.$post({ json: data })
+      if (res.status !== 201) throw new Error('创建快递公司失败')
+      return await res.json()
+    },
+    onSuccess: () => {
+      toast.success('快递公司创建成功')
+      setIsModalOpen(false)
+      queryClient.invalidateQueries({ queryKey: ['express-companies'] })
+      createForm.reset()
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '创建失败,请重试')
+    }
+  })
+
+  // 更新快递公司
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
+      const res = await expressCompanyClient[':id']['$put']({
+        param: { id: id.toString() },
+        json: data
+      })
+      if (res.status !== 200) throw new Error('更新快递公司失败')
+      return await res.json()
+    },
+    onSuccess: () => {
+      toast.success('快递公司更新成功')
+      setIsModalOpen(false)
+      queryClient.invalidateQueries({ queryKey: ['express-companies'] })
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '更新失败,请重试')
+    }
+  })
+
+  // 删除快递公司
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      const res = await expressCompanyClient[':id']['$delete']({
+        param: { id: id.toString() }
+      })
+      if (res.status !== 204) throw new Error('删除快递公司失败')
+      return res
+    },
+    onSuccess: () => {
+      toast.success('快递公司删除成功')
+      setDeleteDialogOpen(false)
+      queryClient.invalidateQueries({ queryKey: ['express-companies'] })
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '删除失败,请重试')
+    }
+  })
+
+  // 业务逻辑函数
+  const handleSearch = () => {
+    setSearchParams(prev => ({ ...prev, page: 1 }))
+  }
+
+  const handleCreateCompany = () => {
+    setIsCreateForm(true)
+    setEditingCompany(null)
+    createForm.reset()
+    setIsModalOpen(true)
+  }
+
+  const handleEditCompany = (company: ExpressCompanyResponse) => {
+    setIsCreateForm(false)
+    setEditingCompany(company)
+    updateForm.reset({
+      name: company.name,
+      code: company.code,
+      state: company.state,
+      sort: company.sort || undefined
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDeleteCompany = (id: number) => {
+    setCompanyToDelete(id)
+    setDeleteDialogOpen(true)
+  }
+
+  const handleCreateSubmit = (data: CreateRequest) => {
+    createMutation.mutate(data)
+  }
+
+  const handleUpdateSubmit = (data: UpdateRequest) => {
+    if (editingCompany) {
+      updateMutation.mutate({ id: editingCompany.id, data })
+    }
+  }
+
+  const confirmDelete = () => {
+    if (companyToDelete) {
+      deleteMutation.mutate(companyToDelete)
+    }
+  }
+
+  // 渲染页面
+  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>
+            <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">
+        <h1 className="text-2xl font-bold">快递公司管理</h1>
+        <Button onClick={handleCreateCompany}>
+          <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"
+                />
+              </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 className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data?.data.map((company) => (
+                  <TableRow key={company.id}>
+                    <TableCell>{company.id}</TableCell>
+                    <TableCell>{company.name}</TableCell>
+                    <TableCell>{company.code}</TableCell>
+                    <TableCell>
+                      <Badge variant={company.state === 1 ? 'default' : 'secondary'}>
+                        {company.state === 1 ? '启用' : '禁用'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{company.sort || '-'}</TableCell>
+                    <TableCell>{new Date(company.createdAt).toLocaleDateString()}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button 
+                          variant="ghost" 
+                          size="icon" 
+                          onClick={() => handleEditCompany(company)}
+                          title="编辑"
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button 
+                          variant="ghost" 
+                          size="icon" 
+                          onClick={() => handleDeleteCompany(company.id)}
+                          title="删除"
+                        >
+                          <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
+            currentPage={searchParams.page}
+            pageSize={searchParams.limit}
+            totalCount={data?.pagination.total || 0}
+            onPageChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
+          />
+        </CardContent>
+      </Card>
+
+      {/* 创建/编辑模态框 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isCreateForm ? '创建快递公司' : '编辑快递公司'}</DialogTitle>
+            <DialogDescription>
+              {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} />
+                      </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} />
+                      </FormControl>
+                      <FormDescription>例如:SF、ZTO等唯一标识</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                
+                <FormField
+                  control={createForm.control}
+                  name="state"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>状态</FormLabel>
+                      <FormControl>
+                        <select 
+                          className="w-full px-3 py-2 border rounded-md"
+                          value={field.value}
+                          onChange={(e) => field.onChange(parseInt(e.target.value))}
+                        >
+                          <option value={1}>启用</option>
+                          <option value={2}>禁用</option>
+                        </select>
+                      </FormControl>
+                      <FormDescription>选择快递公司的使用状态</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                
+                <FormField
+                  control={createForm.control}
+                  name="sort"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>排序</FormLabel>
+                      <FormControl>
+                        <Input 
+                          type="number" 
+                          placeholder="请输入排序值" 
+                          {...field}
+                          onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormDescription>数字越大优先级越高</FormDescription>
+                      <FormMessage />
+                    </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} />
+                      </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} />
+                      </FormControl>
+                      <FormDescription>例如:SF、ZTO等唯一标识</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                
+                <FormField
+                  control={updateForm.control}
+                  name="state"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>状态</FormLabel>
+                      <FormControl>
+                        <select 
+                          className="w-full px-3 py-2 border rounded-md"
+                          value={field.value}
+                          onChange={(e) => field.onChange(parseInt(e.target.value))}
+                        >
+                          <option value={1}>启用</option>
+                          <option value={2}>禁用</option>
+                        </select>
+                      </FormControl>
+                      <FormDescription>选择快递公司的使用状态</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                
+                <FormField
+                  control={updateForm.control}
+                  name="sort"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>排序</FormLabel>
+                      <FormControl>
+                        <Input 
+                          type="number" 
+                          placeholder="请输入排序值" 
+                          {...field}
+                          onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormDescription>数字越大优先级越高</FormDescription>
+                      <FormMessage />
+                    </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>
+          <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}`} />
+)

+ 6 - 0
src/client/admin-shadcn/routes.tsx

@@ -11,6 +11,7 @@ import { FilesPage } from './pages/Files';
 import { AdvertisementsPage } from './pages/Advertisements';
 import { AdvertisementTypesPage } from './pages/AdvertisementTypes';
 import { GoodsCategories } from './pages/GoodsCategories';
+import { ExpressCompaniesPage } from './pages/ExpressCompanies';
 
 export const router = createBrowserRouter([
   {
@@ -63,6 +64,11 @@ export const router = createBrowserRouter([
         element: <GoodsCategories />,
         errorElement: <ErrorPage />
       },
+      {
+        path: 'express-companies',
+        element: <ExpressCompaniesPage />,
+        errorElement: <ErrorPage />
+      },
       {
         path: '*',
         element: <NotFoundPage />,