✨ feat: Add lucide-react icons to all table Tag components
- Add semantic icons to ChannelsTable.js for channel status, response time, and quota display - Add status and quota icons to TokensTable.js for better visual distinction - Add status and quota icons to RedemptionsTable.js for redemption code management - Add role, status, and statistics icons to UsersTable.js for user management - Import appropriate lucide-react icons for each table component - Enhance UI consistency and user experience across all table interfaces Icons added include: - Status indicators: CheckCircle, XCircle, AlertCircle, HelpCircle - Performance metrics: Zap, Timer, Clock, AlertTriangle, TestTube - Financial data: Coins, DollarSign - User roles: User, Shield, Crown - Activity tracking: Activity, Users, UserPlus This improves visual clarity and makes table data more intuitive to understand.
This commit is contained in:
@@ -8,6 +8,14 @@ import {
|
||||
renderQuota
|
||||
} from '../../helpers';
|
||||
|
||||
import {
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Minus,
|
||||
HelpCircle,
|
||||
Coins
|
||||
} from 'lucide-react';
|
||||
|
||||
import { ITEMS_PER_PAGE } from '../../constants';
|
||||
import {
|
||||
Button,
|
||||
@@ -20,7 +28,7 @@ import {
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Typography,
|
||||
Typography
|
||||
} from '@douyinfe/semi-ui';
|
||||
import {
|
||||
IconPlus,
|
||||
@@ -31,7 +39,7 @@ import {
|
||||
IconDelete,
|
||||
IconStop,
|
||||
IconPlay,
|
||||
IconMore,
|
||||
IconMore
|
||||
} from '@douyinfe/semi-icons';
|
||||
import EditRedemption from '../../pages/Redemption/EditRedemption';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -49,25 +57,25 @@ const RedemptionsTable = () => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return (
|
||||
<Tag color='green' size='large' shape='circle'>
|
||||
<Tag color='green' size='large' shape='circle' prefixIcon={<CheckCircle size={14} />}>
|
||||
{t('未使用')}
|
||||
</Tag>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Tag color='red' size='large' shape='circle'>
|
||||
<Tag color='red' size='large' shape='circle' prefixIcon={<XCircle size={14} />}>
|
||||
{t('已禁用')}
|
||||
</Tag>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<Tag color='grey' size='large' shape='circle'>
|
||||
<Tag color='grey' size='large' shape='circle' prefixIcon={<Minus size={14} />}>
|
||||
{t('已使用')}
|
||||
</Tag>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Tag color='black' size='large' shape='circle'>
|
||||
<Tag color='black' size='large' shape='circle' prefixIcon={<HelpCircle size={14} />}>
|
||||
{t('未知状态')}
|
||||
</Tag>
|
||||
);
|
||||
@@ -95,7 +103,13 @@ const RedemptionsTable = () => {
|
||||
title: t('额度'),
|
||||
dataIndex: 'quota',
|
||||
render: (text, record, index) => {
|
||||
return <div>{renderQuota(parseInt(text))}</div>;
|
||||
return (
|
||||
<div>
|
||||
<Tag size={'large'} color={'grey'} shape='circle' prefixIcon={<Coins size={14} />}>
|
||||
{renderQuota(parseInt(text))}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user