NapCatQQ/napcat.webui/src/components/quick_login.tsx

import { Avatar } from '@heroui/avatar';
import { Button } from '@heroui/button';
import { Image } from '@heroui/image';
import { Select, SelectItem } from '@heroui/select';
import { IoMdRefresh } from 'react-icons/io';

import { isQQQuickNewItem } from '@/utils/qq';

export interface QQItem {
  uin: string
}

interface QuickLoginProps {
  qqList: (QQItem | LoginListItem)[]
  refresh: boolean
  isLoading: boolean
  selectedQQ: string
  onUpdateQQList: () => void
  handleSelectionChange: React.ChangeEventHandler<HTMLSelectElement>
  onSubmit: () => void
}

const QuickLogin: React.FC<QuickLoginProps> = ({
  qqList,
  refresh,
  isLoading,
  selectedQQ,
  onUpdateQQList,
  handleSelectionChange,
  onSubmit,
}) => {
  return (
    <div className='flex flex-col gap-8'>
      <div className='flex justify-center'>
        <Image
          className='shadow-lg'
          height={100}
          radius='full'
          src={`https://q1.qlogo.cn/g?b=qq&nk=${selectedQQ || '0'}&s=100`}
          width={100}
        />
      </div>
      <div className='flex items-center gap-2'>
        <Select
          classNames={{
            popoverContent: 'bg-opacity-50 backdrop-blur',
          }}
          aria-label='QQ Login'
          isDisabled={refresh}
          items={qqList}
          placeholder='请选择QQ'
          renderValue={(items) => {
            return items.map((item) => (
              <div key={item.key} className='flex items-center gap-2'>
                <Avatar
                  alt={item.key?.toString()}
                  className='flex-shrink-0'
                  size='sm'
                  src={
                    isQQQuickNewItem(item.data)
                      ? item.data?.faceUrl
                      : `https://q1.qlogo.cn/g?b=qq&nk=${item.key}&s=1`
                  }
                />
                <div className='flex flex-col'>
                  {isQQQuickNewItem(item.data)
                    ? `${item.data.nickName}(${item.key?.toString()})`
                    : item.key?.toString()}
                </div>
              </div>
            ));
          }}
          selectedKeys={[selectedQQ]}
          size='lg'
          onChange={handleSelectionChange}
        >
          {(item) => (
            <SelectItem key={item.uin} textValue={item.uin}>
              <div className='flex items-center gap-2'>
                <Avatar
                  alt={item.uin}
                  className='flex-shrink-0'
                  size='sm'
                  src={
                    isQQQuickNewItem(item)
                      ? item.faceUrl
                      : `https://q1.qlogo.cn/g?b=qq&nk=${item.uin}&s=1`
                  }
                />
                <div className='flex flex-col'>
                  {isQQQuickNewItem(item)
                    ? `${item.nickName}(${item.uin})`
                    : item.uin}
                </div>
              </div>
            </SelectItem>
          )}
        </Select>
        <Button
          isIconOnly
          className='flex-grow-0 flex-shrink-0'
          color='secondary'
          isLoading={refresh}
          radius='full'
          size='lg'
          variant='light'
          onPress={onUpdateQQList}
        >
          <IoMdRefresh size={24} />
        </Button>
      </div>
      <div className='flex justify-center mt-5'>
        <Button
          className='w-64 max-w-full'
          color='primary'
          isLoading={isLoading}
          radius='full'
          size='lg'
          variant='shadow'
          onPress={onSubmit}
        >
          登录
        </Button>
      </div>
    </div>
  );
};

export default QuickLogin;