Skip to content

perf(model-pricing): optimize upstream price sync tables - #6092

Merged
t0ng7u merged 3 commits into
mainfrom
perf/model-pricing-sync-table
Jul 10, 2026
Merged

perf(model-pricing): optimize upstream price sync tables#6092
t0ng7u merged 3 commits into
mainfrom
perf/model-pricing-sync-table

Conversation

@QuentinHsu

@QuentinHsu QuentinHsu commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

⚠️ 提交说明 / PR Notice

Important

  • 请提供人工撰写的简洁摘要,避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

(简述:做了什么?为什么这样改能生效?请基于你对代码逻辑的理解来写,避免粘贴未经整理的内容)

概述

  • 优化系统设置中模型价格的上游价格同步表格和同步渠道选择弹窗。
  • 重点改善大数据量下的全选性能、表格滚动结构、列头/body 对齐和状态徽标间距。

改动说明

  • 上游价格同步表格改为固定列头与固定分页,body 独立滚动并撑满可用高度。
  • 将批量选择状态预先计算到表格层,选择和取消选择通过批量 resolution 变更一次性应用。
  • 当前价格列与各上游预设列使用一致的 ratio type 行序,便于横向对照。
  • 同步渠道 dialog 改用通用 DataTable 布局,补齐固定表头、可用高度和分页固定。
  • 全局 Input 使用 inset focus ring,避免搜索输入框 active 状态被容器裁切。
  • StatusBadge 移除默认横向 padding,并清理各列表中为旧 padding 写的负边距补偿。

效果

  • 5000+ 数据量场景下,全选和取消全选的感知卡顿降低。
  • 表格列头、body 内容、状态列和 badge 文案的视觉对齐更接近其他通用列表。
  • “官方倍率预设”等合成来源名称展示更干净,选择计数更贴近实际可选项。

🚀 变更类型 / Type of change

  • 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue,避免将设计取舍、理解偏差或预期不一致直接归类为 bug
  • ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
  • ⚡ 性能优化 / 重构 (Refactor)
  • 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

  • Closes # (如有)

✅ 提交前检查项 / Checklist

  • 人工确认: 我已亲自整理并撰写此描述,没有直接粘贴未经处理的 AI 输出。
  • 非重复提交: 我已搜索现有的 IssuesPRs,确认不是重复提交。
  • Bug fix 说明: 若此 PR 标记为 Bug fix,我已提交或关联对应 Issue,且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
  • 变更理解: 我已理解这些更改的工作原理及可能影响。
  • 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
  • 本地验证: 已在本地运行并通过测试或手动验证,维护者可以据此复核结果。
  • 安全合规: 代码中无敏感凭据,且符合项目代码规范。

📸 运行证明 / Proof of Work

(请在此粘贴截图、关键日志或测试报告,以证明变更生效)

  • before
    CleanShot 2026-07-11 at 00 41 56

  • after
    CleanShot 2026-07-11 at 00 41 10

Summary by CodeRabbit

  • New Features
    • Added bulk selection and removal support for upstream ratio synchronization.
    • Improved table layouts, scrolling, column sizing, and pagination across system settings screens.
  • Bug Fixes
    • Corrected badge and tooltip alignment by removing inconsistent spacing offsets throughout tables and cards.
    • Improved input focus and validation ring placement.
    • Stabilized badge list rendering and selection behavior.
  • Style
    • Updated status badge sizing and simplified channel/provider badge presentation.
    • Changed the channel status label to “Auto Disabled” for clearer display.

- batch select and unselect operations into single state updates to reduce lag with large model lists.
- align current price and upstream preset rows by rendering the same ordered field set.
- switch the table to a fixed header, internal body scrolling, and fixed pagination layout with compact upstream header counts.
- hide synthesized preset internal IDs and count only effective selectable resolutions.
- keep input focus and invalid rings inside the shared Input component to avoid clipping in constrained containers.
- make the sync channel selector table use a fixed header, internal body scrolling, and fixed pagination inside the dialog.
- align status cells with their header and translate channel status labels through existing i18n keys.
- remove built-in horizontal padding from status badges so table columns align with headers.
- drop legacy negative-margin compensation from badge cells and affected table renderers.
- clean touched table components to satisfy lint rules around type imports, keys, and JSX flow.
@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

