From 4247883173d6999b23f06553390cb29bda2e53f6 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Wed, 23 Jul 2025 03:41:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20feat(ui):=20replace=20availabili?=
 =?UTF-8?q?ty=20indicators=20with=20icons=20in=20PricingTableColumns=20(#1?=
 =?UTF-8?q?365)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
• Swapped out the old availability UI for clearer icon-based feedback.
• Users now see a green check icon when their group can use a model and a red × icon (with tooltip) when it cannot.

Details
1. Imports
   • Removed deprecated `IconVerify`.
   • Added `IconCheckCircleStroked` ✅ and `IconClose` ❌ for new states.

2. Availability column
   • `renderAvailable` now
     – Shows a green `IconCheckCircleStroked` inside a popover (“Your group can use this model”).
     – Shows a red `IconClose` inside a popover (“你的分组无权使用该模型”) when the model is inaccessible.
     – Eliminates the empty cell/grey tag fallback.

3. Group tag
   • Updated selected-group tag to use `IconCheckCircleStroked` for visual consistency.

Result
Improves UX by providing explicit visual cues for model availability and removes ambiguous blank cells.
---
 .../model-pricing/PricingTableColumns.js      | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/src/components/table/model-pricing/PricingTableColumns.js b/web/src/components/table/model-pricing/PricingTableColumns.js
index 676ec579..be354671 100644
--- a/web/src/components/table/model-pricing/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/PricingTableColumns.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Tag, Space, Tooltip, Switch } from '@douyinfe/semi-ui';
-import { IconVerify, IconHelpCircle } from '@douyinfe/semi-icons';
+import { IconHelpCircle, IconCheckCircleStroked, IconClose } from '@douyinfe/semi-icons';
 import { Popover } from '@douyinfe/semi-ui';
 import { renderModelTag, stringToColor } from '../../../helpers';
 
@@ -43,18 +43,30 @@ function renderQuotaType(type, t) {
 }
 
 function renderAvailable(available, t) {
-  return available ? (
+  if (available) {
+    return (
+      <Popover
+        content={<div style={{ padding: 8 }}>{t('您的分组可以使用该模型')}</div>}
+        position='top'
+        key={String(available)}
+        className="bg-green-50"
+      >
+        <IconCheckCircleStroked style={{ color: 'rgb(22 163 74)' }} size='large' />
+      </Popover>
+    );
+  }
+
+  // 分组不可用时显示红色关闭图标
+  return (
     <Popover
-      content={
-        <div style={{ padding: 8 }}>{t('您的分组可以使用该模型')}</div>
-      }
+      content={<div style={{ padding: 8 }}>{t('你的分组无权使用该模型')}</div>}
       position='top'
-      key={available}
-      className="bg-green-50"
+      key="not-available"
+      className="bg-red-50"
     >
-      <IconVerify style={{ color: 'rgb(22 163 74)' }} size='large' />
+      <IconClose style={{ color: 'rgb(239 68 68)' }} size='large' />
     </Popover>
-  ) : null;
+  );
 }
 
 function renderSupportedEndpoints(endpoints) {
@@ -133,7 +145,7 @@ export const getPricingTableColumns = ({
             if (usableGroup[group]) {
               if (group === selectedGroup) {
                 return (
-                  <Tag key={group} color='blue' shape='circle' prefixIcon={<IconVerify />}>
+                  <Tag key={group} color='blue' shape='circle' prefixIcon={<IconCheckCircleStroked />}>
                     {group}
                   </Tag>
                 );