├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   ├── fileTransform.js
    │   └── typescriptTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── images.d.ts
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App
    │   ├── App.css
    │   ├── App.less
    │   └── App.tsx
    ├── components
    │   ├── index.tsx
    │   └── testPage
    │   │   ├── Alex.tsx
    │   │   ├── Bill.tsx
    │   │   ├── Lily.tsx
    │   │   └── Tom.tsx
    ├── fetch
    │   └── index.js
    ├── img
    │   └── logo.jpg
    ├── index.tsx
    ├── login
    │   └── index.tsx
    ├── logo.svg
    ├── model
    │   └── login.ts
    ├── redux
    │   ├── actions
    │   │   ├── base.ts
    │   │   └── login.ts
    │   └── reducer
    │   │   ├── index.ts
    │   │   └── login
    │   │       ├── base.ts
    │   │       └── index.ts
    ├── registerServiceWorker.ts
    ├── routes
    │   ├── config.ts
    │   └── index.tsx
    ├── siderMenus
    │   └── index.tsx
    ├── staticConfig
    │   └── dev
    │   │   └── devConfig.ts
    └── utils
    │   └── declare.ts
├── tsconfig.json
├── tsconfig.prod.json
├── tsconfig.test.json
└── tslint.json


/.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 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | package-lock.json
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # typescript-antd-system
2 | 这个是框架，本人不定时更新
3 | 


--------------------------------------------------------------------------------
/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(
85 |       (env, key) => {
86 |         env[key] = JSON.stringify(raw[key]);
87 |         return env;
88 |       },
89 |       {}
90 |     ),
91 |   };
92 | 
93 |   return { raw, stringified };
94 | }
95 | 
96 | module.exports = getClientEnvironment;
97 | 


--------------------------------------------------------------------------------
/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/jest/typescriptTransform.js:
--------------------------------------------------------------------------------
1 | // Copyright 2004-present Facebook. All Rights Reserved.
2 | 
3 | 'use strict';
4 | 
5 | const tsJestPreprocessor = require('ts-jest/preprocessor');
6 | 
7 | module.exports = tsJestPreprocessor;
8 | 


