@zat-design/sisyphus-react 4.0.19 → 4.1.0

package/es/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/es/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -25,7 +25,6 @@ var SideMenu = props => {
     }), /*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsx(OpenMenu, {
         className: "pro-layout-sider-menu-list",
-        theme: "light",
         onMenuClick: onMenuClick,
         dataSource: {
           menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
@@ -33,7 +32,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/es/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/es/ProLayout/components/Layout/Menu/index.js

@@ -13,7 +13,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;
@@ -33,7 +32,7 @@ var Menu = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: menuCls,
     style: {
-      top: notice ? 80 + headerHeight - 48 : headerHeight
+      top: notice ? 96 + headerHeight - 64 : headerHeight
     },
     children: [sideMenuHeaderRender, /*#__PURE__*/_jsx(OpenMenu, {
       dataSource: {
@@ -41,7 +40,6 @@ var Menu = props => {
         iconfontUrl,
         height: headerHeight + (notice ? 32 : 0) + 48
       },
-      theme: theme,
       onMenuClick: onMenuClick,
       style: {
         display: collapsed ? 'block' : 'none'

package/es/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/es/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/es/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/es/ProLayout/components/ProFooter/index.js

@@ -42,7 +42,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__*/_jsx(Space, {
       children: children

package/es/ProLayout/components/ProHeader/style/index.less

@@ -4,7 +4,7 @@
 .pro-header {
   padding: 10px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
-  box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
+  box-shadow: 0px 3px 8px 1px rgba(0, 55, 93, 0.1);
 
   &.pro-header-no-back.pro-header-has-describe {
     .pro-header-top {
@@ -76,6 +76,7 @@
             right: 0;
             background: #fff;
             letter-spacing: 2px;
+            height: 24px;
           }
         }
       }

package/es/ProLayout/components/TabsManager/components/TabsHeader.d.ts

@@ -0,0 +1,12 @@
+import type { TabsProps } from 'antd';
+export interface TabsHeaderProps {
+    activeKey: string | undefined;
+    tabsItems: TabsProps['items'];
+    onTabChange: (activeKey: string) => void;
+    onTabEdit: (targetKey: string, action: 'add' | 'remove') => void;
+}
+/**
+ * 标签页头部：监听 window 滚动（实际滚动在 window/documentElement，非 body），
+ * 滚动时添加阴影类名；仅此组件随滚动重渲染，不带动父组件内容区。
+ */
+export declare function TabsHeader({ activeKey, tabsItems, onTabChange, onTabEdit }: TabsHeaderProps): import("react/jsx-runtime").JSX.Element;

package/es/ProLayout/components/TabsManager/components/TabsHeader.js

@@ -0,0 +1,53 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from 'react';
+import { Tabs } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 标签页头部：监听 window 滚动（实际滚动在 window/documentElement，非 body），
+ * 滚动时添加阴影类名；仅此组件随滚动重渲染，不带动父组件内容区。
+ */
+export function TabsHeader(_ref) {
+  var activeKey = _ref.activeKey,
+    tabsItems = _ref.tabsItems,
+    onTabChange = _ref.onTabChange,
+    onTabEdit = _ref.onTabEdit;
+  var _useState = useState(() => typeof window !== 'undefined' ? window.scrollY : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowScrollY = _useState2[0],
+    setWindowScrollY = _useState2[1];
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    var onScroll = () => setWindowScrollY(window.scrollY);
+    window.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+  var isScrolled = windowScrollY > 0;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "pro-layout-tabs-header",
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      activeKey: activeKey,
+      onChange: onTabChange,
+      onEdit: onTabEdit,
+      type: "editable-card",
+      hideAdd: true,
+      items: tabsItems,
+      className: "pro-layout-tabs-antd",
+      classNames: {
+        popup: {
+          root: 'pro-layout-tabs-dropdown-menu'
+        }
+      }
+    }), isScrolled && /*#__PURE__*/_jsx("div", {
+      className: "pro-layout-tabs-header-shadow",
+      "aria-hidden": true
+    })]
+  });
+}

package/es/ProLayout/components/TabsManager/index.js

@@ -10,9 +10,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
-import { Tabs } from 'antd';
 import { useTabsState } from "./hooks/useTabsState";
 import { TabItemComponent } from "./components/TabItem";
+import { TabsHeader } from "./components/TabsHeader";
 import { TabsContext } from "./components/TabsContext";
 
 /**
@@ -127,28 +127,6 @@ var TabsManager = /*#__PURE__*/forwardRef((_ref, ref) => {
     }));
   }, [state.tabsList, state.activeKey, config === null || config === void 0 ? void 0 : config.menuItems, config === null || config === void 0 ? void 0 : config.tabMenuClick, switchTab, removeTab, closeOtherTabs, closeRightTabs, closeAllTabs]);
 
