🎨 feat(ui): enhance table headers with descriptive titles and semantic icons

- 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

@@ -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>

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

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."
 }