--------------------------------------------------------------------------------
/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 = envPublicUrl ||
37 |     (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.tsx'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.ts'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   appTsConfig: resolveApp('tsconfig.json'),
54 |   appTsProdConfig: resolveApp('tsconfig.prod.json'),
55 |   appTsLint: resolveApp('tslint.json'),
56 |   publicUrl: getPublicUrl(resolveApp('package.json')),
57 |   servedPath: getServedPath(resolveApp('package.json')),
58 | };
59 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common 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/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 11 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 15 | const tsImportPluginFactory = require('ts-import-plugin');
 16 | 
 17 | // Webpack uses `publicPath` to determine where the app is being served from.
 18 | // In development, we always serve from the root. This makes config easier.
 19 | const publicPath = '/';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 23 | const publicUrl = '';
 24 | // Get environment variables to inject into our app.
 25 | const env = getClientEnvironment(publicUrl);
 26 | 
 27 | // This is the development configuration.
 28 | // It is focused on developer experience and fast rebuilds.
 29 | // The production configuration is different and lives in a separate file.
 30 | module.exports = {
 31 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 32 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 33 |   devtool: 'cheap-module-source-map',
 34 |   // These are the "entry points" to our application.
 35 |   // This means they will be the "root" imports that are included in JS bundle.
 36 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 37 |   entry: [
 38 |     // We ship a few polyfills by default:
 39 |     require.resolve('./polyfills'),
 40 |     // Include an alternative client for WebpackDevServer. A client's job is to
 41 |     // connect to WebpackDevServer by a socket and get notified about changes.
 42 |     // When you save a file, the client will either apply hot updates (in case
 43 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 44 |     // make a syntax error, this client will display a syntax error overlay.
 45 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 46 |     // to bring better experience for Create React App users. You can replace
 47 |     // the line below with these two lines if you prefer the stock client:
 48 |     // require.resolve('webpack-dev-server/client') + '?/',
 49 |     // require.resolve('webpack/hot/dev-server'),
 50 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 51 |     // Finally, this is your app's code:
 52 |     paths.appIndexJs,
 53 |     // We include the app code last so that if there is a runtime error during
 54 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 55 |     // changing JS code would still trigger a refresh.
 56 |   ],
 57 |   output: {
 58 |     // Add /* filename */ comments to generated require()s in the output.
 59 |     pathinfo: true,
 60 |     // This does not produce a real file. It's just the virtual path that is
 61 |     // served by WebpackDevServer in development. This is the JS bundle
 62 |     // containing code from all our entry points, and the Webpack runtime.
 63 |     filename: 'static/js/bundle.js',
 64 |     // There are also additional JS chunk files if you use code splitting.
 65 |     chunkFilename: 'static/js/[name].chunk.js',
 66 |     // This is the URL that app is served from. We use "/" in development.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     // `web` extension prefixes have been added for better support
 86 |     // for React Native Web.
 87 |     extensions: [
 88 |       '.mjs',
 89 |       '.web.ts',
 90 |       '.ts',
 91 |       '.web.tsx',
 92 |       '.tsx',
 93 |       '.web.js',
 94 |       '.js',
 95 |       '.json',
 96 |       '.web.jsx',
 97 |       '.jsx',
 98 |     ],
 99 |     alias: {
100 |       
101 |       // Support React Native Web
102 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
103 |       'react-native': 'react-native-web',
104 |     },
105 |     plugins: [
106 |       // Prevents users from importing files from outside of src/ (or node_modules/).
107 |       // This often causes confusion because we only process files within src/ with babel.
108 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
109 |       // please link the files into your node_modules/ and let module-resolution kick in.
110 |       // Make sure your source files are compiled, as they will not be processed in any way.
111 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
112 |       new TsconfigPathsPlugin({ configFile: paths.appTsConfig }),
113 |     ],
114 |   },
115 |   module: {
116 |     strictExportPresence: true,
117 |     rules: [
118 |       // TODO: Disable require.ensure as it's not a standard language feature.
119 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
120 |       // { parser: { requireEnsure: false } },
121 | 
122 |       {
123 |         test: /\.(js|jsx|mjs)$/,
124 |         loader: require.resolve('source-map-loader'),
125 |         enforce: 'pre',
126 |         include: paths.appSrc,
127 |       },
128 |       {
129 |         // "oneOf" will traverse all following loaders until one will
130 |         // match the requirements. When no loader matches it will fall
131 |         // back to the "file" loader at the end of the loader list.
132 |         oneOf: [
133 |           // "url" loader works like "file" loader except that it embeds assets
134 |           // smaller than specified limit in bytes as data URLs to avoid requests.
135 |           // A missing `test` is equivalent to a match.
136 |           {
137 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
138 |             loader: require.resolve('url-loader'),
139 |             options: {
140 |               limit: 10000,
141 |               name: 'static/media/[name].[hash:8].[ext]',
142 |             },
143 |           },
144 |           {
145 |             test: /\.(js|jsx|mjs)$/,
146 |             include: paths.appSrc,
147 |             loader: require.resolve('babel-loader'),
148 |             options: {
149 |               
150 |               compact: true,
151 |             },
152 |           },
153 | 
154 |           // Compile .tsx?
155 |           {
156 |             test: /\.(ts|tsx)$/,
157 |             include: paths.appSrc,
158 |             use: [
159 |               {
160 |                 loader: require.resolve('ts-loader'),
161 |                 options: {
162 |                   // disable type checker - we will use it in fork plugin
163 |                   transpileOnly: true,
164 |                   getCustomTransformers: () => ({
165 |                     before: [
166 |                       tsImportPluginFactory([
167 |                         {
168 |                           libraryName: 'antd',
169 |                           libraryDirectory: 'es',
170 |                           style: 'css',
171 |                         }
172 |                       ])
173 |                     ]
174 |                   }),
175 |                 },
176 |               },
177 |             ],
178 |           },
179 |           // "postcss" loader applies autoprefixer to our CSS.
180 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
181 |           // "style" loader turns CSS into JS modules that inject <style> tags.
182 |           // In production, we use a plugin to extract that CSS to a file, but
183 |           // in development "style" loader enables hot editing of CSS. 
184 |           {
185 |             test: /\.(css|less)$/,
186 |             use: [
187 |               require.resolve('style-loader'),
188 |               {
189 |                 loader: require.resolve('css-loader'),
190 |                 options: {
191 |                   importLoaders: 1,
192 |                 },
193 |               },
194 |               {
195 |                 loader: require.resolve('postcss-loader'),
196 |                 options: {
197 |                   // Necessary for external CSS imports to work
198 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
199 |                   ident: 'postcss',
200 |                   plugins: () => [
201 |                     require('postcss-flexbugs-fixes'),
202 |                     autoprefixer({
203 |                       browsers: [
204 |                         '>1%',
205 |                         'last 4 versions',
206 |                         'Firefox ESR',
207 |                         'not ie < 9', // React doesn't support IE8 anyway
208 |                       ],
209 |                       flexbox: 'no-2009',
210 |                     }),
211 |                   ],
212 |                 },
213 |               },
214 |               {
215 |                 loader: require.resolve('less-loader'),
216 |                 options: {
217 |                     javascriptEnabled: true
218 |                 }
219 |               },
220 |             ],
221 |           },
222 |           // "file" loader makes sure those assets get served by WebpackDevServer.
223 |           // When you `import` an asset, you get its (virtual) filename.
224 |           // In production, they would get copied to the `build` folder.
225 |           // This loader doesn't use a "test" so it will catch all modules
226 |           // that fall through the other loaders.
227 |           {
228 |             // Exclude `js` files to keep "css" loader working as it injects
229 |             // its runtime that would otherwise processed through "file" loader.
230 |             // Also exclude `html` and `json` extensions so they get processed
231 |             // by webpacks internal loaders.
232 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
233 |             loader: require.resolve('file-loader'),
234 |             options: {
235 |               name: 'static/media/[name].[hash:8].[ext]',
236 |             },
237 |           },
238 |         ],
239 |       },
240 |       // ** STOP ** Are you adding a new loader?
241 |       // Make sure to add the new loader(s) before the "file" loader.
242 |     ],
243 |   },
244 |   plugins: [
245 |     // Makes some environment variables available in index.html.
246 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
247 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
248 |     // In development, this will be an empty string.
249 |     new InterpolateHtmlPlugin(env.raw),
250 |     // Generates an `index.html` file with the <script> injected.
251 |     new HtmlWebpackPlugin({
252 |       inject: true,
253 |       template: paths.appHtml,
254 |     }),
255 |     // Add module names to factory functions so they appear in browser profiler.
256 |     new webpack.NamedModulesPlugin(),
257 |     // Makes some environment variables available to the JS code, for example:
258 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
259 |     new webpack.DefinePlugin(env.stringified),
260 |     // This is necessary to emit hot updates (currently CSS only):
261 |     new webpack.HotModuleReplacementPlugin(),
262 |     // Watcher doesn't work well if you mistype casing in a path so we use
263 |     // a plugin that prints an error when you attempt to do this.
264 |     // See https://github.com/facebookincubator/create-react-app/issues/240
265 |     new CaseSensitivePathsPlugin(),
266 |     // If you require a missing module and then `npm install` it, you still have
267 |     // to restart the development server for Webpack to discover it. This plugin
268 |     // makes the discovery automatic so you don't have to restart.
269 |     // See https://github.com/facebookincubator/create-react-app/issues/186
270 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
271 |     // Moment.js is an extremely popular library that bundles large locale files
272 |     // by default due to how Webpack interprets its code. This is a practical
273 |     // solution that requires the user to opt into importing specific locales.
274 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
275 |     // You can remove this if you don't use Moment.js:
276 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
277 |     // Perform type checking and linting in a separate process to speed up compilation
278 |     new ForkTsCheckerWebpackPlugin({
279 |       async: false,
280 |       watch: paths.appSrc,
281 |       tsconfig: paths.appTsConfig,
282 |       tslint: paths.appTsLint,
283 |     }),
284 |   ],
285 |   // Some libraries import Node modules but don't use them in the browser.
286 |   // Tell Webpack to provide empty mocks for them so importing them works.
287 |   node: {
288 |     dgram: 'empty',
289 |     fs: 'empty',
290 |     net: 'empty',
291 |     tls: 'empty',
292 |     child_process: 'empty',
293 |   },
294 |   // Turn off performance hints during development because we don't do any
295 |   // splitting or minification in interest of speed. These warnings become
296 |   // cumbersome.
297 |   performance: {
298 |     hints: false,
299 |   },
300 | };
301 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 16 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 17 | 
 18 | // Webpack uses `publicPath` to determine where the app is being served from.
 19 | // It requires a trailing slash, or the file assets will get an incorrect path.
 20 | const publicPath = paths.servedPath;
 21 | // Some apps do not use client-side routing with pushState.
 22 | // For these, "homepage" can be set to "." to enable relative asset paths.
 23 | const shouldUseRelativeAssetPaths = publicPath === './';
 24 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 25 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 26 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 27 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 28 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 29 | const publicUrl = publicPath.slice(0, -1);
 30 | // Get environment variables to inject into our app.
 31 | const env = getClientEnvironment(publicUrl);
 32 | 
 33 | // Assert this just to be safe.
 34 | // Development builds of React are slow and not intended for production.
 35 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 36 |   throw new Error('Production builds must have NODE_ENV=production.');
 37 | }
 38 | 
 39 | // Note: defined here because it will be used more than once.
 40 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 41 | 
 42 | // ExtractTextPlugin expects the build output to be flat.
 43 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 44 | // However, our output is structured with css, js and media folders.
 45 | // To have this structure working with relative paths, we have to use custom options.
 46 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 47 |   ? // Making sure that the publicPath goes back to to build folder.
 48 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 49 |   : {};
 50 | 
 51 | // This is the production configuration.
 52 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 53 | // The development configuration is different and lives in a separate file.
 54 | module.exports = {
 55 |   // Don't attempt to continue if there are any errors.
 56 |   bail: true,
 57 |   // We generate sourcemaps in production. This is slow but gives good results.
 58 |   // You can exclude the *.map files from the build during deployment.
 59 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 60 |   // In production, we only want to load the polyfills and the app code.
 61 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 62 |   output: {
 63 |     // The build folder.
 64 |     path: paths.appBuild,
 65 |     // Generated JS file names (with nested folders).
 66 |     // There will be one main bundle, and one file per asynchronous chunk.
 67 |     // We don't currently advertise code splitting but Webpack supports it.
 68 |     filename: 'static/js/[name].[chunkhash:8].js',
 69 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 70 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 71 |     publicPath: publicPath,
 72 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 73 |     devtoolModuleFilenameTemplate: info =>
 74 |       path
 75 |         .relative(paths.appSrc, info.absoluteResourcePath)
 76 |         .replace(/\\/g, '/'),
 77 |   },
 78 |   resolve: {
 79 |     // This allows you to set a fallback for where Webpack should look for modules.
 80 |     // We placed these paths second because we want `node_modules` to "win"
 81 |     // if there are any conflicts. This matches Node resolution mechanism.
 82 |     // https://github.com/facebookincubator/create-react-app/issues/253
 83 |     modules: ['node_modules', paths.appNodeModules].concat(
 84 |       // It is guaranteed to exist because we tweak it in `env.js`
 85 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 86 |     ),
 87 |     // These are the reasonable defaults supported by the Node ecosystem.
 88 |     // We also include JSX as a common component filename extension to support
 89 |     // some tools, although we do not recommend using it, see:
 90 |     // https://github.com/facebookincubator/create-react-app/issues/290
 91 |     // `web` extension prefixes have been added for better support
 92 |     // for React Native Web.
 93 |     extensions: [
 94 |       '.mjs',
 95 |       '.web.ts',
 96 |       '.ts',
 97 |       '.web.tsx',
 98 |       '.tsx',
 99 |       '.web.js',
100 |       '.js',
101 |       '.json',
102 |       '.web.jsx',
103 |       '.jsx',
104 |     ],
105 |     alias: {
106 |       
107 |       // Support React Native Web
108 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
109 |       'react-native': 'react-native-web',
110 |     },
111 |     plugins: [
112 |       // Prevents users from importing files from outside of src/ (or node_modules/).
113 |       // This often causes confusion because we only process files within src/ with babel.
114 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
115 |       // please link the files into your node_modules/ and let module-resolution kick in.
116 |       // Make sure your source files are compiled, as they will not be processed in any way.
117 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
118 |       new TsconfigPathsPlugin({ configFile: paths.appTsProdConfig }),
119 |     ],
120 |   },
121 |   module: {
122 |     strictExportPresence: true,
123 |     rules: [
124 |       // TODO: Disable require.ensure as it's not a standard language feature.
125 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
126 |       // { parser: { requireEnsure: false } },
127 |       {
128 |         test: /\.(js|jsx|mjs)$/,
129 |         loader: require.resolve('source-map-loader'),
130 |         enforce: 'pre',
131 |         include: paths.appSrc,
132 |       },
133 |       {
134 |         // "oneOf" will traverse all following loaders until one will
135 |         // match the requirements. When no loader matches it will fall
136 |         // back to the "file" loader at the end of the loader list.
137 |         oneOf: [
138 |           // "url" loader works just like "file" loader but it also embeds
139 |           // assets smaller than specified size as data URLs to avoid requests.
140 |           {
141 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
142 |             loader: require.resolve('url-loader'),
143 |             options: {
144 |               limit: 10000,
145 |               name: 'static/media/[name].[hash:8].[ext]',
146 |             },
147 |           },
148 |           {
149 |             test: /\.(js|jsx|mjs)$/,
150 |             include: paths.appSrc,
151 |             loader: require.resolve('babel-loader'),
152 |             options: {
153 |               
154 |               compact: true,
155 |             },
156 |           },
157 |           // Compile .tsx?
158 |           {
159 |             test: /\.(ts|tsx)$/,
160 |             include: paths.appSrc,
161 |             use: [
162 |               {
163 |                 loader: require.resolve('ts-loader'),
164 |                 options: {
165 |                   // disable type checker - we will use it in fork plugin
166 |                   transpileOnly: true,
167 |                   configFile: paths.appTsProdConfig,
168 |                 },
169 |               },
170 |             ],
171 |           },
172 |           // The notation here is somewhat confusing.
173 |           // "postcss" loader applies autoprefixer to our CSS.
174 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
175 |           // "style" loader normally turns CSS into JS modules injecting <style>,
176 |           // but unlike in development configuration, we do something different.
177 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
178 |           // (second argument), then grabs the result CSS and puts it into a
179 |           // separate file in our build process. This way we actually ship
180 |           // a single CSS file in production instead of JS code injecting <style>
181 |           // tags. If you use code splitting, however, any async bundles will still
182 |           // use the "style" loader inside the async code so CSS from them won't be
183 |           // in the main CSS file.
184 |           {
185 |             test: /\.(css|less)$/,
186 |             loader: ExtractTextPlugin.extract(
187 |               Object.assign(
188 |                 {
189 |                   fallback: {
190 |                     loader: require.resolve('style-loader'),
191 |                     options: {
192 |                       hmr: false,
193 |                     },
194 |                   },
195 |                   use: [
196 |                     {
197 |                       loader: require.resolve('css-loader'),
198 |                       options: {
199 |                         importLoaders: 1,
200 |                         minimize: true,
201 |                         sourceMap: shouldUseSourceMap,
202 |                       },
203 |                     },
204 |                     {
205 |                       loader: require.resolve('postcss-loader'),
206 |                       options: {
207 |                         // Necessary for external CSS imports to work
208 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
209 |                         ident: 'postcss',
210 |                         plugins: () => [
211 |                           require('postcss-flexbugs-fixes'),
212 |                           autoprefixer({
213 |                             browsers: [
214 |                               '>1%',
215 |                               'last 4 versions',
216 |                               'Firefox ESR',
217 |                               'not ie < 9', // React doesn't support IE8 anyway
218 |                             ],
219 |                             flexbox: 'no-2009',
220 |                           }),
221 |                         ],
222 |                       },
223 |                     },
224 |                     {
225 |                       loader: require.resolve('less-loader'),
226 |                       options: {
227 |                           javascriptEnabled: true
228 |                       }
229 |                     },
230 |                   ],
231 |                 },
232 |                 extractTextPluginOptions
233 |               )
234 |             ),
235 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
236 |           },
237 |           // "file" loader makes sure assets end up in the `build` folder.
238 |           // When you `import` an asset, you get its filename.
239 |           // This loader doesn't use a "test" so it will catch all modules
240 |           // that fall through the other loaders.
241 |           {
242 |             loader: require.resolve('file-loader'),
243 |             // Exclude `js` files to keep "css" loader working as it injects
244 |             // it's runtime that would otherwise processed through "file" loader.
245 |             // Also exclude `html` and `json` extensions so they get processed
246 |             // by webpacks internal loaders.
247 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
248 |             options: {
249 |               name: 'static/media/[name].[hash:8].[ext]',
250 |             },
251 |           },
252 |           // ** STOP ** Are you adding a new loader?
253 |           // Make sure to add the new loader(s) before the "file" loader.
254 |         ],
255 |       },
256 |     ],
257 |   },
258 |   plugins: [
259 |     // Makes some environment variables available in index.html.
260 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
261 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
262 |     // In production, it will be an empty string unless you specify "homepage"
263 |     // in `package.json`, in which case it will be the pathname of that URL.
264 |     new InterpolateHtmlPlugin(env.raw),
265 |     // Generates an `index.html` file with the <script> injected.
266 |     new HtmlWebpackPlugin({
267 |       inject: true,
268 |       template: paths.appHtml,
269 |       minify: {
270 |         removeComments: true,
271 |         collapseWhitespace: true,
272 |         removeRedundantAttributes: true,
273 |         useShortDoctype: true,
274 |         removeEmptyAttributes: true,
275 |         removeStyleLinkTypeAttributes: true,
276 |         keepClosingSlash: true,
277 |         minifyJS: true,
278 |         minifyCSS: true,
279 |         minifyURLs: true,
280 |       },
281 |     }),
282 |     // Makes some environment variables available to the JS code, for example:
283 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
284 |     // It is absolutely essential that NODE_ENV was set to production here.
285 |     // Otherwise React will be compiled in the very slow development mode.
286 |     new webpack.DefinePlugin(env.stringified),
287 |     // Minify the code.
288 |     new UglifyJsPlugin({
289 |       uglifyOptions: {
290 |         parse: {
291 |           // we want uglify-js to parse ecma 8 code. However we want it to output
292 |           // ecma 5 compliant code, to avoid issues with older browsers, this is
293 |           // whey we put `ecma: 5` to the compress and output section
294 |           // https://github.com/facebook/create-react-app/pull/4234
295 |           ecma: 8,
296 |         },
297 |         compress: {
298 |           ecma: 5,
299 |           warnings: false,
300 |           // Disabled because of an issue with Uglify breaking seemingly valid code:
301 |           // https://github.com/facebook/create-react-app/issues/2376
302 |           // Pending further investigation:
303 |           // https://github.com/mishoo/UglifyJS2/issues/2011
304 |           comparisons: false,
305 |         },
306 |         mangle: {
307 |           safari10: true,
308 |         },
309 |         output: {
310 |           ecma: 5,
311 |           comments: false,
312 |           // Turned on because emoji and regex is not minified properly using default
313 |           // https://github.com/facebook/create-react-app/issues/2488
314 |           ascii_only: true,
315 |         },
316 |       },
317 |       // Use multi-process parallel running to improve the build speed
318 |       // Default number of concurrent runs: os.cpus().length - 1
319 |       parallel: true,
320 |       // Enable file caching
321 |       cache: true,
322 |       sourceMap: shouldUseSourceMap,
323 |     }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
324 |     new ExtractTextPlugin({
325 |       filename: cssFilename,
326 |     }),
327 |     // Generate a manifest file which contains a mapping of all asset filenames
328 |     // to their corresponding output file so that tools can pick it up without
329 |     // having to parse `index.html`.
330 |     new ManifestPlugin({
331 |       fileName: 'asset-manifest.json',
332 |     }),
333 |     // Generate a service worker script that will precache, and keep up to date,
334 |     // the HTML & assets that are part of the Webpack build.
335 |     new SWPrecacheWebpackPlugin({
336 |       // By default, a cache-busting query parameter is appended to requests
337 |       // used to populate the caches, to ensure the responses are fresh.
338 |       // If a URL is already hashed by Webpack, then there is no concern
339 |       // about it being stale, and the cache-busting can be skipped.
340 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
341 |       filename: 'service-worker.js',
342 |       logger(message) {
343 |         if (message.indexOf('Total precache size is') === 0) {
344 |           // This message occurs for every build and is a bit too noisy.
345 |           return;
346 |         }
347 |         if (message.indexOf('Skipping static resource') === 0) {
348 |           // This message obscures real errors so we ignore it.
349 |           // https://github.com/facebookincubator/create-react-app/issues/2612
350 |           return;
351 |         }
352 |         console.log(message);
353 |       },
354 |       minify: true,
355 |       // For unknown URLs, fallback to the index page
356 |       navigateFallback: publicUrl + '/index.html',
357 |       // Ignores URLs starting from /__ (useful for Firebase):
358 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
359 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
360 |       // Don't precache sourcemaps (they're large) and build asset manifest:
361 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
362 |     }),
363 |     // Moment.js is an extremely popular library that bundles large locale files
364 |     // by default due to how Webpack interprets its code. This is a practical
365 |     // solution that requires the user to opt into importing specific locales.
366 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
367 |     // You can remove this if you don't use Moment.js:
368 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
369 |     // Perform type checking and linting in a separate process to speed up compilation
370 |     new ForkTsCheckerWebpackPlugin({
371 |       async: false,
372 |       tsconfig: paths.appTsProdConfig,
373 |       tslint: paths.appTsLint,
374 |     }),
375 |   ],
376 |   // Some libraries import Node modules but don't use them in the browser.
377 |   // Tell Webpack to provide empty mocks for them so importing them works.
378 |   node: {
379 |     dgram: 'empty',
380 |     fs: 'empty',
381 |     net: 'empty',
382 |     tls: 'empty',
383 |     child_process: 'empty',
384 |   },
385 | };
386 | 


--------------------------------------------------------------------------------
/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: !proxy ||
31 |       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 | 


--------------------------------------------------------------------------------
/images.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg'
2 | declare module '*.png'
3 | declare module '*.jpg'
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "antd-demo-ts",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@types/react-loadable": "^5.4.1",
  7 |     "@types/react-redux": "^6.0.6",
  8 |     "@types/react-router-dom": "^4.3.0",
  9 |     "@types/redux": "^3.6.0",
 10 |     "@types/redux-thunk": "^2.1.0",
 11 |     "antd": "^3.9.1",
 12 |     "autoprefixer": "7.1.6",
 13 |     "axios": "^0.18.0",
 14 |     "babel-jest": "^22.1.0",
 15 |     "babel-loader": "^7.1.2",
 16 |     "babel-preset-react-app": "^3.1.1",
 17 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 18 |     "chalk": "1.1.3",
 19 |     "css-loader": "0.28.7",
 20 |     "dotenv": "4.0.0",
 21 |     "dotenv-expand": "4.2.0",
 22 |     "extract-text-webpack-plugin": "3.0.2",
 23 |     "file-loader": "0.11.2",
 24 |     "fork-ts-checker-webpack-plugin": "^0.2.8",
 25 |     "fs-extra": "3.0.1",
 26 |     "html-webpack-plugin": "2.29.0",
 27 |     "jest": "22.4.2",
 28 |     "object-assign": "4.1.1",
 29 |     "postcss-flexbugs-fixes": "3.2.0",
 30 |     "postcss-loader": "2.0.8",
 31 |     "promise": "8.0.1",
 32 |     "raf": "3.4.0",
 33 |     "rc-queue-anim": "^1.6.5",
 34 |     "react": "^16.4.2",
 35 |     "react-dev-utils": "^5.0.1",
 36 |     "react-dom": "^16.4.2",
 37 |     "react-loadable": "^5.5.0",
 38 |     "react-redux": "^5.0.7",
 39 |     "react-router-dom": "^4.3.1",
 40 |     "redux": "^4.0.0",
 41 |     "redux-thunk": "^2.3.0",
 42 |     "resolve": "1.6.0",
 43 |     "source-map-loader": "^0.2.1",
 44 |     "style-loader": "0.19.0",
 45 |     "sw-precache-webpack-plugin": "0.11.4",
 46 |     "ts-jest": "22.0.1",
 47 |     "ts-loader": "^2.3.7",
 48 |     "tsconfig-paths-webpack-plugin": "^2.0.0",
 49 |     "tslint": "5.7.0",
 50 |     "tslint-config-prettier": "1.10.0",
 51 |     "tslint-react": "3.2.0",
 52 |     "uglifyjs-webpack-plugin": "^1.1.8",
 53 |     "url-loader": "0.6.2",
 54 |     "webpack": "3.8.1",
 55 |     "webpack-dev-server": "2.9.4",
 56 |     "webpack-manifest-plugin": "1.3.2",
 57 |     "whatwg-fetch": "2.0.3"
 58 |   },
 59 |   "scripts": {
 60 |     "start": "node scripts/start.js",
 61 |     "build": "node scripts/build.js",
 62 |     "test": "node scripts/test.js --env=jsdom"
 63 |   },
 64 |   "devDependencies": {
 65 |     "@types/jest": "^23.3.1",
 66 |     "@types/node": "^10.9.4",
 67 |     "@types/react": "^16.4.13",
 68 |     "@types/react-dom": "^16.0.7",
 69 |     "babel-plugin-import": "^1.8.0",
 70 |     "less": "^3.8.1",
 71 |     "less-loader": "^4.1.0",
 72 |     "ts-import-plugin": "^1.5.5",
 73 |     "typescript": "^3.0.3"
 74 |   },
 75 |   "jest": {
 76 |     "collectCoverageFrom": [
 77 |       "src/**/*.{js,jsx,ts,tsx}"
 78 |     ],
 79 |     "setupFiles": [
 80 |       "<rootDir>/config/polyfills.js"
 81 |     ],
 82 |     "testMatch": [
 83 |       "<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
 84 |       "<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
 85 |     ],
 86 |     "testEnvironment": "node",
 87 |     "testURL": "http://localhost",
 88 |     "transform": {
 89 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 90 |       "^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
 91 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 92 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 93 |     },
 94 |     "transformIgnorePatterns": [
 95 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
 96 |     ],
 97 |     "moduleNameMapper": {
 98 |       "^react-native$": "react-native-web"
 99 |     },
100 |     "moduleFileExtensions": [
101 |       "web.ts",
102 |       "ts",
103 |       "web.tsx",
104 |       "tsx",
105 |       "web.js",
106 |       "js",
107 |       "web.jsx",
108 |       "jsx",
109 |       "json",
110 |       "node",
111 |       "mjs"
112 |     ],
113 |     "globals": {
114 |       "ts-jest": {
115 |         "tsConfigFile": "D:\\workspaces\\git\\tstest\\antd-demo-ts\\tsconfig.test.json"
116 |       }
117 |     }
118 |   },
119 |   "babel": {
120 |     "presets": [
121 |       "react-app"
122 |     ],
123 |     "plugins": [
124 |       [
125 |         "import",
126 |         {
127 |           "libraryName": "antd",
128 |           "style": true
129 |         }
130 |       ]
131 |     ]
132 |   },
133 |   "proxy": {
134 |     "/mock": {
135 |       "target": "https://www.easy-mock.com",
136 |       "changeOrigin": true,
137 |       "secure": false
138 |     },
139 |     "/orgs": {
140 |       "target": "https://api.github.com",
141 |       "changeOrigin": true,
142 |       "secure": false
143 |     }
144 |   }
145 | }
146 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjscy666/typescript-antd-system/f63b769caca98780dd4046801373cc10a88faa75/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 App</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 = FileSizeReporter.measureFileSizesBeforeBuild;
 30 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 31 | const useYarn = fs.existsSync(paths.yarnLockFile);
 32 | 
 33 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 34 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 35 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 36 | 
 37 | // Warn and crash if required files are missing
 38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 39 |   process.exit(1);
 40 | }
 41 | 
 42 | // First, read the current file sizes in build directory.
 43 | // This lets us display how much they changed later.
 44 | measureFileSizesBeforeBuild(paths.appBuild)
 45 |   .then(previousFileSizes => {
 46 |     // Remove all content but keep the directory so that
 47 |     // if you're in it, you don't end up in Trash
 48 |     fs.emptyDirSync(paths.appBuild);
 49 |     // Merge with the public folder
 50 |     copyPublicFolder();
 51 |     // Start the webpack build
 52 |     return build(previousFileSizes);
 53 |   })
 54 |   .then(
 55 |     ({ stats, previousFileSizes, warnings }) => {
 56 |       if (warnings.length) {
 57 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 58 |         console.log(warnings.join('\n\n'));
 59 |         console.log(
 60 |           '\nSearch for the ' +
 61 |             chalk.underline(chalk.yellow('keywords')) +
 62 |             ' to learn more about each warning.'
 63 |         );
 64 |         console.log(
 65 |           'To ignore, add ' +
 66 |             chalk.cyan('// eslint-disable-next-line') +
 67 |             ' to the line before.\n'
 68 |         );
 69 |       } else {
 70 |         console.log(chalk.green('Compiled successfully.\n'));
 71 |       }
 72 | 
 73 |       console.log('File sizes after gzip:\n');
 74 |       printFileSizesAfterBuild(
 75 |         stats,
 76 |         previousFileSizes,
 77 |         paths.appBuild,
 78 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 79 |         WARN_AFTER_CHUNK_GZIP_SIZE
 80 |       );
 81 |       console.log();
 82 | 
 83 |       const appPackage = require(paths.appPackageJson);
 84 |       const publicUrl = paths.publicUrl;
 85 |       const publicPath = config.output.publicPath;
 86 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 87 |       printHostingInstructions(
 88 |         appPackage,
 89 |         publicUrl,
 90 |         publicPath,
 91 |         buildFolder,
 92 |         useYarn
 93 |       );
 94 |     },
 95 |     err => {
 96 |       console.log(chalk.red('Failed to compile.\n'));
 97 |       printBuildError(err);
 98 |       process.exit(1);
 99 |     }
100 |   );
101 | 
102 | // Create the production build and print the deployment instructions.
103 | function build(previousFileSizes) {
104 |   console.log('Creating an optimized production build...');
105 | 
106 |   let compiler = webpack(config);
107 |   return new Promise((resolve, reject) => {
108 |     compiler.run((err, stats) => {
109 |       if (err) {
110 |         return reject(err);
111 |       }
112 |       const messages = formatWebpackMessages(stats.toJson({}, true));
113 |       if (messages.errors.length) {
114 |         // Only keep the first error. Others are often indicative
115 |         // of the same problem, but confuse the reader with noise.
116 |         if (messages.errors.length > 1) {
117 |           messages.errors.length = 1;
118 |         }
119 |         return reject(new Error(messages.errors.join('\n\n')));
120 |       }
121 |       if (
122 |         process.env.CI &&
123 |         (typeof process.env.CI !== 'string' ||
124 |           process.env.CI.toLowerCase() !== 'false') &&
125 |         messages.warnings.length
126 |       ) {
127 |         console.log(
128 |           chalk.yellow(
129 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
130 |               'Most CI servers set it automatically.\n'
131 |           )
132 |         );
133 |         return reject(new Error(messages.warnings.join('\n\n')));
134 |       }
135 |       return resolve({
136 |         stats,
137 |         previousFileSizes,
138 |         warnings: messages.warnings,
139 |       });
140 |     });
141 |   });
142 | }
143 | 
144 | function copyPublicFolder() {
145 |   fs.copySync(paths.appPublic, paths.appBuild, {
146 |     dereference: true,
147 |     filter: file => file !== paths.appHtml,
148 |   });
149 | }
150 | 


