cfel-base-components 2.5.55 → 2.5.57

package/src/components/layout/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Layout, List, Menu, MenuProps, Popover } from 'antd'
 import UserCard from './user-card'
 import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
-import { CloseCircleOutlined } from '@ant-design/icons'
+import { CloseCircleOutlined, RightOutlined } from '@ant-design/icons'
 const { Sider } = Layout
 import './index.scss'
 
@@ -64,7 +64,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     isHideHeader,
     onCollapse,
     type,
-    umiHistory,
+    umiHistory
   } = props
 
   const findKeyPath = (pathname: string) => {
@@ -88,7 +88,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   }
 
   // 初始化选中菜单
-  const [selectKey, setSelectKey] = useState<any>(findKeyPath('/' + location.pathname.split('/')[2]))
+  const [selectKey, setSelectKey] = useState<any>(
+    findKeyPath('/' + location.pathname.split('/')[2])
+  )
 
   const [infoOpen, setInfoOpen] = useState<string | null>(null)
 
@@ -107,7 +109,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
   // 初始化展开菜单
   const [openKeys, setOpenKeys] = useState<string[]>(defaultOpenKeys || [])
-  const [activeThirdLevelMenu, setActiveThirdLevelMenu] = useState<string | null>(null)
 
   //处理搜索菜单后自动展开目录
   const findParentMenu = (menuList: any[], pathname: string) => {
@@ -134,11 +135,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     //在这里找到当前菜单的上层目录
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
     //去重
-    const set = new Set(paMenu.map((item) => item.key))
+    const set = new Set(paMenu.map(item => item.key))
+
     openKeys.forEach((element: string) => {
       set.add(element)
     })
     setOpenKeys(Array.from(set))
+
+    // 设置选中的菜单项
+    const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
+    setSelectKey(selectedPath)
   }, [location.pathname])
 
   // 初始化折叠状态
@@ -147,20 +153,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     account: false,
     id: false,
     tenantName: false,
-    tenantId: false,
+    tenantId: false
   })
 
