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

🎨 style(table): customize table scrollbar appearance

Browse Source 
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.
This commit is contained in:
Apple\Apple
2025-06-07 02:51:38 +08:00
parent 2100d32bab
commit 83d58848bc
8 changed files with 221 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1632,43 +1632,41 @@ const ChannelsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={getVisibleColumns()}
columns={getVisibleColumns()} dataSource={pageData}
dataSource={pageData} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} pagination={{
pagination={{ currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: channelCount,
total: channelCount, pageSizeOpts: [10, 20, 50, 100],
pageSizeOpts: [10, 20, 50, 100], showSizeChanger: true,
showSizeChanger: true, formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: channels.length,
total: channels.length, }),
}), onPageSizeChange: (size) => {
onPageSizeChange: (size) => { handlePageSizeChange(size);
handlePageSizeChange(size); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} expandAllRows={false}
expandAllRows={false} onRow={handleRow}
onRow={handleRow} rowSelection={
rowSelection={ enableBatchDelete
enableBatchDelete ? {
? { onChange: (selectedRowKeys, selectedRows) => {
onChange: (selectedRowKeys, selectedRows) => { setSelectedChannels(selectedRows);
setSelectedChannels(selectedRows); },
}, }
} : null
: null }
} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" loading={loading}
loading={loading} />
/>
</div>
</Card> </Card>
{/* 批量设置标签模态框 */} {/* 批量设置标签模态框 */}

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

@@ -1250,36 +1250,34 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={getVisibleColumns()}
columns={getVisibleColumns()} expandedRowRender={expandRowRender}
expandedRowRender={expandRowRender} expandRowByClick={true}
expandRowByClick={true} dataSource={logs}
dataSource={logs} rowKey='key'
rowKey='key' loading={loading}
loading={loading} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" pagination={{
pagination={{ formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: logCount,
total: logCount, }),
}), currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: logCount,
total: logCount, pageSizeOptions: [10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100], showSizeChanger: true,
showSizeChanger: true, onPageSizeChange: (size) => {
onPageSizeChange: (size) => { handlePageSizeChange(size);
handlePageSizeChange(size); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} />
/>
</div>
</Card> </Card>
</> </>
); );

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

@@ -856,34 +856,32 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={getVisibleColumns()}
columns={getVisibleColumns()} dataSource={pageData}
dataSource={pageData} rowKey='key'
rowKey='key' loading={loading}
loading={loading} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" pagination={{
pagination={{ formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: logCount,
total: logCount, }),
}), currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: logCount,
total: logCount, pageSizeOptions: [10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100], showSizeChanger: true,
showSizeChanger: true, onPageSizeChange: (size) => {
onPageSizeChange: (size) => { handlePageSizeChange(size);
handlePageSizeChange(size); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} />
/>
</div>
</Card> </Card>
<Modal <Modal

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

@@ -498,41 +498,39 @@ const RedemptionsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={columns}
columns={columns} dataSource={pageData}
dataSource={pageData} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} pagination={{
pagination={{ currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: tokenCount,
total: tokenCount, showSizeChanger: true,
showSizeChanger: true, pageSizeOptions: [10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100], formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: tokenCount,
total: tokenCount, }),
}), onPageSizeChange: (size) => {
onPageSizeChange: (size) => { setPageSize(size);
setPageSize(size); setActivePage(1);
setActivePage(1); if (searchKeyword === '') {
if (searchKeyword === '') { loadRedemptions(1, size).then();
loadRedemptions(1, size).then(); } else {
} else { searchRedemptions(searchKeyword, 1, size).then();
searchRedemptions(searchKeyword, 1, size).then(); }
} },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} loading={loading}
loading={loading} rowSelection={rowSelection}
rowSelection={rowSelection} onRow={handleRow}
onRow={handleRow} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" ></Table>
></Table>
</div>
</Card> </Card>
</> </>
); );

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

@@ -696,34 +696,32 @@ const LogsTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={getVisibleColumns()}
columns={getVisibleColumns()} dataSource={pageData}
dataSource={pageData} rowKey='key'
rowKey='key' loading={loading}
loading={loading} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" pagination={{
pagination={{ formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: logCount,
total: logCount, }),
}), currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: logCount,
total: logCount, pageSizeOptions: [10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100], showSizeChanger: true,
showSizeChanger: true, onPageSizeChange: (size) => {
onPageSizeChange: (size) => { handlePageSizeChange(size);
handlePageSizeChange(size); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} />
/>
</div>
</Card> </Card>
<Modal <Modal

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

@@ -629,36 +629,34 @@ const TokensTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={columns}
columns={columns} dataSource={pageData}
dataSource={pageData} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} pagination={{
pagination={{ currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: tokenCount,
total: tokenCount, showSizeChanger: true,
showSizeChanger: true, pageSizeOptions: [10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100], formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: tokens.length,
total: tokens.length, }),
}), onPageSizeChange: (size) => {
onPageSizeChange: (size) => { setPageSize(size);
setPageSize(size); setActivePage(1);
setActivePage(1); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} loading={loading}
loading={loading} rowSelection={rowSelection}
rowSelection={rowSelection} onRow={handleRow}
onRow={handleRow} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" ></Table>
></Table>
</div>
</Card> </Card>
</> </>
); );

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

@@ -547,34 +547,32 @@ const UsersTable = () => {
shadows='always' shadows='always'
bordered={false} bordered={false}
> >
<div style={{ overflow: 'auto' }}> <Table
<Table columns={columns}
columns={columns} dataSource={users}
dataSource={users} scroll={{ x: 'max-content' }}
scroll={{ x: 'max-content' }} pagination={{
pagination={{ formatPageText: (page) =>
formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { start: page.currentStart,
start: page.currentStart, end: page.currentEnd,
end: page.currentEnd, total: userCount,
total: userCount, }),
}), currentPage: activePage,
currentPage: activePage, pageSize: pageSize,
pageSize: pageSize, total: userCount,
total: userCount, pageSizeOpts: [10, 20, 50, 100],
pageSizeOpts: [10, 20, 50, 100], showSizeChanger: true,
showSizeChanger: true, onPageSizeChange: (size) => {
onPageSizeChange: (size) => { handlePageSizeChange(size);
handlePageSizeChange(size); },
}, onPageChange: handlePageChange,
onPageChange: handlePageChange, }}
}} loading={loading}
loading={loading} onRow={handleRow}
onRow={handleRow} className="rounded-xl overflow-hidden"
className="rounded-xl overflow-hidden" size="middle"
size="middle" />
/>
</div>
</Card> </Card>
</> </>
); );

19
web/src/index.css
View File

@@ -339,6 +339,25 @@ code {
} }
/* ==================== 滚动条样式统一管理 ==================== */ /* ==================== 滚动条样式统一管理 ==================== */
/* 表格滚动条样式 */
.semi-table-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.semi-table-body::-webkit-scrollbar-thumb {
background: rgba(var(--semi-grey-2), 0.3);
border-radius: 2px;
}
.semi-table-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--semi-grey-2), 0.5);
}
.semi-table-body::-webkit-scrollbar-track {
background: transparent;
}
/* 隐藏模型设置区域的滚动条 */ /* 隐藏模型设置区域的滚动条 */
.model-settings-scroll::-webkit-scrollbar, .model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar, .thinking-content-scroll::-webkit-scrollbar,