Fix: Component optimization

- Enhanced form reference interface functionality and optimized implementation
- Optimized modal title area layout and close button position

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)(),
+          submit: form.handleSubmit,
-          getValues: () => form.getValues(),
+          getValues: form.getValues,
           reset: (values?: T) => {
             if (values) {
               form.reset(values);

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',
+                  'flex items-start px-6 py-4 justify-start',
-                  {
+                  // {
-                    'justify-end': closable && !title,
+                  //   'justify-end': closable && !title,
-                    'justify-between': closable && title,
+                  //   'justify-between': closable && title,
-                    'justify-start': !closable,
+                  //   '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">