feat: scrollbar component

package.json

@@ -32,6 +32,7 @@
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.13.0",
     "screenfull": "^6.0.2",
+    "simplebar-react": "^3.2.4",
     "vite": "^4.3.9",
     "zustand": "^4.3.8"
   },

src/components/scrollbar/index.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, memo } from 'react';
+import SimpleBar, { Props as SimplebarProps } from 'simplebar-react';
+
+/**
+ * https://www.npmjs.com/package/simplebar-react?activeTab=readme
+ */
+const Scrollbar = forwardRef<HTMLElement, SimplebarProps>(({ children, ...other }, ref) => {
+  return (
+    <SimpleBar scrollableNodeProps={{ ref }} {...other} clickOnTrack={false} className="h-full">
+      {children}
+    </SimpleBar>
+  );
+});
+
+export default memo(Scrollbar);

src/layouts/dashboard/main.tsx

@@ -11,7 +11,9 @@ export default function Main() {
     <Content className="px-4">
       {/* <!-- ===== Content Start ===== --> */}
       <BreadCrumb />
-      <div className={`mx-auto h-full w-full sm:px-2 ${themeStretch ? '' : 'xl:max-w-screen-xl'}`}>
+      <div
+        className={`mx-auto h-full w-full pt-4 sm:px-2 ${themeStretch ? '' : 'xl:max-w-screen-xl'}`}
+      >
         <Outlet />
       </div>
       {/* <!-- ===== Content End ===== --> */}

src/locales/lang/en/sys.json

@@ -81,7 +81,8 @@
       "user": "User",
       "blog": "Blog",
       "components": "Components",
-      "animate": "Animate"
+      "animate": "Animate",
+      "scroll": "Scroll"
     }
   }
 }

src/locales/lang/zh-CN/sys.json

@@ -80,7 +80,8 @@
       "user": "用户",
       "blog": "博客",
       "components": "组件",
-      "animate": "动画"
+      "animate": "动画",
+      "scroll": "滚动"
     }
   }
 }

src/main.tsx

@@ -1,14 +1,21 @@
+// react-query
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+// react
 import { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
+// react helmet
 import { HelmetProvider } from 'react-helmet-async';
+// simplebar
+import 'simplebar-react/dist/simplebar.min.css';
 // eslint-disable-next-line import/no-unresolved
 import 'virtual:svg-icons-register';
 
 import App from '@/App';
 
+// i18n
 import './locales/i18n';
+// tailwind css
 import './theme/index.css';
 
 // 创建一个 client

src/pages/components/scroll/index.tsx

@@ -0,0 +1,43 @@
+import { Card, Col, Row } from 'antd';
+
+import Scrollbar from '@/components/scrollbar';
+
+const TEXT = `Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
+ Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio.
+  Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+  Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. 
+  Vestibulum volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien.
+   Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. 
+   Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. 
+   Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. 
+   Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+   Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero. 
+   Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.`;
+export default function Scroll() {
+  return (
+    <Row gutter={20}>
+      <Col span={12}>
+        <Card title="Vertical">
+          <div className="h-80">
+            <Scrollbar>{TEXT}</Scrollbar>
+          </div>
+        </Card>
+      </Col>
+      <Col span={12}>
+        <Card title="Horizontal">
+          <Scrollbar>
+            <div style={{ width: '200%' }}>{TEXT}</div>
+          </Scrollbar>
+        </Card>
+      </Col>
+    </Row>
+  );
+}

src/router/routes/modules/components.tsx

@@ -2,6 +2,7 @@ import { Suspense, lazy } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
 import Loading from '@/components/loading';
+import Scroll from '@/pages/components/scroll';
 
 import { AppRouteObject } from '#/router';
 
@@ -26,6 +27,11 @@ const components: AppRouteObject = {
       element: <Animate />,
       meta: { title: 'sys.menu.animate', icon: 'ic-user', key: '/components/animate' },
     },
+    {
+      path: 'scroll',
+      element: <Scroll />,
+      meta: { title: 'sys.menu.scroll', icon: 'ic-user', key: '/components/scroll' },
+    },
   ],
 };