别的页面之间跳转到首页

react-ui/src/app.tsx

@@ -23,7 +23,7 @@ import './styles/menu.less';
 import { isLoginPage, needAuth } from './utils';
 import { HomeUrl } from './utils/constant';
 import { closeAllModals } from './utils/modal';
-import { gotoLoginPage } from './utils/ui';
+import { gotoHomePage } from './utils/ui';
 export { requestConfig as request } from './requestConfig';
 
 /**
@@ -42,7 +42,8 @@ export async function getInitialState(): Promise<GlobalInitialState> {
       } as API.CurrentUser;
     } catch (error) {
       console.error('getInitialState', error);
-      gotoLoginPage(true);
+      // gotoLoginPage(true);
+      gotoHomePage();
     }
     return undefined;
   };
@@ -128,7 +129,7 @@ export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
   const token = getAccessToken();
   // 没有 token，跳转到登录页面
   if (!token && needAuth(pathname)) {
-    gotoLoginPage(false);
+    gotoHomePage();
     return;
   }
 

react-ui/src/pages/Home/components/CodeConfig/index.tsx

@@ -3,7 +3,7 @@ import { getPublicCodeConfigsReq } from '@/services/home';
 import { getGitUrl } from '@/utils';
 import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
-import { useNavigate } from '@umijs/max';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { Divider, Flex } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
@@ -11,7 +11,6 @@ import BlockTitle from '../BlockTitle';
 import styles from './index.less';
 
 function CodeConfig() {
-  const navigate = useNavigate();
   const [codeCofigs, setCodeConfigs] = useState<CodeConfigData[]>([]);
 
   useEffect(() => {
@@ -67,7 +66,7 @@ function CodeConfig() {
       <BlockTitle
         title="热门代码配置"
         style={{ marginBottom: '5.25rem' }}
-        onClick={() => navigate('/dataset/codeConfig')}
+        onClick={() => gotoPageIfLogin('/dataset/codeConfig')}
       ></BlockTitle>
       <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
         {codeCofigs.slice(0, 3).map((item) => createItem(item, styles['code__item--first']))}

react-ui/src/pages/Home/components/Dataset/index.tsx

@@ -1,14 +1,13 @@
 import { DatasetData } from '@/pages/Dataset/config';
 import { getPublicDatasetsReq } from '@/services/home';
 import { to } from '@/utils/promise';
-import { useNavigate } from '@umijs/max';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { Divider, Flex } from 'antd';
 import { useEffect, useState } from 'react';
 import BlockTitle from '../BlockTitle';
 import styles from './index.less';
 
 function DatasetBlock() {
-  const navigate = useNavigate();
   const [datasetData, setDatasetData] = useState<DatasetData[]>([]);
 
   useEffect(() => {
@@ -28,7 +27,7 @@ function DatasetBlock() {
       <BlockTitle
         title="热门数据集"
         style={{ marginBottom: '3.875rem' }}
-        onClick={() => navigate('/dataset/dataset')}
+        onClick={() => gotoPageIfLogin('/dataset/dataset')}
       ></BlockTitle>
       <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
         {datasetData.map((item, index) => {
@@ -37,7 +36,7 @@ function DatasetBlock() {
               className={styles['dataset__item']}
               key={item.id}
               onClick={() => {
-                navigate(
+                gotoPageIfLogin(
                   `/dataset/dataset/info/${item.id}?name=${item.name}&owner=${item.owner}&identifier=${item.identifier}&is_public=${item.is_public}`,
                 );
               }}

react-ui/src/pages/Home/components/Intro/index.tsx

@@ -50,7 +50,7 @@ function IntroBlock() {
         right: leftRem,
         borderRadius: radiusRem,
         top: top,
-        backgroundImage: `url(${backgroundImage1})`,
+        backgroundImage: backgroundImage1 ? `url(${backgroundImage1})` : undefined,
       }}
       transition={{
         type: 'spring',
@@ -59,7 +59,10 @@ function IntroBlock() {
     >
       <motion.div
         className={styles['intro__content']}
-        style={{ padding: paddingXRem, backgroundImage: `url(${backgroundImage2})` }}
+        style={{
+          padding: paddingXRem,
+          backgroundImage: backgroundImage2 ? `url(${backgroundImage2})` : undefined,
+        }}
       >
         <NavBar></NavBar>
         <div className={styles['intro__title']}>智能材料科研平台</div>

react-ui/src/pages/Home/components/Mirror/index.tsx

@@ -2,14 +2,13 @@ import { MirrorData } from '@/pages/Mirror/List';
 import { getPublicImagesReq } from '@/services/home';
 import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
-import { useNavigate } from '@umijs/max';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { Divider, Flex } from 'antd';
 import { useEffect, useState } from 'react';
 import BlockTitle from '../BlockTitle';
 import styles from './index.less';
 
 function MirrorBlock() {
-  const navigate = useNavigate();
   const [mirrorData, setMirrirData] = useState<MirrorData[]>([]);
 
   useEffect(() => {
@@ -29,7 +28,7 @@ function MirrorBlock() {
       <BlockTitle
         title="热门镜像"
         style={{ marginBottom: '5.25rem' }}
-        onClick={() => navigate('/dataset/mirror')}
+        onClick={() => gotoPageIfLogin('/dataset/mirror')}
       ></BlockTitle>
       <Flex align="center" style={{ width: '100%' }} wrap gap="1.625rem 1.25rem">
         {mirrorData.map((item) => {
@@ -38,7 +37,7 @@ function MirrorBlock() {
               className={styles['mirror__item']}
               key={item.id}
               onClick={() => {
-                navigate(`/dataset/mirror/info/${item.id}`);
+                gotoPageIfLogin(`/dataset/mirror/info/${item.id}`);
               }}
             >
               <Flex align="center" style={{ marginBottom: '1rem' }}>

react-ui/src/pages/Home/components/Model/index.tsx

@@ -1,7 +1,7 @@
 import { ModelData } from '@/pages/Dataset/config';
 import { getPublicModelsReq } from '@/services/home';
 import { to } from '@/utils/promise';
-import { useNavigate } from '@umijs/max';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { Divider, Flex } from 'antd';
 import { motion, type Variants } from 'motion/react';
 import { useEffect, useState } from 'react';
@@ -21,15 +21,15 @@ const modelVariants: Variants = {
     y: [0, 200, 0],
     opacity: [0, 0, 1],
     transition: {
-      ease: 'easeInOut',
-      duration: 0.5,
+      ease: 'easeOut',
+      duration: 0.3,
       times: [0, 0, 1],
+      delay: 0.5,
     },
   },
 };
 
 function ModelBlock() {
-  const navigate = useNavigate();
   const [modelData, setModelData] = useState<ModelData[]>([]);
 
   useEffect(() => {
@@ -49,7 +49,7 @@ function ModelBlock() {
       <BlockTitle
         title="热门模型"
         style={{ marginBottom: '5.25rem' }}
-        onClick={() => navigate('/dataset/model')}
+        onClick={() => gotoPageIfLogin('/dataset/model')}
       ></BlockTitle>
       <div className={styles['model__content']}>
         {modelData.map((item, index) => {
@@ -62,7 +62,7 @@ function ModelBlock() {
               className={styles['model__item']}
               key={item.id}
               onClick={() => {
-                navigate(
+                gotoPageIfLogin(
                   `/dataset/model/info/${item.id}?name=${item.name}&owner=${item.owner}&identifier=${item.identifier}&is_public=${item.is_public}`,
                 );
               }}

react-ui/src/pages/Home/components/NavBar/index.tsx

@@ -1,5 +1,6 @@
 import { getAccessToken } from '@/access';
 import Avatar from '@/components/RightContent/AvatarDropdown';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import { Flex } from 'antd';
 import classNames from 'classnames';
@@ -10,34 +11,40 @@ function NavBar() {
   const token = getAccessToken();
 
   const gotoPage = (page: string) => {
+    if (page === 'login') {
+      navigate('/user/login');
+      return;
+    }
+
+    let pathname = '';
     switch (page) {
       case 'service':
-        navigate('/dataset/modelDeployment');
+        pathname = '/dataset/modelDeployment';
         break;
 
       case 'model':
-        navigate('/dataset/model');
+        pathname = '/dataset/model';
         break;
 
       case 'dataset':
-        navigate('/dataset/dataset');
+        pathname = '/dataset/dataset';
         break;
 
       case 'mirror':
-        navigate('/dataset/mirror');
+        pathname = '/dataset/mirror';
         break;
 
       case 'codeConfig':
-        navigate('/dataset/codeConfig');
-        break;
-
-      case 'login':
-        navigate('/user/login');
+        pathname = '/dataset/codeConfig';
         break;
 
       default:
         break;
     }
+
+    if (pathname) {
+      gotoPageIfLogin(pathname);
+    }
   };
 
   return (

react-ui/src/pages/Home/components/Service/index.tsx

@@ -6,7 +6,7 @@ import { type ServiceData } from '@/pages/ModelDeployment/types';
 import { getPublicServicesReq } from '@/services/home';
 import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
-import { useNavigate } from '@umijs/max';
+import { gotoPageIfLogin } from '@/utils/ui';
 import { Flex } from 'antd';
 import { motion, type Variants } from 'motion/react';
 import { useEffect, useState } from 'react';
@@ -34,7 +34,6 @@ const serviceVariants: Variants = {
 };
 
 function ServiceBlock() {
-  const navigate = useNavigate();
   const [serviceData, setServiceData] = useState<ServiceData[]>([]);
   const images = [ServiceImg1, ServiceImg2, ServiceImg3, ServiceImg4];
 
@@ -54,7 +53,7 @@ function ServiceBlock() {
       <BlockTitle
         title="热门APP"
         style={{ marginBottom: '5.25rem' }}
-        onClick={() => navigate('/dataset/modelDeployment')}
+        onClick={() => gotoPageIfLogin('/dataset/modelDeployment')}
       ></BlockTitle>
       <Flex align="center" style={{ width: '100%' }} gap={'0 1.125rem'}>
         {serviceData.map((item, index) => {
@@ -63,7 +62,7 @@ function ServiceBlock() {
               variants={serviceVariants}
               className={styles['service__item']}
               key={item.id}
-              onClick={() => navigate(`/dataset/modelDeployment/serviceInfo/${item.id}`)}
+              onClick={() => gotoPageIfLogin(`/dataset/modelDeployment/serviceInfo/${item.id}`)}
               initial="offscreen"
               whileInView="onscreen"
               custom={index}

react-ui/src/utils/ui.tsx

@@ -3,6 +3,7 @@
  * @Date: 2024-04-19 14:42:51
  * @Description: UI 公共方法
  */
