fix(web): 修复阶梯计费 Base64 解码失败与标签不匹配导致的显示错误 (#4530)

wans10 · Calcium-Ion · web-flow · commit 938dc9522b23 · 2026-04-30T20:26:58.000+08:00
* fix(web): 修复阶梯计费表达式解析与匹配逻辑

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

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

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

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

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

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

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

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

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

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

---------

Co-authored-by: CaIon &lt;i@caion.me&gt;
diff --git a/web/classic/src/helpers/render.jsx b/web/classic/src/helpers/render.jsx
diff --git a/web/classic/src/i18n/locales/en.json b/web/classic/src/i18n/locales/en.json
@@ -3689,6 +3689,8 @@
     "缓存创建-5分钟 (cc5)": "Cache Creation-5min (cc5)",
     "缓存创建-1小时 (cc1h)": "Cache Creation-1hour (cc1h)",
     "阶梯计费": "Tiered Billing",
+    "阶梯计费（表达式解析失败）": "Tiered Billing (expression parse failed)",
+    "阶梯计费（未匹配到对应阶梯）": "Tiered Billing (no matching tier)",
     "输入 Tokens 阶梯": "Input Token Tiers",
     "输出 Tokens 阶梯": "Output Token Tiers",
     "固定阶梯": "Fixed Tier",
diff --git a/web/classic/src/i18n/locales/fr.json b/web/classic/src/i18n/locales/fr.json
@@ -3642,6 +3642,8 @@
     "默认折叠侧边栏": "Réduire la barre latérale par défaut",
     "默认测试模型": "Modèle de test par défaut",
     "默认用户消息": "Bonjour",
-    "默认补全倍率": "Taux de complétion par défaut"
+    "默认补全倍率": "Taux de complétion par défaut",
+    "阶梯计费（表达式解析失败）": "Facturation par paliers (échec de l'analyse de l'expression)",
+    "阶梯计费（未匹配到对应阶梯）": "Facturation par paliers (aucun palier correspondant)"
   }
 }
diff --git a/web/classic/src/i18n/locales/ja.json b/web/classic/src/i18n/locales/ja.json
@@ -3611,6 +3611,8 @@
     "默认折叠侧边栏": "サイドバーをデフォルトで折りたたむ",
     "默认测试模型": "デフォルトテストモデル",
     "默认用户消息": "こんにちは",
-    "默认补全倍率": "デフォルト補完倍率"
+    "默认补全倍率": "デフォルト補完倍率",
+    "阶梯计费（表达式解析失败）": "段階課金（式の解析に失敗）",
+    "阶梯计费（未匹配到对应阶梯）": "段階課金（一致する階層なし）"
   }
 }
diff --git a/web/classic/src/i18n/locales/ru.json b/web/classic/src/i18n/locales/ru.json
@@ -3662,6 +3662,8 @@
     "默认折叠侧边栏": "Сворачивать боковую панель по умолчанию",
     "默认测试模型": "Модель для тестирования по умолчанию",
     "默认用户消息": "Здравствуйте",
-    "默认补全倍率": "Коэффициент завершения по умолчанию"
+    "默认补全倍率": "Коэффициент завершения по умолчанию",
+    "阶梯计费（表达式解析失败）": "Многоуровневая тарификация (ошибка разбора выражения)",
+    "阶梯计费（未匹配到对应阶梯）": "Многоуровневая тарификация (подходящий уровень не найден)"
   }
 }
diff --git a/web/classic/src/i18n/locales/vi.json b/web/classic/src/i18n/locales/vi.json
@@ -4176,6 +4176,8 @@
     "默认折叠侧边栏": "Mặc định thu gọn thanh bên",
     "默认测试模型": "Mô hình kiểm tra mặc định",
     "默认用户消息": "Xin chào",
-    "默认补全倍率": "Tỷ lệ hoàn thành mặc định"
+    "默认补全倍率": "Tỷ lệ hoàn thành mặc định",
+    "阶梯计费（表达式解析失败）": "Thanh toán theo bậc (không phân tích được biểu thức)",
+    "阶梯计费（未匹配到对应阶梯）": "Thanh toán theo bậc (không tìm thấy bậc phù hợp)"
   }
 }
diff --git a/web/classic/src/i18n/locales/zh-CN.json b/web/classic/src/i18n/locales/zh-CN.json
@@ -3676,6 +3676,8 @@
     "缓存创建-5分钟 (cc5)": "缓存创建-5分钟 (cc5)",
     "缓存创建-1小时 (cc1h)": "缓存创建-1小时 (cc1h)",
     "阶梯计费": "阶梯计费",
