Merge branch 'develop' of github.com:Tencent/tdesign-react-starter in…

…to main

src/layouts/components/Container.tsx

@@ -4,43 +4,47 @@ import { ELayout } from 'modules/global';
 import Header from './Header';
 import Footer from './Footer';
 import Menu from './Menu';
+import Content from './Content';
 
 import Style from './Content.module.less';
 
-const SideLayout = React.memo(({ children }: { children: React.ReactNode }) => (
+const SideLayout = React.memo(() => (
   <Layout className={Style.sidePanel}>
     <Menu showLogo showOperation />
     <Layout className={Style.sideContainer}>
       <Header />
-      {children}
+      <Content />
       <Footer />
     </Layout>
   </Layout>
 ));
 
-const TopLayout = React.memo(({ children }: { children: React.ReactNode }) => (
+const TopLayout = React.memo(() => (
   <Layout className={Style.topPanel}>
     <Header showMenu={true} />
-    {children}
+    <Content />
     <Footer />
   </Layout>
 ));
 
-const MixLayout = React.memo(({ children }: { children: React.ReactNode }) => (
+const MixLayout = React.memo(() => (
   <Layout className={Style.mixPanel}>
     <Header />
     <Layout className={Style.mixMain}>
       <Menu />
       <Layout className={Style.mixContent}>
-        {children}
+        <Content />
         <Footer />
       </Layout>
     </Layout>
   </Layout>
 ));
 
+const FullPageLayout = React.memo(() => <Content />);
+
 export default {
   [ELayout.side]: SideLayout,
   [ELayout.top]: TopLayout,
   [ELayout.mix]: MixLayout,
+  [ELayout.fullPage]: FullPageLayout,
 };

src/layouts/components/Content.tsx

@@ -2,40 +2,21 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import { Layout } from 'tdesign-react';
 import { routes } from 'configs/routes';
-import { useAppSelector } from 'modules/store';
-import { selectGlobal } from 'modules/global';
 import UnAuthorized from 'pages/Result/403';
 import NotFound from 'pages/Result/404';
 import ServerError from 'pages/Result/500';
-import LayoutMap from './Container';
 
 const { Content } = Layout;
 
 export default React.memo(() => {
   const home = routes.find((item) => item.isHome);
-  const globalState = useAppSelector(selectGlobal);
-  const Container = LayoutMap[globalState.layout];
   return (
     <Content>
       <Switch>
         {home && <Redirect path='/' exact to={home.path} />}
-        {routes.map((route, index) => {
-          const { Component } = route;
-          return route.isFullPage ? (
-            <Route key={index} exact={route.exact} path={route.path} component={Component} />
-          ) : (
-            <Route
-              key={index}
-              exact={route.exact}
-              path={route.path}
-              render={() => (
-                <Container>
-                  <Component />
-                </Container>
-              )}
-            />
-          );
-        })}
+        {routes.map((route, index) => (
+          <Route key={index} exact={route.exact} path={route.path} component={route.Component} />
+        ))}
         <Route path='/403' component={UnAuthorized} />
         <Route path='/500' component={ServerError} />
         <Route path='*' component={NotFound} />

src/layouts/components/Menu.module.less

@@ -18,6 +18,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 .menuMiniLogo {
@@ -26,5 +27,5 @@
 }
 
 .logoFull {
-  color: var(--td-text-color-primary)
+  color: var(--td-text-color-primary);
 }

src/layouts/components/Menu.tsx

@@ -64,7 +64,6 @@ export default memo((props: IMenuProps) => {
 
   const { version } = globalState;
   const bottomText = globalState.collapsed ? version : `TDesign Starter ${version}`;
-
   return (
     <Menu
       width='232px'

src/layouts/components/MenuLogo.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import Style from './Menu.module.less';
 import MiniLogo from 'assets/svg/assets-t-logo.svg';
+import { useHistory } from 'react-router-dom';
 
 const LogoFull = () => (
   <svg
@@ -107,8 +108,16 @@ interface IProps {
   collapsed?: boolean;
 }
 
-export default memo((props: IProps) => (
-  <div className={Style.menuLogo}>
-    {props.collapsed ? <img src={MiniLogo} className={Style.menuMiniLogo} /> : <LogoFull />}
-  </div>
-));
+export default memo((props: IProps) => {
+  const history = useHistory();
+
+  const handleClick = () => {
+    history.push('/');
+  };
+
+  return (
+    <div className={Style.menuLogo} onClick={handleClick}>
+      {props.collapsed ? <img src={MiniLogo} className={Style.menuMiniLogo} /> : <LogoFull />}
+    </div>
+  );
+});

src/layouts/index.tsx

@@ -1,15 +1,28 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useState, useMemo } from 'react';
 import { Drawer, Layout } from 'tdesign-react';
 import throttle from 'lodash/throttle';
+import { useLocation } from 'react-router-dom';
 import { useAppSelector, useAppDispatch } from 'modules/store';
-import { selectGlobal, toggleSetting, toggleMenu } from 'modules/global';
+import { selectGlobal, toggleSetting, toggleMenu, ELayout } from 'modules/global';
 import Setting from './components/Setting';
-import Content from './components/Content';
+import LayoutMap from './components/Container';
+import { routes } from 'configs/routes';
+
 import Style from './index.module.less';
 
 export default memo(() => {
   const globalState = useAppSelector(selectGlobal);
   const dispatch = useAppDispatch();
+  const location = useLocation();
+  const [isFullPage, toggleFullPage] = useState(false);
+
+  const fullPageList = useMemo(() => routes.filter((route) => route.isFullPage).map((route) => route.path), []);
+
+  useEffect(() => {
+    toggleFullPage(fullPageList.includes(location.pathname));
+  }, [location]);
+
+  const Container = LayoutMap[isFullPage ? ELayout.fullPage : globalState.layout];
 
   useEffect(() => {
     const handleResize = throttle(() => {
@@ -27,7 +40,7 @@ export default memo(() => {
 
   return (
     <Layout className={Style.mainPanel}>
-      <Content />
+      <Container />
       <Drawer
         destroyOnClose
         visible={globalState.setting}

src/modules/global/index.ts

@@ -15,6 +15,7 @@ export enum ELayout {
   side = 1,
   top,
   mix,
+  fullPage,
 }
 
 export interface IGlobalState {