oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⚽style: change the border radius of most components from full to lg size

Browse Source
This commit is contained in:
t0ng7u
2025-06-29 02:32:09 +08:00
parent cffade7210
commit e6949e611a
26 changed files with 147 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/components/table/ChannelsTable.js
View File

@@ -10,16 +10,6 @@ import {
getChannelIcon,
renderQuotaWithAmount
} from '../../helpers/index.js';
import {
CheckCircle,
XCircle,
AlertCircle,
HelpCircle,
Coins,
Tags,
} from 'lucide-react';
import { CHANNEL_OPTIONS, ITEMS_PER_PAGE, MODEL_TABLE_PAGE_SIZE } from '../../constants/index.js';
import {
Button,
@@ -50,12 +40,8 @@ import {
import EditChannel from '../../pages/Channel/EditChannel.js';
import {
IconTreeTriangleDown,
IconPlus,
IconSearch,
IconDelete,
IconMore,
IconCopy,
IconSmallTriangleRight
} from '@douyinfe/semi-icons';
import { loadChannelModels, isMobile, copy } from '../../helpers';
import EditTagModal from '../../pages/Channel/EditTagModal.js';
@@ -91,7 +77,6 @@ const ChannelsTable = () => {
return (
<Tag
color='light-blue'
prefixIcon={<Tags size={14} />}
size='large'
shape='circle'
type='light'
@@ -105,25 +90,25 @@ const ChannelsTable = () => {
switch (status) {
case 1:
return (
<Tag size='large' color='green' shape='circle' prefixIcon={<CheckCircle size={14} />}>
<Tag size='large' color='green' shape='circle'>
{t('已启用')}
</Tag>
);
case 2:
return (
<Tag size='large' color='red' shape='circle' prefixIcon={<XCircle size={14} />}>
<Tag size='large' color='red' shape='circle'>
{t('已禁用')}
</Tag>
);
case 3:
return (
<Tag size='large' color='yellow' shape='circle' prefixIcon={<AlertCircle size={14} />}>
<Tag size='large' color='yellow' shape='circle'>
{t('自动禁用')}
</Tag>
);
default:
return (
<Tag size='large' color='grey' shape='circle' prefixIcon={<HelpCircle size={14} />}>
<Tag size='large' color='grey' shape='circle'>
{t('未知状态')}
</Tag>
);
@@ -346,7 +331,7 @@ const ChannelsTable = () => {
<div>
<Space spacing={1}>
<Tooltip content={t('已用额度')}>
<Tag color='white' type='ghost' size='large' shape='circle' prefixIcon={<Coins size={14} />}>
<Tag color='white' type='ghost' size='large' shape='circle'>
{renderQuota(record.used_quota)}
</Tag>
</Tooltip>
@@ -356,7 +341,6 @@ const ChannelsTable = () => {
type='ghost'
size='large'
shape='circle'
prefixIcon={<Coins size={14} />}
onClick={() => updateChannelBalance(record)}
>
{renderQuotaWithAmount(record.balance)}
@@ -368,7 +352,7 @@ const ChannelsTable = () => {
} else {
return (
<Tooltip content={t('已用额度')}>
<Tag color='white' type='ghost' size='large' shape='circle' prefixIcon={<Coins size={14} />}>
<Tag color='white' type='ghost' size='large' shape='circle'>
{renderQuota(record.used_quota)}
</Tag>
</Tooltip>
@@ -492,7 +476,6 @@ const ChannelsTable = () => {
{
node: 'item',
name: t('删除'),
icon: <IconDelete />,
type: 'danger',
onClick: () => {
Modal.confirm({
@@ -509,7 +492,6 @@ const ChannelsTable = () => {
{
node: 'item',
name: t('复制'),
icon: <IconCopy />,
type: 'primary',
onClick: () => {
Modal.confirm({
@@ -524,7 +506,7 @@ const ChannelsTable = () => {
return (
<Space wrap>
<SplitButtonGroup
className="!rounded-full overflow-hidden"
className="overflow-hidden"
aria-label={t('测试单个渠道操作项目组')}
>
<Button
@@ -550,7 +532,6 @@ const ChannelsTable = () => {
theme='light'
type='warning'
size="small"
className="!rounded-full"
onClick={() => manageChannel(record.id, 'disable', record)}
>
{t('禁用')}
@@ -560,7 +541,6 @@ const ChannelsTable = () => {
theme='light'
type='secondary'
size="small"
className="!rounded-full"
onClick={() => manageChannel(record.id, 'enable', record)}
>
{t('启用')}
@@ -571,7 +551,6 @@ const ChannelsTable = () => {
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
onClick={() => {
setEditingChannel(record);
setShowEdit(true);
@@ -590,7 +569,6 @@ const ChannelsTable = () => {
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
/>
</Dropdown>
</Space>
@@ -603,7 +581,6 @@ const ChannelsTable = () => {
theme='light'
type='secondary'
size="small"
className="!rounded-full"
onClick={() => manageTag(record.key, 'enable')}
>
{t('启用全部')}
@@ -612,7 +589,6 @@ const ChannelsTable = () => {
theme='light'
type='warning'
size="small"
className="!rounded-full"
onClick={() => manageTag(record.key, 'disable')}
>
{t('禁用全部')}
@@ -621,7 +597,6 @@ const ChannelsTable = () => {
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
onClick={() => {
setShowEditTag(true);
setEditingTag(record.key);
@@ -694,21 +669,18 @@ const ChannelsTable = () => {
<Button
theme="light"
onClick={() => initDefaultColumns()}
className="!rounded-full"
>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('确定')}
</Button>
@@ -1508,7 +1480,7 @@ const ChannelsTable = () => {
disabled={!enableBatchDelete}
theme='light'
type='danger'
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => {
Modal.confirm({
title: t('确定是否要删除所选通道？'),
@@ -1526,7 +1498,7 @@ const ChannelsTable = () => {
theme='light'
type='primary'
onClick={() => setShowBatchSetTag(true)}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
>
{t('批量设置标签')}
</Button>
@@ -1541,7 +1513,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='warning'
className="!rounded-full w-full"
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定？'),
@@ -1560,7 +1532,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='secondary'
className="!rounded-full w-full"
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定？'),
@@ -1579,7 +1551,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='danger'
className="!rounded-full w-full"
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定是否要删除禁用通道？'),
@@ -1598,7 +1570,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='tertiary'
className="!rounded-full w-full"
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定是否要修复数据库一致性？'),
@@ -1615,7 +1587,7 @@ const ChannelsTable = () => {
</Dropdown.Menu>
}
>
<Button size='small' theme='light' type='tertiary' className="!rounded-full w-full md:w-auto">
<Button size='small' theme='light' type='tertiary' className="w-full md:w-auto">
{t('批量操作')}
</Button>
</Dropdown>
@@ -1624,7 +1596,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='secondary'
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -1713,8 +1685,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='primary'
icon={<IconPlus />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => {
setEditingChannel({
id: undefined,
@@ -1729,7 +1700,7 @@ const ChannelsTable = () => {
size='small'
theme='light'
type='primary'
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={refresh}
>
{t('刷新')}
@@ -1740,7 +1711,7 @@ const ChannelsTable = () => {
theme='light'
type='tertiary'
onClick={() => setShowColumnSelector(true)}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
>
{t('列设置')}
</Button>
@@ -1764,7 +1735,6 @@ const ChannelsTable = () => {
field="searchKeyword"
prefix={<IconSearch />}
placeholder={t('渠道ID，名称，密钥，API地址')}
className="!rounded-full"
showClear
pure
/>
@@ -1775,7 +1745,6 @@ const ChannelsTable = () => {
field="searchModel"
prefix={<IconSearch />}
placeholder={t('模型关键字')}
className="!rounded-full"
showClear
pure
/>
@@ -1789,7 +1758,7 @@ const ChannelsTable = () => {
{ label: t('选择分组'), value: null },
...groupOptions,
]}
className="!rounded-full w-full"
className="w-full"
showClear
pure
onChange={() => {
@@ -1805,7 +1774,7 @@ const ChannelsTable = () => {
type="primary"
htmlType="submit"
loading={loading || searching}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
>
{t('查询')}
</Button>
@@ -1821,7 +1790,7 @@ const ChannelsTable = () => {
}, 100);
}
}}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
>
{t('重置')}
</Button>
@@ -1917,7 +1886,6 @@ const ChannelsTable = () => {
value={batchSetTagValue}
onChange={(v) => setBatchSetTagValue(v)}
size='large'
className="!rounded-full"
/>
<div className="mt-4">
<Typography.Text type='secondary'>
@@ -1949,15 +1917,13 @@ const ChannelsTable = () => {
setModelSearchKeyword(v);
setModelTablePage(1);
}}
className="!w-full !rounded-full"
className="!w-full"
prefix={<IconSearch />}
showClear
/>
<Button
theme='light'
icon={<IconCopy />}
className="!rounded-full"
onClick={() => {
if (selectedModelKeys.length === 0) {
showError(t('请先选择模型！'));
@@ -1978,7 +1944,6 @@ const ChannelsTable = () => {
<Button
theme='light'
type='primary'
className="!rounded-full"
onClick={() => {
if (!currentTestChannel) return;
const successKeys = currentTestChannel.models
@@ -2008,7 +1973,6 @@ const ChannelsTable = () => {
<Button
theme='light'
type='warning'
className="!rounded-full"
onClick={handleCloseModal}
>
{t('停止测试')}
@@ -2017,7 +1981,6 @@ const ChannelsTable = () => {
<Button
theme='light'
type='tertiary'
className="!rounded-full"
onClick={handleCloseModal}
>
{t('取消')}
@@ -2026,7 +1989,6 @@ const ChannelsTable = () => {
<Button
theme='light'
type='primary'
className="!rounded-full"
onClick={batchTestModels}
loading={isBatchTesting}
disabled={isBatchTesting}
@@ -2071,7 +2033,7 @@ const ChannelsTable = () => {
if (isTesting) {
return (
<Tag size='large' color='blue' className="!rounded-full">
<Tag size='large' color='blue' shape='circle'>
{t('测试中')}
</Tag>
);
@@ -2079,7 +2041,7 @@ const ChannelsTable = () => {
if (!testResult) {
return (
<Tag size='large' color='grey' className="!rounded-full">
<Tag size='large' color='grey' shape='circle'>
{t('未开始')}
</Tag>
);
@@ -2090,7 +2052,7 @@ const ChannelsTable = () => {
<Tag
size='large'
color={testResult.success ? 'green' : 'red'}
className="!rounded-full"
shape='circle'
>
{testResult.success ? t('成功') : t('失败')}
</Tag>
@@ -2112,11 +2074,9 @@ const ChannelsTable = () => {
<Button
theme='light'
type='primary'
className="!rounded-full"
onClick={() => testChannel(currentTestChannel, record.model)}
loading={isTesting}
size='small'
icon={<IconSmallTriangleRight />}
>
{t('测试')}
</Button>

25
web/src/components/table/LogsTable.js
View File

@@ -47,7 +47,7 @@ import {
} from '@douyinfe/semi-illustrations';
import { ITEMS_PER_PAGE } from '../../constants';
import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
import { IconSetting, IconSearch, IconHelpCircle, IconDescend } from '@douyinfe/semi-icons';
import { IconSearch, IconHelpCircle } from '@douyinfe/semi-icons';
import { Route } from 'lucide-react';
import { useTableCompactMode } from '../../hooks/useTableCompactMode';
@@ -696,21 +696,18 @@ const LogsTable = () => {
<Button
theme='light'
onClick={() => initDefaultColumns()}
className='!rounded-full'
>
{t('重置')}
</Button>
<Button
theme='light'
onClick={() => setShowColumnSelector(false)}
className='!rounded-full'
>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
className='!rounded-full'
>
{t('确定')}
</Button>
@@ -1221,10 +1218,10 @@ const LogsTable = () => {
size='large'
style={{
padding: 15,
borderRadius: '9999px',
fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
}}
className='!rounded-lg'
>
{t('消耗额度')}: {renderQuota(stat.quota)}
</Tag>
@@ -1233,10 +1230,10 @@ const LogsTable = () => {
size='large'
style={{
padding: 15,
borderRadius: '9999px',
fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
}}
className='!rounded-lg'
>
RPM: {stat.rpm}
</Tag>
@@ -1247,9 +1244,9 @@ const LogsTable = () => {
padding: 15,
border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
fontWeight: 500,
}}
className='!rounded-lg'
>
TPM: {stat.tpm}
</Tag>
@@ -1258,8 +1255,7 @@ const LogsTable = () => {
<Button
theme='light'
type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -1299,7 +1295,6 @@ const LogsTable = () => {
field='token_name'
prefix={<IconSearch />}
placeholder={t('令牌名称')}
className='!rounded-full'
showClear
pure
/>
@@ -1308,7 +1303,6 @@ const LogsTable = () => {
field='model_name'
prefix={<IconSearch />}
placeholder={t('模型名称')}
className='!rounded-full'
showClear
pure
/>
@@ -1317,7 +1311,6 @@ const LogsTable = () => {
field='group'
prefix={<IconSearch />}
placeholder={t('分组')}
className='!rounded-full'
showClear
pure
/>
@@ -1328,7 +1321,6 @@ const LogsTable = () => {
field='channel'
prefix={<IconSearch />}
placeholder={t('渠道 ID')}
className='!rounded-full'
showClear
pure
/>
@@ -1336,7 +1328,6 @@ const LogsTable = () => {
field='username'
prefix={<IconSearch />}
placeholder={t('用户名称')}
className='!rounded-full'
showClear
pure
/>
@@ -1351,7 +1342,7 @@ const LogsTable = () => {
<Form.Select
field='logType'
placeholder={t('日志类型')}
className='!rounded-full w-full sm:w-auto min-w-[120px]'
className='w-full sm:w-auto min-w-[120px]'
showClear
pure
onChange={() => {
@@ -1387,7 +1378,6 @@ const LogsTable = () => {
type='primary'
htmlType='submit'
loading={loading}
className='!rounded-full'
>
{t('查询')}
</Button>
@@ -1402,16 +1392,13 @@ const LogsTable = () => {
}, 100);
}
}}
className='!rounded-full'
>
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
icon={<IconSetting />}
onClick={() => setShowColumnSelector(true)}
className='!rounded-full'
>
{t('列设置')}
</Button>

15
web/src/components/table/MjLogsTable.js
View File

@@ -59,8 +59,6 @@ import { ITEMS_PER_PAGE } from '../../constants';
import {
IconEyeOpened,
IconSearch,
IconSetting,
IconDescend
} from '@douyinfe/semi-icons';
import { useTableCompactMode } from '../../hooks/useTableCompactMode';
@@ -517,7 +515,6 @@ const LogsTable = () => {
setModalImageUrl(text);
setIsModalOpenurl(true);
}}
className="!rounded-full"
>
{t('查看图片')}
</Button>
@@ -735,21 +732,18 @@ const LogsTable = () => {
<Button
theme="light"
onClick={() => initDefaultColumns()}
className="!rounded-full"
>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('确定')}
</Button>
@@ -827,8 +821,7 @@ const LogsTable = () => {
<Button
theme='light'
type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -867,7 +860,6 @@ const LogsTable = () => {
field='mj_id'
prefix={<IconSearch />}
placeholder={t('任务 ID')}
className="!rounded-full"
showClear
pure
/>
@@ -878,7 +870,6 @@ const LogsTable = () => {
field='channel_id'
prefix={<IconSearch />}
placeholder={t('渠道 ID')}
className="!rounded-full"
showClear
pure
/>
@@ -893,7 +884,6 @@ const LogsTable = () => {
type='primary'
htmlType='submit'
loading={loading}
className="!rounded-full"
>
{t('查询')}
</Button>
@@ -908,16 +898,13 @@ const LogsTable = () => {
}, 100);
}
}}
className="!rounded-full"
>
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
icon={<IconSetting />}
onClick={() => setShowColumnSelector(true)}
className="!rounded-full"
>
{t('列设置')}
</Button>

13
web/src/components/table/ModelPricing.js
View File

@@ -161,6 +161,7 @@ const ModelPricing = () => {
<Tag
color='blue'
size='large'
shape='circle'
onClick={() => {
setSelectedGroup(group);
showInfo(
@@ -170,7 +171,7 @@ const ModelPricing = () => {
}),
);
}}
className="cursor-pointer hover:opacity-80 transition-opacity !rounded-full"
className="cursor-pointer hover:opacity-80 transition-opacity"
>
{group}
</Tag>
@@ -404,7 +405,6 @@ const ModelPricing = () => {
<Input
prefix={<IconSearch />}
placeholder={t('模糊搜索模型名称')}
className="!rounded-lg"
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
onChange={handleChange}
@@ -418,7 +418,7 @@ const ModelPricing = () => {
icon={<IconCopy />}
onClick={() => copyText(selectedRowKeys)}
disabled={selectedRowKeys.length === 0}
className="!rounded-lg !bg-blue-500 hover:!bg-blue-600 text-white"
className="!bg-blue-500 hover:!bg-blue-600 text-white"
size="large"
>
{t('复制选中模型')}
@@ -477,13 +477,6 @@ const ModelPricing = () => {
}}
bodyStyle={{ padding: 0 }}
>
{/* 装饰性背景元素 */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-16 -left-16 w-48 h-48 bg-white opacity-3 rounded-full"></div>
<div className="absolute top-1/2 right-1/4 w-24 h-24 bg-yellow-400 opacity-10 rounded-full"></div>
</div>
<div className="relative p-6 sm:p-8" style={{ color: 'white' }}>
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 lg:gap-6">
<div className="flex items-start">

58
web/src/components/table/RedemptionsTable.js
View File

@@ -8,14 +8,7 @@ import {
renderQuota
} from '../../helpers';
import {
CheckCircle,
XCircle,
Minus,
HelpCircle,
Coins,
Ticket
} from 'lucide-react';
import { Ticket } from 'lucide-react';
import { ITEMS_PER_PAGE } from '../../constants';
import {
@@ -37,16 +30,8 @@ import {
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
IconPlus,
IconCopy,
IconSearch,
IconEyeOpened,
IconEdit,
IconDelete,
IconStop,
IconPlay,
IconMore,
IconDescend
} from '@douyinfe/semi-icons';
import EditRedemption from '../../pages/Redemption/EditRedemption';
import { useTranslation } from 'react-i18next';
@@ -68,31 +53,31 @@ const RedemptionsTable = () => {
const renderStatus = (status, record) => {
if (isExpired(record)) {
return (
<Tag color='orange' size='large' shape='circle' prefixIcon={<Minus size={14} />}>{t('已过期')}</Tag>
<Tag color='orange' size='large' shape='circle'>{t('已过期')}</Tag>
);
}
switch (status) {
case 1:
return (
<Tag color='green' size='large' shape='circle' prefixIcon={<CheckCircle size={14} />}>
<Tag color='green' size='large' shape='circle'>
{t('未使用')}
</Tag>
);
case 2:
return (
<Tag color='red' size='large' shape='circle' prefixIcon={<XCircle size={14} />}>
<Tag color='red' size='large' shape='circle'>
{t('已禁用')}
</Tag>
);
case 3:
return (
<Tag color='grey' size='large' shape='circle' prefixIcon={<Minus size={14} />}>
<Tag color='grey' size='large' shape='circle'>
{t('已使用')}
</Tag>
);
default:
return (
<Tag color='black' size='large' shape='circle' prefixIcon={<HelpCircle size={14} />}>
<Tag color='black' size='large' shape='circle'>
{t('未知状态')}
</Tag>
);
@@ -122,7 +107,7 @@ const RedemptionsTable = () => {
render: (text, record, index) => {
return (
<div>
<Tag size={'large'} color={'grey'} shape='circle' prefixIcon={<Coins size={14} />}>
<Tag size={'large'} color={'grey'} shape='circle'>
{renderQuota(parseInt(text))}
</Tag>
</div>
@@ -160,7 +145,6 @@ const RedemptionsTable = () => {
{
node: 'item',
name: t('删除'),
icon: <IconDelete />,
type: 'danger',
onClick: () => {
Modal.confirm({
@@ -180,7 +164,6 @@ const RedemptionsTable = () => {
moreMenuItems.push({
node: 'item',
name: t('禁用'),
icon: <IconStop />,
type: 'warning',
onClick: () => {
manageRedemption(record.id, 'disable', record);
@@ -190,7 +173,6 @@ const RedemptionsTable = () => {
moreMenuItems.push({
node: 'item',
name: t('启用'),
icon: <IconPlay />,
type: 'secondary',
onClick: () => {
manageRedemption(record.id, 'enable', record);
@@ -203,21 +185,17 @@ const RedemptionsTable = () => {
<Space>
<Popover content={record.key} style={{ padding: 20 }} position='top'>
<Button
icon={<IconEyeOpened />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
>
{t('查看')}
</Button>
</Popover>
<Button
icon={<IconCopy />}
theme='light'
type='secondary'
size="small"
className="!rounded-full"
onClick={async () => {
await copyText(record.key);
}}
@@ -225,11 +203,9 @@ const RedemptionsTable = () => {
{t('复制')}
</Button>
<Button
icon={<IconEdit />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
onClick={() => {
setEditingRedemption(record);
setShowEdit(true);
@@ -244,11 +220,10 @@ const RedemptionsTable = () => {
menu={moreMenuItems}
>
<Button
icon={<IconMore />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
icon={<IconMore />}
/>
</Dropdown>
</Space>
@@ -451,8 +426,7 @@ const RedemptionsTable = () => {
<Button
theme='light'
type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -468,8 +442,7 @@ const RedemptionsTable = () => {
<Button
theme='light'
type='primary'
icon={<IconPlus />}
className="!rounded-full w-full sm:w-auto"
className="w-full sm:w-auto"
onClick={() => {
setEditingRedemption({
id: undefined,
@@ -481,8 +454,7 @@ const RedemptionsTable = () => {
</Button>
<Button
type='warning'
icon={<IconCopy />}
className="!rounded-full w-full sm:w-auto"
className="w-full sm:w-auto"
onClick={async () => {
if (selectedKeys.length === 0) {
showError(t('请至少选择一个兑换码！'));
@@ -501,8 +473,7 @@ const RedemptionsTable = () => {
</div>
<Button
type='danger'
icon={<IconDelete />}
className="!rounded-full w-full sm:w-auto"
className="w-full sm:w-auto"
onClick={() => {
Modal.confirm({
title: t('确定清除所有失效兑换码？'),
@@ -546,7 +517,6 @@ const RedemptionsTable = () => {
field="searchKeyword"
prefix={<IconSearch />}
placeholder={t('关键字(id或者名称)')}
className="!rounded-full"
showClear
pure
/>
@@ -556,7 +526,7 @@ const RedemptionsTable = () => {
type="primary"
htmlType="submit"
loading={loading || searching}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('查询')}
</Button>
@@ -572,7 +542,7 @@ const RedemptionsTable = () => {
}, 100);
}
}}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('重置')}
</Button>

14
web/src/components/table/TaskLogsTable.js
View File

@@ -47,8 +47,6 @@ import { ITEMS_PER_PAGE } from '../../constants';
import {
IconEyeOpened,
IconSearch,
IconSetting,
IconDescend
} from '@douyinfe/semi-icons';
import { useTableCompactMode } from '../../hooks/useTableCompactMode';
@@ -600,21 +598,18 @@ const LogsTable = () => {
<Button
theme="light"
onClick={() => initDefaultColumns()}
className="!rounded-full"
>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
className="!rounded-full"
>
{t('确定')}
</Button>
@@ -684,8 +679,7 @@ const LogsTable = () => {
<Button
theme='light'
type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -724,7 +718,6 @@ const LogsTable = () => {
field='task_id'
prefix={<IconSearch />}
placeholder={t('任务 ID')}
className="!rounded-full"
showClear
pure
/>
@@ -735,7 +728,6 @@ const LogsTable = () => {
field='channel_id'
prefix={<IconSearch />}
placeholder={t('渠道 ID')}
className="!rounded-full"
showClear
pure
/>
@@ -750,7 +742,6 @@ const LogsTable = () => {
type='primary'
htmlType='submit'
loading={loading}
className="!rounded-full"
>
{t('查询')}
</Button>
@@ -765,16 +756,13 @@ const LogsTable = () => {
}, 100);
}
}}
className="!rounded-full"
>
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
icon={<IconSetting />}
onClick={() => setShowColumnSelector(true)}
className="!rounded-full"
>
{t('列设置')}
</Button>

73
web/src/components/table/TokensTable.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from 'react';
import React, { useEffect, useState } from 'react';
import {
API,
copy,
@@ -9,7 +9,6 @@ import {
renderQuota,
getQuotaPerUnit
} from '../../helpers';
import { ITEMS_PER_PAGE } from '../../constants';
import {
Button,
@@ -29,32 +28,12 @@ import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
CheckCircle,
Shield,
XCircle,
Clock,
Gauge,
HelpCircle,
Infinity,
Coins,
Key
} from 'lucide-react';
import {
IconPlus,
IconCopy,
IconSearch,
IconTreeTriangleDown,
IconEyeOpened,
IconEdit,
IconDelete,
IconStop,
IconPlay,
IconMore,
IconDescend
} from '@douyinfe/semi-icons';
import { Key } from 'lucide-react';
import EditToken from '../../pages/Token/EditToken';
import { useTranslation } from 'react-i18next';
import { useTableCompactMode } from '../../hooks/useTableCompactMode';
@@ -73,38 +52,38 @@ const TokensTable = () => {
case 1:
if (model_limits_enabled) {
return (
<Tag color='green' size='large' shape='circle' prefixIcon={<Shield size={14} />}>
<Tag color='green' size='large' shape='circle' >
{t('已启用：限制模型')}
</Tag>
);
} else {
return (
<Tag color='green' size='large' shape='circle' prefixIcon={<CheckCircle size={14} />}>
<Tag color='green' size='large' shape='circle' >
{t('已启用')}
</Tag>
);
}
case 2:
return (
<Tag color='red' size='large' shape='circle' prefixIcon={<XCircle size={14} />}>
<Tag color='red' size='large' shape='circle' >
{t('已禁用')}
</Tag>
);
case 3:
return (
<Tag color='yellow' size='large' shape='circle' prefixIcon={<Clock size={14} />}>
<Tag color='yellow' size='large' shape='circle' >
{t('已过期')}
</Tag>
);
case 4:
return (
<Tag color='grey' size='large' shape='circle' prefixIcon={<Gauge size={14} />}>
<Tag color='grey' size='large' shape='circle' >
{t('已耗尽')}
</Tag>
);
default:
return (
<Tag color='black' size='large' shape='circle' prefixIcon={<HelpCircle size={14} />}>
<Tag color='black' size='large' shape='circle' >
{t('未知状态')}
</Tag>
);
@@ -137,7 +116,7 @@ const TokensTable = () => {
render: (text, record, index) => {
return (
<div>
<Tag size={'large'} color={'grey'} shape='circle' prefixIcon={<Coins size={14} />}>
<Tag size={'large'} color={'grey'} shape='circle' >
{renderQuota(parseInt(text))}
</Tag>
</div>
@@ -164,7 +143,7 @@ const TokensTable = () => {
return (
<div>
{record.unlimited_quota ? (
<Tag size={'large'} color={'white'} shape='circle' prefixIcon={<Infinity size={14} />}>
<Tag size={'large'} color={'white'} shape='circle' >
{t('无限制')}
</Tag>
) : (
@@ -172,7 +151,6 @@ const TokensTable = () => {
size={'large'}
color={getQuotaColor(parseInt(text))}
shape='circle'
prefixIcon={<Coins size={14} />}
>
{renderQuota(parseInt(text))}
</Tag>
@@ -238,7 +216,6 @@ const TokensTable = () => {
{
node: 'item',
name: t('查看'),
icon: <IconEyeOpened />,
onClick: () => {
Modal.info({
title: t('令牌详情'),
@@ -250,7 +227,6 @@ const TokensTable = () => {
{
node: 'item',
name: t('删除'),
icon: <IconDelete />,
type: 'danger',
onClick: () => {
Modal.confirm({
@@ -271,7 +247,6 @@ const TokensTable = () => {
moreMenuItems.push({
node: 'item',
name: t('禁用'),
icon: <IconStop />,
type: 'warning',
onClick: () => {
manageToken(record.id, 'disable', record);
@@ -281,7 +256,6 @@ const TokensTable = () => {
moreMenuItems.push({
node: 'item',
name: t('启用'),
icon: <IconPlay />,
type: 'secondary',
onClick: () => {
manageToken(record.id, 'enable', record);
@@ -292,7 +266,7 @@ const TokensTable = () => {
return (
<Space wrap>
<SplitButtonGroup
className="!rounded-full overflow-hidden"
className="overflow-hidden"
aria-label={t('项目操作按钮组')}
>
<Button
@@ -331,11 +305,9 @@ const TokensTable = () => {
</SplitButtonGroup>
<Button
icon={<IconCopy />}
theme='light'
type='secondary'
size="small"
className="!rounded-full"
onClick={async (text) => {
await copyText('sk-' + record.key);
}}
@@ -344,11 +316,9 @@ const TokensTable = () => {
</Button>
<Button
icon={<IconEdit />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
onClick={() => {
setEditingToken(record);
setShowEdit(true);
@@ -367,7 +337,6 @@ const TokensTable = () => {
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
/>
</Dropdown>
</Space>
@@ -621,8 +590,7 @@ const TokensTable = () => {
<Button
theme="light"
type="secondary"
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -637,8 +605,7 @@ const TokensTable = () => {
<Button
theme="light"
type="primary"
icon={<IconPlus />}
className="!rounded-full flex-1 md:flex-initial"
className="flex-1 md:flex-initial"
onClick={() => {
setEditingToken({
id: undefined,
@@ -651,8 +618,7 @@ const TokensTable = () => {
<Button
theme="light"
type="warning"
icon={<IconCopy />}
className="!rounded-full flex-1 md:flex-initial"
className="flex-1 md:flex-initial"
onClick={() => {
if (selectedKeys.length === 0) {
showError(t('请至少选择一个令牌！'));
@@ -667,7 +633,6 @@ const TokensTable = () => {
<Button
type="primary"
theme="solid"
icon={<IconCopy />}
onClick={async () => {
let content = '';
for (let i = 0; i < selectedKeys.length; i++) {
@@ -682,7 +647,6 @@ const TokensTable = () => {
</Button>
<Button
theme="light"
icon={<IconCopy />}
onClick={async () => {
let content = '';
for (let i = 0; i < selectedKeys.length; i++) {
@@ -704,8 +668,7 @@ const TokensTable = () => {
<Button
theme="light"
type="danger"
icon={<IconDelete />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => {
if (selectedKeys.length === 0) {
showError(t('请至少选择一个令牌！'));
@@ -743,7 +706,6 @@ const TokensTable = () => {
field="searchKeyword"
prefix={<IconSearch />}
placeholder={t('搜索关键字')}
className="!rounded-full"
showClear
pure
/>
@@ -753,7 +715,6 @@ const TokensTable = () => {
field="searchToken"
prefix={<IconSearch />}
placeholder={t('密钥')}
className="!rounded-full"
showClear
pure
/>
@@ -763,7 +724,7 @@ const TokensTable = () => {
type="primary"
htmlType="submit"
loading={loading || searching}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('查询')}
</Button>
@@ -778,7 +739,7 @@ const TokensTable = () => {
}, 100);
}
}}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('重置')}
</Button>

37
web/src/components/table/UsersTable.js
View File

@@ -34,17 +34,9 @@ import {
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
IconPlus,
IconSearch,
IconEdit,
IconDelete,
IconStop,
IconPlay,
IconMore,
IconUserAdd,
IconArrowUp,
IconArrowDown,
IconDescend
IconMore,
} from '@douyinfe/semi-icons';
import { ITEMS_PER_PAGE } from '../../constants';
import AddUser from '../../pages/User/AddUser';
@@ -127,7 +119,7 @@ const UsersTable = () => {
<Tooltip content={remark} position="top" showArrow>
<Tag color='white' size='large' shape='circle' className="!text-xs">
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: '#10b981' }} />
<div className="w-2 h-2 flex-shrink-0" style={{ backgroundColor: '#10b981' }} />
{displayRemark}
</div>
</Tag>
@@ -221,7 +213,6 @@ const UsersTable = () => {
{
node: 'item',
name: t('提升'),
icon: <IconArrowUp />,
type: 'warning',
onClick: () => {
Modal.confirm({
@@ -236,7 +227,6 @@ const UsersTable = () => {
{
node: 'item',
name: t('降级'),
icon: <IconArrowDown />,
type: 'secondary',
onClick: () => {
Modal.confirm({
@@ -251,7 +241,6 @@ const UsersTable = () => {
{
node: 'item',
name: t('注销'),
icon: <IconDelete />,
type: 'danger',
onClick: () => {
Modal.confirm({
@@ -272,7 +261,6 @@ const UsersTable = () => {
moreMenuItems.splice(-1, 0, {
node: 'item',
name: t('禁用'),
icon: <IconStop />,
type: 'warning',
onClick: () => {
manageUser(record.id, 'disable', record);
@@ -282,7 +270,6 @@ const UsersTable = () => {
moreMenuItems.splice(-1, 0, {
node: 'item',
name: t('启用'),
icon: <IconPlay />,
type: 'secondary',
onClick: () => {
manageUser(record.id, 'enable', record);
@@ -294,11 +281,9 @@ const UsersTable = () => {
return (
<Space>
<Button
icon={<IconEdit />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
onClick={() => {
setEditingUser(record);
setShowEditUser(true);
@@ -312,11 +297,10 @@ const UsersTable = () => {
menu={moreMenuItems}
>
<Button
icon={<IconMore />}
theme='light'
type='tertiary'
size="small"
className="!rounded-full"
icon={<IconMore />}
/>
</Dropdown>
</Space>
@@ -538,8 +522,7 @@ const UsersTable = () => {
<Button
theme='light'
type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
{compactMode ? t('自适应列表') : t('紧凑列表')}
@@ -554,8 +537,7 @@ const UsersTable = () => {
<Button
theme='light'
type='primary'
icon={<IconPlus />}
className="!rounded-full w-full md:w-auto"
className="w-full md:w-auto"
onClick={() => {
setShowAddUser(true);
}}
@@ -584,7 +566,6 @@ const UsersTable = () => {
field="searchKeyword"
prefix={<IconSearch />}
placeholder={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}
className="!rounded-full"
showClear
pure
/>
@@ -601,7 +582,7 @@ const UsersTable = () => {
searchUsers(1, pageSize);
}, 100);
}}
className="!rounded-full w-full"
className="w-full"
showClear
pure
/>
@@ -611,7 +592,7 @@ const UsersTable = () => {
type="primary"
htmlType="submit"
loading={loading || searching}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('查询')}
</Button>
@@ -627,7 +608,7 @@ const UsersTable = () => {
}, 100);
}
}}
className="!rounded-full flex-1 md:flex-initial md:w-auto"
className="flex-1 md:flex-initial md:w-auto"
>
{t('重置')}
</Button>
@@ -689,7 +670,7 @@ const UsersTable = () => {
style={{ padding: 30 }}
/>
}
className="rounded-xl overflow-hidden"
className="overflow-hidden"
size="middle"
/>
</Card>