✨ feat(shared-ui-components): 添加DataTablePagination组件的直接路径导出

- 在package.json的exports中添加DataTablePagination组件的直接路径导出
- 支持通过 `@d8d/shared-ui-components/components/admin/DataTablePagination` 路径导入
- 保持与现有导出模式一致
- 所有测试通过，验证配置正确

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

packages/merchant-management-ui/src/components/MerchantSelector.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@d8d/shared-ui-components/components/ui/select';
+import { merchantClient } from '../api/merchantClient';
+
+interface MerchantSelectorProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  testId?: string;
+}
+
+export const MerchantSelector: React.FC<MerchantSelectorProps> = ({
+  value,
+  onChange,
+  placeholder = "选择商户",
+  disabled,
+  testId
+}) => {
+  const { data: merchants, isLoading } = useQuery({
+    queryKey: ['merchants'],
+    queryFn: async () => {
+      const res = await merchantClient.$get({
+        query: {
+          page: 1,
+          pageSize: 100
+        }
+      });
+
+      if (res.status !== 200) throw new Error('获取商户列表失败');
+      const result = await res.json();
+      return result.data;
+    }
+  });
+
+  return (
+    <Select
+      value={value?.toString() || ''}
+      onValueChange={(val) => onChange?.(parseInt(val))}
+      disabled={disabled || isLoading}
+    >
+      <SelectTrigger data-testid={testId}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {isLoading ? (
+          <SelectItem value="loading" disabled>加载中...</SelectItem>
+        ) : merchants && merchants.length > 0 ? (
+          merchants.map((merchant) => (
+            <SelectItem key={merchant.id} value={merchant.id.toString()}>
+              {merchant.name}
+            </SelectItem>
+          ))
+        ) : (
+          <SelectItem value="no-merchants" disabled>暂无商户</SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+};

packages/merchant-management-ui/tests/integration/merchant-selector.integration.test.tsx

@@ -0,0 +1,189 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MerchantSelector } from '../../src/components/MerchantSelector';
+import { merchantClient } from '../../src/api/merchantClient';
+
+// 完整的mock响应对象
+const createMockResponse = (status: number, data?: any) => ({
+  status,
+  ok: status >= 200 && status < 300,
+  body: null,
+  bodyUsed: false,
+  statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error',
+  headers: new Headers(),
+  url: '',
+  redirected: false,
+  type: 'basic' as ResponseType,
+  json: async () => data || {},
+  text: async () => '',
+  blob: async () => new Blob(),
+  arrayBuffer: async () => new ArrayBuffer(0),
+  formData: async () => new FormData(),
+  clone: function() { return this; }
+});
+
+// Mock API client
+vi.mock('../../src/api/merchantClient', () => {
+  const mockMerchantClient = {
+    $get: vi.fn(() => Promise.resolve({
+      status: 200,
+      body: null,
+      json: async () => ({ data: [], pagination: { total: 0, page: 1, pageSize: 100 } })
+    })),
+  };
+
+  const mockMerchantClientManager = {
+    get: vi.fn(() => mockMerchantClient),
+  };
+
+  return {
+    merchantClientManager: mockMerchantClientManager,
+    merchantClient: mockMerchantClient,
+  };
+});
+
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const queryClient = createTestQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {component}
+    </QueryClientProvider>
+  );
+};
+
+describe('MerchantSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('应该渲染商户选择器', () => {
+    renderWithProviders(<MerchantSelector testId="merchant-selector" />);
+    const selectTrigger = screen.getByTestId('merchant-selector');
+    expect(selectTrigger).toBeInTheDocument();
+  });
+
+  it('应该显示自定义占位符', () => {
+    renderWithProviders(
+      <MerchantSelector
+        placeholder="请选择商户"
+        testId="merchant-selector"
+      />
+    );
+    const selectTrigger = screen.getByTestId('merchant-selector');
+    expect(selectTrigger).toHaveTextContent('请选择商户');
+  });
+
+  it('应该调用API获取商户列表', async () => {
+    const mockMerchants = [
+      { id: 1, name: '商户A' },
+      { id: 2, name: '商户B' }
+    ];
+
+    (merchantClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockMerchants,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    renderWithProviders(<MerchantSelector testId="merchant-selector" />);
+
+    await waitFor(() => {
+      expect(merchantClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+  });
+
+  it('应该显示商户列表', async () => {
+    const mockMerchants = [
+      { id: 1, name: '商户A' },
+      { id: 2, name: '商户B' }
+    ];
+
+    (merchantClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockMerchants,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    renderWithProviders(<MerchantSelector testId="merchant-selector" />);
+
+    await waitFor(() => {
+      expect(merchantClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+
+    // 验证API调用，不测试下拉菜单的UI交互
+    expect(merchantClient.$get).toHaveBeenCalledTimes(1);
+  });
+
+  it('应该处理API错误', async () => {
+    (merchantClient.$get as any).mockRejectedValueOnce(new Error('API错误'));
+
+    renderWithProviders(<MerchantSelector testId="merchant-selector" />);
+
+    // 验证组件渲染
+    const selectTrigger = screen.getByTestId('merchant-selector');
+    expect(selectTrigger).toBeInTheDocument();
+
+    // 等待API调用完成
+    await waitFor(() => {
+      expect(merchantClient.$get).toHaveBeenCalled();
+    });
+  });
+
+  it('应该支持禁用状态', () => {
+    renderWithProviders(
+      <MerchantSelector
+        disabled={true}
+        testId="merchant-selector"
+      />
+    );
+    const selectTrigger = screen.getByTestId('merchant-selector');
+    expect(selectTrigger).toBeDisabled();
+  });
+
+  it('应该支持值选择', async () => {
+    const mockMerchants = [
+      { id: 1, name: '商户A' },
+      { id: 2, name: '商户B' }
+    ];
+
+    (merchantClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockMerchants,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    const mockOnChange = vi.fn();
+    renderWithProviders(
+      <MerchantSelector
+        onChange={mockOnChange}
+        testId="merchant-selector"
+      />
+    );
+
+    await waitFor(() => {
+      expect(merchantClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+
+    // 验证API调用，不测试下拉菜单的UI交互
+    expect(merchantClient.$get).toHaveBeenCalledTimes(1);
+  });
+});

packages/supplier-management-ui/src/components/SupplierSelector.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@d8d/shared-ui-components/components/ui/select';
+import { supplierClient } from '../api/supplierClient';
+
+interface SupplierSelectorProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  testId?: string;
+}
+
+export const SupplierSelector: React.FC<SupplierSelectorProps> = ({
+  value,
+  onChange,
+  placeholder = "选择供应商",
+  disabled,
+  testId
+}) => {
+  const { data: suppliers, isLoading } = useQuery({
+    queryKey: ['suppliers'],
+    queryFn: async () => {
+      const res = await supplierClient.$get({
+        query: {
+          page: 1,
+          pageSize: 100
+        }
+      });
+
+      if (res.status !== 200) throw new Error('获取供应商列表失败');
+      const result = await res.json();
+      return result.data;
+    }
+  });
+
+  return (
+    <Select
+      value={value?.toString() || ''}
+      onValueChange={(val) => onChange?.(parseInt(val))}
+      disabled={disabled || isLoading}
+    >
+      <SelectTrigger data-testid={testId}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {isLoading ? (
+          <SelectItem value="loading" disabled>加载中...</SelectItem>
+        ) : suppliers && suppliers.length > 0 ? (
+          suppliers.map((supplier) => (
+            <SelectItem key={supplier.id} value={supplier.id.toString()}>
+              {supplier.name}
+            </SelectItem>
+          ))
+        ) : (
+          <SelectItem value="no-suppliers" disabled>暂无供应商</SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+};

packages/supplier-management-ui/tests/integration/supplier-selector.integration.test.tsx

@@ -0,0 +1,189 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SupplierSelector } from '../../src/components/SupplierSelector';
+import { supplierClient } from '../../src/api/supplierClient';
+
+// 完整的mock响应对象
+const createMockResponse = (status: number, data?: any) => ({
+  status,
+  ok: status >= 200 && status < 300,
+  body: null,
+  bodyUsed: false,
+  statusText: status === 200 ? 'OK' : status === 201 ? 'Created' : status === 204 ? 'No Content' : 'Error',
+  headers: new Headers(),
+  url: '',
+  redirected: false,
+  type: 'basic' as ResponseType,
+  json: async () => data || {},
+  text: async () => '',
+  blob: async () => new Blob(),
+  arrayBuffer: async () => new ArrayBuffer(0),
+  formData: async () => new FormData(),
+  clone: function() { return this; }
+});
+
+// Mock API client
+vi.mock('../../src/api/supplierClient', () => {
+  const mockSupplierClient = {
+    $get: vi.fn(() => Promise.resolve({
+      status: 200,
+      body: null,
+      json: async () => ({ data: [], pagination: { total: 0, page: 1, pageSize: 100 } })
+    })),
+  };
+
+  const mockSupplierClientManager = {
+    get: vi.fn(() => mockSupplierClient),
+  };
+
+  return {
+    supplierClientManager: mockSupplierClientManager,
+    supplierClient: mockSupplierClient,
+  };
+});
+
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const renderWithProviders = (component: React.ReactElement) => {
+  const queryClient = createTestQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {component}
+    </QueryClientProvider>
+  );
+};
+
+describe('SupplierSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('应该渲染供应商选择器', () => {
+    renderWithProviders(<SupplierSelector testId="supplier-selector" />);
+    const selectTrigger = screen.getByTestId('supplier-selector');
+    expect(selectTrigger).toBeInTheDocument();
+  });
+
+  it('应该显示自定义占位符', () => {
+    renderWithProviders(
+      <SupplierSelector
+        placeholder="请选择供应商"
+        testId="supplier-selector"
+      />
+    );
+    const selectTrigger = screen.getByTestId('supplier-selector');
+    expect(selectTrigger).toHaveTextContent('请选择供应商');
+  });
+
+  it('应该调用API获取供应商列表', async () => {
+    const mockSuppliers = [
+      { id: 1, name: '供应商A' },
+      { id: 2, name: '供应商B' }
+    ];
+
+    (supplierClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockSuppliers,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    renderWithProviders(<SupplierSelector testId="supplier-selector" />);
+
+    await waitFor(() => {
+      expect(supplierClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+  });
+
+  it('应该显示供应商列表', async () => {
+    const mockSuppliers = [
+      { id: 1, name: '供应商A' },
+      { id: 2, name: '供应商B' }
+    ];
+
+    (supplierClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockSuppliers,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    renderWithProviders(<SupplierSelector testId="supplier-selector" />);
+
+    await waitFor(() => {
+      expect(supplierClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+
+    // 验证API调用，不测试下拉菜单的UI交互
+    expect(supplierClient.$get).toHaveBeenCalledTimes(1);
+  });
+
+  it('应该处理API错误', async () => {
+    (supplierClient.$get as any).mockRejectedValueOnce(new Error('API错误'));
+
+    renderWithProviders(<SupplierSelector testId="supplier-selector" />);
+
+    // 验证组件渲染
+    const selectTrigger = screen.getByTestId('supplier-selector');
+    expect(selectTrigger).toBeInTheDocument();
+
+    // 等待API调用完成
+    await waitFor(() => {
+      expect(supplierClient.$get).toHaveBeenCalled();
+    });
+  });
+
+  it('应该支持禁用状态', () => {
+    renderWithProviders(
+      <SupplierSelector
+        disabled={true}
+        testId="supplier-selector"
+      />
+    );
+    const selectTrigger = screen.getByTestId('supplier-selector');
+    expect(selectTrigger).toBeDisabled();
+  });
+
+  it('应该支持值选择', async () => {
+    const mockSuppliers = [
+      { id: 1, name: '供应商A' },
+      { id: 2, name: '供应商B' }
+    ];
+
+    (supplierClient.$get as any).mockResolvedValueOnce(
+      createMockResponse(200, {
+        data: mockSuppliers,
+        pagination: { total: 2, page: 1, pageSize: 100 }
+      })
+    );
+
+    const mockOnChange = vi.fn();
+    renderWithProviders(
+      <SupplierSelector
+        onChange={mockOnChange}
+        testId="supplier-selector"
+      />
+    );
+
+    await waitFor(() => {
+      expect(supplierClient.$get).toHaveBeenCalledWith({
+        query: { page: 1, pageSize: 100 }
+      });
+    });
+
+    // 验证API调用，不测试下拉菜单的UI交互
+    expect(supplierClient.$get).toHaveBeenCalledTimes(1);
+  });
+});