Skip to content

Commit 83d5884

Browse files
author
Apple\Apple
committed
🎨 style(table): customize table scrollbar appearance
Enhance table scrollbar visual design with lighter and thinner styling for better user experience. Changes: - Add custom scrollbar styling for .semi-table-body - Set scrollbar dimensions to 6px width/height - Apply lighter color using rgba(var(--semi-grey-2), 0.3) with 30% opacity - Add hover effect with 50% opacity for better interaction feedback - Use 2px border radius for smoother appearance - Keep scrollbar track transparent for clean look - Utilize Semi Design color variables for theme consistency The new scrollbar design provides a more elegant and less intrusive horizontal scrolling experience across all data tables.
1 parent 2100d32 commit 83d5884

File tree

8 files changed

+221
-216
lines changed

8 files changed

+221
-216
lines changed

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

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1632,43 +1632,41 @@ const ChannelsTable = () => {
16321632
shadows='always'
16331633
bordered={false}
16341634
>
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>
1635+
<Table
1636+
columns={getVisibleColumns()}
1637+
dataSource={pageData}
1638+
scroll={{ x: 'max-content' }}
1639+
pagination={{
1640+
currentPage: activePage,
1641+
pageSize: pageSize,
1642+
total: channelCount,
1643+
pageSizeOpts: [10, 20, 50, 100],
1644+
showSizeChanger: true,
1645+
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1646+
start: page.currentStart,
1647+
end: page.currentEnd,
1648+
total: channels.length,
1649+
}),
1650+
onPageSizeChange: (size) => {
1651+
handlePageSizeChange(size);
1652+
},
1653+
onPageChange: handlePageChange,
1654+
}}
1655+
expandAllRows={false}
1656+
onRow={handleRow}
1657+
rowSelection={
1658+
enableBatchDelete
1659+
? {
1660+
onChange: (selectedRowKeys, selectedRows) => {
1661+
setSelectedChannels(selectedRows);
1662+
},
1663+
}
1664+
: null
1665+
}
1666+
className="rounded-xl overflow-hidden"
1667+
size="middle"
1668+
loading={loading}
1669+
/>
16721670
</Card>
16731671

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

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

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1250,36 +1250,34 @@ const LogsTable = () => {
12501250
shadows='always'
12511251
bordered={false}
12521252
>
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>
1253+
<Table
1254+
columns={getVisibleColumns()}
1255+
expandedRowRender={expandRowRender}
1256+
expandRowByClick={true}
1257+
dataSource={logs}
1258+
rowKey='key'
1259+
loading={loading}
1260+
scroll={{ x: 'max-content' }}
1261+
className="rounded-xl overflow-hidden"
1262+
size="middle"
1263+
pagination={{
1264+
formatPageText: (page) =>
1265+
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
1266+
start: page.currentStart,
1267+
end: page.currentEnd,
1268+
total: logCount,
1269+
}),
1270+
currentPage: activePage,
1271+
pageSize: pageSize,
1272+
total: logCount,
1273+
pageSizeOptions: [10, 20, 50, 100],
1274+
showSizeChanger: true,
1275+
onPageSizeChange: (size) => {
1276+
handlePageSizeChange(size);
1277+
},
1278+
onPageChange: handlePageChange,
1279+
}}
1280+
/>
12831281
</Card>
12841282
</>
12851283
);

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

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -856,34 +856,32 @@ const LogsTable = () => {
856856
shadows='always'
857857
bordered={false}
858858
>
859-
<div style={{ overflow: 'auto' }}>
860-
<Table
861-
columns={getVisibleColumns()}
862-
dataSource={pageData}
863-
rowKey='key'
864-
loading={loading}
865-
scroll={{ x: 'max-content' }}
866-
className="rounded-xl overflow-hidden"
867-
size="middle"
868-
pagination={{
869-
formatPageText: (page) =>
870-
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
871-
start: page.currentStart,
872-
end: page.currentEnd,
873-
total: logCount,
874-
}),
875-
currentPage: activePage,
876-
pageSize: pageSize,
877-
total: logCount,
878-
pageSizeOptions: [10, 20, 50, 100],
879-
showSizeChanger: true,
880-
onPageSizeChange: (size) => {
881-
handlePageSizeChange(size);
882-
},
883-
onPageChange: handlePageChange,
884-
}}
885-
/>
886-
</div>
859+
<Table
860+
columns={getVisibleColumns()}
861+
dataSource={pageData}
862+
rowKey='key'
863+
loading={loading}
864+
scroll={{ x: 'max-content' }}
865+
className="rounded-xl overflow-hidden"
866+
size="middle"
867+
pagination={{
868+
formatPageText: (page) =>
869+
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
870+
start: page.currentStart,
871+
end: page.currentEnd,
872+
total: logCount,
873+
}),
874+
currentPage: activePage,
875+
pageSize: pageSize,
876+
total: logCount,
877+
pageSizeOptions: [10, 20, 50, 100],
878+
showSizeChanger: true,
879+
onPageSizeChange: (size) => {
880+
handlePageSizeChange(size);
881+
},
882+
onPageChange: handlePageChange,
883+
}}
884+
/>
887885
</Card>
888886

