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/dynamic-form.tsx

@@ -11,6 +11,7 @@ import {
   DefaultValues,
   FieldValues,
   SubmitHandler,
+  UseFormTrigger,
   useForm,
   useFormContext,
 } from 'react-hook-form';
@@ -99,8 +100,9 @@ interface DynamicFormProps<T extends FieldValues> {
 // Form ref interface
 export interface DynamicFormRef {
   submit: () => void;
-  getValues: () => any;
+  getValues: (name?: string) => any;
   reset: (values?: any) => void;
+  trigger: UseFormTrigger<any>;
   watch: (field: string, callback: (value: any) => void) => () => void;
   updateFieldType: (fieldName: string, newType: FormFieldType) => void;
   onFieldUpdate: (
@@ -704,8 +706,8 @@ const DynamicForm = {
       useImperativeHandle(
         ref,
         () => ({
-          submit: () => form.handleSubmit(onSubmit)(),
-          getValues: () => form.getValues(),
+          submit: form.handleSubmit,
+          getValues: form.getValues,
           reset: (values?: T) => {
             if (values) {
               form.reset(values);

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>

web/src/components/ui/modal/modal.tsx

@@ -174,20 +174,23 @@ const Modal: ModalType = ({
           onClick={() => maskClosable && onOpenChange?.(false)}
         >
           <DialogPrimitive.Content
-            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-bg-base rounded-lg shadow-lg border border-border-default transition-all focus-visible:!outline-none`}
+            className={cn(
+              `relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-bg-base rounded-lg shadow-lg border border-border-default transition-all focus-visible:!outline-none`,
+              { 'pt-10': closable && !title },
+            )}
             style={style}
             onClick={(e) => e.stopPropagation()}
           >
             {/* title */}
-            {(title || closable) && (
+            {title && (
               <div
                 className={cn(
-                  'flex items-start px-6 py-4',
-                  {
-                    'justify-end': closable && !title,
-                    'justify-between': closable && title,
-                    'justify-start': !closable,
-                  },
+                  'flex items-start px-6 py-4 justify-start',
+                  // {
+                  //   'justify-end': closable && !title,
+                  //   'justify-between': closable && title,
+                  //   'justify-start': !closable,
+                  // },
                   titleClassName,
                 )}
               >
@@ -196,19 +199,19 @@ const Modal: ModalType = ({
                     {title}
                   </DialogPrimitive.Title>
                 )}
-                {closable && (
-                  <DialogPrimitive.Close asChild>
-                    <button
-                      type="button"
-                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:text-text-primary focus-visible:outline-none"
-                      onClick={handleCancel}
-                    >
-                      {closeIcon}
-                    </button>
-                  </DialogPrimitive.Close>
-                )}
               </div>
             )}
+            {closable && (
+              <DialogPrimitive.Close asChild>
+                <button
+                  type="button"
+                  className="flex absolute right-5 top-5 h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:text-text-primary focus-visible:outline-none"
+                  onClick={handleCancel}
+                >
+                  {closeIcon}
+                </button>
+              </DialogPrimitive.Close>
+            )}
 
             {/* content */}
             <div className="py-2 px-6 overflow-y-auto scrollbar-auto max-h-[calc(100vh-280px)] focus-visible:!outline-none">