@zat-design/sisyphus-react 4.0.19 → 4.1.0

package/lib/ProLayout/components/Layout/Header/style/index.less

@@ -4,17 +4,18 @@
   .pro-layout-header {
     position       : fixed;
     top            : 0;
-    z-index        : 103;
+    z-index        : 98;
     display        : flex;
     flex-direction : row;
     align-items    : center;
     justify-content: space-between;
     width          : 100%;
-    height         : 48px;
+    height         : 64px;
     padding        : 0 32px 0px 0px;
-    line-height    : 48px;
-    background     : var(--zaui-base-bg, #ffffff);
-    box-shadow     : 0px 1px 2px 0px rgba(0, 55, 93, 0.1) !important;
+    line-height    : 64px;
+    background     : var(--header-bg-image) no-repeat top center / 100% auto, #F7F9FD;
+    box-shadow     : none;
+    overflow       : visible;
 
     .pro-layout-header-actions {
       .@{ant-prefix}-avatar {
@@ -22,19 +23,45 @@
       }
     }
 
+    .pro-layout-header-apps-trigger {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 48px;
+      height: 64px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+
+      .pro-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      // 当存在 apps 图标时，logo 需要更多左侧间距
+      ~ .pro-layout-header-logo {
+        margin-left: 64px;
+      }
+    }
+
     .pro-layout-header-logo {
+      position   : relative;
       display    : flex;
       flex       : 200px;
       align-items: center;
-      width      : 200px;
+      width      : auto;
       padding    : 0;
-      background : var(--zaui-base-bg, #ffffff);
+      margin-left: 48px;
+      background : transparent;
+      gap        : 24px;
+      z-index    : 1;
 
-      span {
+      > span:first-child {
         display        : flex;
         align-items    : center;
-        justify-content: center;
-        width          : 220px;
+        justify-content: flex-start;
+        width          : auto;
       }
 
       .default-logo {
@@ -69,12 +96,31 @@
 
       .pro-layout-icon {
         width : 200px;
-        height: 48px;
+        height: 64px;
+      }
+
+      .pro-layout-header-apps-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        .pro-icon {
+          width: 24px;
+          height: 24px;
+        }
       }
     }
 
     &-logo {
-      height          : 48px;
+      height          : 64px;
       padding         : 5px 0;
       text-align      : center;
       background-color: #081838;
@@ -104,13 +150,17 @@
     }
 
     &-content {
+      position: relative;
       flex: auto;
+      z-index: 1;
     }
 
     &-actions {
+      position   : relative;
       display    : flex;
       align-items: center;
       float      : right;
+      z-index    : 1;
 
       >.pro-layout-icon {
         width       : 26px;
@@ -126,3 +176,102 @@
       }
     }
   }
+
+  // apps Popover 样式
+  .pro-layout-header-apps-popover {
+    // 隐藏 Popover 箭头
+    .@{ant-prefix}-popover-arrow {
+      display: none;
+    }
+
+    .@{ant-prefix}-popover-inner {
+      padding: var(--zaui-space-size-md, 16px);
+      min-width: 300px;
+      border-radius: var(--zaui-border-radius, 8px);
+    }
+
+    // 扁平模式 - 网格布局
+    .pro-layout-header-apps-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .pro-layout-header-apps-item {
+      display: flex;
+      align-items: center;
+      gap: var(--zaui-space-size-sm, 8px);
+      padding: var(--zaui-space-size-sm, 8px) var(--zaui-space-size-md, 16px);
+      cursor: pointer;
+      transition: all 0.3s;
+      white-space: nowrap;
+      border-radius: var(--zaui-border-radius, 8px);
+
+      &:hover {
+        background-color: rgba(0, 106, 255, 0.08);
+      }
+
+      &-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+
+      &-label {
+        font-size: var(--zaui-font-size-base, 14px);
+        color: var(--zaui-text, #343434);
+        line-height: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    // 分组模式 - 4列网格布局
+    .pro-layout-header-apps-groups {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      .pro-layout-header-apps-list {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        column-gap: 4px;
+        row-gap: 4px;
+      }
+
+      .pro-layout-header-apps-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--zaui-space-size-sm, 8px);
+        padding: var(--zaui-space-size-sm, 8px);
+        border-radius: var(--zaui-border-radius, 8px);
+
+        &-icon {
+          width: 32px;
+          height: 32px;
+          font-size: 32px;
+        }
+
+        &-label {
+          text-align: center;
+          font-size: 13px;
+          line-height: 18px;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .pro-layout-header-apps-group {
+      &-title {
+        padding: 0 0 var(--zaui-space-size-sm, 8px) 0;
+        font-weight: 600;
+        font-size: var(--zaui-font-size-base, 14px);
+        color: var(--zaui-text, #343434);
+        line-height: 22px;
+      }
+    }
+  }

package/lib/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -103,8 +103,9 @@ var FoldMenu = props => {
           },
           styles: {
             content: {
-              marginTop: headerHeight - 48,
-              height: `calc(100vh - ${headerHeight + (notice ? 32 : 0)}px)`
+              marginTop: headerHeight - 64,
+              height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + 12}px)`,
+              overflow: 'hidden'
             }
           },
           placement: "rightTop",

package/lib/ProLayout/components/Layout/Menu/FoldMenu/style/index.less

@@ -35,7 +35,7 @@
     }
 
     &:hover {
-      background: var(--ant-primary-8, #003eb3);
+      background: transparent;
     }
 
     i {
@@ -65,17 +65,19 @@
 }
 
 .pro-layout-menu-tooltip {
-  top: 48px !important;
+  top: 64px !important;
   transform: none !important;
   transition: none !important;
-  .@{ant-prefix}-popover-container{
-    border-radius: 0;
+  .@{ant-prefix}-popover-container {
+    border-radius: 8px;
     padding: 0;
+    overflow: hidden;
+    box-shadow: 2px 0px 8px 0px rgba(0, 55, 93, 0.15);
   }
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
-  top: 80px !important;
+  top: 96px !important;
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -29,8 +29,6 @@ var OpenMenu = props => {
   var className = props.className,
     dataSource = props.dataSource,
     style = props.style,
-    _props$theme = props.theme,
-    theme = _props$theme === void 0 ? 'dark' : _props$theme,
     onMenuClick = props.onMenuClick;
   var _ref = dataSource || {},
     menus = _ref.menus,
@@ -142,10 +140,7 @@ var OpenMenu = props => {
     className: cls,
     style: style,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
-      mode: "inline"
-      // @ts-ignore
-      ,
-      theme: theme,
+      mode: "inline",
       selectedKeys: selectedKeys,
       openKeys: openKeys,
       items: itemsTransform,

package/lib/ProLayout/components/Layout/Menu/OpenMenu/propsType.d.ts

@@ -6,7 +6,6 @@ export interface OpenMenuPropsType {
         /** 是否是折叠模式的菜单 */
         sideMenu?: boolean;
     };
-    theme: string;
     [key: string]: any;
 }
 export interface StatePropsType {

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -1,7 +1,6 @@
 @import '../../../../../../style/variables.less';
 
 .pro-layout-open-menu {
-  color: #fff;
 
   .@{ant-prefix}-menu-root {
     overflow-y: auto !important;
@@ -12,10 +11,6 @@
     }
 
     & > .@{ant-prefix}-menu-submenu {
-      .@{ant-prefix}-menu-sub {
-        background: #1a202d;
-      }
-
       & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
       & > .@{ant-prefix}-menu-item-only-child,
       & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
@@ -58,34 +53,16 @@
   .@{ant-prefix}-menu-item,
   .@{ant-prefix}-menu-submenu-title {
     &:hover {
-      background: var(--ant-primary-8, #003eb3);
-
-      h2 {
-        color: #fff;
-      }
+      background: transparent;
     }
   }
 
-  .@{ant-prefix}-menu.@{ant-prefix}-menu-dark {
-    overflow-x: hidden;
-    background: #1a202d;
-
-    .@{ant-prefix}-menu-item-only-child {
-      &:hover {
-        background: var(--ant-primary-8, #003eb3);
-
-        h2 {
-          color: #fff;
-        }
-      }
-    }
-  }
 
   .@{ant-prefix}-menu-item-selected {
-    background: var(--zaui-brand, #006aff) !important;
+    background: transparent !important;
 
     h2 {
-      color: #fff !important;
+      color: var(--zaui-brand, #006aff) !important;
     }
   }
 
@@ -109,7 +86,7 @@
         flex: 0 0 20px;
         width: 20px;
         height: 20px;
-        color: #cacaca;
+        color: var(--zaui-text, #343434);
       }
 
       h2 {
@@ -117,7 +94,7 @@
         flex-grow: 1;
         margin-bottom: 0;
         padding-left: 12px;
-        color: #cacaca;
+        color: var(--zaui-text, #343434);
         font-weight: 400;
         font-size: var(--zaui-font-size-md, 14px);
         opacity: 1;
@@ -128,26 +105,26 @@
 
   .anticon-caret-down {
     top: auto;
-    color: #cacaca;
+    color: #999;
     transform: rotateZ(0deg);
     transition: all 0.1s ease-in;
   }
 
   .@{ant-prefix}-menu-submenu-open {
     .anticon-caret-down {
-      color: #fff;
+      color: var(--zaui-text, #343434);
       transform: rotateZ(180deg);
     }
 
     .@{ant-prefix}-menu-submenu-inline {
       .anticon-caret-down {
-        color: #cacaca;
+        color: #999;
         transform: rotateZ(0deg);
       }
 
       &.@{ant-prefix}-menu-submenu-open {
         .anticon-caret-down {
-          color: #fff;
+          color: var(--zaui-text, #343434);
           transform: rotateZ(180deg);
         }
       }
@@ -157,7 +134,7 @@
   .@{ant-prefix}-menu-submenu:hover
     > .@{ant-prefix}-menu-submenu-title
     > .@{ant-prefix}-menu-submenu-expand-icon {
-    color: #fff;
+    color: var(--zaui-text, #343434);
   }
 
  .@{ant-prefix}-menu-item-selected{
@@ -172,22 +149,22 @@
     & > .@{ant-prefix}-menu-submenu-title {
       .@{ant-prefix}-menu-title-content div {
         .pro-layout-icon {
-          color: #fff;
+          color: var(--zaui-brand, #006aff);
         }
 
         h2 {
-          color: #fff;
+          color: var(--zaui-brand, #006aff);
         }
       }
     }
 
     .@{ant-prefix}-menu-item-only-child .@{ant-prefix}-menu-title-content div {
       .pro-layout-icon {
-        color: #cacaca;
+        color: var(--zaui-text, #343434);
       }
 
       h2 {
-        color: #cacaca;
+        color: var(--zaui-text, #343434);
         font-weight: 400;
       }
     }

package/lib/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -31,7 +31,6 @@ var SideMenu = props => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenMenu.default, {
         className: "pro-layout-sider-menu-list",
-        theme: "light",
         onMenuClick: onMenuClick,
         dataSource: {
           menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
@@ -39,7 +38,7 @@ var SideMenu = props => {
           sideMenu: true
         },
         style: {
-          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0)}px)`
+          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0) + 12}px)`
         }
       })
     })]

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -3,12 +3,12 @@
 .pro-layout-sider-menu {
   width: 220px;
   background: #fff;
+  border-radius: 8px;
 
   h2 {
     margin-bottom: 0;
     padding: 16px 16px 8px;
     color: var(--zaui-text, #343434);
-    color: var(--zaui-text);
     font-weight: 500;
     font-size: var(--zaui-font-size-lg, 16px);
     line-height: inherit;
@@ -80,8 +80,7 @@
 
         .@{ant-prefix}-menu-submenu-title:hover,
         .@{ant-prefix}-menu-item:hover {
-          color: #fff;
-          background-color: #f2f2f2;
+          background-color: transparent;
         }
 
         .@{ant-prefix}-menu-item {

package/lib/ProLayout/components/Layout/Menu/index.js

@@ -20,7 +20,6 @@ var Menu = props => {
     notice = _ref.notice,
     onToggle = _ref.onToggle,
     pure = _ref.pure,
-    theme = _ref.theme,
     sideMenuFooterRender = _ref.sideMenuFooterRender,
     sideMenuHeaderRender = _ref.sideMenuHeaderRender,
     onMenuClick = _ref.onMenuClick;
@@ -40,7 +39,7 @@ var Menu = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: menuCls,
     style: {
-      top: notice ? 80 + headerHeight - 48 : headerHeight
+      top: notice ? 96 + headerHeight - 64 : headerHeight
     },
     children: [sideMenuHeaderRender, /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenMenu.default, {
       dataSource: {
@@ -48,7 +47,6 @@ var Menu = props => {
         iconfontUrl,
         height: headerHeight + (notice ? 32 : 0) + 48
       },
-      theme: theme,
       onMenuClick: onMenuClick,
       style: {
         display: collapsed ? 'block' : 'none'

package/lib/ProLayout/components/Layout/Menu/style/index.less

@@ -4,6 +4,8 @@
 
 /** 侧边栏 + 内容区 */
 .pro-layout-row {
+  display: flex;
+  flex: 1;
   flex-direction: column;
 
   .pro-layout-menu-open {
@@ -61,52 +63,40 @@
     }
   }
 
-  &.pro-layout-has-notice {
+  &.pro-layout-row-has-notice {
     .pro-layout-menu {
-      top: 80px;
+      top: 96px;
 
       #nav-list {
-        height: calc(100vh - 128px);
+        height: calc(100vh - 144px);
       }
     }
 
     .pro-layout-content {
-      min-height: calc(100vh - 80px);
-      margin-top: 80px;
+      margin-top: 96px;
     }
   }
 
   .pro-layout-menu {
     position: fixed;
-    top: 48px;
+    top: 64px;
     left: 0;
-    z-index: 99;
+    z-index: 50;
     width: 48px;
     height: 100vh;
     min-height: 100%;
     padding: 0;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: #1a202d;
+    background-color: #F7F9FD;
     transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 
     &.pro-layout-menu-open {
       width: 220px;
+      background-color: #F7F9FD;
     }
   }
 
-  /** 内容区 */
-  .pro-layout-content {
-    z-index: 1;
-    flex: auto;
-    flex: auto;
-    min-height: calc(100vh - 48px);
-    margin-top: 48px;
-    margin-left: 48px;
-    padding: 0 var(--zaui-space-size-md, 16px);
-    transition: all 0.3s ease-in-out;
-  }
-
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
     left: 0;
     width: 220px;
@@ -126,12 +116,12 @@
     justify-content: center;
     width: 48px;
     height: 48px;
-    background: #292f3b;
+    background: #F7F9FD;
     transition: all 0.3s ease;
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed:hover {
-    background-color: rgba(185, 185, 189, 0.1);
+    background-color: rgba(0, 106, 255, 0.08);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed img {

package/lib/ProLayout/components/Layout/Notice/style/index.less

@@ -1,39 +1,37 @@
+/** 告知区 */
+.pro-layout-header-notice {
+  position: fixed;
+  top: 64px;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 32px;
+  color: var(--zaui-text, #343434);
+  line-height: 32px;
+  text-align: center;
+  background: transparent;
 
-  /** 告知区 */
-  .pro-layout-header-notice {
-    position       : fixed;
-    top            : 48px;
-    z-index        : 101;
-    display        : flex;
-    align-items    : center;
-    justify-content: center;
-    width          : 100%;
-    min-height     : 32px;
-    color          : var(--zaui-text, #343434);
-    line-height    : 32px;
-    text-align     : center;
-    background     : var(--ant-primary-1, #e6f4ff);
+  img {
+    width: 16px;
+    margin-right: var(--zaui-space-size-sm, 8px);
+  }
+  a {
+    color: var(--zaui-brand, #006aff);
+    text-decoration: none;
+  }
 
+  .pro-layout-header-notice-close {
+    position: absolute;
+    right: 0;
+    display: block;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    cursor: pointer;
 
     img {
-      width       : 16px;
-      margin-right: var(--zaui-space-size-sm, 8px);
-    }
-    a {
-      color: var(--zaui-brand, #006aff);
-      text-decoration: none;
-    }
-
-    .pro-layout-header-notice-close {
-      position: absolute;
-      right   : 0;
-      display : block;
-      padding : 0 var(--zaui-space-size-md, 16px);
-      cursor  : pointer;
-
-      img {
-        width       : 12px;
-        margin-right: 0;
-      }
+      width: 12px;
+      margin-right: 0;
     }
   }
+}

package/lib/ProLayout/components/ProCollapse/style/index.less

@@ -61,6 +61,7 @@
       padding-top: var(--zaui-space-size-sm, 8px);
       padding-bottom: 0;
       background: var(--zaui-base-bg, #ffffff);
+      border: 1px solid #ebecee;
     }
   }
 
@@ -100,6 +101,7 @@
 
     .pro-collapse-content {
       padding: var(--zaui-space-size-md, 16px) !important;
+      border: none !important;
     }
 
     .pro-collapse-level2-collapse {

package/lib/ProLayout/components/ProFooter/index.js

@@ -49,7 +49,7 @@ var ProFooter = props => {
     className: cls,
     style: _objectSpread({
       zIndex,
-      width: `calc(100% - ${size === null || size === void 0 ? void 0 : size.width}px)`
+      width: `calc(100% - ${(size === null || size === void 0 ? void 0 : size.width) + 1}px)`
     }, props.style),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
       children: children