├── CNAME ├── deploy_key.enc ├── src ├── utils │ ├── firebase.js │ ├── github.js │ ├── index.js │ └── request.js ├── services │ └── list.js ├── components │ ├── Contribute │ │ ├── Finish.less │ │ ├── Start.less │ │ ├── Finish.js │ │ ├── Submit.less │ │ ├── Start.js │ │ └── Submit.js │ ├── ScaffoldItem.less │ └── ScaffoldItem.js ├── routes │ ├── Contribute.less │ ├── IndexPage.less │ ├── Contribute.js │ ├── ScaffoldPage.less │ ├── IndexPage.js │ └── ScaffoldPage.js ├── index.less ├── index.js ├── index.html ├── router.js ├── Layout │ ├── IntlCommonLayout.js │ ├── CommonLayout.less │ └── CommonLayout.js ├── models │ ├── auth.js │ ├── list.js │ └── contribute.js └── locale │ ├── zh-CN.js │ └── en-US.js ├── README.md ├── .gitignore ├── .editorconfig ├── firebase.config.js ├── scaffolds ├── react-redux-antd-okoala │ └── index.yml ├── ReactAntd │ └── index.yml ├── Da │ └── index.yml ├── dva-antd-starter │ └── index.yml ├── dva-antd-mobile-starter │ └── index.yml ├── react-frontend-boilerplate │ └── index.yml ├── vue-taobao │ └── index.yml ├── react-antd-demo │ └── index.yml ├── mk-demo │ └── index.yml ├── react-component-lab │ └── index.yml ├── react-qs │ └── index.yml ├── blogVue │ └── index.yml ├── dva-example-user-dashboard │ └── index.yml ├── react-mobx-antd-boilerplate │ └── index.yml ├── react-redux-antd-starter │ └── index.yml ├── antd-admin-boilerplate │ └── index.yml ├── react-start-kit │ └── index.yml ├── dva-hackernews │ └── index.yml ├── react-antd-admin │ └── index.yml ├── chat │ └── index.yml ├── typescript-react-hot-reload │ └── index.yml ├── react-scaffold │ └── index.yml ├── fanpianAdmin │ └── index.yml ├── vue2-element │ └── index.yml ├── react-redux-universal │ └── index.yml ├── ui │ └── index.yml ├── reactSPA │ └── index.yml ├── ng-alain │ └── index.yml ├── react-antd │ └── index.yml ├── ts-dva │ └── index.yml ├── dva-ant-admin │ └── index.yml ├── kenote-react-admin │ └── index.yml ├── ant-design-pro │ └── index.yml ├── angular-material-dashboard │ └── index.yml ├── antd-redux │ └── index.yml ├── sls-admin │ └── index.yml ├── react-redux-antd │ └── index.yml ├── antd-admin │ └── index.yml ├── gt-react-scaffold │ └── index.yml ├── bear-admin │ └── index.yml ├── little-a-dashboard │ └── index.yml ├── react-antd-admin-jiangxy │ └── index.yml ├── dva-admin │ └── index.yml ├── star-initReact-example │ └── index.yml ├── react-molin │ └── index.yml ├── react-starter-kit │ └── index.yml ├── react-redux-antdesign-webpack-starter │ └── index.yml ├── react_news_site │ └── index.yml ├── duxianwei-react-spa │ └── index.yml ├── vue-manage-system │ └── index.yml ├── react-admin │ └── index.yml └── react-antd-redux-webpack-es6-spa-boilerplate │ └── index.yml ├── .travis.yml ├── scripts ├── parse_yaml.sh ├── compile.sh └── deploy.sh ├── .roadhogrc ├── LICENSE ├── .eslintrc ├── gulpfile.js └── package.json /CNAME: -------------------------------------------------------------------------------- 1 | scaffold.ant.design 2 | -------------------------------------------------------------------------------- /deploy_key.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/scaffold-market/master/deploy_key.enc -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | ## Development 6 | 7 | ```bash 8 | $ npm install 9 | $ npm start 10 | ``` 11 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /src/services/list.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export function fetch() { 4 | return axios.get('http://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/components/Contribute/Finish.less: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-top: 148px; 3 | .check { 4 | color: #3DBD7D; 5 | font-size: 90px; 6 | margin-bottom: 32px; 7 | } 8 | .title { 9 | font-size: 24px; 10 | margin-bottom: 16px; 11 | } 12 | .description { 13 | margin-bottom: 48px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | 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 | - stable 22 | -------------------------------------------------------------------------------- /src/components/Contribute/Start.less: -------------------------------------------------------------------------------- 1 | .form { 2 | width: 400px; 3 | margin: 150px auto 100px; 4 | font-size: 14px; 5 | .title { 6 | color: #505666; 7 | font-weight: 500; 8 | font-size: 24px; 9 | margin-bottom: 16px; 10 | } 11 | .input { 12 | border-radius: 0; 13 | height: 48px; 14 | border-width: 0 0 2px 0; 15 | border-color: #e9e9e9; 16 | transition: all .3s; 17 | outline: 0; 18 | box-shadow: none!important; 19 | font-size: 14px; 20 | margin-top: 24px; 21 | text-align: center; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /scripts/parse_yaml.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | parse_yaml() { 3 | local prefix=$2 4 | local s='[[:space:]]*' w='[a-zA-Z0-9_]*' fs=$(echo @|tr @ '\034') 5 | sed -ne "s|^\($s\)\($w\)$s:$s\"\(.*\)\"$s\$|\1$fs\2$fs\3|p" \ 6 | -e "s|^\($s\)\($w\)$s:$s\(.*\)$s\$|\1$fs\2$fs\3|p" $1 | 7 | awk -F$fs '{ 8 | indent = length($1)/2; 9 | vname[indent] = $2; 10 | for (i in vname) {if (i > indent) {delete vname[i]}} 11 | if (length($3) > 0) { 12 | vn=""; for (i=0; i 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-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/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/vue-taobao/index.yml: -------------------------------------------------------------------------------- 1 | name: vue-taobao 2 | git_url: 'git://github.com/sosout/vue-taobao.git' 3 | author: sosout 4 | description: 基于 vue2 + vuex + mint-ui 构建移动单页面应用 5 | tags: 6 | - vue 7 | - vuex 8 | - mint-ui 9 | coverPicture: null 10 | readme: |- 11 | # vue-taobao 12 | 13 | > 基于 vue2 + vuex 构建一个单页面应用 14 | 15 | ## 快速开始 16 | 17 | ``` bash 18 | # 安装依赖 19 | npm install 20 | 21 | # 使用热加载模式访问 localhost:8888 22 | npm run dev 23 | 24 | # 生产环境打包压缩 25 | npm run build 26 | 27 | # 生成并查看性能分析报告 28 | npm run build --report 29 | 30 | # 进行单元测试 31 | npm run unit 32 | 33 | # 运行 e2e 测试 34 | npm run e2e 35 | 36 | # 运行所有测试 37 | npm test 38 | ``` 39 | deployedAt: 2017-11-23T15:34:37.433Z 40 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/components/Contribute/Finish.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Icon } from 'antd'; 3 | import { FormattedMessage } from 'react-intl'; 4 | import styles from './Finish.less'; 5 | 6 | export default ({ url }) => ( 7 |
8 | 9 |

10 | 11 |

12 |
13 | 14 |
15 | 16 | 19 | 20 |
21 | ); 22 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import dva from 'dva'; 2 | import { useRouterHistory } from 'dva/router'; 3 | import { createHashHistory } from 'history'; 4 | import createLoading from 'dva-loading'; 5 | import { notification } from 'antd'; 6 | import './index.html'; 7 | import './index.less'; 8 | 9 | // 1. Initialize 10 | const app = dva({ 11 | history: useRouterHistory(createHashHistory)({ queryKey: false }), 12 | onError(e) { 13 | // eslint-disable-next-line 14 | console.error(e); 15 | notification.error({ 16 | message: e.message, 17 | }); 18 | }, 19 | }); 20 | 21 | // 2. Plugins 22 | app.use(createLoading()); 23 | 24 | // 3. Model 25 | app.model(require('./models/auth')); 26 | app.model(require('./models/list')); 27 | app.model(require('./models/contribute')); 28 | 29 | // 4. Router 30 | app.router(require('./router')); 31 | 32 | // 5. Start 33 | app.start('#root'); 34 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Scaffolds 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/utils/request.js: -------------------------------------------------------------------------------- 1 | import fetch from 'dva/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 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Router, Route, IndexRoute } from 'dva/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/Contribute/Submit.less: -------------------------------------------------------------------------------- 1 | .form { 2 | width: 500px; 3 | padding: 36px 48px; 4 | font-size: 14px; 5 | text-align: left; 6 | .title { 7 | color: #505666; 8 | font-weight: 500; 9 | font-size: 24px; 10 | margin-bottom: 16px; 11 | } 12 | .description { 13 | margin-bottom: 48px; 14 | font-size: 14px; 15 | } 16 | .upload { 17 | height: 160px; 18 | display: block; 19 | p { 20 | font-size: 12px !important; 21 | } 22 | &.hidden { 23 | display: none; 24 | } 25 | } 26 | .cover { 27 | position: relative; 28 | padding: 16px; 29 | border: 1px solid #e9e9e9; 30 | border-radius: 4px; 31 | img { 32 | width: 100%; 33 | min-height: 60px; 34 | border-radius: 4px; 35 | overflow: hidden; 36 | display: block; 37 | border: 0; 38 | background: #f9f9f9; 39 | } 40 | .deletePicture { 41 | font-size: 12px; 42 | position: absolute; 43 | right: 5px; 44 | top: 5px; 45 | cursor: pointer; 46 | transition: all .3s; 47 | color: #888; 48 | &:hover { 49 | color: #000; 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/Layout/IntlCommonLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { IntlProvider, addLocaleData } from 'react-intl'; 3 | import moment from 'moment'; 4 | import CommonLayout from './CommonLayout'; 5 | import { isLocaleZhCN } from '../utils'; 6 | import zhCN from '../locale/zh-CN'; 7 | import enUS from '../locale/en-US'; 8 | 9 | addLocaleData([...zhCN.data, ...enUS.data]); 10 | 11 | class IntlCommonLayout extends React.Component { 12 | state = { 13 | locale: isLocaleZhCN() ? 'zh-CN' : 'en-US', 14 | } 15 | handleLocaleChange = () => { 16 | const locale = this.state.locale === 'zh-CN' ? 'en-US' : 'zh-CN'; 17 | localStorage.setItem('locale', locale); 18 | this.setState({ locale }); 19 | moment.locale(locale); 20 | } 21 | render() { 22 | const { locale } = this.state; 23 | const appLocale = locale === 'zh-CN' ? zhCN : enUS; 24 | return ( 25 | 26 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default IntlCommonLayout; 37 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /src/components/ScaffoldItem.less: -------------------------------------------------------------------------------- 1 | .card { 2 | width: 100%; 3 | height: 330px; 4 | box-shadow: 0 1px 4px rgba(0, 0, 0, .09); 5 | float: left; 6 | text-align: center; 7 | transition: all .3s; 8 | margin-bottom: 32px; 9 | background: #fff; 10 | &:hover { 11 | box-shadow: 0 3px 10px rgba(191, 200, 209, .5); 12 | } 13 | > a { 14 | text-decoration: none; 15 | } 16 | } 17 | 18 | .picture { 19 | background: #eee; 20 | display: block; 21 | height: 180px; 22 | width: 100%; 23 | border-bottom: 1px solid #eee; 24 | object-fit: cover; 25 | } 26 | 27 | .detail { 28 | padding: 16px; 29 | color: #9EA9B5; 30 | } 31 | 32 | .title { 33 | font-weight: 500; 34 | font-size: 17px; 35 | color: #505666; 36 | margin-bottom: 8px; 37 | white-space: nowrap; 38 | overflow: hidden; 39 | text-overflow: ellipsis; 40 | } 41 | 42 | .description { 43 | margin-bottom: 18px; 44 | font-size: 12px; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | white-space: nowrap; 48 | max-width: 400px; 49 | &:after { 50 | content: ''; 51 | display: block; 52 | width: 32px; 53 | height: 1px; 54 | background: #E9E9E9; 55 | margin: 0 auto; 56 | margin-top: 18px; 57 | } 58 | } 59 | 60 | .star { 61 | margin-right: 8px; 62 | color: #2DB7F5; 63 | font-size: 16px; 64 | } 65 | 66 | .pushedAt { 67 | font-size: 12px; 68 | vertical-align: middle; 69 | margin-left: 16px; 70 | } 71 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /scripts/compile.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # include parse_yaml function 4 | . scripts/parse_yaml.sh 5 | 6 | npm run build 7 | gulp 8 | 9 | ls 10 | ls scaffolds 11 | cp -r scaffolds/* out/ 12 | cd out 13 | ls 14 | git add --all . 15 | for D in *; do 16 | if [ -d "${D}" ]; then 17 | if [ "$D" = "static" ]; then 18 | echo "escaped static folder." 19 | continue 20 | fi 21 | echo "start to check ${D}" 22 | git status --porcelain 23 | if [ $(git status --porcelain | grep "${D}/index.yml" | wc -l) -lt 1 ]; then 24 | echo "No changes to the output on scaffold ${D}; exiting." 25 | git reset -- $D && git checkout $D 26 | git status --porcelain 27 | continue 28 | fi 29 | cd $D 30 | 31 | eval $(parse_yaml index.yml "config_") 32 | REPO=$(echo ${config_git_url} | sed "s/'//g") 33 | 34 | git clone $REPO _temp --depth=1 35 | 36 | echo "try to build scaffold ${D} at ${REPO}" 37 | cd _temp 38 | npm install 39 | npm run build 40 | if [ -d dist ]; then 41 | cp -r dist/* ../ 42 | fi 43 | if [ -d build ]; then 44 | cp -r build/* ../ 45 | fi 46 | cd .. 47 | rm -rf _temp 48 | # replace index.html absolute static paths 49 | # like https://github.com/zuiidea/antd-admin 50 | sed -i -- 's/src="\//src="/g' index.html 51 | sed -i -- 's/href="\//href="/g' index.html 52 | cd .. 53 | fi 54 | done 55 | 56 | cd .. 57 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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": "^2.6.1", 12 | "axios": "^0.15.3", 13 | "babel-plugin-import": "^1.1.1", 14 | "babel-runtime": "^6.9.2", 15 | "dva": "^1.2.1", 16 | "dva-loading": "^0.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 | "react": "~15.4.0", 23 | "react-disqus-comments": "^0.5.2", 24 | "react-dom": "~15.4.0", 25 | "react-ga": "^2.2.0", 26 | "react-helmet": "^5.0.3", 27 | "react-intl": "^2.2.3", 28 | "react-overdrive": "^0.0.5", 29 | "store": "^2.0.4", 30 | "string-hash": "^1.1.3", 31 | "when": "^3.7.8" 32 | }, 33 | "devDependencies": { 34 | "babel-eslint": "^7.1.1", 35 | "babel-plugin-dva-hmr": "^0.3.2", 36 | "babel-plugin-transform-runtime": "^6.9.0", 37 | "eslint": "^4.8.0", 38 | "eslint-config-airbnb": "latest", 39 | "eslint-plugin-import": "^2.1.0", 40 | "eslint-plugin-jsx-a11y": "^6.0.2", 41 | "eslint-plugin-react": "^7.0.1", 42 | "expect": "^1.20.2", 43 | "gh-pages": "^0.12.0", 44 | "gulp": "^3.9.1", 45 | "gulp-beautify": "^2.0.1", 46 | "gulp-merge-json": "^1.0.0", 47 | "gulp-util": "^3.0.8", 48 | "gulp-yaml": "^1.0.1", 49 | "husky": "^0.13.2", 50 | "redbox-react": "^1.3.2", 51 | "roadhog": "^0.5.3", 52 | "through2": "^2.0.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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('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 | -------------------------------------------------------------------------------- /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/vue2-element/index.yml: -------------------------------------------------------------------------------- 1 | name: vue2-element 2 | git_url: 'git://github.com/sosout/vue2-element.git' 3 | author: sosout 4 | description: vue2-element管理系统简单demo 5 | tags: 6 | - vue 7 | coverPicture: 'https://ucarecdn.com/a10da881-44c4-4ced-82a5-6f2e89b82c54/' 8 | readme: "# vue2-element管理系统简单demo\n\n> 您有什么功能可以给我留言，我来实现！\n\n## 相关推荐\n\n[基于react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd(1.x)实现的SPA后台管理系统模板](https://github.com/sosout/react-antd)\n\n## 最新更新\n> 项目初始化\n\n## 前言\n> 本工程主要基于vue + vuex + less + ES6/7 + webpack + fetch + vue-router + store + element-ui实现的SPA后台管理系统模板。\n\n> 如果觉得不错的话，请star一下吧 \U0001F60A\n\n> 编码时间：8:00——9:30, 下班时间——24:00，其他时间要工作。代码未优化，处女座代码必须要优化。由于代码延后，先向大家说声抱歉。您有什么问题可以私信我segmentfault。\n\n[线上demo](http://elm.sosout.com/)\n\n## 关于我自己\n\n> 使用技术： vue + vuex + less + ES6/7 + webpack + fetch + vue-router + store + element-ui\n\n> 项目说明： 此项目是本人空余时间搭建的。希望大家提供宝贵的意见和建议，谢谢。\n\n> JS/React/Vue/Angular前端群： 599399742\n\n> 邮   箱： sosout@139.com\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/vue2-element.git\n\ncd vue2-element\n```\n\n### 安装\n```bush\n\n// 安装前请先确保已安装node和npm\n\n// 安装成功后,再安装依赖，如果之前有用npm安装过，请先删掉node_modules\nyarn install\n```\n### 运行\n\n``` bash\n\n# 开发版本，用于开发使用，热加载\nyarn run dev\n\n# 生产版本，对代码进行混淆压缩，提取公共代码，分离css文件\nyarn run build\n\n# 生产版本并查看包分析器报告\nyarn run build --report\n\n# 单元测试\nyarn run unit\n\n# e2e测试\nyarn run e2e\n\n# 所有测试\nyarn test\n```\n\n### 访问\n在浏览器地址栏输入[http://localhost:8080/](http://localhost:8080/)\n\n# vuex简单应用\n" 9 | deployedAt: 2017-11-23T15:20:38.859Z 10 | -------------------------------------------------------------------------------- /src/components/Contribute/Start.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Input, Form } from 'antd'; 3 | import { FormattedMessage } from 'react-intl'; 4 | import styles from './Start.less'; 5 | 6 | const FormItem = Form.Item; 7 | 8 | function Start({ dispatch, form, loading, intl }) { 9 | const { getFieldDecorator, validateFields } = form; 10 | const onSubmit = () => { 11 | validateFields(['url'], { force: true }, (err, values) => { 12 | if (!err) { 13 | dispatch({ 14 | type: 'contribute/validateRepo', 15 | payload: values.url, 16 | intl, 17 | }); 18 | } 19 | }); 20 | }; 21 | return ( 22 |
23 |

