From 936b1f8d091bc4ec3eab27d2a268ff661e9d5297 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Tue, 12 Aug 2025 23:10:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20group-ratio=20display=20&?=
 =?UTF-8?q?=20deduplicate=20price=20logic=20in=20model-pricing=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
• Ensure “Group Ratio” shows correctly when “All” groups are selected.
• Eliminate redundant price calculations in both card and table views.

Details
1. PricingCardView.jsx
   • Removed obsolete renderPriceInfo function.
   • Calculate priceData once per model and reuse for header price string and footer ratio block.
   • Display priceData.usedGroupRatio as the group ratio fallback.

2. PricingTableColumns.js
   • Introduced WeakMap-based cache (getPriceData) to compute priceData only once per row.
   • Updated ratioColumn & priceColumn to reuse cached priceData.
   • Now displays priceData.usedGroupRatio, preventing empty cells for “All” group.

Benefits
• Correct visual output for group ratio across all views.
• Reduced duplicate calculations, improving render performance.
• Removed dead code, keeping components clean and maintainable.
---
 .../view/card/PricingCardView.jsx             | 26 ++++++-------
 .../view/table/PricingTableColumns.js         | 38 ++++++++++++-------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index 8f8caa31..d37c9a5b 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -128,19 +128,6 @@ const PricingCardView = ({
     return record.description || '';
   };
 
-  // 渲染价格信息
-  const renderPriceInfo = (record) => {
-    const priceData = calculateModelPrice({
-      record,
-      selectedGroup,
-      groupRatio,
-      tokenUnit,
-      displayPrice,
-      currency,
-    });
-    return formatPriceInfo(priceData, t);
-  };
-
   // 渲染标签
   const renderTags = (record) => {
     // 计费类型标签（左边）
@@ -221,6 +208,15 @@ const PricingCardView = ({
           const modelKey = getModelKey(model);
           const isSelected = selectedRowKeys.includes(modelKey);
 
+          const priceData = calculateModelPrice({
+            record: model,
+            selectedGroup,
+            groupRatio,
+            tokenUnit,
+            displayPrice,
+            currency,
+          });
+
           return (
             <Card
               key={modelKey || index}
@@ -238,7 +234,7 @@ const PricingCardView = ({
                         {model.model_name}
                       </h3>
                       <div className="flex items-center gap-3 text-xs mt-1">
-                        {renderPriceInfo(model)}
+                        {formatPriceInfo(priceData, t)}
                       </div>
                     </div>
                   </div>
@@ -313,7 +309,7 @@ const PricingCardView = ({
                           {t('补全')}: {model.quota_type === 0 ? parseFloat(model.completion_ratio.toFixed(3)) : t('无')}
                         </div>
                         <div>
-                          {t('分组')}: {priceData.usedGroupRatio}
+                          {t('分组')}: {priceData?.usedGroupRatio ?? '-'}
                         </div>
                       </div>
                     </div>
diff --git a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
index 18e1fc89..0dd963a8 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
@@ -98,6 +98,25 @@ export const getPricingTableColumns = ({
   displayPrice,
   showRatio,
 }) => {
+
+  const priceDataCache = new WeakMap();
+
+  const getPriceData = (record) => {
+    let cache = priceDataCache.get(record);
+    if (!cache) {
+      cache = calculateModelPrice({
+        record,
+        selectedGroup,
+        groupRatio,
+        tokenUnit,
+        displayPrice,
+        currency,
+      });
+      priceDataCache.set(record, cache);
+    }
+    return cache;
+  };
+
   const endpointColumn = {
     title: t('可用端点类型'),
     dataIndex: 'supported_endpoint_types',
@@ -167,21 +186,21 @@ export const getPricingTableColumns = ({
     dataIndex: 'model_ratio',
     render: (text, record, index) => {
       const completionRatio = parseFloat(record.completion_ratio.toFixed(3));
-      const content = (
+      const priceData = getPriceData(record);
+
+      return (
         <div className="space-y-1">
           <div className="text-gray-700">
             {t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
           </div>
           <div className="text-gray-700">
-            {t('补全倍率')}：
-            {record.quota_type === 0 ? completionRatio : t('无')}
+            {t('补全倍率')}：{record.quota_type === 0 ? completionRatio : t('无')}
           </div>
           <div className="text-gray-700">
-            {t('分组倍率')}：{groupRatio[selectedGroup]}
+            {t('分组倍率')}：{priceData?.usedGroupRatio ?? '-'}
           </div>
         </div>
       );
-      return content;
     },
   };
 
@@ -190,14 +209,7 @@ export const getPricingTableColumns = ({
     dataIndex: 'model_price',
     fixed: 'right',
     render: (text, record, index) => {
-      const priceData = calculateModelPrice({
-        record,
-        selectedGroup,
-        groupRatio,
-        tokenUnit,
-        displayPrice,
-        currency
-      });
+      const priceData = getPriceData(record);
 
       if (priceData.isPerToken) {
         return (