浏览代码

feat: 新增异常页

lanjianrong 4 年之前
父节点
当前提交
4e6934d69f

+ 2 - 3
src/App.tsx

@@ -1,4 +1,3 @@
-
 import Guards from '@/components/Navigation'
 import history from '@/utils/history'
 import 'nprogress/nprogress.css'
@@ -13,10 +12,10 @@ const App = () =>{
       <Router history={ history }>
         <AliveScope>
           <Switch>
-            <Guards routeConfig={routeConfig}></Guards>
+            <Guards routeConfig={routeConfig} />
           </Switch>
         </AliveScope>
-      </Router > 
+      </Router >
     </div>
   )
 }

二进制
src/assets/img/404.png


+ 16 - 13
src/components/Navigation/index.tsx

@@ -32,7 +32,10 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
   changDocumentTitle = (path: string) => {
 
     const pathTitle = frameStore.routeNameMapping.get(path) as string
-    if (escape(pathTitle).indexOf("%u") < 0) {
+    if (!pathTitle) {
+      document.title = consts.NAME
+    }
+    if (pathTitle && escape(pathTitle).indexOf("%u") < 0) {
       // 没有中文,需要拿到父级路由的title,依次循环
       this.changDocumentTitle(path.substring(0, path.lastIndexOf("/")))
     } else {
@@ -87,7 +90,7 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
     //如果访问子菜单,则跳转到子菜单的默认路由
     if (targetPath && frameStore.defaultRouteMapping.has(targetPath)) {
       const targetDefaultRoute: string = frameStore.defaultRouteMapping.get(targetPath) as string
-      return <Redirect to={targetDefaultRoute}></Redirect>
+      return <Redirect to={targetDefaultRoute} />
     }
 
     const findRes = targetPath && NavigationGuards.findTargetRoute(parentPath, targetPath, routeConfig)
@@ -108,15 +111,15 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
     }
 
     if (targetRoute.redirect && !targetRoute.component) {
-      return <Redirect to={targetRoute.redirect}></Redirect>
+      return <Redirect to={targetRoute.redirect} />
     }
 
 
     //以下部分可提出去作为用户自定义部分
     if (isLogin) {
-      return <LoginHandler ErrorPage={ErrorPage} targetRoute={targetRoute}></LoginHandler>
+      return <LoginHandler ErrorPage={ErrorPage} targetRoute={targetRoute} />
     } else {
-      return <NotLoginHandler targetRoute={targetRoute}></NotLoginHandler>
+      return <NotLoginHandler targetRoute={targetRoute} />
     }
   }
 }
@@ -128,23 +131,23 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
   const noCache = targetRoute.meta?.noCache ? targetRoute.meta.noCache : false
 
   if (path === '/login') {
-    return <Redirect to="/console/dashboard"></Redirect>
+    return <Redirect to="/console/dashboard" />
   } else if (!auth || NavigationGuards.permissionAuthentication(auth, userStore.role)) {
     return (
       <Route path={path} render={
         props => (
           noCache ?
-            <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component> :
+            <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} /> :
             (
               <KeepAlive>
-                <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component>
+                <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} />
               </KeepAlive>
             )
         )
-      }></Route>
+      } />
     )
   } else {
-    return <ErrorPage message="您无权访问此页"></ErrorPage>
+    return <ErrorPage message="您无权访问此页" />
   }
 }
 
@@ -154,13 +157,13 @@ function NotLoginHandler(props: { targetRoute: RouteModel }): any {
   const { path, auth } = targetRoute
 
   if (auth && auth.length > 0) {
-    return <Redirect to="/login"></Redirect>
+    return <Redirect to="/login" />
   } else {
     return <Route path={path} render={
       props => (
-        <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component>
+        <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} />
       )
-    }></Route>
+    } />
   }
 }
 

+ 2 - 2
src/layout/NavSide/index.tsx

