From d1e48d02bd6b514fcc5963a15ebbc5e2d6eafe4f Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 13 Jul 2025 18:10:59 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(tokens-table):=20enhance?=
 =?UTF-8?q?=20quota=20usage=20progress=20bar=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improves the “Balance” column in `TokensTable`:

• Re-styled progress bar: wider container (`w-[140px]`) and `showInfo` enabled to display percentage label.
• Added `format={() => \`\${percent}%\`}` for precise percentage feedback.
• Maintains dynamic color mapping (success / warning / danger) for clarity.

Result: clearer, more informative visual representation of remaining token quota.
---
 web/src/components/table/TaskLogsTable.js | 13 +------------
 web/src/components/table/TokensTable.js   | 17 +++++++----------
 web/src/helpers/render.js                 |  2 +-
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/web/src/components/table/TaskLogsTable.js b/web/src/components/table/TaskLogsTable.js
index 420f46b0..3928ed77 100644
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -34,7 +34,6 @@ import {
   Layout,
   Modal,
   Progress,
-  Skeleton,
   Table,
   Tag,
   Typography
@@ -665,17 +664,7 @@ const LogsTable = () => {
               <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
                 <div className="flex items-center text-orange-500 mb-2 md:mb-0">
                   <IconEyeOpened className="mr-2" />
-                  {loading ? (
-                    <Skeleton.Title
-                      style={{
-                        width: 300,
-                        marginBottom: 0,
-                        marginTop: 0
-                      }}
-                    />
-                  ) : (
-                    <Text>{t('任务记录')}</Text>
-                  )}
+                  <Text>{t('任务记录')}</Text>
                 </div>
                 <Button
                   theme='light'
diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index 90020e80..05f7067d 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -40,7 +40,6 @@ import {
   IconCopy,
   IconEyeOpened,
   IconEyeClosed,
-  IconBolt,
 } from '@douyinfe/semi-icons';
 import { Key } from 'lucide-react';
 import EditToken from '../../pages/Token/EditToken';
@@ -62,7 +61,7 @@ const TokensTable = () => {
       dataIndex: 'name',
     },
     {
-      title: t('剩余'),
+      title: t('余额'),
       key: 'quota',
       render: (text, record) => {
         if (record.unlimited_quota) {
@@ -72,15 +71,13 @@ const TokensTable = () => {
         const used = parseInt(record.used_quota) || 0;
         const remain = parseInt(record.remain_quota) || 0;
         const total = used + remain;
-        // 计算剩余额度百分比，100% 表示额度未使用
         const percent = total > 0 ? (remain / total) * 100 : 0;
 
-        // 根据剩余百分比动态设置颜色，100% 绿色，<=10% 红色，<=30% 黄色，其余默认
         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 undefined;
         };
 
         return (
@@ -93,13 +90,13 @@ const TokensTable = () => {
               </div>
             }
           >
-            <div className='w-[30px]'>
+            <div className='w-[140px]'>
               <Progress
                 percent={percent}
                 stroke={getProgressColor(percent)}
-                showInfo={false}
+                showInfo
                 aria-label='quota usage'
-                type="circle"
+                format={() => `${percent.toFixed(0)}%`}
                 size='small'
               />
             </div>
@@ -141,7 +138,7 @@ const TokensTable = () => {
           <Tag
             color={tagColor}
             shape='circle'
-            prefixIcon={
+            suffixIcon={
               <Switch
                 size='small'
                 checked={enabled}
@@ -166,7 +163,7 @@ const TokensTable = () => {
               content={t('当前分组为 auto，会自动选择最优分组，当一个组不可用时自动降级到下一个组（熔断机制）')}
               position='top'
             >
-              <Tag color='blue' shape='circle' prefixIcon={<IconBolt />}> {t('智能熔断')} </Tag>
+              <Tag color='white' shape='circle'> {t('智能熔断')} </Tag>
             </Tooltip>
           );
         }
diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index 646374d3..fd7ae993 100644
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -584,7 +584,7 @@ export function renderText(text, limit) {
 export function renderGroup(group) {
   if (group === '') {
     return (
-      <Tag key='default' color='orange' shape='circle'>
+      <Tag key='default' color='white' shape='circle'>
         {i18next.t('用户分组')}
       </Tag>
     );