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