Files
new-api/web/default/src/features/usage-logs/lib/format.ts
wans10 938dc9522b fix(web): 修复阶梯计费 Base64 解码失败与标签不匹配导致的显示错误 (#4530)
* fix(web): 修复阶梯计费表达式解析与匹配逻辑

- 优化 Base64 解码逻辑:引入 UTF-8 感知的解码方法(使用 TextDecoder/Uint8Array),替换原有的简单 `atob`,修复包含非拉丁字符时解码失败的问题。
- 增强阶梯标签匹配机制:新增标签规范化处理(移除空格、统一大小写、转换 `<`/`≤`/`<=` 等符号),确保日志记录中的标签能够与配置中的标签准确匹配。
- 将上述修复同步应用于 default 和 classic 两套前端主题。

* refactor(web): 完善 Base64 解码函数的类型声明

- 根据 CodeRabbitAI 的代码审查建议,将 `decodeBillingExprB64` 方法中 `Array.prototype.map` 回调函数的参数类型由 `any` 替换为更精确的 `number`。
- 提高了代码的类型安全性与可读性。

* fix(web): 修复动态价格明细表中阶梯高亮未能正确匹配的问题

- 在 default 主题的 `DynamicPricingBreakdown` 组件中,引入 `normalizeTierLabel` 函数。
- 替换原有对 `matchedTierLabel` 的严格相等判定,确保在包含全半角符号(如 `≤`/`<=`)或存在空格等格式不一致的场景下,日志详情中的表格依然能准确高亮(Matched)当前命中的对应计费阶梯。

* refactor(web): 移除阶梯计费标签不匹配时的强制兜底逻辑

- 在 default 和 classic 主题中,修改 `resolveMatchedTier` 和相关的阶梯匹配方法,当日志中 `matched_tier` 无法与表达式中的阶梯标签严格对应时,直接返回 `null` 而不再默认退化展示第一阶梯(`tiers[0]`)的价格。
- 遵循“数据准确性优先”的计费展示准则,防止因匹配失败而向用户展示猜测出的单价,避免产生账单误导及客诉风险。
- 在 Classic 主题账单卡片中,对于无法匹配的异常账单明确展示“未匹配到对应阶梯”的提示。

* fix(web): 修复阶梯计费标签正则匹配的短路问题

- 根据 CodeRabbitAI 的代码审查反馈,修正了 `normalizeLabel`(以及 `normalizeTierLabel`)函数中的正则表达式分支顺序。
- 将原本的 `/<|≤|<=/` 调整为 `/<=|≤|</`,以修复 JavaScript 正则引擎从左到右匹配时,会将 `<=` 中的 `<` 优先短路匹配,导致残留 `=` 号的问题。
- 确保了双字符操作符(如 `<=`、`>=`)现在能够被正确完整地替换为单字符(`<`、`>`),保证了计费阶梯日志匹配的准确性。

* fix(web): 完善阶梯计费未匹配展示

---------

Co-authored-by: CaIon <i@caion.me>
2026-04-30 20:26:58 +08:00

283 lines
7.7 KiB
TypeScript
Vendored

import type { StatusBadgeProps } from '@/components/status-badge'
import {
BILLING_PRICING_VARS,
normalizeTierLabel,
parseTiersFromExpr,
type ParsedTier,
} from '@/features/pricing/lib/billing-expr'
import type { UsageLog } from '../data/schema'
import type { LogOtherData } from '../types'
export { normalizeTierLabel }
const PARAM_OVERRIDE_ACTION_MAP: Record<string, string> = {
set: 'Set',
delete: 'Delete',
copy: 'Copy',
move: 'Move',
append: 'Append',
prepend: 'Prepend',
trim_prefix: 'Trim Prefix',
trim_suffix: 'Trim Suffix',
ensure_prefix: 'Ensure Prefix',
ensure_suffix: 'Ensure Suffix',
trim_space: 'Trim Space',
to_lower: 'To Lower',
to_upper: 'To Upper',
replace: 'Replace',
regex_replace: 'Regex Replace',
set_header: 'Set Header',
delete_header: 'Delete Header',
copy_header: 'Copy Header',
move_header: 'Move Header',
pass_headers: 'Pass Headers',
sync_fields: 'Sync Fields',
return_error: 'Return Error',
}
/**
* Get localized label for a param override action
*/
export function getParamOverrideActionLabel(
action: string,
t: (key: string) => string
): string {
const key = PARAM_OVERRIDE_ACTION_MAP[action.toLowerCase()]
return key ? t(key) : action
}
/**
* Parse a param override audit line into action and content
*/
export function parseAuditLine(
line: string
): { action: string; content: string } | null {
if (typeof line !== 'string') return null
const firstSpace = line.indexOf(' ')
if (firstSpace <= 0) return { action: line, content: line }
return {
action: line.slice(0, firstSpace),
content: line.slice(firstSpace + 1),
}
}
/**
* Check if the log is a violation fee log
*/
export function isViolationFeeLog(other: LogOtherData | null): boolean {
if (!other) return false
return (
other.violation_fee === true ||
Boolean(other.violation_fee_code) ||
Boolean(other.violation_fee_marker)
)
}
/**
* Parse the 'other' field from JSON string to object
*/
export function parseLogOther(other: string): LogOtherData | null {
if (!other) return null
try {
return JSON.parse(other) as LogOtherData
} catch (error) {
// eslint-disable-next-line no-console
console.error('Failed to parse log other field:', error)
return null
}
}
/**
* Get time color based on duration (in seconds)
*/
export function getTimeColor(
seconds: number
): 'success' | 'warning' | 'danger' {
if (seconds < 10) return 'success'
if (seconds < 30) return 'warning'
return 'danger'
}
/**
* Get first-response-token color based on latency (in seconds)
*/
export function getFirstResponseTimeColor(
seconds: number
): 'success' | 'warning' | 'danger' {
if (seconds < 5) return 'success'
if (seconds < 10) return 'warning'
return 'danger'
}
/**
* Get throughput color based on generated tokens per second
*/
export function getThroughputColor(
tokensPerSecond: number
): 'success' | 'warning' | 'danger' {
if (tokensPerSecond >= 30) return 'success'
if (tokensPerSecond >= 15) return 'warning'
return 'danger'
}
/**
* Get response color using throughput only when enough output tokens exist.
*/
export function getResponseTimeColor(
seconds: number,
completionTokens: number
): 'success' | 'warning' | 'danger' {
if (completionTokens < 100 || seconds <= 0) return getTimeColor(seconds)
return getThroughputColor(completionTokens / seconds)
}
/**
* Format model name with mapping indicator
*/
export function formatModelName(log: UsageLog): {
name: string
isMapped: boolean
actualModel?: string
} {
const other = parseLogOther(log.other)
const isMapped = !!(
other?.is_model_mapped &&
other?.upstream_model_name &&
other.upstream_model_name !== ''
)
return {
name: log.model_name,
isMapped,
actualModel: isMapped ? other.upstream_model_name : undefined,
}
}
/**
* Decode a base64-encoded billing expression. Safely returns an empty string
* when the input is missing or malformed (e.g. legacy logs without expr_b64).
*/
export function decodeBillingExprB64(exprB64: string | undefined): string {
if (!exprB64) return ''
try {
const binaryString =
typeof window !== 'undefined'
? window.atob(exprB64)
: Buffer.from(exprB64, 'base64').toString('binary')
const bytes = new Uint8Array(binaryString.length)
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
if (typeof TextDecoder !== 'undefined') {
return new TextDecoder().decode(bytes)
}
return decodeURIComponent(
Array.prototype.map
.call(bytes, (byte: number) => '%' + byte.toString(16).padStart(2, '0'))
.join('')
)
} catch {
return ''
}
}
/**
* Resolve which parsed tier corresponds to the matched_tier label in a log
* entry. Missing or unknown labels do not fall back to another tier because
* that would display guessed unit prices.
*/
export function resolveMatchedTier(
tiers: ParsedTier[],
matchedLabel: string | undefined
): ParsedTier | null {
if (tiers.length === 0) return null
if (!matchedLabel) return null
const found = tiers.find((tier) => {
const l1 = normalizeTierLabel(tier.label)
const l2 = normalizeTierLabel(matchedLabel)
return l1 === l2 && l1 !== ''
})
return found || null
}
/**
* Tiered pricing summary derived from an `other` log payload using the
* billing-expression library. Returns null when the entry is not a tiered
* billing log or the expression failed to parse.
*/
export interface TieredBillingSummary {
tiers: ParsedTier[]
tier: ParsedTier
priceEntries: Array<{ field: string; shortLabel: string; price: number }>
}
/**
* Whether the request payload reports any cache-related token usage. Used to
* suppress cache pricing rows from the tiered breakdown when the request did
* not exercise the cache path (mirrors the classic frontend behaviour).
*/
export function hasAnyCacheTokens(
other: LogOtherData | null | undefined
): boolean {
if (!other) return false
return (
(other.cache_tokens || 0) > 0 ||
(other.cache_creation_tokens || 0) > 0 ||
(other.cache_creation_tokens_5m || 0) > 0 ||
(other.cache_creation_tokens_1h || 0) > 0
)
}
export function getTieredBillingSummary(
other: LogOtherData | null
): TieredBillingSummary | null {
if (!other || other.billing_mode !== 'tiered_expr') return null
const exprStr = decodeBillingExprB64(other.expr_b64)
if (!exprStr) return null
const tiers = parseTiersFromExpr(exprStr)
const tier = resolveMatchedTier(tiers, other.matched_tier)
if (!tier) return null
const cacheTokensPresent = hasAnyCacheTokens(other)
const priceEntries: TieredBillingSummary['priceEntries'] = []
for (const v of BILLING_PRICING_VARS) {
if (!v.field) continue
if (v.group === 'cache' && !cacheTokensPresent) continue
const raw = tier[v.field as keyof ParsedTier]
const price = Number(raw)
if (Number.isFinite(price) && price > 0) {
priceEntries.push({
field: v.field,
shortLabel: v.shortLabel,
price,
})
}
}
return { tiers, tier, priceEntries }
}
/**
* Calculate duration and return formatted result with color variant
* @param submitTime - Submit timestamp
* @param finishTime - Finish timestamp
* @param unit - Unit of the timestamps ('seconds' or 'milliseconds')
*/
export function formatDuration(
submitTime?: number,
finishTime?: number,
unit: 'seconds' | 'milliseconds' = 'milliseconds'
): { durationSec: number; variant: StatusBadgeProps['variant'] } | null {
if (!submitTime || !finishTime) return null
const durationSec =
unit === 'milliseconds'
? (finishTime - submitTime) / 1000
: finishTime - submitTime
return { durationSec, variant: durationSec > 60 ? 'red' : 'green' }
}