-  // 渲染标签页列表
-  var renderTabList = () => {
-    if (state.tabsList.length === 0) return null;
-    return /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-tabs-header",
-      children: /*#__PURE__*/_jsx(Tabs, {
-        activeKey: state.activeKey || undefined,
-        onChange: handleTabChange,
-        onEdit: handleTabEdit,
-        type: "editable-card",
-        hideAdd: true,
-        items: tabsItems,
-        className: "pro-layout-tabs-antd",
-        classNames: {
-          popup: {
-            root: 'pro-layout-tabs-dropdown-menu'
-          }
-        }
-      })
-    });
-  };
-
   // 从 config 中获取组件解析函数和空状态组件
   var activeComponent = config === null || config === void 0 ? void 0 : config.activeComponent;
   var emptyComponent = config === null || config === void 0 ? void 0 : config.empty;
@@ -202,7 +180,12 @@ var TabsManager = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsxs("div", {
       className: "pro-layout-tabs",
       "data-testid": "tabs-manager",
-      children: [renderTabList(), renderContent()]
+      children: [state.tabsList.length > 0 && /*#__PURE__*/_jsx(TabsHeader, {
+        activeKey: state.activeKey || undefined,
+        tabsItems: tabsItems,
+        onTabChange: handleTabChange,
+        onTabEdit: handleTabEdit
+      }), renderContent()]
     })
   });
 });

package/es/ProLayout/components/TabsManager/style/index.less

@@ -15,9 +15,24 @@
     padding: 12px 0;
     border-bottom: none;
     position: sticky;
-    top: 48px;
-    z-index: 20;
-    background: #f3f5f8;
+    top: 64px;
+    z-index: 90;
+    background: #fff;
+    box-shadow: none;
+    transition: box-shadow 0.3s ease;
+
+    &-shadow {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 1px;
+      background: transparent;
+      pointer-events: none;
+      z-index: 1;
+      box-shadow: 1px 2px 4px 1px rgba(0, 55, 93, .2);
+    }
+
     .pro-layout-tab-icon {  
       display: none !important;
     }
@@ -79,6 +94,7 @@
     // 覆盖 nav 样式，使其匹配 pro-layout-tabs-header
     .@{ant-prefix}-tabs-nav {
       margin: 0;
+      // padding: 0 var(--zaui-space-size-md, 16px);
       padding: 0;
       border-bottom: none;
 
@@ -121,7 +137,7 @@
       padding: 0 !important;
       margin: 0 !important;
       background: transparent !important;
-      border: none !important;
+      border: none ;
       border-radius: 0 !important;
       cursor: pointer;
       transition: none; // 由内部 TabItemComponent 处理过渡
@@ -139,6 +155,7 @@
       .pro-layout-tab-item {
         width: 100%;
         height: 100%;
+        border: 1px solid rgb(217, 217, 217);
       }
     }
 