--------------------------------------------------------------------------------
/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, in coverage mode, or explicitly running all tests
22 | if (
23 |   !process.env.CI &&
24 |   argv.indexOf('--coverage') === -1 &&
25 |   argv.indexOf('--watchAll') === -1
26 | ) {
27 |   argv.push('--watch');
28 | }
29 | 
30 | 
31 | jest.run(argv);
32 | 


--------------------------------------------------------------------------------
/src/App/App.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: Administrator
 3 | * @Date:   2018-07-24 14:16:13
 4 | * @Last Modified by:   Administrator
 5 | * @Last Modified time: 2018-07-27 09:26:24
 6 | */
 7 | .ant-layout-sider-children {
 8 |   background-color: #263030;
 9 | }
10 | .logo {
11 |   height: 64px;
12 |   background: url(../img/logo.jpg) no-repeat center center;
13 |   background-size: 100% 100%;
14 | }
15 | .ant-menu.ant-menu-dark .ant-menu-item-selected,
16 | .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
17 |   background-color: #13ae67;
18 | }
19 | .ant-menu-dark .ant-menu-inline.ant-menu-sub {
20 |   background-color: #202929;
21 | }
22 | .ant-menu {
23 |   background-color: #263030;
24 | }
25 | .ant-menu-vertical .ant-menu-item,
26 | .ant-menu-vertical-left .ant-menu-item,
27 | .ant-menu-vertical-right .ant-menu-item,
28 | .ant-menu-inline .ant-menu-item,
29 | .ant-menu-vertical .ant-menu-submenu-title,
30 | .ant-menu-vertical-left .ant-menu-submenu-title,
31 | .ant-menu-vertical-right .ant-menu-submenu-title,
32 | .ant-menu-inline .ant-menu-submenu-title {
33 |   margin-top: 0px;
34 | }
35 | .ant-layout-sider-trigger {
36 |   background-color: #263030;
37 | }
38 | .ant-layout-sider-trigger {
39 |   display: none;
40 | }
41 | .trigger {
42 |   font-size: 18px;
43 |   line-height: 64px;
44 |   padding: 0 24px;
45 |   cursor: pointer;
46 |   transition: color .3s;
47 | }
48 | .trigger:hover {
49 |   color: #1890ff;
50 | }
51 | /*滚动条样式*/
52 | .ant-layout-sider::-webkit-scrollbar {
53 |   /*滚动条整体样式*/
54 |   width: 2px;
55 |   /*高宽分别对应横竖滚动条的尺寸*/
56 |   height: 2px;
57 | }
58 | .ant-layout-sider::-webkit-scrollbar-thumb {
59 |   /*滚动条里面小方块*/
60 |   -webkit-box-shadow: inset 0 0 1px #263030;
61 |   background: #263030;
62 | }
63 | .ant-layout-sider::-webkit-scrollbar-track {
64 |   /*滚动条里面轨道*/
65 |   -webkit-box-shadow: inset 0 0 1px #263030;
66 |   border-radius: 0;
67 |   background: #263030;
68 | }
69 | 


