cfel-base-components 2.5.43 → 2.5.45

package/src/components/layout/index.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { Layout, Menu, MenuProps, Popover } from 'antd'
+import { Layout, List, Menu, MenuProps, Popover } from 'antd'
 import UserCard from './user-card'
+import { useMemo } from 'react'
+import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
+import { CloseCircleOutlined } from '@ant-design/icons'
 import './index.scss'
-
 const { Sider } = Layout
 
 export interface LiosLayoutlProps {
@@ -10,9 +12,10 @@ export interface LiosLayoutlProps {
   productCode: string
   children: any
   menuList: any
-  onMenuClick: (item: any) => void
+  onMenuClick: any
   selectedKeys: string[]
-  customAction?: (item: any) => void
+  setSelectKeys: (keys: string[]) => void
+  customAction?: any
   actions?: any[]
   myWalletInfo?: {
     availableCashAmount: string
@@ -26,22 +29,23 @@ export interface LiosLayoutlProps {
     residueNum: string
     currencyCode: string
   }
-  myWalletInfoAction?: Function
-  myLoginInfoAction?: Function
+  myWalletInfoAction?: any
+  myLoginInfoAction?: any
   logoutUrl?: string
   switchTenantUrl?: string
   defaultOpenKeys?: string[]
   isHideHeader?: boolean //是否隐藏header
+  onCollapse?: (value: boolean) => void
+  type?: string
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
   const {
     appName,
-    productCode,
     menuList,
     onMenuClick,
-    selectedKeys,
-
+    selectedKeys = [],
+    setSelectKeys = () => {},
     customAction,
     actions,
 
@@ -52,9 +56,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     myWalletInfoAction,
     myLoginInfoAction,
     isHideHeader,
+    onCollapse,
+    type,
   } = props
 
-  const { user, logo, subLogo } = (window as any)?.g_config
+  const logoUrl =
+    type === 'console'
+      ? 'https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/company-logo/cfel-logo-white-compress.png'
+      : 'https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/company-logo/chengfengerlai.png'
+
+  const subLogoUrl =
+    type === 'console'
+      ? 'https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/company-logo/chengfengerlai-white.png'
+      : 'https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/company-logo/chengfengerlai.png'
+
+  const { user, logo, subLogo, productCode } = (window as any)?.g_config
   const { name, avatar } = user || {}
 
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
@@ -83,6 +99,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     findNode(menuList, [])
     return result
   }
+
   useEffect(() => {
     //在这里找到当前菜单的上层目录
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
@@ -94,7 +111,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     setOpenKeys(Array.from(set))
   }, [location.pathname])
 
-
   const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
   const [isCopied, setIsCopied] = useState({
     account: false,
@@ -114,51 +130,204 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     } catch (err) {}
   }
 
+  const style = useMemo(() => {
+    if (collapsed) {
+      return {
+        style: {
+          padding: '0',
+          paddingTop: '24px',
+        },
+      }
+    } else {
+      return {
+        style: {},
+      }
+    }
+  }, [collapsed])
+
+  const collapseNode = () => {
+    return {
+      height: 0,
+    }
+  }
+  const expandNode = (node: any) => {
+    return { height: node.scrollHeight }
+  }
+
+  const inlineMotion = {
+    motionName: 'rc-menu-collapse',
+    onAppearStart: collapseNode,
+    onAppearActive: expandNode,
+    onEnterStart: collapseNode,
+    onEnterActive: expandNode,
+    onLeaveStart: expandNode,
+    onLeaveActive: collapseNode,
+  }
+
+  const verticalMotion = {
+    motionName: 'rc-menu-open-zoom',
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+  }
+
   return (
-    <Layout className="layout-warp">
+    <Layout className="layout-warps">
       {Array.isArray(menuList) && menuList.length > 0 && (
         <Sider
           className="layout-side"
-          style={{
-            backgroundSize: collapsed ? '1800%' : '900%',
-          }}
           collapsible
+          trigger={null}
           collapsed={collapsed}
-          width={240}
+          width={260}
           onCollapse={(value) => {
+            if (onCollapse) {
+              onCollapse(value)
+            }
             localStorage.setItem('layout_collapsed', value.toString())
             setCollapsed(value)
           }}
         >
-          <div
-            className="layout-logo"
-            onClick={() => {
-              window.open('/home')
-            }}
-          >
-            {<img className={`logo-img ${!collapsed ? 'current-logo' : 'hide-logo'}`} src={logo || ''} />}
-            {
-              <img
-                className={`logo-img  sub-logo
-                 ${collapsed ? 'current-logo' : 'hide-sub-logo'}`}
-                src={subLogo || 'https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-white.png'}
-              />
-            }
+          <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
+            <div
+              onClick={() => {
+                window.open('/home')
+              }}
+            >
+              {!collapsed && <img className={`logo-base current-logo`} src={logo || logoUrl} />}
+
+              {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />}
+            </div>
+
+            {/* {!collapsed && (
+              <div
+                className="trigger"
+                onClick={() => {
+                  setCollapsed(true)
+                }}
+              >
+                <Arrow collapsed={true} />
+              </div>
+            )} */}
+          </div>
+
+          {/* {collapsed && (
+            <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+              <div
+                className="close-trigger"
+                onClick={() => {
+                  setCollapsed(false)
+                }}
+              >
+                <Arrow collapsed={false} />
+              </div>
+            </div>
+          )} */}
+
+          <div style={{ height: 24 }}></div>
+
+          <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <Search menuList={menuList} collapsed={collapsed} type={type || ''} />
           </div>
 
-          <div className="layout-menu-container">
-            <Menu
-              mode="inline"
+          {!collapsed && <div style={{ height: 24 }}></div>}
+
+          <div className="layout-menu">
+            <RcMenu
+              mode={collapsed ? 'vertical' : 'inline'}
+              className={`menu${collapsed ? '-collapsed' : ''}`}
+              motion={collapsed ? verticalMotion : inlineMotion}
               openKeys={openKeys}
               onOpenChange={onOpenChange}
-              items={menuList}
+              selectedKeys={selectedKeys}
               onClick={(item): any => {
-                onMenuClick && onMenuClick(item)
+                setSelectKeys(item.keyPath)
+                if (onMenuClick) {
+                  onMenuClick(item)
+                }
               }}
-              selectedKeys={selectedKeys}
-              theme="dark"
-              color="red"
-            />
+              triggerSubMenuAction="hover"
+            >
+              {menuList.map((item: any) => {
+                const isSelected = selectedKeys.includes(item.key)
+                if (item.children) {
+                  let classNames = 'menu-item-label'
+                  if (isSelected) {
+                    classNames += ' submenu-selected'
+                  }
+                  return (
+                    <SubMenu
+                      popupClassName="rc-menu-submenu-popup"
+                      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>
+                      }
+                    >
+                      {item.children.map((child: any) => {
+                        const isSelected = selectedKeys.includes(child.key)
+                        if (item.children) {
+                          let classNames = 'menu-item-label'
+                          if (isSelected) {
+                            classNames += ' submenu-selected'
+                          }
+                        }
+                        if (child.children) {
+                          return (
+                            <SubMenu
+                              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>}
+                            >
+                              {child.children.map((grandChild: any) => {
+                                const isSelected = selectedKeys.includes(grandChild.key)
+                                if (item.children) {
+                                  let classNames = 'menu-item-label'
+                                  if (isSelected) {
+                                    classNames += ' submenu-selected'
+                                  }
+                                }
+                                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>
+                                )
+                              })}
+                            </SubMenu>
+                          )
+                        }
+                        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>
+                        )
+                      })}
+                    </SubMenu>
+                  )
+                }
+                // 没有子菜单的
+                else {
+                  let classNames = 'menu-item-label'
+                  if (isSelected) {
+                    classNames += ' submenu-selected'
+                  }
+                  return (
+                    <MenuItem key={item.key} className="menu-item-content">
+                      <div>
+                        <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
+                        {!collapsed && <span className={classNames}>{item.label}</span>}
+                      </div>
+                    </MenuItem>
+                  )
+                }
+              })}
+            </RcMenu>
           </div>
         </Sider>
       )}
