cfel-base-components 2.5.45 → 2.5.47
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/demo/src/index.jsx
CHANGED
|
@@ -13,11 +13,6 @@ import ProTable from "../../src/components/base-component/ProTable";
|
|
|
13
13
|
import PageContainer from "../../src/components/base-component/PageContainer";
|
|
14
14
|
|
|
15
15
|
const menuList = [
|
|
16
|
-
{
|
|
17
|
-
label: "目录0",
|
|
18
|
-
key: "a",
|
|
19
|
-
icon: <QqOutlined />,
|
|
20
|
-
},
|
|
21
16
|
{
|
|
22
17
|
label: "目录1",
|
|
23
18
|
key: "a",
|
|
@@ -188,6 +183,7 @@ const App = () => {
|
|
|
188
183
|
appName="控制台"
|
|
189
184
|
productList={false}
|
|
190
185
|
menuList={menuList}
|
|
186
|
+
//type="console"
|
|
191
187
|
customAction={()=>{
|
|
192
188
|
history.push("/web/user-info")
|
|
193
189
|
}}
|
package/package.json
CHANGED
|
@@ -0,0 +1,710 @@
|
|
|
1
|
+
$menuPrefixCls: rc-menu;
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
ul {
|
|
6
|
+
list-style: none;
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.layout-menu {
|
|
12
|
+
height: calc(100% - 120px);
|
|
13
|
+
overflow-y: scroll;
|
|
14
|
+
|
|
15
|
+
.menu {
|
|
16
|
+
|
|
17
|
+
padding: 0;
|
|
18
|
+
margin: 0;
|
|
19
|
+
list-style: none;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
|
|
22
|
+
.rc-menu-submenu-title {
|
|
23
|
+
position: relative;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.rc-menu-submenu {
|
|
27
|
+
position: relative;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.menu-item-content {
|
|
31
|
+
font-weight: 400;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
line-height: 50px;
|
|
34
|
+
text-align: left;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sub-menu-item-label {
|
|
38
|
+
padding-left: 11px;
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
.menu-item-icon {
|
|
42
|
+
display: inline-block;
|
|
43
|
+
height: 22px;
|
|
44
|
+
width: 22px;
|
|
45
|
+
color: rgba(255, 255, 255, 0.85);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.menu-item-label {
|
|
49
|
+
display: inline-block;
|
|
50
|
+
padding-left: 12px;
|
|
51
|
+
color: #ffffffd9;
|
|
52
|
+
border: 1px solid transparent;
|
|
53
|
+
font-weight: 400;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.submenu-selected {
|
|
57
|
+
color: #fff !important;
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sub-li {
|
|
62
|
+
position: relative;
|
|
63
|
+
z-index: 9;
|
|
64
|
+
line-height: 52px;
|
|
65
|
+
|
|
66
|
+
&::before {
|
|
67
|
+
content: '';
|
|
68
|
+
position: absolute;
|
|
69
|
+
left: 31px;
|
|
70
|
+
top: 26px;
|
|
71
|
+
width: 5px;
|
|
72
|
+
height: 5px;
|
|
73
|
+
background: #8f9cec;
|
|
74
|
+
border-radius: 50%;
|
|
75
|
+
z-index: 1;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&::after {
|
|
79
|
+
content: '';
|
|
80
|
+
position: absolute;
|
|
81
|
+
left: 32.8px;
|
|
82
|
+
top: 0 !important;
|
|
83
|
+
width: 1px;
|
|
84
|
+
height: 100%;
|
|
85
|
+
background: rgba(255, 255, 255, 0.25);
|
|
86
|
+
z-index: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&:only-child::after {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&:last-child::after {
|
|
94
|
+
height: 50%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:first-child::after {
|
|
98
|
+
top: 26px !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.rc-menu-submenu-selected {
|
|
102
|
+
&::before {
|
|
103
|
+
background: rgba(255, 255, 255);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.rc-menu-item-selected {
|
|
108
|
+
&::before {
|
|
109
|
+
background: rgba(255, 255, 255);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:not(.rc-menu-submenu) {
|
|
114
|
+
height: 52px;
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
box-shadow: 0px 0px 30px 0px transparent;
|
|
118
|
+
|
|
119
|
+
&.rc-menu-item-selected {
|
|
120
|
+
.menu-item-content{
|
|
121
|
+
width: 100%;
|
|
122
|
+
padding-right: 24px;
|
|
123
|
+
}
|
|
124
|
+
.menu-item-label {
|
|
125
|
+
color: #fff;
|
|
126
|
+
font-weight: 500;
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
padding-left: 12px;
|
|
130
|
+
width: 100%;
|
|
131
|
+
padding-right: 24px;
|
|
132
|
+
height: 40px;
|
|
133
|
+
background: rgba(255, 255, 255, 0.05);
|
|
134
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
135
|
+
border-radius: 10px;
|
|
136
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
137
|
+
backdrop-filter: blur(10px);
|
|
138
|
+
transition: all 0.3s ease-in-out;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.grand-li {
|
|
145
|
+
background: #4370DA;
|
|
146
|
+
position: relative;
|
|
147
|
+
z-index: 9;
|
|
148
|
+
line-height: 52px;
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
|
|
152
|
+
&::before {
|
|
153
|
+
content: '';
|
|
154
|
+
position: absolute;
|
|
155
|
+
left: 49px;
|
|
156
|
+
top: 48%;
|
|
157
|
+
width: 5px;
|
|
158
|
+
height: 5px;
|
|
159
|
+
background: #8f9cec;
|
|
160
|
+
border-radius: 50%;
|
|
161
|
+
transform: translateY(-50%);
|
|
162
|
+
z-index: 2;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&::after {
|
|
166
|
+
content: '';
|
|
167
|
+
position: absolute;
|
|
168
|
+
left: 51px;
|
|
169
|
+
top: 0;
|
|
170
|
+
width: 1px;
|
|
171
|
+
height: 100%;
|
|
172
|
+
background: rgba(255, 255, 255, 0.25);
|
|
173
|
+
z-index: 1;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&:only-child::after {
|
|
177
|
+
display: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&:last-child::after {
|
|
181
|
+
height: 50%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:first-child::after {
|
|
185
|
+
top: 26px !important;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&.rc-menu-item-selected {
|
|
189
|
+
.menu-item-content{
|
|
190
|
+
width: 100%;
|
|
191
|
+
padding-right: 24px;
|
|
192
|
+
height: 52px;
|
|
193
|
+
display: flex;
|
|
194
|
+
align-items: center;
|
|
195
|
+
}
|
|
196
|
+
.menu-item-label {
|
|
197
|
+
display: flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
padding-left: 12px;
|
|
200
|
+
width: 100%;
|
|
201
|
+
height: 40px;
|
|
202
|
+
background: rgba(255, 255, 255, 0.05);
|
|
203
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
204
|
+
border-radius: 10px;
|
|
205
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
206
|
+
backdrop-filter: blur(10px);
|
|
207
|
+
transition: all 0.3s ease-in-out;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&::before {
|
|
211
|
+
background: rgba(255, 255, 255);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.menu-collapsed {
|
|
218
|
+
display: flex;
|
|
219
|
+
flex-direction: column;
|
|
220
|
+
align-items: center;
|
|
221
|
+
list-style: none;
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
|
|
224
|
+
.menu-item-content {
|
|
225
|
+
font-weight: 400;
|
|
226
|
+
font-size: 14px;
|
|
227
|
+
margin-top: 30px;
|
|
228
|
+
line-height: 24px;
|
|
229
|
+
text-align: left;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.cpc-icon {
|
|
234
|
+
display: inline-block;
|
|
235
|
+
height: 22px;
|
|
236
|
+
width: 22px;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
$header-height: 62px;
|
|
241
|
+
$base-color: #c6538c;
|
|
242
|
+
|
|
243
|
+
body {
|
|
244
|
+
overflow: hidden;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.layout-warps {
|
|
248
|
+
display: flex;
|
|
249
|
+
padding: 12px;
|
|
250
|
+
background-color: #f3f6fd;
|
|
251
|
+
|
|
252
|
+
::-webkit-scrollbar {
|
|
253
|
+
display: none;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.trigger {
|
|
257
|
+
margin-right: 16px;
|
|
258
|
+
width: 30px;
|
|
259
|
+
height: 30px;
|
|
260
|
+
background: rgba(255,255,255,0.05);
|
|
261
|
+
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
|
|
262
|
+
border-radius: 4px;
|
|
263
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
264
|
+
backdrop-filter: blur(10px);
|
|
265
|
+
display: flex;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
align-items: center;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.close-trigger {
|
|
271
|
+
margin-top: 24px;
|
|
272
|
+
width: 30px;
|
|
273
|
+
height: 30px;
|
|
274
|
+
background: #f0f4fe;
|
|
275
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
276
|
+
border-radius: 4px;
|
|
277
|
+
border: 1px solid rgba(255, 255, 255, 0.55);
|
|
278
|
+
backdrop-filter: blur(10px);
|
|
279
|
+
display: flex;
|
|
280
|
+
justify-content: center;
|
|
281
|
+
align-items: center;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.search {
|
|
285
|
+
height: 40px;
|
|
286
|
+
color: #fff;
|
|
287
|
+
background: #7E64F5;
|
|
288
|
+
box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px #FFFFFF22;
|
|
289
|
+
border-radius: 10px;
|
|
290
|
+
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png') no-repeat;
|
|
291
|
+
background-size: 50%;
|
|
292
|
+
background-position-x: right;
|
|
293
|
+
position: relative;
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
.search-input {
|
|
297
|
+
width: 100%;
|
|
298
|
+
height: 100%;
|
|
299
|
+
background: transparent;
|
|
300
|
+
border: none;
|
|
301
|
+
outline: none;
|
|
302
|
+
padding-left: 45px;
|
|
303
|
+
line-height: 32px;
|
|
304
|
+
font-size: 14px;
|
|
305
|
+
color: #ffffff;
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
&::placeholder {
|
|
309
|
+
color: rgba(255, 255, 255, 0.45);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
// 为了兼容不同浏览器
|
|
313
|
+
&::-webkit-input-placeholder {
|
|
314
|
+
color: rgba(255, 255, 255, 0.45);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
&::-moz-placeholder {
|
|
318
|
+
color: rgba(255, 255, 255, 0.45);
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.search-icon {
|
|
323
|
+
position: absolute;
|
|
324
|
+
left: 12px;
|
|
325
|
+
top: 11px;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.search-command {
|
|
329
|
+
position: absolute;
|
|
330
|
+
right: 4px;
|
|
331
|
+
top: 50%;
|
|
332
|
+
transform: translateY(-50%);
|
|
333
|
+
width: 40px;
|
|
334
|
+
height: 30px;
|
|
335
|
+
background: #826deb;
|
|
336
|
+
border-radius: 8px;
|
|
337
|
+
border: 1px solid #8e75f2;
|
|
338
|
+
backdrop-filter: blur(10px);
|
|
339
|
+
display: flex;
|
|
340
|
+
justify-content: center;
|
|
341
|
+
align-items: center;
|
|
342
|
+
font-size: 14px;
|
|
343
|
+
color: rgba(255, 255, 255, 0.65);
|
|
344
|
+
line-height: 17px;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.search-mobile {
|
|
349
|
+
width: 40px;
|
|
350
|
+
height: 40px;
|
|
351
|
+
background: #f8f8fb;
|
|
352
|
+
box-shadow:
|
|
353
|
+
inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
|
|
354
|
+
inset 0px -2px 0px 0px #ffffff;
|
|
355
|
+
border-radius: 10px;
|
|
356
|
+
backdrop-filter: blur(10px);
|
|
357
|
+
padding-top: 11px;
|
|
358
|
+
cursor: pointer;
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.layout-side-mask{
|
|
365
|
+
background: linear-gradient(227deg, #805df5 0%, #757ef6 38%, #3d76ec 100%) !important;
|
|
366
|
+
position: absolute;
|
|
367
|
+
top: 0;
|
|
368
|
+
left: 0;
|
|
369
|
+
width: 100%;
|
|
370
|
+
height: 100%;
|
|
371
|
+
border-radius: 16px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
.layout-side {
|
|
376
|
+
background: transparent !important;
|
|
377
|
+
height: calc(100vh - 24px) !important;
|
|
378
|
+
user-select: none;
|
|
379
|
+
border: 2px solid white;
|
|
380
|
+
border-radius: 16px;
|
|
381
|
+
padding-top: 24px;
|
|
382
|
+
|
|
383
|
+
.header-logo {
|
|
384
|
+
padding-left: 16px;
|
|
385
|
+
display: flex;
|
|
386
|
+
justify-content: space-between;
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
height: 30px;
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
.logo-sub{
|
|
392
|
+
width: 31px;
|
|
393
|
+
height: 30px;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
.logo-base {
|
|
398
|
+
height: 30px;
|
|
399
|
+
width: 105px;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.layout-header {
|
|
405
|
+
z-index: 1;
|
|
406
|
+
height: $header-height;
|
|
407
|
+
background: linear-gradient( 223deg, #FAF8FF 0%, #EEECFE 29%, #FFFFFF 100%);
|
|
408
|
+
box-shadow: inset 0px -1px 0px 0px #edeefd;
|
|
409
|
+
border-radius: 16px;
|
|
410
|
+
border: 1px solid #ffffff;
|
|
411
|
+
position: relative;
|
|
412
|
+
display: flex;
|
|
413
|
+
justify-content: flex-start;
|
|
414
|
+
align-items: center;
|
|
415
|
+
|
|
416
|
+
.app-name {
|
|
417
|
+
margin-left: 24px;
|
|
418
|
+
font-weight: 500;
|
|
419
|
+
color: rgba(0, 0, 0, 0.65);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.layout-header-fill {
|
|
423
|
+
flex: 1;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.layout-header-actions {
|
|
427
|
+
display: flex;
|
|
428
|
+
justify-content: flex-start;
|
|
429
|
+
align-items: center;
|
|
430
|
+
height: 100%;
|
|
431
|
+
max-width: 400px;
|
|
432
|
+
z-index: 2;
|
|
433
|
+
|
|
434
|
+
.actions-item {
|
|
435
|
+
height: 36px;
|
|
436
|
+
border-radius: 6px;
|
|
437
|
+
transition: all 0.3s;
|
|
438
|
+
cursor: pointer;
|
|
439
|
+
margin: 0 4px;
|
|
440
|
+
padding: 0 4px;
|
|
441
|
+
|
|
442
|
+
display: flex;
|
|
443
|
+
justify-content: center;
|
|
444
|
+
align-items: center;
|
|
445
|
+
|
|
446
|
+
&:hover {
|
|
447
|
+
background: rgba(0, 0, 0, 0.06);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.layout-header-user {
|
|
453
|
+
height: 48px;
|
|
454
|
+
display: flex;
|
|
455
|
+
justify-content: flex-start;
|
|
456
|
+
align-items: center;
|
|
457
|
+
z-index: 2;
|
|
458
|
+
transition: all 0.3s;
|
|
459
|
+
padding: 4px 12px;
|
|
460
|
+
margin: 0 12px;
|
|
461
|
+
border-radius: 6px;
|
|
462
|
+
cursor: pointer;
|
|
463
|
+
|
|
464
|
+
&:hover {
|
|
465
|
+
background: rgba(0, 0, 0, 0.06);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.avatar {
|
|
469
|
+
width: 40px;
|
|
470
|
+
height: 40px;
|
|
471
|
+
border-radius: 50%;
|
|
472
|
+
margin-right: 12px;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.layout-main {
|
|
478
|
+
flex: 1;
|
|
479
|
+
height: 100%;
|
|
480
|
+
padding-left: 12px;
|
|
481
|
+
overflow: auto;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.layout-content {
|
|
485
|
+
width: 100%;
|
|
486
|
+
height: calc(100vh - #{$header-height} - 12px - 24px);
|
|
487
|
+
overflow: auto;
|
|
488
|
+
margin-top: 12px;
|
|
489
|
+
border-radius: 16px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.rc-menu-collapse {
|
|
493
|
+
overflow: hidden;
|
|
494
|
+
transition: height 0.3s ease-out;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.rc-menu-hidden {
|
|
498
|
+
height: 0;
|
|
499
|
+
overflow: hidden;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.lists {
|
|
503
|
+
position: absolute;
|
|
504
|
+
z-index: 1000;
|
|
505
|
+
width: 88%;
|
|
506
|
+
background: linear-gradient(
|
|
507
|
+
227deg,
|
|
508
|
+
rgba(128, 93, 245, 0.98) 0%,
|
|
509
|
+
rgba(117, 126, 246, 0.95) 100%
|
|
510
|
+
);
|
|
511
|
+
color: #fff;
|
|
512
|
+
border-radius: 16px;
|
|
513
|
+
box-shadow:
|
|
514
|
+
0 8px 20px rgba(0, 0, 0, 0.1),
|
|
515
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
516
|
+
backdrop-filter: blur(10px);
|
|
517
|
+
padding: 16px;
|
|
518
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
519
|
+
animation: dropDown 0.2s ease-out;
|
|
520
|
+
|
|
521
|
+
.ant-list-header {
|
|
522
|
+
padding: 0 0 12px;
|
|
523
|
+
font-weight: 500;
|
|
524
|
+
font-size: 14px;
|
|
525
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
526
|
+
display: flex;
|
|
527
|
+
align-items: center;
|
|
528
|
+
justify-content: space-between;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.ant-list-item {
|
|
532
|
+
color: #fff;
|
|
533
|
+
cursor: pointer;
|
|
534
|
+
padding: 10px 12px;
|
|
535
|
+
margin: 4px 0;
|
|
536
|
+
border-radius: 8px;
|
|
537
|
+
transition: all 0.2s ease;
|
|
538
|
+
display: flex;
|
|
539
|
+
align-items: center;
|
|
540
|
+
gap: 12px;
|
|
541
|
+
font-size: 14px;
|
|
542
|
+
|
|
543
|
+
&:hover {
|
|
544
|
+
background: rgba(255, 255, 255, 0.08);
|
|
545
|
+
transform: translateX(2px);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.search-item-icon {
|
|
549
|
+
color: rgba(255, 255, 255, 0.9);
|
|
550
|
+
font-size: 16px;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.search-item-content {
|
|
554
|
+
flex: 1;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.search-item-title {
|
|
558
|
+
font-size: 14px;
|
|
559
|
+
color: rgba(255, 255, 255, 0.95);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.search-item-description {
|
|
563
|
+
font-size: 12px;
|
|
564
|
+
color: rgba(255, 255, 255, 0.6);
|
|
565
|
+
margin-top: 2px;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.search-item-shortcut {
|
|
569
|
+
font-size: 12px;
|
|
570
|
+
color: rgba(255, 255, 255, 0.5);
|
|
571
|
+
background: rgba(255, 255, 255, 0.1);
|
|
572
|
+
padding: 2px 6px;
|
|
573
|
+
border-radius: 4px;
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
@keyframes dropDown {
|
|
579
|
+
from {
|
|
580
|
+
opacity: 0;
|
|
581
|
+
transform: translateY(-4px);
|
|
582
|
+
}
|
|
583
|
+
to {
|
|
584
|
+
opacity: 1;
|
|
585
|
+
transform: translateY(0);
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
|
|
590
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
591
|
+
display: inline-block;
|
|
592
|
+
position: absolute;
|
|
593
|
+
top: 52%;
|
|
594
|
+
right: 16px;
|
|
595
|
+
width: 10px;
|
|
596
|
+
height: 10px;
|
|
597
|
+
transform: translateY(0);
|
|
598
|
+
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
599
|
+
|
|
600
|
+
// 当菜单收起时隐藏箭头
|
|
601
|
+
.ant-layout-sider-collapsed & {
|
|
602
|
+
display: none;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
&::before,
|
|
606
|
+
&::after {
|
|
607
|
+
position: absolute;
|
|
608
|
+
width: 5.5px;
|
|
609
|
+
height: 1.5px;
|
|
610
|
+
background-color: white;
|
|
611
|
+
border-radius: 2px;
|
|
612
|
+
transition:
|
|
613
|
+
background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
614
|
+
transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
615
|
+
content: '';
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
&::before {
|
|
619
|
+
transform: rotate(-45deg) translateX(2.5px);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
&::after {
|
|
623
|
+
transform: rotate(45deg) translateX(-2.5px);
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// RTL support
|
|
627
|
+
&.#{$menuPrefixCls}-rtl,
|
|
628
|
+
.#{$menuPrefixCls}-submenu-rtl & {
|
|
629
|
+
right: auto;
|
|
630
|
+
left: 16px;
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
|
|
635
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
636
|
+
transform: translateY(-3px);
|
|
637
|
+
&::before {
|
|
638
|
+
transform: rotate(45deg) translateX(2.5px);
|
|
639
|
+
}
|
|
640
|
+
&::after {
|
|
641
|
+
transform: rotate(-45deg) translateX(-2.5px);
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.#{$menuPrefixCls}-submenu-selected {
|
|
647
|
+
> .#{$menuPrefixCls}-submenu-title {
|
|
648
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
649
|
+
&::before,
|
|
650
|
+
&::after {
|
|
651
|
+
background-color: rgba(255, 255, 255);
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.#{$menuPrefixCls} {
|
|
658
|
+
&-zoom-enter,
|
|
659
|
+
&-zoom-appear {
|
|
660
|
+
opacity: 0;
|
|
661
|
+
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
662
|
+
animation-play-state: paused;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
&-zoom-leave {
|
|
666
|
+
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
667
|
+
animation-play-state: paused;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
&-zoom-enter#{&}-zoom-enter-active,
|
|
671
|
+
&-zoom-appear#{&}-zoom-appear-active {
|
|
672
|
+
animation-name: rcMenuOpenZoomIn;
|
|
673
|
+
animation-play-state: running;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
&-zoom-leave#{&}-zoom-leave-active {
|
|
677
|
+
animation-name: rcMenuOpenZoomOut;
|
|
678
|
+
animation-play-state: running;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
&-zoom-enter,
|
|
682
|
+
&-zoom-appear,
|
|
683
|
+
&-zoom-leave {
|
|
684
|
+
.#{$menuPrefixCls}-submenu-rtl & {
|
|
685
|
+
transform-origin: top right !important;
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
@keyframes rcMenuOpenZoomIn {
|
|
690
|
+
0% {
|
|
691
|
+
opacity: 0;
|
|
692
|
+
transform: scale(0, 0);
|
|
693
|
+
}
|
|
694
|
+
100% {
|
|
695
|
+
opacity: 1;
|
|
696
|
+
transform: scale(1, 1);
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
@keyframes rcMenuOpenZoomOut {
|
|
701
|
+
0% {
|
|
702
|
+
transform: scale(1, 1);
|
|
703
|
+
}
|
|
704
|
+
100% {
|
|
705
|
+
opacity: 0;
|
|
706
|
+
transform: scale(0, 0);
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
|
|
@@ -9,6 +9,7 @@ ul {
|
|
|
9
9
|
.layout-menu {
|
|
10
10
|
height: calc(100% - 120px);
|
|
11
11
|
overflow-y: scroll;
|
|
12
|
+
|
|
12
13
|
.menu{
|
|
13
14
|
padding: 0;
|
|
14
15
|
margin: 0;
|
|
@@ -26,7 +27,7 @@ ul {
|
|
|
26
27
|
.menu-item-content {
|
|
27
28
|
font-weight: 400;
|
|
28
29
|
font-size: 14px;
|
|
29
|
-
line-height:
|
|
30
|
+
line-height: 50px;
|
|
30
31
|
text-align: left;
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -49,13 +50,12 @@ ul {
|
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
.submenu-selected {
|
|
52
|
-
color: #185DFF;
|
|
53
|
+
color: #185DFF !important;
|
|
53
54
|
font-weight: 500;
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
|
|
57
58
|
.sub-li {
|
|
58
|
-
background: rgba(255, 255, 255, 0.15);
|
|
59
59
|
position: relative;
|
|
60
60
|
z-index: 9;
|
|
61
61
|
|
|
@@ -113,11 +113,15 @@ ul {
|
|
|
113
113
|
box-shadow: 0px 0px 30px 0px transparent;
|
|
114
114
|
|
|
115
115
|
&.rc-menu-item-selected {
|
|
116
|
+
.menu-item-content{
|
|
117
|
+
width: 100%;
|
|
118
|
+
padding-right: 24px;
|
|
119
|
+
}
|
|
116
120
|
.menu-item-label {
|
|
117
121
|
display: flex;
|
|
118
122
|
align-items: center;
|
|
119
123
|
padding-left: 12px;
|
|
120
|
-
width:
|
|
124
|
+
width: 100%;
|
|
121
125
|
height: 40px;
|
|
122
126
|
background: #C5D6FF;
|
|
123
127
|
border-radius: 10px;
|
|
@@ -129,10 +133,9 @@ ul {
|
|
|
129
133
|
}
|
|
130
134
|
|
|
131
135
|
.grand-li {
|
|
132
|
-
background: #
|
|
136
|
+
background: #CEE1F8;
|
|
133
137
|
position: relative;
|
|
134
138
|
z-index: 9;
|
|
135
|
-
height: 52px;
|
|
136
139
|
display: flex;
|
|
137
140
|
align-items: center;
|
|
138
141
|
|
|
@@ -140,7 +143,7 @@ ul {
|
|
|
140
143
|
&::before {
|
|
141
144
|
content: '';
|
|
142
145
|
position: absolute;
|
|
143
|
-
left:
|
|
146
|
+
left: 49px;
|
|
144
147
|
top: 50%;
|
|
145
148
|
width: 5px;
|
|
146
149
|
height: 5px;
|
|
@@ -153,7 +156,7 @@ ul {
|
|
|
153
156
|
&::after {
|
|
154
157
|
content: '';
|
|
155
158
|
position: absolute;
|
|
156
|
-
left:
|
|
159
|
+
left: 51px;
|
|
157
160
|
top: 0;
|
|
158
161
|
width: 1px;
|
|
159
162
|
height: 100%;
|
|
@@ -180,11 +183,18 @@ ul {
|
|
|
180
183
|
}
|
|
181
184
|
|
|
182
185
|
&.rc-menu-item-selected {
|
|
186
|
+
.menu-item-content{
|
|
187
|
+
width: 100%;
|
|
188
|
+
padding-right: 24px;
|
|
189
|
+
height: 52px;
|
|
190
|
+
display: flex;
|
|
191
|
+
align-items: center;
|
|
192
|
+
}
|
|
183
193
|
.menu-item-label {
|
|
184
194
|
display: flex;
|
|
185
195
|
align-items: center;
|
|
186
196
|
padding-left: 12px;
|
|
187
|
-
width:
|
|
197
|
+
width: 100%;
|
|
188
198
|
height: 40px;
|
|
189
199
|
background: #C5D6FF;
|
|
190
200
|
border-radius: 10px;
|
|
@@ -225,7 +235,6 @@ ul {
|
|
|
225
235
|
}
|
|
226
236
|
|
|
227
237
|
|
|
228
|
-
$header-height: 62px;
|
|
229
238
|
$header-height: 62px;
|
|
230
239
|
$base-color: #c6538c;
|
|
231
240
|
|
|
@@ -270,14 +279,15 @@ body {
|
|
|
270
279
|
align-items: center;
|
|
271
280
|
}
|
|
272
281
|
|
|
282
|
+
|
|
273
283
|
.search {
|
|
274
|
-
width: 228px;
|
|
275
284
|
height: 40px;
|
|
276
285
|
box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
|
|
277
286
|
border-radius: 10px;
|
|
278
287
|
backdrop-filter: blur(10px);
|
|
279
288
|
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png') no-repeat;
|
|
280
289
|
background-position-x: right;
|
|
290
|
+
background-size: 50%;
|
|
281
291
|
position: relative;
|
|
282
292
|
|
|
283
293
|
.search-input{
|
|
@@ -290,13 +300,20 @@ body {
|
|
|
290
300
|
line-height: 32px;
|
|
291
301
|
font-size: 14px;
|
|
292
302
|
color: #7D8295;
|
|
303
|
+
|
|
304
|
+
box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(255,255,255,0.3);
|
|
305
|
+
border-radius: 10px;
|
|
306
|
+
backdrop-filter: blur(10px);
|
|
307
|
+
|
|
308
|
+
&::placeholder {
|
|
309
|
+
color: #7D8295;
|
|
310
|
+
}
|
|
293
311
|
}
|
|
294
312
|
|
|
295
313
|
.search-icon{
|
|
296
314
|
position: absolute;
|
|
297
315
|
left: 12px;
|
|
298
|
-
top:
|
|
299
|
-
transform: translateY(-50%);
|
|
316
|
+
top: 11px;
|
|
300
317
|
}
|
|
301
318
|
|
|
302
319
|
.search-command{
|
|
@@ -322,19 +339,30 @@ body {
|
|
|
322
339
|
.search-mobile{
|
|
323
340
|
width: 40px;
|
|
324
341
|
height: 40px;
|
|
325
|
-
|
|
326
|
-
box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px #FFFFFF;
|
|
342
|
+
box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(255,255,255,0.3);
|
|
327
343
|
border-radius: 10px;
|
|
328
344
|
backdrop-filter: blur(10px);
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
align-items: center;
|
|
345
|
+
padding-top: 11px;
|
|
346
|
+
padding-left: 12px;
|
|
332
347
|
cursor: pointer;
|
|
333
348
|
}
|
|
334
349
|
}
|
|
335
350
|
|
|
351
|
+
.layout-side-mask{
|
|
352
|
+
background: radial-gradient( 152% 131% at 3% 1%, #E8E2FA 0%, #C4D0F3 10%, #AFCAF8 25%, #89BFF6 49%, #478EED 100%);
|
|
353
|
+
opacity: 0.3;
|
|
354
|
+
position: absolute;
|
|
355
|
+
top: 0;
|
|
356
|
+
left: 0;
|
|
357
|
+
width: 100%;
|
|
358
|
+
height: 100%;
|
|
359
|
+
border-radius: 16px;
|
|
360
|
+
}
|
|
361
|
+
|
|
336
362
|
.layout-side {
|
|
337
|
-
|
|
363
|
+
// background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
|
|
364
|
+
background: transparent !important;
|
|
365
|
+
position: relative;
|
|
338
366
|
height: calc(100vh - 24px);
|
|
339
367
|
user-select: none;
|
|
340
368
|
border: 2px solid white;
|
|
@@ -345,14 +373,20 @@ body {
|
|
|
345
373
|
.header-logo {
|
|
346
374
|
padding-left: 16px;
|
|
347
375
|
display: flex;
|
|
376
|
+
justify-content: space-between;
|
|
348
377
|
cursor: pointer;
|
|
349
378
|
height: 30px;
|
|
350
379
|
|
|
380
|
+
.logo-sub{
|
|
381
|
+
width: 31px;
|
|
382
|
+
height: 30px;
|
|
383
|
+
}
|
|
384
|
+
|
|
351
385
|
.logo-base {
|
|
352
386
|
height: 30px;
|
|
353
387
|
width: 105px;
|
|
354
388
|
}
|
|
355
|
-
|
|
389
|
+
}
|
|
356
390
|
}
|
|
357
391
|
|
|
358
392
|
.layout-header {
|
|
@@ -437,7 +471,7 @@ body {
|
|
|
437
471
|
|
|
438
472
|
.layout-content {
|
|
439
473
|
width: 100%;
|
|
440
|
-
height: calc(100vh - #{$header-height});
|
|
474
|
+
height: calc(100vh - #{$header-height} - 12px - 24px);
|
|
441
475
|
overflow: auto;
|
|
442
476
|
margin-top: 12px;
|
|
443
477
|
border-radius: 16px;
|
|
@@ -458,22 +492,17 @@ body {
|
|
|
458
492
|
|
|
459
493
|
|
|
460
494
|
|
|
461
|
-
.
|
|
462
|
-
left: 0;
|
|
495
|
+
.lists{
|
|
463
496
|
position: absolute;
|
|
464
497
|
width: 100%;
|
|
465
498
|
background: white;
|
|
466
499
|
cursor: pointer;
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
.search-item:hover{
|
|
471
|
-
background-color: ghostwhite;
|
|
472
|
-
border-radius: 7px;
|
|
500
|
+
position: absolute;
|
|
501
|
+
z-index: 1000;
|
|
502
|
+
width: 88%;
|
|
473
503
|
}
|
|
474
504
|
|
|
475
505
|
|
|
476
|
-
|
|
477
506
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
478
507
|
display: inline-block;
|
|
479
508
|
position: absolute;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react'
|
|
2
2
|
import { Layout, List, Menu, MenuProps, Popover } from 'antd'
|
|
3
3
|
import UserCard from './user-card'
|
|
4
|
-
import { useMemo } from 'react'
|
|
5
4
|
import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
|
|
6
5
|
import { CloseCircleOutlined } from '@ant-design/icons'
|
|
7
|
-
import './index.scss'
|
|
8
6
|
const { Sider } = Layout
|
|
9
7
|
|
|
10
8
|
export interface LiosLayoutlProps {
|
|
@@ -14,7 +12,7 @@ export interface LiosLayoutlProps {
|
|
|
14
12
|
menuList: any
|
|
15
13
|
onMenuClick: any
|
|
16
14
|
selectedKeys: string[]
|
|
17
|
-
setSelectKeys:
|
|
15
|
+
setSelectKeys: any
|
|
18
16
|
customAction?: any
|
|
19
17
|
actions?: any[]
|
|
20
18
|
myWalletInfo?: {
|
|
@@ -60,6 +58,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
60
58
|
type,
|
|
61
59
|
} = props
|
|
62
60
|
|
|
61
|
+
const [selectKey, setSelectKey] = useState<any>([])
|
|
62
|
+
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (type !== 'console') {
|
|
65
|
+
import('./index.scss')
|
|
66
|
+
} else {
|
|
67
|
+
import('./index-console.scss')
|
|
68
|
+
}
|
|
69
|
+
}, [type])
|
|
70
|
+
|
|
63
71
|
const logoUrl =
|
|
64
72
|
type === 'console'
|
|
65
73
|
? 'https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/company-logo/cfel-logo-white-compress.png'
|
|
@@ -130,21 +138,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
130
138
|
} catch (err) {}
|
|
131
139
|
}
|
|
132
140
|
|
|
133
|
-
const style = useMemo(() => {
|
|
134
|
-
if (collapsed) {
|
|
135
|
-
return {
|
|
136
|
-
style: {
|
|
137
|
-
padding: '0',
|
|
138
|
-
paddingTop: '24px',
|
|
139
|
-
},
|
|
140
|
-
}
|
|
141
|
-
} else {
|
|
142
|
-
return {
|
|
143
|
-
style: {},
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}, [collapsed])
|
|
147
|
-
|
|
148
141
|
const collapseNode = () => {
|
|
149
142
|
return {
|
|
150
143
|
height: 0,
|
|
@@ -188,6 +181,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
188
181
|
setCollapsed(value)
|
|
189
182
|
}}
|
|
190
183
|
>
|
|
184
|
+
<div className="layout-side-mask"></div>
|
|
185
|
+
|
|
191
186
|
<div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
|
|
192
187
|
<div
|
|
193
188
|
onClick={() => {
|
|
@@ -195,23 +190,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
195
190
|
}}
|
|
196
191
|
>
|
|
197
192
|
{!collapsed && <img className={`logo-base current-logo`} src={logo || logoUrl} />}
|
|
198
|
-
|
|
199
|
-
{collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />}
|
|
193
|
+
{collapsed && <img className={`logo-sub`} src={subLogoUrl} />}
|
|
194
|
+
{/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
|
|
200
195
|
</div>
|
|
201
196
|
|
|
202
|
-
{/*
|
|
197
|
+
{/* {!collapsed && (
|
|
203
198
|
<div
|
|
204
|
-
className=
|
|
199
|
+
className='trigger'
|
|
205
200
|
onClick={() => {
|
|
206
201
|
setCollapsed(true)
|
|
207
202
|
}}
|
|
208
203
|
>
|
|
209
|
-
<Arrow collapsed={true} />
|
|
204
|
+
<Arrow collapsed={true} type={type} />
|
|
210
205
|
</div>
|
|
211
206
|
)} */}
|
|
212
207
|
</div>
|
|
213
208
|
|
|
214
|
-
{
|
|
209
|
+
{collapsed && (
|
|
215
210
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
|
216
211
|
<div
|
|
217
212
|
className="close-trigger"
|
|
@@ -219,18 +214,18 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
219
214
|
setCollapsed(false)
|
|
220
215
|
}}
|
|
221
216
|
>
|
|
222
|
-
<Arrow collapsed={false} />
|
|
217
|
+
<Arrow collapsed={false} type={type} />
|
|
223
218
|
</div>
|
|
224
219
|
</div>
|
|
225
|
-
)}
|
|
220
|
+
)}
|
|
226
221
|
|
|
227
222
|
<div style={{ height: 24 }}></div>
|
|
228
223
|
|
|
229
|
-
<div style={{ width: '100%',
|
|
224
|
+
<div style={{ width: '100%', padding: '0 16px' }}>
|
|
230
225
|
<Search menuList={menuList} collapsed={collapsed} type={type || ''} />
|
|
231
226
|
</div>
|
|
232
227
|
|
|
233
|
-
{!collapsed && <div style={{ height:
|
|
228
|
+
{!collapsed && <div style={{ height: 12 }}></div>}
|
|
234
229
|
|
|
235
230
|
<div className="layout-menu">
|
|
236
231
|
<RcMenu
|
|
@@ -239,9 +234,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
239
234
|
motion={collapsed ? verticalMotion : inlineMotion}
|
|
240
235
|
openKeys={openKeys}
|
|
241
236
|
onOpenChange={onOpenChange}
|
|
242
|
-
selectedKeys={
|
|
243
|
-
onClick={(item
|
|
244
|
-
|
|
237
|
+
selectedKeys={selectKey}
|
|
238
|
+
onClick={(item: any) => {
|
|
239
|
+
setSelectKey(item.keyPath)
|
|
245
240
|
if (onMenuClick) {
|
|
246
241
|
onMenuClick(item)
|
|
247
242
|
}
|
|
@@ -249,7 +244,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
249
244
|
triggerSubMenuAction="hover"
|
|
250
245
|
>
|
|
251
246
|
{menuList.map((item: any) => {
|
|
252
|
-
const isSelected =
|
|
247
|
+
const isSelected = selectKey.includes(item.key)
|
|
253
248
|
if (item.children) {
|
|
254
249
|
let classNames = 'menu-item-label'
|
|
255
250
|
if (isSelected) {
|
|
@@ -270,7 +265,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
270
265
|
}
|
|
271
266
|
>
|
|
272
267
|
{item.children.map((child: any) => {
|
|
273
|
-
const isSelected =
|
|
268
|
+
const isSelected = selectKey.includes(child.key)
|
|
274
269
|
if (item.children) {
|
|
275
270
|
let classNames = 'menu-item-label'
|
|
276
271
|
if (isSelected) {
|
|
@@ -286,7 +281,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
286
281
|
title={<div className="sub-list">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>}
|
|
287
282
|
>
|
|
288
283
|
{child.children.map((grandChild: any) => {
|
|
289
|
-
const isSelected =
|
|
284
|
+
const isSelected = selectKey.includes(grandChild.key)
|
|
290
285
|
if (item.children) {
|
|
291
286
|
let classNames = 'menu-item-label'
|
|
292
287
|
if (isSelected) {
|
|
@@ -386,23 +381,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
386
381
|
)
|
|
387
382
|
}
|
|
388
383
|
|
|
389
|
-
function Arrow({ collapsed }: { collapsed?: boolean }) {
|
|
384
|
+
function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
|
|
390
385
|
return (
|
|
391
|
-
<
|
|
392
|
-
<
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
</svg>
|
|
398
|
-
</div>
|
|
386
|
+
<svg style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
|
387
|
+
<path
|
|
388
|
+
fill={type === 'console' ? '#FFFFFF' : '#817F9B'}
|
|
389
|
+
d="M564.6336 775.168a41.5744 41.5744 0 0 0-13.312-28.672l-230.4-234.4448 229.9904-234.1888a42.0864 42.0864 0 0 0-26.3168-73.0112 42.0864 42.0864 0 0 0-30.6176 11.264L231.0656 481.024a41.984 41.984 0 0 0-2.4576 59.5968l1.9968 2.048 263.7824 265.6256a41.984 41.984 0 0 0 70.2464-33.0752z m254.5152 0a41.472 41.472 0 0 0-13.312-28.672L575.488 512l229.9904-234.1376a41.984 41.984 0 1 0-56.9344-61.7984L485.632 480.9728a42.0864 42.0864 0 0 0-2.4064 59.6992l0.8704 0.9216 0.8704 0.8192 0.4096 0.4096 263.5776 265.4208a41.984 41.984 0 0 0 70.1952-33.0752z"
|
|
390
|
+
></path>
|
|
391
|
+
</svg>
|
|
399
392
|
)
|
|
400
393
|
}
|
|
401
394
|
|
|
402
395
|
function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boolean; type: string }) {
|
|
403
396
|
useEffect(() => {
|
|
404
397
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
405
|
-
// Check for Ctrl+K (Windows) or Cmd+K (Mac)
|
|
406
398
|
if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
|
|
407
399
|
event.preventDefault()
|
|
408
400
|
const searchInput = document.querySelector('#menu-input') as HTMLInputElement
|
|
@@ -451,7 +443,14 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
|
|
|
451
443
|
setSearchResult(searchResults)
|
|
452
444
|
function search(data: Router[]) {
|
|
453
445
|
data.forEach((item) => {
|
|
454
|
-
if (item.
|
|
446
|
+
if (item.key === '/quota-check') {
|
|
447
|
+
searchResults.push({
|
|
448
|
+
label: '配额列表',
|
|
449
|
+
key: '/quota-check',
|
|
450
|
+
})
|
|
451
|
+
return
|
|
452
|
+
}
|
|
453
|
+
if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
|
|
455
454
|
searchResults.push(item)
|
|
456
455
|
}
|
|
457
456
|
if (item.children) {
|
|
@@ -495,11 +494,10 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
|
|
|
495
494
|
<>
|
|
496
495
|
{collapsed ? (
|
|
497
496
|
<div className="search-mobile">
|
|
498
|
-
{' '}
|
|
499
497
|
<div className="search-icon">
|
|
500
498
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
|
501
499
|
<path
|
|
502
|
-
fill=
|
|
500
|
+
fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
|
|
503
501
|
d="M962.048 907.776l-229.0176-229.0176a384.3072 384.3072 0 1 0-54.272 54.272l229.0176 229.0176a38.4 38.4 0 0 0 54.272-54.272zM436.1216 743.0656a306.944 306.944 0 1 1 306.944-306.944 307.3024 307.3024 0 0 1-306.944 306.944z"
|
|
504
502
|
></path>
|
|
505
503
|
</svg>
|
|
@@ -517,18 +515,27 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
|
|
|
517
515
|
></path>
|
|
518
516
|
</svg>
|
|
519
517
|
</div>
|
|
520
|
-
<div className="search-command"
|
|
518
|
+
<div className="search-command" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
|
|
519
|
+
{navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
|
|
520
|
+
</div>
|
|
521
|
+
|
|
522
|
+
{/* <div
|
|
523
|
+
className='search-command'
|
|
524
|
+
style={{ width: '50px' }}
|
|
525
|
+
>
|
|
526
|
+
{'Ctrl+'}K
|
|
527
|
+
</div> */}
|
|
521
528
|
</div>
|
|
522
529
|
<div>
|
|
523
530
|
{isHovered && (
|
|
524
531
|
<>
|
|
525
532
|
{searchTerm ? (
|
|
526
|
-
<List split={false} className="
|
|
533
|
+
<List split={false} className="lists" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
|
|
527
534
|
) : (
|
|
528
535
|
<List
|
|
529
536
|
split={false}
|
|
530
|
-
className="
|
|
531
|
-
header=
|
|
537
|
+
className="lists"
|
|
538
|
+
header="最近访问"
|
|
532
539
|
size="small"
|
|
533
540
|
bordered
|
|
534
541
|
dataSource={searchHistory}
|
|
@@ -545,7 +552,7 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
|
|
|
545
552
|
>
|
|
546
553
|
<List.Item>{item.label}</List.Item>
|
|
547
554
|
<div
|
|
548
|
-
style={{ paddingRight: 10 }}
|
|
555
|
+
style={{ paddingRight: 10, cursor: 'pointer' }}
|
|
549
556
|
onClick={() => {
|
|
550
557
|
deleteHistory(item)
|
|
551
558
|
}}
|