style: dark theme for scroller

src/assets/images/noise_background_1f1f1f_style.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" ?>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+  <filter id="n" x="0" y="0">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="5" stitchTiles="stitch"/>
+  </filter>
+  <rect width="500" height="500" fill="#1f1f1f" opacity="0.4"/>
+  <rect width="500" height="500" filter="url(#n)" opacity="0.09"/>
+</svg>

src/atoms/settings.ts

@@ -2,7 +2,7 @@ import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
 type UserSettings = {
-  theme: 'light' | 'realDark';
+  theme: 'light' | 'realDark' | 'auto';
 };
 
 export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {

src/components/alert-info/block.less

@@ -31,7 +31,7 @@
   &.success {
     border: 1px solid var(--color-progress-green);
     color: var(--color-progress-green);
-    background: var(--color-green-fill-light);
+    background: var(--ant-color-success-bg);
 
     .content.success {
       font-weight: var(--font-weight-normal);

src/components/drop-down-buttons/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
+import React from 'react';
 import './index.less';
 
 type Trigger = 'click' | 'hover';
@@ -68,7 +69,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
               <div
                 className="flex flex-column "
                 style={{
-                  backgroundColor: 'var(--color-white-1)',
+                  backgroundColor: 'var(--ant-color-bg-elevated)',
                   padding: 5,
                   alignItems: 'flex-start',
                   borderRadius: 'var(--border-radius-base)',

src/components/echarts/config.ts

@@ -68,7 +68,6 @@ export default function useChartConfig() {
   const legend = {
     itemWidth: 8,
     itemHeight: 8,
-    padding: 0,
     textStyle: {
       color: chartColorMap.axislabelColor
     }

src/components/echarts/line-chart.tsx

@@ -51,7 +51,12 @@ const LineChart: React.FC<ChartProps> = (props) => {
     yAxis,
     legend: {
       ...legend,
-      data: legendData
+      data: legendData.map((item: any) => {
+        return {
+          name: item,
+          icon: 'circle'
+        };
+      })
     },
 
     series: []

src/components/highlight-code/index.tsx

@@ -1,3 +1,4 @@
+import useUserSettings from '@/hooks/use-user-settings';
 import React from 'react';
 import CodeViewerDark from './code-viewer-dark';
 import CodeViewerLight from './code-viewer-light';
@@ -22,9 +23,15 @@ const HighlightCode: React.FC<{
     height = 'auto'
   } = props;
 
+  const { userSettings } = useUserSettings();
+
+  const currentTheme = React.useMemo(() => {
+    return theme || userSettings.theme === 'realDark' ? 'dark' : 'light';
+  }, [theme, userSettings.theme]);
+
   return (
     <div className="high-light-wrapper hj-wrapper">
-      {theme === 'dark' ? (
+      {currentTheme === 'dark' ? (
         <CodeViewerDark
           lang={lang}
           code={code}

src/components/highlight-code/styles/dark.less

@@ -31,7 +31,7 @@ hue-6-2: #e6c07b
 .code-pre.dark {
   .hljs {
     color: #abb2bf;
-    background: #282c34;
+    background: var(--color-editor-dark);
   }
 
   .hljs-comment,

src/components/highlight-code/styles/index.less

@@ -60,7 +60,7 @@
     }
 
     &.dark {
-      background-color: #282c34;
+      background-color: var(--color-editor-dark);
 
       &:hover {
         &::-webkit-scrollbar-thumb {

src/components/highlight-code/styles/light.less

@@ -31,7 +31,7 @@ hue-6-2: #c18401
 .code-pre.light {
   .hljs {
     color: #383a42;
-    background: #fafafa;
+    background: var(--color-editor-light);
   }
 
   .hljs-comment,

src/components/icon-font/index.tsx

@@ -1,8 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
-import './iconfont/iconfont.js';
+// import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ''
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_uw2djf1vxgf.js'
 });
 
 export default IconFont;

src/components/image-editor/tools-bar.tsx

@@ -177,7 +177,7 @@ const ImageActionsBar: React.FC<ImageActionsBarProps> = (props) => {
             })}
           >
             <Button onClick={downloadMask} size="middle" type="text">
-              <IconFont className="font-size-14" type="icon-save2"></IconFont>
+              <IconFont className="font-size-14" type="icon-save1"></IconFont>
             </Button>
           </Tooltip>
         </>

src/components/markdown-viewer/index.tsx

@@ -152,9 +152,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
       }
 
       if (token.type === 'code') {
-        htmlstr = (
+        htmlstr = <HighlightCode code={token.text} lang={token.lang} />;
-          <HighlightCode theme={theme} code={token.text} lang={token.lang} />
-        );
       }
 
       if (token.type === 'link') {

src/components/seal-form/wrapper/index.tsx

@@ -34,7 +34,7 @@ const WrapperBox = styled.div`
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
   border-radius: var(--border-radius-base);
-  // background-color: var(--color-white-1);
+  background-color: var(--ant-color-bg-container);
   &.borderless {
     border: none;
     box-shadow: none;
@@ -167,7 +167,7 @@ const Extra = styled.div`
 const AddAfter = styled.div`
   position: relative;
   color: var(--ant-color-text-quaternary);
-  font-size: 14px;
+  font-size: var(--font-size-base);
   padding-right: calc(var(--ant-padding-sm) - 1px);
 `;
 

src/components/seal-table/index.tsx

@@ -15,8 +15,10 @@ const Wrapper = styled.div<{ $token: any }>`
   --ant-table-header-border-radius: ${(props) =>
     props.$token.headerBorderRadius}px;
   --ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
-  --ant-table-row-selected-bg: var(--ant-table-row-selected-bg);
+  --ant-table-row-selected-bg: ${(props) => props.$token.rowSelectedBg};
-  --ant-table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
+  --ant-table-row-selected-hover-bg: ${(props) =>
+    props.$token.rowSelectedHoverBg};
+  --ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg};
 `;
 
 const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
@@ -45,6 +47,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     loadChildrenAPI
   } = props;
   const { token } = theme.useToken();
+  console.log('seal-table-props', token.Table);
   const parsedColumns = useMemo(() => {
     if (columns) return columns;
 

src/components/seal-table/styles/skeleton.less

@@ -1,7 +1,7 @@
 .row-skeleton {
   display: flex;
   justify-content: flex-start;
-  background-color: var(--color-fill-sider);
+  background-color: var(--ant-color-fill-tertiary);
   padding: 16px;
   height: 68px;
   border-radius: var(--border-radius-base);

src/components/segment-line/index.tsx

@@ -28,6 +28,7 @@ const SegmentedQwrapper = styled.div<{ $height: number }>`
       padding: 0px;
       bottom: 0px;
       top: unset;
+      background-color: var(--color-white-primary) !important;
     }
     .ant-segmented-item-label {
       display: flex;

src/components/short-cuts/index.less

@@ -23,7 +23,7 @@
     }
 
     .ant-table-thead > tr > th {
-      background-color: var(--color-fill-sider);
+      background-color: var(--ant-color-fill-tertiary);
       height: 36px;
       padding-block: 0;
     }
@@ -34,7 +34,7 @@
     //   overflow-y: auto !important;
     // }
     .ant-table-thead > tr > th {
-      background-color: var(--color-fill-sider);
+      background-color: var(--ant-color-fill-tertiary);
       height: 36px;
       padding-block: 0;
     }

src/components/simple-overlay/index.tsx

@@ -0,0 +1,46 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .simplebar-scrollbar::before {
+    width: var(--scrollbar-size);
+    background: var(--scrollbar-handle-bg);
+  }
+  &.dark {
+    .simplebar-scrollbar::before {
+      width: var(--scrollbar-size);
+      background: var(--scrollbar-handle-light-bg);
+    }
+  }
+`;
+
+interface SimpleOverlayProps {
+  height?: string | number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+const SimpleOverlay: React.FC<SimpleOverlayProps> = ({
+  height,
+  children,
+  style
+}) => {
+  const { isDarkTheme } = useUserSettings();
+  return (
+    <Wrapper className={isDarkTheme ? 'dark' : 'light'}>
+      <SimpleBar
+        style={{
+          height: height,
+          ...style
+        }}
+      >
+        {children}
+      </SimpleBar>
+    </Wrapper>
+  );
+};
+
+export default SimpleOverlay;

src/components/status-tag/index.tsx

@@ -4,9 +4,9 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Divider, Tooltip } from 'antd';
 import classNames from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import CopyButton from '../copy-button';
+import SimpleOverlay from '../simple-overlay';
 import CopyStyle from './copy-btn.less';
 import './index.less';
 
@@ -118,11 +118,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
           })}
         </div>
 
-        <SimpleBar
+        <SimpleOverlay style={{ maxHeight: 200 }}>
-          style={{ maxHeight: 200 }}
-          autoHide={false}
-          className="tooltip-scrollbar"
-        >
           <div
             style={{
               width: 'max-content',
@@ -139,7 +135,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
               <span dangerouslySetInnerHTML={{ __html: messageLink }}></span>
             )}
           </div>
-        </SimpleBar>
+        </SimpleOverlay>
       </div>
     );
   }, [statusValue]);
@@ -155,6 +151,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
     >
       {statusValue.message ? (
         <Tooltip
+          trigger={['hover']}
           title={renderTitle}
           destroyTooltipOnHide={true}
           overlayInnerStyle={{ paddingInline: 0 }}

src/config/theme/dark.ts

@@ -12,8 +12,8 @@ export default {
       cellPaddingInline: 16,
       cellPaddingBlock: 6,
       cellFontSize: 14,
-      rowSelectedHoverBg: 'rgb(24 25 27)',
+      rowSelectedHoverBg: '#1d1d1d',
-      rowHoverBg: 'rgb(24 25 27)',
+      rowHoverBg: '#1d1d1d',
       rowSelectedBg: 'transparent'
     },
     Button: {
@@ -23,8 +23,8 @@ export default {
       dangerShadow: 'none'
     },
     Tabs: {
-      titleFontSizeLG: 14,
+      titleFontSizeLG: 14
-      cardBg: '#1D1E20'
+      // cardBg: '#1D1E20'
     },
     Menu: {
       iconSize: 16,
@@ -32,8 +32,8 @@ export default {
       itemBorderRadius: 4,
       itemHeight: 44,
       itemSelectedColor: '#007BFF',
-      darkItemSelectedBg: 'rgb(24 25 27)',
+      darkItemSelectedBg: '#141414',
-      darkItemHoverBg: 'rgb(24 25 27)',
+      darkItemHoverBg: '#141414',
       groupTitleColor: 'rgba(0,0,0,1)',
       itemHoverColor: 'rgba(0,0,0,1)',
       itemColor: 'rgba(0,0,0,1)',
@@ -44,14 +44,14 @@ export default {
       lineBorderRadius: 2
     },
     Select: {
-      optionSelectedBg: 'rgba(230, 230, 230, 88%)',
+      optionSelectedBg: '#333',
       fontSizeLG: 14
     },
     Message: {
       contentPadding: '12px 16px'
     },
     Tooltip: {
-      colorBgSpotlight: '#1D1E20'
+      // colorBgSpotlight: '#333'
     },
     Cascader: {
       dropdownHeight: 240
@@ -59,13 +59,13 @@ export default {
     Slider: {
       handleSize: 8,
       handleSizeHover: 8,
-      trackBg: 'rgba(0,0,0,0.15)',
+      trackBg: 'rgba(255,255,255,.15)',
-      handleColor: 'rgba(0,0,0,0.2)',
+      handleColor: 'rgba(255,255,255,0.2)',
-      trackHoverBg: 'rgba(0,0,0,0.25)',
+      trackHoverBg: 'rgba(255,255,255,0.25)',
-      handleActiveColor: 'rgba(0,0,0,0.3)',
+      handleActiveColor: 'rgba(255,255,255,0.3)',
-      dotActiveBorderColor: 'rgba(0,0,0,0.25)',
+      dotActiveBorderColor: 'rgba(255,255,255,0.25)',
-      handleActiveOutlineColor: 'rgba(0,0,0,0.25)',
+      handleActiveOutlineColor: 'rgba(255,255,255,0.25)',
-      dotBorderColor: 'rgba(0,0,0,0.25)'
+      dotBorderColor: 'rgba(255,255,255,0.25)'
     }
   },
   token: {
@@ -78,12 +78,12 @@ export default {
     borderRadiusSM: 2,
     fontSize: 14,
     motion: true,
-    colorFill: 'rgb(0,0,0)',
+    colorFill: '#000',
-    colorFillTertiary: '#1D1E20',
+    // colorFillTertiary: '#1D1E20',
-    colorBgContainer: '#141414',
+    // colorBgContainer: '#141414',
-    colorBgBase: '#000',
+    colorBgBase: '#000'
-    colorBorder: '#353535',
+    // colorBorder: '#353535'
-    colorSplit: '#262626',
+    // colorSplit: '#262626',
-    colorBorderSecondary: '#262626'
+    // colorBorderSecondary: '#262626'
   }
 };

src/global.less

@@ -4,7 +4,7 @@
 @import url('./overrides.less');
 
 html {
-  --font-family: 'noto sans', sans-serif;
+  // --font-family: 'noto sans', sans-serif;
   // --ant-color-text-secondary: rgba(0, 0, 0, 65%);
   // --ant-color-text-tertiary: rgba(0, 0, 0, 45%);
   // --ant-color-text-quaternary: rgba(0, 0, 0, 25%);
@@ -21,7 +21,8 @@ html {
   --scrollbar-handle-hover-bg: rgba(0, 0, 0, 55%);
   --color-editor-dark: #282c34;
   --color-editor-light: #fafafa;
-  --color-scrollbar-track: var(--ant-color-fill-tertiary);
+  --color-scrollbar-track: #f4f5f4; // according to: --ant-color-fill-tertiary
+  --color-fill-sider: #f4f5f4;
   --color-bg-1: #f4f5f4;
   --color-scroll-bg: #d9d9d9;
   --color-fill-2: #fff;
@@ -40,7 +41,6 @@ html {
   --border-radius-mini: 4px;
   --border-radius-2px: 2px;
   --color-white-1: rgba(255, 255, 255, 100%);
-  --color-fill-sider: var(--ant-color-fill-tertiary);
   --font-weight-500: 500;
   --font-weight-normal: 400;
   --font-weight-medium: 600;
@@ -71,13 +71,13 @@ html {
   --ant-color-error: #ff4d4f;
   --ant-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 8%),
     0 3px 6px -4px rgba(0, 0, 0, 12%), 0 9px 28px 8px rgba(0, 0, 0, 5%);
-  --table-cell-padding-inline: var(--ant-table-cell-padding-inline);
+  // --table-cell-padding-inline: var(--ant-table-cell-padding-inline);
-  --table-cell-padding-block: var(--ant-table-cell-padding-block);
+  // --table-cell-padding-block: var(--ant-table-cell-padding-block);
-  --table-header-border-radius: var(--ant-table-header-border-radius);
+  // --table-header-border-radius: var(--ant-table-header-border-radius);
-  --table-header-split-color: var(--ant-table-header-split-color);
+  // --table-header-split-color: var(--ant-table-header-split-color);
-  --table-row-selected-bg: var(--ant-table-row-selected-bg);
+  // --table-row-selected-bg: var(--ant-table-row-selected-bg);
-  --table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
+  // --table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
-  --table-row-hover-bg: var(--ant-table-row-hover-bg);
+  // --table-row-hover-bg: var(--ant-table-row-hover-bg);
   --color-chart-red: rgba(255, 77, 79, 80%);
   --color-chart-green: rgb(84, 204, 152, 80%);
   --color-chart-glod: rgba(250, 173, 20, 80%);
@@ -107,12 +107,12 @@ html {
     --ant-font-size-lg: var(--font-size-base);
     --ant-font-size-xl: 20px;
     --ant-font-size: var(--font-size-base);
-    --ant-padding-sm: 14px;
+    // --ant-padding-sm: 14px;
-    --ant-border-radius-lg: 4px;
+    // --ant-border-radius-lg: 4px;
-    --ant-color-text: #000;
+    // --ant-color-text: #000;
-    --ant-color-error: #ff4d4f;
+    // --ant-color-error: #ff4d4f;
-    --ant-color-bg-mask: rgba(0, 0, 0, 35%);
+    // --ant-color-bg-mask: rgba(0, 0, 0, 35%);
-    --ant-color-border: rgb(217 217 217 / 100%);
+    // --ant-color-border: blue;
 
     &.ant-popover {
       --ant-popover-inner-padding: 26px;
@@ -157,7 +157,14 @@ html {
 }
 
 html[data-theme='realDark'] {
-  --color-white-1: #1d1e20;
+  --color-logs-bg: #141414;
+  --color-white-1: #141414;
+  --color-fill-sider: #1f1f1f;
+  --color-editor-dark: #141414;
+  --color-editor-light: #fafafa;
+  --color-fill-mask: rgba(255, 255, 255, 10%);
+
+  background: #141414;
 }
 
 body {
@@ -177,18 +184,6 @@ body {
       var(--ant-slider-track-hover-bg);
   }
 
-  .ant-select-selector {
-    .ant-select-selection-item {
-      font-weight: var(--font-weight-normal);
-    }
-  }
-
-  .ant-checkbox {
-    .ant-checkbox-inner {
-      border-radius: var(--checkbox-border-radius) !important;
-    }
-  }
-
   // table
   .ant-table-wrapper {
     .ant-table-selection-column {
@@ -330,11 +325,7 @@ body {
     }
 
     .ant-pro-sider .ant-layout-sider-children {
-      background-color: var(--ant-color-fill-tertiary);
+      background-color: var(--color-fill-sider);
-      // box-shadow:
-      //   0px 1px 2px 0px rgb(0 0 0 / 30%),
-      //   0px 2px 6px 2px rgb(0 0 0 / 15%);
-      // border-radius: 0 16px 16px 0;
     }
   }
 
@@ -393,7 +384,7 @@ body {
   .ant-pro-layout-container {
     overflow-x: auto;
     min-height: 100vh;
-    background: var(--ant-color-bg-container);
+    background-color: var(--ant-color-bg-container);
   }
 
   .ant-pro-sider {

src/hooks/use-user-settings.ts

@@ -3,7 +3,7 @@ import themeConfig from '@/config/theme';
 import { useAtom } from 'jotai';
 import { useEffect, useMemo } from 'react';
 
-type Theme = 'light' | 'realDark';
+type Theme = 'light' | 'realDark' | 'auto';
 
 export default function useUserSettings() {
   const { light, dark } = themeConfig;
@@ -35,6 +35,22 @@ export default function useUserSettings() {
     setHtmlThemeAttr(userSettings.theme);
   }, [userSettings.theme]);
 
+  // set theme by system theme: only for theme is auto
+  useEffect(() => {
+    if (userSettings.theme === 'auto') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      console.log('mediaQuery', mediaQuery);
+      const handleChange = (e: MediaQueryListEvent) => {
+        setTheme(e.matches ? 'realDark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      handleChange(mediaQuery);
+      return () => {
+        mediaQuery.removeEventListener('change', handleChange);
+      };
+    }
+  }, [userSettings.theme]);
+
   return {
     userSettings,
     setUserSettings,

src/layouts/index.tsx

@@ -27,7 +27,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
-import { Button, ConfigProvider, Modal } from 'antd';
+import { Button, ConfigProvider, Modal, theme } from 'antd';
 import 'driver.js/dist/driver.css';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -99,7 +99,7 @@ export default (props: any) => {
   const { initialize: initialize } = useOverlayScroller({
     defer: false
   });
-  const { themeData, setTheme, userSettings } = useUserSettings();
+  const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
@@ -406,7 +406,13 @@ export default (props: any) => {
   };
 
   return (
-    <ConfigProvider componentSize="large" theme={themeData}>
+    <ConfigProvider
+      componentSize="large"
+      theme={{
+        algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+        ...themeData
+      }}
+    >
       <ProLayout
         route={route}
         location={location}

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
+      <SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
-        style={{
-          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>
   );
 };
 

src/pages/llmodels/style/catalog-item.less

@@ -34,11 +34,11 @@
   }
 
   &:hover {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   &.active {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   .title {

src/pages/llmodels/style/column-wrapper.less

@@ -26,6 +26,6 @@
     right: 0;
     z-index: 100;
     padding-block: 0;
-    background-color: var(--color-white-1);
+    background-color: var(--ant-color-bg-elevated);
   }
 }

src/pages/llmodels/style/data-form.less

@@ -11,7 +11,7 @@
       font-weight: var(--font-weight-bold) !important;
 
       &:hover {
-        background-color: var(--color-fill-sider) !important;
+        background-color: var(--ant-color-fill-tertiary) !important;
       }
     }
 

src/pages/llmodels/style/hf-model-file.less

@@ -8,13 +8,14 @@
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   cursor: pointer;
+  background-color: var(--ant-color-bg-container);
 
   &:hover {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   &.active {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   .tags {

src/pages/llmodels/style/hf-model-item.less

@@ -7,13 +7,14 @@
   border-radius: var(--border-radius-base);
   padding: 12px 14px;
   cursor: pointer;
+  background-color: var(--ant-color-bg-container);
 
   &:hover {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   &.active {
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
   }
 
   .title {

src/pages/llmodels/style/model-card.less

@@ -27,7 +27,7 @@
 
   .mkd-title {
     cursor: pointer;
-    background-color: var(--color-fill-sider);
+    background-color: var(--ant-color-fill-tertiary);
     border-bottom: 1px solid rgba(255, 255, 255, 10%);
     display: flex;
     justify-content: space-between;

src/pages/llmodels/style/search-result.less

@@ -1,7 +1,6 @@
 @padding: 24px;
 
 .search-result-wrap {
-  background-color: rgba(255, 255, 255, 100%);
   padding: 16px @padding;
   border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
 }

src/pages/playground/components/view-code-modal.tsx

@@ -113,8 +113,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     return '';
   }, [lang, payload, parameters, api, clientType, logcommand]);
 
-  const handleOnChangeLang = (value: string) => {
+  const handleOnChangeLang = (value: string | number) => {
-    setLang(value);
+    setLang(value as string);
   };
 
   const handleClose = () => {
@@ -152,20 +152,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <div
+            <HighlightCode
-              style={{
+              height={380}
-                paddingRight: 2,
+              theme="dark"
-                paddingBottom: 2
+              code={codeValue}
-              }}
+              lang={lang}
-            >
+              copyable={false}
-              <HighlightCode
+            ></HighlightCode>
-                height={380}
-                theme="dark"
-                code={codeValue}
-                lang={lang}
-                copyable={false}
-              ></HighlightCode>
-            </div>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}

src/pages/playground/components/view-common-code.tsx

@@ -86,20 +86,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <div
+            <HighlightCode
-              style={{
+              height={380}
-                paddingRight: 2,
+              theme="dark"
-                paddingBottom: 2
+              code={codeValue}
-              }}
+              lang={lang}
-            >
+              copyable={false}
-              <HighlightCode
+            ></HighlightCode>
-                height={380}
-                theme="dark"
-                code={codeValue}
-                lang={lang}
-                copyable={false}
-              ></HighlightCode>
-            </div>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}

src/pages/playground/style/message-input.less

@@ -80,11 +80,17 @@
     width: 100%;
     display: flex;
     position: relative;
+    background-color: var(--ant-color-bg-elevated);
+    border-radius: var(--border-radius-base);
+
+    textarea {
+      padding-block-start: var(--ant-padding-xxs);
+    }
 
     .holder {
       pointer-events: none;
       position: absolute;
-      top: 0;
+      top: var(--ant-padding-xxs);
       left: 6px;
       color: var(--ant-color-text-quaternary);
 

src/pages/resources/components/styles/installation.less

@@ -7,7 +7,7 @@
     border-left: 2px solid var(--ant-color-split);
     margin-bottom: 16px;
     padding-left: 16px;
-    background: var(--color-fill-sider);
+    background: var(--ant-color-fill-tertiary);
     border-radius: 2px;
     list-style-type: decimal;
 
@@ -23,6 +23,7 @@
   .ant-radio-button-wrapper {
     flex: auto;
     font-size: var(--font-size-small);
+    background-color: var(--ant-tabs-card-bg);
   }
 }
 

src/pages/resources/components/update-labels.tsx

@@ -2,11 +2,11 @@ import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
+import SimpleOverlay from '@/components/simple-overlay';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 
 type ViewModalProps = {
@@ -67,7 +67,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }
     >
-      <SimpleBar
+      <SimpleOverlay
         style={{
           maxHeight: '550px'
         }}
@@ -131,7 +131,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
             ></LabelSelector>
           </Form.Item>
         </Form>
-      </SimpleBar>
+      </SimpleOverlay>
     </ScrollerModal>
   );
 };