├── .babelrc
├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── assets
    │   ├── font
    │   │   ├── demo.css
    │   │   ├── demo_fontclass.html
    │   │   ├── demo_symbol.html
    │   │   ├── demo_unicode.html
    │   │   ├── iconfont.css
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.js
    │   │   ├── iconfont.svg
    │   │   ├── iconfont.ttf
    │   │   └── iconfont.woff
    │   └── img
    │   │   └── defaultUser.jpg
    ├── components
    │   ├── ContentMain
    │   │   └── index.js
    │   ├── CustomBreadcrumb
    │   │   └── index.js
    │   ├── CustomMenu
    │   │   └── index.js
    │   ├── HeaderBar
    │   │   ├── img
    │   │   │   ├── 01.jpg
    │   │   │   ├── 02.jpg
    │   │   │   ├── 03.jpg
    │   │   │   └── 04.jpg
    │   │   └── index.js
    │   ├── Loading
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── Loading2
    │   │   ├── data.json
    │   │   └── index.js
    │   ├── PrivateRoute
    │   │   └── index.js
    │   ├── PromptBox
    │   │   └── index.js
    │   ├── SiderNav
    │   │   └── index.js
    │   └── TypingCard
    │   │   └── index.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── registerServiceWorker.js
    ├── routes
    │   ├── About
    │   │   └── index.js
    │   ├── Display
    │   │   ├── CarouselDemo
    │   │   │   ├── css
    │   │   │   │   └── style.css
    │   │   │   └── index.js
    │   │   ├── CollapseDemo
    │   │   │   └── index.js
    │   │   ├── ListDemo
    │   │   │   └── index.js
    │   │   ├── TableDemo
    │   │   │   └── index.js
    │   │   └── TabsDemo
    │   │   │   └── index.js
    │   ├── Entry
    │   │   ├── FormDemo
    │   │   │   ├── FormDemo1.js
    │   │   │   ├── FormDemo2.js
    │   │   │   ├── css
    │   │   │   │   └── formDeni2.css
    │   │   │   └── store.js
    │   │   └── UploadDemo
    │   │   │   └── index.js
    │   ├── Feedback
    │   │   ├── ModalDemo
    │   │   │   └── index.js
    │   │   ├── NotificationDemo
    │   │   │   └── index.js
    │   │   └── SpinDemo
    │   │   │   └── index.js
    │   ├── General
    │   │   ├── ButtonDemo
    │   │   │   └── index.js
    │   │   └── IconDemo
    │   │   │   └── index.js
    │   ├── Home
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── Index
    │   │   └── index.js
    │   ├── Login
    │   │   ├── LoginForm.js
    │   │   ├── RegisterForm.js
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── Login2
    │   │   ├── img
    │   │   │   ├── bg2.jpg
    │   │   │   ├── bg3.jpg
    │   │   │   ├── bg3a.jpg
    │   │   │   ├── bg4.jpg
    │   │   │   ├── bg5.jpg
    │   │   │   ├── owl-login-arm.png
    │   │   │   ├── owl-login.png
    │   │   │   └── snow.jpg
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── Navigation
    │   │   ├── DropdownDemo
    │   │   │   └── index.js
    │   │   ├── MenuDemo
    │   │   │   └── index.js
    │   │   └── StepsDemo
    │   │   │   └── index.js
    │   └── Other
    │   │   ├── AnimationDemo
    │   │       └── index.js
    │   │   ├── ChartDemo
    │   │       └── index.js
    │   │   ├── DraftDemo
    │   │       ├── index.js
    │   │       └── style.css
    │   │   ├── ErrorPage
    │   │       ├── index.js
    │   │       └── style.css
    │   │   ├── GalleryDemo
    │   │       ├── img
    │   │       │   ├── 01.jpeg
    │   │       │   ├── 02.jpeg
    │   │       │   ├── 03.jpeg
    │   │       │   ├── 04.jpeg
    │   │       │   ├── 05.jpeg
    │   │       │   ├── 06.jpeg
    │   │       │   ├── 07.jpeg
    │   │       │   ├── 08.jpeg
    │   │       │   ├── 09.jpeg
    │   │       │   ├── 10.jpeg
    │   │       │   ├── 11.jpeg
    │   │       │   └── 12.jpeg
    │   │       └── index.js
    │   │   ├── LoadingDemo
    │   │       └── index.js
    │   │   └── SpringText
    │   │       └── index.js
    ├── store
    │   ├── appStore.js
    │   └── index.js
    └── utils
    │   ├── AsyncComponent.js
    │   ├── BGParticle.js
    │   ├── LoadableComponent.js
    │   ├── Session.js
    │   ├── gVerify.js
    │   ├── typing.js
    │   └── utils.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets":["react-app"],