@@ -199,7 +368,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   tenantName: false,
                   tenantId: false,
                 })
-                myLoginInfoAction && myLoginInfoAction()
+                if (myLoginInfoAction) {
+                  myLoginInfoAction()
+                }
               }}
             >
               <div className="layout-header-user">
@@ -214,3 +385,183 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     </Layout>
   )
 }
+
+function Arrow({ collapsed }: { collapsed?: boolean }) {
+  return (
+    <div>
+      <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"
+          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>
+    </div>
+  )
+}
+
+function Search({ menuList, collapsed, type }: { menuList: any; collapsed: boolean; type: string }) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check for Ctrl+K (Windows) or Cmd+K (Mac)
+      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)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+  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 [isHovered, setIsHovered] = useState(false)
+
+  useEffect(() => {
+    const searchHistory = localStorage.getItem(name + 'searchHistory')
+    if (searchHistory) {
+      setSearchHistory(JSON.parse(searchHistory))
+    } else {
+      setSearchHistory([])
+    }
+  }, [])
+
+  useEffect(() => {
+    if (searchHistory.length > 5) {
+      searchHistory.shift()
+    }
+    localStorage.setItem(name + 'searchHistory', JSON.stringify(searchHistory))
+  }, [searchHistory])
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value)
+    //递归menulist判断是否有包含的
+    const searchResults: Router[] = []
+    search(menuList)
+    setSearchResult(searchResults)
+    function search(data: Router[]) {
+      data.forEach((item) => {
+        if (item.label.includes(value.toLocaleUpperCase())) {
+          searchResults.push(item)
+        }
+        if (item.children) {
+          search(item.children)
+        }
+      })
+    }
+  }
+
+  const enter = (item: Router) => {
+    setIsHovered(false)
+    //如果搜索历史里面有这个item，就不再添加
+    if (searchHistory.findIndex((i) => i.key === item.key) === -1) {
+      setSearchHistory([...searchHistory, item])
+    }
+    //如果是目录就找到目录下第一个菜单进入
+    if (!item.key.includes('/')) {
+      //递归找到目录下第一个菜单
+      const findFirst = (data: Router[]): Router | undefined => {
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].key.includes('/')) {
+            return data[i]
+          } else {
+            return findFirst(data[i].children || [])
+          }
+        }
+      }
+      const firstItem = findFirst(item.children || [])
+      if (firstItem) {
+        //history.push(firstItem.key, '_self')
+      }
+    } else {
+      // history.push(item.key, '_self')
+    }
+  }
+
+  const deleteHistory = (item: Router) => {
+    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">
+              <path
+                fill="#B3A6F4"
+                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">
+                <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"
+                ></path>
+              </svg>
+            </div>
+            <div className="search-command">{navigator.platform.toLowerCase().includes('mac') ? '⌘' : '⊞'}K</div>
+          </div>
+          <div>
+            {isHovered && (
+              <>
+                {searchTerm ? (
+                  <List split={false} className="list" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
+                ) : (
+                  <List
+                    split={false}
+                    className="list"
+                    header={<div>最近访问</div>}
+                    size="small"
+                    bordered
+                    dataSource={searchHistory}
+                    renderItem={(item) => {
+                      return (
+                        <div
+                          className={'search-item'}
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                          }}
+                          onClick={() => enter(item)}
+                        >
+                          <List.Item>{item.label}</List.Item>
+                          <div
+                            style={{ paddingRight: 10 }}
+                            onClick={() => {
+                              deleteHistory(item)
+                            }}
+                          >
+                            <CloseCircleOutlined />
+                          </div>
+                        </div>
+                      )
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,169 @@
+$header-height: 60px;
+$base-color: #c6538c;
+
+body {
+  overflow: hidden;
+}
+
+.layout-warp {
+  display: flex;
+}
+
+.ant-layout .ant-layout-sider {
+  background-image: linear-gradient(
+    -45deg,
+    rgba(103, 200, 21, 0.5),
+    rgba(55, 96, 244, 0.5),
+    rgba(245, 34, 45, 0.7)
+  );
+  background-position: center;
+  // background-color: #fff;
+  // background-color: #13c2c2;
+  background-color: #08979c;
+  // background-color: #531dab;
+  // background-color: #389e0d;
+
+  .ant-layout-sider-trigger {
+    background: transparent;
+    &:hover {
+      background: rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+
+.layout-side {
+  height: 100vh;
+  user-select: none;
+  overflow: hidden;
+
+  .layout-logo {
+    cursor: pointer;
+    height: 60px;
+    margin: 8px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    z-index: 1;
+
+    .logo-img {
+      position: absolute;
+      height: 60px;
+      line-height: 60px;
+      object-fit: cover;
+      transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    .current-logo {
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    .hide-logo {
+      left: -500px;
+    }
+    .hide-sub-logo {
+      right: -500px;
+    }
+  }
+
+  .layout-menu-container {
+    height: calc(100vh - 60px - 16px - 48px);
+    overflow: auto;
+    .ant-menu {
+      background: transparent !important;
+    }
+    .ant-menu-item-selected {
+      background: rgba(255, 255, 255, 0.3) !important;
+    }
+  }
+}
+
+.layout-header {
+  height: $header-height;
+  background: white;
+  z-index: 1;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .app-name {
+    margin-left: 24px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .layout-header-fill {
+    flex: 1;
+  }
+
+  .layout-header-actions {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    max-width: 400px;
+    z-index: 2;
+
+    .actions-item {
+      height: 36px;
+      border-radius: 6px;
+      transition: all 0.3s;
+      cursor: pointer;
+      margin: 0 4px;
+      padding: 0 4px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+      }
+    }
+  }
+
+  .layout-header-user {
+    height: 48px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    z-index: 2;
+    transition: all 0.3s;
+    padding: 4px 12px;
+    margin: 0 12px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 12px;
+    }
+  }
+}
+
+.layout-main {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+
+.layout-content {
+  width: 100%;
+  height: calc(100vh - #{$header-height});
+  overflow: auto;
+}
+
+.ant-menu-submenu-popup {
+  .ant-menu-item-selected {
+    background: rgba(255, 255, 255, 0.12) !important;
+  }
+}