🎨 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,7 +1632,6 @@ const ChannelsTable = () => {
         shadows='always'
         bordered={false}
       >
-        <div style={{ overflow: 'auto' }}>
         <Table
           columns={getVisibleColumns()}
           dataSource={pageData}
@@ -1668,7 +1667,6 @@ const ChannelsTable = () => {
           size="middle"
           loading={loading}
         />
-        </div>
       </Card>
 
       {/* 批量设置标签模态框 */}

web/src/components/table/LogsTable.js

@@ -1250,7 +1250,6 @@ const LogsTable = () => {
         shadows='always'
         bordered={false}
       >
-        <div style={{ overflow: 'auto' }}>
         <Table
           columns={getVisibleColumns()}
           expandedRowRender={expandRowRender}
@@ -1279,7 +1278,6 @@ const LogsTable = () => {
             onPageChange: handlePageChange,
           }}
         />
-        </div>
       </Card>
     </>
   );

web/src/components/table/MjLogsTable.js

@@ -856,7 +856,6 @@ const LogsTable = () => {
           shadows='always'
           bordered={false}
         >
-          <div style={{ overflow: 'auto' }}>
           <Table
             columns={getVisibleColumns()}
             dataSource={pageData}
@@ -883,7 +882,6 @@ const LogsTable = () => {
               onPageChange: handlePageChange,
             }}
           />
-          </div>
         </Card>
 
         <Modal

web/src/components/table/RedemptionsTable.js

@@ -498,7 +498,6 @@ const RedemptionsTable = () => {
         shadows='always'
         bordered={false}
       >
-        <div style={{ overflow: 'auto' }}>
         <Table
           columns={columns}
           dataSource={pageData}
@@ -532,7 +531,6 @@ const RedemptionsTable = () => {
           className="rounded-xl overflow-hidden"
           size="middle"
         ></Table>
-        </div>
       </Card>
     </>
   );

web/src/components/table/TaskLogsTable.js

@@ -696,7 +696,6 @@ const LogsTable = () => {
           shadows='always'
           bordered={false}
         >
-          <div style={{ overflow: 'auto' }}>
           <Table
             columns={getVisibleColumns()}
             dataSource={pageData}
@@ -723,7 +722,6 @@ const LogsTable = () => {
               onPageChange: handlePageChange,
             }}
           />
-          </div>
         </Card>
 
         <Modal

web/src/components/table/TokensTable.js

@@ -629,7 +629,6 @@ const TokensTable = () => {
         shadows='always'
         bordered={false}
       >
-        <div style={{ overflow: 'auto' }}>
         <Table
           columns={columns}
           dataSource={pageData}
@@ -658,7 +657,6 @@ const TokensTable = () => {
           className="rounded-xl overflow-hidden"
           size="middle"
         ></Table>
-        </div>
       </Card>
     </>
   );

web/src/components/table/UsersTable.js

@@ -547,7 +547,6 @@ const UsersTable = () => {
         shadows='always'
         bordered={false}
       >
-        <div style={{ overflow: 'auto' }}>
         <Table
           columns={columns}
           dataSource={users}
@@ -574,7 +573,6 @@ const UsersTable = () => {
           className="rounded-xl overflow-hidden"
           size="middle"
         />
-        </div>
       </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,