├── project
    ├── Exception
    │   ├── style.less
    │   ├── 403.js
    │   ├── 404.js
    │   ├── 500.js
    │   └── triggerException.js
    ├── Profile
    │   ├── BasicProfile.less
    │   ├── AdvancedProfile.less
    │   ├── BasicProfile.js
    │   └── AdvancedProfile.js
    ├── Result
    │   ├── Success.test.js
    │   ├── Error.js
    │   └── Success.js
    ├── User
    │   ├── RegisterResult.less
    │   ├── Login.less
    │   ├── Register.less
    │   ├── RegisterResult.js
    │   ├── Login.js
    │   └── Register.js
    ├── Dashboard
    │   ├── Monitor.less
    │   ├── Analysis.less
    │   ├── Workplace.less
    │   ├── Monitor.js
    │   ├── Workplace.js
    │   └── Analysis.js
    ├── List
    │   ├── TableList.less
    │   ├── Applications.less
    │   ├── Projects.less
    │   ├── Articles.less
    │   ├── List.js
    │   ├── CardList.less
    │   ├── CardList.js
    │   ├── BasicList.less
    │   ├── BasicList.js
    │   ├── Projects.js
    │   ├── Applications.js
    │   ├── Articles.js
    │   └── TableList.js
    ├── Pharmacopoeia
    │   ├── List.less
    │   └── List.js
    └── Forms
    │   ├── StepForm
    │       ├── style.less
    │       ├── index.js
    │       ├── Step3.js
    │       ├── Step2.js
    │       └── Step1.js
    │   ├── style.less
    │   ├── BasicForm.js
    │   ├── TableForm.js
    │   └── AdvancedForm.js
├── README.md
├── index.js
├── package.json
└── lib
    ├── simp2trad.js
    └── data.js


/project/Exception/style.less:
--------------------------------------------------------------------------------
1 | .trigger {
2 |   background: 'red';
3 |   :global(.ant-btn) {
4 |     margin-right: 8px;
5 |     margin-bottom: 12px;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/project/Profile/BasicProfile.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | 
3 | .title {
4 |   color: @heading-color;
5 |   font-size: 16px;
6 |   font-weight: 500;
7 |   margin-bottom: 16px;
8 | }
9 | 


--------------------------------------------------------------------------------
/project/Exception/403.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import Exception from 'components/Exception';
4 | 
5 | export default () => (
6 |   <Exception type="403" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
7 | );
8 | 


--------------------------------------------------------------------------------
/project/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 |   <Exception type="404" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
7 | );
8 | 


--------------------------------------------------------------------------------
/project/Exception/500.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import Exception from 'components/Exception';
4 | 
5 | export default () => (
6 |   <Exception type="500" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
7 | );
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Simp2trad
 2 | 
 3 | 一个简单工具将简体中文项目转换成繁体中文项目。
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | npm install -g simp2trad
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | ```bash
14 | simp2trad /path/to/project
15 | ```
16 | 
17 | ## Versioning
18 | 
19 | 1.0.0 Implemention.
20 | 
21 | 


--------------------------------------------------------------------------------
/project/Result/Success.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shallow } from 'enzyme';
 3 | import Success from './Success';
 4 | 
 5 | it('renders with Result', () => {
 6 |   const wrapper = shallow(<Success />);
 7 |   expect(wrapper.find('Result').length).toBe(1);
 8 |   expect(wrapper.find('Result').prop('type')).toBe('success');
 9 | });
10 | 


