feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

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

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

@@ -0,0 +1,88 @@
+import { Form } from '@/components/ui/form';
+import { DocumentParserType } from '@/constants/knowledge';
+import { PermissionRole } from '@/constants/permission';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { TopTitle } from '../dataset-title';
+import { ChunkMethodForm } from './chunk-method-form';
+import { formSchema } from './form-schema';
+import { GeneralForm } from './general-form';
+import { useFetchKnowledgeConfigurationOnMount } from './hooks';
+
+const enum DocumentType {
+  DeepDOC = 'DeepDOC',
+  PlainText = 'Plain Text',
+}
+
+const initialEntityTypes = [
+  'organization',
+  'person',
+  'geo',
+  'event',
+  'category',
+];
+
+const enum MethodValue {
+  General = 'general',
+  Light = 'light',
+}
+
+export default function DatasetSettings() {
+  const { t } = useTranslation();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      parser_id: DocumentParserType.Naive,
+      permission: PermissionRole.Me,
+      parser_config: {
+        layout_recognize: DocumentType.DeepDOC,
+        chunk_token_num: 512,
+        delimiter: `\n`,
+        auto_keywords: 0,
+        auto_questions: 0,
+        html4excel: false,
+        topn_tags: 3,
+        raptor: {
+          use_raptor: false,
+        },
+        graphrag: {
+          use_graphrag: false,
+          entity_types: initialEntityTypes,
+          method: MethodValue.Light,
+        },
+      },
+      pagerank: 0,
+    },
+  });
+
+  useFetchKnowledgeConfigurationOnMount(form);
+
+  async function onSubmit(data: z.infer<typeof formSchema>) {
+    console.log('🚀 ~ DatasetSettings ~ data:', data);
+  }
+
+  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">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-6 flex-1"
+          >
+            <div className="w-[768px]">
+              <GeneralForm></GeneralForm>
+              <ChunkMethodForm></ChunkMethodForm>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </section>
+  );
+}