844 lines
27 KiB
JavaScript
844 lines
27 KiB
JavaScript
/*
|
||
Copyright (C) 2025 QuantumNous
|
||
|
||
This program is free software: you can redistribute it and/or modify
|
||
it under the terms of the GNU Affero General Public License as
|
||
published by the Free Software Foundation, either version 3 of the
|
||
License, or (at your option) any later version.
|
||
|
||
This program is distributed in the hope that it will be useful,
|
||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
GNU Affero General Public License for more details.
|
||
|
||
You should have received a copy of the GNU Affero General Public License
|
||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
|
||
For commercial licensing, please contact support@quantumnous.com
|
||
*/
|
||
|
||
import React from 'react';
|
||
import {
|
||
Card,
|
||
Empty,
|
||
Pagination,
|
||
Avatar,
|
||
} from '@douyinfe/semi-ui';
|
||
import {
|
||
IllustrationNoResult,
|
||
IllustrationNoResultDark,
|
||
} from '@douyinfe/semi-illustrations';
|
||
import {
|
||
calculateModelPrice,
|
||
getModelPriceItems,
|
||
getLobeHubIcon,
|
||
getUsedGroupContext,
|
||
pickChannelScopedModelFloat,
|
||
computeChannelBillingRates,
|
||
} from '../../../../../helpers';
|
||
import PricingCardSkeleton from './PricingCardSkeleton';
|
||
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
|
||
import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
|
||
const CARD_STYLES = {
|
||
container:
|
||
'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
|
||
icon: 'w-8 h-8 flex items-center justify-center',
|
||
selected: 'border-blue-500 bg-blue-50',
|
||
default: 'border-gray-200 hover:border-gray-300',
|
||
};
|
||
|
||
const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||
|
||
const PricingCardView = ({
|
||
filteredModels,
|
||
loading,
|
||
pageSize,
|
||
setPageSize,
|
||
currentPage,
|
||
setCurrentPage,
|
||
selectedGroup,
|
||
groupRatio,
|
||
groupModelPrice,
|
||
groupModelRatio,
|
||
currency,
|
||
siteDisplayType,
|
||
tokenUnit,
|
||
displayPrice,
|
||
t,
|
||
openModelDetail,
|
||
showSizeChanger = true,
|
||
blurPricing = false,
|
||
searchValue = '',
|
||
channelVideoRatio = {},
|
||
channelVideoCompletionRatio = {},
|
||
channelVideoPrice = {},
|
||
gridCols = 0, // 当 > 0 时使用 grid 布局（如 gridCols=2 表示 2 列）
|
||
}) => {
|
||
const showSkeleton = useMinimumLoadingTime(loading);
|
||
const startIndex = (currentPage - 1) * pageSize;
|
||
const paginatedModels = filteredModels.slice(
|
||
startIndex,
|
||
startIndex + pageSize,
|
||
);
|
||
const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
|
||
const isMobile = useIsMobile();
|
||
const normalizedSearchValue = String(searchValue || '').trim();
|
||
|
||
const renderHighlightedText = (value) => {
|
||
const text = value == null ? '' : String(value);
|
||
if (!normalizedSearchValue) return text;
|
||
const regex = new RegExp(`(${escapeRegExp(normalizedSearchValue)})`, 'ig');
|
||
return text.split(regex).map((part, idx) =>
|
||
part.toLowerCase() === normalizedSearchValue.toLowerCase() ? (
|
||
<span
|
||
key={idx}
|
||
style={{
|
||
color: '#ef4444',
|
||
fontWeight: 700,
|
||
backgroundColor: 'rgba(239, 68, 68, 0.12)',
|
||
borderRadius: 4,
|
||
}}
|
||
>
|
||
{part}
|
||
</span>
|
||
) : (
|
||
part
|
||
),
|
||
);
|
||
};
|
||
|
||
const calculateChannelPrices = (model, opts = {}) => {
|
||
const { skipSimpleVideoFlat = false, skipSimpleFixed = false } = opts;
|
||
if (!model.channel_list || model.channel_list.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
const { usedGroupRatio } = getUsedGroupContext(
|
||
model,
|
||
selectedGroup,
|
||
groupRatio,
|
||
);
|
||
|
||
// 辅助函数：格式化价格
|
||
const formatPrice = (priceUSD) => {
|
||
const rawDisplayPrice = displayPrice(priceUSD);
|
||
const unitDivisor = tokenUnit === 'K' ? 1000 : 1;
|
||
const numericPrice =
|
||
parseFloat(rawDisplayPrice.replace(/[^0-9.]/g, '')) / unitDivisor;
|
||
|
||
let symbol = '$';
|
||
if (currency === 'CNY') {
|
||
symbol = '¥';
|
||
} else if (currency === 'CUSTOM') {
|
||
try {
|
||
const statusStr = localStorage.getItem('status');
|
||
if (statusStr) {
|
||
const s = JSON.parse(statusStr);
|
||
symbol = s?.custom_currency_symbol || '¤';
|
||
}
|
||
} catch (e) {
|
||
symbol = '¤';
|
||
}
|
||
}
|
||
|
||
return { value: parseFloat(numericPrice.toFixed(2)), symbol };
|
||
};
|
||
|
||
const modelHasVideoRatio =
|
||
model.video_ratio != null &&
|
||
model.video_ratio !== undefined &&
|
||
Number.isFinite(Number(model.video_ratio));
|
||
const modelHasVideoCompletion =
|
||
model.video_completion_ratio != null &&
|
||
model.video_completion_ratio !== undefined &&
|
||
Number.isFinite(Number(model.video_completion_ratio));
|
||
const modelHasVideoFlatPrice =
|
||
model.video_price != null &&
|
||
model.video_price !== undefined &&
|
||
Number.isFinite(Number(model.video_price));
|
||
|
||
// 提取所有通道的价格（与 relay 一致：ch.model_ratio 已含渠道折扣；再乘分组倍率）
|
||
const prices = {
|
||
input: [],
|
||
output: [],
|
||
cache: [],
|
||
createCache: [],
|
||
fixed: [],
|
||
videoToken: [],
|
||
videoFlat: [],
|
||
};
|
||
const originalPrices = {
|
||
input: [],
|
||
output: [],
|
||
cache: [],
|
||
createCache: [],
|
||
fixed: [],
|
||
videoToken: [],
|
||
videoFlat: [],
|
||
};
|
||
|
||
model.channel_list.forEach((ch) => {
|
||
const cid = ch.channel_id;
|
||
const mname = model.model_name;
|
||
|
||
// ============================================================
|
||
// 新计费公式参数：
|
||
// ch.model_ratio / ch.model_price 为原始渠道倍率（后端不再预乘成本折扣）
|
||
// 成本折扣率 = price_discount_percent / 100
|
||
// 加价倍率 = markup_discount_rate / 100
|
||
//
|
||
// 输入 = (ch.model_ratio × costDisc + globalMr × markupRate) × 2 × groupRatio
|
||
// 输出 = (ch.model_ratio × cr × costDisc + globalMr × globalCR × markupRate) × 2 × groupRatio
|
||
// 缓存读 = (ch.model_ratio × cacheRatio × costDisc + globalMr × globalCacheR × markupRate) × 2 × groupRatio
|
||
// 缓存写 = (ch.model_ratio × createCacheRatio × costDisc + globalMr × globalCreateCacheR × markupRate) × 2 × groupRatio
|
||
// 固定价 = (ch.model_price × costDisc + globalMp × markupRate) × groupRatio
|
||
// ============================================================
|
||
const priceDiscountPercent =
|
||
ch.price_discount_percent != null ? ch.price_discount_percent : 100;
|
||
const markupDiscountPercent = ch.markup_discount_rate || 0;
|
||
const globalMr = model.model_ratio || 0;
|
||
const globalMp = model.model_price || 0;
|
||
|
||
const channelVideoFlatUsd =
|
||
pickChannelScopedModelFloat(channelVideoPrice, cid, mname);
|
||
const flatUsd =
|
||
channelVideoFlatUsd != null
|
||
? channelVideoFlatUsd
|
||
: modelHasVideoFlatPrice
|
||
? Number(model.video_price)
|
||
: null;
|
||
if (!skipSimpleVideoFlat && flatUsd != null && flatUsd > 0) {
|
||
prices.videoFlat.push(formatPrice(flatUsd * usedGroupRatio));
|
||
originalPrices.videoFlat.push(formatPrice(flatUsd));
|
||
}
|
||
|
||
// 全局子倍率（用于加价侧）
|
||
const globalCR = model.completion_ratio || 0;
|
||
const globalCacheR =
|
||
model.cache_ratio != null ? Number(model.cache_ratio) : 0;
|
||
const globalCreateCacheR =
|
||
model.create_cache_ratio != null
|
||
? Number(model.create_cache_ratio)
|
||
: 0;
|
||
|
||
const billingRates = computeChannelBillingRates({
|
||
channelModelRatio: ch.model_ratio,
|
||
channelCompletionRatio: ch.completion_ratio,
|
||
channelCacheRatio: ch.cache_ratio,
|
||
channelCreateCacheRatio: ch.create_cache_ratio,
|
||
channelModelPrice: ch.model_price,
|
||
priceDiscountPercent,
|
||
markupDiscountPercent,
|
||
globalModelRatio: globalMr,
|
||
globalModelPrice: globalMp,
|
||
globalCompletionRatio: globalCR,
|
||
globalCacheRatio: globalCacheR,
|
||
globalCreateCacheRatio: globalCreateCacheR,
|
||
});
|
||
|
||
// 按量计费
|
||
if (model.quota_type === 0) {
|
||
if (ch.model_ratio !== undefined && ch.model_ratio !== null) {
|
||
prices.input.push(
|
||
formatPrice(billingRates.inputRatioPrice * usedGroupRatio),
|
||
);
|
||
originalPrices.input.push(formatPrice(billingRates.inputRatioPrice));
|
||
|
||
// 输出价格：渠道配置了 completion_ratio 即可展示
|
||
if (
|
||
ch.completion_ratio !== undefined &&
|
||
ch.completion_ratio !== null
|
||
) {
|
||
prices.output.push(
|
||
formatPrice(billingRates.completionRatioPrice * usedGroupRatio),
|
||
);
|
||
originalPrices.output.push(
|
||
formatPrice(billingRates.completionRatioPrice),
|
||
);
|
||
}
|
||
|
||
// 缓存读取价格：渠道配置了 cache_ratio 即可展示
|
||
if (
|
||
ch.cache_ratio !== undefined &&
|
||
ch.cache_ratio !== null
|
||
) {
|
||
prices.cache.push(
|
||
formatPrice(billingRates.cacheRatioPrice * usedGroupRatio),
|
||
);
|
||
originalPrices.cache.push(formatPrice(billingRates.cacheRatioPrice));
|
||
}
|
||
|
||
// 缓存创建价格：渠道配置了 create_cache_ratio 即可展示
|
||
if (
|
||
ch.create_cache_ratio !== undefined &&
|
||
ch.create_cache_ratio !== null
|
||
) {
|
||
prices.createCache.push(
|
||
formatPrice(
|
||
billingRates.cacheCreationRatioPrice * usedGroupRatio,
|
||
),
|
||
);
|
||
originalPrices.createCache.push(
|
||
formatPrice(billingRates.cacheCreationRatioPrice),
|
||
);
|
||
}
|
||
|
||
const vrCh = pickChannelScopedModelFloat(
|
||
channelVideoRatio,
|
||
cid,
|
||
mname,
|
||
);
|
||
const vcrCh = pickChannelScopedModelFloat(
|
||
channelVideoCompletionRatio,
|
||
cid,
|
||
mname,
|
||
);
|
||
const effVr =
|
||
vrCh != null
|
||
? vrCh
|
||
: modelHasVideoRatio
|
||
? Number(model.video_ratio)
|
||
: 1;
|
||
const effVcr =
|
||
vcrCh != null
|
||
? vcrCh
|
||
: modelHasVideoCompletion
|
||
? Number(model.video_completion_ratio)
|
||
: 1;
|
||
|
||
const showVideoToken =
|
||
modelHasVideoRatio ||
|
||
modelHasVideoCompletion ||
|
||
vrCh != null ||
|
||
vcrCh != null;
|
||
|
||
if (showVideoToken) {
|
||
const videoTokUsd =
|
||
billingRates.inputRatioPrice * effVr * effVcr * usedGroupRatio;
|
||
prices.videoToken.push(formatPrice(videoTokUsd));
|
||
originalPrices.videoToken.push(
|
||
formatPrice(billingRates.inputRatioPrice * effVr * effVcr),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
// 按次计费
|
||
else if (model.quota_type === 1 || ch.quota_type === 1) {
|
||
if (!skipSimpleFixed && ch.model_price !== undefined && ch.model_price !== null) {
|
||
prices.fixed.push(
|
||
formatPrice(billingRates.effModelPrice * usedGroupRatio),
|
||
);
|
||
originalPrices.fixed.push(formatPrice(billingRates.effModelPrice));
|
||
}
|
||
}
|
||
});
|
||
|
||
// 根数据价格（用同一口径计算，用于与 channel 价格比较）
|
||
const rootPrices = {};
|
||
if (model.quota_type === 0) {
|
||
if (model.model_ratio !== undefined && model.model_ratio !== null) {
|
||
rootPrices.input = formatPrice(model.model_ratio * 2);
|
||
if (
|
||
model.completion_ratio !== undefined &&
|
||
model.completion_ratio !== null
|
||
) {
|
||
rootPrices.output = formatPrice(
|
||
model.model_ratio * model.completion_ratio * 2,
|
||
);
|
||
}
|
||
if (model.cache_ratio !== undefined && model.cache_ratio !== null) {
|
||
rootPrices.cache = formatPrice(
|
||
model.model_ratio * model.cache_ratio * 2,
|
||
);
|
||
}
|
||
if (
|
||
model.create_cache_ratio !== undefined &&
|
||
model.create_cache_ratio !== null
|
||
) {
|
||
rootPrices.createCache = formatPrice(
|
||
model.model_ratio * model.create_cache_ratio * 2,
|
||
);
|
||
}
|
||
}
|
||
} else if (model.quota_type === 1) {
|
||
if (
|
||
!skipSimpleFixed &&
|
||
model.model_price !== undefined &&
|
||
model.model_price !== null
|
||
) {
|
||
rootPrices.fixed = formatPrice(model.model_price);
|
||
}
|
||
}
|
||
if (model.quota_type === 0) {
|
||
if (model.model_ratio !== undefined && model.model_ratio !== null) {
|
||
const rootVr = modelHasVideoRatio ? Number(model.video_ratio) : 1;
|
||
const rootVcr = modelHasVideoCompletion
|
||
? Number(model.video_completion_ratio)
|
||
: 1;
|
||
if (modelHasVideoRatio || modelHasVideoCompletion) {
|
||
rootPrices.videoToken = formatPrice(
|
||
model.model_ratio * rootVr * rootVcr * 2,
|
||
);
|
||
}
|
||
}
|
||
}
|
||
if (modelHasVideoFlatPrice && !skipSimpleVideoFlat) {
|
||
rootPrices.videoFlat = formatPrice(Number(model.video_price));
|
||
}
|
||
|
||
// 若根价格高于任意一个 channel 的对应价格，则返回划线原价与折扣
|
||
const getOriginal = (rootPrice, channelPriceArray) => {
|
||
if (!rootPrice || !channelPriceArray || channelPriceArray.length === 0)
|
||
return null;
|
||
const minChannel = Math.min(...channelPriceArray.map((p) => p.value));
|
||
if (rootPrice.value > minChannel && rootPrice.value > 0) {
|
||
const discount = Math.round((1 - minChannel / rootPrice.value) * 100);
|
||
return {
|
||
text: `${rootPrice.symbol}${rootPrice.value}`,
|
||
discount,
|
||
};
|
||
}
|
||
return null;
|
||
};
|
||
|
||
// 计算范围
|
||
const calculateRange = (priceArray) => {
|
||
if (priceArray.length === 0) return null;
|
||
if (priceArray.length === 1) {
|
||
const p = priceArray[0];
|
||
return {
|
||
single: `${p.symbol}${p.value}`,
|
||
min: null,
|
||
max: null,
|
||
symbol: p.symbol,
|
||
};
|
||
}
|
||
|
||
const values = priceArray.map((p) => p.value);
|
||
const uniqueValues = [...new Set(values)];
|
||
|
||
if (uniqueValues.length === 1) {
|
||
const p = priceArray[0];
|
||
return {
|
||
single: `${p.symbol}${p.value}`,
|
||
min: null,
|
||
max: null,
|
||
symbol: p.symbol,
|
||
};
|
||
}
|
||
|
||
const min = Math.min(...values);
|
||
const max = Math.max(...values);
|
||
const symbol = priceArray[0].symbol;
|
||
return { single: null, min, max, symbol };
|
||
};
|
||
|
||
const unitLabel = tokenUnit === 'K' ? 'K' : 'M';
|
||
const unitSuffix = ` / 1${unitLabel} Tokens`;
|
||
const fixedSuffix = ` / ${t('次')}`;
|
||
|
||
return {
|
||
input: calculateRange(prices.input),
|
||
output: calculateRange(prices.output),
|
||
cache: calculateRange(prices.cache),
|
||
createCache: calculateRange(prices.createCache),
|
||
fixed: calculateRange(prices.fixed),
|
||
original: {
|
||
input: getOriginal(rootPrices.input, originalPrices.input),
|
||
output: getOriginal(rootPrices.output, originalPrices.output),
|
||
cache: getOriginal(rootPrices.cache, originalPrices.cache),
|
||
createCache: getOriginal(
|
||
rootPrices.createCache,
|
||
originalPrices.createCache,
|
||
),
|
||
fixed: getOriginal(rootPrices.fixed, originalPrices.fixed),
|
||
videoToken: getOriginal(
|
||
rootPrices.videoToken,
|
||
originalPrices.videoToken,
|
||
),
|
||
videoFlat: getOriginal(rootPrices.videoFlat, originalPrices.videoFlat),
|
||
},
|
||
videoToken: calculateRange(prices.videoToken),
|
||
videoFlat: calculateRange(prices.videoFlat),
|
||
unitSuffix,
|
||
fixedSuffix,
|
||
videoFlatSuffix: ` / ${t('条')}`,
|
||
quotaType: model.quota_type,
|
||
};
|
||
};
|
||
|
||
// 获取模型的价格项（优先使用 channel 价格）
|
||
const getModelPriceItemsForCard = (model, priceData) => {
|
||
const hint = model.video_flat_clip_hint;
|
||
const useTieredVideoFlat =
|
||
hint &&
|
||
Number(hint.tier_count) > 0 &&
|
||
Number(hint.min_usd_after_channel_discount) > 0;
|
||
const imageHint = model.image_per_image_hint;
|
||
const useTieredImagePerImage =
|
||
imageHint &&
|
||
Number(imageHint.tier_count) > 0 &&
|
||
Number(imageHint.min_usd_after_channel_discount) > 0;
|
||
|
||
const channelPrices = calculateChannelPrices(model, {
|
||
skipSimpleVideoFlat: useTieredVideoFlat,
|
||
skipSimpleFixed: useTieredImagePerImage,
|
||
});
|
||
|
||
// 如果没有 channel 价格，使用原有逻辑
|
||
if (!channelPrices) {
|
||
return getModelPriceItems(priceData, t, siteDisplayType);
|
||
}
|
||
|
||
// 使用 channel 价格构建价格项
|
||
const items = [];
|
||
const {
|
||
input,
|
||
output,
|
||
cache,
|
||
createCache,
|
||
fixed,
|
||
original,
|
||
unitSuffix,
|
||
fixedSuffix,
|
||
videoToken,
|
||
videoFlat,
|
||
videoFlatSuffix,
|
||
quotaType,
|
||
} = channelPrices;
|
||
|
||
// 按次计费
|
||
if (quotaType === 1 && fixed) {
|
||
items.push({
|
||
key: 'fixed',
|
||
label: t('模型价格'),
|
||
value:
|
||
fixed.single ||
|
||
`${fixed.symbol}${fixed.min} ~ ${fixed.symbol}${fixed.max}`,
|
||
suffix: fixedSuffix,
|
||
original: original?.fixed,
|
||
});
|
||
}
|
||
// 按量计费
|
||
else {
|
||
if (input) {
|
||
items.push({
|
||
key: 'input',
|
||
label: t('输入价格'),
|
||
value:
|
||
input.single ||
|
||
`${input.symbol}${input.min} ~ ${input.symbol}${input.max}`,
|
||
suffix: unitSuffix,
|
||
original: original?.input,
|
||
});
|
||
}
|
||
|
||
if (output) {
|
||
items.push({
|
||
key: 'output',
|
||
label: t('输出价格'),
|
||
value:
|
||
output.single ||
|
||
`${output.symbol}${output.min} ~ ${output.symbol}${output.max}`,
|
||
suffix: unitSuffix,
|
||
original: original?.output,
|
||
});
|
||
}
|
||
|
||
if (videoToken) {
|
||
items.push({
|
||
key: 'video-token',
|
||
label: t('视频（倍率计价）'),
|
||
value:
|
||
videoToken.single ||
|
||
`${videoToken.symbol}${videoToken.min} ~ ${videoToken.symbol}${videoToken.max}`,
|
||
suffix: unitSuffix,
|
||
original: original?.videoToken,
|
||
});
|
||
}
|
||
|
||
// 卡片表面仅展示输入/输出价格，缓存价格不在卡片上显示（详情弹窗中仍可见）
|
||
// if (cache) {
|
||
// items.push({
|
||
// key: 'cache',
|
||
// label: t('缓存读取价格'),
|
||
// value: cache.single || `${cache.symbol}${cache.min} ~ ${cache.symbol}${cache.max}`,
|
||
// suffix: unitSuffix,
|
||
// original: original?.cache,
|
||
// });
|
||
// }
|
||
//
|
||
// if (createCache) {
|
||
// items.push({
|
||
// key: 'create-cache',
|
||
// label: t('缓存创建价格'),
|
||
// value: createCache.single || `${createCache.symbol}${createCache.min} ~ ${createCache.symbol}${createCache.max}`,
|
||
// suffix: unitSuffix,
|
||
// original: original?.createCache,
|
||
// });
|
||
// }
|
||
}
|
||
|
||
if (videoFlat) {
|
||
items.push({
|
||
key: 'video-flat',
|
||
label: t('视频按条（固定价）'),
|
||
value:
|
||
videoFlat.single ||
|
||
`${videoFlat.symbol}${videoFlat.min} ~ ${videoFlat.symbol}${videoFlat.max}`,
|
||
suffix: videoFlatSuffix || ` / ${t('条')}`,
|
||
original: original?.videoFlat,
|
||
});
|
||
}
|
||
|
||
if (useTieredVideoFlat) {
|
||
const { usedGroupRatio } = getUsedGroupContext(
|
||
model,
|
||
selectedGroup,
|
||
groupRatio,
|
||
);
|
||
const usd = Number(hint.min_usd_after_channel_discount) * usedGroupRatio;
|
||
const perSecond = hint.billing_mode === 'per_second';
|
||
items.push({
|
||
key: 'video-flat-tiered',
|
||
label: perSecond ? t('按秒') : t('按条'),
|
||
valueNode: (
|
||
<span className='font-bold text-black'>
|
||
{t('最低价')}
|
||
{displayPrice(usd)}
|
||
{perSecond ? t('/秒起') : t('/条起')}
|
||
</span>
|
||
),
|
||
});
|
||
}
|
||
|
||
if (useTieredImagePerImage) {
|
||
const { usedGroupRatio } = getUsedGroupContext(
|
||
model,
|
||
selectedGroup,
|
||
groupRatio,
|
||
);
|
||
const usd =
|
||
Number(imageHint.min_usd_after_channel_discount) * usedGroupRatio;
|
||
items.push({
|
||
key: 'image-per-image-tiered',
|
||
label: t('按张'),
|
||
valueNode: (
|
||
<span className='font-bold text-black'>
|
||
{t('最低价')}
|
||
{displayPrice(usd)}
|
||
{t('/张起')}
|
||
</span>
|
||
),
|
||
});
|
||
}
|
||
|
||
return items;
|
||
};
|
||
|
||
// 获取模型图标
|
||
const getModelIcon = (model) => {
|
||
if (!model || !model.model_name) {
|
||
return (
|
||
<div className={CARD_STYLES.container}>
|
||
<Avatar size='large'>?</Avatar>
|
||
</div>
|
||
);
|
||
}
|
||
// 1) 优先使用模型自定义图标
|
||
if (model.icon) {
|
||
return (
|
||
<div className={CARD_STYLES.container}>
|
||
<div className={CARD_STYLES.icon}>
|
||
{getLobeHubIcon(model.icon, 32)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
// 2) 退化为供应商图标
|
||
if (model.vendor_icon) {
|
||
return (
|
||
<div className={CARD_STYLES.container}>
|
||
<div className={CARD_STYLES.icon}>
|
||
{getLobeHubIcon(model.vendor_icon, 32)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 如果没有供应商图标，使用模型名称生成头像
|
||
|
||
const avatarText =
|
||
(model.model_name || '').slice(0, 2).toUpperCase() || 'AI';
|
||
return (
|
||
<div className={CARD_STYLES.container}>
|
||
<Avatar
|
||
size='large'
|
||
style={{
|
||
width: 48,
|
||
height: 48,
|
||
borderRadius: 16,
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
}}
|
||
>
|
||
{avatarText}
|
||
</Avatar>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 获取模型描述
|
||
const getModelDescription = (record) => {
|
||
return record.description || '';
|
||
};
|
||
|
||
// 显示骨架屏
|
||
if (showSkeleton) {
|
||
return (
|
||
<>
|
||
<PricingCardSkeleton />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (!filteredModels || filteredModels.length === 0) {
|
||
return (
|
||
<>
|
||
<div className='flex justify-center items-center py-20'>
|
||
<Empty
|
||
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
|
||
darkModeImage={
|
||
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
|
||
}
|
||
description={t('搜索无结果')}
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className={gridCols > 0 ? '' : 'px-2 pt-2'}>
|
||
<div className={gridCols > 0 ? 'grid gap-4' : 'flex flex-wrap gap-4'} style={gridCols > 0 ? { gridTemplateColumns: `repeat(${gridCols}, 1fr)` } : undefined}>
|
||
{paginatedModels.map((model, index) => {
|
||
const modelKey = getModelKey(model);
|
||
|
||
const priceData = calculateModelPrice({
|
||
record: model,
|
||
selectedGroup,
|
||
groupRatio,
|
||
groupModelPrice,
|
||
groupModelRatio,
|
||
tokenUnit,
|
||
displayPrice,
|
||
currency,
|
||
quotaDisplayType: siteDisplayType,
|
||
});
|
||
|
||
return (
|
||
<Card
|
||
key={modelKey || index}
|
||
className={`${gridCols > 0 ? '!w-full' : 'flex-1 min-w-[350px] max-w-[600px]'} !rounded-2xl transition-all duration-200 hover:shadow-lg border ${blurPricing ? '' : 'cursor-pointer'} ${CARD_STYLES.default}`}
|
||
bodyStyle={{ height: '100%' }}
|
||
onClick={() =>
|
||
!blurPricing && openModelDetail && openModelDetail(model)
|
||
}
|
||
>
|
||
<div className='flex flex-col h-full'>
|
||
{/* 头部：图标 + 模型名称 */}
|
||
<div className='flex items-start mb-3'>
|
||
<div className='flex items-start space-x-3 flex-1 min-w-0'>
|
||
{getModelIcon(model)}
|
||
<div className='flex-1 min-w-0'>
|
||
<h3 className='text-lg font-bold text-gray-900 truncate'>
|
||
{renderHighlightedText(model.model_name)}
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 模型描述 */}
|
||
<div
|
||
className='mb-4'
|
||
style={
|
||
blurPricing
|
||
? {
|
||
filter: 'blur(6px)',
|
||
userSelect: 'none',
|
||
pointerEvents: 'none',
|
||
}
|
||
: undefined
|
||
}
|
||
>
|
||
<p
|
||
className='text-xs line-clamp-2 leading-relaxed'
|
||
style={{ color: 'var(--semi-color-text-2)' }}
|
||
>
|
||
{renderHighlightedText(getModelDescription(model))}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 价格：输入 + 输出并排 */}
|
||
<div
|
||
className='mt-auto'
|
||
style={
|
||
blurPricing
|
||
? {
|
||
filter: 'blur(6px)',
|
||
userSelect: 'none',
|
||
pointerEvents: 'none',
|
||
}
|
||
: undefined
|
||
}
|
||
>
|
||
{(() => {
|
||
const items = getModelPriceItemsForCard(model, priceData);
|
||
if (items.length === 0) return null;
|
||
return (
|
||
<div className='flex flex-wrap gap-3'>
|
||
{items.map(item => (
|
||
<div key={item.key} className='flex-1 rounded-xl px-3 py-2.5' style={{backgroundColor: 'var(--semi-color-fill-0)', minWidth: '120px'}}>
|
||
<div className='text-[10px] mb-0.5' style={{color: 'var(--semi-color-text-2)'}}>{item.label}</div>
|
||
<div className='text-sm font-bold text-gray-900'>
|
||
{item.valueNode || (item.value + (item.suffix || ''))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 分页 */}
|
||
{filteredModels.length > 0 && (
|
||
<div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
pageSize={pageSize}
|
||
total={filteredModels.length}
|
||
showSizeChanger={showSizeChanger}
|
||
pageSizeOptions={[10, 20, 50, 100]}
|
||
size={isMobile ? 'small' : 'default'}
|
||
showQuickJumper={isMobile}
|
||
onPageChange={(page) => setCurrentPage(page)}
|
||
onPageSizeChange={(size) => {
|
||
setPageSize(size);
|
||
setCurrentPage(1);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default PricingCardView;
|