@spacego/fe-components 0.0.1-alpha.1

package/lib/fe-layouts/basics-layout/components/basics-layout/header.js

@@ -0,0 +1,102 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { LogoutOutlined as v } from "@ant-design/icons";
+import { useSelector as N } from "@spacego/zustand";
+import { Breadcrumb as y, Space as k, Popover as w, Badge as T, Dropdown as S, Avatar as M } from "antd";
+import { useState as E } from "react";
+import { IoMoon as C } from "react-icons/io5";
+import { MdWbSunny as G } from "react-icons/md";
+import { Link as O } from "react-router-dom";
+import j from "../../../../assets/svg/icon-arrows-right.svg.js";
+import A from "../../../../assets/svg/icon-bell.svg.js";
+import B from "../../../../assets/svg/icon-system.svg.js";
+import { useAuth as L } from "../../../../hooks/use-auth.hook.js";
+import "../../../../store/modules/layout-config.store.js";
+import { useThemeStore as R } from "../../../../store/modules/theme.store.js";
+import { applyThemeWithTransition as z } from "../../../../utils/theme.js";
+import { useGlobal as H } from "../../../context/context.js";
+import _ from "./setting-drawer.js";
+function oe({ breadcrumbItems: n }) {
+  const { logout: l } = L(), { appName: s, logo: c, headerActionsRender: m, userInfo: r, userMenuItems: d = [] } = H(), { theme: a, TOGGLE_THEME: h } = R(N(["theme", "TOGGLE_THEME"])), [p, i] = E(!1), g = (f) => {
+    const o = f.currentTarget.getBoundingClientRect(), x = o.left + o.width / 2, b = o.top + o.height / 2;
+    z(a === "light" ? "dark" : "light", x, b).then(() => {
+      h();
+    });
+  }, u = [
+    ...d,
+    {
+      key: "logout",
+      label: "退出登录",
+      icon: /* @__PURE__ */ e(v, {}),
+      onClick: () => {
+        l();
+      }
+    }
+  ];
+  return /* @__PURE__ */ t("header", { className: "layout-header h-[50px] px-4 flex items-center justify-between bg-(--global-background-color) border-b border-(--border-color) z-10", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("div", { className: "min-w-[204px]", children: /* @__PURE__ */ t(O, { to: "/", className: "flex items-center gap-2 no-underline", children: [
+        c,
+        /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-gray-800 dark:text-[#f2f2f2] tracking-wide", children: s })
+      ] }) }),
+      /* @__PURE__ */ e(
+        y,
+        {
+          items: n,
+          className: "items-center basics-breadcrumb text-sm! hidden md:flex",
+          separator: /* @__PURE__ */ e(j, { className: "w-4 h-4 text-gray-400" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ t(k, { size: 6, children: [
+      m,
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation",
+          onClick: () => i(!0),
+          children: /* @__PURE__ */ e(B, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          onClick: g,
+          className: "cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation flex items-center justify-center",
+          title: a === "light" ? "切换到暗色主题" : "切换到亮色主题",
+          children: a === "light" ? /* @__PURE__ */ e(C, { className: "text-lg" }) : /* @__PURE__ */ e(G, { className: "text-lg" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "cursor-pointer w-8 h-8 text-(--icon-text-color) hover:text-primary transition-colors p-2 rounded-full hover:bg-(--hover-background-color) hover-scale-animation", children: /* @__PURE__ */ e(
+        w,
+        {
+          placement: "bottom",
+          arrow: !1,
+          trigger: "click",
+          classNames: {
+            container: "p-0!"
+          },
+          content: 1,
+          children: /* @__PURE__ */ e(T, { dot: !0, color: "var(--color-primary)", children: /* @__PURE__ */ e(A, {}) })
+        }
+      ) }),
+      /* @__PURE__ */ e(S, { menu: { items: u }, placement: "bottomRight", arrow: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2 cursor-pointer hover:bg-(--hover-background-color) px-2 py-1 rounded-full transition-all border border-transparent", children: [
+        /* @__PURE__ */ e(
+          M,
+          {
+            size: "default",
+            className: "bg-primary/10 text-primary border border-primary/20",
+            src: r == null ? void 0 : r.avatar
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "hidden lg:flex flex-col items-start", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700 dark:text-[#f2f2f2] leading-tight", children: r == null ? void 0 : r.username }),
+          /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 dark:text-[#a1a1aa] leading-tight", children: r == null ? void 0 : r.roleName })
+        ] })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ e(_, { open: p, onClose: () => i(!1) })
+  ] });
+}
+export {
+  oe as default
+};

package/lib/fe-layouts/basics-layout/components/basics-layout/setting-custom-color.js

@@ -0,0 +1,34 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useSelector as p } from "@spacego/zustand";
+import { memo as f, useRef as l, useCallback as u } from "react";
+import C from "../../../../assets/svg/icon-custom.svg.js";
+import "../../../../store/modules/layout-config.store.js";
+import { useThemeStore as h } from "../../../../store/modules/theme.store.js";
+import "@ant-design/icons";
+import { applyThemeColor as S } from "../../../../utils/theme.js";
+function v() {
+  const { themeColor: t, SET_THEME_COLOR: n } = h(p(["themeColor", "SET_THEME_COLOR"])), m = l(null), o = l(t), s = u((a) => {
+    const e = a.target.value;
+    o.current = e, S(e);
+  }, []), c = u(() => {
+    o.current && n(o.current);
+  }, []);
+  return /* @__PURE__ */ i("div", { className: "w-5 h-5 relative z-10", children: [
+    /* @__PURE__ */ r(C, {}),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: m,
+        type: "color",
+        value: t,
+        className: "absolute w-full h-full z-10 opacity-0 cursor-pointer",
+        onInput: s,
+        onBlur: c
+      }
+    )
+  ] });
+}
+const y = f(v);
+export {
+  y as default
+};

package/lib/fe-layouts/basics-layout/components/basics-layout/setting-drawer.js

@@ -0,0 +1,118 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { CloseOutlined as g } from "@ant-design/icons";
+import { useSelector as N } from "@spacego/zustand";
+import { Drawer as b } from "antd";
+import { IoMoon as y } from "react-icons/io5";
+import { MdWbSunny as C } from "react-icons/md";
+import S from "../../../../assets/svg/icon-sun-moon.svg.js";
+import { THEME_COLORS as T } from "../../../../config/theme.js";
+import "../../../../store/modules/layout-config.store.js";
+import { useThemeStore as d } from "../../../../store/modules/theme.store.js";
+import k from "./setting-custom-color.js";
+function z({ open: m, onClose: a }) {
+  const { theme: i, themeColor: s, isCustomThemeColor: l, SET_THEME_COLOR: u, SET_IS_CUSTOM_THEME_COLOR: n } = d(N(["theme", "themeColor", "isCustomThemeColor", "SET_THEME_COLOR", "SET_IS_CUSTOM_THEME_COLOR"])), p = [
+    { mode: "light", icon: C, label: "浅色" },
+    { mode: "dark", icon: y, label: "深色" },
+    { mode: "system", icon: S, label: "跟随系统" }
+  ], f = ["默认", "紫罗兰", "樱花粉", "柠檬黄", "天蓝色", "浅绿色", "中性色", "自定义"], h = [
+    ...T.map((r, t) => ({ color: r, name: f[t], isCustom: !1 })),
+    { color: s, name: "自定义", isCustom: !0 }
+  ], x = (r) => {
+    i !== r && d.getState().SET_THEME(r);
+  };
+  return /* @__PURE__ */ o(
+    b,
+    {
+      title: /* @__PURE__ */ o("div", { className: "flex items-end", children: [
+        "偏好设置",
+        /* @__PURE__ */ e("span", { className: "text-xs text-[#71717a] dark:text-[#a1a1aa] mb-[2px]", children: "自定义偏好设置 & 实时预览" })
+      ] }),
+      placement: "right",
+      onClose: a,
+      open: m,
+      width: 380,
+      closable: !1,
+      maskStyle: { backdropFilter: "none" },
+      className: "dark:bg-[#1a1c1f]!",
+      extra: /* @__PURE__ */ e("div", { className: "cursor-pointer hover:text-primary transition-colors", onClick: a, children: /* @__PURE__ */ e(g, { className: "text-sm" }) }),
+      styles: {
+        header: {
+          padding: "18px",
+          borderBottom: "1px solid var(--border-color)"
+        },
+        body: {
+          padding: "18px"
+        }
+      },
+      children: [
+        /* @__PURE__ */ o("div", { className: "mb-8", children: [
+          /* @__PURE__ */ e("h3", { className: "text-base font-medium mb-4 text-(--text-color)", children: "主题" }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-6", children: p.map(({ mode: r, icon: t, label: v }) => {
+            const c = i === r;
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: "group flex flex-col items-center gap-2 cursor-pointer",
+                onClick: () => x(r),
+                children: [
+                  /* @__PURE__ */ o("div", { className: `w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${c ? "outline-(--color-primary) outline-2" : "outline-[#e4e4e7] dark:outline-[#36363a]"}`, children: [
+                    !c && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ e("div", { className: "w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" }) }),
+                    /* @__PURE__ */ e(t, { className: "text-xl text-[#2d2f32] dark:text-[#f0f0f0] relative z-10" })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "text-xs text-[#71717a] dark:text-[#a1a1aa]", children: v })
+                ]
+              },
+              r
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ e("h3", { className: "text-base font-medium mb-4 text-(--text-color)", children: "内置主题" }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-6", children: h.map((r) => {
+            const t = s === r.color && !l;
+            return r.isCustom ? /* @__PURE__ */ o(
+              "div",
+              {
+                className: "cursor-pointer group flex flex-col items-center gap-2",
+                onClick: () => n(!0),
+                children: [
+                  /* @__PURE__ */ o("div", { className: `w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${l ? "outline-(--color-primary) outline-2" : "outline-[#e4e4e7] dark:outline-[#36363a]"}`, children: [
+                    !l && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ e("div", { className: "w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" }) }),
+                    /* @__PURE__ */ e(k, {})
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "text-xs text-[#71717a] dark:text-[#a1a1aa]", children: r.name })
+                ]
+              },
+              `custom-${r.color}`
+            ) : /* @__PURE__ */ o(
+              "div",
+              {
+                className: "cursor-pointer group flex flex-col items-center gap-2",
+                onClick: () => {
+                  u(r.color), n(!1);
+                },
+                children: [
+                  /* @__PURE__ */ o("div", { className: `w-full aspect-[2] rounded-lg outline flex items-center justify-center transition-all relative overflow-hidden ${t ? "outline-(--color-primary) outline-2" : "outline-[#e4e4e7] dark:outline-[#36363a]"}`, children: [
+                    !t && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ e("div", { className: "w-full h-full rounded-lg border-2 border-(--color-primary) opacity-0 scale-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100" }) }),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-5 h-5 rounded-md shadow-sm relative z-10",
+                        style: { backgroundColor: r.color }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "text-xs text-[#71717a] dark:text-[#a1a1aa]", children: r.name })
+                ]
+              },
+              r.color
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  z as default
+};

package/lib/fe-layouts/basics-layout/components/basics-layout/sidebar.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { Layout as h, Menu as p } from "antd";
+import { useState as y, useEffect as x, useMemo as g } from "react";
+import { MdOutlineKeyboardDoubleArrowRight as v, MdOutlineKeyboardDoubleArrowLeft as k } from "react-icons/md";
+import { renderIcon as K } from "../../../../utils/icon.js";
+import "../../../../store/modules/layout-config.store.js";
+import "../../../../store/modules/theme.store.js";
+const { Sider: w } = h;
+function A(a) {
+  const { collapsed: l, menus: n, activeKey: s, openKeys: o = [], onMenuClick: d, onCollapse: c } = a, [f, i] = y(o);
+  x(() => {
+    o.length > 0 && i(o);
+  }, [o]);
+  const m = g(() => {
+    const t = (u) => u.map((r) => ({
+      key: r.key,
+      label: r.label,
+      icon: K(r.icon),
+      children: r.children ? t(r.children) : void 0
+    }));
+    return t(n);
+  }, [n]);
+  return /* @__PURE__ */ e(
+    w,
+    {
+      trigger: null,
+      collapsible: !0,
+      collapsed: l,
+      width: 224,
+      className: "layout-sidebar border-r border-(--border-color) bg-(--global-background-color)! h-full relative",
+      theme: "light",
+      children: /* @__PURE__ */ b("div", { className: "h-full flex flex-col", children: [
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 custom-scrollbar", children: /* @__PURE__ */ e(
+          p,
+          {
+            mode: "inline",
+            selectedKeys: [s],
+            openKeys: f,
+            onOpenChange: i,
+            items: m,
+            onClick: ({ key: t }) => d(t),
+            className: "sidebar-menu border-none",
+            inlineIndent: 16
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-start pl-4 mb-2", children: /* @__PURE__ */ e(
+          "div",
+          {
+            onClick: () => c(!l),
+            className: "text-gray-500 dark:text-[#a1a1a2] text-xl hover:text-[#323639] dark:hover:text-[#f0f0f0] hover:bg-[#dfe3e4] dark:hover:bg-[#333538] transition-all duration-300 w-7 h-7 rounded-sm bg-[#f4f4f5] dark:bg-[#292a2d] cursor-pointer flex items-center justify-center",
+            children: l ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(k, {})
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  A as default
+};

package/lib/fe-layouts/basics-layout/components/basics-layout/tabs.js

@@ -0,0 +1,60 @@
+import { jsx as r, jsxs as i, Fragment as u } from "react/jsx-runtime";
+import { classnames as s } from "@spacego/turbo-utils";
+import { Divider as x } from "antd";
+import { useRef as b, useState as v, useEffect as k } from "react";
+import { MdClear as g } from "react-icons/md";
+import y from "../../../../assets/svg/chrome-bg-after.svg.js";
+import w from "../../../../assets/svg/chrome-bg-before.svg.js";
+function z(c) {
+  const { tabs: o, activeKey: d, onChange: f, onClose: h } = c, n = b(null), [l, m] = v(!1), a = () => {
+    const e = n.current;
+    if (e) {
+      const t = e.scrollWidth > e.clientWidth;
+      m(t);
+    }
+  };
+  return k(() => (a(), window.addEventListener("resize", a), () => {
+    window.removeEventListener("resize", a);
+  }), [o]), /* @__PURE__ */ r(
+    "div",
+    {
+      ref: n,
+      className: s("layout-tabs bg-(--global-background-color) border-b border-(--border-color) overflow-x-auto overflow-y-hidden relative transition-all duration-300 shrink-0", {
+        "h-[38px]": !l,
+        // 出现滚动条时增加高度，留出滚动条的空间，防止挤压内容
+        "h-[46px]": l
+      }),
+      children: /* @__PURE__ */ r("div", { className: "flex items-center h-[38px] px-2 pt-1 min-w-fit", children: o.map((e, t) => /* @__PURE__ */ i(u, { children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: s("layout-tabs-item group cursor-pointer px-[16px] h-full flex items-center justify-center rounded-tl-[8px] rounded-tr-[8px] transition-all duration-500 relative hover:bg-[#f4f4f5] dark:hover:bg-[#292a2d] shrink-0", {
+              "bg-(--background-primary-light)! text-(--color-primary) dark:text-[#f9f9f9]! is-active": d === e.key
+            }),
+            onClick: () => f(e.key),
+            children: [
+              /* @__PURE__ */ r(w, {}),
+              e.label,
+              /* @__PURE__ */ r(y, {}),
+              e.closable !== !1 && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "w-4 h-4 flex ml-1 mr-[-10px] items-center justify-center text-[#18181bcc] hover:text-[#18181b] hover:bg-[#f4f4f5] dark:hover:bg-transparent rounded-full transition-all duration-300",
+                  onClick: (p) => {
+                    p.stopPropagation(), h(e.key);
+                  },
+                  children: /* @__PURE__ */ r(g, { className: "text-xs text-[#333333] dark:text-[#cfd0d0] hover:text-black dark:hover:text-white transition-all" })
+                }
+              )
+            ]
+          },
+          `${e.key}-${t}`
+        ),
+        t !== o.length - 1 && /* @__PURE__ */ r(x, { orientation: "vertical", className: "mx-1! shrink-0" })
+      ] }, `${e.key}-${t}`)) })
+    }
+  );
+}
+export {
+  z as default
+};

package/lib/fe-layouts/basics-layout/components/utils/index.js

@@ -0,0 +1,72 @@
+function d(e) {
+  return e ? e === "/" ? "/" : e.replace(/\/+$/, "") : "";
+}
+function f(e, i) {
+  const t = d(e);
+  for (const n of i) {
+    if (n.children && n.children.length > 0) {
+      const u = f(e, n.children);
+      if (u) return u;
+    }
+    if (n.id === "Home" && t === "/")
+      return n;
+    const r = d(n.path);
+    if (r && r === t && !["root", "blank", "auth"].includes(n.id || ""))
+      return n;
+  }
+  return null;
+}
+function s(e) {
+  const i = /* @__PURE__ */ new Map(), t = (n) => {
+    n.forEach((r) => {
+      r.id && i.set(r.id, r), r.children && r.children.length > 0 && t(r.children);
+    });
+  };
+  return t(e), i;
+}
+function o(e, i) {
+  return i.get(e) || null;
+}
+function a(e, i) {
+  var r;
+  const t = [e];
+  let n = e;
+  for (; n.parentId && n.parentId !== "/"; ) {
+    const u = o(n.parentId, i);
+    if (u)
+      ((r = n.handle) == null ? void 0 : r.isIndependentMenu) === !0 || t.unshift(u), n = u;
+    else
+      break;
+  }
+  return t;
+}
+function c(e, i, t = []) {
+  for (const n of i) {
+    if (n.key === e)
+      return t;
+    if (n.children && n.children.length > 0) {
+      const r = c(e, n.children, [...t, n.key]);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+function l(e, i) {
+  for (const t of i) {
+    if (t.key === e) return t;
+    if (t.children) {
+      const n = l(e, t.children);
+      if (n) return n;
+    }
+  }
+  return null;
+}
+export {
+  s as buildRouteMap,
+  l as findMenuByKey,
+  c as findMenuParentKeys,
+  a as findParentRoutes,
+  f as findRouteByPath,
+  o as getRouteById,
+  d as normalizePath
+};

package/lib/fe-layouts/basics-layout/index.js

@@ -0,0 +1,98 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useSelector as N } from "@spacego/zustand";
+import { Layout as g, Spin as I } from "antd";
+import { useMemo as d, useEffect as O } from "react";
+import { useLocation as P, useNavigate as V, Outlet as j } from "react-router-dom";
+import { useLayoutConfigStore as Y } from "../../store/modules/layout-config.store.js";
+import "../../store/modules/theme.store.js";
+import { useGlobal as z } from "../context/context.js";
+import G from "./components/basics-layout/header.js";
+import H from "./components/basics-layout/sidebar.js";
+import q from "./components/basics-layout/tabs.js";
+import { findRouteByPath as b, findMenuParentKeys as F, buildRouteMap as J, findParentRoutes as Q, findMenuByKey as U } from "./components/utils/index.js";
+/* empty css                            */
+/* empty css           */
+const { Content: W } = g;
+function fe() {
+  const a = P(), m = V(), { token: C, menus: s, routes: n } = z(), { tabsAttribute: A, sidebarCollapsed: v, loadingConfig: _, ADD_TAB: x, REMOVE_TAB: L, SET_ACTIVE_TAB_KEY: E, SET_SIDEBAR_COLLAPSED: S } = Y(N(["tabsAttribute", "sidebarCollapsed", "loadingConfig", "ADD_TAB", "REMOVE_TAB", "SET_ACTIVE_TAB_KEY", "SET_SIDEBAR_COLLAPSED"])), { tabsList: h, tabsActiveKey: r } = A, l = d(() => {
+    var t;
+    if (!n || n.length === 0)
+      return r;
+    const e = b(a.pathname, n);
+    return e && (((t = e.handle) == null ? void 0 : t.activeRouteMenuId) || e.id) || r;
+  }, [a.pathname, n, r]), M = d(() => {
+    const e = [];
+    if (!s || s.length === 0 || !l)
+      return e;
+    const t = F(l, s);
+    return t && e.push(...t), e;
+  }, [l, s]), B = d(() => {
+    const e = [];
+    if (!n || n.length === 0)
+      return a.pathname === "/" && e.push({ title: "首页" }), e;
+    const t = n, o = J(t), c = b(a.pathname, t);
+    return c ? Q(c, o).forEach((u) => {
+      var y;
+      const T = ((y = u.handle) == null ? void 0 : y.title) || u.id || "";
+      T && e.push({ title: T });
+    }) : a.pathname === "/" && e.push({ title: "首页" }), e;
+  }, [a.pathname, n]), K = (e) => {
+    var o;
+    const t = U(e, s);
+    m(((o = t == null ? void 0 : t.routeNode) == null ? void 0 : o.path) ?? "/");
+  }, k = (e) => {
+    E(e);
+    const t = h.find((o) => o.key === e);
+    t && m(t.path);
+  }, R = (e) => {
+    const t = L(e);
+    m(t.path ?? "/");
+  }, p = d(() => !n || n.length === 0 ? null : (e) => b(e, n), [n]), D = () => {
+    var t;
+    const e = p == null ? void 0 : p(a.pathname);
+    if (e && e.id && !["root", "blank", "auth"].includes(e.id)) {
+      const o = e.id, c = ((t = e.handle) == null ? void 0 : t.title) || e.id;
+      h.find((u) => u.key === o) ? E(o) : x({
+        key: o,
+        label: c,
+        path: a.pathname
+      });
+    }
+  };
+  return O(() => {
+    C && D();
+  }, [a.pathname, C]), /* @__PURE__ */ f(g, { className: "basics-layout w-full h-screen overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ i(G, { breadcrumbItems: B }),
+    /* @__PURE__ */ f(g, { className: "flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ i(
+        H,
+        {
+          collapsed: v,
+          onCollapse: S,
+          menus: s,
+          activeKey: l,
+          openKeys: M,
+          onMenuClick: K
+        }
+      ),
+      /* @__PURE__ */ f(W, { className: "flex flex-col flex-1 overflow-hidden bg-[#eff1f4] dark:bg-[#141619]", children: [
+        /* @__PURE__ */ i(
+          q,
+          {
+            tabs: h,
+            activeKey: r,
+            onChange: k,
+            onClose: R
+          }
+        ),
+        /* @__PURE__ */ f("div", { className: "flex-1 overflow-auto p-3 custom-scrollbar relative", children: [
+          /* @__PURE__ */ i(j, {}),
+          _.show && /* @__PURE__ */ i("div", { className: "absolute inset-0 z-9999 flex items-center justify-center bg-white/80 dark:bg-[#1a1c1f]/80", children: /* @__PURE__ */ i(I, { spinning: !0 }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  fe as default
+};

package/lib/fe-layouts/blank-layout/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Outlet as o } from "react-router-dom";
+function a() {
+  return /* @__PURE__ */ t(o, {});
+}
+export {
+  a as default
+};

package/lib/fe-layouts/context/context.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t({}), l = () => o(e);
+export {
+  e as GlobalContext,
+  l as useGlobal
+};

package/lib/fe-layouts/context/global-context.provider.js

@@ -0,0 +1,53 @@
+import { jsx as w } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { GlobalContext as z } from "./context.js";
+function K(e) {
+  const [n, r] = t(e.appName), [s, o] = t(e.logo), [c, i] = t(e.noticeRender), [a, d] = t(e.description), [f, u] = t(e.descriptionDetail), [b, m] = t(e.copyright), [l, R] = t(e.userMenuItems), [h, A] = t(e.userInfo), [B, g] = t(e.sidebarBefore), [I, D] = t(e.sidebarAfter), [x, M] = t(e.tabsBefore), [N, S] = t(e.tabsAfter), [k, v] = t(e.headerActionsRender), [y, C] = t(e.searchRender), [T, G] = t(e.breadcrumbBeforeRender), [P, U] = t(e.token), [j, H] = t(e.menus), [L, q] = t(e.routes);
+  return /* @__PURE__ */ w(
+    z.Provider,
+    {
+      value: {
+        appName: n,
+        logo: s,
+        noticeRender: c,
+        description: a,
+        descriptionDetail: f,
+        copyright: b,
+        userMenuItems: l,
+        userInfo: h,
+        sidebarBefore: B,
+        sidebarAfter: I,
+        tabsBefore: x,
+        tabsAfter: N,
+        headerActionsRender: k,
+        searchRender: y,
+        breadcrumbBeforeRender: T,
+        token: P,
+        menus: j,
+        routes: L,
+        setAppName: r,
+        setLogo: o,
+        setNoticeRender: i,
+        setDescription: d,
+        setDescriptionDetail: u,
+        setCopyright: m,
+        setUserMenuItems: R,
+        setUserInfo: A,
+        setSidebarBefore: g,
+        setSidebarAfter: D,
+        setTabsBefore: M,
+        setTabsAfter: S,
+        setHeaderActionsRender: v,
+        setSearchRender: C,
+        setBreadcrumbBeforeRender: G,
+        setToken: U,
+        setMenus: H,
+        setRoutes: q
+      },
+      children: e.children
+    }
+  );
+}
+export {
+  K as default
+};

package/lib/fe-layouts/layout.js

@@ -0,0 +1,49 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useSelector as n } from "@spacego/zustand";
+import { theme as i, ConfigProvider as h, Spin as c } from "antd";
+import { useMemo as u } from "react";
+import "@ant-design/icons";
+import { getRealTheme as g } from "../utils/theme.js";
+import { useLayoutConfigStore as d } from "../store/modules/layout-config.store.js";
+import { useThemeStore as C } from "../store/modules/theme.store.js";
+import a from "../config/theme.js";
+import "react-router-dom";
+import y from "./auth-layout/index.js";
+import k from "./basics-layout/index.js";
+import L from "./blank-layout/index.js";
+import "./context/context.js";
+import M from "./context/global-context.provider.js";
+function q(p) {
+  const { layoutType: e } = p, { loadingConfig: s } = d(n(["loadingConfig"])), { theme: t, themeColor: r } = C(n(["theme", "themeColor"])), l = u(() => {
+    const f = g(t);
+    return {
+      cssVar: {
+        prefix: "ant"
+      },
+      // 启用 CSS 变量模式，生成 --ant-color-primary 等变量
+      algorithm: f === "dark" ? i.darkAlgorithm : i.defaultAlgorithm,
+      token: {
+        colorPrimary: r,
+        ...a.token
+      },
+      components: {
+        ...a.components
+      }
+    };
+  }, [t, r]), m = (/* @__PURE__ */ new Map([
+    ["blank", L],
+    ["basic", k],
+    ["auth", y]
+  ])).get(e);
+  return /* @__PURE__ */ o(h, { theme: l, children: /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(
+    c,
+    {
+      spinning: s.show && e !== "basic",
+      wrapperClassName: "spin-wrapper-full",
+      children: m && /* @__PURE__ */ o(m, {}, e)
+    }
+  ) }) });
+}
+export {
+  q as default
+};