50 | {error && error.toString()}
51 |
52 | {info && info.componentStack} 53 |
54 |
55 | 52 | {info && info.componentStack} 53 |
onCollapse(!collapsed)}>
113 | {collapsed ?
115 |
116 | this.onVisibleChange(visible)}
125 | overlay={
126 | loadMoreNotices(params)}
131 | closeNoticePane={(visible: boolean) => this.onVisibleChange(visible)}
132 | />
133 | }
134 | >
135 |
141 | this.renderDropdownMenu(userInfo)}>
142 |
148 |
149 |
117 |
119 | this.setFullScreen()}>
120 |
122 |
136 |
137 |
139 |
140 |
143 |
144 | C
145 |
146 |
147 | Welcome to use React Typescript Admin
38 | }
39 | description={format(props.createdTime, 'YYYY-MM-DD HH:mm:ss')}
40 | />
41 |
62 |
86 | );
87 | }
88 | }
89 |
90 | export default NoticePane;
91 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.module.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | height: 100%;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { storiesOf } from '@storybook/react';
4 |
5 | import Loading from './Loading';
6 |
7 | storiesOf('Loading', module)
8 | .add('default', () => 消息中心
63 |
64 |
82 | - this.renderItem(item)}>
74 | {hasMore ?
75 |
加载更多
:
76 | 没有更多通知！
77 | }
78 | closeNoticePane(false)}>
83 | 关闭窗口
84 |
85 |
28 | {children &&
30 | );
31 | }}
32 | {children}
}
29 |
8 | 
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/SideBar/SideBar.module.scss:
--------------------------------------------------------------------------------
1 | .sideBar {
2 | color: #ffffff;
3 | overflow-y: auto;
4 | }
5 |
6 | .baseMenu {
7 | font-weight: bolder;
8 | }
9 |
10 | .logo {
11 | height: 50px;
12 | margin-bottom: 16px;
13 | text-align: center;
14 | white-space: nowrap;
15 | overflow: hidden;
16 |
17 | img {
18 | height: 50px;
19 | width: 120px;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/SideBar/SideBar.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from 'antd';
2 | import React, { PureComponent } from 'react';
3 |
4 | import { getDefaultCollapsedSubMenus } from '../../utils/utils';
5 | import BaseMenu, { MenuItemProps } from './BaseMenu';
6 | import Logo from './Logo';
7 | import styles from './SideBar.module.scss';
8 |
9 | let firstMount = true;
10 | const { Sider } = Layout;
11 |
12 | interface InternalProps {
13 | collapsed: boolean;
14 | location: Location;
15 | width?: number | string;
16 | menu: MenuItemProps[];
17 | flatMenuKeys: string[];
18 | onCollapse: (collapsed: boolean) => void;
19 | }
20 |
21 | interface InternalState {
22 | openKeys: string[];
23 | pathname: string;
24 | flatMenuKeysLen: number;
25 | }
26 |
27 | class SideBar extends PureComponent
9 |
21 |
22 |
24 |
25 |
34 |
35 |
36 |
38 |
39 |
48 |
49 |
50 |
52 |
53 |
55 |
56 |
57 |
59 |
60 |
62 |
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | const mapStateToProps = (state: any) => {
70 | return {
71 | total: state.dashboard.total,
72 | today: state.dashboard.today,
73 | loading: state.dashboard.loading,
74 | };
75 | };
76 |
77 | export default connect(mapStateToProps)(Dashboard);
78 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Loadable from 'react-loadable';
3 |
4 | import { Loading } from '../../components';
5 | import { registerModel } from '../../models';
6 |
7 | const Dashboard = Loadable.Map({
8 | loader: {
9 | Dashboard: () => import('./Dashboard'),
10 | model: () => import('./models/dashboard'),
11 | },
12 | loading: Loading,
13 | render(loaded: any, props: any) {
14 | const Dashboard = loaded.Dashboard.default;
15 | const model = loaded.model.default;
16 | registerModel(props.app, model);
17 |
18 | return (
19 |
25 | 
26 |
34 |
26 |
27 |
33 | 403
28 |抱歉，你无权访问该页面
29 | 30 | 31 | 32 |
25 | 
26 |
34 |
26 |
27 |
33 | 404
28 |抱歉，你访问的页面不存在
29 | 30 | 31 | 32 |
25 | 
26 |
34 |
26 |
27 |
33 | 500
28 |抱歉，服务器出错了
29 | 30 | 31 | 32 |
20 | {/* */}
47 |
69 | );
70 | };
71 |
72 | const mapStateToProps = ({ global, loading }: any) => {
73 | return {
74 | loading: loading.effects['global/login'],
75 | };
76 | };
77 |
78 | const mapDispatchToProps = (dispatch: any, ownProps: any) => {
79 | return {
80 | login: (params: object) => {
81 | dispatch({ type: 'global/login', payload: params });
82 | },
83 | };
84 | };
85 |
86 | export default connect(mapStateToProps, mapDispatchToProps)(Login);
87 |
--------------------------------------------------------------------------------
/src/pages/index.ts:
--------------------------------------------------------------------------------
1 | import { Dashboard } from './Dashboard';
2 | import { NoPermission, NotFound, ServerError } from './Exception';
3 |
4 | /************** Public Pages **************/
5 |
6 | export const PublicPages = { NoPermission, NotFound, ServerError };
7 |
8 | export default { Dashboard };
9 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
48 |
67 |
68 |