404页面配置

jaro-rokan · Jan 11, 2020 · 1380e8f · 1380e8f
1 parent 3ae6e7d
commit 1380e8f
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 108 deletions.
diff --git a/.env b/.env
@@ -1,3 +1,4 @@
+EXTEND_ESLINT=true
 NODE_PATH=./
 PORT=2000
 GENERATE_SOURCEMAP=false
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,49 @@
+{
+  "extends": ["react-app", "plugin:@typescript-eslint/recommended", "prettier", "prettier/@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-hooks", "@typescript-eslint", "prettier"],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "context": "readonly",
+    "cy": "readonly",
+    "assert": "readonly",
+    "Cypress": "readonly"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "prettier/prettier": [
+      "warn",
+      {
+        "singleQuote": true,
+        "semi": false,
+        "endOfLine": "crlf",
+        "printWidth": 120
+      }
+    ],
+    "jsx-a11y/href-no-hash": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,9 +4,6 @@
   "typescript.preferences.importModuleSpecifier": "auto",
   "emmet.showAbbreviationSuggestions": false,
   "emmet.showExpandedAbbreviation": "never",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "eslint.options": {
     "extensions": [".js", ".jsx", ".ts", ".tsx"]
@@ -23,5 +20,10 @@
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false
-  }
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace"
 }
diff --git a/package.json b/package.json
@@ -24,9 +24,6 @@
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -50,14 +47,11 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/styled-components": "^4.4.1",
     "@types/webpack-env": "^1.15.0",
-    "@typescript-eslint/eslint-plugin": "^2.15.0",
-    "@typescript-eslint/parser": "^2.15.0",
     "babel-plugin-import": "^1.13.0",
     "customize-cra": "^0.9.1",
-    "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
+    "eslint-config-typescript": "^3.0.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.17.0",
     "http-proxy-middleware": "^0.20.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import LayoutPage from './pages/layout'
 import { BrowserRouter, Switch, Route } from 'react-router-dom'
 import LoginPage from './pages/login'