--------------------------------------------------------------------------------
/src/App/App.less:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: Administrator
 3 | * @Date:   2018-07-24 14:16:13
 4 | * @Last Modified by:   Administrator
 5 | * @Last Modified time: 2018-07-27 09:26:24
 6 | */
 7 | .ant-layout-sider-children{
 8 |     background-color: #263030;
 9 | }
10 | .logo {
11 |   height: 64px;
12 |   background: url(../img/logo.jpg) no-repeat center center;
13 |   background-size: 100% 100%;
14 | }
15 | .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
16 |     background-color:#13ae67;
17 | }
18 | .ant-menu-dark .ant-menu-inline.ant-menu-sub{
19 |     background-color: #202929;
20 | }
21 | .ant-menu{
22 |     background-color: #263030;
23 | }
24 | .ant-menu-vertical .ant-menu-item, .ant-menu-vertical-left .ant-menu-item, .ant-menu-vertical-right .ant-menu-item, .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-submenu-title, .ant-menu-vertical-left .ant-menu-submenu-title, .ant-menu-vertical-right .ant-menu-submenu-title, .ant-menu-inline .ant-menu-submenu-title{
25 |     margin-top: 0px;
26 | }
27 | .ant-layout-sider-trigger{
28 |     background-color: #263030;
29 | }
30 | .ant-layout-sider-trigger{
31 |     display: none;
32 | }
33 | 
34 |  .trigger {
35 |   font-size: 18px;
36 |   line-height: 64px;
37 |   padding: 0 24px;
38 |   cursor: pointer;
39 |   transition: color .3s;
40 | }
41 | 
42 |  .trigger:hover {
43 |   color: #1890ff;
44 | }
45 | /*滚动条样式*/
46 | .ant-layout-sider::-webkit-scrollbar {/*滚动条整体样式*/
47 |    width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
48 |    height: 2px;
49 | }
50 | .ant-layout-sider::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
51 |    -webkit-box-shadow: inset 0 0 1px #263030;
52 |    background: #263030;
53 | }
54 | .ant-layout-sider::-webkit-scrollbar-track {/*滚动条里面轨道*/
55 |    -webkit-box-shadow: inset 0 0 1px #263030;
56 |    border-radius: 0;
57 |    background: #263030;
58 | }


