cfel-base-components 2.5.53 → 2.5.55

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

@@ -150,7 +150,25 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   })
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
-    setOpenKeys(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) => {
@@ -204,6 +222,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
+          <div className="layout-side-mask1-console"></div>
           <div className="layout-side-mask2-console"></div>
 
           <div className="header-logo-console" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
@@ -217,16 +236,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
 
-            {/*  {!collapsed && (
+            {!collapsed && (
               <div
-                className='trigger'
+                className="trigger-console"
                 onClick={() => {
                   setCollapsed(true)
                 }}
               >
                 <Arrow collapsed={true} type={type} />
               </div>
-            )} */}
+            )}
           </div>
 
           {collapsed && (
@@ -274,9 +293,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   if (isSelected) {
                     classNames += ' submenu-selected'
                   }
+                  if (collapsed) {
+                    return (
+                      <Popover placement="right" arrow={false} content={<div>123</div>} trigger="hover">
+                        <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>
+                          }
+                        ></SubMenu>
+                      </Popover>
+                    )
+                  }
                   return (
                     <SubMenu
-                      popupClassName="rc-menu-submenu-popup"
                       key={item.key}
                       className="menu-item-content"
                       title={
@@ -299,7 +335,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         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>}
@@ -417,7 +452,7 @@ function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
   return (
     <svg style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
       <path
-        fill="FFFFFF"
+        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>
@@ -455,9 +490,20 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
       }
     }
 
+    const handleClickOutside = (event: MouseEvent) => {
+      console.log(1)
+      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)
     }
   }, [])
 
@@ -541,7 +587,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
           </div>
         </div>
       ) : (
-        <div>
+        <div className="search-container">
           <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" />

package/src/components/universal-pages/accountInfo/index.tsx

@@ -189,7 +189,6 @@ export default function AccountInfo() {
       </Divider>
       <Descriptions className='basicInfoWrap'>
         <Descriptions.Item label="账号">{accountInfo?.account || ''}</Descriptions.Item>
-        <Descriptions.Item label="员工工号">{accountInfo?.jobNumber || ''}</Descriptions.Item>
         <Descriptions.Item label="名称">{accountInfo?.name || ''}</Descriptions.Item>
         <Descriptions.Item label="手机号">{accountInfo?.mobile || ''}</Descriptions.Item>
         <Descriptions.Item label="邮箱">{accountInfo?.email || ''}</Descriptions.Item>

package/src/components/universal-pages/cpcAccountInfo/index.tsx

@@ -384,7 +384,6 @@ export default function AccountInfo({ isShowTab, getAuthTree, getAccountAuthTree
         </div>
         <Descriptions className='basicInfoWrap'>
           <Descriptions.Item label='账号'>{accountInfo?.account || ''}</Descriptions.Item>
-          <Descriptions.Item label='员工工号'>{accountInfo?.jobNumber || ''}</Descriptions.Item>
           <Descriptions.Item label='名称'>{accountInfo?.name || ''}</Descriptions.Item>
           <Descriptions.Item label='手机号'>{accountInfo?.mobile || ''}</Descriptions.Item>
           <Descriptions.Item label='邮箱'>{accountInfo?.email || ''}</Descriptions.Item>

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

@@ -1,169 +0,0 @@
-$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;
-  }
-}

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

@@ -1,218 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Layout, Menu, MenuProps, Popover } from 'antd'
-import UserCard from './user-card'
-import './index.scss'
-
-const { Sider } = Layout
-
-export interface LiosLayoutlProps {
-  appName?: any
-  productCode: string
-  children: any
-  menuList: any
-  onMenuClick: (item: any) => void
-  selectedKeys: string[]
-  customAction?: (item: any) => void
-  actions?: any[]
-  myWalletInfo?: {
-    availableCashAmount: string
-    availableAmount: string
-    currency: string
-  }
-  MyLoginInfo?: {
-    isAdmin: any
-  }
-  amountInfo?: {
-    residueNum: string
-    currencyCode: string
-  }
-  myWalletInfoAction?: Function
-  myLoginInfoAction?: Function
-  logoutUrl?: string
-  switchTenantUrl?: string
-  defaultOpenKeys?: string[]
-  isHideHeader?: boolean //是否隐藏header
-  onCollapse?: (value: boolean) => void
-}
-
-export default function LiosLayout(props: LiosLayoutlProps) {
-  const {
-    appName,
-    productCode,
-    menuList,
-    onMenuClick,
-    selectedKeys,
-
-    customAction,
-    actions,
-
-    defaultOpenKeys,
-    myWalletInfo,
-    MyLoginInfo,
-    amountInfo,
-    myWalletInfoAction,
-    myLoginInfoAction,
-    isHideHeader,
-    onCollapse,
-  } = props
-
-  const { user, logo, subLogo } = (window as any)?.g_config
-  const { name, avatar } = user || {}
-
-  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
-
-  //处理搜索菜单后自动展开目录
-  interface TreeNode {
-    key: string
-    children?: TreeNode[]
-  }
-  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) {}
-  }
-
-  return (
-    <Layout className="layout-warp">
-      {Array.isArray(menuList) && menuList.length > 0 && (
-        <Sider
-          className="layout-side"
-          style={{
-            backgroundSize: collapsed ? '1800%' : '900%',
-          }}
-          collapsible
-          collapsed={collapsed}
-          width={240}
-          onCollapse={(value) => {
-            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>
-
-          <div className="layout-menu-container">
-            <Menu
-              mode="inline"
-              openKeys={openKeys}
-              onOpenChange={onOpenChange}
-              items={menuList}
-              onClick={(item): any => {
-                onMenuClick && onMenuClick(item)
-              }}
-              selectedKeys={selectedKeys}
-              theme="dark"
-              color="red"
-            />
-          </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) => {
-                if (!e) return
-                setIsCopied({
-                  account: false,
-                  id: false,
-                  tenantName: false,
-                  tenantId: false,
-                })
-                myLoginInfoAction && myLoginInfoAction()
-              }}
-            >
-              <div className="layout-header-user">
-                <img className="avatar" src={avatar} />
-                <div className="name">{name}</div>
-              </div>
-            </Popover>
-          </div>
-        )}
-        <div className="layout-content">{props.children}</div>
-      </div>
-    </Layout>
-  )
-}

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

