pref: Add url params

JerryFan626 · JerryFan626 · commit 0091f368d8a1 · 2023-11-09T14:54:43.000+08:00
diff --git a/chat2db-client/src/components/Console/index.tsx b/chat2db-client/src/components/Console/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState, useImperativeHandle, ForwardedRef, forwardRef } from 'react';
 import { connect } from 'umi';
-import { formatParams } from '@/utils/common';
+import { formatParams } from '@/utils/url';
 import connectToEventSource from '@/utils/eventSource';
 import { Button, Spin, message, Drawer, Modal } from 'antd';
 import ChatInput, { SyncModelType } from './ChatInput';
diff --git a/chat2db-client/src/components/SearchResult/components/TableBox/index.tsx b/chat2db-client/src/components/SearchResult/components/TableBox/index.tsx
@@ -12,7 +12,7 @@ import styles from './index.less';
 
 // 工具函数
 import { compareStrings } from '@/utils/sort';
-import { downloadFile } from '@/utils/common';
+import { downloadFile } from '@/utils/file';
 import { transformInputValue } from '../../utils';
 
 // 类型定义
diff --git a/chat2db-client/src/pages/main/index.tsx b/chat2db-client/src/pages/main/index.tsx
@@ -25,6 +25,7 @@ import Connection from './connection';
 import Team from './team';
 import Setting from '@/blocks/Setting';
 
+import { getUrlParam, updateQueryStringParameter } from '@/utils/url';
 import styles from './index.less';
 
 const navConfig: INavItem[] = [
@@ -58,8 +59,6 @@ const navConfig: INavItem[] = [
   },
 ];
 
