refactor(ui): adjust dataset page styles (#13452)

### What problem does this PR solve?

- Adjust UI styles in **Dataset** pages.
- Adjust several shared components styles
- Modify files and directory structure in `src/layouts`

### Type of change

- [x] Refactoring

web/src/components/chunk-method-dialog/dynamic-page-range.tsx

@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Plus, X } from 'lucide-react';
+import { LucidePlus, LucideTrash2 } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Separator } from '../ui/separator';
@@ -51,7 +51,9 @@ export function DynamicPageRange() {
                 </FormItem>
               )}
             />
+
             <Separator className="w-3 "></Separator>
+
             <FormField
               control={form.control}
               name={`parser_config.pages.${index}.to`}
@@ -70,19 +72,27 @@ export function DynamicPageRange() {
                 </FormItem>
               )}
             />
-            <Button variant={'ghost'} onClick={() => remove(index)}>
-              <X />
+
+            <Button
+              className="ml-4"
+              size="icon"
+              variant="outline"
+              onClick={() => remove(index)}
+            >
+              <LucideTrash2 />
             </Button>
           </div>
         );
       })}
+
       <Button
         onClick={() => append({ from: 1, to: 100 })}
-        className="mt-4 border-dashed w-full"
-        variant={'outline'}
+        block
+        className="mt-4"
+        variant="dashed"
         type="button"
       >
-        <Plus />
+        <LucidePlus />
         {t('knowledgeDetails.addPage')}
       </Button>
     </div>

web/src/components/chunk-method-dialog/index.tsx

@@ -42,7 +42,6 @@ import { DataFlowSelect } from '../data-pipeline-select';
 import { DelimiterFormField } from '../delimiter-form-field';
 import { EntityTypesFormField } from '../entity-types-form-field';
 import { ExcelToHtmlFormField } from '../excel-to-html-form-field';
-import { FormContainer } from '../form-container';
 import { LayoutRecognizeFormField } from '../layout-recognize-form-field';
 import { MaxTokenNumberFormField } from '../max-token-number-from-field';
 import { MinerUOptionsFormField } from '../mineru-options-form-field';
@@ -293,22 +292,16 @@ export function ChunkMethodDialog({
         <DialogHeader>
           <DialogTitle>{t('knowledgeDetails.chunkMethod')}</DialogTitle>
         </DialogHeader>
+
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6 max-h-[70vh] overflow-auto"
+            className="space-y-6 max-h-[70vh] overflow-auto -mx-6 px-10 py-5"
             id={FormId}
           >
-            <FormContainer>
+            <div className="space-y-6">
               <ParseTypeItem />
-              {parseType === 1 && <ChunkMethodItem></ChunkMethodItem>}
-              {parseType === 2 && (
-                <DataFlowSelect
-                  isMult={false}
-                  // toDataPipeline={navigateToAgents}
-                  formFieldName="pipeline_id"
-                />
-              )}
+              {parseType === 1 && <ChunkMethodItem />}
 
               {/* <FormField
                 control={form.control}
@@ -326,9 +319,9 @@ export function ChunkMethodDialog({
                   </FormItem>
                 )}
               /> */}
-              {showPages && parseType === 1 && (
-                <DynamicPageRange></DynamicPageRange>
-              )}
+
+              {showPages && parseType === 1 && <DynamicPageRange />}
+
               {showPages && parseType === 1 && layoutRecognize && (
                 <FormField
                   control={form.control}
@@ -341,31 +334,25 @@ export function ChunkMethodDialog({
                         {t('knowledgeDetails.taskPageSize')}
                       </FormLabel>
                       <FormControl>
-                        <Input
-                          {...field}
-                          type={'number'}
-                          min={1}
-                          max={128}
-                        ></Input>
+                        <Input {...field} type={'number'} min={1} max={128} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               )}
-            </FormContainer>
+            </div>
+
             {parseType === 1 && (
               <>
-                <FormContainer
-                  show={showOne || showMaxTokenNumber}
-                  className="space-y-3"
-                >
+                <div className="space-y-6 border-t-0.5 border-border-button pt-6 empty:hidden">
                   {showOne && (
                     <>
                       <LayoutRecognizeFormField showMineruOptions={false} />
                       {isMineruSelected && <MinerUOptionsFormField />}
                     </>
                   )}
+
                   {showMaxTokenNumber && (
                     <>
                       <MaxTokenNumberFormField
@@ -374,26 +361,21 @@ export function ChunkMethodDialog({
                             ? 8192 * 2
                             : 2048
                         }
-                      ></MaxTokenNumberFormField>
-                      <DelimiterFormField></DelimiterFormField>
+                      />
+                      <DelimiterFormField />
                       <ChildrenDelimiterForm />
                     </>
                   )}
-                </FormContainer>
-                <FormContainer
-                  show={
-                    isMineruSelected ||
-                    showAutoKeywords(selectedTag) ||
-                    showExcelToHtml
-                  }
-                  className="space-y-3"
-                >
+                </div>
+
+                <div className="space-y-6 border-t-0.5 border-border-button pt-6 empty:hidden">
                   {selectedTag === DocumentParserType.Naive && (
                     <>
                       <EnableTocToggle />
                       <ImageContextWindow />
                     </>
                   )}
+
                   {showAutoKeywords(selectedTag) && (
                     <>
                       <AutoMetadata
@@ -404,28 +386,39 @@ export function ChunkMethodDialog({
                       <AutoQuestionsFormField></AutoQuestionsFormField>
                     </>
                   )}
+
                   {showExcelToHtml && (
                     <ExcelToHtmlFormField></ExcelToHtmlFormField>
                   )}
-                </FormContainer>
+                </div>
                 {/* {showRaptorParseConfiguration(
-                  selectedTag as DocumentParserType,
-                ) && (
-                  <FormContainer>
-                    <RaptorFormFields></RaptorFormFields>
-                  </FormContainer>
-                )} */}
-                {/* {showGraphRagItems(selectedTag as DocumentParserType) &&
-                  useGraphRag && (
+                    selectedTag as DocumentParserType,
+                  ) && (
                     <FormContainer>
-                      <UseGraphRagFormField></UseGraphRagFormField>
+                      <RaptorFormFields></RaptorFormFields>
                     </FormContainer>
                   )} */}
-                {showEntityTypes && (
-                  <EntityTypesFormField></EntityTypesFormField>
-                )}
+                {/* {showGraphRagItems(selectedTag as DocumentParserType) &&
+                    useGraphRag && (
+                      <FormContainer>
+                        <UseGraphRagFormField></UseGraphRagFormField>
+                      </FormContainer>
+                    )} */}
+                <div className="space-y-6 border-t-0.5 border-border-button pt-6 empty:hidden">
+                  {showEntityTypes && <EntityTypesFormField />}
+                </div>
               </>
             )}
+
+            <div className="space-y-6 empty:hidden">
+              {parseType === 2 && (
+                <DataFlowSelect
+                  isMult={false}
+                  // toDataPipeline={navigateToAgents}
+                  formFieldName="pipeline_id"
+                />
+              )}
+            </div>
           </form>
         </Form>
         <DialogFooter>