1. Bump upgrade deps \n2. Make **theme-switch** prettier \n3.Add mock…

…s \n4.Page reload show logo with loading.\n5 fix typos

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea

.prettierrc.js

@@ -10,6 +10,6 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: false,
   endOfLine: 'lf',
-  parser: 'babel',
+  // parser: 'babel', // 解析器 和 typescript 冲突
   proseWrap: 'always'
 }

package.json

@@ -7,7 +7,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/axios": "^0.14.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -17,7 +16,7 @@
     "@types/redux-promise": "^0.5.28",
     "ali-oss": "^6.7.0",
     "antd": "4.2.0",
-    "axios": "^0.21.1",
+    "axios": "^0.26.0",
     "babel-plugin-import": "^1.12.2",
     "braft-editor": "^2.3.8",
     "classnames": "^2.2.6",
@@ -28,17 +27,17 @@
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "moment": "^2.24.0",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-canvas-nest": "^1.0.10",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.1.3",
-    "react-router-breadcrumbs-hoc": "^3.2.4",
-    "react-router-dom": "^5.1.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "react-router-breadcrumbs-hoc": "^4.1.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
     "redux-promise": "^0.6.0",
-    "typescript": "^3.8.3"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "cross-env PORT=666 react-app-rewired start",
@@ -61,6 +60,7 @@
     ]
   },
   "devDependencies": {
+    "@iconify/react": "^3.1.4",
     "compression-webpack-plugin": "^3.0.1",
     "customize-cra": "^0.8.0",
     "eslint": "^6.8.0",
@@ -76,8 +76,9 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
-    "prettier": "1.18.2",
-    "react-app-rewired": "^2.1.5",
+    "msw": "^0.38.1",
+    "prettier": "^2.5.1",
+    "react-app-rewired": "^2.2.1",
     "redux-devtools": "^3.5.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack-bundle-analyzer": "^3.6.0"
@@ -91,5 +92,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

public/index.html

@@ -31,7 +31,141 @@
   <!-- 主题 -->
   <link type="text/css" rel="stylesheet/less" href="/color.less">
   <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
+  <div id="root">
+    <style>
+      body, html {
+        background-color: #222f3e;
+      }
+      html[data-theme='dark']{
+        background-color: #222f3e;
+      }
+      html[data-theme='dark'] .app-loading .app-loading-title {
+        color: rgb(255 255 255 / 85%);
+      }
+      .app-loading {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        /*background-color: #f4f7f9;*/
+        background-color: #222f3e;
+      }
+
+      .app-loading .app-loading-wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        transform: translate3d(-50%, -50%, 0);
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      .app-loading .dots {
+        display: flex;
+        padding: 98px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .app-loading .app-loading-title {
+        display: flex;
+        margin-top: 30px;
+        font-size: 30px;
+        /*color: rgb(0 0 0 / 85%);*/
+        color: rgb(222 222 222 / 85%);
+        justify-content: center;
+        align-items: center;
+      }
+
+      .app-loading .app-loading-logo {
+        display: block;
+        width: 90px;
+        margin: 0 auto;
+        margin-bottom: 20px;
+      }
+
+      .dot {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        margin-top: 30px;
+        font-size: 32px;
+        transform: rotate(45deg);
+        box-sizing: border-box;
+        animation: antRotate 1.2s infinite linear;
+      }
+
+      .dot i {
+        position: absolute;
+        display: block;
+        width: 20px;
+        height: 20px;
+        background-color: #0065cc;
+        border-radius: 100%;
+        opacity: 30%;
+        transform: scale(0.75);
+        animation: antSpinMove 1s infinite linear alternate;
+        transform-origin: 50% 50%;
+      }
+
+      .dot i:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+
+      .dot i:nth-child(2) {
+        top: 0;
+        right: 0;
+        animation-delay: 0.4s;
+      }
+
+      .dot i:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        animation-delay: 0.8s;
+      }
+
+      .dot i:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        animation-delay: 1.2s;
+      }
+      @keyframes antRotate {
+        to {
+          transform: rotate(405deg);
+        }
+      }
+      @keyframes antRotate {
+        to {
+          transform: rotate(405deg);
+        }
+      }
+      @keyframes antSpinMove {
+        to {
+          opacity: 100%;
+        }
+      }
+      @keyframes antSpinMove {
+        to {
+          opacity: 100%;
+        }
+      }
+    </style>
+    <div class="app-loading">
+      <div class="app-loading-wrap">
+        <img src="logo.png" class="app-loading-logo" alt="Logo" />
+        <div class="app-loading-dots">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+        <div class="app-loading-title">敏捷开发平台3.0</div>
+      </div>
+    </div>
+  </div>
   <script>
     // 切换为当前主题
     const themeStyle = localStorage.getItem('themeStyle')