3 |   "plugins": [
4 |     ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
5 |     ["transform-decorators-legacy"]
6 |   ]
7 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | /.idea
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 基于React+antd实现后台模板
 2 | 自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互。
 3 | 
 4 | github地址：[基于React+antd实现后台模板](https://github.com/z-9527/react-admin-master)  
 5 | 预览地址：服务器到期，暂时没有预览地址
 6 | <br/>
 7 | 
 8 | 项目重构地址：[react+koa实现登陆、聊天、留言板功能后台](https://github.com/z-9527/admin)  
 9 | 重构预览地址：服务器到期，暂时没有预览地址
10 | 
11 | 2019.3.19更新   
12 | 今天回顾了一下项目，发现组件写的有问题，公共组件中不应该写业务逻辑，业务逻辑应该通过props或传递事件来实现；或者再用容器组件封装。  
13 | webstorm打开项目时占用内存过高，不知道是不是代码的问题。  
14 | 项目的初衷是为了学习和总结，可能前期写的或多或少有些问题，但正是通过解决这些问题才能不断的提升。
15 | <br/>
16 | 
17 | 2019.3.7更新    
18 | 登录后浏览器后退按钮可以回到登录页，登录页不登录，通过浏览器的前进又可直接进入前台。
19 | 我在登录页componentWillMount生命周期加了判断，如果已经登录，重定向到前页面（也可以设置退出登录）
20 | <br/>
21 | 
22 | 
23 | ### 技术栈
24 | 
25 |  - react
26 |  - antd
27 |  - react-router
28 |  - mobx
29 |  - canvas
30 |  - ES6
31 |  - cookie
32 | 
33 | 自己参考了其他优秀的插件，比如[动态打字效果](https://blog.csdn.net/qq_37860930/article/details/80859473)、背景粒子效果、[shuffle（洗牌）](https://github.com/Vestride/Shuffle)，[全屏插件](https://github.com/sindresorhus/screenfull.js)等，自己对有些插件封装成类使用
34 | 
35 | 所有路由都需要登录才可进入，自己封装了PrivateRoute组件来实现路由认证，登录信息保存在cookie中，原本是保存在store中，但是刷新页面后登录状态丢失，所以就保存在cookie中
36 | 登录背景图太大，使用了[TinyPNG](https://tinypng.com/)进行压缩，并编写了一个loading效果
37 | <br/>
38 | 
39 | ### 项目目录结构
40 | 
41 | <img src="https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/111.png?raw=true"/>
42 | assets----存储静态图片资源和共用icon图标<br/>
43 | components----存储共用组件<br/>
44 | routes----业务页面入口和常用模板<br/> 
45 | store----状态管理<br/>
46 | utils----工具函数<br/>
47 | <br/>
48 | 
49 | ### 项目截图
50 | 
51 | <img src="https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/01.png?raw=true"/>  
52 | <img src="https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/02.png?raw=true"/>  
53 | <img src="https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/03.png?raw=true"/>  
54 | <img src="https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/04.png?raw=true"/>  
55 | <br/>
56 | 
57 | ### 问题
58 | 
59 | 整个demo不复杂，主要是熟悉react和路由等，在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下，所以打包的路径要改为相对路径，不能使用绝对路径，我在package.json中添加了homepage:'.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性，结果还是出现js路径错误，我一直以为是webpack打包的问题，找了很久才发现是因为BrowserRouter，将BrowserRouter改为HashRouter就访问正确。  
60 | 使用react-router（v4）时，如果有服务器端的动态支持，建议使用 BrowserRouter，否则建议使用 HashRouter。  
61 | BrowserRouter和HashRouter其实就是前端路由的两种实现方式，一种是hash和一种是HTML5的history，网上有很介绍。  
62 | 可以参考：[关于react 在打包后：“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题](https://blog.csdn.net/Sophie_U/article/details/80006723)
63 | <br/>
64 | 
65 | ### 最后
66 | demo是我断断续续写的，只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd，整个demo中参考了一些其他人的想法，如动画效果等。另外基于vue的个人项目可以看这个[仿制移动端QQ音乐](https://blog.csdn.net/qq_37860930/article/details/80586698)
67 | <br/>
68 | 
69 | ### 其他个人项目
70 | 
71 | - [基于vue+vue-router+jsonp+vuex仿制的移动端`QQ音乐`](https://github.com/zhangZhiHao1996/vue-music-master)
72 | - [基于React-Antd的`后台模板Demo`](https://github.com/zhangZhiHao1996/react-admin-master)
73 | - [基于原生小程序精仿的`猫眼电影小程序`](https://github.com/zhangZhiHao1996/weapp-movie-master)
74 | 
75 | <br/>
76 | 
77 | `觉得不错的给个star鼓励支持！^_^`
78 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebookincubator/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a components issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
 6 | const config = require('./webpack.config.dev');
 7 | const paths = require('./paths');
 8 | 
 9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
10 | const host = process.env.HOST || '0.0.0.0';
11 | 
12 | module.exports = function(proxy, allowedHost) {
13 |   return {
14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
15 |     // websites from potentially accessing local content through DNS rebinding:
16 |     // https://github.com/webpack/webpack-dev-server/issues/887
17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
18 |     // However, it made several existing use cases such as development in cloud
19 |     // environment or subdomains in development significantly more complicated:
20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
22 |     // While we're investigating better solutions, for now we will take a
23 |     // compromise. Since our WDS configuration only serves files in the `public`
24 |     // folder we won't consider accessing them a vulnerability. However, if you
25 |     // use the `proxy` feature, it gets more dangerous because it can expose
26 |     // remote code execution vulnerabilities in backends like Django and Rails.
27 |     // So we will disable the host check normally, but enable it if you have
28 |     // specified the `proxy` setting. Finally, we let you override it if you
29 |     // really know what you're doing with a special environment variable.
30 |     disableHostCheck:
31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
32 |     // Enable gzip compression of generated files.
33 |     compress: true,
34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
35 |     // It will still show compile warnings and errors with this setting.
36 |     clientLogLevel: 'none',
37 |     // By default WebpackDevServer serves physical files from current directory
38 |     // in addition to all the virtual build products that it serves from memory.
39 |     // This is confusing because those files won’t automatically be available in
40 |     // production build folder unless we copy them. However, copying the whole
41 |     // project directory is dangerous because we may expose sensitive files.
42 |     // Instead, we establish a convention that only files in `public` directory
43 |     // get served. Our build script will copy `public` into the `build` folder.
44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
47 |     // Note that we only recommend to use `public` folder as an escape hatch
48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
49 |     // for some reason broken when imported through Webpack. If you just want to
50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
51 |     contentBase: paths.appPublic,
52 |     // By default files from `contentBase` will not trigger a page reload.
53 |     watchContentBase: true,
54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
55 |     // for the WebpackDevServer client so it can learn when the files were
56 |     // updated. The WebpackDevServer client is included as an entry point
57 |     // in the Webpack development configuration. Note that only changes
58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
59 |     hot: true,
60 |     // It is important to tell WebpackDevServer to use the same "root" path
61 |     // as we specified in the config. In development, we always serve from /.
62 |     publicPath: config.output.publicPath,
63 |     // WebpackDevServer is noisy by default so we emit custom message instead
64 |     // by listening to the compiler events with `compiler.plugin` calls above.
65 |     quiet: true,
66 |     // Reportedly, this avoids CPU overload on some systems.
67 |     // https://github.com/facebookincubator/create-react-app/issues/293
68 |     // src/node_modules is not ignored to support absolute imports
69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
70 |     watchOptions: {
71 |       ignored: ignoredFiles(paths.appSrc),
72 |     },
73 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
74 |     https: protocol === 'https',
75 |     host: host,
76 |     overlay: false,
77 |     historyApiFallback: {
78 |       // Paths with dots should still use the history fallback.
79 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
80 |       disableDotRule: true,
81 |     },
82 |     public: allowedHost,
83 |     proxy,
84 |     before(app) {
85 |       // This lets us open files from the runtime error overlay.
86 |       app.use(errorOverlayMiddleware());
87 |       // This service worker file is effectively a 'no-op' that will reset any
88 |       // previous service worker registered for the same host:port combination.
89 |       // We do this in development to avoid hitting the production cache if
90 |       // it used the same host and port.
91 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
92 |       app.use(noopServiceWorkerMiddleware());
93 |     },
94 |   };
95 | };
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "demo2",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@antv/data-set": "^0.8.9",
  7 |     "@babel/polyfill": "^7.2.5",
  8 |     "animate.css": "^3.6.1",
  9 |     "antd": "^3.6.2",
 10 |     "autoprefixer": "7.1.6",
 11 |     "axios": "^0.18.0",
 12 |     "babel-core": "6.26.0",
 13 |     "babel-eslint": "7.2.3",
 14 |     "babel-jest": "20.0.3",
 15 |     "babel-loader": "7.1.2",
 16 |     "babel-preset-react-app": "^3.1.1",
 17 |     "babel-runtime": "6.26.0",
 18 |     "bizcharts": "^3.1.10",
 19 |     "bodymovin": "^4.13.0",
 20 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 21 |     "chalk": "1.1.3",
 22 |     "css-loader": "0.28.7",
 23 |     "dotenv": "4.0.0",
 24 |     "dotenv-expand": "4.2.0",
 25 |     "draft-js": "^0.10.5",
 26 |     "draftjs-to-html": "^0.8.4",
 27 |     "draftjs-to-markdown": "^0.5.1",
 28 |     "eslint": "4.10.0",
 29 |     "eslint-config-react-app": "^2.1.0",
 30 |     "eslint-loader": "1.9.0",
 31 |     "eslint-plugin-flowtype": "2.39.1",
 32 |     "eslint-plugin-import": "2.8.0",
 33 |     "eslint-plugin-jsx-a11y": "5.1.1",
 34 |     "eslint-plugin-react": "7.4.0",
 35 |     "extract-text-webpack-plugin": "3.0.2",
 36 |     "file-loader": "1.1.5",
 37 |     "fs-extra": "3.0.1",
 38 |     "gsap": "^2.0.1",
 39 |     "html-to-draftjs": "^1.4.0",
 40 |     "html-webpack-plugin": "2.29.0",
 41 |     "jest": "20.0.4",
 42 |     "mobx": "^5.0.3",
 43 |     "mobx-react": "^5.2.3",
 44 |     "nprogress": "^0.2.0",
 45 |     "object-assign": "4.1.1",
 46 |     "postcss-flexbugs-fixes": "3.2.0",
 47 |     "postcss-loader": "2.0.8",
 48 |     "promise": "8.0.1",
 49 |     "raf": "3.4.0",
 50 |     "react": "^16.4.1",
 51 |     "react-dev-utils": "^5.0.1",
 52 |     "react-dom": "^16.4.1",
 53 |     "react-draft-wysiwyg": "^1.12.13",
 54 |     "react-loadable": "^5.4.0",
 55 |     "react-router-dom": "^4.3.1",
 56 |     "resolve": "1.6.0",
 57 |     "screenfull": "^3.3.2",
 58 |     "shufflejs": "^5.1.2",
 59 |     "style-loader": "0.19.0",
 60 |     "sw-precache-webpack-plugin": "0.11.4",
 61 |     "url-loader": "0.6.2",
 62 |     "webpack": "3.8.1",
 63 |     "webpack-dev-server": "2.9.4",
 64 |     "webpack-manifest-plugin": "1.3.2",
 65 |     "whatwg-fetch": "2.0.3"
 66 |   },
 67 |   "scripts": {
 68 |     "start": "node scripts/start.js",
 69 |     "build": "node scripts/build.js",
 70 |     "test": "node scripts/test.js --env=jsdom"
 71 |   },
 72 |   "jest": {
 73 |     "collectCoverageFrom": [
 74 |       "src/**/*.{js,jsx,mjs}"
 75 |     ],
 76 |     "setupFiles": [
 77 |       "<rootDir>/config/polyfills.js"
 78 |     ],
 79 |     "testMatch": [
 80 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 81 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 82 |     ],
 83 |     "testEnvironment": "node",
 84 |     "testURL": "http://localhost",
 85 |     "transform": {
 86 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 87 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 88 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 89 |     },
 90 |     "transformIgnorePatterns": [
 91 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 92 |     ],
 93 |     "moduleNameMapper": {
 94 |       "^react-native$": "react-native-web"
 95 |     },
 96 |     "moduleFileExtensions": [
 97 |       "web.js",
 98 |       "js",
 99 |       "json",
100 |       "web.jsx",
101 |       "jsx",
102 |       "node",
103 |       "mjs"
104 |     ]
105 |   },
106 |   "babel": {
107 |     "presets": [
108 |       "react-app"
109 |     ]
110 |   },
111 |   "eslintConfig": {
112 |     "extends": "react-app"
113 |   },
114 |   "devDependencies": {
115 |     "babel-plugin-import": "^1.8.0",
116 |     "babel-plugin-transform-decorators-legacy": "^1.3.5"
117 |   },
118 |   "homepage": "."
119 | }
120 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>基于React+Antd的后台模板Demo</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const fs = require('fs');
 18 | const chalk = require('chalk');
 19 | const webpack = require('webpack');
 20 | const WebpackDevServer = require('webpack-dev-server');
 21 | const clearConsole = require('react-dev-utils/clearConsole');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const {
 24 |   choosePort,
 25 |   createCompiler,
 26 |   prepareProxy,
 27 |   prepareUrls,
 28 | } = require('react-dev-utils/WebpackDevServerUtils');
 29 | const openBrowser = require('react-dev-utils/openBrowser');
 30 | const paths = require('../config/paths');
 31 | const config = require('../config/webpack.config.dev');
 32 | const createDevServerConfig = require('../config/webpackDevServer.config');
 33 | 
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | const isInteractive = process.stdout.isTTY;
 36 | 
 37 | // Warn and crash if required files are missing
 38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 39 |   process.exit(1);
 40 | }
 41 | 
 42 | // Tools like Cloud9 rely on this.
 43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 44 | const HOST = process.env.HOST || '0.0.0.0';
 45 | 
 46 | if (process.env.HOST) {
 47 |   console.log(
 48 |     chalk.cyan(
 49 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 50 |         chalk.bold(process.env.HOST)
 51 |       )}`
 52 |     )
 53 |   );
 54 |   console.log(
 55 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 56 |   );
 57 |   console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
 58 |   console.log();
 59 | }
 60 | 
 61 | // We attempt to use the default port but if it is busy, we offer the user to
 62 | // run on a different port. `choosePort()` Promise resolves to the next free port.
 63 | choosePort(HOST, DEFAULT_PORT)
 64 |   .then(port => {
 65 |     if (port == null) {
 66 |       // We have not found a port.
 67 |       return;
 68 |     }
 69 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 70 |     const appName = require(paths.appPackageJson).name;
 71 |     const urls = prepareUrls(protocol, HOST, port);
 72 |     // Create a webpack compiler that is configured with custom messages.
 73 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 74 |     // Load proxy config
 75 |     const proxySetting = require(paths.appPackageJson).proxy;
 76 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 77 |     // Serve webpack assets generated by the compiler over a web sever.
 78 |     const serverConfig = createDevServerConfig(
 79 |       proxyConfig,
 80 |       urls.lanUrlForConfig
 81 |     );
 82 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 83 |     // Launch WebpackDevServer.
 84 |     devServer.listen(port, HOST, err => {
 85 |       if (err) {
 86 |         return console.log(err);
 87 |       }
 88 |       if (isInteractive) {
 89 |         clearConsole();
 90 |       }
 91 |       console.log(chalk.cyan('Starting the development server...\n'));
 92 |       openBrowser(urls.localUrlForBrowser);
 93 |     });
 94 | 
 95 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
 96 |       process.on(sig, function() {
 97 |         devServer.close();
 98 |         process.exit();
 99 |       });
100 |     });
101 |   })
102 |   .catch(err => {
103 |     if (err && err.message) {
104 |       console.log(err.message);
105 |     }
106 |     process.exit(1);
107 |   });
108 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | let argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: sans-serif;
 5 | }
 6 | /*HeaderBar*/
 7 | .trigger{
 8 |     font-size: 18px;
 9 |     line-height: 64px;
10 |     cursor: pointer;
11 | }
12 | .trigger:hover{
13 |     color: #1890ff;
14 | }
15 | .header-ul{
16 |     display: flex;
17 |     width: 200px;
18 | }
19 | .header-ul li {
20 |     flex-grow: 1;
21 |     text-align: center;
22 | }
23 | .header-ul>li img{
24 |     width: 35px;
25 |     height: 35px;
26 |     border-radius: 100px;
27 | }
28 | .menu{
29 |     line-height: 2em;
30 |     padding: 0 10px;
31 | }
32 | .menu-group li{
33 |     padding: 0 24px;
34 |     line-height: 2em;
35 | }
36 | 
37 | #page .card-item{
38 |     margin-bottom: 10px;
39 |     border-radius: 3px;
40 |     line-height: 2em;
41 | }
42 | #page .card-ul{
43 |     list-style: inside circle;
44 | }
45 | 
46 | /*GalleryDemo*/
47 | .aspect {
48 |     position: relative;
49 |     width: 100%;
50 |     height: 0;
51 |     padding-bottom: 100%;
52 |     overflow: hidden;
53 | }
54 | .aspect--1x2{
55 |     padding-bottom: calc(112.5% + 8px);
56 | }
57 | .aspect--1x1 {
58 |     padding-bottom: 56.25%;
59 |     /*padding的百分比是按父级的width计算的*/
60 | }
61 | .aspect--2x1 {
62 |     padding-bottom: 28.125%;
63 | }
64 | .aspect__inner{
65 |     position: absolute;
66 |     top: 0;
67 |     right: 0;
68 |     bottom: 0;
69 |     left: 0;
70 | }
71 | .vertical-center-modal {
72 |     display: flex;
73 |     align-items: center;
74 |     justify-content: center;
75 | }
76 | 
77 | .vertical-center-modal .ant-modal {
78 |     top: 0;
79 | }
80 | 
81 | /*美化webkit内核滚动条*/
82 |   ::-webkit-scrollbar {
83 |       width: 8px;
84 |       height: 8px;
85 |   }
86 | ::-webkit-scrollbar-thumb {
87 |     background-color: #777;
88 | }
89 | 
90 | /*更改antd的primary button样式*/
91 | .ant-btn-primary{
92 |     background: #36bafb;
93 |     border-color: #36bafb;
94 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PrivateRoute from './components/PrivateRoute'
 3 | import {Route,Switch} from 'react-router-dom'
 4 | import Login from './routes/Login/index'
 5 | // import Login from './routes/Login2/index'
 6 | import Index from './routes/Index/index'
 7 | import './App.css'
 8 | import './assets/font/iconfont.css'
 9 | 
10 | 
11 | class App extends Component {
12 |   render() {
13 |     return (
14 |       <Switch>
15 |         <Route path='/login' component={Login}/>
16 |         <PrivateRoute path='/' component={Index}/>
17 |       </Switch>
18 |     )
19 |   }
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/assets/font/demo_fontclass.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <link rel="stylesheet" href="iconfont.css">
  9 | </head>
 10 | <body>
 11 |     <div class="main markdown">
 12 |         <h1>IconFont 图标</h1>
 13 |         <ul class="icon_lists clear">
 14 |             
 15 |                 <li>
 16 |                 <i class="icon iconfont icon-fenlei"></i>
 17 |                     <div class="name">分类</div>
 18 |                     <div class="fontclass">.icon-fenlei</div>
 19 |                 </li>
 20 |             
 21 |                 <li>
 22 |                 <i class="icon iconfont icon-fenlei1"></i>
 23 |                     <div class="name">分类</div>
 24 |                     <div class="fontclass">.icon-fenlei1</div>
 25 |                 </li>
 26 |             
 27 |                 <li>
 28 |                 <i class="icon iconfont icon-shouye"></i>
 29 |                     <div class="name">首页</div>
 30 |                     <div class="fontclass">.icon-shouye</div>
 31 |                 </li>
 32 |             
 33 |                 <li>
 34 |                 <i class="icon iconfont icon-suo"></i>
 35 |                     <div class="name">锁</div>
 36 |                     <div class="fontclass">.icon-suo</div>
 37 |                 </li>
 38 |             
 39 |                 <li>
 40 |                 <i class="icon iconfont icon-shouye1"></i>
 41 |                     <div class="name">首页</div>
 42 |                     <div class="fontclass">.icon-shouye1</div>
 43 |                 </li>
 44 |             
 45 |                 <li>
 46 |                 <i class="icon iconfont icon-user"></i>
 47 |                     <div class="name">User</div>
 48 |                     <div class="fontclass">.icon-user</div>
 49 |                 </li>
 50 |             
 51 |                 <li>
 52 |                 <i class="icon iconfont icon-emiyanzhengma"></i>
 53 |                     <div class="name">emi验证码</div>
 54 |                     <div class="fontclass">.icon-emiyanzhengma</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont icon-user1"></i>
 59 |                     <div class="name">user</div>
 60 |                     <div class="fontclass">.icon-user1</div>
 61 |                 </li>
 62 |             
 63 |                 <li>
 64 |                 <i class="icon iconfont icon-User"></i>
 65 |                     <div class="name">User</div>
 66 |                     <div class="fontclass">.icon-User</div>
 67 |                 </li>
 68 |             
 69 |                 <li>
 70 |                 <i class="icon iconfont icon-lajitong1"></i>
 71 |                     <div class="name">垃圾桶</div>
 72 |                     <div class="fontclass">.icon-lajitong1</div>
 73 |                 </li>
 74 |             
 75 |                 <li>
 76 |                 <i class="icon iconfont icon-yanzhengmatianchong"></i>
 77 |                     <div class="name">验证码填充</div>
 78 |                     <div class="fontclass">.icon-yanzhengmatianchong</div>
 79 |                 </li>
 80 |             
 81 |                 <li>
 82 |                 <i class="icon iconfont icon-suo1"></i>
 83 |                     <div class="name">锁</div>
 84 |                     <div class="fontclass">.icon-suo1</div>
 85 |                 </li>
 86 |             
 87 |                 <li>
 88 |                 <i class="icon iconfont icon-securityCode-b"></i>
 89 |                     <div class="name">验证码</div>
 90 |                     <div class="fontclass">.icon-securityCode-b</div>
 91 |                 </li>
 92 |             
 93 |         </ul>
 94 | 
 95 |         <h2 id="font-class-">font-class引用</h2>
 96 |         <hr>
 97 | 
 98 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
 99 |         <p>与unicode使用方式相比，具有如下特点：</p>
100 |         <ul>
101 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
102 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
103 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
104 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
105 |         </ul>
106 |         <p>使用步骤如下：</p>
107 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
108 | 
109 | 
110 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
111 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
112 |         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
113 |         <blockquote>
114 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
115 |         </blockquote>
116 |     </div>
117 | </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/src/assets/font/demo_unicode.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 | 
  9 |     <style type="text/css">
 10 | 
 11 |         @font-face {font-family: "iconfont";
 12 |           src: url('iconfont.eot'); /* IE9*/
 13 |           src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
 14 |           url('iconfont.woff') format('woff'), /* chrome, firefox */
 15 |           url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 16 |           url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 17 |         }
 18 | 
 19 |         .iconfont {
 20 |           font-family:"iconfont" !important;
 21 |           font-size:16px;
 22 |           font-style:normal;
 23 |           -webkit-font-smoothing: antialiased;
 24 |           -webkit-text-stroke-width: 0.2px;
 25 |           -moz-osx-font-smoothing: grayscale;
 26 |         }
 27 | 
 28 |     </style>
 29 | </head>
 30 | <body>
 31 |     <div class="main markdown">
 32 |         <h1>IconFont 图标</h1>
 33 |         <ul class="icon_lists clear">
 34 |             
 35 |                 <li>
 36 |                 <i class="icon iconfont">&#xe60a;</i>
 37 |                     <div class="name">分类</div>
 38 |                     <div class="code">&amp;#xe60a;</div>
 39 |                 </li>
 40 |             
 41 |                 <li>
 42 |                 <i class="icon iconfont">&#xe611;</i>
 43 |                     <div class="name">分类</div>
 44 |                     <div class="code">&amp;#xe611;</div>
 45 |                 </li>
 46 |             
 47 |                 <li>
 48 |                 <i class="icon iconfont">&#xe612;</i>
 49 |                     <div class="name">首页</div>
 50 |                     <div class="code">&amp;#xe612;</div>
 51 |                 </li>
 52 |             
 53 |                 <li>
 54 |                 <i class="icon iconfont">&#xe625;</i>
 55 |                     <div class="name">锁</div>
 56 |                     <div class="code">&amp;#xe625;</div>
 57 |                 </li>
 58 |             
 59 |                 <li>
 60 |                 <i class="icon iconfont">&#xe60b;</i>
 61 |                     <div class="name">首页</div>
 62 |                     <div class="code">&amp;#xe60b;</div>
 63 |                 </li>
 64 |             
 65 |                 <li>
 66 |                 <i class="icon iconfont">&#xe743;</i>
 67 |                     <div class="name">User</div>
 68 |                     <div class="code">&amp;#xe743;</div>
 69 |                 </li>
 70 |             
 71 |                 <li>
 72 |                 <i class="icon iconfont">&#xe61b;</i>
 73 |                     <div class="name">emi验证码</div>
 74 |                     <div class="code">&amp;#xe61b;</div>
 75 |                 </li>
 76 |             
 77 |                 <li>
 78 |                 <i class="icon iconfont">&#xe600;</i>
 79 |                     <div class="name">user</div>
 80 |                     <div class="code">&amp;#xe600;</div>
 81 |                 </li>
 82 |             
 83 |                 <li>
 84 |                 <i class="icon iconfont">&#xe67b;</i>
 85 |                     <div class="name">User</div>
 86 |                     <div class="code">&amp;#xe67b;</div>
 87 |                 </li>
 88 |             
 89 |                 <li>
 90 |                 <i class="icon iconfont">&#xe610;</i>
 91 |                     <div class="name">垃圾桶</div>
 92 |                     <div class="code">&amp;#xe610;</div>
 93 |                 </li>
 94 |             
 95 |                 <li>
 96 |                 <i class="icon iconfont">&#xe636;</i>
 97 |                     <div class="name">验证码填充</div>
 98 |                     <div class="code">&amp;#xe636;</div>
 99 |                 </li>
100 |             
101 |                 <li>
102 |                 <i class="icon iconfont">&#xe644;</i>
103 |                     <div class="name">锁</div>
104 |                     <div class="code">&amp;#xe644;</div>
105 |                 </li>
106 |             
107 |                 <li>
108 |                 <i class="icon iconfont">&#xe60d;</i>
109 |                     <div class="name">验证码</div>
110 |                     <div class="code">&amp;#xe60d;</div>
111 |                 </li>
112 |             
113 |         </ul>
114 |         <h2 id="unicode-">unicode引用</h2>
115 |         <hr>
116 | 
117 |         <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
118 |         <ul>
119 |         <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
120 |         <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
121 |         <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
122 |         </ul>
123 |         <blockquote>
124 |         <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
125 |         </blockquote>
126 |         <p>unicode使用步骤如下：</p>
127 |         <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
128 |         <pre><code class="lang-js hljs javascript">@font-face {
129 |   font-family: <span class="hljs-string">'iconfont'</span>;
130 |   src: url(<span class="hljs-string">'iconfont.eot'</span>);
131 |   src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
132 |   url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
133 |   url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
134 |   url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
135 | }
136 | </code></pre>
137 |         <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
138 |         <pre><code class="lang-js hljs javascript">.iconfont{
139 |   font-family:<span class="hljs-string">"iconfont"</span> !important;
140 |   font-size:<span class="hljs-number">16</span>px;font-style:normal;
141 |   -webkit-font-smoothing: antialiased;
142 |   -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
143 |   -moz-osx-font-smoothing: grayscale;
144 | }
145 | </code></pre>
146 |         <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
147 |         <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
148 | 
149 |         <blockquote>
150 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
151 |         </blockquote>
152 |     </div>
153 | 
154 | 
155 | </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/src/assets/font/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1530625048960'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1530625048960#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAvIAAsAAAAAEOgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kk1Y21hcAAAAYAAAADFAAACdmPSBzlnbHlmAAACSAAABwMAAAkYg3QBN2hlYWQAAAlMAAAALwAAADYR4n4uaGhlYQAACXwAAAAeAAAAJAfeA5FobXR4AAAJnAAAABgAAAA8O+oAAGxvY2EAAAm0AAAAIAAAACAQ9BNAbWF4cAAACdQAAAAfAAAAIAEfAF1uYW1lAAAJ9AAAAUUAAAJtPlT+fXBvc3QAAAs8AAAAigAAALdWkMkSeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDx3Zm7438AQw9zI0AAUZgTJAQAquQy4eJzFkk0OgkAMhd/Ij4pCkJWRxB07114ADmXCFTwQK4/zOIa+UhYadattPpLpG9qmUwAJgEicRAyEGwLMBkXDFI+QTfEYV533KBVZ4UJww5wVazY8s2M/tve7bpiSSSnflE8WlNH8ID8+uSlrLJCiwEYVY9VMsEWubpYS0y/5fmDhf6VfbTt9h/lUiMuMWiQcTVHv4WieejVHkwVzx/5l6cD0nWObwcqx7WDt6C3AxrEN4tmxjtg5sNy9Yxs0tg6WDwqVPFwAAAB4nHVWW2wcVxk+/zk7M3uZmb3NbS/e8ezM7nR3471fjC+b0NrR2olTFKctcZ2kbR4aIQVMhOS2FOEK1cSiNOGlD1UvtDhppAqklFYqkELVJqII9aFCEEElUNU+pK9QCWTsCf+sGyigzp49Z/5/Znb+7zvf+c4SjpCbH7ArzCBJchtpkBnyJUKAr0BepiNgue0qrYBqcaquyMy1XUuw81U2DXqeV7Rmt13UeYGPggw5aFnNrlulLnTafToJTW0EIJVJLyYK2QQ7D2HDzT3uzdMXQTXtbLQ/5s3t2as0R5PBVTGRSCUSTwR5jgtSGojKcFrXQlwozHubXDStXjFL1AQx5aYPHpVGM4n7z7a/OlLQQwBra5DMjMov7Y2n49geTWvJREqISUEjLdmOAqsfRYykOFL8kODB+x37FX2biCRFiqRGxskXEa3l47AtH1GLs2RQNN3qQ7voqru53etQ/BQy+78TOEGnoooS3bkaU5QYnbo1fjY3PB/VJsrlibLyXwO9RzEVbD8FJafAsPvnboYGlNJkuTzpjarlyVJpEmJK2X/k31h+yQgRSIwYxCIl0vSx9MFFCK6Pwi8bMPDRFD4/cYgecKCw85oDL6dtu53PM/CDgp/efvNzU/TFwATHTRyFfNuPvc3ARCAwYf5v6N/atgkb1vs2/SvJkgpBBAWLL/bi7W5TU+O81rO0rhvvo2j0uMa7DHg77xa7PejmgBeGEVShDzrqTKB/8g4OOhDVZJpqwqsti4KsyQD9ud96R4NBMSiwEFwKqhIOP8Yw6B0NMUkNwqUQE2IwvQClSDQa8a73TErN3q1oYRroZe91PhJSBRjwLKEI3hsRHgaCkmC897qghoiP4+ZVtsimhpyXkXG7U/XpFlQbu3huSG4vXgXIF310Cp+0OpjBC9Sr0NWlpVVacWoANaRyOHp/dur1Qb1+wtuC+fHxeaDKkaWHKH1o6QjUHW/JqQOOcNGpe4/79w3q8OiR8XlK58cJoVjP79kNViFp0iKEs7CYjl2Fdg/Zamk6aCqWZWMHeeQRpd2K7+q7E2/1cbEWmbhzoz0LotNIw1r0Nm1sFB5LQ8MRYdZ7M5Xwvh1WYtNlkxpmeTqmQMRbUyow234fGoMU3BmNgeldTuedBrzfnmVOwrscNhXwPjFLACVctKjnCBxK+tPv1+qx/fQmqaPTkELbxWKraBe9vj/6JPKa3kCmFF7AABueY0P6Gv6X7R8tH5mKJZPdUUrvm5t7AGgyLzuQjLWWx2IJACcL6488/F3IluDhPamRsTSfSaSjjWeDc/f5D/DfqitmKpHh1UZOdNTcmMBsSm0mjOVu1fcEe5WtEZWM+i6IPPZcQeMFFyXK6T0HNQpuz69Hx+LYhixdvgiGARdemQ49DbIogvx0yKv/4QtnuJ+taqGri4yB8GXBMLCj3vixGw8GAg/eOAbv7Lz1i7HF4OY+g/3m2aGmdthJ1BQQm+whJNkAhUdDKqKTcq2miaJvdvdCt9XMcUyRYSisC/SNwbS3MD1gkVjabuW4WEG9/Y7b1UKMy7XsdCzCnl95fgUbm9yZmZqdnUq3Jpo1SwkbkqZJRlixas2JFvzozhX4+nMrK4gfsI5n2Edshbg4O7j6ECe2blEYzo9QpHqR13enJDecHlQbfTInxVUbCjoTy4FA1qheczbNcKAsMr0AthqXcoe2ZPaOvPVMshUz7uLidaVrUe7sgRPlxbj3d41aXaUe5+4yYq1k5u5z5+4m/p60xtZxHiIkSkZwX+phcYViDWyBFzjVYkkrCW20BpXJUEFj6LB2F31E4ZEyhh6SRAHZ+aKLabbubUcDyb8lONnbZvtfmNn5xgyckxVRBykEYel7ui4p0vfDEhhSGEIS6CL9R4VFDxyIskpz++dM3/6YboZFkMI77+FlOUSrEh4774UlKUz3i35axt+itbC8q6E1dg1rzw39mHfcYl7gAyhuFcWtfSpnn1u3XRSYX2cNEXR7mumznQN2KeJtrQcTwXVvKyLKNO7WDnc2FhY2OodrbpzKf/w4FGVS+KkIVWJi+JHfhTJ6gH7A9h7j+eV9jMbF0LvnL5wZnEynTw7OXDj/bkiMf3KTiDT4nXBGBwh+5UORxbO39P4Wu5/tG3rZZ50sz/tO5m98vpPZtwyMlbvs7KlTG6yDMCCn08PD8TnvCr13dvZeCn85fWqD0o1Tp03NO6SZpgavaObpmWVKl2f+w81jOKd1fB++reh/kB/BX/BR4FWN6F0HJecK+J+iRot9QF52dwF2lZnG8eWlg0pdnTt+z3HDpIA39da+CZmSwOAF75qYlYI/ESFjS+cgK+dTINGLRp6PZp1pWb4j54QCtvHAsa/92rsuoEX94IdwzbseZkHhteG9T4E4fBap+RfycJ0IAHicY2BkYGAA4rbp0vXx/DZfGbhZGEDgeuJcCQT9v4GFgbkRyOVgYAKJAgAOEQlTAHicY2BkYGBu+N/AEMMCZDEwsDAwgGkkwA8ARy4CeQAAeJxjYWBgYH7JwMACpFkYoTSRGAA5wgEmAAAAAAB2ANwBNAGYAeACNgKGAsIDBgNKA6gD/gQ2BIx4nGNgZGBg4GcIZGBjAAEmIOYCQgaG/2A+AwASUgF9AHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2MUQ6CMBiDVxhMUMDEc/iwM3gGDzDxl83AlrAtcZ7eGR58sQ9t8zUpK9imlv3XgAIlOCrUENihQYs9DujQY8CR4VU/yM5kxBay9trFRKWPTmxV8uhp7WgxSdm3Jjstqvoiya/Zm1k9TXB2kqffHoyyo86Q5x/ZexrjakK6uDudb4x9ABJyKqQAAA==') format('woff'),
 6 |   url('iconfont.ttf?t=1530625048960') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1530625048960#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-fenlei:before { content: "\e60a"; }
19 | 
20 | .icon-fenlei1:before { content: "\e611"; }
21 | 
22 | .icon-shouye:before { content: "\e612"; }
23 | 
24 | .icon-suo:before { content: "\e625"; }
25 | 
26 | .icon-shouye1:before { content: "\e60b"; }
27 | 
28 | .icon-user:before { content: "\e743"; }
29 | 
30 | .icon-emiyanzhengma:before { content: "\e61b"; }
31 | 
32 | .icon-user1:before { content: "\e600"; }
33 | 
34 | .icon-User:before { content: "\e67b"; }
35 | 
36 | .icon-lajitong1:before { content: "\e610"; }
37 | 
38 | .icon-yanzhengmatianchong:before { content: "\e636"; }
39 | 
40 | .icon-suo1:before { content: "\e644"; }
41 | 
42 | .icon-securityCode-b:before { content: "\e60d"; }
43 | 
44 | 


--------------------------------------------------------------------------------
/src/assets/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/assets/font/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/assets/font/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/assets/font/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/img/defaultUser.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/assets/img/defaultUser.jpg


--------------------------------------------------------------------------------
/src/components/ContentMain/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { withRouter, Switch, Redirect } from 'react-router-dom'
 3 | import LoadableComponent from '../../utils/LoadableComponent'
 4 | import PrivateRoute from '../PrivateRoute'
 5 | 
 6 | const Home = LoadableComponent(()=>import('../../routes/Home/index'))  //参数一定要是函数，否则不会懒加载，只会代码拆分
 7 | 
 8 | //基本组件Demo
 9 | const ButtonDemo = LoadableComponent(()=>import('../../routes/General/ButtonDemo/index'))
10 | const IconDemo = LoadableComponent(()=>import('../../routes/General/IconDemo/index'))
11 | 
12 | //导航组件Demo
13 | const DropdownDemo = LoadableComponent(()=>import('../../routes/Navigation/DropdownDemo/index'))
14 | const MenuDemo = LoadableComponent(()=>import('../../routes/Navigation/MenuDemo/index'))
15 | const StepsDemo = LoadableComponent(()=>import('../../routes/Navigation/StepsDemo/index'))
16 | 
17 | //输入组件Demo
18 | const FormDemo1 = LoadableComponent(()=>import('../../routes/Entry/FormDemo/FormDemo1'))
19 | const FormDemo2 = LoadableComponent(()=>import('../../routes/Entry/FormDemo/FormDemo2'))
20 | const UploadDemo = LoadableComponent(()=>import('../../routes/Entry/UploadDemo/index'))
21 | 
22 | //显示组件Demo
23 | const CarouselDemo = LoadableComponent(()=>import('../../routes/Display/CarouselDemo/index'))
24 | const CollapseDemo = LoadableComponent(()=>import('../../routes/Display/CollapseDemo/index'))
25 | const ListDemo = LoadableComponent(()=>import('../../routes/Display/ListDemo/index'))
26 | const TableDemo = LoadableComponent(()=>import('../../routes/Display/TableDemo/index'))
27 | const TabsDemo = LoadableComponent(()=>import('../../routes/Display/TabsDemo/index'))
28 | 
29 | //反馈组件Demo
30 | const SpinDemo = LoadableComponent(()=>import('../../routes/Feedback/SpinDemo/index'))
31 | const ModalDemo = LoadableComponent(()=>import('../../routes/Feedback/ModalDemo/index'))
32 | const NotificationDemo = LoadableComponent(()=>import('../../routes/Feedback/NotificationDemo/index'))
33 | 
34 | //其它
35 | const AnimationDemo = LoadableComponent(()=>import('../../routes/Other/AnimationDemo/index'))
36 | const GalleryDemo = LoadableComponent(()=>import('../../routes/Other/GalleryDemo/index'))
37 | const DraftDemo = LoadableComponent(()=>import('../../routes/Other/DraftDemo/index'))
38 | const ChartDemo = LoadableComponent(()=>import('../../routes/Other/ChartDemo/index'))
39 | const LoadingDemo = LoadableComponent(()=>import('../../routes/Other/LoadingDemo/index'))
40 | const ErrorPage = LoadableComponent(()=>import('../../routes/Other/ErrorPage/index'))
41 | const SpringText = LoadableComponent(()=>import('../../routes/Other/SpringText/index'))
42 | 
43 | //关于
44 | const About = LoadableComponent(()=>import('../../routes/About/index'))
45 | 
46 | @withRouter
47 | class ContentMain extends React.Component {
48 |   render () {
49 |     return (
50 |       <div style={{padding: 16, position: 'relative'}}>
51 |         <Switch>
52 |           <PrivateRoute exact path='/home' component={Home}/>
53 | 
54 |           <PrivateRoute exact path='/home/general/button' component={ButtonDemo}/>
55 |           <PrivateRoute exact path='/home/general/icon' component={IconDemo}/>
56 | 
57 |           <PrivateRoute exact path='/home/navigation/dropdown' component={DropdownDemo}/>
58 |           <PrivateRoute exact path='/home/navigation/menu' component={MenuDemo}/>
59 |           <PrivateRoute exact path='/home/navigation/steps' component={StepsDemo}/>
60 | 
61 |           <PrivateRoute exact path='/home/entry/form/basic-form' component={FormDemo1}/>
62 |           <PrivateRoute exact path='/home/entry/form/step-form' component={FormDemo2}/>
63 |           <PrivateRoute exact path='/home/entry/upload' component={UploadDemo}/>
64 | 
65 |           <PrivateRoute exact path='/home/display/carousel' component={CarouselDemo}/>
66 |           <PrivateRoute exact path='/home/display/collapse' component={CollapseDemo}/>
67 |           <PrivateRoute exact path='/home/display/list' component={ListDemo}/>
68 |           <PrivateRoute exact path='/home/display/table' component={TableDemo}/>
69 |           <PrivateRoute exact path='/home/display/tabs' component={TabsDemo}/>
70 | 
71 |           <PrivateRoute exact path='/home/feedback/modal' component={ModalDemo}/>
72 |           <PrivateRoute exact path='/home/feedback/notification' component={NotificationDemo}/>
73 |           <PrivateRoute exact path='/home/feedback/spin' component={SpinDemo}/>
74 | 
75 |           <PrivateRoute exact path='/home/other/animation' component={AnimationDemo}/>
76 |           <PrivateRoute exact path='/home/other/gallery' component={GalleryDemo}/>
77 |           <PrivateRoute exact path='/home/other/draft' component={DraftDemo}/>
78 |           <PrivateRoute exact path='/home/other/chart' component={ChartDemo}/>
79 |           <PrivateRoute exact path='/home/other/loading' component={LoadingDemo}/>
80 |           <PrivateRoute exact path='/home/other/404' component={ErrorPage}/>
81 |           <PrivateRoute exact path='/home/other/springText' component={SpringText}/>
82 | 
83 |           <PrivateRoute exact path='/home/about' component={About}/>
84 | 
85 |           <Redirect exact from='/' to='/home'/>
86 |         </Switch>
87 |       </div>
88 |     )
89 |   }
90 | }
91 | 
92 | export default ContentMain


--------------------------------------------------------------------------------
/src/components/CustomBreadcrumb/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Breadcrumb} from 'antd'
 3 | import {Link} from 'react-router-dom'
 4 | 
 5 | const CustomBreadcrumb = (props)=>(
 6 |   <Breadcrumb style={{marginBottom:16}}>
 7 |     <Breadcrumb.Item><Link to='/home'>首页</Link></Breadcrumb.Item>
 8 |     {props.arr && props.arr.map(item=>{
 9 |       if ((typeof item) === 'object'){
10 |         return <Breadcrumb.Item key={item.title}><Link to={item.to}>{item.title}</Link></Breadcrumb.Item>
11 |       } else {
12 |         return <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
13 |       }
14 |     })}
15 |   </Breadcrumb>
16 | )
17 | export default CustomBreadcrumb


--------------------------------------------------------------------------------
/src/components/CustomMenu/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Link,withRouter} from 'react-router-dom'
  3 | import {Menu, Icon} from 'antd'
  4 | 
  5 | //此组件的意义就是将数据抽离出来，通过传递数据去渲染
  6 | @withRouter
  7 | class CustomMenu extends React.Component {
  8 |   state = {
  9 |     openKeys: [],
 10 |     selectedKeys: []
 11 |   }
 12 | 
 13 |   componentDidMount() {
 14 |     // 防止页面刷新侧边栏又初始化了
 15 |     const pathname = this.props.location.pathname
 16 |     //获取当前所在的目录层级
 17 |     const rank = pathname.split('/')
 18 |     switch (rank.length) {
 19 |       case 2 :  //一级目录
 20 |         this.setState({
 21 |           selectedKeys: [pathname]
 22 |         })
 23 |         break;
 24 |       case 5 : //三级目录，要展开两个subMenu
 25 |         this.setState({
 26 |           selectedKeys: [pathname],
 27 |           openKeys: [rank.slice(0, 3).join('/'), rank.slice(0, 4).join('/')]
 28 |         })
 29 |         break;
 30 |       default :
 31 |         this.setState({
 32 |           selectedKeys: [pathname],
 33 |           openKeys: [pathname.substr(0, pathname.lastIndexOf('/'))]
 34 |         })
 35 |     }
 36 |   }
 37 | 
 38 |   componentWillReceiveProps(nextProps) {
 39 |     //当点击面包屑导航时，侧边栏要同步响应
 40 |     const pathname = nextProps.location.pathname
 41 |     if (this.props.location.pathname !== pathname) {
 42 |       this.setState({
 43 |         selectedKeys: [pathname],
 44 |       })
 45 |     }
 46 |   }
 47 | 
 48 |   onOpenChange = (openKeys) => {
 49 |     //此函数的作用只展开当前父级菜单（父级菜单下可能还有子菜单）
 50 |     if (openKeys.length === 0 || openKeys.length === 1) {
 51 |       this.setState({
 52 |         openKeys
 53 |       })
 54 |       return
 55 |     }
 56 | 
 57 |     //最新展开的菜单
 58 |     const latestOpenKey = openKeys[openKeys.length - 1]
 59 |     //判断最新展开的菜单是不是父级菜单，若是父级菜单就只展开一个，不是父级菜单就展开父级菜单和当前子菜单
 60 |     //因为我的子菜单的key包含了父级菜单，所以不用像官网的例子单独定义父级菜单数组，然后比较当前菜单在不在父级菜单数组里面。
 61 |     //只适用于3级菜单
 62 |     if (latestOpenKey.includes(openKeys[0])) {
 63 |       this.setState({
 64 |         openKeys
 65 |       })
 66 |     } else {
 67 |       this.setState({
 68 |         openKeys: [latestOpenKey]
 69 |       })
 70 |     }
 71 |   }
 72 | 
 73 |   renderMenuItem = ({key, icon, title,}) => {
 74 |     return (
 75 |       <Menu.Item key={key}>
 76 |         <Link to={key}>
 77 |           {icon && <Icon type={icon}/>}
 78 |           <span>{title}</span>
 79 |         </Link>
 80 |       </Menu.Item>
 81 |     )
 82 |   }
 83 |   renderSubMenu = ({key, icon, title, subs}) => {
 84 |     return (
 85 |       <Menu.SubMenu key={key} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
 86 |         {
 87 |           subs && subs.map(item => {
 88 |             return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
 89 |           })
 90 |         }
 91 |       </Menu.SubMenu>
 92 |     )
 93 |   }
 94 | 
 95 |   render() {
 96 |     const {openKeys, selectedKeys} = this.state
 97 |     return (
 98 |       <Menu
 99 |         onOpenChange={this.onOpenChange}
100 |         onClick={({key}) => this.setState({selectedKeys: [key]})}
101 |         openKeys={openKeys}
102 |         selectedKeys={selectedKeys}
103 |         theme={this.props.theme ? this.props.theme : 'dark'}
104 |         mode='inline'>
105 |         {
106 |           this.props.menus && this.props.menus.map(item => {
107 |             return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
108 |           })
109 |         }
110 |       </Menu>
111 |     )
112 |   }
113 | }
114 | 
115 | export default CustomMenu


--------------------------------------------------------------------------------
/src/components/HeaderBar/img/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/components/HeaderBar/img/01.jpg


--------------------------------------------------------------------------------
/src/components/HeaderBar/img/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/components/HeaderBar/img/02.jpg


--------------------------------------------------------------------------------
/src/components/HeaderBar/img/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/components/HeaderBar/img/03.jpg


--------------------------------------------------------------------------------
/src/components/HeaderBar/img/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/components/HeaderBar/img/04.jpg


--------------------------------------------------------------------------------
/src/components/HeaderBar/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Icon, Badge, Dropdown, Menu, Modal } from 'antd'
  3 | import screenfull from 'screenfull'
  4 | import { inject, observer } from 'mobx-react'
  5 | import { Link, withRouter } from 'react-router-dom'
  6 | import { isAuthenticated } from '../../utils/Session'
  7 | 
  8 | //withRouter一定要写在前面，不然路由变化不会反映到props中去
  9 | @withRouter @inject('appStore') @observer
 10 | class HeaderBar extends React.Component {
 11 |   state = {
 12 |     icon: 'arrows-alt',
 13 |     count: 100,
 14 |     visible: false,
 15 |     avatar: require('./img/04.jpg')
 16 |   }
 17 | 
 18 |   componentDidMount () {
 19 |     screenfull.onchange(() => {
 20 |       this.setState({
 21 |         icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
 22 |       })
 23 |     })
 24 |   }
 25 | 
 26 |   componentWillUnmount () {
 27 |     screenfull.off('change')
 28 |   }
 29 | 
 30 |   toggle = () => {
 31 |     this.props.onToggle()
 32 |   }
 33 |   screenfullToggle = () => {
 34 |     if (screenfull.enabled) {
 35 |       screenfull.toggle()
 36 |     }
 37 |   }
 38 |   logout = () => {
 39 |     this.props.appStore.toggleLogin(false)
 40 |     this.props.history.push(this.props.location.pathname)
 41 |   }
 42 | 
 43 |   render () {
 44 |     const {icon, count, visible, avatar} = this.state
 45 |     const {appStore, collapsed, location} = this.props
 46 |     const notLogin = (
 47 |       <div>
 48 |         <Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>&nbsp;
 49 |         <img src={require('../../assets/img/defaultUser.jpg')} alt=""/>
 50 |       </div>
 51 |     )
 52 |     const menu = (
 53 |       <Menu className='menu'>
 54 |         <Menu.ItemGroup title='用户中心' className='menu-group'>
 55 |           <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
 56 |           <Menu.Item>个人信息</Menu.Item>
 57 |           <Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
 58 |         </Menu.ItemGroup>
 59 |         <Menu.ItemGroup title='设置中心' className='menu-group'>
 60 |           <Menu.Item>个人设置</Menu.Item>
 61 |           <Menu.Item>系统设置</Menu.Item>
 62 |         </Menu.ItemGroup>
 63 |       </Menu>
 64 |     )
 65 |     const login = (
 66 |       <Dropdown overlay={menu}>
 67 |         <img onClick={() => this.setState({visible: true})} src={avatar} alt=""/>
 68 |       </Dropdown>
 69 |     )
 70 |     return (
 71 |       <div id='headerbar'>
 72 |         <Icon
 73 |           type={collapsed ? 'menu-unfold' : 'menu-fold'}
 74 |           className='trigger'
 75 |           onClick={this.toggle}/>
 76 |         <div style={{lineHeight: '64px', float: 'right'}}>
 77 |           <ul className='header-ul'>
 78 |             <li><Icon type={icon} onClick={this.screenfullToggle}/></li>
 79 |             <li onClick={() => this.setState({count: 0})}>
 80 |               <Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
 81 |                 <Icon type="notification"/>
 82 |               </Badge>
 83 |             </li>
 84 |             <li>
 85 |               {appStore.isLogin ? login : notLogin}
 86 |             </li>
 87 |           </ul>
 88 |         </div>
 89 |         <Modal
 90 |           footer={null} closable={false}
 91 |           visible={visible}
 92 |           wrapClassName="vertical-center-modal"
 93 |           onCancel={() => this.setState({visible: false})}>
 94 |           <img src={avatar} alt="" width='100%'/>
 95 |         </Modal>
 96 |       </div>
 97 |     )
 98 |   }
 99 | }
100 | 
101 | export default HeaderBar


--------------------------------------------------------------------------------
/src/components/Loading/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | class Loading extends React.Component{
 5 |   render(){
 6 |     return (
 7 |       <div id='loading'>
 8 |         <div className="dot"/>
 9 |         <div className="dot"/>
10 |         <div className="dot"/>
11 |         <div className="dot"/>
12 |         <div className="dot"/>
13 |       </div>
14 |     )
15 |   }
16 | }
17 | export default Loading


--------------------------------------------------------------------------------
/src/components/Loading/style.css:
--------------------------------------------------------------------------------
 1 | #loading .dot {
 2 |     width: 24px;
 3 |     height: 24px;
 4 |     background: #3ac;
 5 |     border-radius: 100%;
 6 |     display: inline-block;
 7 |     animation: slide 1s infinite;
 8 | }
 9 | 
10 | #loading .dot:nth-child(1) {
11 |     animation-delay: 0.1s;
12 |     background: #32aacc;
13 | }
14 | 
15 | #loading .dot:nth-child(2) {
16 |     animation-delay: 0.2s;
17 |     background: #64aacc;
18 | }
19 | 
20 | #loading .dot:nth-child(3) {
21 |     animation-delay: 0.3s;
22 |     background: #96aacc;
23 | }
24 | 
25 | #loading .dot:nth-child(4) {
26 |     animation-delay: 0.4s;
27 |     background: #c8aacc;
28 | }
29 | 
30 | #loading .dot:nth-child(5) {
31 |     animation-delay: 0.5s;
32 |     background: #faaacc;
33 | }
34 | 
35 | @-moz-keyframes slide {
36 |     0% {
37 |         transform: scale(1);
38 |     }
39 |     50% {
40 |         opacity: 0.3;
41 |         transform: scale(2);
42 |     }
43 |     100% {
44 |         transform: scale(1);
45 |     }
46 | }
47 | 
48 | @-webkit-keyframes slide {
49 |     0% {
50 |         transform: scale(1);
51 |     }
52 |     50% {
53 |         opacity: 0.3;
54 |         transform: scale(2);
55 |     }
56 |     100% {
57 |         transform: scale(1);
58 |     }
59 | }
60 | 
61 | @-o-keyframes slide {
62 |     0% {
63 |         transform: scale(1);
64 |     }
65 |     50% {
66 |         opacity: 0.3;
67 |         transform: scale(2);
68 |     }
69 |     100% {
70 |         transform: scale(1);
71 |     }
72 | }
73 | 
74 | @keyframes slide {
75 |     0% {
76 |         transform: scale(1);
77 |     }
78 |     50% {
79 |         opacity: 0.3;
80 |         transform: scale(2);
81 |     }
82 |     100% {
83 |         transform: scale(1);
84 |     }
85 | }


--------------------------------------------------------------------------------
/src/components/Loading2/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import bodymovin from 'bodymovin'
 3 | 
 4 | class Loading2 extends React.Component{
 5 |   componentDidMount(){
 6 |     const animData = {
 7 |       wrapper: document.querySelector('#animationWindow'),
 8 |       animType: 'svg',
 9 |       loop: true,
10 |       prerender: true,
11 |       autoplay: true,
12 |       animationData:require('./data.json')
13 |     };
14 |     this.anim = bodymovin.loadAnimation(animData);
15 |     this.anim.setSpeed(1.42);
16 |   }
17 |   componentWillUnmount(){
18 |     this.anim = null
19 |   }
20 |   render(){
21 |     return (
22 |       <div  style={{width:'100%',height:'100%'}}>
23 |         <div id="animationWindow" style={{width:'100%',height:'100%'}}/>
24 |       </div>
25 |     )
26 |   }
27 | }
28 | export default Loading2


--------------------------------------------------------------------------------
/src/components/PrivateRoute/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Route, Redirect, } from 'react-router-dom'
 3 | import { isAuthenticated } from '../../utils/Session'
 4 | 
 5 | const PrivateRoute = ({component: Component, ...rest}) => (
 6 |   <Route {...rest} render={(props) => (
 7 |     !!isAuthenticated()
 8 |       ? <Component {...props} />
 9 |       : <Redirect to={{
10 |         pathname: '/login',
11 |         state: {from: props.location}
12 |       }}/>
13 |   )}/>
14 | )
15 | 
16 | export default PrivateRoute


--------------------------------------------------------------------------------
/src/components/PromptBox/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class Promptbox extends React.Component{
 4 |   componentDidMount(){
 5 |     this.addContent()
 6 |   }
 7 |   addContent = ()=>{
 8 |     const ctx = this.canvas.getContext('2d')
 9 |     const width =this.props.width
10 |     ctx.strokeStyle = '#fff'
11 |     ctx.shadowOffsetX = -2
12 |     ctx.shadowOffsetY = 2
13 |     ctx.shadowBlur = 2
14 |     ctx.shadowColor = 'rgba(0,0,0,.3)'
15 |     ctx.beginPath()
16 |     ctx.moveTo(0,20)
17 |     ctx.lineTo(8,16)
18 |     ctx.lineTo(8,1)
19 |     ctx.lineTo(width-1,1)
20 |     ctx.lineTo(width-1,39)
21 |     ctx.lineTo(8,39)
22 |     ctx.lineTo(8,23)
23 |     ctx.closePath()
24 |     ctx.stroke();
25 |     ctx.fillStyle = '#D3D7F7'
26 |     ctx.textBaseline = 'middle'
27 |     ctx.font = '14px sans-serif'
28 |     ctx.beginPath()
29 |     ctx.fillText(this.props.info, 20, 20);
30 |   }
31 |   render(){
32 |     return (
33 |       <div>
34 |         <canvas key={this.props.info} height='41' width={this.props.width} ref={el=>this.canvas=el}/>
35 |       </div>
36 |     )
37 |   }
38 | }
39 | export default Promptbox


--------------------------------------------------------------------------------
/src/components/SiderNav/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import CustomMenu from "../CustomMenu/index";
  3 | 
  4 | const menus = [
  5 |   {
  6 |     title: '首页',
  7 |     icon: 'home',
  8 |     key: '/home'
  9 |   },
 10 |   {
 11 |     title: '基本组件',
 12 |     icon: 'laptop',
 13 |     key: '/home/general',
 14 |     subs: [
 15 |       {key: '/home/general/button', title: '按钮', icon: '',},
 16 |       {key: '/home/general/icon', title: '图标', icon: '',},
 17 |     ]
 18 |   },
 19 |   {
 20 |     title: '导航组件',
 21 |     icon: 'bars',
 22 |     key: '/home/navigation',
 23 |     subs: [
 24 |       {key: '/home/navigation/dropdown', title: '下拉菜单', icon: ''},
 25 |       {key: '/home/navigation/menu', title: '导航菜单', icon: ''},
 26 |       {key: '/home/navigation/steps', title: '步骤条', icon: ''},
 27 |     ]
 28 |   },
 29 |   {
 30 |     title: '输入组件',
 31 |     icon: 'edit',
 32 |     key: '/home/entry',
 33 |     subs: [
 34 |       {
 35 |         key: '/home/entry/form',
 36 |         title: '表单',
 37 |         icon: '',
 38 |         subs: [
 39 |           {key: '/home/entry/form/basic-form', title: '基础表单', icon: ''},
 40 |           {key: '/home/entry/form/step-form', title: '分步表单', icon: ''}
 41 |         ]
 42 |       },
 43 |       {key: '/home/entry/upload', title: '上传', icon: ''},
 44 |     ]
 45 |   },
 46 |   {
 47 |     title: '显示组件',
 48 |     icon: 'desktop',
 49 |     key: '/home/display',
 50 |     subs: [
 51 |       {key: '/home/display/carousel', title: '轮播图', icon: ''},
 52 |       {key: '/home/display/collapse', title: '折叠面板', icon: ''},
 53 |       {key: '/home/display/list', title: '列表', icon: ''},
 54 |       {key: '/home/display/table', title: '表格', icon: ''},
 55 |       {key: '/home/display/tabs', title: '标签页', icon: '',},
 56 |     ]
 57 |   },
 58 |   {
 59 |     title: '反馈组件',
 60 |     icon: 'message',
 61 |     key: '/home/feedback',
 62 |     subs: [
 63 |       {key: '/home/feedback/modal', title: '对话框', icon: '',},
 64 |       {key: '/home/feedback/notification', title: '通知提醒框', icon: ''},
 65 |       {key: '/home/feedback/spin', title: '加载中', icon: '',}
 66 |     ]
 67 |   },
 68 |   {
 69 |     title: '其它',
 70 |     icon: 'bulb',
 71 |     key: '/home/other',
 72 |     subs:[
 73 |       {key: '/home/other/animation', title: '动画', icon: '',},
 74 |       {key: '/home/other/gallery', title: '画廊', icon: '',},
 75 |       {key:'/home/other/draft',title:'富文本',icon:''},
 76 |       {key:'/home/other/chart',title:'图表',icon:''},
 77 |       {key:'/home/other/loading',title:'加载动画',icon:''},
 78 |       {key:'/home/other/404',title:'404',icon:''},
 79 |       {key:'/home/other/springText',title:'弹性文字',icon:''},
 80 |     ]
 81 |   },
 82 |   {
 83 |     title: '关于',
 84 |     icon: 'info-circle-o',
 85 |     key: '/home/about'
 86 |   }
 87 | ]
 88 | 
 89 | 
 90 | class SiderNav extends React.Component {
 91 |   render() {
 92 | 
 93 |     return (
 94 |       <div style={{height: '100vh',overflowY:'scroll'}}>
 95 |         <div style={styles.logo}></div>
 96 |         <CustomMenu menus={menus}/>
 97 |       </div>
 98 |     )
 99 |   }
100 | }
101 | 
102 | const styles = {
103 |   logo: {
104 |     height: '32px',
105 |     background: 'rgba(255, 255, 255, .2)',
106 |     margin: '16px'
107 |   }
108 | }
109 | 
110 | export default SiderNav


--------------------------------------------------------------------------------
/src/components/TypingCard/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card} from 'antd'
 3 | import Typing from '../../utils/typing'
 4 | 
 5 | class TypingCard extends React.Component {
 6 |   static defaultProps = {
 7 |     title: '何时使用',
 8 |     source:'',
 9 |     height:136
10 |   }
11 |   componentDidMount(){
12 |     const typing = new Typing({
13 |       source:this.source,
14 |       output:this.output,
15 |       delay:30
16 |     })
17 |     typing.start()
18 |   }
19 |   render() {
20 |     return (
21 |       <Card hoverable bordered={false} className='card-item' title={this.props.title} style={{minHeight:this.props.height}} id={this.props.id}>
22 |         <div style={{display:'none'}} ref={el => this.source = el} dangerouslySetInnerHTML={{__html:this.props.source}}/>
23 |         <div ref={el => this.output = el}/>
24 |       </Card>
25 |     )
26 |   }
27 | }
28 | 
29 | export default TypingCard


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import '@babel/polyfill'
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import './index.css';
 5 | import App from './App';
 6 | import registerServiceWorker from './registerServiceWorker';
 7 | import { HashRouter } from 'react-router-dom'
 8 | import { Provider } from 'mobx-react'
 9 | import { LocaleProvider } from 'antd'
10 | import zh_CN from 'antd/lib/locale-provider/zh_CN'
11 | import store from './store'
12 | 
13 | //打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
14 | ReactDOM.render(
15 |   <HashRouter>
16 |     <LocaleProvider locale={zh_CN}>
17 |       <Provider {...store}>
18 |         <App />
19 |       </Provider>
20 |     </LocaleProvider>
21 |   </HashRouter>,
22 |   document.getElementById('root'));
23 | registerServiceWorker();
24 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/routes/About/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CustomBreadcrumb from '../../components/CustomBreadcrumb/index'
 3 | import TypingCard from '../../components/TypingCard'
 4 | 
 5 | export default class About extends React.Component{
 6 |   render(){
 7 |     return (
 8 |       <div>
 9 |         <CustomBreadcrumb arr={['关于']}/>
10 |         <TypingCard source={'这个人很懒，什么也没留下...'} title='关于' />
11 |       </div>
12 |     )
13 |   }
14 | }


--------------------------------------------------------------------------------
/src/routes/Display/CarouselDemo/css/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .ant-carousel .slick-slider .slick-arrow{
 4 |     width: 20px;
 5 |     height: 60px;
 6 |     margin-top: -30px;
 7 |     background: rgba(0, 0, 0, 0.3);
 8 | }
 9 | .ant-carousel .slick-slider .slick-prev{
10 |     z-index:99;
11 |    left:0;
12 | }
13 | .ant-carousel .slick-slider .slick-next{
14 |     z-index:99;
15 |     right:0;
16 | }
17 | .ant-carousel .slick-slider .slick-prev::before{
18 |     content: ' ';
19 |     position: absolute;
20 |     width: 2px;
21 |     height: 15px;
22 |     background: #fff;
23 |     display: block;
24 |     transform: rotate(40deg);
25 |     top: 18px;
26 |     left: 10px;
27 | }
28 | .ant-carousel .slick-slider .slick-prev::after{
29 |     content: ' ';
30 |     position: absolute;
31 |     width: 2px;
32 |     height: 15px;
33 |     background: #fff;
34 |     display: block;
35 |     transform: rotate(-40deg);
36 |     bottom: 17px;
37 |     left: 10px;
38 | }
39 | .ant-carousel .slick-slider .slick-next::before{
40 |     content: ' ';
41 |     position: absolute;
42 |     width: 2px;
43 |     height: 15px;
44 |     background: #fff;
45 |     display: block;
46 |     transform: rotate(-40deg);
47 |     top: 18px;
48 |     left: 10px;
49 | }
50 | .ant-carousel .slick-slider .slick-next::after{
51 |     content: ' ';
52 |     position: absolute;
53 |     width: 2px;
54 |     height: 15px;
55 |     background: #fff;
56 |     display: block;
57 |     transform: rotate(40deg);
58 |     bottom: 17px;
59 |     left: 10px;
60 | }
61 | .ant-carousel .slider-item{
62 |     display: flex;
63 |     flex-direction: column;
64 |     justify-content: center;
65 |     height: 200px;
66 |     overflow: hidden;
67 |     color: #fff;
68 |     font-size: 12px;
69 |     text-align: center;
70 | }
71 | .ant-carousel .slider-item h3{
72 |     display: none;
73 | }
74 | .ant-carousel .slider-item p{
75 |     display: none;
76 | }
77 | .ant-carousel .slick-slide h3 {
78 |     font-size: 32px;
79 |     color: #fff;
80 |     margin-bottom: 0;
81 | }
82 | .ant-carousel .slider-item .slider-active{
83 |     display: block;
84 | }


--------------------------------------------------------------------------------
/src/routes/Display/CarouselDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card, Carousel} from 'antd'
 3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 4 | import TypingCard from '../../../components/TypingCard'
 5 | import './css/style.css'
 6 | import 'animate.css'
 7 | 
 8 | const animations = [
 9 |   ['bounceInDown','bounceInUp'],
10 |   ['bounceInLeft','bounceInRight'],
11 |   ['rotateIn','rotateIn'],
12 |   ['flipInX','flipInY'],
13 |   ['rotateInDownLeft','rotateInUpRight'],
14 |   ['rotateInDownRight','rotateInUpLeft'],
15 |   ['zoomInLeft','zoomInRight'],
16 |   ['zoomInDown','zoomInUp'],
17 |   ['zoomIn','zoomIn'],
18 |   ['lightSpeedIn','bounceInLeft'],
19 | ]
20 | // const colors = ['#364d79','#64cbcc','sandybrown','darksalmon','goldenrod','burlywood','darkseagreen','indianred']
21 | 
22 | function getAnimation(animations){
23 |   let index = Math.floor(Math.random()*animations.length)
24 |   let arr = animations[index]
25 |   arr = arr.map(item=>{
26 |     return `${item} animated slider-active`
27 |   })
28 |   return arr
29 | }
30 | 
31 | class CarouselDemo extends React.Component {
32 |   state = {
33 |     current:0
34 |   }
35 |   animations = getAnimation(animations)
36 |   componentWillUpdate(){
37 |     //当current变化时，也就是state变化时重新给animations赋值，否则animations不会改变.实现类似vue的watch
38 |     //用componentWUpdate还是componentDidUpdate根据具体场景，componentDidUpdate一般是需要用到state时调用（因为setState是异步，需要等更新完成）
39 |     let temp  =  getAnimation(animations)
40 |     while (this.animations[0] === temp[0] ) {
41 |       temp = getAnimation(animations)
42 |     }
43 |     this.animations = temp
44 | 
45 |   }
46 |   render(){
47 |     const { current} = this.state
48 |     const cardContent = `<ul class="card-ul">
49 |             <li>当有一组平级的内容</li>
50 |             <li>当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现</li>
51 |             <li>常用于一组图片或卡片轮播</li>
52 |           </ul>`
53 |     return (
54 |       <div>
55 |         <CustomBreadcrumb arr={['显示','轮播图']}/>
56 |         <TypingCard source={cardContent} height={206}/>
57 |         <Card title='基本用法'>
58 |           <Carousel speed={100} arrows afterChange={(current)=>this.setState({current})} autoplay>
59 |             <div>
60 |               <div className='slider-item' style={{background:'#364d79'}}>
61 |                 <h3 className={current === 0 ? this.animations[0] : ''}>Ant Design of React</h3>
62 |                 <p className={current === 0 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
63 |               </div>
64 |             </div>
65 |             <div>
66 |               <div className='slider-item' style={{background:'#64cbcc'}}>
67 |                 <h3 className={current === 1 ? this.animations[0] : ''}>Ant Design of React</h3>
68 |                 <p className={current === 1 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
69 |               </div>
70 |             </div>
71 |             <div>
72 |               <div className='slider-item' style={{background:'sandybrown'}}>
73 |                 <h3 className={current === 2 ? this.animations[0] : ''}>Ant Design of React</h3>
74 |                 <p className={current === 2 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
75 |               </div>
76 |             </div>
77 |             <div>
78 |               <div className='slider-item' style={{background:'darkseagreen'}}>
79 |                 <h3 className={current === 3 ? this.animations[0] : ''}>Ant Design of React</h3>
80 |                 <p className={current === 3 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
81 |               </div>
82 |             </div>
83 |           </Carousel>
84 |         </Card>
85 |       </div>
86 |     )
87 |   }
88 | }
89 | 
90 | export default CarouselDemo


--------------------------------------------------------------------------------
/src/routes/Display/CollapseDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card, Col, Row, Collapse,BackTop} from 'antd'
 3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 4 | import TypingCard from '../../../components/TypingCard'
 5 | 
 6 | const Panel = Collapse.Panel
 7 | 
 8 | const text = `
 9 |   A dog is a type of domesticated animal.
10 |   Known for its loyalty and faithfulness,
11 |   it can be found as a welcome guest in many households across the world.
12 | `;
13 | const text2 = (
14 |   <p style={{ paddingLeft: 24 }}>
15 |     A dog is a type of domesticated animal.
16 |     Known for its loyalty and faithfulness,
17 |     it can be found as a welcome guest in many households across the world.
18 |   </p>
19 | );
20 | 
21 | class CollapseDemo extends React.Component {
22 |   render(){
23 |     const cardContent = ` <ul class="card-ul">
24 |             <li>对复杂区域进行分组和隐藏，保持页面的整洁</li>
25 |             <li>手风琴 是一种特殊的折叠面板，只允许单个内容区域展开</li>
26 |           </ul>`
27 |     return (
28 |       <div>
29 |         <CustomBreadcrumb arr={['显示','折叠面板']}/>
30 |         <TypingCard source={cardContent} height={178}/>
31 |         <Row gutter={16}>
32 |           <Col span={12}>
33 |             <Card bordered={false} className='card-item' title='基本用法'>
34 |               <Collapse defaultActiveKey={['1']}>
35 |                 <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
36 |                 <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
37 |                 <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
38 |               </Collapse>
39 |             </Card>
40 |             <Card bordered={false} className='card-item' title='简洁风格-无边框'>
41 |               <Collapse defaultActiveKey={['1']} bordered={false}>
42 |                 <Panel header="This is panel header 1" key="1">{text2}</Panel>
43 |                 <Panel header="This is panel header 2" key="2">{text2}</Panel>
44 |                 <Panel header="This is panel header 3" key="3">{text2}</Panel>
45 |               </Collapse>
46 |             </Card>
47 |           </Col>
48 |           <Col span={12}>
49 |             <Card bordered={false} className='card-item' title='手风琴-每次只打开一个tab'>
50 |               <Collapse defaultActiveKey={['2']} accordion>
51 |                 <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
52 |                 <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
53 |                 <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
54 |               </Collapse>
55 |             </Card>
56 |             <Card bordered={false} className='card-item' title='自定义面板'>
57 |               <Collapse defaultActiveKey={['1']} bordered={false}>
58 |                 <Panel header="This is panel header 1" key="1" style={styles.customPanelStyle}><p>{text}</p></Panel>
59 |                 <Panel header="This is panel header 2" key="2" style={styles.customPanelStyle}><p>{text}</p></Panel>
60 |                 <Panel header="This is panel header 3" key="3" style={styles.customPanelStyle}><p>{text}</p></Panel>
61 |               </Collapse>
62 |             </Card>
63 |           </Col>
64 |         </Row>
65 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
66 |       </div>
67 |     )
68 |   }
69 | }
70 | 
71 | const styles = {
72 |   colItem: {
73 |     minHeight:500,
74 |     borderRadius: 3,
75 |     margin: '10px 0'
76 |   },
77 |   customPanelStyle:{
78 |     background: '#f7f7f7',
79 |     borderRadius: 4,
80 |     marginBottom: 24,
81 |     border: 0,
82 |     overflow: 'hidden'
83 |   }
84 | }
85 | 
86 | export default CollapseDemo


--------------------------------------------------------------------------------
/src/routes/Display/ListDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Spin, Button, Radio, List, Switch, Avatar,BackTop,Anchor,Affix,Icon} from 'antd'
  3 | import axios from 'axios'
  4 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
  5 | import TypingCard from '../../../components/TypingCard'
  6 | 
  7 | const data = [
  8 |   'Racing car sprays burning fuel into crowd.',
  9 |   'Japanese princess to wed commoner.',
 10 |   'Australian walks 100km after outback crash.',
 11 |   'Man charged over missing wedding girl.',
 12 |   'Los Angeles battles huge wildfires.',
 13 | ];
 14 | const data3 = []
 15 | for(let i=0;i<23;i++){
 16 |   data3.push({
 17 |     title: `ant design part ${i}`,
 18 |     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
 19 |     description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
 20 |     content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
 21 |   })
 22 | }
 23 | const IconText = ({ type, text }) => (
 24 |   <span>
 25 |     <Icon type={type} style={{ marginRight: 8 }} />
 26 |     {text}
 27 |   </span>
 28 | );
 29 | 
 30 | class ListDemo extends React.Component {
 31 |   state = {
 32 |     size: 'default',
 33 |     bordered: true,
 34 |     data2: [],
 35 |     loading: false,
 36 |     loadingMore: false,
 37 |   }
 38 | 
 39 |   componentDidMount() {
 40 |     this.setState({
 41 |       loading: true,
 42 |     })
 43 |     this.getData2();
 44 |     this.setState({
 45 |       loading: false
 46 |     })
 47 |   }
 48 | 
 49 |   getData2 = () => {
 50 |     this.setState({
 51 |       loadingMore: true
 52 |     })
 53 |     axios.get('https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo').then(res => {
 54 |       this.setState({
 55 |         data2: this.state.data2.concat(res.data.results),
 56 |         loadingMore: false
 57 |       })
 58 |     })
 59 |   }
 60 | 
 61 |   render() {
 62 |     const {size, bordered, loading, data2, loadingMore} = this.state
 63 |     const loadMore = (
 64 |       <div style={styles.loadMore}>
 65 |         {/*不知道为什么这种写法有问题，会报错*/}
 66 |         {/*{loadingMore ? <Spin/> : <Button onClick={() => this.getData2()}>加载更多</Button>}*/}
 67 |           <Spin style={loadingMore?{}:{display:'none'}}/>
 68 |           <Button style={!loadingMore?{}:{display:'none'}} onClick={() => this.getData2()}>加载更多</Button>
 69 |       </div>
 70 |     )
 71 |     return (
 72 |       <div>
 73 |         <CustomBreadcrumb arr={['显示', '列表']}/>
 74 |         <TypingCard id='howUse' source='最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。'/>
 75 |         <Card bordered={false} title='基本用法' style={{marginBottom: 10}} id='basicUsage'>
 76 |           <Radio.Group value={size}
 77 |                        onChange={e => this.setState({size: e.target.value})}
 78 |                        style={{marginBottom: '1em'}}>
 79 |             <Radio.Button value='large'>Large</Radio.Button>
 80 |             <Radio.Button value='default'>Default</Radio.Button>
 81 |             <Radio.Button value='small'>Small</Radio.Button>
 82 |           </Radio.Group>&emsp;&emsp;&emsp;
 83 |           是否有边框&emsp;<Switch defaultChecked
 84 |                              onChange={checked => this.setState({bordered: checked})}/>
 85 |           <List dataSource={data}
 86 |                 bordered={bordered}
 87 |                 size={size}
 88 |                 style={bordered ? styles.haveBorder : styles.noBorder}
 89 |                 renderItem={item => (<List.Item>{item}</List.Item>)}/>
 90 |         </Card>
 91 |         <Card bordered={false} title='加载更多' style={{marginBottom: 10}} id='remoteLoading'>
 92 |           <List loading={loading}
 93 |                 dataSource={data2}
 94 |                 loadMore={loadMore}
 95 |                 style={styles.listStyle}
 96 |                 renderItem={item => (
 97 |                   <List.Item actions={[<a>edit</a>, <a>more</a>]}>
 98 |                     <List.Item.Meta
 99 |                       avatar={<Avatar
100 |                         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>}
101 |                       title={<a>{item.name.last}</a>}
102 |                       description="Ant Design, a design language for background applications, is refined by Ant UED Team"
103 |                     />
104 |                   </List.Item>
105 |                 )}
106 |           />
107 |         </Card>
108 |         <Card bordered={false} title='竖排列表样式' style={{marginBottom: 15}} id='verticalStyle'>
109 |           <List dataSource={data3}
110 |                 itemLayout='vertical'
111 |                 pagination={{pageSize: 3}}
112 |                 style={styles.listStyle}
113 |                 renderItem={item=>{
114 |                   return (
115 |                     <List.Item
116 |                       actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
117 |                       extra={<img width={272} alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />}>
118 |                       <List.Item.Meta
119 |                         avatar={<Avatar src={item.avatar} />}
120 |                         title={<a>{item.title}</a>}
121 |                         description={item.description}
122 |                       />
123 |                       {item.content}
124 |                       </List.Item>
125 |                   )
126 |                 }}
127 |           />
128 |         </Card>
129 | 
130 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
131 |         <Affix style={styles.affixBox}>
132 |           <Anchor offsetTop={50} affix={false}>
133 |             <Anchor.Link href='#howUse' title='何时使用'/>
134 |             <Anchor.Link href='#basicUsage' title='基本用法'/>
135 |             <Anchor.Link href='#remoteLoading' title='加载更多'/>
136 |             <Anchor.Link href='#verticalStyle' title='竖排列表样式'/>
137 |           </Anchor>
138 |         </Affix>
139 |       </div>
140 |     )
141 |   }
142 | }
143 | 
144 | const styles = {
145 |   haveBorder: {
146 |     minHeight: 270,
147 |     width:'80%',
148 |     boxSizing: 'border-box'
149 |   },
150 |   noBorder: {
151 |     minHeight: 270,
152 |     width:'80%',
153 |     padding: '0 24px',
154 |     boxSizing: 'border-box',
155 |     border: '1px solid #fff'
156 |   },
157 |   loadMore: {
158 |     height: 32,
159 |     marginTop: 16,
160 |     lineHeight: '32px',
161 |     textAlign: 'center',
162 |   },
163 |   listStyle:{
164 |     width:'80%'
165 |   },
166 |   affixBox:{
167 |     position: 'absolute',
168 |     top: 100,
169 |     right: 50,
170 |     with: 170
171 |   }
172 | }
173 | 
174 | export default ListDemo


--------------------------------------------------------------------------------
/src/routes/Entry/FormDemo/css/formDeni2.css:
--------------------------------------------------------------------------------
 1 | .desc {
 2 |     padding: 0 56px;
 3 |     color: rgba(0, 0, 0, .45);
 4 | }
 5 | 
 6 | .desc h3 {
 7 |     font-size: 16px;
 8 |     margin: 0 0 12px 0;
 9 |     color: rgba(0, 0, 0, .45);
10 |     line-height: 32px;
11 | }
12 | 
13 | .desc h4 {
14 |     margin: 0 0 4px 0;
15 |     color: rgba(0, 0, 0, .45);
16 |     font-size: 14px;
17 |     line-height: 22px;
18 | }
19 | 
20 | .desc p {
21 |     margin-top: 0;
22 |     margin-bottom: 12px;
23 |     line-height: 22px;
24 | }
25 | .stepForm {
26 |     margin: 40px auto 0;
27 |     max-width: 500px;
28 | }
29 | 
30 | #step2 .ant-form-item {
31 |     margin-bottom: 10px;
32 | }
33 | #step3{
34 |     width: 60%;
35 |     text-align: center;
36 |     margin: 40px auto 0;
37 | }
38 | #step3 .ant-form-item {
39 |     margin-bottom: 10px;
40 | }
41 | .money{
42 |     font-family: "Helvetica Neue",sans-serif;
43 |     font-weight: 500;
44 |     font-size: 20px;
45 |     line-height: 14px;
46 | }
47 | .icon-box{
48 |     font-size: 72px;
49 |     line-height: 72px;
50 |     margin-bottom: 24px;
51 |     color: #52c41a;
52 |     text-align: center;
53 | }
54 | .success{
55 |     font-size: 24px;
56 |     color: rgba(0,0,0,.85);
57 |     font-weight: 500;
58 |     line-height: 32px;
59 |     margin-bottom: 16px;
60 |     text-align: center;
61 | }
62 | .success-desc{
63 |     font-size: 14px;
64 |     line-height: 22px;
65 |     color: rgba(0,0,0,.45);
66 |     margin-bottom: 24px;
67 |     text-align: center;
68 | }
69 | #step3 .result{
70 |     padding: 24px 40px;
71 |     margin-bottom: 32px;
72 |     border-radius: 2px;
73 |     background: #fafafa;
74 |     text-align: left;
75 | }
76 | 


--------------------------------------------------------------------------------
/src/routes/Entry/FormDemo/store.js:
--------------------------------------------------------------------------------
 1 | import {observable,action} from 'mobx'
 2 | 
 3 | //刷新页面会使mobx重新初始化。vuex会吗？
 4 | 
 5 | class StepFormStore{
 6 |   @observable current = 0
 7 |   @observable info = {}
 8 | 
 9 |   @action setCurrent(current){
10 |     this.current = current
11 |   }
12 |   @action setInfo(info){
13 |     this.info = info
14 |   }
15 | }
16 | 
17 | export default new StepFormStore()


--------------------------------------------------------------------------------
/src/routes/Entry/UploadDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Col, Row, Icon, Upload, message, Button, Modal,BackTop} from 'antd'
  3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb'
  4 | import TypingCard from '../../../components/TypingCard'
  5 | 
  6 | const Dragger = Upload.Dragger;
  7 | 
  8 | function getBase64(img, callback) {
  9 |   const reader = new FileReader();
 10 |   reader.addEventListener('load', () => callback(reader.result));
 11 |   reader.readAsDataURL(img);
 12 | }
 13 | 
 14 | const props = {
 15 |   name: 'file',
 16 |   action: '//jsonplaceholder.typicode.com/posts/',
 17 |   headers: {
 18 |     authorization: 'authorization-text',
 19 |   },
 20 |   onChange(info) {
 21 |     if (info.file.status !== 'uploading') {
 22 |       // console.log(info.file, info.fileList);
 23 |     }
 24 |     if (info.file.status === 'done') {
 25 |       message.success(`${info.file.name} 文件上传成功`);
 26 |     } else if (info.file.status === 'error') {
 27 |       message.error(`${info.file.name} 文件上传失败`);
 28 |     }
 29 |   },
 30 |   defaultFileList: [{
 31 |     uid: 1,
 32 |     name: 'xxx.png',
 33 |     status: 'done',
 34 |     reponse: 'Server Error 500', // custom error message to show
 35 |     url: 'http://www.baidu.com/xxx.png',
 36 |   }, {
 37 |     uid: 2,
 38 |     name: 'yyy.png',
 39 |     status: 'done',
 40 |     url: 'http://www.baidu.com/yyy.png',
 41 |   }, {
 42 |     uid: 3,
 43 |     name: 'zzz.png',
 44 |     status: 'error',
 45 |     reponse: 'Server Error 500', // custom error message to show
 46 |     url: 'http://www.baidu.com/zzz.png',
 47 |   }],
 48 | }
 49 | 
 50 | const props2 = {
 51 |   name: 'file',
 52 |   multiple: true,
 53 |   action: '//jsonplaceholder.typicode.com/posts/',
 54 |   onChange(info) {
 55 |     const status = info.file.status;
 56 |     if (status !== 'uploading') {
 57 |       console.log(info.file, info.fileList);
 58 |     }
 59 |     if (status === 'done') {
 60 |       message.success(`${info.file.name} file uploaded successfully.`);
 61 |     } else if (status === 'error') {
 62 |       message.error(`${info.file.name} file upload failed.`);
 63 |     }
 64 |   },
 65 | }
 66 | 
 67 | class UploadDemo extends React.Component {
 68 |   state = {
 69 |     loading: false,
 70 |     previewVisible: false,
 71 |     previewImage: '',
 72 |     fileList: [{
 73 |       uid: -1,
 74 |       name: 'xxx.png',
 75 |       status: 'done',
 76 |       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
 77 |     }],
 78 |   }
 79 | 
 80 |   beforeUpload(file, fileList) {
 81 |     const isJPG = file.type === 'image/jpeg'
 82 |     if (!isJPG) {
 83 |       message.error('只能上传JPG格式的图片');
 84 |     }
 85 |     const isLt2M = file.size / 1024 / 1024 < 2;
 86 |     if (!isLt2M) {
 87 |       message.error('图片大小不超过 2MB!');
 88 |     }
 89 |     return isJPG && isLt2M;
 90 |   }
 91 | 
 92 |   handleChange = (info) => {
 93 |     if (info.file.status === 'uploading') {
 94 |       this.setState({loading: true});
 95 |       return;
 96 |     }
 97 |     if (info.file.status === 'done') {
 98 |       // Get this url from response in real world.
 99 |       getBase64(info.file.originFileObj, imageUrl => this.setState({
100 |         imageUrl,
101 |         loading: false,
102 |       }))
103 |     } else if (info.file.status === 'error') {
104 |       // console.log(info.file)
105 |       message.error(`${info.file.name} 文件上传失败（${info.file.error.message}）`);
106 |       this.setState({
107 |         loading: false
108 |       })
109 |     }
110 |   }
111 |   handlePreview = (file) => {
112 |     this.setState({
113 |       previewImage: file.url || file.thumbUrl,
114 |       previewVisible: true,
115 |     });
116 |   }
117 | 
118 |   render() {
119 |     const uploadButton = (
120 |       <div>
121 |         <Icon type="plus"/>
122 |         <div className="ant-upload-text">Upload</div>
123 |       </div>
124 |     );
125 |     const cardContent = `上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
126 |           <ul class="card-ul">
127 |             <li>当需要上传一个或一些文件时</li>
128 |             <li>当需要展现上传的进度时</li>
129 |             <li>当需要使用拖拽交互时</li>
130 |           </ul>`
131 |     return (
132 |       <div>
133 |         <CustomBreadcrumb arr={['输入', '上传']}/>
134 |         <TypingCard source={cardContent} height={234}/>
135 |         <Row gutter={16}>
136 |           <Col span={12}>
137 |             <Card bordered={false} className='card-item' title='基本用法'>
138 |               <Upload {...props}>
139 |                 <Button><Icon type="upload"/>Upload</Button>
140 |               </Upload>
141 |             </Card>
142 |             <Card bordered={false} style={{...styles.colItem, minHeight: 255}} title='照片墙'>
143 |               <Upload
144 |                 action="//jsonplaceholder.typicode.com/posts/"
145 |                 listType="picture-card"
146 |                 fileList={this.state.fileList}
147 |                 onPreview={this.handlePreview}
148 |                 onChange={({fileList}) => this.setState({fileList})}
149 |               >
150 |                 {this.state.fileList.length >= 3 ? null : uploadButton}
151 |               </Upload>
152 |               <Modal visible={this.state.previewVisible} onCancel={() => this.setState({previewVisible: false})}>
153 |                 <img alt="example" style={{width: '100%'}} src={this.state.previewImage}/>
154 |               </Modal>
155 |             </Card>
156 |           </Col>
157 |           <Col span={12}>
158 |             <Card bordered={false} className='card-item' title='用户头像上传'>
159 |               <Row type='flex' align='middle'>
160 |                 <Col span={8}>
161 |                   <Upload
162 |                     name="avatar"
163 |                     showUploadList={false}
164 |                     action='/upload'
165 |                     beforeUpload={this.beforeUpload}
166 |                     onChange={this.handleChange}
167 |                     listType="picture-card">
168 |                     <div>
169 |                       <Icon type={this.state.loading ? 'loading' : 'plus'}/>
170 |                       <div className="ant-upload-text">Upload</div>
171 |                     </div>
172 |                   </Upload>
173 |                 </Col>
174 |                 <Col span={16}>
175 |                   点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小
176 |                 </Col>
177 |               </Row>
178 |             </Card>
179 |             <Card bordered={false} className='card-item' title='拖拽上传'>
180 |               <Dragger {...props2}>
181 |                 <p className="ant-upload-drag-icon">
182 |                   <Icon type="inbox"/>
183 |                 </p>
184 |                 <p className="ant-upload-text">点击或拖拽到此处完成上传</p>
185 |                 <p className="ant-upload-hint">支持单个或批量上传。严禁上传公司数据或其他带文件</p>
186 |               </Dragger>
187 |             </Card>
188 |           </Col>
189 |         </Row>
190 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
191 |       </div>
192 |     )
193 |   }
194 | }
195 | 
196 | const styles = {
197 |   colItem: {
198 |     minHeight: 230,
199 |     borderRadius: 3,
200 |     margin: '10px 0'
201 |   }
202 | }
203 | 
204 | export default UploadDemo


--------------------------------------------------------------------------------
/src/routes/Feedback/ModalDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Button, Modal, Tooltip} from 'antd'
  3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb'
  4 | import TypingCard from '../../../components/TypingCard'
  5 | 
  6 | class ModalDemo extends React.Component {
  7 |   state = {
  8 |     visible: false,
  9 |     visible2: false,
 10 |     visible3: false,
 11 |     visible4: false,
 12 |     visible5: false,
 13 |     ModalText: '显示对话框的内容',
 14 |     confirmLoading: false
 15 |   }
 16 | 
 17 |   closeModal(a) {
 18 |     this.setState({
 19 |       [a]: false
 20 |     })
 21 |   }
 22 | 
 23 |   asynModalOnOk = (a) => {
 24 |     this.setState({
 25 |       confirmLoading: true,
 26 |       ModalText: '对话框将在2秒后关闭'
 27 |     })
 28 |     setTimeout(() => this.setState({
 29 |       [a]: false,
 30 |       confirmLoading: false,
 31 |       ModalText: '显示对话框的内容'
 32 |     }), 2000)
 33 |   }
 34 |   showConfirm = () => {
 35 |     Modal.confirm({
 36 |       title: 'Do you Want to delete these items?',
 37 |       content: 'Some descriptions',
 38 |     })
 39 |   }
 40 |   showDeleteConfirm = () => {
 41 |     Modal.confirm({
 42 |       title: 'Are you sure delete this task?',
 43 |       content: 'Some descriptions',
 44 |       okText: 'Yes',
 45 |       okType: 'danger',
 46 |       cancelText: 'No',
 47 |       onOk() {
 48 |         console.log('OK');
 49 |       },
 50 |       onCancel() {
 51 |         console.log('Cancel');
 52 |       },
 53 |     });
 54 |   }
 55 |   showModalType = (type) => {
 56 |     switch (type) {
 57 |       case 'info':
 58 |         Modal.info({
 59 |           title: 'This is a notification message',
 60 |           content: (
 61 |             <div>
 62 |               <p>some messages...some messages...</p>
 63 |               <p>some messages...some messages...</p>
 64 |             </div>
 65 |           )
 66 |         })
 67 |         break;
 68 |       case 'success':
 69 |         Modal.success({
 70 |           title: 'This is a success message',
 71 |           content: 'some messages...some messages...',
 72 |         })
 73 |         break;
 74 |       case 'error':
 75 |         Modal.error({
 76 |           title: 'This is an error message',
 77 |           content: 'some messages...some messages...',
 78 |         })
 79 |         break;
 80 |       default:
 81 |         Modal.warning({
 82 |           title: 'This is a warning message',
 83 |           content: 'some messages...some messages...',
 84 |         })
 85 |         break;
 86 |     }
 87 |   }
 88 | 
 89 |   render() {
 90 |     const {visible, visible2, visible3, visible4, visible5, ModalText, confirmLoading} = this.state
 91 |     const cardContent = ` 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。<br/>
 92 |           另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 antd.Modal.confirm() 等方法。`
 93 |     return (
 94 |       <div>
 95 |         <CustomBreadcrumb arr={['反馈','对话框']}/>
 96 |         <TypingCard source={cardContent} height={164}/>
 97 |         <Card bordered={false}>
 98 |           <p>
 99 |             <Button onClick={() => this.setState({visible: true})}>基本用法</Button>
100 |             <Modal
101 |               visible={visible}
102 |               title='基本用法'
103 |               onOk={() => this.closeModal('visible')}
104 |               onCancel={() => this.closeModal('visible')}>
105 |               <p>Some contents...</p>
106 |               <p>Some contents...</p>
107 |               <p>Some contents...</p>
108 |             </Modal>
109 |           </p>
110 |           <p>
111 |             <Tooltip title='点击确定后异步关闭对话框，例如提交表单' placement='right'>
112 |               <Button onClick={() => this.setState({visible2: true})}>异步关闭</Button>
113 |             </Tooltip>
114 |             <Modal
115 |               visible={visible2}
116 |               title='异步关闭'
117 |               onOk={() => this.asynModalOnOk('visible2')}
118 |               confirmLoading={confirmLoading}
119 |               onCancel={() => this.closeModal('visible2')}>
120 |               <p>{ModalText}</p>
121 |             </Modal>
122 |           </p>
123 |           <p>
124 |             <Tooltip title='更复杂的例子，自定义了页脚的按钮' placement='right'>
125 |               <Button onClick={() => this.setState({visible3: true})}>自定义页脚</Button>
126 |             </Tooltip>
127 |             <Modal
128 |               visible={visible3}
129 |               title='自定义页脚'
130 |               onOk={() => this.asynModalOnOk('visible3')}
131 |               onCancel={() => this.closeModal('visible3')}
132 |               footer={
133 |                 <div>
134 |                   <Button onClick={() => this.closeModal('visible3')}>Return</Button>
135 |                   <Button type="primary" loading={confirmLoading} onClick={() => this.asynModalOnOk('visible3')}>
136 |                     Submit
137 |                   </Button>
138 |                 </div>}
139 |             >
140 |               <p>{ModalText}</p>
141 |             </Modal>
142 |           </p>
143 |           <p>
144 |             <Button onClick={this.showConfirm}>确认对话框</Button>&emsp;
145 |             <Button onClick={this.showDeleteConfirm}>删除确认框</Button>
146 |           </p>
147 |           <p>
148 |             <Button onClick={() => this.showModalType('info')}>信息提示</Button>&emsp;
149 |             <Button onClick={() => this.showModalType('success')}>成功</Button>&emsp;
150 |             <Button onClick={() => this.showModalType('error')}>错误</Button>&emsp;
151 |             <Button onClick={() => this.showModalType('warning')}>警告</Button>
152 |           </p>
153 |           <p>
154 |             <Button onClick={() => this.setState({visible4: true})}>距离顶部20px</Button>
155 |             <Modal
156 |               visible={visible4}
157 |               title='距离顶部20px'
158 |               style={{top: 20}}
159 |               onOk={() => this.closeModal('visible4')}
160 |               onCancel={() => this.closeModal('visible4')}>
161 |               <p>Some contents...</p>
162 |               <p>Some contents...</p>
163 |               <p>Some contents...</p>
164 |             </Modal>
165 |           </p>
166 |           <p>
167 |             <Button onClick={() => this.setState({visible5: true})}>垂直居中</Button>
168 |             <Modal
169 |               visible={visible5}
170 |               title='垂直居中'
171 |               wrapClassName="vertical-center-modal"
172 |               style={{top: '30%'}}
173 |               onOk={() => this.closeModal('visible5')}
174 |               onCancel={() => this.closeModal('visible5')}>
175 |               <p>Some contents...</p>
176 |               <p>Some contents...</p>
177 |               <p>Some contents...</p>
178 |             </Modal>
179 |           </p>
180 |         </Card>
181 |       </div>
182 |     )
183 |   }
184 | }
185 | 
186 | // const styles = {
187 | //   modalVertical: {
188 | //     position: 'fixed',
189 | //     top: '50%',
190 | //     left: '50%',
191 | //     transform: 'translate(-50%,-50%)'
192 | //   }
193 | // }
194 | 
195 | export default ModalDemo


--------------------------------------------------------------------------------
/src/routes/Feedback/NotificationDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card,Col,Row,Button,Tooltip,notification,Select} from 'antd'
 3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 4 | import TypingCard from '../../../components/TypingCard'
 5 | 
 6 | class NotificationDemo extends React.Component{
 7 |   state = {
 8 |     placement:''
 9 |   }
10 |   openNotification(obj){
11 |     notification.open({
12 |       message: 'Notification Title',
13 |       description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
14 |       ...obj
15 |     })
16 |   }
17 |   openNotificationType(type){
18 |     notification[type]({
19 |       message: 'Notification Title',
20 |       description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
21 |     });
22 |   }
23 |   customNotification(){
24 |     const key = Date.now()
25 |     notification.open({
26 |       message: 'Notification Title',
27 |       description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
28 |       key,
29 |       btn:<Button type="primary" onClick={() => notification.close(key)}>Confirm</Button>
30 |     })
31 |   }
32 |   render(){
33 |     const placement = this.state.placement
34 |     const cardContent = ` 在系统四个角显示通知提醒信息。经常用于以下情况：
35 |           <ul class="card-ul">
36 |             <li>较为复杂的通知内容</li>
37 |             <li>带有交互的通知，给出用户下一步的行动点</li>
38 |             <li>系统主动推送</li>
39 |           </ul>`
40 |     return (
41 |       <div>
42 |         <CustomBreadcrumb arr={['反馈','通知提醒框']}/>
43 |         <TypingCard source={cardContent} height={234}/>
44 |         <Row gutter={16}>
45 |           <Col span={12}>
46 |             <Card bordered={false} className='card-item'>
47 |               <Tooltip title='最简单的用法，4.5 秒后自动关闭' placement='right'>
48 |                 <Button type='primary' onClick={this.openNotification}>基本用法</Button>
49 |               </Tooltip>
50 |             </Card>
51 |           </Col>
52 |           <Col span={12}>
53 |             <Card bordered={false} className='card-item'>
54 |               <Tooltip title='设置duration: 0来取消自动关闭' placement='right'>
55 |                 <Button type='primary' onClick={()=>this.openNotification({duration:0})}>取消自动关闭</Button>
56 |               </Tooltip>
57 |             </Card>
58 |           </Col>
59 |           <Col span={12}>
60 |             <Card bordered={false} className='card-item'>
61 |              <Button type='primary' onClick={()=>this.openNotificationType('success')}>成功</Button>&emsp;
62 |              <Button type='primary' onClick={()=>this.openNotificationType('info')}>提醒</Button>&emsp;
63 |              <Button type='primary' onClick={()=>this.openNotificationType('warning')}>警告</Button>&emsp;
64 |              <Button type='primary' onClick={()=>this.openNotificationType('error')}>错误</Button>
65 |             </Card>
66 |           </Col>
67 |           <Col span={12}>
68 |             <Card bordered={false} className='card-item'>
69 |               <Tooltip title='使用 style 和 className 来定义样式' placement='right'>
70 |                 <Button type='primary' onClick={()=>this.openNotification({style:{width: 600, marginLeft: 335 - 600,}})}>自定义样式</Button>
71 |               </Tooltip>
72 |             </Card>
73 |           </Col>
74 |           <Col span={12}>
75 |             <Card bordered={false} className='card-item'>
76 |               <Tooltip title='自定义关闭按钮的样式和文字' placement='right'>
77 |                 <Button type='primary' onClick={this.customNotification}>自定义按钮</Button>
78 |               </Tooltip>
79 |             </Card>
80 |           </Col>
81 |           <Col span={12}>
82 |             <Card bordered={false} className='card-item'>
83 |               <Select defaultValue='topRight' style={{width:160}} onChange={v=>this.setState({placement:v})}>
84 |                 <Select.Option value='topLeft'>topLeft</Select.Option>
85 |                 <Select.Option value='topRight'>topRight</Select.Option>
86 |                 <Select.Option value='bottomLeft'>topLeft</Select.Option>
87 |                 <Select.Option value='bottomRight'>bottomRight</Select.Option>
88 |               </Select>&emsp;&emsp;
89 |               <Button onClick={()=>this.openNotification({placement})}>打开消息通知</Button>
90 |             </Card>
91 |           </Col>
92 |         </Row>
93 |       </div>
94 |     )
95 |   }
96 | }
97 | 
98 | export default NotificationDemo


--------------------------------------------------------------------------------
/src/routes/Feedback/SpinDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card, Col, Row, Spin, Icon, Alert, Switch, Button} from 'antd'
 3 | import NProgress from 'nprogress'
 4 | import 'nprogress/nprogress.css'
 5 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 6 | import TypingCard from '../../../components/TypingCard'
 7 | 
 8 | class SpinDemo extends React.Component {
 9 |   state = {
10 |     loading: false,
11 |     loading2: false
12 |   }
13 |   componentWillMount(){
14 |     //页面路由加载的进度条，React有没有方法可以使路由加载自动调用这个方法，避免在每个页面都设置
15 |     //vue有方法可以实现https://segmentfault.com/q/1010000006653683/a-1020000007724198
16 |     NProgress.start()
17 |   }
18 |   componentDidMount(){
19 |     NProgress.done()
20 |   }
21 |   componentWillUnmount(){
22 |     //这里是防止下面调用NProgress.start()方法后离开组件后还未关闭
23 |     NProgress.done()
24 |   }
25 |   NProgressStart = () => {
26 |     NProgress.start()
27 |     this.setState({
28 |       loading2: true
29 |     })
30 |   }
31 |   NProgressDone = () => {
32 |     NProgress.done()
33 |     this.setState({
34 |       loading2: false
35 |     })
36 |   }
37 | 
38 |   render() {
39 |     const loading2 = this.state.loading2
40 |     return (
41 |       <div>
42 |         <CustomBreadcrumb arr={['反馈','加载中']}/>
43 |         <TypingCard source='页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。'/>
44 |         <Row gutter={16}>
45 |           <Col span={12}>
46 |             <Card bordered={false} className='card-item'>
47 |               <Spin/>&emsp;
48 |               <Spin indicator={<Icon type='loading'/>}/>
49 |             </Card>
50 |             <Card bordered={false} className='card-item'>
51 |               <Spin tip="Loading...">
52 |                 <Alert
53 |                   message="Alert message title"
54 |                   description="Further details about the context of this alert."
55 |                   type="info"
56 |                 />
57 |               </Spin>
58 |             </Card>
59 |             <Card bordered={false} className='card-item'>
60 |               <Button onClick={this.NProgressStart} loading={loading2}>页面顶部进度条加载</Button>&emsp;
61 |               <Button onClick={this.NProgressDone}>顶部进度条加载完成</Button>
62 |             </Card>
63 |           </Col>
64 |           <Col span={12}>
65 |             <Card bordered={false} className='card-item'>
66 |               <Spin size='small'/>&emsp;
67 |               <Spin/>&emsp;
68 |               <Spin size='large'/>
69 |             </Card>
70 |             <Card bordered={false} className='card-item'>
71 |               <div style={{marginBottom: '1em'}}>
72 |                 <Spin tip="Loading..." spinning={this.state.loading}>
73 |                   <Alert
74 |                     message="Alert message title"
75 |                     description="Further details about the context of this alert."
76 |                     type="info"
77 |                   />
78 |                 </Spin>
79 |               </div>
80 |               Loading state：<Switch onChange={(checked) => this.setState({loading: checked})}/>
81 |             </Card>
82 |           </Col>
83 |         </Row>
84 |       </div>
85 |     )
86 |   }
87 | }
88 | 
89 | export default SpinDemo


--------------------------------------------------------------------------------
/src/routes/General/ButtonDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Button, Row, Col, Card, Icon, Radio, Dropdown, Menu, message} from 'antd'
  3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
  4 | import TypingCard from '../../../components/TypingCard'
  5 | 
  6 | class ButtonDemo extends React.Component {
  7 |   state = {
  8 |     size: 'default'
  9 |   }
 10 |   handleSizeChange = (e) => {
 11 |     this.setState({
 12 |       size: e.target.value,
 13 |       loading: false,
 14 |       iconLoading: false
 15 |     })
 16 |   }
 17 | 
 18 |   handleMenuClick(e) {
 19 |     message.info(`Click on menu ${e.key} item.`)
 20 |   }
 21 | 
 22 |   render() {
 23 |     const {size, loading, iconLoading} = this.state
 24 |     const menu = (
 25 |       <Menu onClick={this.handleMenuClick}>
 26 |         <Menu.Item key="1">1st item</Menu.Item>
 27 |         <Menu.Item key="2">2nd item</Menu.Item>
 28 |         <Menu.Item key="3">3rd item</Menu.Item>
 29 |       </Menu>
 30 |     );
 31 |     const cardContent = `标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。`
 32 |     return (
 33 |       <div>
 34 |         <CustomBreadcrumb arr={['基本','按钮']}/>
 35 |         <TypingCard source={cardContent} />
 36 |         <Row gutter={16}>
 37 |           <Col span={12}>
 38 |             <Card bordered={false} className='card-item'>
 39 |               <Button type="primary">Primary</Button>&emsp;
 40 |               <Button>Default</Button>&emsp;
 41 |               <Button type="dashed">Dashed</Button>&emsp;
 42 |               <Button type="danger">Danger</Button>
 43 |             </Card>
 44 |             <Card bordered={false} className='card-item'>
 45 |               <Radio.Group value={this.state.size} onChange={this.handleSizeChange}>
 46 |                 <Radio.Button value="large">Large</Radio.Button>
 47 |                 <Radio.Button value="default">Default</Radio.Button>
 48 |                 <Radio.Button value="small">Small</Radio.Button>
 49 |               </Radio.Group>
 50 |               <p style={{marginTop: '1em'}}>
 51 |                 <Button type="primary" size={size}>Primary</Button>&emsp;
 52 |                 <Button size={this.state.size}>Default</Button>&emsp;
 53 |                 <Button type="dashed" size={size}>Dashed</Button>&emsp;
 54 |                 <Button type="danger" size={size}>Danger</Button>
 55 |               </p>
 56 |               <p>
 57 |                 <Button shape='circle' type='primary' icon="download" size={size}/>&emsp;
 58 |                 <Button type="primary" icon="download" size={size}>Download</Button>
 59 |               </p>
 60 |               <div>
 61 |                 <Button.Group size={size}>
 62 |                   <Button><Icon type="left"/>Backward</Button>&emsp;
 63 |                   <Button>Forward<Icon type="right"/></Button>
 64 |                 </Button.Group>
 65 |               </div>
 66 |             </Card>
 67 |           </Col>
 68 |           <Col span={12}>
 69 |             <Card bordered={false} className='card-item'>
 70 |               <p>
 71 |                 <Button type="primary" shape="circle" icon="search"/>&emsp;
 72 |                 <Button type="primary" icon="search">Search</Button>&emsp;
 73 |                 <Button shape="circle" icon="search"/>&emsp;
 74 |                 <Button icon="search">Search</Button>&emsp;
 75 |               </p>
 76 |               <p style={{marginBottom: 0}}>
 77 |                 <Button shape="circle" icon="search"/>&emsp;
 78 |                 <Button icon="search">Search</Button>&emsp;
 79 |                 <Button type="dashed" shape="circle" icon="search"/>&emsp;
 80 |                 <Button type="dashed" icon="search">Search</Button>
 81 |               </p>
 82 |             </Card>
 83 |             <Card bordered={false} className='card-item'>
 84 |               <Button type="primary">primary</Button>&emsp;
 85 |               <Button>secondary</Button>&emsp;
 86 |               <Dropdown overlay={menu}>
 87 |                 <Button>Button<Icon type='down'/></Button>
 88 |               </Dropdown>
 89 |             </Card>
 90 |             <Card bordered={false} className='card-item'>
 91 |               <p>
 92 |                 <Button loading type='primary'>Loading</Button>&emsp;
 93 |                 <Button type='primary' loading shape='circle'/>
 94 |               </p>
 95 |               <div>
 96 |                 <Button loading={loading} onClick={() => this.setState({loading: true})}>Click me</Button>&emsp;
 97 |                 <Button loading={iconLoading} onClick={() => this.setState({iconLoading: true})} icon='poweroff'>Click
 98 |                   me</Button>
 99 |               </div>
100 |             </Card>
101 |           </Col>
102 |         </Row>
103 |       </div>
104 |     )
105 |   }
106 | }
107 | 
108 | export default ButtonDemo


--------------------------------------------------------------------------------
/src/routes/General/IconDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Icon, Card, BackTop, Anchor, Affix} from 'antd'
 3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 4 | import TypingCard from '../../../components/TypingCard'
 5 | 
 6 | const icons = [
 7 |   {
 8 |     title: '方向性图标',
 9 |     anchor: 'direction',
10 |     list: ["step-backward", "step-forward", "fast-backward", "fast-forward", "shrink", "arrows-alt", "down", "up", "left", "right", "caret-up", "caret-down", "caret-left", "caret-right", "up-circle", "down-circle", "left-circle", "right-circle", "up-circle-o", "down-circle-o", "right-circle-o", "left-circle-o", "double-right", "double-left", "verticle-left", "verticle-right", "forward", "backward", "rollback", "enter", "retweet", "swap", "swap-left", "swap-right", "arrow-up", "arrow-down", "arrow-left", "arrow-right", "play-circle", "play-circle-o", "up-square", "down-square", "left-square", "right-square", "up-square-o", "down-square-o", "left-square-o", "right-square-o", "login", "logout", "menu-fold", "menu-unfold"],
11 |   },
12 |   {
13 |     title: '提示建议性图标',
14 |     anchor: 'suggestion',
15 |     list: ["question", "question-circle-o", "question-circle", "plus", "plus-circle-o", "plus-circle", "pause", "pause-circle-o", "pause-circle", "minus", "minus-circle-o", "minus-circle", "plus-square", "plus-square-o", "minus-square", "minus-square-o", "info", "info-circle-o", "info-circle", "exclamation", "exclamation-circle-o", "exclamation-circle", "close", "close-circle", "close-circle-o", "close-square", "close-square-o", "check", "check-circle", "check-circle-o", "check-square", "check-square-o", "clock-circle-o", "clock-circle"],
16 |   },
17 |   {
18 |     title: '网站通用图标',
19 |     anchor: 'logo',
20 |     list: ["lock", "unlock", "area-chart", "pie-chart", "bar-chart", "dot-chart", "bars", "book", "calendar", "cloud", "cloud-download", "code", "code-o", "copy", "credit-card", "delete", "desktop", "download", "edit", "ellipsis", "file", "file-text", "file-unknown", "file-pdf", "file-excel", "file-jpg", "file-ppt", "file-add", "folder", "folder-open", "folder-add", "hdd", "frown", "frown-o", "meh", "meh-o", "smile", "smile-o", "inbox", "laptop", "appstore-o", "appstore", "line-chart", "link", "mail", "mobile", "notification", "paper-clip", "picture", "poweroff", "reload", "search", "setting", "share-alt", "shopping-cart", "tablet", "tag", "tag-o", "tags", "tags-o", "to-top", "upload", "user", "video-camera", "home", "loading", "loading-3-quarters", "cloud-upload-o", "cloud-download-o", "cloud-upload", "cloud-o", "star-o", "star", "heart-o", "heart", "environment", "environment-o", "eye", "eye-o", "camera", "camera-o", "save", "team", "solution", "phone", "filter", "exception", "export", "customer-service", "qrcode", "scan", "like", "like-o", "dislike", "dislike-o", "message", "pay-circle", "pay-circle-o", "calculator", "pushpin", "pushpin-o", "bulb", "select", "switcher", "rocket", "bell", "disconnect", "database", "compass", "barcode", "hourglass", "key", "flag", "layout", "printer", "sound", "usb", "skin", "tool", "sync", "wifi", "car", "schedule", "user-add", "user-delete", "usergroup-add", "usergroup-delete", "man", "woman", "shop", "gift", "idcard", "medicine-box", "red-envelope", "coffee", "copyright", "trademark", "safety", "wallet", "bank", "trophy", "contacts", "global", "shake", "api"]
21 |   },
22 |   {
23 |     title: '品牌和标识',
24 |     anchor: 'other',
25 |     list: ["android", "android-o", "apple", "apple-o", "windows", "windows-o", "ie", "chrome", "github", "aliwangwang", "aliwangwang-o", "dingding", "dingding-o"],
26 |   }
27 | ];
28 | 
29 | class IconDemo extends React.Component {
30 |   render() {
31 |     const cardContent = '使用Icon标签声明组件，指定图标对应的 type 属性。'
32 |     const cardContent2 = `我们为每个图标赋予了语义化的命名，命名规则如下:
33 |           <ul class="card-ul">
34 |             <li>实心和描线图标保持同名，用 -o 来区分，比如 question-circle（实心） 和 question-circle-o（描线）；</li>
35 |             <li>命名顺序：[图标名]-[形状?]-[描线?]-[方向?]。</li>
36 |           </ul>`
37 |     return (
38 |       <div>
39 |         <CustomBreadcrumb arr={['基本','图标']}/>
40 |         <TypingCard title='如何使用' source={cardContent} id='howUse'/>
41 |         <TypingCard title='图标的命名规范' id='standard' source={cardContent2} height={206}/>
42 |         {
43 |           icons.map(item => {
44 |             return (
45 |               <Card title={item.title} bordered={false} className='card-item' key={item.title} id={item.anchor}>
46 |                 {
47 |                   item.list.map(icon => {
48 |                     return (
49 |                       <Card.Grid style={styles.gridItem} key={icon}>
50 |                         <Icon type={icon} style={styles.icon}/><span>{icon}</span>
51 |                       </Card.Grid>
52 |                     )
53 |                   })
54 |                 }
55 |               </Card>
56 |             )
57 |           })
58 |         }
59 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
60 |         <Affix style={styles.affixBox}>
61 |           <Anchor offsetTop={50} affix={false}>
62 |             <Anchor.Link href='#howUse' title='如何使用'/>
63 |             <Anchor.Link href='#standard' title='图标的命名规范'/>
64 |             <Anchor.Link href='#direction' title='方向性图标'/>
65 |             <Anchor.Link href='#suggestion' title='提示建议性图标'/>
66 |             <Anchor.Link href='#logo' title='网站通用图标'/>
67 |             <Anchor.Link href='#other' title='品牌和标识'/>
68 |           </Anchor>
69 |         </Affix>
70 |       </div>
71 |     )
72 |   }
73 | }
74 | 
75 | const styles = {
76 |   gridItem: {
77 |     display: 'flex',
78 |     flexDirection: 'column',
79 |     justifyContent: 'center',
80 |     textAlign: 'center',
81 |     width: '17%'
82 |   },
83 |   icon: {
84 |     fontSize: 18,
85 |     marginBottom: 10
86 |   },
87 |   affixBox: {
88 |     position: 'absolute',
89 |     top: 100,
90 |     right: 50,
91 |     with: 170
92 |   }
93 | }
94 | 
95 | export default IconDemo


--------------------------------------------------------------------------------
/src/routes/Home/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Carousel} from 'antd'
 3 | import './style.css'
 4 | 
 5 | const imgs = [
 6 |   'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
 7 |   'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
 8 |   'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
 9 |   'http://47.99.130.140/imgs/photo.jpg',
10 | ]
11 | 
12 | 
13 | class Home extends React.Component {
14 |   render() {
15 |     return (
16 |       <div style={styles.bg} className='home'>
17 |         <Carousel arrows effect='fade' className='size'>
18 |           {imgs.map(item=><div key={item}><div className='size' style={{backgroundImage:`url(${item})`}}/></div>)}
19 |           {/*不用img标签是因为图片大小会出现问题*/}
20 |         </Carousel>
21 |       </div>
22 |     )
23 |   }
24 | }
25 | 
26 | const styles = {
27 |   bg:{
28 |     position:'absolute',
29 |     top:0,
30 |     left:0,
31 |     width:'100%',
32 |     height:'calc(100vh - 64px)'
33 |   }
34 | }
35 | 
36 | export default Home


--------------------------------------------------------------------------------
/src/routes/Home/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .home .ant-carousel .slick-slide {
 3 |     height: calc(100vh - 64px);
 4 |     /*background: #364d79;*/
 5 |     overflow: hidden;
 6 | }
 7 | .home .size{
 8 |     height: calc(100vh - 64px);
 9 |     width: 100%;
10 |     background-size: cover;
11 | }
12 | .home .ant-carousel .slick-slider .slick-arrow{
13 |     width: 20px;
14 |     height: 60px;
15 |     margin-top: -30px;
16 |     opacity: 0.7;
17 |     /*background: rgba(0, 0, 0, 0.3);*/
18 | }
19 | .ant-carousel .slick-slider .slick-prev{
20 |     z-index:99;
21 |    left:0;
22 | }
23 | .ant-carousel .slick-slider .slick-next{
24 |     z-index:99;
25 |     right:0;
26 | }
27 | .ant-carousel .slick-slider .slick-prev::before{
28 |     content: ' ';
29 |     position: absolute;
30 |     width: 2px;
31 |     height: 15px;
32 |     background: #fff;
33 |     display: block;
34 |     transform: rotate(40deg);
35 |     top: 18px;
36 |     left: 10px;
37 | }
38 | .ant-carousel .slick-slider .slick-prev::after{
39 |     content: ' ';
40 |     position: absolute;
41 |     width: 2px;
42 |     height: 15px;
43 |     background: #fff;
44 |     display: block;
45 |     transform: rotate(-40deg);
46 |     bottom: 17px;
47 |     left: 10px;
48 | }
49 | .ant-carousel .slick-slider .slick-next::before{
50 |     content: ' ';
51 |     position: absolute;
52 |     width: 2px;
53 |     height: 15px;
54 |     background: #fff;
55 |     display: block;
56 |     transform: rotate(-40deg);
57 |     top: 18px;
58 |     left: 10px;
59 | }
60 | .ant-carousel .slick-slider .slick-next::after{
61 |     content: ' ';
62 |     position: absolute;
63 |     width: 2px;
64 |     height: 15px;
65 |     background: #fff;
66 |     display: block;
67 |     transform: rotate(40deg);
68 |     bottom: 17px;
69 |     left: 10px;
70 | }
71 | .ant-carousel .slider-item{
72 |     display: flex;
73 |     flex-direction: column;
74 |     justify-content: center;
75 |     height: 200px;
76 |     overflow: hidden;
77 |     color: #fff;
78 |     font-size: 12px;
79 |     text-align: center;
80 | }
81 | .ant-carousel .slider-item h3{
82 |     display: none;
83 | }
84 | .ant-carousel .slider-item p{
85 |     display: none;
86 | }
87 | .ant-carousel .slick-slide h3 {
88 |     font-size: 32px;
89 |     color: #fff;
90 |     margin-bottom: 0;
91 | }
92 | .ant-carousel .slider-item .slider-active{
93 |     display: block;
94 | }


--------------------------------------------------------------------------------
/src/routes/Index/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Layout} from 'antd'
 3 | import SiderNav from '../../components/SiderNav'
 4 | import ContentMain from '../../components/ContentMain'
 5 | import HeaderBar from '../../components/HeaderBar'
 6 | 
 7 | const {Sider, Header, Content, Footer} = Layout
 8 | 
 9 | 
10 | class Index extends React.Component{
11 |   state = {
12 |     collapsed: false
13 |   }
14 | 
15 |   toggle = () => {
16 |     // console.log(this)  状态提升后，到底是谁调用的它
17 |     this.setState({
18 |       collapsed: !this.state.collapsed
19 |     })
20 |   }
21 |   render() {
22 |     // 设置Sider的minHeight可以使左右自适应对齐
23 |     return (
24 |       <div id='page'>
25 |         <Layout>
26 |           <Sider collapsible
27 |                  trigger={null}
28 |                  collapsed={this.state.collapsed}
29 |                  >
30 |             <SiderNav/>
31 |           </Sider>
32 |           <Layout>
33 |             <Header style={{background: '#fff', padding: '0 16px'}}>
34 |               <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
35 |             </Header>
36 |             <Content>
37 |               <ContentMain/>
38 |             </Content>
39 |             <Footer style={{textAlign: 'center'}}>React-Admin ©2018 Created by 137596665@qq.com <a target='_blank' href='https://github.com/zhangZhiHao1996/react-admin-master'>github地址</a></Footer>
40 |           </Layout>
41 |         </Layout>
42 |       </div>
43 |     );
44 |   }
45 | }
46 | export default Index


--------------------------------------------------------------------------------
/src/routes/Login/RegisterForm.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Form, Input, message } from 'antd'
  3 | import { inject, observer } from 'mobx-react/index'
  4 | import { calculateWidth } from '../../utils/utils'
  5 | import PromptBox from '../../components/PromptBox'
  6 | 
  7 | 
  8 | @inject('appStore') @observer @Form.create()
  9 | class RegisterForm extends React.Component {
 10 |   state = {
 11 |     focusItem: -1
 12 |   }
 13 |   registerSubmit = (e) => {
 14 |     e.preventDefault()
 15 |     this.setState({
 16 |       focusItem: -1
 17 |     })
 18 |     this.props.form.validateFields((err, values) => {
 19 |       if (!err) {
 20 |         const users = this.props.appStore.users
 21 |         // 检测用户名是否存在
 22 |         const result = users.find(item => item.username === values.registerUsername)
 23 |         if (result) {
 24 |           this.props.form.setFields({
 25 |             registerUsername: {
 26 |               value: values.registerUsername,
 27 |               errors: [new Error('用户名已存在')]
 28 |             }
 29 |           })
 30 |           return
 31 |         }
 32 | 
 33 |         const obj = [...this.props.appStore.users, {
 34 |           username: values.registerUsername,
 35 |           password: values.registerPassword
 36 |         }]
 37 |         localStorage.setItem('users', JSON.stringify(obj))
 38 |         this.props.appStore.initUsers()
 39 |         message.success('注册成功')
 40 |       }
 41 |     })
 42 |   }
 43 |   gobackLogin = () => {
 44 |     this.props.switchShowBox('login')
 45 |     setTimeout(() => this.props.form.resetFields(), 500)
 46 |   }
 47 | 
 48 |   render () {
 49 |     const {getFieldDecorator, getFieldError, getFieldValue} = this.props.form
 50 |     const {focusItem} = this.state
 51 |     return (
 52 |       <div className={this.props.className}>
 53 |         <h3 className='title'>管理员注册</h3>
 54 |         <Form onSubmit={this.registerSubmit}>
 55 |           <Form.Item help={getFieldError('registerUsername') && <PromptBox info={getFieldError('registerUsername')}
 56 |                                                                            width={calculateWidth(getFieldError('registerUsername'))}/>}>
 57 |             {getFieldDecorator('registerUsername', {
 58 |               validateFirst: true,
 59 |               rules: [
 60 |                 {required: true, message: '用户名不能为空'},
 61 |                 {pattern: '^[^ ]+$', message: '不能输入空格'},
 62 |               ]
 63 |             })(
 64 |               <Input
 65 |                 onFocus={() => this.setState({focusItem: 0})}
 66 |                 onBlur={() => this.setState({focusItem: -1})}
 67 |                 maxLength={16}
 68 |                 placeholder='用户名'
 69 |                 addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}}/>}/>
 70 |             )}
 71 |           </Form.Item>
 72 |           <Form.Item help={getFieldError('registerPassword') && <PromptBox info={getFieldError('registerPassword')}
 73 |                                                                            width={calculateWidth(getFieldError('registerPassword'))}/>}>
 74 |             {getFieldDecorator('registerPassword', {
 75 |               validateFirst: true,
 76 |               rules: [
 77 |                 {required: true, message: '密码不能为空'},
 78 |                 {pattern: '^[^ ]+$', message: '密码不能有空格'}
 79 |               ]
 80 |             })(
 81 |               <Input
 82 |                 onFocus={() => this.setState({focusItem: 1})}
 83 |                 onBlur={() => this.setState({focusItem: -1})}
 84 |                 type='password'
 85 |                 maxLength={16}
 86 |                 placeholder='密码'
 87 |                 addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}}/>}/>
 88 |             )}
 89 |           </Form.Item>
 90 |           <Form.Item help={getFieldError('confirmPassword') && <PromptBox info={getFieldError('confirmPassword')}
 91 |                                                                           width={calculateWidth(getFieldError('confirmPassword'))}/>}>
 92 |             {getFieldDecorator('confirmPassword', {
 93 |               validateFirst: true,
 94 |               rules: [
 95 |                 {required: true, message: '请确认密码'},
 96 |                 {
 97 |                   validator: (rule, value, callback) => {
 98 |                     if (value && value !== getFieldValue('registerPassword')) {
 99 |                       callback('两次输入不一致！')
100 |                     }
101 |                     callback()
102 |                   }
103 |                 },
104 |               ]
105 |             })(
106 |               <Input
107 |                 onFocus={() => this.setState({focusItem: 2})}
108 |                 onBlur={() => this.setState({focusItem: -1})}
109 |                 type='password'
110 |                 maxLength={16}
111 |                 placeholder='确认密码'
112 |                 addonBefore={<span className='iconfont icon-suo1' style={focusItem === 2 ? styles.focus : {}}/>}/>
113 |             )}
114 |           </Form.Item>
115 |           <div className='bottom'>
116 |             <input className='loginBtn' type="submit" value='注册'/>
117 |             <span className='registerBtn' onClick={this.gobackLogin}>返回登录</span>
118 |           </div>
119 |         </Form>
120 |         <div className='footer'>
121 |           <div>欢迎登陆后台管理系统</div>
122 |         </div>
123 |       </div>
124 |     )
125 |   }
126 | }
127 | 
128 | const styles = {
129 |   focus: {
130 |     width: '20px',
131 |     opacity: 1
132 |   },
133 | }
134 | 
135 | export default RegisterForm


--------------------------------------------------------------------------------
/src/routes/Login/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import BGParticle from '../../utils/BGParticle'
  3 | import { notification } from 'antd'
  4 | import './style.css'
  5 | import { withRouter } from 'react-router-dom'
  6 | import { inject, observer } from 'mobx-react/index'
  7 | import Loading2 from '../../components/Loading2'
  8 | import {preloadingImages} from '../../utils/utils'
  9 | import 'animate.css'
 10 | import LoginForm from './LoginForm'
 11 | import RegisterForm from './RegisterForm'
 12 | 
 13 | const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg'
 14 | const imgs = [
 15 |   'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
 16 |   'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
 17 |   'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
 18 |   'http://47.99.130.140/imgs/photo.jpg',
 19 | ]
 20 | 
 21 | 
 22 | 
 23 | 
 24 | @withRouter @inject('appStore') @observer
 25 | class Login extends React.Component {
 26 |   state = {
 27 |     showBox: 'login',   //展示当前表单
 28 |     url: '',  //背景图片
 29 |     loading:false,
 30 |     loading2:false,
 31 |   }
 32 | 
 33 |   componentDidMount () {
 34 |     const isLogin = this.props.appStore
 35 |     if(isLogin){
 36 |       this.props.history.go(1)     //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
 37 |       // this.props.appStore.toggleLogin(false) //也可以设置退出登录
 38 |     }
 39 |     this.initPage()
 40 |     preloadingImages(imgs)  //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
 41 |   }
 42 | 
 43 |   componentWillUnmount () {
 44 |     this.particle && this.particle.destory()
 45 |     notification.destroy()
 46 |   }
 47 |   //载入页面时的一些处理
 48 |   initPage = () => {
 49 |     this.setState({
 50 |       loading:true
 51 |     })
 52 |     this.props.appStore.initUsers()
 53 |     this.loadImageAsync(url).then(url=>{
 54 |       this.setState({
 55 |         loading:false,
 56 |         url
 57 |       })
 58 |     }).then(()=>{
 59 |       //为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
 60 |       this.particle = new BGParticle('backgroundBox')
 61 |       this.particle.init()
 62 |       notification.open({
 63 |         message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
 64 |         duration:0,
 65 |         className:'login-notification'
 66 |       })
 67 |     })
 68 |   }
 69 |   //切换showbox
 70 |   switchShowBox = (box) => {
 71 |     this.setState({
 72 |       showBox: box
 73 |     })
 74 |   }
 75 | 
 76 |   //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
 77 |   loadImageAsync (url) {
 78 |     return new Promise(function(resolve, reject) {
 79 |       const image = new Image();
 80 |       image.onload = function() {
 81 |         resolve(url);
 82 |       };
 83 |       image.onerror = function() {
 84 |         console.log('图片载入错误')
 85 |       };
 86 |       image.src = url;
 87 |     });
 88 |   }
 89 | 
 90 |   render () {
 91 |     const {showBox,loading} = this.state
 92 |     return (
 93 |       <div id='login-page'>
 94 |         {
 95 |           loading ?
 96 |             <div>
 97 |               <h3 style={styles.loadingTitle} className='animated bounceInLeft'>载入中...</h3>
 98 |               <Loading2/>
 99 |             </div>:
100 |             <div>
101 |               <div id='backgroundBox' style={styles.backgroundBox}/>
102 |               <div className='container'>
103 |                 <LoginForm
104 |                   className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
105 |                   switchShowBox={this.switchShowBox}/>
106 |                 <RegisterForm
107 |                   className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
108 |                   switchShowBox={this.switchShowBox}/>
109 |               </div>
110 |             </div>
111 |         }
112 |       </div>
113 |     )
114 |   }
115 | }
116 | 
117 | const styles = {
118 |   backgroundBox: {
119 |     position: 'fixed',
120 |     top: '0',
121 |     left: '0',
122 |     width: '100vw',
123 |     height: '100vh',
124 |     backgroundImage: `url(${url})`,
125 |     backgroundSize: 'cover',
126 |     transition:'all .5s'
127 |   },
128 |   focus: {
129 |     // transform: 'scale(0.7)',
130 |     width: '20px',
131 |     opacity: 1
132 |   },
133 |   loadingBox:{
134 |     position:'fixed',
135 |     top:'50%',
136 |     left:'50%',
137 |     transform:'translate(-50%,-50%)'
138 |   },
139 |   loadingTitle:{
140 |     position:'fixed',
141 |     top:'50%',
142 |     left:'50%',
143 |     marginLeft: -45,
144 |     marginTop: -18,
145 |     color:'#000',
146 |     fontWeight:500,
147 |     fontSize:24
148 |   },
149 | }
150 | 
151 | export default Login
152 | 


--------------------------------------------------------------------------------
/src/routes/Login/style.css:
--------------------------------------------------------------------------------
  1 | #login-page{
  2 |     position: fixed;
  3 |     display: flex;
  4 |     justify-content: center;
  5 |     align-items: center;
  6 |     top: 0;
  7 |     left: 0;
  8 |     width: 100%;
  9 |     height: 100%;
 10 |     background:#DEF3F4;
 11 |     z-index: 99;
 12 | }
 13 | 
 14 | #login-page .container{
 15 |     position: relative;
 16 |     width: 240px;
 17 |     height: 300px;
 18 |     padding: 100px 40px 40px 40px;
 19 |     box-sizing: content-box;
 20 | }
 21 | 
 22 | #login-page .box{
 23 |     position: absolute;
 24 |     top: 0;
 25 |     left: 0;
 26 |     width: 100%;
 27 |     height: 100%;
 28 |     padding: 90px 40px 40px 40px;
 29 |     backface-visibility: hidden;
 30 |     background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
 31 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
 32 |     box-shadow: -15px 15px 15px rgba(0,0,0,.4);
 33 |     transition: all 1s;
 34 | }
 35 | #login-page .showBox{
 36 |     transform:rotateY(0deg);
 37 | }
 38 | #login-page .hiddenBox{
 39 |     transform:rotateY(180deg);
 40 | }
 41 | #login-page .loginBtn{
 42 |     padding: 10px 50px;
 43 |     border: 2px solid #4FA1D9;
 44 |     border-radius: 50px;
 45 |     background: transparent;
 46 |     font-size: 11px;
 47 |     color: #4FA1D9;
 48 |     transition: all .2s;
 49 | }
 50 | #login-page .bottom{
 51 |     display: flex;
 52 |     height: 42px;
 53 |     justify-content: space-between;
 54 |     align-items: center;
 55 | }
 56 | #login-page .registerBtn{
 57 |     color: #D3D7F7;
 58 | }
 59 | #login-page .registerBtn:hover{
 60 |     color: #4FA1D9;
 61 |     cursor: pointer;
 62 | }
 63 | #login-page .loginBtn:hover{
 64 |     color: white;
 65 |     background: #4FA1D9;
 66 |     cursor: pointer;
 67 | }
 68 | #login-page .title{
 69 |     height: 60px;
 70 |     color:#D3D7F7;
 71 |     font-size: 16px;
 72 |     margin-bottom: 0;
 73 | }
 74 | #login-page .footer{
 75 |     position: absolute;
 76 |     bottom: 20px;
 77 |     left: 35px;
 78 |     width: 250px;
 79 |     color: #D3D7F7;
 80 |     font-size: 10px;
 81 | }
 82 | 
 83 | 
 84 | /*覆盖antd的默认样式*/
 85 | #login-page input{
 86 |     color:#61BFFF;
 87 |     border:none;
 88 |     outline: none;
 89 |     box-shadow: none;
 90 |     background: transparent;
 91 | }
 92 | #login-page .ant-input-group-addon{
 93 |     background: transparent;
 94 |     padding:0;
 95 |     border: none;
 96 |     color: #fff;
 97 |     opacity: 0.8;
 98 | }
 99 | #login-page .ant-input-group-addon .iconfont{
100 |     display: inline-block;
101 |     width: 30px;
102 |     transition: all .3s;
103 |     opacity: 0.6;
104 | }
105 | #login-page .ant-form-item{
106 |     margin-bottom: 10px;
107 | }
108 | #login-page .ant-form-explain{
109 |     position: absolute;
110 |     z-index: 99;
111 |     left:110%;
112 |     top:0;
113 |     height: 41px;
114 |     /*box-shadow: -2px 2px 2px rgba(0,0,0,.3);*/
115 | }
116 | .login-notification{
117 |     background: transparent;
118 |     border:1px solid #D3D7F7;
119 |     color:#D3D7F7;
120 |     width: 250px;
121 |     height: 80px;
122 |     float: right;
123 |     margin-right: 20px;
124 | }
125 | .login-notification .ant-notification-notice-message{
126 |     color:#D3D7F7;
127 | }
128 | .login-notification .ant-notification-notice-close{
129 |     color:#D3D7F7;
130 | }
131 | /*更改谷歌浏览器input背景*/
132 | input:-webkit-autofill,
133 | input:-webkit-autofill:hover,
134 | input:-webkit-autofill:focus,
135 | input:-webkit-autofill:active {
136 |     /*延迟背景颜色载入*/
137 |     -webkit-transition-delay: 99999s;
138 |     -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
139 | }


--------------------------------------------------------------------------------
/src/routes/Login2/img/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/bg2.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/img/bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/bg3.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/img/bg3a.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/bg3a.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/img/bg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/bg4.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/img/bg5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/bg5.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/img/owl-login-arm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/owl-login-arm.png


--------------------------------------------------------------------------------
/src/routes/Login2/img/owl-login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/owl-login.png


--------------------------------------------------------------------------------
/src/routes/Login2/img/snow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Login2/img/snow.jpg


--------------------------------------------------------------------------------
/src/routes/Login2/style.css:
--------------------------------------------------------------------------------
  1 | .login-page{
  2 |     position: fixed;
  3 |     display: flex;
  4 |     justify-content: center;
  5 |     align-items: center;
  6 |     top: 0;
  7 |     left: 0;
  8 |     width: 100%;
  9 |     height: 100%;
 10 |     background:#666;
 11 |     z-index: 99;
 12 |     /*background-color: #f3f3f3;*/
 13 | }
 14 | .login-page .container{
 15 |     position: relative;
 16 |     width:400px;
 17 |     height: 330px;
 18 | }
 19 | #login-page .container .login-box{
 20 |     position: absolute;
 21 |     top: 0;
 22 |     left: 0;
 23 |     width: 100%;
 24 |     height: 100%;
 25 |     padding: 40px 40px 15px 40px;
 26 |     background-color: #f0f8ff;
 27 |     transition: all 1s;
 28 |     backface-visibility: hidden;
 29 | }
 30 | #login-page .container .login-box-leave{
 31 |     transform:rotateY(180deg);
 32 | }
 33 | #login-page .container .login-box-active{
 34 |     transform:rotateY(0deg);
 35 | }
 36 | #login-page .container .login-box .owl{
 37 |     position: absolute;
 38 |     top: -100px;
 39 |     left: 50%;
 40 |     margin-left: -111px;
 41 |     width: 211px;
 42 |     height: 108px;
 43 |     background-image: url("./img/owl-login.png");
 44 | }
 45 | #login-page .owl .hand{
 46 |     position: absolute;
 47 |     left: 14px;
 48 |     bottom: -8px;
 49 |     width: 34px;
 50 |     height: 34px;
 51 |     border-radius: 40px;
 52 |     background-color: #472d20;
 53 |     transition: .3s ease-out;
 54 |     transform: scaleY(0.6);
 55 | }
 56 | #login-page .owl .hand.hand-left{
 57 |     left: 170px;
 58 | }
 59 | #login-page .owl .arms-box{
 60 |     position: absolute;
 61 |     top: 58px;
 62 |     height: 41px;
 63 |     width: 100%;
 64 |     overflow: hidden;
 65 | }
 66 | #login-page .owl .arms{
 67 |     position: absolute;
 68 |     top: 40px;
 69 |     width: 40px;
 70 |     height: 65px;
 71 |     transition: 0.3s ease-out;
 72 |     background-image: url("./img/owl-login-arm.png");
 73 | }
 74 | #login-page .owl .arms-left{
 75 |     left: 158px;
 76 |     transform: rotate(20deg) scaleX(-1);
 77 | }
 78 | #login-page .owl .arms-right{
 79 |     left: 20px;
 80 |     transform: rotate(-20deg);
 81 | }
 82 | 
 83 | #login-page .ant-input{
 84 |     outline: none;
 85 |     border:none;
 86 |     box-shadow: none;
 87 | }
 88 | #login-page .ant-input-group-addon{
 89 |     background-color: #6a7989;
 90 |     padding:0;
 91 |     border: none;
 92 | }
 93 | #login-page .iconfont{
 94 |     display: inline-block;
 95 |     color: #fff;
 96 |     width: 50px;
 97 |     transition: all .3s;
 98 | }
 99 | #login-page .ant-form-item-with-help{
100 |     margin-bottom: 24px;
101 | }
102 | #login-page .ant-form-explain{
103 |     position: absolute;
104 |     z-index: 99;
105 |     left:110%;
106 |     top:0;
107 |     height: 40px;
108 |     width: 120px;
109 |     background-color: #fff;
110 |     border: 1px solid #CFCFCF;
111 |     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
112 |     line-height: 40px;
113 |     padding:0 15px;
114 |     color:rgba(0, 0, 0, 0.65);
115 | }
116 | #login-page .registerSubmit .ant-form-explain{
117 |     width: 160px;
118 | }
119 | 
120 | #login-page .ant-form-explain:before{
121 |     content:'';
122 |     position: absolute;
123 |     left: -14px;
124 |     top:12px;
125 |     width: 0;
126 |     height: 0;
127 |     border-right: 14px solid #CFCFCF;
128 |     border-top: 8px solid transparent;
129 |     border-bottom: 8px solid transparent;
130 | }
131 | #login-page .ant-form-explain:after{
132 |     content:'';
133 |     position: absolute;
134 |     left: -13px;
135 |     top:12px;
136 |     width: 0;
137 |     height: 0;
138 |     border-right: 14px solid #fff;
139 |     border-top: 8px solid transparent;
140 |     border-bottom: 8px solid transparent;
141 | }
142 | #login-page .container .login-box .bottom{
143 |     padding: 15px 0;
144 |     text-align: right;
145 | }
146 | #login-page .login-box .bottom .registerBtn{
147 |      color: #999;
148 |  }
149 | #login-page .login-box .bottom .register:hover{
150 |     cursor: pointer;
151 | }
152 | #login-page .login-box .bottom .gobackBtn{
153 |     float: left;
154 |     color: #999;
155 |     margin-top: 5px;
156 | }
157 | 
158 | 


--------------------------------------------------------------------------------
/src/routes/Navigation/DropdownDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Card, Menu, Row, Col, Dropdown, Icon, message, Button} from 'antd'
 3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 4 | import TypingCard from '../../../components/TypingCard'
 5 | 
 6 | 
 7 | class DropdownDemo extends React.Component {
 8 |   handleMenuClick(e) {
 9 |     message.info(`Click on menu ${e.key} item.`)
10 |   }
11 | 
12 |   render() {
13 |     const menu = (
14 |       <Menu onClick={this.handleMenuClick}>
15 |         <Menu.Item key="1">1st item</Menu.Item>
16 |         <Menu.Item key="2">2nd item</Menu.Item>
17 |         <Menu.Item key="3">3rd item</Menu.Item>
18 |       </Menu>
19 |     )
20 |     const menu2 = (
21 |       <Menu>
22 |         <Menu.Item>1st menu item</Menu.Item>
23 |         <Menu.Item>2nd menu item</Menu.Item>
24 |         <Menu.SubMenu title="sub menu">
25 |           <Menu.Item>3rd menu item</Menu.Item>
26 |           <Menu.Item>4th menu item</Menu.Item>
27 |         </Menu.SubMenu>
28 |         <Menu.SubMenu title="disabled sub menu" disabled>
29 |           <Menu.Item>5d menu item</Menu.Item>
30 |           <Menu.Item>6th menu item</Menu.Item>
31 |         </Menu.SubMenu>
32 |       </Menu>
33 |     )
34 |     const cardContent = '当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。'
35 |     return (
36 |       <div>
37 |         <CustomBreadcrumb arr={['导航','下拉菜单']}/>
38 |         <TypingCard source={cardContent}/>
39 |         <Row gutter={16}>
40 |           <Col span={12}>
41 |             <Card bordered={false} className='card-item'>
42 |               <Dropdown overlay={menu}><a>hover me <Icon type='down'/></a></Dropdown>&emsp;
43 |               <Dropdown overlay={menu}><Button>Button<Icon type='down'/></Button></Dropdown>&emsp;
44 |               <Dropdown overlay={menu} trigger={['click']}><a>click me <Icon type='down'/></a></Dropdown>&emsp;
45 |             </Card>
46 |             <Card bordered={false} className='card-item'>
47 |               <Dropdown overlay={menu2} trigger={['click']}>
48 |                 <a href="">click menu <Icon type="down"/></a>
49 |               </Dropdown>&emsp;&emsp;
50 |               <Dropdown overlay={menu2} trigger={['click']}>
51 |                 <Button>click menu <Icon type="down"/></Button>
52 |               </Dropdown>
53 |             </Card>
54 |           </Col>
55 |           <Col span={12}>
56 |             <Card bordered={false} className='card-item'>
57 |               <Dropdown overlay={menu2}><a href="">Cascading menu <Icon type="down"/></a></Dropdown>&emsp;&emsp;
58 |               <Dropdown overlay={menu2}><Button>Cascading menu <Icon type="down"/></Button></Dropdown>
59 |             </Card>
60 |             <Card bordered={false} className='card-item'>
61 |               <p>
62 |                 <Dropdown overlay={menu} placement="bottomLeft"><Button>bottomLeft</Button></Dropdown>&emsp;
63 |                 <Dropdown overlay={menu} placement="bottomCenter"><Button>bottomCenter</Button></Dropdown>&emsp;
64 |                 <Dropdown overlay={menu} placement="bottomRight"><Button>bottomRight</Button></Dropdown>
65 |               </p>
66 |               <div>
67 |                 <Dropdown overlay={menu} placement="topLeft"><Button>topLeft</Button></Dropdown>&emsp;
68 |                 <Dropdown overlay={menu} placement="topCenter"><Button>topCenter</Button></Dropdown>&emsp;
69 |                 <Dropdown overlay={menu} placement="topRight"><Button>topRight</Button></Dropdown>
70 |               </div>
71 |             </Card>
72 |           </Col>
73 |         </Row>
74 |       </div>
75 |     )
76 |   }
77 | }
78 | 
79 | export default DropdownDemo


--------------------------------------------------------------------------------
/src/routes/Navigation/MenuDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Col, Row, Menu, Icon, Switch} from 'antd'
  3 | import CustomBreadcrumb from "../../../components/CustomBreadcrumb/index";
  4 | import TypingCard from '../../../components/TypingCard'
  5 | 
  6 | class MenuDemo extends React.Component {
  7 |   state = {
  8 |     openKey: '',
  9 |     theme: 'light',
 10 |     mode: 'horizontal'
 11 |   }
 12 | 
 13 |   changeTheme = (checked) => {
 14 |     this.setState({
 15 |       theme: checked ? 'dark' : 'light'
 16 |     })
 17 |   }
 18 |   changeMode = (checked) => {
 19 |     this.setState({
 20 |       mode: checked ? 'inline' : 'horizontal'
 21 |     })
 22 |   }
 23 | 
 24 |   render() {
 25 |     const cardContent = ' 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。'
 26 |     return (
 27 |       <div>
 28 |         <CustomBreadcrumb arr={['导航','导航菜单']}/>
 29 |         <TypingCard source={cardContent} height={164}/>
 30 |         <Row gutter={16}>
 31 |           <Col span={12}>
 32 |             <Card bordered={false} className='card-item'>
 33 |               <Row type='flex' align='middle'>
 34 |                 <Col span={12}>
 35 |                   <Menu mode="inline" style={{width: 200}}>
 36 |                     <Menu.SubMenu key='mail' title={<span><Icon type='mail'/><span>Navigation One</span></span>}>
 37 |                       <Menu.Item>subItem1</Menu.Item>
 38 |                       <Menu.Item>subItem2</Menu.Item>
 39 |                       <Menu.Item>subItem3</Menu.Item>
 40 |                       <Menu.Item>subItem4</Menu.Item>
 41 |                     </Menu.SubMenu>
 42 |                     <Menu.Item key="app" disabled><Icon type="appstore"/>Navigation Two</Menu.Item>
 43 |                     <Menu.SubMenu key='set' title={<span><Icon type='setting'/><span>Navigation Three</span></span>}>
 44 |                       <Menu.Item>subItem1</Menu.Item>
 45 |                       <Menu.Item>subItem2</Menu.Item>
 46 |                       <Menu.Item>subItem3</Menu.Item>
 47 |                       <Menu.Item>subItem4</Menu.Item>
 48 |                     </Menu.SubMenu>
 49 |                   </Menu>
 50 |                 </Col>
 51 |                 <Col span={12}>
 52 |                   内嵌菜单<br/>
 53 |                   垂直菜单，子菜单内嵌在菜单区域。
 54 |                 </Col>
 55 |               </Row>
 56 |             </Card>
 57 |             <Card bordered={false} className='card-item'>
 58 |               <Row type='flex' align='middle'>
 59 |                 <Col span={12} className='card-item'>
 60 |                   <Menu
 61 |                     mode="inline"
 62 |                     style={{width: 200}}
 63 |                     openKeys={[this.state.openKey]}
 64 |                     onOpenChange={(keys) => this.setState({openKey: keys[keys.length - 1]})}>
 65 |                     <Menu.SubMenu key='sub1' title={<span><Icon type='mail'/><span>Navigation One</span></span>}>
 66 |                       <Menu.Item>subItem1</Menu.Item>
 67 |                       <Menu.Item>subItem2</Menu.Item>
 68 |                       <Menu.Item>subItem3</Menu.Item>
 69 |                       <Menu.Item>subItem4</Menu.Item>
 70 |                     </Menu.SubMenu>
 71 |                     <Menu.Item key="app" disabled><Icon type="appstore"/>Navigation Two</Menu.Item>
 72 |                     <Menu.SubMenu key='sub2' title={<span><Icon type='setting'/><span>Navigation Three</span></span>}>
 73 |                       <Menu.Item>subItem1</Menu.Item>
 74 |                       <Menu.Item>subItem2</Menu.Item>
 75 |                       <Menu.Item>subItem3</Menu.Item>
 76 |                       <Menu.Item>subItem4</Menu.Item>
 77 |                     </Menu.SubMenu>
 78 |                   </Menu>
 79 |                 </Col>
 80 |                 <Col span={12}>
 81 |                   只展开当前父级菜单<br/>
 82 |                   点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
 83 |                 </Col>
 84 |               </Row>
 85 |             </Card>
 86 |           </Col>
 87 |           <Col span={12}>
 88 |             <Card bordered={false} style={styles.Item}>
 89 |               <Menu mode="horizontal">
 90 |                 <Menu.SubMenu key='mail' title={<span><Icon type='mail'/><span>Navigation One</span></span>}>
 91 |                   <Menu.Item>subItem1</Menu.Item>
 92 |                   <Menu.Item>subItem2</Menu.Item>
 93 |                   <Menu.Item>subItem3</Menu.Item>
 94 |                   <Menu.Item>subItem4</Menu.Item>
 95 |                 </Menu.SubMenu>
 96 |                 <Menu.Item key="app" disabled><Icon type="appstore"/>Navigation Two</Menu.Item>
 97 |                 <Menu.SubMenu key='set' title={<span><Icon type='setting'/><span>Navigation Three</span></span>}>
 98 |                   <Menu.Item>subItem1</Menu.Item>
 99 |                   <Menu.Item>subItem2</Menu.Item>
100 |                   <Menu.Item>subItem3</Menu.Item>
101 |                   <Menu.Item>subItem4</Menu.Item>
102 |                 </Menu.SubMenu>
103 |               </Menu>
104 |             </Card>
105 |             <Card bordered={false} className='card-item'>
106 |               <p style={{paddingLeft: 15}}>
107 |                 <Switch size='small' onChange={this.changeMode}/> Change Mode &emsp;
108 |                 <Switch size='small' onChange={this.changeTheme}/> Change Theme
109 |               </p>
110 |               <Menu mode={this.state.mode} theme={this.state.theme} ref='menu'>
111 |                 <Menu.SubMenu key='sub1' title={<span><Icon type='mail'/><span>Navigation One</span></span>}>
112 |                   <Menu.Item>subItem1</Menu.Item>
113 |                   <Menu.SubMenu title='subItem2'>
114 |                     <Menu.Item>sub-subItem1</Menu.Item>
115 |                     <Menu.Item>sub-subItem2</Menu.Item>
116 |                     <Menu.Item>sub-subItem3</Menu.Item>
117 |                   </Menu.SubMenu>
118 |                   <Menu.Item>subItem3</Menu.Item>
119 |                   <Menu.Item>subItem4</Menu.Item>
120 | 
121 |                 </Menu.SubMenu>
122 |                 <Menu.Item key="app"><Icon type="appstore"/>Navigation Two</Menu.Item>
123 |                 <Menu.SubMenu key='sub2' title={<span><Icon type='setting'/><span>Navigation Three</span></span>}>
124 |                   <Menu.Item>subItem1</Menu.Item>
125 |                   <Menu.Item>subItem2</Menu.Item>
126 |                   <Menu.SubMenu title='subItem3'>
127 |                     <Menu.Item>sub-subitem1</Menu.Item>
128 |                     <Menu.Item>sub-subitem2</Menu.Item>
129 |                   </Menu.SubMenu>
130 |                 </Menu.SubMenu>
131 |               </Menu>
132 |             </Card>
133 |           </Col>
134 |         </Row>
135 |       </div>
136 |     )
137 |   }
138 | }
139 | 
140 | const styles = {
141 |   Item:{
142 |     height:190,
143 |     marginBottom:10,
144 |     borderRadius: 3,
145 |   }
146 | }
147 | 
148 | export default MenuDemo


--------------------------------------------------------------------------------
/src/routes/Navigation/StepsDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Col, Row, Radio, Icon, Button, Steps, message,BackTop} from 'antd'
  3 | import CustomBreadcrumb from "../../../components/CustomBreadcrumb/index";
  4 | import TypingCard from '../../../components/TypingCard'
  5 | 
  6 | const Step = Steps.Step
  7 | 
  8 | const steps = [
  9 |   {
 10 |     title: 'First',
 11 |     content: 'First-content',
 12 |   },
 13 |   {
 14 |     title: 'Second',
 15 |     content: 'Second-content',
 16 |   },
 17 |   {
 18 |     title: 'Last',
 19 |     content: 'Last-content',
 20 |   }];
 21 | 
 22 | class StepsDemo extends React.Component {
 23 |   state = {
 24 |     size: 'default',
 25 |     current: 0
 26 |   }
 27 | 
 28 |   prev() {
 29 |     const current = this.state.current - 1;
 30 |     if (current === -1) {
 31 |       return
 32 |     }
 33 |     this.setState({current});
 34 |   }
 35 | 
 36 |   render() {
 37 |     const {size, current} = this.state
 38 |     const cardContent = '当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，引导用户按照流程完成任务的导航条'
 39 |     return (
 40 |       <div>
 41 |         <CustomBreadcrumb arr={['导航', '步骤条']}/>
 42 |         <TypingCard source={cardContent}/>
 43 |         <Row gutter={16}>
 44 |           <Col span={12}>
 45 |             <Card bordered={false} className='card-item' title='基本使用'>
 46 |               <Steps current={2}>
 47 |                 <Step title="Finished" description="This is a description."/>
 48 |                 <Step title="In Progress" description="This is a description."/>
 49 |                 <Step title="Waiting" description="This is a description."/>
 50 |               </Steps>
 51 |             </Card>
 52 |             <Card bordered={false} className='card-item' title='基本使用'>
 53 |               <Steps current={1}>
 54 |                 <Step title="Finished" description="This is a description."/>
 55 |                 <Step title="In Progress" description="This is a description."/>
 56 |                 <Step title="Waiting" description="This is a description."/>
 57 |               </Steps>
 58 |             </Card>
 59 |             <Card bordered={false} className='card-item' title='步骤运行错误'>
 60 |               <Steps current={1} status="error">
 61 |                 <Step title="Finished" description="This is a description"/>
 62 |                 <Step title="In Process" description="This is a description"/>
 63 |                 <Step title="Waiting" description="This is a description"/>
 64 |               </Steps>
 65 |             </Card>
 66 |             <Card bordered={false} className='card-item' title='步骤切换'>
 67 |               <Steps current={current}>
 68 |                 {steps.map(item => <Step title={item.title}
 69 |                                          key={item.title}
 70 |                                          description={item.content}/>)}
 71 |               </Steps>
 72 |               <div style={styles.stepsContent}>{steps[current].content}</div>
 73 |               <div>
 74 |                 {
 75 |                   current < steps.length - 1 ?
 76 |                     <Button type='primary'
 77 |                             onClick={() => this.setState({current: current + 1})}>下一步</Button> :
 78 |                     <Button
 79 |                       onClick={() => message.success('Processing complete!')}>已完成</Button>
 80 |                 }
 81 |                 <Button
 82 |                   style={current === 0 ? {display: 'none'} : {marginLeft: 15}}
 83 |                   onClick={() => this.prev()}>上一步</Button>
 84 |               </div>
 85 |             </Card>
 86 |           </Col>
 87 |           <Col span={12}>
 88 |             <Card bordered={false} className='card-item' title='大小'>
 89 |               <Radio.Group style={{marginBottom: '1em'}}
 90 |                            onChange={(e) => this.setState({size: e.target.value})}
 91 |                            value={size}>
 92 |                 <Radio.Button value='small'>Small</Radio.Button>
 93 |                 <Radio.Button value='default'>Default</Radio.Button>
 94 |               </Radio.Group>
 95 |               <Steps current={1} size={size}>
 96 |                 <Step title="Finished" description="This is a description."/>
 97 |                 <Step title="In Progress" description="This is a description."/>
 98 |                 <Step title="Waiting" description="This is a description."/>
 99 |               </Steps>
100 |             </Card>
101 |             <Card bordered={false} className='card-item' title='带图标'>
102 |               <Steps>
103 |                 <Step status="finish" title="Login" icon={<Icon type="user"/>}/>
104 |                 <Step status="finish" title="Verification"
105 |                       icon={<Icon type="solution"/>}/>
106 |                 <Step status="process" title="Pay"
107 |                       icon={<Icon type="loading"/>}/>
108 |                 <Step status="wait" title="Done" icon={<Icon type="smile-o"/>}/>
109 |               </Steps>
110 |             </Card>
111 |             <Card bordered={false} className='card-item' title='点状步骤条'>
112 |               <Steps progressDot current={2}>
113 |                 <Step title="Finished" description="This is a description."/>
114 |                 <Step title="In Progress" description="This is a description."/>
115 |                 <Step title="Waiting" description="This is a description."/>
116 |               </Steps>
117 |             </Card>
118 |           </Col>
119 |         </Row>
120 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
121 |       </div>
122 |     )
123 |   }
124 | }
125 | 
126 | const styles = {
127 |   stepsContent: {
128 |     minHeight: '200px',
129 |     margin: '16px 0',
130 |     paddingTop: '80px',
131 |     border: '1px dashed #e9e9e9',
132 |     borderRadius: '6px',
133 |     backgroundColor: '#fafafa',
134 |     textAlign: 'center',
135 |   }
136 | 
137 | }
138 | 
139 | 
140 | export default StepsDemo


--------------------------------------------------------------------------------
/src/routes/Other/AnimationDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {Card, Button,BackTop} from 'antd'
  3 | import Shuffle from 'shufflejs'
  4 | import 'animate.css'
  5 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
  6 | import TypingCard from '../../../components/TypingCard'
  7 | 
  8 | const animations = [
  9 |   {
 10 |     groups:['Attention Seekers'],
 11 |     list:['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','jello']
 12 |   },
 13 |   {
 14 |     groups:['Bouncing Entrances','Entrances'],
 15 |     list:['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp']
 16 |   },
 17 |   {
 18 |     groups:['Bouncing Exits','Exits'],
 19 |     list:['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp']
 20 |   },
 21 |   {
 22 |     groups:['Fading Entrances','Entrances'],
 23 |     list:['fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig']
 24 |   },
 25 |   {
 26 |     groups:['Fading Exits','Exits'],
 27 |     list:['fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig']
 28 |   },
 29 |   {
 30 |     groups:['Flippers'],
 31 |     list:['flip','flipInX','flipInY','flipOutX','flipOutY']
 32 |   },
 33 |   {
 34 |     groups:['Lightspeed'],
 35 |     list:['lightSpeedIn','lightSpeedOut']
 36 |   },
 37 |   {
 38 |     groups:['Rotating Entrances','Entrances'],
 39 |     list:['rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight']
 40 |   },
 41 |   {
 42 |     groups:['Rotating Exits','Exits'],
 43 |     list:['rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight']
 44 |   },
 45 |   {
 46 |     groups:['Sliding Entrances','Entrances'],
 47 |     list:['slideInUp','slideInDown','slideInLeft','slideInRight']
 48 |   },
 49 |   {
 50 |     groups:['Sliding Exits','Exits'],
 51 |     list:['slideOutUp','slideOutDown','slideOutLeft','slideOutRight']
 52 |   },
 53 |   {
 54 |     groups:['Zoom Entrances','Entrances'],
 55 |     list:['zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp']
 56 |   },
 57 |   {
 58 |     groups:['Zoom Exits','Exits'],
 59 |     list:['zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp']
 60 |   },
 61 |   {
 62 |     groups:['Specials'],
 63 |     list:['hinge','rollIn','rollOut','jackInTheBox']
 64 |   }
 65 | 
 66 | ]
 67 | 
 68 | function getGroups(arr){
 69 |   return arr.map(item=>{
 70 |     return item.replace(/\s/g,'')
 71 |   })
 72 | }
 73 | 
 74 | class AnimationDemo extends React.Component{
 75 |   componentDidMount(){
 76 |     this.shuffle = new Shuffle(this.shuffleDemo, {
 77 |       itemSelector: '.shuffle-item',
 78 |       sizer: this.sizer,
 79 |     });
 80 |   }
 81 |   componentDidUpdate() {
 82 |     this.shuffle.resetItems();
 83 |   }
 84 |   componentWillUnmount() {
 85 |     this.shuffle.destroy();
 86 |     this.shuffle = null;
 87 |   }
 88 |   render(){
 89 |     return (
 90 |       <div>
 91 |         <CustomBreadcrumb arr={['其它','动画']}/>
 92 |         <TypingCard source='当需要动态效果，如过渡、鼠标悬浮等。本页面用到了animation.css库和shufflejs库'/>
 93 |         <Card bordered={false}>
 94 |           <p>
 95 |             <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter()}>All</Button>
 96 |             <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter('Entrances')}>Entrances</Button>
 97 |             <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter('Exits')}>Exits</Button><br/>
 98 |             {
 99 |               animations.map(item=>(
100 |                 <Button
101 |                   key={item.groups}
102 |                   onClick={()=>this.shuffle.filter(item.groups[0].replace(/\s/g,''))}
103 |                   style={{margin:'5px 10px'}}>{item.groups}
104 |                 </Button>
105 |                 ))
106 |             }
107 |           </p>
108 |         </Card>
109 |         <div style={styles.box}>
110 |           <div ref={(div)=>this.shuffleDemo=div}>
111 |             {
112 |               //移入移除函数最好绑定在父元素上，因为父元素不会因为动画效果而移动，如果绑定在h3上，鼠标没有移动，但是h3移动了，鼠标就不在h3中，会触发onMouseLeave事件
113 |               animations.map(item=>{
114 |                 return item.list.map(i=>{
115 |                   return <div
116 |                     className='shuffle-item'
117 |                     style={styles.item}
118 |                     onMouseEnter={(e)=>this[i].classList.add(i,'infinite')}
119 |                     onMouseLeave={(e)=>this[i].classList.remove(i,'infinite')}
120 |                     data-groups={JSON.stringify(getGroups(item.groups))}
121 |                     key={i}>
122 |                     <h3 style={styles.title}
123 |                         className='animated'
124 |                         ref={(el)=>this[i]=el}
125 |                     >{i}</h3>
126 |                   </div>
127 |                 })
128 |               })
129 |             }
130 |             {/*下面的div是为了间隔宽度*/}
131 |             <div style={{width:'8.33333%'}}  ref={(div)=>this.sizer = div}/>
132 |           </div>
133 |         </div>
134 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
135 |       </div>
136 |     )
137 |   }
138 | }
139 | 
140 | const styles = {
141 |   item:{
142 |     width:'22%',
143 |     marginTop:16,
144 |     fontWeight:500,
145 |     border:'1px solid #d9d9d9'
146 |   },
147 |   box:{
148 |     minHeight:500,
149 |     padding: '10px 32px',
150 |   },
151 |   title:{
152 |     backgroundColor:'#fff',
153 |     padding:40,
154 |     textAlign:'center',
155 |     fontSize:14,
156 |     margin:0
157 |   }
158 | }
159 | 
160 | export default AnimationDemo


--------------------------------------------------------------------------------
/src/routes/Other/DraftDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
 3 | import TypingCard from '../../../components/TypingCard'
 4 | import {Card,Row,Col,BackTop} from 'antd'
 5 | import { EditorState, convertToRaw, ContentState } from 'draft-js';
 6 | import { Editor } from 'react-draft-wysiwyg';
 7 | import draftToHtml from 'draftjs-to-html';
 8 | import draftToMarkdown from 'draftjs-to-markdown';
 9 | import htmlToDraft from 'html-to-draftjs';
10 | import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
11 | import './style.css'
12 | 
13 | const content = {"entityMap":{},"blocks":[{"key":"637gr","text":"Initialized from content state.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]};
14 | 
15 | class DraftDemo extends React.Component{
16 |   state = {
17 |     editorState: EditorState.createEmpty(),
18 |     contentState:content
19 |   }
20 | 
21 |   onEditorStateChange = (editorState) => {
22 |     this.setState({
23 |       editorState,
24 |     });
25 |   };
26 |   onContentStateChange =  (contentState) => {
27 |     this.setState({
28 |       contentState,
29 |     });
30 |   };
31 | 
32 |   uploadImageCallBack = ()=>{
33 | 
34 |   }
35 |   render(){
36 |     const cardContent = `此页面用到的富文本编辑是<a href="https://github.com/jpuri/react-draft-wysiwyg">react-draft-wysiwyg@^1.12.13</a>`
37 |     const { editorState,contentState } = this.state;
38 |     return (
39 |       <div>
40 |         <CustomBreadcrumb arr={['其它','富文本编辑器']}/>
41 |         <TypingCard title='富文本编辑器' source={cardContent}/>
42 |         <Card bordered={false} className='card-item'>
43 |           <Editor
44 |             editorState={editorState}
45 |             onEditorStateChange={this.onEditorStateChange}
46 |             onContentStateChange={this.onContentStateChange}
47 |             wrapperClassName="wrapper-class"
48 |             editorClassName="editor-class"
49 |             toolbarClassName="toolbar-class"
50 |             localization={{ locale: 'zh'}}
51 |             toolbar={{
52 |               image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true }},
53 |             }}
54 |           />
55 |         </Card>
56 |         <Row gutter={10}>
57 |           <Col span={8}>
58 |             <Card title='同步转换HTML' bordered={false} style={{minHeight:200}}>
59 |               {editorState && draftToHtml(convertToRaw(editorState.getCurrentContent()))}
60 |             </Card>
61 |           </Col>
62 |           <Col span={8}>
63 |             <Card title='同步转换MarkDown' bordered={false} style={{minHeight:200}}>
64 |               {editorState && draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
65 |             </Card>
66 |           </Col>
67 |           <Col span={8}>
68 |             <Card title='同步转换JSON' bordered={false} style={{minHeight:200}}>
69 |               {JSON.stringify(contentState, null, 4)}
70 |             </Card>
71 |           </Col>
72 |         </Row>
73 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
74 |       </div>
75 |     )
76 |   }
77 | }
78 | export default DraftDemo


--------------------------------------------------------------------------------
/src/routes/Other/DraftDemo/style.css:
--------------------------------------------------------------------------------
1 | .editor-class{
2 |     min-height: 300px;
3 |     border: 1px solid #F1F1F1;
4 |     border-top: none;
5 |     margin-top: -5px;
6 |     padding: 0 10px;
7 | }


--------------------------------------------------------------------------------
/src/routes/Other/ErrorPage/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './style.css'
 3 | 
 4 | class ErrorPage extends React.Component {
 5 |   componentDidMount(){
 6 |     this.error404()
 7 |   }
 8 |   componentWillUnmount(){
 9 |     window.cancelAnimationFrame(this.myReq)
10 |   }
11 |   error404 = ()=>{
12 |     const c = document.getElementById("canv");
13 |     const $ = c.getContext("2d");
14 |     const w = c.width;
15 |     const h = c.height;
16 |     const id = $.createImageData(w, h);
17 |     const _this = this
18 |     function draw() {
19 |       _this.myReq = window.requestAnimationFrame(draw);
20 |       let r;
21 |       for (let p = 4 * (w * h - 1); p >= 0; p -= 4) {
22 |         r = Math.random();
23 |         id.data[p] = id.data[p+1] = id.data[p+2] = 255 * Math.pow(r, 1.6);
24 |         id.data[p+3] = 255;
25 |       }
26 |       $.putImageData(id, 0, 0);
27 |     }
28 |     draw();
29 |   }
30 |   render () {
31 |     return (
32 |       <div style={styles.bg} className='error404'>
33 |         <svg className="overlay text" viewBox="0 0 900 400">
34 |           <symbol id="main">
35 |             <text textAnchor="middle" x="50%" y="50%" dy="0.25em" className="txt">404</text>
36 |             <text textAnchor="middle" x="50%" y="90%" dy="0.25em" className="txt2">Not Found</text>
37 |           </symbol>
38 |           <mask id="msk" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
39 |             <rect width="100%" height="100%" className="wrap">
40 |             </rect>
41 |             <use xlinkHref="#main" className="mtxt"/>
42 |           </mask>
43 |         </svg>
44 |         <section>
45 |           <h1 href="#">
46 |             <div className="fill">
47 |               <canvas id="canv" width="460" height="360" style={{background: 'hsla(0, 0, 0, 1)'}}>
48 |               </canvas>
49 |             </div>
50 |             <svg viewBox="0 0 900 400" className="inv">
51 |               <rect width="100%" height="100%" mask="url(#msk)"
52 |                     className="rect"/>
53 |               <use xlinkHref="#main" className="clear"/>
54 |             </svg>
55 |           </h1>
56 |         </section>
57 |       </div>
58 |     )
59 |   }
60 | }
61 | 
62 | const styles = {
63 |   bg: {
64 |     position: 'absolute',
65 |     top: 0,
66 |     left: 0,
67 |     width: '100%',
68 |     height: 'calc(100vh - 64px)',
69 |   },
70 | }
71 | export default ErrorPage


--------------------------------------------------------------------------------
/src/routes/Other/ErrorPage/style.css:
--------------------------------------------------------------------------------
 1 | /* latin-ext */
 2 | @font-face {
 3 |     font-family: 'Black Ops One';
 4 |     font-style: normal;
 5 |     font-weight: 400;
 6 |     src: local('Black Ops One Regular'), local('BlackOpsOne-Regular'), url(https://fonts.gstatic.com/s/blackopsone/v9/qWcsB6-ypo7xBdr6Xshe96H3aDXbtxsis4IxXw.woff2) format('woff2');
 7 |     unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 8 | }
 9 | /* latin */
10 | @font-face {
11 |     font-family: 'Black Ops One';
12 |     font-style: normal;
13 |     font-weight: 400;
14 |     src: local('Black Ops One Regular'), local('BlackOpsOne-Regular'), url(https://fonts.gstatic.com/s/blackopsone/v9/qWcsB6-ypo7xBdr6Xshe96H3aDvbtxsis4I.woff2) format('woff2');
15 |     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
16 | }
17 | 
18 | .error404 {
19 |     background: #e6e6e6;
20 |     font-weight: bold;
21 |     font-size: 1em;
22 |     display: flex;
23 |     justify-content: center;
24 |     flex-direction: column;
25 |     font-family: 'Black Ops One', cursive;
26 |     -webkit-user-select: none;
27 |     -moz-user-select: none;
28 |     -ms-user-select: none;
29 |     user-select: none;
30 | }
31 | 
32 | .error404 canvas {
33 |     left: 50%;
34 |     position: absolute;
35 |     top: 50%;
36 |     -webkit-transform: translate(-50%, -50%);
37 |     transform: translate(-50%, -50%);
38 | }
39 | 
40 | .error404 .text .wrap {
41 |     fill: #FFF;
42 | }
43 | 
44 | .error404 .overlay {
45 |     height: 0;
46 |     width: 0;
47 |     overflow: hidden;
48 |     position: absolute;
49 | }
50 | .error404 .overlay .txt {
51 |     font-size: 14rem;
52 |     text-transform: uppercase;
53 |     font-weight: 900;
54 |     letter-spacing: -.5rem;
55 |     text-shadow: 0 -3px 0 #0d0d0d, 0 6px 8px rgba(13, 13, 13, 0.55), 0 9px 10px rgba(13, 13, 13, 0.25);
56 | }
57 | .error404 .overlay .txt2 {
58 |     font-size: 4rem;
59 | }
60 | 
61 | .error404 section {
62 |     align-self: center;
63 | }
64 | 
65 | .error404 h1 {
66 |     position: relative;
67 |     font-size: 8em;
68 |     font-weight: bold;
69 |     line-height: 1;
70 |     display: inline-block;
71 |     width: 900px;
72 |     height: 400px;
73 | }
74 | .error404 h1 .fill {
75 |     position: relative;
76 |     width: 100%;
77 |     height: 100%;
78 |     overflow: hidden;
79 | }
80 | .error404 h1 .inv {
81 |     position: absolute;
82 |     width: 900px;
83 |     height: 400px;
84 |     top: 0;
85 |     left: 0;
86 | }
87 | .error404 h1 .rect {
88 |     fill: #e6e6e6;
89 | }
90 | .error404 h1 .clear {
91 |     fill: transparent;
92 | }


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/01.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/02.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/02.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/03.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/03.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/04.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/04.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/05.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/05.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/06.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/06.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/07.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/07.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/08.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/08.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/09.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/09.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/10.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/10.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/11.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/11.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/img/12.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/z-9527/react-admin-master/97a53ae97e14404a0a98d8c35899191dfbd8c799/src/routes/Other/GalleryDemo/img/12.jpeg


--------------------------------------------------------------------------------
/src/routes/Other/GalleryDemo/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Shuffle from 'shufflejs'
  3 | import CustomBreadcrumb from '../../../components/CustomBreadcrumb/index'
  4 | import TypingCard from '../../../components/TypingCard'
  5 | import {Card,Button,Modal,BackTop} from 'antd'
  6 | 
  7 | class GalleryDemo extends React.Component{
  8 |   state = {
  9 |     image:'',
 10 |     visible:false,
 11 |     photos : [
 12 |       {
 13 |         groups:['nature'],
 14 |         style:'itemOne',
 15 |         size:'1x1',
 16 |         src:require('./img/01.jpeg')
 17 |       },
 18 |       {
 19 |         groups:['nature'],
 20 |         style:'itemOne',
 21 |         size:'1x1',
 22 |         src:require('./img/02.jpeg')
 23 |       },
 24 |       {
 25 |         groups:['nature'],
 26 |         style:'itemOne',
 27 |         size:'1x1',
 28 |         src:require('./img/03.jpeg')
 29 |       },
 30 |       {
 31 |         groups:['scenery'],
 32 |         style:'itemOne',
 33 |         size:'1x1',
 34 |         src:require('./img/04.jpeg')
 35 |       },
 36 |       {
 37 |         groups:['scenery'],
 38 |         style:'itemTwoRow',
 39 |         size:'1x2',
 40 |         src:require('./img/05.jpeg')
 41 |       },
 42 |       {
 43 |         groups:['nature'],
 44 |         style:'itemOne',
 45 |         size:'1x1',
 46 |         src:require('./img/06.jpeg')
 47 |       },
 48 |       {
 49 |         groups:['nature','scenery'],
 50 |         style:'itemTwoCol',
 51 |         size:'2x1',
 52 |         src:require('./img/07.jpeg')
 53 |       },
 54 |       {
 55 |         groups:['other'],
 56 |         style:'itemOne',
 57 |         size:'1x1',
 58 |         src:require('./img/08.jpeg')
 59 |       },
 60 |       {
 61 |         groups:['other'],
 62 |         style:'itemOne',
 63 |         size:'1x1',
 64 |         src:require('./img/09.jpeg')
 65 |       },
 66 |       {
 67 |         groups:['nature'],
 68 |         style:'itemOne',
 69 |         size:'1x1',
 70 |         src:require('./img/10.jpeg')
 71 |       },
 72 |       {
 73 |         groups:['other'],
 74 |         style:'itemOne',
 75 |         size:'1x1',
 76 |         src:require('./img/11.jpeg')
 77 |       },
 78 |       {
 79 |         groups:['other','scenery'],
 80 |         style:'itemOne',
 81 |         size:'1x1',
 82 |         src:require('./img/12.jpeg')
 83 |       },
 84 |     ]
 85 |   }
 86 |   componentDidMount(){
 87 |     this.shuffle = new Shuffle(this.shuffleDemo, {
 88 |       itemSelector: '.photo-item',
 89 |       sizer: this.sizer,
 90 |     });
 91 |   }
 92 |   componentDidUpdate() {
 93 |     // this.shuffle.resetItems();
 94 |   }
 95 | 
 96 |   componentWillUnmount() {
 97 |     this.shuffle.destroy();
 98 |     this.shuffle = null;
 99 |   }
100 |   _whenPhotosLoaded(photos) {
101 |     return Promise.all(photos.map(photo => new Promise((resolve) => {
102 |       const image = document.createElement('img');
103 |       image.src = photo.src;
104 | 
105 |       if (image.naturalWidth > 0 || image.complete) {
106 |         resolve(photo);
107 |       } else {
108 |         image.onload = () => {
109 |           resolve(photo);
110 |         };
111 |       }
112 |     })));
113 |   }
114 |   showImg = (src)=>{
115 |     this.setState({
116 |       visible:true,
117 |       image:src
118 |     })
119 |   }
120 | 
121 |   render(){
122 |     const cardContent = `<ul class='card-ul'}>
123 |       <li>快速 - 在初始化，排序或过滤器上只有一个强制同步布局（又称回流</li>
124 |       <li>回应（尝试调整窗口大小！）</li>
125 |       <li>按组过滤项目</li>
126 |       <li>项目可以有多个组，大小不同</li>
127 |       <li>排序项目</li>
128 |       <li>高级过滤（如搜索）</li>
129 |     </ul>`
130 |     return (
131 |       <div>
132 |         <CustomBreadcrumb arr={['其它','画廊']}/>
133 |         <TypingCard title='shufflejs插件' source={cardContent} height={290}/>
134 |         <Card bordered={false}>
135 |           <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter()}>全部</Button>
136 |           <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('scenery')}>风景</Button>
137 |           <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('nature')}>自然</Button>
138 |           <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('other')}>其他</Button>
139 |         </Card>
140 |         <div style={{padding: '20px 32px',minHeight:500}}>
141 |           <div ref={(div)=>this.shuffleDemo=div}>
142 |             {
143 |               this.state.photos.map((item,index)=>(
144 |                 <div
145 |                   className='photo-item'
146 |                   data-groups={JSON.stringify(item.groups)}
147 |                   onClick={()=>this.showImg(item.src)}
148 |                   style={styles[item.style]} key={item.src}>
149 |                   <div className={'aspect aspect--'+item.size}>
150 |                     <div className='aspect__inner'>
151 |                       <img src={item.src} alt="" width='100%' height='100%'/>
152 |                     </div>
153 |                   </div>
154 |                 </div>
155 |               ))
156 |             }
157 |             <div style={{width:'8.33333%'}}  ref={(div)=>this.sizer = div}/>
158 |           </div>
159 |         </div>
160 |         <Modal
161 |           footer={null} closable={false}
162 |           visible={this.state.visible}
163 |           wrapClassName="vertical-center-modal"
164 |           onCancel={()=>this.setState({visible:false})}>
165 |           <img src={this.state.image} alt="" width='100%'/>
166 |         </Modal>
167 |         <BackTop visibilityHeight={200} style={{right: 50}}/>
168 |       </div>
169 |     )
170 |   }
171 | }
172 | 
173 | const styles = {
174 |   itemOne:{
175 |     width:'25%',
176 |     marginBottom:8,
177 |     padding:'0 4px'
178 | 
179 |   },
180 |   itemTwoCol:{
181 |     width:'50%',
182 |     marginBottom:8,
183 |     padding:'0 4px'
184 |   },
185 |   itemTwoRow:{
186 |     width:'25%',
187 |     marginBottom:8,
188 |     padding:'0 4px'
189 |   }
190 | 
191 | }
192 | 
193 | export default GalleryDemo


--------------------------------------------------------------------------------
/src/routes/Other/LoadingDemo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Loading2 from '../../../components/Loading2'
 3 | import 'animate.css'
 4 | 
 5 | class LoadingDemo extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div style={styles.bg}>
 9 |         <h3 style={styles.loadingTitle} className='animated bounceInLeft'>加载动画</h3>
10 |         <Loading2/>
11 |       </div>
12 |     )
13 |   }
14 | }
15 | 
16 | const styles = {
17 |   bg: {
18 |     position: 'absolute',
19 |     top: 0,
20 |     left: 0,
21 |     width: '100%',
22 |     height: 'calc(100vh - 64px)',
23 |     background: '#DEF3F4'
24 |   },
25 |   loadingTitle:{
26 |     position:'absolute',
27 |     top:'50%',
28 |     left:'50%',
29 |     marginLeft: -45,
30 |     marginTop: -18,
31 |     color:'#000',
32 |     fontWeight:500,
33 |     fontSize:20
34 |   },
35 | }
36 | export default LoadingDemo


--------------------------------------------------------------------------------
/src/store/appStore.js:
--------------------------------------------------------------------------------
 1 | import {observable, action} from 'mobx'
 2 | import {isAuthenticated,authenticateSuccess,logout} from '../utils/Session'
 3 | 
 4 | class AppStore {
 5 |   @observable isLogin = !!isAuthenticated()  //利用cookie来判断用户是否登录，避免刷新页面后登录状态丢失
 6 |   @observable users = []  //模拟用户数据库
 7 |   @observable loginUser = {}  //当前登录用户信息
 8 | 
 9 |   @action toggleLogin(flag,info={}) {
10 |     this.loginUser = info  //设置登录用户信息
11 |     if (flag) {
12 |       authenticateSuccess(info.username)
13 |       this.isLogin = true
14 |     } else {
15 |       logout()
16 |       this.isLogin = false
17 |     }
18 | 
19 |   }
20 |   @action initUsers() {
21 |     const localUsers = localStorage['users']?JSON.parse(localStorage['users']):[]
22 |     this.users = [{username: 'admin', password: 'admin'},...localUsers]
23 |   }
24 | }
25 | 
26 | export default new AppStore()


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import appStore from './appStore'
2 | import stepFormStore from '../routes/Entry/FormDemo/store'
3 | 
4 | const store = {
5 |   appStore,
6 |   stepFormStore
7 | }
8 | export default store


--------------------------------------------------------------------------------
/src/utils/AsyncComponent.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | 
 3 | export default function asyncComponent(importComponent) {
 4 |   class AsyncComponent extends Component {
 5 |     constructor(props) {
 6 |       super(props)
 7 | 
 8 |       this.state = {
 9 |         component: null
10 |       }
11 |     }
12 | 
13 |     async componentDidMount() {
14 |       const {default: component} = await importComponent()
15 | 
16 |       this.setState({
17 |         component: component
18 |       })
19 |     }
20 | 
21 |     render() {
22 |       const C = this.state.component
23 | 
24 |       return C ? <C {...this.props} /> : null
25 |     }
26 |   }
27 | 
28 |   return AsyncComponent
29 | }


--------------------------------------------------------------------------------
/src/utils/BGParticle.js:
--------------------------------------------------------------------------------
  1 | import {TweenLite,Circ} from "gsap/all";
  2 | 
  3 | class BGParticle {
  4 |   constructor(id) {
  5 |     this.id = id
  6 |     this.width = window.innerWidth
  7 |     this.height = window.innerHeight
  8 |     this.points = []
  9 |     this.target = {}
 10 |     this.canvas = null
 11 |     this.ctx = null
 12 |     this.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
 13 |       window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
 14 |     this.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
 15 | 
 16 |   }
 17 | 
 18 |   createCanvas() {
 19 |     this.canvas = document.createElement('canvas')
 20 |     this.ctx = this.canvas.getContext('2d')
 21 |     this.canvas.style.display = 'block'        //防止全屏的canvas出现滚动条
 22 |     this.canvas.width = this.width
 23 |     this.canvas.height = this.height
 24 |     this.canvas.style.position = 'fixed'
 25 |     this.canvas.style.top = '0'
 26 |     this.canvas.style.left = '0'
 27 |     document.getElementById(this.id).appendChild(this.canvas)
 28 |   }
 29 | 
 30 |   createPoints() {
 31 |     const {width, height} = this
 32 |     //创建粒子和粒子的起始位置
 33 |     for (let x = 0; x < width; x = x + width / 20) {
 34 |       for (let y = 0; y < height; y = y + height / 20) {
 35 |         let px = x + Math.random() * width / 20;
 36 |         let py = y + Math.random() * height / 20;
 37 |         let p = {x: px, originX: px, y: py, originY: py};
 38 |         this.points.push(p);
 39 |       }
 40 |     }
 41 |     //给每个粒子添加新属性closest、radius
 42 |     for (let i = 0; i < this.points.length; i++) {
 43 |       let closest = [];
 44 |       let p1 = this.points[i];
 45 |       for (let j = i + 1; j < this.points.length; j++) {
 46 |         let p2 = this.points[j]
 47 |         let placed = false;
 48 |         for (let k = 0; k < 5; k++) {
 49 |           if (!placed) {
 50 |             if (closest[k] === undefined) {
 51 |               closest[k] = p2;
 52 |               placed = true;
 53 |             }
 54 |           }
 55 |         }
 56 |         for (let k = 0; k < 5; k++) {
 57 |           if (!placed) {
 58 |             if (this.getDistance(p1, p2) < this.getDistance(p1, closest[k])) {
 59 |               closest[k] = p2;
 60 |               placed = true;
 61 |             }
 62 |           }
 63 |         }
 64 |       }
 65 |       p1.closest = closest;
 66 |       p1.radius = 2 + Math.random() * 2
 67 |       //给粒子添加抖动
 68 |       this.shakePoint(p1);
 69 |     }
 70 |   }
 71 | 
 72 |   shakePoint(point) {
 73 |     TweenLite.to(point, 1 + 1 * Math.random(), {
 74 |       x: point.originX - 50 + Math.random() * 100,
 75 |       y: point.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
 76 |       onComplete: () => {
 77 |         this.shakePoint(point);
 78 |       }
 79 |     });
 80 |   }
 81 | 
 82 |   drawPoint(point, ctx) {
 83 |     if (!point.pointActive) return;
 84 |     ctx.beginPath();
 85 |     ctx.arc(point.x, point.y, point.radius, 0, 2 * Math.PI, false);
 86 |     ctx.fillStyle = 'rgba(156,217,249,' + point.pointActive + ')';
 87 |     ctx.fill();
 88 |   }
 89 | 
 90 |   drawLines(point, ctx) {
 91 |     if (!point.lineActive) return;
 92 |     for (let item of point.closest) {
 93 |       ctx.beginPath();
 94 |       ctx.moveTo(point.x, point.y);
 95 |       ctx.lineTo(item.x, item.y);
 96 |       ctx.strokeStyle = 'rgba(156,217,249,' + point.lineActive + ')';
 97 |       ctx.stroke();
 98 |     }
 99 |   }
100 | 
101 |   getDistance(p1, p2) {
102 |     return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
103 |   }
104 | 
105 |   handleResize() {
106 |     this.width = window.innerWidth
107 |     this.height = window.innerHeight
108 |     this.canvas.width = this.width
109 |     this.canvas.height = this.height
110 |   }
111 | 
112 |   handleMouseMove(e) {
113 |     let posx = 0, posy = 0;
114 |     if (e.pageX || e.pageY) {
115 |       posx = e.pageX;
116 |       posy = e.pageY;
117 |     }
118 |     else if (e.clientX || e.clientY) {
119 |       posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
120 |       posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
121 |     }
122 |     this.target.x = posx;
123 |     this.target.y = posy;
124 |   }
125 | 
126 |   init() {
127 |     this.createCanvas()
128 |     this.createPoints()
129 |     this.start()
130 | 
131 |     window.onresize = (e) => this.handleResize(e)
132 |     window.onmousemove = (e) => this.handleMouseMove(e)
133 |   }
134 | 
135 |   start() {
136 |     const {width, height, getDistance, points, ctx, target, requestAnimationFrame} = this
137 |     this.ctx.clearRect(0, 0, width, height);
138 | 
139 |     for (let point of points) {
140 |       if (Math.abs(getDistance(target, point)) < 4000) {
141 |         point.lineActive = 0.3;
142 |         point.pointActive = 0.6;
143 |       } else if (Math.abs(getDistance(target, point)) < 20000) {
144 |         point.lineActive = 0.1;
145 |         point.pointActive = 0.3;
146 |       } else if (Math.abs(getDistance(target, point)) < 40000) {
147 |         point.lineActive = 0.02;
148 |         point.pointActive = 0.1;
149 |       } else {
150 |         point.lineActive = 0;
151 |         point.pointActive = 0;
152 |       }
153 | 
154 |       this.drawLines(point, ctx)
155 |       this.drawPoint(point, ctx);
156 |     }
157 |     this.myReq = requestAnimationFrame(() => this.start());
158 |   }
159 | 
160 |   destory() {
161 |     const cancelAnimationFrame = this.cancelAnimationFrame
162 |     cancelAnimationFrame(this.myReq)
163 |     window.onresize = null
164 |     window.onmousemove = null
165 |   }
166 | }
167 | export default BGParticle


--------------------------------------------------------------------------------
/src/utils/LoadableComponent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Loadable from 'react-loadable'
 3 | import NProgress from 'nprogress'
 4 | import 'nprogress/nprogress.css'
 5 | 
 6 | class LoadingPage extends React.Component {
 7 |   //类似github页面加载的那个加载条
 8 |   componentWillMount(){
 9 |     NProgress.start()
10 |   }
11 |   componentWillUnmount(){
12 |     NProgress.done()
13 |   }
14 |   render () {
15 |     return (
16 |       <div/>
17 |     )
18 |   }
19 | }
20 | 
21 | const LoadableComponent = (component) => {
22 |   return Loadable({
23 |     loader: component,
24 |     loading: ()=><LoadingPage/>
25 |   })
26 | }
27 | 
28 | export default LoadableComponent


--------------------------------------------------------------------------------
/src/utils/Session.js:
--------------------------------------------------------------------------------
 1 | const LOGIN_COOKIE_NAME = 'sessionId'
 2 | 
 3 | export function isAuthenticated () {
 4 |   return _getCookie(LOGIN_COOKIE_NAME)
 5 | }
 6 | 
 7 | export function authenticateSuccess (token) {
 8 |   _setCookie(LOGIN_COOKIE_NAME, token)
 9 | }
10 | 
11 | export function logout () {
12 |   _setCookie(LOGIN_COOKIE_NAME, '', 0)
13 | }
14 | 
15 | function _getCookie (name) {
16 |   let start, end
17 |   if (document.cookie.length > 0) {
18 |     start = document.cookie.indexOf(name + '=')
19 |     if (start !== -1) {
20 |       start = start + name.length + 1
21 |       end = document.cookie.indexOf(';', start)
22 |       if (end === -1) {
23 |         end = document.cookie.length
24 |       }
25 |       return unescape(document.cookie.substring(start, end))
26 |     }
27 |   }
28 |   return ''
29 | }
30 | 
31 | function _setCookie (name, value, expire) {
32 |   let date = new Date()
33 |   date.setDate(date.getDate() + expire)
34 |   document.cookie = name + '=' + escape(value) + '; path=/' +
35 |     (expire ? ';expires=' + date.toGMTString() : '')
36 | }


--------------------------------------------------------------------------------
/src/utils/gVerify.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 	function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
  3 | 		this.options = { //默认options参数值
  4 | 			id: "", //容器Id
  5 | 			canvasId: "verifyCanvas", //canvas的ID
  6 | 			width: "100", //默认canvas宽度
  7 | 			height: "30", //默认canvas高度
  8 | 			type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
  9 | 			code: ""
 10 | 		}
 11 | 		
 12 | 		if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
 13 | 			for(var i in options) { //根据传入的参数，修改默认参数值
 14 | 				this.options[i] = options[i];
 15 | 			}
 16 | 		}else{
 17 | 			this.options.id = options;
 18 | 		}
 19 | 
 20 | 		this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
 21 | 		this.options.letterArr = getAllLetter();
 22 | 
 23 | 		this._init();
 24 | 		this.refresh();
 25 | 	}
 26 | 
 27 | 	GVerify.prototype = {
 28 | 		/**版本号**/
 29 | 		version: '1.0.0',
 30 | 
 31 | 		/**初始化方法**/
 32 | 		_init: function() {
 33 | 			var con = document.getElementById(this.options.id);
 34 | 			var canvas = document.createElement("canvas");
 35 | 			this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
 36 | 			this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
 37 | 			canvas.id = this.options.canvasId;
 38 | 			canvas.width = this.options.width;
 39 | 			canvas.height = this.options.height;
 40 | 			canvas.style.cursor = "pointer";
 41 | 			canvas.innerHTML = "您的浏览器版本不支持canvas";
 42 | 			con.appendChild(canvas);
 43 | 			var parent = this;
 44 | 			canvas.onclick = function(){
 45 | 				parent.refresh();
 46 | 			}
 47 | 		},
 48 | 
 49 | 		/**生成验证码**/
 50 | 		refresh: function() {
 51 | 			this.options.code = "";
 52 | 			var canvas = document.getElementById(this.options.canvasId);
 53 | 			if(canvas.getContext) {
 54 | 				var ctx = canvas.getContext('2d');
 55 | 			}else{
 56 | 				return;
 57 | 			}
 58 | 
 59 | 			ctx.textBaseline = "middle";
 60 | 
 61 | 			ctx.fillStyle = randomColor(180, 240);
 62 | 			ctx.fillRect(0, 0, this.options.width, this.options.height);
 63 | 
 64 | 			if(this.options.type == "blend") { //判断验证码类型
 65 | 				var txtArr = this.options.numArr.concat(this.options.letterArr);
 66 | 			} else if(this.options.type == "number") {
 67 | 				var txtArr = this.options.numArr;
 68 | 			} else {
 69 | 				var txtArr = this.options.letterArr;
 70 | 			}
 71 | 
 72 | 			for(var i = 1; i <= 4; i++) {
 73 | 				var txt = txtArr[randomNum(0, txtArr.length)];
 74 | 				this.options.code += txt;
 75 | 				ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
 76 | 				ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
 77 | 				ctx.shadowOffsetX = randomNum(-3, 3);
 78 | 				ctx.shadowOffsetY = randomNum(-3, 3);
 79 | 				ctx.shadowBlur = randomNum(-3, 3);
 80 | 				ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
 81 | 				var x = this.options.width / 5 * i;
 82 | 				var y = this.options.height / 2;
 83 | 				var deg = randomNum(-30, 30);
 84 | 				/**设置旋转角度和坐标原点**/
 85 | 				ctx.translate(x, y);
 86 | 				ctx.rotate(deg * Math.PI / 180);
 87 | 				ctx.fillText(txt, 0, 0);
 88 | 				/**恢复旋转角度和坐标原点**/
 89 | 				ctx.rotate(-deg * Math.PI / 180);
 90 | 				ctx.translate(-x, -y);
 91 | 			}
 92 | 			/**绘制干扰线**/
 93 | 			for(var i = 0; i < 4; i++) {
 94 | 				ctx.strokeStyle = randomColor(40, 180);
 95 | 				ctx.beginPath();
 96 | 				ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
 97 | 				ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
 98 | 				ctx.stroke();
 99 | 			}
100 | 			/**绘制干扰点**/
101 | 			for(var i = 0; i < this.options.width/4; i++) {
102 | 				ctx.fillStyle = randomColor(0, 255);
103 | 				ctx.beginPath();
104 | 				ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
105 | 				ctx.fill();
106 | 			}
107 | 		},
108 | 
109 | 		/**验证验证码**/
110 | 		validate: function(code){
111 | 			var code = code.toLowerCase();
112 | 			var v_code = this.options.code.toLowerCase();
113 | 			if(code == v_code){
114 | 				return true;
115 | 			}else{
116 | 				// this.refresh();
117 | 				return false;
118 | 			}
119 | 		}
120 | 	}
121 | 	/**生成字母数组**/
122 | 	function getAllLetter() {
123 | 		var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
124 | 		return letterStr.split(",");
125 | 	}
126 | 	/**生成一个随机数**/
127 | 	function randomNum(min, max) {
128 | 		return Math.floor(Math.random() * (max - min) + min);
129 | 	}
130 | 	/**生成一个随机色**/
131 | 	function randomColor(min, max) {
132 | 		var r = randomNum(min, max);
133 | 		var g = randomNum(min, max);
134 | 		var b = randomNum(min, max);
135 | 		return "rgb(" + r + "," + g + "," + b + ")";
136 | 	}
137 | 
138 | 	export default GVerify


--------------------------------------------------------------------------------
/src/utils/typing.js:
--------------------------------------------------------------------------------
 1 | class Typing {
 2 |   constructor(opts) {
 3 |     this.opts = opts || {};
 4 |     this.source = opts.source;
 5 |     this.output = opts.output;
 6 |     this.delay = opts.delay || 120;
 7 |     this.chain = {
 8 |       parent: null,
 9 |       dom: this.output,
10 |       val: []
11 |     };
12 |     if (!(typeof this.opts.done === 'function')) this.opts.done = function () {
13 |     };
14 |   }
15 | 
16 |   init() {
17 |     //初始化函数
18 |     this.chain.val = this.convert(this.source, this.chain.val);
19 |   }
20 | 
21 |   convert(dom, arr) {
22 |     //将dom节点的子节点转换成数组，
23 |     let children = Array.from(dom.childNodes)
24 |     for (let i = 0; i < children.length; i++) {
25 |       let node = children[i]
26 |       if (node.nodeType === 3) {
27 |         arr = arr.concat(node.nodeValue.split(''))   //将字符串转换成字符串数组，后面打印时才会一个一个的打印
28 |       } else if (node.nodeType === 1) {
29 |         let val = []
30 |         val = this.convert(node, val)
31 |         arr.push({
32 |           'dom': node,
33 |           'val': val
34 |         })
35 |       }
36 |     }
37 |     return arr
38 |   }
39 | 
40 |   print(dom, val, callback) {
41 |     setTimeout(function () {
42 |       dom.appendChild(document.createTextNode(val));
43 |       callback();
44 |     }, this.delay);
45 |   }
46 | 
47 |   play(ele) {
48 |     //当打印最后一个字符时，动画完毕，执行done
49 |     if (!ele.val.length) {
50 |       if (ele.parent) this.play(ele.parent);
51 |       else this.opts.done();
52 |       return;
53 |     }
54 |     let current = ele.val.shift()  //获取第一个元素，同时删除数组中的第一个元素
55 |     if (typeof current === 'string') {
56 |       this.print(ele.dom, current, () => {
57 |         this.play(ele); //继续打印下一个字符
58 |       })
59 |     } else {
60 |       let dom = current.dom.cloneNode() //克隆节点，不克隆节点的子节点，所以不用加参数true
61 |       ele.dom.appendChild(dom)
62 |       this.play({
63 |         parent: ele,
64 |         dom,
65 |         val: current.val
66 |       })
67 |     }
68 |   }
69 | 
70 |   start() {
71 |     this.init();
72 |     this.play(this.chain);
73 |   }
74 | }
75 | 
76 | export default Typing


--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
 1 | function accMul(arg1, arg2) {
 2 |   let m = 0;
 3 |   const s1 = arg1.toString();
 4 |   const s2 = arg2.toString();
 5 |   m += s1.split(".").length > 1 ? s1.split(".")[1].length : 0;
 6 |   m += s2.split(".").length > 1 ? s2.split(".")[1].length : 0;
 7 |   return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / 10 ** m;
 8 | }
 9 | 
10 | export function digitUppercase(n) {
11 |   const fraction = ['角', '分'];
12 |   const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
13 |   const unit = [['元', '万', '亿'], ['', '拾', '佰', '仟', '万']];
14 |   let num = Math.abs(n);
15 |   let s = '';
16 |   fraction.forEach((item, index) => {
17 |     s += (digit[Math.floor(accMul(num, 10 * 10 ** index)) % 10] + item).replace(/零./, '');
18 |   });
19 |   s = s || '整';
20 |   num = Math.floor(num);
21 |   for (let i = 0; i < unit[0].length && num > 0; i += 1) {
22 |     let p = '';
23 |     for (let j = 0; j < unit[1].length && num > 0; j += 1) {
24 |       p = digit[num % 10] + unit[1][j] + p;
25 |       num = Math.floor(num / 10);
26 |     }
27 |     s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
28 |   }
29 | 
30 |   return s
31 |     .replace(/(零.)*零元/, '元')
32 |     .replace(/(零.)+/g, '零')
33 |     .replace(/^整$/, '零元整');
34 | }
35 | 
36 | 
37 | /**
38 |  * 生成指定区间的随机整数
39 |  * @param min
40 |  * @param max
41 |  * @returns {number}
42 |  */
43 | export function randomNum(min, max) {
44 |   return Math.floor(Math.random() * (max - min) + min);
45 | }
46 | 
47 | /**
48 |  * 计算提示框的宽度
49 |  * @param str
50 |  * @returns {number}
51 |  */
52 | export function calculateWidth(arr){
53 |   return 30 + arr[0].length*15
54 | }
55 | 
56 | /**
57 |  * 图片预加载
58 |  * @param arr
59 |  * @constructor
60 |  */
61 | export function preloadingImages(arr) {
62 |   arr.forEach(item=>{
63 |     const img = new Image()
64 |     img.src = item
65 |   })
66 | }


--------------------------------------------------------------------------------