cfel-base-components 2.5.50 → 2.5.51

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.
Files changed (5) hide show
  1. package/demo/src/index.jsx +2 -2
  2. package/package.json +1 -1
  3. package/src/components/layout/index.scss +69 -67
  4. package/src/components/layout/index.tsx +171 -89
  5. package/src/components/layout-console/index-console.scss +66 -64
package/demo/src/index.jsx CHANGED
@@ -4,8 +4,8 @@ import style from "./index.module.less";
4
4
  import { SwapOutlined, QqOutlined, WeiboOutlined } from "@ant-design/icons";
5
5
  import { ConfigProvider } from "antd";
6
6
  import "./index.scss";
7
- import Layout from "../../src/components/layout-console";
8
- //import Layout from "../../src/components/layout-console";
7
+ import Layout from "../../src/components/layout";
8
+ import LayoutConsole from "../../src/components/layout-console";
9
9
  // import Account from '../../src/components/universal-pages/account';
10
10
  // import AccountInfo from '../../src/components/universal-pages/accountInfo';
11
11
  import CpcRole from "../../src/components/universal-pages/cpcRole";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cfel-base-components",
3
- "version": "2.5.50",
3
+ "version": "2.5.51",
4
4
  "description": "cfel-base-components",
5
5
  "main": "/src/index.tsx",
6
6
  "types": "src/index.d.ts",
package/src/components/layout/index.scss CHANGED
@@ -22,6 +22,75 @@ ul {
22
22
  list-style: none;
23
23
  cursor: pointer;
24
24
 
25
+ .#{$menuPrefixCls}-submenu-arrow {
26
+ display: inline-block;
27
+ position: absolute;
28
+ top: 52%;
29
+ right: 16px;
30
+ width: 16px;
31
+ height: 16px;
32
+ transform: translateY(0);
33
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
34
+
35
+ // 当菜单收起时隐藏箭头
36
+ .ant-layout-sider-collapsed & {
37
+ display: none;
38
+ }
39
+
40
+ &::before,
41
+ &::after {
42
+ position: absolute;
43
+ width: 6px;
44
+ height: 1.25px;
45
+ scale: 1.25;
46
+ background: #788bb1;
47
+ border-radius: 2px;
48
+ transition:
49
+ background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
50
+ transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
51
+ content: '';
52
+ }
53
+
54
+ &::before {
55
+ transform: rotate(-45deg) translateX(2.5px);
56
+ }
57
+
58
+ &::after {
59
+ transform: rotate(45deg) translateX(-2.5px);
60
+ }
61
+
62
+ // RTL support
63
+ &.#{$menuPrefixCls}-rtl,
64
+ .#{$menuPrefixCls}-submenu-rtl & {
65
+ right: auto;
66
+ left: 16px;
67
+ }
68
+ }
69
+
70
+ .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
71
+ .#{$menuPrefixCls}-submenu-arrow {
72
+ transform: translateY(-3px);
73
+ &::before {
74
+ transform: rotate(45deg) translateX(2.5px);
75
+ }
76
+ &::after {
77
+ transform: rotate(-45deg) translateX(-2.5px);
78
+ }
79
+ }
80
+ }
81
+
82
+ .#{$menuPrefixCls}-submenu-selected {
83
+ > .#{$menuPrefixCls}-submenu-title {
84
+ .#{$menuPrefixCls}-submenu-arrow {
85
+ &::before,
86
+ &::after {
87
+ background-color: #185dff;
88
+ }
89
+ }
90
+ }
91
+ }
92
+
93
+
25
94
  > li {
26
95
  &:hover {
27
96
  > .menu-item-content {
@@ -679,73 +748,6 @@ body {
679
748
  }
680
749
  }
681
750
 
682
- .#{$menuPrefixCls}-submenu-arrow {
683
- display: inline-block;
684
- position: absolute;
685
- top: 52%;
686
- right: 16px;
687
- width: 16px;
688
- height: 16px;
689
- transform: translateY(0);
690
- transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
691
-
692
- // 当菜单收起时隐藏箭头
693
- .ant-layout-sider-collapsed & {
694
- display: none;
695
- }
696
-
697
- &::before,
698
- &::after {
699
- position: absolute;
700
- width: 6px;
701
- height: 1.25px;
702
- scale: 1.25;
703
- background: #788bb1;
704
- border-radius: 2px;
705
- transition:
706
- background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
707
- transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
708
- content: '';
709
- }
710
-
711
- &::before {
712
- transform: rotate(-45deg) translateX(2.5px);
713
- }
714
-
715
- &::after {
716
- transform: rotate(45deg) translateX(-2.5px);
717
- }
718
-
719
- // RTL support
720
- &.#{$menuPrefixCls}-rtl,
721
- .#{$menuPrefixCls}-submenu-rtl & {
722
- right: auto;
723
- left: 16px;
724
- }
725
- }
726
-
727
- .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
728
- .#{$menuPrefixCls}-submenu-arrow {
729
- transform: translateY(-3px);
730
- &::before {
731
- transform: rotate(45deg) translateX(2.5px);
732
- }
733
- &::after {
734
- transform: rotate(-45deg) translateX(-2.5px);
735
- }
736
- }
737
- }
738
-
739
- .#{$menuPrefixCls}-submenu-selected {
740
- > .#{$menuPrefixCls}-submenu-title {
741
- .#{$menuPrefixCls}-submenu-arrow {
742
- &::before,
743
- &::after {
744
- background-color: #185dff;
745
- }
746
- }
747
- }
748
- }
749
751
 
