style: dark theme for scroller

src/pages/llmodels/components/hf-model-file.tsx

@@ -1,3 +1,4 @@
+import SimpleOverlay from '@/components/simple-overlay';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { useIntl } from '@umijs/max';
 import { Empty, Select, Spin } from 'antd';
@@ -11,7 +12,6 @@ import React, {
   useRef,
   useState
 } from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import styled from 'styled-components';
 import {
@@ -399,11 +399,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
           ></Spin>
         </div>
       )}
-      <SimpleBar
-        style={{
-          height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
-        }}
-      >
+      <SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
         <div style={{ padding: '16px 24px' }}>
           {dataSource.fileList.length ? (
             <ItemFileWrapper>
@@ -433,7 +429,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
             )
           )}
         </div>
-      </SimpleBar>
+      </SimpleOverlay>
     </div>
   );
 });

src/pages/llmodels/components/model-card.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import MarkdownViewer from '@/components/markdown-viewer';
+import SimpleOverlay from '@/components/simple-overlay';
 import useRequestToken from '@/hooks/use-request-token';
 import {
   DownOutlined,
@@ -17,7 +18,6 @@ import React, {
   useRef,
   useState
 } from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import {
   downloadModelFile,
@@ -357,7 +357,7 @@ const ModelCard: React.FC<{
                     {collapsed ? <DownOutlined /> : <RightOutlined />}
                   </span>
                 </span>
-                <SimpleBar
+                <SimpleOverlay
                   style={{
                     paddingTop: collapsed ? 12 : 0,
                     maxHeight: collapsed ? 300 : 0
@@ -368,7 +368,7 @@ const ModelCard: React.FC<{
                     content={readmeText}
                     theme="light"
                   ></MarkdownViewer>
-                </SimpleBar>
+                </SimpleOverlay>
               </div>
             )}
           </div>

src/pages/llmodels/components/search-result.tsx

@@ -1,9 +1,9 @@
 import IconFont from '@/components/icon-font';
+import SimpleOverlay from '@/components/simple-overlay';
 import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Col, Empty, Row, Spin } from 'antd';
 import React, { useMemo } from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { modelSourceMap } from '../config';
 import '../style/search-result.less';
@@ -89,7 +89,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
   }, [networkError, source, intl]);
 
   return (
-    <SimpleBar style={{ height: 'calc(100vh - 224px)' }}>
+    <SimpleOverlay style={{ height: 'calc(100vh - 224px)' }}>
       <div style={{ ...props.style }} className="search-result-wrap">
         <Spin spinning={props.loading}>
           <div style={{ minHeight: 200 }}>
@@ -124,7 +124,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
           </div>
         </Spin>
       </div>
-    </SimpleBar>
+    </SimpleOverlay>
   );
 };