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