🎨 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>
 
       {/* 批量设置标签模态框 */}