cfel-base-components 2.0.15 → 2.1.0

package/demo/src/index.jsx

@@ -12,45 +12,43 @@ import CpcRole from '../../src/components/universal-pages/cpcRole';
 // import RoleInfo from '../../src/components/universal-pages/roleInfo';
 
 const App = () => {
-    return <PageContainer className={"aaa"}>
-        <Layout 
-        productList={false}
-        menuList={[
+  return <div >
+    <Layout
+      appName="控制台"
+      productList={false}
+      menuList={[
+        {
+          label: '设备中心',
+          key: 'device',
+          icon: <SwapOutlined />,
+          children: [
             {
-              label: '设备中心',
-              key: 'device',
-              icon: <SwapOutlined />,
-              children: [
-                {
-                  label: '设备管理',
-                  key: 'device-list',
-                },
-              ],
+              label: '设备管理',
+              key: 'device-list',
             },
-          ]}
-          logoData={{
-            type:'img',
-            content:'运营平台'
-          }}
-          user={{
-            name: (window)?.g_config?.user?.name,
-            avatar: (window)?.g_config?.user?.avatar,
-            tenantName: (window)?.g_config?.tenant?.name,
-            role: (window)?.g_config?.user?.roleInfo,
-          }}
-          custom={{
-            type:(window)?.g_config?.custom?.type,
-            isCompleted:(window)?.g_config?.custom?.isCompleted,
-            isAudited:(window)?.g_config?.custom?.isAudited,
-            hrefUrl:'/web/user-info',
-            historyAction:history
-          }}
-          logoutUrl={(window)?.g_config?.logoutUrl}
-          switchTenantUrl={(window)?.g_config?.switchTenantUrl}
-        >
-          <CpcRole></CpcRole>
-        </Layout>
-    </PageContainer>
+          ],
+        },
+      ]}
+      logoUrl={"https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-puhui.png"}
+      user={{
+        name: (window)?.g_config?.user?.name,
+        avatar: (window)?.g_config?.user?.avatar,
+        tenantName: (window)?.g_config?.tenant?.name,
+        role: (window)?.g_config?.user?.roleInfo,
+      }}
+      custom={{
+        type: (window)?.g_config?.custom?.type,
+        isCompleted: (window)?.g_config?.custom?.isCompleted,
+        isAudited: (window)?.g_config?.custom?.isAudited,
+        hrefUrl: '/web/user-info',
+        historyAction: history
+      }}
+      logoutUrl={(window)?.g_config?.logoutUrl}
+      switchTenantUrl={(window)?.g_config?.switchTenantUrl}
+    >
+      <CpcRole></CpcRole>
+    </Layout>
+  </div>
 }
 const container = document.getElementById('root');
 const root = createRoot(container);

package/demo/src/index.module.less

@@ -2,6 +2,3 @@
     padding: 0px;
     margin: 0px;
 }
-.aaa {
-    background: red;
-}

package/demo/src/index.scss

@@ -1,4 +0,0 @@
-.a {
-    background: red;
-    height: calc(100vh - 48px);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.0.15",
+  "version": "2.1.0",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/components/base-component/PageContainer/index.module.less

@@ -18,6 +18,6 @@
   text-align: center;
   color: #ccc;
   font-size: 12px;
-  padding: 4px;
+  padding: 4px 0 8px;
   letter-spacing: .2px;
 }

package/src/components/layout/index.scss

@@ -1,11 +1,13 @@
 body {
     margin: 0;
 }