+import { getAccessToken } from '@/access';
 import { PageEnum } from '@/enums/pagesEnums';
 import { removeAllPageCacheState } from '@/hooks/useCacheState';
 import { deleteUploadFileReq } from '@/services/dataset/index.js';
@@ -84,6 +85,15 @@ export const gotoLoginPage = (toHome: boolean = true) => {
   }
 };
 
+/**
+ * 跳转到首页
+ */
+export const gotoHomePage = () => {
+  history.replace({
+    pathname: '/home',
+  });
+};
+
 /**
  * 跳转到 OAuth2 登录页
  */
@@ -237,3 +247,24 @@ export const oauthLogout = (url: string) => {
   iframe.src = url;
   document.body.appendChild(iframe);
 };
+
+/**
+ * 没有登录跳转到登录，否则跳到到指定页面
+ * @param pathname - 页面地址
+ */
+export const gotoPageIfLogin = (pathname: string) => {
+  const token = getAccessToken();
+  if (token) {
+    history.push({
+      pathname,
+    });
+  } else {
+    const urlParams = new URLSearchParams();
+    urlParams.append('redirect', pathname);
+    const newSearch = urlParams.toString();
+    history.replace({
+      pathname: PageEnum.LOGIN,
+      search: newSearch,
+    });
+  }
+};