cfel-base-components 0.0.9 → 0.0.11

package/demo/src/index.jsx

@@ -1,28 +1,23 @@
 import React from "react"
 import { createRoot } from 'react-dom/client';
-import { WidthAutoLabel } from '../../src/index'; // 引入组件
 import './index.scss';
-// import WidthAutoLabel from 'text-width-auto-label';
+import Layout from '../../src/components/layout';
 
 const App = () => {
     return (
-        <div className="container">
-            <div className="text">
-                <p>示例文本：</p><p>文本宽度自适应标签组件</p>
-            </div>
-            <div className="normal">
-                <p>宽度100px：</p><p>文本宽度自适应标签组件</p>
-            </div>
-            <div className="style1">
-                <p>宽度100px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
-            </div>
-            <div className="style2">
-                <p>宽度80px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
-            </div>
-            <div className="style3">
-                <p>宽度50px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
-            </div>
-        </div>
+        < Layout appName="123123" productCode="lios-iot-wifi"
+            user={{
+                name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
+                avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
+                tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
+                role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
+                // role:["超级管理员"]
+            }}
+        >
+
+        </Layout >
+
+
     );
 }
 const container = document.getElementById('root');

package/package.json

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

package/src/components/layout/index.scss

@@ -66,7 +66,7 @@ body {
         }
 
         .app-list {
-            .current {
+            .app-list-current {
                 font-size: 12px;
                 height: 24px;
                 line-height: 24px;
@@ -81,9 +81,10 @@ body {
                 font-weight: 400;
             }
 
-            .current:hover {
+            .app-list-current:hover {
                 background: rgba(0, 0, 0, 0.1);
             }
+
         }
     }
 
@@ -168,12 +169,12 @@ body {
 
 //用户卡片
 .lios-user-card {
-    width: 182px;
+    min-width: 182px;
+    max-width: 262px;
 
     .user-info {
         display: flex;
-        justify-content: flex-start;
-        align-items: center;
+        // justify-content: flex-start;
         margin-bottom: 12px;
 
         .author {
@@ -183,10 +184,34 @@ body {
             background: rgba(255, 255, 255, 0.3);
             margin-right: 12px;
         }
-       
+
+        .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, .55);
+                padding: 2px 8px;
+                border-radius: 8px;
+                display: inline-block;
+                margin-right: 4px;
+                margin-bottom: 4px;
+            }
+        }
     }
 
     .lios-tenant {
+        margin-bottom: 12px;
+
         .tenant-label {
             font-size: 12px;
             color: rgba(0, 0, 0, .65);
@@ -197,7 +222,6 @@ body {
             color: rgba(0, 0, 0, .85);
         }
 
-        margin-bottom: 12px;
     }
 
 
@@ -221,4 +245,37 @@ body {
             margin-right: 8px;
         }
     }
+}
+
+
+
+.app-list-other {
+
+    .product-list-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin: 8px 0;
+        padding: 6px 12px;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all .3s;
+        color: rgba(0, 0, 0, .65);
+
+
+        &:hover {
+            background: rgba(22, 119, 255, .08);
+            color: rgba(22, 119, 255, .8);
+        }
+
+        img {
+            width: 32px;
+            height: 32px;
+            margin-right: 12px;
+        }
+    }
+
+    .current-product {
+        color: #1677FF !important;
+    }
 }

package/src/components/layout/index.tsx

@@ -4,6 +4,7 @@ import "./index.scss"
 
 export interface LiosLayoutlProps {
   appName: string;
+  productCode: string;
   children: any;
   menuList: any;
   onMenuClick: (item: any) => void;
@@ -12,28 +13,33 @@ export interface LiosLayoutlProps {
   user?: {
     name: string,
     avatar: string,
-    tenantName: string
+    tenantName: string,
+    role: any[]
   };
   logoutUrl?: string
-  defaultOpenKeys?: string[]
+  defaultOpenKeys?: string[],
+  productList?: any[],
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
   const {
     appName,
+    productCode,
     menuList,
     onMenuClick,
     selectedKeys,
     actions,
     user,
     logoutUrl,
-    defaultOpenKeys
+    defaultOpenKeys,
+    productList
   } = props
 
   const {
     name,
     avatar,
     tenantName,
+    role,
   } = user || {}
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
 
@@ -48,8 +54,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           className="author"
           src={avatar}
         />
-        <div className="name">
-          {name}
+        <div className='user-info-right'>
+          <span className='name'>{name}</span>
+          <div className='role-list'>
+            {role?.map((i) => <span className='role-item' key={i}>
+              {i}
+            </span>)}
+          </div>
         </div>
       </div>
 
@@ -67,6 +78,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     </div >
   }
 
+  const ProductList = () => {
+    return <div className='app-list-other'>
+      {productList?.map((item) => {
+        return <div
+          onClick={() => {
+            item.productCode != productCode && item?.portalUrl && window.open(item?.portalUrl)
+          }}
+          key={item.id}
+          className={`product-list-item ${item.productCode == productCode ? "current-product" : ""}`}
+        >
+          <img src={item?.logoUrl || "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"} alt="" />
+          <div> {item?.productName}</div>
+        </div>
+      })}
+    </div>
+  }
+
   return (<Layout>
     <div className="lios-header">
 
@@ -81,9 +109,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </div>
         <div className="interval" />
         <div className="app-list">
-          <div className="current">
-            {appName}
-          </div>
+          <Popover placement="bottom" content={<ProductList />} arrow={false} trigger="click">
+            <div className="app-list-current">
+              {appName}
+            </div>
+          </Popover>
         </div>
       </strong>
       <div className='lios-header-fill' />