cfel-base-components 2.5.52 → 2.5.54

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;
-    }
-  }
-  }
-}

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

@@ -1,162 +0,0 @@
-import React from "react";
-import {
-  SwapOutlined,
-  FormOutlined,
-  CopyOutlined,
-  LogoutOutlined,
-} from "@ant-design/icons";
-import "./index.scss";
-
-interface UserType {
-  name: string;
-  avatar: string;
-  roleInfo: any[];
-  id: string;
-  account: string;
-  isMaster: boolean;
-}
-interface CustomType {
-  type: string;
-  isCompleted: number;
-  isAudited: number;
-  hrefUrl: string;
-  historyAction?: any;
-}
-interface MyWalletInfoType {
-  availableCashAmount: string;
-  availableAmount: string;
-  currency: string;
-}
-interface MyLoginInfoType {
-  isAdmin: any;
-}
-interface AmountInfoType {
-  residueNum: string;
-  currencyCode: string;
-}
-
-const renderCurrency = (currency: string) => {
-  switch (currency) {
-    case "CNY":
-      return "¥ ";
-    case "USD":
-      return "$ ";
-    case "JPY":
-      return "JP¥ ";
-    default:
-      return "¥ ";
-  }
-};
-
-export default function UserCard({
-  myWalletInfo,
-  MyLoginInfo,
-  amountInfo,
-  customAction,
-  isCopied,
-  copyTextToClipboard,
-}: any) {
-  const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)
-    ?.g_config;
-
-  const { name, avatar, roleInfo, id, account, isMaster }: UserType =
-    user || {};
-
-  const { isCompleted, isAudited }: CustomType = custom || {};
-
-  const { isAdmin }: MyLoginInfoType = MyLoginInfo || {};
-    
-  const { residueNum, currencyCode }: AmountInfoType = amountInfo || {};
-
-  const UserCard = () => {
-    return (
-        <div className="layout-user-card">
-          <div className="user-info">
-            <div className="user-avatarBox">
-              <img className="user-avatar" src={avatar}/>
-              <div className="user-mater">{isAdmin ? "主账号" : "子账号"}</div>
-            </div>
-            <div className="user-info-right">
-              <span className="name">{name}</span>
-              <div className="role-list">
-                {roleInfo?.map((i) => (
-                    <span className="role-item" key={i}>
-                  {i}
-                </span>
-                ))}
-              </div>
-            </div>
-          </div>
-          <div className="lios-userInfo">
-            <div className="lios-li li-flex">
-              <div className="lios-keyMare">账号ID</div>
-              <div className="lios-valueMare" title={id}>{id}</div>
-              <div
-                  className={isCopied?.['id'] ? "lios-iconDone" : "lios-icon"}
-                  onClick={() => {
-                    copyTextToClipboard(id, 'id');
-                  }}
-              >
-                {isCopied?.['id'] ? "已复制" : <CopyOutlined/>}
-              </div>
-            </div>
-            <div className="lios-li  li-flex">
-              <div className="lios-keyMare">账号</div>
-              <div className="lios-valueMare" title={account}>
-                {account}
-              </div>
-              <div
-                  className={isCopied?.['account'] ? "lios-iconDone" : "lios-icon"}
-                  onClick={() => {
-                    copyTextToClipboard(account, 'account');
-                  }}
-              >
-                {isCopied?.['account'] ? "已复制" : <CopyOutlined/>}
-              </div>
-            </div>
-
-            <div className="lios-li li-flex">
-              <div className="lios-keyMare">租户ID</div>
-              <div className="lios-valueMare" title={tenant?.id}>{tenant?.id}</div>
-              <div
-                  className={isCopied?.['tenantId'] ? "lios-iconDone" : "lios-icon"}
-                  onClick={() => {
-                    copyTextToClipboard(tenant?.id, 'tenantId');
-                  }}
-              >
-                {isCopied?.['tenantId'] ? "已复制" : <CopyOutlined/>}
-              </div>
-            </div>
-            <div className="lios-li li-flex">
-              <div className="lios-keyMare">租户</div>
-              <div className="lios-valueMare" title={tenant?.name}>{tenant?.name}</div>
-            </div>
-          </div>
-
-
-          <div className="lios-logoutBox">
-            <div
-                className="lios-logout"
-                onClick={() => {
-                  location.href = switchTenantUrl;
-                }}
-            >
-              <SwapOutlined className="logout-icon"/>
-              切换租户
-            </div>
-            <div
-                className="lios-logout"
-                onClick={() => {
-                  location.href = logoutUrl;
-                }}
-            >
-              <LogoutOutlined className="logout-icon"/>
-              退出登录
-            </div>
-          </div>
-        </div>
-    );
-  };
-
-  return UserCard();
-}