cfel-base-components 2.0.4 → 2.0.6

package/demo/src/index.html

@@ -32,6 +32,13 @@
                 account: "15957797376",
                 roleInfo: []
             },
+            custom: {
+                id: 1727864976691109890,
+                name: "\u6D6A\u5473\u4ED9",
+                type: "\u4E2A\u4EBA",
+                isCompleted: 1,
+                isAudited: 1
+            },
             logoutUrl: "\/sso\/logout?back=http%3A%2F%2Flios-iot-obee-daily.chengfengerlai.com%2Fdelivery",
             switchTenantUrl: "https:\/\/cfel-sso-daily.chengfengerlai.com\/tenant\/switch?fakeAccountId=1676424765496406018\u0026redirect=http:\/\/lios-iot-obee-daily.chengfengerlai.com\/sso\/login?back=http%3A%2F%2Flios-iot-obee-daily.chengfengerlai.com%2Fdelivery",
             productCode: "lios-iot-obee",

package/demo/src/index.jsx

@@ -26,126 +26,25 @@ const App = () => {
                 },
               ],
             },
-            {
-              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:'运营平台'
           }}
+          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'
+          }}
+          logoutUrl={(window)?.g_config?.logoutUrl}
+          switchTenantUrl={(window)?.g_config?.switchTenantUrl}
         >
           <Account></Account>
         </Layout>

package/package.json

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

package/src/components/layout/index.scss

