15 | 
22 |
184 | {this.state.data.map((item, index) => {
185 | return (
186 |
230 | );
231 | }
232 | }
233 |
234 | export default Page_0;
235 |
--------------------------------------------------------------------------------
/test/react.test.js:
--------------------------------------------------------------------------------
1 | const { expect, assert } = require('chai');
2 | const { runCode } = require('./index');
3 | const data = require('./data');
4 | const _ = require('lodash');
5 |
6 |
7 |
8 | describe('componentStyle 组件格式', () => {
9 |
10 |
11 | it('componentStyle = hooks 时，使用hooks出码方式', async () => {
12 | const result = runCode(data, { globalCss: true, componentStyle: 'hooks'});
13 | const jsFile = _.find(result, { panelName:'index.jsx'});
14 | expect(jsFile).to.not.be.equal(undefined);
15 | expect(jsFile.panelValue.includes('useState')).to.be.equal(true);
16 | expect(jsFile.panelValue.includes('memo')).to.be.equal(true);
17 | expect(jsFile.panelValue.includes('Component')).to.be.equal(false);
18 | });
19 |
20 | it('componentStyle = component 时，使用 component 出码方式', async () => {
21 | const result = runCode(data, { globalCss: true, componentStyle: 'component'});
22 | const jsFile = _.find(result, { panelName:'index.jsx'});
23 | expect(jsFile).to.not.be.equal(undefined);
24 | expect(jsFile.panelValue.includes('useState')).to.be.equal(false);
25 | expect(jsFile.panelValue.includes('memo')).to.be.equal(false);
26 | expect(jsFile.panelValue.includes('Component')).to.be.equal(true);
27 | });
28 |
29 | });
30 |
31 | describe('globalCss 全局样式', () => {
32 | it('globalCss = true 时，有 global.css 文件', async () => {
33 | const result = runCode(data, { globalCss: true, outputStyle: 'project'});
34 | expect(_.find(result, { panelName:'global.css'})).to.not.be.equal(undefined);
35 | });
36 |
37 | it('globalCss = false 时，无 global.css 文件', async () => {
38 | const result = runCode(data, { globalCss: false, outputStyle: 'project'});
39 | expect(_.find(result, { panelName:'global.css'})).to.be.equal(undefined);
40 | });
41 | });
42 |
43 |
44 | describe('outputStyle 风格参数', () => {
45 | it('outputStyle = project 时， 有 package.json文件', async () => {
46 | const result = runCode(data, { globalCss: true, jsx: 'javascript', outputStyle: 'project'});
47 | expect(_.find(result, { panelName:'package.json'})).to.not.be.equal(undefined);
48 | expect(_.find(result, { panelName:'index.html'})).to.not.be.equal(undefined);
49 | expect(_.find(result, { panelName:'index.jsx'})).to.not.be.equal(undefined);
50 | expect(_.find(result, { panelName:'index.css'})).to.not.be.equal(undefined);
51 | });
52 |
53 | it('outputStyle = component 时， 无 package.json文件', async () => {
54 | const result = runCode(data, { globalCss: true, outputStyle: 'component'});
55 | expect(_.find(result, { panelName:'package.json'})).to.be.equal(undefined);
56 | });
57 | });
58 |
59 | describe('jsx 支持TS', () => {
60 | it(`jsx = javascript 时`, async () => {
61 | const schema = _.cloneDeep(data);
62 | const result = runCode(schema, { inlineStyle: 'import', jsx: 'javascript'});
63 | const file = _.find(result, { panelType:'tsx'});
64 | expect(file).to.be.equal(undefined);
65 | });
66 |
67 | it(`jsx = typescript 时`, async () => {
68 | const schema = _.cloneDeep(data);
69 | const result = runCode(schema, { inlineStyle: 'import', jsx: 'typescript'});
70 | const file = _.find(result, { panelType:'jsx'});
71 | expect(file).to.be.equal(undefined);
72 | });
73 | });
74 | describe('cssStyle 样式名风格', () => {
75 | it(`cssStyle = kebabCase 时，中划线命名`, async () => {
76 | const schema = _.cloneDeep(data);
77 | schema.componentName = 'Block';
78 | schema.fileName = 'BlockDemo';
79 | schema.props.className = "class-name-01"
80 | const result = runCode(schema, { inlineStyle: 'import', cssStyle: 'kebabCase'});
81 | const file = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
82 | expect(file.panelValue.includes(`.class-name-01`)).to.be.equal(true);
83 | });
84 |
85 | it(`cssStyle = snakeCase 时，下划线命名`, async () => {
86 | const schema = _.cloneDeep(data);
87 | schema.componentName = 'Block';
88 | schema.fileName = 'BlockDemo';
89 | schema.props.className = "class-name-01"
90 | const result = runCode(schema, { inlineStyle: 'import', cssStyle: 'snakeCase'});
91 | const file = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
92 |
93 | expect(file.panelValue.includes(`.class_name_01`)).to.be.equal(true);
94 | });
95 |
96 | it(`cssStyle = camelCase 时，驼峰式命名`, async () => {
97 | const schema = _.cloneDeep(data);
98 | schema.componentName = 'Block';
99 | schema.fileName = 'BlockDemo';
100 | schema.props.className = "class-name-01"
101 | const result = runCode(schema, { inlineStyle: 'import', cssStyle: 'camelCase'});
102 | const file = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
103 | expect(file.panelValue.includes(`.className01`)).to.be.equal(true);
104 | });
105 |
106 |
107 | })
108 |
109 | describe('inlineStyle 样式引入方式', () => {
110 | it(`inlineStyle = import 时，包含 import './index.css';`, async () => {
111 | const schema = _.cloneDeep(data);
112 | schema.componentName = 'Block';
113 | schema.fileName = 'BlockDemo';
114 | const result = runCode(schema, { inlineStyle: 'import',});
115 | const file = _.find(result, { panelName:'index.jsx', folder: 'components/BlockDemo'});
116 | expect(file.panelValue.includes(`import './index.css';`)).to.be.equal(true);
117 | });
118 |
119 | it(`inlineStyle = module 时，包含 import styles from './index.module.css'`, async () => {
120 | const schema = _.cloneDeep(data);
121 | schema.componentName = 'Block';
122 | schema.fileName = 'BlockDemo';
123 | const result = runCode(schema, { inlineStyle: 'module',});
124 | const file = _.find(result, { panelName:'index.jsx', folder: 'components/BlockDemo'});
125 | expect(file.panelValue.includes(`import styles from './index.module.css';`)).to.be.equal(true);
126 | });
127 |
128 | it(`inlineStyle = inline 时，不引入css文件`, async () => {
129 | const schema = _.cloneDeep(data);
130 | schema.componentName = 'Block';
131 | schema.fileName = 'BlockDemo';
132 | const result = runCode(schema, { inlineStyle: 'inline',});
133 | const file = _.find(result, { panelName:'index.jsx', folder: 'components/BlockDemo'});
134 | expect(file.panelValue.includes(`'./index.css';`)).to.be.equal(false);
135 | });
136 |
137 | });
138 |
139 | describe('cssUnit 单位设置', () => {
140 | it('cssUnit = px', async () => {
141 | const schema = _.cloneDeep(data);
142 | schema.componentName = 'Block';
143 | schema.fileName = 'BlockDemo';
144 | const result = runCode(schema, { inlineStyle: 'import', cssUnit: 'px'});
145 | const cssFile = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
146 | expect(cssFile.panelValue.includes('px')).to.be.equal(true);
147 | expect(cssFile.panelValue.includes('vw')).to.be.equal(false);
148 | expect(cssFile.panelValue.includes('rem')).to.be.equal(false);
149 | });
150 |
151 | it('cssUnit = vw', async () => {
152 | const schema = _.cloneDeep(data);
153 | schema.componentName = 'Block';
154 | schema.fileName = 'BlockDemo';
155 | const result = runCode(schema, { inlineStyle: 'import', cssUnit: 'vw'});
156 | const cssFile = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
157 | expect(cssFile.panelValue.includes('px')).to.be.equal(false);
158 | expect(cssFile.panelValue.includes('vw')).to.be.equal(true);
159 | expect(cssFile.panelValue.includes('rem')).to.be.equal(false);
160 | });
161 |
162 | it('cssUnit = rem', async () => {
163 | const schema = _.cloneDeep(data);
164 | schema.componentName = 'Block';
165 | schema.fileName = 'BlockDemo';
166 | const result = runCode(schema, { inlineStyle: 'import', cssUnit: 'rem'});
167 | const cssFile = _.find(result, { panelName:'index.css', folder: 'components/BlockDemo'});
168 | expect(cssFile.panelValue.includes('px')).to.be.equal(false);
169 | expect(cssFile.panelValue.includes('vw')).to.be.equal(false);
170 | expect(cssFile.panelValue.includes('rem')).to.be.equal(true);
171 | });
172 |
173 |
174 |
175 |
176 | });
177 |
178 |
179 |
--------------------------------------------------------------------------------
/code/style.css:
--------------------------------------------------------------------------------
1 | .mod {
2 | display: flex;
3 | flex-direction: row;
4 | align-items: flex-start;
5 | width: 565px;
6 | height: 623px;
7 | position: relative;
8 | animation-iteration-count: 1;
9 | animation-timing-function: linear;
10 | animation-duration: 1280ms;
11 | animation-name: swing;
12 | }
13 | .primary {
14 | display: flex;
15 | position: relative;
16 | align-items: flex-start;
17 | flex-direction: row;
18 | justify-content: center;
19 | margin-left: 94px;
20 | border-top-left-radius: 18px;
21 | border-top-right-radius: 18px;
22 | background-image: linear-gradient(148deg, #efeded 0%, #b4b4b4 76%);
23 | width: 438px;
24 | height: 461px;
25 | }
26 | .entry-pic {
27 | position: absolute;
28 | bottom: 12px;
29 | left: -14px;
30 | width: 405px;
31 | height: 310px;
32 | }
33 | .action-bg {
34 | position: relative;
35 | margin-top: 13px;
36 | margin-right: 87px;
37 | width: 201px;
38 | height: 76px;
39 | }
40 | .shop-logo {
41 | position: relative;
42 | margin-top: 20px;
43 | width: 106px;
44 | height: 52px;
45 | }
46 | .empty {
47 | position: absolute;
48 | top: 140px;
49 | right: 28px;
50 | width: 437px;
51 | height: 347px;
52 | overflow: hidden;
53 | }
54 | .item-long {
55 | position: absolute;
56 | top: 194px;
57 | left: 113px;
58 | animation-iteration-count: infinite;
59 | animation-timing-function: linear;
60 | animation-duration: 1280ms;
61 | animation-name: swing;
62 | width: 197px;
63 | height: 340px;
64 | }
65 | .product-long {
66 | position: absolute;
67 | top: 157px;
68 | left: 172px;
69 | animation-iteration-count: infinite;
70 | animation-timing-function: ease;
71 | animation-duration: 1280ms;
72 | animation-name: swing;
73 | width: 182px;
74 | height: 354px;
75 | }
76 | .item-long-1 {
77 | position: absolute;
78 | top: 154px;
79 | right: 173px;
80 | animation-iteration-count: infinite;
81 | animation-timing-function: ease;
82 | animation-duration: 1280ms;
83 | animation-name: swing;
84 | width: 179px;
85 | height: 388px;
86 | }
87 | .product-long-1 {
88 | position: absolute;
89 | right: 122px;
90 | bottom: 61px;
91 | animation-iteration-count: infinite;
92 | animation-timing-function: linear;
93 | animation-duration: 1280ms;
94 | animation-name: swing;
95 | width: 230px;
96 | height: 406px;
97 | }
98 | .item-long-2 {
99 | position: absolute;
100 | right: 56px;
101 | bottom: 37px;
102 | animation-iteration-count: infinite;
103 | animation-timing-function: ease;
104 | animation-duration: 1280ms;
105 | animation-name: swing;
106 | width: 302px;
107 | height: 417px;
108 | }
109 | .entry-pic-1 {
110 | position: absolute;
111 | right: 0;
112 | bottom: 20px;
113 | animation-iteration-count: infinite;
114 | animation-timing-function: linear;
115 | animation-duration: 1280ms;
116 | animation-name: swing;
117 | width: 392px;
118 | height: 251px;
119 | }
120 | .layer-wrapper {
121 | display: flex;
122 | position: absolute;
123 | top: 139px;
124 | right: 18px;
125 | align-items: center;
126 | flex-direction: row;
127 | width: 466px;
128 | height: 338px;
129 | }
130 | .layer {
131 | position: absolute;
132 | top: 0;
133 | left: 0;
134 | width: 466px;
135 | height: 338px;
136 | overflow: hidden;
137 | }
138 | .vertical-line {
139 | position: absolute;
140 | top: 1px;
141 | right: -2px;
142 | width: 3px;
143 | height: 309px;
144 | }
145 | .bg {
146 | position: absolute;
147 | top: 138px;
148 | left: 0;
149 | width: 319px;
150 | height: 3px;
151 | }
152 | .product-long-2 {
153 | position: absolute;
154 | top: 139px;
155 | left: 81px;
156 | width: 268px;
157 | height: 378px;
158 | overflow: hidden;
159 | }
160 | .background {
161 | position: absolute;
162 | top: 102px;
163 | right: 18px;
164 | width: 466px;
165 | height: 39px;
166 | }
167 | .wrapper {
168 | display: flex;
169 | position: absolute;
170 | right: 11px;
171 | bottom: 0;
172 | align-items: flex-start;
173 | flex-direction: row;
174 | }
175 | .wrapper-inner {
176 | display: flex;
177 | position: relative;
178 | align-items: center;
179 | flex-direction: row;
180 | margin-top: 17px;
181 | margin-left: 46px;
182 | background-size: contain;
183 | background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01ofNLoD1YmIuIHhBl1_!!6000000003101-2-tps-964-380.png);
184 | height: 190px;
185 | }
186 | .group {
187 | display: flex;
188 | position: relative;
189 | align-items: flex-start;
190 | flex-direction: row;
191 | justify-content: center;
192 | background-color: #141414;
193 | width: 482px;
194 | height: 176px;
195 | overflow: hidden;
196 | }
197 | .entry-pic-2 {
198 | position: absolute;
199 | right: 12px;
200 | bottom: 0;
201 | width: 174px;
202 | height: 119px;
203 | }
204 | .view {
205 | display: flex;
206 | flex-direction: row;
207 | justify-content: center;
208 | align-items: center;
209 | margin-top: 2px;
210 | width: 159px;
211 | height: 40px;
212 | line-height: 26px;
213 | position: absolute;
214 | top: 110px;
215 | left: 29px;
216 | z-index: 10;
217 | background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01A6AUU31FroypE1Fw8_!!6000000000541-2-tps-318-80.png);
218 | background-size: contain;
219 | white-space: nowrap;
220 | }
221 | .title {
222 | margin-top: -2px;
223 | color: #141414;
224 | font-family: PingFang SC;
225 | font-size: 26px;
226 | font-weight: 400;
227 | }
228 | .num {
229 | margin-top: -2px;
230 | color: #141414;
231 | font-family: PingFang SC;
232 | font-size: 26px;
233 | font-weight: 600;
234 | }
235 | .caption {
236 | margin-top: -2px;
237 | color: #141414;
238 | font-family: PingFang SC;
239 | font-size: 26px;
240 | font-weight: 400;
241 | }
242 | .bg-1 {
243 | position: relative;
244 | margin-top: 17px;
245 | width: 367px;
246 | height: 32px;
247 | }
248 | .entry-pic-3 {
249 | position: absolute;
250 | top: 0;
251 | left: 0;
252 | width: 174px;
253 | height: 119px;
254 | }
255 | .wrapper-inner-1 {
256 | display: flex;
257 | position: absolute;
258 | top: 90px;
259 | right: 39px;
260 | align-items: flex-start;
261 | flex-direction: column;
262 | border-width: 2px;
263 | border-style: solid;
264 | border-radius: 47px;
265 | border-color: rgba(0, 0, 0, 0.34);
266 | background-color: rgba(255, 255, 255, 0.1);
267 | width: 405px;
268 | height: 94px;
269 | }
270 | .button-bg-wrapper {
271 | display: flex;
272 | position: absolute;
273 | top: 10px;
274 | align-items: center;
275 | align-self: center;
276 | flex-direction: row;
277 | width: 382px;
278 | height: 74px;
279 | }
280 | .button-bg {
281 | position: absolute;
282 | top: 0;
283 | left: 0;
284 | width: 382px;
285 | height: 74px;
286 | overflow: hidden;
287 | }
288 | .background-1 {
289 | position: absolute;
290 | top: 0;
291 | left: 0;
292 | width: 382px;
293 | height: 49px;
294 | overflow: hidden;
295 | }
296 | .large-icon {
297 | position: absolute;
298 | top: 16px;
299 | right: 150px;
300 | width: 79px;
301 | height: 38px;
302 | }
303 |
304 | @keyframes swing {
305 |
306 | 20% {
307 |
308 | transform: rotate3d(0, 0, 1, 15deg);
309 | }
310 |
311 | 40% {
312 |
313 | transform: rotate3d(0, 0, 1, -10deg);
314 | }
315 |
316 | 60% {
317 |
318 | transform: rotate3d(0, 0, 1, 5deg);
319 | }
320 |
321 | 80% {
322 |
323 | transform: rotate3d(0, 0, 1, -5deg);
324 | }
325 |
326 | 100% {
327 |
328 | transform: rotate3d(0, 0, 1, 0deg);
329 | }
330 |
331 | }
332 |
333 | @keyframes swing {
334 |
335 | 20% {
336 |
337 | transform: rotate3d(0, 0, 1, 15deg);
338 | }
339 |
340 | 40% {
341 |
342 | transform: rotate3d(0, 0, 1, -10deg);
343 | }
344 |
345 | 60% {
346 |
347 | transform: rotate3d(0, 0, 1, 5deg);
348 | }
349 |
350 | 80% {
351 |
352 | transform: rotate3d(0, 0, 1, -5deg);
353 | }
354 |
355 | 100% {
356 |
357 | transform: rotate3d(0, 0, 1, 0deg);
358 | }
359 |
360 | }
361 |
362 | @keyframes swing {
363 |
364 | 20% {
365 |
366 | transform: rotate3d(0, 0, 1, 15deg);
367 | }
368 |
369 | 40% {
370 |
371 | transform: rotate3d(0, 0, 1, -10deg);
372 | }
373 |
374 | 60% {
375 |
376 | transform: rotate3d(0, 0, 1, 5deg);
377 | }
378 |
379 | 80% {
380 |
381 | transform: rotate3d(0, 0, 1, -5deg);
382 | }
383 |
384 | 100% {
385 |
386 | transform: rotate3d(0, 0, 1, 0deg);
387 | }
388 |
389 | }
390 |
391 | @keyframes swing {
392 |
393 | 20% {
394 |
395 | transform: rotate3d(0, 0, 1, 15deg);
396 | }
397 |
398 | 40% {
399 |
400 | transform: rotate3d(0, 0, 1, -10deg);
401 | }
402 |
403 | 60% {
404 |
405 | transform: rotate3d(0, 0, 1, 5deg);
406 | }
407 |
408 | 80% {
409 |
410 | transform: rotate3d(0, 0, 1, -5deg);
411 | }
412 |
413 | 100% {
414 |
415 | transform: rotate3d(0, 0, 1, 0deg);
416 | }
417 |
418 | }
419 |
420 | @keyframes swing {
421 |
422 | 20% {
423 |
424 | transform: rotate3d(0, 0, 1, 15deg);
425 | }
426 |
427 | 40% {
428 |
429 | transform: rotate3d(0, 0, 1, -10deg);
430 | }
431 |
432 | 60% {
433 |
434 | transform: rotate3d(0, 0, 1, 5deg);
435 | }
436 |
437 | 80% {
438 |
439 | transform: rotate3d(0, 0, 1, -5deg);
440 | }
441 |
442 | 100% {
443 |
444 | transform: rotate3d(0, 0, 1, 0deg);
445 | }
446 |
447 | }
448 |
449 | @keyframes swing {
450 |
451 | 20% {
452 |
453 | transform: rotate3d(0, 0, 1, 15deg);
454 | }
455 |
456 | 40% {
457 |
458 | transform: rotate3d(0, 0, 1, -10deg);
459 | }
460 |
461 | 60% {
462 |
463 | transform: rotate3d(0, 0, 1, 5deg);
464 | }
465 |
466 | 80% {
467 |
468 | transform: rotate3d(0, 0, 1, -5deg);
469 | }
470 |
471 | 100% {
472 |
473 | transform: rotate3d(0, 0, 1, 0deg);
474 | }
475 |
476 | }
477 |
478 | @keyframes swing {
479 |
480 | 20% {
481 |
482 | transform: rotate3d(0, 0, 1, 15deg);
483 | }
484 |
485 | 40% {
486 |
487 | transform: rotate3d(0, 0, 1, -10deg);
488 | }
489 |
490 | 60% {
491 |
492 | transform: rotate3d(0, 0, 1, 5deg);
493 | }
494 |
495 | 80% {
496 |
497 | transform: rotate3d(0, 0, 1, -5deg);
498 | }
499 |
500 | 100% {
501 |
502 | transform: rotate3d(0, 0, 1, 0deg);
503 | }
504 |
505 | }
506 |
--------------------------------------------------------------------------------
/code/style.responsive.css:
--------------------------------------------------------------------------------
1 | .mod {
2 | display: flex;
3 | flex-direction: row;
4 | align-items: flex-start;
5 | width: 75.33vw;
6 | height: 83.07vw;
7 | position: relative;
8 | animation-iteration-count: 1;
9 | animation-timing-function: linear;
10 | animation-duration: 1280ms;
11 | animation-name: swing;
12 | }
13 | .primary {
14 | display: flex;
15 | position: relative;
16 | align-items: flex-start;
17 | flex-direction: row;
18 | justify-content: center;
19 | margin-left: 12.53vw;
20 | border-top-left-radius: 2.4vw;
21 | border-top-right-radius: 2.4vw;
22 | background-image: linear-gradient(148deg, #efeded 0%, #b4b4b4 76%);
23 | width: 58.4vw;
24 | height: 61.47vw;
25 | }
26 | .entry-pic {
27 | position: absolute;
28 | bottom: 1.6vw;
29 | left: -1.87vw;
30 | width: 54vw;
31 | height: 41.33vw;
32 | }
33 | .action-bg {
34 | position: relative;
35 | margin-top: 1.73vw;
36 | margin-right: 11.6vw;
37 | width: 26.8vw;
38 | height: 10.13vw;
39 | }
40 | .shop-logo {
41 | position: relative;
42 | margin-top: 2.67vw;
43 | width: 14.13vw;
44 | height: 6.93vw;
45 | }
46 | .empty {
47 | position: absolute;
48 | top: 18.67vw;
49 | right: 3.73vw;
50 | width: 58.27vw;
51 | height: 46.27vw;
52 | overflow: hidden;
53 | }
54 | .item-long {
55 | position: absolute;
56 | top: 25.87vw;
57 | left: 15.07vw;
58 | animation-iteration-count: infinite;
59 | animation-timing-function: linear;
60 | animation-duration: 1280ms;
61 | animation-name: swing;
62 | width: 26.27vw;
63 | height: 45.33vw;
64 | }
65 | .product-long {
66 | position: absolute;
67 | top: 20.93vw;
68 | left: 22.93vw;
69 | animation-iteration-count: infinite;
70 | animation-timing-function: ease;
71 | animation-duration: 1280ms;
72 | animation-name: swing;
73 | width: 24.27vw;
74 | height: 47.2vw;
75 | }
76 | .item-long-1 {
77 | position: absolute;
78 | top: 20.53vw;
79 | right: 23.07vw;
80 | animation-iteration-count: infinite;
81 | animation-timing-function: ease;
82 | animation-duration: 1280ms;
83 | animation-name: swing;
84 | width: 23.87vw;
85 | height: 51.73vw;
86 | }
87 | .product-long-1 {
88 | position: absolute;
89 | right: 16.27vw;
90 | bottom: 8.13vw;
91 | animation-iteration-count: infinite;
92 | animation-timing-function: linear;
93 | animation-duration: 1280ms;
94 | animation-name: swing;
95 | width: 30.67vw;
96 | height: 54.13vw;
97 | }
98 | .item-long-2 {
99 | position: absolute;
100 | right: 7.47vw;
101 | bottom: 4.93vw;
102 | animation-iteration-count: infinite;
103 | animation-timing-function: ease;
104 | animation-duration: 1280ms;
105 | animation-name: swing;
106 | width: 40.27vw;
107 | height: 55.6vw;
108 | }
109 | .entry-pic-1 {
110 | position: absolute;
111 | right: 0;
112 | bottom: 2.67vw;
113 | animation-iteration-count: infinite;
114 | animation-timing-function: linear;
115 | animation-duration: 1280ms;
116 | animation-name: swing;
117 | width: 52.27vw;
118 | height: 33.47vw;
119 | }
120 | .layer-wrapper {
121 | display: flex;
122 | position: absolute;
123 | top: 18.53vw;
124 | right: 2.4vw;
125 | align-items: center;
126 | flex-direction: row;
127 | width: 62.13vw;
128 | height: 45.07vw;
129 | }
130 | .layer {
131 | position: absolute;
132 | top: 0;
133 | left: 0;
134 | width: 62.13vw;
135 | height: 45.07vw;
136 | overflow: hidden;
137 | }
138 | .vertical-line {
139 | position: absolute;
140 | top: 0.13vw;
141 | right: -0.27vw;
142 | width: 0.4vw;
143 | height: 41.2vw;
144 | }
145 | .bg {
146 | position: absolute;
147 | top: 18.4vw;
148 | left: 0;
149 | width: 42.53vw;
150 | height: 0.4vw;
151 | }
152 | .product-long-2 {
153 | position: absolute;
154 | top: 18.53vw;
155 | left: 10.8vw;
156 | width: 35.73vw;
157 | height: 50.4vw;
158 | overflow: hidden;
159 | }
160 | .background {
161 | position: absolute;
162 | top: 13.6vw;
163 | right: 2.4vw;
164 | width: 62.13vw;
165 | height: 5.2vw;
166 | }
167 | .wrapper {
168 | display: flex;
169 | position: absolute;
170 | right: 1.47vw;
171 | bottom: 0;
172 | align-items: flex-start;
173 | flex-direction: row;
174 | }
175 | .wrapper-inner {
176 | display: flex;
177 | position: relative;
178 | align-items: center;
179 | flex-direction: row;
180 | margin-top: 2.27vw;
181 | margin-left: 6.13vw;
182 | background-size: contain;
183 | background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01ofNLoD1YmIuIHhBl1_!!6000000003101-2-tps-964-380.png);
184 | height: 25.33vw;
185 | }
186 | .group {
187 | display: flex;
188 | position: relative;
189 | align-items: flex-start;
190 | flex-direction: row;
191 | justify-content: center;
192 | background-color: #141414;
193 | width: 64.27vw;
194 | height: 23.47vw;
195 | overflow: hidden;
196 | }
197 | .entry-pic-2 {
198 | position: absolute;
199 | right: 1.6vw;
200 | bottom: 0;
201 | width: 23.2vw;
202 | height: 15.87vw;
203 | }
204 | .view {
205 | display: flex;
206 | flex-direction: row;
207 | justify-content: center;
208 | align-items: center;
209 | margin-top: 0.27vw;
210 | width: 21.2vw;
211 | height: 5.33vw;
212 | line-height: 3.47vw;
213 | position: absolute;
214 | top: 14.67vw;
215 | left: 3.87vw;
216 | z-index: 10;
217 | background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01A6AUU31FroypE1Fw8_!!6000000000541-2-tps-318-80.png);
218 | background-size: contain;
219 | white-space: nowrap;
220 | }
221 | .title {
222 | margin-top: -0.27vw;
223 | color: #141414;
224 | font-family: PingFang SC;
225 | font-size: 3.47vw;
226 | font-weight: 400;
227 | }
228 | .num {
229 | margin-top: -0.27vw;
230 | color: #141414;
231 | font-family: PingFang SC;
232 | font-size: 3.47vw;
233 | font-weight: 600;
234 | }
235 | .caption {
236 | margin-top: -0.27vw;
237 | color: #141414;
238 | font-family: PingFang SC;
239 | font-size: 3.47vw;
240 | font-weight: 400;
241 | }
242 | .bg-1 {
243 | position: relative;
244 | margin-top: 2.27vw;
245 | width: 48.93vw;
246 | height: 4.27vw;
247 | }
248 | .entry-pic-3 {
249 | position: absolute;
250 | top: 0;
251 | left: 0;
252 | width: 23.2vw;
253 | height: 15.87vw;
254 | }
255 | .wrapper-inner-1 {
256 | display: flex;
257 | position: absolute;
258 | top: 12vw;
259 | right: 5.2vw;
260 | align-items: flex-start;
261 | flex-direction: column;
262 | border-width: 2px;
263 | border-style: solid;
264 | border-radius: 6.27vw;
265 | border-color: rgba(0, 0, 0, 0.34);
266 | background-color: rgba(255, 255, 255, 0.1);
267 | width: 54vw;
268 | height: 12.53vw;
269 | }
270 | .button-bg-wrapper {
271 | display: flex;
272 | position: absolute;
273 | top: 1.33vw;
274 | align-items: center;
275 | align-self: center;
276 | flex-direction: row;
277 | width: 50.93vw;
278 | height: 9.87vw;
279 | }
280 | .button-bg {
281 | position: absolute;
282 | top: 0;
283 | left: 0;
284 | width: 50.93vw;
285 | height: 9.87vw;
286 | overflow: hidden;
287 | }
288 | .background-1 {
289 | position: absolute;
290 | top: 0;
291 | left: 0;
292 | width: 50.93vw;
293 | height: 6.53vw;
294 | overflow: hidden;
295 | }
296 | .large-icon {
297 | position: absolute;
298 | top: 2.13vw;
299 | right: 20vw;
300 | width: 10.53vw;
301 | height: 5.07vw;
302 | }
303 |
304 | @keyframes swing {
305 |
306 | 20% {
307 |
308 | transform: rotate3d(0, 0, 1, 15deg);
309 | }
310 |
311 | 40% {
312 |
313 | transform: rotate3d(0, 0, 1, -10deg);
314 | }
315 |
316 | 60% {
317 |
318 | transform: rotate3d(0, 0, 1, 5deg);
319 | }
320 |
321 | 80% {
322 |
323 | transform: rotate3d(0, 0, 1, -5deg);
324 | }
325 |
326 | 100% {
327 |
328 | transform: rotate3d(0, 0, 1, 0deg);
329 | }
330 |
331 | }
332 |
333 | @keyframes swing {
334 |
335 | 20% {
336 |
337 | transform: rotate3d(0, 0, 1, 15deg);
338 | }
339 |
340 | 40% {
341 |
342 | transform: rotate3d(0, 0, 1, -10deg);
343 | }
344 |
345 | 60% {
346 |
347 | transform: rotate3d(0, 0, 1, 5deg);
348 | }
349 |
350 | 80% {
351 |
352 | transform: rotate3d(0, 0, 1, -5deg);
353 | }
354 |
355 | 100% {
356 |
357 | transform: rotate3d(0, 0, 1, 0deg);
358 | }
359 |
360 | }
361 |
362 | @keyframes swing {
363 |
364 | 20% {
365 |
366 | transform: rotate3d(0, 0, 1, 15deg);
367 | }
368 |
369 | 40% {
370 |
371 | transform: rotate3d(0, 0, 1, -10deg);
372 | }
373 |
374 | 60% {
375 |
376 | transform: rotate3d(0, 0, 1, 5deg);
377 | }
378 |
379 | 80% {
380 |
381 | transform: rotate3d(0, 0, 1, -5deg);
382 | }
383 |
384 | 100% {
385 |
386 | transform: rotate3d(0, 0, 1, 0deg);
387 | }
388 |
389 | }
390 |
391 | @keyframes swing {
392 |
393 | 20% {
394 |
395 | transform: rotate3d(0, 0, 1, 15deg);
396 | }
397 |
398 | 40% {
399 |
400 | transform: rotate3d(0, 0, 1, -10deg);
401 | }
402 |
403 | 60% {
404 |
405 | transform: rotate3d(0, 0, 1, 5deg);
406 | }
407 |
408 | 80% {
409 |
410 | transform: rotate3d(0, 0, 1, -5deg);
411 | }
412 |
413 | 100% {
414 |
415 | transform: rotate3d(0, 0, 1, 0deg);
416 | }
417 |
418 | }
419 |
420 | @keyframes swing {
421 |
422 | 20% {
423 |
424 | transform: rotate3d(0, 0, 1, 15deg);
425 | }
426 |
427 | 40% {
428 |
429 | transform: rotate3d(0, 0, 1, -10deg);
430 | }
431 |
432 | 60% {
433 |
434 | transform: rotate3d(0, 0, 1, 5deg);
435 | }
436 |
437 | 80% {
438 |
439 | transform: rotate3d(0, 0, 1, -5deg);
440 | }
441 |
442 | 100% {
443 |
444 | transform: rotate3d(0, 0, 1, 0deg);
445 | }
446 |
447 | }
448 |
449 | @keyframes swing {
450 |
451 | 20% {
452 |
453 | transform: rotate3d(0, 0, 1, 15deg);
454 | }
455 |
456 | 40% {
457 |
458 | transform: rotate3d(0, 0, 1, -10deg);
459 | }
460 |
461 | 60% {
462 |
463 | transform: rotate3d(0, 0, 1, 5deg);
464 | }
465 |
466 | 80% {
467 |
468 | transform: rotate3d(0, 0, 1, -5deg);
469 | }
470 |
471 | 100% {
472 |
473 | transform: rotate3d(0, 0, 1, 0deg);
474 | }
475 |
476 | }
477 |
478 | @keyframes swing {
479 |
480 | 20% {
481 |
482 | transform: rotate3d(0, 0, 1, 15deg);
483 | }
484 |
485 | 40% {
486 |
487 | transform: rotate3d(0, 0, 1, -10deg);
488 | }
489 |
490 | 60% {
491 |
492 | transform: rotate3d(0, 0, 1, 5deg);
493 | }
494 |
495 | 80% {
496 |
497 | transform: rotate3d(0, 0, 1, -5deg);
498 | }
499 |
500 | 100% {
501 |
502 | transform: rotate3d(0, 0, 1, 0deg);
503 | }
504 |
505 | }
506 |
--------------------------------------------------------------------------------
/src/core/exportBlock.ts:
--------------------------------------------------------------------------------
1 | import { IPanelDisplay, IImport, IDependence } from './interface';
2 | import {
3 | toString,
4 | existImport,
5 | importString,
6 | parseLoop,
7 | parseStyle,
8 | parseFunction,
9 | parseProps,
10 | parseState,
11 | parseLifeCycles,
12 | replaceState,
13 | parseCondition,
14 | generateCSS,
15 | generateScss,
16 | parseDataSource,
17 | line2Hump,
18 | addAnimation,
19 | traverse,
20 | isObject,
21 | isJSSlot,
22 | } from './utils';
23 |
24 | import { CSS_TYPE, OUTPUT_TYPE, prettierJsOpt, prettierCssOpt, prettierLessOpt, prettierScssOpt, DSL_CONFIG } from './consts';
25 |
26 |
27 | export default function exportMod(schema, option):IPanelDisplay[] {
28 | const {
29 | prettier,
30 | scale,
31 | componentsMap,
32 | folder,
33 | blocksCount,
34 | pagesCount,
35 | blockInPage,
36 | dslConfig = {},
37 | pageGlobalCss,
38 | _,
39 | } = option;
40 |
41 | const isExportGlobalFile = dslConfig.globalCss && blocksCount == 1 && !blockInPage;
42 | const fileName = schema.fileName;
43 | const { cssUnit } = dslConfig;
44 | const rootSchema = schema;
45 |
46 | let folderName;
47 | let filePathName = 'index';
48 | if(schema.componentName == 'Page'){
49 | // 单页面
50 | // if(pagesCount == 1){
51 | // folderName = '';
52 | // }else{
53 | // folderName = 'pages/' + schema.fileName;
54 | // }
55 | // folderName = 'pages/' + schema.fileName;
56 | folderName = '';
57 | if(dslConfig.outputStyle == OUTPUT_TYPE.PROJECT){
58 | filePathName = 'App';
59 | }
60 |
61 | // filePathName = schema.fileName
62 | }else{
63 | folderName = pagesCount == 0 && blocksCount == 1 && dslConfig.outputStyle !== OUTPUT_TYPE.PROJECT? '' : ('components/' + schema.fileName);
64 | }
65 | schema.folderName = folderName;
66 |
67 | const globalCss = pageGlobalCss + '\n' + (schema.css || '');
68 |
69 | // imports
70 | const dependenceList: IDependence[] = []
71 |
72 | // imports mods
73 | const importMods: string[] = [];
74 |
75 | // import css
76 | const importStyles: string[] = [];
77 |
78 | const importsMap = new Map();
79 |
80 | // inline style
81 | const style = {};
82 |
83 | // Global Public Functions
84 | const utils: string[] = [];
85 |
86 | // states
87 | let statesData = null;
88 |
89 | // useState
90 | let useState: string[] = [];
91 |
92 | // calsses
93 | let classes: string[] = [];
94 |
95 | // methods
96 | const methods: string[] = [];
97 |
98 | // life cycles
99 | let lifeCycles: string[] = [];
100 |
101 | // init
102 | const init: string[] = [];
103 |
104 | const cssFileName = `${filePathName}${dslConfig.inlineStyle == CSS_TYPE.MODULE_CLASS ? '.module' : ''}.${dslConfig.cssType || 'css'}`
105 |
106 |
107 | if (dslConfig.inlineStyle !== CSS_TYPE.INLINE_CSS) {
108 | if (isExportGlobalFile) {
109 | importStyles.push(`import './global.css';`);
110 | }
111 | if (dslConfig.inlineStyle == CSS_TYPE.IMPORT_CLASS) {
112 | importStyles.push(`import './${cssFileName}';`);
113 | } else {
114 | importStyles.push(`import styles from './${cssFileName}';`);
115 | }
116 | }
117 |
118 | const collectImports = (componentName) => {
119 | // ignore the empty string
120 | if (!componentName) {
121 | return;
122 | }
123 |
124 | const component = componentsMap[componentName];
125 | if(!component){
126 | return
127 | }
128 | const objSets = importsMap.get(component.packageName);
129 |
130 | if (!objSets) {
131 | const set = new Set();
132 | set.add(component);
133 | importsMap.set(component.packageName, set);
134 | } else {
135 | objSets.add(component);
136 | }
137 |
138 | if(!dependenceList.find(i=>i.package == component.packageName)){
139 | dependenceList.push({
140 | package: component.packageName,
141 | version: component.dependenceVersion || '*',
142 | });
143 | }
144 |
145 | };
146 |
147 |
148 | // generate render xml
149 | /**
150 | *
151 | * @param {*} json
152 | * @param {*} isReplace 是否提取 block
153 | * @returns
154 | */
155 | const generateRender = (json, isReplace = false): string => {
156 | if(typeof json == 'string'){
157 | return json
158 | }
159 | if(Array.isArray(json)){
160 | return (json.map(item=>{
161 | return generateRender(item, isReplace)
162 | })).join('')
163 | }
164 | const componentName = json.componentName;
165 | const type = json.componentName.toLowerCase();
166 | let className = json.props && json.props.className;
167 | let classString = json.classString || '';
168 |
169 | if (className) {
170 | style[className] = parseStyle(json.props.style);
171 | }
172 |
173 | let xml;
174 | let props = '';
175 |
176 | Object.keys(json.props).forEach((key) => {
177 | if (key === 'codeStyle') {
178 | if (json.props[key] && JSON.stringify(json.props[key]) !== '{}') {
179 | props += ` style={${parseProps(json.props[key])}}`;
180 | }
181 | }
182 |
183 | if (
184 | ['className', 'style', 'text', 'src', 'key', 'codeStyle'].indexOf(
185 | key
186 | ) === -1
187 | ) {
188 | props += ` ${key}={${parseProps(json.props[key])}}`;
189 | }
190 |
191 | // fix attr when type is not text
192 | if (type !== 'text' && ['text'].includes(key)) {
193 | props += ` ${key}={${parseProps(json.props[key])}}`;
194 | }
195 |
196 | });
197 |
198 | switch (type) {
199 | case 'text':
200 | let innerText =
201 | parseProps(json.props.text || json.text, true) || '';
202 | if (innerText.match(/this\.props/)) {
203 | innerText = innerText.replace(/this\./, '');
204 | }
205 | xml = `${innerText || ''}`;
206 | break;
207 | case 'image':
208 | let source = parseProps(json.props.src);
209 | source = (source && `src={${source}}`) || '';
210 | xml = ` {
189 | window.open(item.url, '_blank');
190 | }}
191 | data-url={item.url}
192 | key={item.index}
193 | >
194 |
227 | );
228 | })}
229 |
195 | 
196 | 
197 |
205 |
196 |
198 | 
202 | 距离500m
203 |
204 |
202 | 距离500m
203 |
206 | {item.title}
207 |
208 |
209 |
226 |
210 | 
214 | {item.user.userName}
215 |
216 | {this.isReadCountShow(item.readCount) && (
217 |
214 | {item.user.userName}
215 |
218 | 
222 | {item.readCount}
223 |
224 | )}
225 |
222 | {item.readCount}
223 | ${json.children
227 | .map((node) => {
228 | return generateRender(node, true);
229 | })
230 | .join('')}
`;
231 | } else {
232 | xml = ``;
233 | }
234 | break;
235 | case 'div':
236 | case 'view':
237 | if (json.children && json.children.length) {
238 | xml = `${json.children
239 | .map((node) => {
240 | return generateRender(node, true);
241 | })
242 | .join('')}
`;
243 | } else {
244 | xml = ``;
245 | }
246 | break;
247 | default:
248 | if(componentName){
249 | collectImports(componentName);
250 | if (
251 | json.children &&
252 | json.children.length &&
253 | Array.isArray(json.children)
254 | ) {
255 |
256 | xml = `<${componentName} ${classString} ${props}>${json.children
257 | .map((node) => {
258 | return generateRender(node, true);
259 | })
260 | .join('')}`;
261 |
262 | } else if (typeof json.children === 'string') {
263 | xml = `<${componentName} ${classString} ${props} >${json.children}`;
264 | } else {
265 | xml = `<${componentName} ${classString} ${props} />`;
266 | }
267 | }else{
268 | xml = ''
269 | }
270 | }
271 |
272 | if (json.loop) {
273 | const parseLoopData = parseLoop(
274 | json.loop,
275 | json.loopArgs,
276 | xml,
277 | {}
278 | );
279 | xml = parseLoopData.value;
280 |
281 | useState = useState.concat(parseLoopData.hookState);
282 | }
283 |
284 | xml = replaceState(xml);
285 |
286 | if (json.condition) {
287 | xml = parseCondition(json.condition, xml);
288 | }
289 | if (json.loop || json.condition) {
290 | xml = `{${xml}}`;
291 | }
292 | return xml;
293 | };
294 |
295 |
296 | // parse schema
297 | const transformHooks = (json) => {
298 | if(typeof json == 'string'){
299 | return json
300 | }
301 | let result = '';
302 | const blockName = json.fileName || json.id;
303 | const type = json.componentName.toLowerCase();
304 |
305 | // 容器组件处理: state/method/dataSource/lifeCycle
306 | const states: string[] = [];
307 |
308 | if (json.state) {
309 | states.push(`state = ${toString(json.state)};`);
310 | statesData = toString(json.state);
311 | }
312 |
313 | if (json.methods) {
314 | Object.keys(json.methods).forEach((name) => {
315 | const { params, content } = parseFunction(json.methods[name]);
316 | methods.push(`function ${name}(${params}) {${content}}`);
317 | });
318 | }
319 |
320 | if (json.dataSource && Array.isArray(json.dataSource.list)) {
321 | json.dataSource.list.forEach((item) => {
322 | if (typeof item.isInit === 'boolean' && item.isInit) {
323 | init.push(`${item.id}();`);
324 | } else if (typeof item.isInit === 'string') {
325 | init.push(`if (${parseProps(item.isInit)}) { ${item.id}(); }`);
326 | }
327 | const parseDataSourceData = parseDataSource(item);
328 | methods.push(
329 | `const ${parseDataSourceData.functionName} = ()=> ${parseDataSourceData.functionBody}`
330 | );
331 | });
332 |
333 | if (json.dataSource.dataHandler) {
334 | const { params, content } = parseFunction(
335 | json.dataSource.dataHandler
336 | );
337 | methods.push(`const dataHandler = (${params}) => {${content}}`);
338 | init.push(`dataHandler()`);
339 | }
340 | }
341 |
342 | if (json.lifeCycles) {
343 | lifeCycles = parseLifeCycles(json, init);
344 | }
345 |
346 | if (statesData) {
347 | useState.push(parseState(statesData));
348 | }
349 |
350 | const hooksView = generateRender(json, false);
351 | const hasDispatch = hooksView.match('dispatch');
352 |
353 | const classData = `
354 | export default memo((props) => {
355 | ${useState.join('\n')}
356 | ${
357 | hasDispatch
358 | ? 'const { state: { txt }, dispatch} = useContext(IndexContext);'
359 | : ''
360 | }
361 |
362 | ${methods.join('\n')}
363 | ${lifeCycles.join('\n')}
364 | ${
365 | hooksView.match(/^\{true\ \&\& /)
366 | ? `return (