92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
|
|
import clsx from 'clsx'
|
|
import { Button } from 'antd'
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import type { ProviderModelItem, ModelListItem, DescriptionItem, BaseRef } from './types'
|
|
import RbCard from '@/components/RbCard/Card'
|
|
import { getModelNewList } from '@/api/models'
|
|
import PageEmpty from '@/components/Empty/PageEmpty';
|
|
import { formatDateTime } from '@/utils/format';
|
|
|
|
const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem) => void; }>(({ query, handleEdit }, ref) => {
|
|
const { t } = useTranslation();
|
|
const [list, setList] = useState<ModelListItem[]>([])
|
|
useEffect(() => {
|
|
getList()
|
|
}, [query])
|
|
const getList = () => {
|
|
getModelNewList({
|
|
...query,
|
|
is_composite: true,
|
|
is_active: true,
|
|
})
|
|
.then(res => {
|
|
const response = res as ProviderModelItem[]
|
|
setList(response[0]?.models || [])
|
|
})
|
|
}
|
|
const formatData = (data: ModelListItem) => {
|
|
return [
|
|
{
|
|
key: 'type',
|
|
label: t(`modelNew.type`),
|
|
children: data.type ? t(`modelNew.${data.type}`) : '-',
|
|
},
|
|
{
|
|
key: 'is_active',
|
|
label: t(`modelNew.status`),
|
|
children: data.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`),
|
|
},
|
|
{
|
|
key: 'created_at',
|
|
label: t(`modelNew.created_at`),
|
|
children: data.created_at ? formatDateTime(data.created_at, 'YYYY-MM-DD HH:mm:ss') : '-',
|
|
},
|
|
]
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
getList,
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
{list.length === 0
|
|
? <PageEmpty />
|
|
:(
|
|
<div className="rb:grid rb:grid-cols-4 rb:gap-4">
|
|
{list.map(item => (
|
|
<RbCard
|
|
key={item.id}
|
|
title={item.name}
|
|
avatarUrl={item.logo}
|
|
avatar={
|
|
<div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
|
|
{item.name[0]}
|
|
</div>
|
|
}
|
|
>
|
|
{formatData(item)?.map((description: DescriptionItem) => (
|
|
<div
|
|
key={description.key}
|
|
className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
|
|
>
|
|
<span className="rb:whitespace-nowrap">{(description.label as string)}</span>
|
|
<span className={clsx({
|
|
"rb:text-[#212332]": description.key !== 'is_active',
|
|
"rb:text-[#369F21] rb:font-medium": description.key === 'is_active' && item.is_active,
|
|
})}>{(description.children as string)}</span>
|
|
</div>
|
|
))}
|
|
<Button className="rb:mt-2" type="primary" ghost block onClick={() => handleEdit(item)}>{t('modelNew.configureBtn')}</Button>
|
|
</RbCard>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default Group |