@keyblade/pro-components 1.15.0-alpha.1 → 1.15.0-alpha.10

package/es/components.d.ts

@@ -6,6 +6,7 @@ declare module 'vue' {
         KbProPageHeader: typeof import('./index')['ProPageHeader'];
         KbProKeepAliveRouterView: typeof import('./index')['ProKeepAliveRouterView'];
         KbProLayout: typeof import('./index')['ProLayout'];
+        KbProLayoutHeader: typeof import('./index')['ProLayoutHeader'];
         KbProMenu: typeof import('./index')['ProMenu'];
         KbProPageContainer: typeof import('./index')['ProPageContainer'];
         KbProReuseTabs: typeof import('./index')['ProReuseTabs'];

package/es/index.d.ts

@@ -9,6 +9,7 @@ export { default as ProFindPassword } from './pro-find-password';
 export { default as ProPageHeader } from './pro-page-header';
 export { default as ProKeepAliveRouterView } from './pro-keep-alive-router-view';
 export { default as ProLayout } from './pro-layout';
+export { ProLayoutHeader } from './pro-layout';
 export { default as ProFooterBar } from './pro-footer-bar';
 export { default as ProMenu } from './pro-menu';
 export type { IProMenuItem } from './pro-menu';

package/es/index.js

@@ -2,55 +2,56 @@ import { ProLogin as e } from "./pro-login/index.js";
 import { ProFindPassword as m } from "./pro-find-password/index.js";
 import { ProPageHeader as t } from "./pro-page-header/index.js";
 import { ProKeepAliveRouterView as s } from "./pro-keep-alive-router-view/index.js";
-import { ProLayout as i } from "./pro-layout/index.js";
-import { ProMenu as f } from "./pro-menu/index.js";
-import { ProPageContainer as P } from "./pro-page-container/index.js";
-import { ProReuseTabs as u } from "./pro-reuse-tabs/index.js";
-import { ProImageUpload as a } from "./pro-image-upload/index.js";
-import { ProDatesPicker as n } from "./pro-dates-picker/index.js";
+import { ProLayout as i, ProLayoutHeader as f } from "./pro-layout/index.js";
+import { ProMenu as P } from "./pro-menu/index.js";
+import { ProPageContainer as u } from "./pro-page-container/index.js";
+import { ProReuseTabs as a } from "./pro-reuse-tabs/index.js";
+import { ProImageUpload as n } from "./pro-image-upload/index.js";
+import { ProDatesPicker as d } from "./pro-dates-picker/index.js";
 import { ProDateRangePicker as l } from "./pro-date-range-picker/index.js";
-import { ProTable as d } from "./pro-table/index.js";
-import { ProTextarea as g } from "./pro-textarea/index.js";
-import { ProFooterBar as x } from "./pro-footer-bar/index.js";
-import { ProFormGroup as p } from "./pro-form-group/index.js";
-import { ProCalendar as b } from "./pro-calendar/index.js";
-import { ProLoader as c } from "./pro-loader/index.js";
+import { ProTable as g } from "./pro-table/index.js";
+import { ProTextarea as x } from "./pro-textarea/index.js";
+import { ProFooterBar as b } from "./pro-footer-bar/index.js";
+import { ProFormGroup as c } from "./pro-form-group/index.js";
+import { ProCalendar as p } from "./pro-calendar/index.js";
+import { ProLoader as L } from "./pro-loader/index.js";
 import { globalProps as F } from "./global-props.js";
-import { setGlobalProps as M } from "./global-props.js";
-import { splitStringWithCommaAndSpace as W } from "./utils.js";
-import { EImageUploadInnerBeforeUploadStep as z } from "./pro-image-upload/types.js";
-import { defaultImageUploadOptions as N } from "./pro-image-upload/constant.js";
-import { EProLoginType as X } from "./pro-login/enum.js";
-import { EFindPasswordSteps as Z } from "./pro-find-password/enum.js";
+import { setGlobalProps as V } from "./global-props.js";
+import { splitStringWithCommaAndSpace as q } from "./utils.js";
+import { EImageUploadInnerBeforeUploadStep as J } from "./pro-image-upload/types.js";
+import { defaultImageUploadOptions as Q } from "./pro-image-upload/constant.js";
+import { EProLoginType as Y } from "./pro-login/enum.js";
+import { EFindPasswordSteps as _ } from "./pro-find-password/enum.js";
 const v = {
   install(o, r) {
-    Object.assign(F, r || {}), o.use(e), o.use(m), o.use(t), o.use(s), o.use(i), o.use(x), o.use(f), o.use(P), o.use(u), o.use(a), o.use(n), o.use(l), o.use(g), o.use(d), o.use(p), o.use(b), o.use(c);
+    Object.assign(F, r || {}), o.use(e), o.use(m), o.use(t), o.use(s), o.use(i), o.use(f), o.use(b), o.use(P), o.use(u), o.use(a), o.use(n), o.use(d), o.use(l), o.use(x), o.use(g), o.use(c), o.use(p), o.use(L);
   }
 };
 export {
-  Z as EFindPasswordSteps,
-  z as EImageUploadInnerBeforeUploadStep,
-  X as EProLoginType,
-  b as ProCalendar,
+  _ as EFindPasswordSteps,
+  J as EImageUploadInnerBeforeUploadStep,
+  Y as EProLoginType,
+  p as ProCalendar,
   l as ProDateRangePicker,
-  n as ProDatesPicker,
+  d as ProDatesPicker,
   m as ProFindPassword,
-  x as ProFooterBar,
-  p as ProFormGroup,
-  a as ProImageUpload,
+  b as ProFooterBar,
+  c as ProFormGroup,
+  n as ProImageUpload,
   s as ProKeepAliveRouterView,
   i as ProLayout,
-  c as ProLoader,
+  f as ProLayoutHeader,
+  L as ProLoader,
   e as ProLogin,
-  f as ProMenu,
-  P as ProPageContainer,
+  P as ProMenu,
+  u as ProPageContainer,
   t as ProPageHeader,
-  u as ProReuseTabs,
-  d as ProTable,
-  g as ProTextarea,
+  a as ProReuseTabs,
+  g as ProTable,
+  x as ProTextarea,
   v as default,
-  N as defaultImageUploadOptions,
+  Q as defaultImageUploadOptions,
   F as globalProps,
-  M as setGlobalProps,
-  W as splitStringWithCommaAndSpace
+  V as setGlobalProps,
+  q as splitStringWithCommaAndSpace
 };

package/es/pro-layout/hooks.js

@@ -1,195 +1,197 @@
-var V = Object.defineProperty, X = Object.defineProperties;
-var Y = Object.getOwnPropertyDescriptors;
-var x = Object.getOwnPropertySymbols;
-var Z = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
-var J = (c, s, i) => s in c ? V(c, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[s] = i, w = (c, s) => {
-  for (var i in s || (s = {}))
-    Z.call(s, i) && J(c, i, s[i]);
-  if (x)
-    for (var i of x(s))
-      $.call(s, i) && J(c, i, s[i]);
-  return c;
-}, O = (c, s) => X(c, Y(s));
-var L = (c, s, i) => new Promise((K, g) => {
-  var p = (r) => {
+var X = Object.defineProperty, Y = Object.defineProperties;
+var Z = Object.getOwnPropertyDescriptors;
+var J = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var R = (i, r, c) => r in i ? X(i, r, { enumerable: !0, configurable: !0, writable: !0, value: c }) : i[r] = c, N = (i, r) => {
+  for (var c in r || (r = {}))
+    $.call(r, c) && R(i, c, r[c]);
+  if (J)
+    for (var c of J(r))
+      _.call(r, c) && R(i, c, r[c]);
+  return i;
+}, A = (i, r) => Y(i, Z(r));
+var W = (i, r, c) => new Promise((o, T) => {
+  var P = (u) => {
     try {
-      u(i.next(r));
+      y(c.next(u));
     } catch (d) {
-      g(d);
+      T(d);
     }
-  }, M = (r) => {
+  }, b = (u) => {
     try {
-      u(i.throw(r));
+      y(c.throw(u));
     } catch (d) {
-      g(d);
+      T(d);
     }
-  }, u = (r) => r.done ? K(r.value) : Promise.resolve(r.value).then(p, M);
-  u((i = i.apply(c, s)).next());
+  }, y = (u) => u.done ? o(u.value) : Promise.resolve(u.value).then(P, b);
+  y((c = c.apply(i, r)).next());
 });
-import { ref as v, computed as _, watch as A } from "vue";
-import { useRoute as I, useRouter as m } from "vue-router";
-import { ProLayoutMode as E, ProLayoutMenuType as R } from "./enum.js";
-const te = (c) => {
-  const s = I(), i = m(), K = v([]), g = v([]), p = v([]), M = v([]), u = v(), r = v([]), d = v({}), k = v([]), f = v([]), P = v([]), T = v([]), y = v([]), b = _(() => {
-    const e = [...c.menuItems], a = (t) => {
+import { ref as v, computed as I, watch as E } from "vue";
+import { useRoute as m, useRouter as ee } from "vue-router";
+import { ProLayoutMode as k, ProLayoutMenuType as D } from "./enum.js";
+const ie = (i) => {
+  const r = "cacheRouteTabs", c = m(), o = ee(), T = v([]), P = v([]), b = v([]), y = v([]), u = v(), d = v([]), K = v({}), x = v([]), h = v([]), S = v([]), C = v([]), g = v([]), p = I(() => {
+    const e = [...i.menuItems], a = (t) => {
       t.forEach((l) => {
         if (l != null && l.children && l.children.length > 0) {
           if ((l == null ? void 0 : l.topChildrenMenu) !== void 0)
-            l.children = l.children.map((n) => O(w({}, n), { topMenu: l == null ? void 0 : l.topChildrenMenu }));
+            l.children = l.children.map((n) => A(N({}, n), { topMenu: l == null ? void 0 : l.topChildrenMenu }));
           else {
-            const n = l.children.find((o) => o.topMenu !== void 0);
-            n && (l.topChildrenMenu = n.topMenu, l.children = l.children.map((o) => O(w({}, o), { topMenu: n.topMenu })));
+            const n = l.children.find((s) => s.topMenu !== void 0);
+            n && (l.topChildrenMenu = n.topMenu, l.children = l.children.map((s) => A(N({}, s), { topMenu: n.topMenu })));
           }
           a(l.children);
         }
       });
     };
-    return c.layout === E.mix && a(e), e;
-  }), W = (e) => {
+    return i.layout === k.mix && a(e), e;
+  }), L = (e) => {
     var a;
-    if (K.value = [e.name], !(e != null && e.children) || ((a = e == null ? void 0 : e.children) == null ? void 0 : a.length) === 0)
-      y.value = [], i == null || i.push({ path: e.path });
-    else if (y.value = e.children, e != null && e.redirect)
+    if (T.value = [e.name], !(e != null && e.children) || ((a = e == null ? void 0 : e.children) == null ? void 0 : a.length) === 0)
+      g.value = [], o == null || o.push({ path: e.path });
+    else if (g.value = e.children, e != null && e.redirect)
       if (typeof e.redirect == "string")
-        i == null || i.push({ path: e.redirect });
+        o == null || o.push({ path: e.redirect });
       else if (typeof e.redirect == "function") {
-        const t = e.redirect(s);
-        i == null || i.push(t);
+        const t = e.redirect(c);
+        o == null || o.push(t);
       } else
-        i == null || i.push(e.redirect);
+        o == null || o.push(e.redirect);
   }, B = (e) => {
-    e != null && e.name ? i == null || i.push({ name: e.name }) : i == null || i.push({ path: e.path }), g.value = [e.name];
-  }, D = (e, a) => L(null, null, function* () {
-    if (a != null && a.path && !(c != null && c.onMenuItemClick && !(yield c.onMenuItemClick(a)))) {
+    e != null && e.name ? o == null || o.push({ name: e.name }) : o == null || o.push({ path: e.path }), P.value = [e.name];
+  }, H = (e, a) => W(null, null, function* () {
+    if (a != null && a.path && !(i != null && i.onMenuItemClick && !(yield i.onMenuItemClick(a)))) {
       if (a.path.startsWith("http") || a.path.startsWith("https")) {
         window.open(a.path);
         return;
       }
-      e === R.top ? W(a) : B(a);
+      e === D.top ? L(a) : B(a);
     }
-  }), H = (e, a) => {
-    e === R.top ? p.value = a : M.value = a;
-  }, j = () => {
+  }), j = (e, a) => {
+    e === D.top ? b.value = a : y.value = a;
+  }, q = () => {
     const e = [], a = (t) => {
       var l;
       for (const n in t) {
-        const o = t[n];
-        if (o.name === ((l = u == null ? void 0 : u.value) == null ? void 0 : l.name) || o.children && o.children.length > 0 && a(o.children))
-          return e.unshift(o), !0;
+        const s = t[n];
+        if (s.name === ((l = u == null ? void 0 : u.value) == null ? void 0 : l.name) || s.children && s.children.length > 0 && a(s.children))
+          return e.unshift(s), !0;
       }
       return !1;
     };
-    a(JSON.parse(JSON.stringify(b.value))), r.value = e;
-  }, q = () => {
+    a(JSON.parse(JSON.stringify(p.value))), d.value = e;
+  }, z = () => {
     var a, t, l;
-    const e = (a = r.value) == null ? void 0 : a.map((n) => ({ path: n == null ? void 0 : n.path, label: n == null ? void 0 : n.title }));
-    k.value = (t = u.value) != null && t.breadcrumbs ? (l = u.value) == null ? void 0 : l.breadcrumbs : e.length !== 0 ? e : [];
+    const e = (a = d.value) == null ? void 0 : a.map((n) => ({ path: n == null ? void 0 : n.path, label: n == null ? void 0 : n.title }));
+    x.value = (t = u.value) != null && t.breadcrumbs ? (l = u.value) == null ? void 0 : l.breadcrumbs : e.length !== 0 ? e : [];
   };
-  function z() {
+  function F() {
+    var M, O;
     if (!u.value || u.value.noAffix) {
-      f.value.forEach((n) => {
-        n.active = !1;
+      h.value.forEach((f) => {
+        f.active = !1;
       });
       return;
     }
     const { name: e, title: a } = u.value;
-    let t = -1;
-    f.value.forEach((n, o) => {
-      n.active = !1, n.name === e && (t = o);
+    h.value.forEach((f) => {
+      f.active = !1;
     });
-    const l = {
+    const t = (M = c.meta) == null ? void 0 : M.getTitle, l = typeof t == "function" ? t(c) : void 0, n = {
       name: e,
-      parentNames: r.value.map((n) => n.name),
-      title: a != null ? a : e,
-      fullPath: s.fullPath,
+      parentNames: d.value.map((f) => f.name),
+      title: (O = l != null ? l : a) != null ? O : e,
+      fullPath: c.fullPath,
       active: !0
-    };
-    if (~t) {
-      const n = f.value[t];
-      n.fullPath === s.fullPath ? (n.active = !0, n.fullPath = s.fullPath) : (f.value.splice(t, 1), setTimeout(() => {
-        f.value.push(l);
-      }));
-    } else
-      f.value.push(l);
+    }, s = h.value.findIndex((f) => f.fullPath.startsWith(c.path));
+    s >= 0 ? (h.value[s].active = !0, h.value[s].fullPath = c.fullPath) : h.value.push(n);
   }
-  const F = (e) => {
-    const a = f.value.findIndex((l) => l.name === e), t = f.value[a];
-    i.push(t.fullPath);
-  }, G = (e) => {
+  const G = (e) => {
+    const a = h.value.find((t) => t.fullPath === e);
+    a && o.push(a.fullPath);
+  }, Q = (e) => {
     let a = -1, t = -1;
-    if (f.value.forEach((n, o) => {
-      n.name === e && (t = o), n.active && (a = o);
-    }), a === t) {
+    if (h.value.forEach((n, s) => {
+      n.fullPath === e && (t = s), n.active && (a = s);
+    }), t === -1) return;
+    if (a === t) {
       let n;
-      t === 0 ? n = f.value[t + 1] : n = f.value[t - 1], n.active = !0, i.push(n.fullPath);
+      t === 0 ? n = h.value[t + 1] : n = h.value[t - 1], n && (n.active = !0, o.push(n.fullPath));
     }
-    const l = f.value.splice(t, 1);
-    U(l[0]);
-  }, Q = () => {
+    const l = h.value.splice(t, 1);
+    V(l[0]);
+  }, U = () => {
     var a;
-    if (c != null && c.disableKeepAlive || (a = s == null ? void 0 : s.meta) != null && a.ignoreCache)
+    if (i != null && i.disableKeepAlive || (a = c == null ? void 0 : c.meta) != null && a.ignoreCache)
       return;
-    const e = new Set(P.value);
-    r.value.forEach((t) => {
+    const e = new Set(S.value);
+    d.value.forEach((t) => {
       t.name && e.add(t.name);
-    }), P.value = Array.from(e.values());
-  }, U = (e) => {
-    const a = new Set(P.value);
+    }), S.value = Array.from(e.values());
+  }, V = (e) => {
+    const a = new Set(S.value);
     e.parentNames.forEach((t) => {
       a.delete(t);
-    }), f.value.forEach((t) => {
+    }), h.value.forEach((t) => {
       t.parentNames.forEach((l) => {
-        const n = d.value[l];
+        const n = K.value[l];
         n && (n != null && n.ignoreCache || a.add(n.name));
       });
-    }), P.value = Array.from(a.values());
+    }), S.value = Array.from(a.values());
   };
-  return A(() => b.value, () => {
+  return E(() => p.value, () => {
     const e = {}, a = (t) => {
       t.forEach((l) => {
         l.children && l.children.length > 0 && a(l.children), delete l.children, e[l.name] = l;
       });
     };
-    a(JSON.parse(JSON.stringify(b.value))), d.value = e;
-  }, { immediate: !0 }), A(() => [c.layout, b.value], () => {
-    var e, a, t;
-    if (T.value = [], y.value = [], p.value = [...((e = c.menuProps) == null ? void 0 : e.defaultOpenKeys) || [], ...p.value], M.value = [...((a = c.menuProps) == null ? void 0 : a.defaultOpenKeys) || [], ...M.value], c.layout === E.side)
-      y.value = b.value;
-    else if (c.layout === E.mix) {
-      const l = (t = b.value) == null ? void 0 : t.filter((n) => n.topMenu);
-      (l == null ? void 0 : l.length) === 0 ? y.value = b.value : T.value = l;
+    a(JSON.parse(JSON.stringify(p.value))), K.value = e;
+  }, { immediate: !0 }), E(() => [i.layout, p.value], () => {
+    var e, a, t, l, n;
+    if (C.value = [], g.value = [], b.value = [...((e = i.menuProps) == null ? void 0 : e.defaultOpenKeys) || [], ...b.value], y.value = [...((a = i.menuProps) == null ? void 0 : a.defaultOpenKeys) || [], ...y.value], i.layout === k.side)
+      g.value = p.value;
+    else if (i.layout === k.mix) {
+      const s = (t = p.value) == null ? void 0 : t.filter((M) => M.topMenu);
+      (s == null ? void 0 : s.length) === 0 ? g.value = p.value : C.value = s;
+    }
+    if ((l = i == null ? void 0 : i.cacheTabs) != null && l.enable) {
+      const s = JSON.parse(sessionStorage.getItem(r) || "[]") || [];
+      s.forEach((M) => M.active = !1), h.value = s, (n = i == null ? void 0 : i.cacheTabs) != null && n.autoRemove && sessionStorage.removeItem(r);
     }
-  }, { immediate: !0 }), A(() => s == null ? void 0 : s.name, () => {
+  }, { immediate: !0 }), E(() => [c == null ? void 0 : c.name, c == null ? void 0 : c.fullPath], () => {
     var t, l, n;
-    const e = s == null ? void 0 : s.name;
-    u.value = d.value[e], j();
-    const a = r.value.filter((o) => o.topMenu);
-    if (a.length > 0 && T.value.length > 0 && (y.value = ((t = a[a.length - 1]) == null ? void 0 : t.children) || []), K.value = u != null && u.value ? [...a.map((o) => o.name), ...((l = u.value) == null ? void 0 : l.activatedKeys) || []] : [], g.value = u != null && u.value ? [u.value.name, ...((n = u.value) == null ? void 0 : n.activatedKeys) || []] : [], u.value) {
-      const o = r.value.filter((h, C) => C < r.value.length - 1), S = o.filter((h) => h.topMenu).map((h) => h.name), N = o.filter((h) => !h.topMenu).map((h) => h.name);
-      u.value.activatedKeys && u.value.activatedKeys.length > 0 && u.value.activatedKeys.forEach((h) => {
-        const C = d.value[h];
-        C && (C.topMenu ? S.push(h) : N.push(h));
-      }), p.value = Array.from(/* @__PURE__ */ new Set([...p.value, ...S])), M.value = Array.from(/* @__PURE__ */ new Set([...M.value, ...N]));
+    const e = c == null ? void 0 : c.name;
+    u.value = K.value[e], q();
+    const a = d.value.filter((s) => s.topMenu);
+    if (a.length > 0 && C.value.length > 0 && (g.value = ((t = a[a.length - 1]) == null ? void 0 : t.children) || []), T.value = u != null && u.value ? [...a.map((s) => s.name), ...((l = u.value) == null ? void 0 : l.activatedKeys) || []] : [], P.value = u != null && u.value ? [u.value.name, ...((n = u.value) == null ? void 0 : n.activatedKeys) || []] : [], u.value) {
+      const s = d.value.filter((f, w) => w < d.value.length - 1), M = s.filter((f) => f.topMenu).map((f) => f.name), O = s.filter((f) => !f.topMenu).map((f) => f.name);
+      u.value.activatedKeys && u.value.activatedKeys.length > 0 && u.value.activatedKeys.forEach((f) => {
+        const w = K.value[f];
+        w && (w.topMenu ? M.push(f) : O.push(f));
+      }), b.value = Array.from(/* @__PURE__ */ new Set([...b.value, ...M])), y.value = Array.from(/* @__PURE__ */ new Set([...y.value, ...O]));
     }
-    q(), c.hideTabs || z(), Q();
-  }, { immediate: !0 }), {
-    topMenuItems: T,
-    siderMenuItems: y,
-    topMenuSelectedKeys: K,
-    siderMenuSelectedKeys: g,
-    topMenuOpenKeys: p,
-    siderMenuOpenKeys: M,
+    z(), i.hideTabs || F(), U();
+  }, { immediate: !0 }), E(() => h.value, () => {
+    var e;
+    (e = i == null ? void 0 : i.cacheTabs) != null && e.enable && sessionStorage.setItem(r, JSON.stringify(h.value || []));
+  }, { deep: !0 }), {
+    topMenuItems: C,
+    siderMenuItems: g,
+    topMenuSelectedKeys: T,
+    siderMenuSelectedKeys: P,
+    topMenuOpenKeys: b,
+    siderMenuOpenKeys: y,
     activeMenuItem: u,
-    menuItemMap: d,
-    breadcrumbItems: k,
-    tabs: f,
-    keepAliveInclude: P,
-    onProMenuItemClick: D,
-    onProMenuOpenKeysChange: H,
-    onTabClick: F,
-    onTabDelete: G
+    menuItemMap: K,
+    breadcrumbItems: x,
+    tabs: h,
+    keepAliveInclude: S,
+    onProMenuItemClick: H,
+    onProMenuOpenKeysChange: j,
+    onTabClick: G,
+    onTabDelete: Q
   };
 };
 export {
-  te as useHooks
+  ie as useHooks
 };

package/es/pro-layout/index.d.ts

@@ -14,16 +14,20 @@ declare const ProLayout: {
         tabsHeaderPadding: boolean;
         menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
         hideHeader: boolean;
-        hiderSider: boolean;
-        headerHeight: number;
+        siderCollapsed: boolean;
         logo: string;
+        headerHeight: number;
         siderWidth: number;
+        hiderSider: boolean;
         siderBreakpoint: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
-        siderCollapsed: boolean;
         menuItems: import('..').IProMenuItem[];
         footerTitle: string;
         hideFooter: boolean;
         hideTabs: boolean;
+        cacheTabs: {
+            enable?: boolean;
+            autoRemove?: boolean;
+        };
         disableKeepAlive: boolean;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
@@ -43,16 +47,20 @@ declare const ProLayout: {
         tabsHeaderPadding: boolean;
         menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
         hideHeader: boolean;
-        hiderSider: boolean;
-        headerHeight: number;
+        siderCollapsed: boolean;
         logo: string;
+        headerHeight: number;
         siderWidth: number;
+        hiderSider: boolean;
         siderBreakpoint: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
-        siderCollapsed: boolean;
         menuItems: import('..').IProMenuItem[];
         footerTitle: string;
         hideFooter: boolean;
         hideTabs: boolean;
+        cacheTabs: {
+            enable?: boolean;
+            autoRemove?: boolean;
+        };
         disableKeepAlive: boolean;
     }>;
     __isFragment?: never;
@@ -72,16 +80,20 @@ declare const ProLayout: {
     tabsHeaderPadding: boolean;
     menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
     hideHeader: boolean;
-    hiderSider: boolean;
-    headerHeight: number;
+    siderCollapsed: boolean;
     logo: string;
+    headerHeight: number;
     siderWidth: number;
+    hiderSider: boolean;
     siderBreakpoint: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
-    siderCollapsed: boolean;
     menuItems: import('..').IProMenuItem[];
     footerTitle: string;
     hideFooter: boolean;
     hideTabs: boolean;
+    cacheTabs: {
+        enable?: boolean;
+        autoRemove?: boolean;
+    };
     disableKeepAlive: boolean;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
@@ -98,6 +110,88 @@ declare const ProLayout: {
 }) & {
     install: (app: App) => void;
 };
+declare const ProLayoutHeader: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./pro-layout-header.vue').IProLayoutHeaderProps> & Readonly<{
+        onMenuItemClick?: ((type: import('./enum').ProLayoutMenuType, item: import('..').IProMenuItem) => any) | undefined;
+        onOpenKeysChange?: ((type: import('./enum').ProLayoutMenuType, keys: string[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        menuItemClick: (type: import('./enum').ProLayoutMenuType, item: import('..').IProMenuItem) => any;
+        openKeysChange: (type: import('./enum').ProLayoutMenuType, keys: string[]) => any;
+    }, import('vue').PublicProps, {
+        layout: import('./enum').ProLayoutMode;
+        prefixClsName: string;
+        title: string;
+        menuProps: Record<string, unknown>;
+        hideHeader: boolean;
+        siderCollapsed: boolean;
+        logo: string;
+        topMenuItems: import('..').IProMenuItem[];
+        topMenuSelectedKeys: string[];
+        topMenuOpenKeys: string[];
+        headerHeight: number;
+        siderWidth: number;
+        siderCollapsedWidth: number;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./pro-layout-header.vue').IProLayoutHeaderProps> & Readonly<{
+        onMenuItemClick?: ((type: import('./enum').ProLayoutMenuType, item: import('..').IProMenuItem) => any) | undefined;
+        onOpenKeysChange?: ((type: import('./enum').ProLayoutMenuType, keys: string[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        layout: import('./enum').ProLayoutMode;
+        prefixClsName: string;
+        title: string;
+        menuProps: Record<string, unknown>;
+        hideHeader: boolean;
+        siderCollapsed: boolean;
+        logo: string;
+        topMenuItems: import('..').IProMenuItem[];
+        topMenuSelectedKeys: string[];
+        topMenuOpenKeys: string[];
+        headerHeight: number;
+        siderWidth: number;
+        siderCollapsedWidth: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./pro-layout-header.vue').IProLayoutHeaderProps> & Readonly<{
+    onMenuItemClick?: ((type: import('./enum').ProLayoutMenuType, item: import('..').IProMenuItem) => any) | undefined;
+    onOpenKeysChange?: ((type: import('./enum').ProLayoutMenuType, keys: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    menuItemClick: (type: import('./enum').ProLayoutMenuType, item: import('..').IProMenuItem) => any;
+    openKeysChange: (type: import('./enum').ProLayoutMenuType, keys: string[]) => any;
+}, string, {
+    layout: import('./enum').ProLayoutMode;
+    prefixClsName: string;
+    title: string;
+    menuProps: Record<string, unknown>;
+    hideHeader: boolean;
+    siderCollapsed: boolean;
+    logo: string;
+    topMenuItems: import('..').IProMenuItem[];
+    topMenuSelectedKeys: string[];
+    topMenuOpenKeys: string[];
+    headerHeight: number;
+    siderWidth: number;
+    siderCollapsedWidth: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        'header-left'?(_: {}): any;
+        'header-left-logo-img'?(_: {}): any;
+        'header-left-logo-title'?(_: {}): any;
+        'header-center-left'?(_: {}): any;
+        'header-center-center'?(_: {}): any;
+        'header-center-right'?(_: {}): any;
+        'header-right'?(_: {}): any;
+    };
+}) & {
+    install: (app: App) => void;
+};
 /** 导出组件 */
-export { ProLayout };
+export { ProLayout, ProLayoutHeader };
 export default ProLayout;

package/es/pro-layout/index.js

@@ -1,11 +1,18 @@
-import o from "./pro-layout.vue.js";
+import t from "./pro-layout.vue.js";
 /* empty css                */
-const r = Object.assign(o, {
-  install: (t) => {
-    t.component("KbProLayout", o);
+import a from "./pro-layout-header.vue.js";
+/* empty css                       */
+const i = Object.assign(t, {
+  install: (o) => {
+    o.component("KbProLayout", t);
+  }
+}), m = Object.assign(a, {
+  install: (o) => {
+    o.component("KbProLayoutHeader", a);
   }
 });
 export {
-  r as ProLayout,
-  r as default
+  i as ProLayout,
+  m as ProLayoutHeader,
+  i as default
 };