feat: 一个小测试

src/pages/Customer/Test/index.less

@@ -0,0 +1,28 @@
+.menuBox {
+  :global(.menu-title) {
+    box-shadow: inset 0 -1px 0 1px #f0f0f0;
+  }
+  :global(.ant-menu-root.ant-menu-inline) {
+    height: calc(100vh - 200px);
+    overflow: auto;
+    border: none;
+  }
+  :global(::-webkit-scrollbar) {
+    display: none;
+  }
+  :global(.scrollBox) {
+    width: 6px;
+    height: calc(100vh - 200px);
+    border-radius: 3px;
+    top: 65px;
+    right: 0;
+  }
+  :global(.sliderBar) {
+    width: 100%;
+    left: 0;
+    background: #b3b3b3;
+    border-radius: 3px;
+    cursor: pointer;
+    user-select: none;
+  }
+}

src/pages/Customer/Test/index.tsx

@@ -1,9 +1,279 @@
-import { Button } from 'antd'
+import { Menu, Tree } from 'antd'
+import classNames from 'classnames'
+import { useEffect, useRef, useState } from 'react'
+import styles from './index.less'
 
 const Test = () => {
+  const scrollRef = useRef<HTMLDivElement>()
+  const scrollRefBar = useRef<HTMLDivElement>()
+  const [state, setState] = useState({
+    topHeight: '0',
+    barHeight: ''
+  })
+
+  const onScrollHandle = () => {
+    const scrollTop = document.querySelector('.menuWrap').scrollTop // 滚动条滚动高度
+    const clientHeight = document.querySelector('.menuWrap').clientHeight // 可视区域高度
+    // const scrollHeight = document.querySelector('.menuWrap').scrollHeight // 滚动内容高度
+
+    const barHeight = clientHeight / 2
+    if (scrollTop > 5) {
+      scrollRef.current.style.display = ''
+      setState({
+        ...state,
+        topHeight: barHeight,
+        barHeight: barHeight
+      })
+    } else {
+      setState({
+        ...state,
+        topHeight: 0,
+        barHeight: barHeight
+      })
+    }
+    setTimeout(() => {
+      scrollRef.current.style.display = 'none'
+    }, 5000)
+  }
+  const item = [
+    {
+      label: 'Navigation One',
+      key: 'mail'
+    },
+    {
+      label: 'Navigation Two',
+      key: 'app'
+    },
+    {
+      label: 'Navigation Three - Submenu',
+      key: 'SubMenu',
+      children: [
+        {
+          type: 'group',
+          label: 'Item 1',
+          children: [
+            {
+              label: 'Option 1',
+              key: 'setting:1'
+            },
+            {
+              label: 'Option 2',
+              key: 'setting:2'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          label: 'Item 2',
+          children: [
+            {
+              label: 'Option 3',
+              key: 'setting:53'
+            },
+            {
+              label: 'Option 4',
+              key: 'setting:54'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Navigation One',
+      key: 'mail1'
+    },
+    {
+      label: 'Navigation Two',
+      key: 'app1'
+    },
+    {
+      label: 'Navigation Three - Submenu',
+      key: 'SubMenu1',
+      children: [
+        {
+          type: 'group',
+          label: 'Item 1',
+          children: [
+            {
+              label: 'Option 1',
+              key: 'setting:11'
+            },
+            {
+              label: 'Option 2',
+              key: 'setting:12'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          label: 'Item 2',
+          children: [
+            {
+              label: 'Option 3',
+              key: 'setting:63'
+            },
+            {
+              label: 'Option 4',
+              key: 'setting:64'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Navigation One',
+      key: 'mail2'
+    },
+    {
+      label: 'Navigation Two',
+      key: 'app2'
+    },
+    {
+      label: 'Navigation Three - Submenu',
+      key: 'SubMenu2',
+      children: [
+        {
+          type: 'group',
+          label: 'Item 1',
+          children: [
+            {
+              label: 'Option 1',
+              key: 'setting:21'
+            },
+            {
+              label: 'Option 2',
+              key: 'setting:22'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          label: 'Item 2',
+          children: [
+            {
+              label: 'Option 3',
+              key: 'setting:73'
+            },
+            {
+              label: 'Option 4',
+              key: 'setting:74'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Navigation One',
+      key: 'mail3'
+    },
+    {
+      label: 'Navigation Two',
+      key: 'app3'
+    },
+    {
+      label: 'Navigation Three - Submenu',
+      key: 'SubMenu3',
+      children: [
+        {
+          type: 'group',
+          label: 'Item 1',
+          children: [
+            {
+              label: 'Option 1',
+              key: 'setting:31'
+            },
+            {
+              label: 'Option 2',
+              key: 'setting:32'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          label: 'Item 2',
+          children: [
+            {
+              label: 'Option 3',
+              key: 'setting:43'
+            },
+            {
+              label: 'Option 4',
+              key: 'setting:44'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+  const dig = [
+    {
+      title: '0-0',
+      key: '0-0',
+      children: [
+        {
+          title: '0-0-0',
+          key: '0-0-0',
+          children: [
+            { title: '0-0-0-0', key: '0-0-0-0' },
+            { title: '0-0-0-1', key: '0-0-0-1' },
+            { title: '0-0-0-2', key: '0-0-0-2' }
+          ]
+        },
+        {
+          title: '0-0-1',
+          key: '0-0-1',
+          children: [
+            { title: '0-0-1-0', key: '0-0-1-0' },
+            { title: '0-0-1-1', key: '0-0-1-1' },
+            { title: '0-0-1-2', key: '0-0-1-2' }
+          ]
+        },
+        {
+          title: '0-0-2',
+          key: '0-0-2'
+        }
+      ]
+    },
+    {
+      title: '0-1',
+      key: '0-1',
+      children: [
+        { title: '0-1-0-0', key: '0-1-0-0' },
+        { title: '0-1-0-1', key: '0-1-0-1' },
+        { title: '0-1-0-2', key: '0-1-0-2' }
+      ]
+    },
+    {
+      title: '0-2',
+      key: '0-2'
+    }
+  ]
+  useEffect(() => {
+    scrollRef.current.style.display = 'none'
+    document.querySelector('.menuWrap').addEventListener('scroll', onScrollHandle, true)
+    onScrollHandle()
+    return () => {
+      document.querySelector('.menuWrap').removeEventListener('scroll', onScrollHandle, false)
+    }
+  }, [])
   return (
     <div>
-      <Button onClick={e => console.log(e)}>Button</Button>
+      <div
+        className={classNames(styles.menuBox, 'w-216px rounded-20px relative inline-block')}
+        style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
+        <div className="p-5 text-16px text-opacity-85 menu-title">业务主体列表</div>
+        <Menu className="menuWrap" mode="inline" defaultOpenKeys={'SubMenu'} items={item} />
+        <div className="absolute scrollBox" ref={scrollRef} onScroll={onScrollHandle}>
+          <div
+            className="sliderBar absolute"
+            ref={scrollRefBar}
+            style={{ top: state.topHeight, height: state.barHeight }}
+          />
+        </div>
+      </div>
+      <div className="inline-block absolute left-300px w-200px">
+        <Tree treeData={dig} height={400} defaultExpandAll />
+      </div>
     </div>
   )
 }