cfel-base-components 2.5.55 → 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.
- package/demo/src/index.jsx +5 -5
- package/demo/src/index.module.less +1 -0
- package/package.json +2 -2
- package/src/components/layout/index.scss +151 -48
- package/src/components/layout/index.tsx +260 -104
- package/src/components/layout-console/index-console.scss +150 -84
- package/src/components/layout-console/index.tsx +256 -105
|
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
|
|
|
2
2
|
import { Layout, List, Menu, MenuProps, Popover } from 'antd'
|
|
3
3
|
import UserCard from './user-card'
|
|
4
4
|
import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
|
|
5
|
-
import { CloseCircleOutlined } from '@ant-design/icons'
|
|
5
|
+
import { CloseCircleOutlined, RightOutlined } from '@ant-design/icons'
|
|
6
6
|
const { Sider } = Layout
|
|
7
7
|
import './index-console.scss'
|
|
8
8
|
|
|
@@ -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,11 +135,18 @@ 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))
|
|
139
|
+
|
|
137
140
|
openKeys.forEach((element: string) => {
|
|
138
141
|
set.add(element)
|
|
139
142
|
})
|
|
140
143
|
setOpenKeys(Array.from(set))
|
|
144
|
+
|
|
145
|
+
// 设置选中的菜单项
|
|
146
|
+
const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
|
|
147
|
+
console.log(selectedPath)
|
|
148
|
+
|
|
149
|
+
setSelectKey(selectedPath)
|
|
141
150
|
}, [location.pathname])
|
|
142
151
|
|
|
143
152
|
// 初始化折叠状态
|
|
@@ -146,20 +155,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
146
155
|
account: false,
|
|
147
156
|
id: false,
|
|
148
157
|
tenantName: false,
|
|
149
|
-
tenantId: false
|
|
158
|
+
tenantId: false
|
|
150
159
|
})
|
|
151
160
|
|
|
152
|
-
const onOpenChange: MenuProps['onOpenChange'] =
|
|
161
|
+
const onOpenChange: MenuProps['onOpenChange'] = keys => {
|
|
153
162
|
// Find the last opened key
|
|
154
|
-
const latestOpenKey = keys.find(
|
|
163
|
+
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1)
|
|
155
164
|
|
|
156
165
|
if (latestOpenKey) {
|
|
157
166
|
// If opening a new key
|
|
158
|
-
const rootSubmenuKeys = menuList.map((item) => item.key)
|
|
167
|
+
const rootSubmenuKeys = menuList.map((item: any) => item.key)
|
|
159
168
|
|
|
160
169
|
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
|
161
170
|
// If it's a third level menu, only keep its parent menu open
|
|
162
|
-
const parentKey = keys.find(
|
|
171
|
+
const parentKey = keys.find(key => rootSubmenuKeys.includes(key))
|
|
163
172
|
setOpenKeys(parentKey ? [parentKey, latestOpenKey] : [latestOpenKey])
|
|
164
173
|
} else {
|
|
165
174
|
// If it's a second level menu, only keep it open
|
|
@@ -181,7 +190,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
181
190
|
// 菜单动画
|
|
182
191
|
const collapseNode = () => {
|
|
183
192
|
return {
|
|
184
|
-
height: 0
|
|
193
|
+
height: 0
|
|
185
194
|
}
|
|
186
195
|
}
|
|
187
196
|
const expandNode = (node: any) => {
|
|
@@ -195,26 +204,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
195
204
|
onEnterStart: collapseNode,
|
|
196
205
|
onEnterActive: expandNode,
|
|
197
206
|
onLeaveStart: expandNode,
|
|
198
|
-
onLeaveActive: collapseNode
|
|
207
|
+
onLeaveActive: collapseNode
|
|
199
208
|
}
|
|
200
209
|
|
|
201
210
|
const verticalMotion = {
|
|
202
211
|
motionName: 'rc-menu-open-zoom',
|
|
203
212
|
motionAppear: true,
|
|
204
213
|
motionEnter: true,
|
|
205
|
-
motionLeave: true
|
|
214
|
+
motionLeave: true
|
|
206
215
|
}
|
|
207
216
|
|
|
208
217
|
return (
|
|
209
|
-
<Layout className=
|
|
218
|
+
<Layout className='layout-warps-console'>
|
|
210
219
|
{Array.isArray(menuList) && menuList.length > 0 && (
|
|
211
220
|
<Sider
|
|
212
|
-
className=
|
|
221
|
+
className='layout-side-console'
|
|
213
222
|
collapsible
|
|
214
223
|
trigger={null}
|
|
215
224
|
collapsed={collapsed}
|
|
216
225
|
width={260}
|
|
217
|
-
onCollapse={
|
|
226
|
+
onCollapse={value => {
|
|
218
227
|
if (onCollapse) {
|
|
219
228
|
onCollapse(value)
|
|
220
229
|
}
|
|
@@ -222,10 +231,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
222
231
|
setCollapsed(value)
|
|
223
232
|
}}
|
|
224
233
|
>
|
|
225
|
-
<div className=
|
|
226
|
-
<div className=
|
|
234
|
+
<div className='layout-side-mask1-console'></div>
|
|
235
|
+
<div className='layout-side-mask2-console'></div>
|
|
227
236
|
|
|
228
|
-
<div
|
|
237
|
+
<div
|
|
238
|
+
className='header-logo-console'
|
|
239
|
+
style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
|
|
240
|
+
>
|
|
229
241
|
<div
|
|
230
242
|
onClick={() => {
|
|
231
243
|
window.open('/home')
|
|
@@ -238,7 +250,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
238
250
|
|
|
239
251
|
{!collapsed && (
|
|
240
252
|
<div
|
|
241
|
-
className=
|
|
253
|
+
className='trigger-console'
|
|
242
254
|
onClick={() => {
|
|
243
255
|
setCollapsed(true)
|
|
244
256
|
}}
|
|
@@ -251,7 +263,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
251
263
|
{collapsed && (
|
|
252
264
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
|
253
265
|
<div
|
|
254
|
-
className=
|
|
266
|
+
className='close-trigger-console'
|
|
255
267
|
onClick={() => {
|
|
256
268
|
localStorage.setItem('layout_collapsed', 'false')
|
|
257
269
|
setCollapsed(false)
|
|
@@ -261,16 +273,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
261
273
|
</div>
|
|
262
274
|
</div>
|
|
263
275
|
)}
|
|
264
|
-
|
|
265
|
-
<div style={{ height: 24 }}></div>
|
|
276
|
+
|
|
277
|
+
{!collapsed && <div style={{ height: 24 }}></div>}
|
|
266
278
|
|
|
267
279
|
<div style={{ width: '100%', padding: '0 16px' }}>
|
|
268
|
-
<Search
|
|
280
|
+
<Search
|
|
281
|
+
menuList={menuList}
|
|
282
|
+
collapsed={collapsed}
|
|
283
|
+
type={type || ''}
|
|
284
|
+
umiHistory={umiHistory}
|
|
285
|
+
setSelectKey={setSelectKey}
|
|
286
|
+
findKeyPath={findKeyPath}
|
|
287
|
+
/>
|
|
269
288
|
</div>
|
|
270
289
|
|
|
271
290
|
{!collapsed && <div style={{ height: 12 }}></div>}
|
|
272
291
|
|
|
273
|
-
<div className=
|
|
292
|
+
<div className='layout-menu-console'>
|
|
274
293
|
<RcMenu
|
|
275
294
|
mode={collapsed ? 'vertical' : 'inline'}
|
|
276
295
|
className={`menu-console${collapsed ? '-collapsed' : ''}`}
|
|
@@ -279,12 +298,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
279
298
|
onOpenChange={onOpenChange}
|
|
280
299
|
selectedKeys={selectKey}
|
|
281
300
|
onClick={(item: any) => {
|
|
301
|
+
if (collapsed) return
|
|
282
302
|
setSelectKey(item.keyPath)
|
|
283
303
|
if (onMenuClick) {
|
|
284
304
|
onMenuClick(item)
|
|
285
305
|
}
|
|
286
306
|
}}
|
|
287
|
-
triggerSubMenuAction="hover"
|
|
288
307
|
>
|
|
289
308
|
{menuList.map((item: any) => {
|
|
290
309
|
const isSelected = selectKey.includes(item.key)
|
|
@@ -295,15 +314,91 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
295
314
|
}
|
|
296
315
|
if (collapsed) {
|
|
297
316
|
return (
|
|
298
|
-
<Popover
|
|
317
|
+
<Popover
|
|
318
|
+
key={item.key}
|
|
319
|
+
align={{
|
|
320
|
+
offset: [33, 0]
|
|
321
|
+
}}
|
|
322
|
+
placement='right'
|
|
323
|
+
arrow={false}
|
|
324
|
+
content={
|
|
325
|
+
<div className='menu-popover'>
|
|
326
|
+
{item.children.map((child: any) => {
|
|
327
|
+
const isSelected = selectKey.includes(child.key)
|
|
328
|
+
if (child.children) {
|
|
329
|
+
return (
|
|
330
|
+
<Popover
|
|
331
|
+
key={child.key}
|
|
332
|
+
align={{
|
|
333
|
+
offset: [10, 0]
|
|
334
|
+
}}
|
|
335
|
+
placement='right'
|
|
336
|
+
arrow={false}
|
|
337
|
+
content={
|
|
338
|
+
<div className='menu-popover' style={{ width: '146px' }}>
|
|
339
|
+
{child.children.map((grandChild: any) => {
|
|
340
|
+
const isSelected = selectKey.includes(grandChild.key)
|
|
341
|
+
return (
|
|
342
|
+
<MenuItem
|
|
343
|
+
onClick={() => {
|
|
344
|
+
if (onMenuClick) {
|
|
345
|
+
onMenuClick(grandChild)
|
|
346
|
+
}
|
|
347
|
+
}}
|
|
348
|
+
key={grandChild.key}
|
|
349
|
+
className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
350
|
+
>
|
|
351
|
+
<div style={{ width: '130px' }}>
|
|
352
|
+
<span className={`menu-item-label`}>
|
|
353
|
+
{grandChild.label}
|
|
354
|
+
</span>
|
|
355
|
+
</div>
|
|
356
|
+
</MenuItem>
|
|
357
|
+
)
|
|
358
|
+
})}
|
|
359
|
+
</div>
|
|
360
|
+
}
|
|
361
|
+
>
|
|
362
|
+
<SubMenu
|
|
363
|
+
className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
364
|
+
key={child.key}
|
|
365
|
+
title={
|
|
366
|
+
<div className='sub-list'>
|
|
367
|
+
<span className={`menu-item-label`}>{child.label}</span>
|
|
368
|
+
<RightOutlined />
|
|
369
|
+
</div>
|
|
370
|
+
}
|
|
371
|
+
></SubMenu>
|
|
372
|
+
</Popover>
|
|
373
|
+
)
|
|
374
|
+
}
|
|
375
|
+
return (
|
|
376
|
+
<MenuItem
|
|
377
|
+
onClick={() => {
|
|
378
|
+
if (onMenuClick) {
|
|
379
|
+
onMenuClick(child)
|
|
380
|
+
}
|
|
381
|
+
}}
|
|
382
|
+
key={child.key}
|
|
383
|
+
className={`sub-li ${isSelected ? 'sub-item-selected' : ''}`}
|
|
384
|
+
>
|
|
385
|
+
<div className='menu-item-content sub-list'>{child.label}</div>
|
|
386
|
+
</MenuItem>
|
|
387
|
+
)
|
|
388
|
+
})}
|
|
389
|
+
</div>
|
|
390
|
+
}
|
|
391
|
+
>
|
|
299
392
|
<SubMenu
|
|
300
|
-
|
|
301
|
-
className="menu-item-content"
|
|
393
|
+
className='menu-item-content sub-li'
|
|
302
394
|
title={
|
|
303
|
-
<div className=
|
|
304
|
-
<div
|
|
305
|
-
<span
|
|
306
|
-
|
|
395
|
+
<div className='sub-list'>
|
|
396
|
+
<div>
|
|
397
|
+
<span
|
|
398
|
+
className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
|
|
399
|
+
>
|
|
400
|
+
{item.icon}
|
|
401
|
+
</span>
|
|
307
402
|
</div>
|
|
308
403
|
</div>
|
|
309
404
|
}
|
|
@@ -314,11 +409,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
314
409
|
return (
|
|
315
410
|
<SubMenu
|
|
316
411
|
key={item.key}
|
|
317
|
-
className=
|
|
412
|
+
className='menu-item-content'
|
|
318
413
|
title={
|
|
319
|
-
<div className=
|
|
320
|
-
<div className=
|
|
321
|
-
<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>
|
|
322
421
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
323
422
|
</div>
|
|
324
423
|
</div>
|
|
@@ -335,9 +434,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
335
434
|
if (child.children) {
|
|
336
435
|
return (
|
|
337
436
|
<SubMenu
|
|
338
|
-
className=
|
|
437
|
+
className='menu-item-content sub-li'
|
|
339
438
|
key={child.key}
|
|
340
|
-
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
|
+
}
|
|
341
450
|
>
|
|
342
451
|
{child.children.map((grandChild: any) => {
|
|
343
452
|
const isSelected = selectKey.includes(grandChild.key)
|
|
@@ -348,8 +457,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
348
457
|
}
|
|
349
458
|
}
|
|
350
459
|
return (
|
|
351
|
-
<MenuItem key={grandChild.key} className=
|
|
352
|
-
<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>
|
|
353
470
|
</MenuItem>
|
|
354
471
|
)
|
|
355
472
|
})}
|
|
@@ -357,8 +474,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
357
474
|
)
|
|
358
475
|
}
|
|
359
476
|
return (
|
|
360
|
-
<MenuItem key={child.key} className=
|
|
361
|
-
<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>
|
|
362
487
|
</MenuItem>
|
|
363
488
|
)
|
|
364
489
|
})}
|
|
@@ -372,9 +497,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
372
497
|
classNames += ' submenu-selected'
|
|
373
498
|
}
|
|
374
499
|
return (
|
|
375
|
-
<MenuItem
|
|
376
|
-
|
|
377
|
-
|
|
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>
|
|
378
513
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
379
514
|
</div>
|
|
380
515
|
</MenuItem>
|
|
@@ -386,21 +521,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
386
521
|
</Sider>
|
|
387
522
|
)}
|
|
388
523
|
|
|
389
|
-
<div className=
|
|
524
|
+
<div className='layout-main-console'>
|
|
390
525
|
{!isHideHeader && (
|
|
391
|
-
<div className=
|
|
526
|
+
<div className='layout-header-console'>
|
|
392
527
|
{appName && (
|
|
393
|
-
<div className=
|
|
394
|
-
<
|
|
528
|
+
<div className='app-name'>
|
|
529
|
+
<div>{appName}</div>
|
|
395
530
|
</div>
|
|
396
531
|
)}
|
|
397
532
|
|
|
398
|
-
<div className=
|
|
533
|
+
<div className='layout-header-fill-console' />
|
|
399
534
|
|
|
400
|
-
<div className=
|
|
535
|
+
<div className='layout-header-actions-console'>
|
|
401
536
|
{actions?.map((item, index) => {
|
|
402
537
|
return (
|
|
403
|
-
<div className=
|
|
538
|
+
<div className='actions-item' key={index}>
|
|
404
539
|
{item}
|
|
405
540
|
</div>
|
|
406
541
|
)
|
|
@@ -408,33 +543,40 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
408
543
|
</div>
|
|
409
544
|
|
|
410
545
|
<Popover
|
|
411
|
-
placement=
|
|
546
|
+
placement='bottom'
|
|
412
547
|
content={
|
|
413
|
-
<UserCard
|
|
548
|
+
<UserCard
|
|
549
|
+
myWalletInfo={myWalletInfo}
|
|
550
|
+
MyLoginInfo={MyLoginInfo}
|
|
551
|
+
amountInfo={amountInfo}
|
|
552
|
+
customAction={customAction}
|
|
553
|
+
isCopied={isCopied}
|
|
554
|
+
copyTextToClipboard={copyTextToClipboard}
|
|
555
|
+
/>
|
|
414
556
|
}
|
|
415
557
|
arrow={false}
|
|
416
|
-
trigger=
|
|
417
|
-
onOpenChange={
|
|
558
|
+
trigger='click'
|
|
559
|
+
onOpenChange={e => {
|
|
418
560
|
setInfoOpen(e ? 'up' : 'down')
|
|
419
561
|
if (!e) return
|
|
420
562
|
setIsCopied({
|
|
421
563
|
account: false,
|
|
422
564
|
id: false,
|
|
423
565
|
tenantName: false,
|
|
424
|
-
tenantId: false
|
|
566
|
+
tenantId: false
|
|
425
567
|
})
|
|
426
568
|
if (myLoginInfoAction) {
|
|
427
569
|
myLoginInfoAction()
|
|
428
570
|
}
|
|
429
571
|
}}
|
|
430
572
|
>
|
|
431
|
-
<div className=
|
|
432
|
-
<img className=
|
|
433
|
-
<div className=
|
|
573
|
+
<div className='layout-header-user-console'>
|
|
574
|
+
<img className='avatar' src={avatar} />
|
|
575
|
+
<div className='name'>{name}</div>
|
|
434
576
|
<span
|
|
435
577
|
style={{
|
|
436
578
|
display: 'inline-block',
|
|
437
|
-
marginLeft: '4px'
|
|
579
|
+
marginLeft: '4px'
|
|
438
580
|
}}
|
|
439
581
|
className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
|
|
440
582
|
></span>
|
|
@@ -442,7 +584,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
442
584
|
</Popover>
|
|
443
585
|
</div>
|
|
444
586
|
)}
|
|
445
|
-
<div className=
|
|
587
|
+
<div className='layout-content-console'>{props.children}</div>
|
|
446
588
|
</div>
|
|
447
589
|
</Layout>
|
|
448
590
|
)
|
|
@@ -450,10 +592,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
450
592
|
|
|
451
593
|
function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
|
|
452
594
|
return (
|
|
453
|
-
<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
|
+
>
|
|
454
603
|
<path
|
|
455
|
-
fill=
|
|
456
|
-
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'
|
|
457
606
|
></path>
|
|
458
607
|
</svg>
|
|
459
608
|
)
|
|
@@ -480,7 +629,10 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
480
629
|
|
|
481
630
|
useEffect(() => {
|
|
482
631
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
483
|
-
if (
|
|
632
|
+
if (
|
|
633
|
+
(navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) &&
|
|
634
|
+
event.key.toLowerCase() === 'k'
|
|
635
|
+
) {
|
|
484
636
|
event.preventDefault()
|
|
485
637
|
const searchInput = document.querySelector('#menu-input') as HTMLInputElement
|
|
486
638
|
if (searchInput) {
|
|
@@ -491,7 +643,6 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
491
643
|
}
|
|
492
644
|
|
|
493
645
|
const handleClickOutside = (event: MouseEvent) => {
|
|
494
|
-
console.log(1)
|
|
495
646
|
const searchContainer = document.querySelector('.search-container')
|
|
496
647
|
if (searchContainer && !searchContainer.contains(event.target as Node)) {
|
|
497
648
|
setIsFocused(false)
|
|
@@ -530,7 +681,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
530
681
|
search(menuList as Router[])
|
|
531
682
|
setSearchResult(searchResults)
|
|
532
683
|
function search(data: Router[]) {
|
|
533
|
-
data.forEach(
|
|
684
|
+
data.forEach(item => {
|
|
534
685
|
if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
|
|
535
686
|
searchResults.push(item)
|
|
536
687
|
}
|
|
@@ -544,7 +695,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
544
695
|
const enter = (item: Router) => {
|
|
545
696
|
setIsFocused(false)
|
|
546
697
|
//如果搜索历史里面有这个item，就不再添加
|
|
547
|
-
if (searchHistory.findIndex(
|
|
698
|
+
if (searchHistory.findIndex(i => i.key === item.key) === -1) {
|
|
548
699
|
setSearchHistory([...searchHistory, item])
|
|
549
700
|
}
|
|
550
701
|
//如果是目录就找到目录下第一个菜单进入
|
|
@@ -571,50 +722,48 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
571
722
|
}
|
|
572
723
|
|
|
573
724
|
const deleteHistory = (item: Router) => {
|
|
574
|
-
setSearchHistory(searchHistory.filter(
|
|
725
|
+
setSearchHistory(searchHistory.filter(i => i.key !== item.key))
|
|
575
726
|
}
|
|
576
727
|
return (
|
|
577
728
|
<>
|
|
578
|
-
{collapsed
|
|
579
|
-
<div className=
|
|
580
|
-
<div className=
|
|
581
|
-
<
|
|
582
|
-
<
|
|
583
|
-
fill="#C3CAEF"
|
|
584
|
-
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"
|
|
585
|
-
></path>
|
|
586
|
-
</svg>
|
|
587
|
-
</div>
|
|
588
|
-
</div>
|
|
589
|
-
) : (
|
|
590
|
-
<div className="search-container">
|
|
591
|
-
<div className="search-console">
|
|
592
|
-
<div className="search-bg-mask">
|
|
593
|
-
<img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png" />
|
|
729
|
+
{!collapsed && (
|
|
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' />
|
|
594
734
|
</div>
|
|
595
735
|
<input
|
|
596
|
-
autoComplete=
|
|
597
|
-
id=
|
|
736
|
+
autoComplete='off'
|
|
737
|
+
id='menu-input'
|
|
598
738
|
value={searchTerm}
|
|
599
|
-
onChange={
|
|
600
|
-
className=
|
|
601
|
-
placeholder=
|
|
739
|
+
onChange={e => handleSearch(e.target.value)}
|
|
740
|
+
className='search-input'
|
|
741
|
+
placeholder='搜索菜单...'
|
|
602
742
|
onFocus={() => setIsFocused(true)}
|
|
603
|
-
onBlur={
|
|
743
|
+
onBlur={e => {
|
|
604
744
|
if (!e.relatedTarget?.closest('.lists-console')) {
|
|
605
745
|
setIsFocused(false)
|
|
606
746
|
}
|
|
607
747
|
}}
|
|
608
748
|
/>
|
|
609
|
-
<div className=
|
|
610
|
-
<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
|
+
>
|
|
611
757
|
<path
|
|
612
|
-
fill=
|
|
613
|
-
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'
|
|
614
760
|
></path>
|
|
615
761
|
</svg>
|
|
616
762
|
</div>
|
|
617
|
-
<div
|
|
763
|
+
<div
|
|
764
|
+
className='search-command'
|
|
765
|
+
style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
|
|
766
|
+
>
|
|
618
767
|
{navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
|
|
619
768
|
</div>
|
|
620
769
|
|
|
@@ -632,29 +781,31 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
632
781
|
<List
|
|
633
782
|
tabIndex={-1}
|
|
634
783
|
split={false}
|
|
635
|
-
className=
|
|
636
|
-
size=
|
|
784
|
+
className='lists-console'
|
|
785
|
+
size='small'
|
|
637
786
|
bordered
|
|
638
787
|
dataSource={searchResult}
|
|
639
|
-
renderItem={
|
|
788
|
+
renderItem={item => (
|
|
789
|
+
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|
|
790
|
+
)}
|
|
640
791
|
/>
|
|
641
792
|
) : (
|
|
642
793
|
<List
|
|
643
794
|
tabIndex={-1}
|
|
644
795
|
split={false}
|
|
645
|
-
className=
|
|
646
|
-
header=
|
|
647
|
-
size=
|
|
796
|
+
className='lists-console'
|
|
797
|
+
header='最近访问'
|
|
798
|
+
size='small'
|
|
648
799
|
bordered
|
|
649
800
|
dataSource={searchHistory}
|
|
650
|
-
renderItem={
|
|
801
|
+
renderItem={item => {
|
|
651
802
|
return (
|
|
652
803
|
<div
|
|
653
804
|
className={'search-item'}
|
|
654
805
|
style={{
|
|
655
806
|
display: 'flex',
|
|
656
807
|
justifyContent: 'space-between',
|
|
657
|
-
alignItems: 'center'
|
|
808
|
+
alignItems: 'center'
|
|
658
809
|
}}
|
|
659
810
|
>
|
|
660
811
|
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|