The changes standardize badge spacing, improve table and dialog layouts, centralize upstream ratio resolution updates, add bulk synchronization state, and adjust several table-rendering details such as stable React keys and localized labels.

Changes

Badge rendering and table alignment

Layer / File(s) Summary
Badge spacing and rendering cleanup
web/default/src/components/..., web/default/src/features/channels/..., web/default/src/features/keys/..., web/default/src/features/models/..., web/default/src/features/pricing/..., web/default/src/features/redemption-codes/..., web/default/src/features/subscriptions/..., web/default/src/features/usage-logs/..., web/default/src/features/users/...
Negative badge margins and custom padding are removed across shared components and table cells; several badge lists now use stable keys and tooltip markup is simplified.
Input focus styling
web/default/src/components/ui/input.tsx
Focus-visible and invalid-state rings now use inset styling.

System-settings layouts

Layer / File(s) Summary
Dialog and page layout updates
web/default/src/features/system-settings/components/settings-page.tsx, web/default/src/features/system-settings/models/channel-selector-dialog.tsx, web/default/src/features/system-settings/models/ratio-settings-card.tsx
Content containers, tabs, dialog scrolling, table sizing, search controls, and pagination receive updated flex and overflow layout rules.
Status and ratio display updates
web/default/src/features/system-settings/models/constants.ts, web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
The channel status label is updated, and the billing-mode badge loses its custom margin and padding.

Upstream ratio synchronization

Layer / File(s) Summary
Resolution helper engine
web/default/src/features/system-settings/models/upstream-ratio-sync-helpers.ts, web/default/src/features/system-settings/models/upstream-ratio-sync.tsx
Selection and removal operations are centralized in shared helpers that resolve ratio types and maintain billing-category and tiered-field consistency.
Bulk synchronization table
web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx, web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx
The table derives per-upstream selection state, renders aligned values, and submits batch selection or removal operations through the updated callbacks.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Operator
  participant UpstreamRatioSyncTable
  participant UpstreamRatioSync
  participant ResolutionHelpers
  Operator->>UpstreamRatioSyncTable: select or unselect upstream values
  UpstreamRatioSyncTable->>UpstreamRatioSync: submit selections or removal plan
  UpstreamRatioSync->>ResolutionHelpers: apply resolution changes
  ResolutionHelpers-->>UpstreamRatioSync: return updated resolutions
  UpstreamRatioSync-->>UpstreamRatioSyncTable: update table state
Loading

Possibly related PRs

  • QuantumNous/new-api#4452: Updates the upstream ratio synchronization flow with related billing-mode and billing-expression handling.
  • QuantumNous/new-api#5460: Introduces related badge alignment changes involving StatusBadge and table rendering.
  • QuantumNous/new-api#5510: Adds related badge overflow and alignment behavior used by the affected table components.

Suggested reviewers: Calcium-Ion, creaml ike1024

Poem

