init

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

LICENSE

+MIT License
+
+Copyright (c) 2020 liuguisheng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+## 拉取代码
+
+```
+git clone git@git.allhome.com.cn:color-z/react_ts_tempalte.git
+```
+
+## 初始化依赖
+
+```
+cd react_ts_tempalte
+
+npm install
+```
+
+## 启动项目
+
+```
+npm start
+```
+
+## 简介
+
+基于react、ant-ui、typescript的前端框架。
+
+## 在线地址
+
+<a href="https://www.liuguisheng.vip/react-admin-plus/#/login" target="blank">demo</a>
+
+## 技术栈
+ - [TypeScript](https://www.tslang.cn/docs/home.html)
+ - [react](https://zh-hans.reactjs.org/)
+ - [react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)
+ - [ant-ui](https://ant.design/index-cn)
+ - [mobx](https://mobx.js.org/README.html)
+ - [sass](https://www.sass.hk/docs/)
+ - [gh-pages](https://pages.github.com/)
+ - [echarts](https://echarts.apache.org/zh/index.html)
+ - [echarts-for-react](https://www.npmjs.com/package/echarts-for-react)
+ - [copy-to-clipboard](https://www.npmjs.com/package/copy-to-clipboard)
+
+<br/>
+
+
+
+
+
+

package.json

+{
+  "name": "react_ts_tempalte",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "./",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "fast": "npm run build && npm run deploy"
+  },
+  "dependencies": {
+    "antd": "^4.6.2",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^5.3.1",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "copy-to-clipboard": "^3.3.1",
+    "dotenv": "8.2.0",
+    "dotenv-expand": "5.1.0",
+    "echarts": "^4.9.0",
+    "echarts-for-react": "^2.0.16",
+    "file-loader": "4.3.0",
+    "fs-extra": "^8.1.0",
+    "gh-pages": "^3.1.0",
+    "html-webpack-plugin": "4.0.0-beta.11",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "24.9.0",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.2",
+    "lodash": "^4.17.20",
+    "mini-css-extract-plugin": "0.9.0",
+    "mobx": "^5.15.6",
+    "mobx-react": "^6.3.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "^10.2.1",
+    "react-dom": "^16.13.1",
+    "react-grid-layout": "^1.1.1",
+    "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "resolve": "1.15.0",
+    "resolve-url-loader": "3.1.1",
+    "semver": "6.3.0",
+    "terser-webpack-plugin": "2.3.5",
+    "ts-pnp": "1.1.6",
+    "url-loader": "2.3.0",
+    "webpack": "4.42.0",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "workbox-webpack-plugin": "4.3.1"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.161",
+    "@types/react-redux": "^7.1.9",
+    "@types/redux": "^3.6.0",
+    "@types/redux-thunk": "^2.1.0",
+    "@typescript-eslint/parser": "^2.34.0",
+    "@babel/core": "7.9.0",
+    "@svgr/webpack": "4.3.3",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
+    "sass-loader": "8.0.2",
+    "style-loader": "0.23.1",
+    "css-loader": "3.4.2",
+    "awesome-typescript-loader": "^5.2.1",
+    "node-sass": "^4.14.1",
+    "source-map-loader": "^1.0.1",
+    "typescript": "^3.9.7"
+  },
+  "eslintConfig": {
+    "extends": "react-app",
+    "rules": {
+      "no-undef": "off",
+      "no-restricted-globals": "off",
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app"/>
+    <title>react-admin-plus</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/api/home_api.ts

+/**
+* @name home页接口请求 
+* @author liuguisheng
+* @version 2020-09-14 10:47:07 星期一
+*/
+import { NAV_LIST_MOCK } from "../config/nav_mock";
+
+export const getFirstNavList = () => {
+    return {
+        "result": NAV_LIST_MOCK,
+        "statusCode": 1000,
+        "message": "OK"
+    }
+}
+

src/assets/fonts/font1/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/fonts/font2/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/fonts/font3/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/fonts/font3/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1601282836089'); /* IE9 */
+  src: url('iconfont.eot?t=1601282836089#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1601282836089') format('woff'),
+  url('iconfont.ttf?t=1601282836089') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1601282836089#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-falvfagui:before {
+  content: "\e670";
+}
+
+.icon-biaoge:before {
+  content: "\e671";
+}
+
+.icon-hangzheng:before {
+  content: "\e672";
+}
+
+.icon-gonggao:before {
+  content: "\e673";
+}
+
+.icon-fuli:before {
+  content: "\e674";
+}
+
+.icon-huodong:before {
+  content: "\e675";
+}
+
+.icon-cailiaozhidao:before {
+  content: "\e676";
+}
+
+.icon-hegui:before {
+  content: "\e677";
+}
+
+.icon-moban:before {
+  content: "\e678";
+}
+
+.icon-peixun:before {
+  content: "\e679";
+}
+
+.icon-yijianfankui:before {
+  content: "\e67a";
+}
+
+.icon-xinxijishu:before {
+  content: "\e67b";
+}
+
+.icon-xiangce:before {
+  content: "\e67c";
+}
+
+.icon-neikan:before {
+  content: "\e67d";
+}
+
+.icon-xinwen:before {
+  content: "\e67e";
+}
+
+.icon-yonghuzhinan:before {
+  content: "\e67f";
+}
+
+.icon-yuangongpeixun:before {
+  content: "\e680";
+}
+
+.icon-wenjuantiaocha:before {
+  content: "\e681";
+}
+
+.icon-yuangongmulu:before {
+  content: "\e682";
+}
+
+.icon-ziyuan:before {
+  content: "\e683";
+}
+
+.icon-zixun:before {
+  content: "\e684";
+}
+
+.icon-zhengce:before {
+  content: "\e685";
+}
+
+.icon-lipei:before {
+  content: "\e686";
+}
+

src/assets/fonts/font3/iconfont.json

+{
+  "id": "2107219",
+  "name": "react-admin-plus3",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "17456833",
+      "name": "法律法规",
+      "font_class": "falvfagui",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "17456834",
+      "name": "表格",
+      "font_class": "biaoge",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "17456835",
+      "name": "行政",
+      "font_class": "hangzheng",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "17456836",
+      "name": "公告",
+      "font_class": "gonggao",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "17456837",
+      "name": "福利",
+      "font_class": "fuli",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "17456838",
+      "name": "活动",
+      "font_class": "huodong",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "17456839",
+      "name": "材料指导",
+      "font_class": "cailiaozhidao",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "17456840",
+      "name": "合规",
+      "font_class": "hegui",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "17456841",
+      "name": "模板",
+      "font_class": "moban",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "17456842",
+      "name": "培训",
+      "font_class": "peixun",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "17456843",
+      "name": "意见反馈",
+      "font_class": "yijianfankui",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "17456844",
+      "name": "信息技术",
+      "font_class": "xinxijishu",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "17456845",
+      "name": "相册",
+      "font_class": "xiangce",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "17456846",
+      "name": "内刊",
+      "font_class": "neikan",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "17456847",
+      "name": "新闻",
+      "font_class": "xinwen",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "17456848",
+      "name": "用户指南",
+      "font_class": "yonghuzhinan",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "17456849",
+      "name": "员工培训",
+      "font_class": "yuangongpeixun",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "17456850",
+      "name": "问卷调查",
+      "font_class": "wenjuantiaocha",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "17456851",
+      "name": "员工目录",
+      "font_class": "yuangongmulu",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "17456852",
+      "name": "资源",
+      "font_class": "ziyuan",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "17456853",
+      "name": "资讯",
+      "font_class": "zixun",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "17456854",
+      "name": "政策",
+      "font_class": "zhengce",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "17456855",
+      "name": "理赔",
+      "font_class": "lipei",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    }
+  ]
+}

src/components/base/logo_box.tsx

+/**
+* @name logo组件
+* @author liuguisheng
+* @version 2020-09-16 08:48:54 星期三
+*/
+
+import React, { Component } from "react";
+
+interface Props {
+    url: string
+    title: string
+    color: string
+    size: string
+    back: string
+}
+
+interface State {
+
+}
+
+export default class LogoBox extends Component<Props, State> {
+    render () {
+        let { url, title, color, size, back } = this.props;
+        // 样式计算
+        let transform: string = size === 'large' ? 'scale(1)' : 'scale(0.5)'
+        return (
+            <a href="https://www.liuguisheng.vip/" 
+               target="_blank" 
+               rel="noopener noreferrer">
+                <div id="logo-box" 
+                 style={{transform, backgroundColor: back}}>
+                <img src={url} alt=""/>
+                <span style={{color}}>{title}</span>
+            </div>
+            </a>
+        )
+    }
+}
\ No newline at end of file

src/components/business/globle_setting.tsx

+import React, { Component } from "react";
+import { Modal, Button, Switch, Tooltip } from 'antd';
+import { SETTING_ITEM_CONFIG } from '../../config/home_config';
+import GlobalConfigStore from "../../store/global_config";
+import { observer, inject } from "mobx-react";
+import { SettingOutlined } from "@ant-design/icons";
+
+interface Props {
+    globalConfigStore: GlobalConfigStore,
+    handGlobalSetting: Function
+}
+
+interface State {
+    visible: boolean,
+    loading: boolean,
+    collapsed: boolean,
+    background: string,
+    theme: string,
+    mode: string,
+    overflowY: string
+}
+
+@inject('homeStore')
+@observer
+export default class GlobleSetting extends Component<Props, State> {
+    constructor(prop: Props) {
+        super(prop);
+        this.state = {
+            visible: false,
+            loading: false,
+            collapsed: false,
+            background: '#fff',
+            theme: 'light',
+            mode: 'inline',
+            overflowY: 'scroll'
+        }
+    }
+
+    render() {
+        let { handleOk, handleCancel, showModal, createConfigComponent } = this;
+        let { visible, loading } = this.state;
+        return (
+            <div id="globle-setting">
+                <Tooltip title="全局设置">
+                    <SettingOutlined style={{ fontSize: '18px', color: '#1fb19e' }} onClick={showModal} />
+                </Tooltip>
+                <Modal className="globle-setting_dialog"
+                    title="全局设置"
+                    visible={visible}
+                    onOk={handleOk}
+                    onCancel={handleCancel}
+                    footer={[
+                        <Button key="back" onClick={handleCancel}>取消</Button>,
+                        <Button key="submit"
+                            type="primary"
+                            loading={loading}
+                            onClick={handleOk}>
+                            确定
+                        </Button>,
+                    ]}>
+                    {/* 配置列表 */}
+                    {createConfigComponent()}
+                </Modal>
+            </div>
+        )
+    }
+
+    /**
+    * @name 打开弹窗
+    * @author liuguisheng
+    * @version 2020-09-14 16:09:37 星期一
+    */
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    }
+
+    /**
+    * @name 点击确定
+    * @description 
+    * @author liuguisheng
+    * @version 2020-09-14 16:09:54 星期一
+    */
+    handleOk = () => {
+        this.setState({ loading: true });
+        setTimeout(() => {
+            this.setState({ loading: false, visible: false });
+            let { collapsed, background, theme, mode, overflowY } = this.state;
+            this.props.handGlobalSetting({ collapsed, background, theme, mode, overflowY })
+        }, 1000);
+
+        
+    }
+
+    /**
+    * @name 点击取消
+    * @author liuguisheng
+    * @version 2020-09-14 16:10:20 星期一
+    */
+    handleCancel = () => {
+        this.setState({
+            visible: false,
+        });
+    }
+
+    /**
+    * @name 展开收起左侧导航
+    * @params { boolean } value 开关绑定的value
+    * @author liuguisheng
+    * @version 2020-09-14 09:56:33 星期一
+    */
+    toggleCollapsed = (value: boolean) => {
+        this.setState({
+            collapsed: value,
+            // overflowY: !value ? 'scroll' : 'auto'
+        });
+    }
+
+    /**
+    * @name 更改主题
+    * @params { boolean } value 开关绑定的value
+    * @author liuguisheng
+    * @version 2020-09-14 09:57:49 星期一
+    */
+    changeTheme = (value: boolean) => {
+        this.setState({
+            background: value ? '#000c27' : '#fff',
+            theme: value ? 'dark' : 'light'
+        });
+    }
+
+    /**
+    * @name 更改主题
+    * @params { boolean } value 开关绑定的value
+    * @author liuguisheng
+    * @version 2020-09-14 09:57:49 星期一
+    */
+   onlyChangeTheme = (value: boolean) => {
+    this.setState({
+        theme: value ? 'dark' : 'light'
+    });
+}
+
+    /**
+    * @name 更改导航的排列模式
+    * @params { boolean } value 开关绑定的value
+    * @author liuguisheng
+    * @version 2020-09-14 09:58:14 星期一
+    */
+    changeMode = (value: boolean) => {
+        this.setState({
+            mode: value ? 'vertical' : 'inline',
+            overflowY: !value ? 'scroll' : 'auto'
+        });
+    }
+
+    /**
+    * @name 创建配置组件
+    * @description 
+    * @return { Array } 生成的配置组件
+    * @author liuguisheng
+    * @version 2020-09-14 10:06:57 星期一
+    */
+    createConfigComponent = () => {
+        // 生成设置列表并返回配置组件
+        return SETTING_ITEM_CONFIG.map((el, index) => {
+            let { title, checkedChildren, unCheckedChildren, event, defaultValue } = el;
+            return <div className="setting-item" key={index}>
+                <span className="label">{title}</span>
+                <Switch checkedChildren={checkedChildren}
+                    unCheckedChildren={unCheckedChildren}
+                    defaultChecked={defaultValue}
+                    onClick={(e) => (this as any)[event](e)} />
+            </div>
+        })
+    }
+}
\ No newline at end of file

src/config/home_config.ts

+/**
+* @name home配置文件
+* @author liuguisheng
+* @version 2020-09-14 10:16:06 星期一
+*/
+
+
+import { SettingItem, NavItem } from "../interface/home_interface";
+import {
+    AppstoreOutlined,
+    PieChartOutlined,
+    DesktopOutlined,
+    ContainerOutlined,
+    MailOutlined
+} from '@ant-design/icons';
+
+
+// 设置组件配置
+export const SETTING_ITEM_CONFIG: SettingItem[] = [
+    {
+        title: '全局黑暗模式:',
+        checkedChildren: '开启',
+        unCheckedChildren: '关闭',
+        event: 'changeTheme',
+        defaultValue: false
+    },
+    {
+        title: '深色菜单:',
+        checkedChildren: '开启',
+        unCheckedChildren: '关闭',
+        event: 'onlyChangeTheme',
+        defaultValue: true
+    },
+    {
+        title: '导航排列方式:',
+        checkedChildren: '垂直',
+        unCheckedChildren: '内嵌',
+        event: 'changeMode',
+        defaultValue: false
+    },
+    {
+        title: '导航是否展开:',
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+        event: 'toggleCollapsed',
+        defaultValue: false
+    }
+]
+
+// icon配置文件
+export const  ICON_LIST_CONFIG =  {
+    AppstoreOutlined,
+    PieChartOutlined,
+    DesktopOutlined,
+    ContainerOutlined,
+    MailOutlined
+}
+
+// 标签页默认配置
+export const INITIAL_PANES: any[] = [
+    {title: "主页", content: "主页", key: "0"}
+];
+
+// 导航配置
+export const MENU_LIST: NavItem[] = [
+    {
+        name: '主页',
+        key: 'index'
+    },
+    {
+        name: '字体图标',
+        key: 'iconfont'
+    },
+    {
+        name: '图表',
+        key: 'echarts'
+    },
+    {
+        name: '表格',
+        key: 'table'
+    }
+]
\ No newline at end of file

src/config/message_config.ts

+/**
+* @name 消息提示统一配置
+* @author liuguisheng
+* @version 2020-09-19 14:02:48 星期六
+*/
+
+export const MESSAGE_CONFIG = {
+    logoSuccess: '登录成功！',
+    passwordEmpty: '请输入密码！',
+    usernameEmpty: '请输入账号！',
+    getStorageError: '读取数据失败!',
+    setStorageError: '存入数据失败!',
+    removeStorageError: '删除数据失败!',
+    clearStorageError: '清空数据失败'
+}
\ No newline at end of file

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import Router from "./router/router";
+import Store from "./store/index";
+import { Provider } from "mobx-react";
+import './styles/index.scss';
+import 'antd/dist/antd.css';
+import './assets/fonts/font1/iconfont.css';
+import './assets/fonts/font2/iconfont.css';
+import './assets/fonts/font3/iconfont.css';
+
+
+ReactDOM.render(
+  <Provider {...Store}>
+    <Router></Router>
+  </Provider>,
+  document.getElementById('root')
+);

src/interface/home_interface.ts

+/**
+* @name home页接口
+* @author liuguisheng
+* @version 2020-09-14 10:17:15 星期一
+*/
+
+// 设置项接口
+export interface SettingItem {
+    title: string,
+    checkedChildren: string,
+    unCheckedChildren: string,
+    event: string,
+    defaultValue: boolean
+}
+
+// 导航接口
+export interface NavItem {
+    [ prop:string]: any
+}
+
+// 标签页接口
+export interface TabItem {
+    title: string,
+    content: string,
+    key: string
+}
+
+// 图标字体接口
+export interface IconItem {
+    font_class: string,
+    icon_id: string,
+    name: string,
+    unicode: string
+    unicode_decimal: number
+}

src/interface/login_interface.ts

+/**
+* @name 登录页接口
+* @author liuguisheng
+* @version 2020-09-15 17:50:40 星期二
+*/
+
+export interface loginForm {
+    username: string
+    password: string
+}
\ No newline at end of file

src/pages/home/child/echarts_page.tsx

+import React, { Component } from 'react';
+import { TabItem } from "../../../interface/home_interface";
+import ReactEcharts from "echarts-for-react";
+import { Button } from "antd";
+interface Props {
+  prop: TabItem
+}
+
+interface State {
+  bgc: string
+}
+
+
+export default class Page extends Component<Props, State> {
+  constructor ( props: Props) {
+    super(props);
+    this.state = {
+      bgc: '#2c343c'
+    }
+
+  }
+
+  render = () => {
+    // let { title } = this.props.prop;
+    let { bgc } = this.state;
+    const option = {
+      backgroundColor: bgc,
+      series: [
+        {
+          name: '访问来源',
+          type: 'pie',
+          radius: '55%',
+          data: [
+            { value: 235, name: '视频广告' },
+            { value: 274, name: '联盟广告' },
+            { value: 310, name: '邮件营销' },
+            { value: 335, name: '直接访问' },
+            { value: 400, name: '搜索引擎' }
+          ],
+          roseType: 'angle',
+          label: {
+            normal: {
+              textStyle: {
+                color: 'rgba(255, 255, 255, 0.3)'
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.3)'
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              shadowBlur: 200,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+
+    let { changeBGC } = this;
+
+    return (
+      <div>
+        <ReactEcharts
+          option={option}
+          style={{ width: '1000px' }}
+          notMerge={true}
+          lazyUpdate={true}
+          theme={"theme_name"} />
+        <Button onClick={changeBGC}>change</Button>
+      </div>
+    )
+  }
+
+  changeBGC = () => {
+    this.setState({
+      bgc: this.state.bgc === '#ccc' ? '#2c343c' : '#ccc'
+    })
+  }
+}
\ No newline at end of file

src/pages/home/child/frame_page.tsx

+import React, {Component} from 'react';
+import { TabItem } from "../../../interface/home_interface";
+interface Props {
+    prop: TabItem
+}
+
+interface State {
+
+}
+
+export default class FramePage extends Component<Props, State> {
+    render = () => {
+        let { title } = this.props.prop;
+        return (
+            <div>{title}</div>
+        )
+    }
+}
\ No newline at end of file

src/pages/home/child/iconfont.page.tsx

+import React, { Component } from 'react';
+import { Collapse, Card, message } from 'antd';
+import font1 from "../../../assets/fonts/font1/iconfont.json";
+import font2 from "../../../assets/fonts/font2/iconfont.json";
+import font3 from "../../../assets/fonts/font3/iconfont.json";
+import { IconItem } from "../../../interface/home_interface";
+import copy from 'copy-to-clipboard';
+
+
+
+const { Panel } = Collapse;
+
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export default class IconfontPage extends Component<Props, State> {
+    render = () => {
+        let { createCardList } = this;
+        return (
+            <div className="iconfont-page">
+                <Collapse defaultActiveKey={['1']}>
+                    <Panel header="淘票票官方图标库" key="1">
+                        {createCardList(font1.glyphs)}
+                    </Panel>
+                    <Panel header="支付宝官方图标库" key="2">
+                        {createCardList(font2.glyphs)}
+                    </Panel>
+                    <Panel header="创意公司内部主题图标" key="3">
+                        {createCardList(font3.glyphs)}
+                    </Panel>
+                </Collapse>
+            </div>
+        )
+    }
+
+    /**
+    * @name 创建图标字体展示列表
+    * @params { Array } 字体配置列表
+    * @return { void }
+    * @author liuguisheng
+    * @version 2020-09-28 10:50:11 星期一
+    */
+    createCardList = ( list: IconItem[] ) => {
+        let { copyIconfont } = this;
+        return list.map( (el: IconItem) => {
+            let className: string = `iconfont icon-${el.font_class}`
+            return (
+                <Card hoverable key={el.icon_id}>
+                   <div className="icon-box"
+                        onClick={() => copyIconfont(className)}>
+                    <i className={className}
+                        style={{fontSize: '36px'}}></i>
+                        <p>{el.name}</p>
+                    </div> 
+                </Card>
+            )
+        })
+    }
+
+    /**
+    * @name 复制图标className
+    * @params { string } className
+    * @author liuguisheng
+    * @version 2020-09-28 16:50:55 星期一
+    */
+    copyIconfont = ( className: string) => {
+        if ( copy(className) ) {
+            message.success('已复制到剪贴板。');
+        }else {
+            message.error('复制失败!');
+        }
+    }
+}
\ No newline at end of file

src/pages/home/child/index_page.tsx

+
+
+
+
+import React, { Component } from "react";
+
+interface Props {
+
+}
+
+interface State {
+}
+
+export default class IndexPage extends Component<Props, State> {
+    
+    render = () => {
+        return (
+            <div>主页</div>
+        )
+    }
+}
\ No newline at end of file

src/pages/home/child/table_page.tsx

+import React, {Component} from 'react';
+
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export default class TablePage extends Component<Props, State> {
+    render = () => {
+    return (
+        <div>
+           table页面
+        </div>
+    )
+    }
+}
\ No newline at end of file

src/pages/home/component_factory.tsx

+/**
+* @name 页面渲染简单工厂
+* @description 所有涉及到和导航对应的自定义的页面，统一在这里注册，其他默认iframe页面，需要在统一注册中心注册路由信息
+* @param { Object } config 组件配置
+* @returns { String } 组件
+* @author liuguisheng
+* @version 2020-09-20 09:56:24 星期天
+*/
+import React from "react";
+import { TabItem } from "../../interface/home_interface";
+
+
+import framePage from "./child/frame_page";
+import indexPage from "./child/index_page";
+import echartsPage from "./child/echarts_page";
+import iconfontPage from "./child/iconfont.page";
+import tablePage from "./child/table_page";
+
+// 页面注册(目前是按照标题对应页面，后期按照页面的唯一标识对应)
+const components:{[prop: string]: any} = {
+    '主页': indexPage,
+    '图表': echartsPage,
+    '字体图标': iconfontPage,
+    '表格': tablePage
+}
+
+// 渲染页面
+export const componentFactory = ( config: TabItem ) => {
+    let { title } = config;
+    const Component = components[title];
+    if( Component === undefined ) return React.createElement(framePage, {prop: config})
+    return React.createElement(Component, {prop: config})
+}    
\ No newline at end of file

src/pages/home/home.tsx

+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import HomeStore from "../../store/home";
+import GlobalConfigStore from "../../store/global_config";
+import { Menu, Tabs } from "antd";
+import GlobleSetting from "../../components/business/globle_setting";
+import { HomeService } from "../../service/home_service";
+import { NavItem, TabItem } from "../../interface/home_interface";
+import LogoBox from "../../components/base/logo_box";
+import { INITIAL_PANES, MENU_LIST } from "../../config/home_config";
+import { componentFactory } from "./component_factory";
+import { StorageMethods } from '../../utils/storage_utils';
+
+
+const LOGO: string = require("../../assets/images/logo.png");
+ 
+// 引入子导航
+const { SubMenu } = Menu;
+// 引入字标签
+const { TabPane } = Tabs;
+
+// prop接口
+interface Props {
+    homeStore: HomeStore
+    location: any
+    globalConfigStore: GlobalConfigStore
+}
+
+// state接口
+interface State {
+    collapsed: boolean,
+    background: string,
+    theme: string,
+    mode: string,
+    overflowY: string,
+    activeKey: string,
+    panes: TabItem[],
+    username: string
+}
+
+@inject('homeStore')
+@inject('globalConfigStore')
+@observer
+export default class Home extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props)
+        this.state = {
+            collapsed: false,
+            background: '#fff',
+            theme: 'dark',
+            mode: 'inline',
+            overflowY: 'scroll',
+            activeKey: '0',
+            panes: INITIAL_PANES,
+            username: 'admin'
+        }
+    }
+    componentDidMount = () => {
+        let username: string = new StorageMethods().get('username');
+        this.setState({username})
+
+    }
+    componentDidUpdate = () => {
+        // 更改激活标签页样式
+        let { background } = this.state;
+        let activeTab = document.querySelector('.ant-tabs-tab-active');
+        if (activeTab) {
+            (activeTab as any).style.background = background;
+        } 
+    }
+    render = () => {
+        let { createMenu, clickMenuItem, handGlobalSetting, onChange, onEdit  } = this;
+        let { background, collapsed, theme, mode, panes, activeKey, username } = this.state;
+        
+        // 样式计算
+        let tabs = document.querySelectorAll('.ant-tabs-tab');
+        tabs.length && tabs.forEach( (el:any) =>  el.style.background=background);
+        let logoColor: string = theme !== 'dark' ? '#001529' : '#fff';
+        let color: string = background === '#fff' ? '#001529' : '#fff';
+        let size: string = !collapsed ? 'large' : 'small';
+        let flex: string = !collapsed ? '0 0 240px' : '0 0 75px';
+        let leftBack: string = theme === 'dark' ? '#001529' : '#fff';
+
+        return (
+            <div id='home' style={{ background }}>
+                <div className="left" 
+                     style={{ flex,
+                              background: leftBack}}>
+                        <LogoBox url={LOGO} 
+                            title={'React-Admin-Plus'} 
+                            color={ logoColor }
+                            size={size} 
+                            back={leftBack}></LogoBox>
+                    <Menu theme={theme as any}
+                        mode={mode as any}
+                        inlineCollapsed={collapsed}
+                        className="meun-box"
+                        defaultSelectedKeys={['index']}>
+                        {/* 主页导航 */}
+                        {
+                            MENU_LIST.map((el:NavItem) => {
+                                let { key, name } = el;
+                                return <Menu.Item key={key} 
+                                           onClick={() => clickMenuItem(el)}>{name}</Menu.Item>
+                            })
+                        }
+                        {/* 树状导航 */}
+                        {createMenu()}
+                    </Menu>
+                </div>
+                <div className="right">
+                    <div className="header-box">
+                        {/* 顶部标签 */}
+                        <Tabs type="editable-card"
+                            style={{ color }}
+                            hideAdd={true}
+                            onChange={onChange}
+                            onEdit={onEdit}
+                            tabBarExtraContent={{right: <div className="header-box_right">
+                                                            <div className="user-box">你好！ {username}</div>
+                                                            <GlobleSetting globalConfigStore={new GlobalConfigStore()}
+                                                                        handGlobalSetting={handGlobalSetting} />
+                                                        </div>}}
+                            activeKey={activeKey}>
+                             {panes.map((pane: TabItem) => (
+                                <TabPane tab={pane.title}
+                                    key={pane.key}>
+                                    {/* 动态标签内容 */}
+                                    {componentFactory(pane)}
+                                </TabPane>))}
+                        </Tabs>
+                    </div>
+                    {/* <div className="line"></div> */}
+                </div>
+            </div>
+        )
+    }
+
+    /**
+    * @name 创建导航
+    * @return { Array } 菜单列表
+    * @author liuguisheng
+    * @version 2020-09-14 11:11:17 星期一
+    */
+   createMenu = () => {
+        // 获取导航树
+        let NavList = HomeService.getFirstNameList();
+        let { createNavItem } = this;
+        // 返回组件
+        return createNavItem(NavList)
+    }
+
+    /**
+    * @name 创建导航子集
+    * @params { Array } NavList 导航配置
+    * @return { Array } 导航列表
+    * @author liuguisheng
+    * @version 2020-09-14 14:45:55 星期一
+    */
+    createNavItem = (NavList: NavItem) => {
+        let { clickMenuItem, createNavItem } = this;
+        // 递归创建导航
+        return NavList.map((el: NavItem) => {
+            if (el.children && el.children.length && Object.keys(el.children[0]).length) {
+                return <SubMenu key={el.code} 
+                                title={el.name}>{createNavItem(el.children)}</SubMenu>
+            } else {
+                return <Menu.Item key={el.code}
+                                  onClick={() => clickMenuItem(el)}>{el.name}</Menu.Item>
+            }
+        })
+    }
+
+    /**
+    * @name 点击菜单触发
+    * @params { Object } navItem 导航配置
+    * @author liuguisheng
+    * @version 2020-09-14 14:49:56 星期一
+    */
+    clickMenuItem = (navItem: NavItem) => {
+        // 找到标题
+        let { name } = navItem;
+        // 生成随机key
+        let key: string = Math.random().toString();
+        // // 判断是否添加过标签，添加过就不在添加并且激活的key为之前的key
+        let hasTitle = INITIAL_PANES.find(el => el.title === name );
+        let activeKey: string = hasTitle === undefined ? key : hasTitle.key;
+        hasTitle === undefined && INITIAL_PANES.push({title: name, content: name, key });
+        // // 更新状态
+        this.setState({ panes: INITIAL_PANES, activeKey });
+    }
+
+    /**
+    * @name 接收的子组件传递的配置
+    * @params { Object } e 全局配置
+    * @author liuguisheng
+    * @version 2020-09-15 16:09:36 星期二
+    */
+    handGlobalSetting = (e: State) => {
+        let { collapsed, background, theme, mode, overflowY } = e;
+        this.setState({ collapsed, background, theme, mode, overflowY });
+    }
+
+    /**
+    * @name 标签页change事件
+    * @author liuguisheng
+    * @version 2020-09-17 08:49:26 星期四
+    */
+    onChange = (activeKey: string) => {
+        this.setState({ activeKey });
+    }
+
+    /**
+    * @name 标签页编辑状态下删除事件
+    * @params { String } targetKey 点击的key
+    * @params { String } action 发生的动作
+    * @author liuguisheng
+    * @version 2020-09-17 09:05:27 星期四
+    */
+    onEdit = (targetKey: string, action: string) => {
+        if ( action === 'remove') {
+            // 找到删除的索引
+            let removeIndex: number = INITIAL_PANES.findIndex( el => el.key === targetKey);
+            // 判断并生成激活的key
+            let activeKey: string;
+            if ( removeIndex === 0 && INITIAL_PANES.length>1 ) activeKey = INITIAL_PANES[removeIndex+1].key;
+            if ( removeIndex >0) activeKey = INITIAL_PANES[removeIndex-1].key;
+            // 删除tab并更新
+            INITIAL_PANES.splice(removeIndex, 1);
+            this.setState({panes: INITIAL_PANES, activeKey});
+        }
+    }
+}
\ No newline at end of file

src/pages/login/login.tsx

+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Form, Input, Button, message } from 'antd';
+import { loginForm } from '../../interface/login_interface';
+import { MESSAGE_CONFIG } from '../../config/message_config';
+import { StorageMethods } from '../../utils/storage_utils';
+
+// prop接口
+interface Prop {
+    history: any
+}
+
+// state接口
+interface State {
+    loading: boolean,
+    backgroundColor: string
+}
+
+
+@inject('homeStore')
+@observer
+export default class Login extends Component<Prop, State> {
+    constructor(prop: Prop) {
+        super(prop);
+        this.state = {
+            loading: false,
+            backgroundColor: '#2124827'
+        }
+    }
+
+    render = () => {
+        setTimeout(() => {
+            let backgroundColor: string = '#' + (Math.random() * 2333333).toFixed();
+            this.setState({backgroundColor})
+        },100)
+        let { onFinish } = this;
+        let { loading, backgroundColor } = this.state;
+        return (
+            <div id="login" 
+                 style={{backgroundColor}}>
+                <iframe className="github-star"
+                        title="github star"
+                        width="100px" height="20px"
+                        frameBorder="0" scrolling="0"
+                        src="https://img.shields.io/github/stars/qisi007/react-admin-plus?style=social&label=Star&maxAge=2592000">
+                </iframe>
+                <h1>React-Admin-Plus</h1>
+                <Form 
+                    name="basic"
+                    className="form"
+                    size="large"
+                    onFinish={onFinish}>
+
+                    <Form.Item
+                        label="账号"
+                        name="username"
+                        rules={[{ required: true, message: MESSAGE_CONFIG.usernameEmpty }]}>
+                        <Input placeholder="请输入账号"/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="密码"
+                        name="password"
+                        rules={[{ required: true, message: MESSAGE_CONFIG.passwordEmpty }]}>
+                        <Input.Password placeholder="请输入密码"/>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button type="primary"
+                            htmlType="submit"
+                            loading={loading}>登录</Button>
+                    </Form.Item>
+                </Form>
+                <div className="tips">*账号密码随便输入</div>
+            </div>
+        )
+    }
+
+    /**
+    * @name 登录表单成功
+    * @params { object } form 登录表单
+    * @author liuguisheng
+    * @version 2020-09-15 17:54:29 星期二
+    */
+    onFinish = (form: loginForm) => {
+        let { username } = form;
+        // 将用户姓名存入localStorageb并提示登录成功
+        new StorageMethods().set('username', username);
+        message.success(MESSAGE_CONFIG.logoSuccess);
+        // 跳转到home页
+        this.props.history.push({ pathname: '/home', state: form })
+    };
+}
\ No newline at end of file

src/react-app-env.d.ts

+/// <reference types="react-scripts" />

src/router/router.tsx

+import React, { Component, Fragment }  from "react";
+import { HashRouter, Route, Redirect, Switch } from "react-router-dom";
+import Home from "../pages/home/home";
+import Login from "../pages/login/login";
+
+class Router extends Component {
+    render () {
+        return (
+            <HashRouter>
+                <Fragment>
+                    <Switch>
+                        <Route  path="/login" component={ Login }></Route>
+                        <Route path="/home" component={ Home }></Route>
+                        <Redirect to= {"/login"}></Redirect>
+                    </Switch>
+                </Fragment>
+            </HashRouter>
+        )
+    }
+}
+
+export default Router
\ No newline at end of file

src/service/home_service.ts

+/**
+* @name home页业务
+* @author liuguisheng
+* @version 2020-09-14 11:02:12 星期一
+*/
+
+import { getFirstNavList } from "../api/home_api"
+
+export class HomeService {
+    /**
+    * @name 获取一级导航
+    * @return { Array } 一级导航
+    * @author liuguisheng
+    * @version 2020-09-14 11:09:55 星期一
+    */
+    static getFirstNameList = (): any[] => {
+        return  getFirstNavList().result;
+    }
+}
\ No newline at end of file

src/store/global_config.ts

+import { observable, action } from "mobx";
+
+class GlobalConfigStore {
+    @observable
+    globalTheme: string = 'light'
+
+    @action
+    setGlobalTheme () {
+        this.globalTheme = 'dark';
+    }
+
+}
+
+export default GlobalConfigStore;
\ No newline at end of file

src/store/home.ts

+import { observable, action } from "mobx";
+
+class HomeStore {
+    @observable
+    home = 0
+    str = "首页";
+
+    @action
+    add () {
+        this.home +=1;
+    }
+
+    @action
+    less () {
+        this.home -=1;
+    }
+
+}
+
+export default HomeStore;
\ No newline at end of file

src/store/index.ts

+import HomeStore from './home';
+import LoginStore from './login';
+import GlobalConfigStore from './global_config';
+
+let homeStore = new HomeStore();
+let loginStore = new LoginStore();
+let globalConfigStore = new GlobalConfigStore();
+
+
+const stores = {
+    homeStore,
+    loginStore,
+    globalConfigStore
+}
+
+export default stores;
\ No newline at end of file

src/store/login.ts

+import { observable } from "mobx";
+
+class LoginStore {
+    @observable
+    login = '登录'
+}
+
+export default LoginStore;
\ No newline at end of file

src/styles/base/logo_box.scss

+#logo-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100px;
+    justify-content: center;
+    cursor: pointer;
+
+    img {
+        transition: all 10s;
+
+        &:hover {
+            transform: rotate(-360000deg);
+            transition: all 100s;
+        }
+    }
+
+    span {
+        font-size: 18px;
+        font-family: 'Micsoft YaHei';
+        font-weight: 700;
+        color: #5c5c5c;
+        margin-left: 10px;
+    }
+}
\ No newline at end of file

src/styles/business/globle_setting.scss

+#globle-setting {
+    margin: 0 30px 0 20px;
+}
+
+.globle-setting_dialog {
+    .setting-item {
+        display: flex;
+        height: 40px;
+        margin-left: 10px;
+        
+        .label {
+            margin-right: 10px;
+            color:  #5c5c5c;
+        }
+    }
+}

src/styles/common/common.scss

+.background-black {
+    background: rgba(0, 0, 0, 0.85) !important;
+}
\ No newline at end of file

src/styles/common/reset.scss

+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file

src/styles/index.scss

+@import "./common/reset.scss";
+@import "./common/common.scss";
+@import "./base/logo_box.scss";
+@import "./business/globle_setting.scss";
+@import "./pages/home.scss";
+@import "./pages/login.scss";
+
+
+body {
+    &::-webkit-scrollbar {
+        display: none;
+      }
+}
\ No newline at end of file

src/styles/pages/home.scss

+#home {
+    display: flex;
+    justify-content: space-between;
+
+    // 根据屏幕宽度动态计算标签页宽度
+    @for $i from 0 to 300 {
+        @media screen and (max-width: 2000px - 5px * $i) and (min-width: 1900px - 5px * $i){
+            .ant-tabs > .ant-tabs-nav {
+                width: 1800px - 5px * $i;
+            }
+        }
+    }
+
+    .left {
+        height: 100vh;
+        border-right: 1px solid rgb(204, 204, 204);
+        overflow-y: scroll;
+        box-sizing: border-box;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        
+    }
+
+    .right {
+        width: 100%;
+        height: 100vh;
+        overflow-y: scroll;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        .header-box {
+            display: flex;
+            justify-content: space-between;
+                       
+            .header-box_right {
+                width: 180px;
+                display: flex;
+
+                .user-box {
+                    text-align: end;
+                    overflow: hidden;
+                    color: #1fb19e;
+                    margin-top: -3px;
+                }
+            }
+        }
+
+        .line {
+            width: 100%;
+            height: 1px;
+            background-color: #ccc;
+            position: fixed;
+            top: 40px;
+
+
+        }
+
+        .ant-tabs-nav {
+            position: fixed;
+            z-index: 999;
+        }
+
+        .ant-tabs-content-holder {
+            margin-top: 50px;
+        }
+    }
+
+    // 标签页样式修改
+    .ant-tabs-tab  {
+        border: none !important;
+    }
+
+    .anticon-close {
+        color: #ccc;
+        transition: color .3s;
+
+        &:hover {
+            color: #1890ff;
+            transition: color .3s;
+        }
+    }
+    
+    .ant-tabs-top > .ant-tabs-nav::before {
+        border-bottom: none;
+    }
+
+}
+
+
+// 图标字体页面
+.iconfont-page {
+    margin: 20px 0 0 20px;
+    padding-right: 50px;
+
+    .ant-collapse-content-box {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .ant-card {
+        width: 150px;
+        margin: 0 10px 10px 0;
+        text-align: center;
+        color: #5c5c5c;
+
+
+        .ant-card-body {
+            padding: 0;
+        }
+
+        .icon-box {
+            transition: all .3s;
+            padding: 24px;
+            
+            &:hover {
+                color: #1fb19e;
+                transform: scale(1.2) rotate(360deg);
+                transition: all .3s;
+            }
+        }
+    }
+}
+
+
+
+

src/styles/pages/login.scss

+#login {
+    width: 100%;
+    height: 100vh;
+    transition: background-color 1s;
+    position: relative;
+    text-align: center;
+    overflow: hidden;
+
+
+    &::-webkit-scrollbar {
+        display: none !important;
+      }
+
+    .github-star {
+        position: absolute;
+        right: 8%;
+        top: 100px;
+    }
+    
+    h1 {
+        color: #fff;
+        font-size: 48px;
+        line-height: 100px;
+        margin-top: 300px;
+    }
+
+    .form {
+        width: 400px;
+        margin-left: 50%;
+        transform: translateX(-50%);
+
+        .ant-form-item-required {
+            color: #fff;
+        }
+
+        .ant-form-item-explain {
+            text-align: left;
+        }
+    }
+
+    .tips {
+        color: #ccc;
+        margin-left: 300px;
+        font-size: 10px;
+    }
+
+
+   
+}
\ No newline at end of file

src/types/index.d.ts

+declare module "mobx";
+declare module "mobx-react";
+declare module "react-grid-layout";
+declare module "'@ant-design/charts";
\ No newline at end of file

src/utils/storage_utils.ts

+
+/**
+* @name storage存储数据工具
+* @author liuguisheng
+* @version 2020-10-06 18:31:17 星期二
+*/
+
+import { MESSAGE_CONFIG } from "../config/message_config";
+
+
+export class StorageMethods {
+    set ( key: string, value: string) {
+        try {
+            localStorage.setItem(key, value);
+        } catch {
+            console.error(MESSAGE_CONFIG.setStorageError);
+        }
+    }
+
+    get ( key: string ): string {
+        try {
+            return localStorage.getItem(key);
+        } catch {
+            console.error(MESSAGE_CONFIG.getStorageError);
+        }
+    }
+
+    remove ( key: string ) {
+        try {
+            return localStorage.removeItem(key);
+        } catch {
+            console.error(MESSAGE_CONFIG.removeStorageError);
+        }
+    }
+
+    clear () {
+        try {
+            localStorage.clear();
+        } catch {
+            console.error(MESSAGE_CONFIG.clearStorageError);
+        }
+    }
+}
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es6",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "strictNullChecks": false,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "./src/**/*"
+  ]
+}