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