@hanwenbo/x-web-pro-components 0.0.1

package/es/components/layout/index.js

@@ -0,0 +1,892 @@
+var _excluded = ["className", "children"],
+  _excluded2 = ["title", "logo", "content", "actions", "breadcrumb", "collapsed", "collapsedButtonRender", "contentStyle", "currentMenu", "contentWidth", "fixedHeader", "fixSiderbar", "layout", "location", "menuData", "menuDataRender", "menuFooterRender", "menuItemRender", "menuRender", "navTheme", "onMenuHeaderClick", "siderWidth", "splitMenus", "headerRender", "token", "className", "children"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 _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; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { ChevronRight, Loader2, Settings2 } from 'lucide-react';
+import { Button } from '@hanwenbo/x-web-ui/button';
+import { Card } from '@hanwenbo/x-web-ui/card';
+import { cn } from '@hanwenbo/x-web-ui/utils/cn';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export * from "./components/Help";
+export var RouteContext = /*#__PURE__*/createContext({});
+var defaultLayoutSettings = {
+  layout: 'side',
+  navTheme: 'light',
+  contentWidth: 'Fluid',
+  fixedHeader: true,
+  fixSiderbar: false,
+  colorWeak: false,
+  splitMenus: false
+};
+var LAYOUT_SECTION_SPACE = 'var(--x-space-4)';
+var getPrimaryForeground = function getPrimaryForeground(color) {
+  if (!color || !/^#?[0-9a-f]{3,8}$/i.test(color)) {
+    return '255 255 255';
+  }
+  var raw = color.replace('#', '');
+  var normalized = raw.length === 3 ? raw.split('').map(function (char) {
+    return char + char;
+  }).join('') : raw.length >= 6 ? raw.slice(0, 6) : '';
+  if (!normalized) {
+    return '255 255 255';
+  }
+  var r = parseInt(normalized.slice(0, 2), 16);
+  var g = parseInt(normalized.slice(2, 4), 16);
+  var b = parseInt(normalized.slice(4, 6), 16);
+  var luminance = (r * 299 + g * 587 + b * 114) / 1000;
+  return luminance > 160 ? '17 24 39' : '255 255 255';
+};
+var getLayoutThemeStyle = function getLayoutThemeStyle(settings) {
+  if (!(settings !== null && settings !== void 0 && settings.colorPrimary)) {
+    return undefined;
+  }
+  return {
+    '--primary': settings.colorPrimary,
+    '--ring': settings.colorPrimary,
+    '--primary-foreground': "rgb(".concat(getPrimaryForeground(settings.colorPrimary), ")")
+  };
+};
+export var LayoutSettingsContext = /*#__PURE__*/createContext(undefined);
+var matchPathPattern = function matchPathPattern(pattern, pathname) {
+  if (!pattern || pattern.startsWith('http')) {
+    return false;
+  }
+  var normalizedPattern = pattern.replace(/\/+$/, '') || '/';
+  var normalizedPath = pathname.replace(/\/+$/, '') || '/';
+  if (normalizedPattern === normalizedPath) {
+    return true;
+  }
+  var escapedPattern = normalizedPattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  var matcher = new RegExp("^".concat(escapedPattern.replace(/:([^/]+)/g, '[^/]+'), "$"));
+  return matcher.test(normalizedPath);
+};
+var createBreadcrumbMap = function createBreadcrumbMap(items) {
+  var accumulator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  items.forEach(function (item) {
+    var _item$children;
+    if (item.path) {
+      accumulator[item.path] = item;
+    }
+    if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+      createBreadcrumbMap(item.children, accumulator);
+    }
+  });
+  return accumulator;
+};
+export var getMenuData = function getMenuData() {
+  var routes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var menuDataRender = arguments.length > 1 ? arguments[1] : undefined;
+  var normalizedRoutes = routes.filter(function (item) {
+    return !item.hideInMenu;
+  }).map(function (item) {
+    var _ref, _item$key, _item$name, _item$children2;
+    return _objectSpread(_objectSpread({}, item), {}, {
+      key: (_ref = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.path) !== null && _ref !== void 0 ? _ref : String((_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : ''),
+      children: (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? getMenuData(item.children).menuData : undefined
+    });
+  });
+  var menuData = menuDataRender ? menuDataRender(normalizedRoutes) : normalizedRoutes;
+  return {
+    menuData: menuData,
+    breadcrumb: createBreadcrumbMap(menuData)
+  };
+};
+export var getPageTitle = function getPageTitle(_ref2, ignoreTitle) {
+  var title = _ref2.title,
+    pageName = _ref2.pageName,
+    appList = _ref2.appList,
+    breadcrumb = _ref2.breadcrumb,
+    breadcrumbMap = _ref2.breadcrumbMap,
+    formatMessage = _ref2.formatMessage,
+    _ref2$menu = _ref2.menu,
+    menu = _ref2$menu === void 0 ? {
+      locale: false
+    } : _ref2$menu,
+    pathname = _ref2.pathname;
+  return getPageTitleInfo({
+    appList: appList,
+    breadcrumb: breadcrumb,
+    breadcrumbMap: breadcrumbMap,
+    formatMessage: formatMessage,
+    menu: menu,
+    pageName: pageName,
+    pathname: pathname,
+    title: title
+  }, ignoreTitle).title;
+};
+export var getPageTitleInfo = function getPageTitleInfo(_ref3, ignoreTitle) {
+  var _find, _Object$entries$find, _appList$;
+  var title = _ref3.title,
+    pageName = _ref3.pageName,
+    appList = _ref3.appList,
+    breadcrumb = _ref3.breadcrumb,
+    breadcrumbMap = _ref3.breadcrumbMap,
+    formatMessage = _ref3.formatMessage,
+    _ref3$menu = _ref3.menu,
+    menu = _ref3$menu === void 0 ? {
+      locale: false
+    } : _ref3$menu,
+    _ref3$pathname = _ref3.pathname,
+    pathname = _ref3$pathname === void 0 ? '/' : _ref3$pathname;
+  var directMatch = ((_find = _toConsumableArray((breadcrumbMap === null || breadcrumbMap === void 0 ? void 0 : breadcrumbMap.entries()) || []).find(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 1),
+      path = _ref5[0];
+    return matchPathPattern(path, pathname);
+  })) === null || _find === void 0 ? void 0 : _find[1]) || ((_Object$entries$find = Object.entries(breadcrumb || {}).find(function (_ref6) {
+    var _ref7 = _slicedToArray(_ref6, 1),
+      path = _ref7[0];
+    return matchPathPattern(path, pathname);
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[1]);
+  var resolvedPageName = pageName || (directMatch !== null && directMatch !== void 0 && directMatch.locale && menu.locale !== false && formatMessage ? formatMessage({
+    id: directMatch.locale,
+    defaultMessage: String(directMatch.name || '')
+  }) : directMatch === null || directMatch === void 0 ? void 0 : directMatch.name) || (appList === null || appList === void 0 || (_appList$ = appList[0]) === null || _appList$ === void 0 ? void 0 : _appList$.title) || undefined;
+  if (resolvedPageName == null) {
+    resolvedPageName = title;
+  }
+  var plainPageName = resolvedPageName == null ? '' : String(resolvedPageName);
+  var plainTitle = title == null ? '' : String(title);
+  if (ignoreTitle || !plainTitle) {
+    return {
+      id: directMatch !== null && directMatch !== void 0 && directMatch.locale ? String(directMatch.locale) : '',
+      pageName: plainPageName,
+      title: plainPageName
+    };
+  }
+  if (!plainPageName) {
+    return {
+      id: directMatch !== null && directMatch !== void 0 && directMatch.locale ? String(directMatch.locale) : '',
+      pageName: plainTitle,
+      title: plainTitle
+    };
+  }
+  return {
+    id: directMatch !== null && directMatch !== void 0 && directMatch.locale ? String(directMatch.locale) : '',
+    pageName: plainPageName,
+    title: "".concat(plainPageName, " - ").concat(plainTitle)
+  };
+};
+export var ProBreadcrumb = function ProBreadcrumb(_ref8) {
+  var items = _ref8.items;
+  if (!(items !== null && items !== void 0 && items.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground",
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [index > 0 ? /*#__PURE__*/_jsx(ChevronRight, {
+          className: "h-4 w-4"
+        }) : null, item.href ? /*#__PURE__*/_jsx("a", {
+          href: item.href,
+          className: "transition-colors hover:text-foreground",
+          children: item.title
+        }) : /*#__PURE__*/_jsx("span", {
+          children: item.title
+        })]
+      }, "".concat(item.title, "-").concat(index));
+    })
+  });
+};
+export var PageLoading = function PageLoading(_ref9) {
+  var _ref9$tip = _ref9.tip,
+    tip = _ref9$tip === void 0 ? '加载中...' : _ref9$tip;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "flex min-h-[50vh] w-full flex-col items-center justify-center gap-3",
+    children: [/*#__PURE__*/_jsx(Loader2, {
+      className: "h-6 w-6 animate-spin text-primary"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "text-sm text-muted-foreground",
+      children: tip
+    })]
+  });
+};
+export var GridContent = function GridContent(_ref10) {
+  var className = _ref10.className,
+    children = _ref10.children,
+    rest = _objectWithoutProperties(_ref10, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cn('w-full', className)
+  }, rest), {}, {
+    children: children
+  }));
+};
+export var WrapContent = GridContent;
+export var AppList = function AppList(_ref11) {
+  var _ref11$apps = _ref11.apps,
+    apps = _ref11$apps === void 0 ? [] : _ref11$apps,
+    className = _ref11.className;
+  if (!apps.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('grid gap-3 sm:grid-cols-2 xl:grid-cols-3', className),
+    children: apps.map(function (app) {
+      var content = /*#__PURE__*/_jsx(Card, {
+        className: "h-full",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "flex items-start gap-3",
+          children: [app.icon ? /*#__PURE__*/_jsx("div", {
+            className: "bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-primary",
+            children: app.icon
+          }) : null, /*#__PURE__*/_jsxs("div", {
+            className: "min-w-0 space-y-1",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "text-sm font-medium text-foreground",
+              children: app.title
+            }), app.desc ? /*#__PURE__*/_jsx("div", {
+              className: "text-sm text-muted-foreground",
+              children: app.desc
+            }) : null]
+          })]
+        })
+      }, String(app.title));
+      return app.url ? /*#__PURE__*/_jsx("a", {
+        href: app.url,
+        className: "block transition-transform hover:-translate-y-0.5",
+        children: content
+      }, String(app.title)) : /*#__PURE__*/_jsx("div", {
+        children: content
+      }, String(app.title));
+    })
+  });
+};
+export var FooterToolbar = function FooterToolbar(_ref12) {
+  var children = _ref12.children,
+    extra = _ref12.extra,
+    className = _ref12.className;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn('bg-card/90 sticky bottom-4 z-20 flex items-center justify-between rounded-2xl border border-border p-4 shadow-lg backdrop-blur', className),
+    children: [/*#__PURE__*/_jsx("div", {
+      children: extra
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap items-center gap-3",
+      children: children
+    })]
+  });
+};
+export var DefaultFooter = function DefaultFooter(_ref13) {
+  var _ref13$links = _ref13.links,
+    links = _ref13$links === void 0 ? [] : _ref13$links,
+    copyright = _ref13.copyright,
+    className = _ref13.className;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn('flex flex-col items-center justify-center gap-3 py-6 text-center text-sm text-muted-foreground', className),
+    children: [links.length ? /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap items-center justify-center gap-3",
+      children: links.map(function (link) {
+        var _link$key, _link$key2;
+        return link.href ? /*#__PURE__*/_jsx("a", {
+          href: link.href,
+          className: "transition-colors hover:text-foreground",
+          children: link.title
+        }, String((_link$key = link.key) !== null && _link$key !== void 0 ? _link$key : link.title)) : /*#__PURE__*/_jsx("span", {
+          children: link.title
+        }, String((_link$key2 = link.key) !== null && _link$key2 !== void 0 ? _link$key2 : link.title));
+      })
+    }) : null, copyright ? /*#__PURE__*/_jsx("div", {
+      children: copyright
+    }) : null]
+  });
+};
+export var TopNavHeader = function TopNavHeader(_ref14) {
+  var title = _ref14.title,
+    subTitle = _ref14.subTitle,
+    logo = _ref14.logo,
+    content = _ref14.content,
+    actions = _ref14.actions,
+    _ref14$fixed = _ref14.fixed,
+    fixed = _ref14$fixed === void 0 ? true : _ref14$fixed,
+    _ref14$navTheme = _ref14.navTheme,
+    navTheme = _ref14$navTheme === void 0 ? 'light' : _ref14$navTheme,
+    className = _ref14.className;
+  var darkMode = navTheme === 'dark';
+  var hasBrand = Boolean(logo || title || subTitle);
+  return /*#__PURE__*/_jsx("header", {
+    className: cn(fixed ? 'sticky top-0 z-30' : 'relative', darkMode ? 'bg-slate-950/95 backdrop-blur' : 'bg-background/90 backdrop-blur', className),
+    children: /*#__PURE__*/_jsxs(GridContent, {
+      className: "flex min-h-16 flex-wrap items-center gap-4 py-2",
+      style: {
+        paddingInline: "var(--x-pro-layout-content-padding, ".concat(LAYOUT_SECTION_SPACE, ")")
+      },
+      children: [hasBrand ? /*#__PURE__*/_jsxs("div", {
+        className: "flex min-w-0 items-center gap-3",
+        children: [logo ? /*#__PURE__*/_jsx("div", {
+          className: "shrink-0",
+          children: typeof logo === 'string' ? /*#__PURE__*/_jsx("img", {
+            src: logo,
+            alt: title ? String(title) : 'logo',
+            className: "h-8 w-8 rounded-lg object-contain"
+          }) : logo
+        }) : null, /*#__PURE__*/_jsxs("div", {
+          className: "min-w-0",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cn('text-lg font-semibold', darkMode ? 'text-white' : 'text-foreground'),
+            children: title || 'X Mobile Pro'
+          }), subTitle ? /*#__PURE__*/_jsx("div", {
+            className: cn('text-sm', darkMode ? 'text-slate-300' : 'text-muted-foreground'),
+            children: subTitle
+          }) : null]
+        })]
+      }) : null, content ? /*#__PURE__*/_jsx("div", {
+        className: "min-w-0 flex-1",
+        children: content
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-3",
+        children: actions
+      })]
+    })
+  });
+};
+export var DefaultHeader = TopNavHeader;
+export var SettingDrawer = function SettingDrawer(_ref15) {
+  var _ref16;
+  var children = _ref15.children,
+    className = _ref15.className,
+    collapse = _ref15.collapse,
+    onCollapseChange = _ref15.onCollapseChange,
+    onOpenChange = _ref15.onOpenChange,
+    onSettingChange = _ref15.onSettingChange,
+    open = _ref15.open,
+    settings = _ref15.settings;
+  var parentSettings = useContext(LayoutSettingsContext);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerOpen = _useState2[0],
+    setInnerOpen = _useState2[1];
+  var _useState3 = useState(settings || parentSettings || defaultLayoutSettings),
+    _useState4 = _slicedToArray(_useState3, 2),
+    innerSettings = _useState4[0],
+    setInnerSettings = _useState4[1];
+  var mergedOpen = (_ref16 = open !== null && open !== void 0 ? open : collapse) !== null && _ref16 !== void 0 ? _ref16 : innerOpen;
+  var mergedSettings = settings !== null && settings !== void 0 ? settings : innerSettings;
+  React.useEffect(function () {
+    if (settings !== undefined) {
+      setInnerSettings(settings);
+      return;
+    }
+    if (parentSettings) {
+      setInnerSettings(function (prev) {
+        return _objectSpread(_objectSpread(_objectSpread({}, defaultLayoutSettings), prev), parentSettings);
+      });
+    }
+  }, [parentSettings, settings]);
+  var updateOpen = function updateOpen(nextOpen) {
+    if (open === undefined) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+    onCollapseChange === null || onCollapseChange === void 0 || onCollapseChange(nextOpen);
+  };
+  var updateSettings = function updateSettings(patch) {
+    var nextSettings = _objectSpread(_objectSpread({}, mergedSettings), patch);
+    if (settings === undefined) {
+      setInnerSettings(nextSettings);
+    }
+    onSettingChange === null || onSettingChange === void 0 || onSettingChange(nextSettings);
+  };
+  return /*#__PURE__*/_jsx(LayoutSettingsContext.Provider, {
+    value: mergedSettings,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [children, /*#__PURE__*/_jsx("div", {
+        className: "fixed bottom-6 right-6 z-40",
+        children: mergedOpen ? /*#__PURE__*/_jsx(Card, {
+          className: cn('w-[320px] shadow-xl', className),
+          title: "\u5E03\u5C40\u8BBE\u7F6E",
+          extra: /*#__PURE__*/_jsx(Button, {
+            variant: "ghost",
+            size: "small",
+            onClick: function onClick() {
+              return updateOpen(false);
+            },
+            children: "\u6536\u8D77"
+          }),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "space-y-4",
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: "space-y-2",
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "text-sm font-medium text-foreground",
+                children: "\u5E03\u5C40\u6A21\u5F0F"
+              }), /*#__PURE__*/_jsx("div", {
+                className: "flex flex-wrap gap-2",
+                children: ['side', 'top', 'mix'].map(function (item) {
+                  return /*#__PURE__*/_jsx(Button, {
+                    size: "small",
+                    variant: mergedSettings.layout === item ? 'default' : 'outline',
+                    onClick: function onClick() {
+                      return updateSettings({
+                        layout: item
+                      });
+                    },
+                    children: item
+                  }, item);
+                })
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "space-y-2",
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "text-sm font-medium text-foreground",
+                children: "\u5BFC\u822A\u4E3B\u9898"
+              }), /*#__PURE__*/_jsx("div", {
+                className: "flex flex-wrap gap-2",
+                children: ['light', 'dark'].map(function (item) {
+                  return /*#__PURE__*/_jsx(Button, {
+                    size: "small",
+                    variant: mergedSettings.navTheme === item ? 'default' : 'outline',
+                    onClick: function onClick() {
+                      return updateSettings({
+                        navTheme: item
+                      });
+                    },
+                    children: item
+                  }, item);
+                })
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "space-y-2",
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "text-sm font-medium text-foreground",
+                children: "\u5185\u5BB9\u5BBD\u5EA6"
+              }), /*#__PURE__*/_jsx("div", {
+                className: "flex flex-wrap gap-2",
+                children: ['Fluid', 'Fixed'].map(function (item) {
+                  return /*#__PURE__*/_jsx(Button, {
+                    size: "small",
+                    variant: mergedSettings.contentWidth === item ? 'default' : 'outline',
+                    onClick: function onClick() {
+                      return updateSettings({
+                        contentWidth: item
+                      });
+                    },
+                    children: item
+                  }, item);
+                })
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "space-y-2",
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "text-sm font-medium text-foreground",
+                children: "\u5F3A\u8C03\u8272"
+              }), /*#__PURE__*/_jsx("input", {
+                "aria-label": "colorPrimary",
+                type: "color",
+                value: mergedSettings.colorPrimary || '#1677ff',
+                className: "h-10 w-full cursor-pointer rounded-xl border border-border bg-background px-2 py-1",
+                onChange: function onChange(event) {
+                  return updateSettings({
+                    colorPrimary: event.target.value
+                  });
+                }
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "bg-muted/20 flex items-center justify-between rounded-xl border border-border px-3 py-2",
+              children: [/*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "\u56FA\u5B9A\u5934\u90E8"
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "text-xs text-muted-foreground",
+                  children: "\u5207\u6362\u9875\u9762\u5934\u90E8\u5438\u9876"
+                })]
+              }), /*#__PURE__*/_jsx(Button, {
+                size: "small",
+                variant: mergedSettings.fixedHeader ? 'default' : 'outline',
+                onClick: function onClick() {
+                  return updateSettings({
+                    fixedHeader: !mergedSettings.fixedHeader
+                  });
+                },
+                children: mergedSettings.fixedHeader ? '开启' : '关闭'
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "bg-muted/20 flex items-center justify-between rounded-xl border border-border px-3 py-2",
+              children: [/*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "\u56FA\u5B9A\u4FA7\u8FB9\u680F"
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "text-xs text-muted-foreground",
+                  children: "\u5207\u6362\u4FA7\u8FB9\u5BFC\u822A\u5438\u9876"
+                })]
+              }), /*#__PURE__*/_jsx(Button, {
+                size: "small",
+                variant: mergedSettings.fixSiderbar ? 'default' : 'outline',
+                onClick: function onClick() {
+                  return updateSettings({
+                    fixSiderbar: !mergedSettings.fixSiderbar
+                  });
+                },
+                children: mergedSettings.fixSiderbar ? '开启' : '关闭'
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "bg-muted/20 flex items-center justify-between rounded-xl border border-border px-3 py-2",
+              children: [/*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "\u81EA\u52A8\u5206\u5272\u83DC\u5355"
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "text-xs text-muted-foreground",
+                  children: "Mix \u6A21\u5F0F\u4E0B\u62C6\u5206\u9876\u7EA7\u83DC\u5355\u548C\u5B50\u83DC\u5355"
+                })]
+              }), /*#__PURE__*/_jsx(Button, {
+                size: "small",
+                variant: mergedSettings.splitMenus ? 'default' : 'outline',
+                onClick: function onClick() {
+                  return updateSettings({
+                    splitMenus: !mergedSettings.splitMenus
+                  });
+                },
+                children: mergedSettings.splitMenus ? '开启' : '关闭'
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "bg-muted/20 flex items-center justify-between rounded-xl border border-border px-3 py-2",
+              children: [/*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "\u8272\u5F31\u6A21\u5F0F"
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "text-xs text-muted-foreground",
+                  children: "\u4E3A\u6574\u9875\u589E\u52A0\u7070\u5EA6\u6EE4\u955C"
+                })]
+              }), /*#__PURE__*/_jsx(Button, {
+                size: "small",
+                variant: mergedSettings.colorWeak ? 'default' : 'outline',
+                onClick: function onClick() {
+                  return updateSettings({
+                    colorWeak: !mergedSettings.colorWeak
+                  });
+                },
+                children: mergedSettings.colorWeak ? '开启' : '关闭'
+              })]
+            })]
+          })
+        }) : /*#__PURE__*/_jsx(Button, {
+          variant: "default",
+          size: "small",
+          icon: /*#__PURE__*/_jsx(Settings2, {
+            className: "h-4 w-4"
+          }),
+          onClick: function onClick() {
+            return updateOpen(true);
+          },
+          children: "\u5E03\u5C40\u8BBE\u7F6E"
+        })
+      })]
+    })
+  });
+};
+export var PageContainer = function PageContainer(_ref17) {
+  var title = _ref17.title,
+    subTitle = _ref17.subTitle,
+    extra = _ref17.extra,
+    content = _ref17.content,
+    footer = _ref17.footer,
+    children = _ref17.children,
+    breadcrumb = _ref17.breadcrumb,
+    _ref17$ghost = _ref17.ghost,
+    ghost = _ref17$ghost === void 0 ? false : _ref17$ghost,
+    _ref17$loading = _ref17.loading,
+    loading = _ref17$loading === void 0 ? false : _ref17$loading,
+    tabList = _ref17.tabList,
+    tabActiveKey = _ref17.tabActiveKey,
+    onTabChange = _ref17.onTabChange,
+    className = _ref17.className,
+    style = _ref17.style,
+    bodyClassName = _ref17.bodyClassName,
+    bodyStyle = _ref17.bodyStyle;
+  var routeContext = useContext(RouteContext);
+  var resolvedTitle = title !== null && title !== void 0 ? title : routeContext.title;
+  var resolvedBreadcrumb = breadcrumb !== null && breadcrumb !== void 0 ? breadcrumb : routeContext.breadcrumb;
+  if (loading) {
+    return /*#__PURE__*/_jsx(PageLoading, {});
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: "space-y-5",
+    children: [/*#__PURE__*/_jsxs(Card, {
+      variant: ghost ? 'ghost' : 'default',
+      className: cn(ghost && 'border-transparent bg-transparent shadow-none', className),
+      style: style,
+      bodyClassName: bodyClassName,
+      bodyStyle: bodyStyle,
+      title: /*#__PURE__*/_jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/_jsx(ProBreadcrumb, {
+          items: resolvedBreadcrumb
+        }), resolvedTitle ? /*#__PURE__*/_jsx("div", {
+          className: "text-2xl font-semibold text-foreground",
+          children: resolvedTitle
+        }) : null, subTitle ? /*#__PURE__*/_jsx("div", {
+          className: "text-sm text-muted-foreground",
+          children: subTitle
+        }) : null]
+      }),
+      extra: extra,
+      children: [content ? /*#__PURE__*/_jsx("div", {
+        className: "mb-5 text-sm text-muted-foreground",
+        children: content
+      }) : null, tabList !== null && tabList !== void 0 && tabList.length ? /*#__PURE__*/_jsx("div", {
+        className: "mb-5 flex flex-wrap items-center gap-2 border-b border-border pb-4",
+        children: tabList.map(function (item) {
+          return /*#__PURE__*/_jsx(Button, {
+            variant: tabActiveKey === item.key ? 'default' : 'outline',
+            size: "small",
+            onClick: function onClick() {
+              return onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(item.key);
+            },
+            children: item.tab
+          }, item.key);
+        })
+      }) : null, /*#__PURE__*/_jsx("div", {
+        children: children
+      })]
+    }), footer]
+  });
+};
+export var ProPageHeader = PageContainer;
+export var PageHeader = PageContainer;
+var renderMenuItems = function renderMenuItems(menuData, currentMenu, menuItemRender) {
+  var mode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'side';
+  var navTheme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'light';
+  var items = menuData.filter(function (item) {
+    return !item.hideInMenu;
+  });
+  var darkMode = navTheme === 'dark';
+  return /*#__PURE__*/_jsx("div", {
+    className: cn(mode === 'top' ? 'flex flex-wrap items-center gap-2' : 'space-y-1'),
+    children: items.map(function (item) {
+      var _ref18, _item$key2;
+      var active = currentMenu !== null && currentMenu !== void 0 && currentMenu.path && item.path ? currentMenu.path === item.path : (currentMenu === null || currentMenu === void 0 ? void 0 : currentMenu.key) === item.key;
+      var defaultDom = item.path ? /*#__PURE__*/_jsxs("a", {
+        href: item.path,
+        className: cn('flex items-center gap-2 rounded-xl px-3 py-2 text-sm transition-colors', active ? 'bg-primary/10 text-primary' : darkMode ? 'text-slate-300 hover:bg-slate-800/70 hover:text-white' : 'hover:bg-muted/30 text-muted-foreground hover:text-foreground'),
+        children: [item.icon, /*#__PURE__*/_jsx("span", {
+          children: item.name
+        })]
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: cn('flex items-center gap-2 rounded-xl px-3 py-2 text-sm transition-colors', active ? 'bg-primary/10 text-primary' : darkMode ? 'text-slate-300 hover:bg-slate-800/70 hover:text-white' : 'hover:bg-muted/30 text-muted-foreground hover:text-foreground'),
+        children: [item.icon, /*#__PURE__*/_jsx("span", {
+          children: item.name
+        })]
+      });
+      return /*#__PURE__*/_jsx("div", {
+        children: menuItemRender ? menuItemRender(item, defaultDom) : defaultDom
+      }, String((_ref18 = (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : item.path) !== null && _ref18 !== void 0 ? _ref18 : item.name));
+    })
+  });
+};
+export var ProLayout = function ProLayout(_ref19) {
+  var _layoutSettings$layou, _layoutSettings$navTh, _layoutSettings$fixed, _layoutSettings$fixSi, _layoutSettings$conte, _layoutSettings$split, _layoutSettings$color, _currentMenu$children;
+  var title = _ref19.title,
+    logo = _ref19.logo,
+    content = _ref19.content,
+    actions = _ref19.actions,
+    breadcrumb = _ref19.breadcrumb,
+    collapsed = _ref19.collapsed,
+    _collapsedButtonRender = _ref19.collapsedButtonRender,
+    _contentStyle = _ref19.contentStyle,
+    currentMenu = _ref19.currentMenu,
+    _ref19$contentWidth = _ref19.contentWidth,
+    contentWidth = _ref19$contentWidth === void 0 ? 'Fluid' : _ref19$contentWidth,
+    _ref19$fixedHeader = _ref19.fixedHeader,
+    fixedHeader = _ref19$fixedHeader === void 0 ? true : _ref19$fixedHeader,
+    _ref19$fixSiderbar = _ref19.fixSiderbar,
+    fixSiderbar = _ref19$fixSiderbar === void 0 ? false : _ref19$fixSiderbar,
+    _ref19$layout = _ref19.layout,
+    layout = _ref19$layout === void 0 ? 'side' : _ref19$layout,
+    _location = _ref19.location,
+    _ref19$menuData = _ref19.menuData,
+    menuData = _ref19$menuData === void 0 ? [] : _ref19$menuData,
+    _menuDataRender = _ref19.menuDataRender,
+    menuFooterRender = _ref19.menuFooterRender,
+    menuItemRender = _ref19.menuItemRender,
+    menuRender = _ref19.menuRender,
+    _ref19$navTheme = _ref19.navTheme,
+    navTheme = _ref19$navTheme === void 0 ? 'light' : _ref19$navTheme,
+    onMenuHeaderClick = _ref19.onMenuHeaderClick,
+    _ref19$siderWidth = _ref19.siderWidth,
+    siderWidth = _ref19$siderWidth === void 0 ? 240 : _ref19$siderWidth,
+    _ref19$splitMenus = _ref19.splitMenus,
+    splitMenus = _ref19$splitMenus === void 0 ? false : _ref19$splitMenus,
+    headerRender = _ref19.headerRender,
+    _token = _ref19.token,
+    className = _ref19.className,
+    children = _ref19.children,
+    rest = _objectWithoutProperties(_ref19, _excluded2);
+  var layoutSettings = useContext(LayoutSettingsContext);
+  var mergedLayout = (_layoutSettings$layou = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.layout) !== null && _layoutSettings$layou !== void 0 ? _layoutSettings$layou : layout;
+  var mergedNavTheme = (_layoutSettings$navTh = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.navTheme) !== null && _layoutSettings$navTh !== void 0 ? _layoutSettings$navTh : navTheme;
+  var mergedFixedHeader = (_layoutSettings$fixed = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.fixedHeader) !== null && _layoutSettings$fixed !== void 0 ? _layoutSettings$fixed : fixedHeader;
+  var mergedFixSiderbar = (_layoutSettings$fixSi = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.fixSiderbar) !== null && _layoutSettings$fixSi !== void 0 ? _layoutSettings$fixSi : fixSiderbar;
+  var mergedContentWidth = (_layoutSettings$conte = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.contentWidth) !== null && _layoutSettings$conte !== void 0 ? _layoutSettings$conte : contentWidth;
+  var mergedSplitMenus = (_layoutSettings$split = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.splitMenus) !== null && _layoutSettings$split !== void 0 ? _layoutSettings$split : splitMenus;
+  var mergedColorWeak = (_layoutSettings$color = layoutSettings === null || layoutSettings === void 0 ? void 0 : layoutSettings.colorWeak) !== null && _layoutSettings$color !== void 0 ? _layoutSettings$color : false;
+  var mergedThemeStyle = getLayoutThemeStyle(layoutSettings);
+  var routeContextValue = useMemo(function () {
+    return {
+      breadcrumb: breadcrumb,
+      collapsed: collapsed,
+      currentMenu: currentMenu,
+      title: title
+    };
+  }, [breadcrumb, collapsed, currentMenu, title]);
+  var topMenuData = menuData;
+  var sideMenuData = mergedLayout === 'mix' && mergedSplitMenus && currentMenu !== null && currentMenu !== void 0 && (_currentMenu$children = currentMenu.children) !== null && _currentMenu$children !== void 0 && _currentMenu$children.length ? currentMenu.children : menuData;
+  var showSideMenu = mergedLayout === 'side' || mergedLayout === 'mix';
+  var headerDom = /*#__PURE__*/_jsx(TopNavHeader, {
+    title: showSideMenu ? undefined : title,
+    logo: showSideMenu ? undefined : logo,
+    content: content,
+    actions: actions,
+    fixed: mergedFixedHeader,
+    navTheme: mergedNavTheme
+  });
+  var topMenuDom = renderMenuItems(topMenuData, currentMenu, menuItemRender, 'top', mergedNavTheme);
+  var sideMenuDom = renderMenuItems(sideMenuData, currentMenu, menuItemRender, mergedLayout === 'top' ? 'top' : 'side', mergedNavTheme);
+  var renderedHeader = headerRender ? headerRender(_objectSpread({
+    title: title,
+    actions: actions,
+    breadcrumb: breadcrumb,
+    collapsed: collapsed,
+    currentMenu: currentMenu,
+    contentWidth: mergedContentWidth,
+    fixedHeader: mergedFixedHeader,
+    fixSiderbar: mergedFixSiderbar,
+    layout: mergedLayout,
+    menuData: menuData,
+    menuFooterRender: menuFooterRender,
+    menuItemRender: menuItemRender,
+    menuRender: menuRender,
+    navTheme: mergedNavTheme,
+    siderWidth: siderWidth,
+    splitMenus: mergedSplitMenus,
+    headerRender: headerRender,
+    className: className,
+    children: children
+  }, rest), headerDom) : headerDom;
+  var renderedMenu = menuRender ? menuRender(_objectSpread({
+    title: title,
+    actions: actions,
+    breadcrumb: breadcrumb,
+    collapsed: collapsed,
+    currentMenu: currentMenu,
+    contentWidth: mergedContentWidth,
+    fixedHeader: mergedFixedHeader,
+    fixSiderbar: mergedFixSiderbar,
+    layout: mergedLayout,
+    menuData: menuData,
+    menuFooterRender: menuFooterRender,
+    menuItemRender: menuItemRender,
+    menuRender: menuRender,
+    navTheme: mergedNavTheme,
+    siderWidth: siderWidth,
+    splitMenus: mergedSplitMenus,
+    headerRender: headerRender,
+    className: className,
+    children: children
+  }, rest), mergedLayout === 'top' ? topMenuDom : sideMenuDom) : mergedLayout === 'top' ? topMenuDom : sideMenuDom;
+  var topMenuBar = mergedLayout === 'top' && menuData.length || mergedLayout === 'mix' && mergedSplitMenus && topMenuData.length ? /*#__PURE__*/_jsx("div", {
+    className: cn('border-b', mergedNavTheme === 'dark' ? 'border-slate-800 bg-slate-950/90' : 'bg-card/40 border-border'),
+    children: /*#__PURE__*/_jsx(GridContent, {
+      className: "px-6 py-3",
+      children: mergedLayout === 'top' ? renderedMenu : topMenuDom
+    })
+  }) : null;
+  return /*#__PURE__*/_jsx(RouteContext.Provider, {
+    value: routeContextValue,
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      "data-pro-layout-root": "true",
+      className: cn(showSideMenu ? 'flex min-h-screen bg-background' : 'min-h-screen bg-background', className),
+      style: _objectSpread(_objectSpread({}, mergedThemeStyle || {}), mergedColorWeak ? {
+        filter: 'grayscale(80%)'
+      } : undefined)
+    }, rest), {}, {
+      children: [showSideMenu && menuData.length ? /*#__PURE__*/_jsxs("aside", {
+        className: cn('sticky top-0 flex h-screen shrink-0 flex-col overflow-hidden border-r bg-card'),
+        style: {
+          width: collapsed ? 84 : siderWidth,
+          borderRightColor: 'var(--x-sidebar-divider-color)'
+        },
+        children: [logo || title ? /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          onClick: onMenuHeaderClick,
+          className: cn('flex min-h-16 items-center gap-3 px-4 py-2 text-left transition-colors', onMenuHeaderClick && 'hover:bg-muted/40'),
+          children: [logo ? typeof logo === 'string' ? /*#__PURE__*/_jsx("img", {
+            src: logo,
+            alt: title ? String(title) : 'logo',
+            className: "h-8 w-8 rounded-lg object-contain"
+          }) : /*#__PURE__*/_jsx("div", {
+            className: "flex h-8 w-8 items-center justify-center",
+            children: logo
+          }) : null, title ? /*#__PURE__*/_jsx("div", {
+            className: "min-w-0 truncate text-lg font-semibold text-foreground",
+            children: title
+          }) : null]
+        }) : null, /*#__PURE__*/_jsx("div", {
+          className: "min-h-0 flex-1 overflow-y-auto",
+          children: renderedMenu
+        }), menuFooterRender ? /*#__PURE__*/_jsx("div", {
+          className: "border-t border-[var(--sidebar-border)]",
+          children: menuFooterRender(_objectSpread({
+            title: title,
+            actions: actions,
+            breadcrumb: breadcrumb,
+            collapsed: collapsed,
+            currentMenu: currentMenu,
+            contentWidth: mergedContentWidth,
+            fixedHeader: mergedFixedHeader,
+            fixSiderbar: mergedFixSiderbar,
+            layout: mergedLayout,
+            menuData: menuData,
+            menuFooterRender: menuFooterRender,
+            menuItemRender: menuItemRender,
+            menuRender: menuRender,
+            navTheme: mergedNavTheme,
+            siderWidth: siderWidth,
+            splitMenus: mergedSplitMenus,
+            headerRender: headerRender,
+            className: className,
+            children: children
+          }, rest))
+        }) : null]
+      }) : null, /*#__PURE__*/_jsxs("div", {
+        className: cn('min-w-0 flex-1', showSideMenu && 'flex min-h-screen flex-col'),
+        children: [renderedHeader, topMenuBar, /*#__PURE__*/_jsxs("div", {
+          className: cn(showSideMenu ? 'min-w-0 flex-1 bg-[var(--backgroundSecondary)]' : 'bg-[var(--backgroundSecondary)]'),
+          "data-pro-layout-content": "true",
+          style: {
+            padding: "var(--x-pro-layout-content-padding, ".concat(LAYOUT_SECTION_SPACE, ")")
+          },
+          children: [mergedLayout === 'mix' && menuData.length ? /*#__PURE__*/_jsx("div", {
+            className: "mb-4 rounded-2xl border border-border bg-card px-4 py-3",
+            children: sideMenuDom
+          }) : null, showSideMenu ? children : /*#__PURE__*/_jsx(GridContent, {
+            children: children
+          })]
+        })]
+      })]
+    }))
+  });
+};
+export default ProLayout;