cfel-base-components 2.5.46 → 2.5.48

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

@@ -0,0 +1,712 @@
+import React, { useEffect, useState } from 'react'
+import { Layout, List, Menu, MenuProps, Popover } from 'antd'
+import UserCard from './user-card'
+import RcMenu, { SubMenu, MenuItem } from 'rc-menu'
+import { CloseCircleOutlined } from '@ant-design/icons'
+const { Sider } = Layout
+import './index-console.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))
+  }, [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 => {
+    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-console'>
+      {Array.isArray(menuList) && menuList.length > 0 && (
+        <Sider
+          className='layout-side-console'
+          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-mask2-console'></div>
+
+          <div
+            className='header-logo-console'
+            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-console'
+                onClick={() => {
+                  setCollapsed(false)
+                }}
+              >
+                <Arrow collapsed={false} type={type} />
+              </div>
+            </div>
+          )}
+
+          <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-console'>
+            <RcMenu
+              mode={collapsed ? 'vertical' : 'inline'}
+              className={`menu-console${collapsed ? '-collapsed' : ''}`}
+              motion={collapsed ? verticalMotion : inlineMotion}
+              openKeys={openKeys}
+              onOpenChange={onOpenChange}
+              selectedKeys={selectKey}
+              onClick={(item: any) => {
+                setSelectKey(item.keyPath)
+                if (onMenuClick) {
+                  onMenuClick(item)
+                }
+              }}
+              triggerSubMenuAction='hover'
+            >
+              {menuList.map((item: any) => {
+                const isSelected = selectKey.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 = selectKey.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 = 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} 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>
+      )}
+
+      <div className='layout-main-console'>
+        {!isHideHeader && (
+          <div className='layout-header-console'>
+            {appName && (
+              <div className='app-name'>
+                <strong>{appName}</strong>
+              </div>
+            )}
+
+            <div className='layout-header-fill-console' />
+
+            <div className='layout-header-actions-console'>
+              {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-console'>
+                <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-console'>{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={type === 'console' ? '#FFFFFF' : '#817F9B'}
+        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)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  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-mobile-console'>
+          <div className='search-icon'>
+            <svg
+              viewBox='0 0 1024 1024'
+              version='1.1'
+              xmlns='http://www.w3.org/2000/svg'
+              width='18'
+              height='18'
+            >
+              <path
+                fill='#C3CAEF'
+                d='M962.048 907.776l-229.0176-229.0176a384.3072 384.3072 0 1 0-54.272 54.272l229.0176 229.0176a38.4 38.4 0 0 0 54.272-54.272zM436.1216 743.0656a306.944 306.944 0 1 1 306.944-306.944 307.3024 307.3024 0 0 1-306.944 306.944z'
+              ></path>
+            </svg>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div className='search-console'>
+            <div className='search-bg-mask'>
+              <img src='https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.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-console')) {
+                  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-console'
+                    size='small'
+                    bordered
+                    dataSource={searchResult}
+                    renderItem={item => (
+                      <List.Item onClick={() => enter(item)}>{item.label}</List.Item>
+                    )}
+                  />
+                ) : (
+                  <List
+                    tabIndex={-1}
+                    split={false}
+                    className='lists-console'
+                    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>
+      )}
+    </>
+  )
+}