+    "阶梯计费（表达式解析失败）": "阶梯计费（表达式解析失败）",
+    "阶梯计费（未匹配到对应阶梯）": "阶梯计费（未匹配到对应阶梯）",
     "输入 Tokens 阶梯": "输入 Tokens 阶梯",
     "输出 Tokens 阶梯": "输出 Tokens 阶梯",
     "固定阶梯": "固定阶梯",
diff --git a/web/classic/src/i18n/locales/zh-TW.json b/web/classic/src/i18n/locales/zh-TW.json
@@ -3635,6 +3635,8 @@
     "默认折叠侧边栏": "預設摺疊側邊欄",
     "默认测试模型": "預設測試模型",
     "默认用户消息": "你好",
-    "默认补全倍率": "預設補全倍率"
+    "默认补全倍率": "預設補全倍率",
+    "阶梯计费（表达式解析失败）": "階梯計費（表達式解析失敗）",
+    "阶梯计费（未匹配到对应阶梯）": "階梯計費（未匹配到對應階梯）"
   }
 }
diff --git a/web/classic/src/i18n/locales/zh.json b/web/classic/src/i18n/locales/zh.json
@@ -2588,6 +2588,8 @@
     "关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？": "关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？",
     "关闭提示": "关闭提示",
     "说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。": "说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。",
-    "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。": "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。"
+    "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。": "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。",
+    "阶梯计费（表达式解析失败）": "阶梯计费（表达式解析失败）",
+    "阶梯计费（未匹配到对应阶梯）": "阶梯计费（未匹配到对应阶梯）"
   }
 }
