cfel-base-components 2.5.61 → 2.5.62

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

@@ -0,0 +1,728 @@
+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, RightOutlined } from '@ant-design/icons'
+const { Sider } = Layout
+import './index.scss'
+
+interface TreeNode {
+  key: string
+  children?: TreeNode[]
+}
+
+export interface LiosLayoutlProps {
+  appName?: any
+  productCode: string
+  children: any
+  menuList: any
+  onMenuClick: any
+  selectedKeys: string[]
+  setSelectKeys: any
+  customAction?: any
+  actions?: any[]
+  myWalletInfo?: {
+    availableCashAmount: string
+    availableAmount: string
+    currency: string
+  }
+  MyLoginInfo?: {
+    isAdmin: any
+  }
+  amountInfo?: {
+    residueNum: string
+    currencyCode: string
+  }
+  myWalletInfoAction?: any
+  myLoginInfoAction?: any
+  logoutUrl?: string
+  switchTenantUrl?: string
+  defaultOpenKeys?: string[]
+  isHideHeader?: boolean //是否隐藏header
+  onCollapse?: (value: boolean) => void
+  type?: string
+
+  umiHistory: any
+}
+
+export default function LiosLayout(props: LiosLayoutlProps) {
+  const {
+    appName,
+    menuList,
+    onMenuClick,
+    selectedKeys = [],
+    setSelectKeys = () => {},
+    customAction,
+    actions,
+
+    defaultOpenKeys,
+    myWalletInfo,
+    MyLoginInfo,
+    amountInfo,
+    myWalletInfoAction,
+    myLoginInfoAction,
+    isHideHeader,
+    onCollapse,
+    type,
+    umiHistory,
+  } = props
+
+  const findKeyPath = (pathname: string) => {
+    const path: string[] = []
+    const findPath = (nodes: TreeNode[], target: string): boolean => {
+      for (const node of nodes) {
+        if (node.key === target) {
+          path.unshift(node.key)
+          return true
+        }
+        if (node.children && findPath(node.children, target)) {
+          path.unshift(node.key)
+          return true
+        }
+      }
+      return false
+    }
+
+    findPath(menuList, pathname)
+    return path
+  }
+
+  // 初始化选中菜单
+  const [selectKey, setSelectKey] = useState<any>(findKeyPath('/' + location.pathname.split('/')[2]))
+
+  const [infoOpen, setInfoOpen] = useState<string | null>(null)
+
+  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<string[]>(defaultOpenKeys || [])
+
+  //处理搜索菜单后自动展开目录
+  const findParentMenu = (menuList: any[], pathname: string) => {
+    const result: TreeNode[] = []
+
+    const findNode = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+      for (const node of nodes) {
+        if (node.key === pathname) {
+          result.push(...path)
+          return true
+        }
+        if (node.children && findNode(node.children, [...path, node])) {
+          return true
+        }
+      }
+      return false
+    }
+
+    findNode(menuList, [])
+    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])
+
+    setOpenKeys(paMenu.map((item) => item.key))
+
+    const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
+    setSelectKey(selectedPath)
+  }, [location.pathname, collapsed])
+
+  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) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setIsCopied({ ...isCopied, [key]: true })
+    } catch (err) {}
+  }
+
+  // 菜单动画
+  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-warps">
+      {Array.isArray(menuList) && menuList.length > 0 && (
+        <Sider
+          className="layout-side"
+          collapsible
+          trigger={null}
+          collapsed={collapsed}
+          width={260}
+          onCollapse={(value) => {
+            if (onCollapse) {
+              onCollapse(value)
+            }
+            localStorage.setItem('layout_collapsed', value.toString())
+            setCollapsed(value)
+          }}
+        >
+          <div className="layout-side-mask1"></div>
+          <div className="layout-side-mask2"></div>
+
+          <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-sub`} src={subLogoUrl} />}
+              {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
+            </div>
+            {!collapsed && (
+              <div
+                className="trigger"
+                onClick={() => {
+                  setCollapsed(true)
+                }}
+              >
+                <Arrow collapsed={true} type={type} />
+              </div>
+            )}
+          </div>
+
+          {collapsed && (
+            <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+              <div
+                className="close-trigger"
+                onClick={() => {
+                  localStorage.setItem('layout_collapsed', 'false')
+                  setCollapsed(false)
+                }}
+              >
+                <Arrow collapsed={false} type={type} />
+              </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} />
+          </div>
+
+          {!collapsed && <div style={{ height: 12 }}></div>}
+
+          <div className="layout-menu">
+            <RcMenu
+              mode={collapsed ? 'vertical' : 'inline'}
+              className={`menu${collapsed ? '-collapsed' : ''}`}
+              motion={collapsed ? verticalMotion : inlineMotion}
+              openKeys={openKeys}
+              onOpenChange={onOpenChange}
+              selectedKeys={selectKey}
+              onClick={(item: any) => {
+                if (collapsed) return
+                setSelectKey(item.keyPath)
+                if (onMenuClick) {
+                  onMenuClick(item)
+                }
+              }}
+            >
+              {menuList.map((item: any) => {
+                const isSelected = selectKey.includes(item.key)
+                if (item.children) {
+                  let classNames = 'menu-item-label'
+                  if (isSelected) {
+                    classNames += ' submenu-selected'
+                  }
+                  if (collapsed) {
+                    return (
+                      <Popover
+                        key={item.key}
+                        align={{
+                          offset: [33, 0],
+                        }}
+                        placement="right"
+                        arrow={false}
+                        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],
+                                    }}
+                                    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={() => {
+                                                if (onMenuClick) {
+                                                  onMenuClick(grandChild)
+                                                }
+                                              }}
+                                              key={grandChild.key}
+                                              className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                            >
+                                              <div style={{ width: '130px' }}>
+                                                <span className={`menu-item-label`}>{grandChild.label}</span>
+                                              </div>
+                                            </MenuItem>
+                                          )
+                                        })}
+                                      </div>
+                                    }
+                                  >
+                                    <SubMenu
+                                      className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                      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-item-selected' : ''}`}
+                                >
+                                  <div className="menu-item-content sub-list">{child.label}</div>
+                                </MenuItem>
+                              )
+                            })}
+                          </div>
+                        }
+                      >
+                        <SubMenu
+                          className="menu-item-content sub-li"
+                          title={
+                            <div className="sub-list">
+                              <div>
+                                <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
+                              </div>
+                            </div>
+                          }
+                        ></SubMenu>
+                      </Popover>
+                    )
+                  }
+                  return (
+                    <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>
+                      }
+                    >
+                      {item.children.map((child: any) => {
+                        const isSelected = selectKey.includes(child.key)
+                        if (item.children) {
+                          let classNames = 'menu-item-label'
+                          if (isSelected) {
+                            classNames += ' submenu-selected'
+                          }
+                        }
+                        if (child.children) {
+                          return (
+                            <SubMenu
+                              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 = selectKey.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}
+                      onClick={() => {
+                        if (onMenuClick && collapsed) {
+                          onMenuClick(item)
+                        }
+                      }}
+                      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>
+                  )
+                }
+              })}
+            </RcMenu>
+          </div>
+        </Sider>
+      )}
+
+      <div className="layout-main">
+        {!isHideHeader && (
+          <div className="layout-header">
+            {appName && (
+              <div className="app-name">
+                <strong>{appName}</strong>
+              </div>
+            )}
+
+            <div className="layout-header-fill" />
+
+            <div className="layout-header-actions">
+              {actions?.map((item, index) => {
+                return (
+                  <div className="actions-item" key={index}>
+                    {item}
+                  </div>
+                )
+              })}
+            </div>
+
+            <Popover
+              placement="bottom"
+              content={
+                <UserCard myWalletInfo={myWalletInfo} MyLoginInfo={MyLoginInfo} amountInfo={amountInfo} customAction={customAction} isCopied={isCopied} copyTextToClipboard={copyTextToClipboard} />
+              }
+              arrow={false}
+              trigger="click"
+              onOpenChange={(e) => {
+                setInfoOpen(e ? 'up' : 'down')
+                if (!e) return
+                setIsCopied({
+                  account: false,
+                  id: false,
+                  tenantName: false,
+                  tenantId: false,
+                })
+                if (myLoginInfoAction) {
+                  myLoginInfoAction()
+                }
+              }}
+            >
+              <div className="layout-header-user">
+                <img className="avatar" src={avatar} />
+                <div className="name">{name}</div>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: '8px',
+                  }}
+                  className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
+                ></span>
+              </div>
+            </Popover>
+          </div>
+        )}
+        <div className="layout-content">{props.children}</div>
+      </div>
+    </Layout>
+  )
+}
+
+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"
+        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>
+  )
+}
+
+type SearchProps = {
+  menuList: TreeNode[]
+  collapsed: boolean
+  type: string
+  umiHistory: any
+  setSelectKey: any
+  findKeyPath: (pathname: string) => string[]
+}
+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') {
+        event.preventDefault()
+        const searchInput = document.querySelector('#menu-input') as HTMLInputElement
+        if (searchInput) {
+          searchInput.focus()
+          setIsFocused(true)
+        }
+      }
+    }
+
+    // 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)) {
+        setIsFocused(false)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  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) {
+      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 as Router[])
+    setSearchResult(searchResults)
+    function search(data: Router[]) {
+      data.forEach((item) => {
+        if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
+          searchResults.push(item)
+        }
+        if (item.children) {
+          search(item.children)
+        }
+      })
+    }
+  }
+
+  const enter = (item: Router) => {
+    setIsFocused(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) {
+        setSelectKey(findKeyPath(firstItem.key)) // 记住keypath
+        umiHistory.push(firstItem.key, '_self')
+      }
+    } else {
+      setSelectKey(findKeyPath(item.key)) // 记住keypath
+      umiHistory.push(item.key, '_self')
+    }
+  }
+
+  const deleteHistory = (item: Router) => {
+    setSearchHistory(searchHistory.filter((i) => i.key !== item.key))
+  }
+  return (
+    <>
+      {!collapsed && (
+        <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"
+              value={searchTerm}
+              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">
+                <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" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
+              {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
+            </div>
+          </div>
+          <div>
+            {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"
+                    header="最近访问"
+                    size="small"
+                    bordered
+                    dataSource={searchHistory}
+                    renderItem={(item) => {
+                      return (
+                        <div
+                          className={'search-item'}
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
+                          <div
+                            style={{ paddingRight: 10, cursor: 'pointer' }}
+                            onClick={() => {
+                              deleteHistory(item)
+                            }}
+                          >
+                            <CloseCircleOutlined />
+                          </div>
+                        </div>
+                      )
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}