|
|
|
@@ -18,6 +18,7 @@ For commercial licensing, please contact support@quantumnous.com |
|
|
|
*/ |
|
|
|
|
|
|
|
import React from 'react'; |
|
|
|
import { useNavigate } from 'react-router-dom'; |
|
|
|
import { |
|
|
|
Card, |
|
|
|
Tag, |
|
|
|
@@ -36,8 +37,6 @@ import { |
|
|
|
} from '@douyinfe/semi-illustrations'; |
|
|
|
import { |
|
|
|
stringToColor, |
|
|
|
calculateModelPrice, |
|
|
|
formatPriceInfo, |
|
|
|
getLobeHubIcon, |
|
|
|
} from '../../../../../helpers'; |
|
|
|
import PricingCardSkeleton from './PricingCardSkeleton'; |
|
|
|
@@ -61,14 +60,9 @@ const PricingCardView = ({ |
|
|
|
setPageSize, |
|
|
|
currentPage, |
|
|
|
setCurrentPage, |
|
|
|
selectedGroup, |
|
|
|
groupRatio, |
|
|
|
copyText, |
|
|
|
setModalImageUrl, |
|
|
|
setIsModalOpenurl, |
|
|
|
currency, |
|
|
|
tokenUnit, |
|
|
|
displayPrice, |
|
|
|
showRatio, |
|
|
|
t, |
|
|
|
selectedRowKeys = [], |
|
|
|
@@ -76,6 +70,7 @@ const PricingCardView = ({ |
|
|
|
openModelDetail, |
|
|
|
gridColsClass = 'grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3', |
|
|
|
showPagination = true, |
|
|
|
showTryButton = false, |
|
|
|
}) => { |
|
|
|
const showSkeleton = useMinimumLoadingTime(loading); |
|
|
|
const startIndex = (currentPage - 1) * pageSize; |
|
|
|
@@ -84,6 +79,7 @@ const PricingCardView = ({ |
|
|
|
: filteredModels; |
|
|
|
const getModelKey = (model) => model.key ?? model.model_name ?? model.id; |
|
|
|
const isMobile = useIsMobile(); |
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
const handleCheckboxChange = (model, checked) => { |
|
|
|
if (!setSelectedRowKeys) return; |
|
|
|
@@ -240,15 +236,6 @@ const PricingCardView = ({ |
|
|
|
const modelKey = getModelKey(model); |
|
|
|
const isSelected = selectedRowKeys.includes(modelKey); |
|
|
|
|
|
|
|
const priceData = calculateModelPrice({ |
|
|
|
record: model, |
|
|
|
selectedGroup, |
|
|
|
groupRatio, |
|
|
|
tokenUnit, |
|
|
|
displayPrice, |
|
|
|
currency, |
|
|
|
}); |
|
|
|
|
|
|
|
return ( |
|
|
|
<Card |
|
|
|
key={modelKey || index} |
|
|
|
@@ -265,9 +252,6 @@ const PricingCardView = ({ |
|
|
|
<h3 className='text-lg font-bold text-gray-900 break-all'> |
|
|
|
{model.model_name} |
|
|
|
</h3> |
|
|
|
<div className='text-xs mt-1'> |
|
|
|
{formatPriceInfo(priceData, t)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@@ -324,6 +308,22 @@ const PricingCardView = ({ |
|
|
|
</Tag> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* 去体验按钮 */} |
|
|
|
{showTryButton && ( |
|
|
|
<Button |
|
|
|
size='small' |
|
|
|
theme='solid' |
|
|
|
type='primary' |
|
|
|
style={{ marginTop: 8, width: '100%' }} |
|
|
|
onClick={(e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
navigate('/console/playground?model=' + encodeURIComponent(model.model_name)); |
|
|
|
}} |
|
|
|
> |
|
|
|
{t('去体验')} → |
|
|
|
</Button> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* 倍率信息(可选) */} |
|
|
|
{showRatio && ( |
|
|
|
<div className='pt-3'> |
|
|
|
|