12 | {emptyImage ? (
13 | 
14 | ) : null}
15 |
17 | );
18 | }
19 | return (
20 | {emptyText || locale.emptyText}
16 |
21 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/components/NoticeIcon/NoticeList.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .list {
4 | max-height: 400px;
5 | overflow: auto;
6 | .item {
7 | transition: all .3s;
8 | overflow: hidden;
9 | cursor: pointer;
10 | padding-left: 24px;
11 | padding-right: 24px;
12 |
13 | .meta {
14 | width: 100%;
15 | }
16 |
17 | .avatar {
18 | background: #fff;
19 | margin-top: 4px;
20 | }
21 |
22 | &.read {
23 | opacity: .4;
24 | }
25 | &:last-child {
26 | border-bottom: 0;
27 | }
28 | &:hover {
29 | background: @primary-1;
30 | }
31 | .title {
32 | font-weight: normal;
33 | margin-bottom: 8px;
34 | }
35 | .description {
36 | font-size: 12px;
37 | line-height: @line-height-base;
38 | }
39 | .datetime {
40 | font-size: 12px;
41 | margin-top: 4px;
42 | line-height: @line-height-base;
43 | }
44 | .extra {
45 | float: right;
46 | color: @text-color-secondary;
47 | font-weight: normal;
48 | margin-right: 0;
49 | margin-top: -1.5px;
50 | }
51 | }
52 | }
53 |
54 | .notFound {
55 | text-align: center;
56 | padding: 73px 0 88px 0;
57 | color: @text-color-secondary;
58 | img {
59 | display: inline-block;
60 | margin-bottom: 16px;
61 | height: 76px;
62 | }
63 | }
64 |
65 | .clear {
66 | height: 46px;
67 | line-height: 46px;
68 | text-align: center;
69 | color: @text-color;
70 | border-radius: 0 0 @border-radius-base @border-radius-base;
71 | border-top: 1px solid @border-color-split;
72 | transition: all .3s;
73 | cursor: pointer;
74 |
75 | &:hover {
76 | color: @heading-color;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/components/NoticeIcon/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .popover {
4 | width: 336px;
5 | :global(.ant-popover-inner-content) {
6 | padding: 0;
7 | }
8 | }
9 |
10 | .noticeButton {
11 | cursor: pointer;
12 | display: inline-block;
13 | transition: all .3s;
14 | }
15 |
16 | .icon {
17 | font-size: 16px;
18 | padding: 4px;
19 | }
20 |
21 | .tabs {
22 | :global {
23 | .ant-tabs-nav-scroll {
24 | text-align: center;
25 | }
26 | .ant-tabs-bar {
27 | margin-bottom: 4px;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/components/Result/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Icon } from 'antd';
4 | import styles from './index.less';
5 |
6 | export default function Result({
7 | className, type, title, description, extra, actions, ...restProps
8 | }) {
9 | const iconMap = {
10 | error: -
22 | {data.map((item, i) => {
23 | const itemCls = classNames(styles.item, {
24 | [styles.read]: item.read,
25 | });
26 | return (
27 |
33 | {item.title}
34 |
36 | }
37 | description={
38 | {item.extra}
35 |
39 |
44 | }
45 | />
46 |
40 | {item.description}
41 |
42 | {item.datetime}
43 |
51 | {locale.clear}{title}
52 |
53 |
16 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/components/Result/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .result {
4 | text-align: center;
5 | width: 72%;
6 | margin: 0 auto;
7 |
8 | .icon {
9 | font-size: 72px;
10 | line-height: 72px;
11 | margin-bottom: 24px;
12 |
13 | & > .success {
14 | color: @success-color;
15 | }
16 |
17 | & > .error {
18 | color: @error-color;
19 | }
20 | }
21 |
22 | .title {
23 | font-size: 24px;
24 | color: @heading-color;
25 | font-weight: 500;
26 | line-height: 32px;
27 | margin-bottom: 16px;
28 | }
29 |
30 | .description {
31 | font-size: 14px;
32 | line-height: 22px;
33 | color: @text-color-secondary;
34 | margin-bottom: 24px;
35 | }
36 |
37 | .extra {
38 | background: #fafafa;
39 | padding: 24px 40px;
40 | border-radius: @border-radius-sm;
41 | text-align: left;
42 | }
43 |
44 | .actions {
45 | margin-top: 32px;
46 |
47 | button:not(:last-child) {
48 | margin-right: 8px;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/components/SiderMenu/index.js:
--------------------------------------------------------------------------------
1 | import 'rc-drawer-menu/assets/index.css';
2 | import React from 'react';
3 | import DrawerMenu from 'rc-drawer-menu';
4 | import SiderMenu from './SiderMenu';
5 |
6 | export default props => (
7 | props.isMobile ? (
8 | {iconMap[type]}
17 | {title}
18 | {description && {description}
}
19 | {extra && {extra}
}
20 | {actions && {actions}
}
21 | Ant Design Pro
'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /cli/base-antd-pro/src/e2e/login.e2e.js: -------------------------------------------------------------------------------- 1 | import Nightmare from 'nightmare'; 2 | 3 | describe('Login', () => { 4 | let page; 5 | beforeEach(() => { 6 | page = Nightmare(); 7 | page 8 | .goto('http://localhost:8000/') 9 | .evaluate(() => { 10 | window.localStorage.setItem('antd-pro-authority', 'guest'); 11 | }) 12 | .goto('http://localhost:8000/#/user/login'); 13 | }); 14 | 15 | it('should login with failure', async () => { 16 | await page.type('#userName', 'mockuser') 17 | .type('#password', 'wrong_password') 18 | .click('button[type="submit"]') 19 | .wait('.ant-alert-error') // should display error 20 | .end(); 21 | }); 22 | 23 | it('should login successfully', async () => { 24 | const text = await page.type('#userName', 'admin') 25 | .type('#password', '888888') 26 | .click('button[type="submit"]') 27 | .wait('.ant-layout-sider h1') // should display error 28 | .evaluate(() => document.body.innerHTML) 29 | .end(); 30 | expect(text).toContain('Ant Design Pro
'); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /cli/base-antd-pro/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
8 | {top}
9 |
12 | );
13 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/layouts/PageHeaderLayout.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .content {
4 | margin: 24px 24px 0;
5 | }
6 |
7 | @media screen and (max-width: @screen-sm) {
8 | .content {
9 | margin: 24px 0 0;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/layouts/UserLayout.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .container {
4 | display: flex;
5 | flex-direction: column;
6 | min-height: 100%;
7 | background: #f0f2f5;
8 | }
9 |
10 | .content {
11 | padding: 32px 0;
12 | flex: 1;
13 | }
14 |
15 | @media (min-width: @screen-md-min) {
16 | .container {
17 | background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
18 | background-repeat: no-repeat;
19 | background-position: center 110px;
20 | background-size: 100%;
21 | }
22 |
23 | .content {
24 | padding: 112px 0 24px 0;
25 | }
26 | }
27 |
28 | .top {
29 | text-align: center;
30 | }
31 |
32 | .header {
33 | height: 44px;
34 | line-height: 44px;
35 | a {
36 | text-decoration: none;
37 | }
38 | }
39 |
40 | .logo {
41 | height: 44px;
42 | vertical-align: top;
43 | margin-right: 16px;
44 | }
45 |
46 | .title {
47 | font-size: 33px;
48 | color: @heading-color;
49 | font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
50 | font-weight: 600;
51 | position: relative;
52 | top: 2px;
53 | }
54 |
55 | .desc {
56 | font-size: @font-size-base;
57 | color: @text-color-secondary;
58 | margin-top: 12px;
59 | margin-bottom: 40px;
60 | }
61 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/models/error.js:
--------------------------------------------------------------------------------
1 | import { query403, query401, query404, query500 } from '../services/error';
2 |
3 | export default {
4 | namespace: 'error',
5 |
6 | state: {
7 | error: '',
8 | isloading: false,
9 | },
10 |
11 | effects: {
12 | *query403(_, { call, put }) {
13 | yield call(query403);
14 | yield put({
15 | type: 'trigger',
16 | payload: '403',
17 | });
18 | },
19 | *query401(_, { call, put }) {
20 | yield call(query401);
21 | yield put({
22 | type: 'trigger',
23 | payload: '401',
24 | });
25 | },
26 | *query500(_, { call, put }) {
27 | yield call(query500);
28 | yield put({
29 | type: 'trigger',
30 | payload: '500',
31 | });
32 | },
33 | *query404(_, { call, put }) {
34 | yield call(query404);
35 | yield put({
36 | type: 'trigger',
37 | payload: '404',
38 | });
39 | },
40 | },
41 |
42 | reducers: {
43 | trigger(state, action) {
44 | return {
45 | error: action.payload,
46 | };
47 | },
48 | },
49 | };
50 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/models/global.js:
--------------------------------------------------------------------------------
1 | import { queryNotices } from '../services/api';
2 |
3 | export default {
4 | namespace: 'global',
5 |
6 | state: {
7 | collapsed: false,
8 | notices: [],
9 | },
10 |
11 | effects: {
12 | *fetchNotices(_, { call, put }) {
13 | const data = yield call(queryNotices);
14 | yield put({
15 | type: 'saveNotices',
16 | payload: data,
17 | });
18 | yield put({
19 | type: 'user/changeNotifyCount',
20 | payload: data.length,
21 | });
22 | },
23 | *clearNotices({ payload }, { put, select }) {
24 | yield put({
25 | type: 'saveClearedNotices',
26 | payload,
27 | });
28 | const count = yield select(state => state.global.notices.length);
29 | yield put({
30 | type: 'user/changeNotifyCount',
31 | payload: count,
32 | });
33 | },
34 | },
35 |
36 | reducers: {
37 | changeLayoutCollapsed(state, { payload }) {
38 | return {
39 | ...state,
40 | collapsed: payload,
41 | };
42 | },
43 | saveNotices(state, { payload }) {
44 | return {
45 | ...state,
46 | notices: payload,
47 | };
48 | },
49 | saveClearedNotices(state, { payload }) {
50 | return {
51 | ...state,
52 | notices: state.notices.filter(item => item.type !== payload),
53 | };
54 | },
55 | },
56 |
57 | subscriptions: {
58 | setup({ history }) {
59 | // Subscribe history(url) change, trigger `load` action if pathname is `/`
60 | return history.listen(({ pathname, search }) => {
61 | if (typeof window.ga !== 'undefined') {
62 | window.ga('send', 'pageview', pathname + search);
63 | }
64 | });
65 | },
66 | },
67 | };
68 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/models/login.js:
--------------------------------------------------------------------------------
1 | import { routerRedux } from 'dva/router';
2 | import { fakeAccountLogin } from '../services/api';
3 | import { setAuthority } from '../utils/authority';
4 | import { reloadAuthorized } from '../utils/Authorized';
5 |
6 | export default {
7 | namespace: 'login',
8 |
9 | state: {
10 | status: undefined,
11 | },
12 |
13 | effects: {
14 | *login({ payload }, { call, put }) {
15 | const response = yield call(fakeAccountLogin, payload);
16 | yield put({
17 | type: 'changeLoginStatus',
18 | payload: response,
19 | });
20 | // Login successfully
21 | if (response.status === 'ok') {
22 | reloadAuthorized();
23 | yield put(routerRedux.push('/'));
24 | }
25 | },
26 | *logout(_, { put, select }) {
27 | try {
28 | // get location pathname
29 | const urlParams = new URL(window.location.href);
30 | const pathname = yield select(state => state.routing.location.pathname);
31 | // add the parameters in the url
32 | urlParams.searchParams.set('redirect', pathname);
33 | window.history.replaceState(null, 'login', urlParams.href);
34 | } finally {
35 | yield put({
36 | type: 'changeLoginStatus',
37 | payload: {
38 | status: false,
39 | currentAuthority: 'guest',
40 | },
41 | });
42 | reloadAuthorized();
43 | yield put(routerRedux.push('/user/login'));
44 | }
45 | },
46 | },
47 |
48 | reducers: {
49 | changeLoginStatus(state, { payload }) {
50 | setAuthority(payload.currentAuthority);
51 | return {
52 | ...state,
53 | status: payload.status,
54 | type: payload.type,
55 | };
56 | },
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/models/register.js:
--------------------------------------------------------------------------------
1 | import { fakeRegister } from '../services/api';
2 | import { setAuthority } from '../utils/authority';
3 | import { reloadAuthorized } from '../utils/Authorized';
4 |
5 | export default {
6 | namespace: 'register',
7 |
8 | state: {
9 | status: undefined,
10 | },
11 |
12 | effects: {
13 | *submit(_, { call, put }) {
14 | const response = yield call(fakeRegister);
15 | yield put({
16 | type: 'registerHandle',
17 | payload: response,
18 | });
19 | },
20 | },
21 |
22 | reducers: {
23 | registerHandle(state, { payload }) {
24 | setAuthority('user');
25 | reloadAuthorized();
26 | return {
27 | ...state,
28 | status: payload.status,
29 | };
30 | },
31 | },
32 | };
33 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/models/user.js:
--------------------------------------------------------------------------------
1 | import { query as queryUsers, queryCurrent } from '../services/user';
2 |
3 | export default {
4 | namespace: 'user',
5 |
6 | state: {
7 | list: [],
8 | currentUser: {},
9 | },
10 |
11 | effects: {
12 | *fetch(_, { call, put }) {
13 | const response = yield call(queryUsers);
14 | yield put({
15 | type: 'save',
16 | payload: response,
17 | });
18 | },
19 | *fetchCurrent(_, { call, put }) {
20 | const response = yield call(queryCurrent);
21 | yield put({
22 | type: 'saveCurrentUser',
23 | payload: response,
24 | });
25 | },
26 | },
27 |
28 | reducers: {
29 | save(state, action) {
30 | return {
31 | ...state,
32 | list: action.payload,
33 | };
34 | },
35 | saveCurrentUser(state, action) {
36 | return {
37 | ...state,
38 | currentUser: {
39 | name: 'Serati Ma',
40 | avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
41 | userid: '00000001',
42 | notifyCount: 12,
43 | },
44 | };
45 | },
46 | changeNotifyCount(state, action) {
47 | return {
48 | ...state,
49 | currentUser: {
50 | ...state.currentUser,
51 | notifyCount: action.payload,
52 | },
53 | };
54 | },
55 | },
56 | };
57 |
--------------------------------------------------------------------------------
/cli/base-antd-pro/src/router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { routerRedux, Route, Switch } from 'dva/router';
3 | import { Spin } from 'antd';
4 |
5 | import dynamic from 'dva/dynamic';
6 | import { getRouterData } from './common/router';
7 |
8 | import styles from './index.less';
9 |
10 | const { ConnectedRouter } = routerRedux;
11 |
12 | dynamic.setDefaultLoadingComponent(() => {
13 | return {children}
: null}
11 |
8 |
20 | );
21 |
22 | const actions = ;
23 |
24 | export default () => (
25 |
9 | 您提交的内容有如下错误：
10 |
11 |
12 |
15 |
16 |
19 |
12 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/Exception/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .exception {
4 | display: flex;
5 | align-items: center;
6 | height: 100%;
7 |
8 | .imgBlock {
9 | flex: 0 0 62.5%;
10 | width: 62.5%;
11 | padding-right: 152px;
12 | zoom: 1;
13 | &:before,
14 | &:after {
15 | content: " ";
16 | display: table;
17 | }
18 | &:after {
19 | clear: both;
20 | visibility: hidden;
21 | font-size: 0;
22 | height: 0;
23 | }
24 | }
25 |
26 | .imgEle {
27 | height: 360px;
28 | width: 100%;
29 | max-width: 430px;
30 | float: right;
31 | background-repeat: no-repeat;
32 | background-position: 50% 50%;
33 | background-size: contain;
34 | }
35 |
36 | .content {
37 | flex: auto;
38 |
39 | h1 {
40 | color: #434e59;
41 | font-size: 72px;
42 | font-weight: 600;
43 | line-height: 72px;
44 | margin-bottom: 24px;
45 | }
46 |
47 | .desc {
48 | color: @text-color-secondary;
49 | font-size: 20px;
50 | line-height: 28px;
51 | margin-bottom: 16px;
52 | }
53 |
54 | .actions {
55 | button:not(:last-child) {
56 | margin-right: 8px;
57 | }
58 | }
59 | }
60 | }
61 |
62 | @media screen and (max-width: @screen-xl) {
63 | .exception {
64 | .imgBlock {
65 | padding-right: 88px;
66 | }
67 | }
68 | }
69 |
70 | @media screen and (max-width: @screen-sm) {
71 | .exception {
72 | display: block;
73 | text-align: center;
74 | .imgBlock {
75 | padding-right: 0;
76 | margin: 0 auto 24px;
77 | }
78 | }
79 | }
80 |
81 | @media screen and (max-width: @screen-xs) {
82 | .exception {
83 | .imgBlock {
84 | margin-bottom: -24px;
85 | overflow: hidden;
86 | }
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/Exception/typeConfig.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | 403: {
3 | img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
4 | title: '403',
5 | desc: '抱歉，你无权访问该页面',
6 | },
7 | 404: {
8 | img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
9 | title: '404',
10 | desc: '抱歉，你访问的页面不存在',
11 | },
12 | 500: {
13 | img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
14 | title: '500',
15 | desc: '抱歉，服务器出错了',
16 | },
17 | };
18 |
19 | export default config;
20 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/GlobalFooter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './index.less';
4 |
5 | export default ({ className, links, copyright }) => {
6 | const clsString = classNames(styles.globalFooter, className);
7 | return (
8 |
13 |
17 |
18 |
19 |
31 | {title || config[pageType].title}
20 |{desc || config[pageType].desc}
21 |
22 | {
23 | actions ||
24 | createElement(linkElement, {
25 | to: '/',
26 | href: '/',
27 | }, )
28 | }
29 |
30 |
9 | {
10 | links && (
11 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/GlobalFooter/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .globalFooter {
4 | padding: 0 16px;
5 | margin: 48px 0 24px 0;
6 | text-align: center;
7 |
8 | .links {
9 | margin-bottom: 8px;
10 |
11 | a {
12 | color: @text-color-secondary;
13 | transition: all .3s;
14 |
15 | &:not(:last-child) {
16 | margin-right: 40px;
17 | }
18 |
19 | &:hover {
20 | color: @text-color;
21 | }
22 | }
23 | }
24 |
25 | .copyright {
26 | color: @text-color-secondary;
27 | font-size: @font-size-base;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/GlobalHeader/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Layout, Divider } from 'antd';
3 |
4 | import { Link } from 'dva/router';
5 |
6 | import HeaderSearch from '../HeaderSearch';
7 | import HeaderMenu from '../HeaderMenu';
8 | import HeaderLogo from '../HeaderLogo';
9 | import styles from './index.less';
10 | import { getMenuData } from '../../common/menu';
11 |
12 | const { Header } = Layout;
13 |
14 |
15 | export default class GlobalHeader extends PureComponent {
16 | componentWillUnmount() {
17 | this.triggerResizeEvent.cancel();
18 | }
19 |
20 | render() {
21 | const {
22 | isMobile, logo, location
23 | } = this.props;
24 |
25 | return (
26 |
12 | {links.map(link => (
13 |
18 | {link.title}
19 |
20 | ))}
21 |
22 | )
23 | }
24 | {copyright && {copyright}
}
25 |
48 | {
53 | console.log('input', value); // eslint-disable-line
54 | }}
55 | onPressEnter={(value) => {
56 | console.log('enter', value); // eslint-disable-line
57 | }}
58 | />
59 |
60 |
61 |
12 |
13 | 
14 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/HeaderLogo/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 | @ease-in-out-circ: cubic-bezier(.78, .14, .15, .86);
3 | .logo {
4 | height: 64px;
5 | position: relative;
6 | line-height: 64px;
7 | max-height: 64px;
8 | padding-left: (@menu-collapsed-width - 32px) / 2;
9 | padding-right: (@menu-collapsed-width - 32px) / 2;
10 | transition: all .3s;
11 | // background: #002140;
12 | overflow: hidden;
13 | display: inline-block;
14 | img {
15 | width: 48px;
16 | height: 48px;
17 | vertical-align: middle;
18 | }
19 | h1 {
20 | color: rgb(7, 2, 24);
21 | display: inline;
22 | vertical-align: middle;
23 | font-size: 20px;
24 | margin: 0 0 0 12px;
25 | font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
26 | font-weight: 600;
27 | }
28 | }
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/HeaderMenu/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 | @ease-in-out-circ: cubic-bezier(.78, .14, .15, .86);
3 |
4 |
5 | // .sider {
6 | // min-height: 100vh;
7 | // // box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
8 | // position: relative;
9 | // z-index: 10;
10 | // }
11 |
12 | // .icon {
13 | // width: 14px;
14 | // margin-right: 10px;
15 | // }
16 |
17 | // :global {
18 | // .drawer .drawer-content {
19 | // // background: #001529;
20 | // }
21 | // }
22 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/components/HeaderSearch/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 |
3 | .headerSearch {
4 | :global(.anticon-search) {
5 | cursor: pointer;
6 | font-size: 16px;
7 | }
8 | .input {
9 | transition: width .3s, margin-left .3s;
10 | width: 0;
11 | background: transparent;
12 | border-radius: 0;
13 | :global(.ant-select-selection) {
14 | background: transparent;
15 | }
16 | input {
17 | border: 0;
18 | padding-left: 0;
19 | padding-right: 0;
20 | box-shadow: none !important;
21 | }
22 | &,
23 | &:hover,
24 | &:focus {
25 | border-bottom: 1px solid @border-color-base;
26 | }
27 | &.show {
28 | width: 210px;
29 | margin-left: 8px;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/cli/react-antd-dva/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Blog
15 | 16 |List of Article
5 | ); 6 | 7 | export default ArticleList; -------------------------------------------------------------------------------- /cli/react-antd-dva/src/routes/ArticleList/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharember/react-demo-gather/e5230987764dfd304a3bf4070c33a5ff1d938921/cli/react-antd-dva/src/routes/ArticleList/index.less -------------------------------------------------------------------------------- /cli/react-antd-dva/src/routes/Exception/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'dva/router'; 3 | import Exception from '../../components/Exception'; 4 | 5 | export default () => ( 6 |
6 | Example
7 |
8 | );
9 | };
10 |
11 | Example.propTypes = {
12 | };
13 |
14 | export default Example;
15 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/index.css:
--------------------------------------------------------------------------------
1 |
2 | html, body, :global(#root) {
3 | height: 100%;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/index.js:
--------------------------------------------------------------------------------
1 | import dva from 'dva';
2 | import 'babel-polyfill'
3 | import createLoading from 'dva-loading'
4 | import { browserHistory } from 'dva/router'
5 | import { message } from 'antd'
6 | import './index.css';
7 |
8 | // 1. Initialize
9 | const app = dva({
10 | ...createLoading({
11 | effects: true,
12 | }),
13 | history: browserHistory,
14 | onError (error) {
15 | message.error(error.message)
16 | },
17 | });
18 |
19 | // 2. Plugins
20 | // app.use({});
21 |
22 | // 3. Model
23 | app.model(require('./models/login'));
24 |
25 | // 4. Router
26 | app.router(require('./router'));
27 |
28 | // 5. Start
29 | app.start('#root');
30 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/mock/mock.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by chengfan on 2017/5/25*/
3 |
4 | const qs = require('qs')
5 | const Mock = require('mockjs')
6 |
7 | const userPermission = {
8 | DEFAULT: [
9 | 'index',
10 | ],
11 | ADMIN: [
12 | 'index', 'admin', 'users',
13 | ],
14 | USERS: [
15 | 'index', 'users',
16 | ]
17 | };
18 |
19 | const adminUsers = [
20 | {
21 | id: 0,
22 | username: 'admin',
23 | password: 'admin',
24 | permission: userPermission.ADMIN
25 | },
26 | {
27 | id: 1,
28 | username: 'user',
29 | password: 'user',
30 | permission: userPermission.USERS
31 | },
32 | ];
33 |
34 | module.exports = {
35 | [`POST /login`] (req, res){
36 | const { username, password } = req.body
37 | const user = adminUsers.filter((item) => item.username === username)
38 |
39 | if (user.length > 0 && user[0].password === password) {
40 | const now = new Date()
41 | now.setDate(now.getDate() + 1)
42 | res.cookie('token', JSON.stringify({ id: user[0].id, deadline: now.getTime() }), {
43 | maxAge: 900000,
44 | httpOnly: true,
45 | })
46 | res.json({ success: true, message: 'ok' })
47 | } else {
48 | res.status(400).end()
49 | }
50 | }
51 | }
52 |
53 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/models/example.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 |
4 | namespace: 'example',
5 |
6 | state: {},
7 |
8 | subscriptions: {
9 | setup({ dispatch, history }) { // eslint-disable-line
10 | },
11 | },
12 |
13 | effects: {
14 | *fetch({ payload }, { call, put }) { // eslint-disable-line
15 | yield put({ type: 'save' });
16 | },
17 | },
18 |
19 | reducers: {
20 | save(state, action) {
21 | return { ...state, ...action.payload };
22 | },
23 | },
24 |
25 | };
26 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/models/login.js:
--------------------------------------------------------------------------------
1 | import * as service from '../services/login'
2 | import { routerRedux } from 'dva/router'
3 |
4 | export default {
5 | namespace: 'login',
6 | state: {
7 | loginLoading: false
8 | },
9 | reducers: {
10 | showLoginLoading(state) {
11 | return {
12 | ...state,
13 | loginLoading: true,
14 | }
15 | },
16 | hideLoginLoading(state) {
17 | return {
18 | ...state,
19 | loginLoading: false
20 | }
21 | }
22 | },
23 | effects: {
24 | *login({ payload, }, { call, put }) {
25 |
26 | yield put({
27 | type: 'showLoginLoading'
28 | });
29 | const data = yield call(service.login, payload);
30 |
31 | yield put({
32 | type: 'hideLoginLoading'
33 | });
34 | if (data.success) {
35 | yield put(routerRedux.push('/index'))
36 | }
37 | }
38 | },
39 | subscriptions: {},
40 | };
41 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Router, Route } from 'dva/router';
3 | import IndexPage from './routes/IndexPage';
4 | import Login from './routes/Login'
5 |
6 | function RouterConfig({ history }) {
7 | return (
8 |
8 |
15 | );
16 | }
17 |
18 | IndexPage.propTypes = {
19 | };
20 |
21 | export default connect()(IndexPage);
22 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/routes/IndexPage.less:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | font-family: Georgia, sans-serif;
4 | margin-top: 3em;
5 | text-align: center;
6 | }
7 |
8 | .title {
9 | font-size: 2.5rem;
10 | font-weight: normal;
11 | letter-spacing: -1px;
12 | }
13 |
14 | .welcome {
15 | height: 328px;
16 | background: url(../assets/yay.jpg) no-repeat center 0;
17 | background-size: 388px 328px;
18 | }
19 |
20 | .list {
21 | font-size: 1.2em;
22 | margin-top: 1.8em;
23 | list-style: none;
24 | line-height: 1.5em;
25 | }
26 |
27 | .list code {
28 | background: #f7f7f7;
29 | }
30 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/routes/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'dva';
3 | import styles from './Login.less'
4 | import { Form, Icon, Input, Button, Checkbox } from 'antd';
5 | const FormItem = Form.Item;
6 |
7 | const Login = ({
8 | dispatch,
9 | login,
10 | form: {
11 | getFieldDecorator,
12 | validateFieldsAndScroll
13 | }
14 | }) => {
15 | const { loginLoading } = login;
16 |
17 | function handelSubmit() {
18 | validateFieldsAndScroll((errors, values) => {
19 | if (errors) {
20 | return;
21 | }
22 | dispatch({
23 | type: 'login/login',
24 | payload: values,
25 | });
26 | });
27 | }
28 |
29 | return (
30 | Yay! Welcome to dva!
9 | 10 |-
11 |
- To get started, edit
src/index.jsand save to reload.
12 | - Getting Started 13 |
31 |
60 |
61 | );
62 | };
63 |
64 | // export default Lists;
65 | export default connect(({ login }) => ({
66 | login,
67 | }))(Form.create()(Login));
68 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/routes/Login.less:
--------------------------------------------------------------------------------
1 | .warp {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | margin: -160px 0 0 -160px;
6 | width: 320px;
7 | height: 320px;
8 | padding: 36px;
9 | box-shadow: 0 0 100px rgba(0,0,0,.08);
10 | }
11 | .form {
12 | max-width: 320px;
13 | }
14 | .forgot {
15 | float: right;
16 | }
17 | .button {
18 | width: 100%;
19 | }
20 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/services/example.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/services/login.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by chengfan on 2017/5/25.
3 | */
4 |
5 | import request from '../utils/request'
6 |
7 | export async function login(data) {
8 | return request( {
9 | url: '/login',
10 | method: 'post',
11 | data,
12 | })
13 | }
14 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/login-demo/src/utils/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | baseURL: 'http://localhost:8000/',
3 | };
4 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/.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 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "rules": {
5 | "generator-star-spacing": [0],
6 | "consistent-return": [0],
7 | "react/forbid-prop-types": [0],
8 | "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
9 | "global-require": [1],
10 | "import/prefer-default-export": [0],
11 | "react/jsx-no-bind": [0],
12 | "react/prop-types": [0],
13 | "react/prefer-stateless-function": [0],
14 | "no-else-return": [0],
15 | "no-restricted-syntax": [0],
16 | "import/no-extraneous-dependencies": [0],
17 | "no-use-before-define": [0],
18 | "jsx-a11y/no-static-element-interactions": [0],
19 | "no-nested-ternary": [0],
20 | "arrow-body-style": [0],
21 | "import/extensions": [0],
22 | "no-bitwise": [0],
23 | "no-cond-assign": [0],
24 | "import/no-unresolved": [0],
25 | "require-yield": [1],
26 | "quotes": ["error", "single", { "allowTemplateLiterals": true }]
27 | },
28 | "parserOptions": {
29 | "ecmaFeatures": {
30 | "experimentalObjectRestSpread": true
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/.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 |
9 | # misc
10 | .DS_Store
11 | npm-debug.log*
12 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/.roadhogrc:
--------------------------------------------------------------------------------
1 | {
2 | "entry": "src/index.js",
3 | "env": {
4 | "development": {
5 | "extraBabelPlugins": [
6 | "dva-hmr",
7 | "transform-runtime",
8 | ["import", { "libraryName": "antd", "style": "css" }]
9 | ]
10 | },
11 | "production": {
12 | "extraBabelPlugins": [
13 | "transform-runtime",
14 | ["import", { "libraryName": "antd", "style": "css" }]
15 | ]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/.roadhogrc.mock.js:
--------------------------------------------------------------------------------
1 | const mock = require('./src/mock/mock')
2 |
3 | module.exports = mock
4 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "start": "roadhog server",
5 | "build": "roadhog build",
6 | "lint": "eslint --ext .js src test",
7 | "precommit": "npm run lint"
8 | },
9 | "engines": {
10 | "install-node": "6.9.2"
11 | },
12 | "dependencies": {
13 | "antd": "^2.10.2",
14 | "axios": "^0.16.1",
15 | "babel-plugin-import": "^1.2.0",
16 | "babel-runtime": "^6.9.2",
17 | "dva": "^1.2.1",
18 | "mockjs": "^1.0.1-beta3",
19 | "react": "^15.4.0",
20 | "react-dom": "^15.4.0"
21 | },
22 | "devDependencies": {
23 | "babel-eslint": "^7.1.1",
24 | "babel-plugin-dva-hmr": "^0.3.2",
25 | "babel-plugin-transform-runtime": "^6.9.0",
26 | "eslint": "^3.12.2",
27 | "eslint-config-airbnb": "^13.0.0",
28 | "eslint-plugin-import": "^2.2.0",
29 | "eslint-plugin-jsx-a11y": "^2.2.3",
30 | "eslint-plugin-react": "^6.8.0",
31 | "expect": "^1.20.2",
32 | "husky": "^0.12.0",
33 | "redbox-react": "^1.3.2",
34 | "roadhog": "^0.5.2"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
6 | Example
7 |
8 | );
9 | };
10 |
11 | Example.propTypes = {
12 | };
13 |
14 | export default Example;
15 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/src/components/List.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by chengfan on 2017/5/23.
3 | */
4 | import React from 'react';
5 | import PropTypes from 'prop-types';
6 | import { Table } from 'antd';
7 |
8 | const List = ({ index }) => {
9 | const columns = [
10 | {
11 | title: 'Name',
12 | dataIndex: 'name',
13 | },
14 | {
15 | title: 'age',
16 | dataIndex: 'age',
17 | },
18 | {
19 | title: 'color',
20 | dataIndex: 'color',
21 | },
22 | ];
23 |
24 |
25 |
26 |
27 | return (
28 |
20 |
21 |
23 | );
24 | };
25 |
26 | IndexPage.propTypes = {
27 | };
28 |
29 | export default connect(({ index }) => ({
30 | index,
31 | }))(IndexPage);
32 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/src/services/example.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/mockjs-demo/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import fetch from 'dva/fetch';
2 |
3 | function checkStatus(response) {
4 | if (response.status >= 200 && response.status < 300) {
5 | return response;
6 | }
7 |
8 | const error = new Error(response.statusText);
9 | error.response = response;
10 | throw error;
11 | }
12 |
13 | /**
14 | * Requests a URL, returning a promise.
15 | *
16 | * @param {string} url The URL we want to request
17 | * @param {object} [options] The options we want to pass to "fetch"
18 | * @return {object} An object containing either "data" or "err"
19 | */
20 | export default async function request(url, options) {
21 | const response = await fetch(url, options);
22 |
23 | checkStatus(response);
24 |
25 | const data = await response.json();
26 |
27 | const ret = {
28 | data,
29 | headers: {},
30 | };
31 |
32 | if (response.headers.get('x-total-count')) {
33 | ret.headers['x-total-count'] = response.headers.get('x-total-count');
34 | }
35 | return ret.data;
36 | }
37 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/.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 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "rules": {
5 | "generator-star-spacing": [0],
6 | "consistent-return": [0],
7 | "react/forbid-prop-types": [0],
8 | "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
9 | "global-require": [1],
10 | "import/prefer-default-export": [0],
11 | "react/jsx-no-bind": [0],
12 | "react/prop-types": [0],
13 | "react/prefer-stateless-function": [0],
14 | "no-else-return": [0],
15 | "no-restricted-syntax": [0],
16 | "import/no-extraneous-dependencies": [0],
17 | "no-use-before-define": [0],
18 | "jsx-a11y/no-static-element-interactions": [0],
19 | "no-nested-ternary": [0],
20 | "arrow-body-style": [0],
21 | "import/extensions": [0],
22 | "no-bitwise": [0],
23 | "no-cond-assign": [0],
24 | "import/no-unresolved": [0],
25 | "require-yield": [1]
26 | },
27 | "parserOptions": {
28 | "ecmaFeatures": {
29 | "experimentalObjectRestSpread": true
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/.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 |
9 | # misc
10 | .DS_Store
11 | npm-debug.log*
12 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/.roadhogrc:
--------------------------------------------------------------------------------
1 | {
2 | "entry": "src/index.js",
3 | "env": {
4 | "development": {
5 | "extraBabelPlugins": [
6 | "dva-hmr",
7 | "transform-runtime",
8 | ["import", { "libraryName": "antd", "style": "css" }]
9 | ]
10 | },
11 | "production": {
12 | "extraBabelPlugins": [
13 | "transform-runtime",
14 | ["import", { "libraryName": "antd", "style": "css" }]
15 | ]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/.roadhogrc.mock.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 | };
4 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/mock/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sharember/react-demo-gather/e5230987764dfd304a3bf4070c33a5ff1d938921/higher-demo/dva-antd/todo-list/mock/.gitkeep
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "start": "roadhog server",
5 | "build": "roadhog build",
6 | "lint": "eslint --ext .js src test",
7 | "precommit": "npm run lint"
8 | },
9 | "engines": {
10 | "install-node": "6.9.2"
11 | },
12 | "dependencies": {
13 | "antd": "^2.10.2",
14 | "babel-plugin-import": "^1.1.1",
15 | "babel-runtime": "^6.9.2",
16 | "dva": "^1.2.1",
17 | "react": "^15.4.0",
18 | "react-dom": "^15.4.0"
19 | },
20 | "devDependencies": {
21 | "babel-eslint": "^7.1.1",
22 | "babel-plugin-dva-hmr": "^0.3.2",
23 | "babel-plugin-transform-runtime": "^6.9.0",
24 | "eslint": "^3.12.2",
25 | "eslint-config-airbnb": "^13.0.0",
26 | "eslint-plugin-import": "^2.2.0",
27 | "eslint-plugin-jsx-a11y": "^2.2.3",
28 | "eslint-plugin-react": "^6.8.0",
29 | "expect": "^1.20.2",
30 | "husky": "^0.12.0",
31 | "redbox-react": "^1.3.2",
32 | "roadhog": "^0.5.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 | }
15 | value={input}
16 | onChange={onChange}
17 | />
18 |
19 |
20 | );
21 | };
22 |
23 | Add.propTypes = {
24 | onAdd: PropTypes.func.isRequired,
25 | input: PropTypes.string.isRequired,
26 | };
27 |
28 | export default Add;
29 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/src/components/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Example = () => {
4 | return (
5 |
6 | Example
7 |
8 | );
9 | };
10 |
11 | Example.propTypes = {
12 | };
13 |
14 | export default Example;
15 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/src/components/List.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by chengfan on 2017/5/23.
3 | */
4 | import React from 'react';
5 | import PropTypes from 'prop-types';
6 | import { Table, Popconfirm, Button } from 'antd';
7 |
8 | const List = ({ onDelete, lists }) => {
9 | const columns = [
10 | {
11 | title: 'Id',
12 | dataIndex: 'id',
13 | },
14 | {
15 | title: 'Name',
16 | dataIndex: 'name',
17 | },
18 | {
19 | title: 'Actions',
20 | render: (text, record) => {
21 | return (
22 |
8 |
15 | );
16 | }
17 |
18 | IndexPage.propTypes = {
19 | };
20 |
21 | export default connect()(IndexPage);
22 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/src/routes/List.css:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | }
4 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/src/routes/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'dva';
3 | import List from '../components/List';
4 | import Add from '../components/Add';
5 |
6 | const Lists = ({ dispatch, lists, inputs }) => {
7 | function handleDelete(id) {
8 | dispatch({
9 | type: 'lists/delete',
10 | payload: id,
11 | });
12 | }
13 | function handleAdd() {
14 | dispatch({
15 | type: 'lists/add',
16 | payload: inputs.input,
17 | });
18 | }
19 |
20 | function handelChange(e) {
21 | dispatch({
22 | type: 'inputs/change',
23 | payload: e.target.value,
24 | });
25 | }
26 | return (
27 | Yay! Welcome to dva!
9 | 10 |-
11 |
- To get started, edit
src/index.jsand save to reload.
12 | - Getting Started 13 |
28 |
30 |
31 |
33 |
35 | );
36 | };
37 |
38 | // export default Lists;
39 | export default connect(({ inputs, lists }) => ({
40 | inputs, lists,
41 | }))(Lists);
42 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/src/services/example.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
--------------------------------------------------------------------------------
/higher-demo/dva-antd/todo-list/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.status >= 200 && response.status < 300) {
9 | return response;
10 | }
11 |
12 | const error = new Error(response.statusText);
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 |
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react",
5 | "stage-0"
6 | ],
7 | "plugins": [
8 | "react-hot-loader/babel"
9 | ]
10 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/README.md:
--------------------------------------------------------------------------------
1 | ## todo list
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/dist/api/user.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "brickspert",
3 | "intro": "please give me a star"
4 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 30 |
31 |
List of Products
32 |33 |
9 | Hello, React!
10 |
11 | )
12 | }
13 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDom from 'react-dom';
3 | import {AppContainer} from 'react-hot-loader';
4 | import {Provider} from 'react-redux';
5 | import store from './redux/store';
6 |
7 | import getRouter from 'router/router';
8 |
9 | /*初始化*/
10 | renderWithHotReload(getRouter());
11 |
12 | /*热更新*/
13 | if (module.hot) {
14 | module.hot.accept('./router/router', () => {
15 | const getRouter = require('router/router').default;
16 | renderWithHotReload(getRouter());
17 | });
18 | }
19 |
20 | function renderWithHotReload(RootElement) {
21 | ReactDom.render(
22 |
10 |
18 | )
19 | }
20 | }
21 |
22 | const mapStateToProps = (state) => {
23 | return {
24 | counter: state.counter
25 | }
26 | };
27 |
28 | const mapDispatchToProps = (dispatch) => {
29 | return {
30 | increment: () => {
31 | dispatch(increment())
32 | },
33 | decrement: () => {
34 | dispatch(decrement())
35 | },
36 | reset: () => {
37 | dispatch(reset())
38 | }
39 | }
40 | };
41 |
42 | export default connect(mapStateToProps, mapDispatchToProps)(Counter);
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/pages/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | export default class Home extends Component {
4 | render() {
5 | return (
6 | 当前计数为{this.props.counter.count}
11 |
13 |
15 |
17 |
7 | this is home~
8 |
9 | )
10 | }
11 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/pages/Page1/Page1.css:
--------------------------------------------------------------------------------
1 | .page-box {
2 | border: 1px solid red;
3 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/pages/Page1/Page1.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | import './Page1.css';
4 |
5 | export default class Page1 extends Component {
6 | render() {
7 | return (
8 |
9 | this is page1~
10 |
11 | )
12 | }
13 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/pages/UserInfo/UserInfo.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {connect} from 'react-redux';
3 | import {getUserInfo} from "actions/userInfo";
4 |
5 | class UserInfo extends Component {
6 |
7 | render() {
8 | const {userInfo, isLoading, errorMsg} = this.props.userInfo;
9 | return (
10 |
11 | {
12 | isLoading ? '请求信息中......' :
13 | (
14 | errorMsg ? errorMsg :
15 |
24 | )
25 | }
26 | }
27 |
28 | export default connect((state) => ({userInfo: state.userInfo}), {getUserInfo})(UserInfo);
29 |
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/actions/counter.js:
--------------------------------------------------------------------------------
1 | /*action*/
2 |
3 | export const INCREMENT = "counter/INCREMENT";
4 | export const DECREMENT = "counter/DECREMENT";
5 | export const RESET = "counter/RESET";
6 |
7 | export function increment() {
8 | return {type: INCREMENT}
9 | }
10 |
11 | export function decrement() {
12 | return {type: DECREMENT}
13 | }
14 |
15 | export function reset() {
16 | return {type: RESET}
17 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/actions/userInfo.js:
--------------------------------------------------------------------------------
1 | export const GET_USER_INFO_REQUEST = "userInfo/GET_USER_INFO_REQUEST";
2 | export const GET_USER_INFO_SUCCESS = "userInfo/GET_USER_INFO_SUCCESS";
3 | export const GET_USER_INFO_FAIL = "userInfo/GET_USER_INFO_FAIL";
4 |
5 | function getUserInfoRequest() {
6 | return {
7 | type: GET_USER_INFO_REQUEST
8 | }
9 | }
10 |
11 | function getUserInfoSuccess(userInfo) {
12 | return {
13 | type: GET_USER_INFO_SUCCESS,
14 | userInfo: userInfo
15 | }
16 | }
17 |
18 | function getUserInfoFail() {
19 | return {
20 | type: GET_USER_INFO_FAIL
21 | }
22 | }
23 |
24 | export function getUserInfo() {
25 | return function (dispatch) {
26 | dispatch(getUserInfoRequest());
27 |
28 | return fetch('http://localhost:8080/api/user.json')
29 | .then((response => {
30 | return response.json()
31 | }))
32 | .then((json) => {
33 | dispatch(getUserInfoSuccess(json))
34 | }
35 | ).catch(
36 | () => {
37 | dispatch(getUserInfoFail());
38 | }
39 | )
40 | }
41 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/reducers.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from "redux";
2 |
3 | import counter from 'reducers/counter';
4 | import userInfo from 'reducers/userInfo';
5 |
6 |
7 | export default combineReducers({
8 | counter,
9 | userInfo
10 | });
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/reducers/counter.js:
--------------------------------------------------------------------------------
1 | import {INCREMENT, DECREMENT, RESET} from '../actions/counter';
2 |
3 | /*
4 | * 初始化state
5 | */
6 |
7 | const initState = {
8 | count: 0
9 | };
10 | /*
11 | * reducer
12 | */
13 | export default function reducer(state = initState, action) {
14 | switch (action.type) {
15 | case INCREMENT:
16 | return {
17 | count: state.count + 1
18 | };
19 | case DECREMENT:
20 | return {
21 | count: state.count - 1
22 | };
23 | case RESET:
24 | return {count: 0};
25 | default:
26 | return state
27 | }
28 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/reducers/userInfo.js:
--------------------------------------------------------------------------------
1 | import {GET_USER_INFO_REQUEST, GET_USER_INFO_SUCCESS, GET_USER_INFO_FAIL} from 'actions/userInfo';
2 |
3 |
4 | const initState = {
5 | isLoading: false,
6 | userInfo: {},
7 | errorMsg: ''
8 | };
9 |
10 | export default function reducer(state = initState, action) {
11 | switch (action.type) {
12 | case GET_USER_INFO_REQUEST:
13 | return {
14 | ...state,
15 | isLoading: true,
16 | userInfo: {},
17 | errorMsg: ''
18 | };
19 | case GET_USER_INFO_SUCCESS:
20 | return {
21 | ...state,
22 | isLoading: false,
23 | userInfo: action.userInfo,
24 | errorMsg: ''
25 | };
26 | case GET_USER_INFO_FAIL:
27 | return {
28 | ...state,
29 | isLoading: false,
30 | userInfo: {},
31 | errorMsg: '请求错误'
32 | };
33 | default:
34 | return state;
35 | }
36 | }
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import {createStore, applyMiddleware} from 'redux';
2 | import thunkMiddleware from 'redux-thunk';
3 | import combineReducers from './reducers.js';
4 |
5 | let store = createStore(combineReducers, applyMiddleware(thunkMiddleware));
6 |
7 | export default store;
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/redux/testRedux.js:
--------------------------------------------------------------------------------
1 | import {increment, decrement, reset} from './actions/counter';
2 |
3 | import store from './store';
4 |
5 | // 打印初始状态
6 | console.log(store.getState());
7 |
8 | // 每次 state 更新时，打印日志
9 | // 注意 subscribe() 返回一个函数用来注销监听器
10 | let unsubscribe = store.subscribe(() =>
11 | console.log(store.getState())
12 | );
13 |
14 | // 发起一系列 action
15 | store.dispatch(increment());
16 | store.dispatch(decrement());
17 | store.dispatch(reset());
18 |
19 | // 停止监听 state 更新
20 | unsubscribe();
--------------------------------------------------------------------------------
/higher-demo/react-all/react-all-demo/src/router/router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
4 |
5 | import Home from 'pages/Home/Home';
6 | import Page1 from 'pages/Page1/Page1';
7 | import Counter from 'pages/Counter/Counter';
8 | import UserInfo from 'pages/UserInfo/UserInfo';
9 |
10 | const getRouter = () => (
11 |
16 |
20 | )
21 | }
22 |
23 | 用户信息：
17 |用户名：{userInfo.name}
18 |介绍：{userInfo.intro}
19 |
13 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | -
14 |
- 首页 15 |
- Page1 16 |
- Counter 17 |
- UserInfo 18 |
7 |
8 |
11 |
12 | )
13 | }
14 |
15 | handleClick(e) {
16 | const node = this.refs.input
17 | const text = node.value.trim()
18 | this.props.onAddClick(text)
19 | node.value = ''
20 | }
21 | }
22 |
23 | AddTodo.propTypes = {
24 | onAddClick: PropTypes.func.isRequired
25 | }
--------------------------------------------------------------------------------
/higher-demo/redux/todolist/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class Footer extends Component {
4 | renderFilter(filter, name) {
5 | if (filter === this.props.filter) {
6 | return name
7 | }
8 |
9 | return (
10 | {
11 | e.preventDefault()
12 | this.props.onFilterChange(filter)
13 | }}>
14 | {name}
15 |
16 | )
17 | }
18 |
19 | render() {
20 | return (
21 | 22 | Show: 23 | {' '} 24 | {this.renderFilter('SHOW_ALL', 'All')} 25 | {', '} 26 | {this.renderFilter('SHOW_COMPLETED', 'Completed')} 27 | {', '} 28 | {this.renderFilter('SHOW_ACTIVE', 'Active')} 29 | . 30 |
31 | ) 32 | } 33 | } 34 | 35 | Footer.propTypes = { 36 | onFilterChange: PropTypes.func.isRequired, 37 | filter: PropTypes.oneOf([ 38 | 'SHOW_ALL', 39 | 'SHOW_COMPLETED', 40 | 'SHOW_ACTIVE' 41 | ]).isRequired 42 | } -------------------------------------------------------------------------------- /higher-demo/redux/todolist/src/components/Todo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by chengfan on 2017/6/6. 3 | */ 4 | import React, { Component, PropTypes } from 'react' 5 | 6 | export default class Todo extends Component { 7 | render() { 8 | return ( 9 |-
8 | {this.props.todos.map((todo, index) =>
9 |
21 |
28 | );
29 | }
30 | }
31 |
32 | export default App;
33 |
--------------------------------------------------------------------------------
/middle-demo/comment-app/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
8 |
13 | )
14 | }
15 | }
16 | export default Comment
--------------------------------------------------------------------------------
/middle-demo/comment-app/src/CommentInput.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class CommentInput extends Component {
4 | constructor() {
5 | super();
6 | this.state = {
7 | username: '',
8 | content: ''
9 | }
10 | }
11 |
12 | handleUsernameChange (e) {
13 | this.setState({
14 | username: e.target.value
15 | })
16 | }
17 |
18 | handleContentChange(e) {
19 | this.setState({
20 | content: e.target.value
21 | })
22 | }
23 |
24 | handleSubmit(e) {
25 | if (this.props.onSubmit) {
26 | const { username, content } = this.state
27 | this.props.onSubmit({username, content})
28 | }
29 | this.setState({ content: '' })
30 | }
31 |
32 | render() {
33 | return (
34 |
9 | {this.props.comment.username} ：
10 |
12 | {this.props.comment.content}
11 |
35 |
59 | )
60 | }
61 | }
62 |
63 | export default CommentInput
--------------------------------------------------------------------------------
/middle-demo/comment-app/src/CommentList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import Comment from './Comment'
3 |
4 | class CommentList extends Component {
5 | static defaultProps = {
6 | comments: []
7 | }
8 |
9 | render() {
10 | return (
11 |
36 | 用户名：
37 |
44 |
38 |
42 |
43 |
45 | 评论内容：
46 |
53 |
47 |
51 |
52 |
54 |
57 |
58 |
12 | {this.props.comments.map((comment, i) =>
13 |
16 | )
17 | }
18 | }
19 |
20 | export default CommentList
--------------------------------------------------------------------------------
/middle-demo/comment-app/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | background-color: #fbfbfb;
6 | width: 50%;
7 | margin: auto;
8 | }
9 |
10 | .wrapper {
11 | width: 500px;
12 | margin: 10px auto;
13 | font-size: 14px;
14 | background-color: #fff;
15 | border: 1px solid #f1f1f1;
16 | padding: 20px;
17 | }
18 |
19 | /* 评论框样式 */
20 | .comment-input {
21 | background-color: #fff;
22 | border: 1px solid #f1f1f1;
23 | padding: 20px;
24 | margin-bottom: 10px;
25 | }
26 |
27 | .comment-field {
28 | margin-bottom: 15px;
29 | display: flex;
30 | }
31 |
32 | .comment-field .comment-field-name {
33 | display: flex;
34 | flex-basis: 100px;
35 | font-size: 14px;
36 | }
37 |
38 | .comment-field .comment-field-input {
39 | display: flex;
40 | flex: 1;
41 | }
42 |
43 | .comment-field-input input,
44 | .comment-field-input textarea {
45 | border: 1px solid #e6e6e6;
46 | border-radius: 3px;
47 | padding: 5px;
48 | outline: none;
49 | font-size: 14px;
50 | resize: none;
51 | flex: 1;
52 | }
53 |
54 | .comment-field-input textarea {
55 | height: 100px;
56 | }
57 |
58 | .comment-field-button {
59 | display: flex;
60 | justify-content: flex-end;
61 | }
62 |
63 | .comment-field-button button {
64 | padding: 5px 10px;
65 | width: 80px;
66 | border: none;
67 | border-radius: 3px;
68 | background-color: #00a3cf;
69 | color: #fff;
70 | outline: none;
71 | cursor: pointer;
72 | }
73 |
74 | .comment-field-button button:active {
75 | background: #13c1f1;
76 | }
77 |
78 | /* 评论列表样式 */
79 | .comment-list {
80 | background-color: #fff;
81 | border: 1px solid #f1f1f1;
82 | padding: 20px;
83 | }
84 |
85 | /* 评论组件样式 */
86 | .comment {
87 | /* display: flex; */
88 | border-bottom: 1px solid #f1f1f1;
89 | margin-bottom: 10px;
90 | padding-bottom: 10px;
91 | min-height: 50px;
92 | }
93 |
94 | .comment .comment-user {
95 | flex-shrink: 0;
96 | }
97 |
98 | .comment span {
99 | color: #00a3cf;
100 | font-style: italic;
101 | }
102 |
103 | .comment p {
104 | margin: 0;
105 | /*text-indent: 2em;*/
106 | }
107 |
108 |
--------------------------------------------------------------------------------
/middle-demo/comment-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 |
7 | ReactDOM.render(i come from jsx-2.js
, 3 | document.getElementById('example') 4 | ); -------------------------------------------------------------------------------- /primer-demo/React教程/2.React JSX/jsx-2:jsx独立文件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
11 |
13 |
14 |
--------------------------------------------------------------------------------
/primer-demo/reactjs 来源/1.传统写法.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | too simple html
12 |
10 |
14 |
15 |
16 |
29 |
30 |
--------------------------------------------------------------------------------
/primer-demo/reactjs 来源/2.结构复用.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |