mini-starter/allin-packages/platform-management-ui/src/components/PlatformSelector.tsx

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 { platformClientManager } from '../api/platformClient';

interface PlatformSelectorProps {
  value?: number;
  onChange?: (value: number) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  'data-testid'?: string;
}

export const PlatformSelector: React.FC<PlatformSelectorProps> = ({
  value,
  onChange,
  placeholder = "请选择平台",
  disabled = false,
  className,
  'data-testid': testId,
}) => {
  const {
    data: platforms,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ['platforms'],
    queryFn: async () => {
      const client = platformClientManager.get()
      const res = await client.getAllPlatforms.$get({
        query: {
          skip: 0,
          take: 100
        }
      });
      if (res.status !== 200) throw new Error('获取平台列表失败');
      return await res.json();
    },
  });

  if (isError) {
    return (
      <div className="text-sm text-destructive">
        加载平台列表失败
      </div>
    );
  }

  const platformList = platforms?.data || [];

  return (
    <Select
      value={value?.toString()}
      onValueChange={(val) => onChange?.(parseInt(val))}
      disabled={disabled || isLoading || platformList.length === 0}
    >
      <SelectTrigger className={className} data-testid={testId}>
        <SelectValue placeholder={isLoading ? '加载中...' : placeholder} />
      </SelectTrigger>
      <SelectContent>
        {platformList.map((platform) => (
          <SelectItem key={platform.id} value={platform.id.toString()}>
            {platform.platformName}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

export default PlatformSelector;