d8d-vite-starter/src/client/admin/components/ClientSelect.tsx

import React, { useState } from 'react';
import { Select, Spin, message } from 'antd';
import { useQuery } from '@tanstack/react-query';
import { clientClient } from '@/client/api';
import type { InferResponseType } from 'hono/client';
import { ClientSchema } from '@/server/modules/clients/client.entity';

// 定义客户选择组件的属性类型
interface ClientSelectProps {
  value?: number;
  onChange?: (value?: number) => void;
  placeholder?: string;
  disabled?: boolean;
}

// 提取客户列表响应类型
type ClientListResponse = InferResponseType<typeof clientClient.$get, 200>;

// 客户选择组件实现
const ClientSelect: React.FC<ClientSelectProps> = ({
  value,
  onChange,
  placeholder = '请选择客户',
  disabled = false
}): React.ReactElement => {
  const [searchValue, setSearchValue] = useState('');

  // 使用useQuery获取客户列表数据
  const { data: clientsData, isLoading, error } = useQuery<ClientListResponse>({
    queryKey: ['clients', 'all'],
    queryFn: async () => {
      const res = await clientClient.$get({
        query: { 
          page: 1, 
          pageSize: 1000,
          keyword: searchValue 
        }
      });
      
      if (!res.ok) {
        throw new Error('获取客户列表失败');
      }
      
      return res.json();
    },
  });

  // 处理搜索输入变化
  const handleSearch = (value: string) => {
    setSearchValue(value);
  };

  // 格式化客户选项数据
  const options = clientsData?.data?.map(client => ({
    label: client.companyName,
    value: client.id,
  })) || [];

  return (
    <div style={{ position: 'relative' }}>
      <Select
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled || isLoading}
        showSearch
        filterOption={false}
        onSearch={handleSearch}
        style={{ width: '100%' }}
        options={options}
        notFoundContent={isLoading ? <Spin size="small" /> : '未找到匹配客户'}
      />
      {isLoading && (
        <div style={{ 
          position: 'absolute', 
          top: '50%', 
          right: '16px', 
          transform: 'translateY(-50%)',
          pointerEvents: 'none'
        }}>
          <Spin size="small" />
        </div>
      )}
    </div>
  );
};

export default ClientSelect;