你的账户：AntDesign@example.com 注册成功
8 |
9 | const actions = (
10 |
11 |
12 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 |
22 | export default () => (
23 | Ant Design Pro
') 33 | }) 34 | 35 | afterAll(() => browser.close()) 36 | }) 37 | -------------------------------------------------------------------------------- /src/pages/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 | -------------------------------------------------------------------------------- /src/components/EditableLinkGroup/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent, createElement } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Button } from 'antd' 4 | import styles from './index.less' 5 | 6 | // TODO: 添加逻辑 7 | 8 | class EditableLinkGroup extends PureComponent { 9 | static defaultProps = { 10 | links: [], 11 | onAdd: () => {}, 12 | linkElement: 'a', 13 | } 14 | 15 | static propTypes = { 16 | links: PropTypes.array, 17 | onAdd: PropTypes.func, 18 | linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), 19 | } 20 | 21 | render() { 22 | const { links, linkElement, onAdd } = this.props 23 | return ( 24 |
25 | {links.map(link =>
26 | createElement(
27 | linkElement,
28 | {
29 | key: `linkGroup-item-${link.id || link.title}`,
30 | to: link.href,
31 | href: link.href,
32 | },
33 | link.title
34 | )
35 | )}
36 | {
37 |
40 | }
41 |
42 | )
43 | }
44 | }
45 |
46 | export default EditableLinkGroup
47 |
--------------------------------------------------------------------------------
/src/pages/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 |
27 | {editable ? (
28 |
39 | )
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/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 |
--------------------------------------------------------------------------------
/src/pages/Result/Error.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { Button, Icon, Card } from 'antd'
3 | import Result from 'ant-design-pro/lib/Result'
4 | import PageHeaderLayout from '../../layouts/PageHeaderLayout'
5 |
6 | const extra = (
7 |
29 |
30 |
32 | ) : (
33 |
34 | {value || ' '}
35 |
37 | )}
38 |
16 | 您提交的内容有如下错误：
17 |
18 |
19 |
24 |
25 |
30 |
16 |
17 |
22 |
23 |
28 |
29 |
34 |
35 |
42 |
43 | )
44 | const actions = (
45 |
45 |
53 | )
54 |
55 | const { match, routerData, location } = this.props
56 | const routes = getRoutes(match.path, routerData)
57 |
58 | return (
59 |
45 |
80 | )
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/layouts/UserLayout.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { Link, Redirect, Switch, Route } from 'dva/router'
3 | import DocumentTitle from 'react-document-title'
4 | import { Icon } from 'antd'
5 | import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'
6 | import styles from './UserLayout.less'
7 | import logo from '../assets/logo.svg'
8 | import { getRoutes } from '../utils/utils'
9 |
10 | const links = [
11 | {
12 | key: 'help',
13 | title: '帮助',
14 | href: '',
15 | },
16 | {
17 | key: 'privacy',
18 | title: '隐私',
19 | href: '',
20 | },
21 | {
22 | key: 'terms',
23 | title: '条款',
24 | href: '',
25 | },
26 | ]
27 |
28 | const copyright = (
29 |
47 |
66 | {activeData && (
67 |
68 |
71 | )}
72 | {activeData && (
73 | {[...activeData].sort()[activeData.length - 1].y + 200} 亿元
69 |{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元
70 |
74 | 00:00
75 | {activeData[Math.floor(activeData.length / 2)].x}
76 | {activeData[activeData.length - 1].x}
77 |
78 | )}
79 |
49 |
73 |
50 |
60 | {getRoutes(match.path, routerData).map(item => (
61 |
70 |
71 |
51 |
59 |
52 |
53 | 
54 | Ant Design
55 |
56 |
57 | Ant Design 是西湖区最具影响力的 Web 设计规范
58 |
17 |
22 | )
23 |
24 | const desc2 = (
25 |
18 | 曲丽丽
20 | 2016-12-12 12:32
21 |
26 |
33 | )
34 |
35 | const extra = (
36 |
27 | 周毛毛
29 |
30 | 催一下
31 |
32 |
45 | 项目名称
46 |
47 |
29 |
45 | )
46 |
47 | const extraContent = (
48 | 30 | 段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 31 | 提供跨越设计与开发的体验解决方案。 32 |
33 | 44 |
快速开始
36 | 
产品简介
39 | 
产品文档
42 |
49 | 
50 |
51 | )
52 |
53 | return (
54 |
50 |
56 |
86 | -
62 | item ? (
63 |
52 |
53 |
54 | {login.status === 'error' &&
55 | login.type === 'account' &&
56 | !login.submitting &&
57 | this.renderMessage('账户或密码错误（admin/888888）')}
58 |
61 |
62 | {login.status === 'error' &&
63 | login.type === 'mobile' &&
64 | !login.submitting &&
65 | this.renderMessage('验证码错误')}
66 |
69 | 登录
78 |
88 |
89 | )
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/public/exImages/ohOEPSYdDTNnyMbGuyLb.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/pages/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 |
91 | )
92 | }
93 | }
94 |
95 | export default connect(({ form, loading }) => ({
96 | submitting: loading.effects['form/submitStepForm'],
97 | data: form.step,
98 | }))(Step2)
99 |
--------------------------------------------------------------------------------
/src/components/Login/LoginItem.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Form, Button, Row, Col } from 'antd'
4 | import omit from 'omit.js'
5 | import styles from './index.less'
6 | import map from './map'
7 |
8 | const FormItem = Form.Item
9 |
10 | function generator({ defaultProps, defaultRules, type }) {
11 | return WrappedComponent => {
12 | return class BasicComponent extends Component {
13 | static contextTypes = {
14 | form: PropTypes.object,
15 | updateActive: PropTypes.func,
16 | }
17 | constructor(props) {
18 | super(props)
19 | this.state = {
20 | count: 0,
21 | }
22 | }
23 | componentDidMount() {
24 | if (this.context.updateActive) {
25 | this.context.updateActive(this.props.name)
26 | }
27 | }
28 | componentWillUnmount() {
29 | clearInterval(this.interval)
30 | }
31 | onGetCaptcha = () => {
32 | let count = 59
33 | this.setState({ count })
34 | if (this.props.onGetCaptcha) {
35 | this.props.onGetCaptcha()
36 | }
37 | this.interval = setInterval(() => {
38 | count -= 1
39 | this.setState({ count })
40 | if (count === 0) {
41 | clearInterval(this.interval)
42 | }
43 | }, 1000)
44 | }
45 | render() {
46 | const { getFieldDecorator } = this.context.form
47 | const options = {}
48 | let otherProps = {}
49 | const { onChange, defaultValue, rules, name, ...restProps } = this.props
50 | const { count } = this.state
51 | options.rules = rules || defaultRules
52 | if (onChange) {
53 | options.onChange = onChange
54 | }
55 | if (defaultValue) {
56 | options.initialValue = defaultValue
57 | }
58 | otherProps = restProps || otherProps
59 | if (type === 'Captcha') {
60 | const inputProps = omit(otherProps, ['onGetCaptcha'])
61 | return (
62 |
70 |
71 | 自动登录
72 |
73 |
74 | 忘记密码
75 |
76 |
77 |
79 | 其他登录方式
80 |
87 |
94 |
111 |
112 | )
113 | }
114 | }
115 |
116 | Login.Tab = LoginTab
117 | Login.Submit = LoginSubmit
118 | Object.keys(LoginItem).forEach(item => {
119 | Login[item] = LoginItem[item]
120 | })
121 |
122 | export default Login
123 |
--------------------------------------------------------------------------------
/src/components/StandardTable/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, Fragment } from 'react'
2 | import { Table, Alert } from 'antd'
3 | import styles from './index.less'
4 |
5 | function initTotalList(columns) {
6 | const totalList = []
7 | columns.forEach(column => {
8 | if (column.needTotal) {
9 | totalList.push({ ...column, total: 0 })
10 | }
11 | })
12 | return totalList
13 | }
14 |
15 | class StandardTable extends PureComponent {
16 | static getDerivedStateFromProps(nextProps) {
17 | if (nextProps.selectedRows.length === 0) {
18 | const needTotalList = initTotalList(nextProps.columns)
19 | return {
20 | selectedRowKeys: [],
21 | needTotalList,
22 | }
23 | }
24 | return null
25 | }
26 | state = {
27 | selectedRowKeys: [],
28 | needTotalList: initTotalList(this.props.columns),
29 | }
30 |
31 | handleRowSelectChange = (selectedRowKeys, selectedRows) => {
32 | let needTotalList = [...this.state.needTotalList]
33 | needTotalList = needTotalList.map(item => {
34 | return {
35 | ...item,
36 | total: selectedRows.reduce((sum, val) => {
37 | return sum + parseFloat(val[item.dataIndex], 10)
38 | }, 0),
39 | }
40 | })
41 |
42 | if (this.props.onSelectRow) {
43 | this.props.onSelectRow(selectedRows)
44 | }
45 |
46 | this.setState({ selectedRowKeys, needTotalList })
47 | }
48 |
49 | handleTableChange = (pagination, filters, sorter) => {
50 | this.props.onChange(pagination, filters, sorter)
51 | }
52 |
53 | cleanSelectedKeys = () => {
54 | this.handleRowSelectChange([], [])
55 | }
56 |
57 | render() {
58 | const { selectedRowKeys, needTotalList } = this.state
59 | const { data: { list, pagination }, loading, columns } = this.props
60 |
61 | const paginationProps = {
62 | showSizeChanger: true,
63 | showQuickJumper: true,
64 | ...pagination,
65 | }
66 |
67 | const rowSelection = {
68 | selectedRowKeys,
69 | onChange: this.handleRowSelectChange,
70 | getCheckboxProps: record => ({
71 | disabled: record.disabled,
72 | }),
73 | }
74 |
75 | return (
76 |
77 | record.key}
102 | rowSelection={rowSelection}
103 | dataSource={list}
104 | columns={columns}
105 | pagination={paginationProps}
106 | onChange={this.handleTableChange}
107 | />
108 |
109 | )
110 | }
111 | }
112 |
113 | export default StandardTable
114 |
--------------------------------------------------------------------------------
/src/pages/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 |
--------------------------------------------------------------------------------
/src/components/Login/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 标准登录
5 | en-US: Standard Login
6 | ---
7 |
8 | Support login with account and mobile number.
9 |
10 | ````jsx
11 | import Login from 'src/components/Login';
12 | import { Alert, Checkbox } from 'antd';
13 |
14 | const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
15 |
16 | class LoginDemo extends React.Component {
17 | state = {
18 | notice: '',
19 | type: 'tab2',
20 | autoLogin: true,
21 | }
22 | onSubmit = (err, values) => {
23 | console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin });
24 | if (this.state.type === 'tab1') {
25 | this.setState({
26 | notice: '',
27 | }, () => {
28 | if (!err && (values.username !== 'admin' || values.password !== '888888')) {
29 | setTimeout(() => {
30 | this.setState({
31 | notice: 'The combination of username and password is incorrect!',
32 | });
33 | }, 500);
34 | }
35 | });
36 | }
37 | }
38 | onTabChange = (key) => {
39 | this.setState({
40 | type: key,
41 | });
42 | }
43 | changeAutoLogin = (e) => {
44 | this.setState({
45 | autoLogin: e.target.checked,
46 | });
47 | }
48 | render() {
49 | return (
50 |
78 |
81 | 已选择 {selectedRowKeys.length} 项
82 | {needTotalList.map(item => (
83 |
84 | {item.title}总计
85 |
86 | {item.render ? item.render(item.total) : item.total}
87 |
88 |
89 | ))}
90 |
91 | 清空
92 |
93 |
94 | }
95 | type="info"
96 | showIcon
97 | />
98 |
99 |