cfel-base-components 2.5.47 → 2.5.48

package/src/components/layout/index.tsx

@@ -4,6 +4,12 @@ import UserCard from './user-card'
 import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
 import { CloseCircleOutlined } from '@ant-design/icons'
 const { Sider } = Layout
+import './index.scss'
+
+interface TreeNode {
+  key: string
+  children?: TreeNode[]
+}
 
 export interface LiosLayoutlProps {
   appName?: any
@@ -35,6 +41,8 @@ export interface LiosLayoutlProps {
   isHideHeader?: boolean //是否隐藏header
   onCollapse?: (value: boolean) => void
   type?: string
+
+  umiHistory: any
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
@@ -56,17 +64,35 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     isHideHeader,
     onCollapse,
     type,
+    umiHistory
   } = props
 
-  const [selectKey, setSelectKey] = useState<any>([])
-
-  useEffect(() => {
-    if (type !== 'console') {
-      import('./index.scss')
-    } else {
-      import('./index-console.scss')
+  const findKeyPath = (pathname: string) => {
+    const path: string[] = []
+    const findPath = (nodes: TreeNode[], target: string): boolean => {
+      for (const node of nodes) {
+        if (node.key === target) {
+          path.unshift(node.key)
+          return true
+        }
+        if (node.children && findPath(node.children, target)) {
+          path.unshift(node.key)
+          return true
+        }
+      }
+      return false
     }
-  }, [type])
+
+    findPath(menuList, pathname)
+    return path
+  }
+
+  // 初始化选中菜单
+  const [selectKey, setSelectKey] = useState<any>(
+    findKeyPath('/' + location.pathname.split('/')[2])
+  )
+
+  const [infoOpen, setInfoOpen] = useState<string | null>(null)
 
   const logoUrl =
     type === 'console'
@@ -81,13 +107,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const { user, logo, subLogo, productCode } = (window as any)?.g_config
   const { name, avatar } = user || {}
 
+  // 初始化展开菜单
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
 
   //处理搜索菜单后自动展开目录
-  interface TreeNode {
-    key: string
-    children?: TreeNode[]
-  }
   const findParentMenu = (menuList: any[], pathname: string) => {
     const result: TreeNode[] = []
 
@@ -112,22 +135,23 @@ 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))
   }, [location.pathname])
 
+  // 初始化折叠状态
   const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
   const [isCopied, setIsCopied] = useState({
     account: false,
     id: false,
     tenantName: false,
-    tenantId: false,
+    tenantId: false
   })
 
-  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+  const onOpenChange: MenuProps['onOpenChange'] = keys => {
     setOpenKeys(keys)
   }
 
@@ -138,9 +162,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     } catch (err) {}
   }
 
+  // 菜单动画
   const collapseNode = () => {
     return {
-      height: 0,
+      height: 0
     }
   }
   const expandNode = (node: any) => {
@@ -154,26 +179,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
   }
 
   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)
             }
@@ -181,9 +206,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className="layout-side-mask"></div>
+          <div className='layout-side-mask1'></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')
@@ -209,7 +237,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className="close-trigger"
+                className='close-trigger'
                 onClick={() => {
                   setCollapsed(false)
                 }}
@@ -222,12 +250,19 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           <div style={{ height: 24 }}></div>
 
           <div style={{ width: '100%', padding: '0 16px' }}>
-            <Search menuList={menuList} collapsed={collapsed} type={type || ''} />
+            <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' : ''}`}
@@ -241,7 +276,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   onMenuClick(item)
                 }
               }}
-              triggerSubMenuAction="hover"
+              triggerSubMenuAction='hover'
             >
               {menuList.map((item: any) => {
                 const isSelected = selectKey.includes(item.key)
@@ -252,13 +287,17 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   }
                   return (
                     <SubMenu
-                      popupClassName="rc-menu-submenu-popup"
+                      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>
@@ -275,10 +314,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         if (child.children) {
                           return (
                             <SubMenu
-                              popupClassName="rc-menu-submenu-popup"
-                              className="menu-item-content sub-li"
+                              popupClassName='rc-menu-submenu-popup'
+                              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)
@@ -289,8 +338,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>
                                 )
                               })}
@@ -298,8 +355,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>
                         )
                       })}
