zmp-cli 3.7.1 → 3.8.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/assets/index.js +0 -0
  2. package/build/index.js +0 -0
  3. package/config/index.js +0 -0
  4. package/create/index.js +0 -0
  5. package/create/templates/react/copy-assets.js +13 -4
  6. package/create/templates/react/generate-home-page.js +25 -8
  7. package/create/templates/react/generate-root.js +26 -176
  8. package/create/templates/react/generate-routes.js +1 -1
  9. package/create/templates/react/pages/catalog.jsx +18 -16
  10. package/create/templates/react/pages/form-tabs.jsx +64 -0
  11. package/create/templates/react/pages/settings.jsx +16 -163
  12. package/create/templates/react/pages/user-tabs.jsx +31 -0
  13. package/create/templates/react-typescript/copy-assets.js +8 -0
  14. package/create/templates/react-typescript/generate-home-page.js +26 -8
  15. package/create/templates/react-typescript/generate-root.js +43 -2
  16. package/create/templates/react-typescript/generate-routes.js +3 -1
  17. package/create/templates/react-typescript/pages/404.js +2 -1
  18. package/create/templates/react-typescript/pages/about.js +1 -0
  19. package/create/templates/react-typescript/pages/catalog.js +60 -0
  20. package/create/templates/react-typescript/pages/dynamic-route.js +1 -0
  21. package/create/templates/react-typescript/pages/form.js +13 -1
  22. package/create/templates/react-typescript/pages/index.js +4 -0
  23. package/create/templates/react-typescript/pages/settings.js +39 -0
  24. package/create/templates/react-typescript/pages/user.js +17 -2
  25. package/create/utils/generate-package-json.js +4 -4
  26. package/create/utils/get-options.js +5 -9
  27. package/deploy/index.js +0 -0
  28. package/login/index.js +0 -0
  29. package/migrate/index.js +0 -0
  30. package/package.json +2 -2
  31. package/scripts/dist/release.dev.js +105 -0
  32. package/start/frame/index.html +255 -129
  33. package/start/index.js +0 -0
package/start/frame/index.html CHANGED
@@ -1,156 +1,282 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta
6
+ http-equiv="Content-Security-Policy"
7
+ content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
8
+ />
9
+ <meta
10
+ name="viewport"
11
+ content="width=device-width, initial-scale=1, viewport-fit=cover"
12
+ />
3
13
 
4
- <head>
5
- <meta charset="utf-8" />
6
- <meta http-equiv="Content-Security-Policy"
7
- content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:" />
8
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
9
-
10
- <meta name="theme-color" content="#007aff" />
11
- <meta name="format-detection" content="telephone=no" />
12
- <meta name="msapplication-tap-highlight" content="no" />
13
- <link rel="icon" href="/src/static/icons/favicon.png" />
14
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
15
- integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
16
- crossorigin="anonymous" referrerpolicy="no-referrer" />
17
-
18
- <title>Water Reminder1</title>
19
- <style>
20
- body {
21
- font-family: -apple-system, BlinkMacSystemFont, sans-serif;
22
- margin: 0px;
23
- }
14
+ <meta name="theme-color" content="#007aff" />
15
+ <meta name="format-detection" content="telephone=no" />
16
+ <meta name="msapplication-tap-highlight" content="no" />
17
+ <link rel="icon" href="/src/static/icons/favicon.png" />
18
+ <link
19
+ rel="stylesheet"
20
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
21
+ integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
22
+ crossorigin="anonymous"
23
+ referrerpolicy="no-referrer"
24
+ />
24
25
 
25
- #zalo-frame {
26
- width: 100%;
27
- height: calc(100vh - 74px);
28
- border: none;
29
- overflow: auto;
30
- cursor: grab;
31
- }
26
+ <title>Zalo Mini Program</title>
27
+ <style>
28
+ body {
29
+ font-family: -apple-system, BlinkMacSystemFont, sans-serif;
30
+ margin: 0px;
31
+ }
32
32
 
33
- .wrapper-frame {
34
- width: 100%;
35
- height: 100vh;
36
- background-color: black;
37
- margin: auto;
38
- overflow: hidden;
39
- }
33
+ #zalo-frame {
34
+ width: 100%;
35
+ height: calc(100vh - 74px);
36
+ border: none;
37
+ overflow: auto;
38
+ cursor: grab;
39
+ }
40
40
 
41
- .status-bar {
42
- height: 30px;
43
- background-color: #0068FF;
44
- color: white;
45
- font-size: 13px;
46
- }
41
+ .wrapper-frame {
42
+ width: 100%;
43
+ height: 100vh;
44
+ background-color: black;
45
+ margin: auto;
46
+ overflow: hidden;
47
+ }
47
48
 
48
- .status-bar .right {
49
- float: right;
50
- padding: 6px;
51
- }
49
+ .status-bar {
50
+ height: 30px;
51
+ background-color: #0068ff;
52
+ color: white;
53
+ font-size: 13px;
54
+ }
52
55
 
53
- .status-bar .left {
54
- float: left;
55
- padding: 6px;
56
- margin-left: 5px;
57
- }
56
+ .status-bar .right {
57
+ float: right;
58
+ padding: 6px;
59
+ }
58
60
 
