refactor(ui): adjust global navigation bar style (#13419)

### What problem does this PR solve?

Renovate global navigation bar, align styles to the design.
(May causes minor layout issues in sub-pages, will check and fix soon)

### Type of change

- [x] Refactoring

web/src/pages/dataset/dataset-setting/index.tsx

@@ -2,6 +2,13 @@ import { DataFlowSelect } from '@/components/data-pipeline-select';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
 import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import Divider from '@/components/ui/divider';
 import { Form } from '@/components/ui/form';
 import { FormLayout } from '@/constants/form';
@@ -15,7 +22,6 @@ import { createContext, useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { TopTitle } from '../dataset-title';
 import {
   GenerateType,
   IGenerateLogButtonProps,
@@ -258,98 +264,113 @@ export default function DatasetSettings() {
   };
 
   return (
-    <section className="p-5 h-full flex flex-col">
-      <TopTitle
-        title={t('knowledgeDetails.configuration')}
-        description={t('knowledgeConfiguration.titleDescription')}
-      ></TopTitle>
-      <div className="flex gap-14 flex-1 min-h-0">
-        <DataSetContext.Provider
-          value={{
-            loading: datasetSettingLoading,
-            knowledgeDetails: knowledgeDetails,
-          }}
-        >
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 ">
-              <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
-                <MainContainer className="text-text-secondary">
-                  <div className="text-base font-medium text-text-primary">
-                    {t('knowledgeConfiguration.baseInfo')}
-                  </div>
-                  <GeneralForm></GeneralForm>
+    <div className="pr-5 pb-5">
+      <Card className="p-0 h-full flex flex-col bg-transparent shadow-none">
+        <CardHeader className="p-5 border-b-0.5 border-border-button">
+          <header>
+            <CardTitle as="h1">{t('knowledgeDetails.configuration')}</CardTitle>
 
-                  <Divider />
-                  <div className="text-base font-medium text-text-primary">
-                    {t('knowledgeConfiguration.dataPipeline')}
-                  </div>
-                  <ParseTypeItem line={1} />
-                  {parseType === 1 && (
-                    <ChunkMethodItem line={1}></ChunkMethodItem>
-                  )}
-                  {parseType === 2 && (
-                    <DataFlowSelect
-                      isMult={false}
-                      showToDataPipeline={true}
-                      formFieldName="pipeline_id"
-                      layout={FormLayout.Horizontal}
-                    />
-                  )}
+            <CardDescription>
+              {t('knowledgeConfiguration.titleDescription')}
+            </CardDescription>
 
-                  {/* <Divider /> */}
-                  {parseType === 1 && <ChunkMethodForm />}
+            {/* <Button>Save as Preset</Button> */}
+          </header>
+        </CardHeader>
 
-                  {/* <LinkDataPipeline
-                  data={pipelineData}
-                  handleLinkOrEditSubmit={handleLinkOrEditSubmit}
-                /> */}
-                  <Divider />
-                  <LinkDataSource
-                    data={sourceData}
+        <CardContent className="p-0 flex-1 h-0 flex divide-x-0.5">
+          <DataSetContext.Provider
+            value={{
+              loading: datasetSettingLoading,
+              knowledgeDetails: knowledgeDetails,
+            }}
+          >
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="flex flex-col"
+              >
+                <div className="flex-1 h-0 w-[768px] px-5 pt-5 overflow-y-auto scrollbar-auto">
+                  <MainContainer className="text-text-secondary">
+                    <div className="text-base font-medium text-text-primary">
+                      {t('knowledgeConfiguration.baseInfo')}
+                    </div>
+                    <GeneralForm></GeneralForm>
+
+                    <Divider />
+                    <div className="text-base font-medium text-text-primary">
+                      {t('knowledgeConfiguration.dataPipeline')}
+                    </div>
+                    <ParseTypeItem line={1} />
+                    {parseType === 1 && (
+                      <ChunkMethodItem line={1}></ChunkMethodItem>
+                    )}
+                    {parseType === 2 && (
+                      <DataFlowSelect
+                        isMult={false}
+                        showToDataPipeline={true}
+                        formFieldName="pipeline_id"
+                        layout={FormLayout.Horizontal}
+                      />
+                    )}
+
+                    {/* <Divider /> */}
+                    {parseType === 1 && <ChunkMethodForm />}
+
+                    {/* <LinkDataPipeline
+                    data={pipelineData}
                     handleLinkOrEditSubmit={handleLinkOrEditSubmit}
-                    unbindFunc={unbindFunc}
-                    handleAutoParse={handleAutoParse}
-                  />
-                  <Divider />
-                  <div className="text-base font-medium text-text-primary">
-                    {t('knowledgeConfiguration.globalIndex')}
-                  </div>
-                  <GraphRagItems
-                    className="border-none p-0"
-                    data={graphRagGenerateData as IGenerateLogButtonProps}
-                    onDelete={() =>
-                      handleDeletePipelineTask(GenerateType.KnowledgeGraph)
-                    }
-                  ></GraphRagItems>
-                  <Divider />
-                  <RaptorFormFields
-                    data={raptorGenerateData as IGenerateLogButtonProps}
-                    onDelete={() =>
-                      handleDeletePipelineTask(GenerateType.Raptor)
-                    }
-                  ></RaptorFormFields>
-                </MainContainer>
-              </div>
-              <div className="text-right items-center flex justify-end gap-3 w-[768px]">
-                <Button
-                  type="reset"
-                  className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
-                  data-testid="ds-settings-page-cancel-btn"
-                  onClick={() => {
-                    form.reset();
-                  }}
-                >
-                  {t('knowledgeConfiguration.cancel')}
-                </Button>
-                <SavingButton></SavingButton>
-              </div>
-            </form>
-          </Form>
-          <div className="flex-1">
+                  /> */}
+                    <Divider />
+                    <LinkDataSource
+                      data={sourceData}
+                      handleLinkOrEditSubmit={handleLinkOrEditSubmit}
+                      unbindFunc={unbindFunc}
+                      handleAutoParse={handleAutoParse}
+                    />
+                    <Divider />
+                    <div className="text-base font-medium text-text-primary">
+                      {t('knowledgeConfiguration.globalIndex')}
+                    </div>
+                    <GraphRagItems
+                      className="border-none p-0"
+                      data={graphRagGenerateData as IGenerateLogButtonProps}
+                      onDelete={() =>
+                        handleDeletePipelineTask(GenerateType.KnowledgeGraph)
+                      }
+                    ></GraphRagItems>
+                    <Divider />
+                    <RaptorFormFields
+                      data={raptorGenerateData as IGenerateLogButtonProps}
+                      onDelete={() =>
+                        handleDeletePipelineTask(GenerateType.Raptor)
+                      }
+                    ></RaptorFormFields>
+                  </MainContainer>
+                </div>
+
+                <div className="p-5 text-right items-center flex justify-end gap-3 w-[768px]">
+                  <Button
+                    type="reset"
+                    variant="transparent"
+                    onClick={() => {
+                      form.reset();
+                    }}
+                  >
+                    {t('knowledgeConfiguration.cancel')}
+                  </Button>
+
+                  <SavingButton />
+                </div>
+              </form>
+            </Form>
+          </DataSetContext.Provider>
+
+          <div className="flex-1 p-5 overflow-auto">
             {parseType === 1 && <ChunkMethodLearnMore parserId={selectedTag} />}
           </div>
-        </DataSetContext.Provider>
-      </div>
-    </section>
+        </CardContent>
+      </Card>
+    </div>
   );
 }