diff --git a/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx b/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
@@ -21,6 +21,7 @@ import {
   MATCH_LT,
   MATCH_RANGE,
   SOURCE_TIME,
+  normalizeTierLabel,
   parseTiersFromExpr,
   splitBillingExprAndRequestRules,
   tryParseRequestRuleExpr,
@@ -168,6 +169,9 @@ export function DynamicPricingBreakdown({
 
   const hasTiers = tiers.length > 0
   const hasRules = ruleGroups.length > 0
+  const normalizedMatchedTierLabel = normalizeTierLabel(
+    matchedTierLabel ?? undefined
+  )
 
   if (!expr) return null
 
@@ -307,9 +311,9 @@ export function DynamicPricingBreakdown({
                 {tiers.map((tier, i) => {
                   const condSummary = formatConditionSummary(tier.conditions, t)
                   const isMatched =
-                    matchedTierLabel != null &&
-                    matchedTierLabel !== '' &&
-                    tier.label === matchedTierLabel
+                    normalizedMatchedTierLabel !== '' &&
+                    normalizeTierLabel(tier.label) ===
+                      normalizedMatchedTierLabel
                   return (
                     <TableRow
                       key={`tier-${i}`}
diff --git a/web/default/src/features/pricing/lib/billing-expr.ts b/web/default/src/features/pricing/lib/billing-expr.ts
@@ -286,6 +286,15 @@ export function parseTiersFromExpr(exprStr: string): ParsedTier[] {
   }
 }
 
+export function normalizeTierLabel(label: string | undefined): string {
+  if (!label) return ''
+  return label
+    .replace(/<[=＝]?|≤|＜[=＝]?/g, '<')
+    .replace(/>[=＝]?|≥|＞[=＝]?/g, '>')
+    .replace(/\s+/g, '')
+    .toLowerCase()
+}
+
 // ---------------------------------------------------------------------------
 // Request rule parser
 // ---------------------------------------------------------------------------
diff --git a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -115,51 +115,59 @@ function buildDetailSegments(
     const text = prices.join(' / ')
     return showUnit ? `${text}/M` : text
   }
+  const isTieredExpr = other.billing_mode === 'tiered_expr'
   const tieredSummary = getTieredBillingSummary(other)
-  if (tieredSummary) {
-    const baseEntries = tieredSummary.priceEntries
-      .filter((entry) => ['inputPrice', 'outputPrice'].includes(entry.field))
-      .map((entry) => formatPriceCompact(entry.price))
-    if (baseEntries.length > 0) {
-      const tierLabel = tieredSummary.tier.label || t('Default')
-      segments.push({
-        text: `${tierLabel} · ${formatPriceList(baseEntries, true)}`,
-      })
-    }
-
-    const cacheEntries = tieredSummary.priceEntries
-      .filter((entry) =>
-        [
-          'cacheReadPrice',
-          'cacheCreatePrice',
-          'cacheCreate1hPrice',
-        ].includes(entry.field)
-      )
-      .map((entry) => {
-        return formatPriceCompact(entry.price)
-      })
-    if (cacheEntries.length > 0) {
-      segments.push({
-        text: `${t('Cache')} ${formatPriceList(cacheEntries, false)}`,
-        muted: true,
-      })
-    }
+  if (isTieredExpr) {
+    if (tieredSummary) {
+      const baseEntries = tieredSummary.priceEntries
+        .filter((entry) => ['inputPrice', 'outputPrice'].includes(entry.field))
+        .map((entry) => formatPriceCompact(entry.price))
+      if (baseEntries.length > 0) {
+        const tierLabel = tieredSummary.tier.label || t('Default')
+        segments.push({
+          text: `${tierLabel} · ${formatPriceList(baseEntries, true)}`,
+        })
+      }
 
-    const otherEntries = tieredSummary.priceEntries
-      .filter(
-        (entry) =>
-          ![
-            'inputPrice',
-            'outputPrice',
+      const cacheEntries = tieredSummary.priceEntries
+        .filter((entry) =>
+          [
             'cacheReadPrice',
             'cacheCreatePrice',
             'cacheCreate1hPrice',
           ].includes(entry.field)
-      )
-      .map((entry) => `${t(entry.shortLabel)} ${formatPrice(entry.price)}`)
-    if (otherEntries.length > 0) {
+        )
+        .map((entry) => {
+          return formatPriceCompact(entry.price)
+        })
+      if (cacheEntries.length > 0) {
+        segments.push({
+          text: `${t('Cache')} ${formatPriceList(cacheEntries, false)}`,
+          muted: true,
+        })
+      }
+
+      const otherEntries = tieredSummary.priceEntries
+        .filter(
+          (entry) =>
+            ![
+              'inputPrice',
+              'outputPrice',
+              'cacheReadPrice',
+              'cacheCreatePrice',
+              'cacheCreate1hPrice',
+            ].includes(entry.field)
+        )
+        .map((entry) => `${t(entry.shortLabel)} ${formatPrice(entry.price)}`)
+      if (otherEntries.length > 0) {
+        segments.push({
+          text: otherEntries.join(' · '),
+          muted: true,
+        })
+      }
+    } else {
       segments.push({
-        text: otherEntries.join(' · '),
+        text: `${t('Dynamic Pricing')} · ${t('No matching results')}`,
         muted: true,
       })
     }
diff --git a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
@@ -126,28 +126,36 @@ function BillingBreakdown(props: {
   const { log, other, isAdmin } = props
   const isPerCall = isPerCallBilling(other.model_price)
   const isClaude = other.claude === true
+  const isTieredExpr = other.billing_mode === 'tiered_expr'
   const tieredSummary = getTieredBillingSummary(other)
 
   const rows: Array<{ label: string; value: string }> = []
   const priceOpts = { digitsLarge: 4, digitsSmall: 6, abbreviate: false }
   const fmtPrice = (usd: number) => formatBillingCurrencyFromUSD(usd, priceOpts)
   const baseInputUSD = other.model_ratio != null ? other.model_ratio * 2.0 : 0
 
-  if (tieredSummary) {
+  if (isTieredExpr) {
     rows.push({
       label: t('Billing Mode'),
       value: t('Dynamic Pricing'),
     })
-    if (tieredSummary.tier.label) {
+    if (tieredSummary) {
+      if (tieredSummary.tier.label) {
+        rows.push({
+          label: t('Matched Tier'),
+          value: tieredSummary.tier.label,
+        })
+      }
+      for (const entry of tieredSummary.priceEntries) {
+        rows.push({
+          label: t(entry.shortLabel),
+          value: `${fmtPrice(entry.price)}/M`,
+        })
+      }
+    } else {
       rows.push({
         label: t('Matched Tier'),
-        value: tieredSummary.tier.label,
-      })
-    }
-    for (const entry of tieredSummary.priceEntries) {
-      rows.push({
-        label: t(entry.shortLabel),
-        value: `${fmtPrice(entry.price)}/M`,
+        value: t('No matching results'),
       })
     }
   } else if (isPerCall) {
@@ -184,7 +192,7 @@ function BillingBreakdown(props: {
     })
   }
 
-  if (!tieredSummary && isClaude && hasAnyCacheTokens(other)) {
+  if (!isTieredExpr && isClaude && hasAnyCacheTokens(other)) {
     if (other.cache_ratio != null && other.cache_ratio !== 1) {
       rows.push({
         label: t('Cache Read'),
@@ -220,7 +228,7 @@ function BillingBreakdown(props: {
     }
   }
 
-  if (!tieredSummary) {
+  if (!isTieredExpr) {
     if (other.audio_ratio != null && other.audio_ratio !== 1) {
       rows.push({
         label: t('Audio input'),
diff --git a/web/default/src/features/usage-logs/lib/format.ts b/web/default/src/features/usage-logs/lib/format.ts

Original file line number	Diff line number	Diff line change
`@@ -3642,6 +3642,8 @@`
`3642`	`3642`	`"默认折叠侧边栏": "Réduire la barre latérale par défaut",`
`3643`	`3643`	`"默认测试模型": "Modèle de test par défaut",`
`3644`	`3644`	`"默认用户消息": "Bonjour",`
`3645`		`- "默认补全倍率": "Taux de complétion par défaut"`
	`3645`	`+ "默认补全倍率": "Taux de complétion par défaut",`
	`3646`	`+ "阶梯计费（表达式解析失败）": "Facturation par paliers (échec de l'analyse de l'expression)",`
	`3647`	`+ "阶梯计费（未匹配到对应阶梯）": "Facturation par paliers (aucun palier correspondant)"`
`3646`	`3648`	`}`
`3647`	`3649`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3611,6 +3611,8 @@`
`3611`	`3611`	`"默认折叠侧边栏": "サイドバーをデフォルトで折りたたむ",`
`3612`	`3612`	`"默认测试模型": "デフォルトテストモデル",`
`3613`	`3613`	`"默认用户消息": "こんにちは",`
`3614`		`- "默认补全倍率": "デフォルト補完倍率"`
	`3614`	`+ "默认补全倍率": "デフォルト補完倍率",`
	`3615`	`+ "阶梯计费（表达式解析失败）": "段階課金（式の解析に失敗）",`
	`3616`	`+ "阶梯计费（未匹配到对应阶梯）": "段階課金（一致する階層なし）"`
`3615`	`3617`	`}`
`3616`	`3618`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3662,6 +3662,8 @@`
`3662`	`3662`	`"默认折叠侧边栏": "Сворачивать боковую панель по умолчанию",`
`3663`	`3663`	`"默认测试模型": "Модель для тестирования по умолчанию",`
`3664`	`3664`	`"默认用户消息": "Здравствуйте",`
`3665`		`- "默认补全倍率": "Коэффициент завершения по умолчанию"`
	`3665`	`+ "默认补全倍率": "Коэффициент завершения по умолчанию",`
	`3666`	`+ "阶梯计费（表达式解析失败）": "Многоуровневая тарификация (ошибка разбора выражения)",`
	`3667`	`+ "阶梯计费（未匹配到对应阶梯）": "Многоуровневая тарификация (подходящий уровень не найден)"`
`3666`	`3668`	`}`
`3667`	`3669`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4176,6 +4176,8 @@`
`4176`	`4176`	`"默认折叠侧边栏": "Mặc định thu gọn thanh bên",`
`4177`	`4177`	`"默认测试模型": "Mô hình kiểm tra mặc định",`
`4178`	`4178`	`"默认用户消息": "Xin chào",`
`4179`		`- "默认补全倍率": "Tỷ lệ hoàn thành mặc định"`
	`4179`	`+ "默认补全倍率": "Tỷ lệ hoàn thành mặc định",`
	`4180`	`+ "阶梯计费（表达式解析失败）": "Thanh toán theo bậc (không phân tích được biểu thức)",`
	`4181`	`+ "阶梯计费（未匹配到对应阶梯）": "Thanh toán theo bậc (không tìm thấy bậc phù hợp)"`
`4180`	`4182`	`}`
`4181`	`4183`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3635,6 +3635,8 @@`
`3635`	`3635`	`"默认折叠侧边栏": "預設摺疊側邊欄",`
`3636`	`3636`	`"默认测试模型": "預設測試模型",`
`3637`	`3637`	`"默认用户消息": "你好",`
`3638`		`- "默认补全倍率": "預設補全倍率"`
	`3638`	`+ "默认补全倍率": "預設補全倍率",`
	`3639`	`+ "阶梯计费（表达式解析失败）": "階梯計費（表達式解析失敗）",`
	`3640`	`+ "阶梯计费（未匹配到对应阶梯）": "階梯計費（未匹配到對應階梯）"`
`3639`	`3641`	`}`
`3640`	`3642`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2588,6 +2588,8 @@`
`2588`	`2588`	`"关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？": "关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？",`
`2589`	`2589`	`"关闭提示": "关闭提示",`
`2590`	`2590`	`"说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。": "说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。",`
`2591`		`- "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。": "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。"`
	`2591`	`+ "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。": "提示：端点映射仅用于模型广场展示，不会影响模型真实调用。如需配置真实调用，请前往「渠道管理」。",`
	`2592`	`+ "阶梯计费（表达式解析失败）": "阶梯计费（表达式解析失败）",`
	`2593`	`+ "阶梯计费（未匹配到对应阶梯）": "阶梯计费（未匹配到对应阶梯）"`
`2592`	`2594`	`}`
`2593`	`2595`	`}`