750
752
  .#{$menuPrefixCls} {
751
753
  &-zoom-enter,
package/src/components/layout/index.tsx 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,7 +88,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
88
88
  }
89
89
 
90
90
  // 初始化选中菜单
91
- const [selectKey, setSelectKey] = useState<any>(findKeyPath('/' + location.pathname.split('/')[2]))
91
+ const [selectKey, setSelectKey] = useState<any>(
92
+ findKeyPath('/' + location.pathname.split('/')[2])
93
+ )
92
94
 
93
95
  const [infoOpen, setInfoOpen] = useState<string | null>(null)
94
96
 
@@ -133,7 +135,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
133
135
  //在这里找到当前菜单的上层目录
134
136
  const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
135
137
  //去重
136
- const set = new Set(paMenu.map((item) => item.key))
138
+ const set = new Set(paMenu.map(item => item.key))
137
139
  openKeys.forEach((element: string) => {
138
140
  set.add(element)
139
141
  })
@@ -146,10 +148,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
146
148
  account: false,
147
149
  id: false,
148
150
  tenantName: false,
149
- tenantId: false,
151
+ tenantId: false
150
152
  })
151
153
 
152
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
154
+ const onOpenChange: MenuProps['onOpenChange'] = keys => {
153
155
  setOpenKeys(keys)
154
156
  }
155
157
 
@@ -163,7 +165,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
163
165
  // 菜单动画
164
166
  const collapseNode = () => {
165
167
  return {
166
- height: 0,
168
+ height: 0
167
169
  }
168
170
  }
169
171
  const expandNode = (node: any) => {
@@ -177,26 +179,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
177
179
  onEnterStart: collapseNode,
178
180
  onEnterActive: expandNode,
179
181
  onLeaveStart: expandNode,
180
- onLeaveActive: collapseNode,
182
+ onLeaveActive: collapseNode
181
183
  }
182
184
 
183
185
  const verticalMotion = {
184
186
  motionName: 'rc-menu-open-zoom',
185
187
  motionAppear: true,
186
188
  motionEnter: true,
187
- motionLeave: true,
189
+ motionLeave: true
188
190
  }
189
191
 
