* 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>
283 lines
7.7 KiB
TypeScript
Vendored
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' }
|
|
}
|