--------------------------------------------------------------------------------
/src/App/App.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Layout, Icon } from 'antd';
 3 | import Routes from '../routes';
 4 | import SiderMenus from '../siderMenus';
 5 | // import "antd/dist/antd.less";
 6 | import './App.less';
 7 | 
 8 | interface IState {
 9 |   readonly collapsed: boolean,
10 | }
11 | 
12 | // 暂时只能全局引入less
13 | 
14 | const { Header, Sider, Content } = Layout;
15 | 
16 | class App extends React.Component<{}, IState>{
17 |   public readonly state: IState = {
18 |     collapsed: false,
19 |   };
20 | 
21 |   public toggle = () => {
22 |     this.setState({
23 |       collapsed: !this.state.collapsed,
24 |     });
25 |   }
26 | 
27 |   public render() {
28 |     return (
29 |       <Layout style={{ display: 'flex' }}>
30 |         <Sider
31 |           trigger={null}
32 |           collapsible={true}
33 |           collapsed={this.state.collapsed}
34 |           width={256}
35 |           style={{ height: '100vh', overflow: 'hidden', overflowY: 'auto', backgroundColor: '#263030' }}
36 |         >
37 |           <div className="logo" />
38 |           <SiderMenus theme='dark' mode='inline' />
39 |         </Sider>
40 |         <Layout style={{ flex: 1, paddingTop: '24' }}>
41 |           <Header style={{ background: '#fff', padding: 0, height: '64px', display: 'fixed', left: 0, right: 0}}>
42 |             <Icon
43 |               className="trigger"
44 |               type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
45 |               onClick={this.toggle}
46 |               style={{padding: '23px 24px'}}
47 |             />
48 |           </Header>
49 |           <Content style={{ margin: '0', padding: '24px', background: '#fff', height: 'calc(100vh - 64px)', overflow: 'hidden', overflowY: 'auto' }}>
50 |               <Routes />
51 |           </Content>
52 |         </Layout>
53 |       </Layout>
54 |     );
55 |   }
56 | }
57 | 
58 | // const mapStateToPorps = state => {
59 | //   const { loading } = state.login
60 | //   return {
61 | //     loading
62 | //   }
63 | // };
64 | 
65 | export default App;
66 | 
67 | 


