@mxmweb/zui-layouts 1.1.2 → 1.2.2

package/index.js

@@ -1,9 +1,9 @@
-import { jsx as n, jsxs as k, Fragment as ie } from "react/jsx-runtime";
-import * as u from "react";
-import x, { forwardRef as U, createElement as V } from "react";
-import s from "styled-components";
-import { useTheme as E, deepMergeTheme as O, defaultTheme as L } from "@mxmweb/zui-theme";
-import { GoogleNavbar as re, CustomDock as ae } from "@mxmweb/zui-components";
+import { jsx as e, jsxs as f, Fragment as Be } from "react/jsx-runtime";
+import * as A from "react";
+import x, { forwardRef as ve, createElement as ge } from "react";
+import l from "styled-components";
+import { useTheme as fe, deepMergeTheme as K, defaultTheme as N, ThemeProvider as De } from "@mxmweb/zui-theme";
+import { GoogleNavbar as Se, CustomDock as Ie } from "@mxmweb/zui-components";
 /**
  * React Router v6.30.1
  *
@@ -14,33 +14,33 @@ import { GoogleNavbar as re, CustomDock as ae } from "@mxmweb/zui-components";
  *
  * @license MIT
  */
-const ce = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (ce.displayName = "DataRouter");
-const se = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (se.displayName = "DataRouterState");
-const de = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (de.displayName = "Await");
-const he = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (he.displayName = "Navigation");
-const fe = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (fe.displayName = "Location");
-const ee = /* @__PURE__ */ u.createContext({
+const Te = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (Te.displayName = "DataRouter");
+const Ae = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (Ae.displayName = "DataRouterState");
+const Ne = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (Ne.displayName = "Await");
+const Re = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (Re.displayName = "Navigation");
+const ze = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (ze.displayName = "Location");
+const me = /* @__PURE__ */ A.createContext({
   outlet: null,
   matches: [],
   isDataRoute: !1
 });
-process.env.NODE_ENV !== "production" && (ee.displayName = "Route");
-const pe = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (pe.displayName = "RouteError");
-const ue = /* @__PURE__ */ u.createContext(null);
-function ge(t) {
-  let l = u.useContext(ee).outlet;
-  return l && /* @__PURE__ */ u.createElement(ue.Provider, {
+process.env.NODE_ENV !== "production" && (me.displayName = "Route");
+const Me = /* @__PURE__ */ A.createContext(null);
+process.env.NODE_ENV !== "production" && (Me.displayName = "RouteError");
+const Fe = /* @__PURE__ */ A.createContext(null);
+function We(t) {
+  let s = A.useContext(me).outlet;
+  return s && /* @__PURE__ */ A.createElement(Fe.Provider, {
     value: t
-  }, l);
+  }, s);
 }
-function xe(t) {
-  return ge(t.context);
+function Oe(t) {
+  return We(t.context);
 }
 new Promise(() => {
 });
@@ -50,14 +50,14 @@ new Promise(() => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ke = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), te = (...t) => t.filter((l, c, d) => !!l && l.trim() !== "" && d.indexOf(l) === c).join(" ").trim();
+const Le = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ce = (...t) => t.filter((s, w, b) => !!s && s.trim() !== "" && b.indexOf(s) === w).join(" ").trim();
 /**
  * @license lucide-react v0.456.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var Ce = {
+var je = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -74,31 +74,31 @@ var Ce = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const we = U(
+const Ve = ve(
   ({
     color: t = "currentColor",
-    size: l = 24,
-    strokeWidth: c = 2,
-    absoluteStrokeWidth: d,
-    className: e = "",
-    children: p,
-    iconNode: N,
-    ...$
-  }, A) => V(
+    size: s = 24,
+    strokeWidth: w = 2,
+    absoluteStrokeWidth: b,
+    className: i = "",
+    children: C,
+    iconNode: M,
+    ...R
+  }, j) => ge(
     "svg",
     {
-      ref: A,
-      ...Ce,
-      width: l,
-      height: l,
+      ref: j,
+      ...je,
+      width: s,
+      height: s,
       stroke: t,
-      strokeWidth: d ? Number(c) * 24 / Number(l) : c,
-      className: te("lucide", e),
-      ...$
+      strokeWidth: b ? Number(w) * 24 / Number(s) : w,
+      className: Ce("lucide", i),
+      ...R
     },
     [
-      ...N.map(([a, i]) => V(a, i)),
-      ...Array.isArray(p) ? p : [p]
+      ...M.map(([u, c]) => ge(u, c)),
+      ...Array.isArray(C) ? C : [C]
     ]
   )
 );
@@ -108,16 +108,16 @@ const we = U(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oe = (t, l) => {
-  const c = U(
-    ({ className: d, ...e }, p) => V(we, {
-      ref: p,
-      iconNode: l,
-      className: te(`lucide-${ke(t)}`, d),
-      ...e
+const $e = (t, s) => {
+  const w = ve(
+    ({ className: b, ...i }, C) => ge(Ve, {
+      ref: C,
+      iconNode: s,
+      className: Ce(`lucide-${Le(t)}`, b),
+      ...i
     })
   );
-  return c.displayName = `${t}`, c;
+  return w.displayName = `${t}`, w;
 };
 /**
  * @license lucide-react v0.456.0 - ISC
@@ -125,7 +125,7 @@ const oe = (t, l) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ye = oe("ArrowLeft", [
+const Pe = $e("ArrowLeft", [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ]);
@@ -135,9 +135,9 @@ const ye = oe("ArrowLeft", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const I = oe("ChevronRight", [
+const le = $e("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
-]), me = s.div`
+]), He = l.div`
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -147,7 +147,7 @@ const I = oe("ChevronRight", [
   width: 100%;
   max-width: 98%;
   position: relative;
-`, ve = s.div`
+`, _e = l.div`
   display: flex;
   height: 38px;
   z-index: 10;
@@ -158,7 +158,7 @@ const I = oe("ChevronRight", [
   justify-content: flex-start;
   width: 100%;
   min-width: 0; /* 确保 flex 子元素可以收缩 */
-`, be = s.button`
+`, Ge = l.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -184,7 +184,7 @@ const I = oe("ChevronRight", [
   &:active svg {
     transform: translateY(0);
   }
-`, De = s.div`
+`, Ke = l.div`
   line-height: 1.4;
   cursor: pointer;
   transition: color 0.2s ease;
@@ -197,14 +197,14 @@ const I = oe("ChevronRight", [
   &:hover {
     color: #007bff;
   }
-`, Ne = s.div`
+`, Ye = l.div`
   line-height: 1.4;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
   min-width: 0;
-`, Q = s.div`
+`, ye = l.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -212,7 +212,7 @@ const I = oe("ChevronRight", [
   max-width: 50%;
   min-width: 0;
   overflow: hidden;
-`, S = s.div`
+`, ae = l.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -229,12 +229,12 @@ const I = oe("ChevronRight", [
   &:hover {
     color: ${(t) => t.$isLast ? "#007bff" : "inherit"};
   }
-`, z = s.div`
+`, se = l.div`
   display: flex;
   align-items: center;
   color: #6c757d;
   margin: 0 2px;
-`, $e = s.div`
+`, Ze = l.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -242,210 +242,210 @@ const I = oe("ChevronRight", [
   min-height: 650px;
   overflow: auto;
 `;
-s.div`
+l.div`
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
 `;
-const Fe = ({
+const mt = ({
   children: t,
-  goBack: l,
-  title: c,
-  description: d,
-  breadcrumbs: e,
-  dockItems: p,
-  dockActiveMode: N = "single",
-  defaultDockActiveId: $,
-  defaultDockActiveIds: A,
-  styles: a,
-  eventsEmit: i
+  goBack: s,
+  title: w,
+  description: b,
+  breadcrumbs: i,
+  dockItems: C,
+  dockActiveMode: M = "single",
+  defaultDockActiveId: R,
+  defaultDockActiveIds: j,
+  styles: u,
+  eventsEmit: c
 }) => {
-  var H, G, P, Y, q, K, X, Z;
-  const b = E(), w = O(
+  var V, o, P, te, X, de, oe, O;
+  const F = fe(), D = K(
     // 基础：默认主题 + useTheme的配置
-    O({ theme: L, mode: "light" }, b),
+    K({ theme: N, mode: "light" }, F),
     // 最高层：用户手动传入的styles
-    a
-  ), o = (w == null ? void 0 : w.theme) || L, W = x.useRef(null), T = () => {
-    i != null && i.onGoBack ? i.onGoBack() : l && l();
-  }, R = () => {
-    i != null && i.onTitleClick && i.onTitleClick();
-  }, y = (h, D) => {
-    i != null && i.onBreadcrumbClick ? i.onBreadcrumbClick(h, D) : h.onClick && h.onClick();
-  }, g = (h, D) => {
-    i != null && i.onDockItemClick && i.onDockItemClick(h, D);
-  }, C = () => {
-    if (!e || e.length === 0) return null;
-    const h = x.useRef(null), [D, M] = x.useState({ start: 0, end: e.length, showEllipsis: !1 }), j = x.useCallback(() => {
-      if (!h.current || e.length <= 3) {
-        M({ start: 0, end: e.length, showEllipsis: !1 });
+    u
+  ), r = (D == null ? void 0 : D.theme) || N, Y = x.useRef(null), S = () => {
+    c != null && c.onGoBack ? c.onGoBack() : s && s();
+  }, W = () => {
+    c != null && c.onTitleClick && c.onTitleClick();
+  }, I = (k, H) => {
+    c != null && c.onBreadcrumbClick ? c.onBreadcrumbClick(k, H) : k.onClick && k.onClick();
+  }, B = (k, H) => {
+    c != null && c.onDockItemClick && c.onDockItemClick(k, H);
+  }, z = () => {
+    if (!i || i.length === 0) return null;
+    const k = x.useRef(null), [H, Z] = x.useState({ start: 0, end: i.length, showEllipsis: !1 }), _ = x.useCallback(() => {
+      if (!k.current || i.length <= 3) {
+        Z({ start: 0, end: i.length, showEllipsis: !1 });
         return;
       }
-      const f = h.current.offsetWidth * 0.5;
-      let B = Math.floor((f - 30) / (120 + 20));
-      if (B < 2 && (B = 2), B >= e.length) {
-        M({ start: 0, end: e.length, showEllipsis: !1 });
+      const v = k.current.offsetWidth * 0.5;
+      let G = Math.floor((v - 30) / (120 + 20));
+      if (G < 2 && (G = 2), G >= i.length) {
+        Z({ start: 0, end: i.length, showEllipsis: !1 });
         return;
       }
-      const le = 0, J = Math.min(B - 1, e.length);
-      M({
-        start: le,
-        end: J,
-        showEllipsis: J < e.length - 1
+      const ie = 0, Q = Math.min(G - 1, i.length);
+      Z({
+        start: ie,
+        end: Q,
+        showEllipsis: Q < i.length - 1
       });
-    }, [e.length]);
+    }, [i.length]);
     if (x.useEffect(() => {
-      j();
-      const r = new ResizeObserver(() => {
-        j();
+      _();
+      const g = new ResizeObserver(() => {
+        _();
       });
-      return h.current && r.observe(h.current), () => {
-        r.disconnect();
+      return k.current && g.observe(k.current), () => {
+        g.disconnect();
       };
-    }, [j]), e.length <= 3)
-      return /* @__PURE__ */ n(Q, { children: e.map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
-        /* @__PURE__ */ n(
-          S,
+    }, [_]), i.length <= 3)
+      return /* @__PURE__ */ e(ye, { children: i.map((g, v) => /* @__PURE__ */ f(x.Fragment, { children: [
+        /* @__PURE__ */ e(
+          ae,
           {
-            $isLast: f === e.length - 1,
-            $isClickable: !!(f < e.length - 1 || r.onClick),
-            onClick: () => y(r, f),
+            $isLast: v === i.length - 1,
+            $isClickable: !!(v < i.length - 1 || g.onClick),
+            onClick: () => I(g, v),
             style: {
-              color: f === e.length - 1 ? o.colors.text : o.colors.textSecondary || o.colors.disabledText
+              color: v === i.length - 1 ? r.colors.text : r.colors.textSecondary || r.colors.disabledText
             },
-            title: r.label,
-            children: r.label
+            title: g.label,
+            children: g.label
           }
         ),
-        f < e.length - 1 && /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) })
-      ] }, r.id)) });
-    const { start: m, end: v, showEllipsis: F } = D;
-    return /* @__PURE__ */ k(Q, { children: [
-      e.slice(m, v).map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
-        /* @__PURE__ */ n(
-          S,
+        v < i.length - 1 && /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(le, { size: 14 }) })
+      ] }, g.id)) });
+    const { start: T, end: L, showEllipsis: J } = H;
+    return /* @__PURE__ */ f(ye, { children: [
+      i.slice(T, L).map((g, v) => /* @__PURE__ */ f(x.Fragment, { children: [
+        /* @__PURE__ */ e(
+          ae,
           {
-            $isLast: f === v - m - 1 && !F,
-            $isClickable: !!(f < v - m - 1 || r.onClick),
-            onClick: () => y(r, m + f),
+            $isLast: v === L - T - 1 && !J,
+            $isClickable: !!(v < L - T - 1 || g.onClick),
+            onClick: () => I(g, T + v),
             style: {
-              color: f === v - m - 1 && !F ? o.colors.text : o.colors.textSecondary || o.colors.disabledText
+              color: v === L - T - 1 && !J ? r.colors.text : r.colors.textSecondary || r.colors.disabledText
             },
-            title: r.label,
-            children: r.label
+            title: g.label,
+            children: g.label
           }
         ),
-        f < v - m - 1 && /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) })
-      ] }, r.id)),
-      F && /* @__PURE__ */ k(ie, { children: [
-        /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) }),
-        /* @__PURE__ */ n(
-          S,
+        v < L - T - 1 && /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(le, { size: 14 }) })
+      ] }, g.id)),
+      J && /* @__PURE__ */ f(Be, { children: [
+        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(le, { size: 14 }) }),
+        /* @__PURE__ */ e(
+          ae,
           {
             $isLast: !1,
             $isClickable: !1,
             style: {
-              color: o.colors.textSecondary || o.colors.disabledText,
+              color: r.colors.textSecondary || r.colors.disabledText,
               cursor: "default",
               maxWidth: "auto"
             },
-            title: `${e.slice(v, -1).map((r) => r.label).join(" > ")}`,
+            title: `${i.slice(L, -1).map((g) => g.label).join(" > ")}`,
             children: "..."
           }
         ),
-        /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) }),
-        /* @__PURE__ */ n(
-          S,
+        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(le, { size: 14 }) }),
+        /* @__PURE__ */ e(
+          ae,
           {
             $isLast: !0,
-            $isClickable: !!e[e.length - 1].onClick,
-            onClick: () => y(e[e.length - 1], e.length - 1),
+            $isClickable: !!i[i.length - 1].onClick,
+            onClick: () => I(i[i.length - 1], i.length - 1),
             style: {
-              color: o.colors.text
+              color: r.colors.text
             },
-            title: e[e.length - 1].label,
-            children: e[e.length - 1].label
+            title: i[i.length - 1].label,
+            children: i[i.length - 1].label
           }
         )
       ] })
     ] });
