Fix: Bug fixes (#11960)

### What problem does this PR solve?

Fix: Bug fixes

New search popup style modification
Fixed multilingual settings not updating immediately on personal center
page
Changed overlapped percent to percentage format, with maximum value of
30%
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/slider-input-form-field.tsx

@@ -26,6 +26,7 @@ type SliderInputFormFieldProps = {
   defaultValue?: number;
   className?: string;
   numberInputClassName?: string;
+  percentage?: boolean;
 } & FormLayoutType;
 
 export function SliderInputFormField({
@@ -39,11 +40,14 @@ export function SliderInputFormField({
   className,
   numberInputClassName,
   layout = FormLayout.Horizontal,
+  percentage = false,
 }: SliderInputFormFieldProps) {
   const form = useFormContext();
 
   const isHorizontal = useMemo(() => layout !== FormLayout.Vertical, [layout]);
-
+  const displayMax = percentage ? (max || 1) * 100 : max;
+  const displayMin = percentage ? (min || 0) * 100 : min;
+  const displayStep = percentage ? (step || 0.01) * 100 : step;
   return (
     <FormField
       control={form.control}
@@ -71,12 +75,13 @@ export function SliderInputFormField({
             <FormControl>
               <SingleFormSlider
                 {...field}
-                max={max}
-                min={min}
-                step={step}
-                // defaultValue={
-                //   typeof defaultValue === 'number' ? [defaultValue] : undefined
-                // }
+                value={percentage ? field.value * 100 : field.value}
+                onChange={(value) =>
+                  field.onChange(percentage ? value / 100 : value)
+                }
+                max={displayMax}
+                min={displayMin}
+                step={displayStep}
               ></SingleFormSlider>
             </FormControl>
             <FormControl>
@@ -86,11 +91,20 @@ export function SliderInputFormField({
                   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                   numberInputClassName,
                 )}
-                max={max}
-                min={min}
-                step={step}
-                {...field}
-                // defaultValue={defaultValue}
+                max={displayMax}
+                min={displayMin}
+                step={displayStep}
+                value={
+                  percentage ? (field.value * 100).toFixed(0) : field.value
+                }
+                onChange={(val) => {
+                  const value = Number(val || 0);
+                  if (!isNaN(value)) {
+                    field.onChange(
+                      percentage ? (value / 100).toFixed(0) : value,
+                    );
+                  }
+                }}
               ></NumberInput>
             </FormControl>
           </div>