feat: modify routing to nested mode and rename document (#52)

* feat: modify routing to nested mode

* feat: rename document

web/src/pages/add-knowledge/index.tsx

@@ -1,45 +1,60 @@
+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import { useSecondPathName, useThirdPathName } from '@/hooks/routeHook';
 import { Breadcrumb } from 'antd';
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useEffect, useMemo } from 'react';
-import {
-  useDispatch,
-  useLocation,
-  useNavigate,
-  useParams,
-  useSelector,
-} from 'umi';
-import Chunk from './components/knowledge-chunk';
-import File from './components/knowledge-file';
-import Search from './components/knowledge-search';
-import Setting from './components/knowledge-setting';
+import { Link, Outlet, useDispatch, useLocation, useNavigate } from 'umi';
 import Siderbar from './components/knowledge-sidebar';
-import { KnowledgeRouteKey, routeMap } from './constant';
+import {
+  KnowledgeDatasetRouteKey,
+  KnowledgeRouteKey,
+  datasetRouteMap,
+  routeMap,
+} from './constant';
 import styles from './index.less';
 
 const KnowledgeAdding = () => {
   const dispatch = useDispatch();
-  const kAModel = useSelector((state: any) => state.kAModel);
   const navigate = useNavigate();
-  const { id, doc_id } = kAModel;
+  const knowledgeBaseId = useKnowledgeBaseId();
 
   const location = useLocation();
-  const params = useParams();
   const activeKey: KnowledgeRouteKey =
-    (params.module as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
+    (useSecondPathName() as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
+
+  const datasetActiveKey: KnowledgeDatasetRouteKey =
+    useThirdPathName() as KnowledgeDatasetRouteKey;
 
   const gotoList = () => {
     navigate('/knowledge');
   };
 
-  const breadcrumbItems = useMemo(() => {
-    return [
+  const breadcrumbItems: ItemType[] = useMemo(() => {
+    const items: ItemType[] = [
       {
         title: <a onClick={gotoList}>Knowledge Base</a>,
       },
       {
-        title: routeMap[activeKey],
+        title: datasetActiveKey ? (
+          <Link
+            to={`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`}
+          >
+            {routeMap[activeKey]}
+          </Link>
+        ) : (
+          routeMap[activeKey]
+        ),
       },
     ];
-  }, [activeKey]);
+
+    if (datasetActiveKey) {
+      items.push({
+        title: datasetRouteMap[datasetActiveKey],
+      });
+    }
+
+    return items;
+  }, [activeKey, datasetActiveKey]);
 
   useEffect(() => {
     const search: string = location.search.slice(1);
@@ -65,16 +80,7 @@ const KnowledgeAdding = () => {
         <div className={styles.contentWrapper}>
           <Breadcrumb items={breadcrumbItems} />
           <div className={styles.content}>
-            {activeKey === KnowledgeRouteKey.Dataset && !doc_id && (
-              <File kb_id={id} />
-            )}
-            {activeKey === KnowledgeRouteKey.Configration && (
-              <Setting kb_id={id} />
-            )}
-            {activeKey === KnowledgeRouteKey.Testing && <Search kb_id={id} />}
-            {activeKey === KnowledgeRouteKey.Dataset && !!doc_id && (
-              <Chunk doc_id={doc_id} />
-            )}
+            <Outlet></Outlet>
           </div>
         </div>
       </div>