cfel-base-components 2.5.55 → 2.5.56

package/demo/src/index.jsx

@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client'
 import style from './index.module.less'
 import { SwapOutlined, QqOutlined, WeiboOutlined } from '@ant-design/icons'
 import { ConfigProvider } from 'antd'
-import Layout from '../../src/components/layout'
-// import Layout from '../../src/components/layout-console'
+// import Layout from '../../src/components/layout'
+import Layout from '../../src/components/layout-console'
 import { QuestionCircleTwoTone } from '@ant-design/icons'
 // import Account from '../../src/components/universal-pages/account';
 // import AccountInfo from '../../src/components/universal-pages/accountInfo';
@@ -51,7 +51,7 @@ const menuList = [
             <span>配额列表</span>
               <span className={style.quotaCount}>12</span>
               </>,
-            key: 'product-list3',
+            key: 'product-list34',
           },
         ],
       },
@@ -100,7 +100,7 @@ const menuList = [
             <span>配额列表</span>
               <span className={style.quotaCount}>12</span>
               </>,
-            key: 'product-list3',
+            key: 'product-list32',
           },
         ],
       },
@@ -109,7 +109,7 @@ const menuList = [
         <span>配额列表</span>
           <span className={style.quotaCount}>12</span>
           </>,
-        key: 'entity-list',
+        key: 'entity-list22',
       },
       {
         label: '资源类型管理',

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "cfel-base-components",
-  "version": "2.5.55",
+  "version": "2.5.56",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack-dev-server --config config/webpack.dev.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config config/webpack.prod.config.js"
   },
   "repository": {

package/src/components/layout/index.tsx

@@ -107,7 +107,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) => {
@@ -135,10 +134,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
     //去重
     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])
 
   // 初始化折叠状态
@@ -206,13 +210,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     motionLeave: true,
   }
 
