mall-components 1.0.0

package/build/mall-components.codesandbox.js

@@ -0,0 +1,1080 @@
+// src/components/AdminLayout/AdminLayout.tsx
+import React6, { useState as useState3, useCallback, useMemo, useEffect as useEffect2, useRef as useRef2, Children, isValidElement } from "react";
+
+// src/components/AdminLayout/Sidebar.tsx
+import React, { useState } from "react";
+import { Menu, Tag } from "antd";
+import {
+  UserOutlined,
+  SafetyCertificateOutlined,
+  ShoppingOutlined,
+  FileTextOutlined,
+  TeamOutlined,
+  SettingOutlined,
+  TagsOutlined,
+  InboxOutlined,
+  DollarOutlined,
+  GiftOutlined,
+  ThunderboltOutlined,
+  FireOutlined,
+  DashboardOutlined
+} from "@ant-design/icons";
+var IS_CDN = false;
+var { SubMenu } = Menu;
+var defaultMenuItems = [
+  {
+    key: "dashboard",
+    label: "\u5DE5\u4F5C\u53F0",
+    icon: /* @__PURE__ */ React.createElement(DashboardOutlined, null),
+    path: "/dashboard"
+  },
+  {
+    key: "permission",
+    label: "\u6743\u9650\u7BA1\u7406",
+    icon: /* @__PURE__ */ React.createElement(SafetyCertificateOutlined, null),
+    children: [
+      {
+        key: "permission/users",
+        label: "\u7528\u6237\u7BA1\u7406",
+        icon: /* @__PURE__ */ React.createElement(UserOutlined, null),
+        path: "/permission/users"
+      },
+      {
+        key: "permission/roles",
+        label: "\u89D2\u8272\u7BA1\u7406",
+        icon: /* @__PURE__ */ React.createElement(TeamOutlined, null),
+        path: "/permission/roles"
+      },
+      {
+        key: "permission/resources",
+        label: "\u8D44\u6E90\u7BA1\u7406",
+        icon: /* @__PURE__ */ React.createElement(SettingOutlined, null),
+        path: "/permission/resources"
+      },
+      {
+        key: "permission/menus",
+        label: "\u83DC\u5355\u7BA1\u7406",
+        icon: /* @__PURE__ */ React.createElement(FileTextOutlined, null),
+        path: "/permission/menus"
+      }
+    ]
+  },
+  {
+    key: "product",
+    label: "\u5546\u54C1\u7BA1\u7406",
+    icon: /* @__PURE__ */ React.createElement(ShoppingOutlined, null),
+    children: [
+      {
+        key: "product/list",
+        label: "\u5546\u54C1\u5217\u8868",
+        icon: /* @__PURE__ */ React.createElement(InboxOutlined, null),
+        path: "/product/list"
+      },
+      {
+        key: "product/add",
+        label: "\u6DFB\u52A0\u5546\u54C1",
+        icon: /* @__PURE__ */ React.createElement(ShoppingOutlined, null),
+        path: "/product/add"
+      },
+      {
+        key: "product/category",
+        label: "\u5546\u54C1\u5206\u7C7B",
+        icon: /* @__PURE__ */ React.createElement(TagsOutlined, null),
+        path: "/product/category"
+      },
+      {
+        key: "product/brand",
+        label: "\u54C1\u724C\u7BA1\u7406",
+        path: "/product/brand"
+      },
+      {
+        key: "product/attribute",
+        label: "\u5546\u54C1\u5C5E\u6027",
+        path: "/product/attribute"
+      }
+    ]
+  },
+  {
+    key: "order",
+    label: "\u8BA2\u5355\u7BA1\u7406",
+    icon: /* @__PURE__ */ React.createElement(FileTextOutlined, null),
+    children: [
+      {
+        key: "order/list",
+        label: "\u8BA2\u5355\u5217\u8868",
+        icon: /* @__PURE__ */ React.createElement(FileTextOutlined, null),
+        path: "/order/list"
+      },
+      {
+        key: "order/setting",
+        label: "\u8BA2\u5355\u8BBE\u7F6E",
+        icon: /* @__PURE__ */ React.createElement(SettingOutlined, null),
+        path: "/order/setting"
+      },
+      {
+        key: "order/return",
+        label: "\u9000\u8D27\u7533\u8BF7",
+        path: "/order/return"
+      },
+      {
+        key: "order/reason",
+        label: "\u9000\u8D27\u539F\u56E0",
+        path: "/order/reason"
+      }
+    ]
+  },
+  {
+    key: "marketing",
+    label: "\u8425\u9500\u7BA1\u7406",
+    icon: /* @__PURE__ */ React.createElement(GiftOutlined, null),
+    children: [
+      {
+        key: "marketing/coupon",
+        label: "\u4F18\u60E0\u5238\u7BA1\u7406",
+        icon: /* @__PURE__ */ React.createElement(GiftOutlined, null),
+        path: "/marketing/coupon"
+      },
+      {
+        key: "marketing/promotion",
+        label: "\u4FC3\u9500\u6D3B\u52A8",
+        icon: /* @__PURE__ */ React.createElement(DollarOutlined, null),
+        path: "/marketing/promotion"
+      },
+      {
+        key: "marketing/flash",
+        label: "\u79D2\u6740\u6D3B\u52A8",
+        icon: /* @__PURE__ */ React.createElement(ThunderboltOutlined, null),
+        path: "/marketing/flash"
+      },
+      {
+        key: "marketing/new",
+        label: "\u65B0\u54C1\u63A8\u8350",
+        icon: /* @__PURE__ */ React.createElement(FireOutlined, null),
+        path: "/marketing/new"
+      },
+      {
+        key: "marketing/hot",
+        label: "\u4EBA\u6C14\u63A8\u8350",
+        icon: /* @__PURE__ */ React.createElement(FireOutlined, null),
+        path: "/marketing/hot"
+      },
+      {
+        key: "marketing/advertise",
+        label: "\u5E7F\u544A\u7BA1\u7406",
+        path: "/marketing/advertise"
+      },
+      {
+        key: "marketing/subject",
+        label: "\u4E13\u9898\u7BA1\u7406",
+        path: "/marketing/subject"
+      },
+      {
+        key: "marketing/brand",
+        label: "\u54C1\u724C\u63A8\u8350",
+        path: "/marketing/brand"
+      }
+    ]
+  }
+];
+var Sidebar = ({
+  collapsed,
+  selectedKey,
+  openKeys,
+  onMenuClick,
+  onOpenChange,
+  menuItems: customMenuItems
+}) => {
+  const items = customMenuItems || defaultMenuItems;
+  const [internalOpenKeys, setInternalOpenKeys] = useState(
+    items.filter((item) => item.children).map((item) => item.key)
+  );
+  const handleOpenChange = (keys) => {
+    const latestKey = keys[keys.length - 1];
+    if (latestKey && items.some((item) => item.key === latestKey)) {
+      setInternalOpenKeys(keys);
+      onOpenChange(keys);
+    } else {
+      setInternalOpenKeys(latestKey ? [latestKey] : []);
+      onOpenChange(latestKey ? [latestKey] : []);
+    }
+  };
+  const handleClick = ({ key }) => {
+    onMenuClick(key);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: `sidebar-container ${collapsed ? "collapsed" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-logo" }, !collapsed && /* @__PURE__ */ React.createElement("span", { className: "logo-text" }, "Mall Admin@", IS_CDN && /* @__PURE__ */ React.createElement(Tag, { color: "orange", style: { marginLeft: 8, fontSize: 10 } }, "CDN")), collapsed && /* @__PURE__ */ React.createElement("span", { className: "logo-icon" }, "M")), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      mode: "inline",
+      theme: "dark",
+      inlineCollapsed: collapsed,
+      selectedKeys: [selectedKey],
+      defaultOpenKeys: internalOpenKeys,
+      openKeys: openKeys.length > 0 ? openKeys : internalOpenKeys,
+      onClick: handleClick,
+      onOpenChange: handleOpenChange,
+      items: items.map((item) => {
+        if (item.children && item.children.length > 0) {
+          return {
+            key: item.key,
+            icon: item.icon,
+            label: item.label,
+            children: item.children.map((child) => ({
+              key: child.key,
+              icon: child.icon,
+              label: child.label
+            }))
+          };
+        }
+        return {
+          key: item.key,
+          icon: item.icon,
+          label: item.label
+        };
+      })
+    }
+  ));
+};
+var Sidebar_default = Sidebar;
+
+// src/components/AdminLayout/Navbar.tsx
+import React3 from "react";
+import { Dropdown, Avatar, Space, Menu as Menu2 } from "antd";
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  UserOutlined as UserOutlined2,
+  SettingOutlined as SettingOutlined2,
+  LogoutOutlined
+} from "@ant-design/icons";
+
+// src/components/AdminLayout/Breadcrumb.tsx
+import React2 from "react";
+import { Breadcrumb } from "antd";
+var labelMap = {
+  dashboard: "\u5DE5\u4F5C\u53F0",
+  permission: "\u6743\u9650\u7BA1\u7406",
+  product: "\u5546\u54C1\u7BA1\u7406",
+  order: "\u8BA2\u5355\u7BA1\u7406",
+  marketing: "\u8425\u9500\u7BA1\u7406",
+  users: "\u7528\u6237\u7BA1\u7406",
+  roles: "\u89D2\u8272\u7BA1\u7406",
+  resources: "\u8D44\u6E90\u7BA1\u7406",
+  menus: "\u83DC\u5355\u7BA1\u7406",
+  list: "\u5217\u8868",
+  add: "\u6DFB\u52A0",
+  category: "\u5206\u7C7B",
+  brand: "\u54C1\u724C",
+  attribute: "\u5C5E\u6027",
+  setting: "\u8BBE\u7F6E",
+  return: "\u9000\u8D27",
+  reason: "\u539F\u56E0",
+  coupon: "\u4F18\u60E0\u5238",
+  promotion: "\u4FC3\u9500",
+  flash: "\u79D2\u6740",
+  new: "\u65B0\u54C1",
+  hot: "\u4EBA\u6C14",
+  advertise: "\u5E7F\u544A",
+  subject: "\u4E13\u9898"
+};
+var BreadcrumbNav = ({ items, onNavigate }) => {
+  const getLabel = (key) => {
+    const parts = key.split("/");
+    return parts.map((part) => labelMap[part] || part).join(" / ");
+  };
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(Breadcrumb, null, items.map((item) => /* @__PURE__ */ React2.createElement(Breadcrumb.Item, { key: item.key }, /* @__PURE__ */ React2.createElement("a", { onClick: () => onNavigate(item.key) }, item.label || getLabel(item.key)))));
+};
+var Breadcrumb_default = BreadcrumbNav;
+
+// src/components/AdminLayout/Navbar.tsx
+var Navbar = ({ collapsed, onToggleCollapse, breadcrumbItems, onNavigate }) => {
+  const userMenuItems = [
+    {
+      key: "profile",
+      icon: /* @__PURE__ */ React3.createElement(UserOutlined2, null),
+      label: "\u4E2A\u4EBA\u4E2D\u5FC3"
+    },
+    {
+      key: "settings",
+      icon: /* @__PURE__ */ React3.createElement(SettingOutlined2, null),
+      label: "\u7CFB\u7EDF\u8BBE\u7F6E"
+    },
+    {
+      type: "divider"
+    },
+    {
+      key: "logout",
+      icon: /* @__PURE__ */ React3.createElement(LogoutOutlined, null),
+      label: "\u9000\u51FA\u767B\u5F55",
+      danger: true
+    }
+  ];
+  const handleUserMenuClick = ({ key }) => {
+    if (key === "logout") {
+      console.log("User logged out");
+    }
+  };
+  const menu = /* @__PURE__ */ React3.createElement(Menu2, { items: userMenuItems, onClick: handleUserMenuClick });
+  return /* @__PURE__ */ React3.createElement("div", { className: "navbar-container" }, /* @__PURE__ */ React3.createElement("div", { className: "navbar-left" }, /* @__PURE__ */ React3.createElement("button", { className: "hamburger-btn", onClick: onToggleCollapse }, collapsed ? /* @__PURE__ */ React3.createElement(MenuUnfoldOutlined, null) : /* @__PURE__ */ React3.createElement(MenuFoldOutlined, null)), /* @__PURE__ */ React3.createElement(Breadcrumb_default, { items: breadcrumbItems, onNavigate })), /* @__PURE__ */ React3.createElement("div", { className: "navbar-right" }, /* @__PURE__ */ React3.createElement(Dropdown, { overlay: menu, placement: "bottomRight" }, /* @__PURE__ */ React3.createElement("div", { className: "user-info" }, /* @__PURE__ */ React3.createElement(Avatar, { size: 32, icon: /* @__PURE__ */ React3.createElement(UserOutlined2, null), className: "user-avatar" }), /* @__PURE__ */ React3.createElement(Space, { size: 4, className: "username" }, /* @__PURE__ */ React3.createElement("span", null, "\u7BA1\u7406\u5458"))))));
+};
+var Navbar_default = Navbar;
+
+// src/components/AdminLayout/MainContent.tsx
+import React5 from "react";
+
+// src/components/AdminLayout/TabBar.tsx
+import React4, { useState as useState2, useRef, useEffect } from "react";
+import { Dropdown as Dropdown2, Menu as Menu3 } from "antd";
+import { CloseOutlined, ReloadOutlined, CloseCircleOutlined } from "@ant-design/icons";
+var TabBar = ({
+  tabs,
+  activeTabKey,
+  onTabClick,
+  onCloseTab,
+  onCloseOther,
+  onCloseAll,
+  closableTabs = true
+}) => {
+  const [hoveredKey, setHoveredKey] = useState2(null);
+  const [contextMenuVisible, setContextMenuVisible] = useState2(false);
+  const [contextMenuKey, setContextMenuKey] = useState2("");
+  const [menuPosition, setMenuPosition] = useState2({ x: 0, y: 0 });
+  const scrollContainerRef = useRef(null);
+  useEffect(() => {
+    if (scrollContainerRef.current && activeTabKey) {
+      const activeElement = scrollContainerRef.current.querySelector(`[data-tab-key="${activeTabKey}"]`);
+      if (activeElement) {
+        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      }
+    }
+  }, [activeTabKey]);
+  useEffect(() => {
+    const handleClick = () => setContextMenuVisible(false);
+    if (contextMenuVisible) {
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [contextMenuVisible]);
+  const handleContextMenu = (e, tabKey) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenuKey(tabKey);
+    setMenuPosition({ x: e.clientX, y: e.clientY });
+    setContextMenuVisible(true);
+  };
+  const handleMenuClick = (key) => {
+    setContextMenuVisible(false);
+    switch (key) {
+      case "close":
+        onCloseTab(contextMenuKey);
+        break;
+      case "closeOther":
+        onCloseOther(contextMenuKey);
+        break;
+      case "closeAll":
+        onCloseAll();
+        break;
+      case "refresh":
+        window.location.reload();
+        break;
+    }
+  };
+  if (!tabs || tabs.length === 0) {
+    return null;
+  }
+  const contextMenuItems = [
+    {
+      key: "refresh",
+      icon: /* @__PURE__ */ React4.createElement(ReloadOutlined, null),
+      label: "\u5237\u65B0\u5F53\u524D\u9875"
+    },
+    {
+      key: "close",
+      icon: /* @__PURE__ */ React4.createElement(CloseOutlined, null),
+      label: "\u5173\u95ED\u5F53\u524D",
+      disabled: !closableTabs || tabs.find((t) => t.key === contextMenuKey)?.closable === false
+    },
+    {
+      type: "divider"
+    },
+    {
+      key: "closeOther",
+      icon: /* @__PURE__ */ React4.createElement(CloseCircleOutlined, null),
+      label: "\u5173\u95ED\u5176\u4ED6",
+      disabled: tabs.length <= 1
+    },
+    {
+      key: "closeAll",
+      icon: /* @__PURE__ */ React4.createElement(CloseCircleOutlined, null),
+      label: "\u5173\u95ED\u6240\u6709"
+    }
+  ];
+  const menu = /* @__PURE__ */ React4.createElement(Menu3, { items: contextMenuItems, onClick: ({ key }) => handleMenuClick(key) });
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", { className: "tab-bar-container" }, /* @__PURE__ */ React4.createElement("div", { className: "tab-bar-scroll", ref: scrollContainerRef }, tabs.map((tab) => /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      key: tab.key,
+      "data-tab-key": tab.key,
+      className: `tab-item ${activeTabKey === tab.key ? "active" : ""} ${hoveredKey === tab.key ? "hovered" : ""}`,
+      onClick: () => onTabClick(tab.key),
+      onMouseEnter: () => setHoveredKey(tab.key),
+      onMouseLeave: () => setHoveredKey(null),
+      onContextMenu: (e) => handleContextMenu(e, tab.key)
+    },
+    tab.icon && /* @__PURE__ */ React4.createElement("span", { className: "tab-icon" }, tab.icon),
+    /* @__PURE__ */ React4.createElement("span", { className: "tab-label" }, tab.label),
+    closableTabs && tab.closable && /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        className: `tab-close-btn ${hoveredKey === tab.key || activeTabKey === tab.key ? "visible" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          onCloseTab(tab.key);
+        }
+      },
+      /* @__PURE__ */ React4.createElement(CloseOutlined, { style: { fontSize: 10 } })
+    )
+  ))), closableTabs && tabs.length > 1 && /* @__PURE__ */ React4.createElement("div", { className: "tab-actions" }, /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      className: "close-all-btn",
+      onClick: onCloseAll,
+      title: "\u5173\u95ED\u5168\u90E8\u6807\u7B7E"
+    },
+    /* @__PURE__ */ React4.createElement(CloseCircleOutlined, null)
+  ))), contextMenuVisible && /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: menuPosition.x,
+        top: menuPosition.y,
+        zIndex: 1e3
+      }
+    },
+    /* @__PURE__ */ React4.createElement(
+      Dropdown2,
+      {
+        overlay: menu,
+        visible: contextMenuVisible,
+        onVisibleChange: setContextMenuVisible,
+        trigger: ["click"]
+      },
+      /* @__PURE__ */ React4.createElement("div", { style: { width: 0, height: 0 } })
+    )
+  ));
+};
+var TabBar_default = TabBar;
+
+// src/components/AdminLayout/MainContent.tsx
+var MainContent = ({
+  children,
+  pageKey,
+  tabs,
+  activeTabKey,
+  onTabClick,
+  onCloseTab,
+  onCloseOther,
+  onCloseAll,
+  enableTabs = true,
+  closableTabs = true,
+  className = ""
+}) => {
+  return /* @__PURE__ */ React5.createElement("main", { className: `main-content ${className}` }, enableTabs && tabs.length > 0 && /* @__PURE__ */ React5.createElement(
+    TabBar_default,
+    {
+      tabs,
+      activeTabKey,
+      onTabClick,
+      onCloseTab,
+      onCloseOther,
+      onCloseAll,
+      closableTabs
+    }
+  ), /* @__PURE__ */ React5.createElement("div", { className: "content-wrapper" }, /* @__PURE__ */ React5.createElement("div", { className: "page-container", key: pageKey }, children)));
+};
+var MainContent_default = MainContent;
+
+// src/components/AdminLayout/AdminLayout.tsx
+var SCENARIO_NAME = "general";
+var saveSchemaToLocalStorage = () => {
+  try {
+    const engine = window.AliLowCodeEngine;
+    if (!engine?.project)
+      return;
+    const schema = engine.project.exportSchema("save");
+    const key = `${SCENARIO_NAME}:projectSchema`;
+    localStorage.setItem(key, JSON.stringify(schema));
+    console.log("[AdminLayout] \u{1F4BE} Schema saved to localStorage");
+  } catch (e) {
+    console.error("[AdminLayout] Failed to save schema:", e);
+  }
+};
+var findMenuItem = (items, key) => {
+  for (const item of items) {
+    if (item.key === key)
+      return item;
+    if (item.children) {
+      const found = findMenuItem(item.children, key);
+      if (found)
+        return found;
+    }
+  }
+  return void 0;
+};
+var getLabelFromKey = (key) => {
+  const parts = key.split("/");
+  const labelMap2 = {
+    dashboard: "\u5DE5\u4F5C\u53F0",
+    permission: "\u6743\u9650\u7BA1\u7406",
+    product: "\u5546\u54C1\u7BA1\u7406",
+    order: "\u8BA2\u5355\u7BA1\u7406",
+    marketing: "\u8425\u9500\u7BA1\u7406",
+    users: "\u7528\u6237\u7BA1\u7406",
+    roles: "\u89D2\u8272\u7BA1\u7406",
+    resources: "\u8D44\u6E90\u7BA1\u7406",
+    menus: "\u83DC\u5355\u7BA1\u7406",
+    list: "\u5217\u8868",
+    add: "\u6DFB\u52A0",
+    category: "\u5206\u7C7B",
+    brand: "\u54C1\u724C",
+    attribute: "\u5C5E\u6027",
+    setting: "\u8BBE\u7F6E",
+    return: "\u9000\u8D27\u7533\u8BF7",
+    reason: "\u9000\u8D27\u539F\u56E0",
+    coupon: "\u4F18\u60E0\u5238\u7BA1\u7406",
+    promotion: "\u4FC3\u9500\u6D3B\u52A8",
+    flash: "\u79D2\u6740\u6D3B\u52A8",
+    new: "\u65B0\u54C1\u63A8\u8350",
+    hot: "\u4EBA\u6C14\u63A8\u8350",
+    advertise: "\u5E7F\u544A\u7BA1\u7406",
+    subject: "\u4E13\u9898\u7BA1\u7406"
+  };
+  return labelMap2[parts[parts.length - 1]] || parts[parts.length - 1];
+};
+var AdminLayout = ({
+  defaultSelectedKey = "dashboard",
+  defaultOpenKeys,
+  collapsible = true,
+  enableTabs = true,
+  maxTabs = 10,
+  closableTabs = true,
+  logoText = "Mall Admin@",
+  menuItems: customMenuItems,
+  style,
+  className,
+  children,
+  __designMode,
+  componentId
+}) => {
+  const items = customMenuItems || defaultMenuItems;
+  const [collapsed, setCollapsed] = useState3(false);
+  const [selectedKey, setSelectedKey] = useState3(defaultSelectedKey);
+  const [openKeys, setOpenKeys] = useState3(defaultOpenKeys || []);
+  const [tabs, setTabs] = useState3(() => {
+    const initialItem = findMenuItem(items, defaultSelectedKey);
+    return [{
+      key: defaultSelectedKey,
+      label: initialItem?.label || getLabelFromKey(defaultSelectedKey),
+      icon: initialItem?.icon,
+      closable: false,
+      path: initialItem?.path || `/${defaultSelectedKey}`
+    }];
+  });
+  const [activeTabKey, setActiveTabKey] = useState3(defaultSelectedKey);
+  const activeTabKeyRef = useRef2(activeTabKey);
+  activeTabKeyRef.current = activeTabKey;
+  const initializedRef = useRef2(false);
+  useEffect2(() => {
+    if (__designMode !== "design" || !componentId || initializedRef.current)
+      return;
+    const timer = setTimeout(() => {
+      try {
+        const engine = window.AliLowCodeEngine;
+        if (!engine?.project?.currentDocument)
+          return;
+        const documentModel = engine.project.currentDocument;
+        const adminLayoutNode = documentModel.getNodeById(componentId);
+        if (!adminLayoutNode) {
+          console.log("[AdminLayout] \u26A0\uFE0F AdminLayout node not found");
+          return;
+        }
+        const schemaChildren = adminLayoutNode.schema?.children || [];
+        console.log("[AdminLayout] \u{1F50D} Schema children:", schemaChildren.length, schemaChildren.map((c) => c.componentName));
+        const existingTabPanes = schemaChildren.filter((child) => child.componentName === "TabPane");
+        console.log("[AdminLayout] \u{1F50D} Found existing TabPanes:", existingTabPanes.length);
+        if (existingTabPanes.length > 0) {
+          const restoredTabs = existingTabPanes.map((tpSchema) => {
+            const tabKey = tpSchema.props?.tabKey || "unknown";
+            const tabLabel = tpSchema.props?.tab || getLabelFromKey(tabKey);
+            const menuItem = findMenuItem(items, tabKey);
+            console.log("[AdminLayout] \u{1F4CB} Restoring tab:", tabKey, tabLabel);
+            return {
+              key: tabKey,
+              label: tabLabel,
+              icon: menuItem?.icon,
+              closable: tabKey !== "dashboard",
+              path: menuItem?.path || `/${tabKey}`
+            };
+          });
+          console.log("[AdminLayout] \u{1F4CB} Restored tabs from schema:", restoredTabs.map((t) => t.key));
+          setTabs(restoredTabs);
+          const currentActiveTab = restoredTabs[restoredTabs.length - 1];
+          if (currentActiveTab) {
+            setActiveTabKey(currentActiveTab.key);
+            setSelectedKey(currentActiveTab.key);
+          }
+        } else {
+          console.log("[AdminLayout] \u{1F4CB} No TabPane found, creating default dashboard TabPane");
+          const tabPaneNode = documentModel.createNode({
+            componentName: "TabPane",
+            props: {
+              tab: "\u5DE5\u4F5C\u53F0",
+              tabKey: "dashboard",
+              activeTabKey: "dashboard"
+            }
+          });
+          if (tabPaneNode) {
+            documentModel.insertNode(adminLayoutNode, tabPaneNode);
+            console.log("[AdminLayout] \u2705 Created default TabPane for dashboard");
+          }
+        }
+        initializedRef.current = true;
+      } catch (e) {
+        console.error("[AdminLayout] Init TabPane error:", e);
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [componentId, __designMode, items]);
+  useEffect2(() => {
+    if (__designMode !== "design")
+      return;
+    const engine = window.AliLowCodeEngine;
+    if (!engine?.project?.currentDocument)
+      return;
+    const documentModel = engine.project.currentDocument;
+    let saveTimer = null;
+    const debouncedSave = () => {
+      if (saveTimer)
+        clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => {
+        saveSchemaToLocalStorage();
+      }, 500);
+    };
+    const offAddNode = documentModel.onAddNode?.(() => {
+      console.log("[AdminLayout] \u{1F4CC} onAddNode triggered");
+      debouncedSave();
+    });
+    const offRemoveNode = documentModel.onRemoveNode?.(() => {
+      console.log("[AdminLayout] \u{1F4CC} onRemoveNode triggered");
+      debouncedSave();
+    });
+    const offMountNode = documentModel.onMountNode?.(() => {
+      console.log("[AdminLayout] \u{1F4CC} onMountNode triggered");
+      debouncedSave();
+    });
+    return () => {
+      if (saveTimer)
+        clearTimeout(saveTimer);
+      offAddNode?.();
+      offRemoveNode?.();
+      offMountNode?.();
+    };
+  }, [__designMode]);
+  useEffect2(() => {
+    if (__designMode !== "design" || !componentId)
+      return;
+    try {
+      const engine = window.AliLowCodeEngine;
+      if (!engine?.project?.currentDocument)
+        return;
+      const documentModel = engine.project.currentDocument;
+      const adminLayoutNode = documentModel.getNodeById(componentId);
+      if (adminLayoutNode?.children) {
+        const childrenArr = Array.isArray(adminLayoutNode.children) ? adminLayoutNode.children : adminLayoutNode.children.toArray ? adminLayoutNode.children.toArray() : [];
+        childrenArr.forEach((child) => {
+          if (child.componentName === "TabPane") {
+            child.setPropValue("activeTabKey", activeTabKey);
+          }
+        });
+      }
+    } catch (e) {
+    }
+  }, [activeTabKey, componentId, __designMode]);
+  const handleToggleCollapse = useCallback(() => {
+    if (collapsible)
+      setCollapsed((prev) => !prev);
+  }, [collapsible]);
+  const createTabPane = useCallback((tabKey, tabLabel) => {
+    if (typeof window === "undefined")
+      return false;
+    try {
+      const engine = window.AliLowCodeEngine;
+      if (!engine?.project?.currentDocument)
+        return false;
+      const documentModel = engine.project.currentDocument;
+      const adminLayoutNode = componentId ? documentModel.getNodeById(componentId) : null;
+      if (!adminLayoutNode)
+        return false;
+      const allChildren = Array.isArray(adminLayoutNode.children) ? adminLayoutNode.children : adminLayoutNode.children?.toArray ? adminLayoutNode.children.toArray() : [];
+      console.log(
+        "[AdminLayout] \u{1F50D} All children before create:",
+        allChildren.map((c) => ({ id: c.id, name: c.componentName, tabKey: c.props?.tabKey }))
+      );
+      for (const child of allChildren) {
+        const ck = child.props?.tabKey || child.getPropValue?.("tabKey");
+        if (child.componentName === "TabPane" && ck === tabKey) {
+          console.log("[AdminLayout] \u26A0\uFE0F Found existing TabPane, removing first:", child.id);
+          if (child.children) {
+            const grandChildren = Array.isArray(child.children) ? [...child.children] : child.children.toArray ? [...child.children.toArray()] : [];
+            console.log("[AdminLayout] \u{1F5D1}\uFE0F Removing", grandChildren.length, "children from existing TabPane");
+            for (const gc of grandChildren) {
+              try {
+                documentModel.removeNode(gc);
+              } catch (e) {
+              }
+            }
+          }
+          documentModel.removeNode(child);
+          break;
+        }
+      }
+      const tabPaneNode = documentModel.createNode({
+        componentName: "TabPane",
+        props: {
+          tab: tabLabel,
+          tabKey,
+          activeTabKey: activeTabKeyRef.current
+        }
+      });
+      if (!tabPaneNode)
+        return false;
+      documentModel.insertNode(adminLayoutNode, tabPaneNode);
+      console.log("[AdminLayout] \u2705 Created new TabPane:", tabKey, "nodeId:", tabPaneNode.id);
+      setTimeout(() => saveSchemaToLocalStorage(), 100);
+      return true;
+    } catch (error) {
+      console.error("[AdminLayout] createTabPane error:", error);
+      return false;
+    }
+  }, [componentId]);
+  const removeTabPane = useCallback((tabKey) => {
+    if (typeof window === "undefined")
+      return false;
+    let removed = false;
+    try {
+      const engine = window.AliLowCodeEngine;
+      if (!engine?.project?.currentDocument)
+        return false;
+      const documentModel = engine.project.currentDocument;
+      const adminLayoutNode = componentId ? documentModel.getNodeById(componentId) : null;
+      console.log("[AdminLayout] \u{1F5D1}\uFE0F removeTabPane called:", tabKey);
+      console.log("[AdminLayout] componentId:", componentId);
+      console.log("[AdminLayout] adminLayoutNode:", adminLayoutNode ? "found" : "NOT FOUND");
+      console.log("[AdminLayout] adminLayoutNode.id:", adminLayoutNode?.id);
+      console.log("[AdminLayout] adminLayoutNode.componentName:", adminLayoutNode?.componentName);
+      if (!adminLayoutNode)
+        return false;
+      let childrenArr = [];
+      if (adminLayoutNode.children) {
+        if (Array.isArray(adminLayoutNode.children)) {
+          childrenArr = adminLayoutNode.children;
+        } else if (typeof adminLayoutNode.children.toArray === "function") {
+          childrenArr = adminLayoutNode.children.toArray();
+        } else if (typeof adminLayoutNode.children.map === "function") {
+          childrenArr = adminLayoutNode.children.map((c) => c);
+        }
+      }
+      if (childrenArr.length === 0 && adminLayoutNode.schema?.children) {
+        console.log("[AdminLayout] Trying schema.children...");
+        const schemaChildren = adminLayoutNode.schema.children;
+        if (Array.isArray(schemaChildren)) {
+          childrenArr = schemaChildren.map((childSchema) => {
+            return documentModel.getNodeById(childSchema.id);
+          }).filter(Boolean);
+        }
+      }
+      if (childrenArr.length === 0) {
+        console.log("[AdminLayout] Trying documentModel.getRoot()...");
+        const root = documentModel.getRoot();
+        console.log("[AdminLayout] Root node:", root?.componentName);
+        const findNode = (node, targetId) => {
+          if (!targetId)
+            return null;
+          if (node.id === targetId)
+            return node;
+          if (node.children) {
+            const arr = Array.isArray(node.children) ? node.children : node.children.toArray ? node.children.toArray() : [];
+            for (const child of arr) {
+              const found = findNode(child, targetId);
+              if (found)
+                return found;
+            }
+          }
+          return null;
+        };
+        const foundNode = findNode(root, componentId);
+        if (foundNode && foundNode.children) {
+          childrenArr = Array.isArray(foundNode.children) ? foundNode.children : foundNode.children.toArray ? foundNode.children.toArray() : [];
+        }
+      }
+      console.log("[AdminLayout] Final children count:", childrenArr.length);
+      console.log(
+        "[AdminLayout] Children details:",
+        childrenArr.map((c) => ({
+          id: c?.id,
+          name: c?.componentName,
+          tabKey: c?.props?.tabKey || c?.getPropValue?.("tabKey"),
+          childrenCount: c?.children ? Array.isArray(c.children) ? c.children.length : c.children.toArray ? c.children.toArray().length : 0 : 0
+        }))
+      );
+      childrenArr.forEach((c, idx) => {
+        console.log(`[AdminLayout] Child[${idx}] ${c?.componentName}:`, {
+          id: c?.id,
+          tabKey: c?.props?.tabKey || c?.getPropValue?.("tabKey"),
+          hasChildren: !!c?.children,
+          childrenType: c?.children ? Array.isArray(c.children) ? "array" : typeof c.children.toArray === "function" ? "array-like" : typeof c.children : "none"
+        });
+        if (c?.componentName === "TabPane" && c?.children) {
+          const tpChildren = Array.isArray(c.children) ? c.children : c.children.toArray ? c.children.toArray() : [];
+          console.log(
+            `[AdminLayout]   TabPane children:`,
+            tpChildren.map((gc) => ({ id: gc?.id, name: gc?.componentName }))
+          );
+          if (tpChildren.length === 0) {
+            console.log(`[AdminLayout]   Trying alternative methods...`);
+            if (c.schema?.children) {
+              console.log(`[AdminLayout]   schema.children:`, c.schema.children);
+            }
+            if (typeof c.getChildren === "function") {
+              const gChildren = c.getChildren();
+              console.log(`[AdminLayout]   getChildren():`, gChildren);
+            }
+            if (c.slots) {
+              console.log(`[AdminLayout]   slots:`, c.slots);
+            }
+          }
+        }
+        if (c?.componentName !== "TabPane") {
+          console.log(`[AdminLayout] \u26A0\uFE0F Found non-TabPane child! This might be a dragged component.`);
+        }
+      });
+      for (const child of childrenArr) {
+        if (!child)
+          continue;
+        const childTabKey = child.props?.tabKey || child.getPropValue?.("tabKey");
+        if (child.componentName === "TabPane" && childTabKey === tabKey) {
+          console.log("[AdminLayout] \u2705 Found TabPane to remove:", child.id);
+          const schemaChildren = child.schema?.children;
+          if (schemaChildren && Array.isArray(schemaChildren) && schemaChildren.length > 0) {
+            console.log("[AdminLayout] Removing", schemaChildren.length, "grandchildren from schema.children");
+            for (let i = schemaChildren.length - 1; i >= 0; i--) {
+              const childSchema = schemaChildren[i];
+              const grandChildNode = documentModel.getNodeById(childSchema.id);
+              if (grandChildNode) {
+                try {
+                  documentModel.removeNode(grandChildNode);
+                  console.log("[AdminLayout]   \u2713 Removed grandchild:", grandChildNode.id, grandChildNode.componentName);
+                } catch (e) {
+                  console.warn("[AdminLayout]   \u2717 Failed to remove grandchild:", e);
+                }
+              }
+            }
+          } else {
+            console.log("[AdminLayout] No grandchildren to remove");
+          }
+          try {
+            documentModel.removeNode(child);
+            removed = true;
+            console.log("[AdminLayout] \u2705 Removed TabPane node:", tabKey);
+            setTimeout(() => saveSchemaToLocalStorage(), 100);
+          } catch (e) {
+            console.error("[AdminLayout] Failed to remove TabPane:", e);
+          }
+          break;
+        }
+      }
+      if (!removed) {
+        console.warn("[AdminLayout] \u26A0\uFE0F TabPane not found for key:", tabKey);
+      }
+      return removed;
+    } catch (error) {
+      console.error("[AdminLayout] removeTabPane error:", error);
+      return false;
+    }
+  }, [componentId]);
+  const handleMenuClick = useCallback((key) => {
+    setSelectedKey(key);
+    const existingTab = tabs.find((tab) => tab.key === key);
+    if (!existingTab) {
+      const menuItem = findMenuItem(items, key);
+      const newTab = {
+        key,
+        label: menuItem?.label || getLabelFromKey(key),
+        icon: menuItem?.icon,
+        closable: key !== "dashboard",
+        path: menuItem?.path || `/${key}`
+      };
+      setTabs((prev) => {
+        if (prev.length >= maxTabs) {
+          const filtered = prev.filter((t) => t.closable);
+          if (filtered.length > 0) {
+            return [...prev.filter((t) => t.key !== filtered[0].key), newTab];
+          }
+        }
+        return [...prev, newTab];
+      });
+      if (__designMode === "design") {
+        setTimeout(() => createTabPane(key, menuItem?.label || getLabelFromKey(key)), 0);
+      }
+    }
+    setActiveTabKey(key);
+  }, [tabs, items, maxTabs, __designMode, createTabPane]);
+  const handleOpenChange = useCallback((keys) => setOpenKeys(keys), []);
+  const handleNavigate = useCallback((key) => {
+    setSelectedKey(key);
+    setActiveTabKey(key);
+  }, []);
+  const handleTabClick = useCallback((key) => {
+    setSelectedKey(key);
+    setActiveTabKey(key);
+  }, []);
+  const handleCloseTab = useCallback((key) => {
+    if (key === "dashboard")
+      return;
+    removeTabPane(key);
+    setTabs((prev) => prev.filter((tab) => tab.key !== key));
+    if (key === activeTabKey) {
+      const remainingTabs = tabs.filter((tab) => tab.key !== key);
+      if (remainingTabs.length > 0) {
+        const currentIndex = tabs.findIndex((tab) => tab.key === key);
+        const nextTab = remainingTabs[currentIndex] || remainingTabs[remainingTabs.length - 1];
+        setSelectedKey(nextTab.key);
+        setActiveTabKey(nextTab.key);
+      }
+    }
+  }, [tabs, activeTabKey, removeTabPane]);
+  const handleCloseOther = useCallback((keepKey) => {
+    tabs.forEach((tab) => {
+      if (tab.key !== keepKey && tab.key !== "dashboard") {
+        removeTabPane(tab.key);
+      }
+    });
+    setTabs((prev) => prev.filter((tab) => tab.key === keepKey || tab.key === "dashboard"));
+    setSelectedKey(keepKey);
+    setActiveTabKey(keepKey);
+  }, [tabs, removeTabPane]);
+  const handleCloseAll = useCallback(() => {
+    tabs.forEach((tab) => {
+      if (tab.key !== "dashboard") {
+        removeTabPane(tab.key);
+      }
+    });
+    const dashboardTab = tabs.find((tab) => tab.key === "dashboard");
+    if (dashboardTab) {
+      setTabs([dashboardTab]);
+      setSelectedKey("dashboard");
+      setActiveTabKey("dashboard");
+    }
+  }, [tabs, removeTabPane]);
+  const breadcrumbItems = useMemo(() => {
+    if (selectedKey === "dashboard")
+      return [];
+    const parts = selectedKey.split("/");
+    if (parts.length === 1)
+      return [{ key: selectedKey, label: "", path: selectedKey }];
+    return [{ key: selectedKey, label: "", path: selectedKey }];
+  }, [selectedKey]);
+  const filteredChildren = useMemo(() => {
+    if (!children)
+      return null;
+    if (__designMode === "design") {
+      const childArray = Children.toArray(children);
+      const activeTabPane = childArray.find((child) => {
+        if (isValidElement(child)) {
+          const childProps = child.props;
+          return childProps?.tabKey === activeTabKey;
+        }
+        return false;
+      });
+      return activeTabPane || null;
+    }
+    return children;
+  }, [children, activeTabKey, __designMode]);
+  const defaultContent = /* @__PURE__ */ React6.createElement("div", { style: { padding: 24, color: "#999" } }, "\u70B9\u51FB\u4FA7\u8FB9\u680F\u83DC\u5355\u521B\u5EFA\u9009\u9879\u5361\uFF0C\u7136\u540E\u62D6\u62FD\u7EC4\u4EF6\u5230\u5BF9\u5E94\u9762\u677F");
+  const content = filteredChildren || defaultContent;
+  return /* @__PURE__ */ React6.createElement("div", { className: `admin-layout ${collapsed ? "is-collapse" : ""} ${className || ""}`, style, "data-active-tab": activeTabKey }, /* @__PURE__ */ React6.createElement(
+    Sidebar_default,
+    {
+      collapsed,
+      selectedKey,
+      openKeys,
+      onMenuClick: handleMenuClick,
+      onOpenChange: handleOpenChange,
+      menuItems: items
+    }
+  ), /* @__PURE__ */ React6.createElement("div", { className: "layout-right" }, /* @__PURE__ */ React6.createElement(
+    Navbar_default,
+    {
+      collapsed,
+      onToggleCollapse: handleToggleCollapse,
+      breadcrumbItems,
+      onNavigate: handleNavigate
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    MainContent_default,
+    {
+      pageKey: selectedKey,
+      tabs,
+      activeTabKey,
+      onTabClick: handleTabClick,
+      onCloseTab: handleCloseTab,
+      onCloseOther: handleCloseOther,
+      onCloseAll: handleCloseAll,
+      enableTabs,
+      closableTabs,
+      className: collapsed ? "collapsed" : ""
+    },
+    content
+  )), collapsible && /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `mobile-overlay ${!collapsed ? "visible" : ""}`,
+      onClick: handleToggleCollapse
+    }
+  ));
+};
+var AdminLayout_default = AdminLayout;
+
+// src/components/AdminLayout/TabPane.tsx
+import React7 from "react";
+var TabPane = ({
+  tab,
+  tabKey,
+  activeTabKey,
+  children,
+  className,
+  style
+}) => {
+  const isActive = activeTabKey === tabKey;
+  return /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: `tab-pane ${isActive ? "tab-pane--active" : ""} ${className || ""}`,
+      style: {
+        ...style,
+        display: isActive ? void 0 : "none"
+      },
+      "data-tab-key": tabKey,
+      "data-active": isActive ? "true" : "false"
+    },
+    children
+  );
+};
+var TabPane_default = TabPane;
+export {
+  AdminLayout_default as AdminLayout,
+  TabPane_default as TabPane
+};