cfel-base-components 1.0.12 → 2.0.0

package/demo/src/index.jsx

@@ -1,10 +1,11 @@
 import React from "react"
 import { createRoot } from 'react-dom/client';
 import style from './index.module.less';
+import { SwapOutlined, } from '@ant-design/icons';
 
 import './index.scss';
 import PageContainer from '../../src/components/base-component/PageContainer';
-// import Layout from '../../src/components/layout';
+import Layout from '../../src/components/layout';
 // import Account from '../../src/components/universal-pages/account';
 // import AccountInfo from '../../src/components/universal-pages/accountInfo';
 // import Role from '../../src/components/universal-pages/role';
@@ -12,7 +13,140 @@ import PageContainer from '../../src/components/base-component/PageContainer';
 
 const App = () => {
     return <PageContainer className={"aaa"}>
-        123
+        <Layout 
+        menuList={[
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '设备中心',
+              key: 'device',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '设备管理',
+                  key: 'device-list',
+                },
+              ],
+            },
+            {
+              label: '空间中心',
+              key: 'space',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '空间管理',
+                  key: 'space-list',
+                },
+                {
+                  label: '空间类型',
+                  key: 'space-type',
+                },
+              ],
+            },
+            {
+              label: '应用中心',
+              key: 'packet',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: 'OTA任务列表',
+                  key: 'packet-list',
+                },
+                {
+                  label: '桌牌推送',
+                  key: 'card-push',
+                },
+                {
+                  label: '会议室列表',
+                  key: 'room-intelligence',
+                },
+              ],
+            },
+            {
+              label: '权限管理',
+              key: 'authority',
+              icon: <SwapOutlined />,
+              children: [
+                {
+                  label: '账号列表',
+                  key: 'account-list',
+                },
+                {
+                  label: '角色列表',
+                  key: 'role-list',
+                },
+              ],
+            },
+            {
+              label: '规则模板',
+              key: 'rule-template',
+              icon: <i className="iconfont icon-moban" />
+            },
+            {
+              label: '规则实例',
+              key: 'rule-instance',
+              icon: <i className="iconfont icon-guize" />
+            },
+          
+          ]}
+          logoData={{
+            type:'img',
+            content:'运营平台'
+          }}
+        ></Layout>
     </PageContainer>
 }
 const container = document.getElementById('root');

package/demo/src/index.module.less

@@ -1,3 +1,7 @@
+*,body{
+    padding: 0px;
+    margin: 0px;
+}
 .aaa {
     background: red;
 }

package/package.json

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

package/src/components/layout/index.scss

@@ -1,7 +1,10 @@
 body {
     margin: 0;
 }
-
+.layoutWarp{
+    display: flex;
+    flex-direction: column !important;
+}
 .lios-header {
     height: 48px;
     background: white;
@@ -42,6 +45,7 @@ body {
 
     .lios-logo {
         left: 48px;
+        height: 48px;
         top: 0;
         width: 255px;
         position: absolute;
@@ -50,10 +54,17 @@ body {
         align-items: center;
 
         .img {
+            line-height: 48px;
+            font-family: Lucida Calligraphy, cursive, serif, sans-serif;
+            margin-right: 12px;
+            width: 100px;
+            height: 33px;
+        }
+        .text{
             color: #1677ff;
             font-size: 20px;
             line-height: 48px;
-            font-family: Lucida Calligraphy, cursive, serif, sans-serif;
+            font-family:'Courier New', Courier, monospace;
             margin-right: 12px;
         }
 
@@ -156,11 +167,11 @@ body {
 }
 
 .lios-side {
-    min-width: 255px;
-    height: calc(100vh - 48px);
-    background: white;
+    height: calc(100vh - 96px);
+    // background: white;
     user-select: none;
-    padding-top: 12px;
+    // padding-top: 12px;
+    // margin-bottom: 48px;
     overflow: auto;
 }
 

package/src/components/layout/index.tsx

@@ -21,6 +21,10 @@ export interface LiosLayoutlProps {
   switchTenantUrl?: string,
   defaultOpenKeys?: string[],
   productList?: any[],
+  logoData?:{
+    type:string,
+    content:string
+  }
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
@@ -34,7 +38,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     logoutUrl,
     switchTenantUrl,
     defaultOpenKeys,
-    productList
+    productList,
+    logoData
   } = props
 
   const {
@@ -45,6 +50,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   } = user || {}
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
   const [currentProduct, setCurrentProduct] = useState<any>({});
+  
+  const { Sider } = Layout;
+
+  const [collapsed, setCollapsed] = useState(false);
 
   useEffect(() => {
     if(!productList)return
@@ -112,8 +121,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
       })}
     </div>
   }
-
-  return (<Layout>
+  const MenuStyle={
+    width:collapsed?80:256
+  }
+  return (
+  <Layout className="layoutWarp">
     <div className="lios-header">
 
       <div className="background">
@@ -122,9 +134,14 @@ export default function LiosLayout(props: LiosLayoutlProps) {
       </div>
 
       <strong className="lios-logo">
-        <div className="img">
-          LiOS
-        </div>
+        {
+          logoData?.type == "img" ? 
+           <img  className="img" src={logoData.content || ''}/>
+          :
+          <div className="text">
+            {logoData.content}
+          </div>
+        }
         <div className="interval" />
         <div className="app-list">
           {
@@ -170,20 +187,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     </div>
 
     <div className="lios-main">
-      <div className="lios-side">
-        <Menu
-          mode="inline"
-          openKeys={openKeys}
-          onOpenChange={onOpenChange}
-          style={{ width: 256 }}
-          items={menuList}
-          onClick={(item): any => {
-            onMenuClick && onMenuClick(item)
-          }}
-          selectedKeys={selectedKeys}
-        />
-      </div>
-      <div className="lios-content">
+        <Sider
+          className="lios-side"
+          theme={"light"} 
+          collapsible 
+          collapsed={collapsed} 
+          width={collapsed?60:256}
+          onCollapse={(value) => setCollapsed(value)}>
+          <Menu
+            mode="inline"
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
+            items={menuList}
+            style={MenuStyle}
+            onClick={(item): any => {
+              onMenuClick && onMenuClick(item)
+            }}
+            selectedKeys={selectedKeys}
+          />
+        </Sider>
+      <div className="lios-content">2
         {props.children}
       </div>
     </div>