正在显示
15 个修改的文件
包含
418 行增加
和
0 行删除
ant-design-pro/ResultError/.gitignore
0 → 100644
ant-design-pro/ResultError/.umirc.js
0 → 100644
1 | +import React, { PureComponent } from 'react'; | ||
2 | +import { connect } from 'dva'; | ||
3 | +import styles from './GridContent.less'; | ||
4 | + | ||
5 | +class GridContent extends PureComponent { | ||
6 | + render() { | ||
7 | + const { contentWidth, children } = this.props; | ||
8 | + let className = `${styles.main}`; | ||
9 | + if (contentWidth === 'Fixed') { | ||
10 | + className = `${styles.main} ${styles.wide}`; | ||
11 | + } | ||
12 | + return <div className={className}>{children}</div>; | ||
13 | + } | ||
14 | +} | ||
15 | + | ||
16 | +export default connect(({ setting }) => ({ | ||
17 | + contentWidth: setting.contentWidth, | ||
18 | +}))(GridContent); |
1 | +import React from 'react'; | ||
2 | +import { FormattedMessage } from 'umi/locale'; | ||
3 | +import Link from 'umi/link'; | ||
4 | +import PageHeader from 'ant-design-pro/lib/PageHeader'; | ||
5 | +import { connect } from 'dva'; | ||
6 | +import GridContent from './GridContent'; | ||
7 | +import styles from './index.less'; | ||
8 | +import MenuContext from '@/layouts/MenuContext'; | ||
9 | + | ||
10 | +const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => ( | ||
11 | + <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}> | ||
12 | + {top} | ||
13 | + <MenuContext.Consumer> | ||
14 | + {value => ( | ||
15 | + <PageHeader | ||
16 | + wide={contentWidth === 'Fixed'} | ||
17 | + home={<FormattedMessage id="menu.home" defaultMessage="Home" />} | ||
18 | + {...value} | ||
19 | + key="pageheader" | ||
20 | + {...restProps} | ||
21 | + linkElement={Link} | ||
22 | + itemRender={item => { | ||
23 | + if (item.locale) { | ||
24 | + return <FormattedMessage id={item.locale} defaultMessage={item.title} />; | ||
25 | + } | ||
26 | + return item.title; | ||
27 | + }} | ||
28 | + /> | ||
29 | + )} | ||
30 | + </MenuContext.Consumer> | ||
31 | + {children ? ( | ||
32 | + <div className={styles.content}> | ||
33 | + <GridContent>{children}</GridContent> | ||
34 | + </div> | ||
35 | + ) : null} | ||
36 | + </div> | ||
37 | +); | ||
38 | + | ||
39 | +export default connect(({ setting }) => ({ | ||
40 | + contentWidth: setting.contentWidth, | ||
41 | +}))(PageHeaderWrapper); |
ant-design-pro/ResultError/README.md
0 → 100644
ant-design-pro/ResultError/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "@umi-block/resulterror", | ||
3 | + "version": "0.0.1", | ||
4 | + "description": "ResultError", | ||
5 | + "main": "src/index.js", | ||
6 | + "scripts": { | ||
7 | + "dev": "umi dev" | ||
8 | + }, | ||
9 | + "repository": { | ||
10 | + "type": "git", | ||
11 | + "url": "https://github.com/umijs/umi-blocks/resulterror" | ||
12 | + }, | ||
13 | + "dependencies": { | ||
14 | + "react": "^16.6.3", | ||
15 | + "antd": "^3.10.9", | ||
16 | + "ant-design-pro": "^2.1.1", | ||
17 | + "dva": "^2.4.0" | ||
18 | + }, | ||
19 | + "devDependencies": { | ||
20 | + "umi": "^2.3.0-beta.1", | ||
21 | + "umi-plugin-react": "^1.3.0-beta.1", | ||
22 | + "umi-plugin-block-dev": "^1.0.0" | ||
23 | + }, | ||
24 | + "license": "ISC" | ||
25 | +} |
1 | +module.exports = { | ||
2 | + navTheme: 'dark', // theme for nav menu | ||
3 | + primaryColor: '#1890FF', // primary color of ant design | ||
4 | + layout: 'sidemenu', // nav menu position: sidemenu or topmenu | ||
5 | + contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu | ||
6 | + fixedHeader: false, // sticky header | ||
7 | + autoHideHeader: false, // auto hide header | ||
8 | + fixSiderbar: false, // sticky siderbar | ||
9 | +}; |
ant-design-pro/ResultError/src/index.js
0 → 100644
1 | +import React, { Fragment } from 'react'; | ||
2 | +import { formatMessage, FormattedMessage } from 'umi/locale'; | ||
3 | +import { Button, Icon, Card } from 'antd'; | ||
4 | +import Result from 'ant-design-pro/lib/Result'; | ||
5 | +import PageHeaderWrapper from '@/components/PageHeaderWrapper'; | ||
6 | + | ||
7 | +const extra = ( | ||
8 | + <Fragment> | ||
9 | + <div | ||
10 | + style={{ | ||
11 | + fontSize: 16, | ||
12 | + color: 'rgba(0, 0, 0, 0.85)', | ||
13 | + fontWeight: '500', | ||
14 | + marginBottom: 16, | ||
15 | + }} | ||
16 | + > | ||
17 | + <FormattedMessage | ||
18 | + id="app.result.error.hint-title" | ||
19 | + defaultMessage="The content you submitted has the following error:" | ||
20 | + /> | ||
21 | + </div> | ||
22 | + <div style={{ marginBottom: 16 }}> | ||
23 | + <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" /> | ||
24 | + <FormattedMessage | ||
25 | + id="app.result.error.hint-text1" | ||
26 | + defaultMessage="Your account has been frozen" | ||
27 | + /> | ||
28 | + <a style={{ marginLeft: 16 }}> | ||
29 | + <FormattedMessage id="app.result.error.hint-btn1" defaultMessage="Thaw immediately" /> | ||
30 | + <Icon type="right" /> | ||
31 | + </a> | ||
32 | + </div> | ||
33 | + <div> | ||
34 | + <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" /> | ||
35 | + <FormattedMessage | ||
36 | + id="app.result.error.hint-text2" | ||
37 | + defaultMessage="Your account is not yet eligible to apply" | ||
38 | + /> | ||
39 | + <a style={{ marginLeft: 16 }}> | ||
40 | + <FormattedMessage id="app.result.error.hint-btn2" defaultMessage="Upgrade immediately" /> | ||
41 | + <Icon type="right" /> | ||
42 | + </a> | ||
43 | + </div> | ||
44 | + </Fragment> | ||
45 | +); | ||
46 | + | ||
47 | +const actions = ( | ||
48 | + <Button type="primary"> | ||
49 | + <FormattedMessage id="app.result.error.btn-text" defaultMessage="Return to modify" /> | ||
50 | + </Button> | ||
51 | +); | ||
52 | + | ||
53 | +export default () => ( | ||
54 | + <PageHeaderWrapper> | ||
55 | + <Card bordered={false}> | ||
56 | + <Result | ||
57 | + type="error" | ||
58 | + title={formatMessage({ id: 'app.result.error.title' })} | ||
59 | + description={formatMessage({ id: 'app.result.error.description' })} | ||
60 | + extra={extra} | ||
61 | + actions={actions} | ||
62 | + style={{ marginTop: 48, marginBottom: 16 }} | ||
63 | + /> | ||
64 | + </Card> | ||
65 | + </PageHeaderWrapper> | ||
66 | +); |
1 | +export default { | ||
2 | + 'app.result.error.title': 'Submission Failed', | ||
3 | + 'app.result.error.description': | ||
4 | + 'Please check and modify the following information before resubmitting.', | ||
5 | + 'app.result.error.hint-title': 'The content you submitted has the following error:', | ||
6 | + 'app.result.error.hint-text1': 'Your account has been frozen', | ||
7 | + 'app.result.error.hint-btn1': 'Thaw immediately', | ||
8 | + 'app.result.error.hint-text2': 'Your account is not yet eligible to apply', | ||
9 | + 'app.result.error.hint-btn2': 'Upgrade immediately', | ||
10 | + 'app.result.error.btn-text': 'Return to modify', | ||
11 | + 'app.result.success.title': 'Submission Success', | ||
12 | + 'app.result.success.description': | ||
13 | + 'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.', | ||
14 | + 'app.result.success.operate-title': 'Project Name', | ||
15 | + 'app.result.success.operate-id': 'Project ID:', | ||
16 | + 'app.result.success.principal': 'Principal:', | ||
17 | + 'app.result.success.operate-time': 'Effective time:', | ||
18 | + 'app.result.success.step1-title': 'Create project', | ||
19 | + 'app.result.success.step1-operator': 'Qu Lili', | ||
20 | + 'app.result.success.step2-title': 'Departmental preliminary review', | ||
21 | + 'app.result.success.step2-operator': 'Zhou Maomao', | ||
22 | + 'app.result.success.step2-extra': 'Urge', | ||
23 | + 'app.result.success.step3-title': 'Financial review', | ||
24 | + 'app.result.success.step4-title': 'Finish', | ||
25 | + 'app.result.success.btn-return': 'Back to list', | ||
26 | + 'app.result.success.btn-project': 'View project', | ||
27 | + 'app.result.success.btn-print': 'Print', | ||
28 | +}; |
1 | +export default { | ||
2 | + 'app.result.error.title': '提交失败', | ||
3 | + 'app.result.error.description': '请核对并修改以下信息后,再重新提交。', | ||
4 | + 'app.result.error.hint-title': '您提交的内容有如下错误:', | ||
5 | + 'app.result.error.hint-text1': '您的账户已被冻结', | ||
6 | + 'app.result.error.hint-btn1': '立即解冻', | ||
7 | + 'app.result.error.hint-text2': '您的账户还不具备申请资格', | ||
8 | + 'app.result.error.hint-btn2': '立即升级', | ||
9 | + 'app.result.error.btn-text': '返回修改', | ||
10 | + 'app.result.success.title': '提交成功', | ||
11 | + 'app.result.success.description': | ||
12 | + '提交结果页用于反馈一系列操作任务的处理结果, 如果仅是简单操作,使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明,如果有类似展示 “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。', | ||
13 | + 'app.result.success.operate-title': '项目名称', | ||
14 | + 'app.result.success.operate-id': '项目 ID:', | ||
15 | + 'app.result.success.principal': '负责人:', | ||
16 | + 'app.result.success.operate-time': '生效时间:', | ||
17 | + 'app.result.success.step1-title': '创建项目', | ||
18 | + 'app.result.success.step1-operator': '曲丽丽', | ||
19 | + 'app.result.success.step2-title': '部门初审', | ||
20 | + 'app.result.success.step2-operator': '周毛毛', | ||
21 | + 'app.result.success.step2-extra': '催一下', | ||
22 | + 'app.result.success.step3-title': '财务复核', | ||
23 | + 'app.result.success.step4-title': '完成', | ||
24 | + 'app.result.success.btn-return': '返回列表', | ||
25 | + 'app.result.success.btn-project': '查看项目', | ||
26 | + 'app.result.success.btn-print': '打印', | ||
27 | +}; |
1 | +export default { | ||
2 | + 'app.result.error.title': '提交失敗', | ||
3 | + 'app.result.error.description': '請核對並修改以下信息後,再重新提交。', | ||
4 | + 'app.result.error.hint-title': '您提交的內容有如下錯誤:', | ||
5 | + 'app.result.error.hint-text1': '您的賬戶已被凍結', | ||
6 | + 'app.result.error.hint-btn1': '立即解凍', | ||
7 | + 'app.result.error.hint-text2': '您的賬戶還不具備申請資格', | ||
8 | + 'app.result.error.hint-btn2': '立即升級', | ||
9 | + 'app.result.error.btn-text': '返回修改', | ||
10 | + 'app.result.success.title': '提交成功', | ||
11 | + 'app.result.success.description': | ||
12 | + '提交結果頁用於反饋壹系列操作任務的處理結果, 如果僅是簡單操作,使用 Message 全局提示反饋即可。 本文字區域可以展示簡單的補充說明,如果有類似展示 “單據”的需求,下面這個灰色區域可以呈現比較復雜的內容。', | ||
13 | + 'app.result.success.operate-title': '項目名稱', | ||
14 | + 'app.result.success.operate-id': '項目 ID:', | ||
15 | + 'app.result.success.principal': '負責人:', | ||
16 | + 'app.result.success.operate-time': '生效時間:', | ||
17 | + 'app.result.success.step1-title': '創建項目', | ||
18 | + 'app.result.success.step1-operator': '曲麗麗', | ||
19 | + 'app.result.success.step2-title': '部門初審', | ||
20 | + 'app.result.success.step2-operator': '周毛毛', | ||
21 | + 'app.result.success.step2-extra': '催壹下', | ||
22 | + 'app.result.success.step3-title': '財務復核', | ||
23 | + 'app.result.success.step4-title': '完成', | ||
24 | + 'app.result.success.btn-return': '返回列表', | ||
25 | + 'app.result.success.btn-project': '查看項目', | ||
26 | + 'app.result.success.btn-print': '打印', | ||
27 | +}; |
1 | +import { message } from 'antd'; | ||
2 | +import defaultSettings from '../defaultSettings'; | ||
3 | + | ||
4 | +let lessNodesAppended; | ||
5 | +const updateTheme = primaryColor => { | ||
6 | + // Don't compile less in production! | ||
7 | + if (APP_TYPE !== 'site') { | ||
8 | + return; | ||
9 | + } | ||
10 | + // Determine if the component is remounted | ||
11 | + if (!primaryColor) { | ||
12 | + return; | ||
13 | + } | ||
14 | + const hideMessage = message.loading('正在编译主题!', 0); | ||
15 | + function buildIt() { | ||
16 | + if (!window.less) { | ||
17 | + return; | ||
18 | + } | ||
19 | + setTimeout(() => { | ||
20 | + window.less | ||
21 | + .modifyVars({ | ||
22 | + '@primary-color': primaryColor, | ||
23 | + }) | ||
24 | + .then(() => { | ||
25 | + hideMessage(); | ||
26 | + }) | ||
27 | + .catch(() => { | ||
28 | + message.error('Failed to update theme'); | ||
29 | + hideMessage(); | ||
30 | + }); | ||
31 | + }, 200); | ||
32 | + } | ||
33 | + if (!lessNodesAppended) { | ||
34 | + // insert less.js and color.less | ||
35 | + const lessStyleNode = document.createElement('link'); | ||
36 | + const lessConfigNode = document.createElement('script'); | ||
37 | + const lessScriptNode = document.createElement('script'); | ||
38 | + lessStyleNode.setAttribute('rel', 'stylesheet/less'); | ||
39 | + lessStyleNode.setAttribute('href', '/color.less'); | ||
40 | + lessConfigNode.innerHTML = ` | ||
41 | + window.less = { | ||
42 | + async: true, | ||
43 | + env: 'production', | ||
44 | + javascriptEnabled: true | ||
45 | + }; | ||
46 | + `; | ||
47 | + lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'; | ||
48 | + lessScriptNode.async = true; | ||
49 | + lessScriptNode.onload = () => { | ||
50 | + buildIt(); | ||
51 | + lessScriptNode.onload = null; | ||
52 | + }; | ||
53 | + document.body.appendChild(lessStyleNode); | ||
54 | + document.body.appendChild(lessConfigNode); | ||
55 | + document.body.appendChild(lessScriptNode); | ||
56 | + lessNodesAppended = true; | ||
57 | + } else { | ||
58 | + buildIt(); | ||
59 | + } | ||
60 | +}; | ||
61 | + | ||
62 | +const updateColorWeak = colorWeak => { | ||
63 | + document.body.className = colorWeak ? 'colorWeak' : ''; | ||
64 | +}; | ||
65 | + | ||
66 | +export default { | ||
67 | + namespace: 'setting', | ||
68 | + state: defaultSettings, | ||
69 | + reducers: { | ||
70 | + getSetting(state) { | ||
71 | + const setting = {}; | ||
72 | + const urlParams = new URL(window.location.href); | ||
73 | + Object.keys(state).forEach(key => { | ||
74 | + if (urlParams.searchParams.has(key)) { | ||
75 | + const value = urlParams.searchParams.get(key); | ||
76 | + setting[key] = value === '1' ? true : value; | ||
77 | + } | ||
78 | + }); | ||
79 | + const { primaryColor, colorWeak } = setting; | ||
80 | + if (state.primaryColor !== primaryColor) { | ||
81 | + updateTheme(primaryColor); | ||
82 | + } | ||
83 | + updateColorWeak(colorWeak); | ||
84 | + return { | ||
85 | + ...state, | ||
86 | + ...setting, | ||
87 | + }; | ||
88 | + }, | ||
89 | + changeSetting(state, { payload }) { | ||
90 | + const urlParams = new URL(window.location.href); | ||
91 | + Object.keys(defaultSettings).forEach(key => { | ||
92 | + if (urlParams.searchParams.has(key)) { | ||
93 | + urlParams.searchParams.delete(key); | ||
94 | + } | ||
95 | + }); | ||
96 | + Object.keys(payload).forEach(key => { | ||
97 | + if (key === 'collapse') { | ||
98 | + return; | ||
99 | + } | ||
100 | + let value = payload[key]; | ||
101 | + if (value === true) { | ||
102 | + value = 1; | ||
103 | + } | ||
104 | + if (defaultSettings[key] !== value) { | ||
105 | + urlParams.searchParams.set(key, value); | ||
106 | + } | ||
107 | + }); | ||
108 | + const { primaryColor, colorWeak, contentWidth } = payload; | ||
109 | + if (state.primaryColor !== primaryColor) { | ||
110 | + updateTheme(primaryColor); | ||
111 | + } | ||
112 | + if (state.contentWidth !== contentWidth && window.dispatchEvent) { | ||
113 | + window.dispatchEvent(new Event('resize')); | ||
114 | + } | ||
115 | + updateColorWeak(colorWeak); | ||
116 | + window.history.replaceState(null, 'setting', urlParams.href); | ||
117 | + return { | ||
118 | + ...state, | ||
119 | + ...payload, | ||
120 | + }; | ||
121 | + }, | ||
122 | + }, | ||
123 | +}; |
请
注册
或
登录
后发表评论