-// const initPageIndex = navConfig.findIndex((t) => `${t.key}` === localStorage.getItem('curPage'));
-
 interface IProps {
   mainModel: IMainPageType['state'];
   workspaceModel: IWorkspaceModelType['state'];
@@ -75,37 +74,7 @@ function MainPage(props: IProps) {
   const [userInfo, setUserInfo] = useState<ILoginUser>();
 
   useEffect(() => {
-    getUser().then((res) => {
-      if (res) {
-        setUserInfo(res);
-        const hasTeamIcon = navConfig.find((i) => i.key === 'team');
-        if (res.admin && !hasTeamIcon) {
-          navConfig.splice(3, 0, {
-            key: 'team',
-            icon: '\ue64b',
-            iconFontSize: 24,
-            isLoad: false,
-            component: <Team />,
-          });
-          if (localStorage.getItem('curPage') === 'team') {
-            setActiveNav(navConfig[3]);
-          }
-        }
-        if (!res.admin && hasTeamIcon) {
-          navConfig.splice(3, 1);
-          if (localStorage.getItem('curPage') === 'team') {
-            setActiveNav(navConfig[2]);
-          }
-        }
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    const initPageIndex = navConfig.findIndex((t) => `${t.key}` === localStorage.getItem('curPage'));
-    const activeIndex = initPageIndex > -1 ? initPageIndex : 2;
-    navConfig[activeIndex].isLoad = true;
-    setActiveNav(navConfig[activeIndex]);
+    handleInitPage();
   }, []);
 
   useEffect(() => {
@@ -145,13 +114,48 @@ function MainPage(props: IProps) {
     localStorage.setItem('curPage', curPage);
   }, [curPage]);
 
-  function switchingNav(item: INavItem) {
+  const handleInitPage = async () => {
+    const res = await getUser();
+    if (res) {
+      setUserInfo(res);
+      const hasTeamIcon = navConfig.find((i) => i.key === 'team');
+      if (res.admin && !hasTeamIcon) {
+        navConfig.splice(3, 0, {
+          key: 'team',
+          icon: '\ue64b',
+          iconFontSize: 24,
+          isLoad: false,
+          component: <Team />,
+        });
+        if (localStorage.getItem('curPage') === 'team') {
+          setActiveNav(navConfig[3]);
+        }
+      }
+      if (!res.admin && hasTeamIcon) {
+        navConfig.splice(3, 1);
+        if (localStorage.getItem('curPage') === 'team') {
+          setActiveNav(navConfig[2]);
+        }
+      }
+    }
+
+    const urlTab = getUrlParam('tab');
+    const initPage = urlTab || localStorage.getItem('curPage');
+    const initPageIndex = navConfig.findIndex((t) => `${t.key}` === initPage);
+    const activeIndex = initPageIndex > -1 ? initPageIndex : 2;
+    navConfig[activeIndex].isLoad = true;
+    setActiveNav(navConfig[activeIndex]);
+  };
+
+  const switchingNav = (item: INavItem) => {
     if (item.openBrowser) {
       window.open(item.openBrowser, '_blank');
     } else {
+      const newURL = updateQueryStringParameter('tab', item.key);
+      history.pushState({}, '', newURL);
       setActiveNav(item);
     }
-  }
+  };
 
   const handleLogout = () => {
     userLogout().then(() => {
diff --git a/chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.tsx b/chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.tsx
@@ -9,7 +9,7 @@ import TableList from '../TableList';
 import SaveList from '../SaveList';
 import { ExportSizeEnum, ExportTypeEnum } from '@/typings/resultTable';
 import { IExportParams } from '@/service/sql';
-import { downloadFile } from '@/utils/common';
+import { downloadFile } from '@/utils/file';
 
 interface IProps {
   className?: string;
diff --git a/chat2db-client/src/utils/file.ts b/chat2db-client/src/utils/file.ts
@@ -1,20 +1,8 @@
-export function formatParams(obj: { [key: string]: any }) {
-  const params = new URLSearchParams();
-  Object.entries(obj).forEach(([key, value]) => {
-    if (value === undefined || value === null) {
-      return;
-    }
-    if (Array.isArray(value)) {
-      value.forEach((item) => {
-        params.append(key, item);
-      });
-    } else {
-      params.append(key, value);
-    }
-  });
-  return params.toString();
-}
-
+/**
+ * 文件下载 
+ * @param url 
+ * @param params 
+ */
 export function downloadFile(url: string, params: any) {
   // 创建POST请求
   fetch(url, {
diff --git a/chat2db-client/src/utils/url.ts b/chat2db-client/src/utils/url.ts
@@ -0,0 +1,76 @@
+/**
+ * 获取url参数
+ * @param paramName
+ * @returns
+ */
+
+export function getUrlParam(paramName) {
+  // 获取当前URL
+  const currentUrl = window.location.href;
+
+  // 获取URL中的查询字符串
+  const queryString = currentUrl.split('?')[1];
+
+  // 如果没有查询字符串，直接返回
+  if (queryString === undefined) {
+    return;
+  }
+
+  // 将查询字符串分割成数组
+  const paramList = queryString.split('&');
+
+  // 遍历每个参数
+  for (let i = 0; i < paramList.length; i++) {
+    // 检查每个参数的名称是否匹配
+    const param = paramList[i].split('=')[0];
+    if (param === paramName) {
+      // 返回参数值
+      return paramList[i].split('=')[1];
+    }
+  }
+
+  // 如果没有找到参数，则返回null
+  return null;
+}
+/**
+ * 更新URL的参数
+ * @param key
+ * @param value
+ * @returns
+ */
+export function updateQueryStringParameter(key, value) {
+  const uri = window.location.href;
+  const host = window.location.host;
+  if (!value) {
+    return uri;
+  }
+  const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+  const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+  if (uri.match(re)) {
+    return uri.replace(re, '$1' + key + '=' + value + '$2');
+  } else {
+    return host + separator + key + '=' + value;
+  }
+}
+
+/**
+ * 格式化参数
+ * @param obj
+ * @returns
+ */
+export function formatParams(obj: { [key: string]: any }) {
+  const params = new URLSearchParams();
+  Object.entries(obj).forEach(([key, value]) => {
+    if (value === undefined || value === null) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        params.append(key, item);
+      });
+    } else {
+      params.append(key, value);
+    }
+  });
+  return params.toString();
+}
