cfel-base-components 2.5.69 → 2.5.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.5.69",
+  "version": "2.5.71",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

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

@@ -432,7 +432,7 @@ ul {
     }
   }
 
-  .menu-collapsed {
+  .menu-cloud-collapsed {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -604,7 +604,7 @@ body {
   }
 }
 
-.layout-side-mask-cloud1 {
+.layout-side-mask1-cloud {
   background: white;
   position: absolute;
   top: 0;
@@ -615,7 +615,7 @@ body {
   z-index: 9;
 }
 
-.layout-side-mask-cloud2 {
+.layout-side-mask2-cloud {
   background: linear-gradient( 227deg, #F0FBF3 0%, #E5F6FA 100%);
   position: absolute;
   top: 0;

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

@@ -106,7 +106,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const { name, avatar } = user || {}
 
   // 初始化展开菜单
-  const [openKeys, setOpenKeys] = useState<string[]>(defaultOpenKeys || [])
+  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
 
   //处理搜索菜单后自动展开目录
   const findParentMenu = (menuList: any[], pathname: string) => {
@@ -129,16 +129,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     return result
   }
 
-  // 初始化折叠状态
-  const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
-  const [isCopied, setIsCopied] = useState({
-    account: false,
-    id: false,
-    tenantName: false,
-    tenantId: false,
-  })
-
-
   useEffect(() => {
     //在这里找到当前菜单的上层目录
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
@@ -155,6 +145,14 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     setSelectKey(selectedPath)
   }, [location.pathname])
 
+  // 初始化折叠状态
+  const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
+  const [isCopied, setIsCopied] = useState({
+    account: false,
+    id: false,
+    tenantName: false,
+    tenantId: false,
+  })
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     // Find the last opened key
@@ -229,8 +227,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className="layout-side-mask-cloud1"></div>
-          <div className="layout-side-mask-cloud2"></div>
+          <div className="layout-side-mask1-cloud"></div>
+          <div className="layout-side-mask2-cloud"></div>
 
           <div className="header-logo-cloud" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
             <div
@@ -242,32 +240,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {collapsed && <img className={`logo-sub`} src={subLogoUrl} />}
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
-            {!collapsed && (
-              <div
-                className="trigger-cloud"
-                onClick={() => {
-                  setCollapsed(true)
-                }}
-              >
-                <Arrow collapsed={true} type={type} />
-              </div>
-            )}
-          </div>
-
-          {collapsed && (
-            <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
-              <div
-                className="close-trigger-cloud"
-                onClick={() => {
-                  localStorage.setItem('layout_collapsed', 'false')
-                  setCollapsed(false)
-                }}
-              >
-                <Arrow collapsed={false} type={type} />
-              </div>
-            </div>
-          )}
 
+            
+          </div>
           {!collapsed && <div style={{ height: 24 }}></div>}
 
           <div style={{ width: '100%', padding: '0 16px' }}>
@@ -311,20 +286,18 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         content={
                           <div className="menu-popover">
                             {item.children.map((child: any) => {
-                              const isSelected = selectKey.includes(child.key)
                               if (child.children) {
                                 return (
                                   <Popover
                                     key={child.key}
                                     align={{
-                                      offset: [10, 0],
+                                      offset: [30, 0],
                                     }}
                                     placement="right"
                                     arrow={false}
                                     content={
                                       <div className="menu-popover" style={{ width: '146px' }}>
                                         {child.children.map((grandChild: any) => {
-                                          const isSelected = selectKey.includes(grandChild.key)
                                           return (
                                             <MenuItem
                                               onClick={() => {
@@ -333,10 +306,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                                 }
                                               }}
                                               key={grandChild.key}
-                                              className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                              className="grand-li"
                                             >
-                                              <div style={{ width: '130px' }}>
-                                                <span className={`menu-item-label`}>{grandChild.label}</span>
+                                              <div className="menu-item-content">
+                                                <span className="menu-item-label">{grandChild.label}</span>
                                               </div>
                                             </MenuItem>
                                           )
@@ -345,11 +318,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                     }
                                   >
                                     <SubMenu
-                                      className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                      className="menu-item-content sub-li"
                                       key={child.key}
                                       title={
                                         <div className="sub-list">
-                                          <span className={`menu-item-label`}>{child.label}</span>
+                                          <span className="menu-item-label">{child.label}</span>
                                           <RightOutlined />
                                         </div>
                                       }
@@ -365,7 +338,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                     }
                                   }}
                                   key={child.key}
-                                  className={`sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                  className={`sub-li ${isSelected ? 'sub-selected' : ''}`}
                                 >
                                   <div className="menu-item-content sub-list">{child.label}</div>
                                 </MenuItem>
@@ -375,7 +348,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         }
                       >
                         <SubMenu
-                          className="menu-item-content sub-li"
+                          className="menu-item-content"
                           title={
                             <div className="sub-list">
                               <div>
@@ -448,19 +421,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                     classNames += ' submenu-selected'
                   }
                   return (
-                    <MenuItem
-                      key={item.key}
-                      onClick={() => {
-                        if (onMenuClick && collapsed) {
-                          onMenuClick(item)
-                        }
-                      }}
-                      className="menu-item-content"
-                      style={{
-                        position: 'relative',
-                        zIndex: 99,
-                      }}
-                    >
+                    <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>}
@@ -522,7 +483,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                 <span
                   style={{
                     display: 'inline-block',
-                    marginLeft: '8px',
+                    marginLeft: '4px',
                   }}
                   className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
                 ></span>
@@ -540,7 +501,7 @@ 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">
       <path
-        fill="#7D8295"
+        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>
@@ -555,7 +516,17 @@ type SearchProps = {
   setSelectKey: any
   findKeyPath: (pathname: string) => string[]
 }
+
+type Router = { label: string; icon?: any; key: string; children?: Router[] }
+
 function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPath }: SearchProps) {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [searchHistory, setSearchHistory] = useState<Router[]>([])
+  const [searchResult, setSearchResult] = useState<Router[]>([])
+  const [isFocused, setIsFocused] = useState(false)
+
+  const name = (window as any).g_config.productCode
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
@@ -568,7 +539,6 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
       }
     }
 
-    // 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)) {
@@ -585,15 +555,6 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
     }
   }, [])
 
-  type Router = { label: string; icon?: any; key: string; children?: Router[] }
-
-  const name = (window as any).g_config.productCode
-
-  const [searchTerm, setSearchTerm] = useState('')
-  const [searchHistory, setSearchHistory] = useState<Router[]>([])
-  const [searchResult, setSearchResult] = useState<Router[]>([])
-  const [isFocused, setIsFocused] = useState(false)
-
   useEffect(() => {
     const searchHistory = localStorage.getItem(name + 'searchHistory')
     if (searchHistory) {
@@ -666,7 +627,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
         <div className="search-container">
           <div className="search-cloud">
             <div className="search-bg-mask">
-              <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png" />
+              <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png" />
             </div>
             <input
               autoComplete="off"
@@ -676,11 +637,16 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
               className="search-input"
               placeholder="搜索菜单..."
               onFocus={() => setIsFocused(true)}
+              onBlur={(e) => {
+                if (!e.relatedTarget?.closest('.lists-cloud')) {
+                  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">
                 <path
-                  fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
+                  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>
@@ -688,14 +654,30 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
             <div className="search-command" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
               {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
             </div>
+
+            {/* <div
+              className='search-command'
+              style={{ width: '50px' }}
+            >
+              {'Ctrl+'}K
+            </div> */}
           </div>
           <div>
             {isFocused && (
               <>
                 {searchTerm ? (
-                  <List split={false} className="lists-cloud" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
+                  <List
+                    tabIndex={-1}
+                    split={false}
+                    className="lists-cloud"
+                    size="small"
+                    bordered
+                    dataSource={searchResult}
+                    renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>}
+                  />
                 ) : (
                   <List
+                    tabIndex={-1}
                     split={false}
                     className="lists-cloud"
                     header="最近访问"