cfel-base-components 2.5.51 → 2.5.53

package/src/components/layout/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,10 +146,10 @@ 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) => {
     setOpenKeys(keys)
   }
 
@@ -165,7 +163,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   // 菜单动画
   const collapseNode = () => {
     return {
-      height: 0
+      height: 0,
     }
   }
   const expandNode = (node: any) => {
@@ -179,26 +177,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)
             }
@@ -206,12 +204,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className='layout-side-mask1'></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')
@@ -237,8 +232,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className='close-trigger'
+                className="close-trigger"
                 onClick={() => {
+                  localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
                 }}
               >
@@ -250,19 +246,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'>
+          <div className="layout-menu">
             <RcMenu
               mode={collapsed ? 'vertical' : 'inline'}
               className={`menu${collapsed ? '-collapsed' : ''}`}
@@ -276,7 +265,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   onMenuClick(item)
                 }
               }}
-              triggerSubMenuAction='hover'
+              triggerSubMenuAction="hover"
             >
               {menuList.map((item: any) => {
                 const isSelected = selectKey.includes(item.key)
@@ -287,17 +276,13 @@ 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>
@@ -314,20 +299,10 @@ 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)
@@ -338,16 +313,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 +322,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 +337,16 @@ 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"
+                      style={{
+                        position: 'relative',
+                        zIndex: 99,
+                      }}
+                    >
+                      <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 +358,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>
                 )
@@ -416,40 +380,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'>
-                <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>
@@ -457,7 +414,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>
   )
@@ -465,17 +422,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="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"
       ></path>
     </svg>
   )
@@ -492,10 +442,7 @@ 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) {
@@ -554,7 +501,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)
         }
@@ -568,7 +515,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])
     }
     //如果是目录就找到目录下第一个菜单进入
@@ -595,60 +542,45 @@ 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={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 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 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>
@@ -656,32 +588,23 @@ 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>

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

@@ -21,6 +21,8 @@ ul {
     margin: 0;
     list-style: none;
     cursor: pointer;
+    position: relative;
+    z-index: 90;
 
     .#{$menuPrefixCls}-submenu-arrow {
       display: inline-block;
@@ -89,6 +91,20 @@ ul {
     
 
     > li {
+      .first-li {
+        &:hover {
+          .menu-item-icon {
+            color: #fff;
+            font-weight: 500;
+          }
+          
+          .menu-item-label {
+            color: #fff;
+            font-weight: 500;
+          }
+        }
+      }
+
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
@@ -363,7 +379,6 @@ ul {
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
-          .iconfont,
           .menu-item-label {
             color: #fff;
           }
@@ -534,6 +549,7 @@ body {
 }
 
 .layout-side-mask2-console {
+  z-index: 10;
   background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
   border: 2px solid #ffffff;
   position: absolute;