--------------------------------------------------------------------------------
/project/User/RegisterResult.less:
--------------------------------------------------------------------------------
 1 | .registerResult {
 2 |   :global {
 3 |     .anticon {
 4 |       font-size: 64px;
 5 |     }
 6 |   }
 7 |   .title {
 8 |     margin-top: 32px;
 9 |     font-size: 20px;
10 |     line-height: 28px;
11 |   }
12 |   .actions {
13 |     margin-top: 40px;
14 |     a + a {
15 |       margin-left: 8px;
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | #! /usr/bin/env node
 2 | 
 3 | const simp2trad = require('./lib/simp2trad')
 4 | const fs = require('fs')
 5 | 
 6 | if (process.argv.length !== 3){
 7 |     console.log('Usage: simp2trad <target root path>');
 8 |     process.exit();
 9 | }
10 | 
11 | var path = process.argv[2];
12 | if (!fs.existsSync(path)){
13 |     console.log('Path Not Exists.');
14 |     process.exit();
15 | }
16 | 
17 | var tool = new simp2trad(path);
18 | tool.start();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simp2trad",
 3 |   "version": "1.0.2",
 4 |   "description": "A tool for convert whole project's simplified chinese to traditional chinese.",
 5 |   "preferGlobal": true,
 6 |   "bin": {
 7 |     "simp2trad": "index.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/superhos/simp2trad.git"
12 |   },
13 |   "scripts": {
14 |     "test": "node index.js"
15 |   },
16 |   "author": "SevensChan",
17 |   "license": "MIT"
18 | }
19 | 


--------------------------------------------------------------------------------
/project/Dashboard/Monitor.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .mapChart {
 5 |   padding-top: 24px;
 6 |   height: 457px;
 7 |   text-align: center;
 8 |   img {
 9 |     display: inline-block;
10 |     max-width: 100%;
11 |     max-height: 437px;
12 |   }
13 | }
14 | 
15 | .pieCard :global(.pie-stat) {
16 |   font-size: 24px !important;
17 | }
18 | 
19 | @media screen and (max-width: @screen-lg) {
20 |   .mapChart {
21 |     height: auto;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/project/User/Login.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | 
 3 | .main {
 4 |   width: 368px;
 5 |   margin: 0 auto;
 6 |   @media screen and (max-width: @screen-sm) {
 7 |     width: 95%;
 8 |   }
 9 | 
10 |   .icon {
11 |     font-size: 24px;
12 |     color: rgba(0, 0, 0, 0.2);
13 |     margin-left: 16px;
14 |     vertical-align: middle;
15 |     cursor: pointer;
16 |     transition: color 0.3s;
17 | 
18 |     &:hover {
19 |       color: @primary-color;
20 |     }
21 |   }
22 | 
23 |   .other {
24 |     text-align: left;
25 |     margin-top: 24px;
26 |     line-height: 22px;
27 | 
28 |     .register {
29 |       float: right;
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/project/User/Register.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | 
 3 | .main {
 4 |   width: 368px;
 5 |   margin: 0 auto;
 6 | 
 7 |   :global {
 8 |     .ant-form-item {
 9 |       margin-bottom: 24px;
10 |     }
11 |   }
12 | 
13 |   h3 {
14 |     font-size: 16px;
15 |     margin-bottom: 20px;
16 |   }
17 | 
18 |   .getCaptcha {
19 |     display: block;
20 |     width: 100%;
21 |   }
22 | 
23 |   .submit {
24 |     width: 50%;
25 |   }
26 | 
27 |   .login {
28 |     float: right;
29 |     line-height: @btn-height-lg;
30 |   }
31 | }
32 | 
33 | .success,
34 | .warning,
35 | .error {
36 |   transition: color 0.3s;
37 | }
38 | 
39 | .success {
40 |   color: @success-color;
41 | }
42 | 
43 | .warning {
44 |   color: @warning-color;
45 | }
46 | 
47 | .error {
48 |   color: @error-color;
49 | }
50 | 
51 | .progress-pass > .progress {
52 |   :global {
53 |     .ant-progress-bg {
54 |       background-color: @warning-color;
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/project/Profile/AdvancedProfile.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | 
 3 | .headerList {
 4 |   margin-bottom: 4px;
 5 | }
 6 | 
 7 | .tabsCard {
 8 |   :global {
 9 |     .ant-card-head {
10 |       padding: 0 16px;
11 |     }
12 |   }
13 | }
14 | 
15 | .noData {
16 |   color: @disabled-color;
17 |   text-align: center;
18 |   line-height: 64px;
19 |   font-size: 16px;
20 |   i {
21 |     font-size: 24px;
22 |     margin-right: 16px;
23 |     position: relative;
24 |     top: 3px;
25 |   }
26 | }
27 | 
28 | .heading {
29 |   color: @heading-color;
30 |   font-size: 20px;
31 | }
32 | 
33 | .stepDescription {
34 |   font-size: 14px;
35 |   position: relative;
36 |   left: 38px;
37 |   & > div {
38 |     margin-top: 8px;
39 |     margin-bottom: 4px;
40 |   }
41 | }
42 | 
43 | .textSecondary {
44 |   color: @text-color-secondary;
45 | }
46 | 
47 | @media screen and (max-width: @screen-sm) {
48 |   .stepDescription {
49 |     left: 8px;
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/project/User/RegisterResult.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'antd';
 3 | import { Link } from 'dva/router';
 4 | import Result from 'components/Result';
 5 | import styles from './RegisterResult.less';
 6 | 
 7 | const actions = (
 8 |   <div className={styles.actions}>
 9 |     <a href="">
10 |       <Button size="large" type="primary">
11 |         查看郵箱
12 |       </Button>
13 |     </a>
14 |     <Link to="/">
15 |       <Button size="large">返回首頁</Button>
16 |     </Link>
17 |   </div>
18 | );
19 | 
20 | export default ({ location }) => (
21 |   <Result
22 |     className={styles.registerResult}
23 |     type="success"
24 |     title={
25 |       <div className={styles.title}>
26 |         妳的賬戶：{location.state ? location.state.account : 'AntDesign@example.com'} 註冊成功
27 |       </div>
28 |     }
29 |     description="激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。"
30 |     actions={actions}
31 |     style={{ marginTop: 56 }}
32 |   />
33 | );
34 | 


--------------------------------------------------------------------------------
/project/List/TableList.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .tableList {
 5 |   .tableListOperator {
 6 |     margin-bottom: 16px;
 7 |     button {
 8 |       margin-right: 8px;
 9 |     }
10 |   }
11 | }
12 | 
13 | .tableListForm {
14 |   :global {
15 |     .ant-form-item {
16 |       margin-bottom: 24px;
17 |       margin-right: 0;
18 |       display: flex;
19 |       > .ant-form-item-label {
20 |         width: auto;
21 |         line-height: 32px;
22 |         padding-right: 8px;
23 |       }
24 |       .ant-form-item-control {
25 |         line-height: 32px;
26 |       }
27 |     }
28 |     .ant-form-item-control-wrapper {
29 |       flex: 1;
30 |     }
31 |   }
32 |   .submitButtons {
33 |     white-space: nowrap;
34 |     margin-bottom: 24px;
35 |   }
36 | }
37 | 
38 | @media screen and (max-width: @screen-lg) {
39 |   .tableListForm :global(.ant-form-item) {
40 |     margin-right: 24px;
41 |   }
42 | }
43 | 
44 | @media screen and (max-width: @screen-md) {
45 |   .tableListForm :global(.ant-form-item) {
46 |     margin-right: 8px;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/project/Pharmacopoeia/List.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .tableList {
 5 |   .tableListOperator {
 6 |     margin-bottom: 16px;
 7 |     button {
 8 |       margin-right: 8px;
 9 |     }
10 |   }
11 | }
12 | 
13 | .tableListForm {
14 |   :global {
15 |     .ant-form-item {
16 |       margin-bottom: 24px;
17 |       margin-right: 0;
18 |       display: flex;
19 |       > .ant-form-item-label {
20 |         width: auto;
21 |         line-height: 32px;
22 |         padding-right: 8px;
23 |       }
24 |       .ant-form-item-control {
25 |         line-height: 32px;
26 |       }
27 |     }
28 |     .ant-form-item-control-wrapper {
29 |       flex: 1;
30 |     }
31 |   }
32 |   .submitButtons {
33 |     white-space: nowrap;
34 |     margin-bottom: 24px;
35 |   }
36 | }
37 | 
38 | @media screen and (max-width: @screen-lg) {
39 |   .tableListForm :global(.ant-form-item) {
40 |     margin-right: 24px;
41 |   }
42 | }
43 | 
44 | @media screen and (max-width: @screen-md) {
45 |   .tableListForm :global(.ant-form-item) {
46 |     margin-right: 8px;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/project/List/Applications.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .filterCardList {
 5 |   margin-bottom: -24px;
 6 |   :global {
 7 |     .ant-card-meta-content {
 8 |       margin-top: 0;
 9 |     }
10 |     // disabled white space
11 |     .ant-card-meta-avatar {
12 |       font-size: 0;
13 |     }
14 |     .ant-card-actions {
15 |       background: #f7f9fa;
16 |     }
17 |     .ant-list .ant-list-item-content-single {
18 |       max-width: 100%;
19 |     }
20 |   }
21 |   .cardInfo {
22 |     .clearfix();
23 |     margin-top: 16px;
24 |     margin-left: 40px;
25 |     & > div {
26 |       position: relative;
27 |       text-align: left;
28 |       float: left;
29 |       width: 50%;
30 |       p {
31 |         line-height: 32px;
32 |         font-size: 24px;
33 |         margin: 0;
34 |       }
35 |       p:first-child {
36 |         color: @text-color-secondary;
37 |         font-size: 12px;
38 |         line-height: 20px;
39 |         margin-bottom: 4px;
40 |       }
41 |     }
42 |   }
43 | }
44 | 
45 | .wan {
46 |   position: relative;
47 |   top: -2px;
48 |   font-size: @font-size-base;
49 |   font-style: normal;
50 |   line-height: 20px;
51 |   margin-left: 2px;
52 | }
53 | 


--------------------------------------------------------------------------------
/project/List/Projects.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .coverCardList {
 5 |   margin-bottom: -24px;
 6 | 
 7 |   .card {
 8 |     :global {
 9 |       .ant-card-meta-title {
10 |         margin-bottom: 4px;
11 |         & > a {
12 |           color: @heading-color;
13 |           display: inline-block;
14 |           max-width: 100%;
15 |         }
16 |       }
17 |       .ant-card-meta-description {
18 |         height: 44px;
19 |         line-height: 22px;
20 |         overflow: hidden;
21 |       }
22 |     }
23 | 
24 |     &:hover {
25 |       :global {
26 |         .ant-card-meta-title > a {
27 |           color: @primary-color;
28 |         }
29 |       }
30 |     }
31 |   }
32 | 
33 |   .cardItemContent {
34 |     display: flex;
35 |     margin-top: 16px;
36 |     margin-bottom: -4px;
37 |     line-height: 20px;
38 |     height: 20px;
39 |     & > span {
40 |       color: @text-color-secondary;
41 |       flex: 1;
42 |       font-size: 12px;
43 |     }
44 |     .avatarList {
45 |       flex: 0 1 auto;
46 |     }
47 |   }
48 |   .cardList {
49 |     margin-top: 24px;
50 |   }
51 | 
52 |   :global {
53 |     .ant-list .ant-list-item-content-single {
54 |       max-width: 100%;
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/project/Exception/triggerException.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import { Button, Spin, Card } from 'antd';
 3 | import { connect } from 'dva';
 4 | import styles from './style.less';
 5 | 
 6 | @connect(state => ({
 7 |   isloading: state.error.isloading,
 8 | }))
 9 | export default class TriggerException extends PureComponent {
10 |   state = {
11 |     isloading: false,
12 |   };
13 |   triggerError = code => {
14 |     this.setState({
15 |       isloading: true,
16 |     });
17 |     this.props.dispatch({
18 |       type: 'error/query',
19 |       payload: {
20 |         code,
21 |       },
22 |     });
23 |   };
24 |   render() {
25 |     return (
26 |       <Card>
27 |         <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
28 |           <Button type="danger" onClick={() => this.triggerError(401)}>
29 |             觸發401
30 |           </Button>
31 |           <Button type="danger" onClick={() => this.triggerError(403)}>
32 |             觸發403
33 |           </Button>
34 |           <Button type="danger" onClick={() => this.triggerError(500)}>
35 |             觸發500
36 |           </Button>
37 |           <Button type="danger" onClick={() => this.triggerError(404)}>
38 |             觸發404
39 |           </Button>
40 |         </Spin>
41 |       </Card>
42 |     );
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/project/List/Articles.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | @import '../../utils/utils.less';
 3 | 
 4 | .listContent {
 5 |   .description {
 6 |     line-height: 22px;
 7 |     max-width: 720px;
 8 |   }
 9 |   .extra {
10 |     color: @text-color-secondary;
11 |     margin-top: 16px;
12 |     line-height: 22px;
13 |     & > :global(.ant-avatar) {
14 |       vertical-align: top;
15 |       margin-right: 8px;
16 |       width: 20px;
17 |       height: 20px;
18 |       position: relative;
19 |       top: 1px;
20 |     }
21 |     & > em {
22 |       color: @disabled-color;
23 |       font-style: normal;
24 |       margin-left: 16px;
25 |     }
26 |   }
27 | }
28 | a.listItemMetaTitle {
29 |   color: @heading-color;
30 | }
31 | .listItemExtra {
32 |   width: 272px;
33 |   height: 1px;
34 | }
35 | .selfTrigger {
36 |   margin-left: 12px;
37 | }
38 | 
39 | @media screen and (max-width: @screen-xs) {
40 |   .selfTrigger {
41 |     display: block;
42 |     margin-left: 0;
43 |   }
44 |   .listContent {
45 |     .extra {
46 |       & > em {
47 |         display: block;
48 |         margin-left: 0;
49 |         margin-top: 8px;
50 |       }
51 |     }
52 |   }
53 | }
54 | @media screen and (max-width: @screen-md) {
55 |   .selfTrigger {
56 |     display: block;
57 |     margin-left: 0;
58 |   }
59 | }
60 | @media screen and (max-width: @screen-lg) {
61 |   .listItemExtra {
62 |     width: 0;
63 |     height: 1px;
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/project/Result/Error.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Button, Icon, Card } from 'antd';
 3 | import Result from 'components/Result';
 4 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 5 | 
 6 | const extra = (
 7 |   <Fragment>
 8 |     <div
 9 |       style={{
10 |         fontSize: 16,
11 |         color: 'rgba(0, 0, 0, 0.85)',
12 |         fontWeight: '500',
13 |         marginBottom: 16,
14 |       }}
15 |     >
16 |       您提交的內容有如下錯誤：
17 |     </div>
18 |     <div style={{ marginBottom: 16 }}>
19 |       <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的賬戶已被凍結
20 |       <a style={{ marginLeft: 16 }}>
21 |         立即解凍 <Icon type="right" />
22 |       </a>
23 |     </div>
24 |     <div>
25 |       <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的賬戶還不具備申請資格
26 |       <a style={{ marginLeft: 16 }}>
27 |         立即升級 <Icon type="right" />
28 |       </a>
29 |     </div>
30 |   </Fragment>
31 | );
32 | 
33 | const actions = <Button type="primary">返回修改</Button>;
34 | 
35 | export default () => (
36 |   <PageHeaderLayout>
37 |     <Card bordered={false}>
38 |       <Result
39 |         type="error"
40 |         title="提交失敗"
41 |         description="請核對並修改以下信息後，再重新提交。"
42 |         extra={extra}
43 |         actions={actions}
44 |         style={{ marginTop: 48, marginBottom: 16 }}
45 |       />
46 |     </Card>
47 |   </PageHeaderLayout>
48 | );
49 | 


--------------------------------------------------------------------------------
/project/Forms/StepForm/style.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | 
 3 | .stepForm {
 4 |   margin: 40px auto 0;
 5 |   max-width: 500px;
 6 | }
 7 | 
 8 | .stepFormText {
 9 |   margin-bottom: 24px;
10 |   :global {
11 |     .ant-form-item-label,
12 |     .ant-form-item-control {
13 |       line-height: 22px;
14 |     }
15 |   }
16 | }
17 | 
18 | .result {
19 |   margin: 0 auto;
20 |   max-width: 560px;
21 |   padding: 24px 0 8px;
22 | }
23 | 
24 | .desc {
25 |   padding: 0 56px;
26 |   color: @text-color-secondary;
27 |   h3 {
28 |     font-size: 16px;
29 |     margin: 0 0 12px 0;
30 |     color: @text-color-secondary;
31 |     line-height: 32px;
32 |   }
33 |   h4 {
34 |     margin: 0 0 4px 0;
35 |     color: @text-color-secondary;
36 |     font-size: 14px;
37 |     line-height: 22px;
38 |   }
39 |   p {
40 |     margin-top: 0;
41 |     margin-bottom: 12px;
42 |     line-height: 22px;
43 |   }
44 | }
45 | 
46 | @media screen and (max-width: @screen-md) {
47 |   .desc {
48 |     padding: 0;
49 |   }
50 | }
51 | 
52 | .information {
53 |   line-height: 22px;
54 |   :global {
55 |     .ant-row:not(:last-child) {
56 |       margin-bottom: 24px;
57 |     }
58 |   }
59 |   .label {
60 |     color: @heading-color;
61 |     text-align: right;
62 |     padding-right: 8px;
63 |     @media screen and (max-width: @screen-sm) {
64 |       text-align: left;
65 |     }
66 |   }
67 | }
68 | 
69 | .money {
70 |   font-family: 'Helvetica Neue', sans-serif;
71 |   font-weight: 500;
72 |   font-size: 20px;
73 |   line-height: 14px;
74 | }
75 | 
76 | .uppercase {
77 |   font-size: 12px;
78 | }
79 | 


--------------------------------------------------------------------------------
/project/Forms/style.less:
--------------------------------------------------------------------------------
 1 | @import '~antd/lib/style/themes/default.less';
 2 | 
 3 | .card {
 4 |   margin-bottom: 24px;
 5 | }
 6 | 
 7 | .heading {
 8 |   font-size: 14px;
 9 |   line-height: 22px;
10 |   margin: 0 0 16px 0;
11 | }
12 | 
13 | .steps:global(.ant-steps) {
14 |   max-width: 750px;
15 |   margin: 16px auto;
16 | }
17 | 
18 | .errorIcon {
19 |   cursor: pointer;
20 |   color: @error-color;
21 |   margin-right: 24px;
22 |   i {
23 |     margin-right: 4px;
24 |   }
25 | }
26 | 
27 | .errorPopover {
28 |   :global {
29 |     .ant-popover-inner-content {
30 |       padding: 0;
31 |       max-height: 290px;
32 |       overflow: auto;
33 |       min-width: 256px;
34 |     }
35 |   }
36 | }
37 | 
38 | .errorListItem {
39 |   list-style: none;
40 |   border-bottom: 1px solid @border-color-split;
41 |   padding: 8px 16px;
42 |   cursor: pointer;
43 |   transition: all 0.3s;
44 |   &:hover {
45 |     background: @primary-1;
46 |   }
47 |   &:last-child {
48 |     border: 0;
49 |   }
50 |   .errorIcon {
51 |     color: @error-color;
52 |     float: left;
53 |     margin-top: 4px;
54 |     margin-right: 12px;
55 |     padding-bottom: 22px;
56 |   }
57 |   .errorField {
58 |     font-size: 12px;
59 |     color: @text-color-secondary;
60 |     margin-top: 2px;
61 |   }
62 | }
63 | 
64 | .editable {
65 |   td {
66 |     padding-top: 13px !important;
67 |     padding-bottom: 12.5px !important;
68 |   }
69 | }
70 | 
71 | // custom footer for fixed footer toolbar
72 | .advancedForm + div {
73 |   padding-bottom: 64px;
74 | }
75 | 
76 | .advancedForm {
77 |   :global {
78 |     .ant-form .ant-row:last-child .ant-form-item {
79 |       margin-bottom: 24px;
80 |     }
81 |     .ant-table td {
82 |       transition: none !important;
83 |     }
84 |   }
85 | }
86 | 
87 | .optional {
88 |   color: @text-color-secondary;
89 |   font-style: normal;
90 | }
91 | 


--------------------------------------------------------------------------------
/project/Forms/StepForm/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent, Fragment } from 'react';
 2 | import { Route, Redirect, Switch } from 'dva/router';
 3 | import { Card, Steps } from 'antd';
 4 | import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 5 | import NotFound from '../../Exception/404';
 6 | import { getRoutes } from '../../../utils/utils';
 7 | import styles from '../style.less';
 8 | 
 9 | const { Step } = Steps;
10 | 
11 | export default class StepForm extends PureComponent {
12 |   getCurrentStep() {
13 |     const { location } = this.props;
14 |     const { pathname } = location;
15 |     const pathList = pathname.split('/');
16 |     switch (pathList[pathList.length - 1]) {
17 |       case 'info':
18 |         return 0;
19 |       case 'confirm':
20 |         return 1;
21 |       case 'result':
22 |         return 2;
23 |       default:
24 |         return 0;
25 |     }
26 |   }
27 |   render() {
28 |     const { match, routerData, location } = this.props;
29 |     return (
30 |       <PageHeaderLayout
31 |         title="分步表單"
32 |         tabActiveKey={location.pathname}
33 |         content="將壹個冗長或用戶不熟悉的表單任務分成多個步驟，指導用戶完成。"
34 |       >
35 |         <Card bordered={false}>
36 |           <Fragment>
37 |             <Steps current={this.getCurrentStep()} className={styles.steps}>
38 |               <Step title="填寫轉賬信息" />
39 |               <Step title="確認轉賬信息" />
40 |               <Step title="完成" />
41 |             </Steps>
42 |             <Switch>
43 |               {getRoutes(match.path, routerData).map(item => (
44 |                 <Route
45 |                   key={item.key}
46 |                   path={item.path}
47 |                   component={item.component}
48 |                   exact={item.exact}
49 |                 />
50 |               ))}
51 |               <Redirect exact from="/form/step-form" to="/form/step-form/info" />
52 |               <Route render={NotFound} />
53 |             </Switch>
54 |           </Fragment>
55 |         </Card>
56 |       </PageHeaderLayout>
57 |     );
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/project/Forms/StepForm/Step3.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { connect } from 'dva';
 3 | import { Button, Row, Col } from 'antd';
 4 | import { routerRedux } from 'dva/router';
 5 | import Result from 'components/Result';
 6 | import styles from './style.less';
 7 | 
 8 | class Step3 extends React.PureComponent {
 9 |   render() {
10 |     const { dispatch, data } = this.props;
11 |     const onFinish = () => {
12 |       dispatch(routerRedux.push('/form/step-form'));
13 |     };
14 |     const information = (
15 |       <div className={styles.information}>
16 |         <Row>
17 |           <Col xs={24} sm={8} className={styles.label}>
18 |             付款賬戶：
19 |           </Col>
20 |           <Col xs={24} sm={16}>
21 |             {data.payAccount}
22 |           </Col>
23 |         </Row>
24 |         <Row>
25 |           <Col xs={24} sm={8} className={styles.label}>
26 |             收款賬戶：
27 |           </Col>
28 |           <Col xs={24} sm={16}>
29 |             {data.receiverAccount}
30 |           </Col>
31 |         </Row>
32 |         <Row>
33 |           <Col xs={24} sm={8} className={styles.label}>
34 |             收款人姓名：
35 |           </Col>
36 |           <Col xs={24} sm={16}>
37 |             {data.receiverName}
38 |           </Col>
39 |         </Row>
40 |         <Row>
41 |           <Col xs={24} sm={8} className={styles.label}>
42 |             轉賬金額：
43 |           </Col>
44 |           <Col xs={24} sm={16}>
45 |             <span className={styles.money}>{data.amount}</span> 元
46 |           </Col>
47 |         </Row>
48 |       </div>
49 |     );
50 |     const actions = (
51 |       <Fragment>
52 |         <Button type="primary" onClick={onFinish}>
53 |           再轉壹筆
54 |         </Button>
55 |         <Button>查看賬單</Button>
56 |       </Fragment>
57 |     );
58 |     return (
59 |       <Result
60 |         type="success"
61 |         title="操作成功"
62 |         description="預計兩小時內到賬"
63 |         extra={information}
64 |         actions={actions}
65 |         className={styles.result}
66 |       />
67 |     );
68 |   }
69 | }
70 | 
71 | export default connect(({ form }) => ({
72 |   data: form.step,
73 | }))(Step3);
74 | 


--------------------------------------------------------------------------------
/project/List/List.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { routerRedux, Route, Switch } from 'dva/router';
 3 | import { connect } from 'dva';
 4 | import { Input } from 'antd';
 5 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 6 | import { getRoutes } from '../../utils/utils';
 7 | 
 8 | @connect()
 9 | export default class SearchList extends Component {
10 |   handleTabChange = key => {
11 |     const { dispatch, match } = this.props;
12 |     switch (key) {
13 |       case 'articles':
14 |         dispatch(routerRedux.push(`${match.url}/articles`));
15 |         break;
16 |       case 'applications':
17 |         dispatch(routerRedux.push(`${match.url}/applications`));
18 |         break;
19 |       case 'projects':
20 |         dispatch(routerRedux.push(`${match.url}/projects`));
21 |         break;
22 |       default:
23 |         break;
24 |     }
25 |   };
26 | 
27 |   render() {
28 |     const tabList = [
29 |       {
30 |         key: 'articles',
31 |         tab: '文章',
32 |       },
33 |       {
34 |         key: 'applications',
35 |         tab: '應用',
36 |       },
37 |       {
38 |         key: 'projects',
39 |         tab: '項目',
40 |       },
41 |     ];
42 | 
43 |     const mainSearch = (
44 |       <div style={{ textAlign: 'center' }}>
45 |         <Input.Search
46 |           placeholder="請輸入"
47 |           enterButton="搜索"
48 |           size="large"
49 |           onSearch={this.handleFormSubmit}
50 |           style={{ width: 522 }}
51 |         />
52 |       </div>
53 |     );
54 | 
55 |     const { match, routerData, location } = this.props;
56 |     const routes = getRoutes(match.path, routerData);
57 | 
58 |     return (
59 |       <PageHeaderLayout
60 |         title="搜索列表"
61 |         content={mainSearch}
62 |         tabList={tabList}
63 |         tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
64 |         onTabChange={this.handleTabChange}
65 |       >
66 |         <Switch>
67 |           {routes.map(item => (
68 |             <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
69 |           ))}
70 |         </Switch>
71 |       </PageHeaderLayout>
72 |     );
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/lib/simp2trad.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 將項目中的所有簡體轉成繁體
 3 |  */
 4 | const fs = require('fs');
 5 | const simpChar = require('./data.js').simpChar;
 6 | const tradChar = require('./data.js').tradChar;
 7 | 
 8 | var simp2trad = function(path){
 9 |     this.path = path;
10 | }
11 | 
12 | simp2trad.prototype = {
13 |     start: async function(){
14 |         //Get all files
15 |         var files = await this.getFiles();
16 |         var _this = this;
17 |         files.forEach(function(path){
18 |             console.log('Translating: ' + path);
19 |             _this.scanFile(path);
20 |         })
21 | 
22 |         console.log('Translate successfully ('+files.length+' files have been traslated). ')
23 |     },
24 |     scanFile: function(path){
25 |         var content = fs.readFileSync(path).toString();
26 |         //获取中文
27 |         var chinese = content.match(/[\u4e00-\u9fa5]/g);
28 |         if (chinese){
29 |             for (var item in chinese) {
30 |                 var str = '';
31 |                 if (simpChar().indexOf(chinese[item]) != -1) {
32 |                     str = tradChar().charAt(simpChar().indexOf(chinese[item]));
33 |                     content = content.replace(chinese[item],str);
34 |                 }
35 |             }
36 | 
37 |            this.writeFile(path,content);
38 |         }
39 |     },
40 |     writeFile: function(path,content){
41 |         fs.writeFileSync(path,content);
42 |     },
43 |     getFiles: function (){
44 |         var _this = this;
45 |         var fileList = [];
46 |         return new Promise(function(resolve,reject){
47 |             var fileQueue = [];
48 |             fileQueue.push(_this.path);
49 |             while(fileQueue.length > 0){
50 |                 var cur = fileQueue.shift();
51 |                 var pa = fs.readdirSync(cur); 
52 |                 pa.forEach(function(ele,index){  
53 |                     var info = fs.statSync(cur+"/"+ele)      
54 |                     if(info.isDirectory()){  
55 |                         fileQueue.push(cur+"/"+ele);
56 |                     }else{  
57 |                         fileList.push(cur + "/" + ele);
58 |                     }     
59 |                 })  
60 |             }
61 |             resolve(fileList);
62 |         })
63 |     }
64 | }
65 | 
66 | // var tool = new simp2trad(path);
67 | // tool.start();
68 | 
69 | module.exports = simp2trad;


--------------------------------------------------------------------------------
/project/List/CardList.less:
--------------------------------------------------------------------------------
  1 | @import '~antd/lib/style/themes/default.less';
  2 | @import '../../utils/utils.less';
  3 | 
  4 | .cardList {
  5 |   margin-bottom: -24px;
  6 | 
  7 |   .card {
  8 |     :global {
  9 |       .ant-card-meta-title {
 10 |         margin-bottom: 12px;
 11 |         & > a {
 12 |           color: @heading-color;
 13 |           display: inline-block;
 14 |           max-width: 100%;
 15 |         }
 16 |       }
 17 |       .ant-card-actions {
 18 |         background: #f7f9fa;
 19 |       }
 20 |       .ant-card-body:hover {
 21 |         .ant-card-meta-title > a {
 22 |           color: @primary-color;
 23 |         }
 24 |       }
 25 |     }
 26 |   }
 27 |   .item {
 28 |     height: 64px;
 29 |   }
 30 | 
 31 |   :global {
 32 |     .ant-list .ant-list-item-content-single {
 33 |       max-width: 100%;
 34 |     }
 35 |   }
 36 | }
 37 | 
 38 | .extraImg {
 39 |   margin-top: -60px;
 40 |   text-align: center;
 41 |   width: 195px;
 42 |   img {
 43 |     width: 100%;
 44 |   }
 45 | }
 46 | 
 47 | .newButton {
 48 |   background-color: #fff;
 49 |   border-color: @border-color-base;
 50 |   border-radius: @border-radius-sm;
 51 |   color: @text-color-secondary;
 52 |   width: 100%;
 53 |   height: 188px;
 54 | }
 55 | 
 56 | .cardAvatar {
 57 |   width: 48px;
 58 |   height: 48px;
 59 |   border-radius: 48px;
 60 | }
 61 | 
 62 | .cardDescription {
 63 |   .textOverflowMulti();
 64 | }
 65 | 
 66 | .pageHeaderContent {
 67 |   position: relative;
 68 | }
 69 | 
 70 | .contentLink {
 71 |   margin-top: 16px;
 72 |   a {
 73 |     margin-right: 32px;
 74 |     img {
 75 |       width: 24px;
 76 |     }
 77 |   }
 78 |   img {
 79 |     vertical-align: middle;
 80 |     margin-right: 8px;
 81 |   }
 82 | }
 83 | 
 84 | @media screen and (max-width: @screen-lg) {
 85 |   .contentLink {
 86 |     a {
 87 |       margin-right: 16px;
 88 |     }
 89 |   }
 90 | }
 91 | @media screen and (max-width: @screen-md) {
 92 |   .extraImg {
 93 |     display: none;
 94 |   }
 95 | }
 96 | 
 97 | @media screen and (max-width: @screen-sm) {
 98 |   .pageHeaderContent {
 99 |     padding-bottom: 30px;
100 |   }
101 |   .contentLink {
102 |     position: absolute;
103 |     left: 0;
104 |     bottom: -4px;
105 |     width: 1000px;
106 |     a {
107 |       margin-right: 16px;
108 |     }
109 |     img {
110 |       margin-right: 4px;
111 |     }
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/project/Result/Success.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Button, Row, Col, Icon, Steps, Card } from 'antd';
 3 | import Result from 'components/Result';
 4 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 5 | 
 6 | const { Step } = Steps;
 7 | 
 8 | const desc1 = (
 9 |   <div
10 |     style={{
11 |       fontSize: 12,
12 |       color: 'rgba(0, 0, 0, 0.45)',
13 |       position: 'relative',
14 |       left: 42,
15 |     }}
16 |   >
17 |     <div style={{ margin: '8px 0 4px' }}>
18 |       曲麗麗<Icon style={{ marginLeft: 8 }} type="dingding-o" />
19 |     </div>
20 |     <div>2016-12-12 12:32</div>
21 |   </div>
22 | );
23 | 
24 | const desc2 = (
25 |   <div style={{ fontSize: 12, position: 'relative', left: 42 }}>
26 |     <div style={{ margin: '8px 0 4px' }}>
27 |       週毛毛<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
28 |     </div>
29 |     <div>
30 |       <a href="">催壹下</a>
31 |     </div>
32 |   </div>
33 | );
34 | 
35 | const extra = (
36 |   <Fragment>
37 |     <div
38 |       style={{
39 |         fontSize: 16,
40 |         color: 'rgba(0, 0, 0, 0.85)',
41 |         fontWeight: '500',
42 |         marginBottom: 20,
43 |       }}
44 |     >
45 |       項目名稱
46 |     </div>
47 |     <Row style={{ marginBottom: 16 }}>
48 |       <Col xs={24} sm={12} md={12} lg={12} xl={6}>
49 |         <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>項目 ID：</span>
50 |         23421
51 |       </Col>
52 |       <Col xs={24} sm={12} md={12} lg={12} xl={6}>
53 |         <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>負責人：</span>
54 |         曲麗麗
55 |       </Col>
56 |       <Col xs={24} sm={24} md={24} lg={24} xl={12}>
57 |         <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效時間：</span>
58 |         2016-12-12 ~ 2017-12-12
59 |       </Col>
60 |     </Row>
61 |     <Steps style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}>
62 |       <Step title={<span style={{ fontSize: 14 }}>創建項目</span>} description={desc1} />
63 |       <Step title={<span style={{ fontSize: 14 }}>部門初審</span>} description={desc2} />
64 |       <Step title={<span style={{ fontSize: 14 }}>財務復核</span>} />
65 |       <Step title={<span style={{ fontSize: 14 }}>完成</span>} />
66 |     </Steps>
67 |   </Fragment>
68 | );
69 | 
70 | const actions = (
71 |   <Fragment>
72 |     <Button type="primary">返回列表</Button>
73 |     <Button>查看項目</Button>
74 |     <Button>打 印</Button>
75 |   </Fragment>
76 | );
77 | 
78 | export default () => (
79 |   <PageHeaderLayout>
80 |     <Card bordered={false}>
81 |       <Result
82 |         type="success"
83 |         title="提交成功"
84 |         description="提交結果頁用於反饋壹系列操作任務的處理結果，
85 |         如果僅是簡單操作，使用 Message 全局提示反饋即可。
86 |         本文字區域可以展示簡單的補充說明，如果有類似展示
87 |         “單據”的需求，下面這個灰色區域可以呈現比較復雜的內容。"
88 |         extra={extra}
89 |         actions={actions}
90 |         style={{ marginTop: 48, marginBottom: 16 }}
91 |       />
92 |     </Card>
93 |   </PageHeaderLayout>
94 | );
95 | 


--------------------------------------------------------------------------------
/project/User/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { connect } from 'dva';
 3 | import { Link } from 'dva/router';
 4 | import { Checkbox, Alert, Icon } from 'antd';
 5 | import Login from 'components/Login';
 6 | import styles from './Login.less';
 7 | 
 8 | const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
 9 | 
10 | @connect(({ login, loading }) => ({
11 |   login,
12 |   submitting: loading.effects['login/login'],
13 | }))
14 | export default class LoginPage extends Component {
15 |   state = {
16 |     type: 'account',
17 |     autoLogin: true,
18 |   };
19 | 
20 |   onTabChange = type => {
21 |     this.setState({ type });
22 |   };
23 | 
24 |   handleSubmit = (err, values) => {
25 |     const { type } = this.state;
26 |     if (!err) {
27 |       this.props.dispatch({
28 |         type: 'login/login',
29 |         payload: {
30 |           ...values,
31 |           type,
32 |         },
33 |       });
34 |     }
35 |   };
36 | 
37 |   changeAutoLogin = e => {
38 |     this.setState({
39 |       autoLogin: e.target.checked,
40 |     });
41 |   };
42 | 
43 |   renderMessage = content => {
44 |     return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
45 |   };
46 | 
47 |   render() {
48 |     const { login, submitting } = this.props;
49 |     const { type } = this.state;
50 |     return (
51 |       <div className={styles.main}>
52 |         <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
53 |           <Tab key="account" tab="賬戶密碼登錄">
54 |             {login.status === 'error' &&
55 |               login.type === 'account' &&
56 |               !submitting &&
57 |               this.renderMessage('賬戶或密碼錯誤（admin/888888）')}
58 |             <UserName name="userName" placeholder="admin/user" />
59 |             <Password name="password" placeholder="888888/123456" />
60 |           </Tab>
61 |           <Tab key="mobile" tab="手機號登錄">
62 |             {login.status === 'error' &&
63 |               login.type === 'mobile' &&
64 |               !submitting &&
65 |               this.renderMessage('驗證碼錯誤')}
66 |             <Mobile name="mobile" />
67 |             <Captcha name="captcha" />
68 |           </Tab>
69 |           <div>
70 |             <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
71 |               自動登錄
72 |             </Checkbox>
73 |             <a style={{ float: 'right' }} href="">
74 |               忘記密碼
75 |             </a>
76 |           </div>
77 |           <Submit loading={submitting}>登錄</Submit>
78 |           <div className={styles.other}>
79 |             其他登錄方式
80 |             <Icon className={styles.icon} type="alipay-circle" />
81 |             <Icon className={styles.icon} type="taobao-circle" />
82 |             <Icon className={styles.icon} type="weibo-circle" />
83 |             <Link className={styles.register} to="/user/register">
84 |               註冊賬戶
85 |             </Link>
86 |           </div>
87 |         </Login>
88 |       </div>
89 |     );
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/project/List/CardList.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import { connect } from 'dva';
 3 | import { Card, Button, Icon, List } from 'antd';
 4 | 
 5 | import Ellipsis from 'components/Ellipsis';
 6 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 7 | 
 8 | import styles from './CardList.less';
 9 | 
10 | @connect(({ list, loading }) => ({
11 |   list,
12 |   loading: loading.models.list,
13 | }))
14 | export default class CardList extends PureComponent {
15 |   componentDidMount() {
16 |     this.props.dispatch({
17 |       type: 'list/fetch',
18 |       payload: {
19 |         count: 8,
20 |       },
21 |     });
22 |   }
23 | 
24 |   render() {
25 |     const { list: { list }, loading } = this.props;
26 | 
27 |     const content = (
28 |       <div className={styles.pageHeaderContent}>
29 |         <p>
30 |           段落示意：螞蟻金服務設計平臺 ant.design，用最小的工作量，無縫接入螞蟻金服生態，
31 |           提供跨越設計與開發的體驗解決方案。
32 |         </p>
33 |         <div className={styles.contentLink}>
34 |           <a>
35 |             <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
36 |             快速開始
37 |           </a>
38 |           <a>
39 |             <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
40 |             產品簡介
41 |           </a>
42 |           <a>
43 |             <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
44 |             產品文檔
45 |           </a>
46 |         </div>
47 |       </div>
48 |     );
49 | 
50 |     const extraContent = (
51 |       <div className={styles.extraImg}>
52 |         <img
53 |           alt="這是壹個標題"
54 |           src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
55 |         />
56 |       </div>
57 |     );
58 | 
59 |     return (
60 |       <PageHeaderLayout title="卡片列表" content={content} extraContent={extraContent}>
61 |         <div className={styles.cardList}>
62 |           <List
63 |             rowKey="id"
64 |             loading={loading}
65 |             grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
66 |             dataSource={['', ...list]}
67 |             renderItem={item =>
68 |               item ? (
69 |                 <List.Item key={item.id}>
70 |                   <Card hoverable className={styles.card} actions={[<a>操作壹</a>, <a>操作二</a>]}>
71 |                     <Card.Meta
72 |                       avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
73 |                       title={<a href="#">{item.title}</a>}
74 |                       description={
75 |                         <Ellipsis className={styles.item} lines={3}>
76 |                           {item.description}
77 |                         </Ellipsis>
78 |                       }
79 |                     />
80 |                   </Card>
81 |                 </List.Item>
82 |               ) : (
83 |                 <List.Item>
84 |                   <Button type="dashed" className={styles.newButton}>
85 |                     <Icon type="plus" /> 新增產品
86 |                   </Button>
87 |                 </List.Item>
88 |               )
89 |             }
90 |           />
91 |         </div>
92 |       </PageHeaderLayout>
93 |     );
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/project/Forms/StepForm/Step2.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'dva';
 3 | import { Form, Input, Button, Alert, Divider } from 'antd';
 4 | import { routerRedux } from 'dva/router';
 5 | import { digitUppercase } from '../../../utils/utils';
 6 | import styles from './style.less';
 7 | 
 8 | const formItemLayout = {
 9 |   labelCol: {
10 |     span: 5,
11 |   },
12 |   wrapperCol: {
13 |     span: 19,
14 |   },
15 | };
16 | 
17 | @Form.create()
18 | class Step2 extends React.PureComponent {
19 |   render() {
20 |     const { form, data, dispatch, submitting } = this.props;
21 |     const { getFieldDecorator, validateFields } = form;
22 |     const onPrev = () => {
23 |       dispatch(routerRedux.push('/form/step-form'));
24 |     };
25 |     const onValidateForm = e => {
26 |       e.preventDefault();
27 |       validateFields((err, values) => {
28 |         if (!err) {
29 |           dispatch({
30 |             type: 'form/submitStepForm',
31 |             payload: {
32 |               ...data,
33 |               ...values,
34 |             },
35 |           });
36 |         }
37 |       });
38 |     };
39 |     return (
40 |       <Form layout="horizontal" className={styles.stepForm}>
41 |         <Alert
42 |           closable
43 |           showIcon
44 |           message="確認轉賬後，資金將直接打入對方賬戶，無法退回。"
45 |           style={{ marginBottom: 24 }}
46 |         />
47 |         <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款賬戶">
48 |           {data.payAccount}
49 |         </Form.Item>
50 |         <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款賬戶">
51 |           {data.receiverAccount}
52 |         </Form.Item>
53 |         <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
54 |           {data.receiverName}
55 |         </Form.Item>
56 |         <Form.Item {...formItemLayout} className={styles.stepFormText} label="轉賬金額">
57 |           <span className={styles.money}>{data.amount}</span>
58 |           <span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
59 |         </Form.Item>
60 |         <Divider style={{ margin: '24px 0' }} />
61 |         <Form.Item {...formItemLayout} label="支付密碼" required={false}>
62 |           {getFieldDecorator('password', {
63 |             initialValue: '123456',
64 |             rules: [
65 |               {
66 |                 required: true,
67 |                 message: '需要支付密碼才能進行支付',
68 |               },
69 |             ],
70 |           })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
71 |         </Form.Item>
72 |         <Form.Item
73 |           style={{ marginBottom: 8 }}
74 |           wrapperCol={{
75 |             xs: { span: 24, offset: 0 },
76 |             sm: {
77 |               span: formItemLayout.wrapperCol.span,
78 |               offset: formItemLayout.labelCol.span,
79 |             },
80 |           }}
81 |           label=""
82 |         >
83 |           <Button type="primary" onClick={onValidateForm} loading={submitting}>
84 |             提交
85 |           </Button>
86 |           <Button onClick={onPrev} style={{ marginLeft: 8 }}>
87 |             上壹步
88 |           </Button>
89 |         </Form.Item>
90 |       </Form>
91 |     );
92 |   }
93 | }
94 | 
95 | export default connect(({ form, loading }) => ({
96 |   submitting: loading.effects['form/submitStepForm'],
97 |   data: form.step,
98 | }))(Step2);
99 | 


--------------------------------------------------------------------------------
/project/Dashboard/Analysis.less:
--------------------------------------------------------------------------------
  1 | @import '~antd/lib/style/themes/default.less';
  2 | @import '../../utils/utils.less';
  3 | 
  4 | .iconGroup {
  5 |   i {
  6 |     transition: color 0.32s;
  7 |     color: @text-color-secondary;
  8 |     cursor: pointer;
  9 |     margin-left: 16px;
 10 |     &:hover {
 11 |       color: @text-color;
 12 |     }
 13 |   }
 14 | }
 15 | 
 16 | .rankingList {
 17 |   margin: 25px 0 0;
 18 |   padding: 0;
 19 |   list-style: none;
 20 |   li {
 21 |     .clearfix();
 22 |     margin-top: 16px;
 23 |     span {
 24 |       color: @text-color;
 25 |       font-size: 14px;
 26 |       line-height: 22px;
 27 |     }
 28 |     span:first-child {
 29 |       background-color: @background-color-base;
 30 |       border-radius: 20px;
 31 |       display: inline-block;
 32 |       font-size: 12px;
 33 |       font-weight: 600;
 34 |       margin-right: 24px;
 35 |       height: 20px;
 36 |       line-height: 20px;
 37 |       width: 20px;
 38 |       text-align: center;
 39 |     }
 40 |     span.active {
 41 |       //background-color: @primary-color;
 42 |       background-color: #314659;
 43 |       color: #fff;
 44 |     }
 45 |     span:last-child {
 46 |       float: right;
 47 |     }
 48 |   }
 49 | }
 50 | 
 51 | .salesExtra {
 52 |   display: inline-block;
 53 |   margin-right: 24px;
 54 |   a {
 55 |     color: @text-color;
 56 |     margin-left: 24px;
 57 |     &:hover {
 58 |       color: @primary-color;
 59 |     }
 60 |     &.currentDate {
 61 |       color: @primary-color;
 62 |     }
 63 |   }
 64 | }
 65 | 
 66 | .salesCard {
 67 |   .salesBar {
 68 |     padding: 0 0 32px 32px;
 69 |   }
 70 |   .salesRank {
 71 |     padding: 0 32px 32px 72px;
 72 |   }
 73 |   :global {
 74 |     .ant-tabs-bar {
 75 |       padding-left: 16px;
 76 |       .ant-tabs-nav .ant-tabs-tab {
 77 |         padding-top: 16px;
 78 |         padding-bottom: 14px;
 79 |         line-height: 24px;
 80 |       }
 81 |     }
 82 |     .ant-tabs-extra-content {
 83 |       padding-right: 24px;
 84 |       line-height: 55px;
 85 |     }
 86 |     .ant-card-head {
 87 |       position: relative;
 88 |     }
 89 |   }
 90 | }
 91 | 
 92 | .salesCardExtra {
 93 |   height: 68px;
 94 | }
 95 | 
 96 | .salesTypeRadio {
 97 |   position: absolute;
 98 |   left: 24px;
 99 |   bottom: 15px;
100 | }
101 | 
102 | .offlineCard {
103 |   :global {
104 |     .ant-tabs-ink-bar {
105 |       bottom: auto;
106 |     }
107 |     .ant-tabs-bar {
108 |       border-bottom: none;
109 |     }
110 |     .ant-tabs-nav-container-scrolling {
111 |       padding-left: 40px;
112 |       padding-right: 40px;
113 |     }
114 |     .ant-tabs-tab-prev-icon:before {
115 |       position: relative;
116 |       left: 6px;
117 |     }
118 |     .ant-tabs-tab-next-icon:before {
119 |       position: relative;
120 |       right: 6px;
121 |     }
122 |   }
123 | 
124 |   :global(.ant-tabs-tab-active) h4 {
125 |     color: @primary-color;
126 |   }
127 | }
128 | 
129 | .trendText {
130 |   margin-left: 8px;
131 |   color: @heading-color;
132 | }
133 | 
134 | @media screen and (max-width: @screen-lg) {
135 |   .salesExtra {
136 |     display: none;
137 |   }
138 | 
139 |   .rankingList {
140 |     li {
141 |       span:first-child {
142 |         margin-right: 8px;
143 |       }
144 |     }
145 |   }
146 | }
147 | 
148 | @media screen and (max-width: @screen-md) {
149 |   .rankingTitle {
150 |     margin-top: 16px;
151 |   }
152 | 
153 |   .salesCard .salesBar {
154 |     padding: 16px;
155 |   }
156 | }
157 | 
158 | @media screen and (max-width: @screen-sm) {
159 |   .salesExtraWrap {
160 |     display: none;
161 |   }
162 | 
163 |   .salesCard {
164 |     :global {
165 |       .ant-tabs-content {
166 |         padding-top: 30px;
167 |       }
168 |     }
169 |   }
170 | }
171 | 


--------------------------------------------------------------------------------
/project/List/BasicList.less:
--------------------------------------------------------------------------------
  1 | @import '~antd/lib/style/themes/default.less';
  2 | @import '../../utils/utils.less';
  3 | 
  4 | .standardList {
  5 |   :global {
  6 |     .ant-card-head {
  7 |       border-bottom: none;
  8 |     }
  9 |     .ant-card-head-title {
 10 |       line-height: 32px;
 11 |       padding: 24px 0;
 12 |     }
 13 |     .ant-card-extra {
 14 |       padding: 24px 0;
 15 |     }
 16 |     .ant-list-pagination {
 17 |       text-align: right;
 18 |       margin-top: 24px;
 19 |     }
 20 |     .ant-avatar-lg {
 21 |       width: 48px;
 22 |       height: 48px;
 23 |       line-height: 48px;
 24 |     }
 25 |   }
 26 |   .headerInfo {
 27 |     position: relative;
 28 |     text-align: center;
 29 |     & > span {
 30 |       color: @text-color-secondary;
 31 |       display: inline-block;
 32 |       font-size: @font-size-base;
 33 |       line-height: 22px;
 34 |       margin-bottom: 4px;
 35 |     }
 36 |     & > p {
 37 |       color: @heading-color;
 38 |       font-size: 24px;
 39 |       line-height: 32px;
 40 |       margin: 0;
 41 |     }
 42 |     & > em {
 43 |       background-color: @border-color-split;
 44 |       position: absolute;
 45 |       height: 56px;
 46 |       width: 1px;
 47 |       top: 0;
 48 |       right: 0;
 49 |     }
 50 |   }
 51 |   .listContent {
 52 |     font-size: 0;
 53 |     .listContentItem {
 54 |       color: @text-color-secondary;
 55 |       display: inline-block;
 56 |       vertical-align: middle;
 57 |       font-size: @font-size-base;
 58 |       margin-left: 40px;
 59 |       > span {
 60 |         line-height: 20px;
 61 |       }
 62 |       > p {
 63 |         margin-top: 4px;
 64 |         margin-bottom: 0;
 65 |         line-height: 22px;
 66 |       }
 67 |     }
 68 |   }
 69 |   .extraContentSearch {
 70 |     margin-left: 16px;
 71 |     width: 272px;
 72 |   }
 73 | }
 74 | 
 75 | @media screen and (max-width: @screen-xs) {
 76 |   .standardList {
 77 |     :global {
 78 |       .ant-list-item-content {
 79 |         display: block;
 80 |         flex: none;
 81 |         width: 100%;
 82 |       }
 83 |       .ant-list-item-action {
 84 |         margin-left: 0;
 85 |       }
 86 |     }
 87 |     .listContent {
 88 |       margin-left: 0;
 89 |       & > div {
 90 |         margin-left: 0;
 91 |       }
 92 |     }
 93 |     .listCard {
 94 |       :global {
 95 |         .ant-card-head-title {
 96 |           overflow: visible;
 97 |         }
 98 |       }
 99 |     }
100 |   }
101 | }
102 | 
103 | @media screen and (max-width: @screen-sm) {
104 |   .standardList {
105 |     .extraContentSearch {
106 |       margin-left: 0;
107 |       width: 100%;
108 |     }
109 |     .headerInfo {
110 |       margin-bottom: 16px;
111 |       & > em {
112 |         display: none;
113 |       }
114 |     }
115 |   }
116 | }
117 | 
118 | @media screen and (max-width: @screen-md) {
119 |   .standardList {
120 |     .listContent {
121 |       & > div {
122 |         display: block;
123 |       }
124 |       & > div:last-child {
125 |         top: 0;
126 |         width: 100%;
127 |       }
128 |     }
129 |   }
130 |   .listCard {
131 |     :global {
132 |       .ant-radio-group {
133 |         display: block;
134 |         margin-bottom: 8px;
135 |       }
136 |     }
137 |   }
138 | }
139 | 
140 | @media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
141 |   .standardList {
142 |     .listContent {
143 |       & > div {
144 |         display: block;
145 |       }
146 |       & > div:last-child {
147 |         top: 0;
148 |         width: 100%;
149 |       }
150 |     }
151 |   }
152 | }
153 | 
154 | @media screen and (max-width: @screen-xl) {
155 |   .standardList {
156 |     .listContent {
157 |       & > div {
158 |         margin-left: 24px;
159 |       }
160 |       & > div:last-child {
161 |         top: 0;
162 |       }
163 |     }
164 |   }
165 | }
166 | 
167 | @media screen and (max-width: 1400px) {
168 |   .standardList {
169 |     .listContent {
170 |       text-align: right;
171 |       & > div:last-child {
172 |         top: 0;
173 |       }
174 |     }
175 |   }
176 | }
177 | 


--------------------------------------------------------------------------------
/project/Forms/StepForm/Step1.js:
--------------------------------------------------------------------------------
  1 | import React, { Fragment } from 'react';
  2 | import { connect } from 'dva';
  3 | import { Form, Input, Button, Select, Divider } from 'antd';
  4 | import { routerRedux } from 'dva/router';
  5 | import styles from './style.less';
  6 | 
  7 | const { Option } = Select;
  8 | 
  9 | const formItemLayout = {
 10 |   labelCol: {
 11 |     span: 5,
 12 |   },
 13 |   wrapperCol: {
 14 |     span: 19,
 15 |   },
 16 | };
 17 | 
 18 | @Form.create()
 19 | class Step1 extends React.PureComponent {
 20 |   render() {
 21 |     const { form, dispatch, data } = this.props;
 22 |     const { getFieldDecorator, validateFields } = form;
 23 |     const onValidateForm = () => {
 24 |       validateFields((err, values) => {
 25 |         if (!err) {
 26 |           dispatch({
 27 |             type: 'form/saveStepFormData',
 28 |             payload: values,
 29 |           });
 30 |           dispatch(routerRedux.push('/form/step-form/confirm'));
 31 |         }
 32 |       });
 33 |     };
 34 |     return (
 35 |       <Fragment>
 36 |         <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
 37 |           <Form.Item {...formItemLayout} label="付款賬戶">
 38 |             {getFieldDecorator('payAccount', {
 39 |               initialValue: data.payAccount,
 40 |               rules: [{ required: true, message: '請選擇付款賬戶' }],
 41 |             })(
 42 |               <Select placeholder="test@example.com">
 43 |                 <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
 44 |               </Select>
 45 |             )}
 46 |           </Form.Item>
 47 |           <Form.Item {...formItemLayout} label="收款賬戶">
 48 |             <Input.Group compact>
 49 |               <Select defaultValue="alipay" style={{ width: 100 }}>
 50 |                 <Option value="alipay">支付寶</Option>
 51 |                 <Option value="bank">銀行賬戶</Option>
 52 |               </Select>
 53 |               {getFieldDecorator('receiverAccount', {
 54 |                 initialValue: data.receiverAccount,
 55 |                 rules: [
 56 |                   { required: true, message: '請輸入收款人賬戶' },
 57 |                   { type: 'email', message: '賬戶名應為郵箱格式' },
 58 |                 ],
 59 |               })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
 60 |             </Input.Group>
 61 |           </Form.Item>
 62 |           <Form.Item {...formItemLayout} label="收款人姓名">
 63 |             {getFieldDecorator('receiverName', {
 64 |               initialValue: data.receiverName,
 65 |               rules: [{ required: true, message: '請輸入收款人姓名' }],
 66 |             })(<Input placeholder="請輸入收款人姓名" />)}
 67 |           </Form.Item>
 68 |           <Form.Item {...formItemLayout} label="轉賬金額">
 69 |             {getFieldDecorator('amount', {
 70 |               initialValue: data.amount,
 71 |               rules: [
 72 |                 { required: true, message: '請輸入轉賬金額' },
 73 |                 {
 74 |                   pattern: /^(\d+)((?:\.\d+)?)$/,
 75 |                   message: '請輸入合法金額數字',
 76 |                 },
 77 |               ],
 78 |             })(<Input prefix="￥" placeholder="請輸入金額" />)}
 79 |           </Form.Item>
 80 |           <Form.Item
 81 |             wrapperCol={{
 82 |               xs: { span: 24, offset: 0 },
 83 |               sm: {
 84 |                 span: formItemLayout.wrapperCol.span,
 85 |                 offset: formItemLayout.labelCol.span,
 86 |               },
 87 |             }}
 88 |             label=""
 89 |           >
 90 |             <Button type="primary" onClick={onValidateForm}>
 91 |               下壹步
 92 |             </Button>
 93 |           </Form.Item>
 94 |         </Form>
 95 |         <Divider style={{ margin: '40px 0 24px' }} />
 96 |         <div className={styles.desc}>
 97 |           <h3>說明</h3>
 98 |           <h4>轉賬到支付寶賬戶</h4>
 99 |           <p>
100 |             如果需要，這裏可以放壹些關於產品的常見問題說明。如果需要，這裏可以放壹些關於產品的常見問題說明。如果需要，這裏可以放壹些關於產品的常見問題說明。
101 |           </p>
102 |           <h4>轉賬到銀行卡</h4>
103 |           <p>
104 |             如果需要，這裏可以放壹些關於產品的常見問題說明。如果需要，這裏可以放壹些關於產品的常見問題說明。如果需要，這裏可以放壹些關於產品的常見問題說明。
105 |           </p>
106 |         </div>
107 |       </Fragment>
108 |     );
109 |   }
110 | }
111 | 
112 | export default connect(({ form }) => ({
113 |   data: form.step,
114 | }))(Step1);
115 | 


--------------------------------------------------------------------------------
/project/List/BasicList.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import moment from 'moment';
  3 | import { connect } from 'dva';
  4 | import {
  5 |   List,
  6 |   Card,
  7 |   Row,
  8 |   Col,
  9 |   Radio,
 10 |   Input,
 11 |   Progress,
 12 |   Button,
 13 |   Icon,
 14 |   Dropdown,
 15 |   Menu,
 16 |   Avatar,
 17 | } from 'antd';
 18 | 
 19 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 20 | 
 21 | import styles from './BasicList.less';
 22 | 
 23 | const RadioButton = Radio.Button;
 24 | const RadioGroup = Radio.Group;
 25 | const { Search } = Input;
 26 | 
 27 | @connect(({ list, loading }) => ({
 28 |   list,
 29 |   loading: loading.models.list,
 30 | }))
 31 | export default class BasicList extends PureComponent {
 32 |   componentDidMount() {
 33 |     this.props.dispatch({
 34 |       type: 'list/fetch',
 35 |       payload: {
 36 |         count: 5,
 37 |       },
 38 |     });
 39 |   }
 40 | 
 41 |   render() {
 42 |     const { list: { list }, loading } = this.props;
 43 | 
 44 |     const Info = ({ title, value, bordered }) => (
 45 |       <div className={styles.headerInfo}>
 46 |         <span>{title}</span>
 47 |         <p>{value}</p>
 48 |         {bordered && <em />}
 49 |       </div>
 50 |     );
 51 | 
 52 |     const extraContent = (
 53 |       <div className={styles.extraContent}>
 54 |         <RadioGroup defaultValue="all">
 55 |           <RadioButton value="all">全部</RadioButton>
 56 |           <RadioButton value="progress">進行中</RadioButton>
 57 |           <RadioButton value="waiting">等待中</RadioButton>
 58 |         </RadioGroup>
 59 |         <Search className={styles.extraContentSearch} placeholder="請輸入" onSearch={() => ({})} />
 60 |       </div>
 61 |     );
 62 | 
 63 |     const paginationProps = {
 64 |       showSizeChanger: true,
 65 |       showQuickJumper: true,
 66 |       pageSize: 5,
 67 |       total: 50,
 68 |     };
 69 | 
 70 |     const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
 71 |       <div className={styles.listContent}>
 72 |         <div className={styles.listContentItem}>
 73 |           <span>Owner</span>
 74 |           <p>{owner}</p>
 75 |         </div>
 76 |         <div className={styles.listContentItem}>
 77 |           <span>開始時間</span>
 78 |           <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
 79 |         </div>
 80 |         <div className={styles.listContentItem}>
 81 |           <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
 82 |         </div>
 83 |       </div>
 84 |     );
 85 | 
 86 |     const menu = (
 87 |       <Menu>
 88 |         <Menu.Item>
 89 |           <a>編輯</a>
 90 |         </Menu.Item>
 91 |         <Menu.Item>
 92 |           <a>刪除</a>
 93 |         </Menu.Item>
 94 |       </Menu>
 95 |     );
 96 | 
 97 |     const MoreBtn = () => (
 98 |       <Dropdown overlay={menu}>
 99 |         <a>
100 |           更多 <Icon type="down" />
101 |         </a>
102 |       </Dropdown>
103 |     );
104 | 
105 |     return (
106 |       <PageHeaderLayout>
107 |         <div className={styles.standardList}>
108 |           <Card bordered={false}>
109 |             <Row>
110 |               <Col sm={8} xs={24}>
111 |                 <Info title="我的待辦" value="8個任務" bordered />
112 |               </Col>
113 |               <Col sm={8} xs={24}>
114 |                 <Info title="本週任務平均處理時間" value="32分鐘" bordered />
115 |               </Col>
116 |               <Col sm={8} xs={24}>
117 |                 <Info title="本週完成任務數" value="24個任務" />
118 |               </Col>
119 |             </Row>
120 |           </Card>
121 | 
122 |           <Card
123 |             className={styles.listCard}
124 |             bordered={false}
125 |             title="標準列表"
126 |             style={{ marginTop: 24 }}
127 |             bodyStyle={{ padding: '0 32px 40px 32px' }}
128 |             extra={extraContent}
129 |           >
130 |             <Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus">
131 |               添加
132 |             </Button>
133 |             <List
134 |               size="large"
135 |               rowKey="id"
136 |               loading={loading}
137 |               pagination={paginationProps}
138 |               dataSource={list}
139 |               renderItem={item => (
140 |                 <List.Item actions={[<a>編輯</a>, <MoreBtn />]}>
141 |                   <List.Item.Meta
142 |                     avatar={<Avatar src={item.logo} shape="square" size="large" />}
143 |                     title={<a href={item.href}>{item.title}</a>}
144 |                     description={item.subDescription}
145 |                   />
146 |                   <ListContent data={item} />
147 |                 </List.Item>
148 |               )}
149 |             />
150 |           </Card>
151 |         </div>
152 |       </PageHeaderLayout>
153 |     );
154 |   }
155 | }
156 | 


--------------------------------------------------------------------------------
/project/Dashboard/Workplace.less:
--------------------------------------------------------------------------------
  1 | @import '~antd/lib/style/themes/default.less';
  2 | @import '../../utils/utils.less';
  3 | 
  4 | .activitiesList {
  5 |   padding: 0 24px 8px 24px;
  6 |   .username {
  7 |     color: @text-color;
  8 |   }
  9 |   .event {
 10 |     font-weight: normal;
 11 |   }
 12 | }
 13 | 
 14 | .pageHeaderContent {
 15 |   display: flex;
 16 |   .avatar {
 17 |     flex: 0 1 72px;
 18 |     margin-bottom: 8px;
 19 |     & > span {
 20 |       border-radius: 72px;
 21 |       display: block;
 22 |       width: 72px;
 23 |       height: 72px;
 24 |     }
 25 |   }
 26 |   .content {
 27 |     position: relative;
 28 |     top: 4px;
 29 |     margin-left: 24px;
 30 |     flex: 1 1 auto;
 31 |     color: @text-color-secondary;
 32 |     line-height: 22px;
 33 |     .contentTitle {
 34 |       font-size: 20px;
 35 |       line-height: 28px;
 36 |       font-weight: 500;
 37 |       color: @heading-color;
 38 |       margin-bottom: 12px;
 39 |     }
 40 |   }
 41 | }
 42 | 
 43 | .extraContent {
 44 |   .clearfix();
 45 |   float: right;
 46 |   white-space: nowrap;
 47 |   .statItem {
 48 |     padding: 0 32px;
 49 |     position: relative;
 50 |     display: inline-block;
 51 |     > p:first-child {
 52 |       color: @text-color-secondary;
 53 |       font-size: @font-size-base;
 54 |       line-height: 22px;
 55 |       margin-bottom: 4px;
 56 |     }
 57 |     > p {
 58 |       color: @heading-color;
 59 |       font-size: 30px;
 60 |       line-height: 38px;
 61 |       margin: 0;
 62 |       > span {
 63 |         color: @text-color-secondary;
 64 |         font-size: 20px;
 65 |       }
 66 |     }
 67 |     &:after {
 68 |       background-color: @border-color-split;
 69 |       position: absolute;
 70 |       top: 8px;
 71 |       right: 0;
 72 |       width: 1px;
 73 |       height: 40px;
 74 |       content: '';
 75 |     }
 76 |     &:last-child {
 77 |       padding-right: 0;
 78 |       &:after {
 79 |         display: none;
 80 |       }
 81 |     }
 82 |   }
 83 | }
 84 | 
 85 | .members {
 86 |   a {
 87 |     display: block;
 88 |     margin: 12px 0;
 89 |     line-height: 24px;
 90 |     height: 24px;
 91 |     .textOverflow();
 92 |     .member {
 93 |       font-size: @font-size-base;
 94 |       color: @text-color;
 95 |       line-height: 24px;
 96 |       max-width: 100px;
 97 |       vertical-align: top;
 98 |       margin-left: 12px;
 99 |       transition: all 0.3s;
100 |       display: inline-block;
101 |       .textOverflow();
102 |     }
103 |     &:hover {
104 |       span {
105 |         color: @primary-color;
106 |       }
107 |     }
108 |   }
109 | }
110 | 
111 | .projectList {
112 |   :global {
113 |     .ant-card-meta-description {
114 |       color: @text-color-secondary;
115 |       height: 44px;
116 |       line-height: 22px;
117 |       overflow: hidden;
118 |     }
119 |   }
120 |   .cardTitle {
121 |     font-size: 0;
122 |     a {
123 |       color: @heading-color;
124 |       margin-left: 12px;
125 |       line-height: 24px;
126 |       height: 24px;
127 |       display: inline-block;
128 |       vertical-align: top;
129 |       font-size: @font-size-base;
130 |       &:hover {
131 |         color: @primary-color;
132 |       }
133 |     }
134 |   }
135 |   .projectGrid {
136 |     width: 33.33%;
137 |   }
138 |   .projectItemContent {
139 |     display: flex;
140 |     margin-top: 8px;
141 |     overflow: hidden;
142 |     font-size: 12px;
143 |     height: 20px;
144 |     line-height: 20px;
145 |     .textOverflow();
146 |     a {
147 |       color: @text-color-secondary;
148 |       display: inline-block;
149 |       flex: 1 1 0;
150 |       .textOverflow();
151 |       &:hover {
152 |         color: @primary-color;
153 |       }
154 |     }
155 |     .datetime {
156 |       color: @disabled-color;
157 |       flex: 0 0 auto;
158 |       float: right;
159 |     }
160 |   }
161 | }
162 | 
163 | .datetime {
164 |   color: @disabled-color;
165 | }
166 | 
167 | @media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
168 |   .activeCard {
169 |     margin-bottom: 24px;
170 |   }
171 |   .members {
172 |     margin-bottom: 0;
173 |   }
174 |   .extraContent {
175 |     margin-left: -44px;
176 |     .statItem {
177 |       padding: 0 16px;
178 |     }
179 |   }
180 | }
181 | 
182 | @media screen and (max-width: @screen-lg) {
183 |   .activeCard {
184 |     margin-bottom: 24px;
185 |   }
186 |   .members {
187 |     margin-bottom: 0;
188 |   }
189 |   .extraContent {
190 |     float: none;
191 |     margin-right: 0;
192 |     .statItem {
193 |       padding: 0 16px;
194 |       text-align: left;
195 |       &:after {
196 |         display: none;
197 |       }
198 |     }
199 |   }
200 | }
201 | 
202 | @media screen and (max-width: @screen-md) {
203 |   .extraContent {
204 |     margin-left: -16px;
205 |   }
206 |   .projectList {
207 |     .projectGrid {
208 |       width: 50%;
209 |     }
210 |   }
211 | }
212 | 
213 | @media screen and (max-width: @screen-sm) {
214 |   .pageHeaderContent {
215 |     display: block;
216 |     .content {
217 |       margin-left: 0;
218 |     }
219 |   }
220 |   .extraContent {
221 |     .statItem {
222 |       float: none;
223 |     }
224 |   }
225 | }
226 | 
227 | @media screen and (max-width: @screen-xs) {
228 |   .projectList {
229 |     .projectGrid {
230 |       width: 100%;
231 |     }
232 |   }
233 | }
234 | 


--------------------------------------------------------------------------------
/project/Dashboard/Monitor.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent, Fragment } from 'react';
  2 | import { connect } from 'dva';
  3 | import { Row, Col, Card, Tooltip } from 'antd';
  4 | import numeral from 'numeral';
  5 | import { Pie, WaterWave, Gauge, TagCloud } from 'components/Charts';
  6 | import NumberInfo from 'components/NumberInfo';
  7 | import CountDown from 'components/CountDown';
  8 | import ActiveChart from 'components/ActiveChart';
  9 | import Authorized from '../../utils/Authorized';
 10 | import styles from './Monitor.less';
 11 | 
 12 | const { Secured } = Authorized;
 13 | 
 14 | const targetTime = new Date().getTime() + 3900000;
 15 | 
 16 | // use permission as a parameter
 17 | const havePermissionAsync = new Promise(resolve => {
 18 |   // Call resolve on behalf of passed
 19 |   setTimeout(() => resolve(), 1000);
 20 | });
 21 | @Secured(havePermissionAsync)
 22 | @connect(({ monitor, loading }) => ({
 23 |   monitor,
 24 |   loading: loading.models.monitor,
 25 | }))
 26 | export default class Monitor extends PureComponent {
 27 |   componentDidMount() {
 28 |     this.props.dispatch({
 29 |       type: 'monitor/fetchTags',
 30 |     });
 31 |   }
 32 | 
 33 |   render() {
 34 |     const { monitor, loading } = this.props;
 35 |     const { tags } = monitor;
 36 | 
 37 |     return (
 38 |       <Fragment>
 39 |         <Row gutter={24}>
 40 |           <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
 41 |             <Card title="活動實時交易情況" bordered={false}>
 42 |               <Row>
 43 |                 <Col md={6} sm={12} xs={24}>
 44 |                   <NumberInfo
 45 |                     subTitle="今日交易總額"
 46 |                     suffix="元"
 47 |                     total={numeral(124543233).format('0,0')}
 48 |                   />
 49 |                 </Col>
 50 |                 <Col md={6} sm={12} xs={24}>
 51 |                   <NumberInfo subTitle="銷售目標完成率" total="92%" />
 52 |                 </Col>
 53 |                 <Col md={6} sm={12} xs={24}>
 54 |                   <NumberInfo subTitle="活動剩余時間" total={<CountDown target={targetTime} />} />
 55 |                 </Col>
 56 |                 <Col md={6} sm={12} xs={24}>
 57 |                   <NumberInfo
 58 |                     subTitle="每秒交易總額"
 59 |                     suffix="元"
 60 |                     total={numeral(234).format('0,0')}
 61 |                   />
 62 |                 </Col>
 63 |               </Row>
 64 |               <div className={styles.mapChart}>
 65 |                 <Tooltip title="等待後期實現">
 66 |                   <img
 67 |                     src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
 68 |                     alt="map"
 69 |                   />
 70 |                 </Tooltip>
 71 |               </div>
 72 |             </Card>
 73 |           </Col>
 74 |           <Col xl={6} lg={24} md={24} sm={24} xs={24}>
 75 |             <Card title="活動情況預測" style={{ marginBottom: 24 }} bordered={false}>
 76 |               <ActiveChart />
 77 |             </Card>
 78 |             <Card
 79 |               title="券核效率"
 80 |               style={{ marginBottom: 24 }}
 81 |               bodyStyle={{ textAlign: 'center' }}
 82 |               bordered={false}
 83 |             >
 84 |               <Gauge title="跳出率" height={180} percent={87} />
 85 |             </Card>
 86 |           </Col>
 87 |         </Row>
 88 |         <Row gutter={24}>
 89 |           <Col xl={12} lg={24} sm={24} xs={24}>
 90 |             <Card title="各品類占比" bordered={false} className={styles.pieCard}>
 91 |               <Row style={{ padding: '16px 0' }}>
 92 |                 <Col span={8}>
 93 |                   <Pie
 94 |                     animate={false}
 95 |                     percent={28}
 96 |                     subTitle="中式快餐"
 97 |                     total="28%"
 98 |                     height={128}
 99 |                     lineWidth={2}
100 |                   />
101 |                 </Col>
102 |                 <Col span={8}>
103 |                   <Pie
104 |                     animate={false}
105 |                     color="#5DDECF"
106 |                     percent={22}
107 |                     subTitle="西餐"
108 |                     total="22%"
109 |                     height={128}
110 |                     lineWidth={2}
111 |                   />
112 |                 </Col>
113 |                 <Col span={8}>
114 |                   <Pie
115 |                     animate={false}
116 |                     color="#2FC25B"
117 |                     percent={32}
118 |                     subTitle="火鍋"
119 |                     total="32%"
120 |                     height={128}
121 |                     lineWidth={2}
122 |                   />
123 |                 </Col>
124 |               </Row>
125 |             </Card>
126 |           </Col>
127 |           <Col xl={6} lg={12} sm={24} xs={24}>
128 |             <Card
129 |               title="熱門搜索"
130 |               loading={loading}
131 |               bordered={false}
132 |               bodyStyle={{ overflow: 'hidden' }}
133 |             >
134 |               <TagCloud data={tags} height={161} />
135 |             </Card>
136 |           </Col>
137 |           <Col xl={6} lg={12} sm={24} xs={24}>
138 |             <Card
139 |               title="資源剩余"
140 |               bodyStyle={{ textAlign: 'center', fontSize: 0 }}
141 |               bordered={false}
142 |             >
143 |               <WaterWave height={161} title="補貼資金剩余" percent={34} />
144 |             </Card>
145 |           </Col>
146 |         </Row>
147 |       </Fragment>
148 |     );
149 |   }
150 | }
151 | 


--------------------------------------------------------------------------------
/project/Profile/BasicProfile.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'dva';
  3 | import { Card, Badge, Table, Divider } from 'antd';
  4 | import DescriptionList from 'components/DescriptionList';
  5 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
  6 | import styles from './BasicProfile.less';
  7 | 
  8 | const { Description } = DescriptionList;
  9 | 
 10 | const progressColumns = [
 11 |   {
 12 |     title: '時間',
 13 |     dataIndex: 'time',
 14 |     key: 'time',
 15 |   },
 16 |   {
 17 |     title: '當前進度',
 18 |     dataIndex: 'rate',
 19 |     key: 'rate',
 20 |   },
 21 |   {
 22 |     title: '狀態',
 23 |     dataIndex: 'status',
 24 |     key: 'status',
 25 |     render: text =>
 26 |       text === 'success' ? (
 27 |         <Badge status="success" text="成功" />
 28 |       ) : (
 29 |         <Badge status="processing" text="進行中" />
 30 |       ),
 31 |   },
 32 |   {
 33 |     title: '操作員ID',
 34 |     dataIndex: 'operator',
 35 |     key: 'operator',
 36 |   },
 37 |   {
 38 |     title: '耗時',
 39 |     dataIndex: 'cost',
 40 |     key: 'cost',
 41 |   },
 42 | ];
 43 | 
 44 | @connect(({ profile, loading }) => ({
 45 |   profile,
 46 |   loading: loading.effects['profile/fetchBasic'],
 47 | }))
 48 | export default class BasicProfile extends Component {
 49 |   componentDidMount() {
 50 |     const { dispatch } = this.props;
 51 |     dispatch({
 52 |       type: 'profile/fetchBasic',
 53 |     });
 54 |   }
 55 | 
 56 |   render() {
 57 |     const { profile, loading } = this.props;
 58 |     const { basicGoods, basicProgress } = profile;
 59 |     let goodsData = [];
 60 |     if (basicGoods.length) {
 61 |       let num = 0;
 62 |       let amount = 0;
 63 |       basicGoods.forEach(item => {
 64 |         num += Number(item.num);
 65 |         amount += Number(item.amount);
 66 |       });
 67 |       goodsData = basicGoods.concat({
 68 |         id: '總計',
 69 |         num,
 70 |         amount,
 71 |       });
 72 |     }
 73 |     const renderContent = (value, row, index) => {
 74 |       const obj = {
 75 |         children: value,
 76 |         props: {},
 77 |       };
 78 |       if (index === basicGoods.length) {
 79 |         obj.props.colSpan = 0;
 80 |       }
 81 |       return obj;
 82 |     };
 83 |     const goodsColumns = [
 84 |       {
 85 |         title: '商品編號',
 86 |         dataIndex: 'id',
 87 |         key: 'id',
 88 |         render: (text, row, index) => {
 89 |           if (index < basicGoods.length) {
 90 |             return <a href="">{text}</a>;
 91 |           }
 92 |           return {
 93 |             children: <span style={{ fontWeight: 600 }}>總計</span>,
 94 |             props: {
 95 |               colSpan: 4,
 96 |             },
 97 |           };
 98 |         },
 99 |       },
100 |       {
101 |         title: '商品名稱',
102 |         dataIndex: 'name',
103 |         key: 'name',
104 |         render: renderContent,
105 |       },
106 |       {
107 |         title: '商品條碼',
108 |         dataIndex: 'barcode',
109 |         key: 'barcode',
110 |         render: renderContent,
111 |       },
112 |       {
113 |         title: '單價',
114 |         dataIndex: 'price',
115 |         key: 'price',
116 |         align: 'right',
117 |         render: renderContent,
118 |       },
119 |       {
120 |         title: '數量（件）',
121 |         dataIndex: 'num',
122 |         key: 'num',
123 |         align: 'right',
124 |         render: (text, row, index) => {
125 |           if (index < basicGoods.length) {
126 |             return text;
127 |           }
128 |           return <span style={{ fontWeight: 600 }}>{text}</span>;
129 |         },
130 |       },
131 |       {
132 |         title: '金額',
133 |         dataIndex: 'amount',
134 |         key: 'amount',
135 |         align: 'right',
136 |         render: (text, row, index) => {
137 |           if (index < basicGoods.length) {
138 |             return text;
139 |           }
140 |           return <span style={{ fontWeight: 600 }}>{text}</span>;
141 |         },
142 |       },
143 |     ];
144 |     return (
145 |       <PageHeaderLayout title="基礎詳情頁">
146 |         <Card bordered={false}>
147 |           <DescriptionList size="large" title="退款申請" style={{ marginBottom: 32 }}>
148 |             <Description term="取貨單號">1000000000</Description>
149 |             <Description term="狀態">已取貨</Description>
150 |             <Description term="銷售單號">1234123421</Description>
151 |             <Description term="子訂單">3214321432</Description>
152 |           </DescriptionList>
153 |           <Divider style={{ marginBottom: 32 }} />
154 |           <DescriptionList size="large" title="用戶信息" style={{ marginBottom: 32 }}>
155 |             <Description term="用戶姓名">付小小</Description>
156 |             <Description term="聯系電話">18100000000</Description>
157 |             <Description term="常用快遞">菜鳥倉儲</Description>
158 |             <Description term="取貨地址">浙江省杭州市西湖區萬塘路18號</Description>
159 |             <Description term="備註">無</Description>
160 |           </DescriptionList>
161 |           <Divider style={{ marginBottom: 32 }} />
162 |           <div className={styles.title}>退貨商品</div>
163 |           <Table
164 |             style={{ marginBottom: 24 }}
165 |             pagination={false}
166 |             loading={loading}
167 |             dataSource={goodsData}
168 |             columns={goodsColumns}
169 |             rowKey="id"
170 |           />
171 |           <div className={styles.title}>退貨進度</div>
172 |           <Table
173 |             style={{ marginBottom: 16 }}
174 |             pagination={false}
175 |             loading={loading}
176 |             dataSource={basicProgress}
177 |             columns={progressColumns}
178 |           />
179 |         </Card>
180 |       </PageHeaderLayout>
181 |     );
182 |   }
183 | }
184 | 


--------------------------------------------------------------------------------
/project/List/Projects.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import moment from 'moment';
  3 | import { connect } from 'dva';
  4 | import { Row, Col, Form, Card, Select, List } from 'antd';
  5 | 
  6 | import TagSelect from 'components/TagSelect';
  7 | import AvatarList from 'components/AvatarList';
  8 | import Ellipsis from 'components/Ellipsis';
  9 | import StandardFormRow from 'components/StandardFormRow';
 10 | 
 11 | import styles from './Projects.less';
 12 | 
 13 | const { Option } = Select;
 14 | const FormItem = Form.Item;
 15 | 
 16 | /* eslint react/no-array-index-key: 0 */
 17 | @Form.create()
 18 | @connect(({ list, loading }) => ({
 19 |   list,
 20 |   loading: loading.models.list,
 21 | }))
 22 | export default class CoverCardList extends PureComponent {
 23 |   componentDidMount() {
 24 |     this.props.dispatch({
 25 |       type: 'list/fetch',
 26 |       payload: {
 27 |         count: 8,
 28 |       },
 29 |     });
 30 |   }
 31 | 
 32 |   handleFormSubmit = () => {
 33 |     const { form, dispatch } = this.props;
 34 |     // setTimeout 用於保證獲取表單值是在所有表單字段更新完畢的時候
 35 |     setTimeout(() => {
 36 |       form.validateFields(err => {
 37 |         if (!err) {
 38 |           // eslint-disable-next-line
 39 |           dispatch({
 40 |             type: 'list/fetch',
 41 |             payload: {
 42 |               count: 8,
 43 |             },
 44 |           });
 45 |         }
 46 |       });
 47 |     }, 0);
 48 |   };
 49 | 
 50 |   render() {
 51 |     const { list: { list = [] }, loading, form } = this.props;
 52 |     const { getFieldDecorator } = form;
 53 | 
 54 |     const cardList = list ? (
 55 |       <List
 56 |         rowKey="id"
 57 |         loading={loading}
 58 |         grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
 59 |         dataSource={list}
 60 |         renderItem={item => (
 61 |           <List.Item>
 62 |             <Card
 63 |               className={styles.card}
 64 |               hoverable
 65 |               cover={<img alt={item.title} src={item.cover} height={154} />}
 66 |             >
 67 |               <Card.Meta
 68 |                 title={<a href="#">{item.title}</a>}
 69 |                 description={<Ellipsis lines={2}>{item.subDescription}</Ellipsis>}
 70 |               />
 71 |               <div className={styles.cardItemContent}>
 72 |                 <span>{moment(item.updatedAt).fromNow()}</span>
 73 |                 <div className={styles.avatarList}>
 74 |                   <AvatarList size="mini">
 75 |                     {item.members.map((member, i) => (
 76 |                       <AvatarList.Item
 77 |                         key={`${item.id}-avatar-${i}`}
 78 |                         src={member.avatar}
 79 |                         tips={member.name}
 80 |                       />
 81 |                     ))}
 82 |                   </AvatarList>
 83 |                 </div>
 84 |               </div>
 85 |             </Card>
 86 |           </List.Item>
 87 |         )}
 88 |       />
 89 |     ) : null;
 90 | 
 91 |     const formItemLayout = {
 92 |       wrapperCol: {
 93 |         xs: { span: 24 },
 94 |         sm: { span: 16 },
 95 |       },
 96 |     };
 97 | 
 98 |     return (
 99 |       <div className={styles.coverCardList}>
100 |         <Card bordered={false}>
101 |           <Form layout="inline">
102 |             <StandardFormRow title="所屬類目" block style={{ paddingBottom: 11 }}>
103 |               <FormItem>
104 |                 {getFieldDecorator('category')(
105 |                   <TagSelect onChange={this.handleFormSubmit} expandable>
106 |                     <TagSelect.Option value="cat1">類目壹</TagSelect.Option>
107 |                     <TagSelect.Option value="cat2">類目二</TagSelect.Option>
108 |                     <TagSelect.Option value="cat3">類目三</TagSelect.Option>
109 |                     <TagSelect.Option value="cat4">類目四</TagSelect.Option>
110 |                     <TagSelect.Option value="cat5">類目五</TagSelect.Option>
111 |                     <TagSelect.Option value="cat6">類目六</TagSelect.Option>
112 |                     <TagSelect.Option value="cat7">類目七</TagSelect.Option>
113 |                     <TagSelect.Option value="cat8">類目八</TagSelect.Option>
114 |                     <TagSelect.Option value="cat9">類目九</TagSelect.Option>
115 |                     <TagSelect.Option value="cat10">類目十</TagSelect.Option>
116 |                     <TagSelect.Option value="cat11">類目十壹</TagSelect.Option>
117 |                     <TagSelect.Option value="cat12">類目十二</TagSelect.Option>
118 |                   </TagSelect>
119 |                 )}
120 |               </FormItem>
121 |             </StandardFormRow>
122 |             <StandardFormRow title="其它選項" grid last>
123 |               <Row gutter={16}>
124 |                 <Col lg={8} md={10} sm={10} xs={24}>
125 |                   <FormItem {...formItemLayout} label="作者">
126 |                     {getFieldDecorator('author', {})(
127 |                       <Select
128 |                         onChange={this.handleFormSubmit}
129 |                         placeholder="不限"
130 |                         style={{ maxWidth: 200, width: '100%' }}
131 |                       >
132 |                         <Option value="lisa">王昭君</Option>
133 |                       </Select>
134 |                     )}
135 |                   </FormItem>
136 |                 </Col>
137 |                 <Col lg={8} md={10} sm={10} xs={24}>
138 |                   <FormItem {...formItemLayout} label="好評度">
139 |                     {getFieldDecorator('rate', {})(
140 |                       <Select
141 |                         onChange={this.handleFormSubmit}
142 |                         placeholder="不限"
143 |                         style={{ maxWidth: 200, width: '100%' }}
144 |                       >
145 |                         <Option value="good">優秀</Option>
146 |                         <Option value="normal">普通</Option>
147 |                       </Select>
148 |                     )}
149 |                   </FormItem>
150 |                 </Col>
151 |               </Row>
152 |             </StandardFormRow>
153 |           </Form>
154 |         </Card>
155 |         <div className={styles.cardList}>{cardList}</div>
156 |       </div>
157 |     );
158 |   }
159 | }
160 | 


--------------------------------------------------------------------------------
/project/Forms/BasicForm.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import { connect } from 'dva';
  3 | import {
  4 |   Form,
  5 |   Input,
  6 |   DatePicker,
  7 |   Select,
  8 |   Button,
  9 |   Card,
 10 |   InputNumber,
 11 |   Radio,
 12 |   Icon,
 13 |   Tooltip,
 14 | } from 'antd';
 15 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 16 | import styles from './style.less';
 17 | 
 18 | const FormItem = Form.Item;
 19 | const { Option } = Select;
 20 | const { RangePicker } = DatePicker;
 21 | const { TextArea } = Input;
 22 | 
 23 | @connect(({ loading }) => ({
 24 |   submitting: loading.effects['form/submitRegularForm'],
 25 | }))
 26 | @Form.create()
 27 | export default class BasicForms extends PureComponent {
 28 |   handleSubmit = e => {
 29 |     e.preventDefault();
 30 |     this.props.form.validateFieldsAndScroll((err, values) => {
 31 |       if (!err) {
 32 |         this.props.dispatch({
 33 |           type: 'form/submitRegularForm',
 34 |           payload: values,
 35 |         });
 36 |       }
 37 |     });
 38 |   };
 39 |   render() {
 40 |     const { submitting } = this.props;
 41 |     const { getFieldDecorator, getFieldValue } = this.props.form;
 42 | 
 43 |     const formItemLayout = {
 44 |       labelCol: {
 45 |         xs: { span: 24 },
 46 |         sm: { span: 7 },
 47 |       },
 48 |       wrapperCol: {
 49 |         xs: { span: 24 },
 50 |         sm: { span: 12 },
 51 |         md: { span: 10 },
 52 |       },
 53 |     };
 54 | 
 55 |     const submitFormLayout = {
 56 |       wrapperCol: {
 57 |         xs: { span: 24, offset: 0 },
 58 |         sm: { span: 10, offset: 7 },
 59 |       },
 60 |     };
 61 | 
 62 |     return (
 63 |       <PageHeaderLayout
 64 |         title="基礎表單"
 65 |         content="表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。"
 66 |       >
 67 |         <Card bordered={false}>
 68 |           <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
 69 |             <FormItem {...formItemLayout} label="標題">
 70 |               {getFieldDecorator('title', {
 71 |                 rules: [
 72 |                   {
 73 |                     required: true,
 74 |                     message: '請輸入標題',
 75 |                   },
 76 |                 ],
 77 |               })(<Input placeholder="給目標起個名字" />)}
 78 |             </FormItem>
 79 |             <FormItem {...formItemLayout} label="起止日期">
 80 |               {getFieldDecorator('date', {
 81 |                 rules: [
 82 |                   {
 83 |                     required: true,
 84 |                     message: '請選擇起止日期',
 85 |                   },
 86 |                 ],
 87 |               })(<RangePicker style={{ width: '100%' }} placeholder={['開始日期', '結束日期']} />)}
 88 |             </FormItem>
 89 |             <FormItem {...formItemLayout} label="目標描述">
 90 |               {getFieldDecorator('goal', {
 91 |                 rules: [
 92 |                   {
 93 |                     required: true,
 94 |                     message: '請輸入目標描述',
 95 |                   },
 96 |                 ],
 97 |               })(
 98 |                 <TextArea
 99 |                   style={{ minHeight: 32 }}
100 |                   placeholder="請輸入妳的階段性工作目標"
101 |                   rows={4}
102 |                 />
103 |               )}
104 |             </FormItem>
105 |             <FormItem {...formItemLayout} label="衡量標準">
106 |               {getFieldDecorator('standard', {
107 |                 rules: [
108 |                   {
109 |                     required: true,
110 |                     message: '請輸入衡量標準',
111 |                   },
112 |                 ],
113 |               })(<TextArea style={{ minHeight: 32 }} placeholder="請輸入衡量標準" rows={4} />)}
114 |             </FormItem>
115 |             <FormItem
116 |               {...formItemLayout}
117 |               label={
118 |                 <span>
119 |                   客戶
120 |                   <em className={styles.optional}>
121 |                     （選填）
122 |                     <Tooltip title="目標的服務對象">
123 |                       <Icon type="info-circle-o" style={{ marginRight: 4 }} />
124 |                     </Tooltip>
125 |                   </em>
126 |                 </span>
127 |               }
128 |             >
129 |               {getFieldDecorator('client')(
130 |                 <Input placeholder="請描述妳服務的客戶，內部客戶直接 @姓名／工號" />
131 |               )}
132 |             </FormItem>
133 |             <FormItem
134 |               {...formItemLayout}
135 |               label={
136 |                 <span>
137 |                   邀評人<em className={styles.optional}>（選填）</em>
138 |                 </span>
139 |               }
140 |             >
141 |               {getFieldDecorator('invites')(
142 |                 <Input placeholder="請直接 @姓名／工號，最多可邀請 5 人" />
143 |               )}
144 |             </FormItem>
145 |             <FormItem
146 |               {...formItemLayout}
147 |               label={
148 |                 <span>
149 |                   權重<em className={styles.optional}>（選填）</em>
150 |                 </span>
151 |               }
152 |             >
153 |               {getFieldDecorator('weight')(<InputNumber placeholder="請輸入" min={0} max={100} />)}
154 |               <span className="ant-form-text">%</span>
155 |             </FormItem>
156 |             <FormItem {...formItemLayout} label="目標公開" help="客戶、邀評人默認被分享">
157 |               <div>
158 |                 {getFieldDecorator('public', {
159 |                   initialValue: '1',
160 |                 })(
161 |                   <Radio.Group>
162 |                     <Radio value="1">公開</Radio>
163 |                     <Radio value="2">部分公開</Radio>
164 |                     <Radio value="3">不公開</Radio>
165 |                   </Radio.Group>
166 |                 )}
167 |                 <FormItem style={{ marginBottom: 0 }}>
168 |                   {getFieldDecorator('publicUsers')(
169 |                     <Select
170 |                       mode="multiple"
171 |                       placeholder="公開給"
172 |                       style={{
173 |                         margin: '8px 0',
174 |                         display: getFieldValue('public') === '2' ? 'block' : 'none',
175 |                       }}
176 |                     >
177 |                       <Option value="1">同事甲</Option>
178 |                       <Option value="2">同事乙</Option>
179 |                       <Option value="3">同事丙</Option>
180 |                     </Select>
181 |                   )}
182 |                 </FormItem>
183 |               </div>
184 |             </FormItem>
185 |             <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
186 |               <Button type="primary" htmlType="submit" loading={submitting}>
187 |                 提交
188 |               </Button>
189 |               <Button style={{ marginLeft: 8 }}>保存</Button>
190 |             </FormItem>
191 |           </Form>
192 |         </Card>
193 |       </PageHeaderLayout>
194 |     );
195 |   }
196 | }
197 | 


--------------------------------------------------------------------------------
/project/Forms/TableForm.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent, Fragment } from 'react';
  2 | import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
  3 | import styles from './style.less';
  4 | 
  5 | export default class TableForm extends PureComponent {
  6 |   constructor(props) {
  7 |     super(props);
  8 | 
  9 |     this.state = {
 10 |       data: props.value,
 11 |       loading: false,
 12 |     };
 13 |   }
 14 |   componentWillReceiveProps(nextProps) {
 15 |     if ('value' in nextProps) {
 16 |       this.setState({
 17 |         data: nextProps.value,
 18 |       });
 19 |     }
 20 |   }
 21 |   getRowByKey(key, newData) {
 22 |     return (newData || this.state.data).filter(item => item.key === key)[0];
 23 |   }
 24 |   index = 0;
 25 |   cacheOriginData = {};
 26 |   toggleEditable = (e, key) => {
 27 |     e.preventDefault();
 28 |     const newData = this.state.data.map(item => ({ ...item }));
 29 |     const target = this.getRowByKey(key, newData);
 30 |     if (target) {
 31 |       // 進入編輯狀態時保存原始數據
 32 |       if (!target.editable) {
 33 |         this.cacheOriginData[key] = { ...target };
 34 |       }
 35 |       target.editable = !target.editable;
 36 |       this.setState({ data: newData });
 37 |     }
 38 |   };
 39 |   remove(key) {
 40 |     const newData = this.state.data.filter(item => item.key !== key);
 41 |     this.setState({ data: newData });
 42 |     this.props.onChange(newData);
 43 |   }
 44 |   newMember = () => {
 45 |     const newData = this.state.data.map(item => ({ ...item }));
 46 |     newData.push({
 47 |       key: `NEW_TEMP_ID_${this.index}`,
 48 |       workId: '',
 49 |       name: '',
 50 |       department: '',
 51 |       editable: true,
 52 |       isNew: true,
 53 |     });
 54 |     this.index += 1;
 55 |     this.setState({ data: newData });
 56 |   };
 57 |   handleKeyPress(e, key) {
 58 |     if (e.key === 'Enter') {
 59 |       this.saveRow(e, key);
 60 |     }
 61 |   }
 62 |   handleFieldChange(e, fieldName, key) {
 63 |     const newData = this.state.data.map(item => ({ ...item }));
 64 |     const target = this.getRowByKey(key, newData);
 65 |     if (target) {
 66 |       target[fieldName] = e.target.value;
 67 |       this.setState({ data: newData });
 68 |     }
 69 |   }
 70 |   saveRow(e, key) {
 71 |     e.persist();
 72 |     this.setState({
 73 |       loading: true,
 74 |     });
 75 |     setTimeout(() => {
 76 |       if (this.clickedCancel) {
 77 |         this.clickedCancel = false;
 78 |         return;
 79 |       }
 80 |       const target = this.getRowByKey(key) || {};
 81 |       if (!target.workId || !target.name || !target.department) {
 82 |         message.error('請填寫完整成員信息。');
 83 |         e.target.focus();
 84 |         this.setState({
 85 |           loading: false,
 86 |         });
 87 |         return;
 88 |       }
 89 |       delete target.isNew;
 90 |       this.toggleEditable(e, key);
 91 |       this.props.onChange(this.state.data);
 92 |       this.setState({
 93 |         loading: false,
 94 |       });
 95 |     }, 500);
 96 |   }
 97 |   cancel(e, key) {
 98 |     this.clickedCancel = true;
 99 |     e.preventDefault();
100 |     const newData = this.state.data.map(item => ({ ...item }));
101 |     const target = this.getRowByKey(key, newData);
102 |     if (this.cacheOriginData[key]) {
103 |       Object.assign(target, this.cacheOriginData[key]);
104 |       target.editable = false;
105 |       delete this.cacheOriginData[key];
106 |     }
107 |     this.setState({ data: newData });
108 |     this.clickedCancel = false;
109 |   }
110 |   render() {
111 |     const columns = [
112 |       {
113 |         title: '成員姓名',
114 |         dataIndex: 'name',
115 |         key: 'name',
116 |         width: '20%',
117 |         render: (text, record) => {
118 |           if (record.editable) {
119 |             return (
120 |               <Input
121 |                 value={text}
122 |                 autoFocus
123 |                 onChange={e => this.handleFieldChange(e, 'name', record.key)}
124 |                 onKeyPress={e => this.handleKeyPress(e, record.key)}
125 |                 placeholder="成員姓名"
126 |               />
127 |             );
128 |           }
129 |           return text;
130 |         },
131 |       },
132 |       {
133 |         title: '工號',
134 |         dataIndex: 'workId',
135 |         key: 'workId',
136 |         width: '20%',
137 |         render: (text, record) => {
138 |           if (record.editable) {
139 |             return (
140 |               <Input
141 |                 value={text}
142 |                 onChange={e => this.handleFieldChange(e, 'workId', record.key)}
143 |                 onKeyPress={e => this.handleKeyPress(e, record.key)}
144 |                 placeholder="工號"
145 |               />
146 |             );
147 |           }
148 |           return text;
149 |         },
150 |       },
151 |       {
152 |         title: '所屬部門',
153 |         dataIndex: 'department',
154 |         key: 'department',
155 |         width: '40%',
156 |         render: (text, record) => {
157 |           if (record.editable) {
158 |             return (
159 |               <Input
160 |                 value={text}
161 |                 onChange={e => this.handleFieldChange(e, 'department', record.key)}
162 |                 onKeyPress={e => this.handleKeyPress(e, record.key)}
163 |                 placeholder="所屬部門"
164 |               />
165 |             );
166 |           }
167 |           return text;
168 |         },
169 |       },
170 |       {
171 |         title: '操作',
172 |         key: 'action',
173 |         render: (text, record) => {
174 |           if (!!record.editable && this.state.loading) {
175 |             return null;
176 |           }
177 |           if (record.editable) {
178 |             if (record.isNew) {
179 |               return (
180 |                 <span>
181 |                   <a onClick={e => this.saveRow(e, record.key)}>添加</a>
182 |                   <Divider type="vertical" />
183 |                   <Popconfirm title="是否要刪除此行？" onConfirm={() => this.remove(record.key)}>
184 |                     <a>刪除</a>
185 |                   </Popconfirm>
186 |                 </span>
187 |               );
188 |             }
189 |             return (
190 |               <span>
191 |                 <a onClick={e => this.saveRow(e, record.key)}>保存</a>
192 |                 <Divider type="vertical" />
193 |                 <a onClick={e => this.cancel(e, record.key)}>取消</a>
194 |               </span>
195 |             );
196 |           }
197 |           return (
198 |             <span>
199 |               <a onClick={e => this.toggleEditable(e, record.key)}>編輯</a>
200 |               <Divider type="vertical" />
201 |               <Popconfirm title="是否要刪除此行？" onConfirm={() => this.remove(record.key)}>
202 |                 <a>刪除</a>
203 |               </Popconfirm>
204 |             </span>
205 |           );
206 |         },
207 |       },
208 |     ];
209 | 
210 |     return (
211 |       <Fragment>
212 |         <Table
213 |           loading={this.state.loading}
214 |           columns={columns}
215 |           dataSource={this.state.data}
216 |           pagination={false}
217 |           rowClassName={record => {
218 |             return record.editable ? styles.editable : '';
219 |           }}
220 |         />
221 |         <Button
222 |           style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
223 |           type="dashed"
224 |           onClick={this.newMember}
225 |           icon="plus"
226 |         >
227 |           新增成員
228 |         </Button>
229 |       </Fragment>
230 |     );
231 |   }
232 | }
233 | 


--------------------------------------------------------------------------------
/project/List/Applications.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import numeral from 'numeral';
  3 | import { connect } from 'dva';
  4 | import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
  5 | 
  6 | import TagSelect from 'components/TagSelect';
  7 | import StandardFormRow from 'components/StandardFormRow';
  8 | 
  9 | import styles from './Applications.less';
 10 | 
 11 | const { Option } = Select;
 12 | const FormItem = Form.Item;
 13 | 
 14 | const formatWan = val => {
 15 |   const v = val * 1;
 16 |   if (!v || isNaN(v)) return '';
 17 | 
 18 |   let result = val;
 19 |   if (val > 10000) {
 20 |     result = Math.floor(val / 10000);
 21 |     result = (
 22 |       <span>
 23 |         {result}
 24 |         <em className={styles.wan}>萬</em>
 25 |       </span>
 26 |     );
 27 |   }
 28 |   return result;
 29 | };
 30 | 
 31 | /* eslint react/no-array-index-key: 0 */
 32 | @Form.create()
 33 | @connect(({ list, loading }) => ({
 34 |   list,
 35 |   loading: loading.models.list,
 36 | }))
 37 | export default class FilterCardList extends PureComponent {
 38 |   componentDidMount() {
 39 |     this.props.dispatch({
 40 |       type: 'list/fetch',
 41 |       payload: {
 42 |         count: 8,
 43 |       },
 44 |     });
 45 |   }
 46 | 
 47 |   handleFormSubmit = () => {
 48 |     const { form, dispatch } = this.props;
 49 |     // setTimeout 用於保證獲取表單值是在所有表單字段更新完畢的時候
 50 |     setTimeout(() => {
 51 |       form.validateFields(err => {
 52 |         if (!err) {
 53 |           // eslint-disable-next-line
 54 |           dispatch({
 55 |             type: 'list/fetch',
 56 |             payload: {
 57 |               count: 8,
 58 |             },
 59 |           });
 60 |         }
 61 |       });
 62 |     }, 0);
 63 |   };
 64 | 
 65 |   render() {
 66 |     const { list: { list }, loading, form } = this.props;
 67 |     const { getFieldDecorator } = form;
 68 | 
 69 |     const CardInfo = ({ activeUser, newUser }) => (
 70 |       <div className={styles.cardInfo}>
 71 |         <div>
 72 |           <p>活躍用戶</p>
 73 |           <p>{activeUser}</p>
 74 |         </div>
 75 |         <div>
 76 |           <p>新增用戶</p>
 77 |           <p>{newUser}</p>
 78 |         </div>
 79 |       </div>
 80 |     );
 81 | 
 82 |     const formItemLayout = {
 83 |       wrapperCol: {
 84 |         xs: { span: 24 },
 85 |         sm: { span: 16 },
 86 |       },
 87 |     };
 88 | 
 89 |     const itemMenu = (
 90 |       <Menu>
 91 |         <Menu.Item>
 92 |           <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
 93 |             1st menu item
 94 |           </a>
 95 |         </Menu.Item>
 96 |         <Menu.Item>
 97 |           <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
 98 |             2nd menu item
 99 |           </a>
100 |         </Menu.Item>
101 |         <Menu.Item>
102 |           <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
103 |             3d menu item
104 |           </a>
105 |         </Menu.Item>
106 |       </Menu>
107 |     );
108 | 
109 |     return (
110 |       <div className={styles.filterCardList}>
111 |         <Card bordered={false}>
112 |           <Form layout="inline">
113 |             <StandardFormRow title="所屬類目" block style={{ paddingBottom: 11 }}>
114 |               <FormItem>
115 |                 {getFieldDecorator('category')(
116 |                   <TagSelect onChange={this.handleFormSubmit} expandable>
117 |                     <TagSelect.Option value="cat1">類目壹</TagSelect.Option>
118 |                     <TagSelect.Option value="cat2">類目二</TagSelect.Option>
119 |                     <TagSelect.Option value="cat3">類目三</TagSelect.Option>
120 |                     <TagSelect.Option value="cat4">類目四</TagSelect.Option>
121 |                     <TagSelect.Option value="cat5">類目五</TagSelect.Option>
122 |                     <TagSelect.Option value="cat6">類目六</TagSelect.Option>
123 |                     <TagSelect.Option value="cat7">類目七</TagSelect.Option>
124 |                     <TagSelect.Option value="cat8">類目八</TagSelect.Option>
125 |                     <TagSelect.Option value="cat9">類目九</TagSelect.Option>
126 |                     <TagSelect.Option value="cat10">類目十</TagSelect.Option>
127 |                     <TagSelect.Option value="cat11">類目十壹</TagSelect.Option>
128 |                     <TagSelect.Option value="cat12">類目十二</TagSelect.Option>
129 |                   </TagSelect>
130 |                 )}
131 |               </FormItem>
132 |             </StandardFormRow>
133 |             <StandardFormRow title="其它選項" grid last>
134 |               <Row gutter={16}>
135 |                 <Col lg={8} md={10} sm={10} xs={24}>
136 |                   <FormItem {...formItemLayout} label="作者">
137 |                     {getFieldDecorator('author', {})(
138 |                       <Select
139 |                         onChange={this.handleFormSubmit}
140 |                         placeholder="不限"
141 |                         style={{ maxWidth: 200, width: '100%' }}
142 |                       >
143 |                         <Option value="lisa">王昭君</Option>
144 |                       </Select>
145 |                     )}
146 |                   </FormItem>
147 |                 </Col>
148 |                 <Col lg={8} md={10} sm={10} xs={24}>
149 |                   <FormItem {...formItemLayout} label="好評度">
150 |                     {getFieldDecorator('rate', {})(
151 |                       <Select
152 |                         onChange={this.handleFormSubmit}
153 |                         placeholder="不限"
154 |                         style={{ maxWidth: 200, width: '100%' }}
155 |                       >
156 |                         <Option value="good">優秀</Option>
157 |                         <Option value="normal">普通</Option>
158 |                       </Select>
159 |                     )}
160 |                   </FormItem>
161 |                 </Col>
162 |               </Row>
163 |             </StandardFormRow>
164 |           </Form>
165 |         </Card>
166 |         <List
167 |           rowKey="id"
168 |           style={{ marginTop: 24 }}
169 |           grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
170 |           loading={loading}
171 |           dataSource={list}
172 |           renderItem={item => (
173 |             <List.Item key={item.id}>
174 |               <Card
175 |                 hoverable
176 |                 bodyStyle={{ paddingBottom: 20 }}
177 |                 actions={[
178 |                   <Tooltip title="下載">
179 |                     <Icon type="download" />
180 |                   </Tooltip>,
181 |                   <Tooltip title="編輯">
182 |                     <Icon type="edit" />
183 |                   </Tooltip>,
184 |                   <Tooltip title="分享">
185 |                     <Icon type="share-alt" />
186 |                   </Tooltip>,
187 |                   <Dropdown overlay={itemMenu}>
188 |                     <Icon type="ellipsis" />
189 |                   </Dropdown>,
190 |                 ]}
191 |               >
192 |                 <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
193 |                 <div className={styles.cardItemContent}>
194 |                   <CardInfo
195 |                     activeUser={formatWan(item.activeUser)}
196 |                     newUser={numeral(item.newUser).format('0,0')}
197 |                   />
198 |                 </div>
199 |               </Card>
200 |             </List.Item>
201 |           )}
202 |         />
203 |       </div>
204 |     );
205 |   }
206 | }
207 | 


--------------------------------------------------------------------------------
/project/List/Articles.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, Fragment } from 'react';
  2 | import moment from 'moment';
  3 | import { connect } from 'dva';
  4 | import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
  5 | 
  6 | import TagSelect from 'components/TagSelect';
  7 | import StandardFormRow from 'components/StandardFormRow';
  8 | import styles from './Articles.less';
  9 | 
 10 | const { Option } = Select;
 11 | const FormItem = Form.Item;
 12 | 
 13 | const pageSize = 5;
 14 | 
 15 | @Form.create()
 16 | @connect(({ list, loading }) => ({
 17 |   list,
 18 |   loading: loading.models.list,
 19 | }))
 20 | export default class SearchList extends Component {
 21 |   componentDidMount() {
 22 |     this.fetchMore();
 23 |   }
 24 | 
 25 |   setOwner = () => {
 26 |     const { form } = this.props;
 27 |     form.setFieldsValue({
 28 |       owner: ['wzj'],
 29 |     });
 30 |   };
 31 | 
 32 |   fetchMore = () => {
 33 |     this.props.dispatch({
 34 |       type: 'list/appendFetch',
 35 |       payload: {
 36 |         count: pageSize,
 37 |       },
 38 |     });
 39 |   };
 40 | 
 41 |   render() {
 42 |     const { form, list: { list }, loading } = this.props;
 43 |     const { getFieldDecorator } = form;
 44 | 
 45 |     const owners = [
 46 |       {
 47 |         id: 'wzj',
 48 |         name: '我自己',
 49 |       },
 50 |       {
 51 |         id: 'wjh',
 52 |         name: '吳家豪',
 53 |       },
 54 |       {
 55 |         id: 'zxx',
 56 |         name: '週星星',
 57 |       },
 58 |       {
 59 |         id: 'zly',
 60 |         name: '趙麗穎',
 61 |       },
 62 |       {
 63 |         id: 'ym',
 64 |         name: '姚明',
 65 |       },
 66 |     ];
 67 | 
 68 |     const IconText = ({ type, text }) => (
 69 |       <span>
 70 |         <Icon type={type} style={{ marginRight: 8 }} />
 71 |         {text}
 72 |       </span>
 73 |     );
 74 | 
 75 |     const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
 76 |       <div className={styles.listContent}>
 77 |         <div className={styles.description}>{content}</div>
 78 |         <div className={styles.extra}>
 79 |           <Avatar src={avatar} size="small" />
 80 |           <a href={href}>{owner}</a> 發布在 <a href={href}>{href}</a>
 81 |           <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
 82 |         </div>
 83 |       </div>
 84 |     );
 85 | 
 86 |     const formItemLayout = {
 87 |       wrapperCol: {
 88 |         xs: { span: 24 },
 89 |         sm: { span: 24 },
 90 |         md: { span: 12 },
 91 |       },
 92 |     };
 93 | 
 94 |     const loadMore =
 95 |       list.length > 0 ? (
 96 |         <div style={{ textAlign: 'center', marginTop: 16 }}>
 97 |           <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
 98 |             {loading ? (
 99 |               <span>
100 |                 <Icon type="loading" /> 加載中...
101 |               </span>
102 |             ) : (
103 |               '加載更多'
104 |             )}
105 |           </Button>
106 |         </div>
107 |       ) : null;
108 | 
109 |     return (
110 |       <Fragment>
111 |         <Card bordered={false}>
112 |           <Form layout="inline">
113 |             <StandardFormRow title="所屬類目" block style={{ paddingBottom: 11 }}>
114 |               <FormItem>
115 |                 {getFieldDecorator('category')(
116 |                   <TagSelect onChange={this.handleFormSubmit} expandable>
117 |                     <TagSelect.Option value="cat1">類目壹</TagSelect.Option>
118 |                     <TagSelect.Option value="cat2">類目二</TagSelect.Option>
119 |                     <TagSelect.Option value="cat3">類目三</TagSelect.Option>
120 |                     <TagSelect.Option value="cat4">類目四</TagSelect.Option>
121 |                     <TagSelect.Option value="cat5">類目五</TagSelect.Option>
122 |                     <TagSelect.Option value="cat6">類目六</TagSelect.Option>
123 |                     <TagSelect.Option value="cat7">類目七</TagSelect.Option>
124 |                     <TagSelect.Option value="cat8">類目八</TagSelect.Option>
125 |                     <TagSelect.Option value="cat9">類目九</TagSelect.Option>
126 |                     <TagSelect.Option value="cat10">類目十</TagSelect.Option>
127 |                     <TagSelect.Option value="cat11">類目十壹</TagSelect.Option>
128 |                     <TagSelect.Option value="cat12">類目十二</TagSelect.Option>
129 |                   </TagSelect>
130 |                 )}
131 |               </FormItem>
132 |             </StandardFormRow>
133 |             <StandardFormRow title="owner" grid>
134 |               <Row>
135 |                 <Col lg={16} md={24} sm={24} xs={24}>
136 |                   <FormItem>
137 |                     {getFieldDecorator('owner', {
138 |                       initialValue: ['wjh', 'zxx'],
139 |                     })(
140 |                       <Select
141 |                         mode="multiple"
142 |                         style={{ maxWidth: 286, width: '100%' }}
143 |                         placeholder="選擇 owner"
144 |                       >
145 |                         {owners.map(owner => (
146 |                           <Option key={owner.id} value={owner.id}>
147 |                             {owner.name}
148 |                           </Option>
149 |                         ))}
150 |                       </Select>
151 |                     )}
152 |                     <a className={styles.selfTrigger} onClick={this.setOwner}>
153 |                       只看自己的
154 |                     </a>
155 |                   </FormItem>
156 |                 </Col>
157 |               </Row>
158 |             </StandardFormRow>
159 |             <StandardFormRow title="其它選項" grid last>
160 |               <Row gutter={16}>
161 |                 <Col xl={8} lg={10} md={12} sm={24} xs={24}>
162 |                   <FormItem {...formItemLayout} label="活躍用戶">
163 |                     {getFieldDecorator('user', {})(
164 |                       <Select
165 |                         onChange={this.handleFormSubmit}
166 |                         placeholder="不限"
167 |                         style={{ maxWidth: 200, width: '100%' }}
168 |                       >
169 |                         <Option value="lisa">李三</Option>
170 |                       </Select>
171 |                     )}
172 |                   </FormItem>
173 |                 </Col>
174 |                 <Col xl={8} lg={10} md={12} sm={24} xs={24}>
175 |                   <FormItem {...formItemLayout} label="好評度">
176 |                     {getFieldDecorator('rate', {})(
177 |                       <Select
178 |                         onChange={this.handleFormSubmit}
179 |                         placeholder="不限"
180 |                         style={{ maxWidth: 200, width: '100%' }}
181 |                       >
182 |                         <Option value="good">優秀</Option>
183 |                       </Select>
184 |                     )}
185 |                   </FormItem>
186 |                 </Col>
187 |               </Row>
188 |             </StandardFormRow>
189 |           </Form>
190 |         </Card>
191 |         <Card
192 |           style={{ marginTop: 24 }}
193 |           bordered={false}
194 |           bodyStyle={{ padding: '8px 32px 32px 32px' }}
195 |         >
196 |           <List
197 |             size="large"
198 |             loading={list.length === 0 ? loading : false}
199 |             rowKey="id"
200 |             itemLayout="vertical"
201 |             loadMore={loadMore}
202 |             dataSource={list}
203 |             renderItem={item => (
204 |               <List.Item
205 |                 key={item.id}
206 |                 actions={[
207 |                   <IconText type="star-o" text={item.star} />,
208 |                   <IconText type="like-o" text={item.like} />,
209 |                   <IconText type="message" text={item.message} />,
210 |                 ]}
211 |                 extra={<div className={styles.listItemExtra} />}
212 |               >
213 |                 <List.Item.Meta
214 |                   title={
215 |                     <a className={styles.listItemMetaTitle} href={item.href}>
216 |                       {item.title}
217 |                     </a>
218 |                   }
219 |                   description={
220 |                     <span>
221 |                       <Tag>Ant Design</Tag>
222 |                       <Tag>設計語言</Tag>
223 |                       <Tag>螞蟻金服</Tag>
224 |                     </span>
225 |                   }
226 |                 />
227 |                 <ListContent data={item} />
228 |               </List.Item>
229 |             )}
230 |           />
231 |         </Card>
232 |       </Fragment>
233 |     );
234 |   }
235 | }
236 | 


--------------------------------------------------------------------------------
/project/Dashboard/Workplace.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import moment from 'moment';
  3 | import { connect } from 'dva';
  4 | import { Link } from 'dva/router';
  5 | import { Row, Col, Card, List, Avatar } from 'antd';
  6 | 
  7 | import { Radar } from 'components/Charts';
  8 | import EditableLinkGroup from 'components/EditableLinkGroup';
  9 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 10 | 
 11 | import styles from './Workplace.less';
 12 | 
 13 | const links = [
 14 |   {
 15 |     title: '操作壹',
 16 |     href: '',
 17 |   },
 18 |   {
 19 |     title: '操作二',
 20 |     href: '',
 21 |   },
 22 |   {
 23 |     title: '操作三',
 24 |     href: '',
 25 |   },
 26 |   {
 27 |     title: '操作四',
 28 |     href: '',
 29 |   },
 30 |   {
 31 |     title: '操作五',
 32 |     href: '',
 33 |   },
 34 |   {
 35 |     title: '操作六',
 36 |     href: '',
 37 |   },
 38 | ];
 39 | 
 40 | const members = [
 41 |   {
 42 |     id: 'members-1',
 43 |     title: '科學搬磚組',
 44 |     logo: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
 45 |     link: '',
 46 |   },
 47 |   {
 48 |     id: 'members-2',
 49 |     title: '程序員日常',
 50 |     logo: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
 51 |     link: '',
 52 |   },
 53 |   {
 54 |     id: 'members-3',
 55 |     title: '設計天團',
 56 |     logo: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
 57 |     link: '',
 58 |   },
 59 |   {
 60 |     id: 'members-4',
 61 |     title: '中二少女團',
 62 |     logo: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
 63 |     link: '',
 64 |   },
 65 |   {
 66 |     id: 'members-5',
 67 |     title: '騙妳學計算機',
 68 |     logo: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
 69 |     link: '',
 70 |   },
 71 | ];
 72 | 
 73 | @connect(({ project, activities, chart, loading }) => ({
 74 |   project,
 75 |   activities,
 76 |   chart,
 77 |   projectLoading: loading.effects['project/fetchNotice'],
 78 |   activitiesLoading: loading.effects['activities/fetchList'],
 79 | }))
 80 | export default class Workplace extends PureComponent {
 81 |   componentDidMount() {
 82 |     const { dispatch } = this.props;
 83 |     dispatch({
 84 |       type: 'project/fetchNotice',
 85 |     });
 86 |     dispatch({
 87 |       type: 'activities/fetchList',
 88 |     });
 89 |     dispatch({
 90 |       type: 'chart/fetch',
 91 |     });
 92 |   }
 93 | 
 94 |   componentWillUnmount() {
 95 |     const { dispatch } = this.props;
 96 |     dispatch({
 97 |       type: 'chart/clear',
 98 |     });
 99 |   }
100 | 
101 |   renderActivities() {
102 |     const { activities: { list } } = this.props;
103 |     return list.map(item => {
104 |       const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
105 |         if (item[key]) {
106 |           return (
107 |             <a href={item[key].link} key={item[key].name}>
108 |               {item[key].name}
109 |             </a>
110 |           );
111 |         }
112 |         return key;
113 |       });
114 |       return (
115 |         <List.Item key={item.id}>
116 |           <List.Item.Meta
117 |             avatar={<Avatar src={item.user.avatar} />}
118 |             title={
119 |               <span>
120 |                 <a className={styles.username}>{item.user.name}</a>
121 |                 &nbsp;
122 |                 <span className={styles.event}>{events}</span>
123 |               </span>
124 |             }
125 |             description={
126 |               <span className={styles.datetime} title={item.updatedAt}>
127 |                 {moment(item.updatedAt).fromNow()}
128 |               </span>
129 |             }
130 |           />
131 |         </List.Item>
132 |       );
133 |     });
134 |   }
135 | 
136 |   render() {
137 |     const {
138 |       project: { notice },
139 |       projectLoading,
140 |       activitiesLoading,
141 |       chart: { radarData },
142 |     } = this.props;
143 | 
144 |     const pageHeaderContent = (
145 |       <div className={styles.pageHeaderContent}>
146 |         <div className={styles.avatar}>
147 |           <Avatar
148 |             size="large"
149 |             src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
150 |           />
151 |         </div>
152 |         <div className={styles.content}>
153 |           <div className={styles.contentTitle}>早安，曲麗麗，祝妳開心每壹天！</div>
154 |           <div>交互專家 | 螞蟻金服－某某某事業群－某某平臺部－某某技術部－UED</div>
155 |         </div>
156 |       </div>
157 |     );
158 | 
159 |     const extraContent = (
160 |       <div className={styles.extraContent}>
161 |         <div className={styles.statItem}>
162 |           <p>項目數</p>
163 |           <p>56</p>
164 |         </div>
165 |         <div className={styles.statItem}>
166 |           <p>團隊內排名</p>
167 |           <p>
168 |             8<span> / 24</span>
169 |           </p>
170 |         </div>
171 |         <div className={styles.statItem}>
172 |           <p>項目訪問</p>
173 |           <p>2,223</p>
174 |         </div>
175 |       </div>
176 |     );
177 | 
178 |     return (
179 |       <PageHeaderLayout content={pageHeaderContent} extraContent={extraContent}>
180 |         <Row gutter={24}>
181 |           <Col xl={16} lg={24} md={24} sm={24} xs={24}>
182 |             <Card
183 |               className={styles.projectList}
184 |               style={{ marginBottom: 24 }}
185 |               title="進行中的項目"
186 |               bordered={false}
187 |               extra={<Link to="/">全部項目</Link>}
188 |               loading={projectLoading}
189 |               bodyStyle={{ padding: 0 }}
190 |             >
191 |               {notice.map(item => (
192 |                 <Card.Grid className={styles.projectGrid} key={item.id}>
193 |                   <Card bodyStyle={{ padding: 0 }} bordered={false}>
194 |                     <Card.Meta
195 |                       title={
196 |                         <div className={styles.cardTitle}>
197 |                           <Avatar size="small" src={item.logo} />
198 |                           <Link to={item.href}>{item.title}</Link>
199 |                         </div>
200 |                       }
201 |                       description={item.description}
202 |                     />
203 |                     <div className={styles.projectItemContent}>
204 |                       <Link to={item.memberLink}>{item.member || ''}</Link>
205 |                       {item.updatedAt && (
206 |                         <span className={styles.datetime} title={item.updatedAt}>
207 |                           {moment(item.updatedAt).fromNow()}
208 |                         </span>
209 |                       )}
210 |                     </div>
211 |                   </Card>
212 |                 </Card.Grid>
213 |               ))}
214 |             </Card>
215 |             <Card
216 |               bodyStyle={{ padding: 0 }}
217 |               bordered={false}
218 |               className={styles.activeCard}
219 |               title="動態"
220 |               loading={activitiesLoading}
221 |             >
222 |               <List loading={activitiesLoading} size="large">
223 |                 <div className={styles.activitiesList}>{this.renderActivities()}</div>
224 |               </List>
225 |             </Card>
226 |           </Col>
227 |           <Col xl={8} lg={24} md={24} sm={24} xs={24}>
228 |             <Card
229 |               style={{ marginBottom: 24 }}
230 |               title="快速開始 / 便捷導航"
231 |               bordered={false}
232 |               bodyStyle={{ padding: 0 }}
233 |             >
234 |               <EditableLinkGroup onAdd={() => {}} links={links} linkElement={Link} />
235 |             </Card>
236 |             <Card
237 |               style={{ marginBottom: 24 }}
238 |               bordered={false}
239 |               title="XX 指數"
240 |               loading={radarData.length === 0}
241 |             >
242 |               <div className={styles.chart}>
243 |                 <Radar hasLegend height={343} data={radarData} />
244 |               </div>
245 |             </Card>
246 |             <Card bodyStyle={{ paddingTop: 12, paddingBottom: 12 }} bordered={false} title="團隊">
247 |               <div className={styles.members}>
248 |                 <Row gutter={48}>
249 |                   {members.map(item => (
250 |                     <Col span={12} key={`members-item-${item.id}`}>
251 |                       <Link to={item.link}>
252 |                         <Avatar src={item.logo} size="small" />
253 |                         <span className={styles.member}>{item.title}</span>
254 |                       </Link>
255 |                     </Col>
256 |                   ))}
257 |                 </Row>
258 |               </div>
259 |             </Card>
260 |           </Col>
261 |         </Row>
262 |       </PageHeaderLayout>
263 |     );
264 |   }
265 | }
266 | 


--------------------------------------------------------------------------------
/project/User/Register.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'dva';
  3 | import { routerRedux, Link } from 'dva/router';
  4 | import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
  5 | import styles from './Register.less';
  6 | 
  7 | const FormItem = Form.Item;
  8 | const { Option } = Select;
  9 | const InputGroup = Input.Group;
 10 | 
 11 | const passwordStatusMap = {
 12 |   ok: <div className={styles.success}>強度：強</div>,
 13 |   pass: <div className={styles.warning}>強度：中</div>,
 14 |   poor: <div className={styles.error}>強度：太短</div>,
 15 | };
 16 | 
 17 | const passwordProgressMap = {
 18 |   ok: 'success',
 19 |   pass: 'normal',
 20 |   poor: 'exception',
 21 | };
 22 | 
 23 | @connect(({ register, loading }) => ({
 24 |   register,
 25 |   submitting: loading.effects['register/submit'],
 26 | }))
 27 | @Form.create()
 28 | export default class Register extends Component {
 29 |   state = {
 30 |     count: 0,
 31 |     confirmDirty: false,
 32 |     visible: false,
 33 |     help: '',
 34 |     prefix: '86',
 35 |   };
 36 | 
 37 |   componentWillReceiveProps(nextProps) {
 38 |     const account = this.props.form.getFieldValue('mail');
 39 |     if (nextProps.register.status === 'ok') {
 40 |       this.props.dispatch(
 41 |         routerRedux.push({
 42 |           pathname: '/user/register-result',
 43 |           state: {
 44 |             account,
 45 |           },
 46 |         })
 47 |       );
 48 |     }
 49 |   }
 50 | 
 51 |   componentWillUnmount() {
 52 |     clearInterval(this.interval);
 53 |   }
 54 | 
 55 |   onGetCaptcha = () => {
 56 |     let count = 59;
 57 |     this.setState({ count });
 58 |     this.interval = setInterval(() => {
 59 |       count -= 1;
 60 |       this.setState({ count });
 61 |       if (count === 0) {
 62 |         clearInterval(this.interval);
 63 |       }
 64 |     }, 1000);
 65 |   };
 66 | 
 67 |   getPasswordStatus = () => {
 68 |     const { form } = this.props;
 69 |     const value = form.getFieldValue('password');
 70 |     if (value && value.length > 9) {
 71 |       return 'ok';
 72 |     }
 73 |     if (value && value.length > 5) {
 74 |       return 'pass';
 75 |     }
 76 |     return 'poor';
 77 |   };
 78 | 
 79 |   handleSubmit = e => {
 80 |     e.preventDefault();
 81 |     this.props.form.validateFields({ force: true }, (err, values) => {
 82 |       if (!err) {
 83 |         this.props.dispatch({
 84 |           type: 'register/submit',
 85 |           payload: {
 86 |             ...values,
 87 |             prefix: this.state.prefix,
 88 |           },
 89 |         });
 90 |       }
 91 |     });
 92 |   };
 93 | 
 94 |   handleConfirmBlur = e => {
 95 |     const { value } = e.target;
 96 |     this.setState({ confirmDirty: this.state.confirmDirty || !!value });
 97 |   };
 98 | 
 99 |   checkConfirm = (rule, value, callback) => {
100 |     const { form } = this.props;
101 |     if (value && value !== form.getFieldValue('password')) {
102 |       callback('兩次輸入的密碼不匹配!');
103 |     } else {
104 |       callback();
105 |     }
106 |   };
107 | 
108 |   checkPassword = (rule, value, callback) => {
109 |     if (!value) {
110 |       this.setState({
111 |         help: '請輸入密碼！',
112 |         visible: !!value,
113 |       });
114 |       callback('error');
115 |     } else {
116 |       this.setState({
117 |         help: '',
118 |       });
119 |       if (!this.state.visible) {
120 |         this.setState({
121 |           visible: !!value,
122 |         });
123 |       }
124 |       if (value.length < 6) {
125 |         callback('error');
126 |       } else {
127 |         const { form } = this.props;
128 |         if (value && this.state.confirmDirty) {
129 |           form.validateFields(['confirm'], { force: true });
130 |         }
131 |         callback();
132 |       }
133 |     }
134 |   };
135 | 
136 |   changePrefix = value => {
137 |     this.setState({
138 |       prefix: value,
139 |     });
140 |   };
141 | 
142 |   renderPasswordProgress = () => {
143 |     const { form } = this.props;
144 |     const value = form.getFieldValue('password');
145 |     const passwordStatus = this.getPasswordStatus();
146 |     return value && value.length ? (
147 |       <div className={styles[`progress-${passwordStatus}`]}>
148 |         <Progress
149 |           status={passwordProgressMap[passwordStatus]}
150 |           className={styles.progress}
151 |           strokeWidth={6}
152 |           percent={value.length * 10 > 100 ? 100 : value.length * 10}
153 |           showInfo={false}
154 |         />
155 |       </div>
156 |     ) : null;
157 |   };
158 | 
159 |   render() {
160 |     const { form, submitting } = this.props;
161 |     const { getFieldDecorator } = form;
162 |     const { count, prefix } = this.state;
163 |     return (
164 |       <div className={styles.main}>
165 |         <h3>註冊</h3>
166 |         <Form onSubmit={this.handleSubmit}>
167 |           <FormItem>
168 |             {getFieldDecorator('mail', {
169 |               rules: [
170 |                 {
171 |                   required: true,
172 |                   message: '請輸入郵箱地址！',
173 |                 },
174 |                 {
175 |                   type: 'email',
176 |                   message: '郵箱地址格式錯誤！',
177 |                 },
178 |               ],
179 |             })(<Input size="large" placeholder="郵箱" />)}
180 |           </FormItem>
181 |           <FormItem help={this.state.help}>
182 |             <Popover
183 |               content={
184 |                 <div style={{ padding: '4px 0' }}>
185 |                   {passwordStatusMap[this.getPasswordStatus()]}
186 |                   {this.renderPasswordProgress()}
187 |                   <div style={{ marginTop: 10 }}>
188 |                     請至少輸入 6 個字符。請不要使用容易被猜到的密碼。
189 |                   </div>
190 |                 </div>
191 |               }
192 |               overlayStyle={{ width: 240 }}
193 |               placement="right"
194 |               visible={this.state.visible}
195 |             >
196 |               {getFieldDecorator('password', {
197 |                 rules: [
198 |                   {
199 |                     validator: this.checkPassword,
200 |                   },
201 |                 ],
202 |               })(<Input size="large" type="password" placeholder="至少6位密碼，區分大小寫" />)}
203 |             </Popover>
204 |           </FormItem>
205 |           <FormItem>
206 |             {getFieldDecorator('confirm', {
207 |               rules: [
208 |                 {
209 |                   required: true,
210 |                   message: '請確認密碼！',
211 |                 },
212 |                 {
213 |                   validator: this.checkConfirm,
214 |                 },
215 |               ],
216 |             })(<Input size="large" type="password" placeholder="確認密碼" />)}
217 |           </FormItem>
218 |           <FormItem>
219 |             <InputGroup compact>
220 |               <Select
221 |                 size="large"
222 |                 value={prefix}
223 |                 onChange={this.changePrefix}
224 |                 style={{ width: '20%' }}
225 |               >
226 |                 <Option value="86">+86</Option>
227 |                 <Option value="87">+87</Option>
228 |               </Select>
229 |               {getFieldDecorator('mobile', {
230 |                 rules: [
231 |                   {
232 |                     required: true,
233 |                     message: '請輸入手機號！',
234 |                   },
235 |                   {
236 |                     pattern: /^1\d{10}$/,
237 |                     message: '手機號格式錯誤！',
238 |                   },
239 |                 ],
240 |               })(<Input size="large" style={{ width: '80%' }} placeholder="11位手機號" />)}
241 |             </InputGroup>
242 |           </FormItem>
243 |           <FormItem>
244 |             <Row gutter={8}>
245 |               <Col span={16}>
246 |                 {getFieldDecorator('captcha', {
247 |                   rules: [
248 |                     {
249 |                       required: true,
250 |                       message: '請輸入驗證碼！',
251 |                     },
252 |                   ],
253 |                 })(<Input size="large" placeholder="驗證碼" />)}
254 |               </Col>
255 |               <Col span={8}>
256 |                 <Button
257 |                   size="large"
258 |                   disabled={count}
259 |                   className={styles.getCaptcha}
260 |                   onClick={this.onGetCaptcha}
261 |                 >
262 |                   {count ? `${count} s` : '獲取驗證碼'}
263 |                 </Button>
264 |               </Col>
265 |             </Row>
266 |           </FormItem>
267 |           <FormItem>
268 |             <Button
269 |               size="large"
270 |               loading={submitting}
271 |               className={styles.submit}
272 |               type="primary"
273 |               htmlType="submit"
274 |             >
275 |               註冊
276 |             </Button>
277 |             <Link className={styles.login} to="/user/login">
278 |               使用已有賬戶登錄
279 |             </Link>
280 |           </FormItem>
281 |         </Form>
282 |       </div>
283 |     );
284 |   }
285 | }
286 | 


--------------------------------------------------------------------------------
/lib/data.js:
--------------------------------------------------------------------------------
 1 | // 简体字符集
 2 | function simpChar() {
 3 | 	return '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳病并玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳捕卜哺补埠不布步簿部怖擦猜裁材才财睬踩采彩菜蔡餐参蚕残惭惨灿苍舱仓沧藏操糙槽曹草厕策侧册测层蹭插叉茬茶查碴搽察岔差诧拆柴豺搀掺蝉馋谗缠铲产阐颤昌猖场尝常长偿肠厂敞畅唱倡超抄钞朝嘲潮巢吵炒车扯撤掣彻澈郴臣辰尘晨忱沉陈趁衬撑称城橙成呈乘程惩澄诚承逞骋秤吃痴持匙池迟弛驰耻齿侈尺赤翅斥炽充冲虫崇宠抽酬畴踌稠愁筹仇绸瞅丑臭初出橱厨躇锄雏滁除楚础储矗搐触处揣川穿椽传船喘串疮窗幢床闯创吹炊捶锤垂春椿醇唇淳纯蠢戳绰疵茨磁雌辞慈瓷词此刺赐次聪葱囱匆从丛凑粗醋簇促蹿篡窜摧崔催脆瘁粹淬翠村存寸磋撮搓措挫错搭达答瘩打大呆歹傣戴带殆代贷袋待逮怠耽担丹单郸掸胆旦氮但惮淡诞弹蛋当挡党荡档刀捣蹈倒岛祷导到稻悼道盗德得的蹬灯登等瞪凳邓堤低滴迪敌笛狄涤翟嫡抵底地蒂第帝弟递缔颠掂滇碘点典靛垫电佃甸店惦奠淀殿碉叼雕凋刁掉吊钓调跌爹碟蝶迭谍叠丁盯叮钉顶鼎锭定订丢东冬董懂动栋侗恫冻洞兜抖斗陡豆逗痘都督毒犊独读堵睹赌杜镀肚度渡妒端短锻段断缎堆兑队对墩吨蹲敦顿囤钝盾遁掇哆多夺垛躲朵跺舵剁惰堕蛾峨鹅俄额讹娥恶厄扼遏鄂饿恩而儿耳尔饵洱二贰发罚筏伐乏阀法珐藩帆番翻樊矾钒繁凡烦反返范贩犯饭泛坊芳方肪房防妨仿访纺放菲非啡飞肥匪诽吠肺废沸费芬酚吩氛分纷坟焚汾粉奋份忿愤粪丰封枫蜂峰锋风疯烽逢冯缝讽奉凤佛否夫敷肤孵扶拂辐幅氟符伏俘服浮涪福袱弗甫抚辅俯釜斧脯腑府腐赴副覆赋复傅付阜父腹负富讣附妇缚咐噶嘎该改概钙盖溉干甘杆柑竿肝赶感秆敢赣冈刚钢缸肛纲岗港杠篙皋高膏羔糕搞镐稿告哥歌搁戈鸽胳疙割革葛格蛤阁隔铬个各给根跟耕更庚羹埂耿梗工攻功恭龚供躬公宫弓巩汞拱贡共钩勾沟苟狗垢构购够辜菇咕箍估沽孤姑鼓古蛊骨谷股故顾固雇刮瓜剐寡挂褂乖拐怪棺关官冠观管馆罐惯灌贯光广逛瑰规圭硅归龟闺轨鬼诡癸桂柜跪贵刽辊滚棍锅郭国果裹过哈骸孩海氦亥害骇酣憨邯韩含涵寒函喊罕翰撼捍旱憾悍焊汗汉夯杭航壕嚎豪毫郝好耗号浩呵喝荷菏核禾和何合盒貉阂河涸赫褐鹤贺嘿黑痕很狠恨哼亨横衡恒轰哄烘虹鸿洪宏弘红喉侯猴吼厚候后呼乎忽瑚壶葫胡蝴狐糊湖弧虎唬护互沪户花哗华猾滑画划化话槐徊怀淮坏欢环桓还缓换患唤痪豢焕涣宦幻荒慌黄磺蝗簧皇凰惶煌晃幌恍谎灰挥辉徽恢蛔回毁悔慧卉惠晦贿秽会烩汇讳诲绘荤昏婚魂浑混豁活伙火获或惑霍货祸击圾基机畸稽积箕肌饥迹激讥鸡姬绩缉吉极棘辑籍集及急疾汲即嫉级挤几脊己蓟技冀季伎祭剂悸济寄寂计记既忌际继纪嘉枷夹佳家加荚颊贾甲钾假稼价架驾嫁歼监坚尖笺间煎兼肩艰奸缄茧检柬碱硷拣捡简俭剪减荐槛鉴践贱见键箭件健舰剑饯渐溅涧建僵姜将浆江疆蒋桨奖讲匠酱降蕉椒礁焦胶交郊浇骄娇嚼搅铰矫侥脚狡角饺缴绞剿教酵轿较叫窖揭接皆秸街阶截劫节茎睛晶鲸京惊精粳经井警景颈静境敬镜径痉靖竟竞净炯窘揪究纠玖韭久灸九酒厩救旧臼舅咎就疚鞠拘狙疽居驹菊局咀矩举沮聚拒据巨具距踞锯俱句惧炬剧捐鹃娟倦眷卷绢撅攫抉掘倔爵桔杰捷睫竭洁结解姐戒藉芥界借介疥诫届巾筋斤金今津襟紧锦仅谨进靳晋禁近烬浸尽劲荆兢觉决诀绝均菌钧军君峻俊竣浚郡骏喀咖卡咯开揩楷凯慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕颗科壳咳可渴克刻客课肯啃垦恳坑吭空恐孔控抠口扣寇枯哭窟苦酷库裤夸垮挎跨胯块筷侩快宽款匡筐狂框矿眶旷况亏盔岿窥葵奎魁傀馈愧溃坤昆捆困括扩廓阔垃拉喇蜡腊辣啦莱来赖蓝婪栏拦篮阑兰澜谰揽览懒缆烂滥琅榔狼廊郎朗浪捞劳牢老佬姥酪烙涝勒乐雷镭蕾磊累儡垒擂肋类泪棱楞冷厘梨犁黎篱狸离漓理李里鲤礼莉荔吏栗丽厉励砾历利傈例俐痢立粒沥隶力璃哩俩联莲连镰廉怜涟帘敛脸链恋炼练粮凉梁粱良两辆量晾亮谅撩聊僚疗燎寥辽潦了撂镣廖料列裂烈劣猎琳林磷霖临邻鳞淋凛赁吝拎玲菱零龄铃伶羚凌灵陵岭领另令溜琉榴硫馏留刘瘤流柳六龙聋咙笼窿隆垄拢陇楼娄搂篓漏陋芦卢颅庐炉掳卤虏鲁麓碌露路赂鹿潞禄录陆戮驴吕铝侣旅履屡缕虑氯律率滤绿峦挛孪滦卵乱掠略抡轮伦仑沦纶论萝螺罗逻锣箩骡裸落洛骆络妈麻玛码蚂马骂嘛吗埋买麦卖迈脉瞒馒蛮满蔓曼慢漫谩芒茫盲氓忙莽猫茅锚毛矛铆卯茂冒帽貌贸么玫枚梅酶霉煤没眉媒镁每美昧寐妹媚门闷们萌蒙檬盟锰猛梦孟眯醚靡糜迷谜弥米秘觅泌蜜密幂棉眠绵冕免勉娩缅面苗描瞄藐秒渺庙妙蔑灭民抿皿敏悯闽明螟鸣铭名命谬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌谋牟某拇牡亩姆母墓暮幕募慕木目睦牧穆拿哪呐钠那娜纳氖乃奶耐奈南男难囊挠脑恼闹淖呢馁内嫩能妮霓倪泥尼拟你匿腻逆溺蔫拈年碾撵捻念娘酿鸟尿捏聂孽啮镊镍涅您柠狞凝宁拧泞牛扭钮纽脓浓农弄奴努怒女暖虐疟挪懦糯诺哦欧鸥殴藕呕偶沤啪趴爬帕怕琶拍排牌徘湃派攀潘盘磐盼畔判叛乓庞旁耪胖抛咆刨炮袍跑泡呸胚培裴赔陪配佩沛喷盆砰抨烹澎彭蓬棚硼篷膨朋鹏捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片骗飘漂瓢票撇瞥拼频贫品聘乒坪苹萍平凭瓶评屏坡泼颇婆破魄迫粕剖扑铺仆莆葡菩蒲埔朴圃普浦谱曝瀑期欺栖戚妻七凄漆柒沏其棋奇歧畦崎脐齐旗祈祁骑起岂乞企启契砌器气迄弃汽泣讫掐洽牵扦钎铅千迁签仟谦乾黔钱钳前潜遣浅谴堑嵌欠歉枪呛腔羌墙蔷强抢橇锹敲悄桥瞧乔侨巧鞘撬翘峭俏窍切茄且怯窃钦侵亲秦琴勤芹擒禽寝沁青轻氢倾卿清擎晴氰情顷请庆琼穷秋丘邱球求囚酋泅趋区蛆曲躯屈驱渠取娶龋趣去圈颧权醛泉全痊拳犬券劝缺炔瘸却鹊榷确雀裙群然燃冉染瓤壤攘嚷让饶扰绕惹热壬仁人忍韧任认刃妊纫扔仍日戎茸蓉荣融熔溶容绒冗揉柔肉茹蠕儒孺如辱乳汝入褥软阮蕊瑞锐闰润若弱撒洒萨腮鳃塞赛三叁伞散桑嗓丧搔骚扫嫂瑟色涩森僧莎砂杀刹沙纱傻啥煞筛晒珊苫杉山删煽衫闪陕擅赡膳善汕扇缮墒伤商赏晌上尚裳梢捎稍烧芍勺韶少哨邵绍奢赊蛇舌舍赦摄射慑涉社设砷申呻伸身深娠绅神沈审婶甚肾慎渗声生甥牲升绳省盛剩胜圣师失狮施湿诗尸虱十石拾时什食蚀实识史矢使屎驶始式示士世柿事拭誓逝势是嗜噬适仕侍释饰氏市恃室视试收手首守寿授售受瘦兽蔬枢梳殊抒输叔舒淑疏书赎孰熟薯暑曙署蜀黍鼠属术述树束戍竖墅庶数漱恕刷耍摔衰甩帅栓拴霜双爽谁水睡税吮瞬顺舜说硕朔烁斯撕嘶思私司丝死肆寺嗣四伺似饲巳松耸怂颂送宋讼诵搜艘擞嗽苏酥俗素速粟僳塑溯宿诉肃酸蒜算虽隋随绥髓碎岁穗遂隧祟孙损笋蓑梭唆缩琐索锁所塌他它她塔獭挞蹋踏胎苔抬台泰酞太态汰坍摊贪瘫滩坛檀痰潭谭谈坦毯袒碳探叹炭汤塘搪堂棠膛唐糖倘躺淌趟烫掏涛滔绦萄桃逃淘陶讨套特藤腾疼誊梯剔踢锑提题蹄啼体替嚏惕涕剃屉天添填田甜恬舔腆挑条迢眺跳贴铁帖厅听烃汀廷停亭庭挺艇通桐酮瞳同铜彤童桶捅筒统痛偷投头透凸秃突图徒途涂屠土吐兔湍团推颓腿蜕褪退吞屯臀拖托脱鸵陀驮驼椭妥拓唾挖哇蛙洼娃瓦袜歪外豌弯湾玩顽丸烷完碗挽晚皖惋宛婉万腕汪王亡枉网往旺望忘妄威巍微危韦违桅围唯惟为潍维苇萎委伟伪尾纬未蔚味畏胃喂魏位渭谓尉慰卫瘟温蚊文闻纹吻稳紊问嗡翁瓮挝蜗涡窝我斡卧握沃巫呜钨乌污诬屋无芜梧吾吴毋武五捂午舞伍侮坞戊雾晤物勿务悟误昔熙析西硒矽晰嘻吸锡牺稀息希悉膝夕惜熄烯溪汐犀檄袭席习媳喜铣洗系隙戏细瞎虾匣霞辖暇峡侠狭下厦夏吓掀锨先仙鲜纤咸贤衔舷闲涎弦嫌显险现献县腺馅羡宪陷限线相厢镶香箱襄湘乡翔祥详想响享项巷橡像向象萧硝霄削哮嚣销消宵淆晓小孝校肖啸笑效楔些歇蝎鞋协挟携邪斜胁谐写械卸蟹懈泄泻谢屑薪芯锌欣辛新忻心信衅星腥猩惺兴刑型形邢行醒幸杏性姓兄凶胸匈汹雄熊休修羞朽嗅锈秀袖绣墟戌需虚嘘须徐许蓄酗叙旭序畜恤絮婿绪续轩喧宣悬旋玄选癣眩绚靴薛学穴雪血勋熏循旬询寻驯巡殉汛训讯逊迅压押鸦鸭呀丫芽牙蚜崖衙涯雅哑亚讶焉咽阉烟淹盐严研蜒岩延言颜阎炎沿奄掩眼衍演艳堰燕厌砚雁唁彦焰宴谚验殃央鸯秧杨扬佯疡羊洋阳氧仰痒养样漾邀腰妖瑶摇尧遥窑谣姚咬舀药要耀椰噎耶爷野冶也页掖业叶曳腋夜液一壹医揖铱依伊衣颐夷遗移仪胰疑沂宜姨彝椅蚁倚已乙矣以艺抑易邑屹亿役臆逸肄疫亦裔意毅忆义益溢诣议谊译异翼翌绎茵荫因殷音阴姻吟银淫寅饮尹引隐印英樱婴鹰应缨莹萤营荧蝇迎赢盈影颖硬映哟拥佣臃痈庸雍踊蛹咏泳涌永恿勇用幽优悠忧尤由邮铀犹油游酉有友右佑釉诱又幼迂淤于盂榆虞愚舆余俞逾鱼愉渝渔隅予娱雨与屿禹宇语羽玉域芋郁吁遇喻峪御愈欲狱育誉浴寓裕预豫驭鸳渊冤元垣袁原援辕园员圆猿源缘远苑愿怨院曰约越跃钥岳粤月悦阅耘云郧匀陨允运蕴酝晕韵孕匝砸杂栽哉灾宰载再在咱攒暂赞赃脏葬遭糟凿藻枣早澡蚤躁噪造皂灶燥责择则泽贼怎增憎曾赠扎喳渣札轧铡闸眨栅榨咋乍炸诈摘斋宅窄债寨瞻毡詹粘沾盏斩辗崭展蘸栈占战站湛绽樟章彰漳张掌涨杖丈帐账仗胀瘴障招昭找沼赵照罩兆肇召遮折哲蛰辙者锗蔗这浙珍斟真甄砧臻贞针侦枕疹诊震振镇阵蒸挣睁征狰争怔整拯正政帧症郑证芝枝支吱蜘知肢脂汁之织职直植殖执值侄址指止趾只旨纸志挚掷至致置帜峙制智秩稚质炙痔滞治窒中盅忠钟衷终种肿重仲众舟周州洲诌粥轴肘帚咒皱宙昼骤珠株蛛朱猪诸诛逐竹烛煮拄瞩嘱主著柱助蛀贮铸筑住注祝驻抓爪拽专砖转撰赚篆桩庄装妆撞壮状椎锥追赘坠缀谆准捉拙卓桌琢茁酌啄着灼浊兹咨资姿滋淄孜紫仔籽滓子自渍字鬃棕踪宗综总纵邹走奏揍租足卒族祖诅阻组钻纂嘴醉最罪尊遵昨左佐柞做作坐座锕嗳嫒瑷暧霭谙铵鹌媪骜鳌钯呗钣鸨龅鹎贲锛荜哔滗铋筚跸苄缏笾骠飑飙镖镳鳔傧缤槟殡膑镔髌鬓禀饽钹鹁钸骖黪恻锸侪钗冁谄谶蒇忏婵骣觇禅镡伥苌怅阊鲳砗伧谌榇碜龀枨柽铖铛饬鸱铳俦帱雠刍绌蹰钏怆缍鹑辍龊鹚苁骢枞辏撺锉鹾哒鞑骀绐殚赕瘅箪谠砀裆焘镫籴诋谛绨觌镝巅钿癫铫鲷鲽铤铥岽鸫窦渎椟牍笃黩簖怼镦炖趸铎谔垩阏轭锇锷鹗颚颛鳄诶迩铒鸸鲕钫鲂绯镄鲱偾沣凫驸绂绋赙麸鲋鳆钆赅尴擀绀戆睾诰缟锆纥镉颍亘赓绠鲠诟缑觏诂毂钴锢鸪鹄鹘鸹掴诖掼鹳鳏犷匦刿妫桧鲑鳜衮绲鲧埚呙帼椁蝈铪阚绗颉灏颢诃阖蛎黉讧荭闳鲎浒鹕骅桦铧奂缳锾鲩鳇诙荟哕浍缋珲晖诨馄阍钬镬讦诘荠叽哜骥玑觊齑矶羁虿跻霁鲚鲫郏浃铗镓蛲谏缣戋戬睑鹣笕鲣鞯绛缰挢峤鹪鲛疖颌鲒卺荩馑缙赆觐刭泾迳弪胫靓阄鸠鹫讵屦榉飓钜锔窭龃锩镌隽谲珏皲剀垲忾恺铠锴龛闶钪铐骒缂轲钶锞颔龈铿喾郐哙脍狯髋诓诳邝圹纩贶匮蒉愦聩篑阃锟鲲蛴崃徕涞濑赉睐铼癞籁岚榄斓镧褴阆锒唠崂铑铹痨鳓诔缧俪郦坜苈莅蓠呖逦骊缡枥栎轹砺锂鹂疠粝跞雳鲡鳢蔹奁潋琏殓裢裣鲢魉缭钌鹩蔺廪檩辚躏绫棂蛏鲮浏骝绺镏鹨茏泷珑栊胧砻偻蒌喽嵝镂瘘耧蝼髅垆撸噜闾泸渌栌橹轳辂辘氇胪鸬鹭舻鲈脔娈栾鸾銮囵荦猡泺椤脶镙榈褛锊呒唛嬷杩劢缦镘颡鳗麽扪焖懑钔芈谧猕祢渑腼黾缈缪闵缗谟蓦馍殁镆钼铙讷铌鲵辇鲶茑袅陧蘖嗫颟蹑苎咛聍侬哝驽钕傩讴怄瓯蹒疱辔纰罴铍谝骈缥嫔钋镤镨蕲骐绮桤碛颀颃鳍佥荨悭骞缱椠钤嫱樯戗炝锖锵镪羟跄诮谯荞缲硗跷惬锲箧锓揿鲭茕蛱巯赇虮鳅诎岖阒觑鸲诠绻辁铨阕阙悫荛娆桡饪轫嵘蝾缛铷颦蚬飒毵糁缫啬铯穑铩鲨酾讪姗骟钐鳝垧殇觞厍滠畲诜谂渖谥埘莳弑轼贳铈鲥绶摅纾闩铄厮驷缌锶鸶薮馊飕锼谡稣谇荪狲唢睃闼铊鳎钛鲐昙钽锬顸傥饧铴镗韬铽缇鹈阗粜龆鲦恸钭钍抟饨箨鼍娲腽纨绾辋诿帏闱沩涠玮韪炜鲔阌莴龌邬庑怃妩骛鹉鹜饩阋玺觋硖苋莶藓岘猃娴鹇痫蚝籼跹芗饷骧缃飨哓潇骁绡枭箫亵撷绁缬陉荥馐鸺诩顼谖铉镟谑泶鳕埙浔鲟垭娅桠氩厣赝俨兖谳恹闫酽魇餍鼹炀轺鹞鳐靥谒邺晔烨诒呓峄饴怿驿缢轶贻钇镒镱瘗舣铟瘾茔莺萦蓥撄嘤滢潆璎鹦瘿颏罂镛莸铕鱿伛俣谀谕蓣嵛饫阈妪纡觎欤钰鹆鹬龉橼鸢鼋钺郓芸恽愠纭韫殒氲瓒趱錾驵赜啧帻箦谮缯谵诏钊谪辄鹧浈缜桢轸赈祯鸩诤峥钲铮筝骘栉栀轵轾贽鸷蛳絷踬踯觯锺纣绉伫槠铢啭馔颞骓缒诼镯谘缁辎赀眦锱龇鲻偬诹驺鲰镞缵躜鳟讠谫郄勐凼坂垅垴埯埝苘荬荮莜莼菰藁揸吒吣咔咝咴噘噼嚯幞岙嵴彷徼犸狍馀馇馓馕愣憷懔丬溆滟溷漤潴澹甯纟绔绱珉枧桊桉槔橥轱轷赍肷胨飚煳煅熘愍淼砜磙眍钚钷铘铞锃锍锎锏锘锝锪锫锿镅镎镢镥镩镲稆鹋鹛鹱疬疴痖癯裥襁耢颥螨麴鲅鲆鲇鲞鲴鲺鲼鳊鳋鳘鳙鞒鞴齄';
 4 | }
 5 | // 繁体字符集
 6 | function tradChar() {
 7 | 	return '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安俺按暗岸胺案骯昂盎凹敖熬翺襖傲奧懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙壩霸罷爸白柏百擺佰敗拜稗斑班搬扳般頒板版扮拌伴瓣半辦絆邦幫梆榜膀綁棒磅蚌鎊傍謗苞胞包褒剝薄雹保堡飽寶抱報暴豹鮑爆杯碑悲卑北輩背貝鋇倍狽備憊焙被奔苯本笨崩繃甭泵蹦迸逼鼻比鄙筆彼碧蓖蔽畢斃毖幣庇痹閉敝弊必辟壁臂避陛鞭邊編貶扁便變卞辨辯辮遍標彪膘表鱉憋別癟彬斌瀕濱賓擯兵冰柄丙秉餅炳病並玻菠播撥缽波博勃搏鉑箔伯帛舶脖膊渤泊駁捕蔔哺補埠不布步簿部怖擦猜裁材才財睬踩采彩菜蔡餐參蠶殘慚慘燦蒼艙倉滄藏操糙槽曹草廁策側冊測層蹭插叉茬茶查碴搽察岔差詫拆柴豺攙摻蟬饞讒纏鏟產闡顫昌猖場嘗常長償腸廠敞暢唱倡超抄鈔朝嘲潮巢吵炒車扯撤掣徹澈郴臣辰塵晨忱沈陳趁襯撐稱城橙成呈乘程懲澄誠承逞騁秤吃癡持匙池遲弛馳恥齒侈尺赤翅斥熾充沖蟲崇寵抽酬疇躊稠愁籌仇綢瞅醜臭初出櫥廚躇鋤雛滁除楚礎儲矗搐觸處揣川穿椽傳船喘串瘡窗幢床闖創吹炊捶錘垂春椿醇唇淳純蠢戳綽疵茨磁雌辭慈瓷詞此刺賜次聰蔥囪匆從叢湊粗醋簇促躥篡竄摧崔催脆瘁粹淬翠村存寸磋撮搓措挫錯搭達答瘩打大呆歹傣戴帶殆代貸袋待逮怠耽擔丹單鄲撣膽旦氮但憚淡誕彈蛋當擋黨蕩檔刀搗蹈倒島禱導到稻悼道盜德得的蹬燈登等瞪凳鄧堤低滴迪敵笛狄滌翟嫡抵底地蒂第帝弟遞締顛掂滇碘點典靛墊電佃甸店惦奠澱殿碉叼雕雕刁掉吊釣調跌爹碟蝶叠諜疊丁盯叮釘頂鼎錠定訂丟東冬董懂動棟侗恫凍洞兜抖鬥陡豆逗痘都督毒犢獨讀堵睹賭杜鍍肚度渡妒端短鍛段斷緞堆兌隊對墩噸蹲敦頓囤鈍盾遁掇哆多奪垛躲朵跺舵剁惰墮蛾峨鵝俄額訛娥惡厄扼遏鄂餓恩而兒耳爾餌洱二貳發罰筏伐乏閥法琺藩帆番翻樊礬釩繁凡煩反返範販犯飯泛坊芳方肪房防妨仿訪紡放菲非啡飛肥匪誹吠肺廢沸費芬酚吩氛分紛墳焚汾粉奮份忿憤糞豐封楓蜂峰鋒風瘋烽逢馮縫諷奉鳳佛否夫敷膚孵扶拂輻幅氟符伏俘服浮涪福袱弗甫撫輔俯釜斧脯腑府腐赴副覆賦復傅付阜父腹負富訃附婦縛咐噶嘎該改概鈣蓋溉幹甘桿柑竿肝趕感稈敢贛岡剛鋼缸肛綱崗港杠篙臯高膏羔糕搞鎬稿告哥歌擱戈鴿胳疙割革葛格蛤閣隔鉻個各給根跟耕更庚羹埂耿梗工攻功恭龔供躬公宮弓鞏汞拱貢共鉤勾溝茍狗垢構購夠辜菇咕箍估沽孤姑鼓古蠱骨谷股故顧固雇刮瓜剮寡掛褂乖拐怪棺關官冠觀管館罐慣灌貫光廣逛瑰規圭矽歸龜閨軌鬼詭癸桂櫃跪貴劊輥滾棍鍋郭國果裹過哈骸孩海氦亥害駭酣憨邯韓含涵寒函喊罕翰撼捍旱憾悍焊汗漢夯杭航壕嚎豪毫郝好耗號浩呵喝荷菏核禾和何合盒貉閡河涸赫褐鶴賀嘿黑痕很狠恨哼亨橫衡恒轟哄烘虹鴻洪宏弘紅喉侯猴吼厚候後呼乎忽瑚壺葫胡蝴狐糊湖弧虎唬護互滬戶花嘩華猾滑畫劃化話槐徊懷淮壞歡環桓還緩換患喚瘓豢煥渙宦幻荒慌黃磺蝗簧皇凰惶煌晃幌恍謊灰揮輝徽恢蛔回毀悔慧卉惠晦賄穢會燴匯諱誨繪葷昏婚魂渾混豁活夥火獲或惑霍貨禍擊圾基機畸稽積箕肌饑跡激譏雞姬績緝吉極棘輯籍集及急疾汲即嫉級擠幾脊己薊技冀季伎祭劑悸濟寄寂計記既忌際繼紀嘉枷夾佳家加莢頰賈甲鉀假稼價架駕嫁殲監堅尖箋間煎兼肩艱奸緘繭檢柬堿鹼揀撿簡儉剪減薦檻鑒踐賤見鍵箭件健艦劍餞漸濺澗建僵姜將漿江疆蔣槳獎講匠醬降蕉椒礁焦膠交郊澆驕嬌嚼攪鉸矯僥腳狡角餃繳絞剿教酵轎較叫窖揭接皆稭街階截劫節莖睛晶鯨京驚精粳經井警景頸靜境敬鏡徑痙靖竟競凈炯窘揪究糾玖韭久灸九酒廄救舊臼舅咎就疚鞠拘狙疽居駒菊局咀矩舉沮聚拒據巨具距踞鋸俱句懼炬劇捐鵑娟倦眷卷絹撅攫抉掘倔爵桔傑捷睫竭潔結解姐戒藉芥界借介疥誡屆巾筋斤金今津襟緊錦僅謹進靳晉禁近燼浸盡勁荊兢覺決訣絕均菌鈞軍君峻俊竣浚郡駿喀咖卡咯開揩楷凱慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕顆科殼咳可渴克刻客課肯啃墾懇坑吭空恐孔控摳口扣寇枯哭窟苦酷庫褲誇垮挎跨胯塊筷儈快寬款匡筐狂框礦眶曠況虧盔巋窺葵奎魁傀饋愧潰坤昆捆困括擴廓闊垃拉喇蠟臘辣啦萊來賴藍婪欄攔籃闌蘭瀾讕攬覽懶纜爛濫瑯榔狼廊郎朗浪撈勞牢老佬姥酪烙澇勒樂雷鐳蕾磊累儡壘擂肋類淚棱楞冷厘梨犁黎籬貍離漓理李裏鯉禮莉荔吏栗麗厲勵礫歷利傈例俐痢立粒瀝隸力璃哩倆聯蓮連鐮廉憐漣簾斂臉鏈戀煉練糧涼梁粱良兩輛量晾亮諒撩聊僚療燎寥遼潦了撂鐐廖料列裂烈劣獵琳林磷霖臨鄰鱗淋凜賃吝拎玲菱零齡鈴伶羚淩靈陵嶺領另令溜琉榴硫餾留劉瘤流柳六龍聾嚨籠窿隆壟攏隴樓婁摟簍漏陋蘆盧顱廬爐擄鹵虜魯麓碌露路賂鹿潞祿錄陸戮驢呂鋁侶旅履屢縷慮氯律率濾綠巒攣孿灤卵亂掠略掄輪倫侖淪綸論蘿螺羅邏鑼籮騾裸落洛駱絡媽麻瑪碼螞馬罵嘛嗎埋買麥賣邁脈瞞饅蠻滿蔓曼慢漫謾芒茫盲氓忙莽貓茅錨毛矛鉚卯茂冒帽貌貿麽玫枚梅酶黴煤沒眉媒鎂每美昧寐妹媚門悶們萌蒙檬盟錳猛夢孟瞇醚靡糜迷謎彌米秘覓泌蜜密冪棉眠綿冕免勉娩緬面苗描瞄藐秒渺廟妙蔑滅民抿皿敏憫閩明螟鳴銘名命謬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌謀牟某拇牡畝姆母墓暮幕募慕木目睦牧穆拿哪吶鈉那娜納氖乃奶耐奈南男難囊撓腦惱鬧淖呢餒內嫩能妮霓倪泥尼擬妳匿膩逆溺蔫拈年碾攆撚念娘釀鳥尿捏聶孽嚙鑷鎳涅您檸獰凝寧擰濘牛扭鈕紐膿濃農弄奴努怒女暖虐瘧挪懦糯諾哦歐鷗毆藕嘔偶漚啪趴爬帕怕琶拍排牌徘湃派攀潘盤磐盼畔判叛乓龐旁耪胖拋咆刨炮袍跑泡呸胚培裴賠陪配佩沛噴盆砰抨烹澎彭蓬棚硼篷膨朋鵬捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片騙飄漂瓢票撇瞥拼頻貧品聘乒坪蘋萍平憑瓶評屏坡潑頗婆破魄迫粕剖撲鋪仆莆葡菩蒲埔樸圃普浦譜曝瀑期欺棲戚妻七淒漆柒沏其棋奇歧畦崎臍齊旗祈祁騎起豈乞企啟契砌器氣迄棄汽泣訖掐洽牽扡釬鉛千遷簽仟謙乾黔錢鉗前潛遣淺譴塹嵌欠歉槍嗆腔羌墻薔強搶橇鍬敲悄橋瞧喬僑巧鞘撬翹峭俏竅切茄且怯竊欽侵親秦琴勤芹擒禽寢沁青輕氫傾卿清擎晴氰情頃請慶瓊窮秋丘邱球求囚酋泅趨區蛆曲軀屈驅渠取娶齲趣去圈顴權醛泉全痊拳犬券勸缺炔瘸卻鵲榷確雀裙群然燃冉染瓤壤攘嚷讓饒擾繞惹熱壬仁人忍韌任認刃妊紉扔仍日戎茸蓉榮融熔溶容絨冗揉柔肉茹蠕儒孺如辱乳汝入褥軟阮蕊瑞銳閏潤若弱撒灑薩腮鰓塞賽三三傘散桑嗓喪搔騷掃嫂瑟色澀森僧莎砂殺剎沙紗傻啥煞篩曬珊苫杉山刪煽衫閃陜擅贍膳善汕扇繕墑傷商賞晌上尚裳梢捎稍燒芍勺韶少哨邵紹奢賒蛇舌舍赦攝射懾涉社設砷申呻伸身深娠紳神沈審嬸甚腎慎滲聲生甥牲升繩省盛剩勝聖師失獅施濕詩屍虱十石拾時什食蝕實識史矢使屎駛始式示士世柿事拭誓逝勢是嗜噬適仕侍釋飾氏市恃室視試收手首守壽授售受瘦獸蔬樞梳殊抒輸叔舒淑疏書贖孰熟薯暑曙署蜀黍鼠屬術述樹束戍豎墅庶數漱恕刷耍摔衰甩帥栓拴霜雙爽誰水睡稅吮瞬順舜說碩朔爍斯撕嘶思私司絲死肆寺嗣四伺似飼巳松聳慫頌送宋訟誦搜艘擻嗽蘇酥俗素速粟僳塑溯宿訴肅酸蒜算雖隋隨綏髓碎歲穗遂隧祟孫損筍蓑梭唆縮瑣索鎖所塌他它她塔獺撻蹋踏胎苔擡臺泰酞太態汰坍攤貪癱灘壇檀痰潭譚談坦毯袒碳探嘆炭湯塘搪堂棠膛唐糖倘躺淌趟燙掏濤滔絳萄桃逃淘陶討套特藤騰疼謄梯剔踢銻提題蹄啼體替嚏惕涕剃屜天添填田甜恬舔腆挑條迢眺跳貼鐵帖廳聽烴汀廷停亭庭挺艇通桐酮瞳同銅彤童桶捅筒統痛偷投頭透凸禿突圖徒途塗屠土吐兔湍團推頹腿蛻褪退吞屯臀拖托脫鴕陀馱駝橢妥拓唾挖哇蛙窪娃瓦襪歪外豌彎灣玩頑丸烷完碗挽晚皖惋宛婉萬腕汪王亡枉網往旺望忘妄威巍微危韋違桅圍唯惟為濰維葦萎委偉偽尾緯未蔚味畏胃餵魏位渭謂尉慰衛瘟溫蚊文聞紋吻穩紊問嗡翁甕撾蝸渦窩我斡臥握沃巫嗚鎢烏汙誣屋無蕪梧吾吳毋武五捂午舞伍侮塢戊霧晤物勿務悟誤昔熙析西硒矽晰嘻吸錫犧稀息希悉膝夕惜熄烯溪汐犀檄襲席習媳喜銑洗系隙戲細瞎蝦匣霞轄暇峽俠狹下廈夏嚇掀鍁先仙鮮纖鹹賢銜舷閑涎弦嫌顯險現獻縣腺餡羨憲陷限線相廂鑲香箱襄湘鄉翔祥詳想響享項巷橡像向象蕭硝霄削哮囂銷消宵淆曉小孝校肖嘯笑效楔些歇蠍鞋協挾攜邪斜脅諧寫械卸蟹懈泄瀉謝屑薪芯鋅欣辛新忻心信釁星腥猩惺興刑型形邢行醒幸杏性姓兄兇胸匈洶雄熊休修羞朽嗅銹秀袖繡墟戌需虛噓須徐許蓄酗敘旭序畜恤絮婿緒續軒喧宣懸旋玄選癬眩絢靴薛學穴雪血勛熏循旬詢尋馴巡殉汛訓訊遜迅壓押鴉鴨呀丫芽牙蚜崖衙涯雅啞亞訝焉咽閹煙淹鹽嚴研蜒巖延言顏閻炎沿奄掩眼衍演艷堰燕厭硯雁唁彥焰宴諺驗殃央鴦秧楊揚佯瘍羊洋陽氧仰癢養樣漾邀腰妖瑤搖堯遙窯謠姚咬舀藥要耀椰噎耶爺野冶也頁掖業葉曳腋夜液壹壹醫揖銥依伊衣頤夷遺移儀胰疑沂宜姨彜椅蟻倚已乙矣以藝抑易邑屹億役臆逸肄疫亦裔意毅憶義益溢詣議誼譯異翼翌繹茵蔭因殷音陰姻吟銀淫寅飲尹引隱印英櫻嬰鷹應纓瑩螢營熒蠅迎贏盈影穎硬映喲擁傭臃癰庸雍踴蛹詠泳湧永恿勇用幽優悠憂尤由郵鈾猶油遊酉有友右佑釉誘又幼迂淤於盂榆虞愚輿余俞逾魚愉渝漁隅予娛雨與嶼禹宇語羽玉域芋郁籲遇喻峪禦愈欲獄育譽浴寓裕預豫馭鴛淵冤元垣袁原援轅園員圓猿源緣遠苑願怨院曰約越躍鑰嶽粵月悅閱耘雲鄖勻隕允運蘊醞暈韻孕匝砸雜栽哉災宰載再在咱攢暫贊贓臟葬遭糟鑿藻棗早澡蚤躁噪造皂竈燥責擇則澤賊怎增憎曾贈紮喳渣劄軋鍘閘眨柵榨咋乍炸詐摘齋宅窄債寨瞻氈詹粘沾盞斬輾嶄展蘸棧占戰站湛綻樟章彰漳張掌漲杖丈帳賬仗脹瘴障招昭找沼趙照罩兆肇召遮折哲蟄轍者鍺蔗這浙珍斟真甄砧臻貞針偵枕疹診震振鎮陣蒸掙睜征猙爭怔整拯正政幀癥鄭證芝枝支吱蜘知肢脂汁之織職直植殖執值侄址指止趾只旨紙誌摯擲至致置幟峙制智秩稚質炙痔滯治窒中盅忠鐘衷終種腫重仲眾舟週州洲謅粥軸肘帚咒皺宙晝驟珠株蛛朱豬諸誅逐竹燭煮拄矚囑主著柱助蛀貯鑄築住註祝駐抓爪拽專磚轉撰賺篆樁莊裝妝撞壯狀椎錐追贅墜綴諄準捉拙卓桌琢茁酌啄著灼濁茲咨資姿滋淄孜紫仔籽滓子自漬字鬃棕蹤宗綜總縱鄒走奏揍租足卒族祖詛阻組鉆纂嘴醉最罪尊遵昨左佐柞做作坐座錒噯嬡璦曖靄諳銨鵪媼驁鰲鈀唄鈑鴇齙鵯賁錛蓽嗶潷鉍篳蹕芐緶籩驃颮飆鏢鑣鰾儐繽檳殯臏鑌髕鬢稟餑鈸鵓鈽驂黲惻鍤儕釵囅諂讖蕆懺嬋驏覘禪鐔倀萇悵閶鯧硨傖諶櫬磣齔棖檉鋮鐺飭鴟銃儔幬讎芻絀躕釧愴綞鶉輟齪鶿蓯驄樅輳攛銼鹺噠韃駘紿殫賧癉簞讜碭襠燾鐙糴詆諦綈覿鏑巔鈿癲銚鯛鰈鋌銩崠鶇竇瀆櫝牘篤黷籪懟鐓燉躉鐸諤堊閼軛鋨鍔鶚顎顓鱷誒邇鉺鴯鮞鈁魴緋鐨鯡僨灃鳧駙紱紼賻麩鮒鰒釓賅尷搟紺戇睪誥縞鋯紇鎘潁亙賡綆鯁詬緱覯詁轂鈷錮鴣鵠鶻鴰摑詿摜鸛鰥獷匭劌媯檜鮭鱖袞緄鯀堝咼幗槨蟈鉿闞絎頡灝顥訶闔蠣黌訌葒閎鱟滸鶘驊樺鏵奐繯鍰鯇鰉詼薈噦澮繢琿暉諢餛閽鈥鑊訐詰薺嘰嚌驥璣覬齏磯羈蠆躋霽鱭鯽郟浹鋏鎵蟯諫縑戔戩瞼鶼筧鰹韉絳韁撟嶠鷦鮫癤頜鮚巹藎饉縉贐覲剄涇逕弳脛靚鬮鳩鷲詎屨櫸颶鉅鋦窶齟錈鐫雋譎玨皸剴塏愾愷鎧鍇龕閌鈧銬騍緙軻鈳錁頷齦鏗嚳鄶噲膾獪髖誆誑鄺壙纊貺匱蕢憒聵簣閫錕鯤蠐崍徠淶瀨賚睞錸癩籟嵐欖斕鑭襤閬鋃嘮嶗銠鐒癆鰳誄縲儷酈壢藶蒞蘺嚦邐驪縭櫪櫟轢礪鋰鸝癘糲躒靂鱺鱧蘞奩瀲璉殮褳襝鰱魎繚釕鷯藺廩檁轔躪綾欞蟶鯪瀏騮綹鎦鷚蘢瀧瓏櫳朧礱僂蔞嘍嶁鏤瘺耬螻髏壚擼嚕閭瀘淥櫨櫓轤輅轆氌臚鸕鷺艫鱸臠孌欒鸞鑾圇犖玀濼欏腡鏍櫚褸鋝嘸嘜嬤榪勱縵鏝顙鰻麼捫燜懣鍆羋謐獼禰澠靦黽緲繆閔緡謨驀饃歿鏌鉬鐃訥鈮鯢輦鯰蔦裊隉蘗囁顢躡苧嚀聹儂噥駑釹儺謳慪甌蹣皰轡紕羆鈹諞駢縹嬪釙鏷鐠蘄騏綺榿磧頎頏鰭僉蕁慳騫繾槧鈐嬙檣戧熗錆鏘鏹羥蹌誚譙蕎繰磽蹺愜鍥篋鋟撳鯖煢蛺巰賕蟣鰍詘嶇闃覷鴝詮綣輇銓闋闕愨蕘嬈橈飪軔嶸蠑縟銣顰蜆颯毿糝繅嗇銫穡鎩鯊釃訕姍騸釤鱔坰殤觴厙灄畬詵諗瀋謚塒蒔弒軾貰鈰鰣綬攄紓閂鑠廝駟緦鍶鷥藪餿颼鎪謖穌誶蓀猻嗩脧闥鉈鰨鈦鮐曇鉭錟頇儻餳鐋鏜韜鋱緹鵜闐糶齠鰷慟鈄釷摶飩籜鼉媧膃紈綰輞諉幃闈溈潿瑋韙煒鮪閿萵齷鄔廡憮嫵騖鵡鶩餼鬩璽覡硤莧薟蘚峴獫嫻鷴癇蠔秈躚薌餉驤緗饗嘵瀟驍綃梟簫褻擷紲纈陘滎饈鵂詡頊諼鉉鏇謔澩鱈塤潯鱘埡婭椏氬厴贗儼兗讞懨閆釅魘饜鼴煬軺鷂鰩靨謁鄴曄燁詒囈嶧飴懌驛縊軼貽釔鎰鐿瘞艤銦癮塋鶯縈鎣攖嚶瀅瀠瓔鸚癭頦罌鏞蕕銪魷傴俁諛諭蕷崳飫閾嫗紆覦歟鈺鵒鷸齬櫞鳶黿鉞鄆蕓惲慍紜韞殞氳瓚趲鏨駔賾嘖幘簀譖繒譫詔釗謫輒鷓湞縝楨軫賑禎鴆諍崢鉦錚箏騭櫛梔軹輊贄鷙螄縶躓躑觶鍾紂縐佇櫧銖囀饌顳騅縋諑鐲諮緇輜貲眥錙齜鯔傯諏騶鯫鏃纘躦鱒訁譾郤猛氹阪壟堖垵墊檾蕒葤蓧蒓菇槁摣咤唚哢噝噅撅劈謔襆嶴脊仿僥獁麅餘餷饊饢楞怵懍爿漵灩混濫瀦淡寧糸絝緔瑉梘棬案橰櫫軲軤賫膁腖飈糊煆溜湣渺碸滾瞘鈈鉕鋣銱鋥鋶鐦鐧鍩鍀鍃錇鎄鎇鎿鐝鑥鑹鑔穭鶓鶥鸌癧屙瘂臒襇繈耮顬蟎麯鮁鮃鮎鯗鯝鯴鱝鯿鰠鰵鱅鞽韝齇';
 8 | }
 9 | 
10 | module.exports.simpChar = simpChar;
11 | module.exports.tradChar = tradChar;


--------------------------------------------------------------------------------
/project/Profile/AdvancedProfile.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, Fragment } from 'react';
  2 | import Debounce from 'lodash-decorators/debounce';
  3 | import Bind from 'lodash-decorators/bind';
  4 | import { connect } from 'dva';
  5 | import {
  6 |   Button,
  7 |   Menu,
  8 |   Dropdown,
  9 |   Icon,
 10 |   Row,
 11 |   Col,
 12 |   Steps,
 13 |   Card,
 14 |   Popover,
 15 |   Badge,
 16 |   Table,
 17 |   Tooltip,
 18 |   Divider,
 19 | } from 'antd';
 20 | import classNames from 'classnames';
 21 | import DescriptionList from 'components/DescriptionList';
 22 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 23 | import styles from './AdvancedProfile.less';
 24 | 
 25 | const { Step } = Steps;
 26 | const { Description } = DescriptionList;
 27 | const ButtonGroup = Button.Group;
 28 | 
 29 | const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
 30 | 
 31 | const menu = (
 32 |   <Menu>
 33 |     <Menu.Item key="1">選項壹</Menu.Item>
 34 |     <Menu.Item key="2">選項二</Menu.Item>
 35 |     <Menu.Item key="3">選項三</Menu.Item>
 36 |   </Menu>
 37 | );
 38 | 
 39 | const action = (
 40 |   <Fragment>
 41 |     <ButtonGroup>
 42 |       <Button>操作</Button>
 43 |       <Button>操作</Button>
 44 |       <Dropdown overlay={menu} placement="bottomRight">
 45 |         <Button>
 46 |           <Icon type="ellipsis" />
 47 |         </Button>
 48 |       </Dropdown>
 49 |     </ButtonGroup>
 50 |     <Button type="primary">主操作</Button>
 51 |   </Fragment>
 52 | );
 53 | 
 54 | const extra = (
 55 |   <Row>
 56 |     <Col xs={24} sm={12}>
 57 |       <div className={styles.textSecondary}>狀態</div>
 58 |       <div className={styles.heading}>待審批</div>
 59 |     </Col>
 60 |     <Col xs={24} sm={12}>
 61 |       <div className={styles.textSecondary}>訂單金額</div>
 62 |       <div className={styles.heading}>¥ 568.08</div>
 63 |     </Col>
 64 |   </Row>
 65 | );
 66 | 
 67 | const description = (
 68 |   <DescriptionList className={styles.headerList} size="small" col="2">
 69 |     <Description term="創建人">曲麗麗</Description>
 70 |     <Description term="訂購產品">XX 服務</Description>
 71 |     <Description term="創建時間">2017-07-07</Description>
 72 |     <Description term="關聯單據">
 73 |       <a href="">12421</a>
 74 |     </Description>
 75 |     <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
 76 |     <Description term="備註">請於兩個工作日內確認</Description>
 77 |   </DescriptionList>
 78 | );
 79 | 
 80 | const tabList = [
 81 |   {
 82 |     key: 'detail',
 83 |     tab: '詳情',
 84 |   },
 85 |   {
 86 |     key: 'rule',
 87 |     tab: '規則',
 88 |   },
 89 | ];
 90 | 
 91 | const desc1 = (
 92 |   <div className={classNames(styles.textSecondary, styles.stepDescription)}>
 93 |     <Fragment>
 94 |       曲麗麗
 95 |       <Icon type="dingding-o" style={{ marginLeft: 8 }} />
 96 |     </Fragment>
 97 |     <div>2016-12-12 12:32</div>
 98 |   </div>
 99 | );
100 | 
101 | const desc2 = (
102 |   <div className={styles.stepDescription}>
103 |     <Fragment>
104 |       週毛毛
105 |       <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
106 |     </Fragment>
107 |     <div>
108 |       <a href="">催壹下</a>
109 |     </div>
110 |   </div>
111 | );
112 | 
113 | const popoverContent = (
114 |   <div style={{ width: 160 }}>
115 |     吳加號
116 |     <span className={styles.textSecondary} style={{ float: 'right' }}>
117 |       <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未響應</span>} />
118 |     </span>
119 |     <div className={styles.textSecondary} style={{ marginTop: 4 }}>
120 |       耗時：2小時25分鐘
121 |     </div>
122 |   </div>
123 | );
124 | 
125 | const customDot = (dot, { status }) =>
126 |   status === 'process' ? (
127 |     <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
128 |       {dot}
129 |     </Popover>
130 |   ) : (
131 |     dot
132 |   );
133 | 
134 | const operationTabList = [
135 |   {
136 |     key: 'tab1',
137 |     tab: '操作日誌壹',
138 |   },
139 |   {
140 |     key: 'tab2',
141 |     tab: '操作日誌二',
142 |   },
143 |   {
144 |     key: 'tab3',
145 |     tab: '操作日誌三',
146 |   },
147 | ];
148 | 
149 | const columns = [
150 |   {
151 |     title: '操作類型',
152 |     dataIndex: 'type',
153 |     key: 'type',
154 |   },
155 |   {
156 |     title: '操作人',
157 |     dataIndex: 'name',
158 |     key: 'name',
159 |   },
160 |   {
161 |     title: '執行結果',
162 |     dataIndex: 'status',
163 |     key: 'status',
164 |     render: text =>
165 |       text === 'agree' ? (
166 |         <Badge status="success" text="成功" />
167 |       ) : (
168 |         <Badge status="error" text="駁回" />
169 |       ),
170 |   },
171 |   {
172 |     title: '操作時間',
173 |     dataIndex: 'updatedAt',
174 |     key: 'updatedAt',
175 |   },
176 |   {
177 |     title: '備註',
178 |     dataIndex: 'memo',
179 |     key: 'memo',
180 |   },
181 | ];
182 | 
183 | @connect(({ profile, loading }) => ({
184 |   profile,
185 |   loading: loading.effects['profile/fetchAdvanced'],
186 | }))
187 | export default class AdvancedProfile extends Component {
188 |   state = {
189 |     operationkey: 'tab1',
190 |     stepDirection: 'horizontal',
191 |   };
192 | 
193 |   componentDidMount() {
194 |     const { dispatch } = this.props;
195 |     dispatch({
196 |       type: 'profile/fetchAdvanced',
197 |     });
198 | 
199 |     this.setStepDirection();
200 |     window.addEventListener('resize', this.setStepDirection);
201 |   }
202 | 
203 |   componentWillUnmount() {
204 |     window.removeEventListener('resize', this.setStepDirection);
205 |     this.setStepDirection.cancel();
206 |   }
207 | 
208 |   onOperationTabChange = key => {
209 |     this.setState({ operationkey: key });
210 |   };
211 | 
212 |   @Bind()
213 |   @Debounce(200)
214 |   setStepDirection() {
215 |     const { stepDirection } = this.state;
216 |     const w = getWindowWidth();
217 |     if (stepDirection !== 'vertical' && w <= 576) {
218 |       this.setState({
219 |         stepDirection: 'vertical',
220 |       });
221 |     } else if (stepDirection !== 'horizontal' && w > 576) {
222 |       this.setState({
223 |         stepDirection: 'horizontal',
224 |       });
225 |     }
226 |   }
227 | 
228 |   render() {
229 |     const { stepDirection } = this.state;
230 |     const { profile, loading } = this.props;
231 |     const { advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
232 |     const contentList = {
233 |       tab1: (
234 |         <Table
235 |           pagination={false}
236 |           loading={loading}
237 |           dataSource={advancedOperation1}
238 |           columns={columns}
239 |         />
240 |       ),
241 |       tab2: (
242 |         <Table
243 |           pagination={false}
244 |           loading={loading}
245 |           dataSource={advancedOperation2}
246 |           columns={columns}
247 |         />
248 |       ),
249 |       tab3: (
250 |         <Table
251 |           pagination={false}
252 |           loading={loading}
253 |           dataSource={advancedOperation3}
254 |           columns={columns}
255 |         />
256 |       ),
257 |     };
258 | 
259 |     return (
260 |       <PageHeaderLayout
261 |         title="單號：234231029431"
262 |         logo={
263 |           <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
264 |         }
265 |         action={action}
266 |         content={description}
267 |         extraContent={extra}
268 |         tabList={tabList}
269 |       >
270 |         <Card title="流程進度" style={{ marginBottom: 24 }} bordered={false}>
271 |           <Steps direction={stepDirection} progressDot={customDot} current={1}>
272 |             <Step title="創建項目" description={desc1} />
273 |             <Step title="部門初審" description={desc2} />
274 |             <Step title="財務復核" />
275 |             <Step title="完成" />
276 |           </Steps>
277 |         </Card>
278 |         <Card title="用戶信息" style={{ marginBottom: 24 }} bordered={false}>
279 |           <DescriptionList style={{ marginBottom: 24 }}>
280 |             <Description term="用戶姓名">付小小</Description>
281 |             <Description term="會員卡號">32943898021309809423</Description>
282 |             <Description term="身份證">3321944288191034921</Description>
283 |             <Description term="聯系方式">18112345678</Description>
284 |             <Description term="聯系地址">
285 |               曲麗麗 18100000000 浙江省杭州市西湖區黃姑山路工專路交叉路口
286 |             </Description>
287 |           </DescriptionList>
288 |           <DescriptionList style={{ marginBottom: 24 }} title="信息組">
289 |             <Description term="某某數據">725</Description>
290 |             <Description term="該數據更新時間">2017-08-08</Description>
291 |             <Description>&nbsp;</Description>
292 |             <Description
293 |               term={
294 |                 <span>
295 |                   某某數據
296 |                   <Tooltip title="數據說明">
297 |                     <Icon
298 |                       style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
299 |                       type="info-circle-o"
300 |                     />
301 |                   </Tooltip>
302 |                 </span>
303 |               }
304 |             >
305 |               725
306 |             </Description>
307 |             <Description term="該數據更新時間">2017-08-08</Description>
308 |           </DescriptionList>
309 |           <h4 style={{ marginBottom: 16 }}>信息組</h4>
310 |           <Card type="inner" title="多層級信息組">
311 |             <DescriptionList size="small" style={{ marginBottom: 16 }} title="組名稱">
312 |               <Description term="負責人">林東東</Description>
313 |               <Description term="角色碼">1234567</Description>
314 |               <Description term="所屬部門">XX公司 - YY部</Description>
315 |               <Description term="過期時間">2017-08-08</Description>
316 |               <Description term="描述">
317 |                 這段描述很長很長很長很長很長很長很長很長很長很長很長很長很長很長...
318 |               </Description>
319 |             </DescriptionList>
320 |             <Divider style={{ margin: '16px 0' }} />
321 |             <DescriptionList size="small" style={{ marginBottom: 16 }} title="組名稱" col="1">
322 |               <Description term="學名">
323 |                 Citrullus lanatus (Thunb.) Matsum. et
324 |                 Nakai壹年生蔓生藤本；莖、枝粗壯，具明顯的棱。卷須較粗..
325 |               </Description>
326 |             </DescriptionList>
327 |             <Divider style={{ margin: '16px 0' }} />
328 |             <DescriptionList size="small" title="組名稱">
329 |               <Description term="負責人">付小小</Description>
330 |               <Description term="角色碼">1234568</Description>
331 |             </DescriptionList>
332 |           </Card>
333 |         </Card>
334 |         <Card title="用戶近半年來電記錄" style={{ marginBottom: 24 }} bordered={false}>
335 |           <div className={styles.noData}>
336 |             <Icon type="frown-o" />暫無數據
337 |           </div>
338 |         </Card>
339 |         <Card
340 |           className={styles.tabsCard}
341 |           bordered={false}
342 |           tabList={operationTabList}
343 |           onTabChange={this.onOperationTabChange}
344 |         >
345 |           {contentList[this.state.operationkey]}
346 |         </Card>
347 |       </PageHeaderLayout>
348 |     );
349 |   }
350 | }
351 | 


--------------------------------------------------------------------------------
/project/Forms/AdvancedForm.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import {
  3 |   Card,
  4 |   Button,
  5 |   Form,
  6 |   Icon,
  7 |   Col,
  8 |   Row,
  9 |   DatePicker,
 10 |   TimePicker,
 11 |   Input,
 12 |   Select,
 13 |   Popover,
 14 | } from 'antd';
 15 | import { connect } from 'dva';
 16 | import FooterToolbar from 'components/FooterToolbar';
 17 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 18 | import TableForm from './TableForm';
 19 | import styles from './style.less';
 20 | 
 21 | const { Option } = Select;
 22 | const { RangePicker } = DatePicker;
 23 | 
 24 | const fieldLabels = {
 25 |   name: '倉庫名',
 26 |   url: '倉庫域名',
 27 |   owner: '倉庫管理員',
 28 |   approver: '審批人',
 29 |   dateRange: '生效日期',
 30 |   type: '倉庫類型',
 31 |   name2: '任務名',
 32 |   url2: '任務描述',
 33 |   owner2: '執行人',
 34 |   approver2: '責任人',
 35 |   dateRange2: '生效日期',
 36 |   type2: '任務類型',
 37 | };
 38 | 
 39 | const tableData = [
 40 |   {
 41 |     key: '1',
 42 |     workId: '00001',
 43 |     name: 'John Brown',
 44 |     department: 'New York No. 1 Lake Park',
 45 |   },
 46 |   {
 47 |     key: '2',
 48 |     workId: '00002',
 49 |     name: 'Jim Green',
 50 |     department: 'London No. 1 Lake Park',
 51 |   },
 52 |   {
 53 |     key: '3',
 54 |     workId: '00003',
 55 |     name: 'Joe Black',
 56 |     department: 'Sidney No. 1 Lake Park',
 57 |   },
 58 | ];
 59 | 
 60 | class AdvancedForm extends PureComponent {
 61 |   state = {
 62 |     width: '100%',
 63 |   };
 64 |   componentDidMount() {
 65 |     window.addEventListener('resize', this.resizeFooterToolbar);
 66 |   }
 67 |   componentWillUnmount() {
 68 |     window.removeEventListener('resize', this.resizeFooterToolbar);
 69 |   }
 70 |   resizeFooterToolbar = () => {
 71 |     const sider = document.querySelectorAll('.ant-layout-sider')[0];
 72 |     const width = `calc(100% - ${sider.style.width})`;
 73 |     if (this.state.width !== width) {
 74 |       this.setState({ width });
 75 |     }
 76 |   };
 77 |   render() {
 78 |     const { form, dispatch, submitting } = this.props;
 79 |     const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
 80 |     const validate = () => {
 81 |       validateFieldsAndScroll((error, values) => {
 82 |         if (!error) {
 83 |           // submit the values
 84 |           dispatch({
 85 |             type: 'form/submitAdvancedForm',
 86 |             payload: values,
 87 |           });
 88 |         }
 89 |       });
 90 |     };
 91 |     const errors = getFieldsError();
 92 |     const getErrorInfo = () => {
 93 |       const errorCount = Object.keys(errors).filter(key => errors[key]).length;
 94 |       if (!errors || errorCount === 0) {
 95 |         return null;
 96 |       }
 97 |       const scrollToField = fieldKey => {
 98 |         const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
 99 |         if (labelNode) {
100 |           labelNode.scrollIntoView(true);
101 |         }
102 |       };
103 |       const errorList = Object.keys(errors).map(key => {
104 |         if (!errors[key]) {
105 |           return null;
106 |         }
107 |         return (
108 |           <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
109 |             <Icon type="cross-circle-o" className={styles.errorIcon} />
110 |             <div className={styles.errorMessage}>{errors[key][0]}</div>
111 |             <div className={styles.errorField}>{fieldLabels[key]}</div>
112 |           </li>
113 |         );
114 |       });
115 |       return (
116 |         <span className={styles.errorIcon}>
117 |           <Popover
118 |             title="表單校驗信息"
119 |             content={errorList}
120 |             overlayClassName={styles.errorPopover}
121 |             trigger="click"
122 |             getPopupContainer={trigger => trigger.parentNode}
123 |           >
124 |             <Icon type="exclamation-circle" />
125 |           </Popover>
126 |           {errorCount}
127 |         </span>
128 |       );
129 |     };
130 |     return (
131 |       <PageHeaderLayout
132 |         title="高級表單"
133 |         content="高級表單常見於壹次性輸入和提交大批量數據的場景。"
134 |         wrapperClassName={styles.advancedForm}
135 |       >
136 |         <Card title="倉庫管理" className={styles.card} bordered={false}>
137 |           <Form layout="vertical" hideRequiredMark>
138 |             <Row gutter={16}>
139 |               <Col lg={6} md={12} sm={24}>
140 |                 <Form.Item label={fieldLabels.name}>
141 |                   {getFieldDecorator('name', {
142 |                     rules: [{ required: true, message: '請輸入倉庫名稱' }],
143 |                   })(<Input placeholder="請輸入倉庫名稱" />)}
144 |                 </Form.Item>
145 |               </Col>
146 |               <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
147 |                 <Form.Item label={fieldLabels.url}>
148 |                   {getFieldDecorator('url', {
149 |                     rules: [{ required: true, message: '請選擇' }],
150 |                   })(
151 |                     <Input
152 |                       style={{ width: '100%' }}
153 |                       addonBefore="http://"
154 |                       addonAfter=".com"
155 |                       placeholder="請輸入"
156 |                     />
157 |                   )}
158 |                 </Form.Item>
159 |               </Col>
160 |               <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
161 |                 <Form.Item label={fieldLabels.owner}>
162 |                   {getFieldDecorator('owner', {
163 |                     rules: [{ required: true, message: '請選擇管理員' }],
164 |                   })(
165 |                     <Select placeholder="請選擇管理員">
166 |                       <Option value="xiao">付曉曉</Option>
167 |                       <Option value="mao">週毛毛</Option>
168 |                     </Select>
169 |                   )}
170 |                 </Form.Item>
171 |               </Col>
172 |             </Row>
173 |             <Row gutter={16}>
174 |               <Col lg={6} md={12} sm={24}>
175 |                 <Form.Item label={fieldLabels.approver}>
176 |                   {getFieldDecorator('approver', {
177 |                     rules: [{ required: true, message: '請選擇審批員' }],
178 |                   })(
179 |                     <Select placeholder="請選擇審批員">
180 |                       <Option value="xiao">付曉曉</Option>
181 |                       <Option value="mao">週毛毛</Option>
182 |                     </Select>
183 |                   )}
184 |                 </Form.Item>
185 |               </Col>
186 |               <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
187 |                 <Form.Item label={fieldLabels.dateRange}>
188 |                   {getFieldDecorator('dateRange', {
189 |                     rules: [{ required: true, message: '請選擇生效日期' }],
190 |                   })(
191 |                     <RangePicker placeholder={['開始日期', '結束日期']} style={{ width: '100%' }} />
192 |                   )}
193 |                 </Form.Item>
194 |               </Col>
195 |               <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
196 |                 <Form.Item label={fieldLabels.type}>
197 |                   {getFieldDecorator('type', {
198 |                     rules: [{ required: true, message: '請選擇倉庫類型' }],
199 |                   })(
200 |                     <Select placeholder="請選擇倉庫類型">
201 |                       <Option value="private">私密</Option>
202 |                       <Option value="public">公開</Option>
203 |                     </Select>
204 |                   )}
205 |                 </Form.Item>
206 |               </Col>
207 |             </Row>
208 |           </Form>
209 |         </Card>
210 |         <Card title="任務管理" className={styles.card} bordered={false}>
211 |           <Form layout="vertical" hideRequiredMark>
212 |             <Row gutter={16}>
213 |               <Col lg={6} md={12} sm={24}>
214 |                 <Form.Item label={fieldLabels.name2}>
215 |                   {getFieldDecorator('name2', {
216 |                     rules: [{ required: true, message: '請輸入' }],
217 |                   })(<Input placeholder="請輸入" />)}
218 |                 </Form.Item>
219 |               </Col>
220 |               <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
221 |                 <Form.Item label={fieldLabels.url2}>
222 |                   {getFieldDecorator('url2', {
223 |                     rules: [{ required: true, message: '請選擇' }],
224 |                   })(<Input placeholder="請輸入" />)}
225 |                 </Form.Item>
226 |               </Col>
227 |               <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
228 |                 <Form.Item label={fieldLabels.owner2}>
229 |                   {getFieldDecorator('owner2', {
230 |                     rules: [{ required: true, message: '請選擇管理員' }],
231 |                   })(
232 |                     <Select placeholder="請選擇管理員">
233 |                       <Option value="xiao">付曉曉</Option>
234 |                       <Option value="mao">週毛毛</Option>
235 |                     </Select>
236 |                   )}
237 |                 </Form.Item>
238 |               </Col>
239 |             </Row>
240 |             <Row gutter={16}>
241 |               <Col lg={6} md={12} sm={24}>
242 |                 <Form.Item label={fieldLabels.approver2}>
243 |                   {getFieldDecorator('approver2', {
244 |                     rules: [{ required: true, message: '請選擇審批員' }],
245 |                   })(
246 |                     <Select placeholder="請選擇審批員">
247 |                       <Option value="xiao">付曉曉</Option>
248 |                       <Option value="mao">週毛毛</Option>
249 |                     </Select>
250 |                   )}
251 |                 </Form.Item>
252 |               </Col>
253 |               <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
254 |                 <Form.Item label={fieldLabels.dateRange2}>
255 |                   {getFieldDecorator('dateRange2', {
256 |                     rules: [{ required: true, message: '請輸入' }],
257 |                   })(
258 |                     <TimePicker
259 |                       placeholder="提醒時間"
260 |                       style={{ width: '100%' }}
261 |                       getPopupContainer={trigger => trigger.parentNode}
262 |                     />
263 |                   )}
264 |                 </Form.Item>
265 |               </Col>
266 |               <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
267 |                 <Form.Item label={fieldLabels.type2}>
268 |                   {getFieldDecorator('type2', {
269 |                     rules: [{ required: true, message: '請選擇倉庫類型' }],
270 |                   })(
271 |                     <Select placeholder="請選擇倉庫類型">
272 |                       <Option value="private">私密</Option>
273 |                       <Option value="public">公開</Option>
274 |                     </Select>
275 |                   )}
276 |                 </Form.Item>
277 |               </Col>
278 |             </Row>
279 |           </Form>
280 |         </Card>
281 |         <Card title="成員管理" bordered={false}>
282 |           {getFieldDecorator('members', {
283 |             initialValue: tableData,
284 |           })(<TableForm />)}
285 |         </Card>
286 |         <FooterToolbar style={{ width: this.state.width }}>
287 |           {getErrorInfo()}
288 |           <Button type="primary" onClick={validate} loading={submitting}>
289 |             提交
290 |           </Button>
291 |         </FooterToolbar>
292 |       </PageHeaderLayout>
293 |     );
294 |   }
295 | }
296 | 
297 | export default connect(({ global, loading }) => ({
298 |   collapsed: global.collapsed,
299 |   submitting: loading.effects['form/submitAdvancedForm'],
300 | }))(Form.create()(AdvancedForm));
301 | 


--------------------------------------------------------------------------------
/project/Pharmacopoeia/List.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent, Fragment } from 'react';
  2 | import { connect } from 'dva';
  3 | import moment from 'moment';
  4 | import {
  5 |   Row,
  6 |   Col,
  7 |   Card,
  8 |   Form,
  9 |   Input,
 10 |   Select,
 11 |   Icon,
 12 |   Button,
 13 |   Dropdown,
 14 |   Menu,
 15 |   InputNumber,
 16 |   DatePicker,
 17 |   Modal,
 18 |   message,
 19 |   Badge,
 20 |   Divider,
 21 | } from 'antd';
 22 | import StandardTable from 'components/StandardTable';
 23 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 24 | 
 25 | import styles from './List.less';
 26 | 
 27 | const FormItem = Form.Item;
 28 | const { Option } = Select;
 29 | const getValue = obj =>
 30 |   Object.keys(obj)
 31 |     .map(key => obj[key])
 32 |     .join(',');
 33 | const statusMap = ['default', 'processing', 'success', 'error'];
 34 | const status = ['關閉', '運行中', '已上線', '異常'];
 35 | 
 36 | const CreateForm = Form.create()(props => {
 37 |   const { modalVisible, form, handleAdd, handleModalVisible } = props;
 38 |   const okHandle = () => {
 39 |     form.validateFields((err, fieldsValue) => {
 40 |       if (err) return;
 41 |       form.resetFields();
 42 |       handleAdd(fieldsValue);
 43 |     });
 44 |   };
 45 |   return (
 46 |     <Modal
 47 |       title="新建規則"
 48 |       visible={modalVisible}
 49 |       onOk={okHandle}
 50 |       onCancel={() => handleModalVisible()}
 51 |     >
 52 |       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
 53 |         {form.getFieldDecorator('desc', {
 54 |           rules: [{ required: true, message: 'Please input some description...' }],
 55 |         })(<Input placeholder="請輸入" />)}
 56 |       </FormItem>
 57 |     </Modal>
 58 |   );
 59 | });
 60 | 
 61 | @connect(({ rule, loading }) => ({
 62 |   rule,
 63 |   loading: loading.models.rule,
 64 | }))
 65 | @Form.create()
 66 | export default class List extends PureComponent {
 67 |   state = {
 68 |     modalVisible: false,
 69 |     expandForm: false,
 70 |     selectedRows: [],
 71 |     formValues: {},
 72 |   };
 73 | 
 74 |   componentDidMount() {
 75 |     const { dispatch } = this.props;
 76 |     dispatch({
 77 |       type: 'rule/fetch',
 78 |     });
 79 |   }
 80 | 
 81 |   handleStandardTableChange = (pagination, filtersArg, sorter) => {
 82 |     const { dispatch } = this.props;
 83 |     const { formValues } = this.state;
 84 | 
 85 |     const filters = Object.keys(filtersArg).reduce((obj, key) => {
 86 |       const newObj = { ...obj };
 87 |       newObj[key] = getValue(filtersArg[key]);
 88 |       return newObj;
 89 |     }, {});
 90 | 
 91 |     const params = {
 92 |       currentPage: pagination.current,
 93 |       pageSize: pagination.pageSize,
 94 |       ...formValues,
 95 |       ...filters,
 96 |     };
 97 |     if (sorter.field) {
 98 |       params.sorter = `${sorter.field}_${sorter.order}`;
 99 |     }
100 | 
101 |     dispatch({
102 |       type: 'rule/fetch',
103 |       payload: params,
104 |     });
105 |   };
106 | 
107 |   handleFormReset = () => {
108 |     const { form, dispatch } = this.props;
109 |     form.resetFields();
110 |     this.setState({
111 |       formValues: {},
112 |     });
113 |     dispatch({
114 |       type: 'rule/fetch',
115 |       payload: {},
116 |     });
117 |   };
118 | 
119 |   toggleForm = () => {
120 |     this.setState({
121 |       expandForm: !this.state.expandForm,
122 |     });
123 |   };
124 | 
125 |   handleMenuClick = e => {
126 |     const { dispatch } = this.props;
127 |     const { selectedRows } = this.state;
128 | 
129 |     if (!selectedRows) return;
130 | 
131 |     switch (e.key) {
132 |       case 'remove':
133 |         dispatch({
134 |           type: 'rule/remove',
135 |           payload: {
136 |             no: selectedRows.map(row => row.no).join(','),
137 |           },
138 |           callback: () => {
139 |             this.setState({
140 |               selectedRows: [],
141 |             });
142 |           },
143 |         });
144 |         break;
145 |       default:
146 |         break;
147 |     }
148 |   };
149 | 
150 |   handleSelectRows = rows => {
151 |     this.setState({
152 |       selectedRows: rows,
153 |     });
154 |   };
155 | 
156 |   handleSearch = e => {
157 |     e.preventDefault();
158 | 
159 |     const { dispatch, form } = this.props;
160 | 
161 |     form.validateFields((err, fieldsValue) => {
162 |       if (err) return;
163 | 
164 |       const values = {
165 |         ...fieldsValue,
166 |         updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
167 |       };
168 | 
169 |       this.setState({
170 |         formValues: values,
171 |       });
172 | 
173 |       dispatch({
174 |         type: 'rule/fetch',
175 |         payload: values,
176 |       });
177 |     });
178 |   };
179 | 
180 |   handleModalVisible = flag => {
181 |     this.setState({
182 |       modalVisible: !!flag,
183 |     });
184 |   };
185 | 
186 |   handleAdd = fields => {
187 |     this.props.dispatch({
188 |       type: 'rule/add',
189 |       payload: {
190 |         description: fields.desc,
191 |       },
192 |     });
193 | 
194 |     message.success('添加成功');
195 |     this.setState({
196 |       modalVisible: false,
197 |     });
198 |   };
199 | 
200 |   renderSimpleForm() {
201 |     const { getFieldDecorator } = this.props.form;
202 |     return (
203 |       <Form onSubmit={this.handleSearch} layout="inline">
204 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
205 |           <Col md={8} sm={24}>
206 |             <FormItem label="註冊編號">
207 |               {getFieldDecorator('no')(<Input placeholder="請輸入" />)}
208 |             </FormItem>
209 |           </Col>
210 |           <Col md={8} sm={24}>
211 |             <FormItem label="藥物名稱">
212 |             {getFieldDecorator('name')(<Input placeholder="請輸入" />)}
213 |             </FormItem>
214 |           </Col>
215 |           <Col md={8} sm={24}>
216 |             <span className={styles.submitButtons}>
217 |               <Button type="primary" htmlType="submit">
218 |                 搜尋
219 |               </Button>
220 |               <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
221 |                 重設
222 |               </Button>
223 |               <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
224 |                 更多 <Icon type="down" />
225 |               </a>
226 |             </span>
227 |           </Col>
228 |         </Row>
229 |       </Form>
230 |     );
231 |   }
232 | 
233 |   renderAdvancedForm() {
234 |     const { getFieldDecorator } = this.props.form;
235 |     return (
236 |       <Form onSubmit={this.handleSearch} layout="inline">
237 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
238 |           <Col md={8} sm={24}>
239 |             <FormItem label="規則編號">
240 |               {getFieldDecorator('no')(<Input placeholder="請輸入" />)}
241 |             </FormItem>
242 |           </Col>
243 |           <Col md={8} sm={24}>
244 |             <FormItem label="使用狀態">
245 |               {getFieldDecorator('status')(
246 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
247 |                   <Option value="0">關閉</Option>
248 |                   <Option value="1">運行中</Option>
249 |                 </Select>
250 |               )}
251 |             </FormItem>
252 |           </Col>
253 |           <Col md={8} sm={24}>
254 |             <FormItem label="調用次數">
255 |               {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
256 |             </FormItem>
257 |           </Col>
258 |         </Row>
259 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
260 |           <Col md={8} sm={24}>
261 |             <FormItem label="更新日期">
262 |               {getFieldDecorator('date')(
263 |                 <DatePicker style={{ width: '100%' }} placeholder="請輸入更新日期" />
264 |               )}
265 |             </FormItem>
266 |           </Col>
267 |           <Col md={8} sm={24}>
268 |             <FormItem label="使用狀態">
269 |               {getFieldDecorator('status3')(
270 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
271 |                   <Option value="0">關閉</Option>
272 |                   <Option value="1">運行中</Option>
273 |                 </Select>
274 |               )}
275 |             </FormItem>
276 |           </Col>
277 |           <Col md={8} sm={24}>
278 |             <FormItem label="使用狀態">
279 |               {getFieldDecorator('status4')(
280 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
281 |                   <Option value="0">關閉</Option>
282 |                   <Option value="1">運行中</Option>
283 |                 </Select>
284 |               )}
285 |             </FormItem>
286 |           </Col>
287 |         </Row>
288 |         <div style={{ overflow: 'hidden' }}>
289 |           <span style={{ float: 'right', marginBottom: 24 }}>
290 |             <Button type="primary" htmlType="submit">
291 |               查詢
292 |             </Button>
293 |             <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
294 |               重置
295 |             </Button>
296 |             <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
297 |               收起 <Icon type="up" />
298 |             </a>
299 |           </span>
300 |         </div>
301 |       </Form>
302 |     );
303 |   }
304 | 
305 |   renderForm() {
306 |     return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
307 |   }
308 | 
309 |   render() {
310 |     const { rule: { data }, loading } = this.props;
311 |     const { selectedRows, modalVisible } = this.state;
312 | 
313 |     const columns = [
314 |       {
315 |         title: '規則編號',
316 |         dataIndex: 'no',
317 |       },
318 |       {
319 |         title: '描述',
320 |         dataIndex: 'description',
321 |       },
322 |       {
323 |         title: '服務調用次數',
324 |         dataIndex: 'callNo',
325 |         sorter: true,
326 |         align: 'right',
327 |         render: val => `${val} 萬`,
328 |         // mark to display a total number
329 |         needTotal: true,
330 |       },
331 |       {
332 |         title: '狀態',
333 |         dataIndex: 'status',
334 |         filters: [
335 |           {
336 |             text: status[0],
337 |             value: 0,
338 |           },
339 |           {
340 |             text: status[1],
341 |             value: 1,
342 |           },
343 |           {
344 |             text: status[2],
345 |             value: 2,
346 |           },
347 |           {
348 |             text: status[3],
349 |             value: 3,
350 |           },
351 |         ],
352 |         onFilter: (value, record) => record.status.toString() === value,
353 |         render(val) {
354 |           return <Badge status={statusMap[val]} text={status[val]} />;
355 |         },
356 |       },
357 |       {
358 |         title: '更新時間',
359 |         dataIndex: 'updatedAt',
360 |         sorter: true,
361 |         render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
362 |       },
363 |       {
364 |         title: '操作',
365 |         render: () => (
366 |           <Fragment>
367 |             <a href="">配置</a>
368 |             <Divider type="vertical" />
369 |             <a href="">訂閱警報</a>
370 |           </Fragment>
371 |         ),
372 |       },
373 |     ];
374 | 
375 |     const menu = (
376 |       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
377 |         <Menu.Item key="remove">刪除</Menu.Item>
378 |         <Menu.Item key="approval">批量審批</Menu.Item>
379 |       </Menu>
380 |     );
381 | 
382 |     const parentMethods = {
383 |       handleAdd: this.handleAdd,
384 |       handleModalVisible: this.handleModalVisible,
385 |     };
386 | 
387 |     return (
388 |       <PageHeaderLayout title="查詢表格">
389 |         <Card bordered={false}>
390 |           <div className={styles.tableList}>
391 |             <div className={styles.tableListForm}>{this.renderForm()}</div>
392 |             <div className={styles.tableListOperator}>
393 |               <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
394 |                 新增
395 |               </Button>
396 |               {selectedRows.length > 0 && (
397 |                 <span>
398 |                   <Button>批量操作</Button>
399 |                   <Dropdown overlay={menu}>
400 |                     <Button>
401 |                       更多操作 <Icon type="down" />
402 |                     </Button>
403 |                   </Dropdown>
404 |                 </span>
405 |               )}
406 |             </div>
407 |             <StandardTable
408 |               selectedRows={selectedRows}
409 |               loading={loading}
410 |               data={data}
411 |               columns={columns}
412 |               onSelectRow={this.handleSelectRows}
413 |               onChange={this.handleStandardTableChange}
414 |             />
415 |           </div>
416 |         </Card>
417 |         <CreateForm {...parentMethods} modalVisible={modalVisible} />
418 |       </PageHeaderLayout>
419 |     );
420 |   }
421 | }
422 | 


--------------------------------------------------------------------------------
/project/List/TableList.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent, Fragment } from 'react';
  2 | import { connect } from 'dva';
  3 | import moment from 'moment';
  4 | import {
  5 |   Row,
  6 |   Col,
  7 |   Card,
  8 |   Form,
  9 |   Input,
 10 |   Select,
 11 |   Icon,
 12 |   Button,
 13 |   Dropdown,
 14 |   Menu,
 15 |   InputNumber,
 16 |   DatePicker,
 17 |   Modal,
 18 |   message,
 19 |   Badge,
 20 |   Divider,
 21 | } from 'antd';
 22 | import StandardTable from 'components/StandardTable';
 23 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 24 | 
 25 | import styles from './TableList.less';
 26 | 
 27 | const FormItem = Form.Item;
 28 | const { Option } = Select;
 29 | const getValue = obj =>
 30 |   Object.keys(obj)
 31 |     .map(key => obj[key])
 32 |     .join(',');
 33 | const statusMap = ['default', 'processing', 'success', 'error'];
 34 | const status = ['關閉', '運行中', '已上線', '異常'];
 35 | 
 36 | const CreateForm = Form.create()(props => {
 37 |   const { modalVisible, form, handleAdd, handleModalVisible } = props;
 38 |   const okHandle = () => {
 39 |     form.validateFields((err, fieldsValue) => {
 40 |       if (err) return;
 41 |       form.resetFields();
 42 |       handleAdd(fieldsValue);
 43 |     });
 44 |   };
 45 |   return (
 46 |     <Modal
 47 |       title="新建規則"
 48 |       visible={modalVisible}
 49 |       onOk={okHandle}
 50 |       onCancel={() => handleModalVisible()}
 51 |     >
 52 |       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
 53 |         {form.getFieldDecorator('desc', {
 54 |           rules: [{ required: true, message: 'Please input some description...' }],
 55 |         })(<Input placeholder="請輸入" />)}
 56 |       </FormItem>
 57 |     </Modal>
 58 |   );
 59 | });
 60 | 
 61 | @connect(({ rule, loading }) => ({
 62 |   rule,
 63 |   loading: loading.models.rule,
 64 | }))
 65 | @Form.create()
 66 | export default class TableList extends PureComponent {
 67 |   state = {
 68 |     modalVisible: false,
 69 |     expandForm: false,
 70 |     selectedRows: [],
 71 |     formValues: {},
 72 |   };
 73 | 
 74 |   componentDidMount() {
 75 |     const { dispatch } = this.props;
 76 |     dispatch({
 77 |       type: 'rule/fetch',
 78 |     });
 79 |   }
 80 | 
 81 |   handleStandardTableChange = (pagination, filtersArg, sorter) => {
 82 |     const { dispatch } = this.props;
 83 |     const { formValues } = this.state;
 84 | 
 85 |     const filters = Object.keys(filtersArg).reduce((obj, key) => {
 86 |       const newObj = { ...obj };
 87 |       newObj[key] = getValue(filtersArg[key]);
 88 |       return newObj;
 89 |     }, {});
 90 | 
 91 |     const params = {
 92 |       currentPage: pagination.current,
 93 |       pageSize: pagination.pageSize,
 94 |       ...formValues,
 95 |       ...filters,
 96 |     };
 97 |     if (sorter.field) {
 98 |       params.sorter = `${sorter.field}_${sorter.order}`;
 99 |     }
100 | 
101 |     dispatch({
102 |       type: 'rule/fetch',
103 |       payload: params,
104 |     });
105 |   };
106 | 
107 |   handleFormReset = () => {
108 |     const { form, dispatch } = this.props;
109 |     form.resetFields();
110 |     this.setState({
111 |       formValues: {},
112 |     });
113 |     dispatch({
114 |       type: 'rule/fetch',
115 |       payload: {},
116 |     });
117 |   };
118 | 
119 |   toggleForm = () => {
120 |     this.setState({
121 |       expandForm: !this.state.expandForm,
122 |     });
123 |   };
124 | 
125 |   handleMenuClick = e => {
126 |     const { dispatch } = this.props;
127 |     const { selectedRows } = this.state;
128 | 
129 |     if (!selectedRows) return;
130 | 
131 |     switch (e.key) {
132 |       case 'remove':
133 |         dispatch({
134 |           type: 'rule/remove',
135 |           payload: {
136 |             no: selectedRows.map(row => row.no).join(','),
137 |           },
138 |           callback: () => {
139 |             this.setState({
140 |               selectedRows: [],
141 |             });
142 |           },
143 |         });
144 |         break;
145 |       default:
146 |         break;
147 |     }
148 |   };
149 | 
150 |   handleSelectRows = rows => {
151 |     this.setState({
152 |       selectedRows: rows,
153 |     });
154 |   };
155 | 
156 |   handleSearch = e => {
157 |     e.preventDefault();
158 | 
159 |     const { dispatch, form } = this.props;
160 | 
161 |     form.validateFields((err, fieldsValue) => {
162 |       if (err) return;
163 | 
164 |       const values = {
165 |         ...fieldsValue,
166 |         updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
167 |       };
168 | 
169 |       this.setState({
170 |         formValues: values,
171 |       });
172 | 
173 |       dispatch({
174 |         type: 'rule/fetch',
175 |         payload: values,
176 |       });
177 |     });
178 |   };
179 | 
180 |   handleModalVisible = flag => {
181 |     this.setState({
182 |       modalVisible: !!flag,
183 |     });
184 |   };
185 | 
186 |   handleAdd = fields => {
187 |     this.props.dispatch({
188 |       type: 'rule/add',
189 |       payload: {
190 |         description: fields.desc,
191 |       },
192 |     });
193 | 
194 |     message.success('添加成功');
195 |     this.setState({
196 |       modalVisible: false,
197 |     });
198 |   };
199 | 
200 |   renderSimpleForm() {
201 |     const { getFieldDecorator } = this.props.form;
202 |     return (
203 |       <Form onSubmit={this.handleSearch} layout="inline">
204 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
205 |           <Col md={8} sm={24}>
206 |             <FormItem label="規則編號">
207 |               {getFieldDecorator('no')(<Input placeholder="請輸入" />)}
208 |             </FormItem>
209 |           </Col>
210 |           <Col md={8} sm={24}>
211 |             <FormItem label="使用狀態">
212 |               {getFieldDecorator('status')(
213 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
214 |                   <Option value="0">關閉</Option>
215 |                   <Option value="1">運行中</Option>
216 |                 </Select>
217 |               )}
218 |             </FormItem>
219 |           </Col>
220 |           <Col md={8} sm={24}>
221 |             <span className={styles.submitButtons}>
222 |               <Button type="primary" htmlType="submit">
223 |                 查詢
224 |               </Button>
225 |               <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
226 |                 重置
227 |               </Button>
228 |               <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
229 |                 展開 <Icon type="down" />
230 |               </a>
231 |             </span>
232 |           </Col>
233 |         </Row>
234 |       </Form>
235 |     );
236 |   }
237 | 
238 |   renderAdvancedForm() {
239 |     const { getFieldDecorator } = this.props.form;
240 |     return (
241 |       <Form onSubmit={this.handleSearch} layout="inline">
242 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
243 |           <Col md={8} sm={24}>
244 |             <FormItem label="規則編號">
245 |               {getFieldDecorator('no')(<Input placeholder="請輸入" />)}
246 |             </FormItem>
247 |           </Col>
248 |           <Col md={8} sm={24}>
249 |             <FormItem label="使用狀態">
250 |               {getFieldDecorator('status')(
251 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
252 |                   <Option value="0">關閉</Option>
253 |                   <Option value="1">運行中</Option>
254 |                 </Select>
255 |               )}
256 |             </FormItem>
257 |           </Col>
258 |           <Col md={8} sm={24}>
259 |             <FormItem label="調用次數">
260 |               {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
261 |             </FormItem>
262 |           </Col>
263 |         </Row>
264 |         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
265 |           <Col md={8} sm={24}>
266 |             <FormItem label="更新日期">
267 |               {getFieldDecorator('date')(
268 |                 <DatePicker style={{ width: '100%' }} placeholder="請輸入更新日期" />
269 |               )}
270 |             </FormItem>
271 |           </Col>
272 |           <Col md={8} sm={24}>
273 |             <FormItem label="使用狀態">
274 |               {getFieldDecorator('status3')(
275 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
276 |                   <Option value="0">關閉</Option>
277 |                   <Option value="1">運行中</Option>
278 |                 </Select>
279 |               )}
280 |             </FormItem>
281 |           </Col>
282 |           <Col md={8} sm={24}>
283 |             <FormItem label="使用狀態">
284 |               {getFieldDecorator('status4')(
285 |                 <Select placeholder="請選擇" style={{ width: '100%' }}>
286 |                   <Option value="0">關閉</Option>
287 |                   <Option value="1">運行中</Option>
288 |                 </Select>
289 |               )}
290 |             </FormItem>
291 |           </Col>
292 |         </Row>
293 |         <div style={{ overflow: 'hidden' }}>
294 |           <span style={{ float: 'right', marginBottom: 24 }}>
295 |             <Button type="primary" htmlType="submit">
296 |               查詢
297 |             </Button>
298 |             <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
299 |               重置
300 |             </Button>
301 |             <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
302 |               收起 <Icon type="up" />
303 |             </a>
304 |           </span>
305 |         </div>
306 |       </Form>
307 |     );
308 |   }
309 | 
310 |   renderForm() {
311 |     return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
312 |   }
313 | 
314 |   render() {
315 |     const { rule: { data }, loading } = this.props;
316 |     const { selectedRows, modalVisible } = this.state;
317 | 
318 |     const columns = [
319 |       {
320 |         title: '規則編號',
321 |         dataIndex: 'no',
322 |       },
323 |       {
324 |         title: '描述',
325 |         dataIndex: 'description',
326 |       },
327 |       {
328 |         title: '服務調用次數',
329 |         dataIndex: 'callNo',
330 |         sorter: true,
331 |         align: 'right',
332 |         render: val => `${val} 萬`,
333 |         // mark to display a total number
334 |         needTotal: true,
335 |       },
336 |       {
337 |         title: '狀態',
338 |         dataIndex: 'status',
339 |         filters: [
340 |           {
341 |             text: status[0],
342 |             value: 0,
343 |           },
344 |           {
345 |             text: status[1],
346 |             value: 1,
347 |           },
348 |           {
349 |             text: status[2],
350 |             value: 2,
351 |           },
352 |           {
353 |             text: status[3],
354 |             value: 3,
355 |           },
356 |         ],
357 |         onFilter: (value, record) => record.status.toString() === value,
358 |         render(val) {
359 |           return <Badge status={statusMap[val]} text={status[val]} />;
360 |         },
361 |       },
362 |       {
363 |         title: '更新時間',
364 |         dataIndex: 'updatedAt',
365 |         sorter: true,
366 |         render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
367 |       },
368 |       {
369 |         title: '操作',
370 |         render: () => (
371 |           <Fragment>
372 |             <a href="">配置</a>
373 |             <Divider type="vertical" />
374 |             <a href="">訂閱警報</a>
375 |           </Fragment>
376 |         ),
377 |       },
378 |     ];
379 | 
380 |     const menu = (
381 |       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
382 |         <Menu.Item key="remove">刪除</Menu.Item>
383 |         <Menu.Item key="approval">批量審批</Menu.Item>
384 |       </Menu>
385 |     );
386 | 
387 |     const parentMethods = {
388 |       handleAdd: this.handleAdd,
389 |       handleModalVisible: this.handleModalVisible,
390 |     };
391 | 
392 |     return (
393 |       <PageHeaderLayout title="查詢表格">
394 |         <Card bordered={false}>
395 |           <div className={styles.tableList}>
396 |             <div className={styles.tableListForm}>{this.renderForm()}</div>
397 |             <div className={styles.tableListOperator}>
398 |               <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
399 |                 新建
400 |               </Button>
401 |               {selectedRows.length > 0 && (
402 |                 <span>
403 |                   <Button>批量操作</Button>
404 |                   <Dropdown overlay={menu}>
405 |                     <Button>
406 |                       更多操作 <Icon type="down" />
407 |                     </Button>
408 |                   </Dropdown>
409 |                 </span>
410 |               )}
411 |             </div>
412 |             <StandardTable
413 |               selectedRows={selectedRows}
414 |               loading={loading}
415 |               data={data}
416 |               columns={columns}
417 |               onSelectRow={this.handleSelectRows}
418 |               onChange={this.handleStandardTableChange}
419 |             />
420 |           </div>
421 |         </Card>
422 |         <CreateForm {...parentMethods} modalVisible={modalVisible} />
423 |       </PageHeaderLayout>
424 |     );
425 |   }
426 | }
427 | 


--------------------------------------------------------------------------------
/project/Dashboard/Analysis.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, Fragment } from 'react';
  2 | import { connect } from 'dva';
  3 | import {
  4 |   Row,
  5 |   Col,
  6 |   Icon,
  7 |   Card,
  8 |   Tabs,
  9 |   Table,
 10 |   Radio,
 11 |   DatePicker,
 12 |   Tooltip,
 13 |   Menu,
 14 |   Dropdown,
 15 | } from 'antd';
 16 | import numeral from 'numeral';
 17 | import {
 18 |   ChartCard,
 19 |   yuan,
 20 |   MiniArea,
 21 |   MiniBar,
 22 |   MiniProgress,
 23 |   Field,
 24 |   Bar,
 25 |   Pie,
 26 |   TimelineChart,
 27 | } from 'components/Charts';
 28 | import Trend from 'components/Trend';
 29 | import NumberInfo from 'components/NumberInfo';
 30 | import { getTimeDistance } from '../../utils/utils';
 31 | 
 32 | import styles from './Analysis.less';
 33 | 
 34 | const { TabPane } = Tabs;
 35 | const { RangePicker } = DatePicker;
 36 | 
 37 | const rankingListData = [];
 38 | for (let i = 0; i < 7; i += 1) {
 39 |   rankingListData.push({
 40 |     title: `工專路 ${i} 號店`,
 41 |     total: 323234,
 42 |   });
 43 | }
 44 | 
 45 | const Yuan = ({ children }) => (
 46 |   <span dangerouslySetInnerHTML={{ __html: yuan(children) }} /> /* eslint-disable-line react/no-danger */
 47 | );
 48 | 
 49 | @connect(({ chart, loading }) => ({
 50 |   chart,
 51 |   loading: loading.effects['chart/fetch'],
 52 | }))
 53 | export default class Analysis extends Component {
 54 |   state = {
 55 |     salesType: 'all',
 56 |     currentTabKey: '',
 57 |     rangePickerValue: getTimeDistance('year'),
 58 |   };
 59 | 
 60 |   componentDidMount() {
 61 |     this.props.dispatch({
 62 |       type: 'chart/fetch',
 63 |     });
 64 |   }
 65 | 
 66 |   componentWillUnmount() {
 67 |     const { dispatch } = this.props;
 68 |     dispatch({
 69 |       type: 'chart/clear',
 70 |     });
 71 |   }
 72 | 
 73 |   handleChangeSalesType = e => {
 74 |     this.setState({
 75 |       salesType: e.target.value,
 76 |     });
 77 |   };
 78 | 
 79 |   handleTabChange = key => {
 80 |     this.setState({
 81 |       currentTabKey: key,
 82 |     });
 83 |   };
 84 | 
 85 |   handleRangePickerChange = rangePickerValue => {
 86 |     this.setState({
 87 |       rangePickerValue,
 88 |     });
 89 | 
 90 |     this.props.dispatch({
 91 |       type: 'chart/fetchSalesData',
 92 |     });
 93 |   };
 94 | 
 95 |   selectDate = type => {
 96 |     this.setState({
 97 |       rangePickerValue: getTimeDistance(type),
 98 |     });
 99 | 
100 |     this.props.dispatch({
101 |       type: 'chart/fetchSalesData',
102 |     });
103 |   };
104 | 
105 |   isActive(type) {
106 |     const { rangePickerValue } = this.state;
107 |     const value = getTimeDistance(type);
108 |     if (!rangePickerValue[0] || !rangePickerValue[1]) {
109 |       return;
110 |     }
111 |     if (
112 |       rangePickerValue[0].isSame(value[0], 'day') &&
113 |       rangePickerValue[1].isSame(value[1], 'day')
114 |     ) {
115 |       return styles.currentDate;
116 |     }
117 |   }
118 | 
119 |   render() {
120 |     const { rangePickerValue, salesType, currentTabKey } = this.state;
121 |     const { chart, loading } = this.props;
122 |     const {
123 |       visitData,
124 |       visitData2,
125 |       salesData,
126 |       searchData,
127 |       offlineData,
128 |       offlineChartData,
129 |       salesTypeData,
130 |       salesTypeDataOnline,
131 |       salesTypeDataOffline,
132 |     } = chart;
133 | 
134 |     const salesPieData =
135 |       salesType === 'all'
136 |         ? salesTypeData
137 |         : salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
138 | 
139 |     const menu = (
140 |       <Menu>
141 |         <Menu.Item>操作壹</Menu.Item>
142 |         <Menu.Item>操作二</Menu.Item>
143 |       </Menu>
144 |     );
145 | 
146 |     const iconGroup = (
147 |       <span className={styles.iconGroup}>
148 |         <Dropdown overlay={menu} placement="bottomRight">
149 |           <Icon type="ellipsis" />
150 |         </Dropdown>
151 |       </span>
152 |     );
153 | 
154 |     const salesExtra = (
155 |       <div className={styles.salesExtraWrap}>
156 |         <div className={styles.salesExtra}>
157 |           <a className={this.isActive('today')} onClick={() => this.selectDate('today')}>
158 |             今日
159 |           </a>
160 |           <a className={this.isActive('week')} onClick={() => this.selectDate('week')}>
161 |             本週
162 |           </a>
163 |           <a className={this.isActive('month')} onClick={() => this.selectDate('month')}>
164 |             本月
165 |           </a>
166 |           <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
167 |             全年
168 |           </a>
169 |         </div>
170 |         <RangePicker
171 |           value={rangePickerValue}
172 |           onChange={this.handleRangePickerChange}
173 |           style={{ width: 256 }}
174 |         />
175 |       </div>
176 |     );
177 | 
178 |     const columns = [
179 |       {
180 |         title: '排名',
181 |         dataIndex: 'index',
182 |         key: 'index',
183 |       },
184 |       {
185 |         title: '搜索關鍵詞',
186 |         dataIndex: 'keyword',
187 |         key: 'keyword',
188 |         render: text => <a href="/">{text}</a>,
189 |       },
190 |       {
191 |         title: '用戶數',
192 |         dataIndex: 'count',
193 |         key: 'count',
194 |         sorter: (a, b) => a.count - b.count,
195 |         className: styles.alignRight,
196 |       },
197 |       {
198 |         title: '週漲幅',
199 |         dataIndex: 'range',
200 |         key: 'range',
201 |         sorter: (a, b) => a.range - b.range,
202 |         render: (text, record) => (
203 |           <Trend flag={record.status === 1 ? 'down' : 'up'}>
204 |             <span style={{ marginRight: 4 }}>{text}%</span>
205 |           </Trend>
206 |         ),
207 |         align: 'right',
208 |       },
209 |     ];
210 | 
211 |     const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
212 | 
213 |     const CustomTab = ({ data, currentTabKey: currentKey }) => (
214 |       <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
215 |         <Col span={12}>
216 |           <NumberInfo
217 |             title={data.name}
218 |             subTitle="轉化率"
219 |             gap={2}
220 |             total={`${data.cvr * 100}%`}
221 |             theme={currentKey !== data.name && 'light'}
222 |           />
223 |         </Col>
224 |         <Col span={12} style={{ paddingTop: 36 }}>
225 |           <Pie
226 |             animate={false}
227 |             color={currentKey !== data.name && '#BDE4FF'}
228 |             inner={0.55}
229 |             tooltip={false}
230 |             margin={[0, 0, 0, 0]}
231 |             percent={data.cvr * 100}
232 |             height={64}
233 |           />
234 |         </Col>
235 |       </Row>
236 |     );
237 | 
238 |     const topColResponsiveProps = {
239 |       xs: 24,
240 |       sm: 12,
241 |       md: 12,
242 |       lg: 12,
243 |       xl: 6,
244 |       style: { marginBottom: 24 },
245 |     };
246 | 
247 |     return (
248 |       <Fragment>
249 |         <Row gutter={24}>
250 |           <Col {...topColResponsiveProps}>
251 |             <ChartCard
252 |               bordered={false}
253 |               title="總銷售額"
254 |               action={
255 |                 <Tooltip title="指標說明">
256 |                   <Icon type="info-circle-o" />
257 |                 </Tooltip>
258 |               }
259 |               total={() => <Yuan>126560</Yuan>}
260 |               footer={<Field label="日均銷售額" value={`￥${numeral(12423).format('0,0')}`} />}
261 |               contentHeight={46}
262 |             >
263 |               <Trend flag="up" style={{ marginRight: 16 }}>
264 |                 週同比<span className={styles.trendText}>12%</span>
265 |               </Trend>
266 |               <Trend flag="down">
267 |                 日環比<span className={styles.trendText}>11%</span>
268 |               </Trend>
269 |             </ChartCard>
270 |           </Col>
271 |           <Col {...topColResponsiveProps}>
272 |             <ChartCard
273 |               bordered={false}
274 |               title="訪問量"
275 |               action={
276 |                 <Tooltip title="指標說明">
277 |                   <Icon type="info-circle-o" />
278 |                 </Tooltip>
279 |               }
280 |               total={numeral(8846).format('0,0')}
281 |               footer={<Field label="日訪問量" value={numeral(1234).format('0,0')} />}
282 |               contentHeight={46}
283 |             >
284 |               <MiniArea color="#975FE4" data={visitData} />
285 |             </ChartCard>
286 |           </Col>
287 |           <Col {...topColResponsiveProps}>
288 |             <ChartCard
289 |               bordered={false}
290 |               title="支付筆數"
291 |               action={
292 |                 <Tooltip title="指標說明">
293 |                   <Icon type="info-circle-o" />
294 |                 </Tooltip>
295 |               }
296 |               total={numeral(6560).format('0,0')}
297 |               footer={<Field label="轉化率" value="60%" />}
298 |               contentHeight={46}
299 |             >
300 |               <MiniBar data={visitData} />
301 |             </ChartCard>
302 |           </Col>
303 |           <Col {...topColResponsiveProps}>
304 |             <ChartCard
305 |               bordered={false}
306 |               title="運營活動效果"
307 |               action={
308 |                 <Tooltip title="指標說明">
309 |                   <Icon type="info-circle-o" />
310 |                 </Tooltip>
311 |               }
312 |               total="78%"
313 |               footer={
314 |                 <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
315 |                   <Trend flag="up" style={{ marginRight: 16 }}>
316 |                     週同比<span className={styles.trendText}>12%</span>
317 |                   </Trend>
318 |                   <Trend flag="down">
319 |                     日環比<span className={styles.trendText}>11%</span>
320 |                   </Trend>
321 |                 </div>
322 |               }
323 |               contentHeight={46}
324 |             >
325 |               <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
326 |             </ChartCard>
327 |           </Col>
328 |         </Row>
329 | 
330 |         <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
331 |           <div className={styles.salesCard}>
332 |             <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
333 |               <TabPane tab="銷售額" key="sales">
334 |                 <Row>
335 |                   <Col xl={16} lg={12} md={12} sm={24} xs={24}>
336 |                     <div className={styles.salesBar}>
337 |                       <Bar height={295} title="銷售額趨勢" data={salesData} />
338 |                     </div>
339 |                   </Col>
340 |                   <Col xl={8} lg={12} md={12} sm={24} xs={24}>
341 |                     <div className={styles.salesRank}>
342 |                       <h4 className={styles.rankingTitle}>門店銷售額排名</h4>
343 |                       <ul className={styles.rankingList}>
344 |                         {rankingListData.map((item, i) => (
345 |                           <li key={item.title}>
346 |                             <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
347 |                             <span>{item.title}</span>
348 |                             <span>{numeral(item.total).format('0,0')}</span>
349 |                           </li>
350 |                         ))}
351 |                       </ul>
352 |                     </div>
353 |                   </Col>
354 |                 </Row>
355 |               </TabPane>
356 |               <TabPane tab="訪問量" key="views">
357 |                 <Row>
358 |                   <Col xl={16} lg={12} md={12} sm={24} xs={24}>
359 |                     <div className={styles.salesBar}>
360 |                       <Bar height={292} title="訪問量趨勢" data={salesData} />
361 |                     </div>
362 |                   </Col>
363 |                   <Col xl={8} lg={12} md={12} sm={24} xs={24}>
364 |                     <div className={styles.salesRank}>
365 |                       <h4 className={styles.rankingTitle}>門店訪問量排名</h4>
366 |                       <ul className={styles.rankingList}>
367 |                         {rankingListData.map((item, i) => (
368 |                           <li key={item.title}>
369 |                             <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
370 |                             <span>{item.title}</span>
371 |                             <span>{numeral(item.total).format('0,0')}</span>
372 |                           </li>
373 |                         ))}
374 |                       </ul>
375 |                     </div>
376 |                   </Col>
377 |                 </Row>
378 |               </TabPane>
379 |             </Tabs>
380 |           </div>
381 |         </Card>
382 | 
383 |         <Row gutter={24}>
384 |           <Col xl={12} lg={24} md={24} sm={24} xs={24}>
385 |             <Card
386 |               loading={loading}
387 |               bordered={false}
388 |               title="線上熱門搜索"
389 |               extra={iconGroup}
390 |               style={{ marginTop: 24 }}
391 |             >
392 |               <Row gutter={68}>
393 |                 <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
394 |                   <NumberInfo
395 |                     subTitle={
396 |                       <span>
397 |                         搜索用戶數
398 |                         <Tooltip title="指標文案">
399 |                           <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
400 |                         </Tooltip>
401 |                       </span>
402 |                     }
403 |                     gap={8}
404 |                     total={numeral(12321).format('0,0')}
405 |                     status="up"
406 |                     subTotal={17.1}
407 |                   />
408 |                   <MiniArea line height={45} data={visitData2} />
409 |                 </Col>
410 |                 <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
411 |                   <NumberInfo
412 |                     subTitle="人均搜索次數"
413 |                     total={2.7}
414 |                     status="down"
415 |                     subTotal={26.2}
416 |                     gap={8}
417 |                   />
418 |                   <MiniArea line height={45} data={visitData2} />
419 |                 </Col>
420 |               </Row>
421 |               <Table
422 |                 rowKey={record => record.index}
423 |                 size="small"
424 |                 columns={columns}
425 |                 dataSource={searchData}
426 |                 pagination={{
427 |                   style: { marginBottom: 0 },
428 |                   pageSize: 5,
429 |                 }}
430 |               />
431 |             </Card>
432 |           </Col>
433 |           <Col xl={12} lg={24} md={24} sm={24} xs={24}>
434 |             <Card
435 |               loading={loading}
436 |               className={styles.salesCard}
437 |               bordered={false}
438 |               title="銷售額類別占比"
439 |               bodyStyle={{ padding: 24 }}
440 |               extra={
441 |                 <div className={styles.salesCardExtra}>
442 |                   {iconGroup}
443 |                   <div className={styles.salesTypeRadio}>
444 |                     <Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
445 |                       <Radio.Button value="all">全部渠道</Radio.Button>
446 |                       <Radio.Button value="online">線上</Radio.Button>
447 |                       <Radio.Button value="offline">門店</Radio.Button>
448 |                     </Radio.Group>
449 |                   </div>
450 |                 </div>
451 |               }
452 |               style={{ marginTop: 24, minHeight: 509 }}
453 |             >
454 |               <h4 style={{ marginTop: 8, marginBottom: 32 }}>銷售額</h4>
455 |               <Pie
456 |                 hasLegend
457 |                 subTitle="銷售額"
458 |                 total={
459 |                   () => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
460 |                 }
461 |                 data={salesPieData}
462 |                 valueFormat={value => <Yuan>{value}</Yuan>}
463 |                 height={248}
464 |                 lineWidth={4}
465 |               />
466 |             </Card>
467 |           </Col>
468 |         </Row>
469 | 
470 |         <Card
471 |           loading={loading}
472 |           className={styles.offlineCard}
473 |           bordered={false}
474 |           bodyStyle={{ padding: '0 0 32px 0' }}
475 |           style={{ marginTop: 32 }}
476 |         >
477 |           <Tabs activeKey={activeKey} onChange={this.handleTabChange}>
478 |             {offlineData.map(shop => (
479 |               <TabPane tab={<CustomTab data={shop} currentTabKey={activeKey} />} key={shop.name}>
480 |                 <div style={{ padding: '0 24px' }}>
481 |                   <TimelineChart
482 |                     height={400}
483 |                     data={offlineChartData}
484 |                     titleMap={{ y1: '客流量', y2: '支付筆數' }}
485 |                   />
486 |                 </div>
487 |               </TabPane>
488 |             ))}
489 |           </Tabs>
490 |         </Card>
491 |       </Fragment>
492 |     );
493 |   }
494 | }
495 | 


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