Refactor: Datasets UI #3221 (#8349)

### What problem does this PR solve?

Refactor Datasets UI #3221.
### Type of change

- [X] New Feature (non-breaking change which adds functionality)

web/src/components/layout-recognize-form-field.tsx

@@ -54,17 +54,37 @@ export function LayoutRecognizeFormField() {
     <FormField
       control={form.control}
       name="parser_config.layout_recognize"
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('layoutRecognizeTip')}>
-            {t('layoutRecognize')}
-          </FormLabel>
-          <FormControl>
-            <RAGFlowSelect {...field} options={options}></RAGFlowSelect>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
+      render={({ field }) => {
+        if (typeof field.value === 'undefined') {
+          // default value set
+          form.setValue(
+            'parser_config.layout_recognize',
+            form.formState.defaultValues?.parser_config?.layout_recognize ??
+              'DeepDOC',
+          );
+        }
+        return (
+          <FormItem className=" items-center space-y-0 ">
+            <div className="flex items-center">
+              <FormLabel
+                tooltip={t('layoutRecognizeTip')}
+                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              >
+                {t('layoutRecognize')}
+              </FormLabel>
+              <div className="w-3/4">
+                <FormControl>
+                  <RAGFlowSelect {...field} options={options}></RAGFlowSelect>
+                </FormControl>
+              </div>
+            </div>
+            <div className="flex pt-1">
+              <div className="w-1/4"></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        );
+      }}
     />
   );
 }