-  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+  const onOpenChange: MenuProps['onOpenChange'] = keys => {
     // Find the last opened key
-    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
+    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1)
 
     if (latestOpenKey) {
       // If opening a new key
-      const rootSubmenuKeys = menuList.map((item) => item.key)
+      const rootSubmenuKeys = menuList.map(item => item.key)
 
       if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
         // If it's a third level menu, only keep its parent menu open
-        const parentKey = keys.find((key) => rootSubmenuKeys.includes(key))
+        const parentKey = keys.find(key => rootSubmenuKeys.includes(key))
         setOpenKeys(parentKey ? [parentKey, latestOpenKey] : [latestOpenKey])
       } else {
         // If it's a second level menu, only keep it open
@@ -182,7 +188,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   // 菜单动画
   const collapseNode = () => {
     return {
-      height: 0,
+      height: 0
     }
   }
   const expandNode = (node: any) => {
@@ -196,33 +202,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     onEnterStart: collapseNode,
     onEnterActive: expandNode,
     onLeaveStart: expandNode,
-    onLeaveActive: collapseNode,
+    onLeaveActive: collapseNode
   }
 
   const verticalMotion = {
     motionName: 'rc-menu-open-zoom',
     motionAppear: true,
     motionEnter: true,
-    motionLeave: true,
+    motionLeave: true
   }
 
-  useEffect(() => {
-    return () => {
-      setActiveThirdLevelMenu(null)
-      setOpenKeys([])
-    }
-  }, [])
-
   return (
-    <Layout className="layout-warps">
+    <Layout className='layout-warps'>
       {Array.isArray(menuList) && menuList.length > 0 && (
         <Sider
-          className="layout-side"
+          className='layout-side'
           collapsible
           trigger={null}
           collapsed={collapsed}
           width={260}
-          onCollapse={(value) => {
+          onCollapse={value => {
             if (onCollapse) {
               onCollapse(value)
             }
@@ -230,10 +229,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className="layout-side-mask1"></div>
-          <div className="layout-side-mask2"></div>
+          <div className='layout-side-mask1'></div>
+          <div className='layout-side-mask2'></div>
 
-          <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
+          <div
+            className='header-logo'
+            style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
+          >
             <div
               onClick={() => {
                 window.open('/home')
@@ -243,8 +245,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {collapsed && <img className={`logo-sub`} src={subLogoUrl} />}
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
-
-            {/*  {!collapsed && (
+            {!collapsed && (
               <div
                 className='trigger'
                 onClick={() => {
@@ -253,13 +254,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               >
                 <Arrow collapsed={true} type={type} />
               </div>
-            )} */}
+            )}
           </div>
 
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className="close-trigger"
+                className='close-trigger'
                 onClick={() => {
                   localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
@@ -270,15 +271,22 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </div>
           )}
 
-          <div style={{ height: 24 }}></div>
+          {!collapsed && <div style={{ height: 24 }}></div>}
 
           <div style={{ width: '100%', padding: '0 16px' }}>
-            <Search menuList={menuList} collapsed={collapsed} type={type || ''} umiHistory={umiHistory} setSelectKey={setSelectKey} findKeyPath={findKeyPath} />
+            <Search
+              menuList={menuList}
+              collapsed={collapsed}
+              type={type || ''}
+              umiHistory={umiHistory}
+              setSelectKey={setSelectKey}
+              findKeyPath={findKeyPath}
+            />
           </div>
 
           {!collapsed && <div style={{ height: 12 }}></div>}
 
-          <div className="layout-menu">
+          <div className='layout-menu'>
             <RcMenu
               mode={collapsed ? 'vertical' : 'inline'}
               className={`menu${collapsed ? '-collapsed' : ''}`}
@@ -292,7 +300,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   onMenuClick(item)
                 }
               }}
-              triggerSubMenuAction="hover"
+              triggerSubMenuAction='hover'
             >
               {menuList.map((item: any) => {
                 const isSelected = selectKey.includes(item.key)
@@ -301,15 +309,112 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   if (isSelected) {
                     classNames += ' submenu-selected'
                   }
+                  if (collapsed) {
+                    return (
+                      <Popover
+                        key={item.key}
+                        align={{
+                          offset: [33, 0]
+                        }}
+                        placement='right'
+                        arrow={false}
+                        content={
+                          <div className='menu-popover'>
+                            {item.children.map((child: any) => {
+                              const isSelected = selectKey.includes(child.key)
+                              if (child.children) {
+                                return (
+                                  <Popover
+                                    key={child.key}
+                                    align={{
+                                      offset: [10, 0]
+                                    }}
+                                    placement='right'
+                                    arrow={false}
+                                    content={
+                                      <div className='menu-popover' style={{ width: '146px' }}>
+                                        {child.children.map((grandChild: any) => {
+                                          const isSelected = selectKey.includes(grandChild.key)
+                                          return (
+                                            <MenuItem
+                                              onClick={() => {
+                                                if (onMenuClick) {
+                                                  onMenuClick(grandChild)
+                                                }
+                                              }}
+                                              key={grandChild.key}
+                                              className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                            >
+                                              <div style={{ width: '130px' }}>
+                                                <span className={`menu-item-label`}>
+                                                  {grandChild.label}
+                                                </span>
+                                              </div>
+                                            </MenuItem>
+                                          )
+                                        })}
+                                      </div>
+                                    }
+                                  >
+                                    <SubMenu
+                                      className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                      key={child.key}
+                                      title={
+                                        <div className='sub-list'>
+                                          <span className={`menu-item-label`}>{child.label}</span>
+                                          <RightOutlined />
+                                        </div>
+                                      }
+                                    ></SubMenu>
+                                  </Popover>
+                                )
+                              }
+                              return (
+                                <MenuItem
+                                  onClick={() => {
+                                    if (onMenuClick) {
+                                      onMenuClick(child)
+                                    }
+                                  }}
+                                  key={child.key}
+                                  className={`sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                >
+                                  <div className='menu-item-content sub-list'>{child.label}</div>
+                                </MenuItem>
+                              )
+                            })}
+                          </div>
+                        }
+                      >
+                        <SubMenu
+                          className='menu-item-content sub-li'
+                          title={
+                            <div className='sub-list'>
+                              <div>
+                                <span
+                                  className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
+                                >
+                                  {item.icon}
+                                </span>
+                              </div>
+                            </div>
+                          }
+                        ></SubMenu>
+                      </Popover>
+                    )
+                  }
                   return (
                     <SubMenu
-                      popupClassName="rc-menu-submenu-popup"
                       key={item.key}
-                      className="menu-item-content"
+                      className='menu-item-content'
                       title={
-                        <div className="sub-list">
-                          <div className="menu-item-inner">
-                            <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
+                        <div className='sub-list'>
+                          <div className='menu-item-inner'>
+                            <span
+                              className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
+                            >
+                              {item.icon}
+                            </span>
                             {!collapsed && <span className={classNames}>{item.label}</span>}
                           </div>
                         </div>
@@ -326,10 +431,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         if (child.children) {
                           return (
                             <SubMenu
-                              popupClassName="rc-menu-submenu-popup"
-                              className="menu-item-content sub-li"
+                              className='menu-item-content sub-li'
                               key={child.key}
-                              title={<div className="sub-list">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>}
+                              title={
+                                <div className='sub-list'>
+                                  {!collapsed && (
+                                    <span
+                                      className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
+                                    >
+                                      {child.label}
+                                    </span>
+                                  )}
+                                </div>
+                              }
                             >
                               {child.children.map((grandChild: any) => {
                                 const isSelected = selectKey.includes(grandChild.key)
@@ -340,8 +454,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                   }
                                 }
                                 return (
-                                  <MenuItem key={grandChild.key} className="grand-li">
-                                    <div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{grandChild.label}</span>}</div>
+                                  <MenuItem key={grandChild.key} className='grand-li'>
+                                    <div className='menu-item-content'>
+                                      {!collapsed && (
+                                        <span
+                                          className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
+                                        >
+                                          {grandChild.label}
+                                        </span>
+                                      )}
+                                    </div>
                                   </MenuItem>
                                 )
                               })}
@@ -349,8 +471,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                           )
                         }
                         return (
-                          <MenuItem key={child.key} className="sub-li">
-                            <div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>
+                          <MenuItem key={child.key} className='sub-li'>
+                            <div className='menu-item-content'>
+                              {!collapsed && (
+                                <span
+                                  className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
+                                >
+                                  {child.label}
+                                </span>
+                              )}
+                            </div>
                           </MenuItem>
                         )
                       })}
@@ -366,14 +496,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   return (
                     <MenuItem
                       key={item.key}
-                      className="menu-item-content"
+                      className='menu-item-content'
                       style={{
                         position: 'relative',
-                        zIndex: 99,
+                        zIndex: 99
                       }}
                     >
-                      <div className="first-li">
-                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
+                      <div className='first-li'>
+                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
+                          {item.icon}
+                        </span>
                         {!collapsed && <span className={classNames}>{item.label}</span>}
                       </div>
                     </MenuItem>
@@ -385,21 +517,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </Sider>
       )}
 
-      <div className="layout-main">
+      <div className='layout-main'>
         {!isHideHeader && (
-          <div className="layout-header">
+          <div className='layout-header'>
             {appName && (
-              <div className="app-name">
+              <div className='app-name'>
                 <strong>{appName}</strong>
               </div>
             )}
 
-            <div className="layout-header-fill" />
+            <div className='layout-header-fill' />
 
-            <div className="layout-header-actions">
+            <div className='layout-header-actions'>
               {actions?.map((item, index) => {
                 return (
-                  <div className="actions-item" key={index}>
+                  <div className='actions-item' key={index}>
                     {item}
                   </div>
                 )
@@ -407,33 +539,40 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </div>
 
             <Popover
-              placement="bottom"
+              placement='bottom'
               content={
-                <UserCard myWalletInfo={myWalletInfo} MyLoginInfo={MyLoginInfo} amountInfo={amountInfo} customAction={customAction} isCopied={isCopied} copyTextToClipboard={copyTextToClipboard} />
+                <UserCard
+                  myWalletInfo={myWalletInfo}
+                  MyLoginInfo={MyLoginInfo}
+                  amountInfo={amountInfo}
+                  customAction={customAction}
+                  isCopied={isCopied}
+                  copyTextToClipboard={copyTextToClipboard}
+                />
               }
               arrow={false}
-              trigger="click"
-              onOpenChange={(e) => {
+              trigger='click'
+              onOpenChange={e => {
                 setInfoOpen(e ? 'up' : 'down')
                 if (!e) return
                 setIsCopied({
                   account: false,
                   id: false,
                   tenantName: false,
-                  tenantId: false,
+                  tenantId: false
                 })
                 if (myLoginInfoAction) {
                   myLoginInfoAction()
                 }
               }}
             >
-              <div className="layout-header-user">
-                <img className="avatar" src={avatar} />
-                <div className="name">{name}</div>
+              <div className='layout-header-user'>
+                <img className='avatar' src={avatar} />
+                <div className='name'>{name}</div>
                 <span
                   style={{
                     display: 'inline-block',
-                    marginLeft: '8px',
+                    marginLeft: '8px'
                   }}
                   className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
                 ></span>
@@ -441,7 +580,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </Popover>
           </div>
         )}
-        <div className="layout-content">{props.children}</div>
+        <div className='layout-content'>{props.children}</div>
       </div>
     </Layout>
   )
@@ -449,10 +588,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
 function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
   return (
-    <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">
+    <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'
+    >
       <path
-        fill="817F9B"
-        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"
+        fill='#7D8295'
+        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'
       ></path>
     </svg>
   )
@@ -469,7 +615,10 @@ type SearchProps = {
 function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPath }: SearchProps) {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      if (
+        (navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) &&
+        event.key.toLowerCase() === 'k'
+      ) {
         event.preventDefault()
         const searchInput = document.querySelector('#menu-input') as HTMLInputElement
         if (searchInput) {
@@ -528,7 +677,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
     search(menuList as Router[])
     setSearchResult(searchResults)
     function search(data: Router[]) {
-      data.forEach((item) => {
+      data.forEach(item => {
         if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
           searchResults.push(item)
         }
@@ -542,7 +691,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
   const enter = (item: Router) => {
     setIsFocused(false)
     //如果搜索历史里面有这个item，就不再添加
-    if (searchHistory.findIndex((i) => i.key === item.key) === -1) {
+    if (searchHistory.findIndex(i => i.key === item.key) === -1) {
       setSearchHistory([...searchHistory, item])
     }
     //如果是目录就找到目录下第一个菜单进入
@@ -569,45 +718,43 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
   }
 
   const deleteHistory = (item: Router) => {
-    setSearchHistory(searchHistory.filter((i) => i.key !== item.key))
+    setSearchHistory(searchHistory.filter(i => i.key !== item.key))
   }
   return (
     <>
-      {collapsed ? (
-        <div className="search-mobile-console">
-          <div className="search-icon">
-            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
-              <path
-                fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
-                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"
-              ></path>
-            </svg>
-          </div>
-        </div>
-      ) : (
-        <div className="search-container">
-          <div className="search">
-            <div className="search-bg-mask">
-              <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png" />
+      {!collapsed && (
+        <div className='search-container'>
+          <div className='search'>
+            <div className='search-bg-mask'>
+              <img src='https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png' />
             </div>
             <input
-              autoComplete="off"
-              id="menu-input"
+              autoComplete='off'
+              id='menu-input'
               value={searchTerm}
-              onChange={(e) => handleSearch(e.target.value)}
-              className="search-input"
-              placeholder="搜索菜单..."
+              onChange={e => handleSearch(e.target.value)}
+              className='search-input'
+              placeholder='搜索菜单...'
               onFocus={() => setIsFocused(true)}
             />
-            <div className="search-icon">
-              <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+            <div className='search-icon'>
+              <svg
+                viewBox='0 0 1024 1024'
+                version='1.1'
+                xmlns='http://www.w3.org/2000/svg'
+                width='18'
+                height='18'
+              >
                 <path
                   fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
-                  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"
+                  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'
                 ></path>
               </svg>
             </div>
-            <div className="search-command" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
+            <div
+              className='search-command'
+              style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
+            >
               {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
             </div>
           </div>
@@ -615,23 +762,32 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
             {isFocused && (
               <>
                 {searchTerm ? (
-                  <List split={false} className="lists" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
+                  <List
+                    split={false}
+                    className='lists'
+                    size='small'
+                    bordered
+                    dataSource={searchResult}
+                    renderItem={item => (
+                      <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
+                    )}
+                  />
                 ) : (
                   <List
                     split={false}
-                    className="lists"
-                    header="最近访问"
-                    size="small"
+                    className='lists'
+                    header='最近访问'
+                    size='small'
                     bordered
                     dataSource={searchHistory}
-                    renderItem={(item) => {
+                    renderItem={item => {
                       return (
                         <div
                           className={'search-item'}
                           style={{
                             display: 'flex',
                             justifyContent: 'space-between',
-                            alignItems: 'center',
+                            alignItems: 'center'
                           }}
                         >
                           <List.Item onClick={() => enter(item)}>{item.label}</List.Item>