cfel-base-components 2.5.76 → 2.5.77

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

@@ -1,753 +0,0 @@
-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-cloud.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<any>(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
-  }
-
-  useEffect(() => {
-    //在这里找到当前菜单的上层目录
-    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])
-
-  // 初始化折叠状态
-  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
-    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-cloud">
-      {Array.isArray(menuList) && menuList.length > 0 && (
-        <Sider
-          className="layout-side-cloud"
-          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-cloud"></div>
-          <div className="layout-side-mask2-cloud"></div>
-
-          <div className="header-logo-cloud" 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-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>
-          )}
-
-          {!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-cloud">
-            <RcMenu
-              mode={collapsed ? 'vertical' : 'inline'}
-              className={`menu-cloud${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-cloud">
-                            {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-cloud" 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
-                          className="menu-item-content"
-                          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-cloud">
-        {!isHideHeader && (
-          <div className="layout-header-cloud">
-            {appName && (
-              <div className="app-name">
-                <strong>{appName}</strong>
-              </div>
-            )}
-
-            <div className="layout-header-fill-cloud" />
-
-            <div className="layout-header-actions-cloud">
-              {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-cloud">
-                <img className="avatar" src={avatar} />
-                <div className="name">{name}</div>
-                <span
-                  style={{
-                    display: 'inline-block',
-                    marginLeft: '4px',
-                  }}
-                  className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
-                ></span>
-              </div>
-            </Popover>
-          </div>
-        )}
-        <div className="layout-content-cloud">{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="#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>
-  )
-}
-
-type SearchProps = {
-  menuList: TreeNode[]
-  collapsed: boolean
-  type: string
-  umiHistory: any
-  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') {
-        event.preventDefault()
-        const searchInput = document.querySelector('#menu-input') as HTMLInputElement
-        if (searchInput) {
-          searchInput.focus()
-          setIsFocused(true)
-        }
-      }
-    }
-
-    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)
-    }
-  }, [])
-
-  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-cloud">
-            <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)}
-              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="#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 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
-                    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="最近访问"
-                    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>
-      )}
-    </>
-  )
-}