@vtj/ui 0.5.2 → 0.6.0

package/lib/index.js

@@ -1,68 +1,90 @@
-import { defineComponent as w, openBlock as f, createElementBlock as M, renderSlot as b, createElementVNode as x, toDisplayString as E, useAttrs as H, computed as S, markRaw as G, createBlock as g, unref as m, normalizeClass as Y, withCtx as _, resolveDynamicComponent as F, createCommentVNode as N, getCurrentInstance as W, createVNode as y, Fragment as O, renderList as R, mergeProps as D, createTextVNode as q, isVNode as K, h as J, watch as z, effectScope as U, ref as L, onUnmounted as Z } from "vue";
-import { ElIcon as Q, ElSubMenu as ee, ElMenuItem as te, ElMenu as ne, ElContainer as A, ElHeader as se, ElAside as oe, ElMain as le, ElFooter as re } from "element-plus";
-import { useRouter as ae, useRoute as ie, RouterView as ue } from "vue-router";
-import { useDraggable as ce, useElementBounding as P, useElementSize as me, useEventListener as C } from "@vueuse/core";
-function De(e) {
-  return typeof e == "string" ? e : `${e}px`;
+import { defineComponent as D, openBlock as c, createElementBlock as A, renderSlot as z, createElementVNode as R, unref as o, toDisplayString as O, createVNode as b, withCtx as p, createTextVNode as N, useAttrs as Je, computed as y, markRaw as Ae, createBlock as m, normalizeClass as U, resolveDynamicComponent as Y, createCommentVNode as v, getCurrentInstance as _e, mergeProps as Q, Fragment as q, renderList as we, isVNode as xt, h as K, toRef as he, useSlots as zt, normalizeStyle as Ee, ref as $, normalizeProps as St, guardReactiveProps as Ct, effectScope as Ke, watch as ne, reactive as Ye, onMounted as Tt, onUnmounted as Mt, watchEffect as Ge, nextTick as le, Teleport as qe, withDirectives as L, createSlots as et, render as Fe, vShow as J, isRef as ge, withModifiers as Et, KeepAlive as It, shallowRef as Oe, provide as De, toRaw as Bt, inject as je } from "vue";
+import { ElDivider as ue, ElButton as ve, ElIcon as At, ElSubMenu as Dt, ElBadge as Ie, ElMenuItem as Vt, ElMenu as Pt, ElContainer as Ne, ElHeader as Rt, ElAside as $t, ElMain as Ft, ElFooter as Ot, ElDropdown as jt, ElDropdownMenu as Nt, ElDropdownItem as Ut, ElTooltip as Xt, ElSwitch as tt, ElInput as Ht, ElEmpty as Lt, ElTabs as Wt, ElTabPane as Ue, ElPopover as nt, ElAvatar as Qt, ElMessageBox as Te } from "element-plus";
+import { VideoPlay as Zt, Menu as ot, ArrowRight as Jt, StarFilled as at, Search as Be, Close as st, Expand as Kt, Fold as Yt, Star as lt, Document as se, Refresh as Gt, CopyDocument as qt, Moon as en, Sunny as tn, MoreFilled as nn, UserFilled as on, HomeFilled as an } from "@element-plus/icons-vue";
+import { useRouter as ke, useRoute as Ve, RouterView as it, routeLocationKey as sn } from "vue-router";
+import { Minimize as ln, Popup as rn, Maximize as cn, RawClose as un } from "@vtj/icons";
+import { useDraggable as dn, useMouseInElement as pn, useEventListener as ye, useElementSize as rt, useDark as fn } from "@vueuse/core";
+import { isEqual as ct, isObject as ut, uid as dt, arrayToMap as mn, isUrl as gn, upperFirstCamelCase as pt } from "@vtj/utils";
+function Xe(a) {
+  return typeof a == "string" ? a : `${a}px`;
 }
-function Le(e = 0, t) {
-  if (typeof e == "number")
-    return e;
-  if (/(%|vh|vw)$/i.test(e)) {
-    const s = Number.parseInt(e);
-    return t * s / 100;
-  }
-  return Number.parseInt(e);
+function pe(a = 0, t) {
+  if (typeof a == "number")
+    return a;
+  if (/(%|vh|vw)$/i.test(a)) {
+    const n = Number.parseInt(a);
+    return Math.floor(t * n / 100);
+  }
+  return Number.parseInt(a);
 }
-function pe(e, t) {
-  const n = {};
-  return Object.keys(e).forEach((s) => {
-    t.includes(s) || (n[s] = e[s]);
-  }), n;
+function Ro(a, t) {
+  const e = {};
+  return Object.keys(a).forEach((n) => {
+    t.includes(n) || (e[n] = a[n]);
+  }), e;
 }
-function Ae(e, t) {
-  const n = {};
-  return Object.keys(e).forEach((s) => {
-    t.includes(s) && (n[s] = e[s]);
-  }), n;
+function $o(a, t) {
+  const e = {};
+  return Object.keys(a).forEach((n) => {
+    t.includes(n) && (e[n] = a[n]);
+  }), e;
 }
-const de = () => {
-}, Be = (e, t) => {
-  if (e.install = (n) => {
-    for (const s of [e, ...Object.values(t ?? {})])
-      typeof s == "function" ? n.use(s) : s.name && n.component(s.name, s);
-  }, t)
-    for (const [n, s] of Object.entries(t))
-      e[n] = s;
-  return e;
-}, Xe = (e, t) => (e.install = (n) => {
-  e._context = n._context, n.config.globalProperties[t] = e;
-}, e), je = (e, t) => (e.install = (n) => {
-  n.directive(t, e);
-}, e), Oe = (e) => (e.install = de, e), B = Symbol("INSTALLED_KEY"), X = "is-dragging", j = "is-resizing", fe = (e = []) => ({
-  install: (n) => {
-    n[B] || (n[B] = !0, e.forEach((s) => n.use(s)));
-  }
-}), ve = { class: "x-startup" }, _e = /* @__PURE__ */ w({
+const Fo = () => {
+}, He = Symbol("INSTALLED_KEY"), hn = (a = []) => ({
+  install: (e) => {
+    e[He] || (e[He] = !0, a.forEach((n) => e.component(n.name, n)));
+  }
+}), ft = "data:image/png;base64,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", vn = { class: "x-startup" }, yn = { class: "brand" }, bn = ["src"], _n = /* @__PURE__ */ R("h3", null, [
+  /* @__PURE__ */ N("基于 "),
+  /* @__PURE__ */ R("span", null, "Vue3 + TypeScript"),
+  /* @__PURE__ */ N(" 的低代码设计器引擎")
+], -1), wn = { class: "btn" }, kn = /* @__PURE__ */ R("div", { class: "ba" }, [
+  /* @__PURE__ */ R("a", { href: "http://beian.miit.gov.cn/" }, "粤ICP备2023104074号")
+], -1), xn = /* @__PURE__ */ D({
   name: "XStartup",
   __name: "Startup",
   props: {
-    text: { default: "Hello VTJ." }
-  },
-  setup(e) {
-    const t = e;
-    return (n, s) => (f(), M("div", ve, [
-      b(n.$slots, "default", {}, () => [
-        x("span", null, E(t.text), 1)
-      ])
+    text: { default: "VTJ.PRO" },
+    link: { default: "/" }
+  },
+  setup(a) {
+    const t = a, e = () => {
+      location.href = t.link + "#/?startup";
+    };
+    return (n, s) => (c(), A("div", vn, [
+      z(n.$slots, "default", {}, () => [
+        R("div", null, [
+          R("div", yn, [
+            R("img", { src: o(ft) }, null, 8, bn),
+            R("h1", null, O(t.text), 1)
+          ]),
+          b(o(ue)),
+          _n,
+          R("div", wn, [
+            b(o(ve), {
+              onClick: e,
+              type: "primary",
+              round: "",
+              size: "large",
+              icon: o(Zt)
+            }, {
+              default: p(() => [
+                N(" 立即开始体验 ")
+              ]),
+              _: 1
+            }, 8, ["icon"])
+          ])
+        ])
+      ]),
+      kn
     ]));
   }
 });
-const he = {
+const zn = {
   default: 14,
   small: 12,
   large: 18
-}, ge = {
+}, Sn = {
   icon: {
     type: [String, Object]
   },
@@ -79,117 +101,153 @@ const he = {
   disabled: {
     type: Boolean
   }
-}, ye = ["src"], k = /* @__PURE__ */ w({
+}, Cn = ["src"], oe = /* @__PURE__ */ D({
   name: "XIcon",
   __name: "Icon",
-  props: ge,
-  setup(e) {
-    const t = e, n = H(), s = S(() => typeof t.icon == "object" ? G(t.icon) : null), r = S(() => {
-      const o = {
-        "is-pointer": !!n.onClick
+  props: Sn,
+  setup(a) {
+    const t = a, e = Je(), n = y(() => typeof t.icon == "object" ? Ae(t.icon) : null), s = y(() => {
+      const i = {
+        "is-pointer": !!e.onClick
       };
-      return !s.value && t.icon && (o[t.icon] = !0), o;
-    }), l = S(() => typeof t.size == "number" ? t.size : he[t.size] ?? void 0);
-    return (o, u) => (f(), g(m(Q), {
-      class: Y(["x-icon", r.value]),
+      return !n.value && t.icon && (i[t.icon] = !0), i;
+    }), l = y(() => typeof t.size == "number" ? t.size : zn[t.size] ?? void 0);
+    return (i, u) => (c(), m(o(At), {
+      class: U(["x-icon", s.value]),
       color: t.color,
       size: l.value
     }, {
-      default: _(() => [
-        b(o.$slots, "default", {}, () => [
-          s.value ? (f(), g(F(s.value), { key: 0 })) : N("", !0),
-          t.src ? (f(), M("img", {
+      default: p(() => [
+        z(i.$slots, "default", {}, () => [
+          n.value ? (c(), m(Y(n.value), { key: 0 })) : v("", !0),
+          t.src ? (c(), A("img", {
             key: 1,
             src: t.src
-          }, null, 8, ye)) : N("", !0)
+          }, null, 8, Cn)) : v("", !0)
         ])
       ]),
       _: 3
     }, 8, ["class", "color", "size"]));
   }
-}), V = /* @__PURE__ */ w({
+}), Tn = { class: "x-menu__wrapper" }, Mn = {
+  key: 1,
+  class: "x-menu__title"
+}, En = /* @__PURE__ */ R("i", null, null, -1), In = {
+  key: 0,
+  class: "x-menu__title"
+}, Bn = /* @__PURE__ */ R("i", null, null, -1), mt = /* @__PURE__ */ D({
+  inheritAttrs: !1,
   name: "XMenuItem",
   __name: "MenuItem",
   props: {
-    item: {}
+    item: {},
+    subMenu: {},
+    defaultIcon: { type: [Object, Function] }
   },
-  setup(e) {
-    const t = e, n = W(), s = (l = "") => l ? n?.appContext.app?.component(l) || l : void 0, r = (l) => l.filter((o) => !o.hidden);
-    return (l, o) => t.item.children ? (f(), g(m(ee), {
+  setup(a) {
+    const t = a, e = _e(), n = (i) => {
+      if (i)
+        return typeof i == "string" && (e?.appContext.app?.component(i) || t.defaultIcon) || i;
+    }, s = (i) => typeof i == "object" ? i : { value: i }, l = (i = []) => i.filter((u) => !u.hidden);
+    return (i, u) => t.item.children ? (c(), m(o(Dt), Q({
       key: 0,
-      index: t.item.id
-    }, {
-      title: _(() => [
-        x("div", null, [
-          y(m(k), {
-            icon: s(t.item.icon)
-          }, null, 8, ["icon"]),
-          x("span", null, E(t.item.title), 1)
+      disabled: t.item.disabled
+    }, t.subMenu, {
+      index: String(t.item.id)
+    }), {
+      title: p(() => [
+        R("div", Tn, [
+          t.item.icon ? (c(), m(o(oe), {
+            key: 0,
+            icon: n(t.item.icon)
+          }, null, 8, ["icon"])) : v("", !0),
+          t.item.title ? (c(), A("span", Mn, O(t.item.title), 1)) : v("", !0),
+          t.item.badge ? (c(), m(o(Ie), Q({
+            key: 2,
+            class: "x-menu__badge"
+          }, s(t.item.badge)), {
+            default: p(() => [
+              En
+            ]),
+            _: 1
+          }, 16)) : v("", !0)
         ])
       ]),
-      default: _(() => [
-        (f(!0), M(O, null, R(r(t.item.children), (u) => (f(), g(m(V), { item: u }, null, 8, ["item"]))), 256))
+      default: p(() => [
+        (c(!0), A(q, null, we(l(t.item.children), (r) => (c(), m(o(mt), {
+          key: r.id,
+          item: r,
+          subMenu: t.subMenu,
+          defaultIcon: t.defaultIcon
+        }, null, 8, ["item", "subMenu", "defaultIcon"]))), 128))
       ]),
       _: 1
-    }, 8, ["index"])) : (f(), g(m(te), D({
+    }, 16, ["disabled", "index"])) : (c(), m(o(Vt), {
       key: 1,
-      index: t.item.id
-    }, t.item), {
-      default: _(() => [
-        y(m(k), {
-          icon: s(t.item.icon)
-        }, null, 8, ["icon"]),
-        x("span", null, E(t.item.title), 1)
+      index: String(t.item.id),
+      disabled: t.item.disabled
+    }, {
+      title: p(() => [
+        t.item.title ? (c(), A("span", In, O(t.item.title), 1)) : v("", !0),
+        t.item.badge ? (c(), m(o(Ie), Q({
+          key: 1,
+          class: "x-menu__badge"
+        }, s(t.item.badge)), {
+          default: p(() => [
+            Bn
+          ]),
+          _: 1
+        }, 16)) : v("", !0)
+      ]),
+      default: p(() => [
+        t.item.icon ? (c(), m(o(oe), {
+          key: 0,
+          icon: n(t.item.icon)
+        }, null, 8, ["icon"])) : v("", !0)
       ]),
       _: 1
-    }, 16, ["index"]));
+    }, 8, ["index", "disabled"]));
   }
-}), T = /* @__PURE__ */ w({
+}), G = /* @__PURE__ */ D({
+  inheritAttrs: !1,
   name: "XMenu",
   __name: "Menu",
   props: {
     data: { default: () => [] },
-    mode: {},
-    defaultActive: {},
-    defaultOpeneds: {},
-    uniqueOpened: { type: Boolean },
-    router: { type: Boolean },
-    menuTrigger: {},
-    collapse: { type: Boolean },
-    backgroundColor: {},
-    textColor: {},
-    activeTextColor: {},
-    collapseTransition: { type: Boolean },
-    ellipsis: { type: Boolean },
-    popperEffect: {}
+    subMenu: {},
+    defaultIcon: {}
   },
   emits: ["select"],
-  setup(e, { emit: t }) {
-    const n = e, s = S(() => n.data.filter((o) => !o.hidden)), r = (o, u) => {
-      const i = (a, p = []) => {
-        for (const c of p) {
-          if (c.id === a)
-            return c;
-          if (c.children?.length) {
-            const d = i(a, c.children);
-            if (d)
-              return d;
+  setup(a, { emit: t }) {
+    const e = a, n = y(() => e.data.filter((i) => !i.hidden)), s = (i, u) => {
+      const r = (d, f = []) => {
+        for (const h of f) {
+          if (h.id.toString() === d.toString())
+            return h;
+          if (h.children?.length) {
+            const x = r(d, h.children);
+            if (x)
+              return x;
           }
         }
       };
-      return i(u, o);
-    }, l = (o) => {
-      const u = r(s.value, o);
+      return r(u, i);
+    }, l = (i) => {
+      const u = s(n.value, i);
       u && t("select", u);
     };
-    return (o, u) => (f(), g(m(ne), D({ class: "x-menu" }, n, { onSelect: l }), {
-      default: _(() => [
-        (f(!0), M(O, null, R(s.value, (i) => (f(), g(m(V), { item: i }, null, 8, ["item"]))), 256))
+    return (i, u) => (c(), m(o(Pt), Q({ class: "x-menu" }, i.$attrs, { onSelect: l }), {
+      default: p(() => [
+        (c(!0), A(q, null, we(n.value, (r) => (c(), m(o(mt), {
+          item: { ...r, icon: r.icon || o(ot) },
+          defaultIcon: e.defaultIcon,
+          subMenu: e.subMenu
+        }, null, 8, ["item", "defaultIcon", "subMenu"]))), 256))
       ]),
       _: 1
     }, 16));
   }
-}), Se = { class: "x-simple-mask__brand" }, xe = { class: "x-simple-mask__aciton" }, be = /* @__PURE__ */ w({
+}), An = { class: "x-simple-mask__brand" }, Dn = { class: "x-simple-mask__aciton" }, Vn = /* @__PURE__ */ D({
   name: "XSimpleMask",
   __name: "SimpleMask",
   props: {
@@ -200,54 +258,54 @@ const he = {
     }) },
     menu: {}
   },
-  setup(e, { expose: t }) {
-    const n = e, s = ae(), r = ie(), l = S(() => r.params.id), o = () => {
-      const i = n.project.home;
-      i && s.push(i);
-    }, u = (i) => {
-      const a = i?.id;
-      if (a) {
-        const c = `${n.preview ? "/preview" : n.project.page}/${a}`;
-        s.push(c);
+  setup(a, { expose: t }) {
+    const e = a, n = ke(), s = Ve(), l = y(() => s.params.id), i = () => {
+      const r = e.project.home;
+      r && n.push(r);
+    }, u = (r) => {
+      const d = r?.id;
+      if (d) {
+        const h = `${e.preview ? "/preview" : e.project.page}/${d}`;
+        n.push(h);
       }
     };
     return t({
-      goHome: o
-    }), (i, a) => (f(), g(m(A), { class: "x-simple-mask" }, {
-      default: _(() => [
-        y(m(se), { class: "x-simple-mask__header" }, {
-          default: _(() => [
-            x("div", Se, [
-              x("span", {
+      goHome: i
+    }), (r, d) => (c(), m(o(Ne), { class: "x-simple-mask" }, {
+      default: p(() => [
+        b(o(Rt), { class: "x-simple-mask__header" }, {
+          default: p(() => [
+            R("div", An, [
+              R("span", {
                 class: "x-simple-mask__logo",
-                onClick: o
+                onClick: i
               }, [
-                b(i.$slots, "logo", {}, () => [
-                  q(E(n.project.name), 1)
+                z(r.$slots, "logo", {}, () => [
+                  N(O(e.project.name), 1)
                 ])
               ])
             ]),
-            x("div", xe, [
-              b(i.$slots, "action")
+            R("div", Dn, [
+              z(r.$slots, "action")
             ])
           ]),
           _: 3
         }),
-        y(m(A), null, {
-          default: _(() => [
-            y(m(oe), { class: "x-simple-mask__aside" }, {
-              default: _(() => [
-                y(m(T), D(n.menu, {
+        b(o(Ne), null, {
+          default: p(() => [
+            b(o($t), { class: "x-simple-mask__aside" }, {
+              default: p(() => [
+                b(o(G), Q(e.menu, {
                   "default-active": l.value,
                   onSelect: u
                 }), null, 16, ["default-active"])
               ]),
               _: 1
             }),
-            y(m(le), { class: "x-simple-mask__main" }, {
-              default: _(() => [
-                b(i.$slots, "default", {}, () => [
-                  y(m(ue))
+            b(o(Ft), { class: "x-simple-mask__main" }, {
+              default: p(() => [
+                z(r.$slots, "default", {}, () => [
+                  b(o(it))
                 ])
               ]),
               _: 3
@@ -255,122 +313,2557 @@ const he = {
           ]),
           _: 3
         }),
-        i.$slots.footer ? (f(), g(m(re), {
+        r.$slots.footer ? (c(), m(o(Ot), {
           key: 0,
           class: "x-simple-mask__footer",
           height: "40px"
         }, {
-          default: _(() => [
-            b(i.$slots, "footer")
+          default: p(() => [
+            z(r.$slots, "footer")
           ]),
           _: 3
-        })) : N("", !0)
+        })) : v("", !0)
       ]),
       _: 3
     }));
   }
-}), we = [_e, k, T, be];
-function Ie(e) {
-  return S(() => e ? typeof e == "string" || e.setup || e.render || K(e) ? {
-    icon: e
-  } : e : null);
+}), gt = {
+  /**
+   * 动作名称标识
+   */
+  name: {
+    type: String
+  },
+  /**
+   * 动作标题文本
+   */
+  label: {
+    type: String
+  },
+  /**
+   * 动作值，用来传输数据
+   */
+  value: {
+    type: [String, Number, Object, Array, Boolean]
+  },
+  /**
+   *  图标配置
+   */
+  icon: {
+    type: [String, Object]
+  },
+  /**
+   * 模式
+   */
+  mode: {
+    type: String,
+    default: "button"
+  },
+  /**
+   * 下拉菜单配置
+   */
+  menus: {
+    type: Array
+  },
+  /**
+   *  tooltip 配置
+   */
+  tooltip: {
+    type: [String, Object]
+  },
+  /**
+   * Badge 配置
+   */
+  badge: {
+    type: [String, Number, Object]
+  },
+  /**
+   * ElDropdown 组件配置
+   */
+  dropdown: {
+    type: Object
+  },
+  /**
+   * ElButton 组件配置，mode为button时有效
+   */
+  button: {
+    type: Object
+  },
+  /**
+   * 禁用
+   */
+  disabled: {
+    type: [Boolean, Function]
+  },
+  /**
+   * 尺寸
+   */
+  size: {
+    type: String,
+    default: "default"
+  },
+  /**
+   * 颜色类型
+   */
+  type: {
+    type: String,
+    default: "primary"
+  },
+  /**
+   * icon 背景设置，当 mode为 icon 时有效
+   */
+  background: {
+    type: String,
+    default: "always"
+  },
+  /**
+   * icon 背景样式圆形，当 mode为 icon 时有效
+   */
+  circle: {
+    type: Boolean
+  }
+};
+function Pn(a) {
+  return y(() => {
+    const t = a.tooltip;
+    if (t)
+      return typeof t == "string" ? { content: t } : t;
+  });
 }
-function Re(e) {
-  const t = Ie(e);
-  return t.value ? w({ render: () => J(k, t.value) }) : null;
+function Rn(a) {
+  return y(() => {
+    const t = a.badge;
+    if (t)
+      return typeof t == "object" ? t : { value: t };
+  });
 }
-function Pe(e, t = {}) {
-  const n = t.edge || 40, s = S(() => t.selector ? typeof t.selector == "string" ? m(e)?.querySelector(t.selector) : m(e) : null), r = S(() => m(t.wrapper)), { x: l, y: o, isDragging: u } = ce(e, {
-    preventDefault: !1,
-    stopPropagation: !1,
-    handle: t.selector ? s : null,
-    ...pe(t, ["handle", "edge"])
-  }), i = (a, p, c, d, h, I) => {
-    const v = [-c.value + n, d.value - n];
-    p.value = Math.min(Math.max(p.value, I.value), h.value - n), a.value < v[0] && (a.value = v[0]), a.value > v[1] && (a.value = v[1]);
-  };
-  if (t.wrapper) {
-    const { width: a, height: p, top: c } = P(r), { width: d } = me(e);
-    z([l, o], () => {
-      i(l, o, d, a, p, c);
+function $n(a) {
+  return y(() => {
+    const { dropdown: t, menus: e } = a;
+    if (e && e.length > 0)
+      return Object.assign(
+        { popperClass: "x-action__menus", size: a.size },
+        t || {}
+      );
+  });
+}
+function Fn(a) {
+  const t = _e();
+  return y(() => {
+    const e = o(a);
+    if (e)
+      if (typeof e == "string" || e.setup || e.render || xt(e)) {
+        const n = t?.appContext.app;
+        return {
+          icon: typeof e == "string" && n?.component(e) || e
+        };
+      } else
+        return e;
+    return null;
+  });
+}
+function be(a) {
+  const t = Fn(a);
+  return t.value ? Ae(D({ render: () => K(oe, t.value) })) : null;
+}
+function Pe(a, t) {
+  return y(() => {
+    const e = o(a);
+    return typeof e == "function" ? e(t) : !!e;
+  });
+}
+const On = { key: 0 }, jn = /* @__PURE__ */ D({
+  __name: "Trigger",
+  props: gt,
+  emits: ["click"],
+  setup(a, { emit: t }) {
+    const e = a, n = be(he(e, "icon")), s = Pe(he(e, "disabled")), l = y(() => ({
+      [`is-${e.mode}`]: !!e.mode,
+      [`is-${e.type}`]: !!e.type,
+      [`is-${e.size}`]: !!e.size && e.size !== "default",
+      [`is-background-${e.background}`]: e.mode === "icon" && !!e.background,
+      "is-disabled": !!e.disabled,
+      "is-circle": !!e.circle
+    })), i = () => {
+      t("click");
+    };
+    return (u, r) => e.mode === "button" ? (c(), m(o(ve), Q({
+      key: 0,
+      icon: o(n),
+      type: e.type,
+      size: e.size,
+      disabled: o(s)
+    }, e.button, { onClick: i }), {
+      default: p(() => [
+        N(O(u.label), 1)
+      ]),
+      _: 1
+    }, 16, ["icon", "type", "size", "disabled"])) : (c(), A("div", {
+      key: 1,
+      class: U(["x-action__inner", l.value]),
+      onClick: i
+    }, [
+      (c(), m(Y(o(n)))),
+      u.label ? (c(), A("span", On, O(u.label), 1)) : v("", !0)
+    ], 2));
+  }
+}), W = /* @__PURE__ */ D({
+  name: "XAction",
+  __name: "Action",
+  props: gt,
+  emits: ["click", "command"],
+  setup(a, { emit: t }) {
+    const e = a, n = zt(), s = Pn(e), l = Rn(e), i = $n(e), u = Pe(he(e, "disabled")), r = y(() => ({
+      [`x-action--${e.mode}`]: !!e.mode
+    })), d = () => {
+      t("click", e);
+    }, f = (_) => {
+      const E = e.menus?.find((B) => B.command === _);
+      E && t("command", E);
+    }, h = (_) => K(Ie, l.value, () => [].concat(_)), x = (_) => K(
+      jt,
+      { ...i.value, disabled: u.value, onCommand: f },
+      {
+        default: () => [_],
+        dropdown: () => [
+          K(
+            Nt,
+            () => (e.menus || []).map((E) => K(
+              Ut,
+              E,
+              () => n.item ? n.item({ item: E }) : E.label
+            ))
+          )
+        ]
+      }
+    ), V = (_) => K(Xt, { ...s.value, disabled: u.value }, () => [
+      _
+    ]), k = y(() => {
+      let _ = n.default ? n.default()[0] : K(Ae(jn), { ...e, onClick: d });
+      return l.value && (_ = h(_)), i.value && (_ = x(_)), s.value && (_ = V(_)), _;
     });
+    return (_, E) => (c(), A("div", {
+      class: U(["x-action", r.value])
+    }, [
+      (c(), m(Y(k.value)))
+    ], 2));
   }
-  return z(u, (a) => {
-    a ? document.body.classList.add(X) : document.body.classList.remove(X);
+}), Nn = {
+  /**
+   * 动作项
+   */
+  items: {
+    type: Array
+  },
+  /**
+   * 模式
+   */
+  mode: {
+    type: String,
+    default: "button"
+  },
+  /**
+   * 尺寸
+   */
+  size: {
+    type: String,
+    default: "default"
+  },
+  /**
+   * 颜色类型
+   */
+  type: {
+    type: String,
+    default: "primary"
+  },
+  /**
+   * icon 背景设置，当 mode为 icon 时有效
+   */
+  background: {
+    type: String,
+    default: "always"
+  },
+  /**
+   * icon 背景样式圆形，当 mode为 icon 时有效
+   */
+  circle: {
+    type: Boolean
+  },
+  /**
+   * 禁用
+   */
+  disabled: {
+    type: [Boolean, Function]
+  },
+  /**
+   *  tooltip 配置
+   */
+  tooltip: {
+    type: Object
+  },
+  /**
+   * Badge 配置
+   */
+  badge: {
+    type: Object
+  },
+  /**
+   * ElDropdown 组件配置
+   */
+  dropdown: {
+    type: Object
+  },
+  /**
+   * ElButton 组件配置，mode为button时有效
+   */
+  button: {
+    type: Object
+  }
+}, Re = /* @__PURE__ */ D({
+  name: "XActionBar",
+  __name: "ActionBar",
+  props: Nn,
+  emits: ["click", "command"],
+  setup(a, { emit: t }) {
+    const e = a, n = y(() => (e.items || []).map((i) => i === "|" ? i : {
+      ...i,
+      badge: i.badge ? {
+        ...e.badge,
+        ...typeof i.badge == "object" ? i.badge || {} : { value: i.badge }
+      } : void 0,
+      tooltip: i.tooltip ? {
+        ...e.tooltip,
+        ...typeof i.tooltip == "object" ? i.tooltip || {} : { content: i.tooltip }
+      } : void 0
+    })), s = (i) => {
+      t("click", i);
+    }, l = (i, u) => {
+      t("command", i, u);
+    };
+    return (i, u) => (c(), m(o(M), {
+      class: "x-action-bar",
+      align: "center"
+    }, {
+      default: p(() => [
+        (c(!0), A(q, null, we(n.value, (r) => (c(), A(q, null, [
+          r === "|" ? (c(), m(o(ue), {
+            key: 0,
+            direction: "vertical",
+            class: "x-action-bar__divider"
+          })) : (c(), m(o(W), Q({
+            key: 1,
+            mode: e.mode,
+            size: e.size,
+            type: e.type,
+            circle: e.circle,
+            background: e.background,
+            button: e.button,
+            dropdown: e.dropdown,
+            disabled: o(Pe)(e.disabled, r).value
+          }, r, {
+            onClick: s,
+            onCommand: (d) => l(r, d)
+          }), null, 16, ["mode", "size", "type", "circle", "background", "button", "dropdown", "disabled", "onCommand"]))
+        ], 64))), 256))
+      ]),
+      _: 1
+    }));
+  }
+}), Un = {
+  /**
+   * 组件渲染html标签
+   */
+  tag: {
+    type: String,
+    default: "div"
+  },
+  /**
+   * 宽高自适应
+   */
+  fit: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 指定高度，fit 为true 失效
+   */
+  width: {
+    type: [String, Number]
+  },
+  /**
+   * 指定高度，fit 为true失效
+   */
+  height: {
+    type: [String, Number]
+  },
+  /**
+   * 开启flex布局
+   */
+  flex: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   *  inline-flex
+   */
+  inline: {
+    type: Boolean
+  },
+  /**
+   * flex主轴方向
+   */
+  direction: {
+    type: String,
+    default: "row"
+  },
+  /**
+   * 换行
+   */
+  wrap: {
+    type: String,
+    default: "nowrap"
+  },
+  /**
+   * 主轴上的对齐方式。
+   */
+  justify: {
+    type: String,
+    default: "flex-start"
+  },
+  /**
+   * 交叉轴上对齐方式
+   */
+  align: {
+    type: String,
+    default: "flex-start"
+  },
+  /**
+   * 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
+   */
+  alignContent: {
+    type: String,
+    default: "stretch"
+  },
+  /**
+   * 放大
+   */
+  grow: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 缩小
+   */
+  shrink: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性
+   */
+  alignSelf: {
+    type: String,
+    default: "auto"
+  },
+  /**
+   * css overflow
+   */
+  overflow: {
+    type: String
+  },
+  /**
+   * 内边距
+   */
+  padding: {
+    type: Boolean,
+    default: !1
+  }
+}, M = /* @__PURE__ */ D({
+  name: "XContainer",
+  __name: "Container",
+  props: Un,
+  setup(a) {
+    const t = a, e = _e(), n = y(() => {
+      const i = e?.parent;
+      if (!i)
+        return !1;
+      const u = i.proxy;
+      return u.$options.name === "XContainer" || !!u.flex;
+    }), s = y(() => ({
+      "is-fit": t.fit,
+      "is-flex": t.flex && !t.inline,
+      "is-inline-flex": t.flex && t.inline,
+      [`is-direction-${t.direction}`]: t.flex && t.direction !== "row",
+      [`is-wrap-${t.wrap}`]: t.flex && t.wrap !== "nowrap",
+      [`is-justify-${t.justify}`]: t.flex && t.justify !== "flex-start",
+      [`is-align-${t.align}`]: t.flex && t.align !== "flex-start",
+      [`is-align-content-${t.alignContent}`]: t.flex && t.alignContent !== "stretch",
+      "is-grow": t.grow ?? n.value,
+      "is-shrink": n.value && t.shrink,
+      [`is-align-self-${t.alignSelf}`]: n.value && t.alignSelf !== "auto",
+      [`is-overflow-${t.overflow}`]: !!t.overflow,
+      "is-padding": !!t.padding
+    })), l = y(() => {
+      const { width: i, height: u, fit: r } = t;
+      return r ? null : {
+        width: i ? Xe(i) : void 0,
+        height: u ? Xe(u) : void 0
+      };
+    });
+    return (i, u) => (c(), m(Y(t.tag), {
+      class: U(["x-container", s.value]),
+      style: Ee(l.value)
+    }, {
+      default: p(() => [
+        z(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+}), Xn = {
+  size: {
+    type: String,
+    default: "default"
+  },
+  content: {
+    type: String,
+    default: ""
+  },
+  subtitle: {
+    type: String
+  },
+  icon: {
+    type: [String, Object]
+  },
+  border: {
+    type: Boolean
+  },
+  more: {
+    type: Boolean
+  }
+}, Hn = {
+  key: 2,
+  class: "x-header__subtitle"
+}, Ln = {
+  key: 0,
+  class: "x-header__actions"
+}, ht = /* @__PURE__ */ D({
+  name: "XHeader",
+  inheritAttrs: !1,
+  __name: "Header",
+  props: Xn,
+  setup(a) {
+    const t = a, e = Je(), n = be(he(t, "icon")), s = y(() => ({
+      [`is-size-${t.size}`]: !!t.size && t.size !== "default",
+      "is-border": t.border,
+      "is-pointer": !!e.onClick
+    }));
+    return (l, i) => (c(), m(o(M), {
+      class: U(["x-header", s.value]),
+      justify: "space-between",
+      align: "center"
+    }, {
+      default: p(() => [
+        b(o(M), {
+          align: "center",
+          class: U(["x-header__wrapper", s.value]),
+          grow: ""
+        }, {
+          default: p(() => [
+            o(n) ? (c(), m(Y(o(n)), {
+              key: 0,
+              class: "x-header__icon"
+            })) : v("", !0),
+            R("span", Q({ class: "x-header__content" }, l.$attrs), [
+              z(l.$slots, "default", {}, () => [
+                N(O(t.content), 1)
+              ])
+            ], 16),
+            t.more ? (c(), m(o(oe), {
+              key: 1,
+              class: "x-header__more",
+              icon: o(Jt)
+            }, null, 8, ["icon"])) : v("", !0),
+            t.subtitle || l.$slots.subtitle ? (c(), A("span", Hn, [
+              z(l.$slots, "subtitle", {}, () => [
+                N(O(t.subtitle), 1)
+              ])
+            ])) : v("", !0)
+          ]),
+          _: 3
+        }, 8, ["class"]),
+        l.$slots.actions ? (c(), A("div", Ln, [
+          z(l.$slots, "actions")
+        ])) : v("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Wn = {
+  /**
+   * 宽高自适应
+   */
+  fit: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 指定高度，fit 为true 失效
+   */
+  width: {
+    type: [String, Number]
+  },
+  /**
+   * 指定高度，fit 为true失效
+   */
+  height: {
+    type: [String, Number]
+  },
+  /**
+   * 显示边框
+   */
+  border: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * 圆角
+   */
+  radius: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * 卡片模式
+   */
+  card: {
+    type: Boolean
+  },
+  /**
+   * 尺寸
+   */
+  size: {
+    type: String
+  },
+  /**
+   * 阴影设置
+   */
+  shadow: {
+    type: String
+  },
+  /**
+   * 头部设置
+   */
+  header: {
+    type: [String, Object]
+  },
+  bodyPadding: {
+    type: Boolean,
+    default: !0
+  },
+  footerPadding: {
+    type: Boolean,
+    default: !0
+  },
+  body: {
+    type: Object
+  },
+  footer: {
+    type: Object
+  }
+}, vt = /* @__PURE__ */ D({
+  name: "XPanel",
+  __name: "Panel",
+  props: Wn,
+  setup(a, { expose: t }) {
+    const e = a, n = $(), s = y(() => ({
+      "x-panel--card": !!e.card,
+      "x-panel--default": !e.card,
+      [`is-${e.size}`]: !!e.size && e.size !== "default",
+      "is-border": !!e.border,
+      "is-radius": !!e.radius,
+      [`is-shadow-${e.shadow}`]: !!e.shadow && e.shadow !== "none"
+    })), l = y(() => e.header === null ? null : typeof e.header == "string" ? {
+      content: e.header,
+      size: e.size
+    } : {
+      ...e.header,
+      size: e.size
+    }), i = y(() => e.fit || e.height ? "auto" : void 0);
+    return t({
+      bodyRef: n
+    }), (u, r) => (c(), m(o(M), {
+      class: U(["x-panel", s.value]),
+      direction: "column",
+      fit: e.fit,
+      width: e.width,
+      height: e.height
+    }, {
+      default: p(() => [
+        l.value ? (c(), m(o(M), {
+          key: 0,
+          flex: !1,
+          class: "x-panel__header"
+        }, {
+          default: p(() => [
+            z(u.$slots, "header", {}, () => [
+              b(o(ht), St(Ct(l.value)), {
+                default: p(() => [
+                  z(u.$slots, "title")
+                ]),
+                actions: p(() => [
+                  z(u.$slots, "actions")
+                ]),
+                _: 3
+              }, 16)
+            ])
+          ]),
+          _: 3
+        })) : v("", !0),
+        b(o(M), Q({
+          ref_key: "bodyRef",
+          ref: n,
+          flex: !1,
+          overflow: i.value,
+          grow: "",
+          padding: "",
+          class: "x-panel__body"
+        }, e.body), {
+          default: p(() => [
+            z(u.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["overflow"]),
+        u.$slots.footer ? (c(), m(o(M), Q({
+          key: 1,
+          flex: !1,
+          padding: "",
+          class: "x-panel__footer"
+        }, e.footer), {
+          default: p(() => [
+            z(u.$slots, "footer")
+          ]),
+          _: 3
+        }, 16)) : v("", !0)
+      ]),
+      _: 3
+    }, 8, ["class", "fit", "width", "height"]));
+  }
+}), Le = "user-select-none";
+class We {
+  constructor(t, e = {}) {
+    this.el = t, this.options = e, this.scope = Ke(), this.scope.run(() => {
+      this.init();
+    });
+  }
+  scope;
+  dragging = !1;
+  getHandle() {
+    const { selector: t, handle: e } = this.options;
+    return t ? this.el.querySelector(t) : e;
+  }
+  getTarget() {
+    const { target: t = "body" } = this.options;
+    return typeof t == "string" ? document.querySelector(t) : o(t) || document.body;
+  }
+  init() {
+    const { el: t, options: e } = this, { disabled: n, delay: s = 150, onStart: l, onEnd: i } = e;
+    if (n)
+      return;
+    let u = null;
+    const r = this.getHandle(), d = this.getTarget();
+    let f = t.getBoundingClientRect(), h = null;
+    const { x, y: V } = dn(t, {
+      initialValue: { x: f.x, y: f.y },
+      ...e,
+      handle: r,
+      onStart: (k, _) => {
+        document.body.classList.add(Le), clearTimeout(u), u = setTimeout(() => {
+          this.dragging = !0, f = t.getBoundingClientRect(), h = d?.getBoundingClientRect(), l && l(k, _);
+        }, s);
+      },
+      onEnd: (k, _) => {
+        if (clearTimeout(u), document.body.classList.remove(Le), this.dragging && h) {
+          this.dragging = !1;
+          const { x: E, y: B } = k, g = this.getPosition(h, f, E, B);
+          i && i(g, _), h = null;
+        }
+      }
+    });
+    ne([x, V], () => {
+      if (this.dragging && h) {
+        const k = this.getPosition(h, f, x.value, V.value);
+        t.style.left = `${k.x}px`, t.style.top = `${k.y}px`;
+      }
+    });
+  }
+  getPosition(t, e, n, s) {
+    const { edge: l = 50 } = this.options, i = -e.width + l, u = t.width - l, r = 0, d = t.height - l, f = Math.min(u, Math.max(n, i)), h = Math.min(d, Math.max(s, r));
+    return {
+      x: f,
+      y: h
+    };
+  }
+  destory() {
+    this.scope.stop();
+  }
+}
+const Qn = {
+  mounted(a, t) {
+    const e = t.value || {}, n = new We(a, e);
+    a.__draggable__ = n;
+  },
+  updated(a, t) {
+    const e = t.value || {};
+    let n = a.__draggable__;
+    n && !ct(n.options, e) && (n.destory(), a.__draggable__ = new We(a, e));
+  },
+  unmounted(a) {
+    const t = a.__draggable__;
+    t && (t.destory(), a.__draggable__ = null);
+  }
+}, Me = "user-select-none";
+class Qe {
+  constructor(t, e = {}) {
+    this.el = t, this.options = e, this.scope = Ke(), this.scope.run(() => {
+      this.init();
+    });
+  }
+  scope;
+  resizing = $(!1);
+  direction = $("");
+  MIE = null;
+  cleanMousedown;
+  cleanMouseup;
+  init() {
+    const { el: t, options: e } = this, { disabled: n, onStart: s, onEnd: l } = e;
+    if (n)
+      return;
+    this.MIE = pn(t), this.cleanMousedown = ye(document, "mousedown", () => {
+      this.direction?.value && this.MIE && (this.resizing.value = !0, t.classList.add("is-resizing", `is-${this.direction.value}-resizing`), s && s(this.direction.value, this.MIE));
+    }), this.cleanMouseup = ye(document, "mouseup", () => {
+      this.resizing.value && this.direction?.value && this.MIE && (t.classList.remove(
+        "is-resizing",
+        `is-${this.direction.value}-resizing`
+      ), l && l(this.direction.value, this.MIE)), this.resizing.value = !1;
+    }), ne(this.direction, (r) => {
+      const d = document.body;
+      d.style.cursor = r ? `${r}-resize` : "", r ? d.classList.add(Me) : d.classList.remove(Me);
+    });
+    const { x: i, y: u } = this.MIE;
+    ne([i, u], () => {
+      this.resizing.value ? this.resize() : this.direction.value = this.getDirection();
+    });
+  }
+  resize() {
+    const { MIE: t, direction: e, resizing: n, options: s, el: l } = this, i = e?.value || "";
+    if (!t || !n.value || !i)
+      return;
+    const { x: u, y: r, elementX: d, elementY: f, elementHeight: h, elementWidth: x } = t, { onResizing: V } = s, {
+      minWidth: k = 0,
+      minHeight: _ = 0,
+      maxWidth: E = 99999,
+      maxHeight: B = 99999
+    } = s;
+    if (i.includes("e")) {
+      const g = Math.min(Math.max(d.value, k), E);
+      l.style.width = `${g}px`;
+    }
+    if (i.includes("s")) {
+      const g = Math.min(Math.max(f.value, _), B);
+      l.style.height = `${g}px`;
+    }
+    if (i.includes("w")) {
+      const g = Math.min(
+        Math.max(x.value - d.value, k),
+        E
+      );
+      l.style.width = `${g}px`, l.style.left = `${u.value}px`;
+    }
+    if (i.includes("n")) {
+      const g = Math.min(
+        Math.max(h.value - f.value, _),
+        B
+      );
+      this.el.style.height = `${g}px`, this.el.style.top = `${r.value}px`;
+    }
+    V && V(i, t);
+  }
+  getDirection() {
+    if (!this.MIE)
+      return "";
+    const { elementX: t, elementY: e, elementHeight: n, elementWidth: s, isOutside: l } = this.MIE;
+    if (l.value)
+      return "";
+    const { dirs: i = ["n", "s", "w", "e"], edge: u = 5 } = this.options;
+    let r = "";
+    return i.includes("n") && e.value <= u ? r += "n" : i.includes("s") && e.value > n.value - u && (r += "s"), i.includes("w") && t.value <= u ? r += "w" : i.includes("e") && t.value > s.value - u && (r += "e"), r;
+  }
+  destory() {
+    const t = document.body;
+    t.style.cursor = "", t.classList.remove(Me), this.cleanMousedown && this.cleanMousedown(), this.cleanMouseup && this.cleanMouseup(), this.MIE?.stop(), this.scope.stop();
+  }
+}
+const yt = {
+  mounted(a, t) {
+    const e = t.value || {}, n = new Qe(a, e);
+    a.__resizable__ = n;
+  },
+  updated(a, t) {
+    const e = t.value || {};
+    let n = a.__resizable__;
+    n && !ct(n.options, e) && (n.destory(), a.__resizable__ = new Qe(a, e));
+  },
+  unmounted(a) {
+    const t = a.__resizable__;
+    t && (t.destory(), a.__resizable__ = null);
+  }
+}, Zn = {
+  modelValue: {
+    type: Boolean,
+    default: !0
+  },
+  title: {
+    type: String
+  },
+  subtitle: {
+    type: String
+  },
+  icon: {
+    type: [String, Object]
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  width: {
+    type: [Number, String],
+    default: "70%"
+  },
+  height: {
+    type: [Number, String],
+    default: "70%"
+  },
+  left: {
+    type: [Number, String]
+  },
+  top: {
+    type: [Number, String]
+  },
+  modal: {
+    type: Boolean,
+    default: !0
+  },
+  draggable: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  resizable: {
+    type: [Boolean, Object]
+  },
+  closable: {
+    type: Boolean,
+    default: !0
+  },
+  maximizable: {
+    type: Boolean,
+    default: !0
+  },
+  minimizable: {
+    type: Boolean,
+    default: !0
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  content: {
+    type: Object
+  },
+  src: {
+    type: String
+  },
+  componentInstance: {
+    type: Object
+  },
+  beforeClose: {
+    type: Function
+  },
+  submit: {
+    type: [Boolean, String]
+  },
+  cancel: {
+    type: [Boolean, String]
+  },
+  bodyPadding: {
+    type: Boolean,
+    default: !0
+  },
+  primary: {
+    type: Boolean
+  }
+};
+let ie = 1e3;
+function Jn(a, t) {
+  const { width: e, height: n } = rt(t), s = Ye({
+    mode: a.mode || "normal",
+    wrapperWidth: 0,
+    wrapperHeight: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    zIndex: ++ie,
+    dragging: !1,
+    resizing: !1
+  });
+  return ne([e, n], ([l, i]) => {
+    s.wrapperWidth = l, s.wrapperHeight = i, s.width = pe(a.width, l), s.height = pe(a.height, i), s.left = a.left ? pe(a.left, l) - s.width / 2 : Math.max(Math.floor((l - s.width) / 2), 0), s.top = a.top ? pe(a.top, i) : Math.max(Math.floor((i - s.height) / 2), 0);
+  }), ne(s, (l) => {
+    ie = Math.max(l.zIndex, ie);
   }), {
-    x: l,
-    y: o,
-    isDragging: u
+    state: s,
+    normal: y(() => s.mode === "normal"),
+    maximized: y(() => s.mode === "maximized"),
+    minimized: y(() => s.mode === "minimized")
+  };
+}
+function Kn(a, t) {
+  const e = y(() => {
+    const { width: i, height: u, top: r, left: d, zIndex: f } = t;
+    return {
+      width: `${i}px`,
+      height: `${u}px`,
+      top: `${r}px`,
+      left: `${d}px`,
+      zIndex: f
+    };
+  }), n = y(() => ({
+    [`is-${t.mode}`]: !!t.mode,
+    "is-draggable": !!a.draggable,
+    "is-resizable": !!a.resizable,
+    "is-primary": !!a.primary
+  })), s = y(() => ({
+    [`is-${t.mode}`]: !!t.mode,
+    "is-dragging": t.dragging,
+    "is-resizing": t.resizing
+  })), l = y(() => ({
+    zIndex: t.zIndex
+  }));
+  return {
+    styles: e,
+    classes: n,
+    wrapperClass: s,
+    modalStyle: l
+  };
+}
+function Yn(a, t, e) {
+  const n = (f) => {
+    t.mode = f, ["maximized", "minimized", "normal"].includes(f) && e(f), e("modeChange", f);
+  }, s = async () => {
+    (!a.beforeClose || await a.beforeClose()) && (e("update:modelValue", !1), e("close"), e("destroy"));
+  };
+  return {
+    close: s,
+    changeMode: n,
+    show: () => n("normal"),
+    hide: () => n("minimized"),
+    active: () => {
+      t.zIndex = Math.max(t.zIndex, ++ie);
+    },
+    submit: () => e("submit"),
+    cancel: () => {
+      e("cancel"), s();
+    }
   };
 }
-function Ee(e, t, n) {
-  const { dirs: s = ["n", "s", "w", "e"], edge: r = 5 } = e;
-  let l = "";
-  const { left: o, top: u, width: i, height: a } = n, { clientX: p, clientY: c } = t;
-  return s.includes("n") && c > u.value - r && c < u.value + r ? l += "n" : s.includes("s") && c < u.value + a.value + r && c > u.value + a.value - r && (l += "s"), s.includes("w") && p > o.value - r && p < o.value + r ? l += "w" : s.includes("e") && p < o.value + i.value + r && p > o.value + i.value - r && (l += "e"), l;
+function Gn(a, t, e, n) {
+  return y(() => {
+    const s = typeof a.draggable == "boolean" ? !a.draggable : !!a.draggable?.disabled;
+    return {
+      ...ut(a.draggable) ? a.draggable : {},
+      disabled: s,
+      target: n,
+      selector: ".x-panel__header",
+      onStart(l) {
+        t.dragging = !0, t.zIndex = Math.max(t.zIndex, ++ie), e("dragStart", l);
+      },
+      onMove(l) {
+        e("dragging", l);
+      },
+      onEnd(l) {
+        if (t.mode === "maximized")
+          return;
+        const { x: i, y: u } = l;
+        t.left = i, t.top = u, t.dragging = !1, e("dragEnd", l);
+      }
+    };
+  });
 }
-function ke(e, t, n, s) {
-  if (!n)
+function qn(a, t, e) {
+  return y(() => {
+    const n = typeof a.resizable == "boolean" ? !a.resizable : !!a.resizable?.disabled;
+    return {
+      minWidth: 200,
+      minHeight: 150,
+      ...ut(a.resizable) ? a.resizable : {},
+      disabled: n,
+      dirs: ["e", "s", "w"],
+      onStart(s, l) {
+        t.resizing = !0, t.zIndex = Math.max(t.zIndex, ++ie), e("resizeStart", s, l);
+      },
+      onResizing(s, l) {
+        e("resizing", s, l);
+      },
+      onEnd(s, l) {
+        t.left = l.elementPositionX.value, t.top = l.elementPositionY.value, t.width = l.elementWidth.value, t.height = l.elementHeight.value, t.resizing = !1, e("resizeEnd", s, l);
+      }
+    };
+  });
+}
+function eo(a, t) {
+  const e = a.componentInstance;
+  if (!e)
     return;
-  const { minWidth: r = 0, minHeight: l = 0, maxWidth: o, maxHeight: u } = e, { clientX: i, clientY: a } = t, { left: p, top: c, width: d, height: h } = s;
-  n.includes("e") && (d.value = Math.max(i - p.value, r)), n.includes("w") && (d.value = Math.max(d.value + p.value - i, r), p.value = i), n.includes("s") && (h.value = Math.max(a - c.value, l)), n.includes("n") && (h.value = Math.max(h.value + c.value - a, l), c.value = a), o && (d.value = Math.min(d.value, o)), u && (h.value = Math.min(h.value, u)), e.onResizing && e.onResizing(s);
+  let n = null;
+  return Tt(() => {
+    const s = o(t), l = o(s?.bodyRef);
+    n = e.$el, l && l.$el && l.$el.appendChild(n);
+  }), Mt(() => {
+    n && n.parentNode && n.parentNode.removeChild(n);
+  }), {
+    componentInstance: e
+  };
+}
+const to = ["src"], bt = /* @__PURE__ */ D({
+  name: "XDialog",
+  __name: "Dialog",
+  props: Zn,
+  emits: ["update:modelValue", "open", "close", "destroy", "maximized", "minimized", "normal", "modeChange", "dragStart", "dragging", "dragEnd", "resizeStart", "resizeEnd", "resizing", "submit", "cancel"],
+  setup(a, { expose: t, emit: e }) {
+    const n = a, s = _e(), l = $(), i = $(), { state: u, maximized: r, minimized: d, normal: f } = Jn(n, l), { styles: h, classes: x, wrapperClass: V, modalStyle: k } = Kn(n, u), { changeMode: _, active: E, close: B, show: g, hide: I, submit: C, cancel: F } = Yn(
+      n,
+      u,
+      e
+    ), X = Gn(n, u, e, l), ee = qn(n, u, e), te = eo(n, i);
+    return Ge(async () => {
+      n.modelValue && (await le(), s && e("open", s));
+    }), t({
+      panelRef: i,
+      state: u,
+      maximized: r,
+      minimized: d,
+      changeMode: _,
+      show: g,
+      hide: I,
+      submit: C,
+      cancel: F,
+      componentInstance: te
+    }), (j, H) => n.modelValue ? (c(), m(qe, {
+      key: 0,
+      to: "body"
+    }, [
+      R("div", {
+        ref_key: "wrapper",
+        ref: l,
+        class: U(["x-dialog__wrapper", o(V)])
+      }, [
+        n.modal ? (c(), A("div", {
+          key: 0,
+          class: "x-dialog__modal",
+          style: Ee(o(k))
+        }, null, 4)) : v("", !0),
+        L((c(), m(o(vt), {
+          ref_key: "panelRef",
+          ref: i,
+          class: U(["x-dialog", o(x)]),
+          card: "",
+          shadow: "always",
+          header: { icon: n.icon, subtitle: n.subtitle },
+          width: "800px",
+          height: "600px",
+          footer: { justify: "space-between", flex: !0, align: "center" },
+          style: Ee(o(h)),
+          size: n.size,
+          body: { padding: n.bodyPadding },
+          onClick: o(E)
+        }, et({
+          title: p(() => [
+            N(O(n.title), 1)
+          ]),
+          actions: p(() => [
+            z(j.$slots, "actions"),
+            n.minimizable ? (c(), m(o(W), {
+              key: 0,
+              icon: o(ln),
+              size: n.size,
+              mode: "icon",
+              type: "primary",
+              background: "hover",
+              onClick: H[0] || (H[0] = (ae) => o(_)("minimized"))
+            }, null, 8, ["icon", "size"])) : v("", !0),
+            n.maximizable ? (c(), A(q, { key: 1 }, [
+              o(f) ? (c(), m(o(W), {
+                key: 1,
+                icon: o(cn),
+                size: n.size,
+                mode: "icon",
+                type: "primary",
+                background: "hover",
+                onClick: H[2] || (H[2] = (ae) => o(_)("maximized"))
+              }, null, 8, ["icon", "size"])) : (c(), m(o(W), {
+                key: 0,
+                icon: o(rn),
+                size: n.size,
+                mode: "icon",
+                type: "primary",
+                background: "hover",
+                onClick: H[1] || (H[1] = (ae) => o(_)("normal"))
+              }, null, 8, ["icon", "size"]))
+            ], 64)) : v("", !0),
+            n.closable ? (c(), m(o(W), {
+              key: 2,
+              icon: o(un),
+              size: n.size,
+              mode: "icon",
+              type: "danger",
+              background: "hover",
+              onClick: o(B)
+            }, null, 8, ["icon", "size", "onClick"])) : v("", !0)
+          ]),
+          default: p(() => [
+            z(j.$slots, "default", {}, () => [
+              n.content ? (c(), m(Y(n.content), { key: 0 })) : v("", !0),
+              n.src ? (c(), A("iframe", {
+                key: 1,
+                src: n.src,
+                class: "x-dialog__frame"
+              }, null, 8, to)) : v("", !0)
+            ])
+          ]),
+          _: 2
+        }, [
+          n.cancel || n.submit || j.$slots.footer || j.$slots.extra || j.$slots.handle ? {
+            name: "footer",
+            fn: p(() => [
+              z(j.$slots, "footer", {}, () => [
+                b(o(M), null, {
+                  default: p(() => [
+                    z(j.$slots, "extra")
+                  ]),
+                  _: 3
+                }),
+                b(o(M), null, {
+                  default: p(() => [
+                    z(j.$slots, "handle"),
+                    n.cancel ? (c(), m(o(ve), {
+                      key: 0,
+                      type: "default",
+                      size: n.size,
+                      onClick: o(F)
+                    }, {
+                      default: p(() => [
+                        N(O(typeof n.cancel == "string" ? n.cancel : "取消"), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size", "onClick"])) : v("", !0),
+                    n.submit ? (c(), m(o(ve), {
+                      key: 1,
+                      type: "primary",
+                      size: n.size,
+                      onClick: o(C)
+                    }, {
+                      default: p(() => [
+                        N(O(typeof n.submit == "string" ? n.cancel : "确定"), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["size", "onClick"])) : v("", !0)
+                  ]),
+                  _: 3
+                })
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["header", "class", "style", "size", "body", "onClick"])), [
+          [o(Qn), o(X)],
+          [o(yt), o(ee)]
+        ])
+      ], 2)
+    ])) : v("", !0);
+  }
+});
+function $e(a, t) {
+  const e = document.createElement("div"), n = b(bt, a);
+  n.appContext = t ?? $e._context, Fe(n, e);
+  const s = () => {
+    Fe(null, e), e.parentNode?.removeChild(e);
+  };
+  return n.props.onDestroy = () => {
+    s();
+  }, document.body.appendChild(e), {
+    vnode: n,
+    destroy: s
+  };
+}
+const no = /* @__PURE__ */ R("div", { class: "x-mask-sidebar__helper" }, null, -1), oo = /* @__PURE__ */ D({
+  __name: "Sidebar",
+  props: {
+    collapsed: { type: Boolean }
+  },
+  setup(a) {
+    const t = a;
+    return (e, n) => L((c(), m(o(M), {
+      class: U(["x-mask-sidebar", { "is-collapsed": t.collapsed }]),
+      grow: !1,
+      flex: "",
+      direction: "column"
+    }, {
+      default: p(() => [
+        z(e.$slots, "brand"),
+        b(o(M), {
+          class: "x-mask-sidebar__wrapper",
+          flex: "",
+          grow: "",
+          direction: "column",
+          justify: "space-between",
+          align: "center"
+        }, {
+          default: p(() => [
+            z(e.$slots, "default"),
+            no
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["class"])), [
+      [o(yt), {
+        dirs: ["e"],
+        disabled: t.collapsed,
+        maxWidth: 500,
+        minWidth: 200
+      }]
+    ]);
+  }
+}), ao = /* @__PURE__ */ D({
+  __name: "SwitchBar",
+  props: {
+    collasped: { type: Boolean, default: !1 },
+    favorite: { type: Boolean, default: !1 },
+    keyword: {}
+  },
+  emits: [
+    "update:collasped",
+    "update:keyword",
+    "update:favorite"
+  ],
+  setup(a, { emit: t }) {
+    const e = a, n = $(!1), s = $(""), l = $(!1), i = () => {
+      n.value = !0;
+    }, u = () => {
+      s.value = "", n.value = !1, t("update:keyword", s.value);
+    }, r = () => {
+      t("update:collasped", !e.collasped);
+    }, d = () => {
+      t("update:keyword", s.value);
+    }, f = () => {
+      t("update:favorite", l.value);
+    };
+    return (h, x) => (c(), m(o(M), {
+      class: "x-mask-switch-bar",
+      justify: "space-between",
+      align: "center"
+    }, {
+      default: p(() => [
+        e.collasped ? v("", !0) : (c(), m(o(M), {
+          key: 0,
+          class: "x-mask-switch-bar__left",
+          grow: ""
+        }, {
+          default: p(() => [
+            n.value ? v("", !0) : (c(), m(o(tt), {
+              key: 0,
+              modelValue: l.value,
+              "onUpdate:modelValue": x[0] || (x[0] = (V) => l.value = V),
+              class: "x-mask-switch-bar__switch",
+              "active-icon": o(at),
+              "inactive-icon": o(ot),
+              onChange: f
+            }, null, 8, ["modelValue", "active-icon", "inactive-icon"])),
+            n.value ? (c(), m(o(Ht), {
+              key: 1,
+              modelValue: s.value,
+              "onUpdate:modelValue": x[1] || (x[1] = (V) => s.value = V),
+              class: "x-mask-switch-bar__input",
+              size: "small",
+              placeholder: "请输入查询关键字",
+              onInput: d,
+              "prefix-icon": o(Be)
+            }, {
+              suffix: p(() => [
+                b(o(oe), {
+                  icon: o(st),
+                  onClick: u
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["modelValue", "prefix-icon"])) : v("", !0)
+          ]),
+          _: 1
+        })),
+        b(o(M), {
+          class: U(["x-mask-switch-bar__right", { "is-collasped": e.collasped }]),
+          flex: "",
+          align: "center",
+          justify: "center"
+        }, {
+          default: p(() => [
+            !n.value && !e.collasped ? (c(), m(o(W), {
+              key: 0,
+              icon: o(Be),
+              mode: "icon",
+              background: "hover",
+              size: "default",
+              circle: "",
+              onClick: i
+            }, null, 8, ["icon"])) : v("", !0),
+            e.collasped ? (c(), m(o(W), {
+              key: 1,
+              icon: o(Kt),
+              mode: "icon",
+              size: "default",
+              background: "hover",
+              onClick: r,
+              circle: ""
+            }, null, 8, ["icon"])) : v("", !0),
+            e.collasped ? v("", !0) : (c(), m(o(W), {
+              key: 2,
+              icon: o(Yt),
+              mode: "icon",
+              size: "default",
+              background: "hover",
+              circle: "",
+              onClick: r
+            }, null, 8, ["icon"]))
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ]),
+      _: 1
+    }));
+  }
+}), so = ["src"], lo = { key: 0 }, io = /* @__PURE__ */ D({
+  __name: "Brand",
+  props: {
+    collapsed: { type: Boolean, default: !1 },
+    logo: {},
+    title: {},
+    url: {}
+  },
+  setup(a) {
+    const t = a, e = ke(), n = () => {
+      t.url && e.push(t.url);
+    };
+    return (s, l) => (c(), m(o(M), {
+      class: U(["x-mask-brand", { "is-collapsed": t.collapsed }]),
+      align: "center"
+    }, {
+      default: p(() => [
+        b(o(M), {
+          class: "x-mask-brand__logo",
+          flex: "",
+          justify: "center",
+          align: "center",
+          onClick: n
+        }, {
+          default: p(() => [
+            z(s.$slots, "logo", {}, () => [
+              t.logo ? (c(), A("img", {
+                key: 0,
+                src: t.logo
+              }, null, 8, so)) : v("", !0)
+            ])
+          ]),
+          _: 3
+        }),
+        b(o(M), {
+          class: "x-mask-brand__title",
+          flex: "",
+          align: "center"
+        }, {
+          default: p(() => [
+            t.title ? (c(), A("span", lo, [
+              z(s.$slots, "title", {}, () => [
+                N(O(t.title), 1)
+              ])
+            ])) : v("", !0)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), fe = "__favorites__", me = "__search__", ro = /* @__PURE__ */ D({
+  __name: "Menu",
+  props: {
+    collapse: { type: Boolean, default: !1 },
+    keyword: {},
+    favorite: { type: Boolean },
+    favorites: {},
+    flatMenus: {},
+    menus: {},
+    active: {}
+  },
+  emits: ["select"],
+  setup(a, { emit: t }) {
+    const e = a, n = y(() => e.menus || []), s = y(() => String(e.active?.id)), l = y(() => [
+      {
+        id: fe,
+        title: "收藏",
+        icon: lt,
+        children: e.favorites?.length ? e.favorites : [
+          {
+            id: fe + "empty",
+            disabled: !0,
+            title: "暂无收藏菜单"
+          }
+        ]
+      }
+    ]), i = y(() => {
+      const r = (e.keyword || "").trim(), d = r ? (e.flatMenus || []).filter((f) => f.title?.includes(r)) : [];
+      return [
+        {
+          id: me,
+          title: "搜索",
+          icon: Be,
+          children: d?.length ? d : [
+            {
+              id: me + "empty",
+              disabled: !0,
+              title: "查询匹配不到菜单项"
+            }
+          ]
+        }
+      ];
+    }), u = (r) => {
+      t("select", r);
+    };
+    return (r, d) => (c(), A(q, null, [
+      L(b(o(M), {
+        class: "x-mask-menu",
+        grow: "",
+        flex: !1,
+        overflow: "auto"
+      }, {
+        default: p(() => [
+          L(b(o(G), {
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0,
+              showTimeout: 200,
+              hideTimeout: 200
+            },
+            data: n.value,
+            "default-icon": o(se),
+            collapse: !0,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active"]), [
+            [J, e.collapse]
+          ]),
+          L(b(o(G), {
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0
+            },
+            data: n.value,
+            "default-icon": o(se),
+            collapse: !1,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active"]), [
+            [J, !e.collapse]
+          ]),
+          n.value.length ? v("", !0) : (c(), m(o(Lt), {
+            key: 0,
+            description: "暂无菜单数据"
+          }))
+        ]),
+        _: 1
+      }, 512), [
+        [J, !e.favorite && !e.keyword]
+      ]),
+      L(b(o(M), {
+        class: "x-mask-menu",
+        grow: "",
+        flex: !1,
+        overflow: "auto"
+      }, {
+        default: p(() => [
+          L(b(o(G), {
+            class: "x-mask-menu__favorites",
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0,
+              showTimeout: 200,
+              hideTimeout: 200
+            },
+            data: l.value,
+            "default-icon": o(se),
+            collapse: !0,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            "default-openeds": [fe],
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active", "default-openeds"]), [
+            [J, e.collapse]
+          ]),
+          L(b(o(G), {
+            class: "x-mask-menu__favorites",
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0,
+              showTimeout: 200,
+              hideTimeout: 200
+            },
+            data: l.value,
+            "default-icon": o(se),
+            collapse: !1,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            "default-openeds": [fe],
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active", "default-openeds"]), [
+            [J, !e.collapse]
+          ])
+        ]),
+        _: 1
+      }, 512), [
+        [J, e.favorite && !e.keyword]
+      ]),
+      e.keyword ? L((c(), m(o(M), {
+        key: 0,
+        class: "x-mask-menu",
+        grow: "",
+        flex: !1,
+        overflow: "auto"
+      }, {
+        default: p(() => [
+          L(b(o(G), {
+            class: "x-mask-menu__search",
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0,
+              showTimeout: 200,
+              hideTimeout: 200
+            },
+            data: i.value,
+            "default-icon": o(se),
+            collapse: !0,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            "default-openeds": [me],
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active", "default-openeds"]), [
+            [J, e.collapse]
+          ]),
+          L(b(o(G), {
+            class: "x-mask-menu__search",
+            subMenu: {
+              popperClass: "x-mask-menu-popper",
+              teleported: !0,
+              showTimeout: 200,
+              hideTimeout: 200
+            },
+            data: i.value,
+            "default-icon": o(se),
+            collapse: !1,
+            "collapse-transition": !1,
+            "default-active": s.value,
+            "default-openeds": [me],
+            onSelect: u
+          }, null, 8, ["data", "default-icon", "default-active", "default-openeds"]), [
+            [J, !e.collapse]
+          ])
+        ]),
+        _: 1
+      }, 512)), [
+        [J, !!e.keyword]
+      ]) : v("", !0)
+    ], 64));
+  }
+}), co = { class: "x-mask-tabs__trigger" }, uo = { key: 1 }, po = ["onDragstart", "onDragend"], fo = { key: 1 }, mo = /* @__PURE__ */ D({
+  __name: "Tabs",
+  props: {
+    tabs: {},
+    home: {},
+    isActiveTab: { type: Function },
+    value: {},
+    favorites: {}
+  },
+  emits: ["click", "remove", "refresh", "toggleFavorite", "dialog"],
+  setup(a, { emit: t }) {
+    const e = a, n = (d) => {
+      const f = !!e.favorites.find(
+        (h) => h === d.menu || h.id === d.menu?.id
+      );
+      return [
+        {
+          icon: Gt,
+          label: "刷新",
+          name: "refresh",
+          value: d
+        },
+        "|",
+        {
+          icon: f ? at : lt,
+          label: "收藏",
+          name: "favorite",
+          value: d.menu,
+          disabled: !d.menu
+        },
+        "|",
+        {
+          icon: qt,
+          label: "弹窗",
+          name: "dialog",
+          value: d
+        }
+      ];
+    }, s = (d) => {
+      const f = d.paneName;
+      if (f === e.home.id) {
+        t("click", e.home);
+        return;
+      }
+      const h = e.tabs.find((x) => x.id === f);
+      h && t("click", h);
+    }, l = (d) => {
+      const f = e.tabs.find((h) => h.id === d);
+      f && t("remove", f);
+    }, i = (d) => {
+      switch (d.name) {
+        case "refresh":
+          t("refresh", d.value);
+          break;
+        case "favorite":
+          t("toggleFavorite", d.value);
+          break;
+        case "dialog":
+          t("dialog", d.value);
+          break;
+      }
+    }, u = (d, f) => {
+      f.dataTransfer && (f.dataTransfer.setData("tab", d.id), f.target && f.target.classList.add("is-dagging"));
+    }, r = (d, f) => {
+      f.target && f.target.classList.remove("is-dagging");
+    };
+    return (d, f) => (c(), m(o(M), {
+      ref: "tabsRef",
+      class: "x-mask-tabs",
+      height: "100%",
+      grow: "",
+      flex: "",
+      justify: "flex-end",
+      direction: "column"
+    }, {
+      default: p(() => [
+        b(o(Wt), {
+          type: "card",
+          "model-value": e.value,
+          onTabRemove: l,
+          onTabClick: s
+        }, {
+          default: p(() => [
+            e.home ? (c(), m(o(Ue), {
+              key: 0,
+              name: e.home.id
+            }, {
+              label: p(() => [
+                R("div", co, [
+                  e.home.icon ? (c(), m(Y(o(be)(e.home.icon)), { key: 0 })) : v("", !0),
+                  e.home.title ? (c(), A("span", uo, O(e.home.title), 1)) : v("", !0)
+                ])
+              ]),
+              _: 1
+            }, 8, ["name"])) : v("", !0),
+            (c(!0), A(q, null, we(e.tabs, (h) => (c(), m(o(Ue), {
+              key: h.id,
+              name: h.id,
+              lazy: "",
+              closable: ""
+            }, {
+              label: p(() => [
+                b(o(nt), {
+                  "open-delay": 500,
+                  placement: "bottom",
+                  trigger: "hover",
+                  width: "200px",
+                  disabled: h.id !== e.value
+                }, {
+                  reference: p(() => [
+                    R("div", {
+                      class: "x-mask-tabs__trigger",
+                      draggable: "true",
+                      onDragstart: (x) => u(h, x),
+                      onDragend: (x) => r(h, x)
+                    }, [
+                      h.icon ? (c(), m(Y(o(be)(h.icon)), { key: 0 })) : v("", !0),
+                      h.title ? (c(), A("span", fo, O(h.title), 1)) : v("", !0)
+                    ], 40, po)
+                  ]),
+                  default: p(() => [
+                    b(o(Re), {
+                      items: n(h),
+                      mode: "text",
+                      size: "small",
+                      type: "info",
+                      onClick: i
+                    }, null, 8, ["items"])
+                  ]),
+                  _: 2
+                }, 1032, ["disabled"])
+              ]),
+              _: 2
+            }, 1032, ["name"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]),
+      _: 1
+    }, 512));
+  }
+}), go = /* @__PURE__ */ D({
+  __name: "ThemeSwitch",
+  setup(a) {
+    const t = fn();
+    return (e, n) => (c(), m(o(tt), {
+      class: "x-mask-theme-switch",
+      modelValue: o(t),
+      "onUpdate:modelValue": n[0] || (n[0] = (s) => ge(t) ? t.value = s : null),
+      size: "default",
+      "active-action-icon": o(en),
+      "inactive-action-icon": o(tn)
+    }, null, 8, ["modelValue", "active-action-icon", "inactive-action-icon"]));
+  }
+}), ho = { class: "x-mask-toolbar__menu-item" }, vo = /* @__PURE__ */ D({
+  __name: "Toolbar",
+  props: {
+    tabs: { default: () => [] },
+    actions: {},
+    theme: { type: Boolean }
+  },
+  emits: [
+    "closeOtherTabs",
+    "closeAllTabs",
+    "closeTab",
+    "clickTab",
+    "actionClick",
+    "actionCommand"
+  ],
+  setup(a, { emit: t }) {
+    const e = a, n = y(() => {
+      const r = e.tabs.map((d, f) => ({
+        divided: f === 0,
+        label: d.title,
+        command: d
+      }));
+      return [
+        {
+          label: "关闭其他",
+          command: "other"
+        },
+        {
+          label: "关闭全部",
+          command: "all"
+        },
+        ...r
+      ];
+    }), s = (r) => {
+      t("closeTab", r.command);
+    }, l = (r) => {
+      switch (r.command) {
+        case "all":
+          t("closeAllTabs");
+          break;
+        case "other":
+          t("closeOtherTabs");
+          break;
+        default:
+          t("clickTab", r.command);
+          break;
+      }
+    }, i = (r) => {
+      t("actionClick", r);
+    }, u = (r, d) => {
+      t("actionCommand", r, d);
+    };
+    return (r, d) => (c(), m(o(M), {
+      class: "x-mask-toolbar",
+      align: "center"
+    }, {
+      default: p(() => [
+        b(o(W), {
+          icon: o(nn),
+          menus: n.value,
+          dropdown: { size: "small" },
+          mode: "icon",
+          circle: "",
+          background: "hover",
+          onCommand: l
+        }, {
+          item: p(({ item: f }) => [
+            R("span", ho, [
+              N(O(f.label) + " ", 1),
+              ["other", "all"].includes(f.command) ? v("", !0) : (c(), m(o(oe), {
+                key: 0,
+                onClick: Et((h) => s(f), ["stop"]),
+                icon: o(st)
+              }, null, 8, ["onClick", "icon"]))
+            ])
+          ]),
+          _: 1
+        }, 8, ["icon", "menus"]),
+        b(o(ue), { direction: "vertical" }),
+        e.actions ? (c(), m(o(Re), {
+          key: 0,
+          circle: "",
+          mode: "icon",
+          size: "default",
+          background: "hover",
+          items: r.actions,
+          onClick: i,
+          onCommand: u
+        }, null, 8, ["items"])) : v("", !0),
+        e.actions ? (c(), m(o(ue), {
+          key: 1,
+          direction: "vertical"
+        })) : v("", !0),
+        e.theme ? (c(), m(go, { key: 2 })) : v("", !0),
+        e.theme ? (c(), m(o(ue), {
+          key: 3,
+          direction: "vertical"
+        })) : v("", !0),
+        z(r.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), yo = /* @__PURE__ */ D({
+  __name: "Avatar",
+  props: {
+    avatar: {}
+  },
+  setup(a) {
+    const t = a;
+    return (e, n) => (c(), m(o(nt), {
+      width: 200,
+      "popper-class": "x-mask-avatar__popper",
+      disabled: !e.$slots.default
+    }, {
+      reference: p(() => [
+        b(o(Qt), {
+          class: "x-mask-avatar",
+          shape: "circle",
+          icon: o(on),
+          src: t.avatar,
+          size: 26
+        }, null, 8, ["icon", "src"])
+      ]),
+      default: p(() => [
+        e.$slots.default ? z(e.$slots, "default", { key: 0 }) : v("", !0)
+      ]),
+      _: 3
+    }, 8, ["disabled"]));
+  }
+}), Ze = /* @__PURE__ */ D({
+  __name: "Content",
+  props: {
+    createView: { type: Function },
+    exclude: {}
+  },
+  setup(a) {
+    const t = a;
+    return (e, n) => (c(), m(o(M), {
+      class: "x-mask__content",
+      flex: !1,
+      grow: "",
+      padding: ""
+    }, {
+      default: p(() => [
+        z(e.$slots, "default"),
+        b(o(it), null, {
+          default: p(({ Component: s, route: l }) => [
+            (c(), m(It, {
+              exclude: t.exclude
+            }, [
+              s ? (c(), m(Y(t.createView(s, l)), {
+                key: l.fullPath
+              })) : v("", !0)
+            ], 1032, ["exclude"]))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 3
+    }));
+  }
+}), bo = 140, _o = {
+  /**
+   * 系统logo
+   */
+  logo: {
+    type: String,
+    default: ft
+  },
+  /**
+   * 系统标题
+   */
+  title: {
+    type: String,
+    default: "VTJ.PRO"
+  },
+  /**
+   * 菜单项数据
+   */
+  menus: {
+    type: [Array, Function],
+    default() {
+      return [];
+    }
+  },
+  /**
+   * 收藏菜单项
+   */
+  favorites: {
+    type: [Array, Function],
+    default() {
+      return [];
+    }
+  },
+  /**
+   * 菜单项数据适配函数，用作转换菜单项数据
+   */
+  menuAdapter: {
+    type: Function
+  },
+  /**
+   * 主页Tab配置
+   */
+  home: {
+    type: [String, Object],
+    default: "/"
+  },
+  /**
+   * 最大tabs数量
+   */
+  tabs: {
+    type: Number,
+    default: 20
+  },
+  /**
+   * 右上角工具条配置
+   */
+  actions: {
+    type: Array
+  },
+  /**
+   * 用户头像图片url
+   */
+  avatar: {
+    type: String
+  },
+  /**
+   * 开启主题切换
+   */
+  theme: {
+    type: Boolean
+  },
+  /**
+   * 禁用框架容器
+   */
+  disabled: {
+    type: Boolean
+  },
+  addFavorite: {
+    type: Function
+  },
+  removeFavorite: {
+    type: Function
+  }
+}, _t = Symbol(), wt = Symbol();
+function wo(a) {
+  const t = $(!1), e = $(""), n = $(!1);
+  return {
+    collapsed: t,
+    keyword: e,
+    favorite: n
+  };
 }
-function Ve(e, t = {}) {
-  const n = {
-    edge: 5,
-    minWidth: 50,
-    minHeight: 50,
-    dirs: ["n", "s", "w", "e"],
-    ...t
-  }, s = U(), r = L(""), l = L(!1), { onStart: o, onEnd: u, boundingOptions: i } = n, a = P(e, i), { left: p, top: c, width: d, height: h, update: I } = a;
-  return s.run(() => {
-    C(document, "mousemove", (v) => {
-      l.value ? ke(n, v, r.value, a) : r.value = Ee(n, v, a);
-    }), C(document, "mousedown", () => {
-      I(), r.value && (l.value = !0, o && o(a));
-    }), C(document, "mouseup", () => {
-      l.value = !1, r.value = "", u && u(a), I();
-    }), z(r, (v) => {
-      const $ = document.body;
-      $.style.cursor = v ? `${v}-resize` : "", v ? $.classList.add(j) : $.classList.remove(j);
+function ko(a) {
+  const t = dt();
+  return y(() => {
+    const e = a.home;
+    return Object.assign(
+      { id: t, url: "/", name: "MaskHome", icon: an, closable: !1 },
+      typeof e == "string" ? { url: e } : e || {}
+    );
+  });
+}
+function kt(a, t) {
+  let e = [];
+  return a.forEach((n) => {
+    n = t ? t(n) : n, n.children ? e = e.concat(kt(n.children, t)) : e.push(n);
+  }), e;
+}
+function xo(a, t) {
+  const e = ke(), n = Oe([]), s = Oe([]), l = y(() => kt(n.value, a.menuAdapter)), i = y(() => mn(l.value, "id")), u = $(null), r = (k) => {
+    const _ = typeof k == "object" ? k.id : k, E = i.value.get(_);
+    if (!E) {
+      console.warn("找不到菜单", k);
+      return;
+    }
+    const { type: B = "route", url: g, title: I, icon: C } = E;
+    if (!g) {
+      u.value = E, t("select", E);
+      return;
+    }
+    if (B === "route") {
+      gn(g) || g.startsWith("//") ? window.open(g) : (u.value = E, e.push(g).catch((F) => F));
+      return;
+    }
+    if (B === "window") {
+      window.open(g);
+      return;
+    }
+    B === "dialog" && $e({
+      resizable: !0,
+      bodyPadding: !1,
+      width: "80%",
+      height: "80%",
+      title: I,
+      icon: C,
+      src: g
     });
-  }), Z(() => {
-    s.stop();
-  }), {
-    left: p,
-    top: c,
-    width: d,
-    height: h,
-    direction: r,
-    resizing: l,
-    update: I
+  }, d = async () => {
+    n.value = typeof a.menus == "function" ? await a.menus() || [] : a.menus ?? [], s.value = typeof a.favorites == "function" ? await a.favorites() || [] : a.favorites ?? [];
+  }, f = (k) => {
+    s.value = [k, ...s.value], a.addFavorite && a.addFavorite(k);
+  }, h = (k) => {
+    s.value = s.value.filter((_) => _.id !== k.id), a.removeFavorite && a.removeFavorite(k);
+  }, x = (k) => !!s.value.find((_) => _ === k || _.id === k.id), V = (k) => {
+    x(k) ? h(k) : f(k);
+  };
+  return Ge(d), {
+    menus: n,
+    favorites: s,
+    flatMenus: l,
+    active: u,
+    select: r,
+    toggleFavorite: V
+  };
+}
+function zo(a, t, e, n, s) {
+  const l = Ve(), i = ke(), u = {}, r = $([]), d = $(), { width: f } = rt(d), h = y(() => Math.floor(f.value / bo)), x = y(
+    () => r.value.slice(0, h.value).filter((w) => !w.dialog)
+  ), V = y(() => r.value.slice(h.value)), k = (w) => e.value.find((S) => S.url === w), _ = (w) => l.fullPath === w.url, E = (w) => s.value.id === w ? s.value : r.value.find((S) => S.id === w), B = $(""), g = y(() => E(B.value)), I = (w) => {
+    i.push(w.url).catch((S) => S);
+  }, C = (w) => {
+    B.value = w.id, l.fullPath !== w.url && I(w);
+  }, F = () => {
+    I(s.value);
+  }, X = (w) => {
+    const S = r.value.find((T) => T.url === w.url || T.id === w.id);
+    S ? C(S) : (r.value.unshift(w), C(w));
+  }, ee = async (w) => {
+    const { url: S = l.fullPath, icon: T, title: ze = "新建标签页" } = w || {}, de = u[S], Se = dt(), Ce = pt(S);
+    return {
+      id: Se,
+      name: Ce,
+      url: S,
+      icon: T,
+      title: ze,
+      closable: !0,
+      menu: w,
+      ...de ? await de() : {}
+    };
+  }, te = async (w) => {
+    if (await Te.confirm("是否关闭页签", "提示", {
+      type: "warning"
+    }).catch((T) => !1)) {
+      if (r.value = r.value.filter((T) => T.id !== w.id), B.value === w.id) {
+        const T = r.value[0];
+        I(T || s.value);
+      }
+      return w;
+    }
+  }, j = (w) => {
+    const S = r.value.findIndex((T) => T.id === w.id);
+    if (S >= 0) {
+      const T = r.value[S];
+      r.value.splice(S, 1, Object.assign(T, w));
+    }
+  }, H = async () => {
+    if (!await Te.confirm("是否关闭全部页签", "提示", {
+      type: "warning"
+    }).catch((T) => !1))
+      return;
+    const S = r.value;
+    return r.value = [], C(s.value), S;
+  }, ae = async () => {
+    if (!await Te.confirm("是否关闭其他页签", "提示", {
+      type: "warning"
+    }).catch((T) => !1))
+      return;
+    const S = r.value.filter((T) => T.id !== B.value);
+    return r.value = r.value.filter((T) => T.id === B.value), S;
+  }, xe = (w) => {
+    const S = r.value.filter((T) => T.id !== w.id);
+    r.value = [w, ...S], C(w);
+  }, re = async () => {
+    await le();
+    const w = s.value.url === l.fullPath, S = k(l.fullPath);
+    if (w)
+      B.value = s.value.id;
+    else {
+      const T = await ee(S);
+      X(T);
+    }
+    await le(), n.value = S || null;
+  };
+  return ne(e, re), ne(l, re, { immediate: !0 }), De(_t, u), {
+    tabRef: d,
+    tabs: r,
+    showTabs: x,
+    currentTab: g,
+    changeTab: I,
+    removeTab: te,
+    updateTab: j,
+    addTab: X,
+    home: s,
+    tabValue: B,
+    isCurrentTab: _,
+    activeHome: F,
+    activeTab: C,
+    dropdownTabs: V,
+    removeAllTabs: H,
+    removeOtherTabs: ae,
+    moveToShow: xe
+  };
+}
+function So(a) {
+  const t = /* @__PURE__ */ new Map(), e = $([]), n = Ye({}), s = {}, { updateTab: l, isCurrentTab: i, activeHome: u, tabs: r } = a, d = (g, I) => {
+    const C = I.fullPath;
+    if (t.has(C))
+      return t.get(C);
+    {
+      const F = pt(C), X = {
+        name: F,
+        setup() {
+          const ee = y(() => n[C] || document.body), te = y(() => !n[C]), j = y(() => !e.value.includes(F));
+          return De(
+            sn,
+            Bt({ ...I })
+          ), () => j.value ? K(
+            qe,
+            {
+              to: ee.value,
+              disabled: te.value
+            },
+            [K(g)]
+          ) : null;
+        }
+      };
+      return t.set(C, X), X;
+    }
+  }, f = (g) => {
+    g.dialog = void 0, delete n[g.url];
+    const I = s[g.id];
+    I && (I.destroy(), delete s[g.id], l(g));
+  }, h = (g = []) => {
+    g.forEach((I) => {
+      f(I);
+    });
+  }, x = async (g) => {
+    g.dialog = {
+      ...g.dialog,
+      onMinimized: () => {
+        f(g);
+      },
+      onClose: async () => {
+        f(g), r.value = r.value.filter((C) => C.id !== g.id);
+      }
+    }, l(g);
+    const I = $e({
+      title: g.title,
+      icon: g.icon,
+      modal: !1,
+      resizable: !0,
+      draggable: !0,
+      ...g.dialog,
+      onOpen(C) {
+        n[g.url] = C.refs.panelRef?.bodyRef?.$el;
+      }
+    });
+    return await le(), i(g) && u(), s[g.id] = I, I;
+  }, V = async (g) => {
+    e.value = [g.name], await le(), e.value = [];
+  }, k = async (g) => {
+    e.value = g.map((I) => I.name), await le(), e.value = [];
+  }, _ = (g) => (g.preventDefault(), !1), E = (g) => {
+    if (g.dataTransfer) {
+      const I = g.dataTransfer.getData("tab"), C = r.value.find((F) => F.id === I);
+      if (C) {
+        const { clientX: F, clientY: X } = g;
+        C.dialog = {
+          left: F,
+          top: X
+        }, x(C);
+      }
+    }
+  }, B = (g) => !!n[g];
+  return ye(document, "dragover", _), ye(document, "drop", E), {
+    createView: d,
+    openDialog: x,
+    refresh: V,
+    exclude: e,
+    cleanCache: k,
+    hasDialog: B,
+    closeDialog: f,
+    closeDialogs: h
+  };
+}
+const Co = /* @__PURE__ */ D({
+  name: "XMask",
+  __name: "Mask",
+  props: _o,
+  emits: ["select", "actionClick", "actionCommand"],
+  setup(a, { emit: t }) {
+    const e = a, n = ko(e), { collapsed: s, keyword: l, favorite: i } = wo(), { menus: u, favorites: r, flatMenus: d, active: f, select: h, toggleFavorite: x } = xo(e, t), {
+      tabRef: V,
+      showTabs: k,
+      currentTab: _,
+      changeTab: E,
+      removeTab: B,
+      tabs: g,
+      updateTab: I,
+      isCurrentTab: C,
+      activeHome: F,
+      removeAllTabs: X,
+      removeOtherTabs: ee,
+      dropdownTabs: te,
+      moveToShow: j
+    } = zo(e, t, d, f, n), { createView: H, openDialog: ae, refresh: xe, exclude: re, cleanCache: w, closeDialogs: S } = So({
+      tabs: g,
+      updateTab: I,
+      isCurrentTab: C,
+      activeHome: F
+    }), T = async (P) => {
+      await B(P) && await w([P]);
+    }, ze = async () => {
+      const P = await X();
+      P && (S(P), await w(P));
+    }, de = async () => {
+      const P = await ee();
+      P && (S(P), await w(P));
+    }, Se = (P) => {
+      t("actionClick", P);
+    }, Ce = (P, Z) => {
+      t("actionCommand", P, Z);
+    };
+    return De(wt, {
+      tabs: g,
+      flatMenus: d,
+      favorites: r,
+      updateTab: I,
+      active: f,
+      currentTab: _
+    }), (P, Z) => (c(), m(o(M), { class: "x-mask" }, {
+      default: p(() => [
+        e.disabled ? (c(), m(Ze, {
+          key: 1,
+          createView: o(H),
+          exclude: o(re)
+        }, {
+          default: p(() => [
+            P.$slots.default ? z(P.$slots, "default", { key: 0 }) : v("", !0)
+          ]),
+          _: 3
+        }, 8, ["createView", "exclude"])) : (c(), A(q, { key: 0 }, [
+          b(oo, { collapsed: o(s) }, {
+            brand: p(() => [
+              b(io, {
+                logo: e.logo,
+                title: e.title,
+                url: o(n).url,
+                collapsed: o(s)
+              }, null, 8, ["logo", "title", "url", "collapsed"])
+            ]),
+            default: p(() => [
+              b(ao, {
+                collasped: o(s),
+                "onUpdate:collasped": Z[0] || (Z[0] = (ce) => ge(s) ? s.value = ce : null),
+                favorite: o(i),
+                "onUpdate:favorite": Z[1] || (Z[1] = (ce) => ge(i) ? i.value = ce : null),
+                keyword: o(l),
+                "onUpdate:keyword": Z[2] || (Z[2] = (ce) => ge(l) ? l.value = ce : null)
+              }, null, 8, ["collasped", "favorite", "keyword"]),
+              b(ro, {
+                collapse: o(s),
+                keyword: o(l),
+                favorite: o(i),
+                favorites: o(r),
+                flatMenus: o(d),
+                menus: o(u),
+                active: o(f),
+                onSelect: o(h)
+              }, null, 8, ["collapse", "keyword", "favorite", "favorites", "flatMenus", "menus", "active", "onSelect"])
+            ]),
+            _: 1
+          }, 8, ["collapsed"]),
+          b(o(M), {
+            class: "x-mask__main",
+            grow: "",
+            flex: "",
+            direction: "column"
+          }, {
+            default: p(() => [
+              b(o(M), {
+                class: "x-mask-topbar",
+                justify: "space-between",
+                align: "center"
+              }, {
+                default: p(() => [
+                  b(mo, {
+                    ref_key: "tabRef",
+                    ref: V,
+                    favorites: o(r),
+                    tabs: o(k),
+                    home: o(n),
+                    value: o(_)?.id,
+                    onClick: o(E),
+                    onToggleFavorite: o(x),
+                    onRemove: T,
+                    onDialog: o(ae),
+                    onRefresh: o(xe)
+                  }, null, 8, ["favorites", "tabs", "home", "value", "onClick", "onToggleFavorite", "onDialog", "onRefresh"]),
+                  b(vo, {
+                    tabs: o(te),
+                    actions: e.actions,
+                    theme: e.theme,
+                    onCloseOtherTabs: de,
+                    onCloseAllTabs: ze,
+                    onCloseTab: T,
+                    onClickTab: o(j),
+                    onActionClick: Se,
+                    onActionCommand: Ce
+                  }, {
+                    default: p(() => [
+                      b(yo, {
+                        avatar: e.avatar
+                      }, et({ _: 2 }, [
+                        P.$slots.user ? {
+                          name: "default",
+                          fn: p(() => [
+                            z(P.$slots, "user")
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["avatar"])
+                    ]),
+                    _: 3
+                  }, 8, ["tabs", "actions", "theme", "onClickTab"])
+                ]),
+                _: 3
+              }),
+              b(Ze, {
+                createView: o(H),
+                exclude: o(re)
+              }, {
+                default: p(() => [
+                  P.$slots.default ? z(P.$slots, "default", { key: 0 }) : v("", !0)
+                ]),
+                _: 3
+              }, 8, ["createView", "exclude"])
+            ]),
+            _: 3
+          })
+        ], 64))
+      ]),
+      _: 3
+    }));
+  }
+});
+function Oo(a = {}) {
+  const t = Ve(), e = je(_t, null), n = je(wt, null);
+  if (e) {
+    const l = typeof a == "function" ? a : async () => a;
+    e[t.fullPath] = l;
+  }
+  return {
+    tab: y(() => n ? n.tabs.value.find((l) => l.url === t.fullPath) : null),
+    mask: n
   };
 }
-const Me = fe(we), Te = Me.install;
+const To = [
+  xn,
+  oe,
+  G,
+  Vn,
+  W,
+  Re,
+  M,
+  ht,
+  vt,
+  bt,
+  Co
+], jo = "0.6.0", Mo = hn(To), No = Mo.install;
 export {
-  B as INSTALLED_KEY,
-  X as IS_DRAGGING_CLASS_NAME,
-  j as IS_RESIZING_CLASS_NAME,
-  de as NOOP,
-  k as XIcon,
-  T as XMenu,
-  be as XSimpleMask,
-  _e as XStartup,
-  we as components,
-  De as getSizeValue,
-  ge as iconProps,
-  he as iconSizeMap,
-  Te as install,
-  fe as makeInstaller,
-  pe as omit,
-  Le as parseSize,
-  Ae as pick,
-  Pe as useDraggable,
-  Re as useIcon,
-  Ie as useIconProps,
-  Ve as useResizable,
-  Be as withInstall,
-  je as withInstallDirective,
-  Xe as withInstallFunction,
-  Oe as withNoopInstall
+  We as Draggable,
+  He as INSTALLED_KEY,
+  wt as MASK_KEY,
+  Fo as NOOP,
+  Qe as Resizable,
+  _t as TAB_CREATORS_KEY,
+  bo as TAB_ITEM_WIDTH,
+  W as XAction,
+  Re as XActionBar,
+  M as XContainer,
+  bt as XDialog,
+  ht as XHeader,
+  oe as XIcon,
+  Co as XMask,
+  G as XMenu,
+  vt as XPanel,
+  Vn as XSimpleMask,
+  xn as XStartup,
+  Nn as actionBarProps,
+  gt as actionProps,
+  To as components,
+  Un as containerProps,
+  $e as createDialog,
+  No as default,
+  Oo as defineTab,
+  Zn as dialogProps,
+  Xe as getSizeValue,
+  Xn as headerProps,
+  Sn as iconProps,
+  zn as iconSizeMap,
+  No as install,
+  hn as makeInstaller,
+  _o as maskProps,
+  Ro as omit,
+  Wn as panelProps,
+  pe as parseSize,
+  $o as pick,
+  Pe as useDisabled,
+  be as useIcon,
+  Fn as useIconProps,
+  Qn as vDraggable,
+  yt as vResizable,
+  jo as version
 };