80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
import { Card, Table, Tag, Typography } from 'antd'
|
|
import { KeyOutlined } from '@ant-design/icons'
|
|
import { quotaToUsd, getTokenStatusTag, formatTimestamp } from '@/utils/quota'
|
|
|
|
const { Text } = Typography
|
|
|
|
interface TokenItem {
|
|
id: number
|
|
name: string
|
|
status: number
|
|
remain_quota: number
|
|
used_quota: number
|
|
unlimited_quota: boolean
|
|
created_time: number
|
|
expired_time: number
|
|
}
|
|
|
|
interface Props {
|
|
tokens: TokenItem[]
|
|
loading: boolean
|
|
}
|
|
|
|
export default function TokenOverview({ tokens, loading }: Props) {
|
|
const columns = [
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 80,
|
|
render: (status: number) => {
|
|
const tag = getTokenStatusTag(status)
|
|
return <Tag color={tag.color}>{tag.text}</Tag>
|
|
},
|
|
},
|
|
{
|
|
title: '剩余额度',
|
|
key: 'remain',
|
|
width: 120,
|
|
render: (_: any, record: TokenItem) =>
|
|
record.unlimited_quota
|
|
? <Text style={{ color: '#7DB87D', fontWeight: 500 }}>无限</Text>
|
|
: `$${quotaToUsd(record.remain_quota)}`,
|
|
},
|
|
{
|
|
title: '已用额度',
|
|
dataIndex: 'used_quota',
|
|
key: 'used',
|
|
width: 120,
|
|
render: (val: number) => `$${quotaToUsd(val)}`,
|
|
},
|
|
{
|
|
title: '过期时间',
|
|
dataIndex: 'expired_time',
|
|
key: 'expired',
|
|
width: 120,
|
|
render: (val: number) => val === -1 ? '永不过期' : formatTimestamp(val),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Card title={<><KeyOutlined style={{ color: '#C8956C' }} /> 令牌概览</>} hoverable className="stat-accent">
|
|
<Table
|
|
dataSource={tokens}
|
|
columns={columns}
|
|
rowKey="id"
|
|
loading={loading}
|
|
pagination={false}
|
|
size="small"
|
|
scroll={{ y: 240 }}
|
|
/>
|
|
</Card>
|
|
)
|
|
}
|