Forráskód Böngészése

♻️ refactor(api): 更新地址管理客户端引用

- 将adminDeliveryAddressRoutes重命名为adminDeliveryAddressRoutesMt以符合命名规范
- 修改DeliveryAddressClientManager类中相关类型定义和初始化方法
- 调整API调用方式,使用deliveryAddressClientManager.get().index替代原deliveryAddressClient

♻️ refactor(component): 优化地址管理组件类型和数据获取

- 移除未使用的useQueryClient导入
- 引入InferResponseType类型,从API响应中推断DeliveryAddress类型
- 修复分页数据访问路径,从data.data.list改为data.data
- 调整分页组件参数,使用pagination.total替代data.total
- 为onPageChange添加明确的类型定义
yourname 1 hónapja
szülő
commit
e7e84ea04f

+ 5 - 5
packages/delivery-address-management-ui-mt/src/api/deliveryAddressClient.ts

@@ -1,9 +1,9 @@
-import { adminDeliveryAddressRoutes } from '@d8d/delivery-address-module-mt';
+import { adminDeliveryAddressRoutesMt } from '@d8d/delivery-address-module-mt';
 import { rpcClient } from '@d8d/shared-ui-components/utils/hc'
 
 class DeliveryAddressClientManager {
   private static instance: DeliveryAddressClientManager;
-  private client: ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutes>> | null = null;
+  private client: ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutesMt>> | null = null;
 
   private constructor() {}
 
@@ -15,12 +15,12 @@ class DeliveryAddressClientManager {
   }
 
   // 初始化客户端
-  public init(baseUrl: string = '/'): ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutes>> {
-    return this.client = rpcClient<typeof adminDeliveryAddressRoutes>(baseUrl);
+  public init(baseUrl: string = '/'): ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutesMt>> {
+    return this.client = rpcClient<typeof adminDeliveryAddressRoutesMt>(baseUrl);
   }
 
   // 获取客户端实例
-  public get(): ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutes>> {
+  public get(): ReturnType<typeof rpcClient<typeof adminDeliveryAddressRoutesMt>> {
     if (!this.client) {
       return this.init()
     }

+ 16 - 15
packages/delivery-address-management-ui-mt/src/components/DeliveryAddressManagement.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 import { toast } from 'sonner';
@@ -7,7 +7,7 @@ import { Plus, Search, Edit, Trash2, MapPin } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import { deliveryAddressClient } from '../api/deliveryAddressClient';
+import { deliveryAddressClient, deliveryAddressClientManager } from '../api/deliveryAddressClient';
 import { CreateDeliveryAddressDto, UpdateDeliveryAddressDto } from '@d8d/delivery-address-module-mt/schemas';
 import { Button } from '@d8d/shared-ui-components/components/ui/button';
 import { Input } from '@d8d/shared-ui-components/components/ui/input';
@@ -21,9 +21,11 @@ import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton';
 import { DataTablePagination } from '@d8d/shared-ui-components/components/admin/DataTablePagination';
 import { UserSelector } from '@d8d/user-management-ui/components';
 import { AreaSelect4Level } from '@d8d/area-management-ui/components';
-import type { DeliveryAddress, DeliveryAddressQueryParams } from '../types/delivery-address';
+import type { DeliveryAddressQueryParams } from '../types/delivery-address';
 import { DeliveryAddressState, DefaultAddressState } from '../types/delivery-address';
 
+import type { InferResponseType } from 'hono/client';
+type DeliveryAddress = InferResponseType<typeof deliveryAddressClient.index.$get, 200>['data'][0];
 // 表单schema
 const createFormSchema = CreateDeliveryAddressDto;
 const updateFormSchema = UpdateDeliveryAddressDto;
@@ -68,7 +70,7 @@ export const DeliveryAddressManagement: React.FC = () => {
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['delivery-addresses', searchParams],
     queryFn: async () => {
-      const res = await deliveryAddressClient.$get({
+      const res = await deliveryAddressClientManager.get().index.$get({
         query: {
           page: searchParams.page,
           pageSize: searchParams.limit,
@@ -84,7 +86,7 @@ export const DeliveryAddressManagement: React.FC = () => {
   // 创建地址
   const createMutation = useMutation({
     mutationFn: async (data: any) => {
-      const res = await deliveryAddressClient.$post({ json: data });
+      const res = await deliveryAddressClientManager.get().index.$post({ json: data });
       if (res.status !== 201) throw new Error('创建失败');
       return await res.json();
     },
@@ -102,7 +104,7 @@ export const DeliveryAddressManagement: React.FC = () => {
   // 更新地址
   const updateMutation = useMutation({
     mutationFn: async ({ id, data }: { id: number; data: any }) => {
-      const res = await deliveryAddressClient[':id']['$put']({
+      const res = await deliveryAddressClientManager.get()[':id']['$put']({
         param: { id },
         json: data,
       });
@@ -122,7 +124,7 @@ export const DeliveryAddressManagement: React.FC = () => {
   // 删除地址
   const deleteMutation = useMutation({
     mutationFn: async (id: number) => {
-      const res = await deliveryAddressClient[':id']['$delete']({
+      const res = await deliveryAddressClientManager.get()[':id']['$delete']({
         param: { id },
       });
       if (res.status !== 204) throw new Error('删除失败');
@@ -249,7 +251,7 @@ export const DeliveryAddressManagement: React.FC = () => {
       <CardHeader>
         <CardTitle>收货地址列表</CardTitle>
         <CardDescription>
-          共 {data?.data?.total || 0} 条收货地址记录
+          共 {data?.pagination.total || 0} 条收货地址记录
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -267,7 +269,7 @@ export const DeliveryAddressManagement: React.FC = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {data?.data?.list?.map((address: DeliveryAddress) => (
+            {data?.data?.map((address) => (
               <TableRow key={address.id} data-testid={`address-row-${address.id}`}>
                 <TableCell data-testid={`address-user-${address.id}`}>
                   <div className="flex items-center gap-2">
@@ -311,14 +313,13 @@ export const DeliveryAddressManagement: React.FC = () => {
             ))}
           </TableBody>
         </Table>
-        {data?.data?.total && data.data.total > 0 && (
+        {data?.pagination?.total && data.pagination.total > 0 && (
           <div className="mt-4">
             <DataTablePagination
-              currentPage={searchParams.page}
-              pageSize={searchParams.limit}
-              totalCount={data.data.total}
-              onPageChange={(page) => setSearchParams(prev => ({ ...prev, page }))}
-              onPageSizeChange={(limit) => setSearchParams(prev => ({ ...prev, limit, page: 1 }))}
+              currentPage={searchParams.page || 1}
+              pageSize={searchParams.limit || 10}
+              totalCount={data.pagination.total}
+              onPageChange={(page: number) => setSearchParams(prev => ({ ...prev, page }))}
             />
           </div>
         )}