I nibbled margins, one by one,
While badges found their proper span.
Bulk ratios hop from row to row,
With tidy fields in tow.
The rabbit cheers: layouts flow!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 15.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change set: performance and layout improvements for upstream price sync tables and related dialogs.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch perf/model-pricing-sync-table

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@t0ng7u
t0ng7u merged commit 0cb741d into main Jul 10, 2026
1 check passed

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/default/src/features/system-settings/models/channel-selector-dialog.tsx`:
- Around line 238-242: Localize the endpoint labels in the Select built from
ENDPOINT_OPTIONS by replacing raw display strings with the appropriate i18n
translation keys and resolving them through the existing localization mechanism.
Add matching entries for pricing, ratio_config, OpenRouter, and custom to every
required locale.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0059537e-7b63-45b8-abf6-8765cd19a847

📥 Commits

Reviewing files that changed from the base of the PR and between f2c7cd3 and 6869cd9.

📒 Files selected for processing (27)
  • web/default/src/components/data-table/core/badge-cell.tsx
  • web/default/src/components/data-table/core/badge-list-cell.tsx
  • web/default/src/components/data-table/layout/card-row-content.tsx
  • web/default/src/components/provider-badge.tsx
  • web/default/src/components/status-badge.tsx
  • web/default/src/components/ui/input.tsx
  • web/default/src/features/channels/components/channel-card.tsx
  • web/default/src/features/channels/components/channels-columns.tsx
  • web/default/src/features/keys/components/api-keys-cells.tsx
  • web/default/src/features/keys/components/api-keys-columns.tsx
  • web/default/src/features/models/components/deployments-columns.tsx
  • web/default/src/features/models/components/models-columns.tsx
  • web/default/src/features/pricing/components/pricing-columns.tsx
  • web/default/src/features/redemption-codes/components/redemptions-columns.tsx
  • web/default/src/features/subscriptions/components/subscriptions-columns.tsx
  • web/default/src/features/system-settings/components/settings-page.tsx
  • web/default/src/features/system-settings/models/channel-selector-dialog.tsx
  • web/default/src/features/system-settings/models/constants.ts
  • web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
  • web/default/src/features/system-settings/models/ratio-settings-card.tsx
  • web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx
  • web/default/src/features/system-settings/models/upstream-ratio-sync-helpers.ts
  • web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx
  • web/default/src/features/system-settings/models/upstream-ratio-sync.tsx
  • web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
  • web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
  • web/default/src/features/users/components/users-columns.tsx
💤 Files with no reviewable changes (4)
  • web/default/src/features/pricing/components/pricing-columns.tsx
  • web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
  • web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
  • web/default/src/features/system-settings/models/model-ratio-table-columns.tsx

Comment on lines 238 to +242
<Select
items={[
...ENDPOINT_OPTIONS.map((option) => ({
value: option.value,
label: option.label,
})),
]}
items={ENDPOINT_OPTIONS.map((option) => ({
value: option.value,
label: option.label,
}))}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
rg -nP -C3 'ENDPOINT_OPTIONS' web/default/src/features/system-settings/models/

Repository: QuantumNous/new-api

Length of output: 4088


🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '1,120p' web/default/src/features/system-settings/models/constants.ts
printf '\n--- upstream-ratio-sync-table.tsx ---\n'
rg -n -C3 't\\(|ENDPOINT_OPTIONS|SelectItem|Select' web/default/src/features/system-settings -g 'upstream-ratio-sync-table.tsx' -g 'channel-selector-dialog.tsx'

Repository: QuantumNous/new-api

Length of output: 3776


🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '1,220p' web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx
printf '\n--- translation usage in feature ---\n'
rg -n -C2 "useTranslation\\(|t\\(" web/default/src/features/system-settings/models -g '*.tsx' -g '*.ts'

Repository: QuantumNous/new-api

Length of output: 50376


🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- endpoint labels in translations ---'
rg -n '"(pricing|ratio_config|OpenRouter|custom)"' web/default/src -g '*.json' -g '*.ts' -g '*.tsx' || true

printf '\n%s\n' '--- endpoint option usages ---'
rg -n -C2 'ENDPOINT_OPTIONS|option\.label|t\(option\.label\)' web/default/src/features/system-settings/models -g '*.ts' -g '*.tsx'

Repository: QuantumNous/new-api

Length of output: 6391


Localize the endpoint labels. ENDPOINT_OPTIONS uses raw display strings (pricing, ratio_config, OpenRouter, custom), so this select renders English-only. Switch these to i18n keys here and add the matching locale entries.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/default/src/features/system-settings/models/channel-selector-dialog.tsx`
around lines 238 - 242, Localize the endpoint labels in the Select built from
ENDPOINT_OPTIONS by replacing raw display strings with the appropriate i18n
translation keys and resolving them through the existing localization mechanism.
Add matching entries for pricing, ratio_config, OpenRouter, and custom to every
required locale.

Sources: Coding guidelines, Path instructions

lansine pushed a commit to evin-pubb/new-api-fork that referenced this pull request Jul 14, 2026
…#6092)

Merge pull request QuantumNous#6092 from QuantumNous/perf/model-pricing-sync-table
@Calcium-Ion
Calcium-Ion deleted the perf/model-pricing-sync-table branch July 21, 2026 06:46
zhaodechao2008 pushed a commit to zhaodechao2008/new-api that referenced this pull request Jul 27, 2026
…#6092)

Merge pull request QuantumNous#6092 from QuantumNous/perf/model-pricing-sync-table
330079598 pushed a commit to 330079598/new-api that referenced this pull request Aug 19, 2026
…#6092)

Merge pull request QuantumNous#6092 from QuantumNous/perf/model-pricing-sync-table
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.

2 participants