cfel-base-components 2.5.52 → 2.5.54

package/src/components/layout-console/index.tsx

@@ -64,7 +64,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     isHideHeader,
     onCollapse,
     type,
-    umiHistory
+    umiHistory,
   } = props
 
   const findKeyPath = (pathname: string) => {
@@ -88,9 +88,7 @@ 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)
 
@@ -135,7 +133,7 @@ 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)
     })
@@ -148,11 +146,29 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     account: false,
     id: false,
     tenantName: false,
-    tenantId: false
+    tenantId: false,
   })
 
-  const onOpenChange: MenuProps['onOpenChange'] = keys => {
-    setOpenKeys(keys)
+  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+    // Find the last opened key
+    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
+
+    if (latestOpenKey) {
+      // If opening a new 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))
+        setOpenKeys(parentKey ? [parentKey, latestOpenKey] : [latestOpenKey])
+      } else {
+        // If it's a second level menu, only keep it open
+        setOpenKeys([latestOpenKey])
+      }
+    } else {
+      // If closing a menu
+      setOpenKeys(keys)
+    }
   }
 
   const copyTextToClipboard = async (text: string, key: string) => {
@@ -165,7 +181,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   // 菜单动画
   const collapseNode = () => {
     return {
-      height: 0
+      height: 0,
     }
   }
   const expandNode = (node: any) => {
@@ -179,26 +195,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-console'>
+    <Layout className="layout-warps-console">
       {Array.isArray(menuList) && menuList.length > 0 && (
         <Sider
-          className='layout-side-console'
+          className="layout-side-console"
           collapsible
           trigger={null}
           collapsed={collapsed}
           width={260}
-          onCollapse={value => {
+          onCollapse={(value) => {
             if (onCollapse) {
               onCollapse(value)
             }
@@ -206,12 +222,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className='layout-side-mask2-console'></div>
+          <div className="layout-side-mask1-console"></div>
+          <div className="layout-side-mask2-console"></div>
 
-          <div
-            className='header-logo-console'
-            style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
-          >
+          <div className="header-logo-console" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
             <div
               onClick={() => {
                 window.open('/home')
@@ -222,23 +236,24 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
 
-            {/*  {!collapsed && (
+            {!collapsed && (
               <div
-                className='trigger'
+                className="trigger-console"
                 onClick={() => {
                   setCollapsed(true)
                 }}
               >
                 <Arrow collapsed={true} type={type} />
               </div>
-            )} */}
+            )}
           </div>
 
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className='close-trigger-console'
+                className="close-trigger-console"
                 onClick={() => {
+                  localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
                 }}
               >
@@ -250,19 +265,12 @@ 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 || ''}
-              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-console'>
+          <div className="layout-menu-console">
             <RcMenu
               mode={collapsed ? 'vertical' : 'inline'}
               className={`menu-console${collapsed ? '-collapsed' : ''}`}
@@ -276,7 +284,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   onMenuClick(item)
                 }
               }}
-              triggerSubMenuAction='hover'
+              triggerSubMenuAction="hover"
             >
               {menuList.map((item: any) => {
                 const isSelected = selectKey.includes(item.key)
@@ -285,19 +293,32 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   if (isSelected) {
                     classNames += ' submenu-selected'
                   }
+                  if (collapsed) {
+                    return (
+                      <Popover placement="right" arrow={false} content={<div>123</div>} trigger="hover">
+                        <SubMenu
+                          key={item.key}
+                          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>
+                                {!collapsed && <span className={classNames}>{item.label}</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>
@@ -314,20 +335,9 @@ 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)
@@ -338,16 +348,8 @@ 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>
                                 )
                               })}
@@ -355,16 +357,8 @@ 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>
                         )
                       })}
@@ -378,11 +372,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                     classNames += ' submenu-selected'
                   }
                   return (
-                    <MenuItem key={item.key} className='menu-item-content'>
-                      <div>
-                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
-                          {item.icon}
-                        </span>
+                    <MenuItem key={item.key} className="menu-item-content">
+                      <div className="first-li">
+                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
                         {!collapsed && <span className={classNames}>{item.label}</span>}
                       </div>
                     </MenuItem>
@@ -394,21 +386,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </Sider>
       )}
 
-      <div className='layout-main-console'>
+      <div className="layout-main-console">
         {!isHideHeader && (
-          <div className='layout-header-console'>
+          <div className="layout-header-console">
             {appName && (
-              <div className='app-name'>
+              <div className="app-name">
                 <strong>{appName}</strong>
               </div>
             )}
 
-            <div className='layout-header-fill-console' />
+            <div className="layout-header-fill-console" />
 
-            <div className='layout-header-actions-console'>
+            <div className="layout-header-actions-console">
               {actions?.map((item, index) => {
                 return (
-                  <div className='actions-item' key={index}>
+                  <div className="actions-item" key={index}>
                     {item}
                   </div>
                 )
@@ -416,40 +408,33 @@ 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-console'>
-                <img className='avatar' src={avatar} />
-                <div className='name'>{name}</div>
+              <div className="layout-header-user-console">
+                <img className="avatar" src={avatar} />
+                <div className="name">{name}</div>
                 <span
                   style={{
                     display: 'inline-block',
-                    marginLeft: '4px'
+                    marginLeft: '4px',
                   }}
                   className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
                 ></span>
@@ -457,7 +442,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </Popover>
           </div>
         )}
-        <div className='layout-content-console'>{props.children}</div>
+        <div className="layout-content-console">{props.children}</div>
       </div>
     </Layout>
   )
@@ -465,17 +450,10 @@ 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'
+        fill="#FFFFFF"
+        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>
   )
@@ -502,10 +480,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
 
   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) {
@@ -515,9 +490,20 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
       }
     }
 
+    const handleClickOutside = (event: MouseEvent) => {
+      console.log(1)
+      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)
     }
   }, [])
 
@@ -544,7 +530,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)
         }
@@ -558,7 +544,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])
     }
     //如果是目录就找到目录下第一个菜单进入
@@ -585,65 +571,50 @@ 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'
-            >
+        <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='#C3CAEF'
-                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'
+                fill="#C3CAEF"
+                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>
-          <div className='search-console'>
-            <div className='search-bg-mask'>
-              <img src='https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png' />
+        <div className="search-container">
+          <div className="search-console">
+            <div className="search-bg-mask">
+              <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.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)}
-              onBlur={e => {
+              onBlur={(e) => {
                 if (!e.relatedTarget?.closest('.lists-console')) {
                   setIsFocused(false)
                 }
               }}
             />
-            <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='#C3CAEF'
-                  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'
+                  fill="#C3CAEF"
+                  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>
 
@@ -661,31 +632,29 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
                   <List
                     tabIndex={-1}
                     split={false}
-                    className='lists-console'
-                    size='small'
+                    className="lists-console"
+                    size="small"
                     bordered
                     dataSource={searchResult}
-                    renderItem={item => (
-                      <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
-                    )}
+                    renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>}
                   />
                 ) : (
                   <List
                     tabIndex={-1}
                     split={false}
-                    className='lists-console'
-                    header='最近访问'
-                    size='small'
+                    className="lists-console"
+                    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>

package/src/global.d.ts

@@ -47,5 +47,3 @@ export interface Label {
   value: string
   children?: Label[]
 }
-
-declare module '*.scss'