@@ -13,9 +13,9 @@ export default function NavSide(props: any) {
   })
 
   return (
-    <div className="pi-flex-row pi-height-100P">
+    <div className="pi-flex-row pi-height-100P pi-width-100P">
       <Menu list={menuList}></Menu>
-      <div className={[ 'pi-flex-row', 'pi-height-100P', styles.layout ].join(' ')}>
+      <div className={[ 'pi-flex-row', 'pi-height-100P', 'pi-width-100P', styles.layout ].join(' ')}>
         <Switch>
           <Guards routeConfig={routeConfig} match={match}></Guards>
         </Switch>

+ 3 - 3
src/pages/Dashboard/index.tsx

@@ -103,13 +103,13 @@ const Index = () => {
                           {
                             item.content.split('|').map((content, idx) => {
                               if (idx === 0) {
-                                return <span>{content} </span>
+                                return <span key={idx}>{content} </span>
                               } else if (idx === 1) {
-                                return <Link to={{ pathname: messageType[item.dataType]?.path, state: { id: item.dataId } }} className="pi-mg-lr-5">
+                                return <Link key={idx} to={{ pathname: messageType[item.dataType]?.path, state: { id: item.dataId } }} className="pi-mg-lr-5">
                                   {content}
                                 </Link>
                               } else {
-                                return <span>{content}</span>
+                                return <span key={idx}>{content}</span>
                               }
                             })
                           }

+ 21 - 0
src/pages/ErrorPage/index.module.scss

@@ -0,0 +1,21 @@
+.notFoundPage {
+  background: #f0f2f5;
+  .footerContent {
+    padding: 0 16px;
+    margin: 48px 0 24px;
+    color: rgba(0, 0, 0, 0.45);
+    text-align: center;
+    .fotterLinks {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+      & > :first-child {
+        margin-right: 5px;
+      }
+    }
+    .footerCopyright {
+
+    }
+  }
+}

+ 0 - 46
src/pages/ErrorPage/index.scss

@@ -1,46 +0,0 @@
-.loss-container {
-  width: 100%;
-  position: relative;
-  margin: 0 auto;
-  top: 0;
-  left: 0;
-  .content {
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    right: 10%;
-    background: #dcdcdc url('../../assets/img/404.png') bottom center no-repeat;
-    padding: 1em 0;
-    h4 {
-      text-align: center;
-      &:nth-of-type(1) {
-        font-size: 24px;
-        margin-bottom: 16px;
-      }
-      &:nth-of-type(2) {
-        font-size: 200px;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-        line-height: 1.2;
-      }
-    }
-  }
-  footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1030;
-    a {
-      color: #007bff;
-      text-decoration: none;
-    }
-    .mb-1 {
-      text-align: center;
-      margin-bottom: 0.25rem;
-      .mb-2 {
-        margin-left: 0.5rem;
-      }
-    }
-  }
-}

+ 25 - 8
src/pages/ErrorPage/index.tsx

@@ -1,14 +1,31 @@
+import Header from '@/components/Header'
+import history from '@/utils/history'
+import { Button, Result } from 'antd'
 import React from 'react'
-import './index.scss'
+import { CopyrightOutlined } from '@ant-design/icons'
+import styles from './index.module.scss'
+import logo from '@/assets/img/logo.png'
 export default function Loss() {
+  const btnClick = () => {
+    history.push('/')
+  }
   return (
-    <div className="loss-container">
-      <div className="content">
-        <h4>Opps!页面不存在。</h4>
-        <h4>404</h4>
-      </div>
-      <footer>
-        <p className="mb-1">Copyright © 2019 <a href="https://smartcost.com.cn">珠海纵横创新软件有限公司</a>.All Rights Reserved.<a className="mb-2" href="http://www.miitbeian.gov.cn">粤ICP备14032472号</a></p>
+    <div className={[ 'pi-width-100P', 'pi-flex-column', 'pi-justify-between', styles.notFoundPage ].join(" ")}>
+      <Header title="未找到该页面" />
+      <Result
+        status="404"
+        title="404"
+        subTitle="Sorry, the page you visited does not exist."
+        extra={<Button type="primary" onClick={btnClick}>Back Home</Button>}
+      />
+      <footer className={styles.footerContent}>
+        <div className={styles.fotterLinks}>
+          <img src={logo} className="pi-width-18 pi-height-18"/>
+          <span>纵横工程项目管理系统</span>
+        </div>
+        <div className={styles.footerCopyright}>
+        Copyright <CopyrightOutlined /> 珠海纵横创新软件有限公司版权所有
+        </div>
       </footer>
     </div>
   )