--------------------------------------------------------------------------------
/src/components/index.tsx:
--------------------------------------------------------------------------------
 1 | /*路由组件出口文件*/
 2 | import * as Loadable from 'react-loadable';
 3 | import * as React from "react";
 4 | 
 5 | // const Loading = () => <div>Loading...</div>;
 6 | export const LoadingComponent: React.SFC<Loadable.LoadingComponentProps> = (props) => {
 7 |     if (props.error) {
 8 |       // When the loader has errored
 9 |       return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
10 |     } else if (props.timedOut) {
11 |       // When the loader has taken longer than the timeout
12 |       return <div>Taking a long time... <button onClick={ props.retry }>Retry</button></div>;
13 |     } else if (props.pastDelay) {
14 |       // When the loader has taken longer than the delay
15 |       return <div>Loading...</div>;
16 |     } else {
17 |       // When the loader has just started
18 |       return null;
19 |     }
20 |   }
21 | 
22 | // class MyLoadingComponent extends React.Component<Loadable.LoadingComponentProps>
23 | // {
24 | // 	render()
25 | // 	{
26 | // 		return <div>Loading...</div>;
27 | // 	}
28 | // }
29 | 
30 | 
31 | const BundleBill = Loadable({
32 |     loader: () => import('./testPage/Bill'),
33 |     loading: LoadingComponent,
34 | });
35 | 
36 | const BundleAlex = Loadable({
37 |     loader: () => import('./testPage/Alex'),
38 |     loading: LoadingComponent,
39 | });
40 | 
41 | const BundleTom = Loadable({
42 |     loader: () => import('./testPage/Tom'),
43 |     loading: LoadingComponent,
44 | });
45 | 
46 | const BundleLily = Loadable({
47 |   loader: () => import('./testPage/Lily'),
48 |   loading: LoadingComponent,
49 | });
50 | 
51 | // import BundleBill from './testPage/Bill';
52 | // import BundleAlex from './testPage/Alex';
53 | // import BundleTom from './testPage/Tom';
54 | // import BundleLily from './testPage/Lily';
55 | 
56 | 
57 | export default {
58 |     BundleBill, BundleAlex, BundleTom, BundleLily
59 | }


--------------------------------------------------------------------------------
/src/components/testPage/Alex.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Row, Col, Card, Switch } from 'antd';
 3 | 
 4 | interface IState {
 5 |     readonly animated: boolean,
 6 |     readonly animatedOne: number,
 7 | }
 8 | 
 9 | class Alex extends React.Component<{}, IState> {
10 |     public readonly state: IState = {
11 |         animated: false,
12 |         animatedOne: -1
13 |     };
14 |     public animatedAll = (checked: boolean) => {
15 |         this.setState({ animated: checked });
16 |     };
17 |     public animatedOne = (i: number) => (e: any) => {
18 |         this.setState({ animatedOne: i });
19 |     };
20 |     public animatedOneOver = () => () => {
21 |         this.setState({ animatedOne: -1 });
22 |     };
23 |     public render() {
24 |         const animations = [
25 |             'bounce', 'flash', 'rubberBand', 'shake', 'headShake',
26 |             'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInDown',
27 |             'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutDown', 'bounceOutLeft',
28 |             'bounceOutLeft', 'bounceOutUp', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft',
29 |             'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeOut',
30 |             'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig',
31 |             'fadeOutUp', 'fadeOutUpBig', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY',
32 |             'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft',
33 |             'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
34 |             'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp',
35 |             'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideInDown',
36 |             'slideInLeft', 'slideInRight', 'slideInUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp'
37 |         ];
38 |         return (
39 |             <div className="gutter-example button-demo" key="Alex">
40 |                 <Row className="mb-m">
41 |                     <a className="mr-s">全部动画(单个动画请移动鼠标)</a>
42 |                     <Switch onChange={this.animatedAll} />
43 |                 </Row>
44 |                 <Row gutter={14}>
45 |                     {animations.map((v, i) => (
46 |                         <Col className="gutter-row" md={6} key={i}>
47 |                             <div className="gutter-box">
48 |                                 <Card
49 |                                     className={`${this.state.animated || (this.state.animatedOne === i) ? 'animated' : ''} ${this.state.animated || (this.state.animatedOne === i) ? 'infinite' : ''} ${v}`}
50 |                                     onMouseEnter={this.animatedOne(i)}
51 |                                     onMouseLeave={this.animatedOneOver()}
52 |                                 >
53 |                                     <div className="pa-m text-center">
54 |                                         <h3>{v}</h3>
55 |                                     </div>
56 |                                 </Card>
57 |                             </div>
58 |                         </Col>
59 |                     ))}
60 |                 </Row>
61 |             </div>
62 |         )
63 |     }
64 | }
65 | 
66 | export default Alex;


--------------------------------------------------------------------------------
/src/components/testPage/Bill.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | class Bill extends React.Component<{}, {}> {
 4 | 	public render() {
 5 | 		return (
 6 | 			<div key="Bill">
 7 | 				<ul>
 8 | 					<li>
 9 | 						<span>菜单一</span>
10 | 						<ul>
11 | 							<li>菜单1-1</li>
12 | 							<li>菜单1-2</li>
13 | 							<li>菜单1-3</li>
14 | 							<li>菜单1-4</li>
15 | 						</ul>
16 | 					</li>
17 | 				</ul>
18 | 			</div>
19 | 		)
20 | 	}
21 | }
22 | 
23 | export default Bill;


--------------------------------------------------------------------------------
/src/components/testPage/Lily.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Button } from 'antd';
 3 | 
 4 | class Lily extends React.Component<{}, {}> {
 5 |     public render() {
 6 |         return (
 7 |             <div>
 8 |                 <Button type="primary">Button</Button>
 9 |             </div>
10 |         );
11 |     }
12 | }
13 | 
14 | export default Lily;


--------------------------------------------------------------------------------
/src/components/testPage/Tom.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | class Tom extends React.Component<{}, {}> {
 4 |     public render() {
 5 |         return (
 6 |             <div key="Tom">
 7 |                 <h1>我是Tom</h1>
 8 |             </div>
 9 |         )
10 |     }
11 | }
12 | 
13 | export default Tom;


