├── .editorconfig ├── .eslintrc ├── .gitignore ├── .roadhogrc ├── .travis.yml ├── CNAME ├── LICENSE ├── README.md ├── deploy_key.enc ├── firebase.config.js ├── gulpfile.js ├── package-lock.json ├── package.json ├── renovate.json ├── scaffolds ├── Da │ └── index.yml ├── ElementUIAdmin │ └── index.yml ├── Library-reservation │ └── index.yml ├── Maple │ └── index.yml ├── React-AntD-PWA │ └── index.yml ├── React-MobX-Ant-Design-ts │ └── index.yml ├── React-SPA │ └── index.yml ├── React-cli │ └── index.yml ├── ReactAntd │ └── index.yml ├── Sword │ └── index.yml ├── VUE2-SPA-Tutorial │ └── index.yml ├── acgnfuns-app │ └── index.yml ├── acgnfuns-mobile │ └── index.yml ├── angular-material-dashboard │ └── index.yml ├── ant-design-boilerplate │ └── index.yml ├── ant-design-pro-plus │ └── index.yml ├── ant-design-pro-vue │ └── index.yml ├── ant-design-pro │ └── index.yml ├── antd-admin-boilerplate │ └── index.yml ├── antd-admin │ └── index.yml ├── antd-auto │ └── index.yml ├── antd-custom │ └── index.yml ├── antd-layout │ └── index.yml ├── antd-pro-concent │ └── index.yml ├── antd-pro-mobx │ └── index.yml ├── antd-redux │ └── index.yml ├── bear-admin │ └── index.yml ├── bird-front │ └── index.yml ├── blog2.x-mux-club │ └── index.yml ├── blog3.x-mux-club │ └── index.yml ├── blogVue │ └── index.yml ├── chat │ └── index.yml ├── create-react-app-antd-mobile-starter │ └── index.yml ├── create-react-app-antd-starter │ └── index.yml ├── create-react-app-antd-typescript-starter │ └── index.yml ├── create-react-app-antd │ └── index.yml ├── create-umi │ └── index.yml ├── d2-admin │ └── index.yml ├── dashboard │ └── index.yml ├── duxianwei-react-spa │ └── index.yml ├── dva-admin │ └── index.yml ├── dva-ant-admin │ └── index.yml ├── dva-antd-admin │ └── index.yml ├── dva-antd-mobile-starter │ └── index.yml ├── dva-antd-starter │ └── index.yml ├── dva-antd-typescript-starter │ └── index.yml ├── dva-boot-admin │ └── index.yml ├── dva-boot │ └── index.yml ├── dva-example-user-dashboard │ └── index.yml ├── dva-hackernews │ └── index.yml ├── dva-umi-mobile │ └── index.yml ├── dva-umi │ └── index.yml ├── electron-antd │ └── index.yml ├── electron-mobx-member │ └── index.yml ├── electron-react-typescript-antd-boilerplate │ └── index.yml ├── emptyd-admin-webpack │ └── index.yml ├── epee-react-admin-ts │ └── index.yml ├── eshop-user │ └── index.yml ├── fanpianAdmin │ └── index.yml ├── feup │ └── index.yml ├── frontend-cli │ └── index.yml ├── generator-chrome-extension │ └── index.yml ├── gt-react-scaffold │ └── index.yml ├── inferno-mobile │ └── index.yml ├── jdf-phone-ui │ └── index.yml ├── kenote-react-admin │ └── index.yml ├── little-a-dashboard │ └── index.yml ├── material-demo │ └── index.yml ├── mk-demo │ └── index.yml ├── mobxSpa │ └── index.yml ├── my-blog │ └── index.yml ├── my-react-app │ └── index.yml ├── myantdpro │ └── index.yml ├── next-antd-scafflod │ └── index.yml ├── next-antd-scaffold │ └── index.yml ├── next-antd │ └── index.yml ├── next-react-mobx-antd-boilerplate │ └── index.yml ├── ng-alain │ └── index.yml ├── parcel-start-kit │ └── index.yml ├── pv-cli │ └── index.yml ├── r2 │ └── index.yml ├── react-admin-template │ └── index.yml ├── react-admin-web │ └── index.yml ├── react-admin │ └── index.yml ├── react-ame-admin │ └── index.yml ├── react-antd-admin-jiangxy │ └── index.yml ├── react-antd-admin │ └── index.yml ├── react-antd-dashboard │ └── index.yml ├── react-antd-demo │ └── index.yml ├── react-antd-dva │ └── index.yml ├── react-antd-multi-tabs-admin │ └── index.yml ├── react-antd-redux-webpack-es6-spa-boilerplate │ └── index.yml ├── react-antd │ └── index.yml ├── react-app-reflux │ └── index.yml ├── react-app │ └── index.yml ├── react-component-lab │ └── index.yml ├── react-frontend-boilerplate │ └── index.yml ├── react-mobx-antd-boilerplate │ └── index.yml ├── react-mobx-antd-spa │ └── index.yml ├── react-mobx-react-router-boilerplate │ └── index.yml ├── react-molin │ └── index.yml ├── react-qs │ └── index.yml ├── react-reactRouter-redux-antd-SPA │ └── index.yml ├── react-redux-antd-okoala │ └── index.yml ├── react-redux-antd-starter │ └── index.yml ├── react-redux-antd │ └── index.yml ├── react-redux-antdesign-webpack-starter │ └── index.yml ├── react-redux-universal │ └── index.yml ├── react-router4-redux-express-webpack4 │ └── index.yml ├── react-scaffold │ └── index.yml ├── react-scaffolding-mobx │ └── index.yml ├── react-scaffolding │ └── index.yml ├── react-start-kit │ └── index.yml ├── react-starter-kit │ └── index.yml ├── react-study │ └── index.yml ├── react-typescript-admin │ └── index.yml ├── react-webpack-boilerplate │ └── index.yml ├── react-webpack-template │ └── index.yml ├── reactSPA │ └── index.yml ├── react_news_site │ └── index.yml ├── saso │ └── index.yml ├── sls-admin │ └── index.yml ├── star-initReact-example │ └── index.yml ├── ts-dva │ └── index.yml ├── ts-react-webpack │ └── index.yml ├── ts_react_mobx │ └── index.yml ├── ttk-app-core │ └── index.yml ├── typerx │ └── index.yml ├── typescript-react-hot-reload │ └── index.yml ├── ui │ └── index.yml ├── umi-antd-mobile │ └── index.yml ├── umi-antd-pro │ └── index.yml ├── v3-admin │ └── index.yml ├── vue-admin │ └── index.yml ├── vue-manage-system │ └── index.yml ├── vue-mobile │ └── index.yml ├── vue-taobao │ └── index.yml ├── vue-vant-template │ └── index.yml ├── vue2-element │ └── index.yml ├── vueScaffold │ └── index.yml ├── wallpaper-app │ └── index.yml ├── want │ └── index.yml ├── webpack4-react-redux-router-antd │ └── index.yml ├── wedding-app │ └── index.yml ├── wwvue-cli │ └── index.yml ├── xinadmin │ └── index.yml └── yukino │ └── index.yml ├── scripts ├── compile.sh ├── deploy.sh └── parse_yaml.sh └── src ├── Layout ├── CommonLayout.js ├── CommonLayout.less └── IntlCommonLayout.js ├── components ├── Contribute │ ├── Finish.js │ ├── Finish.less │ ├── Start.js │ ├── Start.less │ ├── Submit.js │ └── Submit.less ├── ScaffoldItem.js └── ScaffoldItem.less ├── index.html ├── index.js ├── index.less ├── locale ├── en-US.js └── zh-CN.js ├── models ├── auth.js ├── contribute.js └── list.js ├── router.js ├── routes ├── Contribute.js ├── Contribute.less ├── IndexPage.js ├── IndexPage.less ├── ScaffoldPage.js └── ScaffoldPage.less ├── services └── list.js └── utils ├── firebase.js ├── github.js ├── index.js └── request.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "env": { 5 | "browser": true 6 | }, 7 | "rules": { 8 | "camelcase": [0], 9 | "generator-star-spacing": [0], 10 | "consistent-return": [0], 11 | "react/forbid-prop-types": [0], 12 | "react/jsx-filename-extension": [1, { "extensions": [".js"] }], 13 | "global-require": [1], 14 | "import/prefer-default-export": [0], 15 | "react/jsx-no-bind": [0], 16 | "react/prop-types": [0], 17 | "react/prefer-stateless-function": [0], 18 | "no-else-return": [0], 19 | "no-restricted-syntax": [0], 20 | "import/no-extraneous-dependencies": [0], 21 | "no-use-before-define": [0], 22 | "jsx-a11y/no-static-element-interactions": [0], 23 | "jsx-a11y/anchor-is-valid": [0], 24 | "jsx-a11y/click-events-have-key-events": [0], 25 | "no-nested-ternary": [0], 26 | "arrow-body-style": [0], 27 | "import/extensions": [0], 28 | "no-bitwise": [0], 29 | "no-cond-assign": [0], 30 | "import/no-unresolved": [0], 31 | "require-yield": [1], 32 | "function-paren-newline": [0], 33 | "object-curly-newline": [0] 34 | }, 35 | "parserOptions": { 36 | "ecmaFeatures": { 37 | "experimentalObjectRestSpread": true 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # production 7 | /dist 8 | /out 9 | 10 | # gh-pages 11 | /_temp 12 | 13 | # misc 14 | .DS_Store 15 | npm-debug.log* 16 | deploy_key 17 | deploy_key.pub -------------------------------------------------------------------------------- /.roadhogrc: -------------------------------------------------------------------------------- 1 | { 2 | "entry": "src/index.js", 3 | "disableCSSModules": false, 4 | "less": false, 5 | "publicPath": "/", 6 | "autoprefixer": null, 7 | "proxy": null, 8 | "extraBabelPlugins": [ 9 | "transform-runtime", 10 | ["import", { "libraryName": "antd", "style": true }] 11 | ], 12 | "env": { 13 | "development": { 14 | "extraBabelPlugins": [ 15 | "dva-hmr" 16 | ] 17 | } 18 | }, 19 | "theme": { 20 | "@primary-color": "#2DB7F5", 21 | "@font-size-base": "14px", 22 | "@btn-border-radius-base": "100px", 23 | "@btn-border-radius-sm": "100px", 24 | "@body-background": "#FAFAFA", 25 | "@layout-body-background": "#FAFAFA", 26 | "@btn-height-lg": "38px", 27 | "@btn-padding-lg": "0 32px" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: generic # don't install any environment 2 | 3 | before_install: 4 | - chmod +x ./scripts/compile.sh 5 | script: 6 | - | 7 | if [ "$TEST_TYPE" = lint ]; then 8 | npm run lint 9 | elif [ "$TEST_TYPE" = deploy ]; then 10 | travis_wait 3000 bash ./scripts/deploy.sh 11 | fi 12 | env: 13 | global: 14 | - ENCRYPTION_LABEL: "ffda7dbc26ad" 15 | - COMMIT_AUTHOR_EMAIL: "surgesoft@gmail.com" 16 | matrix: 17 | - TEST_TYPE=lint 18 | - TEST_TYPE=deploy 19 | language: node_js 20 | node_js: 21 | - 9 22 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | scaffold.ant.design 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT LICENSE 2 | 3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Scaffold Market 2 | 3 | [![](https://img.shields.io/travis/ant-design/scaffold-market.svg?style=flat-square)](https://travis-ci.org/ant-design/scaffold-market) 4 | 5 | - All Scaffolds: http://scaffold.ant.design/ 6 | - Submit new scaffold: http://scaffold.ant.design/#/contribute 7 | - Ant Design: https://ant.design/ 8 | - Ant Design Pro: https://pro.ant.design/ 9 | 10 | ![](https://user-images.githubusercontent.com/507615/52533582-dd115b00-2d70-11e9-8b73-a2379fae3eb8.png) 11 | 12 | ## Development 13 | 14 | ```bash 15 | $ npm install 16 | $ npm start 17 | ``` 18 | -------------------------------------------------------------------------------- /deploy_key.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/scaffold-market/6f14df5b6a937b602d30e2ddccf3d3d53dc7ef4c/deploy_key.enc -------------------------------------------------------------------------------- /firebase.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apiKey: "AIzaSyDHiny11V-acyhWNRuNADSgg6Xl8vecaUQ", 3 | authDomain: "antdesign-scaffold-market.firebaseapp.com", 4 | databaseURL: "https://antdesign-scaffold-market.firebaseio.com", 5 | storageBucket: "antdesign-scaffold-market.appspot.com", 6 | messagingSenderId: "504911513310" 7 | }; 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var ghpages = require('gh-pages'); 2 | var through = require('through2'); 3 | var gutil = require('gulp-util'); 4 | var beautify = require('gulp-beautify'); 5 | var fs = require('fs'); 6 | var gulp = require('gulp'); 7 | var path = require('path'); 8 | var yaml = require('gulp-yaml'); 9 | 10 | var dist = path.join(__dirname, 'dist'); 11 | var out = path.join(__dirname, 'out'); 12 | 13 | gulp.task('copy', () => gulp.src('dist/**/*').pipe(gulp.dest(out))); 14 | 15 | gulp.task('default', ['listScaffolds', 'copy']); 16 | 17 | function generatorData(fileName) { 18 | const list = []; 19 | let firstFile = null; 20 | function parseAndMerge(file, encode, callback) { 21 | if (!firstFile) { 22 | firstFile = file; 23 | } 24 | try { 25 | const parsed = JSON.parse(file.contents.toString(encode)); 26 | list.push(parsed); 27 | } catch (err) { } 28 | callback(); 29 | } 30 | function endStream() { 31 | const content = JSON.stringify({ list }); 32 | const output = new gutil.File({ 33 | cwd: firstFile.cwd, 34 | base: firstFile.base, 35 | path: path.join(firstFile.base, fileName), 36 | contents: new Buffer(content), 37 | }); 38 | this.emit('data', output); 39 | this.emit('end'); 40 | } 41 | return through.obj(parseAndMerge, endStream); 42 | } 43 | 44 | gulp.task('listScaffolds', () => { 45 | gulp.src(['./scaffolds/**/index.yml']) 46 | .pipe(yaml({ safe: true })) 47 | .pipe(generatorData('list.json')) 48 | .pipe(beautify({ indent_size: 2 })) 49 | .pipe(gulp.dest(out)); 50 | }); 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scaffolds", 3 | "private": true, 4 | "scripts": { 5 | "start": "roadhog server", 6 | "build": "roadhog build", 7 | "lint": "eslint --ext .js src test", 8 | "precommit": "npm run lint" 9 | }, 10 | "dependencies": { 11 | "antd": "^3.13.2", 12 | "axios": "^0.18.0", 13 | "babel-plugin-import": "^1.1.1", 14 | "babel-runtime": "^6.9.2", 15 | "dva-loading": "^2.0.6", 16 | "dva-react-router-3": "^1.2.1", 17 | "firebase": "^3.6.4", 18 | "github-api": "^3.0.0", 19 | "js-yaml": "^3.7.0", 20 | "lodash.groupby": "^4.6.0", 21 | "parse-github-url": "^1.0.0", 22 | "prop-types": "^15.6.2", 23 | "react": "^16.8.0", 24 | "react-disqus-comments": "^1.4.0", 25 | "react-dom": "^16.8.0", 26 | "react-ga": "^2.2.0", 27 | "react-helmet": "^5.0.3", 28 | "react-intl": "^2.2.3", 29 | "react-overdrive": "^0.0.10", 30 | "store": "^2.0.4", 31 | "string-hash": "^1.1.3", 32 | "when": "^3.7.8" 33 | }, 34 | "devDependencies": { 35 | "babel-eslint": "^7.1.1", 36 | "babel-plugin-dva-hmr": "^0.3.2", 37 | "babel-plugin-transform-runtime": "^6.9.0", 38 | "eslint": "^4.8.0", 39 | "eslint-config-airbnb": "^16.0.0", 40 | "eslint-plugin-import": "^2.1.0", 41 | "eslint-plugin-jsx-a11y": "^6.0.2", 42 | "eslint-plugin-react": "^7.0.1", 43 | "expect": "^1.20.2", 44 | "gh-pages": "^0.12.0", 45 | "gulp": "^3.9.1", 46 | "gulp-beautify": "^2.0.1", 47 | "gulp-merge-json": "^1.0.0", 48 | "gulp-util": "^3.0.8", 49 | "gulp-yaml": "^1.0.1", 50 | "husky": "^0.13.2", 51 | "redbox-react": "^1.3.2", 52 | "roadhog": "^0.5.3", 53 | "through2": "^2.0.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /scaffolds/Da/index.yml: -------------------------------------------------------------------------------- 1 | name: Da 2 | git_url: 'git://github.com/liumin1128/CourseManagementSystem.git' 3 | author: liumin1128 4 | description: >- 5 | 这原本是我的毕业设计，做一个后台管理系统，一定程度上解决了某些问题，所以把他拿出来分享给大家。本系统使用基于Dva脚手架和antd框架，我只做了一些优化，大家可以参考下我的文件结构和开发方法。 6 | tags: 7 | - react 8 | - dva 9 | coverPicture: 'https://ucarecdn.com/08b38b68-4a72-4049-89f8-ad79f7944c88/' 10 | readme: No README 11 | deployedAt: 2017-06-29T08:40:23.865Z 12 | -------------------------------------------------------------------------------- /scaffolds/ElementUIAdmin/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/8f1bb68c-2252-478a-b13c-ba9a380ac078/' 2 | name: ElementUIAdmin 3 | git_url: 'git://github.com/xusenlin/ElementUIAdmin2.git' 4 | author: xusenlin 5 | description: 一个干净优雅的Element UI Admin模板 6 | tags: 7 | - vue 8 | - admin 9 | deployedAt: 2020-11-06T12:57:12.217Z 10 | -------------------------------------------------------------------------------- /scaffolds/Library-reservation/index.yml: -------------------------------------------------------------------------------- 1 | name: Library-reservation 2 | git_url: 'git://github.com/MKitty/Library-reservation.git' 3 | author: MKitty 4 | description: 图书馆预约管理系统和小程序扫码预约后台（react写的后台这个版本没有action） 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/dccd6275-8437-4522-9a13-99ab0dcf56dd/' 7 | deployedAt: 2018-10-23T03:52:27.985Z 8 | -------------------------------------------------------------------------------- /scaffolds/React-AntD-PWA/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: React-AntD-PWA 3 | git_url: 'git://github.com/akshaycj/react-antd-starter.git' 4 | author: akshaycj 5 | description: >- 6 | Starter skeleton for ReactJS + Ant Design + React-Router + PWA with 7 | Configurartions and compatibility with CRA 2.0 8 | tags: 9 | - react 10 | - antd 11 | - pwa 12 | - starter 13 | deployedAt: 2020-05-14T19:34:44.182Z 14 | -------------------------------------------------------------------------------- /scaffolds/React-MobX-Ant-Design-ts/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: React-MobX-Ant-Design-ts 3 | git_url: 'git://github.com/idea2app/React-MobX-Ant-Design-ts.git' 4 | author: idea2app 5 | description: 基于 TypeScript、MobX 和 Ant Design 的 React 应用脚手架，且受 WebCell 脚手架的启发。 6 | tags: 7 | - TypeScript 8 | - MobX 9 | - React 10 | - Ant Design 11 | - WebCell 12 | deployedAt: 2024-06-27T18:09:25.762Z 13 | -------------------------------------------------------------------------------- /scaffolds/React-SPA/index.yml: -------------------------------------------------------------------------------- 1 | name: React-SPA 2 | git_url: 'git://github.com/allan2coder/React-SPA.git' 3 | author: allan2coder 4 | description: 基于React redux，适合中大型规模应用开发，注释还算详细，内含ant design 3.x(antd)，fetch接口请求等。 5 | tags: 6 | - react 7 | - redux 8 | - antd 9 | coverPicture: 'https://ucarecdn.com/554a9eb8-fecb-45ea-9c5d-ba8b7eed8759/' 10 | readme: > 11 | # React-app（使用过程碰到问题请随时提 issues） 12 | 13 | 14 | This project was bootstrapped with Create React App.(注：该项目同样适合移动端) 15 | 16 | 17 | * React+Redux+Fetch+es6+Ant Design 3.x 18 | 19 | * Mock 20 | 21 | * eslint 22 | 23 | 24 | 25 | ## ScreenShots 26 | 27 | 28 | ![image](https://raw.githubusercontent.com/allan2coder/React-SPA/master/screenshot/login.png) 29 | 30 | 31 | ![image](https://raw.githubusercontent.com/allan2coder/React-SPA/master/screenshot/main.png) 32 | 33 | 34 | ![image](https://raw.githubusercontent.com/allan2coder/React-SPA/master/screenshot/redux_devTools.png) 35 | 36 | 37 | 38 | ## Development 39 | 40 | 41 | * 环境准备妥当之后，把项目 clone 下来，切换到对应分支。安装项目依赖： 42 | 43 | 44 | ``` 45 | 46 | git clone https://github.com/allan2coder/React-SPA.git 47 | 48 | cd React-SPA 49 | 50 | npm install 51 | 52 | ``` 53 | 54 | 55 | * 启动项目(mock 也会同时开启,这里还没开启) 56 | 57 | 58 | ``` 59 | 60 | // 此命令同时执行： npm run dev和npm run server(开启mock服务，代理到远程mock数据并跨域) 61 | 62 | npm start 63 | 64 | ``` 65 | 66 | 67 | * 打包项目 68 | 69 | 70 | ``` 71 | 72 | npm run build 73 | 74 | ``` 75 | 76 | 77 | * 发布到 gh-pages（线上分支名称） 78 | 79 | 80 | ``` 81 | 82 | git subtree push --prefix=build origin gh-pages // build完提交静态资源到gh-pages分支发布 83 | 84 | ``` 85 | 86 | 87 | 88 | ## Why Redux 89 | 90 | 91 | ![image](https://raw.githubusercontent.com/allan2coder/React-SPA/master/screenshot/why-redux.jpg) 92 | 93 | 94 | ## Code Standard： 95 | 96 | 97 | #### 一、接口相关 98 | 99 | 100 | * 接口地址统一存放 src/app/config 101 | 102 | * 使用的是 whatwg-fetch，然后在此基础上埋了一些方法，用于处理一些后端返回的东西。（数据层／业务层分离） 103 | 104 | * state 状态存储： 105 | * 组建内部 state 就写内部; 106 | * 需要共享的 state 用 redux 存 store 107 | 108 | ``` 109 | 110 | import cFetch from '../../utils/cFetch'; 111 | 112 | cFetch(‘url’, { method: 'POST', body: formData }) 113 | .then(res => { 114 | // write code 115 | }) 116 | ``` 117 | 118 | 119 | Or 120 | 121 | 122 | ``` 123 | 124 | import { fetchInfoUrl } from '../../actions/yourPath/'; 125 | 126 | 127 | ... 128 | 129 | 130 | const mapDispatchToProps = (dispatch) => ({ 131 | actions: bindActionCreators({ 132 | fetchInfoUrl 133 | }, dispatch) 134 | }); 135 | 136 | 137 | ... 138 | 139 | 140 | componentWillMount() { 141 | this.props.actions.fetchInfoUrl(); 142 | } 143 | 144 | ``` 145 | 146 | 147 | * 请求接口配置文件在 `script/server.js` 中 148 | 149 | 150 | ``` 151 | 152 | // mock数据入口 153 | 154 | // 可以配合Mogodb, 开启服务后配置下面的host指向mock服务器的host 155 | 156 | yield proxy( 157 | { 158 | host: 'http://localhost:2016/', 159 | match: /(\/路径含有的某个关键词\/)/ 160 | } 161 | ); 162 | ``` 163 | 164 | 165 | ## Reference 166 | 167 | 168 | * Ant Design of React [地址]https://ant.design/docs/react/introduce-cn 169 | 170 | * Create-react-app [地址]https://github.com/facebookincubator/create-react-app 171 | 172 | * How to perform common tasks 173 | [地址]https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder 174 | deployedAt: 2021-10-20T13:31:26.248Z 175 | -------------------------------------------------------------------------------- /scaffolds/React-cli/index.yml: -------------------------------------------------------------------------------- 1 | name: React-cli 2 | git_url: 'git://github.com/tuiche000/React-cli.git' 3 | author: tuiche000 4 | description: 基于React和antd的脚手架 5 | tags: 6 | - antd 7 | - react 8 | - redux 9 | - admin 10 | - webpack 11 | coverPicture: 'https://ucarecdn.com/4c3c91b6-6f1d-4ad8-87bd-7cf675de16b6/' 12 | deployedAt: 2018-12-03T08:59:48.490Z 13 | -------------------------------------------------------------------------------- /scaffolds/ReactAntd/index.yml: -------------------------------------------------------------------------------- 1 | name: ReactAntd 2 | git_url: 'git://github.com/2425358736/ReactAntd.git' 3 | author: '2425358736' 4 | description: React + Antd（阿里组件库） 基于阿里dva官方脚本架 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/c79a4113-5d91-4341-83cd-d89df86e276a/' 9 | readme: | 10 | # ReactAntd 11 | React+ Antd（阿里组件库） 12 | deployedAt: 2017-09-19T06:59:28.213Z 13 | -------------------------------------------------------------------------------- /scaffolds/Sword/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/fa45f531-e1c6-40b7-aaab-43949e17165d/' 2 | name: Sword 3 | git_url: 'git://github.com/chillzhuang/Sword.git' 4 | author: chillzhuang 5 | description: 'SpringBlade前端UI项目，基于react 、ant design、dva、umi，用于快速构建系统中后台业务。 ' 6 | tags: [] 7 | deployedAt: 2019-03-18T06:36:20.772Z 8 | -------------------------------------------------------------------------------- /scaffolds/VUE2-SPA-Tutorial/index.yml: -------------------------------------------------------------------------------- 1 | name: VUE2-SPA-Tutorial 2 | git_url: 'git://github.com/allan2coder/VUE2-SPA-Tutorial.git' 3 | author: allan2coder 4 | description: 'Vue2.x, Vue-Router, axios, webpack( 剩下的让你自由发挥,注释还算详细！含有组件通信、ajax等)' 5 | tags: 6 | - Vue 7 | - axios 8 | - SPA 9 | coverPicture: 'https://ucarecdn.com/d8354afd-6eb1-47b7-9fc1-adae18f6e19d/' 10 | readme: > 11 | # Vue2-SPA 12 | 13 | > A Vue.js project with axios/vue-router/webpack 14 | 15 | 16 | 17 | ## Live Demo 18 | 19 | The live demo can be found in 20 | [https://allan2coder.github.io/VUE2-SPA-Tutorial/](https://allan2coder.github.io/VUE2-SPA-Tutorial/) 21 | (移动端，打开浏览器开发者工具并调到手机窗口浏览。注：该项目同时适合PC端) 22 | 23 | 24 | 25 | ## How to use 26 | 27 | You should clone the repo and install the dependencies, and then npm 28 | start.That is all. 29 | 30 | 31 | ```bash 32 | 33 | $ git clone https://github.com/allan2coder/VUE2-SPA-Tutorial.git 34 | 35 | $ cd VUE2-SPA-Tutorial 36 | 37 | $ npm install 38 | 39 | ``` 40 | 41 | Then launch the project app. 42 | 43 | 44 | ```bash 45 | 46 | $ npm start 47 | 48 | ``` 49 | 50 | 51 | You should see a new browser tap opening and a page of 'index.html' in 52 | http://localhost:8080. 53 | 54 | 55 | ## How to build the static files 56 | 57 | 58 | ``` bash 59 | 60 | npm run build 61 | 62 | ``` 63 | 64 | 65 | ## [Lifecycle](http://www.jianshu.com/p/e9f884b6ba6c) 66 | 67 | ![image](https://raw.githubusercontent.com/allan2coder/VUE2-SPA-Tutorial/master/screenShot/lifecycle.png) 68 | 69 | 70 | 71 | ## Router 72 | 73 | 74 | HTML 75 | 76 | ``` bash 77 | 78 | 79 | import Vue from 'vue' 80 | 81 | import VueRouter from 'vue-router' 82 | 83 | 84 | 97 | 98 | 99 | or 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
108 |

109 | Go to Foo 110 | Go to Bar 111 |

112 | 113 |
114 | 115 | ``` 116 | 117 | 118 | JavaScript 119 | 120 | ``` bash 121 | 122 | 123 | // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 vue.use(vuerouter) 124 | 125 | 126 | // 1. 定义（路由）组件。 127 | 128 | // 可以从其他文件 import 进来 129 | 130 | const Foo = { template: '
foo
' } 131 | 132 | const Bar = { template: '
bar
' } 133 | 134 | 135 | // 2. 定义路由 136 | 137 | // 每个路由应该映射一个组件。 其中"component" 可以是 138 | 139 | // 通过 Vue.extend() 创建的组件构造器， 140 | 141 | // 或者，只是一个组件配置对象。 142 | 143 | const routes = [ 144 | { path: '/foo', component: Foo }, 145 | { path: '/bar', component: Bar } 146 | ] 147 | 148 | 149 | // 3. 创建 router 实例，然后传 `routes` 配置 150 | 151 | // 你还可以传别的配置参数, 不过先这么简单着吧。 152 | 153 | const router = new VueRouter({ 154 | routes // （缩写）相当于 routes: routes 155 | }) 156 | 157 | 158 | // 4. 创建和挂载根实例。 159 | 160 | // 记得要通过 router 配置参数注入路由， 161 | 162 | // 从而让整个应用都有路由功能 163 | 164 | const app = new Vue({ 165 | router 166 | }).$mount('#app') 167 | 168 | 169 | // 现在，应用已经启动了！ 170 | 171 | ``` 172 | 173 | 174 | ### 生产环境要注意的地方： 175 | 176 | 177 | > 178 | 1、生产环境下若项目不是放在服务器的根目录下会访问不到静态资源，此时，你只需要修改下config文件夹内index.js的build中的assetsPublicPath即可 179 | 180 | 181 | ``` 182 | 183 | before： 184 | 185 | assetsPublicPath: '/', 186 | 187 | ``` 188 | 189 | ``` 190 | 191 | after: 192 | 193 | assetsPublicPath: '/wx/otherPath/static', 194 | 195 | ``` 196 | 197 | 198 | > 2、在写静态资源的时候最好使用相对路径，如： 199 | 200 | 201 | ``` 202 | 203 | error: 204 | 205 | background: url(../assets/img/icon.png); 206 | 207 | ``` 208 | 209 | ``` 210 | 211 | right: 212 | 213 | background: url(./../assets/img/icon.png); 214 | 215 | ``` 216 | 217 | 218 | 219 | ## Other SPA(其他单页) 220 | 221 | - [React.js 2.x](https://github.com/allan2coder/React-SPA) :fire: :fire: 222 | :fire: 223 | 224 | - [Angularjs 2.x](https://github.com/allan2coder/Angular2-SPA) 225 | 226 | 227 | 228 | # Reference Articles 229 | 230 | * [Vue-Router](http://router.vuejs.org/zh-cn/essentials/getting-started.html) 231 | 232 | * [ECMAScript 6入门](http://es6.ruanyifeng.com/) 233 | 234 | * [Webpack 入门指迷](https://segmentfault.com/a/1190000002551952) 235 | 236 | * [webpack使用优化](https://github.com/lcxfs1991/blog/issues/2) 237 | 238 | * [vue guide](http://vuejs-templates.github.io/webpack/) 239 | 240 | * [docs for vue-loader](http://vuejs.github.io/vue-loader) 241 | deployedAt: 2018-03-03T15:35:05.420Z 242 | -------------------------------------------------------------------------------- /scaffolds/acgnfuns-app/index.yml: -------------------------------------------------------------------------------- 1 | name: acgnfuns-app 2 | git_url: 'git://github.com/sppsun/acgnfuns-app.git' 3 | author: sppsun 4 | description: 'A react native app based on expo, dva, etc.' 5 | tags: 6 | - react-native 7 | - expo 8 | - dva 9 | - react-native-elements 10 | coverPicture: 'https://ucarecdn.com/d6f0e87b-a2a5-4226-84e6-639cb08fc0ab/' 11 | deployedAt: 2019-02-02T06:30:08.290Z 12 | -------------------------------------------------------------------------------- /scaffolds/acgnfuns-mobile/index.yml: -------------------------------------------------------------------------------- 1 | name: acgnfuns-mobile 2 | git_url: 'git://github.com/sppsun/acgnfuns-mobile.git' 3 | author: sppsun 4 | description: 'A mobile app based on react, antd-mobile, umi, etc.' 5 | tags: 6 | - react 7 | - antd-mobile 8 | - umi 9 | - mock 10 | coverPicture: 'https://ucarecdn.com/a8be595b-2a26-4cfa-ba96-995f4e2a3619/' 11 | deployedAt: 2019-02-02T06:55:18.311Z 12 | -------------------------------------------------------------------------------- /scaffolds/angular-material-dashboard/index.yml: -------------------------------------------------------------------------------- 1 | name: angular-material-dashboard 2 | git_url: 'git://github.com/wangdicoder/angular-material-dashboard.git' 3 | author: wangdicoder 4 | description: a material-design dashboard by using angular 5 | tags: 6 | - angular 7 | - material design 8 | - dashboard 9 | coverPicture: 'https://ucarecdn.com/d69daca4-550d-485c-b297-d93323a5bdbe/' 10 | readme: > 11 | # Angular2 Material Dashboard Pro 12 | 13 | 14 | Material-design Dashboard 15 | 16 | 17 | ## How to run it 18 | 19 | 20 | **- please ensure you have installed angular cli, otherwise `npm install -g 21 | @angular/cli`** 22 | 23 | 24 | 1. git clone https://github.com/wangdicoder/angular-material-dashboard 25 | 26 | 2. cd angular-material-dashboard 27 | 28 | 3. npm install 29 | 30 | 4. ng serve -o (it will automatically open localhost:4200) 31 | 32 | 33 | ## Further Plan 34 | 35 | - [ ] Add Wizard Component 36 | 37 | - [ ] Responsive Sidebar 38 | 39 | - [ ] Consolidate form elements, like switch 40 | 41 | 42 | ## Screenshot 43 | 44 | 45 | ### Dashboard 46 | 47 | 48 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/dashboard.png) 49 | 50 | 51 | ### Login 52 | 53 | 54 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/login.png) 55 | 56 | 57 | ### Register 58 | 59 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/register.png) 60 | 61 | 62 | ### Lock 63 | 64 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/lock.png) 65 | 66 | 67 | ### User Profile 68 | 69 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/profile.png) 70 | 71 | 72 | ### Sweet Alert 73 | 74 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/sweetalert.gif) 75 | 76 | 77 | ### Notification 78 | 79 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/notification.gif) 80 | 81 | 82 | ### Settings 83 | 84 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/settings.gif) 85 | 86 | 87 | ### Table 88 | 89 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/table.png) 90 | 91 | 92 | ### Price 93 | 94 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/price.png) 95 | 96 | 97 | ### Panels 98 | 99 | ![](https://github.com/wangdicoder/angular2-material-dashboard-pro/raw/master/screenshot/panel.png) 100 | 101 | 102 | ## Acknowledge 103 | 104 | 105 | - [Creative Tim](https://github.com/creativetimofficial) 106 | 107 | - [Sweet Alert 2](https://github.com/limonte/sweetalert2) 108 | 109 | - [Bootstrap Notify](http://bootstrap-notify.remabledesigns.com) 110 | 111 | 112 | ## License 113 | 114 | 115 | MIT 116 | deployedAt: 2017-07-14T05:42:30.495Z 117 | -------------------------------------------------------------------------------- /scaffolds/ant-design-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: ant-design-boilerplate 2 | git_url: 'git://github.com/espinacs/ant-design-boilerplate.git' 3 | author: espinacs 4 | description: ES6 Ant-Design React boilerplate 5 | tags: [] 6 | coverPicture: null 7 | readme: "# ES6 React Ant Design boilerplate using Webpack\r\n\r\n[![Travis](https://img.shields.io/travis/KleoPetroff/react-webpack-boilerplate/master.svg?style=flat-square)](https://github.com/espinacs/ant-design-boilerplate) \r\n\r\nJust and example of ant-design working in React 16: \r\n\r\n\r\n## Starting the dev server\r\n\r\nMake sure you have the latest Stable or LTS version of Node.js installed.\r\n\r\n1. `git clone https://github.com/espinacs/ant-design-boilerplate`\r\n2. Run `npm install` or `yarn install`\r\n3. Start the dev server using `npm start`\r\n3. Open [http://localhost:8080](http://localhost:8080)\r\n\r\n## Available Commands\r\n\r\n- `npm start` - start the dev server\r\n- `npm clean` - delete the dist folder\r\n- `npm run production` - create a production ready build in `dist` folder\r\n- `npm run lint` - execute an eslint check\r\n- `npm test` - run all tests\r\n- `npm run test:watch` - run all tests in watch mode\r\n- `npm run coverage` - generate code coverage report in the `coverage` folder\r\n\r\nAlso, precommit and prepush are both enabled to check all the code is linted and tested.\r\n\r\n## About the architecture\r\n\r\nAlthough this application is really simple (just fetch data, list and filter it) it has a pretty complete architecture, as detailed:\r\n\r\n#### REACT - View Rendering\r\n\r\n[React](https://reactjs.org/) is just the way to display the stored info. Mainly, there's a Main container that dispatches both fetch and filtering events, and at the same times renders the SearchBar (self component) and the Ant Desing Table\r\n\r\n#### REDUX-SAGA - Fetching Data\r\n\r\n[Redux-Saga](https://github.com/redux-saga/redux-saga) is the agent dedicated to fetch data from the server, and dispatches the convenient Redux events with fetched data or errors.\r\n\r\nThis is only a layer that could be changed, for example, by an Apollo GraphQL interface.\r\n\r\n#### REDUX - State Management\r\n\r\n[Redux](https://github.com/reactjs/redux) stores part of the state of the application (a part from the one that each component/containers handles for itself).\r\n\r\n#### RESELECT - Serving Data\r\n\r\nComponents are not subscribed directly to the Redux state. Instead, they only get data from the Redux state through [Reselect](https://github.com/reactjs/reselect) selectors.\r\n\r\nThis way, components/containers and redux are absolutely decoupled, and any other State Manager (Flux, for example) could be used, like any other components library (Vue.js, for example)\r\n\r\n#### Ant Design - Stlyed Components Library\r\n\r\n[Ant Design](https://ant.design/) Gives to the project a small style boost!\r\n\r\n## Code Coverage\r\n\r\nThe project is using the Jest Code Coverage tool. The reports are generated by running `npm run coverage`. All configurations are located in `package.json`, inside the `jest` object.\r\n\r\nThe coverage report consists of an HTML reporter, which can be viewed in the browser and some helper coverage files like the coverage json and xml file.\r\n\r\n## Production code\r\n\r\nRun `npm run production`. The production-ready code will be located under `dist` folder.\r\n\r\n## Licence\r\n\r\n_ant-design-boilerplate_ is available under MIT.\r\n" 8 | deployedAt: 2018-03-24T07:04:55.364Z 9 | -------------------------------------------------------------------------------- /scaffolds/ant-design-pro-plus/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/8a1d4569-57a8-4c16-b58e-041931433c62/' 2 | name: ant-design-pro-plus 3 | git_url: 'git://github.com/theprimone/ant-design-pro-plus.git' 4 | author: theprimone 5 | description: ✨ 基于 ant-design-pro 做一些微小的工作。 6 | tags: 7 | - ant-design-pro 8 | - tabs 9 | deployedAt: 2021-06-30T06:33:07.275Z 10 | -------------------------------------------------------------------------------- /scaffolds/ant-design-pro-vue/index.yml: -------------------------------------------------------------------------------- 1 | name: ant-design-pro-vue 2 | git_url: 'git://github.com/sendya/ant-design-pro-vue.git' 3 | author: sendya 4 | description: "\U0001F468\U0001F3FB‍\U0001F4BB\U0001F469\U0001F3FB‍\U0001F4BB Use Ant Design Vue like a Pro! Demo: https://pro.loacg.com" 5 | tags: 6 | - vue 7 | - antd 8 | - antd-pro 9 | coverPicture: 'https://ucarecdn.com/3538f9ed-1b3a-4817-9f5e-2f880568fd37/' 10 | deployedAt: 2018-11-30T09:35:13.642Z 11 | -------------------------------------------------------------------------------- /scaffolds/ant-design-pro/index.yml: -------------------------------------------------------------------------------- 1 | name: ant-design-pro 2 | git_url: 'git://github.com/ant-design/ant-design-pro.git' 3 | author: ant-design 4 | description: "\U0001F47B\U0001F383 An out-of-box UI solution for enterprise applications" 5 | tags: 6 | - antd 7 | - react 8 | - dva 9 | coverPicture: 'https://ucarecdn.com/1e822d77-1729-452a-93bc-48be6cc2c9b3/' 10 | readme: > 11 | 简体中文 | [English](./README.en-US.md) 12 | 13 | 14 | # Ant Design Pro 15 | 16 | 17 | [![](https://img.shields.io/travis/ant-design/ant-design-pro.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-pro) 18 | [![Gitter](https://badges.gitter.im/ant-design/ant-design-pro.svg)](https://gitter.im/ant-design/ant-design-pro?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 19 | 20 | 21 | 开箱即用的中台前端/设计解决方案。 22 | 23 | 24 | ![](https://gw.alipayobjects.com/zos/rmsportal/xEdBqwSzvoSapmnSnYjU.png) 25 | 26 | 27 | - 预览：http://preview.pro.ant.design 28 | 29 | - 首页：http://pro.ant.design 30 | 31 | - 使用文档：http://pro.ant.design/docs/getting-started 32 | 33 | - 常见问题：http://pro.ant.design/docs/faq 34 | 35 | 36 | ## 特性 37 | 38 | 39 | - :gem: **优雅美观**：基于 Ant Design 体系精心设计 40 | 41 | - :triangular_ruler: **常见设计模式**：提炼自中后台应用的典型页面和场景 42 | 43 | - :rocket: **最新技术栈**：使用 React/dva/antd 等前端前沿技术开发 44 | 45 | - :iphone: **响应式**：针对不同屏幕大小设计 46 | 47 | - :art: **主题**：可配置的主题满足多样化的品牌诉求 48 | 49 | - :globe_with_meridians: **国际化**：内建业界通用的国际化方案 50 | 51 | - :gear: **最佳实践**：良好的工程实践助您持续产出高质量代码 52 | 53 | - :1234: **Mock 数据**：实用的本地数据调试方案 54 | 55 | - :white_check_mark: **UI 测试**：自动化测试保障前端产品质量 56 | 57 | 58 | ## 模板 59 | 60 | 61 | ``` 62 | 63 | - Dashboard 64 | - 分析页 65 | - 监控页 66 | - 工作台 67 | - 表单页 68 | - 基础表单页 69 | - 分步表单页 70 | - 高级表单页 71 | - 列表页 72 | - 查询表格 73 | - 标准列表 74 | - 卡片列表 75 | - 搜索列表（项目/应用/文章） 76 | - 详情页 77 | - 基础详情页 78 | - 高级详情页 79 | - 结果 80 | - 成功页 81 | - 失败页 82 | - 异常 83 | - 403 无权限 84 | - 404 找不到 85 | - 500 服务器出错 86 | - 帐户 87 | - 登录 88 | - 注册 89 | - 注册成功 90 | ``` 91 | 92 | 93 | ## 使用 94 | 95 | 96 | ```bash 97 | 98 | $ git clone git@github.com:ant-design/ant-design-pro --depth=1 99 | 100 | $ cd ant-design-pro 101 | 102 | $ npm install 103 | 104 | $ npm start # 访问 http://localhost:8000 105 | 106 | ``` 107 | 108 | 109 | 或者你可以使用集成化的 110 | [ant-design-pro-cli](https://github.com/ant-design/ant-design-pro-cli) 工具。 111 | 112 | 113 | 更多信息请参考 [使用文档](http://pro.ant.design/docs/getting-started)。 114 | 115 | 116 | ## 兼容性 117 | 118 | 119 | 现代浏览器及 IE11。 120 | 121 | 122 | ## 参与贡献 123 | 124 | 125 | 我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :smiley:： 126 | 127 | 128 | - 在你的公司或个人项目中使用 Ant Design Pro。 129 | 130 | - 通过 [Issue](http://github.com/ant-design/ant-design-pro/issues) 报告 bug 或进行咨询。 131 | 132 | - 提交 [Pull Request](http://github.com/ant-design/ant-design-pro/pulls) 改进 Pro 133 | 的代码。 134 | deployedAt: 2018-08-18T18:27:11.512Z 135 | -------------------------------------------------------------------------------- /scaffolds/antd-admin-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: antd-admin-boilerplate 2 | git_url: 'git://github.com/myqianlan/antd-admin-boilerplate.git' 3 | author: myqianlan 4 | description: 以 antd 为基础组件构建的一套中后台管理系统的基本架构模板 5 | tags: 6 | - antd 7 | - react 8 | coverPicture: null 9 | readme: | 10 | # antd-admin-boilerplate 11 | 以 antd 为基础组件构建的一套中后台管理系统的基本架构模板 12 | 13 | ## 预览 14 | 15 | http://myqianlan.com/antd-admin-boilerplate/dist/#/login 16 | 17 | 账户密码随便输入即可 18 | 19 | ## 目的 20 | 21 | 使用 antd 和 react 来构建中后台系统，从上家公司开始，已经用来构建过三四个系统了，这个算是沉淀下来的一些东西，放出来给大家参考参考吧。 22 | 23 | ## 技术栈 24 | 25 | - react 26 | - antd 27 | - webpack 28 | - es6(babel) 29 | 30 | ## 兼容性 31 | 32 | 原则上支持 IE9+ 及现代浏览器 33 | 34 | ## 环境 35 | 36 | - node 4 LTS 版本 37 | - npm 建议 3+ 38 | - webpack 1+ 39 | 40 | > npm 建议使用cnpm, 通过设置 alias 的方式;(在私有npm还没搭建起来的时候) 41 | 42 | ## 开发 43 | 44 | ```bash 45 | 46 | cpm install -g webpack webpack-dev-server 47 | 48 | cnpm install 49 | 50 | npm run dev 51 | 52 | ``` 53 | ### 设置 api 代理 54 | 55 | 可在 webpack.dev.config.js 里面的 devServer 配置项设置 api 代理 56 | 57 | ## 其他 58 | 59 | 其他功能问题请阅读本项目源代码，或者提 issue 60 | 61 | ## 鸣谢 62 | 63 | 其中很多代码参考了前同事范峻植的最初版本，在此表示感谢。 64 | 65 | ## License 66 | 67 | MIT 68 | deployedAt: 2017-05-10T09:56:45.651Z 69 | -------------------------------------------------------------------------------- /scaffolds/antd-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: antd-admin 2 | git_url: 'git://github.com/zuiidea/antd-admin.git' 3 | author: zuiidea 4 | description: A admin dashboard application demo built upon Ant Design and Dva.js 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/3ba3280c-a0c0-4a8b-a2e3-ba38148121b6/' 9 | readme: "# Antd Admin\n\n[![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)\n[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)\n[![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)\n\n[![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)\n[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)\n\n演示地址 \n\n备用地址 \n\n\n## 特性\n\n- 基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践\n- 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发\n- 基于Antd UI 设计语言，提供后台管理系统常见使用场景\n- 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载\n- 浅度响应式设计\n\n## 注意\n如果使用到roadhog，且出现接口404\n- 保证`package.json`里没有`roadhog`\n- 删除`node_modules`\n- `npm i`\n- `npm i roadhog@0.6.0-beta.3 -g`\n\n## 更新日志\n\n### 4.2\n`2017-04-28`\n\n- \_ 修改user相关API使用`Restful`风格\n- \_ 增加user页面多条件查询[#266](https://github.com/zuiidea/antd-admin/issues/226)\n- \_ 修复菜单默认高亮[#201](https://github.com/zuiidea/antd-admin/issues/201)\n\n`2017-04-21`\n\n- \_ 重写Menu，Bread组件及配置文件，[说明](https://github.com/zuiidea/antd-admin/wiki/%E8%8F%9C%E5%8D%95%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)\n\n### 4.1\n\n`2017-04-14`\n\n- 升级开发工具为[roadhog](https://github.com/sorrycc/roadhog)\n- 使用`roadhog`的mock功能\n- 增强`utils/request.js`跨域处理能力\n\n## 开发构建\n\n### 目录结构\n\n```bash\n├── /mock/ # 数据mock的接口文件\n├── /dist/ # 项目输出目录\n├── /src/ # 项目源码目录\n│ ├── /components/ # UI组件及UI相关方法\n│ │ ├── skin.less # 全局样式\n│ │ └── vars.less # 全局样式变量\n│ ├── /routes/ # 路由组件\n│ │ └── app.js # 路由入口\n│ ├── /models/ # 数据模型\n│ ├── /services/ # 数据接口\n│ ├── /utils/ # 工具函数\n│ │ ├── config.js # 项目常规配置\n│ │ ├── menu.js # 侧边菜单配置\n│ │ ├── mock.js # 数据拦截配置\n│ │ ├── config.js # 项目常规配置\n│ │ ├── request.js # 异步请求函数\n│ │ └── theme.js # 项目需要在js中使用到样式变量\n│ ├── route.js # 路由配置\n│ ├── index.js # 入口文件\n│ └── index.html \n├── package.json # 项目信息\n└── proxy.config.js # 数据mock配置\n```\n\n文件夹命名说明:\n\n- components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）\n- routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）\n\n### 快速开始\n\n克隆项目文件:\n\n git clone https://github.com/zuiidea/antd-admin.git\n\n进入目录安装依赖:\n\n npm i 或者 yarn install\n npm i roadhog@0.6.0-beta.3 -g\n\n开发：\n\n```bash\nnpm run dev # 使用mock拦截请求，数据存储在localStroge里\n\n打开 http://localhost:8000\n```\n\n构建：\n\n```bash\nnpm run build\n\n将会生成dist目录\n```\n\n代码检测：\n\n```bash\nnpm run lint\n```\n\n## 参考\n\n用户列表：\n\ndashboard设计稿： （已征得作者同意）\n\n## 截屏\n\nweb\n\n![](assets/demo4.gif)\n\n移动\n\n![](assets/demo3.gif)\n" 10 | deployedAt: 2019-12-11T02:35:01.495Z 11 | -------------------------------------------------------------------------------- /scaffolds/antd-custom/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/a476e06d-f812-4402-88e6-0f8eb1f7f379/' 2 | name: antd-custom 3 | git_url: 'git://github.com/ctq123/antd-custom.git' 4 | author: ctq123 5 | description: >- 6 | 该基础框架采用第三方依赖包都是目前最新版本，结合antd的UI框架，实现主题定制，webpack自主配置，动态菜单路由设计，redux数据管理，国际化多语言，错误统一处理，本地mock服务等功能 7 | tags: 8 | - antd 9 | - react 10 | - webpcak4 11 | - redux 12 | - redux-saga 13 | - react-router4 14 | - react-intl 15 | - axios 16 | - antd-custom 17 | deployedAt: 2019-10-13T14:42:09.678Z 18 | -------------------------------------------------------------------------------- /scaffolds/antd-layout/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/4adca557-d8f2-4ddb-92c1-8fb43ad70f9e/' 2 | name: antd-layout 3 | git_url: 'git://github.com/1006223320/antd-layout.git' 4 | author: '1006223320' 5 | description: antd-layout 最轻便的实现(特别适合pug爱好者) 6 | tags: 7 | - pug 8 | - jade 9 | - stylus 10 | - styl 11 | - react 12 | - layout 13 | - antd 14 | - react-router 15 | deployedAt: 2019-08-16T09:47:36.112Z 16 | -------------------------------------------------------------------------------- /scaffolds/antd-pro-concent/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/8319d7ce-aa46-48ff-81d7-f6b40cde5857/' 2 | name: antd-pro-concent 3 | git_url: 'git://github.com/concentjs/antd-pro-concent.git' 4 | author: concentjs 5 | description: 基于最新的js版本的antd-pro(v2.2.0)，将其改造成concent版本 6 | tags: 7 | - concent 8 | - react 9 | deployedAt: 2019-08-28T05:07:26.735Z 10 | -------------------------------------------------------------------------------- /scaffolds/antd-pro-mobx/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/f5debbeb-ab9d-4061-9ef0-e17039deb2af/' 2 | name: antd-pro-mobx 3 | git_url: 'git://github.com/gzgogo/antd-pro-mobx.git' 4 | author: gzgogo 5 | description: antd-pro的mobx版本 6 | tags: 7 | - antd pro;mobx 8 | deployedAt: 2019-04-09T09:14:31.081Z 9 | -------------------------------------------------------------------------------- /scaffolds/antd-redux/index.yml: -------------------------------------------------------------------------------- 1 | name: antd-redux 2 | git_url: 'git://github.com/guox191/antd-redux.git' 3 | author: guox191 4 | description: A complex spa boilerplate built with redux and ant-design 5 | tags: 6 | - redux 7 | - antd 8 | - restful 9 | - leancloud 10 | coverPicture: null 11 | readme: > 12 | # antd-redux 13 | 14 | 15 | A react boilerplate built with redux and ant-design. 16 | 17 | 18 | Using restful API powered by leancloud. 19 | 20 | 21 | ### 初衷 22 | 23 | 中小型管理后台在工作室内部日常项目中已然标配, 并且大多数由后端负责，使用的模板良莠不齐，没有规范，甚至引入各种前端bug，不能保证开发效率。 24 | 25 | Ant Design是蚂蚁金服为中后台开发的前端解决方案，同样是为了解决集团内的这类问题。 26 | 27 | 管理后台的前端需求较为集中，大多为表单，图表，展示列表等业务组件，提高开发效率的关键是高效方便地配置与调动这些组件，减少与业务逻辑代码的耦合，让后端开发专注于后台逻辑的实现。 28 | 29 | ### 原则 30 | 31 | 32 | - 贴合业务，适应灵活的业务需求 33 | 34 | - 方便配置，尽可能发挥 JSX 的优越性 35 | 36 | - 封装React路由，抽象成数据结构代码 37 | 38 | - 友好的状态展示，如各类请求的 message，process 等 39 | 40 | - 每个 JSX 文件包含一个主组件 41 | 42 | 43 | ### 架构 44 | 45 | 46 | |结构|选型| 47 | 48 | |---|---| 49 | 50 | |View层|React| 51 | 52 | |路由|React-Router| 53 | 54 | |UI组件|Ant.design| 55 | 56 | |HTTP|[isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)| 57 | 58 | |数据层|Redux| 59 | 60 | |Middleware|[redux-logger](https://github.com/fcomb/redux-logger) 61 | [redux-thunk](https://github.com/gaearon/redux-thunk)| 62 | 63 | 64 | ### Dev 65 | 66 | 67 | 1. `npm install` 68 | 69 | 2. `npm run dev` 使用 dora 作为本地开发的 web 服务器监听 8001 70 | 71 | 3. 登录账号: guest guest 72 | 73 | 74 | ### Usage 75 | 76 | 77 | build完成后在项目入口文件中引入两个文件. 默认 webpack 配置将第三方库单独打包到 `vendor.bundle.js` 中, 78 | 部分非系统核心库采用 amd 方式在使用的时候异步引入. 79 | 80 | ``` 81 | 82 | 83 | ``` 84 | 85 | 86 | ### 目录结构 87 | 88 | 89 | - actions 90 | 91 | - components 92 | 93 | - config 94 | - app.js 95 | - ... 96 | - constants 97 | - actions.js 98 | - ... 99 | - reducers 100 | - auth.reducer.js 101 | - message.reducer.js 102 | - routes 103 | 104 | - lib 105 | 106 | - index.jsx 107 | 108 | - router.jsx 109 | 110 | - store.js 111 | 112 | 113 | ### 核心State 114 | 115 | - message: 全局消息通知, 即 ant-design 的 message 组件 116 | 117 | ``` 118 | { 119 | "message": {}, 120 | "notification": {} 121 | } 122 | ``` 123 | 124 | - login 125 | - loading 126 | 127 | ### 语法特性 128 | 129 | 130 | 项目中尝试性地通过 babel 引入 ES6/ES7 新特性和实用的语法糖, 旨在编写可读性好,简洁优雅的代码. 131 | 132 | 133 | ES6: 134 | - Class 135 | - Arrow function 136 | - Module 137 | - let / const 138 | - Destructuring assignment 139 | - Spread operator 140 | 141 | ES7: 142 | - Property initializer 143 | - Decorator 144 | 145 | 146 | ### 参考文献 147 | 148 | [Best practice on handling data flow for login / signup pages with redirect](https://github.com/reactjs/redux/issues/297) 149 | [flux-standard-action](https://github.com/acdlite/flux-standard-action) 150 | deployedAt: 2017-05-12T12:49:50.300Z 151 | -------------------------------------------------------------------------------- /scaffolds/bear-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: bear-admin 2 | git_url: 'git://github.com/huzzbuzz/bear-admin.git' 3 | author: huzzbuzz 4 | description: 一个简洁的 antd-react-admin 应用。a clean antd-react-admin application 5 | tags: 6 | - react 7 | - antd 8 | - create-react-app 9 | - dva 10 | coverPicture: 'https://ucarecdn.com/ac39f621-e34a-4a13-b55a-505f25298408/' 11 | readme: "![](https://github.com/huzzbuzz/bear-admin/blob/master/screenshot/logo-bear-black.jpg) \n\n> build upon create-react-app, reactjs, ant design, dva.js, webpack etc\n\n## [live demo](http://huzzbuzz.coding.me/bear-admin/)\n\nBear Admin，一个 JavaScript 应用，项目由业界最优秀的 React 应用开发工具 create-react-app 初始化创建， 搭配 Antd 开箱即用的高质量 React 组件和轻量级应用框架 Dva.js 一起，*非常适合后台产品*。\n\nBear Admin 同时也是个很好的前端脚手架学习示例，如果你在学习 React 或即将学习 React，它应该可以做为教程给你一些帮助。如果你准备使用 React 全家桶开发应用，它能够快速给你提供项目脚手架，为你节省前期部分工作。 让我们一起享受整个 React 生态圈和工具链带来的愉悦开发体验。\n\n在开始之前，推荐先学习 React、 ES2015、Node.js、Webpack 等知识，并正确安装和配置了 Node.js 环境。\n\n
\n\n#### 技术栈 \n \uD83D\uDC4D\uD83C\uDFFB[create-react-app](https://github.com/facebookincubator/create-react-app) \n \uD83D\uDC4D\uD83C\uDFFB[ant design](https://ant.design/index-cn) \n \uD83D\uDC4D\uD83C\uDFFB[dva.js](https://github.com/dvajs/dva) \n \uD83D\uDC4D\uD83C\uDFFB[react](https://facebook.github.io/react/) \n \uD83D\uDC4D\uD83C\uDFFB[react-router](https://github.com/ReactTraining/react-router) \n \uD83D\uDC4D\uD83C\uDFFB[webpack](https://webpack.js.org/concepts/) \n \uD83D\uDC4D\uD83C\uDFFB[babel](https://babeljs.io/) \n... \n\n#### 特性 \n :yum:简洁的界面 \n :yum:菜单主题和布局切换 \n :yum:格栅布局，fully responsive \n :yum:Code Splitting。after gzip，[首屏文件仅100多KB](https://github.com/huzzbuzz/bear-admin/blob/master/screenshot/filesize.png)，应用载入速度超快 \n :yum:高质量脚手架 \n :yum:eject create-react-app 配置，按需定制 \n :yum:支持更多语言特性和 polyfills，发现更多，请访问 [create-react-app](https://github.com/facebookincubator/create-react-app) 官网\n\n#### 开始\n1. 克隆源码 \n```\ngit clone https://github.com/huzzbuzz/bear-admin.git\n```\n\n2. 安装依赖 \n```\ncd bear-admin \nnpm i or yarn\n```\n\n3. 调试应用 \n```\nnpm start\n```\n\n4. 发布应用 \n```\nnpm run build\n```\n> it will builds the app for production to the build folder. your app is ready to be deployed. \n\n\n#### 更多 \n\n如何处理异步请求？ \n如何统一处理出错？ \n如何 mock 数据？ \n更多实战，请参阅：\n - [mockjs 文档](https://github.com/nuysoft/Mock/wiki) \n - [dva 文档](https://github.com/dvajs/dva) \n - [dva 知识地图](https://github.com/dvajs/dva-knowledgemap)\n - [create-react-app 文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) \n - [code splitting in create-react-app](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html)\n\n#### 致谢 \ncreate-react-app \nreact 全家桶 \nantd 全家桶 \n\n:heartbeat::heartbeat: 欢迎 star 和 watch 支持 :heartbeat::heartbeat: \n\n
\n\n#### 顶部菜单\n![1](https://user-images.githubusercontent.com/16314691/29705003-bbcbd414-89ae-11e7-82df-1acd2a998324.jpg)\n#### 左侧菜单\n![2](https://user-images.githubusercontent.com/16314691/29705022-d5cb4d36-89ae-11e7-8ded-73f116e49e28.jpg)\n#### 黑色主题\n![3](https://user-images.githubusercontent.com/16314691/29705023-d5cbeb7e-89ae-11e7-8d38-ef003c73a6fc.jpg)\n#### 个人资料\n![4](https://user-images.githubusercontent.com/16314691/29705026-d5d1456a-89ae-11e7-9e1f-aad58ef1501e.jpg)\n#### Antd 图标&其他\n![5antd](https://user-images.githubusercontent.com/16314691/29705024-d5cdc7fa-89ae-11e7-9068-eb6f7e7ee656.jpg)\n#### 自定义表格\n![6](https://user-images.githubusercontent.com/16314691/29705025-d5cf6628-89ae-11e7-9548-67d076734642.jpg)\n#### 自适应\n![7](https://user-images.githubusercontent.com/16314691/29705027-d5deae62-89ae-11e7-82a2-e7dbd702d67d.jpg)\n#### Ant-Motion Logo 动画\n![8 ant](https://user-images.githubusercontent.com/16314691/29705202-9483fb74-89af-11e7-903a-f4b45b51f766.jpg)\n#### Ant-Motion 详细说明切换\n![9](https://user-images.githubusercontent.com/16314691/29705203-9494e63c-89af-11e7-9146-07a152e3c972.jpg) \n\n\n:heartbeat::heartbeat: 欢迎 star 和 watch 支持 :heartbeat::heartbeat: \n" 12 | deployedAt: 2017-08-29T07:14:42.919Z 13 | -------------------------------------------------------------------------------- /scaffolds/bird-front/index.yml: -------------------------------------------------------------------------------- 1 | name: bird-front 2 | git_url: 'git://github.com/liuxx001/bird-front.git' 3 | author: liuxx001 4 | description: 基于react、antd、antd-admin，封装常用数据组件，细粒度权限解决方案. 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/39f49413-99aa-4fc9-9b0f-59cc7377a5b1/' 7 | readme: > 8 | # bird-front 9 | 10 | 11 | bird-front是基于react的后台管理系统前端项目，框架构建部分严重借鉴于antd管理系统解决方案antd-admin，其项目地址：[https://github.com/zuiidea/antd-admin](https://github.com/zuiidea/antd-admin)。本项目对于权限部分进行了重新设计，支持按钮级的权限控制，同时封装了很多易用且功能强大的业务组件。 12 | 13 | 14 | ## 权限方案 15 | 16 | 17 | bird-front对权限部分进行了重新设计，支持更细粒度的权限控制（按钮级）。前端的权限应该控制什么？**资源的可见性**。其包括： 18 | 19 | 20 | - 路由的可见性。 21 | 22 | - 页面中按钮的可见性。 23 | 24 | 25 | 在登录时获取用户拥有的权限集合，在前端存储。 26 | 27 | 28 | - 路由可见性控制：路由变化时，进行权限判断，通过则渲染对应组件，否则渲染403组件。 29 | 30 | - 按钮的可见性控制：封装bird-button组件，传入按钮所需权限名，内部进行权限判断，通过则渲染按钮。 31 | 32 | 33 | 前端的权限控制只能处理页面渲染，不能保证系统的绝对安全，服务端也需要对接口的权限进行验证。 34 | 35 | 36 | 37 | ## 组件 38 | 39 | 40 | bird-front对常用的数据组件进行了封装，使其简单易用，包括： 41 | 42 | 43 | - 44 | 全自动数据表格：bird-grid。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-grid.md) 45 | 46 | - 47 | 全自动树表：bird-tree-grid。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-tree-grid.md) 48 | 49 | - 50 | 数据树：bird-tree。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-tree.md) 51 | 52 | - 53 | 全自动表单：bird-form。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-form.md) 54 | 55 | - 56 | 权限按钮：bird-button。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-button.md) 57 | 58 | - 59 | 下拉选择器：bird-selector。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-selector.md) 60 | 61 | - 62 | 多选组件：bird-multi。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-multi.md) 63 | 64 | - 65 | 级联组件：bird-cascader。[查看文档](https://github.com/liuxx001/bird-front/blob/master/doc/bird-cascader.md) 66 | 67 | 68 | 所有业务组件的理念均是结合服务端接口进行组件的封装，兼顾灵活性的同时保证更优的业务开发速度。 69 | 70 | 71 | 72 | ## 项目获取 73 | 74 | 75 | ``` 76 | 77 | git clone https://github.com/liuxx001/bird-front 78 | 79 | ``` 80 | 81 | 82 | ## 安装依赖包 83 | 84 | 85 | ``` 86 | 87 | npm install 88 | 89 | ``` 90 | 91 | 92 | ## 启动项目 93 | 94 | 95 | ``` 96 | 97 | npm run start 98 | 99 | ``` 100 | 101 | 102 | 登录名：admin 103 | 104 | 登录密码：admin 105 | 106 | 107 | ## 效果图 108 | 109 | ![image](https://raw.githubusercontent.com/liuxx001/bird-front/master/doc/bird-admin.png) 110 | deployedAt: 2018-02-07T13:38:38.255Z 111 | -------------------------------------------------------------------------------- /scaffolds/blog2.x-mux-club/index.yml: -------------------------------------------------------------------------------- 1 | name: blog2.x-mux-club 2 | git_url: 'git://github.com/PhotoArtLife/blog2.x-mux-club.git' 3 | author: PhotoArtLife 4 | description: "\U0001F4372.x blog | use dvajs、react and others quickly build a response blog." 5 | tags: 6 | - react 7 | - redux 8 | - dva 9 | - roadhog 10 | - webpack 11 | - mobile 12 | - sass 13 | - antd 14 | - blog 15 | coverPicture: 'https://ucarecdn.com/f73e4175-29c5-43cf-9338-69ab5d5f4582/' 16 | deployedAt: 2018-10-29T06:13:41.832Z 17 | -------------------------------------------------------------------------------- /scaffolds/blog3.x-mux-club/index.yml: -------------------------------------------------------------------------------- 1 | name: blog3.x-mux-club 2 | git_url: 'git://github.com/PhotoArtLife/blog3.x-mux-club.git' 3 | author: PhotoArtLife 4 | description: "\U0001F98A3.x blog | use UmiJS、DvaJS、Node.js.etc made a animate manage flex web." 5 | tags: 6 | - umi 7 | - dva 8 | - sass 9 | - mobile 10 | - blog 11 | - redux 12 | - antd 13 | coverPicture: 'https://ucarecdn.com/4c04cb2f-32d7-4a3d-8de1-47ae04541bcb/' 14 | deployedAt: 2018-10-18T07:42:27.365Z 15 | -------------------------------------------------------------------------------- /scaffolds/blogVue/index.yml: -------------------------------------------------------------------------------- 1 | name: blogVue 2 | git_url: 'git://github.com/xumjs8623/blogVue.git' 3 | author: xumjs8623 4 | description: null 5 | tags: 6 | - vue 7 | - blog 8 | coverPicture: null 9 | readme: > 10 | # blog-vue 11 | 12 | 13 | > A Vue.js project 14 | 15 | 16 | ## Build Setup 17 | 18 | 19 | ``` bash 20 | 21 | # install dependencies 22 | 23 | npm install 24 | 25 | 26 | # serve with hot reload at localhost:8080 27 | 28 | npm run dev 29 | 30 | 31 | # build for production with minification 32 | 33 | npm run build 34 | 35 | 36 | # build for production and view the bundle analyzer report 37 | 38 | npm run build --report 39 | 40 | 41 | # run unit tests 42 | 43 | npm run unit 44 | 45 | 46 | # run e2e tests 47 | 48 | npm run e2e 49 | 50 | 51 | # run all tests 52 | 53 | npm test 54 | 55 | ``` 56 | 57 | 58 | For detailed explanation on how things work, checkout the 59 | [guide](http://vuejs-templates.github.io/webpack/) and [docs for 60 | vue-loader](http://vuejs.github.io/vue-loader). 61 | deployedAt: 2017-05-23T05:32:41.439Z 62 | -------------------------------------------------------------------------------- /scaffolds/chat/index.yml: -------------------------------------------------------------------------------- 1 | name: chat 2 | git_url: 'git://github.com/RaoHai/chat.git' 3 | author: RaoHai 4 | description: 'A Chat Scaffold based on antd and dva:' 5 | version: '' 6 | tags: [] 7 | coverPicture: 'https://ucarecdn.com/c1a43345-d5ed-4167-875c-4680471903f2/' 8 | readme: > 9 | # chat 10 | 11 | A Chat Scaffold based on antd and dva: 12 | 13 | 14 | Screenshots: 15 | 16 | ----- 17 | 18 | 19 | ![](https://cloud.githubusercontent.com/assets/566097/21448864/2dc1a59c-c922-11e6-9b80-726593d8163d.png) 20 | 21 | 22 | ![](https://cloud.githubusercontent.com/assets/566097/21494490/f28c2eb0-cc4c-11e6-83b8-723ae1423328.png) 23 | 24 | 25 | Firebase Structure 26 | 27 | ----- 28 | 29 | 30 | ``` 31 | 32 | root: { 33 | conversations: { // conversations 34 | '-2h6WJbFPBxUs15iB15DnSAIRTyP2-1482823102860': { 35 | participants: { 36 | '2h6WJbFPBxUs15iB15DnSAIRTyP2': user, 37 | '1482823102860': user 38 | }, 39 | chats: { 40 | '-KZzCufnRDtS4h0q9fL': { 41 | content: '', 42 | time: '', 43 | user: {} 44 | } 45 | } 46 | }, 47 | ... 48 | }, 49 | user: { // online users 50 | '2h6WJbFPBxUs15iB15DnSAIRTyP2': user, 51 | ... 52 | } 53 | } 54 | 55 | ``` 56 | 57 | 58 | 59 | Install 60 | 61 | ------ 62 | 63 | 64 | ``` 65 | 66 | git clone https://github.com/RaoHai/chat.git 67 | 68 | cd chat 69 | 70 | npm install 71 | 72 | npm start // enjoy :D 73 | 74 | 75 | ``` 76 | -------------------------------------------------------------------------------- /scaffolds/create-react-app-antd-mobile-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: create-react-app-antd-mobile-starter 2 | git_url: 'git://github.com/xlsdg/create-react-app-antd-mobile-starter.git' 3 | author: xlsdg 4 | description: Get started with create-react-app and antd-mobile. 5 | tags: 6 | - 'create-react-app ' 7 | - antd 8 | - mobile 9 | coverPicture: null 10 | readme: | 11 | # create-react-app-antd-mobile-starter 12 | 13 | > Get started with create-react-app and antd-mobile. 14 | deployedAt: 2018-01-09T02:40:35.127Z 15 | -------------------------------------------------------------------------------- /scaffolds/create-react-app-antd-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: create-react-app-antd-starter 2 | git_url: 'git://github.com/xlsdg/create-react-app-antd-starter.git' 3 | author: xlsdg 4 | description: Get started with create-react-app and antd. 5 | tags: 6 | - create-react-app 7 | - antd 8 | coverPicture: null 9 | readme: | 10 | # create-react-app-antd-starter 11 | 12 | > Get started with create-react-app and antd. 13 | deployedAt: 2018-01-09T02:39:54.372Z 14 | -------------------------------------------------------------------------------- /scaffolds/create-react-app-antd-typescript-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: create-react-app-antd-typescript-starter 2 | git_url: 'git://github.com/xlsdg/create-react-app-antd-typescript-starter.git' 3 | author: xlsdg 4 | description: Get started with create-react-app and antd. 5 | tags: 6 | - 'create-react-app ' 7 | - antd 8 | - typescript 9 | coverPicture: null 10 | readme: | 11 | # create-react-app-antd-typescript-starter 12 | Get started with create-react-app and antd. 13 | deployedAt: 2018-01-09T02:41:09.583Z 14 | -------------------------------------------------------------------------------- /scaffolds/create-react-app-antd/index.yml: -------------------------------------------------------------------------------- 1 | name: create-react-app-antd 2 | git_url: 'git://github.com/ant-design/create-react-app-antd.git' 3 | author: ant-design 4 | description: Use antd with create-react-app without ejecting 5 | tags: [] 6 | coverPicture: null 7 | deployedAt: 2018-12-16T08:02:19.126Z 8 | -------------------------------------------------------------------------------- /scaffolds/create-umi/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: create-umi 3 | git_url: 'git://github.com/umijs/create-umi.git' 4 | author: umijs 5 | description: Creates a UmiJS application using the command line. 6 | tags: [] 7 | deployedAt: 2019-03-19T12:52:01.020Z 8 | -------------------------------------------------------------------------------- /scaffolds/d2-admin/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/0278c3e3-fdca-4aef-9bf8-25b8e0d565ea/' 2 | name: d2-admin 3 | git_url: 'git://github.com/d2-projects/d2-admin.git' 4 | author: d2-projects 5 | description: 优雅的管理系统前端模板 6 | tags: 7 | - ElementUI 8 | - vue 9 | - vuex 10 | - dashboard 11 | - electron 12 | deployedAt: 2020-04-14T17:41:23.162Z 13 | -------------------------------------------------------------------------------- /scaffolds/dashboard/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/d124400d-3ee0-4c02-948d-48831d853c47/' 2 | name: dashboard 3 | git_url: 'git://github.com/zce/dashboard.git' 4 | author: zce 5 | description: A dashboard scaffolding based on vue.js created by vuejs/vue-cli 3.x. 6 | tags: 7 | - vue 8 | - vue.js 9 | - vuejs 10 | - vuex 11 | - vue-router 12 | - element-ui 13 | deployedAt: 2019-04-04T14:19:02.058Z 14 | -------------------------------------------------------------------------------- /scaffolds/dva-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-admin 2 | git_url: 'git://github.com/pmg1989/dva-admin.git' 3 | author: pmg1989 4 | description: dva admin antd dashboard 5 | tags: 6 | - dva 7 | - antd 8 | - dashboard 9 | coverPicture: 'https://ucarecdn.com/52d0ac39-c14b-4d74-bb24-685104a24ca0/' 10 | readme: > 11 | # dva-admin 12 | 13 | 14 | [![React 15 | Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react) 16 | 17 | [![Ant 18 | Design](https://img.shields.io/badge/ant--design-^2.8.2-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design) 19 | 20 | [![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva) 21 | 22 | 23 | [![GitHub 24 | issues](https://img.shields.io/github/issues/pmg1989/dva-admin.svg?style=flat-square)](https://github.com/pmg1989/dva-admin/issues) 25 | 26 | [![PRs 27 | Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/pmg1989/dva-admin/pulls) 28 | 29 | [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) 30 | 31 | 32 | ## 宗旨与目的 33 | 34 | 35 | - 36 | 期望打造一套基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)于一体的、企业级后台管理系统 37 | 38 | - 期望可以单纯由前端来解决用户权限，后端提供权限数据支持的一套完善的权限管理功能后台管理系统 39 | 40 | - 期望可以在antd与dva的基础上，再次封装简单且可复用的基类组件，方便使用者简单接入，简单使用，简单拓展 41 | 42 | 43 | ## 演示地址 44 | 45 | 46 | https://pmg1989.github.io 47 | 48 | 49 | #### 登录账号 50 | 51 | 52 | - 管理员账号：admin，密码：admin 53 | 54 | - 游客账号：guest, 密码：guest 55 | 56 | - 由于gitpage是静态服务器，刷新后会出现404是正常现象，部署正式服务器即可，具体服务端配置可参见[dva issues 57 | 180](https://github.com/dvajs/dva/issues/180) 58 | 59 | 60 | ## 特性 61 | 62 | 63 | - 64 | 基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 65 | 企业级后台管理系统最佳实践 66 | 67 | - 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发 68 | 69 | - 基于Antd UI 设计语言，提供后台管理系统常见使用场景 70 | 71 | - 浅度响应式设计 72 | 73 | - webpack打包处理路由时，实现Javascript模块化按需动态dynamic加载 74 | 75 | - 已实现基本完善的权限管理功能 76 | 77 | - 完善的后端分页与前端分页功能 78 | 79 | - 封装好可扩展的上传控件与音视频控件 80 | 81 | - 已实现基于Tab面板的可切换式导航栏菜单 82 | 83 | 84 | ## 开发及构建 85 | 86 | 87 | ### 目录结构 88 | 89 | 90 | ```bash 91 | 92 | ├── /mock/ # 数据mock的接口文件 93 | 94 | ├── /dist/ # 项目输出目录 95 | 96 | ├── /src/ # 项目源码目录 97 | 98 | │ ├── /components/ # 项目组件 99 | 100 | │ │ ├── /common/ # 项目公共组件 101 | 102 | │ ├── /routes/ # 路由组件 103 | 104 | │ ├── /models/ # 数据模型 105 | 106 | │ ├── /services/ # 数据接口 107 | 108 | │ ├── /utils/ # 工具函数 109 | 110 | │ ├── route.js # 路由配置 111 | 112 | │ ├── index.js # 入口文件 113 | 114 | │ └── index.html 115 | 116 | ├── package.json # 项目信息 117 | 118 | └── proxy.config.js # 数据mock配置 119 | 120 | 121 | ``` 122 | 123 | 124 | ### 快速开始 125 | 126 | 127 | 克隆项目文件: 128 | 129 | 130 | ``` 131 | 132 | git clone git@github.com:pmg1989/dva-admin.git 133 | 134 | ``` 135 | 136 | 137 | 进入目录安装依赖: 138 | 139 | 140 | ``` 141 | 142 | npm install 或者 yarn 或者 yarn install 143 | 144 | ``` 145 | 146 | 147 | 开发： 148 | 149 | 150 | ```bash 151 | 152 | npm run dev # 使用mock拦截请求，数据存储在localStroge里 153 | 154 | 155 | 打开 http://localhost:8000 156 | 157 | ``` 158 | 159 | 160 | 161 | 构建： 162 | 163 | 164 | ```bash 165 | 166 | 167 | npm run build-dev local环境发布 168 | 169 | npm run build-staging staging 环境发布 170 | 171 | npm run build-release release 环境发布 172 | 173 | 174 | build后的文件将会生成dist目录 175 | 176 | ``` 177 | 178 | 179 | ### 注意事项 180 | 181 | 182 | - 生产环境中，如已有数据接口，请将`conf/webpack.config.js`中的 `webpackConfig.plugins 183 | 'newband.admin.isMock': true`改为false，以及 `src/utils/index.js`中的`export request 184 | from './request-mock'`改为`export request from './request'` 185 | 186 | - 切换`conf/webpack.config.js`中的`'newband.app.admin.IS_DYNAMIC_LOAD': 187 | true`,可以调整JavaScript是否动态按需加载 188 | 189 | - 开发环境中，如再mock目录新增文件，请在`src/utils/mock.js`第二行的`mockData`数组中添加 190 | 191 | - 如需重写antd样式配置，请修改`src/theme.js` 192 | 193 | - 项目配置文件在`src/utils/config.js` 194 | 195 | - 如需重写异步请求函数，请修改`src/utils/request.js` 196 | （关于为什么使用axios而不是fetch：在一个无服务器的环境中模拟数据请求，[Mock](https://github.com/nuysoft/Mock)不能拦截Fetch，只能拦截XHR，所以我选了一个纯Ajax的库[axios](https://github.com/mzabriskie/axios)） 197 | 198 | ### 特别感谢 199 | 200 | 201 | zuiidea: 202 | [https://github.com/zuiidea/antd-admin](https://github.com/zuiidea/antd-admin) 203 | 204 | 205 | sorrycc: 206 | [https://github.com/dvajs/dva-example-user-dashboard](https://github.com/dvajs/dva-example-user-dashboard) 207 | deployedAt: 2017-06-12T10:14:10.328Z 208 | -------------------------------------------------------------------------------- /scaffolds/dva-ant-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-ant-admin 2 | git_url: 'git://github.com/Mulgore/dva-ant-admin.git' 3 | author: Mulgore 4 | description: null 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/0f862023-f249-42a8-b054-d655168a5839/' 7 | readme: > 8 | # Antd Admin 9 | 10 | 11 | ## 特性 12 | 13 | 14 | - 15 | 基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 16 | 企业级后台管理系统最佳实践。 17 | 18 | - 基于Antd UI 设计语言，提供后台管理系统常见使用场景。 19 | 20 | - 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载。 21 | 22 | - 使用[roadhog](https://github.com/sorrycc/roadhog)本地调试和构建，其中Mock功能实现脱离后端独立开发。 23 | 24 | - 浅度响应式设计。 25 | 26 | 27 | 28 | ### 目录结构 29 | 30 | 31 | ```bash 32 | 33 | ├── /dist/ # 项目输出目录 34 | 35 | ├── /src/ # 项目源码目录 36 | 37 | │ ├── /components/ # UI组件及UI相关方法 38 | 39 | │ │ ├── skin.less # 全局样式 40 | 41 | │ │ └── vars.less # 全局样式变量 42 | 43 | │ ├── /routes/ # 路由组件 44 | 45 | │ │ └── app.js # 路由入口 46 | 47 | │ ├── /models/ # 数据模型 48 | 49 | │ ├── /services/ # 数据接口 50 | 51 | │ ├── /themes/ # 项目样式 52 | 53 | │ ├── /mock/ # 数据mock 54 | 55 | │ ├── /utils/ # 工具函数 56 | 57 | │ │ ├── config.js # 项目常规配置 58 | 59 | │ │ ├── menu.js # 菜单及面包屑配置 60 | 61 | │ │ ├── config.js # 项目常规配置 62 | 63 | │ │ ├── request.js # 异步请求函数 64 | 65 | │ │ └── theme.js # 项目需要在js中使用到样式变量 66 | 67 | │ ├── route.js # 路由配置 68 | 69 | │ ├── index.js # 入口文件 70 | 71 | │ └── index.html 72 | 73 | ├── package.json # 项目信息 74 | 75 | ├── .eslintrc # Eslint配置 76 | 77 | └── .roadhogrc.js # roadhog配置 78 | 79 | ``` 80 | 81 | 82 | 文件夹命名说明: 83 | 84 | 85 | - 86 | components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）。 87 | 88 | - 89 | routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）。 90 | 91 | 92 | ### 快速开始 93 | 94 | 95 | 克隆项目文件: 96 | 97 | git clone git@github.com:Mulgore/dva-ant-admin.git 98 | 99 | 进入目录安装依赖: 100 | 101 | npm i 或者 yarn install 102 | 103 | 开发： 104 | 105 | 106 | ```bash 107 | 108 | npm run dev 109 | 110 | 打开 http://localhost:8000 111 | 112 | ``` 113 | 114 | 115 | 构建： 116 | 117 | 118 | ```bash 119 | 120 | npm run build 121 | 122 | 123 | 将会生成dist目录 124 | 125 | ``` 126 | 127 | 128 | 代码检测： 129 | 130 | 131 | ```bash 132 | 133 | npm run lint 134 | 135 | ``` 136 | deployedAt: 2018-09-05T07:47:13.223Z 137 | -------------------------------------------------------------------------------- /scaffolds/dva-antd-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-antd-admin 2 | git_url: 'git://github.com/bowencool/dva-antd-admin.git' 3 | author: bowencool 4 | description: 路由(v4)、权限、菜单 强耦合案例 5 | tags: 6 | - dva 7 | - react-router-v4 8 | - antd 9 | coverPicture: 'https://ucarecdn.com/45f29b7d-e3ef-42c0-92c7-2bd70463691d/' 10 | readme: No README 11 | deployedAt: 2018-04-07T07:22:46.791Z 12 | -------------------------------------------------------------------------------- /scaffolds/dva-antd-mobile-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-antd-mobile-starter 2 | git_url: 'git://github.com/xlsdg/dva-antd-mobile-starter.git' 3 | author: xlsdg 4 | description: Get started with Dva.js and Ant Design mobile. 5 | tags: 6 | - antd 7 | - dva 8 | - mobile 9 | coverPicture: null 10 | readme: > 11 | # dva-antd-mobile-starter [![Build 12 | Status](https://travis-ci.org/xlsdg/dva-antd-mobile-starter.svg?branch=master)](https://travis-ci.org/xlsdg/dva-antd-mobile-starter) 13 | 14 | 15 | > Get started with Dva.js and Ant Design mobile. 16 | 17 | 18 | ![Screen Shot](screenshot.png) 19 | deployedAt: 2017-05-24T12:14:31.221Z 20 | -------------------------------------------------------------------------------- /scaffolds/dva-antd-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-antd-starter 2 | git_url: 'git://github.com/xlsdg/dva-antd-starter.git' 3 | author: xlsdg 4 | description: Get started with Dva.js and Ant Design. 5 | tags: 6 | - dva 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/8602e133-b80f-4616-bbc8-f8cba40b6254/' 9 | readme: > 10 | # dva-antd-starter [![Build 11 | Status](https://travis-ci.org/xlsdg/dva-antd-starter.svg?branch=master)](https://travis-ci.org/xlsdg/dva-antd-starter) 12 | 13 | 14 | > Get started with Dva.js and Ant Design. 15 | 16 | 17 | ![Screen Shot](screenshot.png) 18 | deployedAt: 2017-05-24T12:15:35.432Z 19 | -------------------------------------------------------------------------------- /scaffolds/dva-antd-typescript-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-antd-typescript-starter 2 | git_url: 'git://github.com/xlsdg/dva-antd-typescript-starter.git' 3 | author: xlsdg 4 | description: Get started with Dva.js and Ant Design. 5 | tags: 6 | - dva 7 | - antd 8 | - typescript 9 | coverPicture: null 10 | readme: > 11 | # dva-antd-typescript-starter [![Build 12 | Status](https://travis-ci.org/xlsdg/dva-antd-typescript-starter.svg?branch=master)](https://travis-ci.org/xlsdg/dva-antd-typescript-starter) 13 | 14 | 15 | > Get started with Dva.js and Ant Design. 16 | deployedAt: 2018-01-09T02:38:28.669Z 17 | -------------------------------------------------------------------------------- /scaffolds/dva-boot-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-boot-admin 2 | git_url: 'git://github.com/LANIF-UI/dva-boot-admin.git' 3 | author: LANIF-UI 4 | description: 基于react生态系统的高级后台管理解决方案 Admin UI 5 | tags: 6 | - admin 7 | - admin-dashboard 8 | - dva-admin 9 | - dva-boot 10 | - ant-design 11 | - dva 12 | - dashboard 13 | - ui 14 | - boilerplate 15 | - react-ui 16 | coverPicture: 'https://ucarecdn.com/e108404b-11db-4f62-adab-f6907eba19ba/' 17 | readme: > 18 | # :beginner: DVA-BOOT-ADMIN 19 | 20 | 21 | 我们使用React生态系统的最成熟的技术体系，搭建的一套开箱即用的后台管理系统，框架里包含了DBA中独有的定制组件，以及许多经过大量实践口碑良好的第三方组件，它不仅仅是一个简单的仪表盘展示界面，更是保证您下一个web项目所必需的所有工具，我们希望使用它的人可以快速、稳定的开发出健壮、美观、易用的web程序。 22 | 23 | 24 | ## 包含的功能 25 | 26 | - Ant Design 组件库 27 | 28 | - DVA2 29 | 30 | - 数十个精心制作的小组件 31 | 32 | - 多种页面布局 33 | 34 | - 许多精心设计的页面及交互场景 35 | 36 | - 后台接口数据模拟 37 | 38 | - [dva-boot](https://github.com/LANIF-UI/dva-boot)脚手架封装的功能 39 | 40 | 41 | ## 最近更新 42 | 43 | - 增加柱型图 44 | 45 | - 增加G2图表组件 46 | 47 | - 增加resizeMe，可监控dom大小变化 48 | 49 | - 页面增加登录页 50 | 51 | - 页面增加锁屏页 52 | 53 | - 页面增加Coming Soon页 54 | 55 | - 组件增加Clock组件 56 | 57 | - 组件增加密码解锁组件 58 | 59 | - 组件增加Coming Soon组件 60 | 61 | 62 | ## 目录结构 63 | 64 | ``` 65 | 66 | . 67 | 68 | ├── public # 不参与编译的资源文件 69 | 70 | ├── src # 主程序目录 71 | 72 | │ ├── index.js # 程序启动和渲染入口文件 73 | 74 | │ ├── components # 全局公共组件 75 | 76 | │ ├── layouts # 页面结构组件 77 | 78 | │ │ ├── BasicLayout # 基本布局 79 | 80 | │ │ └── OtherLayout # 布局组件根据具体功能调整，在路由配置中引用 81 | 82 | │ ├── routes # 动态路由目录（每个功能一个文件夹的MVC结构） 83 | 84 | │ │ ├── index.js # 路由配置文件 85 | 86 | │ │ ├── Home # 功能模块 87 | 88 | │ │ │ ├── index.js # 路由配置文件 89 | 90 | │ │ │ ├── assets # 单独属于这个模块的静态资源文件 91 | 92 | │ │ │ ├── components # 页面组件 93 | 94 | │ │ │ ├── model # dva model 95 | 96 | │ │ │ ├── service # dva service 97 | 98 | │ │ │ └── routes ** # 子路由(目录结构与父级相同) 99 | 100 | │ │ └── Login # 功能模块 101 | 102 | │ │ ├── index.js # 路由配置文件 103 | 104 | │ │ ├── assets # 单独属于这个模块的静态资源文件 105 | 106 | │ │ ├── components # 页面组件 107 | 108 | │ │ ├── model # dva model 109 | 110 | │ │ ├── service # dva service 111 | 112 | │ │ └── routes ** # 子路由(目录结构与父级相同) 113 | 114 | │ ├── utils # 工具类 115 | 116 | │ └── assets # 资源文件 117 | 118 | │ ├── fonts # 字体 & 字体图标 119 | 120 | │ ├── images # 图片 121 | 122 | │ └── styles # 全局样式 123 | 124 | ``` 125 | 126 | 127 | ## 启动 128 | 129 | 130 | ``` javascript 131 | 132 | $ git clone https://github.com/LANIF-UI/dva-boot-admin.git 133 | 134 | $ cd dva-boot-admin 135 | 136 | $ npm install 137 | 138 | $ npm start 139 | 140 | ``` 141 | deployedAt: 2018-05-13T15:23:36.945Z 142 | -------------------------------------------------------------------------------- /scaffolds/dva-boot/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-boot 2 | git_url: 'git://github.com/LANIF-UI/dva-boot.git' 3 | author: LANIF-UI 4 | description: 基于 create-react-app 构建的 dva 2 脚手架 支持动态路由、按功能分层 5 | tags: 6 | - antd 7 | - react 8 | - dva 9 | - react-router-v4 10 | - mvc 11 | - code-splitting 12 | - create-react-app 13 | coverPicture: 'https://ucarecdn.com/372d196c-750f-4229-ac98-6f828074a5c1/111.gif' 14 | deployedAt: 2018-03-21T12:04:57.693Z 15 | -------------------------------------------------------------------------------- /scaffolds/dva-example-user-dashboard/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-example-user-dashboard 2 | git_url: 'git://github.com/dvajs/dva-example-user-dashboard.git' 3 | author: dvajs 4 | description: "\uD83D\uDC72 \uD83D\uDC6C \uD83D\uDC68‍\uD83D\uDC69‍\uD83D\uDC67 \uD83D\uDC68‍\uD83D\uDC69‍\uD83D\uDC66‍\uD83D\uDC66" 5 | tags: 6 | - dva 7 | - react 8 | - antd 9 | coverPicture: 'https://ucarecdn.com/f9569dff-f570-494d-a16a-11dfe8bbefd1/' 10 | readme: > 11 | # dva-example-user-dashboard 12 | 13 | 14 | 详见[《12 步 30 分钟，完成用户管理的 CURD 应用 15 | (react+dva+antd)》](https://github.com/sorrycc/blog/issues/18)。 16 | 17 | 18 | --- 19 | 20 | 21 |

22 | 23 |

24 | 25 | 26 | ## Getting Started 27 | 28 | Install dependencies. 29 | 30 | 31 | ```bash 32 | 33 | $ npm install 34 | 35 | ``` 36 | 37 | 38 | Start server. 39 | 40 | 41 | ```bash 42 | 43 | $ npm start 44 | 45 | ``` 46 | 47 | 48 | If success, app will be open in your default browser automatically. 49 | deployedAt: 2017-04-29T09:28:41.593Z 50 | -------------------------------------------------------------------------------- /scaffolds/dva-hackernews/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-hackernews 2 | git_url: 'git://github.com/dvajs/dva-hackernews.git' 3 | author: dvajs 4 | description: HackerNews clone built with Dva. 5 | version: '' 6 | tags: 7 | - dva 8 | - react 9 | - hacknews 10 | coverPicture: 'https://ucarecdn.com/399ead84-8022-42c1-b8fd-c32526b39cdc/' 11 | readme: > 12 | # dva-hackernews 13 | 14 | 15 | HackerNews clone built with [Dva](https://github.com/dvajs/dva), based on 16 | [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0). 17 | 18 | 19 |

20 | 21 | 22 |
23 | Live Demo 24 | 25 |

26 | 27 | 28 | ## TODO 29 | 30 | 31 | - [x] Item Page 32 | 33 | - [x] Comment Page 34 | 35 | - [x] User Page 36 | 37 | - [x] Real-time List Update with Animation 38 | 39 | - [x] Router Transform Animation 40 | 41 | - [ ] SSR 42 | 43 | - [ ] Dynamic Router 44 | 45 | - [ ] Handle loading status automatically 46 | 47 | - [ ] Render Performance 48 | 49 | 50 | ## Run Locally 51 | 52 | 53 | Install dependencies. 54 | 55 | 56 | ```bash 57 | 58 | $ npm install 59 | 60 | ``` 61 | 62 | 63 | Start server. 64 | 65 | 66 | ```bash 67 | 68 | $ npm start 69 | 70 | ``` 71 | 72 | 73 | Open app in browser. 74 | 75 | 76 | ```bash 77 | 78 | $ open http://localhost:8989/ 79 | 80 | ``` 81 | -------------------------------------------------------------------------------- /scaffolds/dva-umi-mobile/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-umi-mobile 2 | git_url: 'git://github.com/xiaohuoni/dva-umi-mobile.git' 3 | author: xiaohuoni 4 | description: 'a demo with dva-umi mobile ' 5 | tags: 6 | - umi 7 | - dva 8 | - mobile 9 | coverPicture: 'https://ucarecdn.com/d85910ad-5f67-48ce-a595-f210fa54beeb/' 10 | readme: | 11 | # DVA-UMI-MOBILE 12 | 1.0版本 13 | ## 特性 14 | 1.使用hd方案 15 | ## 使用说明 16 | 1.在首页头部bar没有返回按钮 17 | 2.在登录页没有头部bar（在utils/config里面设置） 18 | 3.注意首页或者登录页的图片（rem） 19 | ### 目录结构 20 | 21 | ```bash 22 | ├── /mock/ # 数据mock 23 | ├── /dist/ # 项目输出目录 24 | ├── /src/ # 项目源码目录 25 | │ ├── /assets/ # 公共文件，编译时copy至dist目录 26 | │ ├── /components/ # UI组件及UI相关方法 27 | │ │ ├── skin.less # 全局样式 28 | │ │ └── vars.less # 全局样式变量 29 | │ ├── /pages/ # 页面 30 | │ │ └── /user/ # 路由 31 | │ │ ├── /components/ #私有组件 32 | │ │ ├── /models/ #私有模型(按需加载) 33 | │ │ ├── /services/ #私有服务(按需加载) 34 | │ │ ├── page.js 35 | │ │ └── page.less 36 | │ ├── /models/ # 全局数据模型(默认加载) 37 | │ ├── /services/ # 数据接口 38 | │ ├── /themes/ # 项目样式 39 | │ ├── /utils/ # 工具函数 40 | │ │ ├── config.js # 项目常规配置 41 | │ │ ├── menu.js # 菜单及面包屑配置 42 | │ │ ├── config.js # 项目常规配置 43 | │ │ ├── request.js # 异步请求函数 44 | │ │ └── theme.js # 项目需要在js中使用到样式变量 45 | │ ├── route.js # 路由配置 46 | │ ├── index.js # 入口文件 47 | │ └── global.css(.less) #全局样式文件 48 | ├── package.json # 项目信息 49 | ├── .eslintrc # Eslint配置 50 | ``` 51 | 52 | ### 快速开始 53 | 54 | 克隆项目文件: 55 | 56 | ```bash 57 | git clone https://github.com/xiaohuoni/dva-umi-mobile.git 58 | ``` 59 | 60 | 进入目录安装依赖: 61 | 62 | ```bash 63 | npm i 或者 yarn install 64 | ``` 65 | 66 | 启动服务. 67 | 68 | ```bash 69 | $ npm start 70 | ``` 71 | 72 | 编译. 73 | 74 | ```bash 75 | $ npm run build 76 | ``` 77 | 78 | 或者你可以使用: [oni-cli](https://github.com/xiaohuoni/oni-cli) 79 | 80 | ```bash 81 | $ npm install oni-cli -g 82 | $ oni new myapp 83 | $ cd myapp 84 | $ npm install 85 | $ npm start # visit http://localhost:8000 86 | ``` 87 | deployedAt: 2018-05-10T02:30:57.243Z 88 | -------------------------------------------------------------------------------- /scaffolds/dva-umi/index.yml: -------------------------------------------------------------------------------- 1 | name: dva-umi 2 | git_url: 'git://github.com/xiaohuoni/dva-umi.git' 3 | author: xiaohuoni 4 | description: >- 5 | a scaffolding for dva-umi 一个dva-umi的开发脚手架，推荐使用oni-cli安装使用 6 | https://github.com/xiaohuoni/oni-cli 7 | tags: 8 | - umi 9 | - dva 10 | coverPicture: 'https://ucarecdn.com/0a997326-fba6-4c26-a226-396d547e9c27/' 11 | readme: >- 12 | # DVA-UMI 13 | 14 | 1.0版本 15 | 16 | 17 | 18 | ## 版本更新 19 | 20 | ### 2018.03.24 21 | 22 | - 1.更新umi1.1.1 23 | 24 | - 2.增加嵌套路由demo 25 | 26 | ## 开发构建 27 | 28 | 29 | ### 目录结构 30 | 31 | 32 | ```bash 33 | 34 | ├── /mock/ # 数据mock 35 | 36 | ├── /dist/ # 项目输出目录 37 | 38 | ├── /src/ # 项目源码目录 39 | 40 | │ ├── /assets/ # 公共文件，编译时copy至dist目录 41 | 42 | │ ├── /components/ # UI组件及UI相关方法 43 | 44 | │ │ ├── skin.less # 全局样式 45 | 46 | │ │ └── vars.less # 全局样式变量 47 | 48 | │ ├── /pages/ # 页面 49 | 50 | │ │ └── /user/ # 路由 51 | 52 | │ │ ├── /components/ #私有组件 53 | 54 | │ │ ├── /models/ #私有模型(按需加载) 55 | 56 | │ │ ├── /services/ #私有服务(按需加载) 57 | 58 | │ │ ├── page.js 59 | 60 | │ │ └── page.less 61 | 62 | │ ├── /models/ # 全局数据模型(默认加载) 63 | 64 | │ ├── /services/ # 数据接口 65 | 66 | │ ├── /themes/ # 项目样式 67 | 68 | │ ├── /utils/ # 工具函数 69 | 70 | │ │ ├── config.js # 项目常规配置 71 | 72 | │ │ ├── menu.js # 菜单及面包屑配置 73 | 74 | │ │ ├── config.js # 项目常规配置 75 | 76 | │ │ ├── request.js # 异步请求函数 77 | 78 | │ │ └── theme.js # 项目需要在js中使用到样式变量 79 | 80 | │ ├── route.js # 路由配置 81 | 82 | │ ├── index.js # 入口文件 83 | 84 | │ └── global.css(.less) #全局样式文件 85 | 86 | ├── package.json # 项目信息 87 | 88 | ├── .eslintrc # Eslint配置 89 | 90 | ``` 91 | 92 | ### 模型规则(未实现) 93 | 94 | 1. src/models/**/*.js 为 global model 95 | 96 | 2. src/pages/**/models/**/*.js 为 page model 97 | 98 | 3. global model 全量载入，page model 在 production 时按需载入，在 development 时全量载入 99 | 100 | 4. page model 为 page js 所在路径下 models/**/*.js 的文件 101 | 102 | 5. page model 要向上查找，比如 page js 为 pages/a/b.js，他的 page model 为 103 | pages/a/b/models/**/*.js + pages/a/models/**/*.js，依次类推 104 | 105 | 6. 约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找 106 | models/**/*.js 107 | 108 | 7. maybe: 支持合并 model 和 component 的请求，避免文件过于细碎 109 | 110 | ### 快速开始 111 | 112 | 113 | 克隆项目文件: 114 | 115 | 116 | ## Usage 117 | 118 | 119 | ```bash 120 | 121 | $ git clone https://github.com/xiaohuoni/dva-umi.git 122 | 123 | $ cd dva-umi 124 | 125 | $ npm install 126 | 127 | $ npm start # visit http://localhost:8000 128 | 129 | ``` 130 | 131 | 132 | Or you can use the command tool: 133 | [oni-cli](https://github.com/xiaohuoni/oni-cli) 134 | 135 | 136 | ```bash 137 | 138 | $ npm install oni-cli -g 139 | 140 | $ oni new myapp 141 | 142 | $ cd myapp 143 | 144 | $ npm install 145 | 146 | $ npm start # visit http://localhost:8000 147 | 148 | ``` 149 | 150 | 151 | Build. 152 | 153 | 154 | ```bash 155 | 156 | $ npm run build 157 | 158 | ``` 159 | deployedAt: 2018-05-10T02:25:38.649Z 160 | -------------------------------------------------------------------------------- /scaffolds/electron-antd/index.yml: -------------------------------------------------------------------------------- 1 | name: electron-antd 2 | git_url: 'git://github.com/lanten/electron-antd.git' 3 | author: lanten 4 | description: 快速创建一个 electron + react + antd 的桌面 APP 5 | tags: 6 | - electron 7 | coverPicture: null 8 | deployedAt: 2018-11-22T02:00:11.564Z 9 | -------------------------------------------------------------------------------- /scaffolds/electron-mobx-member/index.yml: -------------------------------------------------------------------------------- 1 | name: electron-mobx-member 2 | git_url: 'git://github.com/eaTong/electron-mobx-member.git' 3 | author: eaTong 4 | description: member manager write by electron && mobx 5 | tags: 6 | - mobx 7 | - electron 8 | - mysql 9 | coverPicture: null 10 | deployedAt: 2018-12-27T08:20:05.246Z 11 | -------------------------------------------------------------------------------- /scaffolds/electron-react-typescript-antd-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: electron-react-typescript-antd-boilerplate 2 | git_url: 'git://github.com/CNLHC/electron-react-typescript-antd-boilerplate.git' 3 | author: CNLHC 4 | description: Electron+Typescript脚手架 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/2999e79c-73ae-4873-9db5-c0a856bc413d/' 7 | deployedAt: 2019-01-29T13:03:28.560Z 8 | -------------------------------------------------------------------------------- /scaffolds/emptyd-admin-webpack/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/647acbc8-e19c-4527-99bf-64fedbfe57dc/' 2 | name: emptyd-admin-webpack 3 | git_url: 'git://github.com/FreemenL/emptyd-admin-webpack.git' 4 | author: FreemenL 5 | description: '基于typescript react webpack的脚手架 ' 6 | tags: [] 7 | deployedAt: 2019-09-26T06:47:50.002Z 8 | -------------------------------------------------------------------------------- /scaffolds/epee-react-admin-ts/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/b873e76e-c309-44f7-9a8e-c737bf281a6e/' 2 | name: epee-react-admin-ts 3 | git_url: 'git://github.com/dobble11/epee-react-admin-ts.git' 4 | author: dobble11 5 | description: TypeScript 与 React Hooks 最佳实践项目模版，无模版代码，无字符串约定，简洁，不干预，全链路类型检查保证代码质量，适应大型团队协作开发 6 | tags: 7 | - react-hooks 8 | - easy-peasy 9 | - typescript 10 | - antd 11 | deployedAt: 2019-10-16T06:00:46.018Z 12 | -------------------------------------------------------------------------------- /scaffolds/eshop-user/index.yml: -------------------------------------------------------------------------------- 1 | name: eshop-user 2 | git_url: 'git://github.com/Monkhjargal/eshop-user.git' 3 | author: Monkhjargal 4 | description: eshop-user 5 | tags: [] 6 | coverPicture: null 7 | deployedAt: 2019-01-29T10:33:21.898Z 8 | -------------------------------------------------------------------------------- /scaffolds/fanpianAdmin/index.yml: -------------------------------------------------------------------------------- 1 | name: fanpianAdmin 2 | git_url: 'git://github.com/douglasvegas/fanpianAdmin.git' 3 | author: douglasvegas 4 | description: This is the admin for fanpian project written by react. 5 | tags: 6 | - admin 7 | coverPicture: 'https://ucarecdn.com/5370301f-bb7c-4adf-be81-77d46f0f1a16/' 8 | readme: >- 9 | # RecordAdmin 10 | 11 | ## Todo 12 | 13 | 14 | - ~~访客、用户统计图表~~ 15 | 16 | - ~~用户管理列表~~ 17 | 18 | - ~~文章管理列表~~ 19 | 20 | - ~~模块管理~~ 21 | 22 | - 文本编辑器 23 | 24 | 25 | ## 界面 26 | 27 | ### 文章列表 28 | 29 | ![](https://github.com/douglasvegas/fanpianAdmin/blob/master/screenshots/文章列表.png) 30 | 31 | 32 | ### 文章模块 33 | 34 | ![](https://github.com/douglasvegas/fanpianAdmin/blob/master/screenshots/文章模块.png) 35 | 36 | 37 | ### 文章统计 38 | 39 | ![](https://github.com/douglasvegas/fanpianAdmin/blob/master/screenshots/文章统计.png) 40 | 41 | 42 | ### 用户列表 43 | 44 | ![](https://github.com/douglasvegas/fanpianAdmin/blob/master/screenshots/用户列表.png) 45 | 46 | 47 | 48 | ### ISSUES 49 | 50 | - 建议使用可控表单 51 | > 符合React的数据流，单向数据流，从state流向render输出的结果。 52 | 数据存贮在state中，便于使用。便于对数据进行处理 53 | - webpack publicPath影响打包结果的问题 54 | 55 | - componentDidMount和componentWillUpdate使用可能出现死循环，慎重。 56 | 57 | - 手动删除token、返回登录无法进入界面、流程控制问题。用登录成功的回调函数修改state？ 58 | 59 | - react-router4的钩子函数 60 | 61 | 62 | ## 项目地址 63 | * 前台 [fanpian](https://github.com/douglasvegas/fanpian) 64 | * 后台 [fanpianAdmin](https://github.com/douglasvegas/fanpianAdmin) 65 | * 后端项目 66 | [fanpianBackend](https://github.com/douglasvegas/fanpianBackend) 67 | 68 | 69 | ## 线上预览 70 | 71 | * [前台](http://www.douglasvegas.com/) 72 | 73 | * [后台](http://admin.douglasvegas.com/) 74 | deployedAt: 2017-06-10T07:33:46.311Z 75 | -------------------------------------------------------------------------------- /scaffolds/feup/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: feup 3 | git_url: 'git://github.com/feupjs/feup.git' 4 | author: feupjs 5 | description: 解决前端所有业务场景，及快速搭建、监控。 当公司选型react为生态的时候，如果你不想使用umi的时候，可以试用一下 FEUP 6 | tags: 7 | - react 8 | - umi 9 | - dumi 10 | - 脚手架 11 | - 前端脚手架 12 | deployedAt: 2021-12-24T11:49:37.785Z 13 | -------------------------------------------------------------------------------- /scaffolds/frontend-cli/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: frontend-cli 3 | git_url: 'git://github.com/ashuihui/frontend-cli.git' 4 | author: ashuihui 5 | description: react 前端脚手架 6 | tags: 7 | - >- 8 | react、typescript、redux、router、sass/less、antd、echarts、babel、ESLint、storybook、jest&enzyme 9 | deployedAt: 2020-06-02T14:07:03.861Z 10 | -------------------------------------------------------------------------------- /scaffolds/generator-chrome-extension/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: generator-chrome-extension 3 | git_url: 'git://github.com/yeoman/generator-chrome-extension.git' 4 | author: yeoman 5 | description: Scaffold out a Chrome extension 6 | tags: [] 7 | deployedAt: 2019-03-06T03:22:24.244Z 8 | -------------------------------------------------------------------------------- /scaffolds/gt-react-scaffold/index.yml: -------------------------------------------------------------------------------- 1 | name: gt-react-scaffold 2 | git_url: 'git://github.com/vivaxy/gt-react-scaffold.git' 3 | author: vivaxy 4 | description: "\U0001F95A A boilerplate for client apps of webpack, react, redux, router..." 5 | tags: 6 | - react 7 | - redux 8 | - webpack 9 | - gt 10 | - eslint 11 | - router 12 | - postcss 13 | coverPicture: null 14 | readme: > 15 | ## Initializing 16 | 17 | 18 | - Install nodejs. 19 | 20 | - Install [gt](https://github.com/vivaxy/granturismo). 21 | 22 | `yarn global add granturismo` 23 | 24 | - Add scaffold to gt `gt config add vivaxy/gt-react-scaffold 25 | https://github.com/vivaxy/gt-react-scaffold.git`. 26 | 27 | - Create your project directory `mkdir my-project-name && cd my-project-name` 28 | or `git clone ...`. 29 | 30 | - Run `gt init`. 31 | 32 | - Select `vivaxy/gt-react-scaffold`. 33 | 34 | 35 | ## Contributing 36 | 37 | 38 | [Contributing](CONTRIBUTING.md) 39 | 40 | 41 | ---------- 42 | 43 | 44 | # gt-react-scaffold 45 | 46 | 47 | ## Feature 48 | 49 | 50 | - react 51 | 52 | - redux 53 | 54 | - webpack 55 | 56 | - eslint 57 | 58 | - page navigation animation 59 | 60 | - react router 61 | 62 | - react redux 63 | 64 | - redux thunk 65 | 66 | - react hot reload 67 | 68 | - webpack development server 69 | 70 | - multiple entries 71 | 72 | - mock server 73 | 74 | - unified error center 75 | 76 | - internationalization 77 | 78 | - environments 79 | 80 | - webpack visualizer 81 | 82 | - postcss 83 | 84 | - autoprefixer 85 | 86 | - less 87 | 88 | - test cases 89 | 90 | 91 | ## Concept 92 | 93 | 94 | ![flowchart](./docs/flowchart.png) 95 | 96 | 97 | As we find out html are mostly same in react projects, we extract the same 98 | html into a template file which lays in `html` folder. 99 | 100 | 101 | `html-webpack-plugin` is used to generate released html files, which load 102 | corresponding js files. 103 | 104 | 105 | `entries` stores js main methods, we split main container to `containers` 106 | because entry could not be hot-module-replaced. 107 | 108 | 109 | `entries`s import `containers`s, which is one to one correspondent. `render` 110 | method in entry provides all commonly used setups, such as redux store, 111 | provider, injectTapEventPlugin for material-ui, and custom styles. 112 | 113 | 114 | `containers` is the headquarters which imports all dummy components, passing 115 | through props to them. Also, `containers` interacts with redux `reducers` and 116 | `actions`. 117 | 118 | 119 | It is recommended that you wrap containers into another. `redux` will 120 | re-render a container when and only when mapped reducers have been updated. 121 | 122 | 123 | We do not use async redux for ajax requests because ajax status is not that 124 | important for us to record. So, we invoke `api` in `containers`, get response, 125 | and determine what `actions` to call. 126 | 127 | 128 | We store every string in `i18n` for better internationalization. 129 | 130 | 131 | Built project files will be in the `release` folder. With `build.log`, you can 132 | see every build details. With `stats.html`, you can optimize your dependencies 133 | to make project smaller. 134 | 135 | 136 | ## Developing 137 | 138 | 139 | - `yarn run dev` 140 | 141 | 142 | ## Building 143 | 144 | 145 | - `yarn run build` 146 | 147 | 148 | ## Reference 149 | 150 | 151 | - https://github.com/webpack/docs/wiki/webpack-dev-server 152 | 153 | - https://github.com/gaearon/react-hot-loader/tree/master/docs 154 | 155 | - https://github.com/reactjs/react-router-redux 156 | 157 | - https://github.com/ampedandwired/html-webpack-plugin 158 | 159 | - https://github.com/ReactTraining/react-router 160 | deployedAt: 2017-09-21T03:50:26.584Z 161 | -------------------------------------------------------------------------------- /scaffolds/inferno-mobile/index.yml: -------------------------------------------------------------------------------- 1 | name: inferno-mobile 2 | git_url: 'git://github.com/leesx/inferno-mobile.git' 3 | author: leesx 4 | description: infernojs mobile app 5 | tags: 6 | - infernojs 7 | - react 8 | - antd-mobile 9 | coverPicture: 'https://ucarecdn.com/3741f297-64da-456c-ba17-1bee8c117d61/' 10 | readme: | 11 | ## infernojs mobile demo 12 | 13 | > 使用了类react框架 inferno.js，以及ant-mobile. 14 | > 借助于官方脚手架 create 15 | 16 | [infernojs](https://infernojs.org/) 17 | 18 | - 官方实例 19 | 20 | ``` 21 | npx create-inferno-app my-app 22 | cd my-app 23 | npm start 24 | ``` 25 | - 提取官方配置，加入适合自己项目开发的一些配置 26 | 27 | 1. 安装依赖 `yarn` 28 | 2. 开发运行 `yarn start` 29 | 3. 构建 `yarn build` 30 | 4. 模拟部署 `yarn serve` 31 | > 别忘记 `yarn global add serve` 32 | deployedAt: 2018-04-22T09:52:47.649Z 33 | -------------------------------------------------------------------------------- /scaffolds/jdf-phone-ui/index.yml: -------------------------------------------------------------------------------- 1 | name: jdf-phone-ui 2 | git_url: 'git://github.com/jdfdcc/jdf-phone-ui.git' 3 | author: jdfdcc 4 | description: "\U0001F596 前端混合开发整合框架（cordova插件，微信，H5）" 5 | tags: [] 6 | coverPicture: null 7 | deployedAt: 2018-06-19T07:23:18.815Z 8 | -------------------------------------------------------------------------------- /scaffolds/kenote-react-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: kenote-react-admin 2 | git_url: 'git://github.com/thondery/kenote-react-admin.git' 3 | author: thondery 4 | description: 基于 React 和 Antd.Design 技术的后台管理平台 5 | tags: [] 6 | coverPicture: null 7 | readme: >- 8 | # kenote-react-admin 9 | 10 | 11 | 基于 React 和 Antd.Design 技术的后台管理平台 12 | 13 | 14 | [![React](https://img.shields.io/badge/react-^15.6.2-brightgreen.svg?style=flat-square)](https://github.com/facebook/react) 15 | 16 | [![Ant 17 | Design](https://img.shields.io/badge/ant--design-^2.13.6-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design) 18 | 19 | [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) 20 | 21 | 22 | ## Usages 23 | 24 | 25 | 克隆项目 26 | 27 | ```bash 28 | 29 | git clone https://github.com/thondery/kenote-react-admin.git 30 | 31 | ``` 32 | 33 | 34 | 安装依赖 35 | 36 | ```bash 37 | 38 | npm i 或 yarn 39 | 40 | ``` 41 | 42 | 43 | 添加配置 44 | 45 | ```bash 46 | 47 | node-react config 48 | 49 | 50 | ? root: (./src/config) -> 51 | 52 | ? domain (http://localhost:4000) -> 53 | 54 | ? apiPath (/api/v1) -> 55 | 56 | config set sccuess! 57 | 58 | ``` 59 | 60 | 61 | 编译依赖包 62 | 63 | ```bash 64 | 65 | npm run compile:dll 66 | 67 | ``` 68 | 69 | 70 | 开发 71 | 72 | ```bash 73 | 74 | npm run dev 75 | 76 | ``` 77 | 78 | 79 | 构建 80 | 81 | ```bash 82 | 83 | npm run build 84 | 85 | ``` 86 | 87 | 88 | ### 目录结构 89 | 90 | 91 | ```bash 92 | 93 | ├── /dist/ # 项目输出目录 94 | 95 | ├── /src/ # 项目源码目录 96 | 97 | │ ├── /assets/ # 资源文件 98 | 99 | │ ├── /components/ # UI组件 100 | 101 | │ ├── /config/ # 配置文件 102 | 103 | │ ├── /containers/ # 应用主入口 104 | 105 | │ ├── /features/ # 导航页面 106 | 107 | │ ├── /layouts/ # 页面布局 108 | 109 | │ ├── /passport/ # 帐号相关界面，例如登录界面 110 | 111 | │ ├── /redux/ # Redux文件 112 | 113 | │ ├── /services/ # 数据存储相关 114 | 115 | │ ├── /store/ # store配置 116 | 117 | │ ├── /styles/ # 全局样式 118 | 119 | │ ├── index.js # 入口文件 120 | 121 | │ └── index.html # 入口文件的html 122 | 123 | ├── package.json # 项目信息 124 | 125 | ├── postcss.config.js # postcss配置 126 | 127 | ├── webpack.config.js # webpack配置 128 | 129 | ├── webpack.dll.config.js # webpack dll配置 130 | 131 | └── .babelrc # babel配置 132 | 133 | ``` 134 | 135 | 136 | ## License 137 | 138 | 139 | this repo is released under the [MIT 140 | License](https://github.com/thondery/kenote-react-admin/blob/master/LICENSE). 141 | deployedAt: 2017-10-15T02:58:44.256Z 142 | -------------------------------------------------------------------------------- /scaffolds/little-a-dashboard/index.yml: -------------------------------------------------------------------------------- 1 | name: little-a-dashboard 2 | git_url: 'git://github.com/huzzbuzz/little-a-dashboard.git' 3 | author: huzzbuzz 4 | description: >- 5 | a little material-design dashboard build upon reactjs, ant design, dva.js. 基于 6 | react.js, ant design, dva.js 开发的类 material 风格的 dashboard。 7 | tags: 8 | - react 9 | - antd 10 | - dva 11 | - material 12 | coverPicture: 'https://ucarecdn.com/13f7c208-51f7-4d05-9301-c2ad0ed3d50b/' 13 | readme: >+ 14 | # Little A Dashboard 15 | 16 | 17 | a little material-design dashboard build upon reactjs, ant design, dva.js. 基于 18 | react.js, ant design, dva.js 开发的类 material 风格的 dashboard。 19 | 20 | 21 | ## Quick Start 22 | 23 | 24 | 25 | #### Clone 26 | 27 | git clone https://github.com/huzzbuzz/little-a-dashboard.git 28 | 29 | #### Install 30 | 31 | cd little-a-dashboard 32 | npm i or yarn install 33 | 34 | #### Run 35 | 36 | > before run this，you might need to installed roadhog cli with `npm i roadhog 37 | -g` 38 | 39 | ```bash 40 | 41 | npm start 42 | 43 | ``` 44 | 45 | > it will automatically open http://localhost:8000 46 | 47 | 48 | #### Build 49 | 50 | ```bash 51 | 52 | npm run build 53 | 54 | ``` 55 | 56 | > it will automatically generated dist directory 57 | 58 | 59 | 60 | ## Already Done 61 | 62 | - [x] 类 material-ui 风格 63 | 64 | - [x] 登录、退出、锁屏（模拟） 65 | 66 | - [x] 主页及其他示例页 67 | 68 | - [x] 菜单折叠、换肤 69 | 70 | - [x] redux 完整使用示例 71 | 72 | - [x] 动态路由，按需加载 73 | 74 | - [x] 简易 Mock 功能 75 | 76 | - [x] 打包后，Filename Hash 77 | 78 | 79 | ## Further Plan 80 | 81 | - [ ] Automatically select the menu based on the url 82 | 83 | - [ ] Responsive Sidebar 84 | 85 | - [ ] Full RESTful API 86 | 87 | 88 | ## Screenshot 89 | 90 | 91 | #### Dashboard 92 | 93 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/dashboard.gif) 94 | 95 | 96 | #### Login 97 | 98 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/login.gif) 99 | 100 | 101 | 102 | #### Lock 103 | 104 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/lock.gif) 105 | 106 | 107 | 108 | #### alert 109 | 110 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/alert.gif) 111 | 112 | 113 | 114 | #### Charts 115 | 116 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/charts.gif) 117 | 118 | 119 | 120 | #### Table 121 | 122 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/table.gif) 123 | 124 | 125 | 126 | #### Sidebar 127 | 128 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/sidebar.gif) 129 | 130 | 131 | 132 | #### Setting 133 | 134 | ![](https://github.com/huzzbuzz/little-a-dashboard/blob/master/screenshot/setting.gif) 135 | 136 | 137 | 138 | ## Acknowledge 139 | 140 | 141 | - [Ant Design](https://github.com/ant-design/ant-design) 142 | 143 | - [Creative Tim](https://github.com/creativetimofficial) 144 | 145 | - [Angular Material 146 | Dashboard](https://github.com/wangdicoder/angular-material-dashboard) 147 | 148 | - [Antd Admin](https://github.com/zuiidea/antd-admin) 149 | 150 | - [Sweet Alert 2](https://github.com/limonte/sweetalert2) 151 | 152 | 153 | 154 | ## Project Structure 155 | 156 | 157 | ```bash 158 | 159 | ├── /dist/ # 打包输出 160 | 161 | ├── /mock/ # mock数据 162 | 163 | ├── /public/ # 公共文件 164 | 165 | ├── /src/ # 项目源码 166 | 167 | │ ├── /components/ # UI组件 168 | 169 | │ ├── /models/ # 数据模型 170 | 171 | │ ├── /routes/ # 路由组件 172 | 173 | │ │ └── app.js # 入口 174 | 175 | │ ├── /services/ # 数据接口 176 | 177 | │ ├── /themes/ # 项目样式 178 | 179 | │ ├── /utils/ # 工具函数 180 | 181 | │ │ ├── config.js # 项目配置 182 | 183 | │ │ └── request.js # 异步请求函数 184 | 185 | │ ├── route.js # 路由配置 186 | 187 | │ ├── index.js # 入口文件 188 | 189 | │ └── index.html 190 | 191 | ├── package.json # 项目信息 192 | 193 | ├── .roadhogrc.js # roadhog配置 194 | 195 | ├── .roadhogrc.mock.js # roadhog mock 196 | 197 | ├── theme.config.js # 更改 ant 主题 198 | 199 | └── webpack.config.js 200 | 201 | ``` 202 | 203 | 204 | ## License 205 | 206 | 207 | MIT 208 | 209 | deployedAt: 2017-08-01T03:07:39.293Z 210 | -------------------------------------------------------------------------------- /scaffolds/material-demo/index.yml: -------------------------------------------------------------------------------- 1 | name: material-demo 2 | git_url: 'git://github.com/toolaugh/material-demo.git' 3 | author: toolaugh 4 | description: using material-design 5 | tags: [] 6 | coverPicture: null 7 | deployedAt: 2018-07-03T10:55:36.539Z 8 | -------------------------------------------------------------------------------- /scaffolds/mk-demo/index.yml: -------------------------------------------------------------------------------- 1 | name: mk-demo 2 | git_url: 'git://github.com/ziaochina/mk-demo.git' 3 | author: ziaochina 4 | description: 'mk框架实现的demo网站,技术栈：react, redux, immutable,antd' 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/938a18e8-372f-45e3-b011-c037016c18c6/' 7 | readme: |+ 8 | # 右上角有个star,亲点点哈，您懂的 9 | 10 | # mk-demo 11 | 12 | 该demo是使用mk框架创建的一个demo 13 | 14 | [在线效果请点这里](https://ziaochina.github.io/mk-demo/) 15 | 16 | ## 环境准备 17 | 18 | - nodejs最新版 19 | - npm最新版 20 | - chrome 21 | 22 | ## start 23 | 24 | ``` 25 | $ npm install 26 | $ npm start 27 | http://127.0.0.1:8089 28 | ``` 29 | 30 | ## 注意 31 | 32 | - 如果npm start报错not found module 33 | ``` 34 | $ npm cache clean 35 | $ rm -rf node_modules 36 | $ rm -rf package-lock.json 37 | $ npm install 38 | ``` 39 | 40 | 41 | 42 | 43 | deployedAt: 2017-09-20T07:39:14.303Z 44 | -------------------------------------------------------------------------------- /scaffolds/mobxSpa/index.yml: -------------------------------------------------------------------------------- 1 | name: mobxSpa 2 | git_url: 'git://github.com/Tianlikai/mobxSpa.git' 3 | author: Tianlikai 4 | description: 企业级SPA项目，完整开发脚手架 5 | tags: 6 | - react 7 | - react-router V4 8 | - mobx 9 | - webpack V4 10 | - antd 11 | coverPicture: 'https://ucarecdn.com/2fcbb8a6-eae0-493a-8c30-3055cc30d41b/' 12 | deployedAt: 2018-09-15T07:08:56.392Z 13 | -------------------------------------------------------------------------------- /scaffolds/my-blog/index.yml: -------------------------------------------------------------------------------- 1 | name: my-blog 2 | git_url: 'git://github.com/1degrees/my-blog.git' 3 | author: 1degrees 4 | description: 个人博客项目，项目采用next服务端渲染技术，并采用 Node+ MongoDB 辅助搭建后台。 5 | tags: 6 | - blog 7 | - next 8 | coverPicture: 'https://ucarecdn.com/8a84075c-2ca6-48ba-92fa-f76f14515575/' 9 | deployedAt: 2018-10-10T07:56:55.411Z 10 | -------------------------------------------------------------------------------- /scaffolds/myantdpro/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: myantdpro 3 | git_url: 'git://github.com/hankaibo/myantdpro.git' 4 | author: hankaibo 5 | description: 一个简洁的后台管理系统前端代码。 6 | tags: 7 | - antd 8 | - antdpro 9 | - js 10 | - javascript 11 | deployedAt: 2020-04-28T01:55:45.975Z 12 | -------------------------------------------------------------------------------- /scaffolds/next-antd-scafflod/index.yml: -------------------------------------------------------------------------------- 1 | name: next-antd-scafflod 2 | git_url: 'git://github.com/luffyZh/next-antd-scafflod.git' 3 | author: luffyZh 4 | description: A react ssr scafflod with ant-design base on Next.js. 5 | tags: 6 | - React 7 | - Next 8 | - Redux 9 | - Redux-Saga 10 | - ant-design 11 | coverPicture: 'https://ucarecdn.com/0552ab6b-e28e-4427-9f22-e5dd5773e318/' 12 | deployedAt: 2019-01-17T03:23:18.791Z 13 | -------------------------------------------------------------------------------- /scaffolds/next-antd-scaffold/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/38f07c05-6db1-4204-b3a7-157c3679927f/' 2 | name: next-antd-scaffold 3 | git_url: 'git://github.com/luffyZh/next-antd-scaffold.git' 4 | author: luffyZh 5 | description: >- 6 | A simple scaffold based on Next.js for quick use with ant-design, redux, 7 | redux-saga, fetch and pm2. 8 | tags: 9 | - ant-design 10 | - next.js 11 | - react 12 | - redux 13 | - fetch 14 | - redux-saga 15 | - pm2 16 | deployedAt: 2019-03-28T03:51:04.370Z 17 | -------------------------------------------------------------------------------- /scaffolds/next-antd/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/1a3b41ed-7de6-4174-b442-19ff7d804b52/' 2 | name: next-antd 3 | git_url: 'git://github.com/hqwlkj/next-antd.git' 4 | author: hqwlkj 5 | description: 基于 Next13 和 Antd 5 的一个应用框架 6 | tags: 7 | - next 8 | - nextjs 9 | - antd 10 | - admin 11 | deployedAt: 2023-06-11T12:27:43.131Z 12 | -------------------------------------------------------------------------------- /scaffolds/next-react-mobx-antd-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: next-react-mobx-antd-boilerplate 2 | git_url: 'git://github.com/1degrees/next-react-mobx-antd-boilerplate.git' 3 | author: 1degrees 4 | description: '该项目采用React-SSR技术（服务端渲染），项目涉及到技术栈： react、next、mobx、antd、已经webpack基础知识 ' 5 | tags: 6 | - next 7 | - react 8 | - mobx 9 | coverPicture: null 10 | deployedAt: 2018-08-14T03:19:08.239Z 11 | -------------------------------------------------------------------------------- /scaffolds/ng-alain/index.yml: -------------------------------------------------------------------------------- 1 | name: ng-alain 2 | git_url: 'git://github.com/ng-alain/ng-alain.git' 3 | author: ng-alain 4 | description: ng-zorro-antd admin panel front-end framework 5 | tags: 6 | - admin 7 | - angular 8 | coverPicture: 'https://ucarecdn.com/d9d11c6b-dd91-4373-8fbc-a4ff49ea1ed3/' 9 | deployedAt: 2018-10-27T12:29:49.218Z 10 | -------------------------------------------------------------------------------- /scaffolds/parcel-start-kit/index.yml: -------------------------------------------------------------------------------- 1 | name: parcel-start-kit 2 | git_url: 'git://github.com/goWrongWay/parcel-start-kit.git' 3 | author: goWrongWay 4 | description: parcel 5 | tags: 6 | - parcel 7 | - react-loadable 8 | - pretty 9 | - sagas 10 | - redux 11 | coverPicture: 'https://ucarecdn.com/869ff72c-43ad-4fe7-952e-25336fc77bfc/' 12 | readme: | 13 | # parcel-start-kit 14 | 15 | HI 16 | 这里通过 react-loadable 进行代码拆分，使用了 redux，sagas 进行同步异步状态管理。并且引入了 antd。 17 | pretty 提交前自动格式化。简单好用的脚手架，希望得到你的反馈。 18 | 19 | 1. yarn 20 | 2. yarn start 21 | deployedAt: 2018-05-07T07:38:06.396Z 22 | -------------------------------------------------------------------------------- /scaffolds/pv-cli/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: pv-cli 3 | git_url: 'git://github.com/yiyi17/pv-cli.git' 4 | author: yiyi17 5 | description: 项目的初始化工具 6 | tags: 7 | - 脚手架 8 | deployedAt: 2021-10-05T16:38:31.750Z 9 | -------------------------------------------------------------------------------- /scaffolds/react-admin-template/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/06abdd43-dfa6-4204-a917-babe2a460262/' 2 | name: react-admin-template 3 | git_url: 'git://github.com/woleicom/react-admin-template.git' 4 | author: woleicom 5 | description: >- 6 | react开发脚手架二次开发后台管理系统模板,antd、国际化、router、redux、ui仿antd-admin-pro、mock、动态路由、动态菜单权限、页面状态缓存 7 | tags: [] 8 | deployedAt: 2020-05-07T06:35:14.497Z 9 | -------------------------------------------------------------------------------- /scaffolds/react-admin-web/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/90744e5c-7fbe-4ebd-babc-dad58139bd45/' 2 | name: react-admin-web 3 | git_url: 'git://github.com/caihai123/react-admin-web.git' 4 | author: caihai123 5 | description: >- 6 | 本项目是一个后台前端开发模板，他是基于 React18 和 Ant Design 5 7 | 实现，它使用了最新的技术栈，内置了路由权限验证，动态换肤等功能，可以帮助你快速搭建企业级中后台产品原型。 8 | tags: [] 9 | deployedAt: 2024-05-05T14:24:48.408Z 10 | -------------------------------------------------------------------------------- /scaffolds/react-ame-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: react-ame-admin 2 | git_url: 'git://github.com/fachilles/react-ame-admin.git' 3 | author: fachilles 4 | description: >- 5 | A frontend Framework for building admin applications using ReactJS, Antd, Map, 6 | Echarts. 7 | tags: 8 | - React.js 9 | - Map 10 | - ECharts 11 | - Antd 12 | - Saga 13 | coverPicture: 'https://ucarecdn.com/e68a8bb0-5ddb-43f5-b41b-ae7fb2a09234/' 14 | readme: >+ 15 | React AME Admin 16 | 17 | ======== 18 | 19 | [![React](https://img.shields.io/badge/react-^16.2.0-brightgreen.svg?style=flat-square)](https://github.com/facebook/react) 20 | 21 | [![Ant 22 | Design](https://img.shields.io/badge/ant--design-^3.0.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design) 23 | 24 | [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) 25 | 26 | 27 | [![Build 28 | Status](https://travis-ci.org/fachilles/react-admin.svg?branch=master)](https://travis-ci.org/fachilles/react-admin) 29 | 30 | 31 | 32 | 33 | A frontend Framework for building admin applications on top of Restful API, 34 | using React, Antd, Map, Echarts. 35 | 36 | 37 | ## Features 38 | 39 | * Based on the actual project. 40 | 41 | * To provide background admin system with common scenarios, based Antd UI 42 | design language. 43 | 44 | * To provide the Baidu Map visual demo that depends on the react-bmap 45 | component. 46 | 47 | * Include actual Charts, Calendar and so on. 48 | 49 | 50 | ## Installation 51 | 52 | 1.Download or clone code. 53 | 54 | 55 | 2.Install dependency modules. 56 | 57 | ```js 58 | 59 | npm install 60 | 61 | ``` 62 | 63 | 64 | 3.Start project. 65 | 66 | ```js 67 | 68 | npm start 69 | 70 | ``` 71 | 72 | 73 | ## Screen Shot 74 | 75 | ### Dashboard 76 | 77 | ![shot](https://raw.githubusercontent.com/fachilles/fachilles.github.io/master/static/imgs/react-admin/react-admin-1.png) 78 | 79 | 80 | ### Baidu Map 81 | 82 | ![shot](https://raw.githubusercontent.com/fachilles/fachilles.github.io/master/static/imgs/react-admin/react-admin-2.png) 83 | 84 | 85 | ### Echarts 86 | 87 | ![shot](https://raw.githubusercontent.com/fachilles/fachilles.github.io/master/static/imgs/react-admin/react-admin-3.png) 88 | 89 | 90 | 91 | 92 | ## License 93 | 94 | React Admin is licensed under the [MIT 95 | Licence](https://github.com/marmelab/admin-on-rest/blob/master/LICENSE.md). 96 | 97 | deployedAt: 2018-03-05T07:45:54.673Z 98 | -------------------------------------------------------------------------------- /scaffolds/react-antd-admin-jiangxy/index.yml: -------------------------------------------------------------------------------- 1 | name: react-antd-admin-jiangxy 2 | git_url: 'git://github.com/jiangxy/react-antd-admin.git' 3 | author: jiangxy 4 | description: 用React和Ant Design搭建的一个通用管理后台 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/2432a297-b1f9-46b7-ade7-cfcaef91955d/' 9 | readme: "# React通用后台\n\n目标是快速搭建一个可用的后台界面，可以先看下[DEMO(普通)](http://jiangxy.github.io/react-antd-admin) / [DEMO(TAB模式)](http://jiangxy.github.io/react-antd-admin/tabMode)，用户名/密码：guest/guest。友情提示：这个DEMO还是有点大的，加载可能稍慢，注意网速。。。\n\n也可以[点击这里](docs/Screenshot.md)查看截图，包含一些主要特性的演示。\n\n如果对React或Ant Design感兴趣，但又不知如何入手的话，也可以参考下这个项目。\n \n* [这是个啥东西](#需求背景)\n* [Quick Start](#quick-start)\n* [更新记录](CHANGELOG.md)\n* [TODO](docs/TODO.md)\n* [一些说明](#一些说明)\n* [更多文档](docs/README.md)\n\n## 需求背景\n\n其实总结下就一句话：简化后端人员的前端开发。。。\n\n虽然俺是个java开发，但总是难免要做一些前端的东西。比如各种内部系统，各种运营后台，总要有个界面给人用的吧。如果是自己用的话当然命令行就可以将就下了。。。\n\n内部系统么，公司也不会很重视，不会有专业的前端来搞。后端人员自己搞搞，能用就行了。\n\n然而每次写前端都很痛苦，无论以前用velocity+jquery+bootstrap，还是现在用React。首先有很多重复的工作，很多后台界面其实都长得差不多；其次有时会为一些很小的需求投入很大精力，写很多业务逻辑，但这些代码都是不可复用的，感觉花这么多时间不值得，毕竟不是本职工作啊，只是个二手前端。。。甚至有时折腾css就能搞一天。。。\n\n于是就想着能否一劳永逸，搞个比较通用的东西出来，**尽量用写配置的方式替代写代码**。从某种角度上说，和[Metronic](http://keenthemes.com/preview/metronic/)/[AdminLTE](https://almsaeedstudio.com/preview)的目标有点相似。正好前段时间在研究[Ant Design](http://ant.design)，做了一些尝试，于是有了这个项目。当然并不完美，对于React和Ant Design，我也是边学边用的。\n\n首先看下，常见的后台系统都是什么样子的？\n\n![](docs/overview.png)\n\n是不是大部分后端系统的界面都差不多这个样子？分为几个主要的部分：\n\n* 侧边栏：上面是一个logo，下面是可展开的各级菜单。点击菜单项时，右边会展示相应的内容。\n* Header：展示当前登录的用户名和面包屑导航，还可能有自定义的一些菜单之类\n* 内容区：展示具体的内容，跟业务有关的\n* Footer：展示copyright之类的\n* 还有些看不到的，比如登录、注销等\n\n于是我做的**第一件事**，就是搭建一个框架，用配置文件的方式，生成这样一个界面。你可以定义自己的侧边栏（参考[src/menu.js](src/menu.js)），定义点击侧边栏菜单时在右边渲染什么组件（参考[src/index.js](src/index.js)，其实就是React Router的配置），包括header/footer/登录校验/单点登录等，都可以配置（参考[src/config.js](src/config.js)）。\n\n在此基础上，我只要根据不同的后台系统的业务逻辑，去写不同的React组件，再配置下菜单就可以了。貌似简化很多了。缺点就是所有后台都长一个样子。。。\n\n但能否更简化些呢？在各种运营后台中，最常见的操作是什么？我的感觉，最常见的就是各种数据库表的CRUD。我们经常赋予数据库字段各种业务意义。比如将某条记录的status字段改为-1，表示屏蔽这个商品；或者新增一个商品，其实就是某个表新增一条记录之类的。运营的很多操作，是不是都能简化成CRUD？于是我又做了**第二件事**：写了一个通用的CRUD组件，我称之为DBTable。大概长这个样子：\n\n![](docs/DBTable.png)\n\n也是分为几个部分：\n\n* 查询条件区：其实就是个表单，所有表单项都是由配置文件生成的（参考[src/schema/test.querySchema.js](src/schema/test.querySchema.js)），支持各种数据类型\n* 各种操作：提供常用的CRUD/导入/导出等操作\n* 查询结果展示：就是一个表格，这个表格的schema也是可配置的（参考[src/schema/test.dataSchema.js](src/schema/test.dataSchema.js)）\n* 针对单条数据的操作：也是可配置的（参考[src/schema/testAction.dataSchema.js](src/schema/testAction.dataSchema.js#L52)）\n\n另外提醒下，1.4.0版本之后，querySchema和dataSchema不一定要用js文件配置了，可以从服务端异步加载了，参考[异步schema相关配置](docs/AsyncSchema.md)。\n\n使用者只用关心自己的schema文件就可以了，不用在意渲染出来是什么样子。利用DBTable组件，就可以快速实现对某个表的CRUD了（其实不只可以用于数据库，符合这种操作模式的都可以用）。缺点就是没有了明确的业务含义，运营MM们可能不会用。。。她们又不知道CRUD是啥。所以需要培训下，但也是套近乎的好机会啊\uD83D\uDE04。\n\n但是且慢，只有界面是不够的，**如何跟后端对接**？于是我又定义了[后端接口格式](docs/Ajax.md)。只要按这个格式去写后端接口，就可以跟这套通用后台无缝对接。如果你跟我一样是个懒人，而且恰巧是用java的，又恰巧后端是基于Spring的，那也可以使用我提供的一个[小工具](https://github.com/jiangxy/react-java-goos)直接生成后端接口，然后填写自己的业务逻辑就可以了。\n\n使用这套工具，如果一切顺利的话，你能很快的搭出一个后台界面，包含基础的登录/菜单/导航/CRUD/导入/导出等功能，并且界面&体验也还算看得过去，不用任何编码，只是修改配置。\n\n我尽量做到**配置优于代码**，尽量少写代码。但完全不写代码是不可能的，尤其是有个性化需求时，这就要自己权衡了。这套工具比较适合项目初期做个原型、或者对后台要求不高的情况。\n\n## Quick Start\n\n在自己的机器上调试：\n\n1. 保证node版本5.3+，npm版本3.3+\n2. clone下来后，`npm install`，安装必要的依赖\n3. `npm run dev`，启动webpack-dev-server，打开浏览器`http://localhost:8080`查看效果。默认是debug模式，不会请求后端接口，所有数据都是mock的，相关配置见[src/config.js](src/config.js)\n4. 如果有必要的话可以把logLevel设置为debug（见[src/config.js](src/config.js)），会输出详细的debug日志，打开chrome的console就可以看到。\n\n用在自己的项目中：\n\n1. 保证node版本5.3+，npm版本3.3+\n2. clone下来后，`npm install`，安装必要的依赖\n3. 参考[src/menu.js](src/menu.js)，按自己的需要配置侧边栏和顶部菜单\n4. 修改[src/index.js](src/index.js)中的路由表，保证和menu.js中的菜单项一致，否则可能404\n5. 如果要用DBTable组件的话，参考[src/schema](src/schema)下的例子，编写自己的querySchema和dataSchema文件。在路由表中配置DBTable组件时，要把表名作为props传入，类似``。\n6. 修改[src/config.js](src/config.js)中相关配置，比如项目名、footer、单点登录等等。\n7. `npm run prod`，编译js文件，然后将dist目录下的所有js/css/html文件拷贝到自己的工程中，前端的工作就完成了。一般会有一个index.html，一个bundle.min.css，以及多个js文件，跟是否使用动态路由有关。\n8. 开发后端接口，接口规范见[这里](docs/Ajax.md)。如果是java后端，可以使用[这个工具](https://github.com/jiangxy/react-java-goos)帮你生成。\n9. 启动你的web服务，访问`index.html`查看效果。\n\n其他一些命令:\n\n1. `npm run eslint`/`npm run stylelint`/`npm run lesshint`，一些lint工具。\n2. `npm run clean`，删除dist目录下的bundle*.js。\n\n## 一些说明\n\n### 安全/权限问题\n\n目前对安全&权限都没考虑进去，如果有这方面的要求，只能后端校验了。在请求后端接口时校验用户的身份和权限。\n\n权限问题也很麻烦，感觉不太好做成通用的东西，如果有需求的话，还是定制开发比较好。\n \n### 兼容性\n\n能力所限，只能保证chrome中正常使用。。。话说在各种内部系统中，要求只能用chrome也挺常见吧。\n\n如果我解决了兼容性问题，就不是二手前端了。。。\n\n另外由于我是在mac下进行开发的，所以对windows下的情况测试的比较少，有问题欢迎提issue，我尽力解决。\n\n### bundle size\n\n单页应用的首屏渲染一直都是个大问题。webpack打包出来的bundle.js一般都很大，虽然我想了很多办法去优化，但总是还会有1M多，实在减不下去了。。。所以应用到外网时要小心，初次加载时可能比较慢。\n\n内网的话就无所谓了，一般网速都不是问题。\n" 10 | deployedAt: 2017-05-10T10:09:39.074Z 11 | -------------------------------------------------------------------------------- /scaffolds/react-antd-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: react-antd-admin 2 | git_url: 'git://github.com/fireyy/react-antd-admin.git' 3 | author: fireyy 4 | description: React Ant.design Admin UI 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/7c2b3bca-5824-4601-b5c1-8add07d03ae4/' 9 | readme: | 10 | ## React Ant.Design Admin UI 11 | 12 |

13 | 14 | 15 |
16 | Live Demo 17 | 18 |

19 | 20 | ## Features 21 | 22 | - [React](https://facebook.github.io/react/) 23 | - [Redux](https://github.com/reactjs/redux) 24 | - [Ant.Design](http://ant.design/) 25 | - [Babel](https://babeljs.io/) 26 | - [webpack](https://webpack.github.io/) 27 | - [mocha](https://mochajs.org/) 28 | - [enzyme](https://github.com/airbnb/enzyme) 29 | 30 | ## Getting Started 31 | 32 | Just clone the repo and install the necessary node modules: 33 | 34 | ```shell 35 | $ git clone https://github.com/fireyy/react-antd-admin 36 | $ cd react-antd-admin 37 | $ npm install 38 | ``` 39 | 40 | ## Run Dev 41 | 42 | ```shell 43 | $ npm run dev 44 | ``` 45 | 46 | ## Run test spec 47 | 48 | ```shell 49 | $ npm run test 50 | ``` 51 | 52 | ## Build 53 | 54 | ```shell 55 | $ npm run build 56 | ``` 57 | 58 | ## Changelog 59 | 60 | ### 0.1.2 61 | 62 | * 更新依赖组件到最新版本 63 | * 增加 page2 demo 64 | deployedAt: 2017-05-10T09:39:08.923Z 65 | -------------------------------------------------------------------------------- /scaffolds/react-antd-dashboard/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: react-antd-dashboard 3 | git_url: 'git://github.com/theeranan/react-antd-dashboard.git' 4 | author: theeranan 5 | description: null 6 | tags: [] 7 | deployedAt: 2020-10-27T07:58:18.157Z 8 | -------------------------------------------------------------------------------- /scaffolds/react-antd-demo/index.yml: -------------------------------------------------------------------------------- 1 | name: react-antd-demo 2 | git_url: 'git://github.com/luozhihao/react-antd-demo.git' 3 | author: luozhihao 4 | description: 基于react及antd的demo 5 | tags: 6 | - antd 7 | - react 8 | coverPicture: null 9 | readme: > 10 | ## react-antd-demo 11 | 12 | 基于react及antd的demo 13 | 14 | 15 | ## 演示地址 16 | 17 | demo: 18 | [http://luozhihao.github.io/react-antd-demo/index.html](http://luozhihao.github.io/react-antd-demo/index.html) 19 | 20 | 21 | ## 文档说明 22 | 23 | 地址：[http://www.cnblogs.com/luozhihao/p/5579786.html](http://www.cnblogs.com/luozhihao/p/5579786.html) 24 | 25 | 26 | ## 本地运行 27 | 28 | > npm install 29 | 30 | 31 | > npm run dev 32 | deployedAt: 2017-05-10T10:22:39.679Z 33 | -------------------------------------------------------------------------------- /scaffolds/react-antd-multi-tabs-admin/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/66988848-c89d-473f-9145-4110ad61dc0d/' 2 | name: react-antd-multi-tabs-admin 3 | git_url: 'git://github.com/hsl947/react-antd-multi-tabs-admin.git' 4 | author: hsl947 5 | description: ts+react+antd-多页签后台模板(纯净版，非 antd pro！) 6 | tags: 7 | - react 8 | - redux 9 | - hooks 10 | - typescript 11 | - tabs 12 | - antd 13 | - ant design 14 | - multitabs 15 | deployedAt: 2020-09-27T01:42:45.788Z 16 | -------------------------------------------------------------------------------- /scaffolds/react-antd/index.yml: -------------------------------------------------------------------------------- 1 | name: react-antd 2 | git_url: 'git://github.com/sosout/react-antd.git' 3 | author: sosout 4 | description: >- 5 | 基于react + redux + immutable + less + ES6/7 + webpack + fetch + react-router + 6 | antd(1.x)实现的SPA后台管理系统模板 7 | tags: 8 | - react 9 | - antd 10 | - redux 11 | coverPicture: null 12 | readme: "# react-antd(新版后台很快就与大家见面了)\n[![React Native](https://img.shields.io/badge/react-^15.3.2-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)\n[![Redux](https://img.shields.io/badge/redux-^4.4.5-yellowgreen.svg?style=flat-square)](https://github.com/reactjs/redux)\n[![Redux Immutablejs](https://img.shields.io/badge/immutablejs-^0.0.8-orange.svg?style=flat-square)](https://github.com/indexiatech/redux-immutablejs)\n[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.2-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)\n\n[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n## 前言\n> 本工程主要基于react + redux + immutable + less + ES6/7 + webpack + fetch + react-router + antd(1.x)实现的SPA后台管理系统模板。\n\n> 如果觉得不错的话，请star一下吧 \uD83D\uDE0A\n\n> 编码时间：8:00——9:30, 下班时间——24:00，其他时间要工作。代码未优化，处女座代码必须要优化。由于代码延后，先向大家说声抱歉。您有什么问题可以私信我segmentfault。\n\n[线上demo](http://antd.sosout.com/)\n\n## 关于我自己\n> 使用技术： react + redux + immutable + less + ES6/7 + webpack + fetch + react-router + antd(1.x)\n\n> 项目说明： 此项目是本人空余时间搭建的。希望大家提供宝贵的意见和建议，谢谢。\n\n> 邮  箱： sosout@yeah.net\n\n> 个人网站： http://www.sosout.com/\n\n> 个人博客： http://blog.sosout.com/\n\n> 个人简书： http://www.jianshu.com/users/23b9a23b8849/latest_articles\n\n> segmentfault：https://segmentfault.com/u/sosout\n\n### 下载\n\n```\n# git clone\n\ngit clone https://github.com/sosout/react-antd.git\n\ncd react-antd\n```\n\n### 安装\n```bush\n// 安装前请先确保已安装node和npm\n// 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略\nnpm install webpack -g\nnpm install webpack-dev-server -g\n\n// 安装成功后,再安装依赖\nnpm install\n```\n### 运行\n```bush\nnpm run dev （正常编译模式，注意：index.html里必须手动引用app.css，，否则没有样式）\n\nnpm run hot （热替换编译模式，注意：热替换模式下index.html里去掉引用app.css）\n \nnpm run dist （发布生产版本，对代码进行混淆压缩，提取公共代码，分离css文件）\n```\n\n### 访问\n在浏览器地址栏输入[http://127.0.0.1:8888](http://127.0.0.1:8888)\n\n### 目标功能\n- [x] 登录页面\n- [x] 全站布局\n- [x] 全站路由\n- [ ] 对接接口，优化代码(冗余代码，不规则写法，界面样式)\n- [ ] 后台系统常用场景会逐个完善\n\n####历史更新\n *2017.02.20*\n\n \t1. 初始化项目目录;\n\n \t2. webpack配置完成; \n\n \t3. 登录退出;\n\n \t4. 整体布局;\n\n \t5. 菜单映射路由;\n" 13 | deployedAt: 2017-05-10T10:23:09.622Z 14 | -------------------------------------------------------------------------------- /scaffolds/react-app-reflux/index.yml: -------------------------------------------------------------------------------- 1 | name: react-app-reflux 2 | git_url: 'git://github.com/missra-kit/react-app-reflux.git' 3 | author: missra-kit 4 | description: react-app-reflux 5 | tags: 6 | - Reflux 7 | - create-react-app 8 | - router 9 | - React 10 | coverPicture: 'https://ucarecdn.com/db6c2cb0-b193-4ae1-a2da-19112e51681e/' 11 | deployedAt: 2018-09-21T14:27:07.446Z 12 | -------------------------------------------------------------------------------- /scaffolds/react-app/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/117c822c-619f-478f-9cac-f6318f2fd1a5/' 2 | name: react-app 3 | git_url: 'git://github.com/dyywork/react-app.git' 4 | author: dyywork 5 | description: 'http://dingyongya.club:3000' 6 | tags: [] 7 | deployedAt: 2019-10-11T07:23:31.343Z 8 | -------------------------------------------------------------------------------- /scaffolds/react-component-lab/index.yml: -------------------------------------------------------------------------------- 1 | name: react-component-lab 2 | git_url: 'git://github.com/leesx/react-component-lab.git' 3 | author: leesx 4 | description: >- 5 | This is a lab component lab platform, which integrates React, ES2015, Babel, 6 | Ant.design. You can write your own free code on the platform, without having 7 | to worry about the environment configuration problems. 8 | tags: 9 | - react 10 | - es2015 11 | - antd 12 | coverPicture: 'https://ucarecdn.com/307a7801-f7ad-477f-b37f-f95ba09e9eca/' 13 | readme: > 14 | This is a lab component lab platform, which integrates React, ES2015, Babel, 15 | Ant.design. You can write your own free code on the platform, without having 16 | to worry about the environment configuration problems. 17 | 18 | ### 先睹为快 :tada: 19 | 20 | ![readme](https://github.com/leesx/react-component-lab/blob/master/README.png) 21 | deployedAt: 2017-06-17T16:10:57.742Z 22 | -------------------------------------------------------------------------------- /scaffolds/react-frontend-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: react-frontend-boilerplate 2 | git_url: 'git://github.com/huhulab/react-frontend-boilerplate.git' 3 | author: huhulab 4 | description: React admin frontend project boilerplate (Based on ant.design) 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: null 9 | readme: > 10 | ## What's this 11 | 12 | React([ant-design](https://github.com/ant-design/ant-design)) based frontend 13 | boilerplate project. 14 | 15 | 16 | ## How to run it 17 | 18 | ``` bash 19 | 20 | npm install 21 | 22 | # More commands see: package.json 23 | 24 | npm start 25 | 26 | # Open http://localhost:3000/#/demo/test_forms 27 | 28 | ``` 29 | deployedAt: 2017-05-24T12:16:08.998Z 30 | -------------------------------------------------------------------------------- /scaffolds/react-mobx-antd-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: react-mobx-antd-boilerplate 2 | git_url: 'git://github.com/moxun33/react-mobx-antd-boilerplate.git' 3 | author: moxun33 4 | description: react-router4-mobx-antd-webpack3-boilerplate 5 | tags: 6 | - webpack3 7 | - mobx 8 | - antd 9 | coverPicture: null 10 | readme: >- 11 | # react-mobx-antd-boilerplate 开箱即用 12 | 13 | 参考该教程[从零搭建react-family框架教程](https://github.com/brickspert/blog/issues/1)搭建的 14 | react 全家桶框架， 15 | 16 | 与文章不同的是此处使用 (mobx)[https://github.com/mobxjs/mobx] 作为状态管理器，其他部分也作了相应的调整。 17 | 18 | 19 | UI框架方面，集成了 20 | 21 | 22 | 开发笔记 23 | ， 24 | 25 | 26 | # 基础功能 27 | 28 | 29 | 1 react router4 路由和导航 30 | 31 | 32 | 2 mobx 状态管理机，支持多个 stores 文件 33 | 34 | 35 | 3 跨域代理 36 | 37 | 38 | 4 css 加载 39 | 40 | 41 | 5 图片加载 42 | 43 | 44 | 6 axios 请求和响应拦截器 45 | 46 | 47 | 7 懒加载 48 | 49 | 50 | 8 etc 51 | 52 | 53 | # 开发坏境启动 54 | 55 | 56 | 1 npm install 57 | 58 | 59 | 2 npm run dev 60 | 61 | 62 | 3 浏览器打开http://localhost:3001 63 | 64 | 65 | # 生产坏境部署 66 | 67 | 68 | 1 npm run build 69 | 70 | 71 | 2 拷贝dist文件夹至服务器即可 72 | deployedAt: 2017-11-18T14:55:07.596Z 73 | -------------------------------------------------------------------------------- /scaffolds/react-mobx-antd-spa/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/c20360ad-56b3-42e4-b2b2-a92bfa54c4a0/' 2 | name: react-mobx-antd-spa 3 | git_url: 'git://github.com/lazybear1017/react-mobx-antd-router-xcf.git' 4 | author: lazybear1017 5 | description: 基于react-react-app脚手架搭建，mobx状态管理，antd按需加载，router单页应用架子 6 | tags: 7 | - react 8 | - mobx 9 | - antd 10 | deployedAt: 2019-05-31T12:27:40.709Z 11 | -------------------------------------------------------------------------------- /scaffolds/react-mobx-react-router-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/f5659b2a-d653-4031-b770-98ccc21f8510/' 2 | name: react-mobx-react-router-boilerplate 3 | git_url: 'git://github.com/kwzm/react-mobx-react-router-boilerplate.git' 4 | author: kwzm 5 | description: >- 6 | A simple boilerplate based on create-react-app and add mobx, react-router, 7 | linter, prettier and so on. 8 | tags: 9 | - react 10 | - mobx 11 | - react-router 12 | - stylelint 13 | - prettier 14 | - eslint 15 | - mock 16 | - less 17 | - create-react-app 18 | deployedAt: 2019-04-24T12:43:21.702Z 19 | -------------------------------------------------------------------------------- /scaffolds/react-qs/index.yml: -------------------------------------------------------------------------------- 1 | name: react-qs 2 | git_url: 'git://github.com/leesx/react-qs.git' 3 | author: leesx 4 | description: >- 5 | 该架构旨在简化react开发环境的配置与优化工作。构建单页面多页签的react应用。架构中已经设置了最新的API。可以开包即用。详情请看配置文件。谢谢!!! 6 | 稍后做详细说明，有不明白的地方可以 call me 1058315063@qq.com 7 | tags: 8 | - 'react ' 9 | - react-router 10 | - antd 11 | coverPicture: 'https://ucarecdn.com/6d464513-57cd-4cb7-855f-aad2a1710f21/' 12 | readme: "#### 开包即用的React应用架构配置\r\n\r\n> 该架构旨在简化react开发环境的配置与优化工作。架构中已经设置了最新的API。可以`开包即用`。详情请看配置文件。谢谢!!!\r\n稍后做详细说明，有不明白的地方可以 call me `1058315063@qq.com`\r\n\r\n1. 安装 :100:\r\n```\r\nnpm install\r\nnpm install cross-env -g\r\n\r\n```\r\n\r\n2. 开发环境运行 :tada:\r\n```\r\nnpm run dll // 打包第三方库文件\r\nnpm run debug // 启动在3031端口\r\n```\r\n\r\n3. 生产环境 :rocket:\r\n\r\n```\r\nnpm run build //打包编译，编译后的文件在dist目录。\r\n```\r\n\r\n4. 线上预览 :art:\r\n\r\n[线上DEMO](http://zoo.lishangxi.cn)\r\n" 13 | deployedAt: 2017-08-07T10:38:01.386Z 14 | -------------------------------------------------------------------------------- /scaffolds/react-reactRouter-redux-antd-SPA/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/0ff3bbb6-851a-485c-9806-2c229cc409a8/' 2 | name: react-reactRouter-redux-antd-SPA 3 | git_url: 'git://github.com/greenhaha/react-antd.git' 4 | author: greenhaha 5 | description: "\_这是一个基于creat-react-app 搭建的reactrouterv4 redux antd的demo工程" 6 | tags: 7 | - react 8 | - react-router-v4 9 | - redux 10 | - antd 11 | - create-react-app 12 | - spa 13 | deployedAt: 2019-07-26T14:19:27.103Z 14 | -------------------------------------------------------------------------------- /scaffolds/react-redux-antd-okoala/index.yml: -------------------------------------------------------------------------------- 1 | name: react-redux-antd-okoala 2 | git_url: 'git://github.com/okoala/react-redux-antd.git' 3 | author: okoala 4 | description: React & Redux & Ant.Design 5 | tags: 6 | - react 7 | - redux 8 | - antd 9 | coverPicture: null 10 | readme: | 11 | ## React Redux 脚手架 12 | deployedAt: 2017-05-16T04:00:00.678Z 13 | -------------------------------------------------------------------------------- /scaffolds/react-redux-antd-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: react-redux-antd-starter 2 | git_url: 'git://github.com/BetaRabbit/react-redux-antd-starter.git' 3 | author: BetaRabbit 4 | description: A React + Redux + Ant-Design frontend boilerplate 5 | tags: 6 | - antd 7 | - redux 8 | - react 9 | coverPicture: null 10 | readme: | 11 | # react-redux-antd-starter 12 | A React + Redux + Ant-Design frontend boilerplate. 13 | 14 | - [x] React 15 | - [x] Redux 16 | - [x] Ant-Design 17 | - [x] React Router 18 | - [x] React Router Redux 19 | - [x] Redux Actions 20 | - [x] Babel 21 | - [x] PostCSS 22 | - [x] LESS 23 | - [ ] CSS Modules 24 | - [x] ESLint (Airbnb) 25 | - [x] JWT 26 | - [ ] Examples 27 | 28 | ## npm scripts 29 | 30 | ### Dev 31 | ``` 32 | npm run dev 33 | ``` 34 | Open `http://localhost:3000` in your browser. 35 | 36 | ### Lint 37 | 38 | #### Lint only 39 | ``` 40 | npm run lint 41 | ``` 42 | 43 | #### Auto fix 44 | ``` 45 | npm run lint:fix 46 | ``` 47 | 48 | #### Build 49 | ``` 50 | npm run build 51 | ``` 52 | Find built files in ./dist. 53 | 54 | #### Start (production) 55 | ``` 56 | npm run start 57 | ``` 58 | Open `http://localhost:3000` in your browser. 59 | deployedAt: 2017-05-24T12:13:35.771Z 60 | -------------------------------------------------------------------------------- /scaffolds/react-redux-antd/index.yml: -------------------------------------------------------------------------------- 1 | name: react-redux-antd 2 | git_url: 'git://github.com/Justin-lu/react-redux-antd.git' 3 | author: Justin-lu 4 | description: react redux for CMS/Enterprise class App/ERP/Admin with ant-design 5 | tags: 6 | - redux 7 | - antd 8 | - cms 9 | - react 10 | coverPicture: null 11 | readme: "## Feature List\n- hot reloading/browser-sync/redux devtools on dev build\n![](http://ww1.sinaimg.cn/large/785cd1e3gw1f69xb4vta2g20tb0fs7c5.gif)\n- minify/chunkhash/trackJS on production build\n![](http://ww4.sinaimg.cn/large/785cd1e3gw1f69xey2om7g20tb0fs1kx.gif)\n- eslint both of terminal and pre-commit\n![](http://ww1.sinaimg.cn/large/785cd1e3gw1f69xiq41uog20tb0fsn8e.gif)\n![](http://ww2.sinaimg.cn/large/785cd1e3gw1f69zn0p20gj21je0jan1f.jpg)\n- unit test of react/redux\n![](http://ww3.sinaimg.cn/large/785cd1e3gw1f69x6lccmij21020m2juk.jpg)\n![](http://ww2.sinaimg.cn/large/785cd1e3gw1f69zp1v97ij21kw0u8td8.jpg)\n- es6/webapck\n- sass support\n- UI Kit: Ant Design\n- isomorphic-fetch\n- mock data\n- example app\n- ...\n\n## Getting Started\n### install\n\n```\nnpm install --global yarn # install yarn\ngit clone git@github.com:Justin-lu/react-redux-antd.git demo\ncd demo\nyarn\n\n# run dev\nnpm run start\n# run mock server\nnpm run start:mock\n```\n\n### npm script\n\n```shell\n# dev start with test/lint\nnpm run start \n\n# prodction start with browser-sync server\nnpm run start:prod\n\n# production build\nnpm run build\n\n# mock data\nnpm run start:mock\n\n# run test\nnpm run test\n\n# generate test cover report\nnpm run test:cover\n\n```\n\n### eslint\n\n- enable pre-commit hook\n\n```shell\ncd .git/hooks/ && ln -s ./../../tools/pre-commit pre-commit\n```\n\n## Structure\n\n```shell\n├── README.md\n├── coverage # test coverage report\n├── dist # production build directory\n│\_\_ ├── 269268ade790db48e9dcc5eb0db587cd.jpg\n│\_\_ ├── antd.f7f5aa5b8e507559a22db55944433a23.css\n│\_\_ ├── app.89f9817729a2b19dc35586b6f0505c83.css\n│\_\_ ├── app.fa0e73813f3ce3a7605d.js\n│\_\_ ├── favicon.ico\n│\_\_ └── index.html\n├── package.json\n├── src # source directory\n│\_\_ ├── actions # write your redux action here\n│\_\_ │\_\_ ├── users.js # redux action\n│\_\_ │\_\_ └── users.spec.js # redux action test\n│\_\_ ├── components # write your redux components here\n│\_\_ │\_\_ ├── CustomTable.js\n│\_\_ │\_\_ └── NotFoundPage # this is a folder which include NotFoundPage.js, NotFoundPage.scss, NotFoundPage.spec.js\n│\_\_ ├── config\n│\_\_ │\_\_ └── api.js # write your api config here\n│\_\_ ├── constants # some constants\n│\_\_ │\_\_ └── actionTypes.js\n│\_\_ ├── containers # write your redux containers here\n│\_\_ │\_\_ ├── AccessControl.js\n│\_\_ │\_\_ ├── App # App.js App.scss\n│\_\_ ├── data\n│\_\_ │\_\_ └── db.json # mock data file\n│\_\_ ├── favicon.ico\n│\_\_ ├── index.html # template index.html\n│\_\_ ├── index.js # entry file\n│\_\_ ├── reducers # write your redux reducers here.\n│\_\_ │\_\_ ├── index.js # entry file\n│\_\_ │\_\_ ├── initialState.js # put all of the initial state in here\n│\_\_ │\_\_ ├── users.js # users reducers\n│\_\_ │\_\_ └── users.spec.js # users reducers spec\n│\_\_ ├── routes.js # routes\n│\_\_ ├── store # store\n│\_\_ │\_\_ ├── configureStore.dev.js\n│\_\_ │\_\_ ├── configureStore.js\n│\_\_ │\_\_ └── configureStore.prod.js\n│\_\_ └── utils # utils file\n│\_\_ └── cFetch.js\n├── tools # some tools script\n│\_\_ ├── build.js\n│\_\_ ├── chalkConfig.js\n│\_\_ ├── distServer.js\n│\_\_ ├── mock.js\n│\_\_ ├── pre-commit\n│\_\_ ├── srcServer.js\n│\_\_ ├── startMessage.js\n│\_\_ ├── testSetup.js\n│\_\_ └── updateIndexHTML.js\n├── webpack.config.dev.js # webpack config of dev\n└── webpack.config.prod.js # webpack config of production\n```\n" 12 | deployedAt: 2017-05-10T09:38:01.324Z 13 | -------------------------------------------------------------------------------- /scaffolds/react-redux-universal/index.yml: -------------------------------------------------------------------------------- 1 | name: react-redux-universal 2 | git_url: 'git://github.com/subenksaha/react-redux-universal.git' 3 | author: subenksaha 4 | description: React Redux Isomorphic Webpack 2 Boilerplate based on ant.design 5 | tags: 6 | - react 7 | - redux 8 | coverPicture: null 9 | readme: "# React Redux Isomorphic Webpack 2 Boilerplate based on [ant.design](https://ant.design)\n----------\n----------\n\n### About\n----------\nThis boilerplate has following feature:\n\n * Universal React rendering\n * Webpack 2 for client side transformation and bundling\n * Babel js for server side transformation\n * import using absolute path in client and server for make code reuse easier\n * development hot reloading\n * Sequelize Js for backend api(for RDBMS)\n * using ui framework ant.design\n * latest webpack 2 (2.5+)\n * latest React Router 4\n * express-handlebars for server side templating\n * custom console logger for better log visibility & trace\n * nested route on react router 4 supported in server and client\n\n### Technologies\n----------\nImportant technologies used\n* [Node Js](https://nodejs.org/en/)\n* [Express Js](https://expressjs.com/)\n* [React Js](https://github.com/reactjs) version 15.1\n* [React Router](https://github.com/ReactTraining/react-router) version 4+\n* [React Redux](https://github.com/reactjs/react-redux) version 5+\n* [Ant Design](https://ant.design) version 2.5+\n* [Babel Js](https://babeljs.io/) core version 6.24\n* [Webpack](https://webpack.js.org/) version 2.5+\n\n### Installation\n----------\n* Clone the repo\n* cd project folder\n* npm install (in cmd/ terminal)\n\n### Commands\n----------\n* To run development server \n\t>npm start\n* To clean previous asset and build new and then run production server\n \t>npm run build\n* To run production using previuosly built asset\n \t>npm run serve\n* To clean previously built assets\n \t>npm run clean\n\nNow create your awesome project :)\n" 10 | deployedAt: 2017-05-22T02:57:48.122Z 11 | -------------------------------------------------------------------------------- /scaffolds/react-router4-redux-express-webpack4/index.yml: -------------------------------------------------------------------------------- 1 | name: react-router4-redux-express-webpack4 2 | git_url: 'git://github.com/sktony6260/react-router4-redux-express-webpack4.git' 3 | author: sktony6260 4 | description: react16+react-router4+redux+antd+express+webpack4的单页应用 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/9a23d75b-dcd7-433d-8e5f-9210b93c8a63/' 7 | deployedAt: 2018-06-20T02:41:01.617Z 8 | -------------------------------------------------------------------------------- /scaffolds/react-scaffold/index.yml: -------------------------------------------------------------------------------- 1 | name: react-scaffold 2 | git_url: 'git://github.com/starriv/react-scaffold.git' 3 | author: starriv 4 | description: 'A react basic scaffold ' 5 | tags: 6 | - react 7 | coverPicture: null 8 | readme: > 9 | # React Scaffold 10 | 11 | 12 | That is a simple React scaffolding, it contains a React,Redux,React-Router. 13 | 14 | Hope can help you fast develop 15 | 16 | 17 | [![Build 18 | Status](https://travis-ci.org/starriv/react-scaffold.svg?branch=master)](https://travis-ci.org/starriv/react-scaffold) 19 | 20 | [![styled with 21 | prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 22 | 23 | 24 | # Feature 25 | 26 | - ES6+ support, use babel 27 | 28 | - with development and the product model 29 | 30 | - development patterns support heat load 31 | 32 | 33 | # Setup 34 | 35 | - git clone https://git.coding.net/starriv/react-scaffold.git 36 | 37 | - npm install 38 | 39 | 40 | # Run 41 | 42 | default use development model 43 | 44 | - dev: npm run dev && open your brower to http://127.0.0.1:3002 45 | 46 | - prod: npm run build 47 | 48 | 49 | 50 | # React 脚手架 51 | 52 | 这是一个基础React脚手架，它包含有React,React Router, Redux。 53 | 54 | 希望它能帮你住快速开发。 55 | 56 | 57 | # 特点 58 | 59 | - ES6+的支持,使用Babel转换 60 | 61 | - 开发模式 和 产品模式 62 | 63 | - 开发模式热加载支持 64 | 65 | 66 | # 安装 67 | 68 | - git clone https://git.coding.net/starriv/react-scaffold.git 69 | 70 | - npm install 71 | 72 | 73 | # 运行 74 | 75 | 默认为开发模式 76 | 77 | - dev npm run dev && 打开浏览器 http://127.0.0.1:3002 78 | 79 | - prod npm run build 80 | deployedAt: 2017-05-16T04:40:11.100Z 81 | -------------------------------------------------------------------------------- /scaffolds/react-scaffolding-mobx/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/eab7d160-50d2-4241-9d26-67af0e239b36/' 2 | name: react-scaffolding-mobx 3 | git_url: 'git://github.com/xuya227939/react-scaffolding-mobx.git' 4 | author: xuya227939 5 | description: 一款基于Mobx打造的脚手架，自定义修改，随心所欲。 6 | tags: 7 | - mobx 8 | - react 9 | deployedAt: 2020-01-08T01:44:39.254Z 10 | -------------------------------------------------------------------------------- /scaffolds/react-scaffolding/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/68380ef1-7757-4abd-8afe-1faac401f45d/' 2 | name: react-scaffolding 3 | git_url: 'git://github.com/xuya227939/react-scaffolding.git' 4 | author: xuya227939 5 | description: react脚手架(redux) 6 | tags: 7 | - react 8 | - redux 9 | - redux-immutablejs 10 | - immutable 11 | deployedAt: 2020-01-08T01:41:20.495Z 12 | -------------------------------------------------------------------------------- /scaffolds/react-start-kit/index.yml: -------------------------------------------------------------------------------- 1 | name: react-start-kit 2 | git_url: 'git://github.com/jovey-zheng/react-start-kit.git' 3 | author: jovey-zheng 4 | description: >- 5 | A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, 6 | Babel, Express, Ant Design... 7 | tags: 8 | - redux 9 | - antd 10 | coverPicture: null 11 | readme: > 12 | 13 | ## Getting start 14 | 15 | 1. Clone this repo: 16 | ``` 17 | $ git clone https://github.com/jovey-zheng/react-start-kit.git 18 | ``` 19 | 20 | 2. Install dependenices: 21 | ``` 22 | $ npm i 23 | ``` 24 | 25 | 3. Start the project: 26 | ``` 27 | $ npm start // default prot is 3000 28 | $ PORT=80 npm start // using `PORT` to customize port in the CLI 29 | ``` 30 | 31 | 4. Access browser: [http://localhost:3000](http://localhost:3000). Or start with [`minihost`](https://www.npmjs.com/package/minihost): 32 | ``` 33 | h -n start npm start 34 | ``` 35 | and then access: [http://start.t.t](http://start.t.t) 36 | 37 | 5. Then do whatever you want : ). 38 | 39 | ## Contributing 40 | 41 | 42 | Pull requests are welcome! 43 | 44 | 45 | ## LICENSE 46 | 47 | 48 | License under 49 | [MIT](https://github.com/jovey-zheng/react-start-kit/blob/master/LICENSE.md). 50 | deployedAt: 2017-05-16T03:54:22.524Z 51 | -------------------------------------------------------------------------------- /scaffolds/react-study/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/4fb2dbd6-07ab-43e2-96f5-a840446aba16/' 2 | name: react-study 3 | git_url: 'git://github.com/liubin915249126/react-study.git' 4 | author: liubin915249126 5 | description: 'webpack4.16.5+react+react-router-dom4.0+fetch+koa2+antd后台管理页面 ' 6 | tags: 7 | - webpack 8 | - react 9 | - react-router 10 | - dva 11 | deployedAt: 2020-06-05T04:01:03.457Z 12 | -------------------------------------------------------------------------------- /scaffolds/react-typescript-admin/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: null 2 | name: react-typescript-admin 3 | git_url: 'git://github.com/chachaxw/react-typescript-admin.git' 4 | author: chachaxw 5 | description: A starter template for TypeScript and React with AntDesign and Dva 6 | tags: 7 | - react 8 | - typescript 9 | - dva 10 | - antd 11 | deployedAt: 2020-04-15T07:08:26.263Z 12 | -------------------------------------------------------------------------------- /scaffolds/react-webpack-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: react-webpack-boilerplate 2 | git_url: 'git://github.com/amostap/react-webpack-boilerplate.git' 3 | author: amostap 4 | description: Boilerplate for React-Redux/Antd Apps 5 | tags: 6 | - react 7 | - redux 8 | - router 9 | - antd 10 | coverPicture: null 11 | readme: > 12 | # React-Redux Webpack Boilerplate 13 | 14 | 15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | react-router 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |

50 | 51 | 52 | ## Getting Start 53 | 54 | 55 | Run the following commands in your terminal 56 | 57 | 58 | ``` 59 | 60 | git clone git@github.com:amostap/react-webpack-boilerplate.git 61 | 62 | cd react-webpack-boilerplate 63 | 64 | npm install 65 | 66 | npm start 67 | 68 | ``` 69 | 70 | 71 | Then open [http://localhost:8080/](http://localhost:8080/) on your web 72 | browser. 73 | 74 | 75 | ## Production Build 76 | 77 | 78 | `npm run build` and upload content from `dist/` to your server. 79 | 80 | 81 | ## Inspired By 82 | 83 | 84 | * [Иван Акулов про фронтенд](https://t.me/iamakulov_channel) 85 | 86 | * [Put your Webpack on a diet part 87 | 1](https://www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/) 88 | 89 | * [Put your Webpack on a diet part 90 | 2](https://www.contentful.com/blog/2017/10/19/put-your-webpack-bundle-on-a-diet-part-2/) 91 | 92 | * [Put your Webpack on a diet part 93 | 3](https://www.contentful.com/blog/2017/10/27/put-your-webpack-bundle-on-a-diet-part-3/) 94 | 95 | * [Put your Webpack on a diet part 96 | 4](https://www.contentful.com/blog/2017/11/13/put-your-webpack-bundle-on-a-diet-part-4/) 97 | 98 | * [Optimize React build for production with 99 | Webpack](https://michalzalecki.com/optimize-react-build-for-production-with-webpack) 100 | 101 | * [Improve React performance with 102 | Babel](https://medium.com/doctolib-engineering/improve-react-performance-with-babel-16f1becfaa25) 103 | 104 | * [@stereobooster/package.json](https://github.com/stereobooster/package.json) 105 | 106 | * [@facebook/create-react-app](https://github.com/facebook/create-react-app) 107 | 108 | * [@Remchi](https://github.com/Remchi) 109 | 110 | 111 | ## Thanks to 112 | 113 | 114 | * [Aleksandr Zhukov](https://github.com/AleksandrZhukov) for great help 115 | 116 | * [VectorM](https://github.com/VectorM) for help 117 | 118 | 119 | ## License 120 | 121 | 122 | MIT · [Alexandr Ostapenko](https://amostap.com/) 123 | deployedAt: 2018-02-15T22:14:20.940Z 124 | -------------------------------------------------------------------------------- /scaffolds/react-webpack-template/index.yml: -------------------------------------------------------------------------------- 1 | name: react-webpack-template 2 | git_url: 'git://github.com/liushuangbill/react-webpack-template.git' 3 | author: liushuangbill 4 | description: Provide a template for developing React using ES6 syntax and webpack. 5 | tags: 6 | - react 7 | - webpack 8 | coverPicture: 'https://ucarecdn.com/00f37aa0-f2b6-4680-952e-5f2278f3d078/' 9 | readme: > 10 | # React + Webpack template [![Build 11 | Status](https://travis-ci.org/liushuangbill/react-webpack-template.svg?branch=master)](https://travis-ci.org/liushuangbill/react-webpack-template) 12 | 13 | 14 | Provide a template for developing React based applications using ES6 syntax 15 | and webpack. 16 | 17 | 18 | ## use: 19 | 20 | ```npm 21 | 22 | git clone git@github.com:liushuangbill/react-webpack-template.git 23 | your-app-name 24 | 25 | 26 | cd your-app-name 27 | 28 | 29 | git remote set-url origin your-git-url // 修改远程仓库地址 30 | 31 | 32 | npm i 33 | 34 | 35 | npm start // 开发模式运行 36 | 37 | 38 | npm run build // 打包项目 39 | 40 | 41 | // 使用Webpack ProvidePlugin插件引入React，不必重复引入，也可以定义自己的全局变量 42 | 43 | ``` 44 | 45 | 46 | ## 目录结构 47 | 48 | ``` 49 | 50 | . 51 | 52 | |-- config // webpack配置目录 53 | 54 | |-- dist // 打包输出目录 55 | 56 | |-- src // 开发目录 57 | 58 | | |-- index.js // 打包入口文件 59 | 60 | |-- .babelrc 61 | 62 | |-- .editorconfig 63 | 64 | |-- .postcssrc 65 | 66 | |-- README.md 67 | 68 | |-- package.json 69 | 70 | |-- index.html 71 | 72 | . 73 | 74 | ``` 75 | deployedAt: 2018-05-12T17:02:37.686Z 76 | -------------------------------------------------------------------------------- /scaffolds/reactSPA/index.yml: -------------------------------------------------------------------------------- 1 | name: reactSPA 2 | git_url: 'git://github.com/MuYunyun/reactSPA.git' 3 | author: MuYunyun 4 | description: react技术栈的综合运用 5 | tags: 6 | - admin 7 | - antd 8 | coverPicture: 'https://ucarecdn.com/b2b38baf-89b8-4e97-a216-4b10f69db960/' 9 | readme: "### Target\n> 使用React技术栈开发SPA.该项目把一些平时工作、学习中\n遇到的react案例抽离成demo展现出来.\n\n[效果展示](https://muyunyun.github.io/reactSPA)\n\n[文档地址](http://muyunyun.cn/posts/9bfbdbf4/)\n\n* 小模块展示：\n![](http://files.cnblogs.com/files/MuYunyun/reactSPA.gif)\n* redux在项目中的运用demo展示\n![](http://files.cnblogs.com/files/MuYunyun/todoList.gif)\n\n### Usage\n```\n本地运行\nyarn install || npm install\nyarn start || npm start\n```\n\n### Tech Stack\n- [x] 打包构建：Babel Webpack(2.6)\n- [x] 热更新\n- [x] 包管理：Yarn || Npm\n- [x] UI库：React & React-Dom\n- [x] UI组件：Antd(2.10x)\n- [x] 路由：React-Router(4.x) & History\n- [x] JS：ES6\n- [x] 样式：Less\n- [x] 框架：Redux\n- [x] 与后台通信：Fetch\n- [ ] 图片懒加载\n- [ ] 使用ts重构\n\n### Features\n* 音乐模块\n * 用fetch调用了百度音乐api(JSONP)\n* 工具模块\n * 实现对工资、房租、身体指数、年龄的智能计算\n * 用redux实现了待办事项模块\n* 画廊模块\n * 图片懒加载(待开发)\n\n### Third-party libraries\n* css动画库：Animate.css\n* 富文本编辑：react-draft-wysiwyg\n* 全屏插件：screenfull\n* 图片弹层查看插件：photoswipe\n* 日期处理：Moment\n* 可视化图表：echarts-for-react\n\n### Project Structure\n```\n├── build.js 项目打包后的文件\n├── config webpack配置文件\n│ ├──...\n│ ├──webpack.config.dev.js 开发环境配置\n│ ├──webpack.config.prod.js 生产环境配置\n├── node_modules node模块目录\n├── public\n│\_\_ └──index.html\n├── scripts\n│\_\_ ├── build.js 打包项目文件\n│\_\_ ├── start.js 启动项目文件\n│\_\_ └── test.js 测试项目文件\n├── src\n│\_\_ ├── client 汇聚目录\n│\_\_ ├── common 核心目录\n│\_\_ │\_\_ ├── actions redux中的action\n│\_\_ │\_\_ ├── components 通用功能组件\n│\_\_ │\_\_ ├── container 通用样式组件\n│\_\_ │\_\_ ├── images\n│\_\_ │\_\_ ├── pages 页面模块\n│\_\_ │\_\_ ├── reducers redux中的reducer\n│\_\_ │\_\_ ├── utils 工具类\n│\_\_ │\_\_ │ ├── config.js 通用配置(全局变量待实现)\n│\_\_ │\_\_ │ ├── menu.js 菜单配置\n│\_\_ │\_\_ │ └── ajax.js ajax模块(日后用到)\n│\_\_ │\_\_ └── routes.js 前端路由\n│\_\_ └── server 服务端目录(日后用到)\n│\_\_ └── controller\n├── .gitignore\n├── package.json\n├── README.md\n└── yarn.lock\n```" 10 | deployedAt: 2017-06-17T04:05:42.448Z 11 | -------------------------------------------------------------------------------- /scaffolds/saso/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/1ad6bb8a-eaab-40b5-834f-fda1f5f57d52/' 2 | name: saso 3 | git_url: 'git://github.com/huruji/saso.git' 4 | author: huruji 5 | description: Zero config bundler to help you to build fantastic APP 6 | tags: 7 | - react 8 | - Vue 9 | deployedAt: 2019-08-13T10:39:51.236Z 10 | -------------------------------------------------------------------------------- /scaffolds/sls-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: sls-admin 2 | git_url: 'git://github.com/sailengsi/sls-admin.git' 3 | author: sailengsi 4 | description: 'https://webpack2.vue.slsadmin.org' 5 | tags: 6 | - Vue 7 | coverPicture: 'https://ucarecdn.com/90626d59-80b2-41ec-a233-cce4e7cb31e7/' 8 | readme: >+ 9 | # SlsAdmin介绍 10 | 11 | 12 | ##build 13 | 14 | #### webpack2 15 | 16 | [![Build 17 | Status](https://travis-ci.org/sailengsi/sls-admin.svg?branch=webpack2)](https://travis-ci.org/sailengsi/sls-admin) 18 | 19 | #### master 20 | 21 | [![Build 22 | Status](https://travis-ci.org/sailengsi/sls-admin.svg?branch=master)](https://travis-ci.org/sailengsi/sls-admin) 23 | 24 | 25 | ## 注意 26 | 27 | > **目前此项目主分支为webpack2，并且已将webpack2分支设置为默认分支，请知悉。** 28 | 29 | > 30 | 31 | > **此文档目前仅针对webpack2分支，请对照webpack2分支查看文档，谢谢。** 32 | 33 | > 34 | 35 | > **关于master分支，以及还存在的issue，将在下一个空闲时间来解决。** 36 | 37 | > 38 | 39 | > **提issue时，请表明分支，谢谢。** 40 | 41 | 42 | ### **在线演示地址说明** 43 | 44 | |分支 | 地址 | 45 | 46 | | --- | --- | 47 | 48 | | master | 49 | [https://master.vue.slsadmin.org](https://master.vue.slsadmin.org) | 50 | 51 | | webpack2 | 52 | [https://webpack2.vue.slsadmin.org](https://webpack2.vue.slsadmin.org) | 53 | 54 | 55 | ### 文档地址: [https://doc.vue.slsadmin.org](https://doc.vue.slsadmin.org) 56 | 57 | ### 此项目接口PHP版本已开源: 58 | [sls-admin-api-php](https://github.com/sailengsi/sls-admin-api-php) 59 | 60 | 61 | 62 | 63 | ## 访问账号 64 | 65 | ### 账号注册？ 66 | 67 | **后台其实不需要注册，但最近增加了权限功能，为了完整的体验权限功能，也为了方便大家更加测试体验方便，在登录页面，开放了注册功能.** 68 | 69 | 70 | **大家注册的账号默认都归属到管理员(我)的下边，所以，除了我，别人无法操作你以及你添加的数据。** 71 | 72 | 73 | 74 | 此项目是一个后台管理系统，里面有完整并且实际的增删改查功能，有普通模式操作，也有高级模式操作，用此项目，可以快速帮您完成后台功能。 75 | 76 | 此项目重点突出在于架构模式，相比那些有很多页面，但架构混乱的项目来说，一个真正的前端应该更在意项目的架构。 77 | 78 | 79 | 80 | ## 架构模式特点： 81 | 82 | * 易于协作开发 83 | 84 | * 方便拓展与维护 85 | 86 | * 结构清晰明了 87 | 88 | * 灵活，可自定义配置 89 | 90 | 91 | 92 | > 基于这个模式，可以拓展更为强大的功能，诸如类似其他后台模板里面的那些功能等，都可以用组件化形式开发，注入到此项目。 93 | 94 | 95 | 96 | 97 | ## 涵盖技术包含 98 | 99 | 100 | #### 技术点： 101 | 102 | * [Vue](http://cn.vuejs.org/) 当下最流行的前端JavaScript框架 103 | 104 | * [VueRouter](https://router.vuejs.org/zh-cn/) 基于Vue的路由插件 105 | 106 | * [Vuex](https://vuex.vuejs.org/zh-cn/) 管理Vue中多组件共享状态的插件，类似react的redux 107 | 108 | * [Axios](https://github.com/mzabriskie/axios) 当前最流行的一个http库 109 | 110 | * [ElementUI](https://github.com/ElemeFE/element) 饿了么团队开发的基于Vue的一套UI组件库 111 | 112 | 113 | #### 富文本： 114 | 115 | * [wangEditor](http://www.wangeditor.com/) 一款国人开发的富文本编辑器 116 | 117 | 118 | #### 七牛云： 119 | 120 | * [七牛云开发文档](https://developer.qiniu.com/) 官方开发者文档 121 | 122 | * [七牛JavaScript版SDK](https://developer.qiniu.com/kodo/sdk/1283/javascript) 123 | Web端JavaScript版SDK文档 124 | 125 | * [七牛PHP版SDK](https://developer.qiniu.com/kodo/sdk/1241/php) 服务端PHP版SDK文档 126 | 127 | 128 | 129 | ## 沟通交流 130 | 1. 如果您有什么问题，可提issues，也可加QQ群讨论：613102022。 131 | 2. 更新日志：可查看下一章更新记录。 132 | 3. 广告：个人官方博客：https://sailengsi.com 交流技术，交流心得。 133 | 134 | 135 | 136 | 137 | 138 | deployedAt: 2017-09-09T12:14:29.132Z 139 | -------------------------------------------------------------------------------- /scaffolds/star-initReact-example/index.yml: -------------------------------------------------------------------------------- 1 | name: star-initReact-example 2 | git_url: 'git://github.com/pookpal/star-initReact-example.git' 3 | author: pookpal 4 | description: 'demo with react,ant-design,redux,react-router,webpack,babel' 5 | tags: 6 | - antd 7 | - redux 8 | - react 9 | coverPicture: 'https://ucarecdn.com/286f108f-63b8-4477-8c65-4ec919390c7f/' 10 | readme: >+ 11 | # star-initReact-example 12 | 13 | 14 | A demo with star-initReact-example 15 | 16 | 17 | 18 | ##效果截图 19 | 20 | >* 首页 21 | 22 | 23 | ![首页](https://raw.githubusercontent.com/pookpal/star-initReact-example/master/screenshots/1.png) 24 | 25 | 26 | >* 列表页 27 | 28 | 29 | ![播放页](https://raw.githubusercontent.com/pookpal/star-initReact-example/master/screenshots/2.png) 30 | 31 | 32 | >* 弹框 33 | 34 | 35 | ![播放页](https://raw.githubusercontent.com/pookpal/star-initReact-example/master/screenshots/3.png) 36 | 37 | 38 | >* 表格组件 39 | 40 | 41 | ![播放页](https://raw.githubusercontent.com/pookpal/star-initReact-example/master/screenshots/4.png) 42 | 43 | 44 | >* echart 45 | 46 | 47 | ![播放页](https://raw.githubusercontent.com/pookpal/star-initReact-example/master/screenshots/5.png) 48 | 49 | 50 | 51 | ## 使用技术和实现功能 52 | 53 | 1. webpack + React +React-router + React-redux +ES6 + ant-design 54 | 55 | 2. React热替换 56 | 57 | 3. 国际化 58 | 59 | 4. 整合Echart 60 | 61 | 5. 自定义ant-design主题和局部样式 62 | 63 | 64 | 65 | 66 | ## 测试账号 67 | 68 | admin 69 | 70 | 123456 71 | 72 | 73 | ## 准备环境 74 | 75 | 76 | ```bash 77 | 78 | 79 | $ git clone git@github.com:pookpal/star-initReact-example.git 80 | 81 | $ npm install -g webpack rimraf 82 | 83 | $ cd star-initReact-example 84 | 85 | $ npm install 86 | 87 | 88 | //mac环境下命令行 89 | 90 | $ npm run dev:mac //MAC环境下面打包部署命令 91 | 92 | $ npm run build:mac // MAC环境下打包部署命令 93 | 94 | 95 | 96 | //window环境下命令行 97 | 98 | D:\www\star-initReact-example> npm run dev:win // window下面开发调试 99 | 100 | D:\www\star-initReact-example> npm run build:win // window环境下打包部署命令 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | ``` 110 | 111 | 112 | 想要更好的开发体验，还需安装两个 Chrome 插件：[Redux 113 | DevTools](https://chrome.google.com/webstore/detail/lmhkpmbekcpmknklioeibfkpmmfibljd) 114 | 和 115 | [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) 116 | 。 117 | 118 | 119 | ## 启动调试 120 | 121 | 122 | ```bash 123 | 124 | ### 此演示脚本为mac环境下运行 125 | 126 | $ npm run dev:mac 127 | 128 | ``` 129 | 130 | 131 | ## 打包构建代码 132 | 133 | 134 | ```bash 135 | 136 | ### 此演示脚本为mac环境下运行 137 | 138 | // 生成国际化文件供配置 139 | 140 | $ npm run build:i18n-js:mac 141 | 142 | 143 | // 配置国际化文件后打包构建生成最终部署代码 144 | 145 | $ npm run build:mac 146 | 147 | 148 | ``` 149 | 150 | 151 | ## 目录结构 152 | 153 | 154 | ``` 155 | 156 | . 157 | 158 | ├── /dist/ # 构建输出的文件会在这里 159 | 160 | ├── /scripts/ # 生成国际化配置文件脚本 161 | 162 | ├── /node_modules/ # 第三方类库和工具 163 | 164 | ├── /src/ # 应用源码 165 | 166 | ├ ├── /assets/ # 静态资源文件 167 | 168 | │ ├── /components/ # React components 169 | 170 | │ ├── /entries/ # 应用入口 171 | 172 | │ ├── /locale/ # 国际化配置文件,会自动生成 173 | 174 | │ ├── /route/ # 路由信息 175 | 176 | │ ├── /store/ # redux 177 | 178 | │ ├── /styles/ # 全局样式 179 | 180 | │ ├── /temp/ # 临时文件，会自动生成 181 | 182 | │ └── /views/ # 页面组件 183 | 184 | ├── .babelrc # 配置 babel 185 | 186 | ├── webpack.config.js # 扩展开发调试 webpack 配置 187 | 188 | ├── webpack.production.config.js # 扩展打包构建 webpack 配置 189 | 190 | └── package.json # 配置入口文件、依赖和 scripts 191 | 192 | ``` 193 | 194 | 195 | 196 | ## 内置类库 197 | 198 | 199 | - [react](https://github.com/facebook/react) 200 | 201 | - [redux](https://github.com/reactjs/redux) 202 | 203 | - [redux-actions](https://github.com/acdlite/redux-actions) 204 | 205 | - [react-router](https://github.com/reactjs/react-router) 206 | 207 | - [classnames](https://github.com/JedWatson/classnames) 208 | 209 | - [react-router](https://github.com/reactjs/react-router) 210 | 211 | - [react-router-redux](https://github.com/reactjs/react-router-redux) 212 | 213 | 214 | ## 工具特性 215 | 216 | 217 | 热替换和 LiveReload 218 | 219 | 220 | > 基于 [Webpack Vanilla 221 | HMR](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)，支持 222 | `components`, `router`, `views` 目录的模块热替换，其余目录的修改则会自动刷新页面。 223 | 224 | 225 | > CSS 的自动刷新需通过 226 | [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) 227 | Chrome 插件配合使用。 228 | 229 | 230 | > - [Why Vanilla HMR](https://github.com/reactjs/redux/pull/1455) 231 | 232 | 233 | 支持 css-modules 234 | 235 | 236 | > src/components和src/views中的 less 文件会被解析为 css-modules 237 | 238 | 239 | ## License 240 | 241 | MIT 242 | 243 | deployedAt: 2017-05-16T03:56:36.098Z 244 | -------------------------------------------------------------------------------- /scaffolds/ts-dva/index.yml: -------------------------------------------------------------------------------- 1 | name: ts-dva 2 | git_url: 'git://github.com/huang6349/ts-dva.git' 3 | author: huang6349 4 | description: TypeScript + dva + Antd 5 | tags: 6 | - typescript 7 | - dva 8 | - antd 9 | coverPicture: 'https://ucarecdn.com/a042cff3-e056-422d-abec-fef52d1e2a0b/' 10 | readme: >- 11 | ts-dva 12 | 13 | ======= 14 | 15 | 16 | * Language:TypeScript 17 | 18 | 19 | * Framework:dva 20 | 21 | 22 | * UI:ant.design 23 | 24 | 25 | Table of Contents 26 | 27 | ------- 28 | 29 | [目录] 30 | 31 | 32 | * [Install[安装依赖]](#install) 33 | 34 | * [Usage[用法]](#usage) 35 | 36 | * [Demo[项目演示]](#demo) 37 | 38 | * [Links[教程链接]](#links) 39 | 40 | * [Thank[致谢]](#thank) 41 | 42 | * [License[开源协议]](#license) 43 | 44 | 45 | Install 46 | 47 | ------- 48 | 49 | [安装依赖] 50 | 51 | 52 | ```bash 53 | 54 | node >= 4.2.0 55 | 56 | ``` 57 | 58 | ```bash 59 | 60 | $ npm install -g typescript 61 | 62 | $ npm install 63 | 64 | ``` 65 | 66 | 67 | [可选操作] 68 | 69 | ```bash 70 | 71 | $ npm install -g typings 72 | 73 | ``` 74 | 75 | 76 | Usage 77 | 78 | ------- 79 | 80 | [用法] 81 | 82 | 83 | #### development[开发环境] 84 | 85 | 86 | ```bash 87 | 88 | $ npm start 89 | 90 | ``` 91 | 92 | 访问：[http://127.0.0.1:8989](http://127.0.0.1:8989) 93 | 94 | 95 | #### test[测试环境] 96 | 97 | 98 | ```bash 99 | 100 | $ npm run test 101 | 102 | ``` 103 | 104 | 105 | #### production[生产环境] 106 | 107 | 108 | ```bash 109 | 110 | $ npm run build 111 | 112 | ``` 113 | 114 | 115 | Demo 116 | 117 | ------- 118 | 119 | [项目演示] 120 | 121 | 122 | 登录1 123 | 124 | ![登录1](https://github.com/huang6349/Pictures/blob/master/ts-dva/2016-10-27_111333.png) 125 | 126 | 127 | 布局1 128 | 129 | 130 | ![布局1](https://github.com/huang6349/Pictures/blob/master/ts-dva/2016-10-14_163215.png) 131 | 132 | 133 | Links 134 | 135 | ------- 136 | 137 | [教程链接] 138 | 139 | 140 | * [Microsoft/TypeScript](https://github.com/Microsoft/TypeScript) 141 | 142 | * [facebook/react](https://github.com/facebook/react) 143 | 144 | * [dvajs/dva](https://github.com/dvajs/dva) 145 | 146 | * [ant-design/ant-design](https://github.com/ant-design/ant-design) 147 | 148 | * 149 | [sorrycc/dva-boilerplate-typescript](https://github.com/sorrycc/dva-boilerplate-typescript) 150 | 151 | 152 | Thank 153 | 154 | ------- 155 | 156 | [致谢] 157 | 158 | * [sorrycc](https://github.com/sorrycc) 159 | 160 | 161 | License 162 | 163 | ------- 164 | 165 | [开源协议] 166 | 167 | 168 | [MIT](https://tldrlegal.com/license/mit-license) 169 | deployedAt: 2017-05-16T03:48:26.866Z 170 | -------------------------------------------------------------------------------- /scaffolds/ts-react-webpack/index.yml: -------------------------------------------------------------------------------- 1 | name: ts-react-webpack 2 | git_url: 'git://github.com/YDJ-FE/ts-react-webpack.git' 3 | author: YDJ-FE 4 | description: 'a starter-template with typescript, react, mobx and webpack...' 5 | tags: 6 | - typescript 7 | - react 8 | - webpack 9 | - mobx 10 | - babel7 11 | coverPicture: 'https://ucarecdn.com/7c72dccf-48db-472c-a70a-63d90dbc31a4/' 12 | deployedAt: 2019-02-11T09:10:24.482Z 13 | -------------------------------------------------------------------------------- /scaffolds/ts_react_mobx/index.yml: -------------------------------------------------------------------------------- 1 | name: ts_react_mobx 2 | git_url: 'git://github.com/dreambo8563/ts_react_mobx.git' 3 | author: dreambo8563 4 | description: ts+react +mobx boilerplate 5 | tags: 6 | - webpack3 7 | - antd 8 | - ts 9 | - mobx 10 | - react16 11 | coverPicture: 'https://ucarecdn.com/6b1e5f7c-3422-4f46-8618-404d87ebf654/' 12 | readme: | 13 | ## Setup 14 | 15 | ``` 16 | $ npm install 17 | ``` 18 | 19 | ## Running 20 | 21 | ``` 22 | $ npm start 23 | ``` 24 | 25 | ## Build 26 | 27 | ``` 28 | $ npm run build 29 | ``` 30 | 31 | ## Rules: 32 | 33 | 全局 css /src/assets/main.css 34 | 35 | ## Router 命名规则 36 | 37 | /系统/模块/页面../:id 等前面 3 层要确定,为了左侧导航能够相应变化 38 | 39 | ## 路由定义在 40 | 41 | /src/app/routers 42 | 43 | ## store 定义 44 | 45 | /src/app/stores 46 | 47 | * AppStore 存储应用级别的数据 如 loading 48 | * RouterStore 针对组件中需要应用路由是注入 49 | 50 | - 其他: 为需要进行组件通信时的页面级别数据 51 | 52 | ## 容器类组件 53 | 54 | /src/app/containers 55 | 56 | * 不同页面的最外层组件结构 同 系统 -> 模块 -> 页面如 sales -> orders -> List 页面 57 | 58 | #layouts 59 | 存放大型布局的容器组件 60 | 61 | * SidebarLayout 所有系统内部要展示左侧导航的布局 62 | 63 | ## 组件库 64 | 65 | /src/app/components 66 | 67 | 不同模块组件需建立自己的目录 如 Module1 下的 component1 建立 index.tsx 和 style.css 68 | 69 | 不同模块间通用组件直接放在 Common 目录下 70 | 71 | ## constants 72 | 73 | * stores - store 名字 74 | * text 所有文字 -便于以后国际化,统一处理 75 | * api - 所有 api 76 | * url - 路由地址相关 77 | 78 | ## utils 帮助函数 79 | 80 | * 请求相关 81 | * loadComponentXXX 异步加载组件 82 | deployedAt: 2018-04-26T02:08:25.578Z 83 | -------------------------------------------------------------------------------- /scaffolds/ttk-app-core/index.yml: -------------------------------------------------------------------------------- 1 | name: ttk-app-core 2 | git_url: 'git://github.com/thethreekingdoms/ttk-app-core.git' 3 | author: thethreekingdoms 4 | description: 前端框架（基于react+redux） 5 | tags: 6 | - antd 7 | - react 8 | - redux 9 | - react-redux 10 | - react-router 11 | - ttk 12 | coverPicture: 'https://ucarecdn.com/b90f216f-037c-4750-9004-99d9e6bd5640/' 13 | deployedAt: 2019-08-01T01:04:22.616Z 14 | -------------------------------------------------------------------------------- /scaffolds/typerx/index.yml: -------------------------------------------------------------------------------- 1 | name: typerx 2 | git_url: 'git://github.com/vellengs/typerx.git' 3 | author: vellengs 4 | description: >- 5 | A lightweight typescript annotation based MEAN(Mongodb Express Angular2+ 6 | Nodejs). 7 | tags: 8 | - angular 9 | - 'typescript ' 10 | - nodejs 11 | - mongodb 12 | - antd 13 | - 'admin ' 14 | - ng-zorro 15 | - ng-alain 16 | - swagger 17 | - rest api 18 | - express 19 | coverPicture: 'https://ucarecdn.com/38122a83-8c72-4995-ae46-101975bdba31/' 20 | deployedAt: 2018-05-26T10:59:10.748Z 21 | -------------------------------------------------------------------------------- /scaffolds/typescript-react-hot-reload/index.yml: -------------------------------------------------------------------------------- 1 | name: typescript-react-hot-reload 2 | git_url: 'git://github.com/chunliu/typescript-react-hot-reload.git' 3 | author: chunliu 4 | description: 'This is a scaffold with react, redux, antd and typescript' 5 | tags: 6 | - typescript 7 | - react 8 | - redux 9 | - webpack-dev-server 10 | coverPicture: 'https://ucarecdn.com/020d75e1-0ff2-464f-8165-3887e30d5fe7/' 11 | readme: >- 12 | # typescript-react-hot-reload 13 | 14 | 15 | This is a very simple template for creating React applications with 16 | TypeScript. It is configured with hot loader and webpack dev server to allow 17 | changes to be live reloaded. 18 | 19 | 20 | This template is based on the following packages: 21 | 22 | 23 | * [webpack](https://webpack.js.org/) 24 | 25 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 26 | 27 | * [react-hot-loader](https://github.com/gaearon/react-hot-loader) 28 | 29 | * 30 | [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader) 31 | 32 | * [antd](https://ant.design/docs/react/introduce) 33 | 34 | 35 | Other reference: 36 | 37 | 38 | * [TypeScript 39 | document](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html) 40 | 41 | * [Hot Module Replacement in 42 | webpack](https://webpack.js.org/guides/hmr-react/) 43 | 44 | 45 | How to use this template: 46 | 47 | 48 | ``` 49 | 50 | git clone https://github.com/chunliu/typescript-react-hot-reload.git 51 | 52 | npm install 53 | 54 | npm start 55 | 56 | ``` 57 | deployedAt: 2017-08-15T14:43:53.518Z 58 | -------------------------------------------------------------------------------- /scaffolds/ui/index.yml: -------------------------------------------------------------------------------- 1 | name: ui 2 | git_url: 'git://github.com/tianzx/ui.git' 3 | author: tianzx 4 | description: frontend project separate from backend 5 | tags: 6 | - react 7 | - antd 8 | coverPicture: null 9 | readme: > 10 | ## React Ant.Design Admin UI 11 | 12 | 13 | ## Features 14 | 15 | 16 | - [React](https://facebook.github.io/react/) 17 | 18 | - [Redux](https://github.com/reactjs/redux) 19 | 20 | - [Ant.Design](http://ant.design/) 21 | 22 | - [Babel](https://babeljs.io/) 23 | 24 | - [webpack2](https://webpack.github.io/) 25 | 26 | - [mocha](https://mochajs.org/) 27 | 28 | - [enzyme](https://github.com/airbnb/enzyme) 29 | 30 | - [Travis](https://travis-ci.org/) 31 | 32 | - [Docker](https://www.docker.com/) 33 | 34 | 35 | ## Getting Started 36 | 37 | 38 | Just clone the repo and install the necessary node modules: 39 | 40 | 41 | ```shell 42 | 43 | $ git clone https://github.com/tianzx/ui.git 44 | 45 | $ cd ui 46 | 47 | $ npm install 48 | 49 | $ npm start 50 | 51 | ``` 52 | 53 | 54 | ## Run test spec 55 | 56 | 57 | ```shell 58 | 59 | $ npm run test 60 | 61 | ``` 62 | 63 | 64 | ## Run production build 65 | 66 | 67 | ```shell 68 | 69 | $ vi /etc/environment and export NODE_ENV='production' 70 | 71 | $ npm run build 72 | 73 | ``` 74 | 75 | 76 | in your local machine 77 | 78 | ```shell 79 | 80 | $ scp -r localPath/ui/dist/ remotePath:ui 81 | 82 | ``` 83 | 84 | 85 | in your remote machine 86 | 87 | ```shell 88 | 89 | $ mv dist/* ./ 90 | 91 | $ cnpm install pm2 -g 92 | 93 | $ pm2 start server.js 94 | 95 | ``` 96 | 97 | 98 | notation: before execute the command ,you must ensure you have executed the 99 | command 100 | 101 | 102 | ```shell 103 | 104 | $ cnpm install rimraf -g 105 | 106 | ``` 107 | 108 | 109 | ## NOTICE 110 | 111 | 112 | ### replace npm with cnpm(in China) 113 | 114 |     https://npm.taobao.org/ 115 | 116 | ### add n to admin nodejs version 117 | 118 |     https://github.com/tj/n 119 | 120 | 121 | ### update npm 122 | 123 |     cnpm update -g npm 124 | deployedAt: 2017-05-24T13:36:54.544Z 125 | -------------------------------------------------------------------------------- /scaffolds/umi-antd-mobile/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/b680f69d-a6ac-4fb8-b732-461a8315f61f/' 2 | name: umi-antd-mobile 3 | git_url: 'git://github.com/hqwlkj/umi-antd-mobile.git' 4 | author: hqwlkj 5 | description: 基于umi@4.x + antd-mobile@next 快速构建h5及网页app应用 6 | tags: 7 | - mobile 8 | - antd-mobile 9 | - umi 10 | - web-app 11 | - webpack5 12 | - typescript 13 | deployedAt: 2023-06-12T00:10:12.925Z 14 | -------------------------------------------------------------------------------- /scaffolds/umi-antd-pro/index.yml: -------------------------------------------------------------------------------- 1 | name: umi-antd-pro 2 | git_url: 'git://github.com/xiaohuoni/umi-antd-pro.git' 3 | author: xiaohuoni 4 | description: antd-design-pro 的 umi版本 5 | tags: 6 | - umi 7 | - admin 8 | - antd-design-pro 9 | coverPicture: 'https://ucarecdn.com/a6f70746-3528-4696-821a-f487d9de329e/' 10 | readme: > 11 | [English](./README.en-us.md) | 简体中文 12 | 13 | # Umi Antd Pro 14 | 15 | 所有的组件和页面逻辑保留 Ant Design Pro的设计。 16 | 17 | 18 | ## 增加 19 | 20 | - dva.js onError 和 initialState 21 | 22 | - 增加配置服务器地址，支持build之后可预览 23 | 24 | - 25 | 增加[antd-pro-server](https://github.com/xiaohuoni/antd-pro-server)，主要修改.umirc.mock.js 26 | 27 | 28 | # Ant Design Pro 29 | 30 | 31 | [![](https://img.shields.io/travis/ant-design/ant-design-pro.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-pro) 32 | [![Build 33 | status](https://ci.appveyor.com/api/projects/status/67fxu2by3ibvqtat/branch/master?svg=true)](https://ci.appveyor.com/project/afc163/ant-design-pro/branch/master) 34 | [![Gitter](https://badges.gitter.im/ant-design/ant-design-pro.svg)](https://gitter.im/ant-design/ant-design-pro?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 35 | 36 | 37 | 开箱即用的中台前端/设计解决方案。 38 | 39 | 40 | ![](https://gw.alipayobjects.com/zos/rmsportal/xEdBqwSzvoSapmnSnYjU.png) 41 | 42 | 43 | - 预览：http://preview.pro.ant.design 44 | 45 | - 首页：http://pro.ant.design/index-cn 46 | 47 | - 使用文档：http://pro.ant.design/docs/getting-started-cn 48 | 49 | - 更新日志: http://pro.ant.design/docs/changelog-cn 50 | 51 | - 常见问题：http://pro.ant.design/docs/faq-cn 52 | 53 | - 国内镜像：http://ant-design-pro.gitee.io 54 | 55 | 56 | ## 特性 57 | 58 | 59 | - :gem: **优雅美观**：基于 Ant Design 体系精心设计 60 | 61 | - :triangular_ruler: **常见设计模式**：提炼自中后台应用的典型页面和场景 62 | 63 | - :rocket: **最新技术栈**：使用 React/dva/antd 等前端前沿技术开发 64 | 65 | - :iphone: **响应式**：针对不同屏幕大小设计 66 | 67 | - :art: **主题**：可配置的主题满足多样化的品牌诉求 68 | 69 | - :globe_with_meridians: **国际化**：内建业界通用的国际化方案 70 | 71 | - :gear: **最佳实践**：良好的工程实践助您持续产出高质量代码 72 | 73 | - :1234: **Mock 数据**：实用的本地数据调试方案 74 | 75 | - :white_check_mark: **UI 测试**：自动化测试保障前端产品质量 76 | 77 | 78 | ## 模板 79 | 80 | 81 | ``` 82 | 83 | - Dashboard 84 | - 分析页 85 | - 监控页 86 | - 工作台 87 | - 表单页 88 | - 基础表单页 89 | - 分步表单页 90 | - 高级表单页 91 | - 列表页 92 | - 查询表格 93 | - 标准列表 94 | - 卡片列表 95 | - 搜索列表（项目/应用/文章） 96 | - 详情页 97 | - 基础详情页 98 | - 高级详情页 99 | - 结果 100 | - 成功页 101 | - 失败页 102 | - 异常 103 | - 403 无权限 104 | - 404 找不到 105 | - 500 服务器出错 106 | - 帐户 107 | - 登录 108 | - 注册 109 | - 注册成功 110 | ``` 111 | 112 | 113 | ## 使用 114 | 115 | 116 | ```bash 117 | 118 | $ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 119 | 120 | $ cd ant-design-pro 121 | 122 | $ npm install 123 | 124 | $ npm start # 访问 http://localhost:8000 125 | 126 | ``` 127 | 128 | 129 | 也可以使用集成化的 130 | [ant-design-pro-cli](https://github.com/ant-design/ant-design-pro-cli) 工具。 131 | 132 | 133 | ```bash 134 | 135 | $ npm install ant-design-pro-cli -g 136 | 137 | $ mkdir pro-demo && cd pro-demo 138 | 139 | $ pro new 140 | 141 | ``` 142 | 143 | 144 | 更多信息请参考 [使用文档](http://pro.ant.design/docs/getting-started)。 145 | 146 | 147 | ## 兼容性 148 | 149 | 150 | 现代浏览器及 IE11。 151 | 152 | 153 | ## 参与贡献 154 | 155 | 156 | 我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :smiley:： 157 | 158 | 159 | - 在你的公司或个人项目中使用 Ant Design Pro。 160 | 161 | - 通过 [Issue](http://github.com/ant-design/ant-design-pro/issues) 报告 bug 或进行咨询。 162 | 163 | - 提交 [Pull Request](http://github.com/ant-design/ant-design-pro/pulls) 改进 Pro 164 | 的代码。 165 | deployedAt: 2018-05-09T09:57:52.113Z 166 | -------------------------------------------------------------------------------- /scaffolds/v3-admin/index.yml: -------------------------------------------------------------------------------- 1 | coverPicture: 'https://ucarecdn.com/7b2eb3a7-4c41-4c6f-8e67-f37d948ac3f4/' 2 | name: v3-admin 3 | git_url: 'git://github.com/un-pany/v3-admin.git' 4 | author: un-pany 5 | description: >- 6 | ✨ a vue3 admin template 一个简单的 vue3 模板，采用 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import dva from 'dva-react-router-3'; 2 | import createLoading from 'dva-loading'; 3 | import { notification } from 'antd'; 4 | import './index.html'; 5 | import './index.less'; 6 | 7 | // 1. Initialize 8 | const app = dva({ 9 | onError(e) { 10 | // eslint-disable-next-line 11 | console.error(e); 12 | notification.error({ 13 | message: e.message, 14 | }); 15 | }, 16 | }); 17 | 18 | // 2. Plugins 19 | app.use(createLoading()); 20 | 21 | // 3. Model 22 | app.model(require('./models/auth')); 23 | app.model(require('./models/list')); 24 | app.model(require('./models/contribute')); 25 | 26 | // 4. Router 27 | app.router(require('./router')); 28 | 29 | // 5. Start 30 | app.start('#root'); 31 | -------------------------------------------------------------------------------- /src/index.less: -------------------------------------------------------------------------------- 1 | :global { 2 | html, body, #root { 3 | height: 100%; 4 | } 5 | h1, h2, h3, h4, h5, h6 { 6 | color: #505666; 7 | font-weight: 500; 8 | } 9 | div.ant-tag { 10 | font-size: 12px; 11 | border-radius: 100px; 12 | background-color: rgba(255, 255, 255, .75); 13 | color: #666; 14 | border-color: #e9e9e9; 15 | height: 28px; 16 | line-height: 28px; 17 | padding: 0 12px; 18 | margin-bottom: 6px; 19 | margin-right: 6px; 20 | transition: all .3s; 21 | &.selected { 22 | color: #fff; 23 | border-color: @primary-color; 24 | background-color: @primary-color; 25 | } 26 | &:hover { 27 | border-color: @primary-color; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/locale/en-US.js: -------------------------------------------------------------------------------- 1 | import appLocaleData from 'react-intl/locale-data/en'; 2 | 3 | export default { 4 | locale: 'en-US', 5 | data: appLocaleData, 6 | messages: { 7 | 'title.home': 'Scaffolds', 8 | 'title.submit': 'Submit - Scaffold Market', 9 | notags: 'No Tags', 10 | notfound: 'Not Found', 11 | nologin: 'You need to login before submitting.', 12 | existed: 'Sorry, the url you submitted already exists.', 13 | successed: 'Submitted successfully!', 14 | 'header.login': 'Login', 15 | 'header.submit': 'Submit a scaffold', 16 | 'header.help': 'Help', 17 | 'header.search': 'Search in scaffolds', 18 | 'home.slogan': 'Practical scaffolds to kickoff', 19 | 'home.submit': 'Submit your scaffold', 20 | 'home.alltags': 'All Tags', 21 | 'home.cleartags': 'Clear', 22 | 'home.loading': 'Loading scaffolds positively...', 23 | 'submit.title': 'Submit new scaffold', 24 | 'submit.next': 'Next Step', 25 | 'submit.repo.placeholder': 'Please input a GitHub repo url, starting with http', 26 | 'submit.repo.error': 'Must be a valid GitHub url, starting with http', 27 | 'submit.repo.duplicate': 'This url exists', 28 | 'submit.detail.title.description': 'Click submit after confirming the scaffold information.', 29 | 'submit.detail.name': 'Name', 30 | 'submit.detail.url': 'GitHub Url', 31 | 'submit.detail.author': 'Author', 32 | 'submit.detail.description': 'Description', 33 | 'submit.detail.tag': 'Tags', 34 | 'submit.detail.tag.placeholder': 'Please enter tags', 35 | 'submit.detail.cover': 'Cover Picture', 36 | 'submit.detail.cover.upload': 'Click or drag file to this area to upload', 37 | 'submit.detail.submit': 'Submit', 38 | 'submit.finish.title': 'We just received your request, Thank you!', 39 | 'submit.finish.description': 'The new scaffold will be displayed after we approve your request, you can check details at GitHub.', 40 | 'submit.finish.button': 'Go to GitHub', 41 | 'scaffold.preview': 'Preview', 42 | 'scaffold.download': 'Download', 43 | 'scaffold.repo': 'GitHub', 44 | 'scaffold.information': 'Information', 45 | 'scaffold.createdAt': 'Created At', 46 | 'scaffold.updatedAt': 'Updated At', 47 | 'scaffold.deployedAt': 'Deployed At', 48 | 'scaffold.redeploy': 'Re-deploy', 49 | 'scaffold.author': 'Author', 50 | 'scaffold.language': 'Language', 51 | 'scaffold.tags': 'Tags', 52 | 'scaffold.screenshot': 'Screen Shot', 53 | 'readme.login': 'Please login to view README', 54 | 'footer.created': 'Created by AIUX', 55 | 'footer.source': 'Source Code', 56 | 'banner.feature1': 'Quick Start', 57 | 'banner.feature2': 'For business', 58 | 'banner.feature3': 'Best Practice', 59 | 'toolbar.sortByStarCount': 'Most Stars', 60 | 'toolbar.sortByUpdatedAt': 'Recently Updated', 61 | 'home.count': '{count} items', 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /src/locale/zh-CN.js: -------------------------------------------------------------------------------- 1 | import appLocaleData from 'react-intl/locale-data/zh'; 2 | 3 | export default { 4 | locale: 'zh-CN', 5 | data: appLocaleData, 6 | messages: { 7 | 'title.home': '脚手架市场', 8 | 'title.submit': '提交 - 脚手架', 9 | notags: '暂无标签', 10 | notfound: '没有找到', 11 | nologin: '你需要先登录', 12 | existed: '您提交的仓库已存在', 13 | successed: '提交成功！', 14 | 'header.login': '使用 GitHub 登录', 15 | 'header.submit': '提交脚手架', 16 | 'header.help': '帮助', 17 | 'header.search': '搜索', 18 | 'home.slogan': '丰富实用的业务脚手架集合', 19 | 'home.submit': '提交你的脚手架', 20 | 'home.alltags': '全部标签', 21 | 'home.cleartags': '清除选中', 22 | 'home.loading': '玩命加载中...', 23 | 'submit.title': '提交一个脚手架', 24 | 'submit.next': '下一步', 25 | 'submit.repo.placeholder': '请填写脚手架的 GitHub 地址，以 http 开头', 26 | 'submit.repo.error': 'Url 必须为 GitHub 项目路径，以 http 开头', 27 | 'submit.repo.duplicate': '此脚手架已存在', 28 | 'submit.detail.title.description': '核对脚手架详情信息，确认无误后提交请求', 29 | 'submit.detail.name': '项目名', 30 | 'submit.detail.url': 'GitHub 地址', 31 | 'submit.detail.author': '作者', 32 | 'submit.detail.description': '描述', 33 | 'submit.detail.tag': '标签', 34 | 'submit.detail.tag.placeholder': '请输入合适的标签', 35 | 'submit.detail.cover': '封面图片', 36 | 'submit.detail.cover.upload': '点击或拖拽图片文件进行上传', 37 | 'submit.detail.submit': '确认提交', 38 | 'submit.finish.title': '我们已经收到你提交的脚手架', 39 | 'submit.finish.description': '提交的站点在审核通过后会出现在首页，点击按钮跳转 Github 查看详情', 40 | 'submit.finish.button': '查看详情', 41 | 'scaffold.preview': '预览', 42 | 'scaffold.download': '源码包', 43 | 'scaffold.repo': '查看仓库', 44 | 'scaffold.information': '基本信息', 45 | 'scaffold.createdAt': '创建于', 46 | 'scaffold.updatedAt': '更新于', 47 | 'scaffold.deployedAt': '部署于', 48 | 'scaffold.redeploy': '重新部署', 49 | 'scaffold.author': '作者', 50 | 'scaffold.language': '语言', 51 | 'scaffold.tags': '标签', 52 | 'scaffold.screenshot': '截图展示', 53 | 'readme.login': '请登录后查看 README', 54 | 'footer.created': '蚂蚁金服体验技术部出品', 55 | 'footer.source': '源码', 56 | 'banner.feature1': '快速上手', 57 | 'banner.feature2': '业务模板', 58 | 'banner.feature3': '最佳实践', 59 | 'toolbar.sortByStarCount': '最多 Star 数', 60 | 'toolbar.sortByUpdatedAt': '最近更新', 61 | 'home.count': '共 {count} 个脚手架', 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /src/models/auth.js: -------------------------------------------------------------------------------- 1 | import Github from 'github-api'; 2 | import store from 'store'; 3 | import firebase from '../utils/firebase'; 4 | 5 | export default { 6 | namespace: 'auth', 7 | 8 | state: { 9 | credential: null, 10 | user: null, 11 | accessToken: store.get('accessToken') || null, 12 | }, 13 | 14 | subscriptions: { 15 | setup({ dispatch }) { 16 | if (store.get('accessToken')) { 17 | dispatch({ type: 'github', payload: store.get('accessToken') }); 18 | } 19 | }, 20 | }, 21 | 22 | effects: { 23 | *login(_, { put }) { 24 | const provider = new firebase.auth.GithubAuthProvider(); 25 | provider.addScope('public_repo'); 26 | const authResult = yield firebase.auth().signInWithPopup(provider); 27 | yield put({ type: 'github', payload: authResult.credential.accessToken }); 28 | }, 29 | *github({ payload }, { put }) { 30 | yield put({ type: 'startLogin' }); 31 | const github = new Github({ 32 | token: payload, 33 | }); 34 | const user = yield github.getUser(); 35 | const profile = yield user.getProfile(); 36 | if (profile && profile.data) { 37 | yield put({ 38 | type: 'save', 39 | payload: { 40 | user: profile.data, 41 | accessToken: payload, 42 | }, 43 | }); 44 | store.set('accessToken', payload); 45 | } 46 | }, 47 | }, 48 | 49 | reducers: { 50 | startLogin: state => ({ 51 | ...state, 52 | user: { 53 | logining: true, 54 | }, 55 | }), 56 | save: (state, { payload }) => ({ 57 | ...state, 58 | ...payload, 59 | }), 60 | }, 61 | }; 62 | 63 | // b6b22ca4475ff538f9ba2331139e4e1e542c7686 64 | -------------------------------------------------------------------------------- /src/models/list.js: -------------------------------------------------------------------------------- 1 | import Github from 'github-api'; 2 | import when from 'when'; 3 | import { fetch, fetchReadme } from '../services/list'; 4 | import { parseGithubUrl } from '../utils/github'; 5 | 6 | export default { 7 | namespace: 'scaffold', 8 | 9 | state: { 10 | list: [], 11 | sortWay: 'starCount', 12 | }, 13 | 14 | effects: { 15 | *fetch({ payload }, { call, put, select }) { 16 | const { auth, scaffold: { list } } = yield select(); 17 | let newList; 18 | if (payload && list.length > 0) { 19 | newList = [...list]; 20 | } else { 21 | const { data } = yield call(fetch); 22 | newList = [...data.list]; 23 | } 24 | const results = []; 25 | for (let i = 0; i < newList.length; i += 1) { 26 | if (!payload || newList[i].name === payload) { 27 | const { git_url } = newList[i]; 28 | const { user, repo } = parseGithubUrl(git_url); 29 | const { accessToken } = auth; 30 | const github = new Github({ token: accessToken }); 31 | // read basic information of repo 32 | const repoData = yield github.getRepo(user, repo); 33 | results.push(repoData.getDetails()); 34 | } 35 | } 36 | 37 | let newDatas = yield when.settle(results); 38 | newDatas = newDatas.map((item) => { 39 | if (item.state === 'fulfilled' && item.value) { 40 | return item.value; 41 | } 42 | return {}; 43 | }); 44 | 45 | for (let i = 0; i < newDatas.length; i += 1) { 46 | const target = newList.filter(item => item.git_url === (newDatas[i].data || {}).git_url)[0]; 47 | const targetIndex = newList.indexOf(target); 48 | if (target) { 49 | newList[targetIndex] = { 50 | ...newDatas[i].data, 51 | ...target, 52 | readmeFromRemote: null, 53 | }; 54 | 55 | if (newList[targetIndex].name === payload) { 56 | const { user, repo } = parseGithubUrl(target.git_url); 57 | const readme = yield fetchReadme(user, repo); 58 | newList[targetIndex].readmeFromRemote = readme.data; 59 | } 60 | } 61 | } 62 | 63 | yield put({ 64 | type: 'save', 65 | payload: newList, 66 | }); 67 | }, 68 | }, 69 | 70 | reducers: { 71 | save(state, { payload }) { 72 | return { 73 | ...state, 74 | list: [...payload], 75 | }; 76 | }, 77 | changeSortWay(state, { payload }) { 78 | return { 79 | ...state, 80 | sortWay: payload, 81 | }; 82 | }, 83 | }, 84 | }; 85 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Router, Route, IndexRoute } from 'dva-react-router-3/router'; 3 | import ReactGA from 'react-ga'; 4 | import IntlCommonLayout from './Layout/IntlCommonLayout'; 5 | import IndexPage from './routes/IndexPage'; 6 | import Contribute from './routes/Contribute'; 7 | import ScaffoldPage from './routes/ScaffoldPage'; 8 | 9 | ReactGA.initialize('UA-72788897-4'); 10 | 11 | function logPageView() { 12 | ReactGA.set({ page: window.location.pathname }); 13 | ReactGA.pageview(window.location.pathname); 14 | } 15 | 16 | function RouterConfig({ history }) { 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default RouterConfig; 31 | -------------------------------------------------------------------------------- /src/routes/Contribute.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'dva-react-router-3'; 3 | import { injectIntl, FormattedMessage } from 'react-intl'; 4 | import { Helmet } from 'react-helmet'; 5 | import Start from '../components/Contribute/Start'; 6 | import Submit from '../components/Contribute/Submit'; 7 | import Finish from '../components/Contribute/Finish'; 8 | import styles from './Contribute.less'; 9 | 10 | class Contribute extends React.Component { 11 | componentWillMount() { 12 | if (!this.props.auth.user) { 13 | this.props.dispatch({ type: 'auth/login' }); 14 | } 15 | } 16 | componentWillUnmount() { 17 | this.props.dispatch({ type: 'contribute/saveRepo', pyaload: null }); 18 | } 19 | render() { 20 | const { auth, contribute: { repo }, dispatch, location, loading, intl } = this.props; 21 | if (!auth || !auth.accessToken) { 22 | return ( 23 |
24 | 25 |
26 | ); 27 | } 28 | let children; 29 | if (location.pathname.indexOf('contribute/finish') > 0) { 30 | children = ; 31 | } else { 32 | children = repo 33 | ? 34 | : ; 35 | } 36 | return ( 37 |
38 | 39 | 40 | {intl.formatMessage({ id: 'title.submit' })} 41 | 42 | 43 | {children} 44 |
45 | ); 46 | } 47 | } 48 | 49 | export default injectIntl(connect(state => ({ 50 | auth: state.auth, 51 | contribute: state.contribute, 52 | loading: state.loading, 53 | }))(Contribute)); 54 | -------------------------------------------------------------------------------- /src/routes/Contribute.less: -------------------------------------------------------------------------------- 1 | .contribute { 2 | max-width: 1206px; 3 | margin: 0 auto; 4 | border-radius: 4px; 5 | border: 1px solid #E9E9E9; 6 | text-align: center; 7 | background: #fff url(https://zos.alipayobjects.com/rmsportal/nDHWWBcarrqKtxvWVORG.png) no-repeat center center; 8 | min-height: 642px; 9 | background-size: 974px; 10 | } 11 | 12 | .nologin { 13 | text-align: center; 14 | margin: 40px 0; 15 | } 16 | -------------------------------------------------------------------------------- /src/routes/IndexPage.less: -------------------------------------------------------------------------------- 1 | .normal { 2 | margin-top: 3em; 3 | margin: 0 auto; 4 | overflow: visible; 5 | } 6 | 7 | .list { 8 | list-style: none; 9 | } 10 | 11 | .loading { 12 | height: 200px; 13 | padding: 70px 0 90px; 14 | text-align: center; 15 | .tip { 16 | margin-top: 24px; 17 | font-size: 13px; 18 | color: rgba(0, 0, 0, 0.5); 19 | } 20 | } 21 | 22 | .sider { 23 | background: transparent; 24 | padding-right: 60px; 25 | .tags { 26 | h3 { 27 | font-size: 14px; 28 | font-weight: normal; 29 | margin-bottom: 16px; 30 | a { 31 | font-size: 12px; 32 | margin-left: 16px; 33 | } 34 | } 35 | .tagCount { 36 | opacity: 0.5; 37 | margin-left: 4px; 38 | } 39 | } 40 | .tagsSection { 41 | max-height: 100vh; 42 | overflow: auto; 43 | } 44 | } 45 | 46 | .content { 47 | overflow: visible !important; 48 | } 49 | 50 | @media only screen and (max-width: 1024px) { 51 | .sider { 52 | display: none; 53 | } 54 | .content { 55 | padding: 0 24px; 56 | } 57 | } 58 | 59 | .toolbar { 60 | margin-bottom: 16px; 61 | font-size: 14px; 62 | overflow: hidden; 63 | .left { 64 | float: left; 65 | } 66 | .right { 67 | float: right; 68 | i { 69 | transform: rotate(90deg); 70 | color: rgba(0, 0, 0, .85); 71 | } 72 | .type { 73 | margin-left: 16px; 74 | cursor: pointer; 75 | opacity: 0.8; 76 | transition: all .3s; 77 | &:hover { 78 | opacity: 1; 79 | } 80 | &.current { 81 | color: #444; 82 | opacity: 1; 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/routes/ScaffoldPage.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | 3 | .loading { 4 | height: 200px; 5 | line-height: 200px; 6 | text-align: center; 7 | } 8 | 9 | .sider { 10 | background: transparent; 11 | padding-right: 80px; 12 | font-size: 12px; 13 | 14 | .header { 15 | position: relative; 16 | padding-right: 30px; 17 | h2 { 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | font-size: 24px; 22 | } 23 | .right { 24 | position: absolute; 25 | right: 0; 26 | top: 10px; 27 | } 28 | .star { 29 | margin-right: 8px; 30 | color: #2DB7F5; 31 | font-size: 16px; 32 | } 33 | } 34 | .links { 35 | margin-top: 24px; 36 | } 37 | section { 38 | > a > :global(.ant-btn), 39 | > a > :global(.ant-dropdown-button) { 40 | margin-right: 8px; 41 | } 42 | button { 43 | font-size: 12px!important; 44 | } 45 | .meta { 46 | width: 50%; 47 | display: inline-block; 48 | margin: 4px 0; 49 | } 50 | :global(.ant-tag) { 51 | font-size: 12px; 52 | } 53 | } 54 | h3 { 55 | margin-bottom: 8px; 56 | } 57 | hr { 58 | height: 1px; 59 | border: 0; 60 | width: 100%; 61 | background: @border-color-split; 62 | margin: 24px 0; 63 | } 64 | .notfound { 65 | color: @text-color-secondary; 66 | } 67 | } 68 | 69 | .card { 70 | border: 1px solid #e9e9e9!important; 71 | margin-bottom: 32px; 72 | box-shadow: none!important; 73 | img { 74 | max-width: 100%; 75 | } 76 | } 77 | 78 | .markdown { 79 | color: @text-color; 80 | font-size: 14px; 81 | line-height: 1.8; 82 | img { 83 | vertical-align: middle; 84 | max-width: 100%; 85 | } 86 | 87 | h1 { 88 | color: @heading-color; 89 | font-weight: 500; 90 | line-height: 40px; 91 | margin-bottom: 24px; 92 | margin-top: 8px; 93 | } 94 | 95 | :global(.anchor) { 96 | display: none; 97 | } 98 | 99 | h2, 100 | h3, 101 | h4, 102 | h5, 103 | h6 { 104 | color: @heading-color; 105 | font-family: @font-family; 106 | margin: 0.6em 0; 107 | font-weight: 500; 108 | clear: both; 109 | } 110 | 111 | h1 { font-size: 28px; } 112 | h2 { font-size: 22px; } 113 | h3 { font-size: 18px; } 114 | h4 { font-size: 16px; } 115 | h5 { font-size: 14px; } 116 | h6 { font-size: 12px; } 117 | 118 | hr { 119 | height: 1px; 120 | border: 0; 121 | background: #e9e9e9; 122 | margin: 16px 0; 123 | clear: both; 124 | } 125 | 126 | p, 127 | pre { 128 | margin: 1em 0; 129 | } 130 | 131 | ul > li { 132 | list-style-type: circle; 133 | margin-left: 20px; 134 | padding-left: 4px; 135 | &:empty { 136 | display: none; 137 | } 138 | } 139 | 140 | ol > li { 141 | list-style-type: decimal; 142 | margin-left: 20px; 143 | padding-left: 4px; 144 | } 145 | 146 | ul > li > p, 147 | ol > li > p { 148 | margin: 0.2em 0; 149 | } 150 | 151 | code { 152 | margin: 0 1px; 153 | background: #fafafa; 154 | padding: .2em .4em; 155 | border-radius: 3px; 156 | font-size: .9em; 157 | border: 1px solid #eee; 158 | } 159 | 160 | pre { 161 | border-radius: @border-radius-base; 162 | background: #fafafa; 163 | font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 164 | } 165 | 166 | pre code { 167 | display: block; 168 | background: #fafafa; 169 | color: @text-color; 170 | line-height: 1.7; 171 | border: none; 172 | padding: 10px 15px; 173 | border-radius: @border-radius-base; 174 | font-size: 13px; 175 | white-space: pre; 176 | font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 177 | overflow: auto; 178 | } 179 | 180 | strong, 181 | b { 182 | font-weight: 600; 183 | } 184 | 185 | > table { 186 | border-collapse: collapse; 187 | border-spacing: 0; 188 | empty-cells: show; 189 | border: 1px solid #e9e9e9; 190 | width: 100%; 191 | margin: 16px 0; 192 | } 193 | 194 | > table th { 195 | white-space: nowrap; 196 | color: #5c6b77; 197 | font-weight: 600; 198 | } 199 | 200 | > table th, 201 | > table td { 202 | border: 1px solid #e9e9e9; 203 | padding: 8px 16px; 204 | text-align: left; 205 | } 206 | 207 | > table th { 208 | background: #fafafa; 209 | } 210 | 211 | blockquote { 212 | font-size: 90%; 213 | color: #999; 214 | border-left: 4px solid #e9e9e9; 215 | padding-left: 0.8em; 216 | margin: 1em 0; 217 | } 218 | 219 | blockquote p { 220 | margin: 0; 221 | } 222 | } 223 | 224 | .redeploy { 225 | font-size: 12px; 226 | > i { 227 | color: #666; 228 | margin-right: 8px; 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /src/services/list.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export function fetch() { 4 | return axios.get('https://scaffold.ant.design/list.json'); 5 | } 6 | 7 | export function fetchReadme(user, repo) { 8 | return axios.get(`https://get-github-readme-v2.now.sh/${user}/${repo}/?branch=master`); 9 | } 10 | -------------------------------------------------------------------------------- /src/utils/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase'; 2 | import firebaseConfig from '../../firebase.config'; 3 | 4 | firebase.initializeApp(firebaseConfig); 5 | 6 | export default firebase; 7 | -------------------------------------------------------------------------------- /src/utils/github.js: -------------------------------------------------------------------------------- 1 | import parse from 'parse-github-url'; 2 | 3 | export function parseGithubUrl(url) { 4 | const { owner, name } = parse(url); 5 | return { 6 | user: owner, 7 | repo: name, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function getParameterByName(name, url) { 2 | const realname = name.replace(/[[\]]/g, '\\$&'); 3 | const regex = new RegExp(`[?&]${realname}(=([^&#]*)|&|#|$)`); 4 | const results = regex.exec(url || window.location.href); 5 | if (!results) return null; 6 | if (!results[2]) return ''; 7 | return decodeURIComponent(results[2].replace(/\+/g, ' ')); 8 | } 9 | 10 | export function isLocaleZhCN() { 11 | if (localStorage.getItem('locale')) { 12 | return localStorage.getItem('locale') === 'zh-CN'; 13 | } 14 | return navigator.language === 'zh-CN'; 15 | } 16 | -------------------------------------------------------------------------------- /src/utils/request.js: -------------------------------------------------------------------------------- 1 | import fetch from 'dva-react-router-3/fetch'; 2 | 3 | function parseJSON(response) { 4 | return response.json(); 5 | } 6 | 7 | function checkStatus(response) { 8 | if (response && response.status >= 200 && response.status < 300) { 9 | return response; 10 | } 11 | 12 | const error = new Error(response ? response.statusText : 'unknown error'); 13 | error.response = response; 14 | throw error; 15 | } 16 | 17 | /** 18 | * Requests a URL, returning a promise. 19 | * 20 | * @param {string} url The URL we want to request 21 | * @param {object} [options] The options we want to pass to "fetch" 22 | * @return {object} An object containing either "data" or "err" 23 | */ 24 | export default function request(url, options) { 25 | return fetch(url, options) 26 | .then(checkStatus) 27 | .then(parseJSON) 28 | .then(data => ({ data })) 29 | .catch(err => ({ err })); 30 | } 31 | --------------------------------------------------------------------------------