@@ -146,6 +163,9 @@
     .@{ant-prefix}-tabs-tab-active {
       background: transparent !important;
       border: none !important;
+      .pro-layout-tab-item{
+        border-color: transparent !important;
+      }
 
       &::before {
         display: none;
@@ -267,10 +287,6 @@
   }
 }
 
-.pro-layout-dark .pro-layout-tabs {
-  --pro-layout-tabs-text-color: rgba(255, 255, 255, 0.85);
-}
-
 .pro-layout-tabs-dropdown-menu{
   .@{ant-prefix}-tabs-dropdown-menu-item-remove{
     display: none !important;

package/es/ProLayout/index.js

@@ -23,6 +23,7 @@ import { useProLayoutTabs } from "./components/TabsManager/hooks/useProLayoutTab
 import { useActiveTab } from "./components/TabsManager/hooks/useActiveTab";
 import { transformMenus } from "./utils";
 import { isLeafMenuItem } from "./components/TabsManager/utils";
+import headerBg from "../assets/header_bg.png";
 
 // 全局上下文
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,7 +37,7 @@ var ProLayout = props => {
     _props$pure = props.pure,
     pure = _props$pure === void 0 ? false : _props$pure,
     _props$headerHeight = props.headerHeight,
-    headerHeight = _props$headerHeight === void 0 ? 48 : _props$headerHeight,
+    headerHeight = _props$headerHeight === void 0 ? 64 : _props$headerHeight,
     _props$contentStyle = props.contentStyle,
     contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
     _props$waterMarkProps = props.waterMarkProps,
@@ -46,8 +47,6 @@ var ProLayout = props => {
     dataSource = props.dataSource,
     _props$pathPrefix = props.pathPrefix,
     pathPrefix = _props$pathPrefix === void 0 ? '' : _props$pathPrefix,
-    _props$theme = props.theme,
-    theme = _props$theme === void 0 ? 'dark' : _props$theme,
     target = props.target,
     onCollapsedChange = props.onCollapsedChange,
     _props$collapsed = props.collapsed,
@@ -59,6 +58,7 @@ var ProLayout = props => {
     _props$title = props.title,
     title = _props$title === void 0 ? '' : _props$title,
     logo = props.logo,
+    appsOptions = props.appsOptions,
     _props$iconfontUrl = props.iconfontUrl,
     iconfontUrl = _props$iconfontUrl === void 0 ? '' : _props$iconfontUrl,
     sideMenuFooterRender = props.sideMenuFooterRender,
@@ -199,7 +199,8 @@ var ProLayout = props => {
     headerContentRender,
     rightContentRender,
     title,
-    logo
+    logo,
+    appsOptions
   };
 
   // 为Notice组件创建专门的props对象
@@ -223,18 +224,21 @@ var ProLayout = props => {
       onCollapsedChange && onCollapsedChange(!collapsed);
     },
     pure,
-    theme,
     sideMenuFooterRender,
     sideMenuHeaderRender,
-    onMenuClick: handleMenuClick
+    onMenuClick: handleMenuClick,
+    appsOptions
   };
   var layoutDom = /*#__PURE__*/_jsxs("div", {
     className: classNames({
       'pro-layout': true,
-      'pro-layout-dark': theme === 'dark',
-      'pro-layout-light': theme === 'light',
+      'pro-layout-light': true,
+      'pro-layout-pure': typeof pure === 'boolean' ? pure : (pure === null || pure === void 0 ? void 0 : pure.topMenu) || (pure === null || pure === void 0 ? void 0 : pure.leftMenu),
       [`${className}`]: className
     }),
+    style: {
+      '--header-bg-image': `url(${headerBg})`
+    },
     children: [/*#__PURE__*/_jsx(Header, _objectSpread({}, headerProps)), /*#__PURE__*/_jsx(Notice, _objectSpread({}, noticeProps)), /*#__PURE__*/_jsxs("div", {
       className: contentCls,
       children: [/*#__PURE__*/_jsx(Menu, _objectSpread({}, menuProps)), /*#__PURE__*/_jsx("div", {