--------------------------------------------------------------------------------
/src/fetch/index.js:
--------------------------------------------------------------------------------
 1 | import { baseUrl } from '../staticConfig/dev/devConfig'
 2 | const axios = require('axios')
 3 | const qs = require('querystring')
 4 | 
 5 | export const fetchData = async(config) => {
 6 |   let res = null
 7 |   config.url = baseUrl + config.url;
 8 |   if (config.type === 'get') {
 9 |      res = await axios.get(config.url)
10 |      res = res.data
11 |   } else {
12 |     res = await axios.post(config.url, qs.stringify(config.data), {
13 |       headers: {
14 |         'Content-Type': 'application/x-www-form-urlencoded'
15 |       }
16 |     })
17 |     res = res.data
18 |   }
19 |   return res
20 | }


--------------------------------------------------------------------------------
/src/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjscy666/typescript-antd-system/f63b769caca98780dd4046801373cc10a88faa75/src/img/logo.jpg


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import * as ReactDOM from 'react-dom';
 3 | import App from './App/App';
 4 | import registerServiceWorker from './registerServiceWorker';
 5 | import {
 6 | 	HashRouter as Router,
 7 | } from 'react-router-dom';
 8 | import { Provider } from 'react-redux';
 9 | import thunk from 'redux-thunk';
10 | import { createStore, applyMiddleware } from 'redux';
11 | import Login from './login';
12 | import reducer from './redux/reducer';
13 | import { Route, Switch, Redirect } from 'react-router-dom';
14 | 
15 | // redux 注入操作
16 | const middleware = [thunk];
17 | const store = createStore(reducer, applyMiddleware(...middleware));
18 | // console.log(store.getState());
19 | 
20 | ReactDOM.render(
21 | 	<Provider store={store}>
22 | 		<Router>
23 | 			<Switch>
24 | 				{/* <Route exact={true} path="/" render={props => <Redirect to="/Login" push={true} {...props} />} />  */}
25 | 				<Route path="/" exact={true}>
26 | 					<Redirect to='/Login' push={true} />
27 | 				</Route>
28 | 				<Route path="/Login" push={true} component={Login} />
29 | 				<App />
30 | 			</Switch>
31 | 		</Router>
32 | 	</Provider>,
33 | 	document.getElementById('root') as HTMLElement
34 | );
35 | registerServiceWorker();


--------------------------------------------------------------------------------
/src/login/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { bindActionCreators, Dispatch  } from 'redux';
 4 | import { loginStatus, userInfo } from '../redux/actions/login'
 5 | import { login } from '../model/login'
 6 | import { Redirect } from 'react-router-dom';
 7 | import { Form, Icon, Input, Button, message } from 'antd';
 8 | // import { IBaseReActions } from "../redux/reducer/login/base";
 9 | import { IBaseComAction, IOwnstate } from "../redux/actions/base";
10 | 
11 | const FormItem = Form.Item;
12 | 
13 | interface IOwnProps {
14 | 	userName : string;
15 | 	pws: string;
16 | }
17 | 
18 | class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IOwnProps, IOwnstate>{
19 | 	constructor(props: ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IOwnProps) {
20 | 		super(props);
21 | 		this.state = {
22 | 			userName: 'admin',
23 | 			pws: 'mmy123',
24 | 		};
25 | 		this.userChange = this.userChange.bind(this);
26 | 		this.pwsChange = this.pwsChange.bind(this);
27 | 		this.login = this.login.bind(this);
28 | 	}
29 | 	public userChange: React.ReactEventHandler<HTMLInputElement> = (event) => {
30 | 		this.setState({ userName: (event.target as HTMLInputElement).value });
31 | 	}
32 | 	public pwsChange: React.ReactEventHandler<HTMLInputElement> = (event) => {
33 | 		this.setState({ pws: (event.target as HTMLInputElement).value });
34 | 	}
35 | 	public async login() {
36 | 		const res = await login();
37 | 		if (this.state.userName === res.userName && this.state.pws === res.password) {
38 | 			const { loginStatus, userInfo } = this.props;
39 | 			userInfo({ 'username': this.state.userName, 'password': this.state.pws });
40 | 			loginStatus({'loginStatus': true});
41 | 		} else {
42 | 			message.error('用户名或者密码错误');
43 | 		}
44 | 	}
45 | 	public render() {
46 | 		const userName = this.state.userName;
47 | 		const pws = this.state.pws;
48 | 		const { loginStatus } = this.props.login;
49 | 		if (loginStatus) {
50 | 			return <Redirect to={'/User/Tom'} />;
51 | 		}
52 | 		return (
53 | 			<div style={{ width: '280px', position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}>
54 | 				<Form className="login-form">
55 | 					<FormItem>
56 | 						<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" value={userName} onChange={this.userChange} />
57 | 					</FormItem>
58 | 					<FormItem>
59 | 						<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" value={pws} onChange={this.pwsChange} />
60 | 					</FormItem>
61 | 					<FormItem>
62 | 						<Button type="primary" htmlType="submit" className="login-form-button" style={{ width: '100%' }} onClick={this.login}>
63 | 							Login
64 | 	    		    </Button>
65 | 					</FormItem>
66 | 				</Form>
67 | 			</div>
68 | 		);
69 | 	}
70 | }
71 | 
72 | const mapStateToProps = (state: IBaseComAction) => {
73 | 	const { loginStatus, userInfo } = state.login
74 | 	return {
75 | 		login: {
76 | 			loginStatus,
77 | 			userInfo
78 | 		}
79 | 	}
80 | };
81 | const mapDispatchToProps = (dispatch: Dispatch) => ({
82 | 	loginStatus: bindActionCreators(loginStatus, dispatch),
83 | 	userInfo: bindActionCreators(userInfo, dispatch),
84 | });
85 | 
86 | export default connect(mapStateToProps, mapDispatchToProps)(Login);
87 | 


--------------------------------------------------------------------------------
/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/model/login.ts:
--------------------------------------------------------------------------------
1 | import { fetchData } from '../fetch'
2 | 
3 | export const login = async () => {
4 |     const res = await fetchData({
5 |         url: '/login',
6 |         type: 'get'
7 |     })
8 |     return res;
9 | };


--------------------------------------------------------------------------------
/src/redux/actions/base.ts:
--------------------------------------------------------------------------------
 1 | export interface IBaseAction {
 2 |     loginStatus?: boolean;
 3 |     userInfo?: {
 4 |         username: string;
 5 |         password: string;
 6 |     };
 7 |     username?: string;
 8 |     password?: string;
 9 | }
10 | 
11 | export interface IBaseComAction extends IBaseAction {
12 |     login: IBaseAction;
13 | }
14 | 
15 | export interface IOwnstate {
16 |     userName: string;
17 |     pws: string;
18 | }


--------------------------------------------------------------------------------
/src/redux/actions/login.ts:
--------------------------------------------------------------------------------
 1 | import { IBaseAction } from "./base";
 2 | 
 3 | export const userInfo = (data: IBaseAction) => ({
 4 |     type: 'userInfo',
 5 |     data
 6 | })
 7 | export const loginStatus = (data: IBaseAction) => ({
 8 |     type: 'loginStatus',
 9 |     data
10 | })
11 | export const logout = (data: IBaseAction) => ({
12 |     type: 'logout',
13 |     data
14 | })


--------------------------------------------------------------------------------
/src/redux/reducer/index.ts:
--------------------------------------------------------------------------------
1 | import { combineReducers } from "redux";
2 | import login from './login';
3 | 
4 | // 需要放到store的state注册到这里
5 | export default combineReducers({
6 |     login
7 | });


--------------------------------------------------------------------------------
/src/redux/reducer/login/base.ts:
--------------------------------------------------------------------------------
1 | import { IBaseAction } from "../../actions/base";
2 | 
3 | export interface IBaseReActions {
4 |     readonly type: string;
5 |     data: IBaseAction;
6 | };


--------------------------------------------------------------------------------
/src/redux/reducer/login/index.ts:
--------------------------------------------------------------------------------
 1 | import { IBaseReActions } from "./base";
 2 | 
 3 | const username = '';
 4 | const password = '';
 5 | const initState = {
 6 |     loginStatus: false,
 7 |     userInfo: {
 8 |         username,
 9 |         password
10 |     }
11 | }
12 | 
13 | export default function login(state= initState, action: IBaseReActions) {
14 |     const { type, data } = action
15 |     switch (type) {
16 |         case 'userInfo':
17 |             return {
18 |                 ...state,
19 |                 userInfo: data
20 |             }
21 |         case 'loginStatus':
22 |             return {
23 |                 ...state,
24 |                 loginStatus: data
25 |             }
26 |         case 'logout':
27 |             return {
28 |                 ...state,
29 |                 loginStatus: data
30 |             }
31 |         default:
32 |             return { ...state }
33 |     }
34 | }


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


--------------------------------------------------------------------------------
/src/routes/config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     // 菜单相关路由
 3 |     // 规则有子菜单，必须有subs，如果没有子菜单，必须有component
 4 |     menus: [
 5 |         {
 6 |             
 7 |             key: '/User', title: '用户',icon: 'scan',
 8 |             subs: [
 9 |                 { key: '/User/Tom', title: 'Tom', component: 'BundleTom' },
10 |                 { key: '/User/Bill', title: 'Bill', component: 'BundleBill'},
11 |                 { key: '/User/Alex', title: 'Alex', component: 'BundleAlex'}
12 |             ],
13 |         },
14 |         {
15 |             key: '/test', title: 'test',icon: 'scan',
16 |             subs: [
17 |                 { key: '/test/u1', title: 'Lily', component: 'BundleLily' },
18 |                 { key: '/test/u2', title: 'Bill', component: 'BundleBill'},
19 |                 { 
20 |                     key: '/test/u3', title: 'Alex', icon: 'scan', subs: [
21 |                         { key: '/test/u3/d1', title: 'Tom', component: 'BundleAlex' },
22 |                         { key: '/test/u3/d2', title: 'Bill', component: 'BundleBill'},
23 |                     ]
24 |                 }
25 |             ],
26 |         }
27 |     ]
28 |     // others: []  // 非菜单相关路由
29 | }