889887
<Modal

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

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -498,41 +498,39 @@ const RedemptionsTable = () => {
498498
shadows='always'
499499
bordered={false}
500500
>
501-
<div style={{ overflow: 'auto' }}>
502-
<Table
503-
columns={columns}
504-
dataSource={pageData}
505-
scroll={{ x: 'max-content' }}
506-
pagination={{
507-
currentPage: activePage,
508-
pageSize: pageSize,
509-
total: tokenCount,
510-
showSizeChanger: true,
511-
pageSizeOptions: [10, 20, 50, 100],
512-
formatPageText: (page) =>
513-
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
514-
start: page.currentStart,
515-
end: page.currentEnd,
516-
total: tokenCount,
517-
}),
518-
onPageSizeChange: (size) => {
519-
setPageSize(size);
520-
setActivePage(1);
521-
if (searchKeyword === '') {
522-
loadRedemptions(1, size).then();
523-
} else {
524-
searchRedemptions(searchKeyword, 1, size).then();
525-
}
526-
},
527-
onPageChange: handlePageChange,
528-
}}
529-
loading={loading}
530-
rowSelection={rowSelection}
531-
onRow={handleRow}
532-
className="rounded-xl overflow-hidden"
533-
size="middle"
534-
></Table>
535-
</div>
501+
<Table
502+
columns={columns}
503+
dataSource={pageData}
504+
scroll={{ x: 'max-content' }}
505+
pagination={{
506+
currentPage: activePage,
507+
pageSize: pageSize,
508+
total: tokenCount,
509+
showSizeChanger: true,
510+
pageSizeOptions: [10, 20, 50, 100],
511+
formatPageText: (page) =>
512+
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
513+
start: page.currentStart,
514+
end: page.currentEnd,
515+
total: tokenCount,
516+
}),
517+
onPageSizeChange: (size) => {
518+
setPageSize(size);
519+
setActivePage(1);
520+
if (searchKeyword === '') {
521+
loadRedemptions(1, size).then();
522+
} else {
523+
searchRedemptions(searchKeyword, 1, size).then();
524+
}
525+
},
526+
onPageChange: handlePageChange,
527+
}}
528+
loading={loading}
529+
rowSelection={rowSelection}
530+
onRow={handleRow}
531+
className="rounded-xl overflow-hidden"
532+
size="middle"
533+
></Table>
536534
</Card>
537535
</>
538536
);

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

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -696,34 +696,32 @@ const LogsTable = () => {
696696
shadows='always'
697697
bordered={false}
698698
>
699-
<div style={{ overflow: 'auto' }}>
700-
<Table
701-
columns={getVisibleColumns()}
702-
dataSource={pageData}
703-
rowKey='key'
704-
loading={loading}
705-
scroll={{ x: 'max-content' }}
706-
className="rounded-xl overflow-hidden"
707-
size="middle"
708-
pagination={{
709-
formatPageText: (page) =>
710-
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
711-
start: page.currentStart,
712-
end: page.currentEnd,
713-
total: logCount,
714-
}),
715-
currentPage: activePage,
716-
pageSize: pageSize,
717-
total: logCount,
718-
pageSizeOptions: [10, 20, 50, 100],
719-
showSizeChanger: true,
720-
onPageSizeChange: (size) => {
721-
handlePageSizeChange(size);
722-
},
723-
onPageChange: handlePageChange,
724-
}}
725-
/>
726-
</div>
699+
<Table
700+
columns={getVisibleColumns()}
701+
dataSource={pageData}
702+
rowKey='key'
703+
loading={loading}
704+
scroll={{ x: 'max-content' }}
705+
className="rounded-xl overflow-hidden"
706+
size="middle"
707+
pagination={{
708+
formatPageText: (page) =>
709+
t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
710+
start: page.currentStart,
711+
end: page.currentEnd,
712+
total: logCount,
713+
}),
714+
currentPage: activePage,
715+
pageSize: pageSize,
716+
total: logCount,
717+
pageSizeOptions: [10, 20, 50, 100],
718+
showSizeChanger: true,
719+
onPageSizeChange: (size) => {
720+
handlePageSizeChange(size);
721+
},
722+
onPageChange: handlePageChange,
723+
}}
724+
/>
727725
</Card>
728726

729727
<Modal

0 commit comments

Comments
 (0)