{!modelData && (
{t('加载中...')}
@@ -79,28 +80,48 @@ const ModelDetailSideSheet = ({
)}
{modelData && (
<>
-
-
-
+
+
+
+
+
+
+
+ {modelData.billing_mode === 'tiered_expr' && modelData.billing_expr && (
+ <>
+
+
+
+
+
+ )}
+
+
+
+
+
)}
diff --git a/web/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx b/web/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx
new file mode 100644
index 00000000..fd2be3f3
--- /dev/null
+++ b/web/src/components/table/model-pricing/modal/components/DynamicPricingBreakdown.jsx
@@ -0,0 +1,207 @@
+/*
+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
.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Avatar, Tag, Table, Typography } from '@douyinfe/semi-ui';
+import { IconPriceTag } from '@douyinfe/semi-icons';
+import { parseTiersFromExpr } from '../../../../../helpers';
+import { BILLING_VARS } from '../../../../../constants';
+import {
+ splitBillingExprAndRequestRules,
+ tryParseRequestRuleExpr,
+ SOURCE_TIME,
+ MATCH_RANGE,
+ MATCH_EQ,
+ MATCH_GTE,
+ MATCH_LT,
+ MATCH_CONTAINS,
+ MATCH_EXISTS,
+} from '../../../../../pages/Setting/Ratio/components/requestRuleExpr';
+
+const { Text } = Typography;
+
+const PRICE_SUFFIX = '$/1M tokens';
+
+const VAR_LABELS = { p: '输入', c: '输出' };
+const OP_LABELS = { '<': '<', '<=': '≤', '>': '>', '>=': '≥' };
+const TIME_FUNC_LABELS = { hour: '小时', minute: '分钟', weekday: '星期', month: '月份', day: '日期' };
+
+function formatTokenHint(value) {
+ const n = Number(value);
+ if (!Number.isFinite(n) || n === 0) return '';
+ if (n >= 1000000) return `${(n / 1000000).toFixed(n % 1000000 === 0 ? 0 : 1)}M`;
+ if (n >= 1000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}K`;
+ return String(n);
+}
+
+function formatConditionSummary(conditions, t) {
+ return conditions
+ .map((c) => {
+ if (c.var && c.op) {
+ const varLabel = t(VAR_LABELS[c.var] || c.var);
+ const hint = formatTokenHint(c.value);
+ return `${varLabel} ${OP_LABELS[c.op] || c.op} ${hint || c.value}`;
+ }
+ return '';
+ })
+ .filter(Boolean)
+ .join(' && ');
+}
+
+
+function describeCondition(cond, t) {
+ if (cond.source === SOURCE_TIME) {
+ const fn = t(TIME_FUNC_LABELS[cond.timeFunc] || cond.timeFunc);
+ const tz = cond.timezone || 'UTC';
+ if (cond.mode === MATCH_RANGE) {
+ return `${fn} ${cond.rangeStart}:00~${cond.rangeEnd}:00 (${tz})`;
+ }
+ const opMap = { [MATCH_EQ]: '=', [MATCH_GTE]: '≥', [MATCH_LT]: '<' };
+ return `${fn} ${opMap[cond.mode] || '='} ${cond.value} (${tz})`;
+ }
+ const src = cond.source === 'header' ? t('请求头') : t('请求参数');
+ const path = cond.path || '';
+ if (cond.mode === MATCH_EXISTS) return `${src} ${path} ${t('存在')}`;
+ if (cond.mode === MATCH_CONTAINS) return `${src} ${path} ${t('包含')} "${cond.value}"`;
+ const opMap = { eq: '=', gt: '>', gte: '≥', lt: '<', lte: '≤' };
+ return `${src} ${path} ${opMap[cond.mode] || '='} ${cond.value}`;
+}
+
+function describeGroup(group, t) {
+ const parts = (group.conditions || []).map((c) => describeCondition(c, t));
+ return parts.join(' && ');
+}
+
+export default function DynamicPricingBreakdown({ billingExpr, t }) {
+ const { billingExpr: baseExpr, requestRuleExpr: ruleExpr } =
+ splitBillingExprAndRequestRules(billingExpr || '');
+
+ const tiers = parseTiersFromExpr(baseExpr);
+ const ruleGroups = tryParseRequestRuleExpr(ruleExpr || '');
+
+ const hasTiers = tiers && tiers.length > 0;
+ const hasRules = ruleGroups && ruleGroups.length > 0;
+
+ if (!hasTiers && !hasRules) {
+ return (
+
+ );
+ }
+
+ const priceFields = BILLING_VARS.map((v) => [v.field, v.shortLabel]);
+
+ const tierColumns = [
+ {
+ title: t('档位'),
+ dataIndex: 'label',
+ render: (text, record) => (
+
+
{text || t('默认')}
+ {record.condSummary && (
+
{record.condSummary}
+ )}
+
+ ),
+ },
+ ...priceFields
+ .filter(([field]) => hasTiers && tiers.some((tier) => tier[field] > 0))
+ .map(([field, label]) => ({
+ title: `${t(label)} (${PRICE_SUFFIX})`,
+ dataIndex: field,
+ render: (v) => v > 0 ?
${v.toFixed(4)} : '-',
+ })),
+ ];
+
+ const tierData = hasTiers
+ ? tiers.map((tier, i) => ({
+ key: `tier-${i}`,
+ label: tier.label,
+ condSummary: formatConditionSummary(tier.conditions, t),
+ ...Object.fromEntries(priceFields.map(([field]) => [field, tier[field] || 0])),
+ }))
+ : [];
+
+ return (
+
+
+
+
+
+
+
{t('动态计费')}
+
+ {t('价格根据用量档位和请求条件动态调整')}
+
+
+
+
+ {hasTiers && (
+
+ )}
+
+ {hasRules && (
+
+
+ {t('条件乘数')}
+
+ {ruleGroups.map((group, gi) => (
+
+ {describeGroup(group, t)}
+ {group.multiplier}x
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx b/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
index d07d6fd1..a689d114 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
-import { Card, Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
import { IconInfoCircle } from '@douyinfe/semi-icons';
import { stringToColor } from '../../../../../helpers';
@@ -58,7 +58,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
};
return (
-
+
@@ -82,7 +82,7 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
)}
-
+
);
};
diff --git a/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx b/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
index 509389f0..7182c2eb 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
-import { Card, Avatar, Typography, Badge } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Badge } from '@douyinfe/semi-ui';
import { IconLink } from '@douyinfe/semi-icons';
const { Text } = Typography;
@@ -62,7 +62,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
};
return (
-
+
@@ -75,7 +75,7 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
{renderAPIEndpoints()}
-
+
);
};
diff --git a/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx b/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
index b2064609..0372e8ae 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
-import { Card, Avatar, Typography, Table, Tag } from '@douyinfe/semi-ui';
+import { Avatar, Typography, Table, Tag } from '@douyinfe/semi-ui';
import { IconCoinMoneyStroked } from '@douyinfe/semi-icons';
import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers';
@@ -71,11 +71,13 @@ const ModelPricingTable = ({
group: group,
ratio: groupRatioValue,
billingType:
- modelData?.quota_type === 0
- ? t('按量计费')
- : modelData?.quota_type === 1
- ? t('按次计费')
- : '-',
+ modelData?.billing_mode === 'tiered_expr'
+ ? t('动态计费')
+ : modelData?.quota_type === 0
+ ? t('按量计费')
+ : modelData?.quota_type === 1
+ ? t('按次计费')
+ : '-',
priceItems: getModelPriceItems(priceData, t, siteDisplayType),
};
});
@@ -94,20 +96,21 @@ const ModelPricingTable = ({
},
];
- // 如果显示倍率，添加倍率列
- if (showRatio) {
+ const isDynamic = modelData?.billing_mode === 'tiered_expr';
+
+ // 动态计费时始终显示倍率列，否则根据设置
+ if (showRatio || isDynamic) {
columns.push({
- title: t('倍率'),
+ title: t('分组倍率'),
dataIndex: 'ratio',
render: (text) => (
-