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

📌 feat(table): add fixed right column to all data tables

Browse Source 
Fix the last column (operation/detail columns) to the right side across all table components to improve user experience and ensure important actions remain visible during horizontal scrolling.

Changes:
- ChannelsTable.js: Fix operation column to right
- UsersTable.js: Fix operation column to right
- TokensTable.js: Fix operation column to right
- RedemptionsTable.js: Fix operation column to right
- LogsTable.js: Fix details column to right
- MjLogsTable.js: Fix fail reason column to right
- TaskLogsTable.js: Fix fail reason column to right

All tables now have their rightmost column fixed using Semi Design's `fixed: 'right'` property, ensuring critical information and actions are always accessible regardless of table scroll position.
This commit is contained in:
Apple\Apple
2025-06-07 02:45:07 +08:00
parent b4be218af8
commit 2100d32bab
7 changed files with 230 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -243,19 +243,16 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.ID, key: COLUMN_KEYS.ID,
title: t('ID'), title: t('ID'),
dataIndex: 'id', dataIndex: 'id',
width: 50,
}, },
{ {
key: COLUMN_KEYS.NAME, key: COLUMN_KEYS.NAME,
title: t('名称'), title: t('名称'),
dataIndex: 'name', dataIndex: 'name',
width: 80,
}, },
{ {
key: COLUMN_KEYS.GROUP, key: COLUMN_KEYS.GROUP,
title: t('分组'), title: t('分组'),
dataIndex: 'group', dataIndex: 'group',
width: 180,
render: (text, record, index) => ( render: (text, record, index) => (
<div> <div>
<Space spacing={2}> <Space spacing={2}>
@@ -275,7 +272,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.TYPE, key: COLUMN_KEYS.TYPE,
title: t('类型'), title: t('类型'),
dataIndex: 'type', dataIndex: 'type',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
if (record.children === undefined) { if (record.children === undefined) {
return <>{renderType(text)}</>; return <>{renderType(text)}</>;
@@ -288,7 +284,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.STATUS, key: COLUMN_KEYS.STATUS,
title: t('状态'), title: t('状态'),
dataIndex: 'status', dataIndex: 'status',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
if (text === 3) { if (text === 3) {
if (record.other_info === '') { if (record.other_info === '') {
@@ -315,7 +310,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.RESPONSE_TIME, key: COLUMN_KEYS.RESPONSE_TIME,
title: t('响应时间'), title: t('响应时间'),
dataIndex: 'response_time', dataIndex: 'response_time',
width: 120,
render: (text, record, index) => ( render: (text, record, index) => (
<div>{renderResponseTime(text)}</div> <div>{renderResponseTime(text)}</div>
), ),
@@ -324,7 +318,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.BALANCE, key: COLUMN_KEYS.BALANCE,
title: t('已用/剩余'), title: t('已用/剩余'),
dataIndex: 'expired_time', dataIndex: 'expired_time',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
if (record.children === undefined) { if (record.children === undefined) {
return ( return (
@@ -364,7 +357,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.PRIORITY, key: COLUMN_KEYS.PRIORITY,
title: t('优先级'), title: t('优先级'),
dataIndex: 'priority', dataIndex: 'priority',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
if (record.children === undefined) { if (record.children === undefined) {
return ( return (
@@ -417,7 +409,6 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.WEIGHT, key: COLUMN_KEYS.WEIGHT,
title: t('权重'), title: t('权重'),
dataIndex: 'weight', dataIndex: 'weight',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
if (record.children === undefined) { if (record.children === undefined) {
return ( return (
@@ -470,7 +461,7 @@ const ChannelsTable = () => {
key: COLUMN_KEYS.OPERATE, key: COLUMN_KEYS.OPERATE,
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
width: 350, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
if (record.children === undefined) { if (record.children === undefined) {
// 创建更多操作的下拉菜单项 // 创建更多操作的下拉菜单项
@@ -1636,45 +1627,48 @@ const ChannelsTable = () => {
/> />
<Card <Card
className="!rounded-2xl overflow-hidden" className="!rounded-2xl"
title={renderHeader()} title={renderHeader()}
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={getVisibleColumns()} <Table
dataSource={pageData} columns={getVisibleColumns()}
pagination={{ dataSource={pageData}
currentPage: activePage, scroll={{ x: 'max-content' }}
pageSize: pageSize, pagination={{
total: channelCount, currentPage: activePage,
pageSizeOpts: [10, 20, 50, 100], pageSize: pageSize,
showSizeChanger: true, total: channelCount,
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pageSizeOpts: [10, 20, 50, 100],
start: page.currentStart, showSizeChanger: true,
end: page.currentEnd, formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: channels.length, start: page.currentStart,
}), end: page.currentEnd,
onPageSizeChange: (size) => { total: channels.length,
handlePageSizeChange(size); }),
}, onPageSizeChange: (size) => {
onPageChange: handlePageChange, handlePageSizeChange(size);
}} },
expandAllRows={false} onPageChange: handlePageChange,
onRow={handleRow} }}
rowSelection={ expandAllRows={false}
enableBatchDelete onRow={handleRow}
? { rowSelection={
onChange: (selectedRowKeys, selectedRows) => { enableBatchDelete
setSelectedChannels(selectedRows); ? {
}, onChange: (selectedRowKeys, selectedRows) => {
} setSelectedChannels(selectedRows);
: null },
} }
className="rounded-xl overflow-hidden" : null
size="middle" }
loading={loading} className="rounded-xl overflow-hidden"
/> size="middle"
loading={loading}
/>
</div>
</Card> </Card>
{/* 批量设置标签模态框 */} {/* 批量设置标签模态框 */}

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

@@ -345,13 +345,11 @@ const LogsTable = () => {
key: COLUMN_KEYS.TIME, key: COLUMN_KEYS.TIME,
title: t('时间'), title: t('时间'),
dataIndex: 'timestamp2string', dataIndex: 'timestamp2string',
width: 180,
}, },
{ {
key: COLUMN_KEYS.CHANNEL, key: COLUMN_KEYS.CHANNEL,
title: t('渠道'), title: t('渠道'),
dataIndex: 'channel', dataIndex: 'channel',
width: 80,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return isAdminUser ? ( return isAdminUser ? (
@@ -382,7 +380,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.USERNAME, key: COLUMN_KEYS.USERNAME,
title: t('用户'), title: t('用户'),
dataIndex: 'username', dataIndex: 'username',
width: 150,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return isAdminUser ? ( return isAdminUser ? (
@@ -409,7 +406,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TOKEN, key: COLUMN_KEYS.TOKEN,
title: t('令牌'), title: t('令牌'),
dataIndex: 'token_name', dataIndex: 'token_name',
width: 160,
render: (text, record, index) => { render: (text, record, index) => {
return record.type === 0 || record.type === 2 || record.type === 5 ? ( return record.type === 0 || record.type === 2 || record.type === 5 ? (
<div> <div>
@@ -435,7 +431,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.GROUP, key: COLUMN_KEYS.GROUP,
title: t('分组'), title: t('分组'),
dataIndex: 'group', dataIndex: 'group',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
if (record.type === 0 || record.type === 2 || record.type === 5) { if (record.type === 0 || record.type === 2 || record.type === 5) {
if (record.group) { if (record.group) {
@@ -468,7 +463,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TYPE, key: COLUMN_KEYS.TYPE,
title: t('类型'), title: t('类型'),
dataIndex: 'type', dataIndex: 'type',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return <>{renderType(text)}</>; return <>{renderType(text)}</>;
}, },
@@ -477,7 +471,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.MODEL, key: COLUMN_KEYS.MODEL,
title: t('模型'), title: t('模型'),
dataIndex: 'model_name', dataIndex: 'model_name',
width: 160,
render: (text, record, index) => { render: (text, record, index) => {
return record.type === 0 || record.type === 2 || record.type === 5 ? ( return record.type === 0 || record.type === 2 || record.type === 5 ? (
<>{renderModelName(record)}</> <>{renderModelName(record)}</>
@@ -490,7 +483,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.USE_TIME, key: COLUMN_KEYS.USE_TIME,
title: t('用时/首字'), title: t('用时/首字'),
dataIndex: 'use_time', dataIndex: 'use_time',
width: 160,
render: (text, record, index) => { render: (text, record, index) => {
if (record.is_stream) { if (record.is_stream) {
let other = getLogOther(record.other); let other = getLogOther(record.other);
@@ -519,7 +511,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PROMPT, key: COLUMN_KEYS.PROMPT,
title: t('提示'), title: t('提示'),
dataIndex: 'prompt_tokens', dataIndex: 'prompt_tokens',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return record.type === 0 || record.type === 2 || record.type === 5 ? ( return record.type === 0 || record.type === 2 || record.type === 5 ? (
<>{<span> {text} </span>}</> <>{<span> {text} </span>}</>
@@ -532,7 +523,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.COMPLETION, key: COLUMN_KEYS.COMPLETION,
title: t('补全'), title: t('补全'),
dataIndex: 'completion_tokens', dataIndex: 'completion_tokens',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return parseInt(text) > 0 && return parseInt(text) > 0 &&
(record.type === 0 || record.type === 2 || record.type === 5) ? ( (record.type === 0 || record.type === 2 || record.type === 5) ? (
@@ -546,7 +536,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.COST, key: COLUMN_KEYS.COST,
title: t('花费'), title: t('花费'),
dataIndex: 'quota', dataIndex: 'quota',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return record.type === 0 || record.type === 2 || record.type === 5 ? ( return record.type === 0 || record.type === 2 || record.type === 5 ? (
<>{renderQuota(text, 6)}</> <>{renderQuota(text, 6)}</>
@@ -559,7 +548,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.RETRY, key: COLUMN_KEYS.RETRY,
title: t('重试'), title: t('重试'),
dataIndex: 'retry', dataIndex: 'retry',
width: 160,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
let content = t('渠道') + `：${record.channel}`; let content = t('渠道') + `：${record.channel}`;
@@ -588,7 +576,7 @@ const LogsTable = () => {
key: COLUMN_KEYS.DETAILS, key: COLUMN_KEYS.DETAILS,
title: t('详情'), title: t('详情'),
dataIndex: 'content', dataIndex: 'content',
width: 200, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
let other = getLogOther(record.other); let other = getLogOther(record.other);
if (other == null || record.type !== 2) { if (other == null || record.type !== 2) {
@@ -1100,7 +1088,7 @@ const LogsTable = () => {
<> <>
{renderColumnSelector()} {renderColumnSelector()}
<Card <Card
className="!rounded-2xl overflow-hidden mb-4" className="!rounded-2xl mb-4"
title={ title={
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<Spin spinning={loadingStat}> <Spin spinning={loadingStat}>
@@ -1262,33 +1250,36 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={getVisibleColumns()} <Table
expandedRowRender={expandRowRender} columns={getVisibleColumns()}
expandRowByClick={true} expandedRowRender={expandRowRender}
dataSource={logs} expandRowByClick={true}
rowKey='key' dataSource={logs}
loading={loading} rowKey='key'
className="rounded-xl overflow-hidden" loading={loading}
size="middle" scroll={{ x: 'max-content' }}
pagination={{ className="rounded-xl overflow-hidden"
formatPageText: (page) => size="middle"
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pagination={{
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: logCount, start: page.currentStart,
}), end: page.currentEnd,
currentPage: activePage, total: logCount,
pageSize: pageSize, }),
total: logCount, currentPage: activePage,
pageSizeOptions: [10, 20, 50, 100], pageSize: pageSize,
showSizeChanger: true, total: logCount,
onPageSizeChange: (size) => { pageSizeOptions: [10, 20, 50, 100],
handlePageSizeChange(size); showSizeChanger: true,
}, onPageSizeChange: (size) => {
onPageChange: handlePageChange, handlePageSizeChange(size);
}} },
/> onPageChange: handlePageChange,
}}
/>
</div>
</Card> </Card>
</> </>
); );

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

@@ -374,7 +374,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.SUBMIT_TIME, key: COLUMN_KEYS.SUBMIT_TIME,
title: t('提交时间'), title: t('提交时间'),
dataIndex: 'submit_time', dataIndex: 'submit_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderTimestamp(text / 1000)}</div>; return <div>{renderTimestamp(text / 1000)}</div>;
}, },
@@ -383,7 +382,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.DURATION, key: COLUMN_KEYS.DURATION,
title: t('花费时间'), title: t('花费时间'),
dataIndex: 'finish_time', dataIndex: 'finish_time',
width: 120,
render: (finish, record) => { render: (finish, record) => {
return renderDuration(record.submit_time, finish); return renderDuration(record.submit_time, finish);
}, },
@@ -392,7 +390,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.CHANNEL, key: COLUMN_KEYS.CHANNEL,
title: t('渠道'), title: t('渠道'),
dataIndex: 'channel_id', dataIndex: 'channel_id',
width: 100,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return isAdminUser ? ( return isAdminUser ? (
@@ -418,7 +415,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TYPE, key: COLUMN_KEYS.TYPE,
title: t('类型'), title: t('类型'),
dataIndex: 'action', dataIndex: 'action',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderType(text)}</div>; return <div>{renderType(text)}</div>;
}, },
@@ -427,7 +423,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TASK_ID, key: COLUMN_KEYS.TASK_ID,
title: t('任务ID'), title: t('任务ID'),
dataIndex: 'mj_id', dataIndex: 'mj_id',
width: 200,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{text}</div>; return <div>{text}</div>;
}, },
@@ -436,7 +431,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.SUBMIT_RESULT, key: COLUMN_KEYS.SUBMIT_RESULT,
title: t('提交结果'), title: t('提交结果'),
dataIndex: 'code', dataIndex: 'code',
width: 120,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return isAdminUser ? <div>{renderCode(text)}</div> : <></>; return isAdminUser ? <div>{renderCode(text)}</div> : <></>;
@@ -446,7 +440,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TASK_STATUS, key: COLUMN_KEYS.TASK_STATUS,
title: t('任务状态'), title: t('任务状态'),
dataIndex: 'status', dataIndex: 'status',
width: 120,
className: isAdmin() ? 'tableShow' : 'tableHiddle', className: isAdmin() ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderStatus(text)}</div>; return <div>{renderStatus(text)}</div>;
@@ -456,7 +449,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PROGRESS, key: COLUMN_KEYS.PROGRESS,
title: t('进度'), title: t('进度'),
dataIndex: 'progress', dataIndex: 'progress',
width: 160,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -480,7 +472,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.IMAGE, key: COLUMN_KEYS.IMAGE,
title: t('结果图片'), title: t('结果图片'),
dataIndex: 'image_url', dataIndex: 'image_url',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
if (!text) { if (!text) {
return t('无'); return t('无');
@@ -501,7 +492,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PROMPT, key: COLUMN_KEYS.PROMPT,
title: 'Prompt', title: 'Prompt',
dataIndex: 'prompt', dataIndex: 'prompt',
width: 200,
render: (text, record, index) => { render: (text, record, index) => {
if (!text) { if (!text) {
return t('无'); return t('无');
@@ -525,7 +515,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PROMPT_EN, key: COLUMN_KEYS.PROMPT_EN,
title: 'PromptEn', title: 'PromptEn',
dataIndex: 'prompt_en', dataIndex: 'prompt_en',
width: 200,
render: (text, record, index) => { render: (text, record, index) => {
if (!text) { if (!text) {
return t('无'); return t('无');
@@ -549,7 +538,7 @@ const LogsTable = () => {
key: COLUMN_KEYS.FAIL_REASON, key: COLUMN_KEYS.FAIL_REASON,
title: t('失败原因'), title: t('失败原因'),
dataIndex: 'fail_reason', dataIndex: 'fail_reason',
width: 160, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
if (!text) { if (!text) {
return t('无'); return t('无');
@@ -771,7 +760,7 @@ const LogsTable = () => {
{renderColumnSelector()} {renderColumnSelector()}
<Layout> <Layout>
<Card <Card
className="!rounded-2xl overflow-hidden mb-4" className="!rounded-2xl mb-4"
title={ title={
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<div className="flex flex-col md:flex-row justify-between items-center"> <div className="flex flex-col md:flex-row justify-between items-center">
@@ -867,31 +856,34 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={getVisibleColumns()} <Table
dataSource={pageData} columns={getVisibleColumns()}
rowKey='key' dataSource={pageData}
loading={loading} rowKey='key'
className="rounded-xl overflow-hidden" loading={loading}
size="middle" scroll={{ x: 'max-content' }}
pagination={{ className="rounded-xl overflow-hidden"
formatPageText: (page) => size="middle"
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pagination={{
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: logCount, start: page.currentStart,
}), end: page.currentEnd,
currentPage: activePage, total: logCount,
pageSize: pageSize, }),
total: logCount, currentPage: activePage,
pageSizeOptions: [10, 20, 50, 100], pageSize: pageSize,
showSizeChanger: true, total: logCount,
onPageSizeChange: (size) => { pageSizeOptions: [10, 20, 50, 100],
handlePageSizeChange(size); showSizeChanger: true,
}, onPageSizeChange: (size) => {
onPageChange: handlePageChange, handlePageSizeChange(size);
}} },
/> onPageChange: handlePageChange,
}}
/>
</div>
</Card> </Card>
<Modal <Modal

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

@@ -78,18 +78,15 @@ const RedemptionsTable = () => {
{ {
title: t('ID'), title: t('ID'),
dataIndex: 'id', dataIndex: 'id',
width: 50,
}, },
{ {
title: t('名称'), title: t('名称'),
dataIndex: 'name', dataIndex: 'name',
width: 120,
}, },
{ {
title: t('状态'), title: t('状态'),
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderStatus(text)}</div>; return <div>{renderStatus(text)}</div>;
}, },
@@ -97,7 +94,6 @@ const RedemptionsTable = () => {
{ {
title: t('额度'), title: t('额度'),
dataIndex: 'quota', dataIndex: 'quota',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderQuota(parseInt(text))}</div>; return <div>{renderQuota(parseInt(text))}</div>;
}, },
@@ -105,7 +101,6 @@ const RedemptionsTable = () => {
{ {
title: t('创建时间'), title: t('创建时间'),
dataIndex: 'created_time', dataIndex: 'created_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderTimestamp(text)}</div>; return <div>{renderTimestamp(text)}</div>;
}, },
@@ -113,7 +108,6 @@ const RedemptionsTable = () => {
{ {
title: t('兑换人ID'), title: t('兑换人ID'),
dataIndex: 'used_user_id', dataIndex: 'used_user_id',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{text === 0 ? t('无') : text}</div>; return <div>{text === 0 ? t('无') : text}</div>;
}, },
@@ -121,7 +115,7 @@ const RedemptionsTable = () => {
{ {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
width: 300, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
// 创建更多操作的下拉菜单项 // 创建更多操作的下拉菜单项
const moreMenuItems = [ const moreMenuItems = [
@@ -499,43 +493,46 @@ const RedemptionsTable = () => {
></EditRedemption> ></EditRedemption>
<Card <Card
className="!rounded-2xl overflow-hidden" className="!rounded-2xl"
title={renderHeader()} title={renderHeader()}
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={columns} <Table
dataSource={pageData} columns={columns}
pagination={{ dataSource={pageData}
currentPage: activePage, scroll={{ x: 'max-content' }}
pageSize: pageSize, pagination={{
total: tokenCount, currentPage: activePage,
showSizeChanger: true, pageSize: pageSize,
pageSizeOptions: [10, 20, 50, 100], total: tokenCount,
formatPageText: (page) => showSizeChanger: true,
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pageSizeOptions: [10, 20, 50, 100],
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: tokenCount, start: page.currentStart,
}), end: page.currentEnd,
onPageSizeChange: (size) => { total: tokenCount,
setPageSize(size); }),
setActivePage(1); onPageSizeChange: (size) => {
if (searchKeyword === '') { setPageSize(size);
loadRedemptions(1, size).then(); setActivePage(1);
} else { if (searchKeyword === '') {
searchRedemptions(searchKeyword, 1, size).then(); loadRedemptions(1, size).then();
} } else {
}, searchRedemptions(searchKeyword, 1, size).then();
onPageChange: handlePageChange, }
}} },
loading={loading} onPageChange: handlePageChange,
rowSelection={rowSelection} }}
onRow={handleRow} loading={loading}
className="rounded-xl overflow-hidden" rowSelection={rowSelection}
size="middle" onRow={handleRow}
></Table> className="rounded-xl overflow-hidden"
size="middle"
></Table>
</div>
</Card> </Card>
</> </>
); );

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

@@ -289,7 +289,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.SUBMIT_TIME, key: COLUMN_KEYS.SUBMIT_TIME,
title: t('提交时间'), title: t('提交时间'),
dataIndex: 'submit_time', dataIndex: 'submit_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{text ? renderTimestamp(text) : '-'}</div>; return <div>{text ? renderTimestamp(text) : '-'}</div>;
}, },
@@ -298,7 +297,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.FINISH_TIME, key: COLUMN_KEYS.FINISH_TIME,
title: t('结束时间'), title: t('结束时间'),
dataIndex: 'finish_time', dataIndex: 'finish_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{text ? renderTimestamp(text) : '-'}</div>; return <div>{text ? renderTimestamp(text) : '-'}</div>;
}, },
@@ -307,7 +305,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.DURATION, key: COLUMN_KEYS.DURATION,
title: t('花费时间'), title: t('花费时间'),
dataIndex: 'finish_time', dataIndex: 'finish_time',
width: 120,
render: (finish, record) => { render: (finish, record) => {
return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>; return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
}, },
@@ -316,7 +313,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.CHANNEL, key: COLUMN_KEYS.CHANNEL,
title: t('渠道'), title: t('渠道'),
dataIndex: 'channel_id', dataIndex: 'channel_id',
width: 100,
className: isAdminUser ? 'tableShow' : 'tableHiddle', className: isAdminUser ? 'tableShow' : 'tableHiddle',
render: (text, record, index) => { render: (text, record, index) => {
return isAdminUser ? ( return isAdminUser ? (
@@ -341,7 +337,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PLATFORM, key: COLUMN_KEYS.PLATFORM,
title: t('平台'), title: t('平台'),
dataIndex: 'platform', dataIndex: 'platform',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderPlatform(text)}</div>; return <div>{renderPlatform(text)}</div>;
}, },
@@ -350,7 +345,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TYPE, key: COLUMN_KEYS.TYPE,
title: t('类型'), title: t('类型'),
dataIndex: 'action', dataIndex: 'action',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderType(text)}</div>; return <div>{renderType(text)}</div>;
}, },
@@ -359,7 +353,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TASK_ID, key: COLUMN_KEYS.TASK_ID,
title: t('任务ID'), title: t('任务ID'),
dataIndex: 'task_id', dataIndex: 'task_id',
width: 200,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<Typography.Text <Typography.Text
@@ -378,7 +371,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.TASK_STATUS, key: COLUMN_KEYS.TASK_STATUS,
title: t('任务状态'), title: t('任务状态'),
dataIndex: 'status', dataIndex: 'status',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderStatus(text)}</div>; return <div>{renderStatus(text)}</div>;
}, },
@@ -387,7 +379,6 @@ const LogsTable = () => {
key: COLUMN_KEYS.PROGRESS, key: COLUMN_KEYS.PROGRESS,
title: t('进度'), title: t('进度'),
dataIndex: 'progress', dataIndex: 'progress',
width: 160,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -415,7 +406,7 @@ const LogsTable = () => {
key: COLUMN_KEYS.FAIL_REASON, key: COLUMN_KEYS.FAIL_REASON,
title: t('失败原因'), title: t('失败原因'),
dataIndex: 'fail_reason', dataIndex: 'fail_reason',
width: 160, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
if (!text) { if (!text) {
return t('无'); return t('无');
@@ -613,7 +604,7 @@ const LogsTable = () => {
{renderColumnSelector()} {renderColumnSelector()}
<Layout> <Layout>
<Card <Card
className="!rounded-2xl overflow-hidden mb-4" className="!rounded-2xl mb-4"
title={ title={
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<div className="flex flex-col md:flex-row justify-between items-center"> <div className="flex flex-col md:flex-row justify-between items-center">
@@ -705,31 +696,34 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={getVisibleColumns()} <Table
dataSource={pageData} columns={getVisibleColumns()}
rowKey='key' dataSource={pageData}
loading={loading} rowKey='key'
className="rounded-xl overflow-hidden" loading={loading}
size="middle" scroll={{ x: 'max-content' }}
pagination={{ className="rounded-xl overflow-hidden"
formatPageText: (page) => size="middle"
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pagination={{
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: logCount, start: page.currentStart,
}), end: page.currentEnd,
currentPage: activePage, total: logCount,
pageSize: pageSize, }),
total: logCount, currentPage: activePage,
pageSizeOptions: [10, 20, 50, 100], pageSize: pageSize,
showSizeChanger: true, total: logCount,
onPageSizeChange: (size) => { pageSizeOptions: [10, 20, 50, 100],
handlePageSizeChange(size); showSizeChanger: true,
}, onPageSizeChange: (size) => {
onPageChange: handlePageChange, handlePageSizeChange(size);
}} },
/> onPageChange: handlePageChange,
}}
/>
</div>
</Card> </Card>
<Modal <Modal

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

@@ -91,13 +91,11 @@ const TokensTable = () => {
{ {
title: t('名称'), title: t('名称'),
dataIndex: 'name', dataIndex: 'name',
width: 180,
}, },
{ {
title: t('状态'), title: t('状态'),
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 200,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -112,7 +110,6 @@ const TokensTable = () => {
{ {
title: t('已用额度'), title: t('已用额度'),
dataIndex: 'used_quota', dataIndex: 'used_quota',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderQuota(parseInt(text))}</div>; return <div>{renderQuota(parseInt(text))}</div>;
}, },
@@ -120,7 +117,6 @@ const TokensTable = () => {
{ {
title: t('剩余额度'), title: t('剩余额度'),
dataIndex: 'remain_quota', dataIndex: 'remain_quota',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -140,7 +136,6 @@ const TokensTable = () => {
{ {
title: t('创建时间'), title: t('创建时间'),
dataIndex: 'created_time', dataIndex: 'created_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderTimestamp(text)}</div>; return <div>{renderTimestamp(text)}</div>;
}, },
@@ -148,7 +143,6 @@ const TokensTable = () => {
{ {
title: t('过期时间'), title: t('过期时间'),
dataIndex: 'expired_time', dataIndex: 'expired_time',
width: 180,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -160,7 +154,7 @@ const TokensTable = () => {
{ {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
width: 320, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
let chats = localStorage.getItem('chats'); let chats = localStorage.getItem('chats');
let chatsArray = []; let chatsArray = [];
@@ -630,38 +624,41 @@ const TokensTable = () => {
></EditToken> ></EditToken>
<Card <Card
className="!rounded-2xl overflow-hidden" className="!rounded-2xl"
title={renderHeader()} title={renderHeader()}
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={columns} <Table
dataSource={pageData} columns={columns}
pagination={{ dataSource={pageData}
currentPage: activePage, scroll={{ x: 'max-content' }}
pageSize: pageSize, pagination={{
total: tokenCount, currentPage: activePage,
showSizeChanger: true, pageSize: pageSize,
pageSizeOptions: [10, 20, 50, 100], total: tokenCount,
formatPageText: (page) => showSizeChanger: true,
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pageSizeOptions: [10, 20, 50, 100],
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: tokens.length, start: page.currentStart,
}), end: page.currentEnd,
onPageSizeChange: (size) => { total: tokens.length,
setPageSize(size); }),
setActivePage(1); onPageSizeChange: (size) => {
}, setPageSize(size);
onPageChange: handlePageChange, setActivePage(1);
}} },
loading={loading} onPageChange: handlePageChange,
rowSelection={rowSelection} }}
onRow={handleRow} loading={loading}
className="rounded-xl overflow-hidden" rowSelection={rowSelection}
size="middle" onRow={handleRow}
></Table> className="rounded-xl overflow-hidden"
size="middle"
></Table>
</div>
</Card> </Card>
</> </>
); );

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

@@ -87,17 +87,14 @@ const UsersTable = () => {
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
width: 50,
}, },
{ {
title: t('用户名'), title: t('用户名'),
dataIndex: 'username', dataIndex: 'username',
width: 100,
}, },
{ {
title: t('分组'), title: t('分组'),
dataIndex: 'group', dataIndex: 'group',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderGroup(text)}</div>; return <div>{renderGroup(text)}</div>;
}, },
@@ -105,7 +102,6 @@ const UsersTable = () => {
{ {
title: t('统计信息'), title: t('统计信息'),
dataIndex: 'info', dataIndex: 'info',
width: 280,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -127,7 +123,6 @@ const UsersTable = () => {
{ {
title: t('邀请信息'), title: t('邀请信息'),
dataIndex: 'invite', dataIndex: 'invite',
width: 250,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -149,7 +144,6 @@ const UsersTable = () => {
{ {
title: t('角色'), title: t('角色'),
dataIndex: 'role', dataIndex: 'role',
width: 120,
render: (text, record, index) => { render: (text, record, index) => {
return <div>{renderRole(text)}</div>; return <div>{renderRole(text)}</div>;
}, },
@@ -157,7 +151,6 @@ const UsersTable = () => {
{ {
title: t('状态'), title: t('状态'),
dataIndex: 'status', dataIndex: 'status',
width: 100,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@@ -173,7 +166,7 @@ const UsersTable = () => {
{ {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
width: 150, fixed: 'right',
render: (text, record, index) => { render: (text, record, index) => {
if (record.DeletedAt !== null) { if (record.DeletedAt !== null) {
return <></>; return <></>;
@@ -549,36 +542,39 @@ const UsersTable = () => {
></EditUser> ></EditUser>
<Card <Card
className="!rounded-2xl overflow-hidden" className="!rounded-2xl"
title={renderHeader()} title={renderHeader()}
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<Table <div style={{ overflow: 'auto' }}>
columns={columns} <Table
dataSource={users} columns={columns}
pagination={{ dataSource={users}
formatPageText: (page) => scroll={{ x: 'max-content' }}
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { pagination={{
start: page.currentStart, formatPageText: (page) =>
end: page.currentEnd, t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
total: userCount, start: page.currentStart,
}), end: page.currentEnd,
currentPage: activePage, total: userCount,
pageSize: pageSize, }),
total: userCount, currentPage: activePage,
pageSizeOpts: [10, 20, 50, 100], pageSize: pageSize,
showSizeChanger: true, total: userCount,
onPageSizeChange: (size) => { pageSizeOpts: [10, 20, 50, 100],
handlePageSizeChange(size); showSizeChanger: true,
}, onPageSizeChange: (size) => {
onPageChange: handlePageChange, handlePageSizeChange(size);
}} },
loading={loading} onPageChange: handlePageChange,
onRow={handleRow} }}
className="rounded-xl overflow-hidden" loading={loading}
size="middle" onRow={handleRow}
/> className="rounded-xl overflow-hidden"
size="middle"
/>
</div>
</Card> </Card>
</> </>
); );