-  useEffect(() => {
-    return () => {
-      setActiveThirdLevelMenu(null)
-      setOpenKeys([])
-    }
-  }, [])
-
   return (
     <Layout className="layout-warps">
       {Array.isArray(menuList) && menuList.length > 0 && (

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

@@ -11,6 +11,45 @@ ul {
   margin: 0;
 }
 
+.menu-popover {
+  width: 168px;
+  padding-left: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #04073b;
+  text-align: left;
+  font-style: normal;
+  cursor: pointer;
+
+  .menu-item-content {
+    width: 152px;
+    height: 32px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 4px;
+
+    &:hover {
+      color: #185dfe;
+    }
+  }
+
+  .sub-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sub-selected {
+    color: #185dfe;
+  }
+
+  .selected {
+    background: #e7eeff;
+    border-radius: 4px;
+    color: #185dfe;
+  }
+}
+
 .layout-menu-console {
   border-radius: 16px;
   height: calc(100% - 107px);
@@ -37,7 +76,7 @@ ul {
       .ant-layout-sider-collapsed & {
         display: none;
       }
-    
+
       &::before,
       &::after {
         position: absolute;
@@ -49,15 +88,15 @@ ul {
         transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         content: '';
       }
-    
+
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
-    
+
       &::after {
         transform: rotate(45deg) translateX(-2.5px);
       }
-    
+
       // RTL support
       &.#{$menuPrefixCls}-rtl,
       .#{$menuPrefixCls}-submenu-rtl & {
@@ -65,7 +104,7 @@ ul {
         left: 16px;
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
       .#{$menuPrefixCls}-submenu-arrow {
         transform: translateY(-3px);
@@ -77,7 +116,7 @@ ul {
         }
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-selected {
       > .#{$menuPrefixCls}-submenu-title {
         .#{$menuPrefixCls}-submenu-arrow {
@@ -88,7 +127,6 @@ ul {
         }
       }
     }
-    
 
     > li {
       .first-li {
@@ -97,7 +135,7 @@ ul {
             color: #fff;
             font-weight: 500;
           }
-          
+
           .menu-item-label {
             color: #fff;
             font-weight: 500;
@@ -222,18 +260,17 @@ ul {
       line-height: 52px;
       width: 100%;
 
-      .menu-item-content{
+      .menu-item-content {
         width: 100%;
         padding-right: 24px;
 
-        .menu-item-label{
+        .menu-item-label {
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
         }
       }
-      
 
       &::before {
         content: '';
@@ -309,7 +346,7 @@ ul {
     }
 
     .grand-li {
-      background: #3568B7;
+      background: #3568b7;
       position: relative;
       z-index: 9;
       line-height: 52px;
@@ -404,6 +441,7 @@ ul {
     cursor: pointer;
     position: relative;
     z-index: 20;
+    color: #fff;
 
     .menu-item-content {
       font-weight: 400;
@@ -473,9 +511,7 @@ body {
     height: 40px;
     color: #fff;
     background: #5b6ecf;
-    box-shadow:
-      inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
-      inset 0px -2px 0px 0px #ffffff22;
+    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px #ffffff22;
     border-radius: 10px;
     background-size: 50%;
     background-position-x: right;
@@ -551,9 +587,7 @@ body {
     width: 40px;
     height: 40px;
     background: #f8f8fb;
-    box-shadow:
-      inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
-      inset 0px -2px 0px 0px #ffffff;
+    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px #ffffff;
     border-radius: 10px;
     backdrop-filter: blur(10px);
     padding-top: 11px;
@@ -573,7 +607,6 @@ body {
   border-radius: 16px;
 }
 
-
 .layout-side-mask2-console {
   z-index: 10;
   background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
@@ -602,7 +635,6 @@ body {
     height: 30px;
     position: relative;
     z-index: 11;
-    
 
     .logo-sub {
       width: 31px;
@@ -617,7 +649,6 @@ body {
 }
 
 .layout-header-console {
-
   z-index: 1;
   height: $header-height;
   background: linear-gradient(223deg, #faf8ff 0%, #eeecfe 29%, #ffffff 100%);
@@ -676,28 +707,28 @@ body {
       transform: rotate(0deg);
       animation: downanimation 0.3s ease-in-out;
     }
-  
+
     @keyframes downanimation {
       from {
         transform: rotate(180deg);
       }
-  
+
       to {
         transform: rotate(0deg);
       }
     }
-  
+
     //---
     &-up {
       transform: rotate(180deg);
       animation: upanimation 0.3s ease-in-out;
     }
-  
+
     @keyframes upanimation {
       from {
         transform: rotate(0deg);
       }
-  
+
       to {
         transform: rotate(180deg);
       }
@@ -748,9 +779,7 @@ body {
   background: linear-gradient(227deg, #556ec611 0%, #556ec6aa 100%);
   color: #fff;
   border-radius: 16px;
-  box-shadow:
-    0 8px 20px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 16px;
   border: 1px solid rgba(255, 255, 255, 0.08);
@@ -824,7 +853,6 @@ body {
   }
 }
 
-
 .#{$menuPrefixCls} {
   &-zoom-enter,
   &-zoom-appear {

package/src/components/layout-console/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-console.scss'
 
@@ -134,10 +134,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
     //去重
     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])
 
   // 初始化折叠状态
@@ -236,9 +241,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
 
-            {!collapsed && (
+            {/* {!collapsed && (
               <div
-                className="trigger-console"
+                className='trigger-console'
                 onClick={() => {
                   setCollapsed(true)
                 }}
@@ -251,7 +256,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {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)
@@ -259,10 +264,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               >
                 <Arrow collapsed={false} type={type} />
               </div>
-            </div>
-          )}
-
-          <div style={{ height: 24 }}></div>
+        
+          )} */}
+          </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} />
@@ -279,12 +284,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               onOpenChange={onOpenChange}
               selectedKeys={selectKey}
               onClick={(item: any) => {
+                if (collapsed) return
                 setSelectKey(item.keyPath)
                 if (onMenuClick) {
                   onMenuClick(item)
                 }
               }}
-              triggerSubMenuAction="hover"
             >
               {menuList.map((item: any) => {
                 const isSelected = selectKey.includes(item.key)
@@ -295,15 +300,83 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   }
                   if (collapsed) {
                     return (
-                      <Popover placement="right" arrow={false} content={<div>123</div>} trigger="hover">
+                      <Popover
+                        key={item.key}
+                        align={{
+                          offset: [33, 0],
+                        }}
+                        placement="right"
+                        arrow={false}
+                        content={
+                          <div className="menu-popover">
+                            {item.children.map((child: any) => {
+                              if (child.children) {
+                                return (
+                                  <Popover
+                                    key={child.key}
+                                    align={{
+                                      offset: [30, 0],
+                                    }}
+                                    placement="right"
+                                    arrow={false}
+                                    content={
+                                      <div className="menu-popover" style={{ width: '146px' }}>
+                                        {child.children.map((grandChild: any) => {
+                                          return (
+                                            <MenuItem
+                                              onClick={() => {
+                                                if (onMenuClick) {
+                                                  onMenuClick(grandChild)
+                                                }
+                                              }}
+                                              key={grandChild.key}
+                                              className="grand-li"
+                                            >
+                                              <div className="menu-item-content">
+                                                <span className="menu-item-label">{grandChild.label}</span>
+                                              </div>
+                                            </MenuItem>
+                                          )
+                                        })}
+                                      </div>
+                                    }
+                                  >
+                                    <SubMenu
+                                      className="menu-item-content sub-li"
+                                      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-selected' : ''}`}
+                                >
+                                  <div className="menu-item-content sub-list">{child.label}</div>
+                                </MenuItem>
+                              )
+                            })}
+                          </div>
+                        }
+                      >
                         <SubMenu
-                          key={item.key}
                           className="menu-item-content"
                           title={
                             <div className="sub-list">
-                              <div className="menu-item-inner">
+                              <div>
                                 <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
-                                {!collapsed && <span className={classNames}>{item.label}</span>}
                               </div>
                             </div>
                           }
@@ -491,7 +564,6 @@ 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)
@@ -575,18 +647,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
   }
   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="#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>
-      ) : (
+      {!collapsed && (
         <div className="search-container">
           <div className="search-console">
             <div className="search-bg-mask">