24 | 25 |

26 | 27 | {getFieldDecorator('url', { 28 | rules: [{ 29 | type: 'string', 30 | required: true, 31 | pattern: /^https?:\/\/(www\.)?github\.com\/([\w-]+)\/([\w-]+)\/?/, 32 | message: intl.formatMessage({ id: 'submit.repo.error' }), 33 | }], 34 | })( 35 | , 40 | )} 41 | 42 | 43 | 51 | 52 |
53 | ); 54 | } 55 | 56 | export default Form.create()(Start); 57 | -------------------------------------------------------------------------------- /src/components/ScaffoldItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Icon } from 'antd'; 3 | import { Link } from 'dva/router'; 4 | import Overdrive from 'react-overdrive'; 5 | import hash from 'string-hash'; 6 | import moment from 'moment'; 7 | import styles from './ScaffoldItem.less'; 8 | 9 | function getBackgroundColor(url) { 10 | // preset colors for default cover picture 11 | const colors = [ 12 | '#f46e65', 13 | '#f78e3d', 14 | '#ffce3d', 15 | '#3dbd7d', 16 | '#3db8c1', 17 | '#2db7f5', 18 | '#f7629e', 19 | ]; 20 | return colors[hash(url) % 7].replace('#', ''); 21 | } 22 | 23 | export default function ScaffoldItem({ 24 | name, description, stargazers_count, coverPicture, git_url, pushed_at, 25 | }) { 26 | let picture; 27 | if (coverPicture) { 28 | picture = `${coverPicture}-/resize/600x/`; 29 | } else { 30 | picture = `https://placeholdit.imgix.net/~text?txtsize=60&bg=${getBackgroundColor(git_url)}&txtclr=ffffff&txt=${name}&w=560&h=360&txttrack=0`; 31 | } 32 | return ( 33 |
  • 34 | 35 | 36 | 37 | 38 |
    39 |

    40 | {name} 41 |

    42 |
    43 | {description} 44 |
    45 |
    46 | {stargazers_count} 47 | {moment(pushed_at).fromNow()} 48 |
    49 |
    50 | 51 |
    • 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /src/routes/Contribute.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'dva'; 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 'footer.created': '蚂蚁金服体验技术部出品', 54 | 'footer.source': '源码', 55 | 'banner.feature1': '快速上手', 56 | 'banner.feature2': '业务模板', 57 | 'banner.feature3': '最佳实践', 58 | 'toolbar.sortByStarCount': '最多 Star 数', 59 | 'toolbar.sortByUpdatedAt': '最近更新', 60 | 'home.count': '共 {count} 个脚手架', 61 | }, 62 | }; 63 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e # Exit with nonzero exit code if anything fails 3 | 4 | SOURCE_BRANCH="master" 5 | TARGET_BRANCH="gh-pages" 6 | 7 | function doCompile { 8 | ./scripts/compile.sh 9 | } 10 | 11 | # Save some useful information 12 | REPO=`git config remote.origin.url` 13 | SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:} 14 | SHA=`git rev-parse --verify HEAD` 15 | 16 | # Clone the existing gh-pages for this repo into out/ 17 | # Create a new empty branch if gh-pages doesn't exist yet (should only happen on first deply) 18 | git clone $REPO out 19 | cd out 20 | git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH 21 | echo "clean out non scaffolds files from gh-pages" 22 | rm -rf scaffolds scripts data src 23 | cd .. 24 | 25 | # Clean out existing contents 26 | ls out 27 | echo "clean out existing contents" 28 | rm -rf out/**/* || exit 0 29 | ls out 30 | 31 | # Pull requests and commits to other branches shouldn't try to deploy, just build to verify 32 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then 33 | echo "Skipping deploy; just doing a build." 34 | doCompile 35 | exit 0 36 | fi 37 | 38 | # Run our compile script 39 | doCompile 40 | 41 | # Now let's go have some fun with the cloned repo 42 | cd out 43 | 44 | git config user.name "Travis CI" 45 | git config user.email "$COMMIT_AUTHOR_EMAIL" 46 | 47 | # If there are no changes to the compiled out (e.g. this is a README update) then just bail. 48 | if [ $(git status --porcelain | wc -l) -lt 1 ]; then 49 | echo "No changes to the output on this push; exiting." 50 | exit 0 51 | fi 52 | 53 | # Commit the "changes", i.e. the new version. 54 | # The delta will show diffs between new and old versions. 55 | git add --all . 56 | git commit -m "Deploy to GitHub Pages: ${SHA}" 57 | 58 | # Get the deploy key by using Travis's stored variables to decrypt deploy_key.enc 59 | ENCRYPTED_KEY_VAR="encrypted_${ENCRYPTION_LABEL}_key" 60 | ENCRYPTED_IV_VAR="encrypted_${ENCRYPTION_LABEL}_iv" 61 | ENCRYPTED_KEY=${!ENCRYPTED_KEY_VAR} 62 | ENCRYPTED_IV=${!ENCRYPTED_IV_VAR} 63 | openssl aes-256-cbc -K $ENCRYPTED_KEY -iv $ENCRYPTED_IV -in ../deploy_key.enc -out deploy_key -d 64 | chmod 600 deploy_key 65 | eval `ssh-agent -s` 66 | ssh-add deploy_key 67 | 68 | # Now that we're all set up, we can push. 69 | git push $SSH_REPO $TARGET_BRANCH 70 | -------------------------------------------------------------------------------- /scaffolds/ng-alain/index.yml: -------------------------------------------------------------------------------- 1 | name: ng-alain 2 | git_url: 'git://github.com/cipchk/ng-alain.git' 3 | author: cipchk 4 | description: ng-zorro-antd admin panel front-end framework 5 | tags: 6 | - angular 7 | coverPicture: 'https://ucarecdn.com/9e162f4f-8fd3-4307-aa06-e096d0b1502b/' 8 | readme: > 9 | # ng-alain 10 | 11 | 12 | [Ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd) admin panel 13 | front-end framework. 14 | 15 | 16 | 更多信息见[中文 README](README-zh_CN.md) 17 | 18 | 19 | ## Quick start 20 | 21 | 22 | Make sure you have Node version >= 6.9.0 and NPM >= 3 or higher. 23 | 24 | 25 | ```bash 26 | 27 | # clone ng-alain repo 28 | 29 | # --depth 1 removes all but one .git commit history 30 | 31 | git clone --depth 1 https://github.com/cipchk/ng-alain.git 32 | 33 | 34 | # change directory 35 | 36 | cd ng-alain 37 | 38 | 39 | # install npm package 40 | 41 | # in china please use cnpm （https://github.com/cnpm/cnpm） 42 | 43 | npm install 44 | 45 | 46 | # start the serve 47 | 48 | npm start 49 | 50 | 51 | # use HMR 52 | 53 | npm run serve:hmr 54 | 55 | ``` 56 | 57 | 58 | ## Features 59 | 60 | 61 | + `ng-zorro-antd` based 62 | 63 | + Responsive Layout 64 | 65 | + I18n 66 | 67 | + Lazy load Assets 68 | 69 | + UI Router States 70 | 71 | + Multiple color options 72 | 73 | + SCSS preprocessor 74 | 75 | + Well organized & commented code 76 | 77 | + Simple upgrade 78 | 79 | + Hot Module Replacement 80 | 81 | 82 | ## App Shots 83 | 84 | 85 | ![desktop](_screenshot/desktop.png) 86 | 87 | ![ipad](_screenshot/ipad.png) 88 | 89 | ![iphone](_screenshot/iphone.png) 90 | 91 | 92 | ## Troubleshooting 93 | 94 | 95 | Please follow this guidelines when reporting bugs and feature requests: 96 | 97 | 98 | 1. Use [GitHub Issues](https://github.com/cipchk/ng-alain/issues) board to 99 | report bugs and feature requests (not our email address) 100 | 101 | 2. Please **always** write steps to reproduce the error. That way we can focus 102 | on fixing the bug, not scratching our heads trying to reproduce it. 103 | 104 | 105 | Thanks for understanding! 106 | 107 | 108 | ### License 109 | 110 | 111 | The MIT License (see the 112 | [LICENSE](https://github.com/cipchk/ng-alain/blob/master/LICENSE) file for the 113 | full text) 114 | deployedAt: 2017-08-23T04:09:09.297Z 115 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | readme: 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].readme = 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 sumbit is existed.', 13 | successed: 'Submit 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, started with http', 26 | 'submit.repo.error': 'Must be a valid GitHub url, started with http', 27 | 'submit.repo.duplicate': 'This url is existed', 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 would be displayed after we approval your request, you can check detail 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 | 'footer.created': 'Created by AIUX', 54 | 'footer.source': 'Source Code', 55 | 'banner.feature1': 'Quick Start', 56 | 'banner.feature2': 'For bussiness', 57 | 'banner.feature3': 'Best Practive', 58 | 'toolbar.sortByStarCount': 'Most Stars', 59 | 'toolbar.sortByUpdatedAt': 'Recently Updated', 60 | 'home.count': '{count} items', 61 | }, 62 | }; 63 | -------------------------------------------------------------------------------- /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: 2017-07-26T14:03:37.120Z 137 | -------------------------------------------------------------------------------- /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/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: 2017-11-07T04:23:45.318Z 135 | -------------------------------------------------------------------------------- /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/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/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/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/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: 2017-04-30T07:56:11.280Z 11 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/Layout/CommonLayout.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | 3 | .header { 4 | height: 64px; 5 | line-height: 64px; 6 | box-shadow: 0 0 8px rgba(0, 0, 0, .08); 7 | overflow: hidden; 8 | font-size: 14px; 9 | background: #fff; 10 | width: 100%; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 100; 15 | 16 | .headerContent { 17 | max-width: 1206px; 18 | margin: 0 auto; 19 | } 20 | 21 | .title { 22 | float: left; 23 | font-family: "Andale Mono","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif; 24 | font-size: 21px; 25 | color: rgba(0,0,0,0.65); 26 | letter-spacing: -1px; 27 | font-weight: normal; 28 | text-transform: uppercase; 29 | a { 30 | text-decoration: none; 31 | } 32 | img { 33 | width: 24px; 34 | margin-right: 10px; 35 | position: relative; 36 | top: 3px; 37 | } 38 | } 39 | 40 | .searchWrapper { 41 | margin-left: 32px; 42 | width: 668px; 43 | display: inline-block; 44 | ::placeholder { 45 | font-weight: lighter; 46 | } 47 | i { 48 | color: rgba(0, 0, 0, .25); 49 | margin-left: 8px; 50 | } 51 | } 52 | 53 | .search { 54 | input { 55 | border-radius: 100px; 56 | height: 32px; 57 | padding: 0 40px !important; 58 | } 59 | } 60 | 61 | .changeLocale { 62 | width: 48px; 63 | font-weight: normal; 64 | font-size: 12px; 65 | } 66 | 67 | .right { 68 | float: right; 69 | } 70 | 71 | .link { 72 | margin-right: 24px; 73 | i { 74 | font-size: 16px; 75 | vertical-align: text-bottom; 76 | } 77 | } 78 | 79 | .avatar { 80 | width: 16px; 81 | height: 16px; 82 | border-radius: 100%; 83 | vertical-align: middle; 84 | margin-right: 8px; 85 | position: relative; 86 | top: -2px; 87 | } 88 | 89 | a { 90 | color: @text-color; 91 | &:hover { 92 | color: @primary-color; 93 | } 94 | > i { 95 | margin-right: 8px; 96 | } 97 | } 98 | } 99 | 100 | .banner { 101 | height: 280px; 102 | text-align: center; 103 | background: url("https://gw.alipayobjects.com/zos/rmsportal/eVzxhywWMXULoUculczM.png") center / 1440px no-repeat, linear-gradient(128deg, @primary-color, rgb(237,51,186)); 104 | color: #fff; 105 | overflow: hidden; 106 | margin-top: 64px; 107 | margin-bottom: -64px; 108 | .bannerText { 109 | font-size: 28px; 110 | color: #fff; 111 | text-shadow: 0 5px 10px #6E55B5; 112 | margin: 72px 0 16px 0; 113 | line-height: 1; 114 | } 115 | .bannerFeatures { 116 | font-size: 13px; 117 | font-weight: lighter; 118 | margin-bottom: 40px; 119 | opacity: 0.8; 120 | letter-spacing: .1em; 121 | } 122 | .bannerDot { 123 | margin: 0 12px; 124 | font-family: Helvetica; 125 | } 126 | .submit { 127 | border-radius: 100px; 128 | background: #fff; 129 | padding: 0 40px; 130 | height: 40px; 131 | color: #876FD2; 132 | border: 0; 133 | box-shadow: 0 0 16px #6E55B5; 134 | transition: all .3s; 135 | margin-bottom: 56px; 136 | cursor: pointer; 137 | &:hover { 138 | box-shadow: 0 0 32px rgba(0,0,0,0.5); 139 | } 140 | } 141 | } 142 | 143 | .container { 144 | max-width: 1206px; 145 | margin: 104px auto 0; 146 | &:after { 147 | content: ''; 148 | clear: both; 149 | display: block; 150 | } 151 | } 152 | 153 | .footer { 154 | padding: 48px 0; 155 | text-align: center; 156 | color: rgba(0,0,0,0.5); 157 | font-size: 13px; 158 | > div { 159 | margin-bottom: 12px; 160 | } 161 | img { 162 | width: 14px; 163 | margin: 0 6px; 164 | position: relative; 165 | top: -1px; 166 | vertical-align: middle; 167 | } 168 | a { 169 | font-size: 12px; 170 | color: rgba(0,0,0,0.5); 171 | margin: 0 0.5em; 172 | transition: all .3s; 173 | &:hover { 174 | color: rgba(0,0,0,0.9); 175 | } 176 | } 177 | } 178 | 179 | @media only screen and (max-width: 1024px) { 180 | .header { 181 | padding: 0 24px; 182 | } 183 | .searchWrapper { 184 | display: none!important; 185 | } 186 | } 187 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/react-molin/index.yml: -------------------------------------------------------------------------------- 1 | name: react-molin 2 | git_url: 'git://github.com/Molin123/react-molin.git' 3 | author: Molin123 4 | description: react-molin是一个全新的基于webpack2、react15、react-router4、antd-mobile的前端架构实现方案（h5） 5 | tags: [] 6 | coverPicture: null 7 | readme: >+ 8 | # react-molin 9 | 10 | 11 | [react-molin](https://github.com/Molin123/react-molin)是一个全新的基于webpack2、react15、react-router4、antd-mobile的前端架构实现方案（h5） 12 | 13 | 14 | 15 | 16 | # react-molin的优势 17 | 18 | 19 | * 基于最新的webpack2、react15、react-router4 20 | 21 | * 相比antd官方框架[dva](https://github.com/dvajs/dva)更加轻量级 22 | 23 | * 支持多个单页面应用同时开发 24 | 25 | * 不同入口页面css/js单独合并压缩 26 | 27 | * 静态文件自动添加版本号 28 | 29 | * 高清脚本解决方案，完美支持1px 30 | 31 | * ES2015 32 | 33 | * less替代css 34 | 35 | * fetch替代Ajax 36 | 37 | * ESlint在代码提交前进行规范检测 38 | 39 | 40 | 41 | # 项目依赖 42 | 43 | 44 | * webpack^2.3.2 45 | 46 | * antd-mobile^1.0.7 47 | 48 | * react^15.4.2 49 | 50 | * react-router-dom^4.0.0 51 | 52 | 53 | 54 | # 运行 55 | 56 | 57 | ``` 58 | 59 | git clone https://github.com/Molin123/react-molin.git 60 | 61 | cd react-molin 62 | 63 | npm install(如果报错，请使用cnpm) 64 | 65 | npm run start -- 127.0.0.1 66 | 67 | ``` 68 | 69 | 70 | 然后即可以访问[http://127.0.0.1:1024/home.html#/index](http://127.0.0.1:1024/home.html#/index)看到页面了 71 | 72 | 73 | # 编译 74 | 75 | 76 | ``` 77 | 78 | npm run build 79 | 80 | ``` 81 | 82 | 83 | 编译后的文件会生成到`output`目录下，直接将这个目录下的文件部署到服务器上即可。 84 | 85 | 86 | 87 | 88 | # 目录结构 89 | 90 | 91 | ``` 92 | 93 | . 94 | 95 | ├── src 96 | 97 | │ ├── app 98 | 99 | │ │ ├── images/ 100 | 101 | │ │ ├── index.js 102 | 103 | │ │ └── list.js 104 | 105 | │ ├── home 106 | 107 | │ │ ├── images/ 108 | 109 | │ │ ├── index.js 110 | 111 | │ │ └── list.js 112 | 113 | │ ├── home.js 114 | 115 | │ ├── app.js 116 | 117 | │ ├── bundle.js 118 | 119 | │ └── template.ejs 120 | 121 | ├── output 122 | 123 | │ ├── images/ 124 | 125 | │ ├── **.html 126 | 127 | │ ├── **.css 128 | 129 | │ └── **.js 130 | 131 | ├── config 132 | 133 | │ ├── config.page.js 134 | 135 | │ ├── config.server.js 136 | 137 | │ └── config.proxy.js 138 | 139 | ├── mock 140 | 141 | │ └── **.json 142 | 143 | ├── .babelrc 144 | 145 | ├── .eslintrc 146 | 147 | ├── package.json 148 | 149 | └── webpack.config.js 150 | 151 | ``` 152 | 153 | 154 | 1. 其中`home`和`app`是两个单独的页面 155 | 156 | 2. `src/template.ejs`为生成HTML文件的模板，可自由修改 157 | 158 | 3. `src/bundle.js`是代码分割模型 159 | 160 | 4. `output/`目录下是build后的生成文件，可直接不熟到服务器 161 | 162 | 163 | 164 | # 多页面入口配置 165 | 166 | 167 | 如果想在项目里面增加入口，只需要在`./config/config.page.js`中增加配置即可 168 | 169 | 170 | ``` 171 | 172 | module.exports = { 173 | "list": [{ 174 | "name": "app", 175 | "entry": "./app.js", 176 | "title": "app页面", 177 | "filename": "app.html", 178 | "template": "template.ejs", 179 | "chunks": "app" 180 | }, { 181 | "name": "home", 182 | "entry": "./home.js", 183 | "title": "home页面", 184 | "filename": "home.html", 185 | "template": "template.ejs", 186 | "chunks": "home" 187 | }] 188 | } 189 | 190 | ``` 191 | 192 | 193 | 194 | # todoList 195 | 196 | 197 | 1. ~~支持多入口（3.30 done）~~ 198 | 199 | 2. ~~common拆分（暂时不做）~~ 200 | 201 | 3. ~~静态文件加戳（3.31 done）~~ 202 | 203 | 4. ~~dev-server配置（4.6 done）~~ 204 | 205 | 5. ~~目录结构优化（4.7 done）~~ 206 | 207 | 6. ~~webpack配置拆分（暂时不需要）~~ 208 | 209 | 7. ~~使用react-router路由（3.30 done）~~ 210 | 211 | 8. ~~fetch语法支持（4.1 done）~~ 212 | 213 | 9. ~~静态文件输出（3.31 done）~~ 214 | 215 | 10. ~~打包后js文件过大（3.31 做压缩处理 4.20 做代码拆分）~~ 216 | 217 | 11. ~~热更新（4.5 done）~~ 218 | 219 | 12. ~~css打包存在问题（4.5 done）~~ 220 | 221 | 13. ~~验证多less文件的合并情况（4.6 done）~~ 222 | 223 | 14. ~~图片目录（4.7 done）~~ 224 | 225 | 15. ~~css压缩（4.24 done）~~ 226 | 227 | 16. ~~代码拆分（4.20 done）~~ 228 | 229 | 230 | 231 | 232 | 233 | # future 234 | 235 | 236 | 1. redux 237 | 238 | 2. deploy 239 | 240 | 3. 。。。 241 | 242 | 243 | 244 | # hot和inline的区别 245 | 246 | 247 | webpack-dev-server的inline和hot参数都可以在代码改变的时候实现浏览器页面自动更新，具体的区别请参考我的博客[webpack-dev-server中inline和HMR的区别](http://1.molinblog.applinzi.com/blog/webpack-dev-server.html) 248 | 249 | 250 | # react-router4如何做Code Splitting 251 | 252 | 253 | react-router4做按需加载，需要使用[bundle-loader](https://github.com/webpack-contrib/bundle-loader)来实现。具体请参考[react-router4实现按需加载](http://1.molinblog.applinzi.com/blog/code-splitting.html) 254 | 255 | 256 | # 如何在react项目中使用ESlint检测代码规范 257 | 258 | 259 | ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格，特别是当工程变得越来越大、越来越多的人参与进来时，需要加强一些最佳实践。 260 | 261 | 262 | [如何在react项目中使用ESlint检测代码规范](https://juejin.im/post/58ff0de18d6d810058a69a26) 263 | 264 | 265 | # 对于deploy的设想 266 | 267 | 268 | 使用gulp-sftp（或其他）实现文件上传到服务器上的指定目录 269 | 270 | 271 | deployedAt: 2017-05-31T08:58:10.827Z 272 | -------------------------------------------------------------------------------- /scaffolds/react-starter-kit/index.yml: -------------------------------------------------------------------------------- 1 | name: react-starter-kit 2 | git_url: 'git://github.com/songzhengxu/react-starter-kit.git' 3 | author: songzhengxu 4 | description: >- 5 | 基于webpack2 + ES6/7 + less + React15.5 + Redux3.6 + React-Router4.0 + 6 | react-hot-loader3 + antd 7 | tags: 8 | - react 9 | - redux 10 | - webpack2 11 | - babel 12 | - antd 13 | - react-hot-loader3 14 | - react-router4 15 | coverPicture: 'https://ucarecdn.com/3ee0a4a1-aa69-46a0-9a0b-69d51a791dec/' 16 | readme: "react-starter-kit\n=================\n\n基于webpack2 + ES6/7 + less + React15.5 + Redux3.6 + React-Router4.0 + react-hot-loader3 + antd\n\n> 这个脚手架工程模板用于快速启动基于 React + Webpack 为技术栈的前端项目\n\n---\n\n更新日志\n--------\n\n20170814\n--------\n\n-\t1.引入CSS Modules 且分离antd的less不走CSS Modules编译\n\n20170803\n--------\n\n-\t1.加入babel-polyfill\n-\t2.修复cross-env 未生效的bug\n-\t3.加入stage-2支持，用es2017的语法解决react bind this的问题，\n\n> 详细见 src\\Component\\From.jsx 中的代码，直接用stage-2的写法，事件不用再绑定this;\n\n20170725\n--------\n\n-\t1.使用cross-env来设置跨平台设置环境变量\n-\t2.统一window,mac的开发运行命令\n-\t3.配置允许局域网访问 http://ip:port\n\n20170719\n--------\n\n-\t1.移除react-intl国际化需求\n-\t2.严格按照Angular 规范书写Commit message\n\n20170710\n--------\n\n-\t1.语法检查严格按照airbnb规范\n-\t2.路由代码拆分，实现页面[按需加载](https://reacttraining.cn/web/guides/code-splitting)\n\n> 1.语法检查严格是好事，至少能够按照规则写出规范的代码，看着都很舒心，慢慢的就会接受并习惯它，但是也不能完全按照它的规范来，以免适得其反，都可以通过配置文件忽略某些规则，或者跳过某些文件，代码行等，这样下来，才有一套自己的代码规范 2.路由实现代码拆分以后，打包的文件小了，打包的时间也少了，打包时间优化从71s-36s-17s. 优化从未停止！\n\n20170707\n--------\n\n-\t1.组件拆分为容器组件和视图组件\n-\t2.新增react-intl来达到国际化多语言\n\n> 拆分容器组件和视图组件，能让我们更好的进行组件的代码复用，叫法挺多的，什么智能组件和木偶组件，容器组件和展示组件\n\nFeatures 功能特性\n-----------------\n\n-\t自动化流程\n\n\t-\t可以解析 JSX 语法\n\t-\t可以解析 ES6/ES7 语法新特性\n\t-\t支持 LESS 预处理器\n\t-\t区分开发环境和生产环境,代码中插入环境变量\n\t-\t分离业务功能代码和公共依赖代码，单独打包第三方库\n\t-\t支持编译 HTML 模板\n\t-\t支持图片、图标字体等资源的编译\n\t-\t自动补全文件后缀\n\t-\t指定静态资源的url路径前缀--静态资源上cdn必备\n\t-\t简化import路径\n\t-\t配置favicon\n\t-\t使用webpack 2自带的ES6模块处理功能(禁用了-可配置)\n\t-\t编译前清空dist目录\n\n-\t开发流程\n\n\t-\t实时的语法检测，基于airbnb/react -可配置编辑器\n\t-\t实现组件级热更新\n\t-\t实现代码的热替换，浏览器实时刷新查看效果\n\t-\t编译完成自动打开浏览器\n\n-\t打包流程\n\n\t-\t支持文件 MD5 戳,解决文件缓存问题\n\t-\tCSS3 使用autoprefixer自动补全前缀\n\t-\t支持一行命令产出待部署资源\n\t-\t单独分离 CSS 样式文件(开发环境不分离-分离后不支持css的热更新)\n\n-\t测试任务\n\n\t-\t支持 mocha 测试用例运行\n\t-\t支持react官方工具库react-dom/test-utils的单元测试\n\t-\t支持Enzyme的react-redux的测试\n\t-\t支持Istanbul 覆盖率测试\n\n---\n\n快速开始\n--------\n\n```\n$ git clone https://github.com/songzhengxu/react-starter-kit.git\n$ cd react-starter-kit\n$ npm install\n```\n\n#### 2.1 开发调试\n\n```\n//启动项目\n$ npm run dev\n```\n\n将自动打开浏览器`http://127.0.0.1:3000`\n\n#### 2.2 代码检查\n\n```\n$ 编译和打包都会自动运行代码检查\n 也可以配置编辑器,在编码时实时检查语法 如: atom需要安装linter和linter-eslint这两个插件, 装好后重启生效.\n```\n\n> 注意：如果有语法错误，则浏览器控制台会报errors，则热替换不会生效，切记！\n\n#### 2.3 测试用例\n\n```\n$ npm run test \t\t\t\t// 运行单元测试\n$ npm run coverage \t\t// 运行覆盖率测试\n```\n\n> 单元测试在控制台输出报告，覆盖率测试将在项目根目录中创建coverage文件夹来输出测试报告， 进入coverage/lcov-report 中，打开index.html 能够在浏览器中查看更加详细的覆盖率测试报告\n\n#### 2.4 产出资源\n\n```\n$ npm run build\n```\n\n导出的代码在项目根目录中\n\n---\n\n目录结构\n--------\n\n```\nreact-starter-kit/\n├─src // 源文件目录\n│ ├─Action \n│ ├─Assets // 图片资源\n│ ├─Component\n│ │ └─Common\n│ ├─Config\n│ ├─Iconfont // 字体\n│ ├─Reducer\n│ ├─Style\n│ ├─Template // html模板\n│ └─utils\n└─test // 测试用例目录\n ├─Action\n ├─Component\n └─Reducer\n```\n\n---\n\n技术栈\n------\n\n1.\t[x] [Webpack](https://webpack.github.io)\n2.\t[x] [React](https://facebook.github.io/react/)\n3.\t[x] [ES6](http://es6.ruanyifeng.com/)\n4.\t[x] [Redux](https://github.com/rackt/redux)\n5.\t[x] [React-router](https://github.com/rackt/react-router-redux)\n6.\t[x] [Babel](https://babeljs.io/)\n7.\t[x] [Autoprefixer](https://github.com/postcss/autoprefixer)\n8.\t[x] [PostCSS](https://github.com/postcss/postcss)\n9.\t[x] [CSS modules](https://github.com/outpunk/postcss-modules)\n10.\t[x] [Less](https://github.com/less/less.js)\n11.\t[x] [Eslint](https://github.com/eslint/eslint)\n\n---\n\n待解决的问题\n------------\n\n-\t使用webpack 2自带的ES6模块处理功能与mocha测试配置冲突 (已解决)\n\n> 引起冲突的原因： webpack hot-module-replacement需要利用es6 import，因此我们需要在presets选项里面将es2015的modules选项设置为false,默认为commonjs 但是mocha测试(在Node运行环境下)的时候需要想import 转为为commonjs风格的require 解决方法： 利用babel在不同环境变量的情况下读取不同options的特性 测试的时候，将临时环境变量设置为test, 在babelrc文件里面的env选项下，配置好环境变量为test的时候需要使用的presets和plugins 开发的时候，将临时环境变量设置为development, 在没有配置的情况狂下，babelrc默认的环境变狼为development\n\n-\t带有路由的组件，在mocha测试时，不能渲染到dom (已解决)\n\n> 组件带有路由的情况下需要将组件包裹在 里面，直接放到测试中运行。 而不是用生成新的组件后再放到测试中运行。具体查看测试用例\n\n-\tredux组件在mocha测试时，不能渲到dom (已解决)\n\n> 可以通过自己创建一个store,创建store的时候，即使只有一个reducer也要用combineReducers包裹好再创建。 创建好store后，利用生成一个组件，放到测试中即可。\n\n-\tjsdom8.0.1升级到jsdom10.1.0 (已解决)\n\n> jsdom10.1.0相对于8.0.1来说，更改了部分api，根据官网api，修改setup.js即可。 setup.js： https://github.com/lelandrichardson/enzyme-example-mocha/blob/master/test/.setup.js jsdom 10.1.0： https://github.com/tmpvar/jsdom\n\n-\t当引入less时，mocha测试报错,\n\n> 由于antd的模块配置是使用less按需加载，所以是动态引入less文件，以及我们自己引入的less文件，组件都不能通过测试，我们需要配置mocha 忽略less 文件\n\nInstall it:\n\n```js\nnpm install --save-dev ignore-styles\n```\n\nRun tests without styles:\n\n```js\nmocha --require ignore-styles\n```\n\n-\t简化import路径 mocha测试不能识别 - ---\n\n> 使用 babel-plugin-module-resolver 解决\n" 17 | deployedAt: 2017-09-15T01:55:28.688Z 18 | -------------------------------------------------------------------------------- /src/components/Contribute/Submit.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Select, Button, Input, Form, Upload, Icon, Progress, Tooltip, message } from 'antd'; 3 | import { FormattedMessage } from 'react-intl'; 4 | import styles from './Submit.less'; 5 | 6 | const FormItem = Form.Item; 7 | const { Dragger } = Upload; 8 | 9 | function Submit({ repo, dispatch, form, loading, intl }) { 10 | if (!repo) { 11 | return null; 12 | } 13 | const { getFieldDecorator, validateFields, getFieldValue, setFieldsValue } = form; 14 | const coverPicture = getFieldValue('coverPicture'); 15 | const coverPictureUploading = (coverPicture && !coverPicture.response); 16 | const coverPictureUploaded = ( 17 | coverPicture && coverPicture.response && coverPicture.response.file 18 | ); 19 | return ( 20 |
    21 |

    22 | 23 |

    24 |
    25 | 26 |
    27 | } hasFeedback> 28 | {getFieldDecorator('name', { initialValue: repo.name })()} 29 | 30 | } hasFeedback> 31 | {getFieldDecorator('git_url', { initialValue: repo.git_url })()} 32 | 33 | } hasFeedback> 34 | {getFieldDecorator('author', { initialValue: repo.owner.login })()} 35 | 36 | } hasFeedback> 37 | {getFieldDecorator('description', { initialValue: repo.description })()} 38 | 39 | } hasFeedback> 40 | {getFieldDecorator('tags', { initialValue: [] })( 41 | } 33 | placeholder={intl.formatMessage({ id: 'header.search' })} 34 | onChange={this.handleSearch} 35 | /> 36 | 37 |
    38 | {user ? ( 39 | 40 | 41 | 42 | 43 | 44 | {!user.logining && ( 45 | 46 | avatar 47 | {user.name} 48 | 49 | )} 50 | 51 | ) : ( 52 | 53 | 54 | 55 | 56 | 57 | dispatch({ type: 'auth/login' })}> 58 | 59 | 60 | 61 | 62 | )} 63 | 70 |
    71 | 72 | 73 | { 74 | pathname === '/' ? ( 75 |
    76 |
    77 | 78 |
    79 |
    80 | 81 | ∙ 82 | 83 | ∙ 84 | 85 |
    86 | 87 | 90 | 91 |
    92 | ) : null 93 | } 94 |
    95 | {children} 96 |
    97 | 116 | 117 | ); 118 | } 119 | } 120 | 121 | export default connect(props => ({ 122 | user: props.auth ? props.auth.user : {}, 123 | }))(injectIntl(CommonLayout)); 124 | -------------------------------------------------------------------------------- /scaffolds/react-redux-antdesign-webpack-starter/index.yml: -------------------------------------------------------------------------------- 1 | name: react-redux-antdesign-webpack-starter 2 | git_url: 'git://github.com/MacKentoch/react-redux-antdesign-webpack-starter.git' 3 | author: MacKentoch 4 | description: react + redux + ant design + webpack starter 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/332cffde-21ba-4d37-bbb3-005fcdc24b40/' 7 | readme: > 8 | React + React-Router 4 + Redux + Ant Design + Webpack 3 with Hot Reload and 9 | redux-devtools-extension STARTER 10 | 11 | ========== 12 | 13 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/MacKentoch/react-redux-antdesign-webpack-starter) 14 | 15 | 16 | 17 | # A full Ant Design starter 18 | 19 | 20 | > You loved `Bootstrap`? Wait and see [`Ant Design`](https://ant.design/). Do 21 | you understand now what I mean? 22 | 23 | 24 | ![preview](./preview/preview.png) 25 | 26 | 27 | ## Detailed Content 28 | 29 | 30 | **Front:** 31 | 32 | - React JS (15.6.x+ - [github :link:](https://github.com/facebook/react)) 33 | 34 | - ant design (2.12 [github :link:](https://github.com/ant-design/ant-design/)) 35 | - with built-in *theme customization* (change vars in [antd-theme-overrides.less](https://github.com/MacKentoch/react-redux-antdesign-webpack-starter/tree/master/src/app/style/antd-theme-overrides.less) to customize) 36 | - Redux (*as you application grows managing state will be a serious concern, 37 | save pain with Redux*) 38 | 39 | - React-Redux (*Redux is not specific to ReactJS, you could easily use it with 40 | Angular2 for instance*) 41 | 42 | - redux-devtools-extension ([github 43 | :link:](https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension)) 44 | 45 | - React-Router-Redux (*previously named react-simple-router*) 46 | 47 | - react-router (4.x- [github :link:](https://github.com/reactjs/react-router)) 48 | 49 | - animate.css ([github :link:](https://github.com/daneden/animate.css)) 50 | 51 | - classnames ([github :link:](https://github.com/JedWatson/classnames)) 52 | 53 | - react-motion ([github :link:](https://github.com/chenglou/react-motion)) 54 | 55 | - Webpack 3.x ([github :link:](https://github.com/webpack/webpack)) 56 | 57 | - babel 6+ ([github :link:](https://github.com/babel/babel)) 58 | 59 | - axios ([github :link:](https://github.com/mzabriskie/axios) *Why: simple, 60 | complete, isomorphic ...*) 61 | 62 | - flow 63 | 64 | 65 | **Tool chain:** 66 | 67 | - babel 6+ 68 | 69 | - eslint 70 | 71 | - webpack 3 72 | 73 | - hot reload 74 | 75 | - loaders 76 | - `js` / `jsx` 77 | - postcss 78 | - less 79 | - sass 80 | - css 81 | - json 82 | - images formats 83 | - svg and fonts formats 84 | 85 | **tests:** 86 | 87 | - Jest 88 | 89 | 90 | 91 | ## Usage 92 | 93 | 94 | ### Install 95 | 96 | 97 | ```bash 98 | 99 | npm install 100 | 101 | ``` 102 | 103 | ### bundle dev mode (*+ redux-devtools-extension*) 104 | 105 | 106 | ```bash 107 | 108 | npm run dev 109 | 110 | ``` 111 | 112 | 113 | ### dev : hot reload mode (*+ redux-devtools-extension*) 114 | 115 | 116 | ```bash 117 | 118 | npm run start 119 | 120 | ``` 121 | 122 | 123 | ### tests 124 | 125 | 126 | ```bash 127 | 128 | npm run test 129 | 130 | ``` 131 | 132 | 133 | ### bundle production mode 134 | 135 | 136 | 137 | ```bash 138 | 139 | npm run prod 140 | 141 | ``` 142 | 143 | 144 | ### mini node-express server (for dev or prod bundles) 145 | 146 | 147 | with server hot reload: 148 | 149 | ```bash 150 | 151 | npm run serve-dev 152 | 153 | ``` 154 | 155 | 156 | without hot reload: 157 | 158 | ```bash 159 | 160 | npm run serve-prod 161 | 162 | ``` 163 | 164 | 165 | ## To fix 166 | 167 | 168 | - [x] production bundle (fixed: see 169 | [#5060](https://github.com/ant-design/ant-design/issues/5060)) 170 | 171 | 172 | ## License 173 | 174 | 175 | The MIT License (MIT) 176 | 177 | 178 | Copyright (c) 2017 Erwan DATIN 179 | 180 | 181 | Permission is hereby granted, free of charge, to any person obtaining a copy 182 | of this software and associated documentation files (the "Software"), to deal 183 | in the Software without restriction, including without limitation the rights 184 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 185 | copies of the Software, and to permit persons to whom the Software is 186 | furnished to do so, subject to the following conditions: 187 | 188 | 189 | The above copyright notice and this permission notice shall be included in all 190 | copies or substantial portions of the Software. 191 | 192 | 193 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 194 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 195 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 196 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 197 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 198 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 199 | SOFTWARE. 200 | deployedAt: 2017-08-20T11:24:28.567Z 201 | -------------------------------------------------------------------------------- /scaffolds/react_news_site/index.yml: -------------------------------------------------------------------------------- 1 | name: react_news_site 2 | git_url: 'git://github.com/cjxmg/react_news_site.git' 3 | author: cjxmg 4 | description: 基于react+webpack+es6构建的一个单页面新闻站点 5 | tags: 6 | - news 7 | coverPicture: null 8 | readme: "# React-news\n![im-js-logo](./doc/img/react-logo.jpg)\n\n>一个基于 React + Webpack + es6 + Babel + ant-design 的新闻站点 \n\n项目主页 [Github-react_news_site](https://github.com/cjxmg/react_news_site)\n\n演示地址 [ReactNews](http://superxmg.website/project/react_news_site/)\n\n## 写在前面\n之前自学过前端自动化工具和angular，但一直没有搭建过一个完整的项目，于是这次认真的做了个基于react新闻网站，自动化工具采用webpack，由于使用了es6的语法，需要用到Babel，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。\n\n此项目是根据慕课网教程仿制的，通过此项目也确实学到了很多东西，现在分享出来，也算是我的一个学习总结，[完整的视频教程链接](http://pan.baidu.com/s/1nuVL3hJ)\n\n觉得好的同学可以给个**star**，万分感谢~ (✪ω✪)\n\n## 效果图\n适配了移动端，pc端直接打开上面的链接\n\n移动端 预览 | 直接扫码打开网页\n:-:|:-:\n![ios-demo.gif](./doc/img/mobile_show.png) | ![安卓下载二维码](./doc/img/qrcode.png)\n\n## 运行项目\n\n**安装依赖** \n```shell\nnpm install\n```\n**进入开发模式**\n```shell\nnpm run dev\n// or\nwebpack-dev-server --inline --hot\n// 之后打开 localhost:8080 查看\n```\n如果还没安装node的同学，可把 index.html 里的 script 改成下面的形式，然后直接打开`index.html`即可\n![index](./doc/img/index.png)\n\n\n## [webpack](http://webpack.github.io/docs/)配置\n\n> webpack是一款模块加载器兼打包 工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。\n\n react的组件功能很好用，在一个项目中，有些组件可能由不同的人所开发，所以时常需要引入其他的脚本文件，虽然可以用命名空间的办法来解决，但最后在html页面中通过script标签引入各类组件和文件时，还是会显着异常混乱，各模块之间的依赖，先后加载顺序都得人为控制，会极大的降低开发效率，而且项目中用到了es6的语法，需要用到babel来进行es6的转化，所以选择了webpack来进行前端自动化的管理\n\n webpack配置文件：webpack.config.js\n\n ```javascript\n module.exports = {\n entry: __dirname + '/src/js/root.js',\n output: {\n path: __dirname + '/src/',\n filename: 'bundle.js'\n },\n module: {\n loaders: [\n {\n test: /\\.js?$/,\n exclude: /node_modules/,\n loader: 'babel-loader',\n query: {\n presets: ['react', 'es2015 '], //设定babel的转码规则\n \"plugins\": [\n [\"import\", { libraryName: \"antd\", \"style\": \"css\" }] // `style: true` 会加载 less 文件\n ]\n }\n },\n {\n test: /\\.css$/,\n loader: 'style!css-loader'\n }\n ]\n }\n }\n ```\n当运行`webpack`命令时会自动把文件打包在./src目录下\n\n\n## [ANT DESIGN](https://ant.design/index-cn)\n\n![ANT DESIGN](./doc/img/antd.png)\n\n> 一个 UI 设计框架，采用 React 封装的一套 Ant Design 的组件库，比较好用，可快速构建一个样式丰富的站点\n\nantd的组件使用十分方便，官方文档也比较详细\n```javascript\nimport 'antd/dist/antd.css'; // or 'antd/dist/antd.less'\nimport { DatePicker } from 'antd';\nReactDOM.render(, mountNode); //也可传入参数\n```\n如果只需要用到其中的几个组件，则引入全部antd的样式则会显得多余，官方文档推荐了一个package： `babel-plugin-import`，配置使用后只需引入组件就行，不用理会样式，`babel-plugin-import`会自动按需加载需要的样式，而忽略那些多余的样式\n```javascript\n// babel-plugin-import 会帮助你加载 JS 和 CSS\nimport { DatePicker } from 'antd';\n```\n## React + Es6\n> 用es6的语法写react组件会有一些不同，比如。。\n\n#### 组件的定义\n* es5语法：\n ```javascript\n var Component = React.createClass({\n render: function() {\n return

    Hello World

    ;\n }\n });\n ```\n\n* es6语法：\n ```javascript\n class Component extends React.Component {\n render() {\n return (\n

    Hello World

    \n );\n }\n };\n ```\n\n#### 定义组件的state属性\n* es5语法：\n ```javascript\n var Component = React.createClass({\n getInitialState: function() {\n return {text: 'World'};\n },\n render: function() {\n return

    Hello {this.state.text}

    ;\n }\n });\n ```\n* es6语法：\n ```javascript\n class Component extends React.Component {\n constructor() {\n super(); //子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。\n \tthis.state = {text: 'World'};\n }\n render() {\n return (\n

    Hello {this.state.text}

    \n );\n }\n };\n ```\n#### 组件事件处理函数的this差异\n* es5语法：\n ```javascript\n var Component = React.createClass({\n getInitialState: function() {\n return {text: 'World'};\n },\n handleClick: function() {\n this.setState({text: 'React'});\n },\n render: function() {\n return

    Hello {this.state.text}

    ;\n }\n });\n ```\n 用es5写法时，在事件处理函数handleClick中，this指向的是组件本身，所以this有setState方法。\n\n* es6语法：\n ```javascript\n class Component extends React.Component {\n constructor() {\n super(); //子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。\n \tthis.state = {text: 'World'};\n }\n\n handleClick() {\n this.setState({text: 'React'});\n }\n\n render() {\n return (\n

    Hello {this.state.text}

    \n );\n }\n };\n ```\n 使用es6语法时，如果绑定事件时直接用`

    `,则函数handleClick里的this为`null`,调用`this.setState`方法时会报错，所以需改为`

    `,用当前组件对象替换之前的`null`，成为新的this\n\n\n\n## 一些相关链接\n* [HTML to JSX Compiler](http://magic.reactjs.net/htmltojsx.htm) ：可将html代码转换成jsx形式\n\n* [ANT DESIGN - 一个ui设计语言](https://ant.design/index-cn)\n\n* [React 中文文档](https://tianxiangbing.github.io/react-cn/docs/getting-started.html)\n\n* [webpack 2.2 中文文档](http://www.css88.com/doc/webpack2/)\n\n* [前端编码规范](https://giscafer.gitbooks.io/front-end-manual/content/) ：算是比较详细的，包含编码规范和优化等\n\n* [阮一峰的react入门](http://www.ruanyifeng.com/blog/2015/03/react.html) ：简单易懂，配套demo，适合初学者入门\n\n* [阮一峰的es6入门](http://es6.ruanyifeng.com/)\n\n* [入门Webpack，看这篇就够了](http://www.jianshu.com/p/42e11515c10f#) ：写的很不错，逐级深入，有点长，耐心看完\n\n## 后记\n总结了项目中遇到的一些问题和用到的东西，前端这条路还很长，我也会不断的学习更多新知识，如果有写的不对，不好的地方，虚心接受大家的指点~\n" 9 | deployedAt: 2017-06-10T08:09:18.784Z 10 | -------------------------------------------------------------------------------- /scaffolds/duxianwei-react-spa/index.yml: -------------------------------------------------------------------------------- 1 | name: duxianwei-react-spa 2 | git_url: 'git://github.com/duxianwei520/react.git' 3 | author: duxianwei520 4 | description: 一个react+redux+webpack+ES6+antd的SPA的后台管理框架demo 5 | tags: 6 | - react 7 | - antd 8 | - spa 9 | coverPicture: 'https://ucarecdn.com/00321714-ae38-468c-855a-2f2228457ca0/' 10 | readme: "# 前言\n\n为什么选择react而不是vue也不是angular？\n\nng1.x老衲用过3个月，觉得整个框架组织结构更像是专门为系统指定的，要什么有什么，这样的话对于在线mobile app性能是个大的考验，还有一个不喜欢的点是他的写法更像是PHP哪种形式的绑定，比较总的后端思维在里面\n\nvue贫道也做过一个微信端的小项目，觉得还是比较容易上手的，1.x感觉跟ng1.x的思想上更加接近，但是对于开发app的话，没有weex也只能依赖于cordova之类的，觉得在性能上可能还是差了那么点意思，再有一个重要的点就是，主要是尤小溪个人的项目，虽然后面也有不少的人加入，但觉得精力还是太有限了。\n\n最后react可能是所有方案里面最合适最这种的一个技术栈了，不加全家桶的话，跟vue一样的轻量，移动端有比较成熟的react native。\n\nso，就是这个了\n\n\n## 技术栈\n\nreact + redux + react-router + webpack + ES6/7 + fetch + less + flex\n\n\n\n## 项目运行\n\n#### 注意：由于涉及大量的 ES6/7 等新属性，nodejs 必须是 6.0 以上版本 ，node 7 是先行版，有可能会出问题，建议使用 node 6 稳定版\n\n```\ngit clone https://github.com/duxianwei520/react.git \_\n\ncd react （进入当前的项目）\n\nnpm install (安装依赖包)\n\nnpm start (运行本地开发环境)\nnpm run build (打包)\n\nnode mockserver.js (前端本地用node模拟接口进程)\n\n```\n\n\n## 说明\n\n> 喜欢的别忘记了可以star一下的噢！ \n\n> 开发环境 win10 Chrome 58.0.3029.110 \_nodejs 6.2.0\n\n> 如果npm install太慢导致有些npm依赖包下载失败 你可以看控制台的报错信息，再手动npm install 具体的开发包，推荐使用淘宝的注册源，直接运行，\n```\nnpm install -g cnpm --registry=https://registry.npm.taobao.org \n\n```\n如果这个方法还不行的话，可以到我的百度网盘上面去下载我已经压缩好的npm依赖包，地址是\n``` \nhttp://pan.baidu.com/s/1pLdPWgj\n\n```\n把下载到本地的node_modules.rar文件直接解压到跟app同级的当前文件夹，记住是当前文件夹的，然后不用npm install就可以直接npm start跑起来项目了。\n\n> 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR \uD83D\uDC4D\n\n\n\n## 功能一览\n- [√] 项目按路由模块加载\n- [√] 登录，以及登录权限控制\n- [√] 退出\n- [√] 欢迎主页\n- [√] 左侧菜单，正常moni切换\n- [√] redux完整范例\n- [√] nodejs代理数据完全示例\n- [√] 页面高度flex自适应\n\n\n\n\n## 总结\n\n1、这整个技术栈是我们公司前端部门在用的，写熟悉了之后，用来做后台管理系统类的实在是很方便，大家都表示再也不要用jQuery来做这样子的系统了\n\n2、目前来说，不足的地方是在于没有很好的区分dev环境跟pro环境，这个后面弄好了再补充上来；mock数据现在还不是那么的方便，需要自己一个个的添加api的json文件\n\n\n\n\n## 部分截图\n\n\n### 登录页\n\n \n\n\n### 欢迎页\n\n\n\n\n\n### 列表页\n\n\n\n### 请求接口\n\n\n\n\n### 接口按返回\n\n\n\n\n\n\n## 项目结构\n\n```\n.\n├─.babelrc // babel的配置\n├─.config.json // 如果使用了ip代理，那么配置文件在这里\n├─.eslintcache // eslint的缓存\n├─.eslintignore\t // eslint设置忽略的文件\n├─.eslintrc.json // eslint的配置文件\n├─.gitignore // git忽略上传的文件\n├─mockserver.js // node本地转发json的执行文件\n├─package.json // npm命令包\n├─proxy.js // 设置代理的js,现在基本不用\n├─readme.md // 项目介绍\n├─webpack-test.config.js // webpack测试的配置文件，目前还没做\n├─webpack.config.js // 目前项目webpack的配置文件\n├─_config.yml \n├─_gitattributes\n├─test\n| └setup-test-env.js\n├─screenshots // 项目截图\n| ├─list.png\n| ├─login.png\n| ├─receiveData.png\n| ├─requestData.png\n| └welcome.png\n├─mockapi // 前端静态json数据存放的文件夹\n| └data.json\n├─app // 页面主文件\n| ├─client.js\n| ├─history.js\n| ├─index.html // 入口html文件，配置静态菜单等全局常见变量\n| ├─routes.js // 路由配置\n| ├─utils // 公用的文件\n| | ├─ajax.js // 发送异步获取数据的配置\n| | ├─config.js // 常用的配置\n| | └index.js // 发送异步数据前的准备工作\n| ├─style // 样式库\n| | ├─base.less // 全局通用的样式\n| | └theme.less // 存放变量的less\n| ├─store // redux的store的配置\n| | └configureStore.js\n| ├─reducers // reduce的配置\n| | ├─common.js\n| | ├─house.js\n| | ├─index.js\n| | └tabList.js\n| ├─pages // 项目绝大部分业务文件\n| | ├─welcome.js\n| | ├─test\n| | | ├─index.js\n| | | ├─sub.js\n| | | └third.js\n| | ├─house\n| | | ├─houseManage.js\n| | | └index.js\n| ├─middleware \n| | ├─index.js\n| | ├─logger.js\n| | └router.js\n| ├─images // 图片文件夹\n| | ├─default.png\n| | ├─leftBg.jpg\n| | └navcontrol.png\n| ├─iconfont\n| | ├─iconfont.eot\n| | ├─iconfont.svg\n| | ├─iconfont.ttf\n| | └iconfont.woff\n| ├─containers // 全局的框架文件 \n| | ├─App\n| | | ├─extra.js\n| | | ├─footer.js\n| | | ├─header.js\n| | | ├─index.js\n| | | ├─login.js\n| | | ├─rightAside.js\n| | | ├─tabList.js\n| | | ├─leftNav\n| | | | └index.js\n| ├─constants\n| | ├─actionTypes.js\n| | └index.js\n| ├─components // 公用的组件库 \n| | ├─index.less\n| | ├─searchTable\n| | | └index.js\n| | ├─searchForm\n| | | └index.js\n| | ├─searchChosen\n| | | └index.js\n| | ├─multiSelect\n| | | └index.js\n| ├─api // 整个项目API的url配置\n| | ├─common.js\n| | ├─house.js\n| | └index.js\n| ├─actions // 整个项目的actions配置\n| | ├─common.js\n| | ├─house.js\n| | └tabList.js\n\n\n```\n\n\n## License\n\n[GPL](https://github.com/duxianwei520/react/blob/master/COPYING)\n" 11 | deployedAt: 2017-06-22T13:59:06.877Z 12 | -------------------------------------------------------------------------------- /scaffolds/vue-manage-system/index.yml: -------------------------------------------------------------------------------- 1 | name: vue-manage-system 2 | git_url: 'git://github.com/sunguide/vue-manage-system.git' 3 | author: sunguide 4 | description: The web management system solution based on Vue2 and Element UI. 5 | tags: [] 6 | coverPicture: null 7 | readme: "# manage-system #\r\n基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。[线上地址](http://work.omwteam.com/)\r\n\r\n[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)\r\n\r\n## 前言 ##\r\n之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。\r\n\r\n该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。\r\n\r\n## 功能 ##\r\n- [x] Element UI\r\n- [x] 登录/注销\r\n- [x] 表格\r\n- [x] 表单\r\n- [x] 图表 :bar_chart:\r\n- [x] 富文本编辑器\r\n- [x] markdown编辑器\r\n- [x] 图片拖拽/裁剪上传\r\n- [x] 支持切换主题色 :sparkles:\r\n- [x] 列表拖拽排序\r\n\r\n\r\n## 目录结构介绍 ##\r\n\r\n\t|-- build // webpack配置文件\r\n\t|-- config // 项目打包路径\r\n\t|-- src // 源码目录\r\n\t| |-- components // 组件\r\n\t| |-- common // 公共组件\r\n\t| |-- Header.vue // 公共头部\r\n\t| |-- Home.vue \t // 公共路由入口\r\n\t| |-- Sidebar.vue // 公共左边栏\r\n\t|\t\t|-- page \t // 主要路由页面\r\n\t| |-- BaseCharts.vue // 基础图表\r\n\t| |-- BaseForm.vue // 基础表单\r\n\t| |-- BaseTable.vue // 基础表格\r\n\t| |-- Login.vue \t // 登录\r\n\t| |-- Markdown.vue // markdown组件\r\n\t| |-- Readme.vue // 自述组件\r\n\t| |-- Upload.vue // 图片上传\r\n\t| |-- VueEditor.vue // 富文本编辑器\r\n\t| |-- VueTable.vue // vue表格组件\r\n\t| |-- App.vue // 页面入口文件\r\n\t| |-- main.js // 程序入口文件，加载各种公共组件\r\n\t|-- .babelrc // ES6语法编译配置\r\n\t|-- .editorconfig // 代码编写规格\r\n\t|-- .gitignore // 忽略的文件\r\n\t|-- index.html // 入口html文件\r\n\t|-- package.json // 项目及工具的依赖配置文件\r\n\t|-- README.md // 说明\r\n\r\n\r\n## 安装步骤 ##\r\n\r\n\tgit clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地\r\n\tcd manage-system // 进入模板目录\r\n\tnpm install // 安装项目依赖，等待安装完成之后\r\n\r\n## 本地开发 ##\r\n\r\n\t// 开启服务器，浏览器访问 http://localhost:8080\r\n\tnpm run dev\r\n\r\n## 构建生产 ##\r\n\r\n\t// 执行构建命令，生成的dist文件夹放在服务器下即可访问\r\n\tnpm run build\r\n\r\n## 组件使用说明与演示 ##\r\n\r\n### vue-schart ###\r\nvue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)\r\n

    \"Downloads\"

    \r\n\r\n```JavaScript\r\n\r\n\t\r\n\r\n```\r\n\r\n### element-ui ###\r\n一套基于vue.js2.0的桌面组件库。访问地址：[element](http://element.eleme.io/#/zh-CN/component/layout)\r\n\r\n### vue-datasource ###\r\n一个用于动态创建表格的vue.js服务端组件。访问地址：[vue-datasource](https://github.com/coderdiaz/vue-datasource)\r\n\r\n\r\n\r\n### Vue-Quill-Editor ###\r\n基于Quill、适用于Vue2的富文本编辑器。访问地址：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)\r\n\r\n### Vue-SimpleMDE ###\r\nVue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)\r\n\r\n\r\n\r\n### Vue-Core-Image-Upload ###\r\n一款轻量级的vue上传插件，支持裁剪。访问地址：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)\r\n\r\n\r\n\r\n\r\n## 其他注意事项 ##\r\n### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###\r\n\r\n举个栗子，我不想用 vue-datasource 这个组件，那我需要分四步走。\r\n\r\n第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。\r\n\r\n```JavaScript\r\n{\r\n path: '/vuetable',\r\n component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件\r\n},\r\n```\r\n\r\n第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueTable.vue 文件。\r\n\r\n第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。\r\n\t\r\n```HTML\r\nVue表格组件\r\n```\r\n\r\n第四步：卸载该组件。执行以下命令：\r\n\t\r\n\tnpm un vue-datasource -S\r\n\r\n完成。\r\n\r\n### 二、如何切换主题色呢？ ###\r\n\r\n第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。\r\n\r\n```javascript\r\nimport 'element-ui/lib/theme-default/index.css'; // 默认主题\r\n// import '../static/css/theme-green/index.css'; // 浅绿色主题\r\n```\r\n\r\n第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。\r\n\r\n```javascript\r\n@import \"../static/css/main.css\";\r\n@import \"../static/css/color-dark.css\"; /*深色主题*/\r\n/*@import \"../static/css/theme-green/color-green.css\"; !*浅绿色主题*!*/\r\n```\r\n\r\n第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 theme=\"dark\" 去掉即可。\r\n\r\n## 项目截图 ##\r\n### 默认皮肤 ###\r\n\r\n![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)\r\n\r\n### 浅绿色皮肤 ###\r\n\r\n![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)" 8 | deployedAt: 2017-06-25T13:49:12.542Z 9 | -------------------------------------------------------------------------------- /scaffolds/react-admin/index.yml: -------------------------------------------------------------------------------- 1 | name: react-admin 2 | git_url: 'git://github.com/yezihaohao/react-admin.git' 3 | author: yezihaohao 4 | description: react-admin system solution 5 | tags: 6 | - admin 7 | - react 8 | - antd 9 | coverPicture: 'https://ucarecdn.com/2d4171cf-5e20-43f3-8231-d6c7874d08b2/' 10 | readme: "# react-admin\nreact-admin system solution\n### 前言\n> 网上react后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到GitHub\n 启动和打包的时间都稍长，请耐心等待两分钟\n\n- [GitHub地址](https://github.com/yezihaohao/react-admin)\n- [预览地址](http://cheng_haohao.oschina.io/reactadmin/#/app/dashboard/index)(还没做响应式，不建议手机预览\uD83D\uDE15)\n\n### 依赖模块\n项目是用create-react-app创建的，主要还是列出新加的功能依赖包\n\n点击名称可跳转相关网站\uD83D\uDE04\uD83D\uDE04\n\n- [react@15.5.0](https://facebook.github.io/react/)\n- [react-router@3.0.2](https://react-guide.github.io/react-router-cn/)(react路由,4.x的差异还是比较大，暂时还是3.x的版本)\n- [antd@2.9.3](https://ant.design/index-cn)(蚂蚁金服开源的react ui组件框架)\n- [axios@0.16.1](https://github.com/mzabriskie/axios)(http请求模块，可用于前端任何场景，很强大\uD83D\uDC4D)\n- [echarts-for-react@1.2.0](https://github.com/hustcc/echarts-for-react)(可视化图表，别人基于react对echarts的封装，足够用了)\n- [recharts@0.22.3](http://recharts.org/#/zh-CN/)(另一个基于react封装的图表，个人觉得是没有echarts好用)\n- [nprogress@0.2.0](https://github.com/rstacruz/nprogress)(顶部加载条，蛮好用\uD83D\uDC4D)\n- [react-draft-wysiwyg@1.9.6](https://github.com/jpuri/react-draft-wysiwyg)(别人基于react的富文本封装，如果找到其他更好的可以替换)\n- [react-draggable@2.2.4](https://github.com/mzabriskie/react-draggable)(拖拽模块，找了个简单版的)\n- [screenfull@3.2.0](https://github.com/sindresorhus/screenfull.js/)(全屏插件)\n- [photoswipe@4.1.2](https://github.com/dimsemenov/photoswipe)(图片弹层查看插件，不依赖jQuery，还是蛮好用\uD83D\uDC4D)\n- [animate.css@3.5.1](http://daneden.me/animate)(css动画库)\n- 其他小细节省略\n\n### 功能模块\n备注：项目只引入了ant-design的部分组件，其他的组件antd官网有源码，可以直接复制到项目中使用，后续有时间补上全部组件。\n项目使用了antd的自定义主题功能-->黑色，若想替换其他颜色，具体操作请查看antd官网\n\n\n- 首页\n - 完整布局\n - 换肤(全局功能，暂时只实现了顶部导航的换肤，后续加上其他模块)\n- 导航菜单\n - 顶部导航(菜单伸缩，全屏功能)\n - 左边菜单(增加滚动条以及适配路由的active操作)\n- UI模块\n - 按钮(antd组件)\n - 图标(antd组件并增加彩色表情符)\n - 加载中(antd组件并增加顶部加载条)\n - 通知提醒框(antd组件)\n - 标签页(antd组件)\n - 轮播图(ant动效组件)\n - 富文本\n - 拖拽\n - 画廊\n- 动画\n - 基础动画(animate.css所有动画)\n - 动画案例\n- 表格\n - 基础表格(antd组件)\n - 高级表格(antd组件)\n - 异步表格(数据来自掘金酱的接口)\n- 表单\n - 基础表单(antd组件)\n- 图表\n - echarts图表\n - recharts图表\n- 页面\n - 登录页面(包括GitHub第三方登录)\n - 404页面\n\n### 功能截图\n#### 首页\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd1.gif)\n#### 按钮图标等\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd2.gif)\n#### 轮播图\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd3.gif)\n#### 富文本\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd4.gif)\n#### 拖拽\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd5.gif)\n#### 画廊\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd6.gif)\n#### 动画\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd7.gif)\n#### 表格\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd8.gif)\n#### 表单\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd9.gif)\n#### 图表\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd10.gif)\n#### 页面\n![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd11.gif)\n\n### 代码目录\n```js\n+-- build/ ---打包的文件目录\n+-- config/ ---npm run eject 后的配置文件目录\n+-- node_modules/ ---npm下载文件目录\n+-- public/ \n| --- index.html\t\t\t\t\t\t\t---首页入口html文件\n| --- npm.json\t\t\t\t\t\t\t---echarts测试数据\n| --- weibo.json\t\t\t\t\t\t\t---echarts测试数据\n+-- src/ ---核心代码目录\n| +-- axios ---http请求存放目录\n| | --- index.js\n| +-- components ---各式各样的组件存放目录\n| | +-- animation ---动画组件\n| | | --- ... \n| | +-- charts ---图表组件\n| | | --- ... \n| | +-- dashboard ---首页组件\n| | | --- ... \n| | +-- forms ---表单组件\n| | | --- ... \n| | +-- pages ---页面组件\n| | | --- ... \n| | +-- tables ---表格组件\n| | | --- ... \n| | +-- ui ---ui组件\n| | | --- ... \n| | --- BreadcrumbCustom.jsx ---面包屑组件\n| | --- HeaderCustom.jsx ---顶部导航组件\n| | --- Page.jsx ---页面容器\n| | --- SiderCustom.jsx ---左边菜单组件\n| +-- style ---项目的样式存放目录，主要采用less编写\n| +-- utils ---工具文件存放目录\n| --- App.js ---组件入口文件\n| --- index.js ---项目的整体js入口文件，包括路由配置等\n--- .env ---启动项目自定义端口配置文件\n--- .eslintrc ---自定义eslint配置文件，包括增加的react jsx语法限制\n--- package.json \n```\n### 安装运行\n##### 1.下载或克隆项目源码\n##### 2.npm安装相关包文件(国内建议增加淘宝镜像源，不然很慢，你懂的\uD83D\uDE01)\n```js\nnpm i\n```\n##### 3.启动项目\n```js\nnpm start\n```\n##### 4.打包项目\n```js\nnpm run build\n```\n\n### 结尾\n该项目会不定时更新，后续时间会添加更多的模块\n\n若有问题，可加QQ群264591039与我交流\n\n如果对你有帮助，给个star哟~~❤️❤️❤️❤️\n\n" 11 | deployedAt: 2017-07-23T11:35:39.599Z -------------------------------------------------------------------------------- /src/models/contribute.js: -------------------------------------------------------------------------------- 1 | import Github from 'github-api'; 2 | import { routerRedux } from 'dva/router'; 3 | import yaml from 'js-yaml'; 4 | import { message } from 'antd'; 5 | import { fetch } from '../services/list'; 6 | import { parseGithubUrl } from '../utils/github'; 7 | 8 | export default { 9 | namespace: 'contribute', 10 | 11 | state: { 12 | visible: false, 13 | repo: null, 14 | }, 15 | 16 | effects: { 17 | *validateRepo({ payload, intl }, { put, select, call }) { 18 | const scaffoldsData = yield call(fetch); 19 | const { user, repo } = parseGithubUrl(payload); 20 | if (scaffoldsData.data && scaffoldsData.data.list) { 21 | const existed = scaffoldsData.data.list.some((item) => { 22 | const result = parseGithubUrl(item.git_url); 23 | return user === result.user && repo === result.repo; 24 | }); 25 | if (existed) { 26 | message.error(intl.formatMessage({ id: 'existed' })); 27 | return; 28 | } 29 | } 30 | 31 | if (user && repo) { 32 | const { auth } = yield select(); 33 | const { accessToken } = auth; 34 | const github = new Github({ token: accessToken }); 35 | 36 | // read basic information of repo 37 | const repos = yield github.getRepo(user, repo); 38 | const { data } = yield repos.getDetails(); 39 | 40 | // parse package.json of repo 41 | const packageJson = yield repos.getContents('master', 'package.json', true); 42 | // eslint-disable-next-line 43 | console.log('>> packageJson', packageJson); 44 | 45 | let readme; 46 | try { 47 | readme = yield repos.getContents('master', 'README.md', true); 48 | } catch (e) { 49 | readme = { data: 'No README' }; 50 | } 51 | if (readme.data === 'No README') { 52 | try { 53 | readme = yield repos.getContents('master', 'readme.md', true); 54 | } catch (e) { 55 | // do nothing 56 | } 57 | } 58 | // eslint-disable-next-line 59 | console.log('>> readme', readme); 60 | 61 | yield put({ 62 | type: 'saveRepo', 63 | payload: { 64 | ...data, 65 | readme: readme.data, 66 | isValidScaffold: 'start' in packageJson.data.scripts, 67 | isReact: 'react' in packageJson.data.dependencies, 68 | isAngular: 'angular' in packageJson.data.dependencies, 69 | }, 70 | }); 71 | } 72 | }, 73 | *submit({ payload }, { select, put }) { 74 | const { auth, contribute } = yield select(); 75 | const { accessToken } = auth; 76 | const github = new Github({ token: accessToken }); 77 | // fork scaffold-market repo 78 | const scaffoldRepo = yield github.getRepo('ant-design', 'scaffold-market'); 79 | const fork = yield scaffoldRepo.fork(); 80 | const user = fork.data.owner.login; 81 | const repo = fork.data.name; 82 | 83 | const forkedRepo = yield github.getRepo(user, repo); 84 | 85 | const branchName = `scaffold-${payload.name}-${Date.now()}`; 86 | 87 | // create branch 88 | yield forkedRepo.createBranch('master', branchName); 89 | 90 | // update list 91 | yield forkedRepo.writeFile( 92 | branchName, 93 | `scaffolds/${payload.name}/index.yml`, 94 | yaml.safeDump({ 95 | ...payload, 96 | readme: contribute.repo.readme, 97 | deployedAt: new Date(), 98 | }), 99 | `submit new scaffold: ${payload.name}`, 100 | { 101 | encode: 'utf-8', 102 | }, 103 | ); 104 | 105 | // pr 106 | const pullRequestResult = yield scaffoldRepo.createPullRequest({ 107 | title: `Add ${payload.name} to the market`, 108 | head: `${user}:${branchName}`, 109 | base: 'master', 110 | body: ` 111 | - Name: \`${payload.name}\` 112 | - Url: \`${payload.git_url}\` 113 | ${payload.coverPicture ? `- Cover Picture:\n![](${payload.coverPicture})` : ''} 114 | `, 115 | }); 116 | 117 | // eslint-disable-next-line 118 | console.log('>> pullRequestResult', pullRequestResult); 119 | 120 | // const master = yield forkedRepo.getBranch('master'); 121 | // const masterSHA = master.data.commit.sha; 122 | // createTree 123 | 124 | // clear saved repo 125 | yield put({ 126 | type: 'saveRepo', 127 | payload: null, 128 | }); 129 | 130 | // redirect to finish page 131 | yield put(routerRedux.push(`/contribute/finish?pull=${pullRequestResult.data.html_url}`)); 132 | }, 133 | *deploy({ payload, intl }, { select }) { 134 | const { auth } = yield select(); 135 | const { accessToken } = auth; 136 | const github = new Github({ token: accessToken }); 137 | // fork scaffold-market repo 138 | const scaffoldRepo = yield github.getRepo('ant-design', 'scaffold-market'); 139 | const fork = yield scaffoldRepo.fork(); 140 | const user = fork.data.owner.login; 141 | const repo = fork.data.name; 142 | 143 | const forkedRepo = yield github.getRepo(user, repo); 144 | 145 | const branchName = `scaffold-${payload.name}-${Date.now()}`; 146 | 147 | // create branch 148 | yield forkedRepo.createBranch('master', branchName); 149 | 150 | const indexYml = yield scaffoldRepo.getContents('master', `scaffolds/${payload.name}/index.yml`, true); 151 | const deployedAt = new Date().toISOString(); 152 | 153 | // update list 154 | yield forkedRepo.writeFile( 155 | branchName, 156 | `scaffolds/${payload.name}/index.yml`, 157 | indexYml.data.replace(/deployedAt:.*$/gm, `deployedAt: ${deployedAt}`), 158 | `Update scaffold ${payload.name} deployedAt`, 159 | { 160 | encode: 'utf-8', 161 | }, 162 | ); 163 | 164 | // pr 165 | yield scaffoldRepo.createPullRequest({ 166 | title: `Re-deploy ${payload.name}`, 167 | head: `${user}:${branchName}`, 168 | base: 'master', 169 | body: deployedAt, 170 | }); 171 | 172 | message.success(intl.formatMessage({ id: 'successed' })); 173 | }, 174 | }, 175 | 176 | reducers: { 177 | saveRepo(state, { payload }) { 178 | return { ...state, repo: payload }; 179 | }, 180 | }, 181 | }; 182 | -------------------------------------------------------------------------------- /src/routes/IndexPage.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'dva'; 4 | import { Link } from 'dva/router'; 5 | import { Spin, Layout, Row, Col, Tag, Affix, Icon } from 'antd'; 6 | import groupBy from 'lodash.groupby'; 7 | import { FormattedMessage, injectIntl } from 'react-intl'; 8 | import { Helmet } from 'react-helmet'; 9 | import classNames from 'classnames'; 10 | import ScaffoldItem from '../components/ScaffoldItem'; 11 | import styles from './IndexPage.less'; 12 | 13 | const { Sider, Content } = Layout; 14 | 15 | const filterTag = (list, tags, search) => list.filter((item) => { 16 | if (!tags && !search) { 17 | return true; 18 | } 19 | if (search && 20 | (item.name || '').indexOf(search) < 0 && 21 | (item.description || '') && item.description.indexOf(search) < 0) { 22 | return false; 23 | } 24 | const queryTags = typeof tags === 'string' ? [tags] : [...(tags || [])]; 25 | return queryTags.every(tag => (item.tags || []).indexOf(tag) >= 0); 26 | }); 27 | 28 | class IndexPage extends PureComponent { 29 | static propTypes = { 30 | list: PropTypes.array, 31 | }; 32 | static defaultProps = { 33 | list: [], 34 | }; 35 | componentDidMount() { 36 | const { list, dispatch } = this.props; 37 | if (list.length === 0) { 38 | dispatch({ 39 | type: 'scaffold/fetch', 40 | }); 41 | } 42 | } 43 | handleClickSort(way) { 44 | const { dispatch } = this.props; 45 | dispatch({ 46 | type: 'scaffold/changeSortWay', 47 | payload: way, 48 | }); 49 | } 50 | render() { 51 | const { list, groupedTags, location: { query }, intl, sortWay } = this.props; 52 | const tags = Object.keys(groupedTags).sort((a, b) => { 53 | const value = groupedTags[b].length - groupedTags[a].length; 54 | if (value !== 0) { 55 | return value; 56 | } 57 | if (a < b) return -1; 58 | if (a > b) return 1; 59 | return 0; 60 | }); 61 | const filteredItem = filterTag(list, query.tags, query.search); 62 | const scaffoldItems = (list && list.length > 0) ? ( 63 | 64 | 65 | 66 |
    67 |

    68 | 69 | {query.tags ? : null} 70 |

    71 |
    72 | { 73 | (tags && tags.length > 0) 74 | ? tags.map((tag) => { 75 | const queryTags = typeof query.tags === 'string' 76 | ? [query.tags] 77 | : [...(query.tags || [])]; 78 | const newTags = [...queryTags]; 79 | if (newTags.indexOf(tag) >= 0) { 80 | newTags.splice(newTags.indexOf(tag), 1); 81 | } else { 82 | newTags.push(tag); 83 | } 84 | return ( 85 | 92 | = 0 ? `${styles.tag} selected` : styles.tag} 94 | > 95 | {tag} 96 | 97 | | {groupedTags[tag].length} 98 | 99 | 100 | 101 | ); 102 | }) :
    103 | } 104 |
    105 |
    106 |     107 |     108 | 109 |
    110 |
    111 | 112 |
    113 |
    114 | 115 | this.handleClickSort('starCount')} 118 | > 119 | 120 | 121 | this.handleClickSort('updatedAt')} 124 | > 125 | 126 | 127 |
    128 |
    129 | 130 | { 131 | filteredItem.length > 0 ? 132 | filteredItem.map(item => ( 133 | 134 | 135 | 136 | )) :
    137 | } 138 |     139 |     140 |     141 | ) : ( 142 |
    143 | 144 |
    145 | 146 |
    147 |
    148 | ); 149 | return ( 150 |
    151 | 152 | 153 | {intl.formatMessage({ id: 'title.home' })} 154 | 155 | 156 | {scaffoldItems} 157 |
    158 | ); 159 | } 160 | } 161 | 162 | export default injectIntl(connect(({ scaffold: { list = [], sortWay } }) => { 163 | let tags = []; 164 | list.forEach((item) => { 165 | if (item && item.tags) { 166 | tags = tags.concat(item.tags); 167 | } 168 | }); 169 | return { 170 | list: list.sort((a, b) => { 171 | if (sortWay === 'updatedAt') { 172 | return new Date(b.pushed_at) - new Date(a.pushed_at); 173 | } 174 | return b.stargazers_count - a.stargazers_count; 175 | }), 176 | groupedTags: groupBy(tags), 177 | sortWay, 178 | }; 179 | })(IndexPage)); 180 | -------------------------------------------------------------------------------- /scaffolds/react-antd-redux-webpack-es6-spa-boilerplate/index.yml: -------------------------------------------------------------------------------- 1 | name: react-antd-redux-webpack-es6-spa-boilerplate 2 | git_url: 'git://github.com/zkboys/react-antd-redux-webpack-es6-spa-boilerplate.git' 3 | author: zkboys 4 | description: 管理系统架构，基于 antd + react + redux + webpack + ES6 的单页面应用 5 | tags: [] 6 | coverPicture: 'https://ucarecdn.com/94ac0966-5acc-4f4a-a4de-eba4a174d0d6/' 7 | readme: "# react-antd-redux-webpack-es6-spa-boilerplate\n> 管理系统架构，基于 antd + react + redux + webpack + ES6 的单页面应用\n\n管理系统往往是大量的表单表格等页面，存在大量的体力劳动，基于长期的管理系统开发，整理出一套管理系统架构、组件、通用方法来提高开发效率。\n可以以此为基础，快速创建管理系统项目。simple is all，make coding easy!\n\n## 架构功能一览：\n\n1. UI基于antd，完整的登录、退出登录、菜单等结构。\n1. 前后端分离，前后端可以并行开发，前端单独部署。\n1. 基于webpack2.0进行构建，对构建进行了优化，提高rebuild速度，提高开发效率。\n1. 菜单、页面标题、面包屑导航自动获取+可配置。\n1. redux写法封装、简化的redux写法、与存储自动同步、异步redux写法、异常处理，相关文档在: src/redux/README.md。\n1. ajax自动提示封装、全局+局部配置、ajax高阶组件自动释放资源、前后端约定统一错误处理。\n1. 路由简化配置，页面直接声明一个PAGE_ROUTE变量，自动生成路由配置文件。相关文档在: src/route/README.md。\n1. 后端交互统一封装成service、提供基于restFull，提供BaseService基础方法、service高阶组件自动释放资源。\n1. mock规则可配置，快速切换mock数据与真实数据\n1. 基础CRUD代码生成，减少不必要的体力劳动。脚本在bin目录下。\n1. css 模块化，有效避免css命名冲突，提高css命令灵活性。\n1. 使用eslint 结合 webpack 统一代码规范，降低各个开发人员直接的沟通成本，提高代码质量。\n\n## 开发环境\n1. node v7.2.1\n2. yarn v0.27.5\n3. 兼容windows/mac 还没在ubuntu上开发，未知。\n\n## 安装、开发/生产构建\n> 推荐使用[yarn](https://yarnpkg.com/zh-Hans/)进行构建，yarn可以更好的组织依赖，下载依赖速度更快，也许还需要翻墙。\n您也可以使用[npm](https://www.npmjs.com/)；\n下载速度慢，可以考虑使用[淘宝的cnpm](http://npm.taobao.org/)\n\nyarn:\n``` bash\n# 安装所有依赖\n$ yarn\n\n# 启动开发\n$ yarn dev\n\n# 生产环境构建\n$ yarn build\n\n# 清除缓存（如果发现源码与webpack编译文件明显不一致，有可能是缓存脏数据）\n$ yarn clear-cache\n```\nnpm:\n``` bash\n# 安装所有依赖\n$ npm install\n\n# 启动开发\n$ npm run dev\n\n# 生产环境构建\n$ npm run build\n\n# 清除缓存（如果发现源码与webpack编译文件明显不一致，有可能是缓存脏数据）\n$ npm run clear-cache\n```\ncnpm:\n``` bash\n\n# 安装所有依赖\n$ cnpm install\n\n# 启动开发\n$ cnpm run dev\n\n# 生产环境构建\n$ cnpm run build\n\n# 清除缓存（如果发现源码与webpack编译文件明显不一致，有可能是缓存脏数据）\n$ cnpm run clear-cache\n\n```\n\n## 项目结构\n```\n.\n├── .happypack // happypack缓存文件\n├── bin // 代码生成脚本\n├── builder // 构建工具\n├── dist // 开发构建时，生成的临时文件，生产环境不用\n├── local-default // 个性化配置，用户分模块打包、个人配置等，只开发模式有效，目前没启用，预留功能\n├── public // 构建之后的代码，用户生产环境部署\n├── src // 开发主要目录\n│ ├── commons // 系统公共方法，组件\n│ ├── frame // 页面框架，头部+左侧等\n│ ├── mock // mock数据，截获ajax请求，便于前端单独调试\n│ │\_\_ └── mockdata // 模拟数据 mockjs\n│ ├── pages // 业务页面，业务开发主要关系目录\n│ │\_\_ ├── error // 一些error页面，404 403 401 等等\n│ │\_\_ ├── examples // 一些例子\n│ │\_\_ └── home // 首页\n│ ├── redux // redux 相关\n│ │ ├── actions // redux action定义\n│ │ ├── reducers // redux reducers定义目录\n│ │ ├── store // redux store\n│ │ └── actionTypes.js // actions 和 reducers使用的types常量\n│ ├── route // 路由 相关\n│ ├── services // 前端服务，一般是ajax请求等一些封装，提供基础数据\n│ ├── all-routes.js // 脚本生成的路由配置文件\n│ ├── App.jsx // 项目入口文件\n│ ├── global.less // 全局样式定义\n│ ├── page-init-state.js // 全局样式定义\n│ ├── page-init-state.js // 脚本生成的简化redux写法的初始化state\n│ ├── page-routes.js // 脚本生成的路由配置文件\n│ └── variables.less // 主题变量\n├── static // 非构建依赖的静态文件\n├── .babelrc\n├── .eslintignore\n├── .eslintrc.js\n├── .gitignore\n├── favicon.png\n├── index.html\n├── package.json\n├── postcss.config.js\n├── README.md\n└── yarn.lock\n```\n\n## 文件命名约定\n\n1. 文件夹小写英文加连字符\"-\"，比如：`src/pages/user-center`\n1. less文件、js文件 小写英文加连字符\"-\"，比如：`user-center.less`、`user-center.js`\n1. jsx文件（组件），首字母大写，驼峰命名，比如：`UserCenter.jsx`\n\n## 系统菜单激活状态\n> 系统菜单的激活状态根据url地址，自动判定\n\n如果是二级页面，比如添加页面，需要保持其父级页面菜单状态，菜单path需要写成`parentPath/+childPath`，使用`/+`作为分界，比如：\n```\nlist页面：\nexport const PAGE_ROUTE = '/example/users'\n\nlist页面的添加按钮，跳转到添加页面，但是页面菜单选中状态要保持list页面状态\n\nexport const PAGE_ROUTE = '/example/users/+add'\n```\n\n## 页面头部\n> 页面头部标题、面包屑导航系统会根据页面状态自动获取，但也可以控制显示隐藏、修改标题、修改面包屑。\n\n### 显示隐藏\n```\ncomponentWillMount() {\n this.props.$actions.hidePageHeader();\n}\n\n```\n\n### 修改标题\n```\ncomponentWillMount() {\n this.props.$actions.setPageTitle('自定义页面标题');\n}\n```\n\n### 自定义面包屑导航\n```\ncomponentWillMount() {\n this.props.$actions.setPageBreadcrumbs([\n {\n key: 'zidingyi',\n path: '',\n text: '自定义',\n icon: 'fa-user',\n },\n {\n key: 'mianbaoxie',\n path: '',\n text: '面包屑',\n icon: 'fa-user',\n },\n {\n key: 'daohang',\n path: '',\n text: '导航',\n icon: 'fa-user',\n },\n ]);\n}\n```\n\n## 前后端分离 ngnix配置 参考\n```\n# 服务地址\nupstream api_service {\n server localhost:8080;\n keepalive 2000;\n}\n#\nserver {\n listen 80;\n server_name localhost;\n location / {\n root /home/app/nginx/html; // 前端打包之后的文件存放路径\n index index.html;\n try_files $uri $uri/ /index.html; #react-router 防止页面刷新出现404\n }\n location ^~/api { // 代理ajax请求，前端的ajax请求配置了统一的baseUrl = ‘/api’\n proxy_pass http://api_service/;\n proxy_set_header Host $http_host;\n proxy_set_header Connection close;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-Server $host;\n }\n}\n```\n\n## 构建拆分 TODO\n> 基于配置，进行不同项目的打包构建，解决不同项目，但是类似，有很多通用组件，但是要单独发布的情景\n\n构建可以传入config文件，基于config文件可以构建出不同的项目\n```\n\"dev\": \"yarn run clear-cache && yarn run dll && cross-env NODE_ENV=development node ./builder/dev-server.js --cfg ./xxx.config.js\",\n```\n\nxxx.config.js如下\n```js\nmodule.exports = {\n // 业务页面所在目录，用来构建路由以及init state，字符串或者数组\n pagePath: './src/pages/**/*.jsx',\n // pagePath: [\n // './src/pages/reserve/**/*.jsx',\n // './src/pages/sale/**/*.jsx',\n // ],\n\n // 忽略文件，不进行构建，提供部分模块打包功能，一般是配合补充 pagePath 进行使用，字符串或者数组\n pageIgnore: [\n // '**/ActionsExample.jsx',\n ],\n\n // webpack配置，区分不同环境\n webpack: {\n base: {\n entry: {\n app: './src/App.jsx',\n login: './src/pages/login/Login.jsx',\n },\n },\n dev: {},\n prod: {},\n dll: {},\n },\n};\n```\n\n## TODO\n- [x] 登录之后，获取菜单数据，并存入session中，由于页面头部是由菜单生成的，如果菜单是异步获取的，将会存在各种问题，所以进入系统时候保证菜单可用\n- [x] 构建优化：css postcss的使用，自动添加前缀等功能\n- [x] 是否使用 css module功能，好像加不上，antd不是module方式，如果使用module，antd less 构建会失败。 通过配置可以区分出那些模块使用css module，那些不使用。\n- [x] 添加事件，移除事件的高阶组件\n- [x] redux 中数据，实现部分数据同步到localStorage中，目前是可以选择性恢复，可以满足需求\n- [x] source-map改如何使用\n- [x] 左侧菜单可拖动缩放宽度\n- [x] zk-react 开发模式构建慢问题，升级到webpack2.0，添加了一些优化\n- [x] antd 通用校验规则整理到zk-react中\n- [x] antd edit-cell其他表单元素完善、 可配置form组件（可用于查询条件、简单的form）\n- [x] antd 自定义异步校验，多个异步校验互相干扰问题 可以使用Promise.all包装各个请求\n- [x] 系统注入到props中的变量统一使用'$'开头，比如$ajax $event $domEvent $service $actions\n- [ ] 字体图标，团队有条件还是定制的好，全部引入会多出300~400KB。\n- [ ] 修改less时可以hot reload ，修改jsx为什么直接reload？\n- [ ] antd 图标本地部署问题：缓存问题，antd.less需要全部引入，会多550KB的css代码\n- [ ] docker 前端生产环境部署\n- [ ] 菜单匹配时，如果path携带参数，怎么能匹配成功？\n- [ ] css module class name 长短问题\n- [ ] css module=true background: url(); 问题 Module not found: Error: Can't resolve 'login-bg.jpg'\n- [ ] 测试：单元测试，端对端测试\n- [ ] 使用ts重构？\n" 8 | deployedAt: 2017-08-25T01:42:29.694Z 9 | -------------------------------------------------------------------------------- /src/routes/ScaffoldPage.js: -------------------------------------------------------------------------------- 1 | /* eslint react/no-danger: 0 */ 2 | import React, { PureComponent } from 'react'; 3 | import { connect } from 'dva'; 4 | import { Link } from 'dva/router'; 5 | import moment from 'moment'; 6 | import Overdrive from 'react-overdrive'; 7 | import { Card, Layout, Spin, Icon, Button, Tag, Popover } from 'antd'; 8 | import { FormattedMessage, injectIntl } from 'react-intl'; 9 | import { Helmet } from 'react-helmet'; 10 | import ReactDisqusComments from 'react-disqus-comments'; 11 | import styles from './ScaffoldPage.less'; 12 | 13 | const { Sider, Content } = Layout; 14 | 15 | class ScaffoldPage extends PureComponent { 16 | state = { 17 | popupVisible: false, 18 | }; 19 | componentDidMount() { 20 | const { list, params } = this.props; 21 | const scaffold = list.filter(item => item.name === params.templateId)[0]; 22 | if (!scaffold || !('stargazers_count' in scaffold) || !scaffold.readme) { 23 | this.props.dispatch({ 24 | type: 'scaffold/fetch', 25 | payload: params.templateId, 26 | }); 27 | } 28 | window.scrollTo(0, 0); 29 | } 30 | onVisibleChange = (popupVisible) => { 31 | this.setState({ popupVisible }); 32 | } 33 | triggerDeploy = (e, name) => { 34 | e.preventDefault(); 35 | this.setState({ popupVisible: false }); 36 | this.props.dispatch({ 37 | type: 'contribute/deploy', 38 | payload: { name }, 39 | intl: this.props.intl, 40 | }); 41 | } 42 | render() { 43 | const { list, params, intl } = this.props; 44 | const scaffold = list.filter(item => item.name === params.templateId)[0]; 45 | let content; 46 | if (!scaffold) { 47 | content = ( 48 |
    49 | 50 |
    51 | ); 52 | } else { 53 | const scaffoldPreviewUrl = scaffold.homepage || `/${scaffold.name}`; 54 | content = ( 55 | 56 | 57 |
    58 |

    {scaffold.name}

    59 |
    60 | {scaffold.stargazers_count} 61 |
    62 |
    63 |

    {scaffold.description}

    64 |
    65 | 66 | 69 | 70 | {scaffold.html_url && ( 71 | 72 | 75 | 76 | )} 77 | {scaffold.html_url && ( 78 | 79 | 82 | 83 | )} 84 |
    85 |
    86 |
    87 |

    88 | 89 |

    90 | 94 | : {moment(scaffold.created_at).fromNow()} 95 | 96 | 100 | : {moment(scaffold.updated_at).fromNow()} 101 | 102 | 106 | :  107 | this.triggerDeploy(e, scaffold.name)} 114 | className={styles.redeploy} 115 | > 116 | 117 | 118 | 119 | } 120 | > 121 | {moment(scaffold.deployedAt).fromNow()} 122 | 123 | 124 | 125 | :  126 | 127 | {scaffold.author} 128 | 129 | 130 | 131 | : {scaffold.language} 132 | 133 |
    134 |
    135 |
    136 |

    137 | 138 |

    139 |
    140 | { 141 | (scaffold.tags && scaffold.tags.length > 0) 142 | ? scaffold.tags.map(tag => ( 143 | 144 | {tag} 145 | 146 | )) 147 | :
    148 | } 149 |
    150 |
    151 |     152 | 153 | { 154 | scaffold.coverPicture ? ( 155 | }> 156 | 157 | 158 | 159 | 160 | ) : null 161 | } 162 | 163 | {scaffold.readme 164 | ? ( 165 |
    169 | ) : 170 | } 171 | 172 | 177 | 178 | 179 | ); 180 | } 181 | return ( 182 |
    183 | 184 | 185 | {scaffold ? `${scaffold.name} - ${intl.formatMessage({ id: 'title.home' })}` : 'loading...'} 186 | 187 | 188 | {content} 189 |
    190 | ); 191 | } 192 | } 193 | 194 | export default injectIntl(connect(props => ({ 195 | list: props.scaffold.list, 196 | }))(ScaffoldPage)); 197 | --------------------------------------------------------------------------------