From 4ad24685c59dd558c1d298116001b4fe6c4a8cfd Mon Sep 17 00:00:00 2001
From: dark <dark.lijin@gmail.com>
Date: Mon, 10 Jun 2024 17:11:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9table=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useScrollStyle.ts | 76 +++++++++++++++++++++++++++++++++++++++++++++
 src/layout/style.ts         | 17 ++++++++++
 src/theme/index.ts          |  5 ++-
 3 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useScrollStyle.ts

diff --git a/src/hooks/useScrollStyle.ts b/src/hooks/useScrollStyle.ts
new file mode 100644
index 0000000..3694ff6
--- /dev/null
+++ b/src/hooks/useScrollStyle.ts
@@ -0,0 +1,76 @@
+import { css } from '@/theme'
+
+export const useScrollStyle = () => {
+
+
+  const scrollbar = css`
+    &::-webkit-scrollbar {
+      //width: 6px;
+      //height: 6px;
+      //background-color: rgb(252, 252, 252);
+
+      width: 9px;
+      height: 9px;
+
+    }
+
+    &::-webkit-scrollbar-track {
+      //box-shadow: inset 0 0 6px rgba(173, 173, 173, 0.15);
+      //border-radius: 10px;
+      //background-color: #fcfcfc;
+
+      border-radius: 8px;
+      background-color: transparent;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, .06);
+        -webkit-box-shadow: -1px 0 0 #fff inset, 1px 0 0 hsla(0, 0%, 100%, .9) inset, 0 -1px 0 hsla(0, 0%, 100%, .9) inset, 0 1px 0 hsla(0, 0%, 100%, .9) inset
+
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, .1)
+      }
+
+    }
+
+    &::-webkit-scrollbar-thumb {
+
+      //height: 20px;
+      //border-radius: 10px;
+      //box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
+      //background-color: #cbcbcb;
+
+      border-radius: 8px;
+      background-color: rgba(0, 0, 0, .1);
+      -webkit-box-shadow: -2px 0 0 #fff inset, 1px 0 0 #fff inset, 0 -1px 0 hsl(0deg 0% 100% / 90%) inset, 0 1px 0 hsl(0deg 0% 100% / 90%) inset;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, .4)
+      }
+
+      &:active {
+        background: rgba(0, 0, 0, .6)
+      }
+    }
+  `
+
+  const scrollbarBackground = css`
+    background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)),
+    linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .1), transparent),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .1), transparent) 0 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+
+    ${scrollbar.toString()}
+
+  `
+
+
+  return {
+    scrollbarBackground,
+    scrollbar,
+  }
+}
\ No newline at end of file
diff --git a/src/layout/style.ts b/src/layout/style.ts
index 3e4f1c1..f61fcd8 100644
--- a/src/layout/style.ts
+++ b/src/layout/style.ts
@@ -1,8 +1,14 @@
 import { createStyles } from '@/theme'
+import { useScrollStyle } from '@/hooks/useScrollStyle'
+
 
 export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
   const prefix = `${prefixCls}-${token?.proPrefix}-layout`
 
+  const {  scrollbar } = useScrollStyle()
+
+  console.log(scrollbar)
+
   const container = {
     [prefix]: css`
       
@@ -16,6 +22,17 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
         //padding-inline-start: 0;
       }
       
+      .ant-table-scroll-bar {
+      }
+      
+      .ant-table-wrapper .ant-table{
+        scrollbar-color: unset;
+      }
+      .ant-table-body{
+   
+         ${scrollbar}
+       
+      }
     `,
   }
 
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 6cbf657..723ef8d 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,4 +1,4 @@
-import { createInstance } from 'antd-style'
+import { createInstance,   } from 'antd-style'
 import { ProThemeToken } from './themes'
 
 type ProToken = {
@@ -18,6 +18,9 @@ const { createStyles, ThemeProvider } = createInstance<ProToken>({
 
 export {
   createGlobalStyle,
+  extractStaticStyle,
+        createStylish,
+        styleManager,
   css,
   cx,
   injectGlobal,