🎨 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.

web/src/components/table/ChannelsTable.js

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

web/src/components/table/LogsTable.js

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

web/src/components/table/MjLogsTable.js

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

web/src/components/table/RedemptionsTable.js

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

web/src/components/table/TaskLogsTable.js

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

web/src/components/table/TokensTable.js

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

web/src/components/table/UsersTable.js

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

web/src/index.css

@@ -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,
 .thinking-content-scroll::-webkit-scrollbar,