190
192
  return (
191
- <Layout className="layout-warps">
193
+ <Layout className='layout-warps'>
192
194
  {Array.isArray(menuList) && menuList.length > 0 && (
193
195
  <Sider
194
- className="layout-side"
196
+ className='layout-side'
195
197
  collapsible
196
198
  trigger={null}
197
199
  collapsed={collapsed}
198
200
  width={260}
199
- onCollapse={(value) => {
201
+ onCollapse={value => {
200
202
  if (onCollapse) {
201
203
  onCollapse(value)
202
204
  }
@@ -204,21 +206,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
204
206
  setCollapsed(value)
205
207
  }}
206
208
  >
207
- <div className="layout-side-mask1"></div>
208
-
209
- <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
210
- {!collapsed && (
211
- <img
212
- style={{ zIndex: 99 }}
213
- onClick={() => {
214
- window.open('/home')
215
- }}
216
- className={`logo-base current-logo`}
217
- src={logo || logoUrl}
218
- />
219
- )}
220
- {collapsed && <img className={`logo-sub`} src={subLogoUrl} />}
221
- {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
209
+ <div className='layout-side-mask1'></div>
210
+
211
+ <div
212
+ className='header-logo'
213
+ style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
214
+ >
215
+ <div
216
+ onClick={() => {
217
+ window.open('/home')
218
+ }}
219
+ >
220
+ {!collapsed && <img className={`logo-base current-logo`} src={logo || logoUrl} />}
221
+ {collapsed && <img className={`logo-sub`} src={subLogoUrl} />}
222
+ {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
223
+ </div>
222
224
 
223
225
  {/* {!collapsed && (
224
226
  <div
@@ -235,7 +237,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
235
237
  {collapsed && (
236
238
  <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
237
239
  <div
238
- className="close-trigger"
240
+ className='close-trigger'
239
241
  onClick={() => {
240
242
  setCollapsed(false)
241
243
  }}
@@ -248,12 +250,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
248
250
  <div style={{ height: 24 }}></div>
249
251
 
250
252
  <div style={{ width: '100%', padding: '0 16px' }}>
251
- <Search menuList={menuList} collapsed={collapsed} type={type || ''} umiHistory={umiHistory} setSelectKey={setSelectKey} findKeyPath={findKeyPath} />
253
+ <Search
254
+ menuList={menuList}
255
+ collapsed={collapsed}
256
+ type={type || ''}
257
+ umiHistory={umiHistory}
258
+ setSelectKey={setSelectKey}
259
+ findKeyPath={findKeyPath}
260
+ />
252
261
  </div>
253
262
 
254
263
  {!collapsed && <div style={{ height: 12 }}></div>}
255
264
 
256
- <div className="layout-menu">
265
+ <div className='layout-menu'>
257
266
  <RcMenu
258
267
  mode={collapsed ? 'vertical' : 'inline'}
259
268
  className={`menu${collapsed ? '-collapsed' : ''}`}
@@ -267,7 +276,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
267
276
  onMenuClick(item)
268
277
  }
269
278
  }}
270
- triggerSubMenuAction="hover"
279
+ triggerSubMenuAction='hover'
271
280
  >
272
281
  {menuList.map((item: any) => {
273
282
  const isSelected = selectKey.includes(item.key)
@@ -278,13 +287,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
278
287
  }
279
288
  return (
280
289
  <SubMenu
281
- popupClassName="rc-menu-submenu-popup"
290
+ popupClassName='rc-menu-submenu-popup'
282
291
  key={item.key}
283
- className="menu-item-content"
292
+ className='menu-item-content'
284
293
  title={
285
- <div className="sub-list">
286
- <div className="menu-item-inner">
287
- <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
294
+ <div className='sub-list'>
295
+ <div className='menu-item-inner'>
296
+ <span
297
+ className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
298
+ >
299
+ {item.icon}
300
+ </span>
288
301
  {!collapsed && <span className={classNames}>{item.label}</span>}
289
302
  </div>
290
303
  </div>
@@ -301,10 +314,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
301
314
  if (child.children) {
302
315
  return (
303
316
  <SubMenu
304
- popupClassName="rc-menu-submenu-popup"
305
- className="menu-item-content sub-li"
317
+ popupClassName='rc-menu-submenu-popup'
318
+ className='menu-item-content sub-li'
306
319
  key={child.key}
307
- title={<div className="sub-list">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>}
320
+ title={
321
+ <div className='sub-list'>
322
+ {!collapsed && (
323
+ <span
324
+ className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
325
+ >
326
+ {child.label}
327
+ </span>
328
+ )}
329
+ </div>
330
+ }
308
331
  >
309
332
  {child.children.map((grandChild: any) => {
310
333
  const isSelected = selectKey.includes(grandChild.key)
@@ -315,8 +338,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
315
338
  }
316
339
  }
317
340
  return (
318
- <MenuItem key={grandChild.key} className="grand-li">
319
- <div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{grandChild.label}</span>}</div>
341
+ <MenuItem key={grandChild.key} className='grand-li'>
342
+ <div className='menu-item-content'>
343
+ {!collapsed && (
344
+ <span
345
+ className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
346
+ >
347
+ {grandChild.label}
348
+ </span>
349
+ )}
350
+ </div>
320
351
  </MenuItem>
321
352
  )
322
353
  })}
@@ -324,8 +355,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
324
355
  )
325
356
  }
326
357
  return (
327
- <MenuItem key={child.key} className="sub-li">
328
- <div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>
358
+ <MenuItem key={child.key} className='sub-li'>
359
+ <div className='menu-item-content'>
360
+ {!collapsed && (
361
+ <span
362
+ className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
363
+ >
364
+ {child.label}
365
+ </span>
366
+ )}
367
+ </div>
329
368
  </MenuItem>
330
369
  )
331
370
  })}
@@ -339,9 +378,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
339
378
  classNames += ' submenu-selected'
340
379
  }
341
380
  return (
342
- <MenuItem key={item.key} className="menu-item-content">
381
+ <MenuItem key={item.key} className='menu-item-content'>
343
382
  <div>
344
- <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
383
+ <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
384
+ {item.icon}
385
+ </span>
345
386
  {!collapsed && <span className={classNames}>{item.label}</span>}
346
387
  </div>
347
388
  </MenuItem>
@@ -353,21 +394,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
353
394
  </Sider>
354
395
  )}
355
396
 
356
- <div className="layout-main">
397
+ <div className='layout-main'>
357
398
  {!isHideHeader && (
358
- <div className="layout-header">
399
+ <div className='layout-header'>
359
400
  {appName && (
360
- <div className="app-name">
401
+ <div className='app-name'>
361
402
  <strong>{appName}</strong>
362
403
  </div>
363
404
  )}
364
405
 
365
- <div className="layout-header-fill" />
406
+ <div className='layout-header-fill' />
366
407
 
367
- <div className="layout-header-actions">
408
+ <div className='layout-header-actions'>
368
409
  {actions?.map((item, index) => {
369
410
  return (
370
- <div className="actions-item" key={index}>
411
+ <div className='actions-item' key={index}>
371
412
  {item}
372
413
  </div>
373
414
  )
@@ -375,33 +416,40 @@ export default function LiosLayout(props: LiosLayoutlProps) {
375
416
  </div>
376
417
 
377
418
  <Popover
378
- placement="bottom"
419
+ placement='bottom'
379
420
  content={
380
- <UserCard myWalletInfo={myWalletInfo} MyLoginInfo={MyLoginInfo} amountInfo={amountInfo} customAction={customAction} isCopied={isCopied} copyTextToClipboard={copyTextToClipboard} />
421
+ <UserCard
422
+ myWalletInfo={myWalletInfo}
423
+ MyLoginInfo={MyLoginInfo}
424
+ amountInfo={amountInfo}
425
+ customAction={customAction}
426
+ isCopied={isCopied}
427
+ copyTextToClipboard={copyTextToClipboard}
428
+ />
381
429
  }
382
430
  arrow={false}
383
- trigger="click"
384
- onOpenChange={(e) => {
431
+ trigger='click'
432
+ onOpenChange={e => {
385
433
  setInfoOpen(e ? 'up' : 'down')
386
434
  if (!e) return
387
435
  setIsCopied({
388
436
  account: false,
389
437
  id: false,
390
438
  tenantName: false,
391
- tenantId: false,
439
+ tenantId: false
392
440
  })
393
441
  if (myLoginInfoAction) {
394
442
  myLoginInfoAction()
395
443
  }
396
444
  }}
397
445
  >
398
- <div className="layout-header-user">
399
- <img className="avatar" src={avatar} />
400
- <div className="name">{name}</div>
446
+ <div className='layout-header-user'>
447
+ <img className='avatar' src={avatar} />
448
+ <div className='name'>{name}</div>
401
449
  <span
402
450
  style={{
403
451
  display: 'inline-block',
404
- marginLeft: '8px',
452
+ marginLeft: '8px'
405
453
  }}
406
454
  className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
407
455
  ></span>
@@ -409,7 +457,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
409
457
  </Popover>
410
458
  </div>
411
459
  )}
412
- <div className="layout-content">{props.children}</div>
460
+ <div className='layout-content'>{props.children}</div>
413
461
  </div>
414
462
  </Layout>
415
463
  )
@@ -417,10 +465,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
417
465
 
418
466
  function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
419
467
  return (
420
- <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">
468
+ <svg
469
+ style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
470
+ viewBox='0 0 1024 1024'
471
+ version='1.1'
472
+ xmlns='http://www.w3.org/2000/svg'
473
+ width='20'
474
+ height='20'
475
+ >
421
476
  <path
422
477
  fill={type === 'console' ? '#FFFFFF' : '#817F9B'}
423
- 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"
478
+ 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'
424
479
  ></path>
425
480
  </svg>
426
481
  )
@@ -437,7 +492,10 @@ type SearchProps = {
437
492
  function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPath }: SearchProps) {
438
493
  useEffect(() => {
439
494
  const handleKeyDown = (event: KeyboardEvent) => {
440
- if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
495
+ if (
496
+ (navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) &&
497
+ event.key.toLowerCase() === 'k'
498
+ ) {
441
499
  event.preventDefault()
442
500
  const searchInput = document.querySelector('#menu-input') as HTMLInputElement
443
501
  if (searchInput) {
@@ -496,7 +554,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
496
554
  search(menuList as Router[])
497
555
  setSearchResult(searchResults)
498
556
  function search(data: Router[]) {
499
- data.forEach((item) => {
557
+ data.forEach(item => {
500
558
  if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
501
559
  searchResults.push(item)
502
560
  }
@@ -510,7 +568,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
510
568
  const enter = (item: Router) => {
511
569
  setIsFocused(false)
512
570
  //如果搜索历史里面有这个item，就不再添加
513
- if (searchHistory.findIndex((i) => i.key === item.key) === -1) {
571
+ if (searchHistory.findIndex(i => i.key === item.key) === -1) {
514
572
  setSearchHistory([...searchHistory, item])
515
573
  }
516
574
  //如果是目录就找到目录下第一个菜单进入
@@ -537,45 +595,60 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
537
595
  }
538
596
 
539
597
  const deleteHistory = (item: Router) => {
540
- setSearchHistory(searchHistory.filter((i) => i.key !== item.key))
598
+ setSearchHistory(searchHistory.filter(i => i.key !== item.key))
541
599
  }
542
600
  return (
543
601
  <>
544
602
  {collapsed ? (
545
- <div className="search-mobile-console">
546
- <div className="search-icon">
547
- <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
603
+ <div className='search-mobile-console'>
604
+ <div className='search-icon'>
605
+ <svg
606
+ viewBox='0 0 1024 1024'
607
+ version='1.1'
608
+ xmlns='http://www.w3.org/2000/svg'
609
+ width='18'
610
+ height='18'
611
+ >
548
612
  <path
549
613
  fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
550
- d="M962.048 907.776l-229.0176-229.0176a384.3072 384.3072 0 1 0-54.272 54.272l229.0176 229.0176a38.4 38.4 0 0 0 54.272-54.272zM436.1216 743.0656a306.944 306.944 0 1 1 306.944-306.944 307.3024 307.3024 0 0 1-306.944 306.944z"
614
+ 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'
551
615
  ></path>
552
616
  </svg>
553
617
  </div>
554
618
  </div>
555
619
  ) : (
556
- <div className="search-container">
557
- <div className="search">
558
- <div className="search-bg-mask">
559
- <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png" />
620
+ <div className='search-container'>
621
+ <div className='search'>
622
+ <div className='search-bg-mask'>
623
+ <img src='https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png' />
560
624
  </div>
561
625
  <input
562
- autoComplete="off"
563
- id="menu-input"
626
+ autoComplete='off'
627
+ id='menu-input'
564
628
  value={searchTerm}
565
- onChange={(e) => handleSearch(e.target.value)}
566
- className="search-input"
567
- placeholder="搜索菜单..."
629
+ onChange={e => handleSearch(e.target.value)}
630
+ className='search-input'
631
+ placeholder='搜索菜单...'
568
632
  onFocus={() => setIsFocused(true)}
569
633
  />
570
- <div className="search-icon">
571
- <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
634
+ <div className='search-icon'>
635
+ <svg
636
+ viewBox='0 0 1024 1024'
637
+ version='1.1'
638
+ xmlns='http://www.w3.org/2000/svg'
639
+ width='18'
640
+ height='18'
641
+ >
572
642
  <path
573
643
  fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
574
- 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"
644
+ 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'
575
645
  ></path>
576
646
  </svg>
577
647
  </div>
578
- <div className="search-command" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
648
+ <div
649
+ className='search-command'
650
+ style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
651
+ >
579
652
  {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
580
653
  </div>
581
654
  </div>
@@ -583,23 +656,32 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
583
656
  {isFocused && (
584
657
  <>
585
658
  {searchTerm ? (
586
- <List split={false} className="lists" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
659
+ <List
660
+ split={false}
661
+ className='lists'
662
+ size='small'
663
+ bordered
664
+ dataSource={searchResult}
665
+ renderItem={item => (
666
+ <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
667
+ )}
668
+ />
587
669
  ) : (
588
670
  <List
589
671
  split={false}
590
- className="lists"
591
- header="最近访问"
592
- size="small"
672
+ className='lists'
673
+ header='最近访问'
674
+ size='small'
593
675
  bordered
594
676
  dataSource={searchHistory}
595
- renderItem={(item) => {
677
+ renderItem={item => {
596
678
  return (
597
679
  <div
598
680
  className={'search-item'}
599
681
  style={{
600
682
  display: 'flex',
601
683
  justifyContent: 'space-between',
602
- alignItems: 'center',
684
+ alignItems: 'center'
603
685
  }}
604
686
  >
605
687
  <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
package/src/components/layout-console/index-console.scss CHANGED
@@ -22,6 +22,72 @@ ul {
22
22
  list-style: none;
23
23
  cursor: pointer;
24
24
 
25
+ .#{$menuPrefixCls}-submenu-arrow {
26
+ display: inline-block;
27
+ position: absolute;
28
+ top: 52%;
29
+ right: 16px;
30
+ width: 16px;
31
+ height: 16px;
32
+ transform: translateY(0);
33
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
34
+ // 当菜单收起时隐藏箭头
35
+ .ant-layout-sider-collapsed & {
36
+ display: none;
37
+ }
38
+
39
+ &::before,
40
+ &::after {
41
+ position: absolute;
42
+ width: 6px;
43
+ height: 1.25px;
44
+ scale: 1.25;
45
+ background: rgba(255, 255, 255, 0.65);
46
+ border-radius: 2px;
47
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
48
+ content: '';
49
+ }
50
+
51
+ &::before {
52
+ transform: rotate(-45deg) translateX(2.5px);
53
+ }
54
+
55
+ &::after {
56
+ transform: rotate(45deg) translateX(-2.5px);
57
+ }
58
+
59
+ // RTL support
60
+ &.#{$menuPrefixCls}-rtl,
61
+ .#{$menuPrefixCls}-submenu-rtl & {
62
+ right: auto;
63
+ left: 16px;
64
+ }
65
+ }
66
+
67
+ .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
68
+ .#{$menuPrefixCls}-submenu-arrow {
69
+ transform: translateY(-3px);
70
+ &::before {
71
+ transform: rotate(45deg) translateX(2.5px);
72
+ }
73
+ &::after {
74
+ transform: rotate(-45deg) translateX(-2.5px);
75
+ }
76
+ }
77
+ }
78
+
79
+ .#{$menuPrefixCls}-submenu-selected {
80
+ > .#{$menuPrefixCls}-submenu-title {
81
+ .#{$menuPrefixCls}-submenu-arrow {
82
+ &::before,
83
+ &::after {
84
+ background-color: rgba(255, 255, 255);
85
+ }
86
+ }
87
+ }
88
+ }
89
+
90
+
25
91
  > li {
26
92
  &:hover {
27
93
  > .menu-item-content {
@@ -714,70 +780,6 @@ body {
714
780
  }
715
781
  }
716
782
 
717
- .#{$menuPrefixCls}-submenu-arrow {
718
- display: inline-block;
719
- position: absolute;
720
- top: 52%;
721
- right: 16px;
722
- width: 16px;
723
- height: 16px;
724
- transform: translateY(0);
725
- transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
726
- // 当菜单收起时隐藏箭头
727
- .ant-layout-sider-collapsed & {
728
- display: none;
729
- }
730
-
731
- &::before,
732
- &::after {
733
- position: absolute;
734
- width: 6px;
735
- height: 1.25px;
736
- scale: 1.25;
737
- background: rgba(255, 255, 255, 0.65);
738
- border-radius: 2px;
739
- transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
740
- content: '';
741
- }
742
-
743
- &::before {
744
- transform: rotate(-45deg) translateX(2.5px);
745
- }
746
-
747
- &::after {
748
- transform: rotate(45deg) translateX(-2.5px);
749
- }
750
-
751
- // RTL support
752
- &.#{$menuPrefixCls}-rtl,
753
- .#{$menuPrefixCls}-submenu-rtl & {
754
- right: auto;
755
- left: 16px;
756
- }
757
- }
758
-
759
- .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
760
- .#{$menuPrefixCls}-submenu-arrow {
761
- transform: translateY(-3px);
762
- &::before {
763
- transform: rotate(45deg) translateX(2.5px);
764
- }
765
- &::after {
766
- transform: rotate(-45deg) translateX(-2.5px);
767
- }
768
- }
769
- }
770
-
771
- .#{$menuPrefixCls}-submenu-selected {
772
- > .#{$menuPrefixCls}-submenu-title {
773
- .#{$menuPrefixCls}-submenu-arrow {
774
- &::before,
775
- &::after {
776
- background-color: rgba(255, 255, 255);
777
- }
778
- }
779
- }
780
- }
781
783
 
782
784
  .#{$menuPrefixCls} {
783
785
  &-zoom-enter,