cfel-base-components 0.0.9 → 0.0.10

package/demo/src/index.jsx

@@ -1,28 +1,15 @@
 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">
+
+        </Layout >
+
+
     );
 }
 const container = document.getElementById('root');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "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);
             }
+
         }
     }
 
@@ -183,7 +184,7 @@ body {
             background: rgba(255, 255, 255, 0.3);
             margin-right: 12px;
         }
-       
+
     }
 
     .lios-tenant {
@@ -221,4 +222,36 @@ 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;
+            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;
@@ -15,19 +16,22 @@ export interface LiosLayoutlProps {
     tenantName: string
   };
   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 {
@@ -67,6 +71,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 +102,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' />