+import LayoutPage from './pages/layout'
 
 const App: React.FC = () => {
   return (

diff --git a/src/interface/layout/notice.interface.ts b/src/interface/layout/notice.interface.ts
@@ -1,3 +1,10 @@
+export enum EventStatus {
+  todo = 'rgba(255,255,255,0.65)',
+  urgent = '#f5222d',
+  doing = '#faad14',
+  processing = '#1890ff'
+}
+
 interface Base {
   type: 'message' | 'notification' | 'event'
   id: string
@@ -24,11 +31,13 @@ export interface Event extends Base {
   type: 'event'
   description: string
   extra: string
-  status: string
+  status: keyof typeof EventStatus
 }
 
 type Notices = Notification | Message | Event
-export type Notice<T extends Notices['type'] | 'all' = 'all'> = T extends 'all' ? Notices : Extract<Notices, { type: T }>
+export type Notice<T extends Notices['type'] | 'all' = 'all'> = T extends 'all'
+  ? Notices
+  : Extract<Notices, { type: T }>
 
 // type MinusKeys<T, U> = Pick<T, Exclude<keyof T, keyof U>>
 

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,21 @@
+import { Button, Result } from 'antd'
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+
+const NotFoundPage: React.FC<{}> = () => {
+  const history = useHistory()
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="对不起，您访问的页面不存在"
+      extra={
+        <Button type="primary" onClick={() => history.push('/')}>
+          返回首页
+        </Button>
+      }
+    ></Result>
+  )
+}
+
+export default NotFoundPage
diff --git a/src/pages/layout/index.less b/src/pages/layout/index.less
@@ -4,16 +4,32 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
+    background-color: @dark-color;
+    z-index: 9;
   }
-  .logo {
-    height: 64px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    img {
-      width: 30px;
-      height: 30px;
+  &-sider {
+    .logo {
+      height: 64px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: @dark-color;
+      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
+      z-index: 9;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    border-right: 1px solid #303030;
+  }
+  &-content {
+    > * {
+      height: 100%;
+      // background-color: #292a2d !important;
+      background-color: #1f1f1f !important;
     }
   }
   .actions {
@@ -42,5 +58,18 @@
   }
 }
 .ant-menu.ant-menu-inline.ant-menu-root {
-  padding-top: 15px !important;
+  margin-top: 15px !important;
+}
+
+.notice-description {
+  font-size: 12px;
+  &-datetime {
+    margin-top: 4px;
+    line-height: 1.5;
+  }
+}
+
+.notice-title {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/pages/layout/index.tsx b/src/pages/layout/index.tsx
@@ -44,7 +44,7 @@ const LayoutPage: FC = () => {
   return (
     <Layout className="layout-page">
       {!isMobile ? (
-        <Sider trigger={null} collapsible collapsed={collapsed} breakpoint="md">
+        <Sider className="layout-page-sider" trigger={null} collapsible collapsed={collapsed} breakpoint="md">
           <div className="logo">
             <img src={ReactSvg} alt="" style={{ marginRight: collapsed ? '2px' : '20px' }} />
             <img src={AntdSvg} alt="" />
@@ -65,7 +65,7 @@ const LayoutPage: FC = () => {
       )}
       <Layout>
         <HeaderComponent collapsed={collapsed} toggle={toggle} />
-        <Content>
+        <Content className="layout-page-content">
           <Suspense fallback={<h1>Loading profile...</h1>}>
             <MainRoutes />
           </Suspense>

diff --git a/src/pages/layout/menu.tsx b/src/pages/layout/menu.tsx
@@ -60,6 +60,7 @@ const MenuComponent: FC = () => {
       openKeys={openKeys}
       onOpenChange={keys => setOpenkeys([keys.pop()!])}
       onClick={onMenuClick}
+      className="layout-page-sider-menu"
     >
       {menuList?.map(menu =>
         menu.children ? (

diff --git a/src/pages/layout/notice.tsx b/src/pages/layout/notice.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useState, useEffect } from 'react'
-import { Tabs, Dropdown, Badge, Spin, List, Avatar } from 'antd'
+import { Tabs, Dropdown, Badge, Spin, List, Avatar, Tag } from 'antd'
 import { ReactComponent as NoticeSvg } from '~/assets/header/notice.svg'
 import { LoadingOutlined } from '@ant-design/icons'
 import { useSelector } from 'react-redux'
 import { AppState } from '~/stores'
 import { getNoticeList } from '~/api/layout.api'
-import { Notice } from '~/interface/layout/notice.interface'
+import { Notice, EventStatus } from '~/interface/layout/notice.interface'
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
 
@@ -36,9 +36,8 @@ const HeaderNoticeComponent: FC = () => {
     <div>
       <Spin tip="Loading..." indicator={antIcon} spinning={loading}>
         <Tabs defaultActiveKey="1">
-          <TabPane tab="notification" key="1">
+          <TabPane tab={`通知(${noticeListFilter('notification').length})`} key="1">
             <List
-              itemLayout="horizontal"
               dataSource={noticeListFilter('notification')}
               renderItem={item => (
                 <List.Item>
@@ -52,32 +51,38 @@ const HeaderNoticeComponent: FC = () => {
             />
           </TabPane>
 
-          <TabPane tab="message" key="2">
+          <TabPane tab={`消息(${noticeListFilter('message').length})`} key="2">
             <List
-              itemLayout="horizontal"
-              dataSource={noticeListFilter('notification')}
+              dataSource={noticeListFilter('message')}
               renderItem={item => (
                 <List.Item>
                   <List.Item.Meta
                     avatar={<Avatar src={item.avatar} />}
                     title={<a href={item.title}>{item.title}</a>}
-                    description={item.datetime}
+                    description={
+                      <div className="notice-description">
+                        <div className="notice-description-content">{item.description}</div>
+                        <div className="notice-description-datetime">{item.datetime}</div>
+                      </div>
+                    }
                   />
                 </List.Item>
               )}
             />
-            />
           </TabPane>
-          <TabPane tab="event" key="3">
+          <TabPane tab={`待办(${noticeListFilter('event').length})`} key="3">
             <List
-              itemLayout="horizontal"
-              dataSource={noticeListFilter('notification')}
+              dataSource={noticeListFilter('event')}
               renderItem={item => (
                 <List.Item>
                   <List.Item.Meta
-                    avatar={<Avatar src={item.avatar} />}
-                    title={<a href={item.title}>{item.title}</a>}
-                    description={item.datetime}
+                    title={
+                      <div className="notice-title">
+                        <div className="notice-title-content">{item.title}</div>
+                        <Tag color={EventStatus[item.status]}>{item.extra}</Tag>
+                      </div>
+                    }
+                    description={item.description}
                   />
                 </List.Item>
               )}
@@ -88,7 +93,14 @@ const HeaderNoticeComponent: FC = () => {
     </div>
   )
   return (
-    <Dropdown overlay={tabs} trigger={['click']} visible={visible} onVisibleChange={v => setVisible(v)}>
+    <Dropdown
+      overlay={tabs}
+      placement="bottomRight"
+      trigger={['click']}
+      visible={visible}
+      onVisibleChange={v => setVisible(v)}
+      overlayStyle={{ width: 336, backgroundColor: '#292a2d', padding: 8 }}
+    >
       <Badge count={noticeCount} overflowCount={999}>
         <span className="notice">
           <NoticeSvg className="anticon" />

diff --git a/src/routes/config.tsx b/src/routes/config.tsx
@@ -5,7 +5,7 @@ export type RouteConfig = {
   /**
    * Route path
    */
-  path: string
+  path: string | string[]
   /**
    * Required React.FunctionalComponent and React.Lazy component, see the detail in src/App.vue.
    */