-  }, [_, ne] = x.useState(!0);
-  return /* @__PURE__ */ n(
-    me,
+  }, [ee, ce] = x.useState(!0);
+  return /* @__PURE__ */ e(
+    He,
     {
       style: {
-        background: o.colors.appBackground,
-        color: o.colors.text,
-        fontFamily: ((G = (H = o.fonts) == null ? void 0 : H.body) == null ? void 0 : G.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+        background: r.colors.appBackground,
+        color: r.colors.text,
+        fontFamily: ((o = (V = r.fonts) == null ? void 0 : V.body) == null ? void 0 : o.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
       },
-      children: /* @__PURE__ */ k("div", { style: { height: "100%", display: "flex", width: "100%", gap: 12 }, children: [
-        p && p.length > 0 && /* @__PURE__ */ n("div", { style: { flex: `0 0 ${_ ? 72 : 28}px`, transition: "flex-basis .2s ease" }, children: /* @__PURE__ */ n(
-          re,
+      children: /* @__PURE__ */ f("div", { style: { height: "100%", display: "flex", width: "100%", gap: 12 }, children: [
+        C && C.length > 0 && /* @__PURE__ */ e("div", { style: { flex: `0 0 ${ee ? 72 : 28}px`, transition: "flex-basis .2s ease" }, children: /* @__PURE__ */ e(
+          Se,
           {
-            items: p,
-            open: _,
-            onOpenChange: ne,
-            onItemClick: (h) => g({ id: String(h.key), label: h.name }, 0),
+            items: C,
+            open: ee,
+            onOpenChange: ce,
+            onItemClick: (k) => B({ id: String(k.key), label: k.name }, 0),
             defaultOpen: !0
           }
         ) }),
-        /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
-          (c || d || l || e) && /* @__PURE__ */ k(ve, { ref: W, children: [
-            l && /* @__PURE__ */ n(
-              be,
+        /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
+          (w || b || s || i) && /* @__PURE__ */ f(_e, { ref: Y, children: [
+            s && /* @__PURE__ */ e(
+              Ge,
               {
-                onClick: T,
-                style: { color: o.colors.primary, borderRadius: o.space.radius || "6px" },
+                onClick: S,
+                style: { color: r.colors.primary, borderRadius: r.space.radius || "6px" },
                 title: "\u8FD4\u56DE",
-                children: /* @__PURE__ */ n(ye, { size: 18 })
+                children: /* @__PURE__ */ e(Pe, { size: 18 })
               }
             ),
-            C(),
-            c && /* @__PURE__ */ n(
-              De,
+            z(),
+            w && /* @__PURE__ */ e(
+              Ke,
               {
-                onClick: R,
+                onClick: W,
                 style: {
-                  color: o.colors.text,
-                  fontSize: ((Y = (P = o.fonts) == null ? void 0 : P.heading) == null ? void 0 : Y.size) || "16px",
-                  fontWeight: ((K = (q = o.fonts) == null ? void 0 : q.heading) == null ? void 0 : K.weight) || "600"
+                  color: r.colors.text,
+                  fontSize: ((te = (P = r.fonts) == null ? void 0 : P.heading) == null ? void 0 : te.size) || "16px",
+                  fontWeight: ((de = (X = r.fonts) == null ? void 0 : X.heading) == null ? void 0 : de.weight) || "600"
                 },
-                title: c,
-                children: c
+                title: w,
+                children: w
               }
             ),
-            d && /* @__PURE__ */ n(
-              Ne,
+            b && /* @__PURE__ */ e(
+              Ye,
               {
                 style: {
-                  color: o.colors.textSecondary || o.colors.disabledText,
+                  color: r.colors.textSecondary || r.colors.disabledText,
                   opacity: 0.7,
-                  fontSize: ((Z = (X = o.fonts) == null ? void 0 : X.body) == null ? void 0 : Z.size) || "12px"
+                  fontSize: ((O = (oe = r.fonts) == null ? void 0 : oe.body) == null ? void 0 : O.size) || "12px"
                 },
-                title: d,
-                children: d
+                title: b,
+                children: b
               }
             )
           ] }),
-          /* @__PURE__ */ n(
-            $e,
+          /* @__PURE__ */ e(
+            Ze,
             {
               style: {
-                background: o.colors.dashboardBackground || "transparent",
-                border: `1px solid ${o.colors.border}` || void 0,
-                borderRadius: o.space.radius || void 0,
-                boxShadow: o.colors.shadow || void 0
+                background: r.colors.dashboardBackground || "transparent",
+                border: `1px solid ${r.colors.border}` || void 0,
+                borderRadius: r.space.radius || void 0,
+                boxShadow: r.colors.shadow || void 0
               },
-              children: t || /* @__PURE__ */ n(xe, {})
+              children: t || /* @__PURE__ */ e(Oe, {})
             }
           )
         ] })
       ] })
     }
   );
-}, Ae = s.div.withConfig({
+}, qe = l.div.withConfig({
   shouldForwardProp: (t) => !["backgroundImage", "backgroundColor"].includes(t)
 })`
   position: fixed;
@@ -458,7 +458,7 @@ const Fe = ({
   flex-direction: column;
   overflow: hidden;
   z-index: 1;
-`, Re = s.div`
+`, Ee = l.div`
   height: 48px;
   width: 100%;
   display: flex;
@@ -467,7 +467,7 @@ const Fe = ({
   background: transparent;
   z-index: 10;
   flex-shrink: 0;
-`, Be = s.div`
+`, Xe = l.div`
   flex: 1;
   width: 100%;
   overflow-y: auto;
@@ -494,7 +494,7 @@ const Fe = ({
   &::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.5);
   }
-`, Ie = s.div`
+`, Je = l.div`
   height: 80px;
   width: 100%;
   display: flex;
@@ -504,69 +504,555 @@ const Fe = ({
   background: transparent;
   z-index: 10;
   flex-shrink: 0;
-`, Ve = ({
+`, Ct = ({
   children: t,
-  backgroundImage: l,
-  backgroundColor: c,
-  header: d,
-  dockItems: e,
-  dockActiveMode: p = "single",
-  defaultDockActiveId: N,
-  defaultDockActiveIds: $,
-  styles: A,
-  eventsEmit: a
+  backgroundImage: s,
+  backgroundColor: w,
+  header: b,
+  dockItems: i,
+  dockActiveMode: C = "single",
+  defaultDockActiveId: M,
+  defaultDockActiveIds: R,
+  styles: j,
+  eventsEmit: u
 }) => {
-  var R, y;
-  const i = E(), b = O(
+  var W, I;
+  const c = fe(), F = K(
     // 基础：默认主题 + useTheme的配置
-    O({ theme: L, mode: "light" }, i),
+    K({ theme: N, mode: "light" }, c),
     // 最高层：用户手动传入的styles
-    A
-  ), w = (b == null ? void 0 : b.theme) || L, o = (g, C) => {
-    a != null && a.onDockItemClick ? a.onDockItemClick(g, C) : g.onClick && g.onClick();
-  }, W = (g, C) => {
-    a != null && a.onDockActiveChange && a.onDockActiveChange(g, C);
-  }, T = (g, C) => {
-    a != null && a.onDockActiveChangeMultiple && a.onDockActiveChangeMultiple(g, C);
+    j
+  ), D = (F == null ? void 0 : F.theme) || N, r = (B, z) => {
+    u != null && u.onDockItemClick ? u.onDockItemClick(B, z) : B.onClick && B.onClick();
+  }, Y = (B, z) => {
+    u != null && u.onDockActiveChange && u.onDockActiveChange(B, z);
+  }, S = (B, z) => {
+    u != null && u.onDockActiveChangeMultiple && u.onDockActiveChangeMultiple(B, z);
   };
-  return /* @__PURE__ */ k(
-    Ae,
+  return /* @__PURE__ */ f(
+    qe,
     {
-      backgroundImage: l,
-      backgroundColor: c,
+      backgroundImage: s,
+      backgroundColor: w,
       children: [
-        d && /* @__PURE__ */ n(Re, { children: d }),
-        /* @__PURE__ */ n(
-          Be,
+        b && /* @__PURE__ */ e(Ee, { children: b }),
+        /* @__PURE__ */ e(
+          Xe,
           {
             style: {
-              color: w.colors.text,
-              fontFamily: ((y = (R = w.fonts) == null ? void 0 : R.body) == null ? void 0 : y.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+              color: D.colors.text,
+              fontFamily: ((I = (W = D.fonts) == null ? void 0 : W.body) == null ? void 0 : I.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
             },
             children: t
           }
         ),
-        e && e.length > 0 && /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ n(
-          ae,
+        i && i.length > 0 && /* @__PURE__ */ e(Je, { children: /* @__PURE__ */ e(
+          Ie,
           {
-            items: e,
+            items: i,
             itemWidth: 48,
             itemHeight: 48,
             magnification: 1.5,
             itemGap: 8,
-            activeMode: p,
-            defaultActiveId: N,
-            defaultActiveIds: $,
-            onItemClick: o,
-            onActiveChange: W,
-            onActiveChangeMultiple: T
+            activeMode: C,
+            defaultActiveId: M,
+            defaultActiveIds: R,
+            onItemClick: r,
+            onActiveChange: Y,
+            onActiveChangeMultiple: S
           }
         ) })
       ]
     }
   );
+}, Qe = l.div`
+  --header-height: 56px;
+  --page-gutter: 16px;
+  --sidebar-width: 264px;
+  --toc-width: 268px;
+  --content-max: 960px;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh; /* 以视口高度为基准，便于内部独立滚动布局 */
+  position: relative;
+`, Ue = l.div`
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  width: 100%;
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  backdrop-filter: blur(8px);
+`, et = l.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+`, tt = l.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`, we = l.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid rgba(0,0,0,0.08);
+  cursor: pointer;
+  transition: background .15s ease, border-color .15s ease, transform .1s ease;
+
+  &:hover { background: rgba(0,0,0,0.04); }
+  &:active { transform: translateY(1px); }
+`, ot = l.div`
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
+  gap: 16px;
+  width: 100%;
+  padding: 12px 0;
+  box-sizing: border-box;
+  transition: grid-template-columns .25s ease;
+  height: calc(100vh - var(--header-height));
+  min-height: calc(100vh - var(--header-height));
+  overflow: hidden; /* 内部区域各自滚动 */
+
+  @media (max-width: 1280px) {
+    grid-template-columns: var(--sidebar-width) 1fr 0px;
+  }
+
+  @media (max-width: 960px) {
+    grid-template-columns: 0px 1fr 0px;
+    gap: 12px;
+    padding: 12px 12px 20px 12px;
+  }
+`, nt = l.aside`
+  position: relative;
+`, it = l.div`
+  height: 100%;
+  overflow: hidden;
+  padding-right: 8px;
+  border-right: 1px solid rgba(0,0,0,0.06);
+  transition: opacity .2s ease, transform .2s ease;
+  opacity: ${(t) => t.$collapsed ? 0 : 1};
+  transform: translateX(${(t) => t.$collapsed ? "-6px" : "0px"});
+  pointer-events: ${(t) => t.$collapsed ? "none" : "auto"};
+`, rt = l.button`
+  position: absolute;
+  top: 6px;
+  right: -10px;
+  width: 10px;
+  height: 72px;
+  border: none;
+  background: rgba(0,0,0,0.06);
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background .15s ease;
+  &:hover { background: rgba(0,0,0,0.12); }
+`, lt = l.div`
+  height: 100%;
+  overflow: auto;
+  padding-right: 8px;
+`, at = l.main`
+  position: relative;
+  min-width: 0;
+  height: 100%;
+  overflow: auto; /* 文档渲染区独立滚动 */
+`, st = l.div`
+  width: 100%;
+  max-width: var(--content-max);
+  margin: 0 auto;
+  background-clip: padding-box;
+  border-radius: 8px;
+  padding: 0px 12px;
+`, ct = l.div`
+  height: 100%;
+  transition: opacity .5s ease;
+  opacity: ${(t) => t.$opacity};
+`, dt = l.aside`
+  position: relative;
+  z-index: 1;
+`, ht = l.div`
+  /* 跟随整页滚动，不再单独滚动 */
+  position: static;
+  overflow: visible;
+  padding-left: 8px;
+  border-left: 1px solid rgba(0,0,0,0.06);
+  background: transparent;
+  z-index: 1;
+`, pt = l.div`
+  transition: opacity .2s ease, transform .2s ease;
+  opacity: ${(t) => t.$collapsed ? 0 : 1};
+  transform: translateX(${(t) => t.$collapsed ? "6px" : "0px"});
+  pointer-events: ${(t) => t.$collapsed ? "none" : "auto"};
+`;
+l.button`
+  position: absolute;
+  top: 6px;
+  left: -10px;
+  width: 10px;
+  height: 72px;
+  border: none;
+  background: rgba(0,0,0,0.06);
+  border-radius: 8px 0 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background .15s ease;
+  &:hover { background: rgba(0,0,0,0.12); }
+`;
+const ue = l.div`
+  font-size: 12px;
+  opacity: .7;
+  padding: 8px 8px;
+`, E = l.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 6px;
+  color: inherit;
+  transition: background .15s ease, color .15s ease;
+  font-size: 13px;
+  white-space: nowrap;
+
+  &:hover {
+    background: rgba(0,0,0,0.04);
+  }
+
+  ${(t) => t.$active ? "background: rgba(0,0,0,0.08); font-weight: 600;" : ""}
+`, ut = l.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+`, gt = l.div`
+  width: 1px;
+  height: 16px;
+  background: currentColor;
+  opacity: .2;
+`, ft = {
+  theme: {
+    ...N,
+    colors: {
+      ...N.colors,
+      appBackground: "#ffffff",
+      panelBackground: "#ffffff",
+      dashboardBackground: "#ffffff",
+      text: "#24292f",
+      textSecondary: "#6b7280",
+      border: "#e5e7eb",
+      shadow: "0 1px 2px rgba(0,0,0,0.06)"
+    }
+  }
+}, xt = {
+  theme: {
+    ...N,
+    colors: {
+      ...N.colors,
+      appBackground: "#0f172a",
+      panelBackground: "#111827",
+      dashboardBackground: "#0b1220",
+      text: "#e5e7eb",
+      textSecondary: "#9ca3af",
+      border: "#1f2937",
+      shadow: "none"
+    }
+  },
+  mode: "dark"
+}, $t = (t) => {
+  var G, ie, Q, xe;
+  const {
+    children: s,
+    headerLogo: w,
+    contentKey: b,
+    modules: i,
+    activeModuleKey: C,
+    onModuleChange: M,
+    languages: R,
+    activeLanguageKey: j,
+    onLanguageChange: u,
+    themes: c,
+    activeThemeKey: F,
+    onThemeChange: D,
+    sidebarItems: r,
+    activeSidebarId: Y,
+    onSidebarItemClick: S,
+    activeTocId: W,
+    onTocItemClick: I,
+    collapsibleSidebar: B = !0,
+    styles: z
+  } = t, ee = fe(), ce = t.activeThemeKey === "dark" ? xt : ft, V = K(
+    K(
+      K({ theme: N, mode: "light" }, ee),
+      ce
+    ),
+    z
+  ), o = (V == null ? void 0 : V.theme) || N, [P, te] = x.useState(!1), [X, de] = x.useState(!1), [oe, O] = x.useState(!1), k = typeof W == "string", [H, Z] = x.useState(W), _ = x.useRef(null), [T, L] = x.useState(void 0), [J, g] = x.useState(s), [v, he] = x.useState(1);
+  x.useEffect(() => {
+    if (b === void 0) {
+      g(s);
+      return;
+    }
+    he(0);
+    const n = setTimeout(() => {
+      g(s), requestAnimationFrame(() => he(1));
+    }, 120);
+    return () => clearTimeout(n);
+  }, [b, s]), x.useMemo(() => {
+    var n, d, h, $, y, a, m, p, U, q, re, be, ke;
+    return {
+      primaryColor: (n = o == null ? void 0 : o.colors) == null ? void 0 : n.primary,
+      secondaryColor: (d = o == null ? void 0 : o.colors) == null ? void 0 : d.secondary,
+      backgroundColor: (h = o == null ? void 0 : o.colors) == null ? void 0 : h.appBackground,
+      textColor: ($ = o == null ? void 0 : o.colors) == null ? void 0 : $.text,
+      borderColor: (y = o == null ? void 0 : o.colors) == null ? void 0 : y.border,
+      disabledBackground: (a = o == null ? void 0 : o.colors) == null ? void 0 : a.disabledBackground,
+      borderRadius: (m = o == null ? void 0 : o.space) == null ? void 0 : m.radius,
+      padding: (p = o == null ? void 0 : o.space) == null ? void 0 : p.padding,
+      margin: (U = o == null ? void 0 : o.space) == null ? void 0 : U.margin,
+      baseFontSize: (re = (q = o == null ? void 0 : o.fonts) == null ? void 0 : q.body) != null && re.size ? parseInt((ke = (be = o == null ? void 0 : o.fonts) == null ? void 0 : be.body) == null ? void 0 : ke.size, 10) : void 0
+    };
+  }, [o]), x.useEffect(() => {
+    if (!t.tocItems && _.current) {
+      const n = setTimeout(() => {
+        const d = _.current;
+        if (!d) return;
+        const $ = Array.from(d.querySelectorAll("h1, h2, h3")).map((y) => {
+          var p;
+          const a = y.id || ((p = y.textContent) == null ? void 0 : p.trim().replace(/\s+/g, "-").toLowerCase()) || "";
+          y.id || (y.id = a);
+          const m = y.tagName === "H1" ? 1 : y.tagName === "H2" ? 2 : 3;
+          return { id: a, label: y.textContent || "", level: m };
+        });
+        L($);
+      }, 100);
+      return () => clearTimeout(n);
+    }
+  }, [s, t.tocItems, b]), x.useEffect(() => {
+    if (k) return;
+    const d = ((t.tocItems ?? T) || []).map((a) => a.id).filter(Boolean);
+    if (d.length === 0) return;
+    Z(void 0);
+    const h = { root: null, rootMargin: "0px 0px -70% 0px", threshold: 0 }, $ = (a) => {
+      var p, U;
+      const m = a.filter((q) => q.isIntersecting).sort((q, re) => q.boundingClientRect.top - re.boundingClientRect.top);
+      (U = (p = m[0]) == null ? void 0 : p.target) != null && U.id && Z(m[0].target.id);
+    }, y = new IntersectionObserver($, h);
+    return d.forEach((a) => {
+      const m = document.getElementById(a);
+      m && y.observe(m);
+    }), () => y.disconnect();
+  }, [T, k, t.tocItems, b]);
+  const pe = (n, d) => {
+    if (!n || n.length === 0) return;
+    const h = Math.max(0, n.findIndex((y) => y.key === d)), $ = n[(h + 1) % n.length];
+    return $ == null ? void 0 : $.key;
+  }, ne = (n) => {
+    const d = document.getElementById(n);
+    d && d.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+  };
+  return /* @__PURE__ */ e(De, { theme: o, mode: V.mode, children: /* @__PURE__ */ f(
+    Qe,
+    {
+      style: {
+        background: o.colors.appBackground,
+        color: o.colors.text,
+        fontFamily: ((ie = (G = o.fonts) == null ? void 0 : G.body) == null ? void 0 : ie.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ f(
+          Ue,
+          {
+            style: {
+              background: o.colors.panelBackground || o.colors.dashboardBackground || "rgba(255,255,255,0.6)",
+              color: o.colors.text
+            },
+            children: [
+              /* @__PURE__ */ f(et, { children: [
+                w,
+                i && i.length > 0 && /* @__PURE__ */ e(ut, { children: i.map((n) => /* @__PURE__ */ e(
+                  E,
+                  {
+                    $active: n.key === C,
+                    onClick: () => M == null ? void 0 : M(n.key),
+                    title: n.label,
+                    children: n.label
+                  },
+                  n.key
+                )) })
+              ] }),
+              /* @__PURE__ */ f(tt, { children: [
+                /* @__PURE__ */ e("div", { className: "hide-on-desktop", style: { display: "none" } }),
+                R && R.length > 0 && /* @__PURE__ */ e(
+                  we,
+                  {
+                    onClick: () => {
+                      const n = pe(R, j);
+                      n && (u == null || u(n));
+                    },
+                    title: ((Q = R.find((n) => n.key === j)) == null ? void 0 : Q.label) || "Language",
+                    "aria-label": "language",
+                    style: { color: o.colors.text },
+                    children: /* @__PURE__ */ f("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ e("path", { d: "M12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9-9 4.03-9 9 4.03 9 9 9Z", stroke: "currentColor", strokeWidth: "1.6" }),
+                      /* @__PURE__ */ e("path", { d: "M3 12h18M12 3c-2.5 2.5-3.75 5.167-3.75 9S9.5 19.5 12 21c2.5-1.5 3.75-4.167 3.75-8S14.5 5.5 12 3Z", stroke: "currentColor", strokeWidth: "1.6" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ e(gt, {}),
+                c && c.length > 0 && /* @__PURE__ */ e(
+                  we,
+                  {
+                    onClick: () => {
+                      const n = pe(c, F);
+                      n && (D == null || D(n));
+                    },
+                    title: ((xe = c.find((n) => n.key === F)) == null ? void 0 : xe.label) || "Theme",
+                    "aria-label": "theme",
+                    style: { color: o.colors.text },
+                    children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z", stroke: "currentColor", strokeWidth: "1.6" }) })
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "mobile-only", style: { display: "none" }, children: /* @__PURE__ */ e(E, { onClick: () => O(!0), title: "\u6253\u5F00\u76EE\u5F55", children: "\u76EE\u5F55" }) })
+              ] })
+            ]
+          }
+        ),
+        (() => {
+          const d = (Array.isArray(r) ? r.length : 0) > 1, h = d ? P ? "10px" : "var(--sidebar-width)" : "0px", $ = X ? "10px" : "var(--toc-width)", y = d ? `${h} 1fr ${$}` : `1fr ${$}`;
+          return /* @__PURE__ */ f(ot, { style: { gridTemplateColumns: y }, children: [
+            d && /* @__PURE__ */ f(nt, { children: [
+              /* @__PURE__ */ e(it, { $collapsed: P, children: /* @__PURE__ */ e(lt, { children: r && r.length > 0 && /* @__PURE__ */ e("div", { children: Object.entries(
+                r.reduce((a, m) => {
+                  const p = m.group || "\u6587\u6863";
+                  return a[p] = a[p] || [], a[p].push(m), a;
+                }, {})
+              ).map(([a, m]) => /* @__PURE__ */ f("div", { children: [
+                /* @__PURE__ */ e(ue, { children: a }),
+                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, padding: "0 8px 8px 8px" }, children: m.map((p) => /* @__PURE__ */ e(
+                  E,
+                  {
+                    $active: p.id === Y,
+                    onClick: () => {
+                      p.href && (p.href.startsWith("#") ? ne(p.href.slice(1)) : window.location.href = p.href), S == null || S(p), O(!1);
+                    },
+                    title: p.label,
+                    children: p.label
+                  },
+                  p.id
+                )) })
+              ] }, a)) }) }) }),
+              B && d && /* @__PURE__ */ e(rt, { onClick: () => te((a) => !a), title: P ? "\u5C55\u5F00\u5DE6\u4FA7\u680F" : "\u6536\u8D77\u5DE6\u4FA7\u680F", "aria-label": "toggle-left", children: P ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.6" }) }) : /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.6" }) }) })
+            ] }),
+            /* @__PURE__ */ e(at, { children: /* @__PURE__ */ e(
+              st,
+              {
+                ref: _,
+                children: /* @__PURE__ */ e(ct, { $opacity: v, children: J })
+              }
+            ) }),
+            /* @__PURE__ */ e(dt, { children: /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ f(pt, { $collapsed: X, children: [
+              /* @__PURE__ */ e(ue, { children: "\u672C\u9875\u76EE\u5F55" }),
+              /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, padding: "0 8px 8px 8px" }, children: ((t.tocItems ?? T) || []).map((a) => /* @__PURE__ */ e(
+                E,
+                {
+                  $active: (k ? W : H) === a.id,
+                  onClick: () => {
+                    ne(a.id), I == null || I(a);
+                  },
+                  title: a.label,
+                  style: { paddingLeft: Math.max(0, (a.level || 1) - 1) * 12 + 10 },
+                  children: a.label
+                },
+                a.id
+              )) })
+            ] }) }) })
+          ] });
+        })(),
+        oe && /* @__PURE__ */ e(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 40,
+              background: "rgba(0,0,0,0.45)",
+              display: "flex"
+            },
+            onClick: () => O(!1),
+            children: /* @__PURE__ */ f(
+              "div",
+              {
+                style: {
+                  width: "82%",
+                  maxWidth: 320,
+                  height: "100%",
+                  background: o.colors.panelBackground || o.colors.dashboardBackground || "#fff",
+                  color: o.colors.text,
+                  borderRight: `1px solid ${o.colors.border}`,
+                  padding: 12
+                },
+                onClick: (n) => n.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ f("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+                    /* @__PURE__ */ e("div", { style: { fontWeight: 600 }, children: "\u76EE\u5F55" }),
+                    /* @__PURE__ */ e(E, { onClick: () => O(!1), children: "\u5173\u95ED" })
+                  ] }),
+                  r && r.length > 0 && /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "calc(100% - 40px)" }, children: Object.entries(
+                    r.reduce((n, d) => {
+                      const h = d.group || "\u6587\u6863";
+                      return n[h] = n[h] || [], n[h].push(d), n;
+                    }, {})
+                  ).map(([n, d]) => /* @__PURE__ */ f("div", { children: [
+                    /* @__PURE__ */ e(ue, { children: n }),
+                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, padding: "0 8px 8px 8px" }, children: d.map((h) => /* @__PURE__ */ e(
+                      E,
+                      {
+                        $active: h.id === Y,
+                        onClick: () => {
+                          h.href && (h.href.startsWith("#") ? ne(h.href.slice(1)) : window.location.href = h.href), S == null || S(h), O(!1);
+                        },
+                        children: h.label
+                      },
+                      h.id
+                    )) })
+                  ] }, n)) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
-  Fe as DashboardContainer,
-  Ve as DockContainer
+  mt as DashboardContainer,
+  Ct as DockContainer,
+  $t as DocmentContainer
 };