From d8b333164863628106e424534651c1a2bf151b4d Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Sun, 4 Jan 2026 11:52:31 +0800
Subject: [PATCH] style: slider handle color

---
 src/assets/styles/menu.less                 |  8 ++++++++
 src/components/seal-form/seal-slider.tsx    | 11 +++++++++++
 src/config/theme/dark.ts                    | 13 +++++++------
 src/config/theme/light.ts                   | 14 ++++++++------
 src/layouts/index.tsx                       | 10 ++++++++++
 src/pages/llmodels/config/types.ts          |  1 +
 src/pages/llmodels/forms/advance-config.tsx |  4 ++++
 7 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/assets/styles/menu.less b/src/assets/styles/menu.less
index d3081ce3..a6f1f190 100644
--- a/src/assets/styles/menu.less
+++ b/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;
+}
diff --git a/src/components/seal-form/seal-slider.tsx b/src/components/seal-form/seal-slider.tsx
index c8c5733c..c605e6b0 100644
--- a/src/components/seal-form/seal-slider.tsx
+++ b/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>
diff --git a/src/config/theme/dark.ts b/src/config/theme/dark.ts
index dcc88897..7c7137b4 100644
--- a/src/config/theme/dark.ts
+++ b/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)'
     }
   },
diff --git a/src/config/theme/light.ts b/src/config/theme/light.ts
index 62087b4e..66773c2f 100644
--- a/src/config/theme/light.ts
+++ b/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)'
     }
   },
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 8b723785..3608edc4 100644
--- a/src/layouts/index.tsx
+++ b/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
diff --git a/src/pages/llmodels/config/types.ts b/src/pages/llmodels/config/types.ts
index da9a6e3c..0cdd8ce0 100644
--- a/src/pages/llmodels/config/types.ts
+++ b/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 {
diff --git a/src/pages/llmodels/forms/advance-config.tsx b/src/pages/llmodels/forms/advance-config.tsx
index e5791634..4d8b3f7d 100644
--- a/src/pages/llmodels/forms/advance-config.tsx
+++ b/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">