@@ -1,180 +0,0 @@
-//用户卡片
-.layout-user-card {
-  min-width: 182px;
-  max-width: 262px;
-
-  .user-info {
-    display: flex;
-
-    .user-avatarBox{
-      width: 72px;
-      height: 72px;
-      margin-right: 12px;
-      position: relative;
-      .user-avatar {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.3);
-      }
-      .user-mater{
-        position: absolute;
-        bottom: 0px;
-        left: 0px;
-        right: 0px;
-        text-align: center;
-        background-color: rgba(62, 119, 189 ,0.9);
-        width: 50px;
-        border-radius: 50px;
-        color: #fff;
-        transform: scale(0.9);
-        margin: auto;
-      }
-    }
-
-    .user-info-right {
-      flex: 1;
-    }
-
-    .name {
-      display: inline-block;
-      margin-top: 18px;
-    }
-
-    .role-list {
-      font-size: 12px;
-      line-height: 16px;
-      margin-top: 4px;
-
-      .role-item {
-        background: rgba(204, 204, 204, 0.55);
-        padding: 2px 8px;
-        border-radius: 8px;
-        display: inline-block;
-        margin-right: 4px;
-        margin-bottom: 4px;
-      }
-    }
-  }
-
-  .lios-tenant {
-    padding: 5px 0px;
-    margin: 5px 0px;
-    border-top: 1px solid rgba(5, 5, 5, 0.06);
-
-    .tenant-label {
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.5);
-    }
-
-    .tenant-switch {
-      display: flex;
-
-      .tenant-value {
-        flex: 1;
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .tenant-icon {
-        width: 40px;
-        text-align: center;
-        color: rgba(0, 0, 0, 0.45);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .tenant-icon:hover {
-        cursor: pointer;
-        color: rgba(0, 0, 0, 0.85);
-      }
-    }
-  }
-
-  .lios-userInfo {
-    padding: 5px 0px;
-    margin: 5px 0px;
-    border-top: 1px solid rgba(5, 5, 5, 0.06);
-
-    .li-flex {
-      display: flex;
-      .lios-keyMare {
-        width: 50px;
-      }
-      .lios-value {
-        flex: 1;
-      }
-      .lios-valueMare {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      
-    }
-
-    .lios-li {
-      line-height: 22px;
-
-      .lios-key, .lios-keyMare  {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.5);
-        display: inline-block;
-      }
-
-      .lios-value, .lios-valueMare {
-        padding-left: 8px;
-        display: inline-block;
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.85);
-
-        span {
-          padding-left: 5px;
-        }
-      }
-      .lios-iconDone {
-        width: 40px;
-        text-align: center;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 10px;
-      }
-      .lios-icon {
-        width: 40px;
-        text-align: center;
-        color: rgba(0, 0, 0, 0.45);
-        transition: all 0.3s;
-      }
-
-      .lios-icon:hover {
-        cursor: pointer;
-        color: rgba(0, 0, 0, 0.85);
-      }
-    }
-  }
-  .lios-logoutBox{
-    display: flex;
-
-  .lios-logout {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: rgba(0, 0, 0, 0.45);
-    border-radius: 2px;
-    transition: background 0.3s;
-    padding: 4px;
-    flex: 1;
-    border: 1px solid rgba(5, 5, 5, 0.06);
-    margin: 4px 4px;
-    &:hover {
-      background: rgba(0, 0, 0, 0.03);
-    }
-
-    .logout-icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 3px;
-    }
-  }
-  }
-}