From a203e98689cdc4a85b659ff343cd3b5ca1dd9880 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 13 Jul 2025 19:14:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20feat(ui):=20Enhance=20TokensTabl?=
 =?UTF-8?q?e=20quota=20presentation=20and=20clean=20up=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
• Re-architect the status column to embed quota information directly inside the Tag suffix.
• Consolidate rendering logic for clearer structure and easier maintenance.

Details
• Moved the quota Progress bar under the remaining / total text, inside `quotaSuffix`.
• Added “Unlimited” label for tokens with `unlimited_quota`; hides Progress and Tooltip in this case.
• Tightened vertical spacing with a flex container (`gap-[2px]`, `leading-none`) and removed extra wrappers; Progress now has zero top/bottom margin and full-width style.
• Refactored variables:
  – Replaced `tagNode/bodyContent` with a single `content` node.
  – Wrapped `content` with Tooltip only when quota is limited.
• Visual tweaks:
  – Applied `size='large'` to the Tag for better alignment.
  – Ensured consistent color via shared `getProgressColor`.
• Deleted obsolete comments and redundant code.

Result
Improves readability of the component and delivers a cleaner, more compact quota display.
---
 web/src/components/table/TokensTable.js | 95 +++++++++++++------------
 1 file changed, 49 insertions(+), 46 deletions(-)

diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index 05f7067d..18303da7 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -60,50 +60,6 @@ const TokensTable = () => {
       title: t('名称'),
       dataIndex: 'name',
     },
-    {
-      title: t('余额'),
-      key: 'quota',
-      render: (text, record) => {
-        if (record.unlimited_quota) {
-          return <Tag color='white' shape='circle'>{t('无限制')}</Tag>;
-        }
-
-        const used = parseInt(record.used_quota) || 0;
-        const remain = parseInt(record.remain_quota) || 0;
-        const total = used + remain;
-        const percent = total > 0 ? (remain / total) * 100 : 0;
-
-        const getProgressColor = (pct) => {
-          if (pct === 100) return 'var(--semi-color-success)';
-          if (pct <= 10) return 'var(--semi-color-danger)';
-          if (pct <= 30) return 'var(--semi-color-warning)';
-          return undefined;
-        };
-
-        return (
-          <Tooltip
-            content={
-              <div className='text-xs'>
-                <div>{t('已用额度')}: {renderQuota(used)}</div>
-                <div>{t('剩余额度')}: {renderQuota(remain)} ({percent.toFixed(0)}%)</div>
-                <div>{t('总额度')}: {renderQuota(total)}</div>
-              </div>
-            }
-          >
-            <div className='w-[140px]'>
-              <Progress
-                percent={percent}
-                stroke={getProgressColor(percent)}
-                showInfo
-                aria-label='quota usage'
-                format={() => `${percent.toFixed(0)}%`}
-                size='small'
-              />
-            </div>
-          </Tooltip>
-        );
-      },
-    },
     {
       title: t('状态'),
       dataIndex: 'status',
@@ -134,11 +90,39 @@ const TokensTable = () => {
           tagText = t('已耗尽');
         }
 
-        return (
+        const used = parseInt(record.used_quota) || 0;
+        const remain = parseInt(record.remain_quota) || 0;
+        const total = used + remain;
+        const percent = total > 0 ? (remain / total) * 100 : 0;
+
+        const getProgressColor = (pct) => {
+          if (pct === 100) return 'var(--semi-color-success)';
+          if (pct <= 10) return 'var(--semi-color-danger)';
+          if (pct <= 30) return 'var(--semi-color-warning)';
+          return undefined;
+        };
+
+        const quotaSuffix = record.unlimited_quota ? (
+          <div className='text-xs'>{t('无限额度')}</div>
+        ) : (
+          <div className='flex flex-col items-end'>
+            <span className='text-xs leading-none'>{`${renderQuota(remain)} / ${renderQuota(total)}`}</span>
+            <Progress
+              percent={percent}
+              stroke={getProgressColor(percent)}
+              aria-label='quota usage'
+              format={() => `${percent.toFixed(0)}%`}
+              style={{ width: '100%', marginTop: 0, marginBottom: 0 }}
+            />
+          </div>
+        );
+
+        const content = (
           <Tag
             color={tagColor}
             shape='circle'
-            suffixIcon={
+            size='large'
+            prefixIcon={
               <Switch
                 size='small'
                 checked={enabled}
@@ -146,10 +130,29 @@ const TokensTable = () => {
                 aria-label='token status switch'
               />
             }
+            suffixIcon={quotaSuffix}
           >
             {tagText}
           </Tag>
         );
+
+        if (record.unlimited_quota) {
+          return content;
+        }
+
+        return (
+          <Tooltip
+            content={
+              <div className='text-xs'>
+                <div>{t('已用额度')}: {renderQuota(used)}</div>
+                <div>{t('剩余额度')}: {renderQuota(remain)} ({percent.toFixed(0)}%)</div>
+                <div>{t('总额度')}: {renderQuota(total)}</div>
+              </div>
+            }
+          >
+            {content}
+          </Tooltip>
+        );
       },
     },
     {