vite-shadcn-ui-cli 1.0.15 → 1.0.17
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.
- package/package.json +2 -2
- package/src/components/suspense-lazy/index.tsx +19 -0
- package/src/index.css +419 -0
- package/src/layout/index.tsx +54 -0
- package/src/main.tsx +112 -7
- package/src/pages/about/index.tsx +10 -0
- package/src/pages/home/index.tsx +10 -0
- package/src/pages/page404/index.tsx +12 -0
- package/src/route.tsx +29 -0
- package/tsconfig.node.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-shadcn-ui-cli",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"description": "A CLI tool to bootstrap Vite projects with shadcn UI components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"dev": "vite --host",
|
|
12
|
-
"build": "
|
|
12
|
+
"build": "vite build",
|
|
13
13
|
"lint": "eslint .",
|
|
14
14
|
"preview": "vite preview"
|
|
15
15
|
},
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// import React, { Suspense, lazy } from 'react';
|
|
2
|
+
|
|
3
|
+
// const SuspenseLazy = (props: any) => {
|
|
4
|
+
// return <Suspense fallback={<>...</>}>{React.createElement(lazy(props))}</Suspense>;
|
|
5
|
+
// };
|
|
6
|
+
|
|
7
|
+
// export default SuspenseLazy;
|
|
8
|
+
import React, { Suspense, lazy } from 'react';
|
|
9
|
+
|
|
10
|
+
const SuspenseLazy = (importFunc: () => Promise<{ default: React.ComponentType }>) => {
|
|
11
|
+
const LazyComponent = lazy(importFunc);
|
|
12
|
+
return (
|
|
13
|
+
<Suspense fallback={<>...</>}>
|
|
14
|
+
<LazyComponent />
|
|
15
|
+
</Suspense>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default SuspenseLazy;
|
package/src/index.css
CHANGED
|
@@ -91,3 +91,422 @@
|
|
|
91
91
|
--chart-5: 340 75% 55%;
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
|
+
.error-wrapper {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
gap: 2rem;
|
|
100
|
+
width: 100vw;
|
|
101
|
+
height: 100vh;
|
|
102
|
+
margin-top: 4rem;
|
|
103
|
+
.main {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
margin-top: 5em;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.antenna {
|
|
112
|
+
width: 5em;
|
|
113
|
+
height: 5em;
|
|
114
|
+
border-radius: 50%;
|
|
115
|
+
border: 2px solid black;
|
|
116
|
+
background-color: #f27405;
|
|
117
|
+
margin-bottom: -6em;
|
|
118
|
+
margin-left: 0em;
|
|
119
|
+
z-index: -1;
|
|
120
|
+
}
|
|
121
|
+
.antenna_shadow {
|
|
122
|
+
position: absolute;
|
|
123
|
+
background-color: transparent;
|
|
124
|
+
width: 50px;
|
|
125
|
+
height: 56px;
|
|
126
|
+
margin-left: 1.68em;
|
|
127
|
+
border-radius: 45%;
|
|
128
|
+
transform: rotate(140deg);
|
|
129
|
+
border: 4px solid transparent;
|
|
130
|
+
box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
|
|
131
|
+
-moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
|
|
132
|
+
}
|
|
133
|
+
.antenna::after {
|
|
134
|
+
content: '';
|
|
135
|
+
position: absolute;
|
|
136
|
+
margin-top: -9.4em;
|
|
137
|
+
margin-left: 0.4em;
|
|
138
|
+
transform: rotate(-25deg);
|
|
139
|
+
width: 1em;
|
|
140
|
+
height: 0.5em;
|
|
141
|
+
border-radius: 50%;
|
|
142
|
+
background-color: #f69e50;
|
|
143
|
+
}
|
|
144
|
+
.antenna::before {
|
|
145
|
+
content: '';
|
|
146
|
+
position: absolute;
|
|
147
|
+
margin-top: 0.2em;
|
|
148
|
+
margin-left: 1.25em;
|
|
149
|
+
transform: rotate(-20deg);
|
|
150
|
+
width: 1.5em;
|
|
151
|
+
height: 0.8em;
|
|
152
|
+
border-radius: 50%;
|
|
153
|
+
background-color: #f69e50;
|
|
154
|
+
}
|
|
155
|
+
.a1 {
|
|
156
|
+
position: relative;
|
|
157
|
+
top: -102%;
|
|
158
|
+
left: -130%;
|
|
159
|
+
width: 12em;
|
|
160
|
+
height: 5.5em;
|
|
161
|
+
border-radius: 50px;
|
|
162
|
+
background-image: linear-gradient(#171717, #171717, #353535, #353535, #171717);
|
|
163
|
+
transform: rotate(-29deg);
|
|
164
|
+
clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
|
|
165
|
+
}
|
|
166
|
+
.a1d {
|
|
167
|
+
position: relative;
|
|
168
|
+
top: -211%;
|
|
169
|
+
left: -35%;
|
|
170
|
+
transform: rotate(45deg);
|
|
171
|
+
width: 0.5em;
|
|
172
|
+
height: 0.5em;
|
|
173
|
+
border-radius: 50%;
|
|
174
|
+
border: 2px solid black;
|
|
175
|
+
background-color: #979797;
|
|
176
|
+
z-index: 99;
|
|
177
|
+
}
|
|
178
|
+
.a2 {
|
|
179
|
+
position: relative;
|
|
180
|
+
top: -210%;
|
|
181
|
+
left: -10%;
|
|
182
|
+
width: 12em;
|
|
183
|
+
height: 4em;
|
|
184
|
+
border-radius: 50px;
|
|
185
|
+
background-color: #171717;
|
|
186
|
+
background-image: linear-gradient(#171717, #171717, #353535, #353535, #171717);
|
|
187
|
+
margin-right: 5em;
|
|
188
|
+
clip-path: polygon(47% 0, 47% 0, 34% 34%, 54% 25%, 32% 100%, 29% 96%, 49% 32%, 30% 38%);
|
|
189
|
+
transform: rotate(-8deg);
|
|
190
|
+
}
|
|
191
|
+
.a2d {
|
|
192
|
+
position: relative;
|
|
193
|
+
top: -294%;
|
|
194
|
+
left: 94%;
|
|
195
|
+
width: 0.5em;
|
|
196
|
+
height: 0.5em;
|
|
197
|
+
border-radius: 50%;
|
|
198
|
+
border: 2px solid black;
|
|
199
|
+
background-color: #979797;
|
|
200
|
+
z-index: 99;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.notfound_text {
|
|
204
|
+
background-color: black;
|
|
205
|
+
padding-left: 0.3em;
|
|
206
|
+
padding-right: 0.3em;
|
|
207
|
+
font-size: 0.75em;
|
|
208
|
+
color: white;
|
|
209
|
+
letter-spacing: 0;
|
|
210
|
+
border-radius: 5px;
|
|
211
|
+
z-index: 10;
|
|
212
|
+
}
|
|
213
|
+
.tv {
|
|
214
|
+
width: 17em;
|
|
215
|
+
height: 9em;
|
|
216
|
+
margin-top: 3em;
|
|
217
|
+
border-radius: 15px;
|
|
218
|
+
background-color: #d36604;
|
|
219
|
+
display: flex;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
border: 2px solid #1d0e01;
|
|
222
|
+
box-shadow: inset 0.2em 0.2em #e69635;
|
|
223
|
+
}
|
|
224
|
+
.tv::after {
|
|
225
|
+
content: '';
|
|
226
|
+
position: absolute;
|
|
227
|
+
width: 17em;
|
|
228
|
+
height: 9em;
|
|
229
|
+
border-radius: 15px;
|
|
230
|
+
background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 50% 0/2500px
|
|
231
|
+
2500px,
|
|
232
|
+
repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px 2500px;
|
|
233
|
+
background-blend-mode: difference;
|
|
234
|
+
opacity: 0.09;
|
|
235
|
+
}
|
|
236
|
+
.curve_svg {
|
|
237
|
+
position: absolute;
|
|
238
|
+
margin-top: 0.25em;
|
|
239
|
+
margin-left: -0.25em;
|
|
240
|
+
height: 12px;
|
|
241
|
+
width: 12px;
|
|
242
|
+
}
|
|
243
|
+
.display_div {
|
|
244
|
+
display: flex;
|
|
245
|
+
align-items: center;
|
|
246
|
+
align-self: center;
|
|
247
|
+
justify-content: center;
|
|
248
|
+
border-radius: 15px;
|
|
249
|
+
box-shadow: 3.5px 3.5px 0px #e69635;
|
|
250
|
+
}
|
|
251
|
+
.screen_out {
|
|
252
|
+
width: auto;
|
|
253
|
+
height: auto;
|
|
254
|
+
|
|
255
|
+
border-radius: 10px;
|
|
256
|
+
}
|
|
257
|
+
.screen_out1 {
|
|
258
|
+
width: 11em;
|
|
259
|
+
height: 7.75em;
|
|
260
|
+
display: flex;
|
|
261
|
+
align-items: center;
|
|
262
|
+
justify-content: center;
|
|
263
|
+
border-radius: 10px;
|
|
264
|
+
}
|
|
265
|
+
.screen {
|
|
266
|
+
width: 13em;
|
|
267
|
+
height: 7.85em;
|
|
268
|
+
font-family: Montserrat;
|
|
269
|
+
border: 2px solid #1d0e01;
|
|
270
|
+
background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px 2500px,
|
|
271
|
+
repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px 2500px;
|
|
272
|
+
background-blend-mode: difference;
|
|
273
|
+
animation: b 0.2s infinite alternate;
|
|
274
|
+
border-radius: 10px;
|
|
275
|
+
z-index: 99;
|
|
276
|
+
display: flex;
|
|
277
|
+
align-items: center;
|
|
278
|
+
justify-content: center;
|
|
279
|
+
font-weight: bold;
|
|
280
|
+
color: #252525;
|
|
281
|
+
letter-spacing: 0.15em;
|
|
282
|
+
text-align: center;
|
|
283
|
+
}
|
|
284
|
+
@keyframes b {
|
|
285
|
+
100% {
|
|
286
|
+
background-position: 50% 0, 60% 50%;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* Another Error Screen to Use
|
|
291
|
+
|
|
292
|
+
.screen {
|
|
293
|
+
width: 13em;
|
|
294
|
+
height: 7.85em;
|
|
295
|
+
position: relative;
|
|
296
|
+
background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
|
|
297
|
+
border-radius: 10px;
|
|
298
|
+
border: 2px solid black;
|
|
299
|
+
z-index: 99;
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
justify-content: center;
|
|
303
|
+
font-weight: bold;
|
|
304
|
+
color: #252525;
|
|
305
|
+
letter-spacing: 0.15em;
|
|
306
|
+
text-align: center;
|
|
307
|
+
overflow: hidden;
|
|
308
|
+
}
|
|
309
|
+
.screen:before, .screen:after {
|
|
310
|
+
content: "";
|
|
311
|
+
position: absolute;
|
|
312
|
+
left: 0;
|
|
313
|
+
z-index: 1;
|
|
314
|
+
width: 100%;
|
|
315
|
+
}
|
|
316
|
+
.screen:before {
|
|
317
|
+
top: 0;
|
|
318
|
+
height: 68.4782608696%;
|
|
319
|
+
background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
|
|
320
|
+
}
|
|
321
|
+
.screen:after {
|
|
322
|
+
bottom: 0;
|
|
323
|
+
height: 21.7391304348%;
|
|
324
|
+
background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
*/
|
|
328
|
+
|
|
329
|
+
.lines {
|
|
330
|
+
display: flex;
|
|
331
|
+
column-gap: 0.1em;
|
|
332
|
+
align-self: flex-end;
|
|
333
|
+
}
|
|
334
|
+
.line1,
|
|
335
|
+
.line3 {
|
|
336
|
+
width: 2px;
|
|
337
|
+
height: 0.5em;
|
|
338
|
+
background-color: black;
|
|
339
|
+
border-radius: 25px 25px 0px 0px;
|
|
340
|
+
margin-top: 0.5em;
|
|
341
|
+
}
|
|
342
|
+
.line2 {
|
|
343
|
+
flex-grow: 1;
|
|
344
|
+
width: 2px;
|
|
345
|
+
height: 1em;
|
|
346
|
+
background-color: black;
|
|
347
|
+
border-radius: 25px 25px 0px 0px;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.buttons_div {
|
|
351
|
+
width: 4.25em;
|
|
352
|
+
align-self: center;
|
|
353
|
+
height: 8em;
|
|
354
|
+
background-color: #e69635;
|
|
355
|
+
border: 2px solid #1d0e01;
|
|
356
|
+
padding: 0.6em;
|
|
357
|
+
border-radius: 10px;
|
|
358
|
+
display: flex;
|
|
359
|
+
align-items: center;
|
|
360
|
+
justify-content: center;
|
|
361
|
+
flex-direction: column;
|
|
362
|
+
row-gap: 0.75em;
|
|
363
|
+
box-shadow: 3px 3px 0px #e69635;
|
|
364
|
+
}
|
|
365
|
+
.b1 {
|
|
366
|
+
width: 1.65em;
|
|
367
|
+
height: 1.65em;
|
|
368
|
+
border-radius: 50%;
|
|
369
|
+
background-color: #7f5934;
|
|
370
|
+
border: 2px solid black;
|
|
371
|
+
box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721, -2px 0px 0px 1px black;
|
|
372
|
+
}
|
|
373
|
+
.b1::before {
|
|
374
|
+
content: '';
|
|
375
|
+
position: absolute;
|
|
376
|
+
margin-top: 1em;
|
|
377
|
+
margin-left: 0.5em;
|
|
378
|
+
transform: rotate(47deg);
|
|
379
|
+
border-radius: 5px;
|
|
380
|
+
width: 0.1em;
|
|
381
|
+
height: 0.4em;
|
|
382
|
+
background-color: #000000;
|
|
383
|
+
}
|
|
384
|
+
.b1::after {
|
|
385
|
+
content: '';
|
|
386
|
+
position: absolute;
|
|
387
|
+
margin-top: 0.9em;
|
|
388
|
+
margin-left: 0.8em;
|
|
389
|
+
transform: rotate(47deg);
|
|
390
|
+
border-radius: 5px;
|
|
391
|
+
width: 0.1em;
|
|
392
|
+
height: 0.55em;
|
|
393
|
+
background-color: #000000;
|
|
394
|
+
}
|
|
395
|
+
.b1 div {
|
|
396
|
+
content: '';
|
|
397
|
+
position: absolute;
|
|
398
|
+
margin-top: -0.1em;
|
|
399
|
+
margin-left: 0.65em;
|
|
400
|
+
transform: rotate(45deg);
|
|
401
|
+
width: 0.15em;
|
|
402
|
+
height: 1.5em;
|
|
403
|
+
background-color: #000000;
|
|
404
|
+
}
|
|
405
|
+
.b2 {
|
|
406
|
+
width: 1.65em;
|
|
407
|
+
height: 1.65em;
|
|
408
|
+
border-radius: 50%;
|
|
409
|
+
background-color: #7f5934;
|
|
410
|
+
border: 2px solid black;
|
|
411
|
+
box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721, -2px 0px 0px 1px black;
|
|
412
|
+
}
|
|
413
|
+
.b2::before {
|
|
414
|
+
content: '';
|
|
415
|
+
position: absolute;
|
|
416
|
+
margin-top: 1.05em;
|
|
417
|
+
margin-left: 0.8em;
|
|
418
|
+
transform: rotate(-45deg);
|
|
419
|
+
border-radius: 5px;
|
|
420
|
+
width: 0.15em;
|
|
421
|
+
height: 0.4em;
|
|
422
|
+
background-color: #000000;
|
|
423
|
+
}
|
|
424
|
+
.b2::after {
|
|
425
|
+
content: '';
|
|
426
|
+
position: absolute;
|
|
427
|
+
margin-top: -0.1em;
|
|
428
|
+
margin-left: 0.65em;
|
|
429
|
+
transform: rotate(-45deg);
|
|
430
|
+
width: 0.15em;
|
|
431
|
+
height: 1.5em;
|
|
432
|
+
background-color: #000000;
|
|
433
|
+
}
|
|
434
|
+
.speakers {
|
|
435
|
+
display: flex;
|
|
436
|
+
flex-direction: column;
|
|
437
|
+
row-gap: 0.5em;
|
|
438
|
+
}
|
|
439
|
+
.speakers .g1 {
|
|
440
|
+
display: flex;
|
|
441
|
+
column-gap: 0.25em;
|
|
442
|
+
}
|
|
443
|
+
.speakers .g1 .g11,
|
|
444
|
+
.g12,
|
|
445
|
+
.g13 {
|
|
446
|
+
width: 0.65em;
|
|
447
|
+
height: 0.65em;
|
|
448
|
+
border-radius: 50%;
|
|
449
|
+
background-color: #7f5934;
|
|
450
|
+
border: 2px solid black;
|
|
451
|
+
box-shadow: inset 1.25px 1.25px 1px #b49577;
|
|
452
|
+
}
|
|
453
|
+
.speakers .g {
|
|
454
|
+
width: auto;
|
|
455
|
+
height: 2px;
|
|
456
|
+
background-color: #171717;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.bottom {
|
|
460
|
+
width: 100%;
|
|
461
|
+
height: auto;
|
|
462
|
+
display: flex;
|
|
463
|
+
align-items: center;
|
|
464
|
+
justify-content: center;
|
|
465
|
+
column-gap: 8.7em;
|
|
466
|
+
}
|
|
467
|
+
.base1 {
|
|
468
|
+
height: 1em;
|
|
469
|
+
width: 2em;
|
|
470
|
+
border: 2px solid #171717;
|
|
471
|
+
background-color: #4d4d4d;
|
|
472
|
+
margin-top: -0.15em;
|
|
473
|
+
z-index: -1;
|
|
474
|
+
}
|
|
475
|
+
.base2 {
|
|
476
|
+
height: 1em;
|
|
477
|
+
width: 2em;
|
|
478
|
+
border: 2px solid #171717;
|
|
479
|
+
background-color: #4d4d4d;
|
|
480
|
+
margin-top: -0.15em;
|
|
481
|
+
z-index: -1;
|
|
482
|
+
}
|
|
483
|
+
.base3 {
|
|
484
|
+
position: absolute;
|
|
485
|
+
height: 0.15em;
|
|
486
|
+
width: 17.5em;
|
|
487
|
+
background-color: #171717;
|
|
488
|
+
margin-top: 0.8em;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.text_404 {
|
|
492
|
+
position: absolute;
|
|
493
|
+
display: flex;
|
|
494
|
+
flex-direction: row;
|
|
495
|
+
column-gap: 6em;
|
|
496
|
+
z-index: -5;
|
|
497
|
+
margin-bottom: 2em;
|
|
498
|
+
align-items: center;
|
|
499
|
+
justify-content: center;
|
|
500
|
+
opacity: 0.5;
|
|
501
|
+
font-family: Montserrat;
|
|
502
|
+
}
|
|
503
|
+
.text_4041 {
|
|
504
|
+
transform: scaleY(24.5) scaleX(9);
|
|
505
|
+
}
|
|
506
|
+
.text_4042 {
|
|
507
|
+
transform: scaleY(24.5) scaleX(9);
|
|
508
|
+
}
|
|
509
|
+
.text_4043 {
|
|
510
|
+
transform: scaleY(24.5) scaleX(9);
|
|
511
|
+
}
|
|
512
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Link } from 'react-router';
|
|
3
|
+
import { useRoutes } from 'react-router';
|
|
4
|
+
import { routes } from '@/route';
|
|
5
|
+
import TimelineComponent from '@/components/time-component';
|
|
6
|
+
import Modal from '@/components/modal';
|
|
7
|
+
|
|
8
|
+
const Layout: React.FC = () => {
|
|
9
|
+
const element = useRoutes(routes);
|
|
10
|
+
const [open, setOpen] = React.useState(false);
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<div className="w-full h-full bg-[#001620] flex flex-col overflow-hidden text-[#63ECFF]">
|
|
14
|
+
<header
|
|
15
|
+
className="flex justify-between items-center bg-gray-100 h-[110px] bg-contain px-16 py-10"
|
|
16
|
+
style={{ backgroundImage: 'url("/images/header-bg.svg")' }}
|
|
17
|
+
>
|
|
18
|
+
<TimelineComponent></TimelineComponent>
|
|
19
|
+
<div className="flex items-center gap-4 font-bold text-[#63ECFF] text-[40px] mt-[-16px]">
|
|
20
|
+
{/* <Link className="text-white-700" to={'/home'}>
|
|
21
|
+
Home
|
|
22
|
+
</Link>
|
|
23
|
+
<Link className="text-white-700" to={'/about'}>
|
|
24
|
+
About
|
|
25
|
+
</Link> */}
|
|
26
|
+
AI焊接实践教学平台
|
|
27
|
+
</div>
|
|
28
|
+
<div className="flex-1 text-[16px] font-[400] flex items-center h-full mt-[-1%]">
|
|
29
|
+
<div className="ml-[73%] text-nowrap cursor-pointer" onClick={() => setOpen(true)}>
|
|
30
|
+
您好，Admin
|
|
31
|
+
</div>
|
|
32
|
+
<div className="ml-[12%] text-nowrap cursor-pointer">退出</div>
|
|
33
|
+
</div>
|
|
34
|
+
</header>
|
|
35
|
+
<main className="flex-1 px-2 pb-6">{element}</main>
|
|
36
|
+
<Modal
|
|
37
|
+
title={'提示'}
|
|
38
|
+
open={open}
|
|
39
|
+
onClose={() => {
|
|
40
|
+
setOpen(false);
|
|
41
|
+
}}
|
|
42
|
+
onConfirm={() => setOpen(false)}
|
|
43
|
+
>
|
|
44
|
+
<div className="w-full h-full flex justify-center items-center text-white font-bold text-[50px]">
|
|
45
|
+
开发中...
|
|
46
|
+
</div>
|
|
47
|
+
</Modal>
|
|
48
|
+
</div>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
Layout.propTypes = {};
|
|
53
|
+
|
|
54
|
+
export default Layout;
|
package/src/main.tsx
CHANGED
|
@@ -1,10 +1,115 @@
|
|
|
1
|
-
import { StrictMode } from 'react'
|
|
2
|
-
import { createRoot } from 'react-dom/client'
|
|
3
|
-
import '
|
|
4
|
-
import
|
|
1
|
+
import { StrictMode } from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
import { HashRouter, Routes, Route } from 'react-router';
|
|
4
|
+
import './index.css';
|
|
5
|
+
import App from './App.tsx';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
interface Props {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface MyComponentState {
|
|
12
|
+
error: any;
|
|
13
|
+
errorInfo: any;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default class ErrorBoundary extends React.Component<Props, MyComponentState> {
|
|
17
|
+
constructor(props: { children: React.ReactNode }) {
|
|
18
|
+
super(props);
|
|
19
|
+
this.state = { error: null, errorInfo: null };
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
componentDidCatch(error: any, errorInfo: any) {
|
|
23
|
+
// use lifecycle to catch errors in any components below and re-render fallback UI
|
|
24
|
+
this.setState({
|
|
25
|
+
error: error,
|
|
26
|
+
errorInfo: errorInfo,
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
render() {
|
|
31
|
+
if (this.state.errorInfo) {
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<div className="error-wrapper">
|
|
35
|
+
<div className="main">
|
|
36
|
+
<div className="antenna">
|
|
37
|
+
<div className="antenna_shadow"></div>
|
|
38
|
+
<div className="a1"></div>
|
|
39
|
+
<div className="a1d"></div>
|
|
40
|
+
<div className="a2"></div>
|
|
41
|
+
<div className="a2d"></div>
|
|
42
|
+
<div className="a_base"></div>
|
|
43
|
+
</div>
|
|
44
|
+
<div className="tv">
|
|
45
|
+
<div className="cruve">
|
|
46
|
+
<svg
|
|
47
|
+
xmlSpace="preserve"
|
|
48
|
+
viewBox="0 0 189.929 189.929"
|
|
49
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
50
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
+
version="1.1"
|
|
52
|
+
className="curve_svg"
|
|
53
|
+
>
|
|
54
|
+
<path
|
|
55
|
+
d="M70.343,70.343c-30.554,30.553-44.806,72.7-39.102,115.635l-29.738,3.951C-5.442,137.659,11.917,86.34,49.129,49.13
|
|
56
|
+
C86.34,11.918,137.664-5.445,189.928,1.502l-3.95,29.738C143.041,25.54,100.895,39.789,70.343,70.343z"
|
|
57
|
+
></path>
|
|
58
|
+
</svg>
|
|
59
|
+
</div>
|
|
60
|
+
<div className="display_div">
|
|
61
|
+
<div className="screen_out">
|
|
62
|
+
<div className="screen_out1">
|
|
63
|
+
<div className="screen">
|
|
64
|
+
<span className="notfound_text">Something went wrong.</span>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div className="lines">
|
|
70
|
+
<div className="line1"></div>
|
|
71
|
+
<div className="line2"></div>
|
|
72
|
+
<div className="line3"></div>
|
|
73
|
+
</div>
|
|
74
|
+
<div className="buttons_div">
|
|
75
|
+
<div className="b1">
|
|
76
|
+
<div></div>
|
|
77
|
+
</div>
|
|
78
|
+
<div className="b2"></div>
|
|
79
|
+
<div className="speakers">
|
|
80
|
+
<div className="g1">
|
|
81
|
+
<div className="g11"></div>
|
|
82
|
+
<div className="g12"></div>
|
|
83
|
+
<div className="g13"></div>
|
|
84
|
+
</div>
|
|
85
|
+
<div className="g"></div>
|
|
86
|
+
<div className="g"></div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<div className="bottom">
|
|
91
|
+
<div className="base1"></div>
|
|
92
|
+
<div className="base2"></div>
|
|
93
|
+
<div className="base3"></div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<h3 style={{ marginTop: '3rem', textAlign: 'center' }}>
|
|
98
|
+
Excuse me. Please wait for our team to fix it.
|
|
99
|
+
</h3>
|
|
100
|
+
</>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
return this.props.children;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
5
106
|
|
|
6
107
|
createRoot(document.getElementById('root')!).render(
|
|
7
108
|
<StrictMode>
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
109
|
+
<ErrorBoundary>
|
|
110
|
+
<HashRouter>
|
|
111
|
+
<App />
|
|
112
|
+
</HashRouter>
|
|
113
|
+
</ErrorBoundary>
|
|
114
|
+
</StrictMode>
|
|
115
|
+
);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
const Page404 = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div className="w-full h-full flex justify-center items-center text-xl">Not Found 404</div>
|
|
7
|
+
);
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
Page404.propTypes = {};
|
|
11
|
+
|
|
12
|
+
export default Page404;
|
package/src/route.tsx
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Navigate } from 'react-router';
|
|
2
|
+
import SuspenseLazy from '@/components/suspense-lazy';
|
|
3
|
+
import Page404 from './pages/page404';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
// import Home from './pages/home';
|
|
6
|
+
// import About from './pages/about';
|
|
7
|
+
|
|
8
|
+
const Home = SuspenseLazy(() => import('@/pages/home'));
|
|
9
|
+
const About = SuspenseLazy(() => import('@/pages/about'));
|
|
10
|
+
|
|
11
|
+
export const routes = [
|
|
12
|
+
{
|
|
13
|
+
path: '/',
|
|
14
|
+
element: <Navigate to="home" />, // 重定向
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
path: '/home',
|
|
18
|
+
element: Home,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
path: '/about',
|
|
22
|
+
element: About,
|
|
23
|
+
},
|
|
24
|
+
// 未匹配到页面
|
|
25
|
+
{
|
|
26
|
+
path: '*',
|
|
27
|
+
element: <Page404 />,
|
|
28
|
+
},
|
|
29
|
+
];
|
package/tsconfig.node.json
CHANGED