From 60b624a32911eef4162187a784417f8a5fa715d0 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Fri, 13 Jun 2025 14:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(ui):=20enhance=20table=20he?=
 =?UTF-8?q?aders=20with=20descriptive=20titles=20and=20semantic=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add informative header section to TokensTable with Key icon and description
- Replace generic eye icon with semantic Ticket icon in RedemptionsTable header
- Import additional UI components (Divider, Typography) for better layout structure
- Improve user experience with contextual information about token and redemption functionality
- Maintain consistent styling and layout between both table components

The changes provide users with clear understanding of each table's purpose:
- Tokens: "令牌用于API访问认证，可以设置额度限制和模型权限" with Key icon
- Redemptions: "兑换码可以批量生成和分发，适合用于推广活动或批量充值" with Ticket icon
---
 web/src/components/table/RedemptionsTable.js |  5 +++--
 web/src/components/table/TokensTable.js      | 18 ++++++++++++++++--
 web/src/i18n/locales/en.json                 |  3 ++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/src/components/table/RedemptionsTable.js b/web/src/components/table/RedemptionsTable.js
index c314bae2..7d70f179 100644
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -13,7 +13,8 @@ import {
   XCircle,
   Minus,
   HelpCircle,
-  Coins
+  Coins,
+  Ticket
 } from 'lucide-react';
 
 import { ITEMS_PER_PAGE } from '../../constants';
@@ -450,7 +451,7 @@ const RedemptionsTable = () => {
     <div className="flex flex-col w-full">
       <div className="mb-2">
         <div className="flex items-center text-orange-500">
-          <IconEyeOpened className="mr-2" />
+          <Ticket size={16} className="mr-2" />
           <Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text>
         </div>
       </div>
diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index 9a959e1b..bc6c7607 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -14,6 +14,7 @@ import { ITEMS_PER_PAGE } from '../../constants';
 import {
   Button,
   Card,
+  Divider,
   Dropdown,
   Empty,
   Form,
@@ -21,7 +22,8 @@ import {
   Space,
   SplitButtonGroup,
   Table,
-  Tag
+  Tag,
+  Typography
 } from '@douyinfe/semi-ui';
 import {
   IllustrationNoResult,
@@ -36,7 +38,8 @@ import {
   Gauge,
   HelpCircle,
   Infinity,
-  Coins
+  Coins,
+  Key
 } from 'lucide-react';
 
 import {
@@ -54,6 +57,8 @@ import {
 import EditToken from '../../pages/Token/EditToken';
 import { useTranslation } from 'react-i18next';
 
+const { Text } = Typography;
+
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
 }
@@ -580,6 +585,15 @@ const TokensTable = () => {
 
   const renderHeader = () => (
     <div className="flex flex-col w-full">
+      <div className="mb-2">
+        <div className="flex items-center text-blue-500">
+          <Key size={16} className="mr-2" />
+          <Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text>
+        </div>
+      </div>
+
+      <Divider margin="12px" />
+
       <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
         <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
           <Button
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index db0d2980..98de048b 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1654,5 +1654,6 @@
   "设置保存成功": "Settings saved successfully",
   "设置保存失败": "Settings save failed",
   "已新增 {{count}} 个模型：{{list}}": "Added {{count}} models: {{list}}",
-  "未发现新增模型": "No new models were added"
+  "未发现新增模型": "No new models were added",
+  "令牌用于API访问认证，可以设置额度限制和模型权限。": "Tokens are used for API access authentication, and can set quota limits and model permissions."
 }
\ No newline at end of file