huangzhenpc/new-api-hunter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 chore(web): apply ESLint and Prettier auto-fixes (baseline)

Browse Source 
- Ran: bun run eslint:fix && bun run lint:fix
- Inserted AGPL license header via eslint-plugin-header
- Enforced no-multiple-empty-lines and other lint rules
- Formatted code using Prettier v3 (@so1ve/prettier-config)
- No functional changes; formatting-only baseline across JS/JSX files
This commit is contained in:
t0ng7u
2025-08-30 21:15:10 +08:00
parent 41cf516ec5
commit 0d57b1acd4
274 changed files with 11025 additions and 7659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
View File

@@ -32,30 +32,30 @@ const PricingDisplaySettings = ({
tokenUnit,
setTokenUnit,
loading = false,
t
t,
}) => {
const items = [
{
value: 'recharge',
label: t('充值价格显示')
label: t('充值价格显示'),
},
{
value: 'ratio',
label: t('显示倍率')
label: t('显示倍率'),
},
{
value: 'tableView',
label: t('表格视图')
label: t('表格视图'),
},
{
value: 'tokenUnit',
label: t('按K显示单位')
}
label: t('按K显示单位'),
},
];
const currencyItems = [
{ value: 'USD', label: 'USD ($)' },
{ value: 'CNY', label: 'CNY (¥)' }
{ value: 'CNY', label: 'CNY (¥)' },
];
const handleChange = (value) => {
@@ -112,4 +112,4 @@ const PricingDisplaySettings = ({
);
};
export default PricingDisplaySettings;
export default PricingDisplaySettings;

44
web/src/components/table/model-pricing/filter/PricingEndpointTypes.jsx
View File

@@ -28,13 +28,23 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
* @param {boolean} loading 是否加载中
* @param {Function} t i18n
*/
const PricingEndpointTypes = ({ filterEndpointType, setFilterEndpointType, models = [], allModels = [], loading = false, t }) => {
const PricingEndpointTypes = ({
filterEndpointType,
setFilterEndpointType,
models = [],
allModels = [],
loading = false,
t,
}) => {
// 获取系统中所有端点类型（基于 allModels，如果未提供则退化为 models）
const getAllEndpointTypes = () => {
const endpointTypes = new Set();
(allModels.length > 0 ? allModels : models).forEach(model => {
if (model.supported_endpoint_types && Array.isArray(model.supported_endpoint_types)) {
model.supported_endpoint_types.forEach(endpoint => {
(allModels.length > 0 ? allModels : models).forEach((model) => {
if (
model.supported_endpoint_types &&
Array.isArray(model.supported_endpoint_types)
) {
model.supported_endpoint_types.forEach((endpoint) => {
endpointTypes.add(endpoint);
});
}
@@ -47,9 +57,10 @@ const PricingEndpointTypes = ({ filterEndpointType, setFilterEndpointType, model
if (endpointType === 'all') {
return models.length;
}
return models.filter(model =>
model.supported_endpoint_types &&
model.supported_endpoint_types.includes(endpointType)
return models.filter(
(model) =>
model.supported_endpoint_types &&
model.supported_endpoint_types.includes(endpointType),
).length;
};
@@ -61,16 +72,21 @@ const PricingEndpointTypes = ({ filterEndpointType, setFilterEndpointType, model
const availableEndpointTypes = getAllEndpointTypes();
const items = [
{ value: 'all', label: t('全部端点'), tagCount: getEndpointTypeCount('all'), disabled: models.length === 0 },
...availableEndpointTypes.map(endpointType => {
{
value: 'all',
label: t('全部端点'),
tagCount: getEndpointTypeCount('all'),
disabled: models.length === 0,
},
...availableEndpointTypes.map((endpointType) => {
const count = getEndpointTypeCount(endpointType);
return ({
return {
value: endpointType,
label: getEndpointTypeLabel(endpointType),
tagCount: count,
disabled: count === 0
});
})
disabled: count === 0,
};
}),
];
return (
@@ -85,4 +101,4 @@ const PricingEndpointTypes = ({ filterEndpointType, setFilterEndpointType, model
);
};
export default PricingEndpointTypes;
export default PricingEndpointTypes;

27
web/src/components/table/model-pricing/filter/PricingGroups.jsx
View File

@@ -30,13 +30,26 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
* @param {boolean} loading 是否加载中
* @param {Function} t i18n
*/
const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, groupRatio = {}, models = [], loading = false, t }) => {
const groups = ['all', ...Object.keys(usableGroup).filter(key => key !== '')];
const PricingGroups = ({
filterGroup,
setFilterGroup,
usableGroup = {},
groupRatio = {},
models = [],
loading = false,
t,
}) => {
const groups = [
'all',
...Object.keys(usableGroup).filter((key) => key !== ''),
];
const items = groups.map((g) => {
const modelCount = g === 'all'
? models.length
: models.filter(m => m.enable_groups && m.enable_groups.includes(g)).length;
const modelCount =
g === 'all'
? models.length
: models.filter((m) => m.enable_groups && m.enable_groups.includes(g))
.length;
let ratioDisplay = '';
if (g === 'all') {
ratioDisplay = t('全部');
@@ -52,7 +65,7 @@ const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, groupRat
value: g,
label: g === 'all' ? t('全部分组') : g,
tagCount: ratioDisplay,
disabled: modelCount === 0
disabled: modelCount === 0,
};
});
@@ -68,4 +81,4 @@ const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, groupRat
);
};
export default PricingGroups;
export default PricingGroups;

14
web/src/components/table/model-pricing/filter/PricingQuotaTypes.jsx
View File

@@ -28,8 +28,16 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
* @param {boolean} loading 是否加载中
* @param {Function} t i18n
*/
const PricingQuotaTypes = ({ filterQuotaType, setFilterQuotaType, models = [], loading = false, t }) => {
const qtyCount = (type) => models.filter(m => type === 'all' ? true : m.quota_type === type).length;
const PricingQuotaTypes = ({
filterQuotaType,
setFilterQuotaType,
models = [],
loading = false,
t,
}) => {
const qtyCount = (type) =>
models.filter((m) => (type === 'all' ? true : m.quota_type === type))
.length;
const items = [
{ value: 'all', label: t('全部类型'), tagCount: qtyCount('all') },
@@ -49,4 +57,4 @@ const PricingQuotaTypes = ({ filterQuotaType, setFilterQuotaType, models = [], l
);
};
export default PricingQuotaTypes;
export default PricingQuotaTypes;

46
web/src/components/table/model-pricing/filter/PricingTags.jsx
View File

@@ -29,18 +29,25 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
* @param {boolean} loading 是否加载中
* @param {Function} t i18n
*/
const PricingTags = ({ filterTag, setFilterTag, models = [], allModels = [], loading = false, t }) => {
const PricingTags = ({
filterTag,
setFilterTag,
models = [],
allModels = [],
loading = false,
t,
}) => {
// 提取系统所有标签
const getAllTags = React.useMemo(() => {
const tagSet = new Set();
(allModels.length > 0 ? allModels : models).forEach(model => {
(allModels.length > 0 ? allModels : models).forEach((model) => {
if (model.tags) {
model.tags
.split(/[,;|\s]+/) // 逗号、分号、竖线或空白字符
.map(tag => tag.trim())
.map((tag) => tag.trim())
.filter(Boolean)
.forEach(tag => tagSet.add(tag.toLowerCase()));
.forEach((tag) => tagSet.add(tag.toLowerCase()));
}
});
@@ -48,19 +55,22 @@ const PricingTags = ({ filterTag, setFilterTag, models = [], allModels = [], loa
}, [allModels, models]);
// 计算标签对应的模型数量
const getTagCount = React.useCallback((tag) => {
if (tag === 'all') return models.length;
const getTagCount = React.useCallback(
(tag) => {
if (tag === 'all') return models.length;
const tagLower = tag.toLowerCase();
return models.filter(model => {
if (!model.tags) return false;
return model.tags
.toLowerCase()
.split(/[,;|\s]+/)
.map(tg => tg.trim())
.includes(tagLower);
}).length;
}, [models]);
const tagLower = tag.toLowerCase();
return models.filter((model) => {
if (!model.tags) return false;
return model.tags
.toLowerCase()
.split(/[,;|\s]+/)
.map((tg) => tg.trim())
.includes(tagLower);
}).length;
},
[models],
);
const items = React.useMemo(() => {
const result = [
@@ -69,10 +79,10 @@ const PricingTags = ({ filterTag, setFilterTag, models = [], allModels = [], loa
label: t('全部标签'),
tagCount: getTagCount('all'),
disabled: models.length === 0,
}
},
];
getAllTags.forEach(tag => {
getAllTags.forEach((tag) => {
const count = getTagCount(tag);
result.push({
value: tag,

46
web/src/components/table/model-pricing/filter/PricingVendors.jsx
View File

@@ -30,14 +30,21 @@ import { getLobeHubIcon } from '../../../../helpers';
* @param {boolean} loading 是否加载中
* @param {Function} t i18n
*/
const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels = [], loading = false, t }) => {
const PricingVendors = ({
filterVendor,
setFilterVendor,
models = [],
allModels = [],
loading = false,
t,
}) => {
// 获取系统中所有供应商（基于 allModels，如果未提供则退化为 models）
const getAllVendors = React.useMemo(() => {
const vendors = new Set();
const vendorIcons = new Map();
let hasUnknownVendor = false;
(allModels.length > 0 ? allModels : models).forEach(model => {
(allModels.length > 0 ? allModels : models).forEach((model) => {
if (model.vendor_name) {
vendors.add(model.vendor_name);
if (model.vendor_icon && !vendorIcons.has(model.vendor_name)) {
@@ -51,20 +58,23 @@ const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels
return {
vendors: Array.from(vendors).sort(),
vendorIcons,
hasUnknownVendor
hasUnknownVendor,
};
}, [allModels, models]);
// 计算每个供应商的模型数量（基于当前过滤后的 models）
const getVendorCount = React.useCallback((vendor) => {
if (vendor === 'all') {
return models.length;
}
if (vendor === 'unknown') {
return models.filter(model => !model.vendor_name).length;
}
return models.filter(model => model.vendor_name === vendor).length;
}, [models]);
const getVendorCount = React.useCallback(
(vendor) => {
if (vendor === 'all') {
return models.length;
}
if (vendor === 'unknown') {
return models.filter((model) => !model.vendor_name).length;
}
return models.filter((model) => model.vendor_name === vendor).length;
},
[models],
);
// 生成供应商选项
const items = React.useMemo(() => {
@@ -73,12 +83,12 @@ const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels
value: 'all',
label: t('全部供应商'),
tagCount: getVendorCount('all'),
disabled: models.length === 0
}
disabled: models.length === 0,
},
];
// 添加所有已知供应商
getAllVendors.vendors.forEach(vendor => {
getAllVendors.vendors.forEach((vendor) => {
const count = getVendorCount(vendor);
const icon = getAllVendors.vendorIcons.get(vendor);
result.push({
@@ -86,7 +96,7 @@ const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels
label: vendor,
icon: icon ? getLobeHubIcon(icon, 16) : null,
tagCount: count,
disabled: count === 0
disabled: count === 0,
});
});
@@ -97,7 +107,7 @@ const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels
value: 'unknown',
label: t('未知供应商'),
tagCount: count,
disabled: count === 0
disabled: count === 0,
});
}
@@ -116,4 +126,4 @@ const PricingVendors = ({ filterVendor, setFilterVendor, models = [], allModels
);
};
export default PricingVendors;
export default PricingVendors;

16
web/src/components/table/model-pricing/layout/PricingPage.jsx
View File

@@ -36,23 +36,19 @@ const PricingPage = () => {
showRatio,
setShowRatio,
viewMode,
setViewMode
setViewMode,
};
return (
<div className="bg-white">
<Layout className="pricing-layout">
<div className='bg-white'>
<Layout className='pricing-layout'>
{!isMobile && (
<Sider
className="pricing-scroll-hide pricing-sidebar"
>
<Sider className='pricing-scroll-hide pricing-sidebar'>
<PricingSidebar {...allProps} />
</Sider>
)}
<Content
className="pricing-scroll-hide pricing-content"
>
<Content className='pricing-scroll-hide pricing-content'>
<PricingContent
{...allProps}
isMobile={isMobile}
@@ -86,4 +82,4 @@ const PricingPage = () => {
);
};
export default PricingPage;
export default PricingPage;

15
web/src/components/table/model-pricing/layout/PricingSidebar.jsx
View File

@@ -58,7 +58,6 @@ const PricingSidebar = ({
t,
...categoryProps
}) => {
const {
quotaTypeModels,
endpointTypeModels,
@@ -92,16 +91,14 @@ const PricingSidebar = ({
});
return (
<div className="p-2">
<div className="flex items-center justify-between mb-6">
<div className="text-lg font-semibold text-gray-800">
{t('筛选')}
</div>
<div className='p-2'>
<div className='flex items-center justify-between mb-6'>
<div className='text-lg font-semibold text-gray-800'>{t('筛选')}</div>
<Button
theme="outline"
theme='outline'
type='tertiary'
onClick={handleResetFilters}
className="text-gray-500 hover:text-gray-700"
className='text-gray-500 hover:text-gray-700'
>
{t('重置')}
</Button>
@@ -155,4 +152,4 @@ const PricingSidebar = ({
);
};
export default PricingSidebar;
export default PricingSidebar;

14
web/src/components/table/model-pricing/layout/content/PricingContent.jsx
View File

@@ -23,9 +23,11 @@ import PricingView from './PricingView';
const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
return (
<div className={isMobile ? "pricing-content-mobile" : "pricing-scroll-hide"}>
<div
className={isMobile ? 'pricing-content-mobile' : 'pricing-scroll-hide'}
>
{/* 固定的顶部区域（分类介绍 + 搜索和操作） */}
<div className="pricing-search-header">
<div className='pricing-search-header'>
<PricingTopSection
{...props}
isMobile={isMobile}
@@ -44,11 +46,15 @@ const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
</div>
{/* 可滚动的内容区域 */}
<div className={isMobile ? "pricing-view-container-mobile" : "pricing-view-container"}>
<div
className={
isMobile ? 'pricing-view-container-mobile' : 'pricing-view-container'
}
>
<PricingView {...props} viewMode={sidebarProps.viewMode} />
</div>
</div>
);
};
export default PricingContent;
export default PricingContent;

15
web/src/components/table/model-pricing/layout/content/PricingView.jsx
View File

@@ -21,13 +21,12 @@ import React from 'react';
import PricingTable from '../../view/table/PricingTable';
import PricingCardView from '../../view/card/PricingCardView';
const PricingView = ({
viewMode = 'table',
...props
}) => {
return viewMode === 'card' ?
<PricingCardView {...props} /> :
<PricingTable {...props} />;
const PricingView = ({ viewMode = 'table', ...props }) => {
return viewMode === 'card' ? (
<PricingCardView {...props} />
) : (
<PricingTable {...props} />
);
};
export default PricingView;
export default PricingView;

176
web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
View File

@@ -22,98 +22,100 @@ import PricingFilterModal from '../../modal/PricingFilterModal';
import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
import SearchActions from './SearchActions';
const PricingTopSection = memo(({
selectedRowKeys,
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile,
sidebarProps,
filterVendor,
models,
filteredModels,
loading,
searchValue,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
t
}) => {
const [showFilterModal, setShowFilterModal] = useState(false);
const PricingTopSection = memo(
({
selectedRowKeys,
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile,
sidebarProps,
filterVendor,
models,
filteredModels,
loading,
searchValue,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
t,
}) => {
const [showFilterModal, setShowFilterModal] = useState(false);
return (
<>
{isMobile ? (
<>
<div className="w-full">
<SearchActions
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
return (
<>
{isMobile ? (
<>
<div className='w-full'>
<SearchActions
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
t={t}
/>
</div>
<PricingFilterModal
visible={showFilterModal}
onClose={() => setShowFilterModal(false)}
sidebarProps={sidebarProps}
t={t}
/>
</div>
<PricingFilterModal
visible={showFilterModal}
onClose={() => setShowFilterModal(false)}
sidebarProps={sidebarProps}
</>
) : (
<PricingVendorIntroWithSkeleton
loading={loading}
filterVendor={filterVendor}
models={filteredModels}
allModels={models}
t={t}
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
/>
</>
) : (
<PricingVendorIntroWithSkeleton
loading={loading}
filterVendor={filterVendor}
models={filteredModels}
allModels={models}
t={t}
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
/>
)}
</>
);
});
)}
</>
);
},
);
PricingTopSection.displayName = 'PricingTopSection';
export default PricingTopSection;
export default PricingTopSection;

539
web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
View File

@@ -18,7 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
import { Card, Tag, Avatar, Typography, Tooltip, Modal } from '@douyinfe/semi-ui';
import {
Card,
Tag,
Avatar,
Typography,
Tooltip,
Modal,
} from '@douyinfe/semi-ui';
import { getLobeHubIcon } from '../../../../../helpers';
import SearchActions from './SearchActions';
@@ -27,18 +34,18 @@ const { Paragraph } = Typography;
const CONFIG = {
CAROUSEL_INTERVAL: 2000,
ICON_SIZE: 40,
UNKNOWN_VENDOR: 'unknown'
UNKNOWN_VENDOR: 'unknown',
};
const THEME_COLORS = {
allVendors: {
primary: '37 99 235',
background: 'rgba(59, 130, 246, 0.08)'
background: 'rgba(59, 130, 246, 0.08)',
},
specific: {
primary: '16 185 129',
background: 'rgba(16, 185, 129, 0.1)'
}
background: 'rgba(16, 185, 129, 0.1)',
},
};
const COMPONENT_STYLES = {
@@ -46,41 +53,54 @@ const COMPONENT_STYLES = {
backgroundColor: 'rgba(255,255,255,0.95)',
color: '#1f2937',
border: '1px solid rgba(255,255,255,0.8)',
fontWeight: '500'
fontWeight: '500',
},
avatarContainer: 'w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center',
avatarContainer:
'w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center',
titleText: { color: 'white' },
descriptionText: { color: 'rgba(255,255,255,0.9)' }
descriptionText: { color: 'rgba(255,255,255,0.9)' },
};
const CONTENT_TEXTS = {
unknown: {
displayName: (t) => t('未知供应商'),
description: (t) => t('包含来自未知或未标明供应商的AI模型，这些模型可能来自小型供应商或开源项目。')
description: (t) =>
t(
'包含来自未知或未标明供应商的AI模型，这些模型可能来自小型供应商或开源项目。',
),
},
all: {
description: (t) => t('查看所有可用的AI模型供应商，包括众多知名供应商的模型。')
description: (t) =>
t('查看所有可用的AI模型供应商，包括众多知名供应商的模型。'),
},
fallback: {
description: (t) => t('该供应商提供多种AI模型，适用于不同的应用场景。')
}
description: (t) => t('该供应商提供多种AI模型，适用于不同的应用场景。'),
},
};
const getVendorDisplayName = (vendorName, t) => {
return vendorName === CONFIG.UNKNOWN_VENDOR ? CONTENT_TEXTS.unknown.displayName(t) : vendorName;
return vendorName === CONFIG.UNKNOWN_VENDOR
? CONTENT_TEXTS.unknown.displayName(t)
: vendorName;
};
const createDefaultAvatar = () => (
<div className={COMPONENT_STYLES.avatarContainer}>
<Avatar size="large" color="transparent">AI</Avatar>
<Avatar size='large' color='transparent'>
AI
</Avatar>
</div>
);
const getAvatarBackgroundColor = (isAllVendors) =>
isAllVendors ? THEME_COLORS.allVendors.background : THEME_COLORS.specific.background;
isAllVendors
? THEME_COLORS.allVendors.background
: THEME_COLORS.specific.background;
const getAvatarText = (vendorName) =>
vendorName === CONFIG.UNKNOWN_VENDOR ? '?' : vendorName.charAt(0).toUpperCase();
vendorName === CONFIG.UNKNOWN_VENDOR
? '?'
: vendorName.charAt(0).toUpperCase();
const createAvatarContent = (vendor, isAllVendors) => {
if (vendor.icon) {
@@ -89,7 +109,7 @@ const createAvatarContent = (vendor, isAllVendors) => {
return (
<Avatar
size="large"
size='large'
style={{ backgroundColor: getAvatarBackgroundColor(isAllVendors) }}
>
{getAvatarText(vendor.name)}
@@ -106,245 +126,294 @@ const renderVendorAvatar = (vendor, t, isAllVendors = false) => {
const avatarContent = createAvatarContent(vendor, isAllVendors);
return (
<Tooltip content={displayName} position="top">
<div className={COMPONENT_STYLES.avatarContainer}>
{avatarContent}
</div>
<Tooltip content={displayName} position='top'>
<div className={COMPONENT_STYLES.avatarContainer}>{avatarContent}</div>
</Tooltip>
);
};
const PricingVendorIntro = memo(({
filterVendor,
models = [],
allModels = [],
t,
selectedRowKeys = [],
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile = false,
searchValue = '',
setShowFilterModal,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit
}) => {
const [currentOffset, setCurrentOffset] = useState(0);
const [descModalVisible, setDescModalVisible] = useState(false);
const [descModalContent, setDescModalContent] = useState('');
const PricingVendorIntro = memo(
({
filterVendor,
models = [],
allModels = [],
t,
selectedRowKeys = [],
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile = false,
searchValue = '',
setShowFilterModal,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
}) => {
const [currentOffset, setCurrentOffset] = useState(0);
const [descModalVisible, setDescModalVisible] = useState(false);
const [descModalContent, setDescModalContent] = useState('');
const handleOpenDescModal = useCallback((content) => {
setDescModalContent(content || '');
setDescModalVisible(true);
}, []);
const handleOpenDescModal = useCallback((content) => {
setDescModalContent(content || '');
setDescModalVisible(true);
}, []);
const handleCloseDescModal = useCallback(() => {
setDescModalVisible(false);
}, []);
const handleCloseDescModal = useCallback(() => {
setDescModalVisible(false);
}, []);
const renderDescriptionModal = useCallback(() => (
<Modal
title={t('供应商介绍')}
visible={descModalVisible}
onCancel={handleCloseDescModal}
footer={null}
width={isMobile ? '95%' : 600}
bodyStyle={{ maxHeight: isMobile ? '70vh' : '60vh', overflowY: 'auto' }}
>
<div className="text-sm mb-4">
{descModalContent}
</div>
</Modal>
), [descModalVisible, descModalContent, handleCloseDescModal, isMobile, t]);
const vendorInfo = useMemo(() => {
const vendors = new Map();
let unknownCount = 0;
const sourceModels = Array.isArray(allModels) && allModels.length > 0 ? allModels : models;
sourceModels.forEach(model => {
if (model.vendor_name) {
const existing = vendors.get(model.vendor_name);
if (existing) {
existing.count++;
} else {
vendors.set(model.vendor_name, {
name: model.vendor_name,
icon: model.vendor_icon,
description: model.vendor_description,
count: 1
});
}
} else {
unknownCount++;
}
});
const vendorList = Array.from(vendors.values())
.sort((a, b) => a.name.localeCompare(b.name));
if (unknownCount > 0) {
vendorList.push({
name: CONFIG.UNKNOWN_VENDOR,
icon: null,
description: CONTENT_TEXTS.unknown.description(t),
count: unknownCount
});
}
return vendorList;
}, [allModels, models, t]);
const currentModelCount = models.length;
useEffect(() => {
if (filterVendor !== 'all' || vendorInfo.length <= 1) {
setCurrentOffset(0);
return;
}
const interval = setInterval(() => {
setCurrentOffset(prev => (prev + 1) % vendorInfo.length);
}, CONFIG.CAROUSEL_INTERVAL);
return () => clearInterval(interval);
}, [filterVendor, vendorInfo.length]);
const getVendorDescription = useCallback((vendorKey) => {
if (vendorKey === 'all') {
return CONTENT_TEXTS.all.description(t);
}
if (vendorKey === CONFIG.UNKNOWN_VENDOR) {
return CONTENT_TEXTS.unknown.description(t);
}
const vendor = vendorInfo.find(v => v.name === vendorKey);
return vendor?.description || CONTENT_TEXTS.fallback.description(t);
}, [vendorInfo, t]);
const createCoverStyle = useCallback((primaryColor) => ({
'--palette-primary-darkerChannel': primaryColor,
backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}), []);
const renderSearchActions = useCallback(() => (
<SearchActions
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
t={t}
/>
), [selectedRowKeys, copyText, handleChange, handleCompositionStart, handleCompositionEnd, isMobile, searchValue, setShowFilterModal, showWithRecharge, setShowWithRecharge, currency, setCurrency, showRatio, setShowRatio, viewMode, setViewMode, tokenUnit, setTokenUnit, t]);
const renderHeaderCard = useCallback(({ title, count, description, rightContent, primaryDarkerChannel }) => (
<Card className="!rounded-2xl shadow-sm border-0"
cover={
<div
className="relative h-full"
style={createCoverStyle(primaryDarkerChannel)}
const renderDescriptionModal = useCallback(
() => (
<Modal
title={t('供应商介绍')}
visible={descModalVisible}
onCancel={handleCloseDescModal}
footer={null}
width={isMobile ? '95%' : 600}
bodyStyle={{
maxHeight: isMobile ? '70vh' : '60vh',
overflowY: 'auto',
}}
>
<div className="relative z-10 h-full flex items-center justify-between p-4">
<div className="flex-1 min-w-0 mr-4">
<div className="flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2">
<h2 className="text-lg sm:text-xl font-bold truncate" style={COMPONENT_STYLES.titleText}>
{title}
</h2>
<Tag style={COMPONENT_STYLES.tag} shape="circle" size="small" className="self-center">
{t('共 {{count}} 个模型', { count })}
</Tag>
</div>
<Paragraph
className="text-xs sm:text-sm leading-relaxed !mb-0 cursor-pointer"
style={COMPONENT_STYLES.descriptionText}
ellipsis={{ rows: 2 }}
onClick={() => handleOpenDescModal(description)}
>
{description}
</Paragraph>
</div>
<div className='text-sm mb-4'>{descModalContent}</div>
</Modal>
),
[descModalVisible, descModalContent, handleCloseDescModal, isMobile, t],
);
<div className="flex-shrink-0">
{rightContent}
</div>
</div>
</div>
const vendorInfo = useMemo(() => {
const vendors = new Map();
let unknownCount = 0;
const sourceModels =
Array.isArray(allModels) && allModels.length > 0 ? allModels : models;
sourceModels.forEach((model) => {
if (model.vendor_name) {
const existing = vendors.get(model.vendor_name);
if (existing) {
existing.count++;
} else {
vendors.set(model.vendor_name, {
name: model.vendor_name,
icon: model.vendor_icon,
description: model.vendor_description,
count: 1,
});
}
} else {
unknownCount++;
}
});
const vendorList = Array.from(vendors.values()).sort((a, b) =>
a.name.localeCompare(b.name),
);
if (unknownCount > 0) {
vendorList.push({
name: CONFIG.UNKNOWN_VENDOR,
icon: null,
description: CONTENT_TEXTS.unknown.description(t),
count: unknownCount,
});
}
>
{renderSearchActions()}
</Card>
), [renderSearchActions, createCoverStyle, handleOpenDescModal, t]);
const renderAllVendorsAvatar = useCallback(() => {
const currentVendor = vendorInfo.length > 0 ? vendorInfo[currentOffset % vendorInfo.length] : null;
return renderVendorAvatar(currentVendor, t, true);
}, [vendorInfo, currentOffset, t]);
return vendorList;
}, [allModels, models, t]);
const currentModelCount = models.length;
useEffect(() => {
if (filterVendor !== 'all' || vendorInfo.length <= 1) {
setCurrentOffset(0);
return;
}
const interval = setInterval(() => {
setCurrentOffset((prev) => (prev + 1) % vendorInfo.length);
}, CONFIG.CAROUSEL_INTERVAL);
return () => clearInterval(interval);
}, [filterVendor, vendorInfo.length]);
const getVendorDescription = useCallback(
(vendorKey) => {
if (vendorKey === 'all') {
return CONTENT_TEXTS.all.description(t);
}
if (vendorKey === CONFIG.UNKNOWN_VENDOR) {
return CONTENT_TEXTS.unknown.description(t);
}
const vendor = vendorInfo.find((v) => v.name === vendorKey);
return vendor?.description || CONTENT_TEXTS.fallback.description(t);
},
[vendorInfo, t],
);
const createCoverStyle = useCallback(
(primaryColor) => ({
'--palette-primary-darkerChannel': primaryColor,
backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}),
[],
);
const renderSearchActions = useCallback(
() => (
<SearchActions
selectedRowKeys={selectedRowKeys}
copyText={copyText}
handleChange={handleChange}
handleCompositionStart={handleCompositionStart}
handleCompositionEnd={handleCompositionEnd}
isMobile={isMobile}
searchValue={searchValue}
setShowFilterModal={setShowFilterModal}
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
tokenUnit={tokenUnit}
setTokenUnit={setTokenUnit}
t={t}
/>
),
[
selectedRowKeys,
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile,
searchValue,
setShowFilterModal,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
t,
],
);
const renderHeaderCard = useCallback(
({ title, count, description, rightContent, primaryDarkerChannel }) => (
<Card
className='!rounded-2xl shadow-sm border-0'
cover={
<div
className='relative h-full'
style={createCoverStyle(primaryDarkerChannel)}
>
<div className='relative z-10 h-full flex items-center justify-between p-4'>
<div className='flex-1 min-w-0 mr-4'>
<div className='flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2'>
<h2
className='text-lg sm:text-xl font-bold truncate'
style={COMPONENT_STYLES.titleText}
>
{title}
</h2>
<Tag
style={COMPONENT_STYLES.tag}
shape='circle'
size='small'
className='self-center'
>
{t('共 {{count}} 个模型', { count })}
</Tag>
</div>
<Paragraph
className='text-xs sm:text-sm leading-relaxed !mb-0 cursor-pointer'
style={COMPONENT_STYLES.descriptionText}
ellipsis={{ rows: 2 }}
onClick={() => handleOpenDescModal(description)}
>
{description}
</Paragraph>
</div>
<div className='flex-shrink-0'>{rightContent}</div>
</div>
</div>
}
>
{renderSearchActions()}
</Card>
),
[renderSearchActions, createCoverStyle, handleOpenDescModal, t],
);
const renderAllVendorsAvatar = useCallback(() => {
const currentVendor =
vendorInfo.length > 0
? vendorInfo[currentOffset % vendorInfo.length]
: null;
return renderVendorAvatar(currentVendor, t, true);
}, [vendorInfo, currentOffset, t]);
if (filterVendor === 'all') {
const headerCard = renderHeaderCard({
title: t('全部供应商'),
count: currentModelCount,
description: getVendorDescription('all'),
rightContent: renderAllVendorsAvatar(),
primaryDarkerChannel: THEME_COLORS.allVendors.primary,
});
return (
<>
{headerCard}
{renderDescriptionModal()}
</>
);
}
const currentVendor = vendorInfo.find((v) => v.name === filterVendor);
if (!currentVendor) {
return null;
}
const vendorDisplayName = getVendorDisplayName(currentVendor.name, t);
if (filterVendor === 'all') {
const headerCard = renderHeaderCard({
title: t('全部供应商'),
title: vendorDisplayName,
count: currentModelCount,
description: getVendorDescription('all'),
rightContent: renderAllVendorsAvatar(),
primaryDarkerChannel: THEME_COLORS.allVendors.primary
description:
currentVendor.description || getVendorDescription(currentVendor.name),
rightContent: renderVendorAvatar(currentVendor, t, false),
primaryDarkerChannel: THEME_COLORS.specific.primary,
});
return (
<>
{headerCard}
{renderDescriptionModal()}
</>
);
}
const currentVendor = vendorInfo.find(v => v.name === filterVendor);
if (!currentVendor) {
return null;
}
const vendorDisplayName = getVendorDisplayName(currentVendor.name, t);
const headerCard = renderHeaderCard({
title: vendorDisplayName,
count: currentModelCount,
description: currentVendor.description || getVendorDescription(currentVendor.name),
rightContent: renderVendorAvatar(currentVendor, t, false),
primaryDarkerChannel: THEME_COLORS.specific.primary
});
return (
<>
{headerCard}
{renderDescriptionModal()}
</>
);
});
},
);
PricingVendorIntro.displayName = 'PricingVendorIntro';
export default PricingVendorIntro;
export default PricingVendorIntro;

212
web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
View File

@@ -24,17 +24,17 @@ const THEME_COLORS = {
allVendors: {
primary: '37 99 235',
background: 'rgba(59, 130, 246, 0.1)',
border: 'rgba(59, 130, 246, 0.2)'
border: 'rgba(59, 130, 246, 0.2)',
},
specific: {
primary: '16 185 129',
background: 'rgba(16, 185, 129, 0.1)',
border: 'rgba(16, 185, 129, 0.2)'
border: 'rgba(16, 185, 129, 0.2)',
},
neutral: {
background: 'rgba(156, 163, 175, 0.1)',
border: 'rgba(156, 163, 175, 0.2)'
}
border: 'rgba(156, 163, 175, 0.2)',
},
};
const SIZES = {
@@ -43,7 +43,7 @@ const SIZES = {
description: { height: 14 },
avatar: { width: 40, height: 40 },
searchInput: { height: 32 },
button: { width: 80, height: 32 }
button: { width: 80, height: 32 },
};
const SKELETON_STYLES = {
@@ -52,129 +52,161 @@ const SKELETON_STYLES = {
backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
backgroundRepeat: 'no-repeat',
}),
title: {
backgroundColor: 'rgba(255, 255, 255, 0.25)',
borderRadius: 8,
backdropFilter: 'blur(4px)'
backdropFilter: 'blur(4px)',
},
tag: {
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderRadius: 9999,
backdropFilter: 'blur(4px)',
border: '1px solid rgba(255,255,255,0.3)'
border: '1px solid rgba(255,255,255,0.3)',
},
description: {
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderRadius: 4,
backdropFilter: 'blur(4px)'
backdropFilter: 'blur(4px)',
},
avatar: (isAllVendors) => {
const colors = isAllVendors ? THEME_COLORS.allVendors : THEME_COLORS.specific;
const colors = isAllVendors
? THEME_COLORS.allVendors
: THEME_COLORS.specific;
return {
backgroundColor: colors.background,
borderRadius: 12,
border: `1px solid ${colors.border}`
border: `1px solid ${colors.border}`,
};
},
searchInput: {
backgroundColor: THEME_COLORS.neutral.background,
borderRadius: 8,
border: `1px solid ${THEME_COLORS.neutral.border}`
border: `1px solid ${THEME_COLORS.neutral.border}`,
},
button: {
backgroundColor: THEME_COLORS.neutral.background,
borderRadius: 8,
border: `1px solid ${THEME_COLORS.neutral.border}`
}
border: `1px solid ${THEME_COLORS.neutral.border}`,
},
};
const createSkeletonRect = (style = {}, key = null) => (
<div key={key} className="animate-pulse" style={style} />
<div key={key} className='animate-pulse' style={style} />
);
const PricingVendorIntroSkeleton = memo(({
isAllVendors = false,
isMobile = false
}) => {
const placeholder = (
<Card className="!rounded-2xl shadow-sm border-0"
cover={
<div
className="relative h-full"
style={SKELETON_STYLES.cover(isAllVendors ? THEME_COLORS.allVendors.primary : THEME_COLORS.specific.primary)}
>
<div className="relative z-10 h-full flex items-center justify-between p-4">
<div className="flex-1 min-w-0 mr-4">
<div className="flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2">
{createSkeletonRect({
...SKELETON_STYLES.title,
width: isAllVendors ? SIZES.title.width.all : SIZES.title.width.specific,
height: SIZES.title.height
}, 'title')}
{createSkeletonRect({
...SKELETON_STYLES.tag,
width: SIZES.tag.width,
height: SIZES.tag.height
}, 'tag')}
const PricingVendorIntroSkeleton = memo(
({ isAllVendors = false, isMobile = false }) => {
const placeholder = (
<Card
className='!rounded-2xl shadow-sm border-0'
cover={
<div
className='relative h-full'
style={SKELETON_STYLES.cover(
isAllVendors
? THEME_COLORS.allVendors.primary
: THEME_COLORS.specific.primary,
)}
>
<div className='relative z-10 h-full flex items-center justify-between p-4'>
<div className='flex-1 min-w-0 mr-4'>
<div className='flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2'>
{createSkeletonRect(
{
...SKELETON_STYLES.title,
width: isAllVendors
? SIZES.title.width.all
: SIZES.title.width.specific,
height: SIZES.title.height,
},
'title',
)}
{createSkeletonRect(
{
...SKELETON_STYLES.tag,
width: SIZES.tag.width,
height: SIZES.tag.height,
},
'tag',
)}
</div>
<div className='space-y-2'>
{createSkeletonRect(
{
...SKELETON_STYLES.description,
width: '100%',
height: SIZES.description.height,
},
'desc1',
)}
{createSkeletonRect(
{
...SKELETON_STYLES.description,
backgroundColor: 'rgba(255, 255, 255, 0.15)',
width: '75%',
height: SIZES.description.height,
},
'desc2',
)}
</div>
</div>
<div className="space-y-2">
{createSkeletonRect({
...SKELETON_STYLES.description,
width: '100%',
height: SIZES.description.height
}, 'desc1')}
{createSkeletonRect({
...SKELETON_STYLES.description,
backgroundColor: 'rgba(255, 255, 255, 0.15)',
width: '75%',
height: SIZES.description.height
}, 'desc2')}
</div>
</div>
<div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center">
{createSkeletonRect({
...SKELETON_STYLES.avatar(isAllVendors),
width: SIZES.avatar.width,
height: SIZES.avatar.height
}, 'avatar')}
<div className='flex-shrink-0 w-16 h-16 rounded-2xl bg-white/90 shadow-md backdrop-blur-sm flex items-center justify-center'>
{createSkeletonRect(
{
...SKELETON_STYLES.avatar(isAllVendors),
width: SIZES.avatar.width,
height: SIZES.avatar.height,
},
'avatar',
)}
</div>
</div>
</div>
}
>
<div className='flex items-center gap-2 w-full'>
<div className='flex-1'>
{createSkeletonRect(
{
...SKELETON_STYLES.searchInput,
width: '100%',
height: SIZES.searchInput.height,
},
'search',
)}
</div>
{createSkeletonRect(
{
...SKELETON_STYLES.button,
width: SIZES.button.width,
height: SIZES.button.height,
},
'copy-button',
)}
{isMobile &&
createSkeletonRect(
{
...SKELETON_STYLES.button,
width: SIZES.button.width,
height: SIZES.button.height,
},
'filter-button',
)}
</div>
}
>
<div className="flex items-center gap-2 w-full">
<div className="flex-1">
{createSkeletonRect({
...SKELETON_STYLES.searchInput,
width: '100%',
height: SIZES.searchInput.height
}, 'search')}
</div>
</Card>
);
{createSkeletonRect({
...SKELETON_STYLES.button,
width: SIZES.button.width,
height: SIZES.button.height
}, 'copy-button')}
{isMobile && createSkeletonRect({
...SKELETON_STYLES.button,
width: SIZES.button.width,
height: SIZES.button.height
}, 'filter-button')}
</div>
</Card>
);
return (
<Skeleton loading={true} active placeholder={placeholder}></Skeleton>
);
});
return (
<Skeleton loading={true} active placeholder={placeholder}></Skeleton>
);
},
);
PricingVendorIntroSkeleton.displayName = 'PricingVendorIntroSkeleton';
export default PricingVendorIntroSkeleton;
export default PricingVendorIntroSkeleton;

37
web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
View File

@@ -22,30 +22,23 @@ import PricingVendorIntro from './PricingVendorIntro';
import PricingVendorIntroSkeleton from './PricingVendorIntroSkeleton';
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
const PricingVendorIntroWithSkeleton = memo(({
loading = false,
filterVendor,
...restProps
}) => {
const showSkeleton = useMinimumLoadingTime(loading);
const PricingVendorIntroWithSkeleton = memo(
({ loading = false, filterVendor, ...restProps }) => {
const showSkeleton = useMinimumLoadingTime(loading);
if (showSkeleton) {
return (
<PricingVendorIntroSkeleton
isAllVendors={filterVendor === 'all'}
isMobile={restProps.isMobile}
/>
);
}
if (showSkeleton) {
return (
<PricingVendorIntroSkeleton
isAllVendors={filterVendor === 'all'}
isMobile={restProps.isMobile}
/>
);
}
return (
<PricingVendorIntro
filterVendor={filterVendor}
{...restProps}
/>
);
});
return <PricingVendorIntro filterVendor={filterVendor} {...restProps} />;
},
);
PricingVendorIntroWithSkeleton.displayName = 'PricingVendorIntroWithSkeleton';
export default PricingVendorIntroWithSkeleton;
export default PricingVendorIntroWithSkeleton;

247
web/src/components/table/model-pricing/layout/header/SearchActions.jsx
View File

@@ -21,138 +21,137 @@ import React, { memo, useCallback } from 'react';
import { Input, Button, Switch, Select, Divider } from '@douyinfe/semi-ui';
import { IconSearch, IconCopy, IconFilter } from '@douyinfe/semi-icons';
const SearchActions = memo(({
selectedRowKeys = [],
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile = false,
searchValue = '',
setShowFilterModal,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
t
}) => {
const handleCopyClick = useCallback(() => {
if (copyText && selectedRowKeys.length > 0) {
copyText(selectedRowKeys);
}
}, [copyText, selectedRowKeys]);
const SearchActions = memo(
({
selectedRowKeys = [],
copyText,
handleChange,
handleCompositionStart,
handleCompositionEnd,
isMobile = false,
searchValue = '',
setShowFilterModal,
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
showRatio,
setShowRatio,
viewMode,
setViewMode,
tokenUnit,
setTokenUnit,
t,
}) => {
const handleCopyClick = useCallback(() => {
if (copyText && selectedRowKeys.length > 0) {
copyText(selectedRowKeys);
}
}, [copyText, selectedRowKeys]);
const handleFilterClick = useCallback(() => {
setShowFilterModal?.(true);
}, [setShowFilterModal]);
const handleFilterClick = useCallback(() => {
setShowFilterModal?.(true);
}, [setShowFilterModal]);
const handleViewModeToggle = useCallback(() => {
setViewMode?.(viewMode === 'table' ? 'card' : 'table');
}, [viewMode, setViewMode]);
const handleViewModeToggle = useCallback(() => {
setViewMode?.(viewMode === 'table' ? 'card' : 'table');
}, [viewMode, setViewMode]);
const handleTokenUnitToggle = useCallback(() => {
setTokenUnit?.(tokenUnit === 'K' ? 'M' : 'K');
}, [tokenUnit, setTokenUnit]);
const handleTokenUnitToggle = useCallback(() => {
setTokenUnit?.(tokenUnit === 'K' ? 'M' : 'K');
}, [tokenUnit, setTokenUnit]);
return (
<div className="flex items-center gap-2 w-full">
<div className="flex-1">
<Input
prefix={<IconSearch />}
placeholder={t('模糊搜索模型名称')}
value={searchValue}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
onChange={handleChange}
showClear
/>
</div>
return (
<div className='flex items-center gap-2 w-full'>
<div className='flex-1'>
<Input
prefix={<IconSearch />}
placeholder={t('模糊搜索模型名称')}
value={searchValue}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
onChange={handleChange}
showClear
/>
</div>
<Button
theme="outline"
type="primary"
icon={<IconCopy />}
onClick={handleCopyClick}
disabled={selectedRowKeys.length === 0}
className="!bg-blue-500 hover:!bg-blue-600 !text-white disabled:!bg-gray-300 disabled:!text-gray-500"
>
{t('复制')}
</Button>
{!isMobile && (
<>
<Divider layout="vertical" margin="8px" />
{/* 充值价格显示开关 */}
<div className="flex items-center gap-2">
<span className="text-sm text-gray-600">{t('充值价格显示')}</span>
<Switch
checked={showWithRecharge}
onChange={setShowWithRecharge}
/>
</div>
{/* 货币单位选择 */}
{showWithRecharge && (
<Select
value={currency}
onChange={setCurrency}
optionList={[
{ value: 'USD', label: 'USD' },
{ value: 'CNY', label: 'CNY' }
]}
/>
)}
{/* 显示倍率开关 */}
<div className="flex items-center gap-2">
<span className="text-sm text-gray-600">{t('倍率')}</span>
<Switch
checked={showRatio}
onChange={setShowRatio}
/>
</div>
{/* 视图模式切换按钮 */}
<Button
theme={viewMode === 'table' ? 'solid' : 'outline'}
type={viewMode === 'table' ? 'primary' : 'tertiary'}
onClick={handleViewModeToggle}
>
{t('表格视图')}
</Button>
{/* Token单位切换按钮 */}
<Button
theme={tokenUnit === 'K' ? 'solid' : 'outline'}
type={tokenUnit === 'K' ? 'primary' : 'tertiary'}
onClick={handleTokenUnitToggle}
>
{tokenUnit}
</Button>
</>
)}
{isMobile && (
<Button
theme="outline"
type="tertiary"
icon={<IconFilter />}
onClick={handleFilterClick}
theme='outline'
type='primary'
icon={<IconCopy />}
onClick={handleCopyClick}
disabled={selectedRowKeys.length === 0}
className='!bg-blue-500 hover:!bg-blue-600 !text-white disabled:!bg-gray-300 disabled:!text-gray-500'
>
{t('筛选')}
{t('复制')}
</Button>
)}
</div>
);
});
{!isMobile && (
<>
<Divider layout='vertical' margin='8px' />
{/* 充值价格显示开关 */}
<div className='flex items-center gap-2'>
<span className='text-sm text-gray-600'>{t('充值价格显示')}</span>
<Switch
checked={showWithRecharge}
onChange={setShowWithRecharge}
/>
</div>
{/* 货币单位选择 */}
{showWithRecharge && (
<Select
value={currency}
onChange={setCurrency}
optionList={[
{ value: 'USD', label: 'USD' },
{ value: 'CNY', label: 'CNY' },
]}
/>
)}
{/* 显示倍率开关 */}
<div className='flex items-center gap-2'>
<span className='text-sm text-gray-600'>{t('倍率')}</span>
<Switch checked={showRatio} onChange={setShowRatio} />
</div>
{/* 视图模式切换按钮 */}
<Button
theme={viewMode === 'table' ? 'solid' : 'outline'}
type={viewMode === 'table' ? 'primary' : 'tertiary'}
onClick={handleViewModeToggle}
>
{t('表格视图')}
</Button>
{/* Token单位切换按钮 */}
<Button
theme={tokenUnit === 'K' ? 'solid' : 'outline'}
type={tokenUnit === 'K' ? 'primary' : 'tertiary'}
onClick={handleTokenUnitToggle}
>
{tokenUnit}
</Button>
</>
)}
{isMobile && (
<Button
theme='outline'
type='tertiary'
icon={<IconFilter />}
onClick={handleFilterClick}
>
{t('筛选')}
</Button>
)}
</div>
);
},
);
SearchActions.displayName = 'SearchActions';
export default SearchActions;
export default SearchActions;

42
web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
View File

@@ -18,14 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
import {
SideSheet,
Typography,
Button,
} from '@douyinfe/semi-ui';
import {
IconClose,
} from '@douyinfe/semi-icons';
import { SideSheet, Typography, Button } from '@douyinfe/semi-ui';
import { IconClose } from '@douyinfe/semi-icons';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
import ModelHeader from './components/ModelHeader';
@@ -54,36 +48,46 @@ const ModelDetailSideSheet = ({
return (
<SideSheet
placement="right"
title={<ModelHeader modelData={modelData} vendorsMap={vendorsMap} t={t} />}
placement='right'
title={
<ModelHeader modelData={modelData} vendorsMap={vendorsMap} t={t} />
}
bodyStyle={{
padding: '0',
display: 'flex',
flexDirection: 'column',
borderBottom: '1px solid var(--semi-color-border)'
borderBottom: '1px solid var(--semi-color-border)',
}}
visible={visible}
width={isMobile ? '100%' : 600}
closeIcon={
<Button
className="semi-button-tertiary semi-button-size-small semi-button-borderless"
type="button"
className='semi-button-tertiary semi-button-size-small semi-button-borderless'
type='button'
icon={<IconClose />}
onClick={onClose}
/>
}
onCancel={onClose}
>
<div className="p-2">
<div className='p-2'>
{!modelData && (
<div className="flex justify-center items-center py-10">
<Text type="secondary">{t('加载中...')}</Text>
<div className='flex justify-center items-center py-10'>
<Text type='secondary'>{t('加载中...')}</Text>
</div>
)}
{modelData && (
<>
<ModelBasicInfo modelData={modelData} vendorsMap={vendorsMap} t={t} />
<ModelEndpoints modelData={modelData} endpointMap={endpointMap} t={t} />
<ModelBasicInfo
modelData={modelData}
vendorsMap={vendorsMap}
t={t}
/>
<ModelEndpoints
modelData={modelData}
endpointMap={endpointMap}
t={t}
/>
<ModelPricingTable
modelData={modelData}
groupRatio={groupRatio}
@@ -102,4 +106,4 @@ const ModelDetailSideSheet = ({
);
};
export default ModelDetailSideSheet;
export default ModelDetailSideSheet;

17
web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
View File

@@ -23,12 +23,7 @@ import { resetPricingFilters } from '../../../../helpers/utils';
import FilterModalContent from './components/FilterModalContent';
import FilterModalFooter from './components/FilterModalFooter';
const PricingFilterModal = ({
visible,
onClose,
sidebarProps,
t
}) => {
const PricingFilterModal = ({ visible, onClose, sidebarProps, t }) => {
const handleResetFilters = () =>
resetPricingFilters({
handleChange: sidebarProps.handleChange,
@@ -46,11 +41,7 @@ const PricingFilterModal = ({
});
const footer = (
<FilterModalFooter
onReset={handleResetFilters}
onConfirm={onClose}
t={t}
/>
<FilterModalFooter onReset={handleResetFilters} onConfirm={onClose} t={t} />
);
return (
@@ -65,7 +56,7 @@ const PricingFilterModal = ({
height: 'calc(100vh - 160px)',
overflowY: 'auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
msOverflowStyle: 'none',
}}
>
<FilterModalContent sidebarProps={sidebarProps} t={t} />
@@ -73,4 +64,4 @@ const PricingFilterModal = ({
);
};
export default PricingFilterModal;
export default PricingFilterModal;

2
web/src/components/table/model-pricing/modal/components/FilterModalContent.jsx
View File

@@ -135,4 +135,4 @@ const FilterModalContent = ({ sidebarProps, t }) => {
);
};
export default FilterModalContent;
export default FilterModalContent;

16
web/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx
View File

@@ -22,23 +22,15 @@ import { Button } from '@douyinfe/semi-ui';
const FilterModalFooter = ({ onReset, onConfirm, t }) => {
return (
<div className="flex justify-end">
<Button
theme="outline"
type='tertiary'
onClick={onReset}
>
<div className='flex justify-end'>
<Button theme='outline' type='tertiary' onClick={onReset}>
{t('重置')}
</Button>
<Button
theme="solid"
type="primary"
onClick={onConfirm}
>
<Button theme='solid' type='primary' onClick={onConfirm}>
{t('确定')}
</Button>
</div>
);
};
export default FilterModalFooter;
export default FilterModalFooter;

29
web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
View File

@@ -47,8 +47,8 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
const tags = [];
if (modelData?.tags) {
const customTags = modelData.tags.split(',').filter(tag => tag.trim());
customTags.forEach(tag => {
const customTags = modelData.tags.split(',').filter((tag) => tag.trim());
customTags.forEach((tag) => {
const tagText = tag.trim();
tags.push({ text: tagText, color: stringToColor(tagText) });
});
@@ -58,27 +58,24 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
};
return (
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<Card className='!rounded-2xl shadow-sm border-0 mb-6'>
<div className='flex items-center mb-4'>
<Avatar size='small' color='blue' className='mr-2 shadow-md'>
<IconInfoCircle size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('基本信息')}</Text>
<div className="text-xs text-gray-600">{t('模型的详细描述和基本特性')}</div>
<Text className='text-lg font-medium'>{t('基本信息')}</Text>
<div className='text-xs text-gray-600'>
{t('模型的详细描述和基本特性')}
</div>
</div>
</div>
<div className="text-gray-600">
<p className="mb-4">{getModelDescription()}</p>
<div className='text-gray-600'>
<p className='mb-4'>{getModelDescription()}</p>
{getModelTags().length > 0 && (
<Space wrap>
{getModelTags().map((tag, index) => (
<Tag
key={index}
color={tag.color}
shape="circle"
size="small"
>
<Tag key={index} color={tag.color} shape='circle' size='small'>
{tag.text}
</Tag>
))}
@@ -89,4 +86,4 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
);
};
export default ModelBasicInfo;
export default ModelBasicInfo;

33
web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
View File

@@ -30,7 +30,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
const mapping = endpointMap;
const types = modelData.supported_endpoint_types || [];
return types.map(type => {
return types.map((type) => {
const info = mapping[type] || {};
let path = info.path || '';
// 如果路径中包含 {model} 占位符，替换为真实模型名称
@@ -42,22 +42,19 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
return (
<div
key={type}
className="flex justify-between border-b border-dashed last:border-0 py-2 last:pb-0"
className='flex justify-between border-b border-dashed last:border-0 py-2 last:pb-0'
style={{ borderColor: 'var(--semi-color-border)' }}
>
<span className="flex items-center pr-5">
<Badge dot type="success" className="mr-2" />
{type}{path && '：'}
<span className='flex items-center pr-5'>
<Badge dot type='success' className='mr-2' />
{type}
{path && '：'}
{path && (
<span className="text-gray-500 md:ml-1 break-all">
{path}
</span>
<span className='text-gray-500 md:ml-1 break-all'>{path}</span>
)}
</span>
{path && (
<span className="text-gray-500 text-xs md:ml-1">
{method}
</span>
<span className='text-gray-500 text-xs md:ml-1'>{method}</span>
)}
</div>
);
@@ -65,14 +62,16 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
};
return (
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4">
<Avatar size="small" color="purple" className="mr-2 shadow-md">
<Card className='!rounded-2xl shadow-sm border-0 mb-6'>
<div className='flex items-center mb-4'>
<Avatar size='small' color='purple' className='mr-2 shadow-md'>
<IconLink size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('API端点')}</Text>
<div className="text-xs text-gray-600">{t('模型支持的接口端点信息')}</div>
<Text className='text-lg font-medium'>{t('API端点')}</Text>
<div className='text-xs text-gray-600'>
{t('模型支持的接口端点信息')}
</div>
</div>
</div>
{renderAPIEndpoints()}
@@ -80,4 +79,4 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
);
};
export default ModelEndpoints;
export default ModelEndpoints;

23
web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
View File

@@ -24,8 +24,9 @@ import { getLobeHubIcon } from '../../../../../helpers';
const { Paragraph } = Typography;
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",
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',
};
const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
@@ -57,13 +58,13 @@ const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
return (
<div className={CARD_STYLES.container}>
<Avatar
size="large"
size='large'
style={{
width: 48,
height: 48,
borderRadius: 16,
fontSize: 16,
fontWeight: 'bold'
fontWeight: 'bold',
}}
>
{avatarText}
@@ -73,21 +74,23 @@ const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
};
return (
<div className="flex items-center">
<div className='flex items-center'>
{getModelIcon()}
<div className="ml-3 font-normal">
<div className='ml-3 font-normal'>
<Paragraph
className="!mb-0 !text-lg !font-medium"
className='!mb-0 !text-lg !font-medium'
copyable={{
content: modelData?.model_name || '',
onCopy: () => Toast.success({ content: t('已复制模型名称') })
onCopy: () => Toast.success({ content: t('已复制模型名称') }),
}}
>
<span className="truncate max-w-60 font-bold">{modelData?.model_name || t('未知模型')}</span>
<span className='truncate max-w-60 font-bold'>
{modelData?.model_name || t('未知模型')}
</span>
</Paragraph>
</div>
</div>
);
};
export default ModelHeader;
export default ModelHeader;

105
web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
View File

@@ -35,37 +35,50 @@ const ModelPricingTable = ({
autoGroups = [],
t,
}) => {
const modelEnableGroups = Array.isArray(modelData?.enable_groups) ? modelData.enable_groups : [];
const autoChain = autoGroups.filter(g => modelEnableGroups.includes(g));
const modelEnableGroups = Array.isArray(modelData?.enable_groups)
? modelData.enable_groups
: [];
const autoChain = autoGroups.filter((g) => modelEnableGroups.includes(g));
const renderGroupPriceTable = () => {
// 仅展示模型可用的分组：模型 enable_groups 与用户可用分组的交集
const availableGroups = Object.keys(usableGroup || {})
.filter(g => g !== '')
.filter(g => g !== 'auto')
.filter(g => modelEnableGroups.includes(g));
.filter((g) => g !== '')
.filter((g) => g !== 'auto')
.filter((g) => modelEnableGroups.includes(g));
// 准备表格数据
const tableData = availableGroups.map(group => {
const priceData = modelData ? calculateModelPrice({
record: modelData,
selectedGroup: group,
groupRatio,
tokenUnit,
displayPrice,
currency
}) : { inputPrice: '-', outputPrice: '-', price: '-' };
const tableData = availableGroups.map((group) => {
const priceData = modelData
? calculateModelPrice({
record: modelData,
selectedGroup: group,
groupRatio,
tokenUnit,
displayPrice,
currency,
})
: { inputPrice: '-', outputPrice: '-', price: '-' };
// 获取分组倍率
const groupRatioValue = groupRatio && groupRatio[group] ? groupRatio[group] : 1;
const groupRatioValue =
groupRatio && groupRatio[group] ? groupRatio[group] : 1;
return {
key: group,
group: group,
ratio: groupRatioValue,
billingType: modelData?.quota_type === 0 ? t('按量计费') : (modelData?.quota_type === 1 ? t('按次计费') : '-'),
billingType:
modelData?.quota_type === 0
? t('按量计费')
: modelData?.quota_type === 1
? t('按次计费')
: '-',
inputPrice: modelData?.quota_type === 0 ? priceData.inputPrice : '-',
outputPrice: modelData?.quota_type === 0 ? (priceData.completionPrice || priceData.outputPrice) : '-',
outputPrice:
modelData?.quota_type === 0
? priceData.completionPrice || priceData.outputPrice
: '-',
fixedPrice: modelData?.quota_type === 1 ? priceData.price : '-',
};
});
@@ -76,8 +89,9 @@ const ModelPricingTable = ({
title: t('分组'),
dataIndex: 'group',
render: (text) => (
<Tag color="white" size="small" shape="circle">
{text}{t('分组')}
<Tag color='white' size='small' shape='circle'>
{text}
{t('分组')}
</Tag>
),
},
@@ -89,7 +103,7 @@ const ModelPricingTable = ({
title: t('倍率'),
dataIndex: 'ratio',
render: (text) => (
<Tag color="white" size="small" shape="circle">
<Tag color='white' size='small' shape='circle'>
{text}x
</Tag>
),
@@ -105,7 +119,7 @@ const ModelPricingTable = ({
if (text === t('按量计费')) color = 'violet';
else if (text === t('按次计费')) color = 'teal';
return (
<Tag color={color} size="small" shape="circle">
<Tag color={color} size='small' shape='circle'>
{text || '-'}
</Tag>
);
@@ -121,8 +135,10 @@ const ModelPricingTable = ({
dataIndex: 'inputPrice',
render: (text) => (
<>
<div className="font-semibold text-orange-600">{text}</div>
<div className="text-xs text-gray-500">/ {tokenUnit === 'K' ? '1K' : '1M'} tokens</div>
<div className='font-semibold text-orange-600'>{text}</div>
<div className='text-xs text-gray-500'>
/ {tokenUnit === 'K' ? '1K' : '1M'} tokens
</div>
</>
),
},
@@ -131,11 +147,13 @@ const ModelPricingTable = ({
dataIndex: 'outputPrice',
render: (text) => (
<>
<div className="font-semibold text-orange-600">{text}</div>
<div className="text-xs text-gray-500">/ {tokenUnit === 'K' ? '1K' : '1M'} tokens</div>
<div className='font-semibold text-orange-600'>{text}</div>
<div className='text-xs text-gray-500'>
/ {tokenUnit === 'K' ? '1K' : '1M'} tokens
</div>
</>
),
}
},
);
} else {
// 按次计费
@@ -144,8 +162,8 @@ const ModelPricingTable = ({
dataIndex: 'fixedPrice',
render: (text) => (
<>
<div className="font-semibold text-orange-600">{text}</div>
<div className="text-xs text-gray-500">/ 次</div>
<div className='font-semibold text-orange-600'>{text}</div>
<div className='text-xs text-gray-500'>/ 次</div>
</>
),
});
@@ -156,32 +174,37 @@ const ModelPricingTable = ({
dataSource={tableData}
columns={columns}
pagination={false}
size="small"
size='small'
bordered={false}
className="!rounded-lg"
className='!rounded-lg'
/>
);
};
return (
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-4">
<Avatar size="small" color="orange" className="mr-2 shadow-md">
<Card className='!rounded-2xl shadow-sm border-0'>
<div className='flex items-center mb-4'>
<Avatar size='small' color='orange' className='mr-2 shadow-md'>
<IconCoinMoneyStroked size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('分组价格')}</Text>
<div className="text-xs text-gray-600">{t('不同用户分组的价格信息')}</div>
<Text className='text-lg font-medium'>{t('分组价格')}</Text>
<div className='text-xs text-gray-600'>
{t('不同用户分组的价格信息')}
</div>
</div>
</div>
{autoChain.length > 0 && (
<div className="flex flex-wrap items-center gap-1 mb-4">
<span className="text-sm text-gray-600">{t('auto分组调用链路')}</span>
<span className="text-sm">→</span>
<div className='flex flex-wrap items-center gap-1 mb-4'>
<span className='text-sm text-gray-600'>{t('auto分组调用链路')}</span>
<span className='text-sm'>→</span>
{autoChain.map((g, idx) => (
<React.Fragment key={g}>
<Tag color="white" size="small" shape="circle">{g}{t('分组')}</Tag>
{idx < autoChain.length - 1 && <span className="text-sm">→</span>}
<Tag color='white' size='small' shape='circle'>
{g}
{t('分组')}
</Tag>
{idx < autoChain.length - 1 && <span className='text-sm'>→</span>}
</React.Fragment>
))}
</div>
@@ -191,4 +214,4 @@ const ModelPricingTable = ({
);
};
export default ModelPricingTable;
export default ModelPricingTable;

61
web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
View File

@@ -23,35 +23,35 @@ import { Card, Skeleton } from '@douyinfe/semi-ui';
const PricingCardSkeleton = ({
skeletonCount = 100,
rowSelection = false,
showRatio = false
showRatio = false,
}) => {
const placeholder = (
<div className="px-2 pt-2">
<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
<div className='px-2 pt-2'>
<div className='grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4'>
{Array.from({ length: skeletonCount }).map((_, index) => (
<Card
key={index}
className="!rounded-2xl border border-gray-200"
className='!rounded-2xl border border-gray-200'
bodyStyle={{ padding: '24px' }}
>
{/* 头部：图标 + 模型名称 + 操作按钮 */}
<div className="flex items-start justify-between mb-3">
<div className="flex items-start space-x-3 flex-1 min-w-0">
<div className='flex items-start justify-between mb-3'>
<div className='flex items-start space-x-3 flex-1 min-w-0'>
{/* 模型图标骨架 */}
<div className="w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm">
<div className='w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm'>
<Skeleton.Avatar
size="large"
size='large'
style={{ width: 48, height: 48, borderRadius: 16 }}
/>
</div>
{/* 模型名称和价格区域 */}
<div className="flex-1 min-w-0">
<div className='flex-1 min-w-0'>
{/* 模型名称骨架 */}
<Skeleton.Title
style={{
width: `${120 + (index % 3) * 30}px`,
height: 20,
marginBottom: 8
marginBottom: 8,
}}
/>
{/* 价格信息骨架 */}
@@ -59,24 +59,30 @@ const PricingCardSkeleton = ({
style={{
width: `${160 + (index % 4) * 20}px`,
height: 20,
marginBottom: 0
marginBottom: 0,
}}
/>
</div>
</div>
<div className="flex items-center space-x-2 ml-3">
<div className='flex items-center space-x-2 ml-3'>
{/* 复制按钮骨架 */}
<Skeleton.Button size="small" style={{ width: 16, height: 16, borderRadius: 4 }} />
<Skeleton.Button
size='small'
style={{ width: 16, height: 16, borderRadius: 4 }}
/>
{/* 勾选框骨架 */}
{rowSelection && (
<Skeleton.Button size="small" style={{ width: 16, height: 16, borderRadius: 2 }} />
<Skeleton.Button
size='small'
style={{ width: 16, height: 16, borderRadius: 2 }}
/>
)}
</div>
</div>
{/* 模型描述骨架 */}
<div className="mb-4">
<div className='mb-4'>
<Skeleton.Paragraph
rows={2}
style={{ marginBottom: 0 }}
@@ -85,15 +91,15 @@ const PricingCardSkeleton = ({
</div>
{/* 标签区域骨架 */}
<div className="flex flex-wrap gap-2">
<div className='flex flex-wrap gap-2'>
{Array.from({ length: 2 + (index % 3) }).map((_, tagIndex) => (
<Skeleton.Button
key={tagIndex}
size="small"
size='small'
style={{
width: 64,
height: 18,
borderRadius: 10
borderRadius: 10,
}}
/>
))}
@@ -101,14 +107,17 @@ const PricingCardSkeleton = ({
{/* 倍率信息骨架（可选） */}
{showRatio && (
<div className="mt-4 pt-3 border-t border-gray-100">
<div className="flex items-center space-x-1 mb-2">
<div className='mt-4 pt-3 border-t border-gray-100'>
<div className='flex items-center space-x-1 mb-2'>
<Skeleton.Title
style={{ width: 60, height: 12, marginBottom: 0 }}
/>
<Skeleton.Button size="small" style={{ width: 14, height: 14, borderRadius: 7 }} />
<Skeleton.Button
size='small'
style={{ width: 14, height: 14, borderRadius: 7 }}
/>
</div>
<div className="grid grid-cols-3 gap-2">
<div className='grid grid-cols-3 gap-2'>
{Array.from({ length: 3 }).map((_, ratioIndex) => (
<Skeleton.Title
key={ratioIndex}
@@ -123,15 +132,13 @@ const PricingCardSkeleton = ({
</div>
{/* 分页骨架 */}
<div className="flex justify-center mt-6 py-4 border-t pricing-pagination-divider">
<div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
<Skeleton.Button style={{ width: 300, height: 32 }} />
</div>
</div>
);
return (
<Skeleton loading={true} active placeholder={placeholder}></Skeleton>
);
return <Skeleton loading={true} active placeholder={placeholder}></Skeleton>;
};
export default PricingCardSkeleton;
export default PricingCardSkeleton;

144
web/src/components/table/model-pricing/view/card/PricingCardView.jsx
View File

@@ -18,21 +18,39 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
import { Card, Tag, Tooltip, Checkbox, Empty, Pagination, Button, Avatar } from '@douyinfe/semi-ui';
import {
Card,
Tag,
Tooltip,
Checkbox,
Empty,
Pagination,
Button,
Avatar,
} from '@douyinfe/semi-ui';
import { IconHelpCircle } from '@douyinfe/semi-icons';
import { Copy } from 'lucide-react';
import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
import { stringToColor, calculateModelPrice, formatPriceInfo, getLobeHubIcon } from '../../../../../helpers';
import {
IllustrationNoResult,
IllustrationNoResultDark,
} from '@douyinfe/semi-illustrations';
import {
stringToColor,
calculateModelPrice,
formatPriceInfo,
getLobeHubIcon,
} from '../../../../../helpers';
import PricingCardSkeleton from './PricingCardSkeleton';
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
import { renderLimitedItems } from '../../../../common/ui/RenderUtils';
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"
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 PricingCardView = ({
@@ -59,7 +77,10 @@ const PricingCardView = ({
}) => {
const showSkeleton = useMinimumLoadingTime(loading);
const startIndex = (currentPage - 1) * pageSize;
const paginatedModels = filteredModels.slice(startIndex, startIndex + pageSize);
const paginatedModels = filteredModels.slice(
startIndex,
startIndex + pageSize,
);
const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
const isMobile = useIsMobile();
@@ -109,13 +130,13 @@ const PricingCardView = ({
return (
<div className={CARD_STYLES.container}>
<Avatar
size="large"
size='large'
style={{
width: 48,
height: 48,
borderRadius: 16,
fontSize: 16,
fontWeight: 'bold'
fontWeight: 'bold',
}}
>
{avatarText}
@@ -133,19 +154,19 @@ const PricingCardView = ({
const renderTags = (record) => {
// 计费类型标签（左边）
let billingTag = (
<Tag key="billing" shape='circle' color='white' size='small'>
<Tag key='billing' shape='circle' color='white' size='small'>
-
</Tag>
);
if (record.quota_type === 1) {
billingTag = (
<Tag key="billing" shape='circle' color='teal' size='small'>
<Tag key='billing' shape='circle' color='teal' size='small'>
{t('按次计费')}
</Tag>
);
} else if (record.quota_type === 0) {
billingTag = (
<Tag key="billing" shape='circle' color='violet' size='small'>
<Tag key='billing' shape='circle' color='violet' size='small'>
{t('按量计费')}
</Tag>
);
@@ -157,24 +178,31 @@ const PricingCardView = ({
const tagArr = record.tags.split(',').filter(Boolean);
tagArr.forEach((tg, idx) => {
customTags.push(
<Tag key={`custom-${idx}`} shape='circle' color={stringToColor(tg)} size='small'>
<Tag
key={`custom-${idx}`}
shape='circle'
color={stringToColor(tg)}
size='small'
>
{tg}
</Tag>
</Tag>,
);
});
}
return (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{billingTag}
</div>
<div className="flex items-center gap-1">
{customTags.length > 0 && renderLimitedItems({
items: customTags.map((tag, idx) => ({ key: `custom-${idx}`, element: tag })),
renderItem: (item, idx) => item.element,
maxDisplay: 3
})}
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>{billingTag}</div>
<div className='flex items-center gap-1'>
{customTags.length > 0 &&
renderLimitedItems({
items: customTags.map((tag, idx) => ({
key: `custom-${idx}`,
element: tag,
})),
renderItem: (item, idx) => item.element,
maxDisplay: 3,
})}
</div>
</div>
);
@@ -192,10 +220,12 @@ const PricingCardView = ({
if (!filteredModels || filteredModels.length === 0) {
return (
<div className="flex justify-center items-center py-20">
<div className='flex justify-center items-center py-20'>
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
darkModeImage={
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
}
description={t('搜索无结果')}
/>
</div>
@@ -203,8 +233,8 @@ const PricingCardView = ({
}
return (
<div className="px-2 pt-2">
<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
<div className='px-2 pt-2'>
<div className='grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4'>
{paginatedModels.map((model, index) => {
const modelKey = getModelKey(model);
const isSelected = selectedRowKeys.includes(modelKey);
@@ -225,27 +255,27 @@ const PricingCardView = ({
bodyStyle={{ height: '100%' }}
onClick={() => openModelDetail && openModelDetail(model)}
>
<div className="flex flex-col h-full">
<div className='flex flex-col h-full'>
{/* 头部：图标 + 模型名称 + 操作按钮 */}
<div className="flex items-start justify-between mb-3">
<div className="flex items-start space-x-3 flex-1 min-w-0">
<div className='flex items-start justify-between 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">
<div className='flex-1 min-w-0'>
<h3 className='text-lg font-bold text-gray-900 truncate'>
{model.model_name}
</h3>
<div className="flex items-center gap-3 text-xs mt-1">
<div className='flex items-center gap-3 text-xs mt-1'>
{formatPriceInfo(priceData, t)}
</div>
</div>
</div>
<div className="flex items-center space-x-2 ml-3">
<div className='flex items-center space-x-2 ml-3'>
{/* 复制按钮 */}
<Button
size="small"
theme="outline"
type="tertiary"
size='small'
theme='outline'
type='tertiary'
icon={<Copy size={12} />}
onClick={(e) => {
e.stopPropagation();
@@ -267,9 +297,9 @@ const PricingCardView = ({
</div>
{/* 模型描述 - 占据剩余空间 */}
<div className="flex-1 mb-4">
<div className='flex-1 mb-4'>
<p
className="text-xs line-clamp-2 leading-relaxed"
className='text-xs line-clamp-2 leading-relaxed'
style={{ color: 'var(--semi-color-text-2)' }}
>
{getModelDescription(model)}
@@ -277,19 +307,23 @@ const PricingCardView = ({
</div>
{/* 底部区域 */}
<div className="mt-auto">
<div className='mt-auto'>
{/* 标签区域 */}
{renderTags(model)}
{/* 倍率信息（可选） */}
{showRatio && (
<div className="pt-3">
<div className="flex items-center space-x-1 mb-2">
<span className="text-xs font-medium text-gray-700">{t('倍率信息')}</span>
<Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
<div className='pt-3'>
<div className='flex items-center space-x-1 mb-2'>
<span className='text-xs font-medium text-gray-700'>
{t('倍率信息')}
</span>
<Tooltip
content={t('倍率是为了方便换算不同价格的模型')}
>
<IconHelpCircle
className="text-blue-500 cursor-pointer"
size="small"
className='text-blue-500 cursor-pointer'
size='small'
onClick={(e) => {
e.stopPropagation();
setModalImageUrl('/ratio.png');
@@ -298,12 +332,16 @@ const PricingCardView = ({
/>
</Tooltip>
</div>
<div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
<div className='grid grid-cols-3 gap-2 text-xs text-gray-600'>
<div>
{t('模型')}: {model.quota_type === 0 ? model.model_ratio : t('无')}
{t('模型')}:{' '}
{model.quota_type === 0 ? model.model_ratio : t('无')}
</div>
<div>
{t('补全')}: {model.quota_type === 0 ? parseFloat(model.completion_ratio.toFixed(3)) : t('无')}
{t('补全')}:{' '}
{model.quota_type === 0
? parseFloat(model.completion_ratio.toFixed(3))
: t('无')}
</div>
<div>
{t('分组')}: {priceData?.usedGroupRatio ?? '-'}
@@ -320,7 +358,7 @@ const PricingCardView = ({
{/* 分页 */}
{filteredModels.length > 0 && (
<div className="flex justify-center mt-6 py-4 border-t pricing-pagination-divider">
<div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
<Pagination
currentPage={currentPage}
pageSize={pageSize}
@@ -341,4 +379,4 @@ const PricingCardView = ({
);
};
export default PricingCardView;
export default PricingCardView;

88
web/src/components/table/model-pricing/view/table/PricingTable.jsx
View File

@@ -21,7 +21,7 @@ import React, { useMemo } from 'react';
import { Card, Table, Empty } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
IllustrationNoResultDark,
} from '@douyinfe/semi-illustrations';
import { getPricingTableColumns } from './PricingTableColumns';
@@ -43,9 +43,8 @@ const PricingTable = ({
showRatio,
compactMode = false,
openModelDetail,
t
t,
}) => {
const columns = useMemo(() => {
return getPricingTableColumns({
t,
@@ -74,11 +73,11 @@ const PricingTable = ({
// 更新列定义中的 searchValue
const processedColumns = useMemo(() => {
const cols = columns.map(column => {
const cols = columns.map((column) => {
if (column.dataIndex === 'model_name') {
return {
...column,
filteredValue: searchValue ? [searchValue] : []
filteredValue: searchValue ? [searchValue] : [],
};
}
return column;
@@ -91,38 +90,55 @@ const PricingTable = ({
return cols;
}, [columns, searchValue, compactMode]);
const ModelTable = useMemo(() => (
<Card className="!rounded-xl overflow-hidden" bordered={false}>
<Table
columns={processedColumns}
dataSource={filteredModels}
loading={loading}
rowSelection={rowSelection}
scroll={compactMode ? undefined : { x: 'max-content' }}
onRow={(record) => ({
onClick: () => openModelDetail && openModelDetail(record),
style: { cursor: 'pointer' }
})}
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('搜索无结果')}
style={{ padding: 30 }}
/>
}
pagination={{
defaultPageSize: 20,
pageSize: pageSize,
showSizeChanger: true,
pageSizeOptions: [10, 20, 50, 100],
onPageSizeChange: (size) => setPageSize(size),
}}
/>
</Card>
), [filteredModels, loading, processedColumns, rowSelection, pageSize, setPageSize, openModelDetail, t, compactMode]);
const ModelTable = useMemo(
() => (
<Card className='!rounded-xl overflow-hidden' bordered={false}>
<Table
columns={processedColumns}
dataSource={filteredModels}
loading={loading}
rowSelection={rowSelection}
scroll={compactMode ? undefined : { x: 'max-content' }}
onRow={(record) => ({
onClick: () => openModelDetail && openModelDetail(record),
style: { cursor: 'pointer' },
})}
empty={
<Empty
image={
<IllustrationNoResult style={{ width: 150, height: 150 }} />
}
darkModeImage={
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
}
description={t('搜索无结果')}
style={{ padding: 30 }}
/>
}
pagination={{
defaultPageSize: 20,
pageSize: pageSize,
showSizeChanger: true,
pageSizeOptions: [10, 20, 50, 100],
onPageSizeChange: (size) => setPageSize(size),
}}
/>
</Card>
),
[
filteredModels,
loading,
processedColumns,
rowSelection,
pageSize,
setPageSize,
openModelDetail,
t,
compactMode,
],
);
return ModelTable;
};
export default PricingTable;
export default PricingTable;

73
web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
View File

@@ -20,8 +20,16 @@ For commercial licensing, please contact support@quantumnous.com
import React from 'react';
import { Tag, Space, Tooltip } from '@douyinfe/semi-ui';
import { IconHelpCircle } from '@douyinfe/semi-icons';
import { renderModelTag, stringToColor, calculateModelPrice, getLobeHubIcon } from '../../../../../helpers';
import { renderLimitedItems, renderDescription } from '../../../../common/ui/RenderUtils';
import {
renderModelTag,
stringToColor,
calculateModelPrice,
getLobeHubIcon,
} from '../../../../../helpers';
import {
renderLimitedItems,
renderDescription,
} from '../../../../common/ui/RenderUtils';
import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
function renderQuotaType(type, t) {
@@ -47,7 +55,11 @@ function renderQuotaType(type, t) {
const renderVendor = (vendorName, vendorIcon, t) => {
if (!vendorName) return '-';
return (
<Tag color='white' shape='circle' prefixIcon={getLobeHubIcon(vendorIcon || 'Layers', 14)}>
<Tag
color='white'
shape='circle'
prefixIcon={getLobeHubIcon(vendorIcon || 'Layers', 14)}
>
{vendorName}
</Tag>
);
@@ -56,15 +68,20 @@ const renderVendor = (vendorName, vendorIcon, t) => {
// Render tags list using RenderUtils
const renderTags = (text) => {
if (!text) return '-';
const tagsArr = text.split(',').filter(tag => tag.trim());
const tagsArr = text.split(',').filter((tag) => tag.trim());
return renderLimitedItems({
items: tagsArr,
renderItem: (tag, idx) => (
<Tag key={idx} color={stringToColor(tag.trim())} shape='circle' size='small'>
<Tag
key={idx}
color={stringToColor(tag.trim())}
shape='circle'
size='small'
>
{tag.trim()}
</Tag>
),
maxDisplay: 3
maxDisplay: 3,
});
};
@@ -75,11 +92,7 @@ function renderSupportedEndpoints(endpoints) {
return (
<Space wrap>
{endpoints.map((endpoint, idx) => (
<Tag
key={endpoint}
color={stringToColor(endpoint)}
shape='circle'
>
<Tag key={endpoint} color={stringToColor(endpoint)} shape='circle'>
{endpoint}
</Tag>
))}
@@ -133,7 +146,7 @@ export const getPricingTableColumns = ({
return renderModelTag(text, {
onClick: () => {
copyText(text);
}
},
});
},
onFilter: (value, record) =>
@@ -167,15 +180,21 @@ export const getPricingTableColumns = ({
render: (text, record) => renderVendor(text, record.vendor_icon, t),
};
const baseColumns = [modelNameColumn, vendorColumn, descriptionColumn, tagsColumn, quotaColumn];
const baseColumns = [
modelNameColumn,
vendorColumn,
descriptionColumn,
tagsColumn,
quotaColumn,
];
const ratioColumn = {
title: () => (
<div className="flex items-center space-x-1">
<div className='flex items-center space-x-1'>
<span>{t('倍率')}</span>
<Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
<IconHelpCircle
className="text-blue-500 cursor-pointer"
className='text-blue-500 cursor-pointer'
onClick={() => {
setModalImageUrl('/ratio.png');
setIsModalOpenurl(true);
@@ -190,14 +209,15 @@ export const getPricingTableColumns = ({
const priceData = getPriceData(record);
return (
<div className="space-y-1">
<div className="text-gray-700">
<div className='space-y-1'>
<div className='text-gray-700'>
{t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
</div>
<div className="text-gray-700">
{t('补全倍率')}：{record.quota_type === 0 ? completionRatio : t('无')}
<div className='text-gray-700'>
{t('补全倍率')}：
{record.quota_type === 0 ? completionRatio : t('无')}
</div>
<div className="text-gray-700">
<div className='text-gray-700'>
{t('分组倍率')}：{priceData?.usedGroupRatio ?? '-'}
</div>
</div>
@@ -214,18 +234,19 @@ export const getPricingTableColumns = ({
if (priceData.isPerToken) {
return (
<div className="space-y-1">
<div className="text-gray-700">
<div className='space-y-1'>
<div className='text-gray-700'>
{t('输入')} {priceData.inputPrice} / 1{priceData.unitLabel} tokens
</div>
<div className="text-gray-700">
{t('输出')} {priceData.completionPrice} / 1{priceData.unitLabel} tokens
<div className='text-gray-700'>
{t('输出')} {priceData.completionPrice} / 1{priceData.unitLabel}{' '}
tokens
</div>
</div>
);
} else {
return (
<div className="text-gray-700">
<div className='text-gray-700'>
{t('模型价格')}：{priceData.price}
</div>
);
@@ -240,4 +261,4 @@ export const getPricingTableColumns = ({
}
columns.push(priceColumn);
return columns;
};
};