cfel-base-components 0.0.10 → 0.0.12

package/demo/src/index.jsx

@@ -5,7 +5,16 @@ import Layout from '../../src/components/layout';
 
 const App = () => {
     return (
-        < Layout  appName="123123" productCode="lios-iot-wifi">
+        < 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",
+                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%2Fweb",
+                // role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
+                // role:["超级管理员"]
+            }}
+        >
 
         </Layout >
 

package/lib/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.React);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};var o={};return function e(o){var f=r[o];if(void 0!==f)return f.exports;var p=r[o]={exports:{}};return t[o](p,p.exports,e),p.exports}(787),o.default})()));

package/lib/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0}.lios-header{height:48px;background:white;z-index:1;box-shadow:1px 0px 5px #ccc;position:relative;display:flex;justify-content:flex-start;align-items:center}.lios-header .background{width:800px;height:100%;position:absolute;top:0;right:0;overflow:hidden}.lios-header .background .background-img{width:800px;position:absolute;top:-65px}.lios-header .background .background-mask{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(to right, #fff, rgba(255,255,255,0))}.lios-header .lios-header-fill{flex:1}.lios-header .lios-logo{left:48px;top:0;width:255px;position:absolute;z-index:1;display:inline-flex;align-items:center}.lios-header .lios-logo .img{color:#1677ff;font-size:20px;line-height:48px;font-family:Lucida Calligraphy, cursive, serif, sans-serif;margin-right:12px}.lios-header .lios-logo .interval{color:rgba(0,0,0,0.1);width:1px;height:12px;background-color:rgba(0,0,0,0.1);margin:8px}.lios-header .lios-logo .app-list .app-list-current{font-size:12px;height:24px;line-height:24px;padding:0 12px;border-radius:6px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';cursor:pointer;transition:all 0.3s;color:rgba(0,0,0,0.88);font-weight:400}.lios-header .lios-logo .app-list .app-list-current:hover{background:rgba(0,0,0,0.1)}.lios-header .lios-header-actions{display:flex;justify-content:flex-start;align-items:center;height:100%;max-width:300px;z-index:2}.lios-header .lios-header-actions .actions-item{height:36px;border-radius:6px;transition:all .3s;cursor:pointer;margin:0 4px;padding:0 12px;display:flex;justify-content:center;align-items:center}.lios-header .lios-header-actions .actions-item:hover{background:rgba(255,255,255,0.15)}.lios-header .lios-header-user{height:40px;display:flex;justify-content:flex-start;align-items:center;z-index:2;transition:all .3s;padding:0 12px;margin:0 12px;border-radius:6px;cursor:pointer}.lios-header .lios-header-user:hover{background:rgba(255,255,255,0.15)}.lios-header .lios-header-user .author{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.3);margin-right:12px}.lios-header .lios-header-user .name{color:white}.lios-main{display:flex;height:100%}.lios-side{max-width:255px;height:calc(100vh - 48px);background:white;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-top:12px}.lios-content{width:100%;height:calc(100vh - 48px);overflow-y:auto;padding:16px 16px 5px;display:flex;flex-direction:column}.lios-user-card{min-width:182px;max-width:262px}.lios-user-card .user-info{display:flex;margin-bottom:12px}.lios-user-card .user-info .author{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.3);margin-right:12px}.lios-user-card .user-info .user-info-right{flex:1}.lios-user-card .user-info .name{display:inline-block;margin-top:18px}.lios-user-card .user-info .role-list{font-size:12px;line-height:16px;margin-top:4px}.lios-user-card .user-info .role-list .role-item{background:rgba(204,204,204,0.55);padding:2px 8px;border-radius:8px;display:inline-block;margin-right:4px;margin-bottom:4px}.lios-user-card .lios-tenant{margin-bottom:12px}.lios-user-card .lios-tenant .tenant-label{font-size:12px;color:rgba(0,0,0,0.65)}.lios-user-card .lios-tenant .tenant-switch{display:flex}.lios-user-card .lios-tenant .tenant-switch .tenant-value{flex:1;font-size:14px;color:rgba(0,0,0,0.85)}.lios-user-card .lios-tenant .tenant-switch .tenant-icon{width:40px;text-align:center;color:rgba(0,0,0,0.45);display:flex;justify-content:center;align-items:center}.lios-user-card .lios-tenant .tenant-switch .tenant-icon:hover{cursor:pointer;color:rgba(0,0,0,0.85)}.lios-user-card .lios-logout{cursor:pointer;display:flex;justify-content:center;align-items:center;color:rgba(0,0,0,0.45);border-radius:4px;transition:background .3s;padding:4px}.lios-user-card .lios-logout:hover{background:rgba(0,0,0,0.08)}.lios-user-card .lios-logout .logout-icon{width:16px;height:16px;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,0.65)}.app-list-other .product-list-item:hover{background:rgba(22,119,255,0.08);color:rgba(22,119,255,0.8)}.app-list-other .product-list-item img{width:32px;height:32px;margin-right:12px}.app-list-other .current-product{color:#1677FF !important}
+

package/package.json

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

package/src/.umi/core/helmet.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import React from 'react';
+import { HelmetProvider } from '/Users/wujingang/Desktop/workspace/base-components/node_modules/@umijs/renderer-react';
+import { context } from './helmetContext';
+
+export const innerProvider = (container) => {
+  return React.createElement(HelmetProvider, { context }, container);
+}

package/src/.umi/core/helmetContext.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+export const context = {};

package/src/components/layout/index.scss

@@ -169,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 {
@@ -185,20 +185,59 @@ body {
             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);
         }
-
-        .tenant-value {
-            font-size: 14px;
-            color: rgba(0, 0, 0, .85);
+        .tenant-switch{
+            display: flex;
+            .tenant-value {
+                flex: 1;
+                font-size: 14px;
+                color: rgba(0, 0, 0, .85);
+            }
+            .tenant-icon{
+                width: 40px;
+                text-align: center;
+                color: rgba(0, 0, 0, .45);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .tenant-icon:hover{
+                cursor: pointer;
+                color: rgba(0, 0, 0, .85);
+            }
         }
+        
 
-        margin-bottom: 12px;
     }
 
 
@@ -247,6 +286,7 @@ body {
 
         img {
             width: 32px;
+            height: 32px;
             margin-right: 12px;
         }
     }

package/src/components/layout/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Layout, Menu, MenuProps, Popover } from 'antd';
+import { SwapOutlined, } from '@ant-design/icons';
 import "./index.scss"
 
 export interface LiosLayoutlProps {
@@ -13,9 +14,11 @@ export interface LiosLayoutlProps {
   user?: {
     name: string,
     avatar: string,
-    tenantName: string
+    tenantName: string,
+    role: any[]
   };
-  logoutUrl?: string
+  logoutUrl?: string,
+  switchTenantUrl?: string,
   defaultOpenKeys?: string[],
   productList?: any[],
 }
@@ -30,6 +33,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     actions,
     user,
     logoutUrl,
+    switchTenantUrl,
     defaultOpenKeys,
     productList
   } = props
@@ -38,6 +42,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     name,
     avatar,
     tenantName,
+    role,
   } = user || {}
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
 
@@ -52,14 +57,28 @@ 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>
 
       {tenantName && <div className='lios-tenant'>
         <div className='tenant-label'>租户</div>
-        <div className='tenant-value'>{tenantName}</div>
+        <div className='tenant-switch'>
+          <div className='tenant-value'>{tenantName}</div>
+          {
+            switchTenantUrl && <div className='tenant-icon' onClick={() => {
+              location.href = switchTenantUrl;
+            }}>
+              <SwapOutlined />
+            </div>
+          }
+        </div>
       </div>}
 
       {logoutUrl && <div className='lios-logout' onClick={() => {