From 4fa5cf51c062c3ef24a47af874c2bad872f65ee7 Mon Sep 17 00:00:00 2001
From: dingyi <dingyi@users.noreply.github.com>
Date: Mon, 27 Apr 2026 12:45:36 +0800
Subject: [PATCH] fix(ratio-editor): pass correct prop names to
 TieredPricingEditor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching the billing mode radio to "表达式/阶梯计费" was crashing the
ModelPricingEditor with React error boundary catching the render exception
(showing "页面渲染出错，请刷新页面重试").

Root cause: when PR #5 wired up the tiered_expr UI entry into the feature
branch's rewritten ModelPricingEditor, the prop names passed to
TieredPricingEditor were guessed (value/onChange/onRequestRuleChange) but
the actual component signature is

    function TieredPricingEditor({
      model, onExprChange, requestRuleExpr, onRequestRuleExprChange, t
    })

so the editor received `model={undefined}`, blew up the moment it tried
to read `model.billingExpr` / `model.fixedPrice`, and the error surfaced
as a generic boundary fallback.

Fix: pass the right names — `model={selectedModel}`,
`onExprChange={handleBillingExprChange}`,
`onRequestRuleExprChange={handleRequestRuleExprChange}`, and `t={t}`.

Verified in browser:
- click "表达式/阶梯计费" radio → editor renders cleanly
- visualize/expression sub-radio shows up
- 7 preset templates render (Flat / Claude Opus 4.6 / GPT-5.4 / Claude
  Sonnet 4.5 / Qwen3 Max / GLM-4.5 Air / Doubao Seed 1.8)
- model list row updates to "阶梯计费 (1 档)"
---
 .../pages/Setting/Ratio/components/ModelPricingEditor.jsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx b/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
index 1ed4f13795f..58a59434e4b 100644
--- a/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
+++ b/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
@@ -641,10 +641,11 @@ export default function ModelPricingEditor({
                       />
                     ) : selectedModel.billingMode === 'tiered_expr' ? (
                       <TieredPricingEditor
-                        value={selectedModel.billingExpr}
+                        model={selectedModel}
                         requestRuleExpr={selectedModel.requestRuleExpr}
-                        onChange={handleBillingExprChange}
-                        onRequestRuleChange={handleRequestRuleExprChange}
+                        onExprChange={handleBillingExprChange}
+                        onRequestRuleExprChange={handleRequestRuleExprChange}
+                        t={t}
                       />
                     ) : (
                       <>