@@ -313,9 +378,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                     classNames += ' submenu-selected'
                   }
                   return (
-                    <MenuItem key={item.key} className="menu-item-content">
+                    <MenuItem key={item.key} className='menu-item-content'>
                       <div>
-                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
+                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
+                          {item.icon}
+                        </span>
                         {!collapsed && <span className={classNames}>{item.label}</span>}
                       </div>
                     </MenuItem>
@@ -327,21 +394,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>
                 )
@@ -349,33 +416,48 @@ 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'
+                  }}
+                  className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
+                ></span>
               </div>
             </Popover>
           </div>
         )}
-        <div className="layout-content">{props.children}</div>
+        <div className='layout-content'>{props.children}</div>
       </div>
     </Layout>
   )
@@ -383,33 +465,63 @@ 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={type === 'console' ? '#FFFFFF' : '#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"
+        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>
   )
 }
 
-function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boolean; type: string }) {
+type SearchProps = {
+  menuList: TreeNode[]
+  collapsed: boolean
+  type: string
+  umiHistory: any
+  setSelectKey: any
+  findKeyPath: (pathname: string) => string[]
+}
+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) {
           searchInput.focus()
-          setIsHovered(true)
+          setIsFocused(true)
         }
       }
     }
 
+    // Add click outside listener to close dropdown
+    const handleClickOutside = (event: MouseEvent) => {
+      const searchContainer = document.querySelector('.search-container')
+      if (searchContainer && !searchContainer.contains(event.target as Node)) {
+        setIsFocused(false)
+      }
+    }
+
     document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleClickOutside)
+
     return () => {
       document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
     }
   }, [])
+
   type Router = { label: string; icon?: any; key: string; children?: Router[] }
 
   const name = (window as any).g_config.productCode
@@ -417,7 +529,7 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
   const [searchTerm, setSearchTerm] = useState('')
   const [searchHistory, setSearchHistory] = useState<Router[]>([])
   const [searchResult, setSearchResult] = useState<Router[]>([])
-  const [isHovered, setIsHovered] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
 
   useEffect(() => {
     const searchHistory = localStorage.getItem(name + 'searchHistory')
@@ -439,17 +551,10 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
     setSearchTerm(value)
     //递归menulist判断是否有包含的
     const searchResults: Router[] = []
-    search(menuList)
+    search(menuList as Router[])
     setSearchResult(searchResults)
     function search(data: Router[]) {
-      data.forEach((item) => {
-        if (item.key === '/quota-check') {
-          searchResults.push({
-            label: '配额列表',
-            key: '/quota-check',
-          })
-          return
-        }
+      data.forEach(item => {
         if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
           searchResults.push(item)
         }
@@ -461,9 +566,9 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
   }
 
   const enter = (item: Router) => {
-    setIsHovered(false)
+    setIsFocused(false)
     //如果搜索历史里面有这个item，就不再添加
-    if (searchHistory.findIndex((i) => i.key === item.key) === -1) {
+    if (searchHistory.findIndex(i => i.key === item.key) === -1) {
       setSearchHistory([...searchHistory, item])
     }
     //如果是目录就找到目录下第一个菜单进入
@@ -480,77 +585,106 @@ function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boole
       }
       const firstItem = findFirst(item.children || [])
       if (firstItem) {
-        //history.push(firstItem.key, '_self')
+        setSelectKey(findKeyPath(firstItem.key)) // 记住keypath
+        umiHistory.push(firstItem.key, '_self')
       }
     } else {
-      // history.push(item.key, '_self')
+      setSelectKey(findKeyPath(item.key)) // 记住keypath
+      umiHistory.push(item.key, '_self')
     }
   }
 
   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">
-          <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-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"
+                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 onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-          <div className="search">
-            <input id="menu-input" value={searchTerm} onChange={(e) => handleSearch(e.target.value)} className="search-input" placeholder="搜索菜单" />
-            <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-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'
+              value={searchTerm}
+              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'
+              >
                 <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' }}>
-              {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
-            </div>
-
-            {/* <div
+            <div
               className='search-command'
-              style={{ width: '50px' }}
+              style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
             >
-              {'Ctrl+'}K
-            </div> */}
+              {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
+            </div>
           </div>
           <div>
-            {isHovered && (
+            {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'
                           }}
-                          onClick={() => enter(item)}
                         >
-                          <List.Item>{item.label}</List.Item>
+                          <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
                           <div
                             style={{ paddingRight: 10, cursor: 'pointer' }}
                             onClick={() => {