--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import  * as React from 'react';
 2 | import { Route, Switch } from 'react-router-dom';
 3 | import AllComponents from './../components';
 4 | import routesConfig from './config';
 5 | import { Ir } from '../utils/declare';
 6 | 
 7 | interface Im {
 8 | 	menus: Ir[];
 9 | }
10 | 
11 | export default class CRouter extends React.Component<{}, {}> {
12 | 
13 |     public myCprops = (props: {}, MyComponent: string) => () => {
14 |         return  <MyComponent {...props}/>
15 |     };
16 | 
17 |     public getdatas = (config: Im) => {
18 |         return Object.keys(routesConfig).map(key => {
19 |             return routesConfig[key].map((q: Ir) => {
20 |                 return this.getsubdata(q);
21 |             })
22 |         }
23 |         )
24 |     }
25 |     public getsubdata = (r: Ir)  : any  => {
26 |         if (r.subs) {
27 |             return (r.subs).map(v => this.getsubdata(v))
28 |         } else if (r.component) {
29 |             return this.routeList(r)!;
30 |         } else {
31 |             return  <></>;
32 |         };
33 |     }
34 |     public routeList = (r: Ir) => {
35 |         const MyComponent = r.component && AllComponents[r.component];
36 |         return (
37 |             <Route
38 |                 key={r.key}
39 |                 exact={true}
40 |                 path={r.key}
41 |                 component={this.myCprops(this.props, MyComponent)}
42 |             />
43 |         )
44 |     };
45 |     public render() {
46 |         return (
47 |             <Switch>
48 |             {
49 |                 this.getdatas(routesConfig)
50 |             }
51 |             </Switch>
52 |         )
53 |     }
54 | }


--------------------------------------------------------------------------------
/src/siderMenus/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import routesConfig from '../routes/config';
 3 | import { Menu, Icon } from 'antd';
 4 | import { Link } from 'react-router-dom';
 5 | import { Ir } from '../utils/declare';
 6 | 
 7 | const SubMenu = Menu.SubMenu;
 8 | const Item = Menu.Item;
 9 | const menus = routesConfig.menus;
10 | 
11 | 
12 | interface IOwnProps {
13 | 	theme : string;
14 | 	mode: string;
15 | }
16 | 
17 | export default class SiderMenus extends React.Component<IOwnProps, {}> {
18 |     
19 |     public getdatas = (rr: Ir[]) : JSX.Element[] => {
20 |         return menus.map(r => {
21 |             return (
22 |                 <SubMenu
23 |                     key={r.key}
24 |                     title={
25 |                         <span>
26 |                             {r.icon && <Icon type={r.icon} />}
27 |                             <span className="nav-text">{r.title}</span>
28 |                         </span>
29 |                     }
30 |                 >
31 |                     {r.subs && r.subs.map(v => this.getsubdata(v))}
32 |                 </SubMenu>
33 |             )
34 |         });
35 |     }
36 |     public getsubdata = (r : Ir) : JSX.Element => {
37 |         if (r.subs) {
38 |             return (<SubMenu
39 |                 key={r.key}
40 |                 title={
41 |                     <span>
42 |                         {r.icon && <Icon type={r.icon} />}
43 |                         <span className="nav-text">{r.title}</span>
44 |                     </span>
45 |                 }
46 |             >
47 |                 {r.subs.map(v => this.getsubdata(v))}
48 |             </SubMenu>)
49 |         } else if (r.component) {
50 |             return this.routeList(r)!;
51 |         } else {
52 |             return  <></>;
53 |         };
54 |     }
55 |     public routeList = (r: Ir) : JSX.Element => {
56 |         // 如果key非要用?可选定义，加这句就好啦
57 |         // if (r.key == undefined) return null;
58 |         return (<Item
59 |             key={r.key}
60 |         >
61 |             <Link to={r.key} replace={true}>
62 |                 {r.icon && <Icon type={r.icon} />}
63 |                 <span className="nav-text">{r.title}</span>
64 |             </Link>
65 |         </Item>)
66 |     };
67 |     public render() {
68 |         const res = JSON.parse(JSON.stringify({
69 |             theme: this.props.theme,
70 |             mode: this.props.mode
71 |         }));
72 |         return (
73 |             <Menu {...res}>
74 |                 {this.getdatas(menus)}
75 |             </Menu>
76 |         )
77 |     }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/staticConfig/dev/devConfig.ts:
--------------------------------------------------------------------------------
1 | let mockUrl = '/mock/5b50599e6438da5de019422e/test/1.0';
2 | // let mockUrl = 'https://www.easy-mock.com/mock/5b50599e6438da5de019422e/test/1.0';
3 | // let mockUrl = '/orgs';//后面是get形式 /octokit/repos
4 | let baseUrl = mockUrl;
5 | 
6 | module.exports = {
7 |     baseUrl
8 | }


--------------------------------------------------------------------------------
/src/utils/declare.ts:
--------------------------------------------------------------------------------
1 | export interface Ir {
2 |     key: string;
3 |     subs?: Ir[];
4 |     title?: string;
5 |     scan?: string;
6 |     component?: string|undefined;
7 |     icon?: string|undefined;
8 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "outDir": "build/dist",
 5 |     "module": "esnext",
 6 |     "target": "es5",
 7 |     "lib": [
 8 |       "es6",
 9 |       "dom"
10 |     ],
11 |     "sourceMap": true,
12 |     "allowJs": true,
13 |     "jsx": "react",
14 |     "moduleResolution": "node",
15 |     "rootDir": "src",
16 |     "forceConsistentCasingInFileNames": true,
17 |     "noImplicitReturns": true,
18 |     "noImplicitThis": true,
19 |     "noImplicitAny": true,
20 |     "strictNullChecks": true,
21 |     "suppressImplicitAnyIndexErrors": true,
22 |     "noUnusedLocals": true
23 |   },
24 |   "exclude": [
25 |     "node_modules",
26 |     "build",
27 |     "scripts",
28 |     "acceptance-tests",
29 |     "webpack",
30 |     "jest",
31 |     "src/setupTests.ts"
32 |   ],
33 |   "include": [
34 |     "./src/**/*"
35 |   ],
36 | }


--------------------------------------------------------------------------------
/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json"
3 | }


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "tslint:recommended",
 4 |     "tslint-react",
 5 |     "tslint-config-prettier"
 6 |   ],
 7 |   "linterOptions": {
 8 |     "exclude": [
 9 |       "config/**/*.js",
10 |       "node_modules/**/*.ts",
11 |       "coverage/lcov-report/*.js"
12 |     ]
13 |   },
14 |   "rules": {
15 |     "ordered-imports": false,
16 |     "object-literal-sort-keys": false,
17 |     "member-ordering": false,
18 |     "binary-expression-operand-order": false,
19 |     "no-shadowed-variable": false
20 |   },
21 |   "jsRules": {
22 |     "object-literal-sort-keys": false
23 |   }
24 | }


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