Skip to content

fix(ratio-editor): pass correct prop names to TieredPricingEditor#7

Merged
dingyi merged 1 commit into
mainfrom
feature/dashboard-followups
Apr 27, 2026
Merged

fix(ratio-editor): pass correct prop names to TieredPricingEditor#7
dingyi merged 1 commit into
mainfrom
feature/dashboard-followups

Conversation

@dingyi

@dingyi dingyi commented Apr 27, 2026

Copy link
Copy Markdown
Owner

Summary

修复 PR #5 留下的 follow-up bug:在「分组与模型定价设置 → 模型定价设置」点击"表达式/阶梯计费"radio 会导致页面崩溃(出现"页面渲染出错,请刷新页面重试")。

根因

PR #5 把 `tiered_expr` UI 入口接入 feature 分支重写后的 `ModelPricingEditor` 时,传给 `TieredPricingEditor` 的 props 名字猜错了:

传的(错) 实际签名
`value={...}` `model={...}`
`onChange={...}` `onExprChange={...}`
`onRequestRuleChange={...}` `onRequestRuleExprChange={...}`
—(没传) `t={t}`

结果 TieredPricingEditor 收到 `model=undefined`,第一次访问 `model.billingExpr` 就抛错,error boundary 接住后展示通用兜底页。

修复

-<TieredPricingEditor
-  value={selectedModel.billingExpr}
-  requestRuleExpr={selectedModel.requestRuleExpr}
-  onChange={handleBillingExprChange}
-  onRequestRuleChange={handleRequestRuleExprChange}
-/>
+<TieredPricingEditor
+  model={selectedModel}
+  requestRuleExpr={selectedModel.requestRuleExpr}
+  onExprChange={handleBillingExprChange}
+  onRequestRuleExprChange={handleRequestRuleExprChange}
+  t={t}
+/>

验证

浏览器 dogfood:

  • ✅ 点击"表达式/阶梯计费"radio → editor 正常渲染
  • ✅ "可视化编辑 / 表达式编辑"子 radio 出现
  • ✅ 7 个预设模板按钮都在(Flat / Claude Opus 4.6 / GPT-5.4 / Claude Sonnet 4.5 / Qwen3 Max / GLM-4.5 Air / Doubao Seed 1.8)
  • ✅ 模型列表的行更新为"阶梯计费 (1 档)"

构建验证:

  • ✅ `bun run build`: 18.73s
  • ✅ ESLint clean

其它 follow-up(不在本次范围)

  • PressResponder warning:HeroUI base `Switch` 内部 React Aria `PressResponder` 包了 `Switch.Control` 但 Switch.Control 不是真 pressable element,触发警告。这是上游库实现,调用方按 anatomy 模板写就一定会触发。留待上游修复或之后整体迁到 HeroUI Pro `CellSwitch`。
  • HeroCompat shim 去除:`ToolPriceSettings` / `TieredPricingEditor` / `DynamicPricingBreakdown` 还在用 `@/components/common/ui/HeroCompat`,要彻底删 shim 需要重写这三个文件(合计 ~2200 行,TieredPricingEditor 单独 1700 行用了 Semi 风格的 Collapsible/Select/Tag/Table API),ROI 低,留作单独 PR。

This PR was generated automatically by Cursor

Made with Cursor

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 档)"
@dingyi
dingyi merged commit 6076c50 into main Apr 27, 2026
1 check passed
@dingyi
dingyi deleted the feature/dashboard-followups branch April 27, 2026 04:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant