perf: scrollbar

Author: wkylin

package.json

@@ -179,6 +179,7 @@
     "@typescript-eslint/parser": "^8.48.0",
     "@vitejs/plugin-react": "^5.1.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
+    "archiver": "^5.3.1",
     "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-react-compiler": "latest",
@@ -212,6 +213,7 @@
     "eslint-plugin-storybook": "^10.1.7",
     "eslint-plugin-unicorn": "^62.0.0",
     "eslint-webpack-plugin": "^5.0.2",
+    "filemanager-webpack-plugin": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "gh-pages": "^6.3.0",
     "glob": "^13.0.0",
@@ -282,9 +284,7 @@
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^6.0.1",
-    "webpackbar": "^7.0.0",
-    "filemanager-webpack-plugin": "^6.0.0",
-    "archiver": "^5.3.1"
+    "webpackbar": "^7.0.0"
   },
   "dependencies": {
     "@ant-design/cssinjs": "^2.0.1",

src/components/stateless/FixTabPanel/index.jsx

@@ -1,28 +1,22 @@
-import React, { useRef, useState, useEffect } from 'react'
+/* eslint-disable react/prop-types */
+import React, { useRef } from 'react'
 import { FloatButton } from 'antd'
 import { VerticalAlignTopOutlined } from '@ant-design/icons'
 import ScrollProgressBar from '@stateless/ScrollProgressBar'
 
 const FixTabPanel = React.forwardRef(
   ({ style, children, className, showScrollProgress = true, scrollProgressProps = {}, fill = true, ...rest }, ref) => {
-    const innerRef = useRef(null)
-    const [scrollContainer, setScrollContainer] = useState(null)
+    const wrapperRef = useRef(null)
 
     const setRef = (node) => {
-      innerRef.current = node
+      wrapperRef.current = node
       if (typeof ref === 'function') {
         ref(node)
       } else if (ref) {
         ref.current = node
       }
     }
 
-    useEffect(() => {
-      if (innerRef.current) {
-        setScrollContainer(innerRef.current)
-      }
-    }, [])
-
     return (
       <div
         ref={setRef}
@@ -32,35 +26,42 @@ const FixTabPanel = React.forwardRef(
           width: '100%',
           height: '100%',
           position: 'relative',
-          overflowX: 'hidden',
           overflowY: 'auto',
-          padding: '5px',
+          overflowX: 'hidden',
           ...style,
         }}
       >
         {showScrollProgress && (
           <ScrollProgressBar
-            container={scrollContainer}
+            container={wrapperRef.current}
             position="fixed" // sticky
             {...scrollProgressProps}
           />
         )}
+
         <div
           style={{
             position: 'relative',
             zIndex: 1,
             width: '100%',
+            maxWidth: '100%',
+            minWidth: 0,
             height: fill ? '100%' : 'auto',
+            padding: '5px',
+            boxSizing: 'border-box',
           }}
         >
           {children}
         </div>
-        <FloatButton.BackTop target={() => innerRef.current} style={{ right: 6, bottom: 2 }}>
+
+        <FloatButton.BackTop target={() => wrapperRef.current} style={{ right: 6, bottom: 2 }}>
           <VerticalAlignTopOutlined style={{ fontSize: 20 }} />
         </FloatButton.BackTop>
       </div>
     )
   }
 )
 
+FixTabPanel.displayName = 'FixTabPanel'
+
 export default FixTabPanel

src/components/stateless/LineBordered/index.module.less

