cfel-base-components 2.5.56 → 2.5.58
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.
|
@@ -64,7 +64,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
64
64
|
isHideHeader,
|
|
65
65
|
onCollapse,
|
|
66
66
|
type,
|
|
67
|
-
umiHistory
|
|
67
|
+
umiHistory
|
|
68
68
|
} = props
|
|
69
69
|
|
|
70
70
|
const findKeyPath = (pathname: string) => {
|
|
@@ -88,7 +88,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
// 初始化选中菜单
|
|
91
|
-
const [selectKey, setSelectKey] = useState<any>(
|
|
91
|
+
const [selectKey, setSelectKey] = useState<any>(
|
|
92
|
+
findKeyPath('/' + location.pathname.split('/')[2])
|
|
93
|
+
)
|
|
92
94
|
|
|
93
95
|
const [infoOpen, setInfoOpen] = useState<string | null>(null)
|
|
94
96
|
|
|
@@ -133,7 +135,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
133
135
|
//在这里找到当前菜单的上层目录
|
|
134
136
|
const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
|
|
135
137
|
//去重
|
|
136
|
-
const set = new Set(paMenu.map(
|
|
138
|
+
const set = new Set(paMenu.map(item => item.key))
|
|
137
139
|
|
|
138
140
|
openKeys.forEach((element: string) => {
|
|
139
141
|
set.add(element)
|
|
@@ -142,6 +144,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
142
144
|
|
|
143
145
|
// 设置选中的菜单项
|
|
144
146
|
const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
|
|
147
|
+
|
|
145
148
|
setSelectKey(selectedPath)
|
|
146
149
|
}, [location.pathname])
|
|
147
150
|
|
|
@@ -151,20 +154,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
151
154
|
account: false,
|
|
152
155
|
id: false,
|
|
153
156
|
tenantName: false,
|
|
154
|
-
tenantId: false
|
|
157
|
+
tenantId: false
|
|
155
158
|
})
|
|
156
159
|
|
|
157
|
-
const onOpenChange: MenuProps['onOpenChange'] =
|
|
160
|
+
const onOpenChange: MenuProps['onOpenChange'] = keys => {
|
|
158
161
|
// Find the last opened key
|
|
159
|
-
const latestOpenKey = keys.find(
|
|
162
|
+
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1)
|
|
160
163
|
|
|
161
164
|
if (latestOpenKey) {
|
|
162
165
|
// If opening a new key
|
|
163
|
-
const rootSubmenuKeys = menuList.map((item) => item.key)
|
|
166
|
+
const rootSubmenuKeys = menuList.map((item: any) => item.key)
|
|
164
167
|
|
|
165
168
|
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
|
166
169
|
// If it's a third level menu, only keep its parent menu open
|
|
167
|
-
const parentKey = keys.find(
|
|
170
|
+
const parentKey = keys.find(key => rootSubmenuKeys.includes(key))
|
|
168
171
|
setOpenKeys(parentKey ? [parentKey, latestOpenKey] : [latestOpenKey])
|
|
169
172
|
} else {
|
|
170
173
|
// If it's a second level menu, only keep it open
|
|
@@ -186,7 +189,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
186
189
|
// 菜单动画
|
|
187
190
|
const collapseNode = () => {
|
|
188
191
|
return {
|
|
189
|
-
height: 0
|
|
192
|
+
height: 0
|
|
190
193
|
}
|
|
191
194
|
}
|
|
192
195
|
const expandNode = (node: any) => {
|
|
@@ -200,26 +203,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
200
203
|
onEnterStart: collapseNode,
|
|
201
204
|
onEnterActive: expandNode,
|
|
202
205
|
onLeaveStart: expandNode,
|
|
203
|
-
onLeaveActive: collapseNode
|
|
206
|
+
onLeaveActive: collapseNode
|
|
204
207
|
}
|
|
205
208
|
|
|
206
209
|
const verticalMotion = {
|
|
207
210
|
motionName: 'rc-menu-open-zoom',
|
|
208
211
|
motionAppear: true,
|
|
209
212
|
motionEnter: true,
|
|
210
|
-
motionLeave: true
|
|
213
|
+
motionLeave: true
|
|
211
214
|
}
|
|
212
215
|
|
|
213
216
|
return (
|
|
214
|
-
<Layout className=
|
|
217
|
+
<Layout className='layout-warps-console'>
|
|
215
218
|
{Array.isArray(menuList) && menuList.length > 0 && (
|
|
216
219
|
<Sider
|
|
217
|
-
className=
|
|
220
|
+
className='layout-side-console'
|
|
218
221
|
collapsible
|
|
219
222
|
trigger={null}
|
|
220
223
|
collapsed={collapsed}
|
|
221
224
|
width={260}
|
|
222
|
-
onCollapse={
|
|
225
|
+
onCollapse={value => {
|
|
223
226
|
if (onCollapse) {
|
|
224
227
|
onCollapse(value)
|
|
225
228
|
}
|
|
@@ -227,10 +230,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
227
230
|
setCollapsed(value)
|
|
228
231
|
}}
|
|
229
232
|
>
|
|
230
|
-
<div className=
|
|
231
|
-
<div className=
|
|
233
|
+
<div className='layout-side-mask1-console'></div>
|
|
234
|
+
<div className='layout-side-mask2-console'></div>
|
|
232
235
|
|
|
233
|
-
<div
|
|
236
|
+
<div
|
|
237
|
+
className='header-logo-console'
|
|
238
|
+
style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
|
|
239
|
+
>
|
|
234
240
|
<div
|
|
235
241
|
onClick={() => {
|
|
236
242
|
window.open('/home')
|
|
@@ -241,7 +247,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
241
247
|
{/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
|
|
242
248
|
</div>
|
|
243
249
|
|
|
244
|
-
{
|
|
250
|
+
{!collapsed && (
|
|
245
251
|
<div
|
|
246
252
|
className='trigger-console'
|
|
247
253
|
onClick={() => {
|
|
@@ -264,18 +270,25 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
264
270
|
>
|
|
265
271
|
<Arrow collapsed={false} type={type} />
|
|
266
272
|
</div>
|
|
267
|
-
|
|
268
|
-
)}
|
|
269
|
-
|
|
273
|
+
</div>
|
|
274
|
+
)}
|
|
275
|
+
|
|
270
276
|
{!collapsed && <div style={{ height: 24 }}></div>}
|
|
271
277
|
|
|
272
278
|
<div style={{ width: '100%', padding: '0 16px' }}>
|
|
273
|
-
<Search
|
|
279
|
+
<Search
|
|
280
|
+
menuList={menuList}
|
|
281
|
+
collapsed={collapsed}
|
|
282
|
+
type={type || ''}
|
|
283
|
+
umiHistory={umiHistory}
|
|
284
|
+
setSelectKey={setSelectKey}
|
|
285
|
+
findKeyPath={findKeyPath}
|
|
286
|
+
/>
|
|
274
287
|
</div>
|
|
275
288
|
|
|
276
289
|
{!collapsed && <div style={{ height: 12 }}></div>}
|
|
277
290
|
|
|
278
|
-
<div className=
|
|
291
|
+
<div className='layout-menu-console'>
|
|
279
292
|
<RcMenu
|
|
280
293
|
mode={collapsed ? 'vertical' : 'inline'}
|
|
281
294
|
className={`menu-console${collapsed ? '-collapsed' : ''}`}
|
|
@@ -303,25 +316,27 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
303
316
|
<Popover
|
|
304
317
|
key={item.key}
|
|
305
318
|
align={{
|
|
306
|
-
offset: [33, 0]
|
|
319
|
+
offset: [33, 0]
|
|
307
320
|
}}
|
|
308
|
-
placement=
|
|
321
|
+
placement='right'
|
|
309
322
|
arrow={false}
|
|
310
323
|
content={
|
|
311
|
-
<div className=
|
|
324
|
+
<div className='menu-popover'>
|
|
312
325
|
{item.children.map((child: any) => {
|
|
326
|
+
const isSelected = selectKey.includes(child.key)
|
|
313
327
|
if (child.children) {
|
|
314
328
|
return (
|
|
315
329
|
<Popover
|
|
316
330
|
key={child.key}
|
|
317
331
|
align={{
|
|
318
|
-
offset: [
|
|
332
|
+
offset: [10, 0]
|
|
319
333
|
}}
|
|
320
|
-
placement=
|
|
334
|
+
placement='right'
|
|
321
335
|
arrow={false}
|
|
322
336
|
content={
|
|
323
|
-
<div className=
|
|
337
|
+
<div className='menu-popover' style={{ width: '146px' }}>
|
|
324
338
|
{child.children.map((grandChild: any) => {
|
|
339
|
+
const isSelected = selectKey.includes(grandChild.key)
|
|
325
340
|
return (
|
|
326
341
|
<MenuItem
|
|
327
342
|
onClick={() => {
|
|
@@ -330,10 +345,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
330
345
|
}
|
|
331
346
|
}}
|
|
332
347
|
key={grandChild.key}
|
|
333
|
-
className=
|
|
348
|
+
className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
334
349
|
>
|
|
335
|
-
<div
|
|
336
|
-
<span className=
|
|
350
|
+
<div style={{ width: '130px' }}>
|
|
351
|
+
<span className={`menu-item-label`}>
|
|
352
|
+
{grandChild.label}
|
|
353
|
+
</span>
|
|
337
354
|
</div>
|
|
338
355
|
</MenuItem>
|
|
339
356
|
)
|
|
@@ -342,11 +359,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
342
359
|
}
|
|
343
360
|
>
|
|
344
361
|
<SubMenu
|
|
345
|
-
className=
|
|
362
|
+
className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
346
363
|
key={child.key}
|
|
347
364
|
title={
|
|
348
|
-
<div className=
|
|
349
|
-
<span className=
|
|
365
|
+
<div className='sub-list'>
|
|
366
|
+
<span className={`menu-item-label`}>{child.label}</span>
|
|
350
367
|
<RightOutlined />
|
|
351
368
|
</div>
|
|
352
369
|
}
|
|
@@ -362,9 +379,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
362
379
|
}
|
|
363
380
|
}}
|
|
364
381
|
key={child.key}
|
|
365
|
-
className={`sub-li ${isSelected ? 'sub-selected' : ''}`}
|
|
382
|
+
className={`sub-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
366
383
|
>
|
|
367
|
-
<div className=
|
|
384
|
+
<div className='menu-item-content sub-list'>{child.label}</div>
|
|
368
385
|
</MenuItem>
|
|
369
386
|
)
|
|
370
387
|
})}
|
|
@@ -372,11 +389,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
372
389
|
}
|
|
373
390
|
>
|
|
374
391
|
<SubMenu
|
|
375
|
-
className=
|
|
392
|
+
className='menu-item-content sub-li'
|
|
376
393
|
title={
|
|
377
|
-
<div className=
|
|
394
|
+
<div className='sub-list'>
|
|
378
395
|
<div>
|
|
379
|
-
<span
|
|
396
|
+
<span
|
|
397
|
+
className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
|
|
398
|
+
>
|
|
399
|
+
{item.icon}
|
|
400
|
+
</span>
|
|
380
401
|
</div>
|
|
381
402
|
</div>
|
|
382
403
|
}
|
|
@@ -387,11 +408,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
387
408
|
return (
|
|
388
409
|
<SubMenu
|
|
389
410
|
key={item.key}
|
|
390
|
-
className=
|
|
411
|
+
className='menu-item-content'
|
|
391
412
|
title={
|
|
392
|
-
<div className=
|
|
393
|
-
<div className=
|
|
394
|
-
<span
|
|
413
|
+
<div className='sub-list'>
|
|
414
|
+
<div className='menu-item-inner'>
|
|
415
|
+
<span
|
|
416
|
+
className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
|
|
417
|
+
>
|
|
418
|
+
{item.icon}
|
|
419
|
+
</span>
|
|
395
420
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
396
421
|
</div>
|
|
397
422
|
</div>
|
|
@@ -408,9 +433,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
408
433
|
if (child.children) {
|
|
409
434
|
return (
|
|
410
435
|
<SubMenu
|
|
411
|
-
className=
|
|
436
|
+
className='menu-item-content sub-li'
|
|
412
437
|
key={child.key}
|
|
413
|
-
title={
|
|
438
|
+
title={
|
|
439
|
+
<div className='sub-list'>
|
|
440
|
+
{!collapsed && (
|
|
441
|
+
<span
|
|
442
|
+
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
443
|
+
>
|
|
444
|
+
{child.label}
|
|
445
|
+
</span>
|
|
446
|
+
)}
|
|
447
|
+
</div>
|
|
448
|
+
}
|
|
414
449
|
>
|
|
415
450
|
{child.children.map((grandChild: any) => {
|
|
416
451
|
const isSelected = selectKey.includes(grandChild.key)
|
|
@@ -421,8 +456,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
421
456
|
}
|
|
422
457
|
}
|
|
423
458
|
return (
|
|
424
|
-
<MenuItem key={grandChild.key} className=
|
|
425
|
-
<div className=
|
|
459
|
+
<MenuItem key={grandChild.key} className='grand-li'>
|
|
460
|
+
<div className='menu-item-content'>
|
|
461
|
+
{!collapsed && (
|
|
462
|
+
<span
|
|
463
|
+
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
464
|
+
>
|
|
465
|
+
{grandChild.label}
|
|
466
|
+
</span>
|
|
467
|
+
)}
|
|
468
|
+
</div>
|
|
426
469
|
</MenuItem>
|
|
427
470
|
)
|
|
428
471
|
})}
|
|
@@ -430,8 +473,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
430
473
|
)
|
|
431
474
|
}
|
|
432
475
|
return (
|
|
433
|
-
<MenuItem key={child.key} className=
|
|
434
|
-
<div className=
|
|
476
|
+
<MenuItem key={child.key} className='sub-li'>
|
|
477
|
+
<div className='menu-item-content'>
|
|
478
|
+
{!collapsed && (
|
|
479
|
+
<span
|
|
480
|
+
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
481
|
+
>
|
|
482
|
+
{child.label}
|
|
483
|
+
</span>
|
|
484
|
+
)}
|
|
485
|
+
</div>
|
|
435
486
|
</MenuItem>
|
|
436
487
|
)
|
|
437
488
|
})}
|
|
@@ -445,9 +496,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
445
496
|
classNames += ' submenu-selected'
|
|
446
497
|
}
|
|
447
498
|
return (
|
|
448
|
-
<MenuItem
|
|
449
|
-
|
|
450
|
-
|
|
499
|
+
<MenuItem
|
|
500
|
+
onClick={() => {
|
|
501
|
+
if (onMenuClick && collapsed) {
|
|
502
|
+
onMenuClick(item)
|
|
503
|
+
}
|
|
504
|
+
}}
|
|
505
|
+
key={item.key}
|
|
506
|
+
className='menu-item-content'
|
|
507
|
+
>
|
|
508
|
+
<div className='first-li'>
|
|
509
|
+
<span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
|
|
510
|
+
{item.icon}
|
|
511
|
+
</span>
|
|
451
512
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
452
513
|
</div>
|
|
453
514
|
</MenuItem>
|
|
@@ -459,21 +520,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
459
520
|
</Sider>
|
|
460
521
|
)}
|
|
461
522
|
|
|
462
|
-
<div className=
|
|
523
|
+
<div className='layout-main-console'>
|
|
463
524
|
{!isHideHeader && (
|
|
464
|
-
<div className=
|
|
525
|
+
<div className='layout-header-console'>
|
|
465
526
|
{appName && (
|
|
466
|
-
<div className=
|
|
467
|
-
<
|
|
527
|
+
<div className='app-name'>
|
|
528
|
+
<div>{appName}</div>
|
|
468
529
|
</div>
|
|
469
530
|
)}
|
|
470
531
|
|
|
471
|
-
<div className=
|
|
532
|
+
<div className='layout-header-fill-console' />
|
|
472
533
|
|
|
473
|
-
<div className=
|
|
534
|
+
<div className='layout-header-actions-console'>
|
|
474
535
|
{actions?.map((item, index) => {
|
|
475
536
|
return (
|
|
476
|
-
<div className=
|
|
537
|
+
<div className='actions-item' key={index}>
|
|
477
538
|
{item}
|
|
478
539
|
</div>
|
|
479
540
|
)
|
|
@@ -481,33 +542,40 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
481
542
|
</div>
|
|
482
543
|
|
|
483
544
|
<Popover
|
|
484
|
-
placement=
|
|
545
|
+
placement='bottom'
|
|
485
546
|
content={
|
|
486
|
-
<UserCard
|
|
547
|
+
<UserCard
|
|
548
|
+
myWalletInfo={myWalletInfo}
|
|
549
|
+
MyLoginInfo={MyLoginInfo}
|
|
550
|
+
amountInfo={amountInfo}
|
|
551
|
+
customAction={customAction}
|
|
552
|
+
isCopied={isCopied}
|
|
553
|
+
copyTextToClipboard={copyTextToClipboard}
|
|
554
|
+
/>
|
|
487
555
|
}
|
|
488
556
|
arrow={false}
|
|
489
|
-
trigger=
|
|
490
|
-
onOpenChange={
|
|
557
|
+
trigger='click'
|
|
558
|
+
onOpenChange={e => {
|
|
491
559
|
setInfoOpen(e ? 'up' : 'down')
|
|
492
560
|
if (!e) return
|
|
493
561
|
setIsCopied({
|
|
494
562
|
account: false,
|
|
495
563
|
id: false,
|
|
496
564
|
tenantName: false,
|
|
497
|
-
tenantId: false
|
|
565
|
+
tenantId: false
|
|
498
566
|
})
|
|
499
567
|
if (myLoginInfoAction) {
|
|
500
568
|
myLoginInfoAction()
|
|
501
569
|
}
|
|
502
570
|
}}
|
|
503
571
|
>
|
|
504
|
-
<div className=
|
|
505
|
-
<img className=
|
|
506
|
-
<div className=
|
|
572
|
+
<div className='layout-header-user-console'>
|
|
573
|
+
<img className='avatar' src={avatar} />
|
|
574
|
+
<div className='name'>{name}</div>
|
|
507
575
|
<span
|
|
508
576
|
style={{
|
|
509
577
|
display: 'inline-block',
|
|
510
|
-
marginLeft: '4px'
|
|
578
|
+
marginLeft: '4px'
|
|
511
579
|
}}
|
|
512
580
|
className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
|
|
513
581
|
></span>
|
|
@@ -515,7 +583,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
515
583
|
</Popover>
|
|
516
584
|
</div>
|
|
517
585
|
)}
|
|
518
|
-
<div className=
|
|
586
|
+
<div className='layout-content-console'>{props.children}</div>
|
|
519
587
|
</div>
|
|
520
588
|
</Layout>
|
|
521
589
|
)
|
|
@@ -523,10 +591,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
523
591
|
|
|
524
592
|
function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
|
|
525
593
|
return (
|
|
526
|
-
<svg
|
|
594
|
+
<svg
|
|
595
|
+
style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
|
|
596
|
+
viewBox='0 0 1024 1024'
|
|
597
|
+
version='1.1'
|
|
598
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
599
|
+
width='20'
|
|
600
|
+
height='20'
|
|
601
|
+
>
|
|
527
602
|
<path
|
|
528
|
-
fill=
|
|
529
|
-
d=
|
|
603
|
+
fill='#FFFFFF'
|
|
604
|
+
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'
|
|
530
605
|
></path>
|
|
531
606
|
</svg>
|
|
532
607
|
)
|
|
@@ -553,7 +628,10 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
553
628
|
|
|
554
629
|
useEffect(() => {
|
|
555
630
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
556
|
-
if (
|
|
631
|
+
if (
|
|
632
|
+
(navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) &&
|
|
633
|
+
event.key.toLowerCase() === 'k'
|
|
634
|
+
) {
|
|
557
635
|
event.preventDefault()
|
|
558
636
|
const searchInput = document.querySelector('#menu-input') as HTMLInputElement
|
|
559
637
|
if (searchInput) {
|
|
@@ -602,7 +680,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
602
680
|
search(menuList as Router[])
|
|
603
681
|
setSearchResult(searchResults)
|
|
604
682
|
function search(data: Router[]) {
|
|
605
|
-
data.forEach(
|
|
683
|
+
data.forEach(item => {
|
|
606
684
|
if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
|
|
607
685
|
searchResults.push(item)
|
|
608
686
|
}
|
|
@@ -616,7 +694,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
616
694
|
const enter = (item: Router) => {
|
|
617
695
|
setIsFocused(false)
|
|
618
696
|
//如果搜索历史里面有这个item，就不再添加
|
|
619
|
-
if (searchHistory.findIndex(
|
|
697
|
+
if (searchHistory.findIndex(i => i.key === item.key) === -1) {
|
|
620
698
|
setSearchHistory([...searchHistory, item])
|
|
621
699
|
}
|
|
622
700
|
//如果是目录就找到目录下第一个菜单进入
|
|
@@ -643,39 +721,48 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
643
721
|
}
|
|
644
722
|
|
|
645
723
|
const deleteHistory = (item: Router) => {
|
|
646
|
-
setSearchHistory(searchHistory.filter(
|
|
724
|
+
setSearchHistory(searchHistory.filter(i => i.key !== item.key))
|
|
647
725
|
}
|
|
648
726
|
return (
|
|
649
727
|
<>
|
|
650
728
|
{!collapsed && (
|
|
651
|
-
<div className=
|
|
652
|
-
<div className=
|
|
653
|
-
<div className=
|
|
654
|
-
<img src=
|
|
729
|
+
<div className='search-container'>
|
|
730
|
+
<div className='search-console'>
|
|
731
|
+
<div className='search-bg-mask'>
|
|
732
|
+
<img src='https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png' />
|
|
655
733
|
</div>
|
|
656
734
|
<input
|
|
657
|
-
autoComplete=
|
|
658
|
-
id=
|
|
735
|
+
autoComplete='off'
|
|
736
|
+
id='menu-input'
|
|
659
737
|
value={searchTerm}
|
|
660
|
-
onChange={
|
|
661
|
-
className=
|
|
662
|
-
placeholder=
|
|
738
|
+
onChange={e => handleSearch(e.target.value)}
|
|
739
|
+
className='search-input'
|
|
740
|
+
placeholder='搜索菜单...'
|
|
663
741
|
onFocus={() => setIsFocused(true)}
|
|
664
|
-
onBlur={
|
|
742
|
+
onBlur={e => {
|
|
665
743
|
if (!e.relatedTarget?.closest('.lists-console')) {
|
|
666
744
|
setIsFocused(false)
|
|
667
745
|
}
|
|
668
746
|
}}
|
|
669
747
|
/>
|
|
670
|
-
<div className=
|
|
671
|
-
<svg
|
|
748
|
+
<div className='search-icon'>
|
|
749
|
+
<svg
|
|
750
|
+
viewBox='0 0 1024 1024'
|
|
751
|
+
version='1.1'
|
|
752
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
753
|
+
width='18'
|
|
754
|
+
height='18'
|
|
755
|
+
>
|
|
672
756
|
<path
|
|
673
|
-
fill=
|
|
674
|
-
d=
|
|
757
|
+
fill='#C3CAEF'
|
|
758
|
+
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'
|
|
675
759
|
></path>
|
|
676
760
|
</svg>
|
|
677
761
|
</div>
|
|
678
|
-
<div
|
|
762
|
+
<div
|
|
763
|
+
className='search-command'
|
|
764
|
+
style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
|
|
765
|
+
>
|
|
679
766
|
{navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
|
|
680
767
|
</div>
|
|
681
768
|
|
|
@@ -693,29 +780,31 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
693
780
|
<List
|
|
694
781
|
tabIndex={-1}
|
|
695
782
|
split={false}
|
|
696
|
-
className=
|
|
697
|
-
size=
|
|
783
|
+
className='lists-console'
|
|
784
|
+
size='small'
|
|
698
785
|
bordered
|
|
699
786
|
dataSource={searchResult}
|
|
700
|
-
renderItem={
|
|
787
|
+
renderItem={item => (
|
|
788
|
+
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|
|
789
|
+
)}
|
|
701
790
|
/>
|
|
702
791
|
) : (
|
|
703
792
|
<List
|
|
704
793
|
tabIndex={-1}
|
|
705
794
|
split={false}
|
|
706
|
-
className=
|
|
707
|
-
header=
|
|
708
|
-
size=
|
|
795
|
+
className='lists-console'
|
|
796
|
+
header='最近访问'
|
|
797
|
+
size='small'
|
|
709
798
|
bordered
|
|
710
799
|
dataSource={searchHistory}
|
|
711
|
-
renderItem={
|
|
800
|
+
renderItem={item => {
|
|
712
801
|
return (
|
|
713
802
|
<div
|
|
714
803
|
className={'search-item'}
|
|
715
804
|
style={{
|
|
716
805
|
display: 'flex',
|
|
717
806
|
justifyContent: 'space-between',
|
|
718
|
-
alignItems: 'center'
|
|
807
|
+
alignItems: 'center'
|
|
719
808
|
}}
|
|
720
809
|
>
|
|
721
810
|
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|