59
- .status-bar .right i {
60
- margin-right: 5px;
61
- }
61
+ .status-bar .left {
62
+ float: left;
63
+ padding: 6px;
64
+ margin-left: 5px;
65
+ }
62
66
 
63
- .header {
64
- position: relative;
65
- height: 32px;
66
- background-color: #0068FF;
67
- text-align: center;
68
- color: #fff;
69
- padding-top: 12px;
70
- }
67
+ .status-bar .right i {
68
+ margin-right: 5px;
69
+ }
71
70
 
72
- .header .home {
73
- font-size: 14px;
74
- position: absolute;
75
- left: 6px;
76
- top: 6px;
77
- padding-top: 6px;
78
- height: 24px;
79
- width: 30px;
80
- background-color: rgba(0, 0, 0, 0.15);
81
- border-radius: 100%;
82
- border: 1px solid rgba(255, 255, 255, 0.25);
83
- }
71
+ .header {
72
+ position: relative;
73
+ height: 32px;
74
+ background-color: #0068ff;
75
+ text-align: center;
76
+ color: #fff;
77
+ padding-top: 12px;
78
+ }
84
79
 
85
- .header .setting {
86
- font-size: 14px;
87
- position: absolute;
88
- right: 6px;
89
- top: 6px;
90
- padding-top: 6px;
91
- height: 24px;
92
- width: 85px;
93
- background-color: rgba(0, 0, 0, 0.15);
94
- border-radius: 16px;
95
- border: 1px solid rgba(255, 255, 255, 0.25);
96
- }
80
+ #right-buttons,
81
+ #left-buttons {
82
+ display: flex;
83
+ justify-content: space-around;
84
+ align-items: center;
85
+ font-size: 14px;
86
+ position: absolute;
87
+ right: 6px;
88
+ top: 36px;
89
+ height: 28px;
90
+ width: max-content;
91
+ border-radius: 16px;
92
+ border: 1px solid rgba(0, 0, 0, 0.1);
93
+ }
97
94
 
98
- .header .setting i:first-child {
99
- border-right: 1px solid rgba(255, 255, 255, 0.25);
100
- padding-right: 12px;
101
- margin-right: 12px;
102
- }
103
- </style>
104
- </head>
105
-
106
- <body>
107
- <div class="wrapper-frame">
108
- <div id="statusbar" class="status-bar">
109
- <div class="right">
110
- <i class="fas fa-wifi"></i>
111
- <i class="fas fa-battery-full"></i>
112
- </div>
113
- <div class="left">
114
- 12:00
95
+ #left-buttons {
96
+ left: 6px;
97
+ top: 6px;
98
+ }
99
+
100
+ .text-white {
101
+ color: white;
102
+ }
103
+
104
+ .text-black {
105
+ color: black;
106
+ }
107
+
108
+ #right-buttons i,
109
+ #left-buttons i {
110
+ min-width: 23px;
111
+ width: 100%;
112
+ height: 100%;
113
+ justify-content: center;
114
+ align-items: center;
115
+ display: flex;
116
+ padding: 0 4px;
117
+ }
118
+
119
+ #right-buttons i:first-child {
120
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
121
+ }
122
+
123
+ .text-black #statusbar,
124
+ .text-black #header,
125
+ .text-black #left-buttons,
126
+ .text-black #right-buttons {
127
+ color: black;
128
+ background-color: rgba(255, 255, 255, 0.6);
129
+ }
130
+
131
+ .text-white #statusbar,
132
+ .text-white #header,
133
+ .text-white #left-buttons,
134
+ .text-white #right-buttons {
135
+ color: white;
136
+ background-color: rgba(0, 0, 0, 0.1);
137
+ }
138
+
139
+ .btn-none,
140
+ .btn-back #btn-home,
141
+ .btn-home #btn-back {
142
+ display: none !important;
143
+ }
144
+
145
+ .btn-both,
146
+ .btn-back,
147
+ .btn-back #btn-back,
148
+ .btn-home,
149
+ .btn-home #btn-home {
150
+ display: flex !important;
151
+ }
152
+
153
+ .btn-back.btn-home #btn-back {
154
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
155
+ }
156
+
157
+ .btn-back:not(.btn-home) {
158
+ background-color: transparent !important;
159
+ border: none !important;
160
+ }
161
+ </style>
162
+ </head>
163
+
164
+ <body>
165
+ <div id="wrapper-frame" class="wrapper-frame">
166
+ <div id="statusbar" class="status-bar">
167
+ <div class="right">
168
+ <i class="fas fa-wifi"></i>
169
+ <i class="fas fa-battery-full"></i>
170
+ </div>
171
+ <div class="left">12:00</div>
115
172
  </div>
116
- </div>
117
173
 
118
- <div id="header" class="header">
119
- <div class="home">
120
- <i class="fas fa-home"></i>
174
+ <div id="header" class="header">
175
+ <div class="btn-none" id="left-buttons">
176
+ <i id="btn-back" class="fas fa-chevron-left"></i>
177
+ <i id="btn-home" class="fas fa-home"></i>
178
+ </div>
179
+ <span id="title"></span>
121
180
  </div>
122
- <div class="setting">
181
+ <div id="right-buttons">
123
182
  <i class="fas fa-ellipsis-h"></i>
124
183
  <i class="fas fa-power-off"></i>
125
184
  </div>
126
- <span id="title"></span>
127
185
  </div>
128
- </div>
129
- </body>
186
+ </body>
130
187
 
131
- <script>
132
- fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port - 1}/app-config.json`)
133
- .then(response => response.json())
134
- .then(data => {
135
- if (data.app.title) {
136
- document.getElementById('title').innerHTML = data.app.title;
137
- document.title = data.app.title;
188
+ <script>
189
+ window.configLeftButton = function (type) {
190
+ switch (type) {
191
+ case 'none':
192
+ document.getElementById('left-buttons').classList.remove('btn-home');
193
+ document.getElementById('left-buttons').classList.remove('btn-back');
194
+ document.getElementById('left-buttons').classList.add('btn-none');
195
+ break;
196
+ case 'home':
197
+ document.getElementById('left-buttons').classList.remove('btn-none');
198
+ document.getElementById('left-buttons').classList.remove('btn-back');
199
+ document.getElementById('left-buttons').classList.add('btn-home');
200
+ break;
201
+ case 'back':
202
+ document.getElementById('left-buttons').classList.remove('btn-none');
203
+ document.getElementById('left-buttons').classList.remove('btn-home');
204
+ document.getElementById('left-buttons').classList.add('btn-back');
205
+ break;
206
+ case 'both':
207
+ document.getElementById('left-buttons').classList.remove('btn-none');
208
+ document.getElementById('left-buttons').classList.add('btn-back');
209
+ document.getElementById('left-buttons').classList.add('btn-home');
210
+ default:
211
+ break;
138
212
  }
139
- if (data.app.headerColor) {
140
- document.getElementById('header').style.backgroundColor = data.app.headerColor;
213
+ };
214
+
215
+ function configTextColor(color) {
216
+ if (color) {
217
+ document
218
+ .getElementById('wrapper-frame')
219
+ .classList.add(color === 'white' ? 'text-white' : 'text-black');
220
+ document
221
+ .getElementById('wrapper-frame')
222
+ .classList.remove(color === 'white' ? 'text-black' : 'text-white');
223
+ }
224
+ }
225
+ function configTopBar(navColor, statusBarColor) {
226
+ if (navColor) {
227
+ document.getElementById('header').style.backgroundColor = navColor;
228
+ document.getElementById('statusbar').style.backgroundColor = navColor;
229
+ } else if (statusBarColor) {
230
+ document.getElementById('header').style.display = 'none';
231
+ document.getElementById('statusbar').style.backgroundColor =
232
+ statusBarColor;
141
233
  }
142
- if (data.app.statusBarColor) {
143
- document.getElementById('statusbar').style.backgroundColor = data.app.statusBarColor;
234
+ }
235
+ function configTitle(title) {
236
+ if (title) {
237
+ document.getElementById('title').innerHTML = title;
238
+ document.title = title;
144
239
  }
145
- if (data.app.textColor) {
146
- document.getElementById('statusbar').style.color = data.app.textColor;
147
- document.getElementById('header').style.color = data.app.textColor;
240
+ }
241
+ window.addEventListener('message', function (event) {
242
+ const { type, data } = event.data;
243
+ switch (type) {
244
+ case 'config-left-button':
245
+ configLeftButton(data);
246
+ break;
247
+ case 'config-text-color':
248
+ configTextColor(data);
249
+ break;
250
+ case 'config-top-bar':
251
+ configTopBar(data.navColor, data.statusBarColor);
252
+ break;
253
+ case 'config-title':
254
+ configTitle(data);
255
+ break;
256
+ case 'custom':
257
+ eval(data);
258
+ break;
259
+ default:
260
+ break;
148
261
  }
149
262
  });
150
- const iframe = document.createElement('iframe');
151
- iframe.id = 'zalo-frame'
152
- iframe.src = `${window.location.protocol}//${window.location.hostname}:${window.location.port - 1}`
153
- document.body.firstElementChild.appendChild(iframe);
154
- </script>
155
-
263
+ fetch(
264
+ `${window.location.protocol}//${window.location.hostname}:${
265
+ window.location.port - 1
266
+ }/app-config.json`
267
+ )
268
+ .then((response) => response.json())
269
+ .then((data) => {
270
+ configTitle(data.app.title);
271
+ configTopBar(data.app.headerColor, data.app.statusBarColor);
272
+ configTextColor(data.app.textColor);
273
+ window.configLeftButton(data.app.leftButton);
274
+ });
275
+ const iframe = document.createElement('iframe');
276
+ iframe.id = 'zalo-frame';
277
+ iframe.src = `${window.location.protocol}//${window.location.hostname}:${
278
+ window.location.port - 1
279
+ }`;
280
+ document.body.firstElementChild.appendChild(iframe);
281
+ </script>
156
282
  </html>
package/start/index.js CHANGED
File without changes