cfel-base-components 2.5.66 → 2.5.68

package/package.json

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

package/src/components/layout-cloud/index-cloud.scss

@@ -6,10 +6,7 @@ ul {
   margin: 0;
 }
 
-.ant-layout {
-  background: linear-gradient( 223deg, #F3FBFD 0%, #F6FCFB 30%, #F8FDFA 100%);;
-  box-shadow: inset 0px -1px 0px 0px #edeefd;
-}
+
 
 .ant-popover-inner {
   padding: 8px !important;
@@ -74,14 +71,14 @@ ul {
   }
 }
 
-.layout-menu {
+.layout-menu-cloud {
   border-radius: 16px;
   height: calc(100% - 109px);
   overflow-y: scroll;
   position: relative;
   z-index: 11;
 
-  .menu {
+  .menu-cloud {
     padding: 0;
     margin: 0;
     list-style: none;
@@ -481,16 +478,17 @@ body {
   overflow: hidden;
 }
 
-.layout-warps {
+.layout-warps-cloud {
   display: flex;
   padding: 12px;
-  background-color: #f3f6fd;
+  background: linear-gradient(223deg, #F3FBFD 0%, #e9f7f8 30%, #F8FDFA 100%);
+  box-shadow: inset 0px -1px 0px 0px #edeefd;
 
   ::-webkit-scrollbar {
     display: none;
   }
 
-  .trigger {
+  .trigger-cloud {
     margin-right: 16px;
     width: 30px;
     height: 30px;
@@ -504,7 +502,7 @@ body {
     align-items: center;
   }
 
-  .close-trigger {
+  .close-trigger-cloud {
     position: relative;
     z-index: 10;
     margin-top: 24px;
@@ -521,7 +519,7 @@ body {
     cursor: pointer;
   }
 
-  .search {
+  .search-cloud {
     height: 40px;
     box-shadow:
       inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
@@ -592,7 +590,7 @@ body {
     }
   }
 
-  .search-mobile-console {
+  .search-mobile-cloud {
     width: 40px;
     height: 40px;
     box-shadow:
@@ -628,7 +626,7 @@ body {
   z-index: 10;
 }
 
-.layout-side {
+.layout-side-cloud {
   background: transparent !important;
   position: relative;
   height: calc(100vh - 24px);
@@ -638,7 +636,7 @@ body {
   padding-top: 24px;
   overflow: visible;
 
-  .header-logo {
+  .header-logo-cloud {
     padding-left: 16px;
     display: flex;
     justify-content: space-between;
@@ -659,10 +657,10 @@ body {
   }
 }
 
-.layout-header {
+.layout-header-cloud {
   z-index: 1;
   height: $header-height;
-  background: linear-gradient(223deg, #faf8ff 0%, #eefaf5 29%, #ffffff 100%);
+  background: linear-gradient(223deg, #faf8ff26 0%, #eefaf5 29%, #ffffff 100%);
   border-radius: 16px;
   border: 1px solid #ffffff;
   position: relative;
@@ -676,11 +674,11 @@ body {
     color: rgba(0, 0, 0, 0.65);
   }
 
-  .layout-header-fill {
+  .layout-header-fill-cloud {
     flex: 1;
   }
 
-  .layout-header-actions {
+  .layout-header-actions-cloud {
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -708,7 +706,7 @@ body {
     }
   }
 
-  .layout-header-user {
+  .layout-header-user-cloud {
     height: 48px;
     display: flex;
     font-size: 14px;
@@ -734,14 +732,14 @@ body {
   }
 }
 
-.layout-main {
+.layout-main-cloud {
   flex: 1;
   height: 100%;
   padding-left: 12px;
   overflow: auto;
 }
 
-.layout-content {
+.layout-content-cloud {
   width: 100%;
   height: calc(100vh - #{$header-height} - 12px - 24px);
   overflow: auto;
@@ -759,7 +757,7 @@ body {
   overflow: hidden;
 }
 
-.lists {
+.lists-cloud {
   position: absolute;
   z-index: 1000;
   width: 88%;

package/src/components/layout-cloud/index.tsx

@@ -213,10 +213,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   }
 
   return (
-    <Layout className="layout-warps">
+    <Layout className="layout-warps-cloud">
       {Array.isArray(menuList) && menuList.length > 0 && (
         <Sider
-          className="layout-side"
+          className="layout-side-cloud"
           collapsible
           trigger={null}
           collapsed={collapsed}
@@ -232,7 +232,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           <div className="layout-side-mask-cloud1"></div>
           <div className="layout-side-mask-cloud2"></div>
 
-          <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
+          <div className="header-logo-cloud" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
             <div
               onClick={() => {
                 window.open('/home')
@@ -244,7 +244,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </div>
             {!collapsed && (
               <div
-                className="trigger"
+                className="trigger-cloud"
                 onClick={() => {
                   setCollapsed(true)
                 }}
@@ -257,7 +257,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className="close-trigger"
+                className="close-trigger-cloud"
                 onClick={() => {
                   localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
@@ -276,10 +276,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
           {!collapsed && <div style={{ height: 12 }}></div>}
 
-          <div className="layout-menu">
+          <div className="layout-menu-cloud">
             <RcMenu
               mode={collapsed ? 'vertical' : 'inline'}
-              className={`menu${collapsed ? '-collapsed' : ''}`}
+              className={`menu-cloud${collapsed ? '-collapsed' : ''}`}
               motion={collapsed ? verticalMotion : inlineMotion}
               openKeys={openKeys}
               onOpenChange={onOpenChange}
@@ -474,18 +474,18 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </Sider>
       )}
 
-      <div className="layout-main">
+      <div className="layout-main-cloud">
         {!isHideHeader && (
-          <div className="layout-header">
+          <div className="layout-header-cloud">
             {appName && (
               <div className="app-name">
                 <strong>{appName}</strong>
               </div>
             )}
 
-            <div className="layout-header-fill" />
+            <div className="layout-header-fill-cloud" />
 
-            <div className="layout-header-actions">
+            <div className="layout-header-actions-cloud">
               {actions?.map((item, index) => {
                 return (
                   <div className="actions-item" key={index}>
@@ -516,7 +516,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                 }
               }}
             >
-              <div className="layout-header-user">
+              <div className="layout-header-user-cloud">
                 <img className="avatar" src={avatar} />
                 <div className="name">{name}</div>
                 <span
@@ -530,7 +530,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </Popover>
           </div>
         )}
-        <div className="layout-content">{props.children}</div>
+        <div className="layout-content-cloud">{props.children}</div>
       </div>
     </Layout>
   )
@@ -664,7 +664,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
     <>
       {!collapsed && (
         <div className="search-container">
-          <div className="search">
+          <div className="search-cloud">
             <div className="search-bg-mask">
               <img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png" />
             </div>
@@ -693,11 +693,11 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
             {isFocused && (
               <>
                 {searchTerm ? (
-                  <List split={false} className="lists" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
+                  <List split={false} className="lists-cloud" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
                 ) : (
                   <List
                     split={false}
-                    className="lists"
+                    className="lists-cloud"
                     header="最近访问"
                     size="small"
                     bordered