style: slider handle color

src/assets/styles/menu.less

@@ -21,3 +21,11 @@
     }
   }
 }
+
+// slider styles
+
+.ant-slider .ant-slider-handle:hover::after,
+.ant-slider .ant-slider-handle:active::after,
+.ant-slider .ant-slider-handle:focus::after {
+  outline-width: 3px;
+}

src/components/seal-form/seal-slider.tsx

@@ -89,6 +89,17 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
           style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
           tooltip={tooltip}
           value={value}
+          styles={{
+            rail: {
+              borderRadius: 3
+            },
+            track: {
+              borderRadius: 3
+            },
+            tracks: {
+              borderRadius: 3
+            }
+          }}
           onChange={handleChange}
         ></Slider>
       </Wrapper>

src/config/theme/dark.ts

@@ -72,14 +72,15 @@ export default {
       optionSelectedFontWeight: 400
     },
     Slider: {
-      handleSize: 8,
-      handleSizeHover: 8,
+      handleSize: 10,
+      handleSizeHover: 10,
+      railSize: 5,
+      handleActiveOutlineColor: '#646464', // disable default outline
+      handleActiveColor: '#656565', // same as the rail color
+      handleColor: '#474747', // same as the rail color
       trackBg: 'rgba(255,255,255,.15)',
-      handleColor: 'rgba(255,255,255,0.2)',
-      trackHoverBg: 'rgba(255,255,255,0.25)',
-      handleActiveColor: 'rgba(255,255,255,0.3)',
+      trackHoverBg: '#646464',
       dotActiveBorderColor: 'rgba(255,255,255,0.25)',
-      handleActiveOutlineColor: 'rgba(255,255,255,0.25)',
       dotBorderColor: 'rgba(255,255,255,0.25)'
     }
   },

src/config/theme/light.ts

@@ -70,14 +70,16 @@ export default {
       optionSelectedFontWeight: 400
     },
     Slider: {
-      handleSize: 8,
-      handleSizeHover: 8,
+      handleSize: 10,
+      handleSizeHover: 10,
+      railSize: 5,
+      handleActiveOutlineColor: '#B4B4B4', // disable default outline
+      handleActiveColor: '#D0D0D0', // same as the rail color
+      handleColor: '#D0D0D0', // same as the rail color
+      handleHoverColor: '#B4B4B4', // same as the rail hover color
       trackBg: 'rgba(0,0,0,0.15)',
-      handleColor: 'rgba(0,0,0,0.2)',
-      trackHoverBg: 'rgba(0,0,0,0.25)',
-      handleActiveColor: 'rgba(0,0,0,0.3)',
+      trackHoverBg: '#B4B4B4',
       dotActiveBorderColor: 'rgba(0,0,0,0.25)',
-      handleActiveOutlineColor: 'rgba(0,0,0,0.25)',
       dotBorderColor: 'rgba(0,0,0,0.25)'
     }
   },

src/layouts/index.tsx

@@ -325,6 +325,16 @@ export default (props: any) => {
           : theme.defaultAlgorithm,
         ...themeData
       }}
+      modal={{
+        mask: {
+          blur: false
+        }
+      }}
+      drawer={{
+        mask: {
+          blur: false
+        }
+      }}
     >
       <DarkMask></DarkMask>
       <ProLayout

src/pages/llmodels/config/types.ts

@@ -92,6 +92,7 @@ export interface FormData {
     ngram_min_match_length: number;
     ngram_max_match_length: number;
   };
+  max_context_len: number;
 }
 
 interface ComputedResourceClaim {

src/pages/llmodels/forms/advance-config.tsx

@@ -1,6 +1,7 @@
 import LabelSelector from '@/components/label-selector';
 import CheckboxField from '@/components/seal-form/checkbox-field';
 import SealSelect from '@/components/seal-form/seal-select';
+import SealSlider from '@/components/seal-form/seal-slider';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -62,6 +63,9 @@ const AdvanceConfig = () => {
           options={modelCategories}
         ></SealSelect>
       </Form.Item>
+      <Form.Item<FormData> name="max_context_len">
+        <SealSlider label="Max Context Length" inputnumber></SealSlider>
+      </Form.Item>
 
       <BackendParametersList></BackendParametersList>
       <Form.Item<FormData> name="env">