Skip to content

Commit 2100d32

Browse files
author
Apple\Apple
committed
📌 feat(table): add fixed right column to all data tables
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.
1 parent b4be218 commit 2100d32

File tree

7 files changed

+230
-269
lines changed

7 files changed

+230
-269
lines changed

‎web/src/components/table/ChannelsTable.js‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -243,19 +243,16 @@ const ChannelsTable = () => {
243243
key: COLUMN_KEYS.ID,
244244
title: t('ID'),
245245
dataIndex: 'id',
246-
width: 50,
247246
},
248247
{
249248
key: COLUMN_KEYS.NAME,
250249
title: t('名称'),
251250
dataIndex: 'name',
252-
width: 80,
253251
},
254252
{
255253
key: COLUMN_KEYS.GROUP,
256254
title: t('分组'),
257255
dataIndex: 'group',
258-
width: 180,
259256
render: (text, record, index) => (
260257
<div>
261258
<Space spacing={2}>
@@ -275,7 +272,6 @@ const ChannelsTable = () => {
275272
key: COLUMN_KEYS.TYPE,
276273
title: t('类型'),
277274
dataIndex: 'type',
278-
width: 120,
279275
render: (text, record, index) => {
280276
if (record.children === undefined) {
281277
return <>{renderType(text)}</>;
@@ -288,7 +284,6 @@ const ChannelsTable = () => {
288284
key: COLUMN_KEYS.STATUS,
289285
title: t('状态'),
290286
dataIndex: 'status',
291-
width: 120,
292287
render: (text, record, index) => {
293288
if (text === 3) {
294289
if (record.other_info === '') {
@@ -315,7 +310,6 @@ const ChannelsTable = () => {
315310
key: COLUMN_KEYS.RESPONSE_TIME,
316311
title: t('响应时间'),
317312
dataIndex: 'response_time',
318-
width: 120,
319313
render: (text, record, index) => (
320314
<div>{renderResponseTime(text)}</div>
321315
),
@@ -324,7 +318,6 @@ const ChannelsTable = () => {
324318
key: COLUMN_KEYS.BALANCE,
325319
title: t('已用/剩余'),
326320
dataIndex: 'expired_time',
327-
width: 120,
328321
render: (text, record, index) => {
329322
if (record.children === undefined) {
330323
return (
@@ -364,7 +357,6 @@ const ChannelsTable = () => {
364357
key: COLUMN_KEYS.PRIORITY,
365358
title: t('优先级'),
366359
dataIndex: 'priority',
367-
width: 100,
368360
render: (text, record, index) => {
369361
if (record.children === undefined) {
370362
return (
@@ -417,7 +409,6 @@ const ChannelsTable = () => {
417409
key: COLUMN_KEYS.WEIGHT,
418410
title: t('权重'),
419411
dataIndex: 'weight',
420-
width: 100,
421412
render: (text, record, index) => {
422413
if (record.children === undefined) {
423414
return (
@@ -470,7 +461,7 @@ const ChannelsTable = () => {
470461
key: COLUMN_KEYS.OPERATE,
471462
title: '',
472463
dataIndex: 'operate',
473-
width: 350,
464+
fixed: 'right',
474465
render: (text, record, index) => {
475466
if (record.children === undefined) {
476467
// 创建更多操作的下拉菜单项
@@ -1636,45 +1627,48 @@ const ChannelsTable = () => {
16361627
/>
16371628

16381629
<Card
1639-
className="!rounded-2xl overflow-hidden"
1630+
className="!rounded-2xl"
16401631
title={renderHeader()}
16411632
shadows='always'
16421633
bordered={false}
16431634
>
1644-
<Table
1645-
columns={getVisibleColumns()}
1646-
dataSource={pageData}
1647-
pagination={{
1648-
currentPage: activePage,
1649-
pageSize: pageSize,
1650-
total: channelCount,
1651-
pageSizeOpts: [10, 20, 50, 100],
1652-
showSizeChanger: true,
1653-
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1654-
start: page.currentStart,
1655-
end: page.currentEnd,
1656-
total: channels.length,
1657-
}),
1658-
onPageSizeChange: (size) => {
1659-
handlePageSizeChange(size);
1660-
},
1661-
onPageChange: handlePageChange,
1662-
}}
1663-
expandAllRows={false}
1664-
onRow={handleRow}
1665-
rowSelection={
1666-
enableBatchDelete
1667-
? {
1668-
onChange: (selectedRowKeys, selectedRows) => {
1669-
setSelectedChannels(selectedRows);
1670-
},
1671-
}
1672-
: null
1673-
}
1674-
className="rounded-xl overflow-hidden"
1675-
size="middle"
1676-
loading={loading}
1677-
/>
1635+
<div style={{ overflow: 'auto' }}>
1636+
<Table
1637+
columns={getVisibleColumns()}
1638+
dataSource={pageData}
1639+
scroll={{ x: 'max-content' }}
1640+
pagination={{
1641+
currentPage: activePage,
1642+
pageSize: pageSize,
1643+
total: channelCount,
1644+
pageSizeOpts: [10, 20, 50, 100],
1645+
showSizeChanger: true,
1646+
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1647+
start: page.currentStart,
1648+
end: page.currentEnd,
1649+
total: channels.length,
1650+
}),
1651+
onPageSizeChange: (size) => {
1652+
handlePageSizeChange(size);
1653+
},
1654+
onPageChange: handlePageChange,
1655+
}}
1656+
expandAllRows={false}
1657+
onRow={handleRow}
1658+
rowSelection={
1659+
enableBatchDelete
1660+
? {
1661+
onChange: (selectedRowKeys, selectedRows) => {
1662+
setSelectedChannels(selectedRows);
1663+
},
1664+
}
1665+
: null
1666+
}
1667+
className="rounded-xl overflow-hidden"
1668+
size="middle"
1669+
loading={loading}
1670+
/>
1671+
</div>
16781672
</Card>
16791673

16801674
{/* 批量设置标签模态框 */}

‎web/src/components/table/LogsTable.js‎

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -345,13 +345,11 @@ const LogsTable = () => {
345345
key: COLUMN_KEYS.TIME,
346346
title: t('时间'),
347347
dataIndex: 'timestamp2string',
348-
width: 180,
349348
},
350349
{
351350
key: COLUMN_KEYS.CHANNEL,
352351
title: t('渠道'),
353352
dataIndex: 'channel',
354-
width: 80,
355353
className: isAdmin() ? 'tableShow' : 'tableHiddle',
356354
render: (text, record, index) => {
357355
return isAdminUser ? (
@@ -382,7 +380,6 @@ const LogsTable = () => {
382380
key: COLUMN_KEYS.USERNAME,
383381
title: t('用户'),
384382
dataIndex: 'username',
385-
width: 150,
386383
className: isAdmin() ? 'tableShow' : 'tableHiddle',
387384
render: (text, record, index) => {
388385
return isAdminUser ? (
@@ -409,7 +406,6 @@ const LogsTable = () => {
409406
key: COLUMN_KEYS.TOKEN,
410407
title: t('令牌'),
411408
dataIndex: 'token_name',
412-
width: 160,
413409
render: (text, record, index) => {
414410
return record.type === 0 || record.type === 2 || record.type === 5 ? (
415411
<div>
@@ -435,7 +431,6 @@ const LogsTable = () => {
435431
key: COLUMN_KEYS.GROUP,
436432
title: t('分组'),
437433
dataIndex: 'group',
438-
width: 120,
439434
render: (text, record, index) => {
440435
if (record.type === 0 || record.type === 2 || record.type === 5) {
441436
if (record.group) {
@@ -468,7 +463,6 @@ const LogsTable = () => {
468463
key: COLUMN_KEYS.TYPE,
469464
title: t('类型'),
470465
dataIndex: 'type',
471-
width: 100,
472466
render: (text, record, index) => {
473467
return <>{renderType(text)}</>;
474468
},
@@ -477,7 +471,6 @@ const LogsTable = () => {
477471
key: COLUMN_KEYS.MODEL,
478472
title: t('模型'),
479473
dataIndex: 'model_name',
480-
width: 160,
481474
render: (text, record, index) => {
482475
return record.type === 0 || record.type === 2 || record.type === 5 ? (
483476
<>{renderModelName(record)}</>
@@ -490,7 +483,6 @@ const LogsTable = () => {
490483
key: COLUMN_KEYS.USE_TIME,
491484
title: t('用时/首字'),
492485
dataIndex: 'use_time',
493-
width: 160,
494486
render: (text, record, index) => {
495487
if (record.is_stream) {
496488
let other = getLogOther(record.other);
@@ -519,7 +511,6 @@ const LogsTable = () => {
519511
key: COLUMN_KEYS.PROMPT,
520512
title: t('提示'),
521513
dataIndex: 'prompt_tokens',
522-
width: 100,
523514
render: (text, record, index) => {
524515
return record.type === 0 || record.type === 2 || record.type === 5 ? (
525516
<>{<span> {text} </span>}</>
@@ -532,7 +523,6 @@ const LogsTable = () => {
532523
key: COLUMN_KEYS.COMPLETION,
533524
title: t('补全'),
534525
dataIndex: 'completion_tokens',
535-
width: 100,
536526
render: (text, record, index) => {
537527
return parseInt(text) > 0 &&
538528
(record.type === 0 || record.type === 2 || record.type === 5) ? (
@@ -546,7 +536,6 @@ const LogsTable = () => {
546536
key: COLUMN_KEYS.COST,
547537
title: t('花费'),
548538
dataIndex: 'quota',
549-
width: 120,
550539
render: (text, record, index) => {
551540
return record.type === 0 || record.type === 2 || record.type === 5 ? (
552541
<>{renderQuota(text, 6)}</>
@@ -559,7 +548,6 @@ const LogsTable = () => {
559548
key: COLUMN_KEYS.RETRY,
560549
title: t('重试'),
561550
dataIndex: 'retry',
562-
width: 160,
563551
className: isAdmin() ? 'tableShow' : 'tableHiddle',
564552
render: (text, record, index) => {
565553
let content = t('渠道') + `：${record.channel}`;
@@ -588,7 +576,7 @@ const LogsTable = () => {
588576
key: COLUMN_KEYS.DETAILS,
589577
title: t('详情'),
590578
dataIndex: 'content',
591-
width: 200,
579+
fixed: 'right',
592580
render: (text, record, index) => {
593581
let other = getLogOther(record.other);
594582
if (other == null || record.type !== 2) {
@@ -1100,7 +1088,7 @@ const LogsTable = () => {
11001088
<>
11011089
{renderColumnSelector()}
11021090
<Card
1103-
className="!rounded-2xl overflow-hidden mb-4"
1091+
className="!rounded-2xl mb-4"
11041092
title={
11051093
<div className="flex flex-col w-full">
11061094
<Spin spinning={loadingStat}>
@@ -1262,33 +1250,36 @@ const LogsTable = () => {
12621250
shadows='always'
12631251
bordered={false}
12641252
>
1265-
<Table
1266-
columns={getVisibleColumns()}
1267-
expandedRowRender={expandRowRender}
1268-
expandRowByClick={true}
1269-
dataSource={logs}
1270-
rowKey='key'
1271-
loading={loading}
1272-
className="rounded-xl overflow-hidden"
1273-
size="middle"
1274-
pagination={{
1275-
formatPageText: (page) =>
1276-
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1277-
start: page.currentStart,
1278-
end: page.currentEnd,
1279-
total: logCount,
1280-
}),
1281-
currentPage: activePage,
1282-
pageSize: pageSize,
1283-
total: logCount,
1284-
pageSizeOptions: [10, 20, 50, 100],
1285-
showSizeChanger: true,
1286-
onPageSizeChange: (size) => {
1287-
handlePageSizeChange(size);
1288-
},
1289-
onPageChange: handlePageChange,
1290-
}}
1291-
/>
1253+
<div style={{ overflow: 'auto' }}>
1254+
<Table
1255+
columns={getVisibleColumns()}
1256+
expandedRowRender={expandRowRender}
1257+
expandRowByClick={true}
1258+
dataSource={logs}
1259+
rowKey='key'
1260+
loading={loading}
1261+
scroll={{ x: 'max-content' }}
1262+
className="rounded-xl overflow-hidden"
1263+
size="middle"
1264+
pagination={{
1265+
formatPageText: (page) =>
1266+
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1267+
start: page.currentStart,
1268+
end: page.currentEnd,
1269+
total: logCount,
1270+
}),
1271+
currentPage: activePage,
1272+
pageSize: pageSize,
1273+
total: logCount,
1274+
pageSizeOptions: [10, 20, 50, 100],
1275+
showSizeChanger: true,
1276+
onPageSizeChange: (size) => {
1277+
handlePageSizeChange(size);
1278+
},
1279+
onPageChange: handlePageChange,
1280+
}}
1281+
/>
1282+
</div>
12921283
</Card>
12931284
</>
12941285
);

0 commit comments

Comments
 (0)