@@ -188,7 +188,6 @@ body {
 
     .user-info {
         display: flex;
-        margin-bottom: 12px;
 
         .author {
             width: 72px;
@@ -227,7 +226,7 @@ body {
 
         .tenant-label {
             font-size: 12px;
-            color: rgba(0, 0, 0, .65);
+            color: rgba(0, 0, 0, .5);
         }
         .tenant-switch{
             display: flex;
@@ -251,6 +250,41 @@ body {
         }
         
 
+    }
+    .lios-userInfo{
+        padding: 10px 0px;
+        margin: 10px 0px;
+        border-top: 1px solid rgba(5, 5, 5, 0.06);
+        border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+        .li-flex{
+            display: flex;
+            .lios-value{
+                flex: 1;
+            }
+        }
+        .lios-li{
+            .lios-key{
+                font-size: 12px;
+                color: rgba(0, 0, 0, .5);
+                display: inline-block;
+            }
+            .lios-value{
+                padding-left: 8px;
+                display: inline-block;
+                font-size: 12px;
+                color: rgba(0, 0, 0, .85);
+            }
+            .lios-icon{
+                width: 40px;
+                text-align: center;
+                color: rgba(0, 0, 0, .45);
+            }
+            .lios-icon:hover{
+                cursor: pointer;
+                color: rgba(0, 0, 0, .85);
+            }
+        }
+        
     }
 
 

package/src/components/layout/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Layout, Menu, MenuProps, Popover } from 'antd';
-import { SwapOutlined, } from '@ant-design/icons';
+import { SwapOutlined, FormOutlined } from '@ant-design/icons';
 import "./index.scss"
 
 export interface LiosLayoutlProps {
@@ -17,13 +17,19 @@ export interface LiosLayoutlProps {
     tenantName: string,
     role: any[]
   };
+  custom?: {
+    type: string,
+    isCompleted: number,
+    isAudited: number,
+    hrefUrl:string
+  }
   logoutUrl?: string,
   switchTenantUrl?: string,
   defaultOpenKeys?: string[],
   productList?: any[],
-  logoData?:{
-    type:string,
-    content:string
+  logoData?: {
+    type: string,
+    content: string
   }
 }
 
@@ -35,6 +41,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     selectedKeys,
     actions,
     user,
+    custom,
     logoutUrl,
     switchTenantUrl,
     defaultOpenKeys,
@@ -48,15 +55,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     tenantName,
     role,
   } = user || {}
+  const {
+    isCompleted,
+    isAudited,
+    hrefUrl
+  } = custom || {}
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
   const [currentProduct, setCurrentProduct] = useState<any>({});
-  
+
   const { Sider } = Layout;
 
   const [collapsed, setCollapsed] = useState(false);
 
   useEffect(() => {
-    if(!productList)return
+    if (!productList) return
     let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
     setCurrentProduct(cp)
   }, [productList])
@@ -64,11 +76,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     setOpenKeys(keys);
   };
-
+  const editUserInfo = () => {
+    const { origin } = window.location
+    window.location.href = origin +  hrefUrl 
+  }
   const UserCard = () => {
     return <div className='lios-user-card'>
       <div className='user-info'>
         <img
+
           className="author"
           src={avatar}
         />
@@ -82,6 +98,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </div>
       </div>
 
+      {
+        custom && <div className='lios-userInfo'>
+          <div className='lios-li li-flex'>
+            <div className='lios-key'>客户类型</div>
+            <div className='lios-value'>{custom.type || ''}</div>
+            <div className='lios-icon' onClick={(() => { editUserInfo() })}>
+              <FormOutlined />
+            </div>
+          </div>
+          <div className='lios-li'>
+            <div className='lios-key'>是否审核</div>
+            <div className='lios-value'>{isAudited ? '是' : '否'}</div>
+          </div>
+          <div className='lios-li'>
+            <div className='lios-key'>是否资料完备</div>
+            <div className='lios-value'>{isCompleted ? '是' : '否'}</div>
+          </div>
+        </div>
+      }
+
       {tenantName && <div className='lios-tenant'>
         <div className='tenant-label'>租户</div>
         <div className='tenant-switch'>
@@ -121,78 +157,78 @@ export default function LiosLayout(props: LiosLayoutlProps) {
       })}
     </div>
   }
-  const MenuStyle={
-    width:collapsed?80:256
+  const MenuStyle = {
+    width: collapsed ? 80 : 256
   }
   return (
-  <Layout className="layoutWarp">
-    <div className="lios-header">
+    <Layout className="layoutWarp">
+      <div className="lios-header">
 
-      <div className="background">
-        <img className="background-img" src="https://pic.imgdb.cn/item/64813de01ddac507cc192a6e.jpg" alt="" />
-        <div className="background-mask" />
-      </div>
+        <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">
+        <strong className="lios-logo">
           {
-            productList ?
-              <Popover placement="bottom" content={<ProductListFunc />} arrow={false} trigger="click">
+            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-current">
+                    {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 || "请选择应用"}
+                    {currentProduct?.productName}
                   </div>
                 </div>
-              </Popover> :
-              <div className="app-list-current">
-                {currentProduct?.logoUrl && <img src={currentProduct?.logoUrl || ""} alt="" />}
-                <div>
-                  {currentProduct?.productName}
-                </div>
-              </div>
-          }
+            }
+          </div>
+        </strong>
+        <div className='lios-header-fill' />
+
+        <div className='lios-header-actions'>
+          {actions?.map((item, index) => {
+            return <div className='actions-item' key={index}>
+              {item}
+            </div>
+          })}
         </div>
-      </strong>
-      <div className='lios-header-fill' />
 
-      <div className='lios-header-actions'>
-        {actions?.map((item, index) => {
-          return <div className='actions-item' key={index}>
-            {item}
+        <Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click">
+          <div className="lios-header-user">
+            <img
+              className="author"
+              src={avatar}
+            />
+            <div className="name">
+              {name}
+            </div>
           </div>
-        })}
+        </Popover>
       </div>
 
-      <Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click">
-        <div className="lios-header-user">
-          <img
-            className="author"
-            src={avatar}
-          />
-          <div className="name">
-            {name}
-          </div>
-        </div>
-      </Popover>
-    </div>
-
-    <div className="lios-main">
+      <div className="lios-main">
         <Sider
           className="lios-side"
-          theme={"light"} 
-          collapsible 
-          collapsed={collapsed} 
-          width={collapsed?60:256}
+          theme={"light"}
+          collapsible
+          collapsed={collapsed}
+          width={collapsed ? 60 : 256}
           onCollapse={(value) => setCollapsed(value)}>
           <Menu
             mode="inline"
@@ -206,10 +242,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             selectedKeys={selectedKeys}
           />
         </Sider>
-      <div className="lios-content">
-        {props.children}
+        <div className="lios-content">
+          {props.children}
+        </div>
       </div>
-    </div>
-  </Layout>
+    </Layout>
   )
 }

package/src/components/universal-pages/cpcAccount/AddModal/index.tsx

@@ -123,7 +123,7 @@ export default function index({
             >
                 {
                     formDom.map((item: any, index: number) => {
-                        return showCom(item)
+                        return <div key={index}>{showCom(item)}</div>
                     })
                 }
             </Form>