@@ -161,11 +161,6 @@
 
 .no-scrollbars {
   overflow: auto;
-  scrollbar-width: none;
-}
-
-.no-scrollbars::-webkit-scrollbar {
-  display: none;
 }
 
 .engraved-text {

src/components/stateless/MusicPlayer/index.jsx

@@ -103,12 +103,10 @@ const MusicPlayer = () => {
     if (isReady.current) {
       if (isPlaying) {
         const playPromise = audio.play()
-        if (playPromise !== undefined) {
-          playPromise.catch((error) => {
-            // 捕获 "The play() request was interrupted" 错误，静默处理
-            console.log('Playback prevented/interrupted (harmless):', error)
-          })
-        }
+        Promise.resolve(playPromise).catch((error) => {
+          // 捕获 "The play() request was interrupted" 错误，静默处理
+          console.log('Playback prevented/interrupted (harmless):', error)
+        })
       }
     } else {
       // 第一次加载组件时不自动播放
@@ -121,9 +119,7 @@ const MusicPlayer = () => {
     const audio = audioRef.current
     if (isPlaying) {
       const playPromise = audio.play()
-      if (playPromise !== undefined) {
-        playPromise.catch((e) => console.log('Play interaction error:', e))
-      }
+      Promise.resolve(playPromise).catch((e) => console.log('Play interaction error:', e))
     } else {
       audio.pause()
     }
@@ -250,10 +246,12 @@ const MusicPlayer = () => {
           {TRACKS.map((track, index) => {
             const isCurrent = index === currentTrackIndex
             return (
-              <div
+              <button
                 key={track.id}
                 onClick={() => playTrack(index)}
-                className={`group mb-1 flex cursor-pointer items-center rounded-xl p-3 transition-all duration-200 ${isCurrent ? 'bg-gray-800/80' : 'text-gray-400 hover:bg-gray-800/40'} `}
+                type="button"
+                aria-label={`Play ${track.title} by ${track.artist}`}
+                className={`group mb-1 flex w-full items-center rounded-xl p-3 text-left transition-all duration-200 ${isCurrent ? 'bg-gray-800/80' : 'text-gray-400 hover:bg-gray-800/40'} `}
               >
                 {/* 序号 / 动态图标 */}
                 <div className="mr-2 flex w-10 items-center justify-center">
@@ -284,19 +282,11 @@ const MusicPlayer = () => {
                 {isCurrent && (
                   <span className="px-2 text-xs font-medium text-green-500/80">{isPlaying ? 'Playing' : 'Paused'}</span>
                 )}
-              </div>
+              </button>
             )
           })}
         </div>
       </div>
-
-      {/* 全局样式 (用于滚动条和旋转) */}
-      <style>{`
-        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
-        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-        .custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4b5563; }
-      `}</style>
     </div>
   )
 }

src/components/stateless/OrgChart/org-chart/index.module.less

@@ -178,42 +178,6 @@
   overflow: auto visible;
   padding-bottom: 10px;
   position: relative;
-
-  /* 自定义滚动条样式 */
-  &::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 4px;
-    margin: 0 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, #2878ff 0%, #1a68e6 100%);
-    border-radius: 4px;
-    border: 1px solid #e0e0e0;
-    box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
-
-    &:hover {
-      background: linear-gradient(180deg, #1a68e6 0%, #1558d6 100%);
-      box-shadow: inset 0 0 8px rgb(0 0 0 / 20%);
-    }
-
-    &:active {
-      background: linear-gradient(180deg, #1558d6 0%, #1048c6 100%);
-    }
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: #f1f1f1;
-  }
-
-  /* Firefox 滚动条样式 */
-  scrollbar-width: thin;
-  scrollbar-color: #2878ff #f1f1f1;
 }
 
 .childrenWrapper {
@@ -307,10 +271,4 @@
     height: 14px;
     font-size: 8px;
   }
-
-  .childrenScroll {
-    &::-webkit-scrollbar {
-      height: 6px;
-    }
-  }
 }

src/components/stateless/PageContainer/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { theme } from 'antd'
 import Footer from '@stateless/Footer'
 
@@ -37,32 +38,24 @@ const PageContainer = ({ children, title, footer = <Footer />, className, style
           style={{
             flex: 1,
             overflow: 'auto',
-            padding: '24px',
             position: 'relative',
+            padding: '24px',
           }}
         >
           {children}
         </div>
-        <style>{`
-          .page-container-content::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
-          }
-          .page-container-content::-webkit-scrollbar-track {
-            background: transparent;
-          }
-          .page-container-content::-webkit-scrollbar-thumb {
-            background-color: ${token.colorFillSecondary};
-            border-radius: 3px;
-          }
-          .page-container-content::-webkit-scrollbar-thumb:hover {
-            background-color: ${token.colorFill};
-          }
-        `}</style>
       </section>
       {footer}
     </>
   )
 }
 
+PageContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node,
+  footer: PropTypes.node,
+  className: PropTypes.string,
+  style: PropTypes.object,
+}
+
 export default PageContainer

src/pages/mermaid/index.jsx

@@ -16,7 +16,6 @@ import {
   GitBranch,
   Activity,
   Clock,
-  Move,
   FileCode,
 } from 'lucide-react'
 import { Button, Tooltip, message, Space, Card, Segmented, theme } from 'antd'

src/pages/portfilo/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useNavigate } from 'react-router-dom'
 import {
@@ -79,7 +79,8 @@ const MyPortfilo = () => {
   const { token, theme: antdTheme } = useToken()
   const screens = useBreakpoint()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const { scrollYProgress } = useScroll()
+  const containerRef = useRef(null)
+  const { scrollYProgress } = useScroll({ container: containerRef })
   const scaleX = useSpring(scrollYProgress, {
     stiffness: 100,
     damping: 30,
@@ -170,12 +171,14 @@ const MyPortfilo = () => {
   return (
     <div
       id="portfolio-container"
+      ref={containerRef}
       style={{
         backgroundColor: token.colorBgContainer,
         color: token.colorText,
         position: 'relative',
         height: '100vh',
         overflowY: 'auto',
+        overflowX: 'hidden',
         scrollBehavior: 'smooth',
         backgroundImage:
           antdTheme.id === 1 // Dark mode check approximation or use token
@@ -351,7 +354,7 @@ const MyPortfilo = () => {
         >
           <Anchor
             targetOffset={targetOffset}
-            getContainer={() => document.getElementById('portfolio-container')}
+            getContainer={() => containerRef.current || document.getElementById('portfolio-container')}
             direction="vertical"
             onClick={handleAnchorClick}
             items={navItems}