-.layoutWarp{
+
+.layout-warp {
     display: flex;
     flex-direction: column !important;
 }
-.lios-header {
+
+.layout-header {
     height: 48px;
     background: white;
     z-index: 1;
@@ -39,12 +41,12 @@ body {
         }
     }
 
-    .lios-header-fill {
+    .layout-header-fill {
         flex: 1;
     }
 
-    .lios-logo {
-        left: 48px;
+    .layout-header-logo {
+        left: 36px;
         height: 48px;
         top: 0;
         width: 255px;
@@ -53,29 +55,27 @@ body {
         display: inline-flex;
         align-items: center;
 
-        .img {
+        .logo-img {
             line-height: 48px;
             font-family: Lucida Calligraphy, cursive, serif, sans-serif;
-            margin-right: 12px;
             height: 40px;
             object-fit: cover;
         }
-        .text{
-            color: #1677ff;
-            font-size: 20px;
-            line-height: 48px;
-            font-family:'Courier New', Courier, monospace;
-            margin-right: 12px;
-        }
 
         .interval {
-            color: rgba(0, 0, 0, 0.1);
             width: 1px;
             height: 12px;
-            background-color: rgba(0, 0, 0, 0.1);
-            margin: 8px;
+            background-color: rgba(0, 0, 0, 0.45);
+            margin: 0 12px;
+        }
+
+        .app-name {
+            margin-left: 12px;
+            font-weight: 400;
+            color: rgba(0, 0, 0, .72);
         }
 
+
         .app-list {
             .app-list-currentlist {
                 font-size: 12px;
@@ -91,7 +91,8 @@ body {
                 color: rgba(0, 0, 0, 0.88);
                 font-weight: 400;
                 display: flex;
-                img{
+
+                img {
                     max-width: 32px;
                     margin-right: 4px;
                 }
@@ -100,6 +101,7 @@ body {
             .app-list-currentlist:hover {
                 background: rgba(0, 0, 0, 0.1);
             }
+
             .app-list-current {
                 font-size: 12px;
                 height: 32px;
@@ -113,7 +115,8 @@ body {
                 color: rgba(0, 0, 0, 0.88);
                 font-weight: 400;
                 display: flex;
-                img{
+
+                img {
                     max-width: 32px;
                     margin-right: 4px;
                 }
@@ -121,7 +124,7 @@ body {
         }
     }
 
-    .lios-header-actions {
+    .layout-header-actions {
         display: flex;
         justify-content: flex-start;
         align-items: center;
@@ -148,7 +151,7 @@ body {
     }
 
 
-    .lios-header-user {
+    .layout-header-user {
         height: 40px;
         display: flex;
         justify-content: flex-start;
@@ -178,28 +181,25 @@ body {
     }
 }
 
-.lios-main {
+.layout-main {
     display: flex;
     height: 100%;
 }
 
-.lios-side {
+.layout-side {
     height: calc(100vh - 96px);
-    // background: white;
     user-select: none;
-    // padding-top: 12px;
-    // margin-bottom: 48px;
     overflow: auto;
 }
 
-.lios-content {
+.layout-content {
     width: 100%;
     height: calc(100vh - 48px);
     overflow: auto;
 }
 
 //用户卡片
-.lios-user-card {
+.user-card {
     min-width: 182px;
     max-width: 262px;
 
@@ -214,8 +214,8 @@ body {
             margin-right: 12px;
         }
 
-        .user-info-right{
-           flex: 1;
+        .user-info-right {
+            flex: 1;
         }
 
         .name {
@@ -227,6 +227,7 @@ body {
             font-size: 12px;
             line-height: 16px;
             margin-top: 4px;
+
             .role-item {
                 background: rgba(204, 204, 204, .55);
                 padding: 2px 8px;
@@ -242,18 +243,22 @@ body {
         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, .5);
         }
-        .tenant-switch{
+
+        .tenant-switch {
             display: flex;
+
             .tenant-value {
                 flex: 1;
                 font-size: 14px;
                 color: rgba(0, 0, 0, .85);
             }
-            .tenant-icon{
+
+            .tenant-icon {
                 width: 40px;
                 text-align: center;
                 color: rgba(0, 0, 0, .45);
@@ -261,51 +266,61 @@ body {
                 justify-content: center;
                 align-items: center;
             }
-            .tenant-icon:hover{
+
+            .tenant-icon:hover {
                 cursor: pointer;
                 color: rgba(0, 0, 0, .85);
             }
         }
-        
+
 
     }
-    .lios-userInfo{
+
+    .lios-userInfo {
         padding: 5px 0px;
         margin: 5px 0px;
         border-top: 1px solid rgba(5, 5, 5, 0.06);
-        .li-flex{
+
+        .li-flex {
             display: flex;
-            .lios-value{
+
+            .lios-value {
                 flex: 1;
             }
         }
-        .lios-li{
+
+        .lios-li {
             line-height: 22px;
-            .lios-key{
+
+            .lios-key {
                 font-size: 12px;
                 color: rgba(0, 0, 0, .5);
                 display: inline-block;
             }
-            .lios-value{
+
+            .lios-value {
                 padding-left: 8px;
                 display: inline-block;
                 font-size: 12px;
                 color: rgba(0, 0, 0, .85);
-                span{
+
+                span {
                     padding-left: 5px;
-                  }
+                }
             }
-            .lios-icon{
+
+            .lios-icon {
                 width: 40px;
                 text-align: center;
                 color: rgba(0, 0, 0, .45);
             }
-            .lios-icon:hover{
+
+            .lios-icon:hover {
                 cursor: pointer;
                 color: rgba(0, 0, 0, .85);
             }
         }
-        
+
     }
 
 
@@ -362,4 +377,10 @@ body {
     .current-product {
         color: #1677FF !important;
     }
+}
+
+.ant-layout-sider-trigger {
+    &:hover {
+        background: rgba(0, 0, 0, .02) !important;
+    }
 }

package/src/components/layout/index.tsx

@@ -34,16 +34,15 @@ export interface LiosLayoutlProps {
   switchTenantUrl?: string,
   defaultOpenKeys?: string[],
   productList?: any,
-  logoData?: {
-    type: string,
-    content: string
-  },
+  logoUrl?: string,
   isHideHeader?: boolean //是否隐藏header
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
   const {
+    appName,
     productCode,
+    logoUrl,
     menuList,
     onMenuClick,
     selectedKeys,
@@ -54,7 +53,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     switchTenantUrl,
     defaultOpenKeys,
     productList,
-    logoData,
     myWalletInfo,
     myWalletInfoAction,
     isHideHeader
@@ -72,27 +70,31 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     hrefUrl,
     historyAction
   } = custom || {}
+
   const {
     availableCashAmount,
     availableAmount,
     currency
   } = myWalletInfo || {}
+
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
-  const [currentProduct, setCurrentProduct] = useState<any>({});
+  // const [currentProduct, setCurrentProduct] = useState<any>({});
 
   const { Sider } = Layout;
 
   const [collapsed, setCollapsed] = useState(false);
+
   const [currencyList, setCurrencyList] = useState([
     { value: 'JPY', label: '日元', icon: '￥' },
     { value: 'USD', label: '美元', icon: "$" },
     { value: 'CNY', label: '人民币', icon: '￥' }
   ])
-  useEffect(() => {
-    if (!productList) return
-    let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
-    setCurrentProduct(cp)
-  }, [productList])
+
+  // useEffect(() => {
+  //   if (!productList) return
+  //   let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
+  //   setCurrentProduct(cp)
+  // }, [productList])
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     setOpenKeys(keys);
@@ -118,8 +120,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     })
     return text
   }
+
   const UserCard = () => {
-    return <div className='lios-user-card'>
+    return <div className='user-card'>
       <div className='user-info'>
         <img
 
@@ -212,53 +215,32 @@ export default function LiosLayout(props: LiosLayoutlProps) {
       })}
     </div>
   }
+
   const MenuStyle = {
-    width: collapsed ? 80 : 256
+    width: collapsed ? 80 : 240
   }
   return (
-    <Layout className="layoutWarp">
+    <Layout className="layout-warp">
       {
         !isHideHeader &&
-        <div className="lios-header">
+        <div className="layout-header">
 
           <div className="background">
             <img className="background-img" src="https://pic.imgdb.cn/item/64813de01ddac507cc192a6e.jpg" alt="" />
             <div className="background-mask" />
           </div>
 
-          <strong className="lios-logo">
-            {
-              logoData?.type == "img" ?
-                <img className="img" src={logoData?.content || ''} />
-                :
-                <div className="text">
-                  {logoData?.content || ''}
-                </div>
-            }
-            <div className="interval" />
-            <div className="app-list">
-              {
-                productList ?
-                  <Popover placement="bottom" content={<ProductListFunc />} arrow={false} trigger="click">
-                    <div className="app-list-currentlist">
-                      {currentProduct?.logoUrl && <img src={currentProduct?.logoUrl || ""} alt="" />}
-                      <div>
-                        {currentProduct?.productName || "请选择应用"}
-                      </div>
-                    </div>
-                  </Popover> :
-                  <div className="app-list-current">
-                    {currentProduct?.logoUrl && <img src={currentProduct?.logoUrl || ""} alt="" />}
-                    <div>
-                      {currentProduct?.productName}
-                    </div>
-                  </div>
-              }
-            </div>
+          <strong className="layout-header-logo">
+            {logoUrl && <img className="logo-img" src={logoUrl || ''} />}
+            {logoUrl && appName && <div className="interval" />}
+            {appName && <div className="app-name">
+              {appName}
+            </div>}
           </strong>
-          <div className='lios-header-fill' />
 
-          <div className='lios-header-actions'>
+          <div className='layout-header-fill' />
+
+          <div className='layout-header-actions'>
             {actions?.map((item, index) => {
               return <div className='actions-item' key={index}>
                 {item}
@@ -271,7 +253,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               if (!e) return
               myWalletInfoAction && myWalletInfoAction()
             })}>
-            <div className="lios-header-user">
+            <div className="layout-header-user">
               <img
                 className="author"
                 src={avatar}
@@ -283,16 +265,18 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           </Popover>
         </div>
       }
-      <div className="lios-main">
+      <div className="layout-main">
         {
-          menuList &&
+          Array.isArray(menuList) &&
+          menuList.length > 0 &&
           <Sider
-            className="lios-side"
+            className="layout-side"
             theme={"light"}
             collapsible
             collapsed={collapsed}
-            width={collapsed ? 60 : 256}
+            width={240}
             onCollapse={(value) => setCollapsed(value)}>
+
             <Menu
               mode="inline"
               openKeys={openKeys}
@@ -306,7 +290,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             />
           </Sider>
         }
-        <div className="lios-content">
+        <div className="layout-content">
           {props.children}
         </div>
       </div>