Refactor: UmiJs -> Vite (#12410)

### What problem does this PR solve?

Refactor: UmiJs -> Vite+React

### Type of change

- [x] Refactoring

---------

Co-authored-by: Liu An <asiro@qq.com>

web/src/pages/dataset/components/metedata/hooks/use-manage-modal.ts

@@ -12,7 +12,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { TFunction } from 'i18next';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import {
   IMetaDataReturnJSONSettings,
   IMetaDataReturnJSONType,

web/src/pages/dataset/components/metedata/manage-modal.tsx

@@ -341,7 +341,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
               <div>{t('knowledgeDetails.metadata.metadata')}</div>
-              {metadataType === MetadataType.Manage && false && (
+              {metadataType === MetadataType.Manage && (
                 <Button
                   variant={'ghost'}
                   className="border border-border-button"

web/src/pages/dataset/dataset-overview/hook.ts

@@ -9,7 +9,7 @@ import kbService, {
 } from '@/services/knowledge-service';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { LogTabs } from './dataset-common';
 import { IFileLogList, IOverviewTotal } from './interface';
 

web/src/pages/dataset/dataset-overview/overview-table.tsx

@@ -42,7 +42,7 @@ import {
 import { TFunction } from 'i18next';
 import { ArrowUpDown, ClipboardList, Eye, MonitorUp } from 'lucide-react';
 import { FC, useMemo, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { RunningStatus } from '../dataset/constant';
 import ProcessLogModal from '../process-log-modal';
 import { LogTabs, ProcessingType, ProcessingTypeMap } from './dataset-common';

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -23,6 +23,7 @@ import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/use-llm-request';
 import { cn } from '@/lib/utils';
+import { history } from '@/utils/simple-history-util';
 import { t } from 'i18next';
 import { Settings } from 'lucide-react';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -31,7 +32,7 @@ import {
   FieldValues,
   useFormContext,
 } from 'react-hook-form';
-import { history, useLocation } from 'umi';
+import { useLocation } from 'react-router';
 import { DataSetContext } from '..';
 import {
   MetadataType,

web/src/pages/dataset/dataset-setting/hooks.ts

@@ -9,7 +9,7 @@ import { useIsFetching } from '@tanstack/react-query';
 import { pick } from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { z } from 'zod';
 import { formSchema } from './form-schema';
 

web/src/pages/dataset/dataset-setting/permission-form-field.tsx

@@ -14,18 +14,16 @@ export function PermissionFormField() {
   }, [t]);
 
   return (
-    <div className="items-center">
-      <RAGFlowFormItem
-        name="permission"
-        label={t('knowledgeConfiguration.permissions')}
-        tooltip={t('knowledgeConfiguration.permissionsTip')}
-        horizontal={true}
-      >
-        <SelectWithSearch
-          options={teamOptions}
-          triggerClassName="w-full"
-        ></SelectWithSearch>
-      </RAGFlowFormItem>
-    </div>
+    <RAGFlowFormItem
+      name="permission"
+      label={t('knowledgeConfiguration.permissions')}
+      tooltip={t('knowledgeConfiguration.permissionsTip')}
+      horizontal
+    >
+      <SelectWithSearch
+        options={teamOptions}
+        triggerClassName="w-full"
+      ></SelectWithSearch>
+    </RAGFlowFormItem>
   );
 }

web/src/pages/dataset/dataset-setting/saving-button.tsx

@@ -3,7 +3,7 @@ import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export function GeneralSavingButton() {
   const form = useFormContext();

web/src/pages/dataset/dataset/generate-button/hook.ts

@@ -4,7 +4,7 @@ import kbService, { deletePipelineTask } from '@/services/knowledge-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { ProcessingType } from '../../dataset-overview/dataset-common';
 import { GenerateType, GenerateTypeMap } from './generate';
 export const generateStatus = {

web/src/pages/dataset/index.tsx

@@ -10,7 +10,7 @@ import {
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
 import { useTranslation } from 'react-i18next';
-import { Outlet } from 'umi';
+import { Outlet } from 'react-router';
 import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {

web/src/pages/dataset/knowledge-graph/force-graph.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { buildNodesAndCombos } from './util';
 
 import { useIsDarkTheme } from '@/components/theme-provider';
-import styles from './index.less';
+import styles from './index.module.less';
 
 const TooltipColorMap = {
   combo: 'red',

web/src/pages/dataset/knowledge-graph/use-delete-graph.ts

@@ -1,7 +1,7 @@
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useRemoveKnowledgeGraph } from '@/hooks/use-knowledge-request';
 import { useCallback } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export function useDeleteKnowledgeGraph() {
   const { removeKnowledgeGraph, loading } = useRemoveKnowledgeGraph();

web/src/pages/dataset/sidebar/hooks.tsx

@@ -1,6 +1,6 @@
 import { Routes } from '@/routes';
 import { useCallback } from 'react';
-import { useNavigate, useParams } from 'umi';
+import { useNavigate, useParams } from 'react-router';
 
 export const useHandleMenuClick = () => {
   const navigate = useNavigate();

web/src/pages/dataset/testing/testing-form.tsx

@@ -37,7 +37,7 @@ import { trim } from 'lodash';
 import { Send } from 'lucide-react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 type TestingFormProps = Pick<
   ReturnType<typeof useTestRetrieval>,