提交 d23f2150a197fa985ef86cd203b4da6ce32752fe

作者 愚道
1 个父辈 b02b0f38

refact: ant design pro stepform

1 export default { 1 export default {
2 plugins: [ 2 plugins: [
3 - ['umi-plugin-block-dev', {}], 3 + ['umi-plugin-block-dev', {
  4 + layout: 'ant-design-pro',
  5 + }],
4 ['umi-plugin-react', { 6 ['umi-plugin-react', {
5 dva: true, 7 dva: true,
6 locale: true, 8 locale: true,
@@ -11,11 +11,12 @@ @@ -11,11 +11,12 @@
11 "url": "https://github.com/umijs/umi-blocks/stepform" 11 "url": "https://github.com/umijs/umi-blocks/stepform"
12 }, 12 },
13 "dependencies": { 13 "dependencies": {
14 - "react": "^16.6.3",  
15 - "antd": "^3.10.9",  
16 "ant-design-pro": "^2.1.1", 14 "ant-design-pro": "^2.1.1",
  15 + "antd": "^3.10.9",
17 "dva": "^2.4.0", 16 "dva": "^2.4.0",
18 - "mockjs": "*" 17 + "mockjs": "*",
  18 + "react": "^16.6.3",
  19 + "umi-request": "^1.0.0"
19 }, 20 },
20 "devDependencies": { 21 "devDependencies": {
21 "umi": "^2.3.0-beta.1", 22 "umi": "^2.3.0-beta.1",
1 -import mockjs from 'mockjs';  
2 -  
3 -const titles = [  
4 - 'Alipay',  
5 - 'Angular',  
6 - 'Ant Design',  
7 - 'Ant Design Pro',  
8 - 'Bootstrap',  
9 - 'React',  
10 - 'Vue',  
11 - 'Webpack',  
12 -];  
13 -const avatars = [  
14 - 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay  
15 - 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular  
16 - 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design  
17 - 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro  
18 - 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap  
19 - 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React  
20 - 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue  
21 - 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack  
22 -];  
23 -  
24 -const avatars2 = [  
25 - 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',  
26 - 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',  
27 - 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',  
28 - 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',  
29 - 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',  
30 - 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',  
31 - 'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',  
32 - 'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',  
33 - 'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',  
34 - 'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',  
35 -];  
36 -  
37 -const covers = [  
38 - 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',  
39 - 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',  
40 - 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',  
41 - 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',  
42 -];  
43 -const desc = [  
44 - '那是一种内在的东西, 他们到达不了,也无法触及的',  
45 - '希望是一个好东西,也许是最好的,好东西是不会消亡的',  
46 - '生命就像一盒巧克力,结果往往出人意料',  
47 - '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',  
48 - '那时候我只会想自己想要什么,从不想自己拥有什么',  
49 -];  
50 -  
51 -const user = [  
52 - '付小小',  
53 - '曲丽丽',  
54 - '林东东',  
55 - '周星星',  
56 - '吴加好',  
57 - '朱偏右',  
58 - '鱼酱',  
59 - '乐哥',  
60 - '谭小仪',  
61 - '仲尼',  
62 -];  
63 -  
64 -function fakeList(count) {  
65 - const list = [];  
66 - for (let i = 0; i < count; i += 1) {  
67 - list.push({  
68 - id: `fake-list-${i}`,  
69 - owner: user[i % 10],  
70 - title: titles[i % 8],  
71 - avatar: avatars[i % 8],  
72 - cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],  
73 - status: ['active', 'exception', 'normal'][i % 3],  
74 - percent: Math.ceil(Math.random() * 50) + 50,  
75 - logo: avatars[i % 8],  
76 - href: 'https://ant.design',  
77 - updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),  
78 - createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),  
79 - subDescription: desc[i % 5],  
80 - description:  
81 - '在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。',  
82 - activeUser: Math.ceil(Math.random() * 100000) + 100000,  
83 - newUser: Math.ceil(Math.random() * 1000) + 1000,  
84 - star: Math.ceil(Math.random() * 100) + 100,  
85 - like: Math.ceil(Math.random() * 100) + 100,  
86 - message: Math.ceil(Math.random() * 10) + 10,  
87 - content:  
88 - '段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',  
89 - members: [  
90 - {  
91 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',  
92 - name: '曲丽丽',  
93 - id: 'member1',  
94 - },  
95 - {  
96 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',  
97 - name: '王昭君',  
98 - id: 'member2',  
99 - },  
100 - {  
101 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',  
102 - name: '董娜娜',  
103 - id: 'member3',  
104 - },  
105 - ],  
106 - });  
107 - }  
108 -  
109 - return list;  
110 -}  
111 -  
112 -let sourceData;  
113 -  
114 -function getFakeList(req, res) {  
115 - const params = req.query;  
116 -  
117 - const count = params.count * 1 || 20;  
118 -  
119 - const result = fakeList(count);  
120 - sourceData = result;  
121 - return res.json(result);  
122 -}  
123 -  
124 -function postFakeList(req, res) {  
125 - const { /* url = '', */ body } = req;  
126 - // const params = getUrlParams(url);  
127 - const { method, id } = body;  
128 - // const count = (params.count * 1) || 20;  
129 - let result = sourceData;  
130 -  
131 - switch (method) {  
132 - case 'delete':  
133 - result = result.filter(item => item.id !== id);  
134 - break;  
135 - case 'update':  
136 - result.forEach((item, i) => {  
137 - if (item.id === id) {  
138 - result[i] = Object.assign(item, body);  
139 - }  
140 - });  
141 - break;  
142 - case 'post':  
143 - result.unshift({  
144 - body,  
145 - id: `fake-list-${result.length}`,  
146 - createdAt: new Date().getTime(),  
147 - });  
148 - break;  
149 - default:  
150 - break;  
151 - }  
152 -  
153 - return res.json(result);  
154 -}  
155 -  
156 -const getNotice = [  
157 - {  
158 - id: 'xxx1',  
159 - title: titles[0],  
160 - logo: avatars[0],  
161 - description: '那是一种内在的东西,他们到达不了,也无法触及的',  
162 - updatedAt: new Date(),  
163 - member: '科学搬砖组',  
164 - href: '',  
165 - memberLink: '',  
166 - },  
167 - {  
168 - id: 'xxx2',  
169 - title: titles[1],  
170 - logo: avatars[1],  
171 - description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',  
172 - updatedAt: new Date('2017-07-24'),  
173 - member: '全组都是吴彦祖',  
174 - href: '',  
175 - memberLink: '',  
176 - },  
177 - {  
178 - id: 'xxx3',  
179 - title: titles[2],  
180 - logo: avatars[2],  
181 - description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',  
182 - updatedAt: new Date(),  
183 - member: '中二少女团',  
184 - href: '',  
185 - memberLink: '',  
186 - },  
187 - {  
188 - id: 'xxx4',  
189 - title: titles[3],  
190 - logo: avatars[3],  
191 - description: '那时候我只会想自己想要什么,从不想自己拥有什么',  
192 - updatedAt: new Date('2017-07-23'),  
193 - member: '程序员日常',  
194 - href: '',  
195 - memberLink: '',  
196 - },  
197 - {  
198 - id: 'xxx5',  
199 - title: titles[4],  
200 - logo: avatars[4],  
201 - description: '凛冬将至',  
202 - updatedAt: new Date('2017-07-23'),  
203 - member: '高逼格设计天团',  
204 - href: '',  
205 - memberLink: '',  
206 - },  
207 - {  
208 - id: 'xxx6',  
209 - title: titles[5],  
210 - logo: avatars[5],  
211 - description: '生命就像一盒巧克力,结果往往出人意料',  
212 - updatedAt: new Date('2017-07-23'),  
213 - member: '骗你来学计算机',  
214 - href: '',  
215 - memberLink: '',  
216 - },  
217 -];  
218 -  
219 -const getActivities = [  
220 - {  
221 - id: 'trend-1',  
222 - updatedAt: new Date(),  
223 - user: {  
224 - name: '曲丽丽',  
225 - avatar: avatars2[0],  
226 - },  
227 - group: {  
228 - name: '高逼格设计天团',  
229 - link: 'http://github.com/',  
230 - },  
231 - project: {  
232 - name: '六月迭代',  
233 - link: 'http://github.com/',  
234 - },  
235 - template: '在 @{group} 新建项目 @{project}',  
236 - },  
237 - {  
238 - id: 'trend-2',  
239 - updatedAt: new Date(),  
240 - user: {  
241 - name: '付小小',  
242 - avatar: avatars2[1],  
243 - },  
244 - group: {  
245 - name: '高逼格设计天团',  
246 - link: 'http://github.com/',  
247 - },  
248 - project: {  
249 - name: '六月迭代',  
250 - link: 'http://github.com/',  
251 - },  
252 - template: '在 @{group} 新建项目 @{project}',  
253 - },  
254 - {  
255 - id: 'trend-3',  
256 - updatedAt: new Date(),  
257 - user: {  
258 - name: '林东东',  
259 - avatar: avatars2[2],  
260 - },  
261 - group: {  
262 - name: '中二少女团',  
263 - link: 'http://github.com/',  
264 - },  
265 - project: {  
266 - name: '六月迭代',  
267 - link: 'http://github.com/',  
268 - },  
269 - template: '在 @{group} 新建项目 @{project}',  
270 - },  
271 - {  
272 - id: 'trend-4',  
273 - updatedAt: new Date(),  
274 - user: {  
275 - name: '周星星',  
276 - avatar: avatars2[4],  
277 - },  
278 - project: {  
279 - name: '5 月日常迭代',  
280 - link: 'http://github.com/',  
281 - },  
282 - template: '将 @{project} 更新至已发布状态',  
283 - },  
284 - {  
285 - id: 'trend-5',  
286 - updatedAt: new Date(),  
287 - user: {  
288 - name: '朱偏右',  
289 - avatar: avatars2[3],  
290 - },  
291 - project: {  
292 - name: '工程效能',  
293 - link: 'http://github.com/',  
294 - },  
295 - comment: {  
296 - name: '留言',  
297 - link: 'http://github.com/',  
298 - },  
299 - template: '在 @{project} 发布了 @{comment}',  
300 - },  
301 - {  
302 - id: 'trend-6',  
303 - updatedAt: new Date(),  
304 - user: {  
305 - name: '乐哥',  
306 - avatar: avatars2[5],  
307 - },  
308 - group: {  
309 - name: '程序员日常',  
310 - link: 'http://github.com/',  
311 - },  
312 - project: {  
313 - name: '品牌迭代',  
314 - link: 'http://github.com/',  
315 - },  
316 - template: '在 @{group} 新建项目 @{project}',  
317 - },  
318 -];  
319 -  
320 -function getFakeCaptcha(req, res) {  
321 - return res.json('captcha-xxx');  
322 -}  
323 -  
324 export default { 1 export default {
325 - 'GET /api/project/notice': getNotice,  
326 - 'GET /api/activities': getActivities,  
327 'POST /api/forms': (req, res) => { 2 'POST /api/forms': (req, res) => {
328 res.send({ message: 'Ok' }); 3 res.send({ message: 'Ok' });
329 }, 4 },
330 - 'GET /api/tags': mockjs.mock({  
331 - 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],  
332 - }),  
333 - 'GET /api/fake_list': getFakeList,  
334 - 'POST /api/fake_list': postFakeList,  
335 - 'GET /api/captcha': getFakeCaptcha,  
336 }; 5 };
  1 +import React from 'react';
  2 +import { FormattedMessage } from 'umi/locale';
  3 +import Link from 'umi/link';
  4 +import { PageHeader } from 'ant-design-pro';
  5 +import styles from './index.less';
  6 +
  7 +const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
  8 + <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
  9 + <PageHeader
  10 + home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
  11 + key="pageheader"
  12 + {...restProps}
  13 + linkElement={Link}
  14 + itemRender={item => {
  15 + if (item.locale) {
  16 + return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
  17 + }
  18 + return item.title;
  19 + }}
  20 + />
  21 + {children ? (
  22 + <div className={styles.content}>
  23 + {children}
  24 + </div>
  25 + ) : null}
  26 + </div>
  27 +);
  28 +
  29 +export default PageHeaderWrapper;
  1 +@import '~antd/lib/style/themes/default.less';
  2 +
  3 +.content {
  4 + margin: 24px 24px 0;
  5 +}
  6 +
  7 +@media screen and (max-width: @screen-sm) {
  8 + .content {
  9 + margin: 24px 0 0;
  10 + }
  11 +}
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 -};  
1 import React, { PureComponent, Fragment } from 'react'; 1 import React, { PureComponent, Fragment } from 'react';
2 import { Card, Steps } from 'antd'; 2 import { Card, Steps } from 'antd';
3 -import PageHeaderWrapper from '@/components/PageHeaderWrapper'; 3 +import PageHeaderWrapper from './components/PageHeaderWrapper';
4 import styles from '../style.less'; 4 import styles from '../style.less';
5 5
6 const { Step } = Steps; 6 const { Step } = Steps;
1 export default { 1 export default {
  2 + 'app.forms.basic.title': 'Basic form',
  3 + 'app.forms.basic.description':
  4 + 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
  5 +
  6 + 'validation.email.required': 'Please enter your email!',
  7 + 'validation.email.wrong-format': 'The email address is in the wrong format!',
  8 + 'validation.userName.required': 'Please enter your userName!',
  9 + 'validation.password.required': 'Please enter your password!',
  10 + 'validation.password.twice': 'The passwords entered twice do not match!',
  11 + 'validation.password.strength.msg':
  12 + "Please enter at least 6 characters and don't use passwords that are easy to guess.",
  13 + 'validation.password.strength.strong': 'Strength: strong',
  14 + 'validation.password.strength.medium': 'Strength: medium',
  15 + 'validation.password.strength.short': 'Strength: too short',
  16 + 'validation.confirm-password.required': 'Please confirm your password!',
  17 + 'validation.phone-number.required': 'Please enter your phone number!',
  18 + 'validation.phone-number.wrong-format': 'Malformed phone number!',
  19 + 'validation.verification-code.required': 'Please enter the verification code!',
  20 + 'validation.title.required': 'Please enter a title',
  21 + 'validation.date.required': 'Please select the start and end date',
  22 + 'validation.goal.required': 'Please enter a description of the goal',
  23 + 'validation.standard.required': 'Please enter a metric',
  24 +
2 'form.get-captcha': 'Get Captcha', 25 'form.get-captcha': 'Get Captcha',
3 'form.captcha.second': 'sec', 26 'form.captcha.second': 'sec',
4 'form.optional': ' (optional) ', 27 'form.optional': ' (optional) ',
  1 +export default {
  2 + 'app.forms.basic.title': 'Basic form',
  3 + 'app.forms.basic.description':
  4 + 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
  5 +
  6 + 'validation.email.required': 'Por favor insira seu email!',
  7 + 'validation.email.wrong-format': 'O email está errado!',
  8 + 'validation.userName.required': 'Por favor insira nome de usuário!',
  9 + 'validation.password.required': 'Por favor insira sua senha!',
  10 + 'validation.password.twice': 'As senhas não estão iguais!',
  11 + 'validation.password.strength.msg':
  12 + 'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
  13 + 'validation.password.strength.strong': 'Força: forte',
  14 + 'validation.password.strength.medium': 'Força: média',
  15 + 'validation.password.strength.short': 'Força: curta',
  16 + 'validation.confirm-password.required': 'Por favor confirme sua senha!',
  17 + 'validation.phone-number.required': 'Por favor insira seu telefone!',
  18 + 'validation.phone-number.wrong-format': 'Formato de telefone errado!',
  19 + 'validation.verification-code.required': 'Por favor insira seu código de verificação!',
  20 +
  21 + 'form.get-captcha': 'Get Captcha',
  22 + 'form.captcha.second': 'sec',
  23 + 'form.email.placeholder': 'Email',
  24 + 'form.password.placeholder': 'Senha',
  25 + 'form.confirm-password.placeholder': 'Confirme a senha',
  26 + 'form.phone-number.placeholder': 'Telefone',
  27 + 'form.verification-code.placeholder': 'Código de verificação',
  28 + 'form.optional': ' (optional) ',
  29 + 'form.submit': 'Submit',
  30 + 'form.save': 'Save',
  31 + 'form.title.label': 'Title',
  32 + 'form.title.placeholder': 'Give the target a name',
  33 + 'form.date.label': 'Start and end date',
  34 + 'form.date.placeholder.start': 'Start date',
  35 + 'form.date.placeholder.end': 'End date',
  36 + 'form.goal.label': 'Goal description',
  37 + 'form.goal.placeholder': 'Please enter your work goals',
  38 + 'form.standard.label': 'Metrics',
  39 + 'form.standard.placeholder': 'Please enter a metric',
  40 + 'form.client.label': 'Client',
  41 + 'form.client.label.tooltip': 'Target service object',
  42 + 'form.client.placeholder':
  43 + 'Please describe your customer service, internal customers directly @ Name / job number',
  44 + 'form.invites.label': 'Inviting critics',
  45 + 'form.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
  46 + 'form.weight.label': 'Weight',
  47 + 'form.weight.placeholder': 'Please enter weight',
  48 + 'form.public.label': 'Target disclosure',
  49 + 'form.public.label.help': 'Customers and invitees are shared by default',
  50 + 'form.public.radio.public': 'Public',
  51 + 'form.public.radio.partially-public': 'Partially public',
  52 + 'form.public.radio.private': 'Private',
  53 + 'form.publicUsers.placeholder': 'Open to',
  54 + 'form.publicUsers.option.A': 'Colleague A',
  55 + 'form.publicUsers.option.B': 'Colleague B',
  56 + 'form.publicUsers.option.C': 'Colleague C',
  57 +};
1 export default { 1 export default {
  2 + 'app.forms.basic.title': '基础表单',
  3 + 'app.forms.basic.description':
  4 + '表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。',
  5 +
  6 + 'validation.email.required': '请输入邮箱地址!',
  7 + 'validation.email.wrong-format': '邮箱地址格式错误!',
  8 + 'validation.userName.required': '请输入用户名!',
  9 + 'validation.password.required': '请输入密码!',
  10 + 'validation.password.twice': '两次输入的密码不匹配!',
  11 + 'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
  12 + 'validation.password.strength.strong': '强度:强',
  13 + 'validation.password.strength.medium': '强度:中',
  14 + 'validation.password.strength.short': '强度:太短',
  15 + 'validation.confirm-password.required': '请确认密码!',
  16 + 'validation.phone-number.required': '请输入手机号!',
  17 + 'validation.phone-number.wrong-format': '手机号格式错误!',
  18 + 'validation.verification-code.required': '请输入验证码!',
  19 + 'validation.title.required': '请输入标题',
  20 + 'validation.date.required': '请选择起止日期',
  21 + 'validation.goal.required': '请输入目标描述',
  22 + 'validation.standard.required': '请输入衡量标准',
  23 +
2 'form.get-captcha': '获取验证码', 24 'form.get-captcha': '获取验证码',
3 'form.captcha.second': '秒', 25 'form.captcha.second': '秒',
4 'form.optional': '(选填)', 26 'form.optional': '(选填)',
1 export default { 1 export default {
  2 + 'app.forms.basic.title': '基礎表單',
  3 + 'app.forms.basic.description':
  4 + '表單頁用於向用戶收集或驗證信息,基礎表單常見於數據項較少的表單場景。',
  5 +
  6 + 'validation.email.required': '請輸入郵箱地址!',
  7 + 'validation.email.wrong-format': '郵箱地址格式錯誤!',
  8 + 'validation.userName.required': '請輸入賬戶!',
  9 + 'validation.password.required': '請輸入密碼!',
  10 + 'validation.password.twice': '兩次輸入的密碼不匹配!',
  11 + 'validation.password.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
  12 + 'validation.password.strength.strong': '強度:強',
  13 + 'validation.password.strength.medium': '強度:中',
  14 + 'validation.password.strength.short': '強度:太短',
  15 + 'validation.confirm-password.required': '請確認密碼!',
  16 + 'validation.phone-number.required': '請輸入手機號!',
  17 + 'validation.phone-number.wrong-format': '手機號格式錯誤!',
  18 + 'validation.verification-code.required': '請輸入驗證碼!',
  19 + 'validation.title.required': '請輸入標題',
  20 + 'validation.date.required': '請選擇起止日期',
  21 + 'validation.goal.required': '請輸入目標描述',
  22 + 'validation.standard.required': '請輸入衡量標淮',
  23 +
2 'form.get-captcha': '獲取驗證碼', 24 'form.get-captcha': '獲取驗證碼',
3 'form.captcha.second': '秒', 25 'form.captcha.second': '秒',
4 'form.optional': '(選填)', 26 'form.optional': '(選填)',
  1 +import { routerRedux } from 'dva/router';
  2 +import { message } from 'antd';
  3 +import { fakeSubmitForm } from './service';
  4 +
  5 +export default {
  6 + namespace: 'form',
  7 +
  8 + state: {
  9 + step: {
  10 + payAccount: 'ant-design@alipay.com',
  11 + receiverAccount: 'test@example.com',
  12 + receiverName: 'Alex',
  13 + amount: '500',
  14 + },
  15 + },
  16 +
  17 + effects: {
  18 + *submitRegularForm({ payload }, { call }) {
  19 + yield call(fakeSubmitForm, payload);
  20 + message.success('提交成功');
  21 + },
  22 + *submitStepForm({ payload }, { call, put }) {
  23 + yield call(fakeSubmitForm, payload);
  24 + yield put({
  25 + type: 'saveStepFormData',
  26 + payload,
  27 + });
  28 + yield put(routerRedux.push('/form/step-form/result'));
  29 + },
  30 + *submitAdvancedForm({ payload }, { call }) {
  31 + yield call(fakeSubmitForm, payload);
  32 + message.success('提交成功');
  33 + },
  34 + },
  35 +
  36 + reducers: {
  37 + saveStepFormData(state, { payload }) {
  38 + return {
  39 + ...state,
  40 + step: {
  41 + ...state.step,
  42 + ...payload,
  43 + },
  44 + };
  45 + },
  46 + },
  47 +};
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 -};  
  1 +import request from 'umi-request';
  2 +
  3 +export async function fakeSubmitForm(params) {
  4 + return request('/api/forms', {
  5 + method: 'POST',
  6 + body: params,
  7 + });
  8 +}
注册登录 后发表评论