bug fix

.vscode/settings.json

@@ -23,6 +23,6 @@
   },
   "editor.fontSize": 16,
   "editor.tabSize": 2,
-  "editor.fontFamily": "'Source Code Variable', Menlo, Monaco, 'Courier New', monospace",
+  "editor.fontFamily": "'Source Code Pro', Menlo, Monaco, 'Courier New', monospace",
   "workbench.colorTheme": "Community Material Theme Palenight High Contrast"
 }

config-overrides.js

@@ -3,7 +3,6 @@ const path = require('path')
 // const darkThemeVars = require('antd/dist/dark-theme')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const AntDesignThemePlugin = require('antd-theme-webpack-plugin')
-const PrerenderSPAPlugin = require('prerender-spa-plugin')
 
 const options = {
   antDir: path.join(__dirname, './node_modules/antd'), 
@@ -22,18 +21,6 @@ const rewiredSourceMap = () => (config) => {
   return config
 }
 
-const prerenderPlugin = () => (config) => {
-  if (config.mode === 'production') {
-    config.plugins = config.plugins.concat([
-      new PrerenderSPAPlugin({
-        routes: ['/dashboard'],
-        staticDir: path.join(__dirname, 'build'),
-      }),
-    ]);
-  }
-  return config
-}
-
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
@@ -55,6 +42,5 @@ module.exports = override(
     // new BundleAnalyzerPlugin(),
     new AntDesignThemePlugin(options)
   ),
-  prerenderPlugin(),
   rewiredSourceMap()
 )

package.json

@@ -6,17 +6,17 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "antd": "^4.0.0-rc.0",
+    "antd": "^4.1.0",
     "axios": "^0.19.0",
     "driver.js": "^0.9.8",
     "mockjs": "^1.1.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-hook-form": "^4.8.0",
     "react-intl": "^3.11.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.0",
+    "react-scripts": "^3.4.0",
     "recharts": "^2.0.0-beta.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -61,8 +61,9 @@
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "http-proxy-middleware": "^0.20.0",
-    "less": "^2.7.0",
+    "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "prerender-spa-plugin": "^3.4.0",
     "prettier": "^1.19.1",

public/index.html

@@ -5,7 +5,8 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="react-antd-admin，react后台管理系统" />
+    <meta name="description" content="react-antd-admin，react后台管理系统 winme winmee" />
+    <meta name="keywords" content="react-antd-admin，react后台管理系统 winme winmee" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>react-antd-admin</title>

src/pages/dashboard/index.less

@@ -94,7 +94,7 @@
 .customTooltip {
   transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s,
     top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(256, 2560, 256, 0.9);
   box-shadow: rgb(174, 174, 174) 0px 0px 10px;
   border-radius: 3px;
   color: rgb(87, 87, 87);

src/pages/dashboard/index.tsx

@@ -1,15 +1,25 @@
-import React, { FC } from 'react'
+import React, { FC, useState, useEffect } from 'react'
 import './index.less'
 import Overview from './overview'
 import SalePercent from './salePercent'
 import TimeLine from './timeLine'
 
-const DashBoardPage: FC = () => (
-  <div>
-    <Overview />
-    <SalePercent />
-    <TimeLine />
+const DashBoardPage: FC = () => { 
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(undefined as any)
+    }, 2000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+  return <div>
+    <Overview loading={loading} />
+    <SalePercent loading={loading} />
+    <TimeLine loading={loading} />
   </div>
-)
+}
 
 export default DashBoardPage

src/pages/dashboard/overview.tsx

@@ -95,19 +95,9 @@ const Field: FC<FieldProps> = ({ name, number }) => (
   </div>
 )
 
-const Overview: FC = () => {
-  const [loading, setLoading] = useState(true)
+const Overview:FC<{ loading: boolean }> = ({ loading }) => {
   const { formatMessage } = useLocale()
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false)
-    }, 1000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
-
   return (
     <Row gutter={[12, 12]}>
       <ColCard

src/pages/dashboard/salePercent.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from 'react'
+import React, { FC, useState } from 'react'
 import { Card, Row, Col, List, Radio, Badge } from 'antd'
 import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from 'recharts'
 import { ColProps } from 'antd/lib/col'
@@ -59,21 +59,11 @@ const wrapperCol: ColProps = {
   xxl: 12
 }
 
-const SalePercent: FC = () => {
-  const [loading, setLoading] = useState(true)
+const SalePercent: FC<{loading: boolean }> = ({ loading }) => {
   const [dataType, setDataType] = useState<DataType>('all')
   const { locale } = useSelector((state: AppState) => state.globalReducer)
   const { formatMessage } = useLocale()
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false)
-    }, 1000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
-
   return (
     <Card
       className="salePercent"
@@ -87,7 +77,7 @@ const SalePercent: FC = () => {
         </Radio.Group>
       }
     >
-      <Row gutter={20}>
+       <Row gutter={20}>
         <Col {...wrapperCol}>
           <ResponsiveContainer height={250}>
             <PieChart>
@@ -103,6 +93,7 @@ const SalePercent: FC = () => {
                       </span>
                     )
                   }
+                  return null
                 }}
               />
               <Pie

src/pages/dashboard/timeLine.tsx

@@ -35,17 +35,7 @@ const CustomTooltip: FC<any> = ({ active, payload, label }) => {
   return null
 }
 
-const TimeLine: FC = () => {
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false)
-    }, 1000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
+const TimeLine: FC<{ loading: boolean }> = ({ loading }) => {
 
   return (
     <Card loading={loading} style={{ marginTop: 12 }}>

src/pages/permission/button/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
 
-const ButtonPermissionPage: FC = () => <div>button</div>
+const ButtonPermissionPage: FC = () => <span>button</span>
 
 export default ButtonPermissionPage

src/styles/main.less

@@ -1,6 +1,7 @@
 html,
 body,
-#root {
+#root,
+#root > * {
   height: 100%;
 }